/* <link rel="stylesheet" href="css/basic.css"/> */
/* html에서 링크를 걸어서 마진, 패딩을 없앴다. */

#wrap{
	width: 939px;
	margin-left: 400px;
}

#wrap ul{
	margin-top: 140px;
}

#wrap ul:after{ /* cf */
	content:"";
	display: block;
	clear: both;
}

#wrap ul li{
	float: left;
	overflow: hidden;
	height: 25px;
	margin-right: 6px;
}

#wrap ul li:last-child{
	margin-right: 0px;
}

#wrap ul li img{
	margin-top: 0px;
}

#wrap ul li .on img{
	margin-top: -25px;
	/* .on 위치를 위로 -25 만큼 올렸다 */
	/* 그러므로 #wrap ul li{overflow: hidden;} */
	/* overflow: hidden; 시켰던 보이지 않던 25px 올라와서 보인다. */
}

#content{
	position: relative;
	width: 487px;
	height: 323px;
}

#content div{
	position: absolute;
	left: 0;
	top: 0;
	width: 455px;
	height: 291px;
	margin-top: 10px;
	background: #666666;
	padding: 16px;
	display: none;
	/* #content div{display: none;} 사용하여 이미지가 다 사라지게 했기에 */
}

#content div:first-child{
	display: block;
	/* content div:first-child{ 사용하여 첫번째 이미지만 보이게 했다 */
}