@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: "BlackItalic";
    src: url(//www.alcatel-mobile.com/fonts/Lato-BlackItalic.eot); /* IE9 Compat Modes */
    src:  url(//www.alcatel-mobile.com/fonts/Lato-BlackItalic.woff) format('woff')
}

@font-face {
    font-family: "Thin";
    src: url(//www.alcatel-mobile.com/fonts/Lato-Thin.eot); /* IE9 Compat Modes */
    src: url(//www.alcatel-mobile.com/fonts/Lato-Thin.woff) format('woff')
}

@font-face {
    font-family: "Light";
    src: url(//www.alcatel-mobile.com/fonts/Lato-Light.eot); /* IE9 Compat Modes */
    src:url(//www.alcatel-mobile.com/fonts/Lato-Light.woff) format('woff')
}
@font-face{
    font-family: "Semibold";
    src: url(../fonts/Lato-Semibold.eot); /* IE9 Compat Modes */
    src:url(../fonts/Lato-Semibold.ttf) format('truetype')
}
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

a {
    background: transparent;
    text-decoration: none;
}

a:active, a:hover {
    outline: 0;
}
img {
    border: 0;
}
video,h1, h2, h3, h4, h5, p {
    margin: 0;
    padding: 0
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.clearx:before,.clearx:after{
    content:"";
    display:table;
}
.clearx{*zoom:1;}
.clearx:after{clear:both;}
html {
    -webkit-tap-highlight-color: transparent;
}
body {
    font-family: "Light";
    margin: 0;
}
.page {
    width: 100%;
    height: 950px;
    overflow: hidden;
    position: relative;
    background-color: #ffffff;
}
.page1 img,.page3 img,.page4 img,.page5 img{
    max-width: 100%;
    width: 100%;
    height: auto;
}
.name {
    font-size: 34px;
    color: #2c2c2c;
    font-family: "Thin";
    text-transform: uppercase;
}

.title {
    font-size: 65px;
    color: #000;
    font-family: "BlackItalic";
    text-transform: uppercase;
    margin-bottom:15px;
}

.ifo {
    display: block;
    font-size: 24px;
    line-height:32px;
    color: #2c2c2c;
    font-family: "Light";
}
/*第一屏*/ 
.page1{
    height:910px;
    background: url(../img/bg_kv_web.png) no-repeat;
    background-size:cover;
}
.p1_1{
    width:49.48%;
    position:absolute;
    top:17.38%;
    left:10%;
}
.p1_2{
    width:6.8%;
    position:absolute;
    bottom:19.4%;
    right:40.67%;
}
.p1_3{
    width:29.48%;
    position:absolute;
    bottom:3.4%;
    right:8.6%;
}
.text {
    position: absolute;
    bottom: 30.7%;
    right: 40.67%;
}
.text p{
    font-size: 40px;
    line-height:40px;
    color: #ffffff;
    font-family: "Semibold";
    text-align:right;
    text-shadow:0px 0px 4px rgba(0,0,0,.5);
}
.etailing {
    position: absolute;
    bottom: 18%;
    right: 40.67%;
}
.button {
    background-color: #0089cf;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    line-height: 1.3;
    margin-bottom: 10px;
    padding: 10px 30px;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
    border-radius: 6px;
    font-family: "Semibold";
    font-size: 1.3rem;
    transition: background .3s ease-out,color .3s ease-out;
}
.button:hover, .button.on {
    background-color: rgba(0,0,0,.8);
}
/*第二屏*/
.page2{
    height:660px;
    overflow:visible;
}
.p2_1{
    width:33.33%;
    position:absolute;
    right:12.3%;
    top:24%;
}
.p2_2{
    width:41.93%;
    position:relative;
    left:8.6%;
    top:-14%;
}
.p2_2_l{
    width:54.9%;
    position:absolute;
    left:1%;
    top:0.5%;
}
.p2_2_r{
    width:59.25%;
    position:absolute;
    left:44.72%;
    top:0.5%;
}
.vjs-big-play-button{
    display:none;
}
/*视频*/ 
.page6 video{
    width:100%;
    max-width:1280px;
    height:auto;
    max-height: 100%;
    position: absolute;
    left:50%;
    top:50%;
    transform:translate3d(-50%,-50%,0);
    z-index:1;
}
.video_bg{
    display:block;
    width:100%;
    max-width:1280px;
    height:auto;
    max-height: 100%;
    position: absolute;
    left:50%;
    top:50%;
    transform:translate3d(-50%,-50%,0);
    z-index:2;
}
.play{ 
    position:absolute; 
    width:100%;
    max-width:1280px;
    left:50%;
    top:50%;
    transform:translate3d(-50%,-50%,0);
    background:url(../img/icon.png) rgba(0,0,0,.2) center center no-repeat; 
    cursor:pointer; 
    background-size:80px; 
    z-index:3; 
}
/*第三屏*/ 
.page3{
    background:#fff url(../img/bg_design.png) bottom no-repeat;
    background-size:100% auto;
}
.p3_1{
    float:left;
    width:41.64%;
    padding:14% 0 0 3%;
}
.p3_2{
    float:left;
    width:44.6%;
    position:relative;
    left:5%;
    top:11.9%;
}
.p3_2_1{
    width:57.5%;
    position:absolute;
    left:3.85%;
    top:1%;
}
.p3_2_2{
    width:59.5%;
    position:absolute;
    left:21.5%;
    top:1%;
}
.p3_2_3{
    width:59.5%;
    position:absolute;
    left:38.55%;
    top:0%;
}
/*第四屏*/ 
.p4_1{
    float:right;
    width:52.81%;
    padding:15% 2% 0 0.5%;
}
.p4_1 .ifo{
    width:98%;
}
.p4_2{
    float:left;
    width:35%;
    position:relative;
    left:11.56%;
    top:2%;
}
.p4_2_l{
    width:68%;
    position:absolute;
    left:7%;
    margin-top:8%;
    z-index:2;
}
.facemaskVideo{
    width:55.5%;
    position:absolute;
    left:10.9%;
    margin-top:22%;
    z-index:3;
}
.p4_2_r{
    width:67%;
    position:absolute;
    right:1%;
    top:2%;
    z-index:1;
}
/*第五屏*/ 
.page5{
    overflow:visible;
    z-index:2;
    background:url(../img/bg_rear_camera.jpg) no-repeat;
    background-size:cover;   
}
.page5 .name,.page5 .title,.page5 .ifo{
    color:#fff;
}
.p5_1{
    float:left;
    width:46.88%;
    padding:15% 0 0 3%;
}
.p5_2{
    float:left;
    width:44.53%;
    position:relative;
    left:0%;
    top:-5%;
}
.p5_2_l{
    width:64.4%;
    position:absolute;
    left:0%;
    margin-top:19.05%;
    
}
.p5_2_r{
    width:74.94%;
    position:absolute;
    left:28.85%;
    margin-top:2.85%;
}
.specs{
    background:#ffffff;
    position:relative;
    z-index:999;
}
/*spec*/
.details {
    padding: 3% 0 0 20%;
}

.specs h1 {
    font-size: 70px;
    line-height:120px;
    text-align: center;
    color: #2c2c2c;
    font-family: "Light";
}

.part_left, .part_right {
    width: 40%;
    float: left;
}

.detail {
    margin-bottom: 100px;
}

.detail h3 {
    color: #2c2c2c;
    font-family: "Light";
    font-size:24px;
    margin-bottom:30px;
    text-transform: uppercase;
}
.detail p.remark{
    font-size: 14px;
    line-height: 20px;
}
.detail p{
    max-width: 70%;
    color: #2c2c2c;
    font-family: "Light";
    font-size:18px ;
    line-height: 30px;
}
.detail .androidTM{
    position: relative;
}
.detail span{
    position: absolute;
    display:inline-block;
    top:-5px;
    font-size:8px;
}
@media screen and (max-width: 1680px) {
    .page{
        height: 690px;
    }
    .name {
        font-size: 34px;
    }
    .title {
        font-size: 68px;
    }
    .ifo {
        font-size: 24px;
    }
    .p1_1{
        // width:9rem;
    }
    .p1_2{
        bottom:40%;
    }
    .page2{
        height:600px;
    }
    .p2_2{
        top:-4%;
        width:39.43%;
    }
    .p2_2 img{
        max-width:98%;
    }
    .p2_2_r{
        left:42.72%;
    }
    .p2_1{
        // width:7.4rem;
        right:8.3%;
    }
    .p4_2{
        float:left;
        width:35%;
        position:relative;
        left:7.56%;
        top:2%;
    }
    .p4_2_l{
        width:68%;
        position:absolute;
        left:7%;
        margin-top:8%;
        z-index:2;
    }
    .p4_2_r{
        width:67%;
        position:absolute;
        right:1%;
        top:2%;
        z-index:1;
    }
    .p4_1{
        // width:11rem;
        // padding:3.2rem 1.4rem 0 .6rem;
    }
    .specs{
        padding-top:20px;
    }
    .specs h1 {
        font-size: 66px;
        line-height:100px;
    }
    .detail {
        margin-bottom: 80px;
    }
    .detail h3 {
        font-size:24px;
        margin-bottom: 30px;
    }
    .detail p.remark{
        font-size: 14px;
        line-height: 20px;
    }
    .detail p{
        font-size:18px ;
        line-height: 30px;
    }
    .detail span{
        top:-5px;
        font-size:8px;
    }
}
@media screen and (max-width: 1400px) {
    .page{
        height: 690px;
    }
    .page6 video{
        width:80%;
    }
    .page3{
        height:690px;
    }
    .play{
        width:80%;
    }
    .name {
        font-size: 32px;
    }
    .title {
        font-size: 64px;
    }
    .ifo {
        font-size: 22px;
    }
    .p1_3{
        right:4.6%;
    }
    .page4{
        height:670px;
    }
    .page2{
        height:600px;
    }
    .p2_2{
        top:0%;
    }
    .p2_2 img{
        max-width:95%;
    }
    .p2_2_r{
        left:41.72%;
    }
    .p2_1{
        right:6.3%;
    }
    .p3_1{
        width:45.64%;
        
    }
    .p4_2{
        float:left;
        width:34.5%;
        position:relative;
        left:6.56%;
        top:2%;
    }
    .p4_1{
        // width:10rem;
        // padding:2rem 1.2rem 0 .2rem;
    }
    .p5_1{
        // padding-top:2.9rem;
    }
    .specs h1 {
        font-size: 66px;
        line-height:100px;
    }
    .detail {
        margin-bottom: 80px;
    }
    .detail h3 {
        font-size:24px;
        margin-bottom: 30px;
    }
    .detail p.remark{
        font-size: 14px;
        line-height: 20px;
    }
    .detail p{
        font-size:18px ;
        line-height: 30px;
    }
    .detail span{
        top:-5px;
        font-size:8px;
    }
}
@media screen and (max-width: 1200px) {
    .page{
        height: 620px;
    }
    .page2{
        height:500px;
    }
    .page4{
        height:550px;
    }
    .page5{
        height:570px;
    }
    .name {
        font-size: 22px;
    }
    .title {
        font-size: 40px;
    }
    .ifo {
        font-size: 18px;
        line-height:24px;
    }
    .text p{
        font-size:24px;
        line-height:24px;
    }
    .p1_1{
        // width:9rem;
    }
    .p1_3{
        // width:5.8rem;
    }
    .p4_2{
        float:left;
        width:33%;
        position:relative;
        left:7.56%;
        top:2%;
    }
    .p4_1{
        // width:10rem;
        // padding:2rem 1.2rem 0 .6rem;
    }
    .specs{
        padding:30px 0 0 0;
    }
    .specs h1{
        font-size:60px;
    }
}
@media screen and (max-width: 1024px) {
    .name {
        font-size: 24px;
    }
    .title {
        font-size: 50px;
    }
    .ifo {
        font-size: 18px;
    }
    .page{
        height: 520px;
    }
    .page2{
        height:400px;
    }
    .p1_3{
        // width:5rem;
        // right:1.6%;
    }
    .p2_1{
        // top:7.8%;
    }
    .p3_1{
        padding-top:11%;
    }
    .p3_2{
        top:12%;
    }
    .p4_1{
        // width:9rem;
        // padding-top:1rem;
    }
    .p5_1{
        // padding-top:2.9rem;
    }
    .specs{
        padding-top: 20px;
    }
    .specs h1{
        font-size:50px;
        line-height:60px;
    }
    .detail h3 {
        font-size:20px;
        margin-bottom: 25px;
    }
    .detail p.remark{
        font-size: 14px;
        line-height: 20px;
    }
    .detail p{
        max-width: 80%;
        font-size:16px ;
        line-height: 24px;
    }
    .detail span{
        top:-5px;
        font-size:8px;
    }
}
@media screen and (max-width: 991px){

}
@media screen and (max-width: 768px) {
    .page{
        height: 700px;
    }
    .page3{
        height:650px;
    }
    .page6 video{
        width:100%;
    }
    .play{
        width:100%;
        height:100%;
    }
    .name {
        font-size: 28px;
    }
    .title {
        font-size: 58px;
    }
    .ifo {
        font-size: 20px;
    }
    .page1{
        height:900px;
        background:url(../img/bg_mobile.png) no-repeat;
        background-size:100% auto;
    }
    .page6{
        height:450px;
    }
    .etailing {
        position: absolute;
        bottom: 45%;
        right: 18%;
    }
    .p1_1{
        width:80%;
        left:50%;
        transform:translate3d(-50%,0,0);
        top:10%;
    }
    .p1_2{
        width:10%;
        left:50%;
        transform:translate3d(-50%,0,0);
        top:25%;
    }
    .p1_3{
        width:50%;
        left:50%;
        transform:translate3d(-50%,0,0);
        bottom:0%;
    }
    .text{
        width:80%;
        left:50%;
        transform:translate3d(-50%,0,0);
        top:32%;
    }
    .text p{
        font-size:24px;
        line-height:24px;
        text-align:center;
        text-shadow:0px 0px 4px rgba(0,0,0,.5);
    }
    .page2{
        height:640px;
    }
    .p2_1{
        position:absolute;
        width:80%;
        left:50%;
        top:20px;
        height:200px;
        margin:0;
        transform:translate3d(-50%,0,0);
        text-align:center;
    }
    .p2_2{
        width:50%;
        left:50%;
        transform:translate3d(-50%,0,0);
        top:240px;
    }
    .p3_1{
        width:80%;
        float:none;
        padding:0;
        height:210px;
        margin:0 auto;
        margin-top:30px;
        text-align:center;
    }
    .p3_2{
        float:none;
        width:50%;
        margin:0 auto;
    }
    .page4{
        height:870px;
    }
    .p4_1{
        position:absolute;
        width:80%;
        left:50%;
        top:20px;
        height:290px;
        padding:0;
        transform:translate3d(-50%,0,0);
        text-align:center;
    }
    .p4_2{
        position:absolute;
        width:50%;
        left:50%;
        margin:0;
        top:330px;
        transform:translate3d(-50%,0,0);
    }
    .p5_1{
        position:absolute;
        width:80%;
        left:50%;
        top:20px;
        height:210px;
        padding:0;
        transform:translate3d(-50%,0,0);
        text-align:center;
    }
    .p5_2{
        position:absolute;
        width:50%;
        left:50%;
        margin:0;
        top:230px;
        transform:translate3d(-50%,0,0);
    }
    .specs{
        padding:0;
    }
    .specs h1 {
        font-size: 40px;
        line-height:80px;
    }
    .part_left,.part_right{
        width: 100%;
    }
    .detail {
        margin-bottom: 50px;
    }
    .detail h3 {
        font-size:20px;
        margin-bottom: 25px;
    }
    .detail p.remark{
        font-size: 14px;
        line-height: 20px;
    }
    .detail p{
        max-width: 80%;
        font-size:16px ;
        line-height: 24px;
    }
    .detail span{
        top:-5px;
        font-size:8px;
    }
}
@media screen and (max-width: 415px) {
    .page{
        height: 410px;
    }
    .name {
        font-size: 20px;
    }
    .title {
        font-size: 40px;
    }
    .ifo {
        font-size: 16px;
        line-height: 20px;
    }
    .page1{
        height:540px;
    }
    .page6{
        height:240px;
    }
    .play{
        background-size:50px;
    }
    .p1_2 img{
        max-width:90%;
    }
    .p1_3{
        width:55%;
    }
    .text p{
        font-size:18px;
        line-height:18px;
    }
    .p2_1,.p3_1,.p4_1,.p5_1{
        width:90%;
    }
    .page2{
        height:480px;
    }
    .p2_1{
        top:300px;
        height:165px;
    }
    .p2_2{
        top:195px;
    }
    .page3{
        height:480px;
    }
    .p3_1{
        margin-top:20px;
        height:200px;
    }
    .p3_2{
        width:60%;
        top:70px;
    }
    .page4{
        height:695px;
    }
    .p4_1{
        height:310px;
        top: 200px;
    }
    .p4_2{
        width:60%;
        top:350px;
        left: 50% !important;
    }
    .page5{
        height:510px;
    }
    .p5_1{
        height:184px;
    }
    .p5_2{
        width:60%;
        top:345px;
    }
    .specs{
        padding:0;
    }
    .specs h1 {
        font-size: 40px;
        line-height:80px;
    }
    .part_left,.part_right{
        width: 100%;
    }
    .detail {
        margin-bottom: 40px;
    }
    .detail h3 {
        font-size:20px;
        margin-bottom: 25px;
    }
    .detail p.remark{
        font-size: 14px;
        line-height: 20px;
    }
    .detail p{
        max-width: 80%;
        font-size:16px ;
        line-height: 24px;
    }
    .detail span{
        top:-5px;
        font-size:8px;
    }
}
@media screen and (max-width: 376px) {
    .name {
        font-size: 24px;
    }
    .title {
        font-size: 44px;
    }
    .ifo {
        font-size: 16px;
        line-height: 24px;
    }
    .p1_2{
        bottom:35%;
    }
    .page1{
        height:500px;
    }
    .page5{
        height:500px;
    }
    .p5_1{
        padding-top:10px;
        height:250px;
    }
    .page2{
        height:540px;
    }
    .p2_1{
        height:240px;
    }
    .p2_2{
        top:273px;
    }
    .page3{
        height:490px;
    }
    .p3_1{
        margin-top:20px;
        height:240px;
    }
    .page4{
        height:730px;
    }
    .page5{
        height:515px;
    }
    .p4_1{
        height:360px;
    }
    .p4_2{
        top:420px;
    }
    .p5_1{
        height:230px;
    }
    .p5_2{
        top: 345px;
    }
    .specs{
        padding:0;
    }
    .specs h1 {
        font-size: 40px;
        line-height:80px;
    }
    .part_left,.part_right{
        width: 100%;
    }
    .detail {
        margin-bottom: 30px;
    }
    .detail h3 {
        font-size:20px;
        margin-bottom: 25px;
    }
    .detail p.remark{
        font-size: 14px;
        line-height: 20px;
    }
    .detail p{
        max-width: 80%;
        font-size:16px ;
        line-height: 24px;
    }
    .detail span{
        top:-5px;
        font-size:8px;
    }
}
@media screen and (max-width: 320px) {
    .name {
        font-size: 22px;
    }
    .title {
        font-size: 40px;
    }
    .ifo {
        font-size: 16px;
        line-height: 20px;
    }
    .page1{
        height:430px;
    }
    .text p{
        font-size:16px;
        line-height:16px;
    }
    .p1_1{
        bottom:30%;
    }
    .page2{
        height:500px;
    }
    .page6{
        height:200px;
    }
    .p2_1{
        height:240px;
    }
    .p2_2{
        top:260px;
    }
    .page3{
        height:440px;
    }
    .p3_1{
        margin-top:20px;
        height:220px;
    }
    .page4{
        height:650px;
    }
    .p4_1{
        height:355px;
    }
    .p4_2{
        top:385px;
    }
    .p5_1{
        height:230px;
    }
    .p5_2{
        top:245px;
    }
    .page5{
        height:460px;
    }
    /*spec*/
    .details {
        padding: 5% 0 5% 20%;
    }
    .specs h1 {
        font-size: 30px;
        line-height:60px;
    }
    .part_left,.part_right{
        width: 100%;
    }
    .detail {
        margin-bottom:25px;
    }
    .detail h3 {
        font-size:18px;
        // margin-bottom: .5rem;
    }
    .detail p.remark{
        font-size: 12px;
        line-height: 16px;
    }
    .detail p{
        max-width: 80%;
        font-size:14px ;
        line-height: 20px;
    }
    .detail span{
        top:-5px;
        font-size:5px;
    }
}
@media (min-width: 1681px) and (max-width:1919px){
    .page{
        height:820px;
    }
    .page2{
        height:650px;
    }
    .name {
        font-size: 32px;
    }
    .title {
        font-size: 60px;
    }
    .ifo {
        font-size: 22px;
        line-height: 26px;
    }
    .text p{
        font-size:36px;
        line-height:36px;
    }
    // .p1_3{
    //     width:5.2rem;
    // }
    // .p2_2{
    //     top:-60%
    // }
    // .p4_1{
    //     width:10rem;
    // }
    // .p4_2{
    //     float:left;
    //     width:35%;
    //     position:relative;
    //     left:4.56%;
    //     top:2%;
    // }
}
@media (min-width: 1401px) and (max-width:1679px){}
    .page{
        height:690px;
    }
    .page2{
        height:620px;
    }
    .name {
        font-size: 30px;
    }
    .title {
        font-size: 52px;
    }
    .ifo {
        font-size: 20px;
        line-height: 24px;
    }
    .text p{
        font-size:30px;
        line-height:30px;
    }
    .p2_2{
        top:0.2%;
    }
    .p4_2{
        float:left;
        width:33%;
        position:relative;
        left:8.56%;
        top:1.5%;
    }
}
@media (min-width: 1201px) and (max-width:1360px){
    .page{
        height:640px;
    }
    .page2{
        height:500px;
    }
    .name {
        font-size: 26px;
    }
    .title {
        font-size: 48px;
    }
    .ifo {
        font-size: 20px;
        line-height: 24px;
    }
    .text p{
        font-size:26px;
        line-height:26px;
    }
    .specs h1{
        font-size:45px;
        line-height:90px;
    }
}
@media (min-width: 1025px) and (max-width:1199px){
    .page{
        height:560px;
    }
}
/*第一屏动画*/ 
/* 弹入-从上 */
@-webkit-keyframes bounceinT{
    0%{opacity:0;-webkit-transform:translateY(-100px);}
    60%{opacity:1;-webkit-transform:translateY(30px);}
    80%{-webkit-transform:translateY(-10px);}
    100%{-webkit-transform:translateY(0);}
}
@keyframes bounceinT{
    0%{opacity:0;transform:translateY(-100px);}
    60%{opacity:1;transform:translateY(30px);}
    80%{transform:translateY(-10px);}
    100%{transform:translateY(0);}
}
.an1 {
    -webkit-animation: 1s ease-out backwards;
    animation: 1s ease-out backwards;
    -webkit-animation-name: bounceinT;
    animation-name: bounceinT;
}
@-webkit-keyframes bounceinM{
    0%{opacity:0;-webkit-transform:translate3d(-50%,-100px,0);}
    60%{opacity:1;-webkit-transform:translate3d(-50%,30px,0);}
    80%{-webkit-transform:translate3d(-50%,-10px,0);}
    100%{-webkit-transform:translate3d(-50%,0,0);}
}
@keyframes bounceinM{
    0%{opacity:0;transform:translate3d(-50%,-100px,0);}
    60%{opacity:1;transform:translate3d(-50%,30px,0);}
    80%{transform:translate3d(-50%,-10px,0);}
    100%{transform:translate3d(-50%,0,0);}
}
.an1_2 {
    -webkit-animation: 1s ease-out backwards;
    animation: 1s ease-out backwards;
    -webkit-animation-name: bounceinM;
    animation-name: bounceinM;
}
/*第二屏动画*/
 @-webkit-keyframes an2_l {
    from {
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
        opacity:1;
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@keyframes an2_l {
    from {
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
        opacity:1;
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.an2_l {
    -webkit-animation: 1.2s ease-out backwards;
    animation: 1.2s ease-out backwards;
    -webkit-animation-name: an2_l;
    animation-name: an2_l;
}
@-webkit-keyframes an2_r {
    from {
        -webkit-transform: translate3d(20%, 0, 0);
        transform: translate3d(20%, 0, 0);
        opacity:1;
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@keyframes an2_r {
    from {
        -webkit-transform: translate3d(20%, 0, 0);
        transform: translate3d(20%, 0, 0);
        opacity:1;
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.an2_r {
    -webkit-animation: 1.2s ease-out backwards;
    animation: 1.2s ease-out backwards;
    -webkit-animation-name: an2_r;
    animation-name: an2_r;
}
/*第三屏动画*/
 @-webkit-keyframes an3_l {
    from {
        -webkit-transform: translate3d(0, 30%, 0);
        transform: translate3d(0, 30%, 0);
        opacity:1;
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@keyframes an3_l {
    from {
        -webkit-transform: translate3d(0, 30%, 0);
        transform: translate3d(0, 30%, 0);
        opacity:1;
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.an3_l {
    -webkit-animation: .8s ease-out backwards;
    animation: .8s ease-out backwards;
    -webkit-animation-name: an3_l;
    animation-name: an3_l;
}
@-webkit-keyframes an3_c {
    from {
        -webkit-transform: translate3d(0, 35%, 0);
        transform: translate3d(0, 35%, 0);
        opacity:1;
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@keyframes an3_c {
    from {
        -webkit-transform: translate3d(0, 35%, 0);
        transform: translate3d(0, 35%, 0);
        opacity:1;
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.an3_c {
    -webkit-animation: 1s ease-out backwards;
    animation: 1s ease-out backwards;
    -webkit-animation-name: an3_c;
    animation-name: an3_c;
}
@-webkit-keyframes an3_r {
    from {
        -webkit-transform: translate3d(0, 40%, 0);
        transform: translate3d(0, 40%, 0);
        opacity:1;
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@keyframes an3_r {
    from {
        -webkit-transform: translate3d(0, 40%, 0);
        transform: translate3d(0, 40%, 0);
        opacity:1;
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.an3_r {
    -webkit-animation: 1.2s ease-out backwards;
    animation: 1.2s ease-out backwards;
    -webkit-animation-name: an3_r;
    animation-name: an3_r;
}
/*第四屏动画*/ 
@-webkit-keyframes an4_l{
    0%{opacity:1;-webkit-transform:translateX(-30px);}
    60%{opacity:1;-webkit-transform:translateX(20px);}
    80%{-webkit-transform:translateX(-10px);}
    100%{-webkit-transform:translateX(0);}
}
@keyframes an4_l{
    0%{opacity:1;transform:translateX(-30px);}
    60%{opacity:1;transform:translateX(20px);}
    80%{transform:translateX(-10px);}
    100%{transform:translateX(0);}
}
.an4_l {
    -webkit-animation: 1s ease-out backwards;
    animation: 1s ease-out backwards;
    -webkit-animation-name: an4_l;
    animation-name: an4_l;
}
@-webkit-keyframes an4_r{
    0%{opacity:1;-webkit-transform:translateX(30px);}
    60%{opacity:1;-webkit-transform:translateX(-20px);}
    80%{-webkit-transform:translateX(10px);}
    100%{-webkit-transform:translateX(0);}
}
@keyframes an4_r{
    0%{opacity:1;transform:translateX(30px);}
    60%{opacity:1;transform:translateX(-20px);}
    80%{transform:translateX(10px);}
    100%{transform:translateX(0);}
}
.an4_r {
    -webkit-animation: 1s ease-out backwards;
    animation: 1s ease-out backwards;
    -webkit-animation-name: an4_r;
    animation-name: an4_r;
}
/*第五屏动画*/
 @-webkit-keyframes an5_1 {
    0% {
        -webkit-transform: translateY(45%);
        transform: translateY(45%);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes an5_1 {
    0% {
        -webkit-transform: translateY(45%);
        transform: translateY(45%);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.an5_1 {
    -webkit-animation: 1s ease-out backwards;
    animation: 1s ease-out backwards;
    -webkit-animation-name: an5_1;
    animation-name: an5_1;
}
@-webkit-keyframes an5_2 {
    0% {
        -webkit-transform: translateY(30%);
        transform: translateY(30%);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes an5_2 {
    0% {
        -webkit-transform: translateY(30%);
        transform: translateY(30%);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.an5_2 {
    -webkit-animation: 1s ease-out backwards;
    animation: 1s ease-out backwards;
    -webkit-animation-name: an5_2;
    animation-name: an5_2;
}
@-webkit-keyframes FadeInB {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 1.6rem, 0);
        transform: translate3d(0, 1.6rem, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes FadeInB {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 1.6rem, 0);
        transform: translate3d(0, 1.6rem, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeinb {
    -webkit-animation: 1s ease-out backwards;
    animation: 1s ease-out backwards;
    -webkit-animation-name: FadeInB;
    animation-name: FadeInB;
}

.delay-1 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.delay-2 {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.stop-state {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important;
    -webkit-animation-fill-mode: both !important;
    animation-fill-mode: both !important;
    display: none !important;
}

.running-state {
    display: block !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
}