*{margin: 0;padding: 0}
html,body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute;overflow:hidden}
.tips_blk{z-index:99999999999;position:absolute;left:50%;bottom:10px;width:130px;height: 20px;margin-left:-65px;text-align:center;}
.tips_blk p{z-index:99999999999;font-size:10px;color:#FFF;}
.tips_blk_hide p{z-index:99999999999;display:none;}
.loading{position:absolute;left:0;top:0;width:100%;height:100%;background:url('../images/loading.jpg?5') no-repeat;background-size:100% 100%;overflow:hidden;z-index: 99}
/*.loading1{position:absolute;width:120px;height:120px;background:url('../images/img1/loading1.png');background-size:100% 100%;top:25%;left:25%;*/
    /*-webkit-animation:rotate 1.2s linear infinite;*/
    /*animation:rotate 1.2s linear infinite;*/
/*}*/
#loading_img1{
    width: 48%;;height:12%;position: absolute;;top:25%;left: 33%;
}
.loading11{
    position:absolute;top:46%;left:24.43%;width: 53%;height:4px;background-color: #2d3491;
}
.loading11_1{
    position:absolute;top:0;left:0;width: 0;height:100%;background-color: #48ae73;
}

a{opacity:1}
/*loading*/

.swiper-container{position:absolute;width:100%;height:100%}
.swiper-slide{position:relative;overflow:hidden}
.swiper-slide *{position:absolute;opacity:0}


/*音乐*/
.music_blk{z-index:999;position:fixed;right:35px;top:10px;}
.music{width:30px;height:30px;background:url('../images/music_on.png') no-repeat;background-size:100% 100%;position: absolute}
.music_on{
    -webkit-animation:rotate 1.2s linear infinite;
    animation:rotate 1.2s linear infinite;
}


.bg0{position:absolute;margin:0 auto;width:100%;height:100%;top:0;left:0;overflow: hidden}
.bg1{width:83.57%;height:51.49%;position: absolute;left:9.01%;top:6.05%;}
#canvas1{width: 100%;height:100%;position: absolute;top:0;left:0;}
#canvas2{width: 100%;height:100%;position: absolute;top:0;left:0;}
#canvas2.ani{
    -webkit-animation:0.5s 0.1s ca2  both;
    animation:0.5s 0.1s ca2  both;
}

.bg10{
    position:absolute;margin:0 auto;width:100%;height:100%;top:0;left:0;overflow: hidden;background:url('../images/p0.jpg?5') no-repeat;background-size:100% 100%;
}
/*.bg10_1{*/
    /*position:absolute;width:100%;height:100%;top:0;left:0;background:url('../images/img/p0.1.png?3') no-repeat;background-size:100% 100%;*/
/*}*/
#bg10_gif{
    width:71.57%;height:23.49%;position: absolute;left:15%;top:10%;
}

.bg10_2{
    position:absolute;width:100%;height:100%;top:0;left:0;background:url('../images/img/p0.2.png?5') no-repeat;background-size:100% 100%;
}
.bg10_3{
    position:absolute;width:100%;height:100%;top:0;left:0;background:url('../images/img/p0.3.png?5') no-repeat;background-size:100% 100%;
}
.bg10_hand{
    width: 10%;height:6%;left:65%;top:87%;background:url('../images/hand.png?5') no-repeat 0 0;background-size:100% 100%;opacity: 0;position: absolute;
}
.bg10_click{
    position:absolute;top:80%;left:23%;width: 56%;height:10%;
}
.bg10.ani .bg10_hand{
    -webkit-animation: 2s 1s shake linear infinite;
    animation: 2s 1s shake linear infinite;
}


.bg11{
    position:absolute;margin:0 auto;width:100%;height:100%;top:0;left:0;overflow: hidden;background:url('../images/p1.jpg?5') no-repeat;background-size:100% 100%;
}
.bg11_1{
    position:absolute;width:100%;height:100%;top:0;left:0;background:url('../images/img/p1.1.png?5') no-repeat;background-size:100% 100%;
}
.bg11_2{
    position:absolute;width:100%;height:100%;top:0;left:0;background:url('../images/img/p1.2.png?5') no-repeat;background-size:100% 100%;
}
.bg11_3{
    position:absolute;width:100%;height:100%;top:0;left:0;background:url('../images/img/p1.2-1.png?5') no-repeat;background-size:100% 100%;
}
/*.bg11_4{*/
    /*position:absolute;width:100%;height:100%;top:0;left:0;background:url('../images/img/p1.1-1.png?3') no-repeat;background-size:100% 100%;*/
