/*reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
* { tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -ms-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; background-size: contain; background-repeat: no-repeat; }
body{ font-family: "Microsoft YaHei";line-height: 1; }
input, textarea { outline: 0; resize: none; }
a{ display: block; height: 100%; text-decoration: none; }
img{ width: 100%;vertical-align: top;}
html,body {width:100%; height:100%;margin:0;padding:0;}

/*music*/
.music{position:absolute;width:.31rem;height:.31rem;z-index:2;top:0.75rem;right:0.625rem; z-index:99;}
.play{-webkit-animation:music 1.5s linear infinite;animation:music 1.5s linear infinite;}
a.arr{position:absolute;z-index:100; bottom:0.25rem;left:50%; margin-left:-.325rem; width:.65rem; height:.51rem; -webkit-animation:arr2 1s linear infinite;animation:arr2 1s linear infinite;}
@-webkit-keyframes arr2{
    0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;}
    100%{-webkit-transform:translateY(-30px);transform:translateY(-30px);opacity:0;}
}
@keyframes arr2{
    0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;}
    100%{-webkit-transform:translateY(-30px);transform:translateY(-30px);opacity:0;}
}
@keyframes music{
    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}

@-webkit-keyframes music{
    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}

/*Loading CSS*/
.loadwrap{  width: 100%;height: 100%;background-color:#000;position: absolute;z-index: 99;}
#caseBlanche {  height:1.5rem;  width :1.5rem;  float : left;  position: absolute;  z-index: 99;  left: 0;right: 0;top: -17%;bottom: 0;margin: auto;}
#caseBlanche #load {height:1.5rem; width:1.5rem; color : #fff;font-family : calibri;text-align : center;position : absolute;top: .88rem;font-size:0.24rem;line-height:.5rem;text-align: center;}
#load i{height: 100%;display: inline-block;width: 100%;text-align: center;line-height: 1.84rem;}
/*#load{position:absolute;top: -17%;bottom: 0;}*/
.loading{position: absolute;top:1.712rem; width: 100%; color:#fff;font-size:0.24rem;text-align: center;}

.caseBlanche_logo img{
    width:4.86rem;
    position: absolute;
    left:50%;
    margin-left:-2.43rem;
    /*top:-3rem;*/
}
canvas{
    width:4rem;
    height:3rem;
}
.cLoad {
    width:4rem;
    height:3rem;
    display: block;
    position: absolute;
    left:50%;
    margin-left: -2rem;
}
/*swiper*/
body {
    font-family: "Microsoft YaHei";
    font-size: .14rem;
    color:#000;
    margin: 0;
    padding: 0;
    width:100%;
    height:100%;
    overflow: hidden;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    /*text-align: center;*/
    font-size: .18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden;
}
/*隐藏*/
.hide{
    opacity:0;
}
.page_common{
    width:100%;
    height:100%;
    /*position:relative;*/
}
.page_1{
    background:url(../images/page_bg.jpg) center top no-repeat;
    background-size:100%;
}
.page_2{
    background:url(../images/page2_bg.jpg) center top no-repeat;
    background-size:100%;
}
.page_3{
    background:url(../images/page3_bg.jpg) center top no-repeat;
    background-size:100%;
}
.page_4{
    background:url(../images/page4_bg.jpg) center top no-repeat;
    background-size:100%;
}
.page_5{
    background:url(../images/page5_bg.jpg) center top no-repeat;
    background-size:100%;
}
.page_6{
    background:url(../images/page6_bg.jpg) center top no-repeat;
    background-size:100%;
}



/*page1*/
.page_1 .logo{
    width:4.86rem;
    position: absolute;
    left:50%;
    margin-left: -2.43rem;
    top:1rem;
}
.page_title{
    width:2.34rem;
    position: absolute;
    left:1.09rem;
    top:3.93rem;
}
.page_btn{
    width:.61rem;
    position: absolute;
    left:3.78rem;
    top:3.96rem;
}
.page_text{
    width:4.26rem;
    position: absolute;
    left:50%;
    margin-left: -2.13rem;
    top:2.32rem;
}
.page_text2{
    width:4.26rem;
    position: absolute;
    left:50%;
    margin-left: -2.13rem;
    top:2.84rem;
}
.page_text3{
     width:3.16rem;
     position: absolute;
     left:1.04rem;
     top:5.2rem;
 }
.page_text4{
    width:4.86rem;
    position: absolute;
    left:50%;
    margin-left: -2.43rem;
    top:8.3rem;
}

/*page2*/
.page2_title{
    width:2.58rem;
    position: absolute;
    left:50%;
    margin-left: -1.29rem;
    top:1.1rem;
}
.page2_text{
    width:4.35rem;
    position: absolute;
    left:50%;
    margin-left: -2.175rem;
    top:2.46rem;
}
.page2_btn{
    width:4.36rem;
    position: absolute;
    left:50%;
    margin-left: -2.18rem;
    top:8.02rem;
}
.page2_btn2{
    width:2.97rem;
    position: absolute;
    left:1.02rem;
    top:8.6rem;
}
/*page3*/
.page3_title{
    width:2.58rem;
    position: absolute;
    left:50%;
    margin-left: -1.29rem;
    top:1.1rem;
}
.page3_text{
    width:4.22rem;
    position: absolute;
    left:50%;
    margin-left: -2.11rem;
    top:2.42rem;
}
.page3_text2{
    width:4.22rem;
    position: absolute;
    left:50%;
    margin-left: -2.11rem;
    top:2.94rem;
}
.page3_text3{
    width:4.22rem;
    position: absolute;
    left:50%;
    margin-left: -2.11rem;
    top:3.47rem;
}
.page3_arrband{
    width:2.81rem;
    position: absolute;
    left:50%;
    margin-left: -1.405rem;
    top:4.26rem;
}
.page3_band{
    width:2.24rem;
    position: absolute;
    left:1.06rem;
    top:4.7rem;
}
.page3_band2{
    width:2.24rem;
    position: absolute;
    left:3.3rem;
    top:4.7rem;
}
.page3_band3{
    width:2.24rem;
    position: absolute;
    left:1.06rem;
    top:5.68rem;
}
.page3_band4{
    width:2.24rem;
    position: absolute;
    left:3.3rem;
    top:5.68rem;
}
.page3_band5{
    width:2.24rem;
    position: absolute;
    left:1.06rem;
    top:6.68rem;
}
.page3_band6{
     width:2.24rem;
     position: absolute;
     left:3.3rem;
     top:6.68rem;
}
.page3_band7{
    width:2.24rem;
    position: absolute;
    left:1.06rem;
    top:7.67rem;
}
.page3_band8{
    width:2.24rem;
    position: absolute;
    left:3.3rem;
    top:7.67rem;
}
.page3_band9{
    width:2.24rem;
    position: absolute;
    left:1.06rem;
    top:8.66rem;
}
.page3_band10{
    width:2.24rem;
    position: absolute;
    left:3.3rem;
    top:8.66rem;
}
/*page4*/
.page4_title{
    width:4.1rem;
    position: absolute;
    left:50%;
    margin-left: -2.05rem;
    top:1.06rem;
}
.page4_picTxt{
    width:1.54rem;
    position: absolute;
    left:1rem;
    top:2.25rem;
}
.page4_pic{
    width:2.72rem;
    position: absolute;
    left:2.64rem;
    top:2.25rem;
}
.page4_picTxt2{
    width:1.53rem;
    position: absolute;
    left:3.84rem;
    top:4rem;
}
.page4_pic2{
    width:2.73rem;
    position: absolute;
    left:1rem;
    top:4rem;
}
.page4_picTxt3{
    width:1.54rem;
    position: absolute;
    left:1rem;
    top:5.75rem;
}
.page4_pic3{
    width:2.72rem;
    position: absolute;
    left:2.64rem;
    top:5.75rem;
}
.page4_pic4{
    width:2.73rem;
    position: absolute;
    left:1rem;
    top:7.5rem;
}
.page4_picTxt4{
    width:1.53rem;
    position: absolute;
    left:3.86rem;
    top:7.5rem;
}
/*page5*/
.page5_title{
    width:3.6rem;
    position: absolute;
    left:50%;
    margin-left: -1.8rem;
    top:1.1rem;
}
.page5_pic{
    width:4.37rem;
    position: absolute;
    left:50%;
    margin-left: -2.185rem;
    top:2.44rem;
}
.page5_pic2{
    width:4.36rem;
    position: absolute;
    left:50%;
    margin-left: -2.18rem;
    top:4.23rem;
}
.page5_pic3{
    width:4.32rem;
    position: absolute;
    left:50%;
    margin-left: -2.16rem;
    top:6rem;
}
.page5_pic4{
    width:4.36rem;
    position: absolute;
    left:50%;
    margin-left: -2.18rem;
    top:7.78rem;
}

/*page6*/
.page6_txt{
    width:4.51rem;
    position: absolute;
    left:50%;
    margin-left: -2.25rem;
    top:1.16rem;
}
.page6_btn{
    width:2.28rem;
    position: absolute;
    /*left:50%;*/
    /*margin-left: -1.14em;*/
    left:2rem;
    top:1.9rem;
}
.page6_btnTxt{
    width:1.66rem;
    position: absolute;
    /*left:50%;*/
    /*margin-left: -0.83em;*/
    left:2.24rem;
    top:1.96rem;
}
.page6_time{
    width:3.48rem;
    position: absolute;
    left:50%;
    margin-left: -1.74rem;
    top:2.9rem;
}
.page6_code{
    width:2.23rem;
    position: absolute;
    left:50%;
    margin-left: -1.125rem;
    top:3.8rem;
}
.page6_codeTxt{
    width:2.23rem;
    position: absolute;
    left:50%;
    margin-left: -1.125rem;
    top:7.3rem;
}
.page6_logo{
    width:2.46rem;
    position: absolute;
    left:50%;
    margin-left: -1.23rem;
    top:8.32rem;
}

/*animate infinite*/

.swiper-slide-active .logo{
    -webkit-animation:zoomInLeft .4s .4s linear forwards;
    animation:zoomInLeft .4s .4s linear forwards;
}
.swiper-slide-active .page_text{
    -webkit-animation:txt .6s .8s linear forwards;
    animation:txt .6s .8s linear forwards;
}
.swiper-slide-active .page_text2{
    -webkit-animation:txt2 .6s 1.1s linear forwards;
    animation:txt2 .6s 1.1s linear forwards;
}
@-webkit-keyframes txt {
    0%{
        opacity: 1;
        top:5.32rem;;
    }
    100%{
        opacity: 1;
        top:2.32rem;
    }
}
@keyframes txt {
    0%{
        opacity: 1;
        top:5.32rem;
    }
    100%{
        opacity: 1;
        top:2.32rem;
    }
}

@-webkit-keyframes txt2 {
    0%{
        opacity: 1;
        top:4.84rem;
    }
    100%{
        opacity: 1;
        top:2.84rem;
    }
}
@keyframes txt2 {
    0%{
        opacity: 1;
        top:4.84rem;
    }
    100%{
        opacity: 1;
        top:2.84rem;
    }
}
.swiper-slide-active .page_title{
    -webkit-animation:smallbig .4s 1.5s linear forwards;
    animation:smallbig .4s 1.5s linear forwards;
}
.swiper-slide-active .page_btn{
    -webkit-animation:jump .8s 1.7s linear infinite;
    animation:jump .8s 1.7s linear infinite;
}

@-webkit-keyframes jump {
     0%,100%{
         opacity: 1;
         top:4.06rem;
     }
     50%{
         opacity: 1;
         top:3.96rem;
     }
 }
@keyframes jump {
    0%,100%{
        opacity: 1;
        top:4.06rem;
    }
    50%{
        opacity: 1;
        top:3.96rem;
    }
}

.swiper-slide-active .page_text3{
    -webkit-animation:txt3 .6s 2.1s linear forwards;
    animation:txt3 .6s 2.1s linear forwards;
}


@-webkit-keyframes txt3 {
    0%{
        opacity: 1;
        top:7.2rem;
    }
    100%{
        opacity: 1;
        top:5.2rem;
    }
}
@keyframes txt3 {
    0%{
        opacity: 1;
        top:7.2rem;
    }
    100%{
        opacity: 1;
        top:5.2rem;
    }
}
.swiper-slide-active .page_text4{
    -webkit-animation:fadeIn .4s 2.4s linear forwards;
    animation:fadeIn .4s 2.4s linear forwards;
}

/*page2*/
.swiper-slide-active .page2_title{
    -webkit-animation:flipy .4s .4s linear forwards;
    animation:flipy .4s .4s linear forwards;
}
.swiper-slide-active .page2_text{
    -webkit-animation:smallbig .4s .8s linear forwards;
    animation:smallbig .4s .8s linear forwards;
}
.swiper-slide-active .page2_btn{
    -webkit-animation:lefBtn .6s 1s linear forwards;
    animation:lefBtn .6s 1s linear forwards;
}
.swiper-slide-active .page2_btn2{
    -webkit-animation:lefBtn2 .6s 1.1s linear forwards;
    animation:lefBtn2 .6s 1.1s linear forwards;
}
@-webkit-keyframes lefBtn {
     0%{
         opacity: 1;
         left:50%;
         margin-left: -4.18rem;
     }
     100%{
         opacity: 1;
         left:50%;
         margin-left: -2.18rem;
     }
 }
@keyframes lefBtn {
    0%{
        opacity: 1;
        left:50%;
        margin-left: -4.18rem;
    }
    100%{
        opacity: 1;
        left:50%;
        margin-left: -2.18rem;
    }
}

@-webkit-keyframes lefBtn2 {
    0%{
        opacity: 1;
        left:3.02rem;
    }
    100%{
        opacity: 1;
        left:1.02rem;
    }
}
@keyframes lefBtn2 {
    0%{
        opacity: 1;
        left:3.02rem;
    }
    100%{
        opacity: 1;
        left:1.02rem;
    }
}
/*page3*/
.swiper-slide-active .page3_title{
    -webkit-animation:flipy .4s .4s linear forwards;
    animation:flipy .4s .4s linear forwards;
}
.swiper-slide-active .page3_text{
    -webkit-animation:three_txt .8s .8s linear forwards;
    animation:three_txt .8s .8s linear forwards;
}
.swiper-slide-active .page3_text2{
    -webkit-animation:three_txt .6s .9s linear forwards;
    animation:three_txt .6s .9s linear forwards;
}
.swiper-slide-active .page3_text3{
    -webkit-animation:three_txt .6s 1s linear forwards;
    animation:three_txt .6s 1s linear forwards;
}
@-webkit-keyframes three_txt {
    0%{
        opacity: 0;
        left:50%;
        margin-left: -.11rem;
    }
    100%{
        opacity: 1;
        left:50%;
        margin-left: -2.11rem;
    }
}
@keyframes three_txt {
    0%{
        opacity: 0;
        left:50%;
        margin-left: -.11rem;
    }
    100%{
        opacity: 1;
        left:50%;
        margin-left: -2.11rem;
    }
}
.swiper-slide-active .page3_arrband{
    -webkit-animation:flipy .4s 1.2s linear forwards;
    animation:flipy .4s 1.2s linear forwards;
}
.swiper-slide-active .page3_band{
    -webkit-animation:band .6s 1.4s linear forwards;
    animation:band .6s 1.4s linear forwards;
}
.swiper-slide-active .page3_band2{
    -webkit-animation:band2 .6s 1.6s linear forwards;
    animation:band2 .6s 1.6s linear forwards;
}
.swiper-slide-active .page3_band3{
    -webkit-animation:band3 .6s 1.8s linear forwards;
    animation:band3 .6s 1.8s linear forwards;
}
.swiper-slide-active .page3_band4{
    -webkit-animation:band4 .6s 2s linear forwards;
    animation:band4 .6s 2s linear forwards;
}
.swiper-slide-active .page3_band5{
    -webkit-animation:band5 .6s 2.2s linear forwards;
    animation:band5 .6s 2.2s linear forwards;
}
.swiper-slide-active .page3_band6{
    -webkit-animation:band6 .6s 2.4s linear forwards;
    animation:band6 .6s 2.4s linear forwards;
}
.swiper-slide-active .page3_band7{
    -webkit-animation:band7 .6s 2.6s linear forwards;
    animation:band7 .6s 2.6s linear forwards;
}
.swiper-slide-active .page3_band8{
    -webkit-animation:band8 .6s 2.8s linear forwards;
    animation:band8 .6s 2.8s linear forwards;
}
.swiper-slide-active .page3_band9{
    -webkit-animation:band9 .6s 3s linear forwards;
    animation:band9 .6s 3s linear forwards;
}
.swiper-slide-active .page3_band10{
    -webkit-animation:band10 .6s 3.2s linear forwards;
    animation:band10 .6s 3.2s linear forwards;
}
@-webkit-keyframes band {
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:1.06rem;
        top:4.7rem;
    }
}
@keyframes band {
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:1.06rem;
        top:4.7rem;
    }
}

