#wrapper{
	width: 800px;
	margin: 0 auto;
}

/* width: 100%; 크기는 부모 #wrapper 크기를 이어받아서 800px이다. */
/* background 위치 조정은 x축을 라이트로 보내고, y축을 중앙으로 해라 */
header{
	width: 100%;
	height: 150px;
	background: #f46075 url(../images/nav2.png) no-repeat right center;
}

header nav{
	float:left;
	width: 70%;
	margin-top: 50px;
}

nav ul{
	list-style:none;
	
}

nav ul li{
	float:left;
	margin: 15px;
	font-weight: bold;
}

nav ul li a{
	color: #fff;
	text-decoration: none;
}





section{
	width:580px;
	float:left;
	padding: 5px;
}

/* overflow-y:scroll; 폰트 내용이 오버가되면 y 축으로 스크롤을 만들어라 */
section article{
	width: 250px;
	height: 200px;
	float:left;
	margin: 5px;
	padding: 10px;
	border: 1px solid #ccc;
	overflow-y:scroll;
}

/* display:inline; 사용하면 체크 박스 옆으로 강아지 집이 붙는다, */
h3{
	display:inline;
}

h2{
	font-size: 1.5em;	
}

p{
	line-height: 20px;
	font-size: 12px;
}

/* transition:2s; 마우스 오버시 2초 내 bg 컬러가 변해라 태그 */
.at1:hover{
	background: #ccff99;
	border: 1px solid green;
	transition:2s;
}

.at2:hover{
	background: #001040;
	border: 1px solid blue;
	transition:2s;
}

.at3:hover{
	background: #5900b3;
	border: 1px solid purple;
	transition:2s;
}

.at4:hover{
	background: #b30000;
	border: 1px solid red;
	transition:2s;
}
/*~div.ckeck{height:0;} 동의 선택자 */
/*.check{height:0;} 세로 사이즈가 0이 되어라 */
input[type=checkbox]:checked~div.check{height:0;}

/*세로축을 필히 적어줘야한다, */
.check{
	width: 230px;
	height: 220px;
	overflow:hidden;
	transition-duration: 1s;
}

aside{
	float:left;
	width:200px;
	height:auto;
	margin-top: 80px;
	border: 1px solid darkgreen;
	background: #ffffcc;
	text-align: center;
}

footer{
	width: 800px;
	background: #aaa;
	color: #666;
	text-align: center;
	clear:both;
	margin-bottom: 0;
}

/* font-style:normal; 폰트 기울기를 없앤다 */
address{
	padding: 20px;
	font-style:normal;
}