body{
	width: 600px;
	margin: 20px auto;
	padding: 0;
	font-size: 13px;
	background: #05184d;
}

div#slider{
	width: 600px;
	margin: 0 auto;
	background: #ffffff;
	position: relative;
	overflow: hidden;
	border: 2px solid #fdf6dd;
	margin-top: 100px;
}

div#viewer{
	height: 350px;
	position: relative;
}

img{ 
	position: absolute; /* img{position: absolute;}하여 위로 띄어서 겹치게 해놓았다. */
}

img.image1{
	left: 0;
	top: 0;
}

img.image2{
	left: 600px; /* 2번째 이미지를 left 600으로 움직여 놓았다. */
	top: 0;
}

img.image3{
	left: 1200px; /* 3번째 이미지를 left 600*2로 움직여 놓았다. */
	top: 0;
}

img.image4{
	left: 1800px; /* 4번째 이미지를 left 600*3로 움직여 놓았다. */
	top: 0;
}

#btnGroup{
	position: absolute; /* 부모따라 위치를 선정을 한다 부모는 #viewer */
	bottom: 2%;
	right: 0; /* 4번 박스가 right 붙어 있으니 이게 싫으면 값을 10px 넣어주면 된다.*/
	margin: 0;
	padding: 0;
}

#btnGroup li{ /* li 숫자 박스 만들기 */
	float: left;
	width: 16px;
	height: 16px;
	list-style: none;
	margin-left: 6px;
	background: #60f;
	cursor: pointer;
}

#btnGroup li a{ /* li a 숫자 설정 */
	display: block;
	width: 100%;   /* 부모를 상속받아서 width 값은 16px */
	height: 100%;  /* 부모를 상속받아서 height 값은 16px */
	color: #000;
	text-decoration: none;
	text-align: center;
	background: #fdf6dd;
}

#btnGroup li a:hover{ 
	background: #ccff00;
}