@-webkit-keyframes band2{
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:3.3rem;
        top:4.7rem;
    }
}
@keyframes band2{
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:3.3rem;
        top:4.7rem;
    }
}
@-webkit-keyframes band3{
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:1.06rem;
        top:5.68rem;
    }
}
@keyframes band3{
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:1.06rem;
        top:5.68rem;
    }
}
@-webkit-keyframes band4{
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:3.3rem;
        top:5.68rem;
    }
}
@keyframes band4{
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:3.3rem;
        top:5.68rem;
    }
}
@-webkit-keyframes band5{
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:1.06rem;
        top:6.68rem;
    }
}
@keyframes band5{
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:1.06rem;
        top:6.68rem;
    }
}
@-webkit-keyframes band6{
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:3.3rem;
        top:6.68rem;
    }
}
@keyframes band6{
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:3.3rem;
        top:6.68rem;
    }
}
@-webkit-keyframes band7{
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:1.06rem;
        top:7.67rem;
    }
}
@keyframes band7{
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:1.06rem;
        top:7.67rem;
    }
}

@-webkit-keyframes band8{
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:3.3rem;
        top:7.67rem;
    }
}
@keyframes band8{
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:3.3rem;
        top:7.67rem;
    }
}

@-webkit-keyframes band9{
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:1.06rem;
        top:8.66rem;
    }
}
@keyframes band9{
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:1.06rem;
        top:8.66rem;
    }
}

