@charset "utf-8";
/* CSS Document */

#container {position:relative; height:100%; background:url(/images/web/sasong-k/main/bg_main.png) no-repeat;  background-size: cover;  margin: 20px 0; }
#container:after {content:""; display:block; clear:both;}

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

.MC_box1 {position:relative; width:100%; height:304px;}
.MC_box2 {position:relative; width:316px; height:220px; float:left; overflow:hidden; margin:15px 0 0 0;}
.MC_box3 {position:relative; width:316px; height:220px; float:left; overflow:hidden; margin: 15px 0 0 16px;}
.MC_box4 {position:relative; width:316px; height:220px; float:left; overflow:hidden; margin: 15px 0 0 16px;}
.MC_box5 {position:relative; width:316px; height:220px; float:left; overflow:hidden; margin: 15px 0 0 0;}
.MC_box6 {position:relative; width:316px; height:220px; float:left; margin:15px 0 0 15px;}
.MC_box7 {position:relative; width:318px; height:105px; float:right; margin:15px 0;}
.MC_box8 {position:relative; width:318px; height:105px; float:right; }


@media (max-width: 800px) {
	
	#container,
	.main_content,
	.banner_zone{-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; }
	.main_content { width:95%; height:100%; }
	
	.MC_box1, MC_box2, MC_box3, MC_box4, MC_box5, MC_box6, MC_box7, MC_box8 {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;  }
	.MC_box1, MC_box2, MC_box3, MC_box4, MC_box5, MC_box6, MC_box7, MC_box8{-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease}
	
	
	.MC_box1 { width:100%; height:auto;}
	.MC_box2 { width:100%;}
	.MC_box3 { width: calc(50% - 7px); margin-left: 0px;}
	.MC_box4 { width: calc(50% - 9px);}
	.MC_box5 { width:100%; margin-left: 0px; }
	.MC_box6 { width:100%; margin-left: 0px; }
	.MC_box7 { width:49%; float:left;  margin-left: 0px; }
	.MC_box8 { width:49%; float:right; margin-top:10px;}
	
}

@media (max-width: 690px) {	

	.MC_box3 {width:100%;}
	.MC_box4 {width:100%; margin-left:0;}
	.MC_box7 {width:100%; margin-left: 0px; }
	.MC_box8 {width:100%; float:left; margin-top:0;}

}