@charset "utf-8";
body {background: #fff;min-width: 1200px; font-family: "microsoft yahei";}
.act-wrap { overflow-x: hidden;width:100%;}
.act-area{width: 1920px; position: relative;  top: 0; left: 50%; margin-left: -960px;}
.act-center{ width: 1280px; height: 100%; margin: 0 auto; position: relative;}
.area-01{height: 834px; background: url(../images/banner01.jpg) no-repeat center top;}
.area-01 .phone1{position: absolute; left: 0; top:120px; width: 432px; height: 662px; background: url(../images/phone01.png) no-repeat; z-index: 10;}
.area-01 .phone1{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:1.75s;animation-duration:1.75s;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.area-01 .phone2{position: absolute; left:175px; top:100px; width: 432px; height: 702px; background: url(../images/phone02.png) no-repeat; z-index: 11;}
.area-01 .phone2{-webkit-animation:fadeInLeftBottomPlus 1.25s both;animation:fadeInLeftBottomPlus 1.25s both;-webkit-transform-origin:0 50%;transform-origin:0 50%}
.area-01 .people1{position: absolute; left:302px; top:345px; width: 540px; height: 486px; background: url(../images/people01.png) no-repeat; z-index: 12;}
.area-01 .people1{-webkit-animation:fadeInRight 1s both;animation:fadeInRight 1s both;-webkit-transform-origin:0 50%;transform-origin:0 50% -webkit-animation-delay:1s;animation-delay:1s}
.area-01 .title{position: absolute; right:50px; top: 140px; width: 571px; height: 145px; background: url(../images/title01.png) no-repeat; opacity: .85; z-index: 13;}
.area-01 .title{-webkit-animation-name:bounceInRight;animation-name:bounceInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;opacity: 1;}
.area-01 .code{position: absolute; right:224px; top: 289px; width: 266px; height: 266px; background: url(../images/downcode.png) no-repeat; opacity: .85; z-index: 13;}
.area-01 .code{-webkit-animation-name:bounceInRight;animation-name:bounceInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:0.5s;animation-delay:0.5s;opacity: 1;}
.area-01 .text{position: absolute; right:190px; top: 520px; width: 266px; height: 93px; opacity: .85; z-index: 13;font-size: 24px;
    color: #fff;}
.area-01 .text{-webkit-animation-name:bounceInRight;animation-name:bounceInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:0.5s;animation-delay:0.5s;opacity: 1;}

.area-01 .layer1{width:389px;height:187px; top: 70px; left: -234px; background:url(../images/fc01.png) no-repeat;}
.area-01 .layer2 {
    top: -40px;
    left: 500px;
    width: 389px;
    height: 164px;
    background: url(../images/fc01.png) no-repeat;
}
.area-01 .layer3 {
    top: 200px;
    right: -140px;
    width: 389px;
    height: 170px;
    background: url(../images/fc01.png) no-repeat;
}
.area-01 .layer5 {
    bottom: 75px;
    right: -320px;
    width: 389px;
    height: 196px;
    background: url(../images/fc01.png) no-repeat;
}
.area-01 a{position: absolute; z-index: 9999; width: 173px; height: 80px; top: 0; left: 58px;}
.layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}
.layer>div{position:absolute}
.area-02{height:715px;}
.area-02 .phone3{position: absolute; right:90px; top:50px; width: 268px; height: 562px; background: url(../images/phone03.png) no-repeat; z-index: 10;}
.area-02 .phone3{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:1.75s;animation-duration:1.75s;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.area-02 .phone4{position: absolute; right:290px; top:18px; width: 298px; height: 626px; background: url(../images/phone04.png) no-repeat; z-index: 11;}
.area-02 .phone4{-webkit-animation:fadeInRightBottomPlus 1.25s both;animation:fadeInRightBottomPlus 1.25s both;-webkit-transform-origin:0 50%;transform-origin:0 50%}
.area-02 .people2{position: absolute; right:475px; top:281px; width: 352px; height: 413px; background: url(../images/people02.png) no-repeat; z-index: 12;}
.area-02 .people2{-webkit-animation:fadeInRight 1s both;animation:fadeInRight 1s both;-webkit-transform-origin:0 50%;transform-origin:0 50% -webkit-animation-delay:1s;animation-delay:1s}
.area-02 .title{position: absolute; left:90px; top: 170px; width: 417px; height: 125px; background: url(../images/title02.png) no-repeat; opacity: .85; z-index: 13;}
.area-02 .title{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;opacity: 1;}
.area-02 .layer1{width:269px;height:269px; top: 135px; left: -85px; background:url(../images/fc05.png) no-repeat;}
.area-02 .layer4{width:269px;height:269px; top: 20px; right: -450px; background:url(../images/fc05.png) no-repeat;}
.area-03{height: 747px; background: #f7f7f7;}
.area-03 .phone5{position: absolute; left: 90px; top:90px; width: 268px; height: 560px; background: url(../images/phone05.png) no-repeat; z-index: 10; opacity: 0;}
.area-03.on .phone5{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:1.75s;animation-duration:1.75s;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.area-03 .phone6{position: absolute; left:290px; top:60px; width: 298px; height: 627px; background: url(../images/phone06.png) no-repeat; z-index: 11; opacity: 0;}
.area-03.on .phone6{-webkit-animation:fadeInLeftBottomPlus 1.25s both;animation:fadeInLeftBottomPlus 1.25s both;-webkit-transform-origin:0 50%;transform-origin:0 50%}
.area-03 .people3{position: absolute; left:460px; top:370px; width: 258px; height: 321px; background: url(../images/people03.png) no-repeat; z-index: 12; opacity: 0;}
.area-03.on .people3{-webkit-animation:fadeInRight 1s both;animation:fadeInRight 1s both;-webkit-transform-origin:0 50%;transform-origin:0 50% -webkit-animation-delay:1s;animation-delay:1s}
.area-03 .title{position: absolute; right:90px; top: 210px; width: 438px; height: 126px; background: url(../images/title03.png) no-repeat; opacity: .85; z-index: 13; opacity: 0;}
.area-03.on .title{-webkit-animation-name:bounceInRight;animation-name:bounceInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;opacity: 1;}
.area-03 .layer1{width:269px;height:269px; top: 385px; right: -70px; background:url(../images/fc05.png) no-repeat;}
.area-03 .layer2{width:162px;height:148px; top: 110px; left: -180px; background:url(../images/fc06.png) no-repeat;}
.area-04{height: 747px;}
.area-04 .phone7{position: absolute; right:90px; top:100px; width: 268px; height: 562px; background: url(../images/phone07.png) no-repeat; z-index: 10; opacity: 0;}
.area-04.on .phone7{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:1.75s;animation-duration:1.75s;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.area-04 .phone8{position: absolute; right:290px; top:60px; width: 298px; height: 626px; background: url(../images/phone08.png) no-repeat; z-index: 11; opacity: 0;}
.area-04.on .phone8{-webkit-animation:fadeInRightBottomPlus 1.25s both;animation:fadeInRightBottomPlus 1.25s both;-webkit-transform-origin:0 50%;transform-origin:0 50%}
.area-04 .people4{position: absolute; right:520px; top:330px; width: 352px; height: 413px; background: url(../images/people04.png) no-repeat; z-index: 12; opacity: 0;}
.area-04.on .people4{-webkit-animation:fadeInRight 1s both;animation:fadeInRight 1s both;-webkit-transform-origin:0 50%;transform-origin:0 50% -webkit-animation-delay:1s;animation-delay:1s}
.area-04 .title{position: absolute; left:90px; top: 170px; width: 438px; height: 126px; background: url(../images/title04.png) no-repeat; opacity: .85; z-index: 13; opacity: 0;}
.area-04.on .title{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;opacity: 1;}
.area-04 .layer1{width:269px;height:269px; top: 60px; left: -70px; background:url(../images/fc05.png) no-repeat;}
.area-04 .layer4{width:185px;height:180px; top: 430px; right: -200px; background:url(../images/fc07.png) no-repeat;}
.area-05{height: 747px; background: #f7f7f7;}
.area-05 .phone9{position: absolute; left: 90px; top:90px; width: 268px; height: 561px; background: url(../images/phone09.png) no-repeat; z-index: 10; opacity: 0;}
.area-05.on .phone9{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:1.75s;animation-duration:1.75s;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.area-05 .phone10{position: absolute; left:290px; top:60px; width: 298px; height: 624px; background: url(../images/phone10.png) no-repeat; z-index: 11; opacity: 0;}
.area-05.on .phone10{-webkit-animation:fadeInLeftBottomPlus 1.25s both;animation:fadeInLeftBottomPlus 1.25s both;-webkit-transform-origin:0 50%;transform-origin:0 50%}
.area-05 .people5{position: absolute; left:460px; top:370px; width: 257px; height: 375px; background: url(../images/people05.png) no-repeat; z-index: 12; opacity: 0;}
.area-05.on .people5{-webkit-animation:fadeInRight 1s both;animation:fadeInRight 1s both;-webkit-transform-origin:0 50%;transform-origin:0 50% -webkit-animation-delay:1s;animation-delay:1s}
.area-05 .title{position: absolute; right:90px; top: 210px; width: 416px; height: 126px; background: url(../images/title05.png) no-repeat; opacity: .85; z-index: 13; opacity: 0;}
.area-05.on .title{-webkit-animation-name:bounceInRight;animation-name:bounceInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;opacity: 1;}
.area-05 .layer1{width:269px;height:269px; top: 50px; right: -70px; background:url(../images/fc05.png) no-repeat;}
.area-05 .layer2{width:80px;height:90px; top: 450px; left: -95px; background:url(../images/fc09.png) no-repeat;}
.area-06{height: 550px; ;}
.area-06 .title{position: absolute; top: 75px; left: 50%; margin-left: -207px; width: 417px; height: 98px; background: url(../images/title06.png) no-repeat; opacity: .85; z-index: 13; opacity: 0;}
.area-06.on .title{-webkit-animation-name:bounceInTop;animation-name:bounceInTop;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;opacity: 1;}
.area-06 .code{position: absolute; top: 200px; left: 50%; margin-left: -70px;  width: 266px; height: 293px; background: url(../images/bot-code.png) no-repeat; opacity: .85; z-index: 13; opacity: 0;}
.area-06.on .code{-webkit-animation-name:bounceInBottom;animation-name:bounceInBottom;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;opacity: 1;}
.area-06 h3{position: absolute; width: 100%; bottom: 44px; left: 0; height: 40px; line-height: 40px; text-align: center; color: #999;}
.area-06 h3 a{color: #999;}
.area-06 h4{position: absolute; width: 100%; bottom: 10px; left: 0; height: 34px; line-height: 34px; text-align: center; color: #999;}
.area-06 h4 span{margin-left: 15px;}
.area-06 h4  a{margin-left: 15px; color: #999; text-decoration: underline;}

@-webkit-keyframes fadeIn{from{opacity:0}
to{opacity:1}
}
@keyframes fadeIn{from{opacity:0}
to{opacity:1}
}
@-webkit-keyframes fadeInLeftBottomPlus{0%{opacity:0;-webkit-transform:translateX(-110px) translateY(0)}
80%{opacity:1}
100%{opacity:1;-webkit-transform:translateX(0) translateY(0)}
}
@keyframes fadeInLeftBottomPlus{0%{opacity:0;transform:translateX(-110px) translateY(0)}
80%{opacity:1}
100%{opacity:1;transform:translateX(0) translateY(0)}
}
@-webkit-keyframes fadeInRightBottomPlus{0%{opacity:0;-webkit-transform:translateX(110px) translateY(0)}
80%{opacity:1}
100%{opacity:1;-webkit-transform:translateX(0) translateY(0)}
}
@keyframes fadeInRightBottomPlus{0%{opacity:0;transform:translateX(110px) translateY(0)}
80%{opacity:1}
100%{opacity:1;transform:translateX(0) translateY(0)}
}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(60px)}
80%{opacity:1}
100%{opacity:1;-webkit-transform:translateX(0)}
}
@keyframes fadeInRight{0%{opacity:0;transform:translateX(60px)}
80%{opacity:1}
100%{opacity:1;transform:translateX(0)}
}
@-webkit-keyframes bounceInRight{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}
from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}
60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}
75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}
90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}
to{-webkit-transform:none;transform:none}
}
@keyframes bounceInRight{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}
from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}
60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}
75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}
90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}
to{-webkit-transform:none;transform:none}
}
@-webkit-keyframes bounceInLeft{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}
from{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}
60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}
75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}
to{-webkit-transform:none;transform:none}
}
@keyframes bounceInLeft{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}
from{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}
60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}
75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}
to{-webkit-transform:none;transform:none}
}
@-webkit-keyframes bounceInTop{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}
from{opacity:0;-webkit-transform:translate3d(0,-200px,0);transform:translate3d(0,-200px,0)}
60%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}
75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,-10px,0)}
90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}
to{-webkit-transform:none;transform:none}
}
@keyframes bounceInTop{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}
from{opacity:0;-webkit-transform:translate3d(0,-200px,0);transform:translate3d(0,-200px,0)}
60%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}
75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}
90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}
to{-webkit-transform:none;transform:none}
}
@-webkit-keyframes bounceInBottom{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}
from{opacity:0;-webkit-transform:translate3d(0,200px,0);transform:translate3d(0,200px,0)}
60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}
75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}
to{-webkit-transform:none;transform:none}
}
@keyframes bounceInBottom{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}
from{opacity:0;-webkit-transform:translate3d(0,200px,0);transform:translate3d(0,200px,0)}
60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}
75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}
to{-webkit-transform:none;transform:none}
}