@charset "utf-8";

#container  {position:relative; height:100%; }
#container:after {content:""; display:block; clear:both;}

.main_content {position:relative; z-index:7; width:980px; margin:0 auto; padding-top:20px;}
.main_content:after {content:""; display:block; clear:both;}


.MC_box1 { position:relative; width:100%; height:358px; margin:0 auto;}
.MC_box2 {position:relative; width:240px; height:210px; float:left;}
.MC_box3 {position:relative;width: 500px;height: 210px;float:left;}  
.MC_box4 {position:relative;width:240px; height:210px; overflow:hidden; float:left;}
.MC_box5 {position:relative; width:240px; height:210px; float:left;}
.MC_box6 {position:relative; width:500px; height:210px; float:left;}
.MC_box7 {position:relative; width:240px; height:210px; float:left;}
.MC_box8 {position:absolute;top:-210px;left:0;width:260px;height:210px;z-index: 9999;}
.MC_box9 {position:relative; width:100%; overflow:hidden;}
/* .MC_box10 {position:relative;z-index:1;width:980px;height:78px;margin: 20px auto 20px;} */




@media (max-width: 800px) {
	
	#container,
	.main_content,
	.MC_box1, MC_box2, MC_box3, MC_box4, MC_box5, MC_box6, MC_box7, MC_box8, MC_box9, MC_box10
	{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
	
	#container {width:100%;padding-top:69px; background:#f9f9f9;}
	.main_content { width:95%; height:100%; padding-top:0;}


	
	.MC_box1 {position:relative;width:100%; height:200px; margin:0 auto;} /* 비주얼 */
	
	.MC_box2 {position:relative; width:50%; height:210px; float:left;}
	.MC_box3 {position:relative; width:50%; height:210px;  float:left;}  
	
	.MC_box4 {position:relative;width:50%; height:210px; overflow:hidden; float:left;}
	.MC_box5 {position:relative; width:50%; height:210px; float:left;}
	.MC_box6 {position:relative; width:100%; height:210px; float:left;}
	.MC_box7 {position:relative; width:50%; height:210px; float:left;}
	.MC_box8 {  position: relative; float:  left; top: auto; width: 50%;}
	.MC_box9 { position:relative; width:100%;}
	.MC_box10 {width:95%;}	




}





@media (max-width: 670px) {
	
	.MC_box1 {height:auto ;}
	
	.MC_box2 {position:relative; width:100%; height:210px;}  
	.MC_box3 {position:relative; width:100%; height:210px;}  
	



}


@media (max-width: 560px) {	


	
	.MC_box4 {width:100%;}
	.MC_box5 {width:100%;}
	.MC_box6 {width:100%;}
	.MC_box7 {width:100%;}
	.MC_box8 {width:100%;}
	.MC_box9  {width:100%;}
	.MC_box10 { position:relative; width:100%;}


}