.clearfix:after {
	clear: both;
	display: table;
	content: '';
}

*{
	font-size: 10pt;
}

#body {
	margin: 0 auto;
	width: 960px;
}

#head {
	border: 1px lightgray solid;
	height: 50px;
	box-shadow: 2px 2px 2px #eee;
	margin-right: 5px;
	margin-left: 5px;
}

#intro, #banner, #contents, #foot {
	margin-top: 10px;
}

#intro>div {
	border: 1px lightgray solid;
	float: left;
	width: 228px;
	height: 250px;
	margin-right: 5px;
	margin-left: 5px;
	box-shadow: 2px 2px 2px #eee;
}

#banner>div {
	border: 1px lightgray solid;
	float: left;
	margin-right: 5px;
	margin-left: 5px;
	width: 468px;
	height: 100px;
	box-shadow: 2px 2px 2px #eee;
}

#contents-left {
	width: 708px;
	height: 300px;
}

#contents-right {
	width: 228px;
	height: 300px;
}

#contents>div {
	border: 1px lightgray solid;
	float: left;
	margin-right: 5px;
	margin-left: 5px;
	box-shadow: 2px 2px 2px #eee;
}

#foot {
	border: 1px lightgray solid;
	height: 30px;
	box-shadow: 2px 2px 2px #eee;
	margin-right: 5px;
	margin-left: 5px;
}
@media screen and (max-width: 980px){ /* 화면 폭이 최대 980픽셀일때 이 설정을 적용함 화면이 작은 모바일같은곳에 적용됨 */
       #body{
	   width : 760px;
	   }
	   #intro>div       /*intro의 자식(div)들에 적용*/
	   {
	     width:178px;
		 height:250px;
	   }
	   #banner>div
	   {
	       width:368px;
		   height:100px;
	   }
	   #contents-left
	   {
	     width : 558px;
	   }
	   #contents-right
	   {
	     width : 178px;
	   }
}
@media screen and (max-width: 780px){ /* 화면 폭이 최대 780픽셀일때 이 설정을 적용함 화면이 작은 모바일같은곳에 적용됨 */
   #body
   {
   width: 560px;
   }
   #intro>div
   {
     width: 268px;
	 height : 100px;
   }
   #intro>div:nth-child(3)
   {
      width : 0px;
	  height : 0px;
	  visibility : hidden; /*안보이게 하는거 안보이게 하고 폭,넓이를 조정해서 없어진것처럼 보이게함*/
   }
   #intro>div:nth-child(4)
   {
      width : 0px;
	  height : 0px;
	  visibility : hidden;
   }
   #banner>div
   {
     width:548px;	 
   }
   #banner>div:last-child
   {
      width : 0px;
	  height : 0px;
	  visibility : hidden;
   }
   #contents-left
   {
     width: 548px;
   }
   #contents-right
   {
     width: 548px;
	 margin-top : 10px;
   }
   
}

@media screen and (max-width: 580px){ /* 화면 폭이 최대 580픽셀일때 이 설정을 적용함 화면이 작은 모바일같은곳에 적용됨 */
	#body{
	width:320px;
	}
	#intro>div
	{
	     width:148px;
		 height:130px;
	}
	#intro>div:nth-child(3) /* */
	{
	     margin-top: 10px;
	}
	#intro>div:nth-child(4) /* */
	{
	     margin-top: 10px;
	}
	#banner>div
	{
	   width: 308px;
	   height: 100px;
	}
	#banner>div:last-child{
	   margin-top: 10px;
	}
	#contents-left
	{
	   width: 308px;	
	}
	#contents-right
	{
	  width: 308px;
	  margin-top : 10px;
	}
}