/*}*/

/*.bg11_hand{*/
    /*position:absolute;margin:0 auto;width:100%;height:100%;top:0;left:0;overflow: hidden;background:url('../images/p1.2.png') no-repeat;background-size:100% 100%;*/
/*}*/
.bg11_pai{
    position:absolute;width:56%;height:10%;top:62%;left:21%;
}
.bg11_click{
    position:absolute;width:17%;height:10%;top:75%;left:42%;background:url('../images/img/p1.1-1.png?5') no-repeat;background-size:100% 100%;
    -webkit-animation:1.5s 0.1s scale1  infinite;
    animation:1.5s 0.1s scale1  infinite;
}


.bg12{
    position:absolute;margin:0 auto;width:100%;height:100%;top:0;left:0;overflow: hidden;background:url('../images/img/p2.jpg?5') no-repeat;background-size:100% 100%;
}
.bg12_1{
    position:absolute;width:100%;height:100%;top:80%;left:0;background:url('../images/img/p2.1.png?5') no-repeat;background-size:100% 100%;
}
.bg12_2{
    position:absolute;width:100%;height:100%;top:0;left:0;background:url('../images/img/p2.2.png?5') no-repeat;background-size:100% 100%;
}
.bg12_arrow,.arrow{
    position:absolute;width:9%;height:2.3%;top:91%;left:46%;background:url('../images/arrow.png?5') no-repeat;background-size:100% 100%;opacity: 0;
}
.bg12.ani .bg12_1{
    -webkit-animation:1.8s 0.1s bg12_1  both;
    animation:1.8s 0.1s bg12_1  both;
}
.bg12.ani .bg12_arrow{
    -webkit-animation:1.8s 2s arrow  infinite;
    animation:1.8s 2s arrow  infinite;
}

.bg12.ani1{
    -webkit-animation:1s 0.1s Out11  both;
    animation:1s 0.1s Out11  both;
}

#ss.ani{
    -webkit-animation:1s 0.1s Out  both;
    animation:1s 0.1s Out  both;
}

.num{
    position:absolute;margin:0 auto;width:100%;height:100%;top:0;left:0;overflow: hidden;
}
.num1{
    position:absolute;width:66%;height:8%;top:62%;left:21%;
}
.num1 div{
    position:absolute;width:15%;height:80%;top:0;left:0;background:url('../images/xing.png?5') no-repeat;background-size:100% 100%;opacity: 1;
}
.num1 .num1_2{
    left:17%;
}
.num1 .num1_3{
    left:34%;
}
.num1 .num1_4{
    left:51%;
}
.num1 .num1_5{
    left:68%;
}

.num1 .num1_6{
    top:5%; left:85%;background:url('../images/img/one.png?5') no-repeat;background-size:100% 100%;opacity: 0;
}


.num2{
    position:absolute;margin:0 auto;width:100%;height:100%;top:0;left:0;overflow: hidden;
}
.num2_1{
    position:absolute;width:100%;height:100%;top:0;left:0;background:url('../images/img/p1.4.png?5') no-repeat;background-size:100% 100%;opacity: 0;
}
.num2_2{
    position:absolute;width:100%;height:100%;top:0;left:0;background:url('../images/img/p1.5.png?5') no-repeat;background-size:100% 100%;opacity: 0;
}
.num2_3{
    position:absolute;width:100%;height:100%;top:0;left:0;background:url('../images/img/p1.6.png?5') no-repeat;background-size:100% 100%;opacity: 0;
}
.num2_click{
    position:absolute;width:23%;height:10%;top:80%;left:40%;
}

.num2.ani .num2_1{
    -webkit-animation:0.7s 0.1s Out   both;
    animation:0.7s 0.1s Out  both;
}
.num2.ani .num2_2{
    -webkit-animation:0.7s 1.2s Out   both;
    animation:0.7s 1.2s Out  both;
}
.num2.ani .num2_3{
    -webkit-animation:2s 2s shake   infinite;
    animation:2s 2s shake  infinite;
}

.bg11.ani{
    -webkit-animation:1s 0.2s num linear  infinite;
    animation:1s 0.2s num linear  infinite;
}


#ss{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0}
#s0{width: 100%;height: 100%;background:url("../images/img/p3.jpg?5") no-repeat 0 0;background-size:100% 100%;}
.s0_1{background:url('../images/img/p3.1.png?5') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}


#s0.ani .s0_1{
    -webkit-animation: 0.8s 0.5s Out linear both;
    animation: 0.8s 0.5s Out linear both;
}
/*#s0.ani .s0_2{*/
    /*-webkit-animation: 0.8s 1.6s Out linear both;*/
    /*animation: 0.8s 1.6s Out linear both;*/
