@charset "utf-8";
/* CSS Document */
body,html{
width:100%;
height:100%;
overflow-y:hidden; font-family:"微软雅黑","Microsoft YaHei";
}
.wrapBox{
width:100%;
height:100%;
position:fixed;
}
.wrap2{width:100%;height:1000%;transition:.3s linear}
.box{
width:100%;
height:10%;
overflow:hidden;
}
.page1{
background:url(../images/banner01.jpg) no-repeat center top;-moz-background-size:100% 100%;
background-size:100% 100%;
}
.w960{
width:960px;
height:100%;
margin:0 auto;
position:relative;
}
.w100{
width:100%;
height:100%;
margin:0 auto;
position:relative;
}
.page1_01{
position:absolute;
top:120px;
left:-120px;
z-index:10;
transition:all 2s linear 0s;
}
.page1_02{
position:absolute;
top:250px;
right:30px;
z-index:9;
transition:all 2s linear 0s;
}
.page1_02_btn{
margin-top:15px;
animation:play 1s linear 0s infinite alternate;
-webkit-animation:play 1s linear 0s infinite alternate;
}
@keyframes play{
from{
opacity:0.3;
}
to{
opacity:1;
}
}
@-webkit-keyframes play{
from{
opacity:0.3;
}
to{
opacity:1;
}
}
.page1_03{
position:absolute;
left:50%;
margin-left:-720px;
bottom:-130px;
}
.page1_04{
position:absolute;
right:-50px;
top:460px;
}
.box.comeout .page1_01{
left:-220px;
opacity:0;
}
.box.comeout .page1_02{
top:350px;
opacity:0;
}
.page2{
background:url(../images/pic01.jpg) no-repeat center top;-moz-background-size:100% 100%;
background-size:100% 100%;
}
.page2_01{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%) rotate(0deg);
transition:all 2s ease 0s;
}
.box.comeout .page2_01{
transform:translate(-50%,-50%) rotate(-360deg);
opacity:0;
}
.page3{
background:url(../images/pic02.jpg) no-repeat center top;-moz-background-size:100% 100%;
background-size:100% 100%;
}
.page3_01{
position:absolute;
top:150px;
right:0px;
z-index:9; width:100%; text-align:center;
transition:all 2s linear 0s;
}
.box.comeout .page3_01{
top:250px;
opacity:0;
}
.page3_01_top{
color:#fff; font-size:14px; line-height:24px;
}
.page3_01_top h2{
font-size:22px; font-weight:normal; margin-bottom:20px;
}
.page3_01_top_m{
display:none;
}
.page4{
background:url(../images/pic03.jpg) no-repeat center top;-moz-background-size:100% 100%;
background-size:100% 100%;
}
.page4_01{
position:absolute;
top:70px;
right:0px;
z-index:9; width:100%; text-align:center;
transition:all 2s linear 0s;
}
.box.comeout .page4_01{
top:200px;
opacity:0;
}
.page4_01_top{
color:#fff; font-size:14px; line-height:24px; text-align:left; padding-left:8%;
}
.page4_01_top h2{
font-size:22px; font-weight:normal; margin-bottom:20px;
}
.page5{
background:url(../images/pic04.jpg) no-repeat center top;-moz-background-size:100% 100%;
background-size:100% 100%; overflow:hidden;
}
.page5_01{
position:absolute;
top:500px;
right:0px;
z-index:9; width:100%; text-align:center;
}
.box.comeout .page5_01{
top:300px;
opacity:0;
}
.page5_01_top{
color:#fff; font-size:14px; line-height:24px; text-align:left; padding-left:8%;
}
.page5_01_top h2{
font-size:22px; font-weight:normal; margin-bottom:20px;
}
.page6{
background:url(../images/pic05.jpg) no-repeat center top;-moz-background-size:100% 100%;
background-size:100% 100%;
}
.page6_01{
position:absolute;
top:450px;
right:0px;
z-index:9; width:100%; text-align:center;
transition:all 2s linear 0s;
}
.box.comeout .page6_01{
top:550px;
opacity:0;
}
.page6_01_top{
color:#fff; font-size:14px; line-height:24px; text-align:right; padding-right:8%;
}
.page6_01_top h2{
font-size:22px; font-weight:normal; margin-bottom:20px;
}
.page7{
background-color:#000000;
}
.page7_01{
position:absolute;
top:180px;
right:0px;
z-index:9; width:100%; text-align:center;
transition:all 2s linear 0s;
}
.box.comeout .page7_01{
top:280px;
opacity:0;
}
.page7_01_top{
color:#fff; font-size:14px; line-height:24px;
}
.page7_01_top h2{
font-size:22px; font-weight:normal; margin-bottom:20px;
}
.jclist{
height:auto; width:1100px; margin:0 auto; padding-top:15%;
}
.jclist li{
float:left; width:300px; height:auto; margin-right:100px;
}
.jclist li:nth-child(3n){
margin-right: 0;
}
.jclist img{
width:100%; height:auto;
}
.page8{
background:url(../images/pic07.jpg) no-repeat center top;-moz-background-size:100% auto;
background-size:100% auto; position:relative;
}
.gdwz{
position:absolute; left:0px; bottom:0px;
}
.fixedNav{
height:60px;
width:100%;
position:fixed;
z-index:10;
}
.rightnav{
width:22px;
height:150px;
padding-top:14px;
position:fixed;
top:50%;
margin-top:-82px;
right:20px;
border-radius:10px;
}
.rightnav li{
width:10px;
height:10px;
margin:8px auto;
cursor:pointer;
position:relative;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-o-border-radius:10px; background-color:#333333;
}
.rightnav li.current{
background-color:#898989;
}
.rightnav li span{
width:76px;
height:19px;
position:absolute;
left:-80px;
top:0;
text-align:center;
line-height:19px;
color:#fff;
}
.clear{
clear:both;
}
.section-wrap{ width:100%;height:100%;overflow:visible;transition:transform 1s cubic-bezier(0.86,0,0.03,1);-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);}
.section-wrap .section{ position:relative; width:100%; height:10%; background-position:center center; background-repeat:no-repeat; overflow:hidden;}
.section-wrap .section .title{width:100%;position:absolute;top:30%;color:#fff;font-size:2.4em;text-align:center;}
.section-wrap .section .title a:link{
color:#fff;
}
.section-wrap .section .title a:visited{
color:#fff;
}
.section-wrap .section .title a:hover{
color:#fff;
}
.section-wrap .section .title p{ padding:0 4%;opacity:0}
.section-wrap .section .title.active .tit{ opacity:1;transform:translateY(-85px);-webkit-transform:translateY(-85px);transition:all 2s cubic-bezier(0.86,0,0.8,1);-webkit-transition:all 2s cubic-bezier(0.86,0,0.8,1);}
.section-wrap .section .dtxg.active .page5_01.page5_01_top{ margin-top:0px;transition:all 1.5s cubic-bezier(0.86,0,0.8,1);-webkit-transition:all 1.5s cubic-bezier(0.86,0,0.8,1);}
.section-wrap .section-1{ background-color:#000; position:relative;}
.section-wrap .section-2{background:url('https://img.alicdn.com/imgextra/i3/712096873/O1CN01PaEYQd20dt2SXkdZW_!!712096873.jpg') no-repeat center top;-moz-background-size:100% auto;
background-size:100% auto;}
.section-wrap .section-3{background:url('https://img.alicdn.com/imgextra/i3/712096873/O1CN01JzxVnf20dt2SfZ19k_!!712096873.jpg') no-repeat center top;-moz-background-size:100% auto;
background-size:100% auto;}
.section-wrap .section-4{background:url('https://img.alicdn.com/imgextra/i3/712096873/O1CN01Ru0EZV20dt2QYLOQZ_!!712096873.jpg') no-repeat center top;-moz-background-size:100% auto;
background-size:100% auto;}
.section-wrap .section-5{background:url('https://img.alicdn.com/imgextra/i2/712096873/O1CN015sF4f320dt2K9Kd4I_!!712096873.jpg') no-repeat center top;-moz-background-size:100% auto;
background-size:100% auto;}
.section-wrap .section-6{background:url(../images/pic06.jpg) no-repeat center top;-moz-background-size:100% auto;
background-size:100% auto;}
.section-wrap .section-7{background:url('https://img.alicdn.com/imgextra/i1/712096873/O1CN01vGabNg20dt2OmLP3F_!!712096873.jpg') no-repeat center top;-moz-background-size:100% auto;
background-size:100% auto;}
.put-section-0{ transform:translateY(0);-webkit-transform:translateY(0);}
.put-section-1{ transform:translateY(-100%);-webkit-transform:translateY(-100%);}
.put-section-2{ transform:translateY(-200%);-webkit-transform:translateY(-200%);}
.put-section-3{ transform:translateY(-300%);-webkit-transform:translateY(-300%);}
.put-section-4{ transform:translateY(-400%);-webkit-transform:translateY(-400%);}
.put-section-5{ transform:translateY(-500%);-webkit-transform:translateY(-500%);}
.put-section-6{ transform:translateY(-600%);-webkit-transform:translateY(-600%);}
.section-btn{ width:10px;position:fixed;right:20px;top:50%;}
.section-btn li{ width:10px;height:10px;cursor:pointer;text-indent:-9999px;border-radius:50%;-webkit-border-radius:50%;margin-bottom:12px; background:#333333;text-align:center; color:#fff; onsor:pointer;}
.section-btn li.on{ background:#898989}
.vtxt{
position:absolute; left:0px; top:40%; text-align:center; z-index:1000; text-align:center; width:100%; color:#fff;
}
.vtxt a{
color:#fff; margin-left:5px; margin-right:5px;
}
.videomore{
background:url(../images/vbg2.png) left center no-repeat; padding-left:20px; width:auto; display:table; margin:0 auto; height:35px; line-height:35px; margin-top:30px;
}
.allvideoa{
width:100%; height:100%;background:url(../images/vbg.png); position:absolute; left:0px; top:0px; z-index:1001; display:none;
}
.allvideob{
width:1000px; left:50%; top:50%; margin-left:-500px; margin-top:-310px; position:absolute;
}
.allvideot{
height:50px; background-color:#fff; line-height:50px; font-size:16px; padding-left:15px; overflow:hidden;
}
.allvideot span{
float:right; margin-right:15px; margin-top:5px;
}
@media screen and (max-width:1920px) {
.page7_01{
top:140px;
}
.box.comeout .page7_01{
top:240px;
opacity:0;
}
.jclist{
padding-top:13%;
}
}
@media screen and (max-width:1400px) {
.page5_01{
top:300px;
}
.box.comeout .page5_01{
top:100px;
}
.page6_01{
top:300px;
}
.box.comeout .page6_01{
top:450px;
}
.page6_01_top img{
width:300px; height:auto;
}
}
@media screen and (max-width:1200px) {
.jclist{
width:96%; padding-left:2%; padding-right:2%;
}
.jclist li{
float:left; width:32%; height:auto; margin-right:2%; text-align:center;
}
.jclist li:nth-child(3n){
margin-right: 0;
}
.jclist img{
width:85%; height:auto;
}
}
@media screen and (max-width:1000px) {
.w960{
width:100%; text-align:center;
}
.rightnav{
display:none;
}
.section-btn{
display:none;
}
.page5_01{
top:100px;
}
.page2_01 img{
width:230px; height:auto;
}
.page3_01_top img{
width:200px; height:auto;
}
.page4_01 img{
width:200px; height:auto;
}
.page5_01 img{
width:230px; height:auto;
}
.page6_01{
top:100px;
}
.page6_01 img{
width:230px; height:auto;
}
.page7_01_top{
margin-top:-30px;
}
.section-wrap .section-7{
background:url(../images/pic07.jpg) no-repeat left top;
-moz-background-size:100% auto;
background-size:100% auto;
}
.allvideob{
width:100%; left:0px; top:40%; margin-left:0; margin-top:-25%;
}
}
@media screen and (max-width:640px) {
.page1{
-moz-background-size:auto 100%;
background-size:auto 100%;
}
.page2{
-moz-background-size:auto 100%;
background-size:auto 100%;
}
.page3{
-moz-background-size:auto 100%;
background-size:auto 100%;
}
.page4{
-moz-background-size:auto 100%;
background-size:auto 100%;
}
.page5{
-moz-background-size:auto 100%;
background-size:auto 100%;
}
.page6{
-moz-background-size:auto 100%;
background-size:auto 100%;
}
.page7{
-moz-background-size:auto 100%;
background-size:auto 100%;
}
.page8{ background:url(../images/pic07.jpg) no-repeat left top;
-moz-background-size:auto 60%;
background-size:auto 60%;
}
.section-wrap .section-1{
-moz-background-size:auto 100%;
background-size:auto 100%;
}
.section-wrap .section-2{
-moz-background-size:auto 100%;
background-size:auto 100%;
}
.section-wrap .section-3{
-moz-background-size:auto 100%;
background-size:auto 100%;
}
.section-wrap .section-4{
-moz-background-size:auto 100%;
background-size:auto 100%;
}
.section-wrap .section-5{
-moz-background-size:auto 100%;
background-size:auto 100%;
}
.section-wrap .section-6{
-moz-background-size:auto 100%;
background-size:auto 100%;
}
.section-wrap .section-7{
background:url(../images/pic07.jpg) no-repeat left top;
-moz-background-size:auto 60%;
background-size:auto 60%;
}
.section-wrap .section-8{ background:url(../images/pic07.jpg) no-repeat left top;
-moz-background-size:auto 60%;
background-size:auto 60%;
}
.page3_01_top img{
width:50%; height:auto;
}
.page4_01_top img{
width:50%; height:auto;
}
.page5_01_top img{
width:50%; height:auto;
}
.page6_01_top img{
width:50%; height:auto;
}
.page3_01{
font-size:12px !important;
}
.video{
margin-top:20%;
}
.jclist{
padding-top:180px;
}
.box.comeout .page3_01{
top:80px;
opacity:1;
}
.box.comeout .page4_01{
top:300px;
opacity:1;
}
.box.comeout .page5_01{
bottom:300px;
opacity:1;
}
.box.comeout .page6_01{
top:550px;
opacity:1;
}
.box.comeout .page7_01{
top:100px;
opacity:1;
}
.page3_01_top_m{
color:#fff; font-size:14px; line-height:24px; display:block;
}
.box h2{
font-size:18px;
}
.page7_01_top{
margin-top:0px;
}
.page7_01_top h2{
font-size:18px;
}
.section-wrap .section .title{
top:15%;
}
.page5_01{
top:100px;
}
.vtxt img{
width:60%; height:auto;
}
.allvideot{
height:40px; line-height:40px; font-size:14px;
}
}