@charset "utf-8"; 

div[class^="F10"]{box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -webkit-box-sizing:border-box; }

/* container */
#container {position:relative; width:100%; margin-top:155px; float:left; border-top:1px solid #ddd; overflow:hidden; z-index:0; }
#container:after {display:block; content:""; clear:both; }

.main_content {position:relative; width:100%; z-index:10; }

.conBox01{position: absolute;width:100%;left:50%;top: -400px;margin-left:-700px;overflow:hidden;}
.conBox02{position:relative; width:100%; padding:90px 0; overflow:hidden; background:url('/images/common/F_10_main/bg_conBox02_1.png') no-repeat center;}
.conBox02 .conWrap{position:relative; width:100%; max-width:1400px; margin:0 auto; overflow:hidden;}
.conBox02 .conWrap::before{content:""; position: absolute; right:10px; top:90px; width:620px; height:680px;; background:url('/images/common/F_10_main/bg_conBox02_2.png') no-repeat top center; background-size:cover;}

.F10_1{position:relative;width:450px;height: 130px;overflow:hidden;}
.F10_2{position:relative; width:735px; height:370px; }
.F10_3{position:relative; width:735px; height:260px; margin:60px 0 150px; overflow:hidden;}
.F10_4{position:relative; width:735px; height:370px; float:right; overflow:hidden;}

@media screen and (max-width:1420px) { 
	.conBox01, .conBox02, .F10_1, .F10_2, .F10_3, .F10_4{box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -webkit-box-sizing:border-box; }

	.conBox01{ width:100%; left:0; margin-left:0; padding:0 2.5%;}
	.F10_2{margin:0 2.5%;}
	.F10_3{margin:60px 2.5% 150px;}
	.F10_4{margin-right:2.5%;}
}

@media screen and (max-width:1200px) { 
	/* container */
	#container {margin:0; border-top:0;}
	
	.conBox01{top:-100px; }
	.conBox02{padding:30px 0 0;}
	.conBox02 .conWrap::before{width:350px; top:10px; background-size:contain; }
	.F10_3{width:95%;}
}

@media screen and (max-width:980px) { 
	
	.conBox02{background:#00549d; }

	.F10_2{height:auto;} 
	.F10_3{margin:40px 2.5% 30px;}
	.F10_4{width:100%; height:auto; margin:0; padding:20px 2.5%; background:#dce4ef;}

}
@media screen and (max-width:860px) {
	
	
	.conBox02 .conWrap::before{width:300px;}

	.F10_2{width:80%;}
}

@media screen and (max-width:590px) { 

	.conBox02 .conWrap::before{width:200px; top:0px; right:-30px;}

	.F10_2{width:95%;}
}

@media screen and (max-width:480px) {	

	.conBox01{position:relative; top:auto; left:auto; padding:15px 2.5% 0;} 
	.F10_1{width:100%;}
}