/*}*/
#s0.ani .arrow{
    -webkit-animation:1s 2s arrow infinite;
    animation:1s 2s arrow infinite ;
}


#s1{background:url('../images/img/p4.jpg?5') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.s1_1{background:url('../images/img/p4.1.png?5') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}

#s1.ani .s1_1{
    -webkit-animation: 0.8s 0.5s Out linear both;
    animation: 0.8s 0.5s Out linear both;
}

#s1.ani .arrow{
-webkit-animation: 1s 2s arrow infinite;
animation: 1s 2s arrow infinite;
}


#s2{background:url('../images/img/p5.jpg?5') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.s2_1{background:url('../images/img/p5.1.png?5') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.s2_2{background:url('../images/img/p5.2.png?5') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.s2_hand{
    width: 10%;height:6%;left:62%;top:74%;background:url('../images/hand.png?5') no-repeat 0 0;background-size:100% 100%;
}
.s2_click{width: 56%;height:10%;left:20%;top:68%;}
.s2_3{background:url('../images/img/p5.3.png?5') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display: none;opacity: 1}

#s2.ani .s2_1{
    -webkit-animation: 0.8s 0.5s Out linear both;
    animation: 0.8s 0.5s Out linear both;
}
#s2.ani .s2_2{
    -webkit-animation: 0.8s 1.6s Out linear both;
    animation: 0.8s 1.6s Out linear both;
}
#s2.ani .arrow{
    -webkit-animation: 1s 3s arrow  infinite;
    animation: 1s 3s arrow  infinite;
}
#s2.ani .s2_hand{
    -webkit-animation: 2s 2.5s shake linear infinite;
    animation: 2s 2.5s shake linear infinite;
}
#s3{background:url('../images/img/p6.jpg?5') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.s3_1{background:url('../images/img/p6.1.png?5') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.s3_2{background:url('../images/img/p6.2.png?5') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.s3_3{background:url('../images/img/p6.3.png?5') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.s3_click{width: 56%;height:10%;left:20%;top:68%;}
.s3_hand{
    width: 10%;height:6%;left:62%;top:74%;background:url('../images/hand.png?5') no-repeat 0 0;background-size:100% 100%;
}
#s3.ani .s3_1{
    -webkit-animation: 0.8s 0.5s Out linear both;
    animation: 0.8s 0.5s Out linear both;
}
#s3.ani .s3_2{
    -webkit-animation: 0.8s 1.6s Out linear both;
    animation: 0.8s 1.6s Out linear both;
}
#s3.ani .s3_3{
    -webkit-animation: 0.8s 2.5s Out linear both;
    animation: 0.8s 2.5s Out linear both;
}
#s3.ani .arrow{
    -webkit-animation: 1s 3.5s arrow infinite;
    animation: 1s 3.5s arrow infinite;
}
#s3.ani .s3_hand{
    -webkit-animation: 2s 2.5s shake linear infinite;
    animation: 2s 2.5s shake linear infinite;
}


