﻿
/* CSS Document */
html,body{ height:100%;}


/*首页*/
.section {position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; width:100%; height:100%; overflow:hidden;}
.section .bg{ width:100%; height:100%; position:absolute; left:0; top:0;}

/*第一屏*/

.page1_1{ position:absolute; left:50%; margin-left: -520px;top:0; width:1040px; height:101px; transition:all 1.5s; opacity:0;}
.page1_1 img{ width:100%; height:100%;}
.active .page1_1{margin-top:330px; transition-delay:1s;opacity:1;transition:all 1.5s;}

.page1_2{position:absolute; left: 50%;margin-left: -373px;bottom: -100px;width:745px; height:80px;transition:all 1.5s; opacity:0;}
.page1_2 img{ width:100%; height:100%;}
.active .page1_2{margin-bottom: 338px;transition-delay:1s; opacity:1; transition:all 1.5s;bottom: 0px;}

@media(max-width: 1660px){
	.active .page1_1{margin-top:180px;}
	.active .page1_2{margin-top: 408px;}
}


@media(max-width: 1440px){
	.active .page1_1{margin-top:180px;}
	.active .page1_2{margin-bottom: 200px;}
}


/*第二屏*/

.page2_1{ color: #00fb13; font-size: 36px; position: absolute; right:-100%; top: 220px; margin-right: -600px; width: 1200px; transition: 2s;text-align: right; text-transform : uppercase }
.active .page2_1{right: 50%; transition: 1.5s;}

.page2_2{ color: #fff; font-size: 24px;position: absolute; right:-100%; top: 270px; margin-right: -600px; width: 1200px;  transition: 2s; text-align: right; text-transform : uppercase  }
.active .page2_2{right: 50%; transition: 2s; }

.page2_3{position: absolute; right:50%; top: 305px; margin-right: -600px; width: 1200px; text-align: right;  }
.page2_3 span{ width: 0; height: 5px; background: #e8cb06; border-radius: 5px; display: block; opacity: 0;  }
.active .page2_3 span{ width: 100px; height: 3px;  transition: 2s;display: block; background: #e8cb06; float: right; opacity: 1;}

.page2_4{ color: #cfe5ff; font-size: 14px; line-height: 48px; position: absolute; right:50%; top: 2000px;transition: 2s; margin-right: -600px; width: 1200px; text-align: right;  }
.active .page2_4{top: 340px; transition: 2s;}

@media(max-width: 1660px){
	.page2_1{top: 120px;}
	.page2_2{top: 170px;}
	.page2_3{top: 205px;}
	.active .page2_4{top: 240px; }
}
@media(max-width: 1400px){
	.page2_4{ line-height: 30px; }
}


/*第三屏*/
.page3_1{ position:absolute; left:0%; top:0px; width:100%;  opacity:0; transition:all 1s; text-align:center; }
.active .page3_1{ top:180px; transition-delay:1s; opacity:1; }
.page3_1 span{ color: #01c255; font-size: 48px; line-height: 60px;text-transform : uppercase }
.page3_1 p{ font-size: 30px; color: #fff;  line-height: 60px;}


.page3_2{ width:100%; position:absolute; left:0%; top:2000px;transition:all 2s; }
.active .page3_2{top:350px;transition:all 2s;}
.page3_2 ul{ width:1240px; margin:0 auto; }
.page3_2 ul li{ float:left; margin:0 20px; width:372px; border:1px solid #01c255; box-sizing:border-box; position:relative; overflow:hidden;}
.page3_2 ul li .page3_2_img{ width: 372px; height: 270px; position: relative; overflow: hidden; }
.page3_2 ul li .page3_2_img img{ width: 372px; height: 270px;position: absolute; left: 50%; margin-left: -186px; top: 50%; margin-top: -135px;transition: 1s;  }
.page3_2 ul li:hover .page3_2_img img{ width: 390px; height: 290px; position: absolute; left: 50%; margin-left: -195px; top: 50%; margin-top: -145px;  transition: 1s; }
.page3_2_main_left{ width: 300px; overflow: hidden; height: 60px; }

.page3_2_main{ width: 95%; padding: 0 2.5%; height: 70px; background: #01c255; line-height: 70px; color: #fff; overflow: hidden; }

@media(max-width: 1660px){
	.active .page3_1{top:90px;}
	.active .page3_2{top:220px;}
	.page3_1 span{font-size: 38px; line-height: 50px;}
	.page3_1 p{font-size: 26px;}
	.page3_2_main{ height: 40px; line-height: 40px;}

}

@media(max-width: 1400px){
	.page3_2_main{ width: 96%; }
	.page3_2_main_left{width: 200px;}
	.page3_2 ul{ width:935px; }
	.page3_2 ul li{width: 270px;}
	.page3_2 ul li .page3_2_img{width: 270px; height: 196px;}
	.page3_2 ul li .page3_2_img img{width: 270px; height: 196px;margin-left: -135px; margin-top: -98px; }
}
/*第四屏*/
.page4_1{ position:absolute; left:0%; top:0px; width:100%; opacity:0; transition:all 1s; text-align:center;}
.page4_1_box{ width: 1200px; height: 36px;margin:0 auto; font-size: 48px; color: #01c255;text-transform : uppercase  }

.active .page4_1{ top:220px; transition-delay:1s; opacity:1;}
.page4_1_p{font-size: 30px;color: #000;text-align: center;margin-top: 35px;width: 100%}
.fenge{width:0px;height:1px; background-color: #dcdcdc;margin:45px auto; position:absolute; left:50%; top:330px;margin-left: 0px; transition: all 2s;}
.active .fenge{width:1200px;left:50%;  margin-left: -600px; transition: all 3.5s;}

.page4_2{ width:100%; position:absolute; left:0%; top:2000px;transition:all 2s; }
.active .page4_2{top:404px;transition:all 2s;}
.page4_2 ul{ margin:0 auto; width:1240px;}
.page4_2 ul li{ float:left;  margin:0 20px; width:372px; height: 220px; transition: all 1s; box-sizing:border-box; position:relative; overflow:hidden;border: 1px solid #dcdcdc;}
.page4_2 ul li img{ width:100%; height: 100%;}
.active  .page4_2 ul li:hover{ box-shadow: 0 0 10px #999;transition: all 1s; margin-top: -10px; }
.page4_2 ul li .page4_2bg{ width:100%; height:100%; background:#000; opacity:0; position:absolute; left:0; top:-100%; z-index: 99 ;transition: all 1s;}
.page4_2 ul li .page4_2bg a{ display: block; width: 100%; height: 100%; }
.active  .page4_2 ul li:hover .page4_2bg{ width:100%; height:100%; background:#000; opacity:0.7; position:absolute; left:0; top:0; z-index: 99; transition: all 1s; }
.page4_2 ul li .page4_2main{position:absolute; left:0; top:0; opacity: 0;  text-align:center; width:100%; z-index: 100 ;transition: all 1s; }
.active .page4_2 ul li:hover .page4_2main{position:absolute; left:0; top:100px;opacity: 1;   text-align:center; width:100%; z-index: 100 ;transition: all 1s; }
.page4_2 ul li .page4_2main a{color:#fff; font-size:16px; display:block; font-weight:bold; opacity:1;}
.page4_2 ul li .page4_2main a img{ width:30px; height:30px;}
.page4_2 ul li .page4_2main_pic{ position:absolute; top:0; left:-10%; margin-left:-15px; margin-top:50%;}
.page4_hide{ display:none;}
.page4_2_more{width: 120px;height: 38px;border-radius: 38px;border: 1px solid #00ff00;margin:50px auto;color: #01c255;line-height: 38px; text-align: center;font-size: 20px;position: absolute;left: 50%;margin-left: -60px;cursor:pointer;transition: all 1s; }
.page4_2_more a{ display: block;color: #01c255;transition: all 1s; }
.page4_2_more:hover{background-color: #01c255;color: #fff;border: 1px solid #01c255; transition: all 1s; width: 160px;border-radius: 10px;margin-left: -80px; }
.page4_2_more:hover a{ color: #fff;transition: all 1s; }
@media(max-width: 1660px){
	.active .page4_1{ top:120px;}
	.page4_1_p{font-size: 26px;}
	.fenge{top:230px;}
	.page4_1_box{ font-size: 38px; }
	.active .page4_2{top:304px;}
}

@media(max-width: 1400px){
	.active .fenge{ width: 890px;  margin-left: -445px;}
	.page4_2{ width:100%;left:0%;}
	.page4_2 ul{ margin:0 auto; width:935px;}
	.page4_2 ul li{ width: 270px; height: 160px; }

	.page4_2 ul li:hover .page4_2bg{ height: 160px; }
	.page4_2 ul li:hover .page4_2main{ top: 70px; }
	/*.page4_2_more{ margin-left: -120px; }
	.page4_2_more:hover{ width: -120px; }
*/
}

/*第五屏*/
.page5_1,.page5_2{width:1200px;height: 264px; overflow:hidden;}
.page5_box{width:100%;height: 264px;float: left;background-color: #fff;cursor:pointer; position: relative;}
.page5_box .hide_left{ background: #01c255; position: absolute; width: 2px; height: 0; bottom: 0;left:0;  transition: all 1s; }
.page5_box:hover .hide_left{ height: 100%;transition: all 1s; }
.page5_box .hide_right{ background: #01c255; position: absolute; width: 2px; height: 0; top: 0;right:0;  transition: all 1s; }
.page5_box:hover .hide_right{ height: 100%;transition: all 1s; }

.page5_box .hide_bottom{ background: #01c255; position: absolute; width: 0px; height: 2px; bottom: 0;right:0;  transition: all 1s; }
.page5_box:hover .hide_bottom{ width: 100%;transition: all 1s; }

.page5_box .hide_top{ background: #01c255; position: absolute; width: 0px; height: 2px; top: 0;left:0;  transition: all 1s; }
.page5_box:hover .hide_top{ width: 100%;transition: all 1s; }


.page5_box img{width: 100%;height: 100%}
.page5_box_wrap{margin: 30px 22px}
.page5_time{margin:0px ;}
.page5_time_ri{font-size: 48px;color: #aaa;font-style: italic;float: left;}
.page5_time_date{font-size: 18px; color: #666;float: left;line-height: 40px;margin-left: 15px;}
.page5_tt{font-size: 18px; color: #010101; height: 30px;}
.page5_main{font-size: 12px; color: #999;height: 150px;overflow:hidden;margin-top: 6px;}



.page5_1{position:absolute; left:-100%; top:180px;transition:all 1.5s;}
.active .page5_1{left:50%;margin-left: -600px ;transition:all 1.5s;}
.page5_2{position:absolute;  top:444px;right:-100%;transition:all 1.5s;}
.active .page5_2{right: 50%;margin-right: -600px; transition:all 1.5s;}
.page5_3{width: 120px;height: 38px;border-radius: 38px;border: 1px solid #00ff00;margin:78px auto;color: #01c255;line-height: 38px; text-align: center;font-size: 20px;position: absolute;left: 50%;margin-left: -60px;top: 1080px;cursor:pointer;transition:all 1.5s;}
.active .page5_3{top:680px;transition: all 1s; }
.page5_3:hover{background-color: #01c255;color: #fff;border: 1px solid #01c255;width: 160px;border-radius: 10px;margin-left: -80px;transition: all 1s;}
.page5_3 a{ display: block;color: #01c255;transition: all 1s; }
.page5_3 a:hover{ color: #fff;transition: all 1s; }

.page5_list_box{ width: 1200px; position: absolute; left:50%; margin-left: -600px; top: 180px; }
.page5_list{ width: 400px; float: left; }
.page5_list a{ display: block; }
.page5_list_1{margin-top: -500px; opacity: 0; transition: all 2s;}
.active .page5_list_1{margin-top: 0px; opacity: 1; transition: all 2s;}

.page5_list_2{margin-top: 500px; opacity: 0; transition: all 2s;}
.active .page5_list_2{margin-top: 0px; opacity: 1; transition: all 2s;}

@media(max-width: 1660px){
	.page5_list_box{top: 80px; }
	.page5_3{ display: none }

	.page5_list_box{ width: 900px;margin-left: -450px; }
	.page5_list{ width: 300px; }
	.page5_box{ height: 225px; overflow: hidden; }
}

/*第六屏*/
.page6_wrap{width: 700px;height: 280px;position: absolute;left: 50%;margin-left: -350px;top: 50%;margin-top: -140px;}
.page6_1{ position:absolute; left:-300px; top:0;top:50%;margin-top:-140px;  width:280px; height:280px; transition:all 1s; opacity:0;}
.page6_1 img{ width:100%; height:100%;}
.active .page6_1{left: 50%;margin-left: -340px;opacity:1;}

.page6_2{position:absolute; right:50%;margin-right: -330px;top:0;margin-top:-90px; width:340px; height:45px;opacity:0;transition:all 1s;color: #01c255; font-size: 48px; line-height: 60px;}

.active .page6_2{ opacity:1;top:50%;margin-top:-140px;}

.page6_3{position:absolute; right:50%;margin-right: -330px; bottom: 0;font-size: 24px;color: #444;line-height: 40px;transition:all 1s; opacity:0;-moz-opacity: 0;}

.active .page6_3{ bottom:30%;  opacity:1;-moz-opacity: 1;}