/* CSS Document */
@charset "utf-8";

.banner{ position:relative; width:100%; overflow:hidden; }
.banner .bd{ width:100%; position:relative; left:50%; margin-left:-50%; z-index:9; }
.banner .bd  ul li{ background-size:cover !important; height:100%;overflow: hidden; }
.banner .hd{width:100%; position:absolute; left:50%; margin-left:-50%; z-index:11; bottom:110px; text-align:center; height:2px; margin-bottom:2px;display: none; }
.banner .hd ul{ display:inline-block; height:2px; }
.banner .hd ul li{ width:56px; height:4px; background:#fff; *display:block; display:inline-block; vertical-align:top; cursor:pointer; text-indent:9999999px; margin:0 5px; transition:all 0.5s }
.banner .hd ul .on{ background:#ff8d5f; }
.banner a.prev, .banner a.next{ width:53px; height:95px; position:absolute; top:50%; margin-top:-47px; z-index:15; transition:0.8s linear 0s; cursor:pointer; }
.banner a.prev{ left:10%; background:url(banner_prev.png) no-repeat; }
.banner a.next{ right:10%; background:url(banner_next.png) no-repeat; }

.banner .bd li a{animation: fadeBig 7s ease infinite;-webkit-animation: fadeBig 7s ease infinite;display: block;width: 100%;height: 100%;}
@keyframes fadeBig{
	0%{
		transform: scale(1);
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
	}
	50%{
		transform: scale(1.1);
		-moz-transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-o-transform: scale(1.1);
		-ms-transform: scale(1.1);
	}
	100%{
		transform: scale(1);
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
	}
}
@-moz-keyframes fadeBig{
	0%{
		transform: scale(1);
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
	}
	50%{
		transform: scale(1.1);
		-moz-transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-o-transform: scale(1.1);
		-ms-transform: scale(1.1);
	}
	100%{
		transform: scale(1);
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
	}
}
@-webkit-keyframes fadeBig{
	0%{
		transform: scale(1);
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
	}
	50%{
		transform: scale(1.1);
		-moz-transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-o-transform: scale(1.1);
		-ms-transform: scale(1.1);
	}
	100%{
		transform: scale(1);
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
	}
}
@-o-keyframes fadeBig{
	0%{
		transform: scale(1);
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
	}
	50%{
		transform: scale(1.1);
		-moz-transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-o-transform: scale(1.1);
		-ms-transform: scale(1.1);
	}
	100%{
		transform: scale(1);
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
	}
}

.wenan{position: absolute;left:50%;margin-left: -370px;top:50%;z-index: 100;top:50%;margin-top: -170px;}

.section1.active .wenan{-webkit-animation: zoomIn 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: zoomIn 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);}

#menu{position: fixed;right: 100px;top:50%;margin-top: -50px;z-index: 99;display: none;}
#menu li{margin:33px 0;}
#menu li a{display: block;width: 10px;text-align: center;height: 10px;border-radius: 10px;border:1px solid #ff8d5f;}
#menu li.active a{background: #ff8d5f;}

.dong{animation: heart .5s ease-in-out 1.5s infinite alternate;width:25px;height: 71px;background:url(arrow_down_03.png) no-repeat center;background-size: contain;position: absolute;bottom: 30px;left: 50%;margin-left: -12px;z-index: 99;}
.dong2{width:25px;height: 84px;background:url(arr_down2_03.png) no-repeat center;bottom: 70px;}
.dong a{display: block;width: 100%;height: 100%;}
@keyframes heart{
	from{transform:translate(0,0)}
	to{transform:translate(0,15px)}
}
.s2_c{padding-top: 110px;}
.s2_cc{position: relative;}
.s2_cc .s2_ccl{width: 539px;height: 420px;background: rgba(255,255,255,0.85);padding:0 103px 0 36px;}
.s2_cc .s2_ccl .s2_ccla{padding-top: 20px;}
.s2_cc .s2_ccl .s2_ccla div{font-size: 36px;color: #333333;}
.s2_cc .s2_ccl .s2_ccla div span{color: #ff8d5f;}
.s2_cc .s2_ccl .s2_ccla p{font-size: 14px;color: #333333;text-transform: uppercase;}
.s2_cc .s2_ccl .s2_cclb{margin-top: 25px;font-size: 20px;color: #ff8d5f;line-height: 24px;font-weight: bold;}
.s2_cc .s2_ccl .s2_cclc{margin-top: 15px;font-size: 16px;color: #333333;line-height: 28px;height: 168px;}
.s2_cc .s2_ccl .s2_ccld a{display: block;width: 174px;height: 36px;line-height: 36px;border:1px solid #333333;border-radius: 15px;text-align: center;font-size: 14px;color: #333333;}
.s2_cc .s2_ccr{border:1px solid #f1f2f3;position: absolute;right: 0;top:10px;overflow: hidden;}
.s2_cc .s2_ccr img{
	transition: transform 0.6s;
	-moz-transition: transform 0.6s; 
	-webkit-transition: transform 0.6s; 
	-o-transition: transform 0.6s;
	max-width: 100%;
	
}
.s2_cc .s2_ccr:hover  img{
	transform:scale(1.1);
-ms-transform:scale(1.1); 	
-moz-transform:scale(1.1); 	
-webkit-transform:scale(1.1); 
-o-transform:scale(1.1); 
}
.section2.active .s2_cc .s2_ccl{-webkit-animation: fadeInLeft 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: fadeInLeft 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);}
.section2.active .s2_cc .s2_ccr{-webkit-animation: fadeInRight 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: fadeInRight 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);}


.s3_c{padding-top: 80px;}
.s3_c .s3_t{text-align: center;}
.s3_c .s3_t div{font-size: 36px;color: #ffffff;}
.s3_c .s3_t p{font-size: 14px;color: #fff;text-transform: uppercase;}
.s3_c .s3_cc{margin-top: 25px;width: 1244px;}
.s3_c .s3_cc .s3_cci{float:left;position: relative;padding-bottom: 79px;margin-right: 41px;}
.s3_c .s3_cc .s3_cci .s3_ccia{border:1px solid #ffffff;overflow: hidden;}
.s3_c .s3_cc .s3_cci .s3_ccib{position: absolute;bottom: 0;width: 158px;height: 158px;border:1px solid #fff;border-radius: 158px;background: #ff8d5f;text-align: center;left:50%;margin-left: -80px;}
.s3_c .s3_cc .s3_cci .s3_ccib .s3_cciba{font-size: 24px;color: #ffffff;padding-top: 40px;}
.s3_c .s3_cc .s3_cci .s3_ccib .s3_ccibb{font-size: 16px;color: #ffffff;margin-top: 10px;}
.s3_c .s3_cc .s3_cci:hover .s3_ccib{background: #0070c0;}

.s3_c .s3_cc .s3_cci .s3_ccia img{
	transition: transform 0.6s;
	-moz-transition: transform 0.6s; 
	-webkit-transition: transform 0.6s; 
	-o-transition: transform 0.6s;
	max-width: 100%;
	
}
.s3_c .s3_cc .s3_cci:hover .s3_ccia img{
	transform:scale(1.1);
-ms-transform:scale(1.1); 	
-moz-transform:scale(1.1); 	
-webkit-transform:scale(1.1); 
-o-transform:scale(1.1); 
}
.section3.active .s3_c .s3_cc .s3_cci1{-webkit-animation: fadeInLeft 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: fadeInLeft 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);}
.section3.active .s3_c .s3_cc .s3_cci2{-webkit-animation: zoomIn 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: zoomIn 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);}
.section3.active .s3_c .s3_cc .s3_cci3{-webkit-animation: fadeInRight 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: fadeInRight 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);}


.section4.active .s4_c .s4_cl{-webkit-animation: fadeInLeft 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: fadeInLeft 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);}
.section4.active .s4_c .s4_cr .s4_cria{-webkit-animation: fadeInDown 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: fadeInDown 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);}
.section4.active .s4_c .s4_cr .s4_crib{-webkit-animation: fadeInUp 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: fadeInUp 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);}


.s4_c{padding-top: 80px;}
.s4_c .s4_cl{float:left;width: 347px;}
.s4_c .s4_cl .s4_cla{height: 231px;background: #ff8d5f;text-align: center;}
.s4_c .s4_cl .s4_cla div{font-size: 36px;color: #ffffff;padding-top: 70px;}
.s4_c .s4_cl .s4_cla p{font-size: 14px;color: #ffffff;text-transform: uppercase;}
.s4_c .s4_cl .s4_clb{height: 236px;background: #0070c0;margin-top: 9px;padding-top: 38px;}
.s4_c .s4_cl .s4_clb ul li{line-height: 48px;font-size: 24px;color: #ffffff;text-align: center;}
.s4_c .s4_cl .s4_clb ul li:hover{background: url(s4_1_11.png) no-repeat center;}
.s4_c .s4_cl .s4_clb ul li a{color: #fff;}
.s4_c .s4_cr{float:right;width: 852px;}
.s4_c .s4_cr .s4_cra{}
.s4_c .s4_cr .s4_cria ul li{float:left;margin-left: 8px;border:1px solid #fff;margin-bottom: 9px;overflow: hidden;}
.s4_c .s4_cr .s4_cria ul li img{
	transition: transform 0.6s;
	-moz-transition: transform 0.6s; 
	-webkit-transition: transform 0.6s; 
	-o-transition: transform 0.6s;
	max-width: 100%;
	
}
.s4_c .s4_cr .s4_cria ul li:hover img{
	transform:scale(1.1);
-ms-transform:scale(1.1); 	
-moz-transform:scale(1.1); 	
-webkit-transform:scale(1.1); 
-o-transform:scale(1.1); 
}
.s4_c .s4_cr .s4_crib .s4_cribl{margin-left: 8px;float:left;border:1px solid #fff;overflow: hidden;}
.s4_c .s4_cr .s4_crib .s4_cribl img{
	transition: transform 0.6s;
	-moz-transition: transform 0.6s; 
	-webkit-transition: transform 0.6s; 
	-o-transition: transform 0.6s;
	max-width: 100%;
	
}
.s4_c .s4_cr .s4_crib .s4_cribl:hover img{
	transform:scale(1.1);
-ms-transform:scale(1.1); 	
-moz-transform:scale(1.1); 	
-webkit-transform:scale(1.1); 
-o-transform:scale(1.1); 
}
.s4_c .s4_cr .s4_crib .s4_cribr{float:right;border:1px solid #fff;overflow: hidden;}
.s4_c .s4_cr .s4_crib .s4_cribr img{
	transition: transform 0.6s;
	-moz-transition: transform 0.6s; 
	-webkit-transition: transform 0.6s; 
	-o-transition: transform 0.6s;
	max-width: 100%;
	
}
.s4_c .s4_cr .s4_crib .s4_cribr:hover img{
	transform:scale(1.1);
-ms-transform:scale(1.1); 	
-moz-transform:scale(1.1); 	
-webkit-transform:scale(1.1); 
-o-transform:scale(1.1); 
}

.s5_c{padding-top: 80px;}
.s5_c .s5_cl{float:left;width: 742px;height: 440px;}
.s5_c .s5_cl .bd{float:left;}
.s5_c .s5_cl .bd .s5_cli{border:1px solid #fff;overflow: hidden;}
.s5_c .s5_cl .bd .s5_cli img{
	transition: transform 0.6s;
	-moz-transition: transform 0.6s; 
	-webkit-transition: transform 0.6s; 
	-o-transition: transform 0.6s;
	max-width: 100%;
	
}
.s5_c .s5_cl .bd .s5_cli:hover img{
	transform:scale(1.1);
-ms-transform:scale(1.1); 	
-moz-transform:scale(1.1); 	
-webkit-transform:scale(1.1); 
-o-transform:scale(1.1); 
}
.s5_c .s5_cl .hd{float:right;}
.s5_c .s5_cl .hd ul li{margin-bottom: 16px;border:1px solid #fff;}
.s5_c .s5_cl .hd ul li.on{border:1px solid #ff8d5f;}
.s5_c .s5_cr{float:right;width: 369px;height: 440px;background: #ff8d5f;padding:0 35px;}
.s5_c .s5_cr .s5_cra{padding-top: 30px;}
.s5_c .s5_cr .s5_cra div{font-size: 36px;color: #ffffff;}
.s5_c .s5_cr .s5_cra p{font-size: 14px;color: #ffffff;text-transform: uppercase;}
.s5_c .s5_cr .s5_crb{margin-top: 28px;font-size: 20px;color: #333333;font-weight: bold;}
.s5_c .s5_cr .s5_crc{font-size: 16px;color: #333333;line-height: 30px;margin-top: 23px;height: 164px;}
.s5_c .s5_cr .s5_crd a{display: block;width: 174px;height: 36px;text-align: center;line-height: 36px;border:1px solid #333333;font-size: 14px;color: #333333;border-radius: 15px;}


.section5.active .s5_c .s5_cr{-webkit-animation: fadeInDown 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: fadeInDown 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);}
.section5.active .s5_c .s5_cl .bd{-webkit-animation: fadeInDown 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: fadeInDown 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);}
.section5.active .s5_c .s5_cl .hd{-webkit-animation: fadeInUp 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: fadeInUp 2s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);}



.s5_d{position: absolute;bottom: 24px;left:0;width: 100%;line-height: 40px;font-size: 14px;color: #ffffff;}
.s5_d a{font-size: 14px;color: #ffffff;}
.s5_d .s5_dl{float:left;}
.s5_d .s5_dr{float:right;line-height: 40px;}


.hua{position: absolute;left:12.76%;top:43.51%;z-index: 89;}/*38.76%  63.51%*/
.yun1{position: absolute;top:49.53%;left:19.27%;z-index: 89;}
.yun2{position: absolute;top:34.26%;left:45.31%;z-index: 89;}
.xuanchuan{position: absolute;top:32.4%;left:42.1875%;z-index: 89;z-index: 89;width: 15.625%;text-align: center;}
.xuanchuan img{width: 100%;height: 100%;}
.biaoti{position: absolute;top:65.55%;left:36.2%;z-index: 89;z-index: 89;width: 27.6%;text-align: center;}
.biaoti img{width: 100%;height: 100%;}
.section1.active .hua{animation: moveInOut 7s ease-out 1;-webkit-animation: moveInOut 7s ease-out 1;animation-fill-mode: forwards;}
.section1.active .yun1{animation: moveLeft 7s ease-out 1;-webkit-animation: moveLeft 7s ease-out 1;animation-fill-mode: forwards;}
.section1.active .yun2{animation: moveRight 7s ease-out 1;-webkit-animation: moveRight 7s ease-out 1;animation-fill-mode: forwards;}
.section1.active .biaoti{animation: fadeBigs 7s ease-out 1;-webkit-animation: fadeBigs 7s ease-out 1;animation-fill-mode: forwards;}

@keyframes moveInOut{
	0%{
		opacity: 1;
		left:12.76%;
		top:43.51%;
	}
	
	100%{
		opacity: 0;
		left:38.76%;
		top:63.51%;
	}
}
@-moz-keyframes moveInOut{
	0%{
		opacity: 1;
		left:12.76%;
		top:43.51%;
	}
	
	100%{
		opacity: 0;
		left:38.76%;
		top:63.51%;
	}
}
@-webkit-keyframes moveInOut{
	0%{
		opacity: 1;
		left:12.76%;
		top:43.51%;
	}
	
	100%{
		opacity: 0;
		left:38.76%;
		top:63.51%;
	}
}
@-o-keyframes moveInOut{
	0%{
		opacity: 1;
		left:12.76%;
		top:43.51%;
	}
	
	100%{
		opacity: 0;
		left:38.76%;
		top:63.51%;
	}
}

@keyframes moveInOut{
	0%{
		opacity: 1;
		left:12.76%;
		top:43.51%;
	}
	
	100%{
		opacity: 0;
		left:38.76%;
		top:63.51%;
	}
}
@-moz-keyframes moveInOut{
	0%{
		opacity: 1;
		left:12.76%;
		top:43.51%;
	}
	
	100%{
		opacity: 0;
		left:38.76%;
		top:63.51%;
	}
}
@-webkit-keyframes moveInOut{
	0%{
		opacity: 1;
		left:12.76%;
		top:43.51%;
	}
	
	100%{
		opacity: 0;
		left:38.76%;
		top:63.51%;
	}
}
@-o-keyframes moveInOut{
	0%{
		opacity: 1;
		left:12.76%;
		top:43.51%;
	}
	
	100%{
		opacity: 0;
		left:38.76%;
		top:63.51%;
	}
}


@keyframes moveLeft{
	0%{
		opacity: 1;
		left:12.76%;
		
	}
	
	100%{
		opacity: 0;
		left:0;
		
	}
}
@-moz-keyframes moveLeft{
	0%{
		opacity: 1;
		left:12.76%;
		
	}
	
	100%{
		opacity: 0;
		left:0;
		
	}
}
@-webkit-keyframes moveLeft{
	0%{
		opacity: 1;
		left:12.76%;
		
	}
	
	100%{
		opacity: 0;
		left:0;
		
	}
}
@-o-keyframes moveLeft{
	0%{
		opacity: 1;
		left:12.76%;
		
	}
	
	100%{
		opacity: 0;
		left:0;
		
	}
}



@keyframes moveRight{
	0%{
		opacity: 1;
		left:45.31%;
		
	}
	
	100%{
		opacity: 0;
		left:100%;
		
	}
}
@-moz-keyframes moveRight{
	0%{
		opacity: 1;
		left:45.31%;
		
	}
	
	100%{
		opacity: 0;
		left:100%;
		
	}
}
@-webkit-keyframes moveRight{
	0%{
		opacity: 1;
		left:45.31%;
		
	}
	
	100%{
		opacity: 0;
		left:100%;
		
	}
}
@-o-keyframes moveRight{
	0%{
		opacity: 1;
		left:45.31%;
		
	}
	
	100%{
		opacity: 0;
		left:100%;
		
	}
}

@keyframes fadeBigs{
	0%{
		transform: scale(0);
		-moz-transform: scale(0);
		-webkit-transform: scale(0);
		-o-transform: scale(0);
		-ms-transform: scale(0);
	}
	
	100%{
		transform: scale(1);
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
	}
}
@-moz-keyframes fadeBigs{
	0%{
		transform: scale(0);
		-moz-transform: scale(0);
		-webkit-transform: scale(0);
		-o-transform: scale(0);
		-ms-transform: scale(0);
	}
	
	100%{
		transform: scale(1);
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
	}
}
@-webkit-keyframes fadeBigs{
	0%{
		transform: scale(0);
		-moz-transform: scale(0);
		-webkit-transform: scale(0);
		-o-transform: scale(0);
		-ms-transform: scale(0);
	}
	
	100%{
		transform: scale(1);
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
	}
}
@-o-keyframes fadeBigs{
	0%{
		transform: scale(0);
		-moz-transform: scale(0);
		-webkit-transform: scale(0);
		-o-transform: scale(0);
		-ms-transform: scale(0);
	}
	
	100%{
		transform: scale(1);
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
	}
}