@-webkit-keyframes band10{
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:3.3rem;
        top:8.66rem;
    }
}
@keyframes band10{
    0%{
        opacity: 1;
        left:2.62rem;
        top:6.5rem;
    }
    100%{
        opacity: 1;
        left:3.3rem;
        top:8.66rem;
    }
}

/*page4*/
.swiper-slide-active .page4_title{
    -webkit-animation:flipy .4s .4s linear forwards;
    animation:flipy .4s .4s linear forwards;
}
.swiper-slide-active .page4_picTxt{
    -webkit-animation:picLef .4s .8s linear forwards;
    animation:picLef .4s .8s linear forwards;
}
.swiper-slide-active .page4_pic{
    -webkit-animation:picRight .4s .9s linear forwards;
    animation:picRight .4s .9s linear forwards;
}
.swiper-slide-active .page4_pic2{
    -webkit-animation:picLef .4s 1s linear forwards;
    animation:picLef .4s 1s linear forwards;
}
.swiper-slide-active .page4_picTxt2{
    -webkit-animation:picRight2 .4s 1.1s linear forwards;
    animation:picRight2 .4s 1.1s linear forwards;
}
.swiper-slide-active .page4_picTxt3{
    -webkit-animation:picLef .4s 1.2s linear forwards;
    animation:picLef .4s 1.2s linear forwards;
}
.swiper-slide-active .page4_pic3{
    -webkit-animation:picRight .4s 1.3s linear forwards;
    animation:picRight .4s 1.3s linear forwards;
}
.swiper-slide-active .page4_pic4{
    -webkit-animation:picLef .4s 1.4s linear forwards;
    animation:picLef .4s 1.4s linear forwards;
}
.swiper-slide-active .page4_picTxt4{
    -webkit-animation:picRight2 .4s 1.5s linear forwards;
    animation:picRight2 .4s 1.5s linear forwards;
}
@-webkit-keyframes picLef {
    0%{
        opacity: 1;
        left:0;
    }
    100%{
        opacity: 1;
        left:1rem;
    }
}
@keyframes picLef {
    0%{
        opacity: 1;
        left:0;
    }
    100%{
        opacity: 1;
        left:1rem;
    }
}
@-webkit-keyframes picRight {
    0%{
        opacity: 1;
        left:4.64rem;
    }
    100%{
        opacity: 1;
        left:2.64rem;
    }
}
@keyframes picRight {
    0%{
        opacity: 1;
        left:4.64rem;
    }
    100%{
        opacity: 1;
        left:2.64rem;
    }
}

