*{margin: 0;padding: 0}
html,body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute;}
.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;width:100%;height:100%;background:url('../images/p0.jpg?1');background-size:100% 100%;z-index: 99}
.loading0{
    position: absolute;top:0;left:0;background:url('../images/p0.2.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;

}
.loading0_1{
    position: absolute;top:0;left:0;background:url('../images/p0.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;
    -webkit-animation: 1.5s 0.2s loading0_1 linear infinite;
    animation:1.5s 0.2s loading0_1 linear infinite;
}

.loading11{
    position:absolute;top:19%;left:33%;width: 35.26%;height:4px;background-color: #d4d2d1;
}
.loading11_1{
     position:absolute;top:0;left:0;width: 0;height:100%;background-color: #777878;
 }

a{opacity:1}
/*loading*/


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




.bg0{position: absolute;top:0;left:0;background:url('../images/p1.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display: none}
.bg0_1,.bg0_2{position: absolute;top:0;left:0;width: 100%;height:100%;}
.bg0_1_1{position: absolute;top:0;left:0;background:url('../images/p1.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.bg0_1_2{position: absolute;top:0;left:0;background:url('../images/p1.2.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.bg0_1_3{position: absolute;top:0;left:0;background:url('../images/p1.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.bg0_1_4{position: absolute;top:0;left:0;background:url('../images/p1.4.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.bg0_1_5{position: absolute;top:0;left:0;background:url('../images/p1.5.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.bg0_1_6{position: absolute;top:0;left:0;background:url('../images/p1.6.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.bg0_1_7{position: absolute;top:0;left:0;background:url('../images/p1.7.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.bg0_1_8{position: absolute;top:0;left:0;background:url('../images/p1.8.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.bg0_1_mask{position: absolute;top:0;left:0;background:url('../images/p1.18.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}

.bg0_1.ani .bg0_1_1{
    -webkit-animation: 0.5s 0.1s Out linear both;
    animation:0.5s 0.1s Out linear both;
}
.bg0_1.ani .bg0_1_5{
    -webkit-animation: 0.8s 0.8s Out linear both;
    animation:0.8s 0.8s Out linear both;
}

.bg0_1.ani .bg0_1_2{
    -webkit-animation: 0.5s 2s Out linear both;
    animation:0.5s 2s Out linear both;
}
.bg0_1.ani .bg0_1_6{
    -webkit-animation: 0.8s 3s Out linear both;
    animation:0.8s 3s Out linear both;
}

.bg0_1.ani .bg0_1_4{
    -webkit-animation: 0.5s 4.5s Out linear both;
    animation:0.5s 4.5s Out linear both;
}
.bg0_1.ani .bg0_1_7{
    -webkit-animation: 0.8s 6s Out linear both;
    animation:0.8s 6s Out linear both;
}

.bg0_1.ani .bg0_1_3{
    -webkit-animation: 0.5s 7.5s Out linear both;
    animation:0.5s 7.5s Out linear both;
}
.bg0_1.ani .bg0_1_8{
    -webkit-animation: 0.8s 8.5s Out linear both;
    animation:0.8s 8.5s Out linear both;
}




.bg0_1.ani .bg0_1_mask{
    -webkit-animation: 0.5s 10s Out linear both;
    animation:0.5s 10s Out linear both;
}

.bg0_1.ani .bg0_1_11{
    -webkit-animation: 0.5s 11s Out linear both;
    animation:0.5s 11s Out linear both;
}

.bg0_1.ani .bg0_1_11.ani{
    -webkit-animation: 6s 0.1s rotate linear infinite;
    animation:6s 0.1s rotate linear infinite;
}

.bg0_1.ani .bg0_1_12{
    -webkit-animation: 0.5s 12s bounceIn cubic-bezier(0.215,0.610,0.355,1.000) both;
    animation:0.5s 12s bounceIn cubic-bezier(0.215,0.610,0.355,1.000) both;
}
.bg0_1.ani .bg0_1_14{
    -webkit-animation: 0.5s 12.8s Out linear both;
    animation:0.5s 12.8s Out linear both;
}

.bg0_1.ani .bg0_1_15{
    -webkit-animation: 0.5s 13.5s Out linear both;
    animation:0.5s 13.5s Out linear both;
}

.bg0_1.ani .bg0_1_hand{
    -webkit-animation: 2.5s 14s shake linear infinite;
    animation:2.5s 14s shake linear infinite;
}
/*.bg0_1_hand{position: absolute;top:0;left:0;background:url('../images/p1.11.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}*/
.bg0_1_11{position: absolute;top:0;left:0;background:url('../images/p1.9.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.bg0_1_12{position: absolute;top:0;left:0;background:url('../images/p1.10.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.bg0_1_click{position: absolute;top:29%;left:20%;width:62%;height:36%;opacity: 1}
.bg0_1_hand{position: absolute;top:58%;left:57%;background:url('../images/hand.png?1') no-repeat 0 0;background-size:100% 100%;width:15%;height:10%;opacity: 0}
/*.bg0_1_13{position: absolute;top:0;left:0;background:url('../images/p1.11.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}*/
.bg0_1_14{position: absolute;top:0;left:0;background:url('../images/p1.12.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.bg0_1_15{position: absolute;top:0;left:0;background:url('../images/p1.13.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}


.bg0_2{background:url('../images/p1.18.png?1') no-repeat 0 0;background-size:100% 100%;opacity:1}
.bg0_2_1{position: absolute;top:0;left:0;background:url('../images/p1.17.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1}
.bg0_2_2{position: absolute;top:0;left:0;background:url('../images/p1.16.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1}
.bg0_2_3{position: absolute;top:0;left:0;background:url('../images/p1.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1}
.bg0_2_3_hand{position: absolute;top:23%;left:56%;background:url('../images/hand.png?1') no-repeat 0 0;background-size:100% 100%;width: 8%;height:6%;opacity: 1;
    -webkit-animation: 2s 0.2s shake linear infinite;
    animation:2s 0.2s shake linear infinite;
}
.bg0_click{position: absolute;top:68.75%;left:27.29%;background:url('../images/p1.15.png?1') no-repeat 0 0;background-size:100% 100%;width: 48.3%;height:7.88%;opacity: 0;display: none}
.bg0_hand{position: absolute;top:74%;left:63%;background:url('../images/hand.png?1') no-repeat 0 0;background-size:100% 100%;width: 10%;height:9%;opacity: 0;}
.bg0_hand.ani{
    -webkit-animation: 2.5s 1s shake linear infinite;
    animation:2.5s 1s shake linear infinite;
}
.bg0_click.ani{
    -webkit-animation: 0.5s 0.1s Out linear both;
    animation:0.5s 0.1s Out linear both;
}

.bg0_2_3_click{position: absolute;top:20%;left:47%;width: 12%;height:6%;opacity: 0.2}

.bg0_2_5{position: absolute;top:0;left:0;background:url('../images/p1.14.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:21.27%;opacity: 1;display:none}


.bg1{
    position: absolute;top:0;left:0;background:url('../images/p2.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;overflow: hidden;
}

.bg1_0{
    position: absolute;top:0;left:0;width: 100%;height:100%;opacity: 0;background:url('../images/p2.2.png?1') no-repeat 0 0;background-size:100% 100%;overflow: hidden;
}
.bg1.ani .bg1_0{
    -webkit-animation: 0.5s 1s Out linear both;
    animation:0.5s 1s Out linear both;
}

.bg1_0_hand{position: absolute;top:14%;left:24%;background:url('../images/hand.png?1') no-repeat 0 0;background-size:100% 100%;width: 10%;height:7%;opacity: 0;}

.bg1.ani .bg1_0_hand{
    -webkit-animation: 3s 1.5s shake linear infinite;
    animation:3s 1.5s shake linear infinite;
}

.bg1_0_1{position: absolute;top:6%;left:8%;width: 23%;height:16%;opacity: 1;}
.bg1_0_2{position: absolute;top:6%;left:38%;width: 23%;height:16%;opacity: 1}
.bg1_0_3{position: absolute;top:6%;left:69%;width: 23%;height:16%;opacity: 1;}
.bg1_0_4{position: absolute;top:29%;left:8%;width: 23%;height:16%;opacity: 1}
.bg1_0_5{position: absolute;top:29%;left:38%;width: 23%;height:16%;opacity: 1}
.bg1_0_6{position: absolute;top:29%;left:69%;width: 23%;height:16%;opacity: 1}
.bg1_0_7{position: absolute;top:52%;left:4%;width: 25%;height:16%;opacity: 1;}
.bg1_0_8{position: absolute;top:52%;left:32%;width: 18%;height:16%;opacity: 1;}
.bg1_0_9{position: absolute;top:52%;left:51%;width: 22%;height:16%;opacity: 1;}
.bg1_0_10{position: absolute;top:52%;left:75%;width: 21%;height:16%;opacity: 1;}
/*.bg1_0_11{position: absolute;top:0;left:0;background:url('../images/p1.14.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;display:none}*/


.bg1_1{
    position: absolute;top:0;left:0;background:url('../images/p3.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;display: none;overflow: hidden;
}
.bg1_1_0{
    position: absolute;top:0;left:0;width: 100%;height:100%;opacity: 1;
}
.bg1_1_1{position: absolute;top:0;left:0;background:url('../images/p3.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;display: none}
.bg1_1_2{position: absolute;top:0;left:0;background:url('../images/p3.2.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;display: none}
.bg1_1_3{position: absolute;top:0;left:0;background:url('../images/p3.3.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;display: none}
.bg1_1_4{position: absolute;top:0;left:0;background:url('../images/p3.4.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;display: none}
.bg1_1_5{position: absolute;top:0;left:0;background:url('../images/p3.5.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;display: none}
.bg1_1_6{position: absolute;top:0;left:0;background:url('../images/p3.6.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;display: none}
.bg1_1_7{position: absolute;top:0;left:0;background:url('../images/p3.7.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;display: none}
.bg1_1_8{position: absolute;top:0;left:0;background:url('../images/p3.8.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;display: none}
.bg1_1_9{position: absolute;top:0;left:0;background:url('../images/p3.9.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;display: none}
.bg1_1_10{position: absolute;top:0;left:0;background:url('../images/p3.10.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;display: none}

.bg1_bg{
    position: absolute;top:30%;left:0;background:url('../images/p2.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity:0;
}

.back{
    position: absolute;top:0;left:0;background:url('../images/p3.11.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1
}
.more{
    position: absolute;top:0;left:0;background:url('../images/p3.12.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1
}
.back_click{
    position: absolute;top:84%;left:6%;width: 40%;height:7%;opacity: 1
}
.more_click{
    position: absolute;top:84%;left:53%;width: 40%;height:7%;opacity: 1
}


.bg1.ani .bg1_bg{
    -webkit-animation: 0.5s 0.5s bg1_bg linear both;
    animation:0.5s 0.5s bg1_bg linear both;
}
@keyframes bg0_1{
    0%{opacity:0}
    20%{opacity:1}
    80%{opacity: 1}
    100%{opacity: 0}
}
@-webkit-keyframes bg0_1{
    0%{opacity:0}
    20%{opacity:1}
    80%{opacity: 1}
    100%{opacity: 0}
}






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

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

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

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


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

.hand.ani{
    -webkit-animation:Out 1s linear infinite;
    animation:Out 1s linear infinite;
}


#center0.ani .word{
    -webkit-animation:Out 1s linear both;
    animation:Out 1s linear both;
}

#center0.ani .tap{
    -webkit-animation:Out_tap 1.2s 2s  linear infinite both;
    animation:Out_tap 1.2s 2s  linear infinite both;
}

.div111.ani{
    -webkit-animation:rotate 1.2s linear infinite;
    animation:rotate 1.2s linear infinite;
}

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

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



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





@-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}
}


@-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;}
}