@-webkit-keyframes ca2 {
    0% {-webkit-transform:translate3d(0,0,0);}
    100% {-webkit-transform:translate3d(-30%,-30%,0) rotateZ(20deg) scale(0.5);border: 1px solid #fff}
}

@keyframes ca2{
    0% {transform:translate3d(0,0,0);}
    100% {transform:translate3d(-30%,-30%,0) rotateZ(20deg) scale(0.5);border: 1px solid #fff}
}

@-webkit-keyframes num {
    0% {-webkit-transform: scale(1);opacity: 1}
    100% {-webkit-transform:scale(1.5);opacity: 0}
}
@keyframes num{
    0% {transform:scale(1);opacity: 1}
    100% {transform:scale(1.5);opacity: 0 }
}

@-webkit-keyframes bg12_1 {
    0% {-webkit-transform:translate3d(0,0,0);}
    100% {-webkit-transform:translate3d(0,-80%,0) ;}
}
@keyframes bg12_1{
    0% {transform:translate3d(0,0,0);}
    100% {transform:translate3d(0,-80%,0);}
}


.num1.ani0  .num1_1{
    -webkit-animation:0.3s 0.2s xing linear both;
    animation:0.3s 0.2s xing linear both;
}
.num1.ani0  .num1_6{
    -webkit-animation:0.3s 0.6s Out linear both;
    animation:0.3s 0.6s Out linear both;
}


.num1.ani1  .num1_1{
    -webkit-animation:0.3s 0.2s xing linear both;
    animation:0.3s 0.2s xing linear both;
}
.num1.ani1  .num1_2{
    -webkit-animation:0.3s 0.6s xing linear both;
    animation:0.3s 0.6s xing linear both;
}
.num1.ani1  .num1_3{
    -webkit-animation:0.3s 1s xing linear both;
    animation:0.3s 1s xing linear both;
}
.num1.ani1  .num1_6{
    -webkit-animation:0.3s 1.5s Out linear both;
    animation:0.3s 1.5s Out linear both;
}


.num1.ani2  .num1_1{
    -webkit-animation:0.1s 0s xing linear both;
    animation:0.1s 0s xing linear both;
}
.num1.ani2  .num1_2{
    -webkit-animation:0.1s 0.1s xing linear both;
    animation:0.1s 0.1s xing linear both;
}
.num1.ani2  .num1_3{
    -webkit-animation:0.1s 0.2s xing linear both;
    animation:0.1s 0.2s xing linear both;
}
.num1.ani2  .num1_4{
    -webkit-animation:0.1s 0.3s xing linear both;
    animation:0.1s 0.3s xing linear both;
}
.num1.ani2  .num1_5{
    -webkit-animation:0.1s 0.4s xing linear both;
    animation:0.1s 0.4s xing linear both;
}
.num1.ani2  .num1_6{
    -webkit-animation:0.1s 0.6s Out linear both;
    animation:0.1s 0.6s Out linear both;
}






.bg0.ani .bg0_shake{
    -webkit-animation:6s 0.3s shake1  infinite;
    animation:6s 0.3s shake1  infinite;
}


.bg0.ani .bg0_2{
    -webkit-animation: 0.5s 0.1s Out linear both;
    animation:0.5s 0.1s Out linear both;
}

.bg0.ani .bg0_1{
    -webkit-animation:1s 1s Out linear both;
    animation:1s 1s Out linear both;
}


.bg0.ani .bg0_2_hand{
    -webkit-animation: 0.5s 2.5s Out111 linear both;
    animation:0.5s 2.5s Out111 linear both;
}

.bg0.ani .bg0_3{
    -webkit-animation:0.6s 2.5s Out linear both;
    animation:0.6s 2.5s Out linear both;
}

.bg0.ani .bg0_5{
    -webkit-animation:0.5s 3.5s Out linear both;
    animation:0.5s 3.5s Out linear both;
}

.bg0_4.ani{
    -webkit-animation:1s 0.5s bg0_4 linear both;
    animation:1s 0.5s bg0_4 linear both;
}



.bg1.ani .bg1_bg{
    -webkit-animation:10s 0.2s bg1_bg linear both;
    animation:10s 0.2s bg1_bg linear both;
}
.bg2_bg.ani{
    -webkit-animation:7s 0.2s bg2_bg linear both;
    animation:7s 0.2s bg2_bg linear both;
}


.bg1.ani .bg1_1{
    -webkit-animation:7s 2s fade linear both;
    animation:7s 2s fade linear both;
}


.bg1.ani .bg1_3{
    -webkit-animation:5s 11s fade linear both;
    animation:5s 11s fade linear both;
}
.bg1.ani .bg1_4{
    -webkit-animation:1s 17.1s Out linear both;
    animation:1s 17.1s Out linear both;
}

.bg1_bg.ani1{
    -webkit-animation:0.8s 0s Out111 linear both;
    animation:0.8s 0s Out111 linear both;
}






@-webkit-keyframes bg0_4 {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 1}
    100% {-webkit-transform:translate3d(-10%,-30%,0);opacity: 1}
}

@keyframes bg0_4 {
    0% {transform:translate3d(0,0,0);opacity: 1}
    100% {transform:translate3d(-10%,-30%,0);opacity: 1}
}

@-webkit-keyframes bg1_bg {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 1}
    100% {-webkit-transform:translate3d(-64.9%,0,0);opacity: 1}
}

@keyframes bg1_bg {
    0% {transform:translate3d(0,0,0);opacity: 1}
    100% {transform:translate3d(-64.9%,0,0);opacity: 1}
}

@-webkit-keyframes bg2_bg {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 1}
    100% {-webkit-transform:translate3d(-50%,0,0);opacity: 1}
}

@keyframes bg2_bg {
    0% {transform:translate3d(0,0,0);opacity: 1}
    100% {transform:translate3d(-50%,0,0);opacity: 1}
}

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

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