@-webkit-keyframes picRight2 {
    0%{
        opacity: 1;
        left:5.64rem;
    }
    100%{
        opacity: 1;
        left:3.84rem;
    }
}
@keyframes picRight2 {
    0%{
        opacity: 1;
        left:5.64rem;
    }
    100%{
        opacity: 1;
        left:3.84rem;
    }
}

/*page5*/
.swiper-slide-active .page5_title{
    -webkit-animation:flipy .4s .4s linear forwards;
    animation:flipy .4s .4s linear forwards;
}
.swiper-slide-active .page5_pic{
    -webkit-animation:picSerive .6s .4s linear forwards;
    animation:picSerive .6s .4s linear forwards;
}
.swiper-slide-active .page5_pic2{
    -webkit-animation:picSerive2 .6s .5s linear forwards;
    animation:picSerive2 .6s .5s linear forwards;
}
.swiper-slide-active .page5_pic3{
    -webkit-animation:picSerive3 .6s .6s linear forwards;
    animation:picSerive3 .6s .6s linear forwards;
}
.swiper-slide-active .page5_pic4{
    -webkit-animation:picSerive4 .6s .7s linear forwards;
    animation:picSerive4 .6s .7s linear forwards;
}
@-webkit-keyframes picSerive {
    0%{
        opacity: 1;
        left:2.12rem;
        top:5.36rem;
    }
    100%{
       opacity: 1;
        left:50%;
        margin-left: -2.185rem;
        top:2.34rem;
    }
}
@keyframes picSerive {
    0%{
        opacity: 1;
        left:2.12rem;
        top:5.36rem;
    }
    100%{
        opacity: 1;
        left:50%;
        margin-left: -2.185rem;
        top:2.34rem;
    }
}
@-webkit-keyframes picSerive2 {
    0%{
        opacity: 1;
        left:2.12rem;
        top:5.36rem;
    }
    100%{
        opacity: 1;
        left:50%;
        margin-left: -2.18rem;
        top:4.13rem;
    }
}
@keyframes picSerive2 {
    0%{
        opacity: 1;
        left:2.12rem;
        top:5.36rem;
    }
    100%{
        opacity: 1;
        left:50%;
        margin-left: -2.18rem;
        top:4.13rem;
    }
}

