@charset "utf-8"; 

div[class^="F04"]{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%; padding-top:155px; overflow:hidden; z-index:0;}
#container:after {display:block; content:""; clear:both; }

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

.conBox01{position:relative; width:100%; height:450px; max-width:1400px; margin:0 auto; overflow:hidden;}
.conBox02{position:relative; width:100%; height:447px; overflow:hidden;}
.conBox02::before{content:""; position:absolute; width:100%; height:430px; bottom:0; background:#f0f6fa}
.con_wrap{position:relative; width:100%; height: 100%; max-width:1400px; margin:0 auto; overflow:hidden;}
.con_wrap::before{content:""; position:absolute; width:394px; height: 447px; right:0; bottom: 0; background:url('/images/common/F_04_main/sklgrnd_bg.png') no-repeat;}

.F04_1{position:relative; width:955px; height:100%; float:left; overflow:hidden;}
.F04_2{position:relative; width:395px; height:322px; max-width:1400px; top:55px; float:right; z-index:3;}
.F04_3{position:absolute; width:955px; height:430px; bottom:0; float:left;}
.F04_4{position:relative; width:395px; height:100%; float:right;}


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

	.conBox01{width:95%; height:auto; padding:0 0 50px;}
	.conBox02{height:430px;}
	.conBox02::before{height:95%; bottom:0;}
	.con_wrap{width:95%;}
	.con_wrap::before{width: 29%; background-size:cover;}

	.F04_1{width:100%; height:450px;} 
	.F04_2{width:100%; height:160px; top:0;} 
	.F04_3{width:67%; height:402px; bottom:15px; float:none;} 
	.F04_4{width:29%; height:auto;}
}

@media screen and (max-width: 1200px) { 
	/* container */
	#container {padding:0; }	
}

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

	.conBox02{height:auto;}
	.conBox02::before{top:0; height:auto;}
	.con_wrap{height:1000px;}
	.con_wrap::before{width:100%; height:480px; bottom:60px; background-size:cover;}
	
	
	
	.F04_3{width:100%; top:60px; float:none;} 
	.F04_4{position:absolute; width:100%; bottom:60px;}

}

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

	.con_wrap{height:1500px;}
	.con_wrap::before{bottom:35px;}

	.F04_1{height:640px;}
	.F04_2{height:322px;}
	.F04_3{height:950px;}
	.F04_4{bottom:35px;}

}

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


}