@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:20px auto; overflow:hidden;}
.main_content:after {content:""; display:block; clear:both;}

.MC_wrap { position:relative; width:318px; height:220px; float:right}/* MC_box4,5를 묶어주는 div */

.MC_box1 {position:relative; width:100%; height:260px; margin-bottom:15px; border-radius:10px; overflow:hidden;}
.MC_box2 {position:relative; width:316px; height:220px; float:left;}
.MC_box3 {position:relative; width:316px; height:220px; float:left; margin:0 15px;}
.MC_box4 {position:relative; width:318px; height:102px}
.MC_box5 {position:relative; width:318px; height:102px; margin:16px 0 0; }
.MC_box6 {position:relative; width:316px; height:220px; float:left; margin-top:15px}
.MC_box7 {position:relative; width:316px; height:220px; float:left; margin:15px 15px 0; }
.MC_box8 {position:relative; width:318px; height:220px; float:right; margin-top:15px}
.MC_box9 {position:relative; width:100%; height:80px}

@media (max-width: 800px) {
	
	#container,
	.main_content{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
	
	#container { width:100%; padding-top:70px; }
	.main_content { width:95%; height:100%; }
	
	.MC_wrap { width:49%; float:left; margin-top:2%}
	.MC_box1 { width:100%; height:auto; margin-bottom:2%}
	.MC_box2 {width:49%}
	.MC_box3 {width:49%; float:right; margin:0}
	.MC_box4 {width:100%}
	.MC_box5 {width:100%}
	.MC_box6 {width:49%; margin:2% 0 2% 2%}
	.MC_box7 {width:49%;; margin:0}
	.MC_box8 {width:49%; margin:0}

}

@media (max-width: 680px) {	

	.MC_wrap { width:100%; float:none}
	.MC_box2, .MC_box3,	.MC_box4, .MC_box5, .MC_box6, .MC_box7, .MC_box8 {width:100%; float:none; margin:2% 0}

}

@media (max-width: 580px) {	
		
}

@media (max-width: 480px) {		
	


}

@media (max-width: 380px) {
	

}