@-webkit-keyframes picSerive3 {
    0%{
        opacity: 1;
        left:2.12rem;
        top:5.36rem;
    }
    100%{
        opacity: 1;
        left:50%;
        margin-left: -2.16rem;
        top:5.9rem;
    }
}
@keyframes picSerive3 {
    0%{
        opacity: 1;
        left:2.12rem;
        top:5.36rem;
    }
    100%{
        opacity: 1;
        left:50%;
        margin-left: -2.16rem;
        top:5.9rem;
    }
}
@-webkit-keyframes picSerive4 {
    0%{
        opacity: 1;
        left:2.12rem;
        top:5.36rem;
    }
    100%{
        opacity: 1;
        left:50%;
        margin-left: -2.18rem;
        top:7.68rem;
    }
}
@keyframes picSerive4 {
    0%{
        opacity: 1;
        left:2.12rem;
        top:5.36rem;
    }
    100%{
        opacity: 1;
        left:50%;
        margin-left: -2.18rem;
        top:7.68rem;
    }
}

/*page6*/
.swiper-slide-active .page6_txt{
     -webkit-animation:fadeIn .4s .4s linear forwards;
     animation:fadeIn .4s .4s linear forwards;
 }
.swiper-slide-active .page6_btn{
    -webkit-animation:flipy .4s .6s linear forwards;
    animation:flipy .4s .6s linear forwards;
}
.swiper-slide-active .page6_btnTxt{
    -webkit-animation:smallbig .4s 1s linear forwards;
    animation:smallbig .4s 1s linear forwards;
}
.swiper-slide-active .page6_time{
     -webkit-animation:flipy .4s 1.2s linear forwards;
     animation:flipy .4s 1.2s linear forwards;
 }
.swiper-slide-active .page6_code{
    -webkit-animation:smallbig .4s 1.6s linear forwards;
    animation:smallbig .4s 1.6s linear forwards;
}
.swiper-slide-active .page6_codeTxt{
    -webkit-animation:fadeIn .4s 1.8s linear forwards;
    animation:fadeIn .4s 1.8s linear forwards;
}
.swiper-slide-active .page6_logo{
    -webkit-animation:bounceInUp .4s 2s linear forwards;
    animation:bounceInUp .4s 2s linear forwards;
}

/*媒体查询*/
/*@media screen and (max-width: 320px) {*/
    /*.logoText{*/
        /*line-height:.26rem;*/
    /*}*/
    /*.textAll{*/
        /*height: 1rem;*/
        /*!*padding-top: .2rem;*!*/
    /*}*/
/*}*/