@charset "utf-8";
@import url('common.css');

html,body{position:relative;height:100%}
#MainContainer{position:relative;width:100%;height:100%;min-width:1100px;min-height:600px;background:url(../images/main_bg.jpg) 50% 100% no-repeat;background-size:cover;overflow:hidden}
#MainContainer *{box-sizing:border-box}
#MainContainer h1{position:absolute;bottom:5.1%;left:7%;width:6%;z-index:5}
#MainContainer h1>img{width:100%;height:auto}

.mainMenu{position:relative;float:left;width:52%;height:100%;margin-left:5%}
.mainMenu ul{position:relative;overflow:hidden;width:100%;height:100%}
.mainMenu ul li{position:relative;display:block;float:left;width:33%;height:100%;border-right:1px solid #58b7a1;border-left:1px solid #fff;text-align:center}
.mainMenu ul li:first-child{border-left:none}
.mainMenu ul li:last-child{border-right:none}
.mainMenu ul li>em{position:relative;display:block;float:left;width:100%;height:100%;background:#0098b1;opacity:0.4;border-right:1px solid #58b7a1;border-left:1px solid #fff;z-index:1}
.mainMenu ul li>span{position:absolute;display:block;top:50%;width:100%;margin-top:-25px;vertical-align:top;font-size:50px;color:#fff;font-weight:600;text-align:center;z-index:3}
.mainMenu ul li>div{display:none}
.mainMenu ul li>a{display:none}
.mainMenu ul li:hover>em{background:#161616;opacity:0.6}
.mainMenu ul li:hover>span{display:none}
.mainMenu ul li:hover>div{display:block;position:absolute;display:block;top:50%;width:100%;margin-top:-102px;vertical-align:top;text-align:center;z-index:3;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 1s;
	}
.mainMenu ul li:hover>div>img{width:85%;margin:0 auto}    
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {opacity:0}    
    100% {opacity:1}    
}
/* Standard syntax */
@keyframes example {
    0%   {opacity:0}    
    100% {opacity:1} 
}	
.mainMenu ul li:hover>div:after{
	position:absolute;top:-52px;left:50%;margin-left:-48px;width:96px;height:6px;background:#009ebb;content:' ';
	-webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: example2;
    animation-duration: 1s;
	}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example2 {
    0%   {opacity:0}    
    100% {opacity:1} 
}

/* Standard syntax */
@keyframes example2 {
    0%   {opacity:0}    
    100% {opacity:1} 
}	


.mainMenu ul li:hover>a{position:absolute;bottom:6%;right:10%;display:block;width:18.5%;min-width:45px;height:auto;z-index:3}
.mainMenu ul li:hover>a>img{width:100%;height:auto;opacity:0.95;z-index:3}


.mainCon{position:relative;float:left;width:26%;height:100%;left:11%}
.mainCon .mainCopy{position:relative;width:100%}
.mainCon .mainCopy>img{width:100%;max-width:483px;height:auto;margin-top:20%}
	@media (min-width: 1400px) and (max-width: 1780px){
		.mainMenu ul li:hover>div:after{top:-42px;left:50%;margin-left:-35px;width:70px;height:5px}
	}
	@media (min-width: 1200px) and (max-width: 1399px){
		.mainMenu ul li:hover>div:after{top:-35px;left:50%;margin-left:-35px;width:70px;height:4px}	
		.mainMenu ul li>span{font-size:43px}
	}
	@media (max-width: 1199px){
		.mainMenu ul li:hover>div:after{top:-30px;left:50%;margin-left:-28px;width:56px;height:3px}
		.mainMenu ul li>span{font-size:36px}
        }


.notice{position:absolute;bottom:5%;width:100%}
.notice *{color:#fff}
.notice .title{overflow:hidden;padding-bottom:10px}
.notice .title h2{float:left;font-size:30px;font-weight:600;text-align:left}
.notice .title a{float:right;margin-top:10px;padding-right:10px;font-size:15px;font-weight:600;text-align:right}
.notice .notice_con{text-align:left}
.notice .notice_con>li{position:relative;font-size:16px;line-height:25px;padding-left:10px;letter-spacing:-0.05em}
.notice .notice_con>li:after{position:absolute;left:0;top:12px;width:2px;height:2px;background:#fff;content:' ';opacity:0.7}
.notice .notice_con>li>a:hover{text-decoration:underline}

	@media (min-width: 1400px) and (max-width: 1780px){		
		.notice .title h2{font-size:27px !important}
		.notice .title a{font-size:13px !important}
		.notice .notice_con>li{font-size:13px !important;line-height:23px !important;padding-left:7px}
	}
	@media (min-width: 1200px) and (max-width: 1399px){		
		.notice .title h2{font-size:25px !important}
		.notice .title a{font-size:12px !important}
		.notice .notice_con>li{font-size:12px !important;line-height:21px !important;padding-left:5px}
	}
	@media (max-width: 1199px){			
		.notice .title h2{font-size:20px !important}
		.notice .title a{font-size:10px !important;font-weight:400}
		.notice .notice_con>li{font-size:11px !important;line-height:18px !important;padding-left:5px}
	}