@-webkit-keyframes s01 {
    0% {-webkit-transform-origin:center center;-webkit-transform:scale(1) translate3d(5%,0,0); opacity: 1}
    100% {-webkit-transform-origin:center center;-webkit-transform:scale(1.3) translate3d(5%,0,0);opacity: 1}
}

@keyframes s01{
    0% {transform-origin:center center;transform:scale(1) translate3d(5%,0,0);opacity: 1}
    100% {-webkit-transform-origin:center center;-webkit-transform:scale(1.3) translate3d(5%,0,0) ; opacity: 1}
}


@-webkit-keyframes xing {
    0% {background:url("../images/xing.png?1") no-repeat;background-size:100% 100%;}
    100% {background:url("../images/p1.3.png?1") no-repeat;background-size:100% 100%;}
}

@keyframes xing{
    0% {background:url("../images/xing.png?1") no-repeat;background-size:100% 100%;}
    100% {background:url("../images/p1.3.png?1") no-repeat;background-size:100% 100%;}
}


@-webkit-keyframes Out111{
    0%{opacity: 1}
    100%{opacity:0}
}

@keyframes Out111{
    0%{opacity: 1}
    100%{opacity:0 }
}



@keyframes Out{
    0%{opacity:0}
    100%{opacity:1}
}
@-webkit-keyframes Out{
    0%{opacity: 0}
    100%{opacity:1}
}


@-webkit-keyframes s2_0 {
    0% { -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0) ;}
    100% { -webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0); }
}

@keyframes s2_0 {
    0% { transform:translate3d(0,0,0) ;}
    100% { transform:translate3d(0,-100%,0);}
}

@-webkit-keyframes fade{
    0%{opacity:0}
    20%{opacity:1}
    80%{opacity: 1}
    100%{opacity: 0}
}

@keyframes fade{
    0%{opacity:0}
    20%{opacity:1}
    80%{opacity: 1}
    100%{opacity: 0}
}


@-webkit-keyframes shake{
    0%{opacity: 0}
    25%{opacity:1}
    50%{opacity: 0}
    75%{opacity:1}
    100%{opacity: 0}
}

@keyframes shake{
    0%{opacity: 0}
    25%{opacity:1}
    50%{opacity: 0}
    75%{opacity:1}
    100%{opacity: 0}
}

@-moz-keyframes shake1{
    0%{opacity:0.1}
    50%{opacity:1}
    100%{opacity:0.1}
}

@keyframes shake1{
    0%{opacity:0.1}
    50%{opacity:1}
    100%{opacity:0.1}
}
@-webkit-keyframes  bounceIn{
    0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
    20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
    40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
    60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
    80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}
    100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes bounceIn{

    0%{transform:scale3d(.3,.3,.3);opacity:0;}
    20%{transform:scale3d(1.1,1.1,1.1);}
    40%{transform:scale3d(.9,.9,.9);}
    60%{transform:scale3d(1.03,1.03,1.03);opacity:1}
    80%{transform:scale3d(.97,.97,.97)}
    100%{transform:scale3d(1,1,1);opacity:1;}
}

@keyframes small{
    0%{opacity:1;transform: scale(0)}
    50%{opacity:1;transform: scale(0.2)}
    60%{opacity:1;transform: scale(0.7)}
    70%{opacity:1;transform: scale(1.3)}
    85%{opacity:1;transform: scale(0.9)}
    100%{opacity:1;transform: scale(1)}
}
@-webkit-keyframes small{
    0%{opacity:1;-webkit-transform: scale(0)}
    50%{opacity:1;-webkit-transform: scale(0.2)}
    60%{opacity:1;-webkit-transform: scale(0.7)}
    70%{opacity:1;-webkit-transform: scale(1.3)}
    85%{opacity:1;-webkit-transform: scale(0.9)}
    100%{opacity:1;-webkit-transform: scale(1)}
}

@-webkit-keyframes scale1 /* Safari 和 Chrome */
{
    0%{-webkit-transform:scale(1);transform:scale(1)}
    50%{-webkit-transform:scale(0.8);transform:scale(0.8)}
    100%{-webkit-transform:scale(1);transform:scale(1)}
}

@keyframes scale1
{
    0%{-webkit-transform:scale(1);transform:scale(1)}
    50%{-webkit-transform:scale(0.8);transform:scale(0.8)}
    100%{-webkit-transform:scale(1);transform:scale(1)}
}

@-webkit-keyframes arrow {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,-40%,0);opacity: 1}
}
@keyframes arrow {
    0% {transform:translate3d(0,0,0);opacity: 0}
    100% {transform:translate3d(0,-40%,0);opacity: 1}
}