*{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;width:100%;height:100%;background:url('../images/loading.jpg?1');background-size:100% 100%;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;*/
/*}*/
.loading11{
    position:absolute;top:51%;left:30.5%;width: 38.6%;height:6px;background-color: #da5453;border-radius: 30px;
}
.loading11_1{
     position:absolute;top:0;left:0;width: 0;height:100%;background-color: #ad040b;border-radius: 30px;
 }



a{opacity:1}
/*loading*/

/*音乐*/
.music_blk{z-index:999;position:fixed;right:5px;top:5px;}
.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;
}


.div0{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p0.jpg?1') no-repeat;background-size:100% 100%;
}
.div0_1{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p0.1.png?1') no-repeat;background-size:100% 100%;opacity: 0;
}
.div0_2{
    width: 29%;height:5.3%;position: absolute;top:70.8%;left:35.26%;background:url('../images/p0.2.png?1') no-repeat;background-size:100% 100%;opacity: 0;
}

.div0.ani .div0_1{
    -webkit-animation:1.2s 0.1s Out linear both;
    animation:1.2s 0.1s Out linear both;
}
.div0.ani .div0_2{
    -webkit-animation:1.2s 1s Out linear both;
    animation:1.2s 1s Out linear both;
}


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

.div1_1{
    /*width: 100%;height:12%;position: absolute;top:0;left:0;background:url('../images/music_on.png') no-repeat;background-size:100% 100%;*/
}


.ul{
    width: 100%;height:100%;position: absolute;top:0;left:0;
}
li{
    display: inline-block;width:45.4%;height:11.45%;position: absolute;top:0;left:0;
}
li:nth-of-type(1){
    background:url('../images/p1.1.png?1') no-repeat;background-size:100% 100%;left:4.34%;top:13.09%;
}
li:nth-of-type(2){
    background:url('../images/p1.2.png?1') no-repeat;background-size:100% 100%;left:51.2%;top:13.09%;
}
li:nth-of-type(3){
    background:url('../images/p1.3.png?1') no-repeat;background-size:100% 100%;left:4.34%;top:25%;
}
li:nth-of-type(4){
    background:url('../images/p1.4.png?1') no-repeat;background-size:100% 100%;left:51.2%;top:25%;
}

.canvas_div{
    width: 100%;height:100%;position:absolute;top:0;left:0;
}

.div1_hand{
    width: 9.2%;height:6.25%;position: absolute;top:35%;left:20%;background:url('../images/p1.9.png?1') no-repeat;background-size:100% 100%;
}
.div1_word{
    width: 30.67%;height:4.2%;position: absolute;top:49%;left:7%;background:url('../images/p1.8.png?1') no-repeat;background-size:100% 100%;
}
.div1_right{
    width: 24.15%;height:14.88%;position: absolute;top:63%;left:60%;background:url('../images/p1.6.png?1') no-repeat;background-size:100% 100%;display: none;
}
.div1_error{
    width: 24.15%;height:14.88%;position: absolute;top:63%;left:60%;background:url('../images/p1.7.png?1') no-repeat;background-size:100% 100%;display: none;
}
.div1_click,.div2_click,.div3_click,.div4_click,.div11_click{
    width: 24.15%;height:5.2%;position: absolute;top:92%;left:38%;background:url('../images/p1.5.png?1') no-repeat;background-size:100% 100%;display:none;opacity: 0;
}

.div1.ani .div1_hand{
    -webkit-animation:1.2s  div1_hand linear infinite;
    animation:1.2s  div1_hand linear infinite;
}
 .div1_click.ani, .div2_click.ani, .div3_click.ani, .div4_click.ani,.div11_click.ani{
    -webkit-animation:1.2s 0.1s Out linear both;
    animation:1.2s 0.1s Out linear both;
}
.div1_mask{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p1.10.png?1') no-repeat;background-size:100% 100%;display:none
}






.div11{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p3.jpg?1') no-repeat;background-size:100% 100%;
}
.div11_0{
    position: absolute;top:20%;left:18%;background:url('../images/p3.8.png?1') no-repeat;background-size:100% 100%;
}
.div11_1{
    position: absolute;top:25%;left:27%;background:url('../images/p3.9.png?1') no-repeat;background-size:100% 100%;
}
.div11_2{
    width: 15.2%;height:36.16%;position: absolute;top:16%;left:64%;background:url('../images/p3.1.png?1') no-repeat;background-size:100% 100%;
}
.div11_3{
    width: 16.9%;height:10%;position: absolute;top:61%;left:44%;background:url('../images/p3.2.png?1') no-repeat;background-size:100% 100%;
}
.div11_4{
    width: 16.9%;height:10.4%;position: absolute;top:61%;left:44%;background:url('../images/p3.3.png?1') no-repeat;background-size:100% 100%;
}
.div11_hua{
    width: 5.8%;height:6%;position: absolute;top:81.5%;left:10%;background:url('../images/p3.4.png?1') no-repeat;background-size:100% 100%;
}
.div11_right{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p3.12.png?1') no-repeat;background-size:100% 100%;display: none;
}
.div11_error1{
    width:100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p3.11.png?1') no-repeat;background-size:100% 100%;display: none;
}
.div11_error2{
    width:100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p3.13.png?1') no-repeat;background-size:100% 100%;display: none;
}
.div11.ani .div11_0{
    -webkit-animation:rotate 10s linear infinite;
    animation:rotate 10s linear infinite;
}

.div11_mask{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p3.6.png?1') no-repeat;background-size:100% 100%;display:none
}

.div2{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p2.jpg?1') no-repeat;background-size:100% 100%;
}
/*.div2_1{*/
    /*width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p2.1.png?1') no-repeat;background-size:100% 100%;*/
/*}*/
/*.div2_2{*/
    /*width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p2.2.png?1') no-repeat;background-size:100% 100%;*/
/*}*/
/*.div2_3{*/
    /*width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p2.3.png?1') no-repeat;background-size:100% 100%;*/
/*}*/
.div2_ul{
    width: 100%;height:100%;position: absolute;top:0;left:0;
}
.div2_li:nth-of-type(1){
    width: 15.45%;height:17.4%;position: absolute;top:72.6%;left:19.08%;background:url('../images/p2.6.png?1') no-repeat;background-size:100% 100%;
}
.div2_li:nth-of-type(2){
    width: 15.45%;height:17.4%;position: absolute;top:72.6%;left:42.27%;background:url('../images/p2.7.png?1') no-repeat;background-size:100% 100%;
}
.div2_li:nth-of-type(3){
    width: 15.45%;height:17.4%;position: absolute;top:72.6%;left:65.45%;background:url('../images/p2.8.png?1') no-repeat;background-size:100% 100%;
}
.div2_mask{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p2.9.png?1') no-repeat;background-size:100% 100%;display:none
}
.div2_right{
    width: 24.15%;height:14.88%;position: absolute;top:63%;left:60%;background:url('../images/p1.6.png?1') no-repeat;background-size:100% 100%;display: none;
}
/*.div2_error{*/
    /*width: 24.15%;height:14.88%;position: absolute;top:63%;left:60%;background:url('../images/p1.7.png?1') no-repeat;background-size:100% 100%;display: none;*/
/*}*/

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

.div3{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p4.jpg?1') no-repeat;background-size:100% 100%;
}
/*.div3_1{*/
    /*width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p4.1.png?1') no-repeat;background-size:100% 100%;*/
/*}*/
/*.div3_2{*/
    /*width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p4.2.png?1') no-repeat;background-size:100% 100%;*/
/*}*/
/*.div3_3{*/
    /*width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p4.3.png?1') no-repeat;background-size:100% 100%;*/
/*}*/
.div3_ul{
    width: 100%;height:100%;position: absolute;top:0;left:0;
}
.div3_li:nth-of-type(1){
    width: 15.45%;height:17.4%;position: absolute;top:72.6%;left:19.08%;background:url('../images/p4.6.png?1') no-repeat;background-size:100% 100%;
}
.div3_li:nth-of-type(2){
    width: 15.45%;height:17.4%;position: absolute;top:72.6%;left:42.27%;background:url('../images/p4.7.png?1') no-repeat;background-size:100% 100%;
}
.div3_li:nth-of-type(3){
    width: 15.45%;height:17.4%;position: absolute;top:72.6%;left:65.45%;background:url('../images/p4.8.png?1') no-repeat;background-size:100% 100%;
}
.div3_mask{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p4.9.png?1') no-repeat;background-size:100% 100%;display:none
}
.div3_right{
    width: 24.15%;height:14.88%;position: absolute;top:63%;left:60%;background:url('../images/p1.6.png?1') no-repeat;background-size:100% 100%;display: none;
}
/*.div3_error{*/
    /*width: 24.15%;height:14.88%;position: absolute;top:63%;left:60%;background:url('../images/p1.7.png?1') no-repeat;background-size:100% 100%;display: none;*/
/*}*/

.div3_error{width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p4.10.png?1') no-repeat;background-size:100% 100%;display: none;}

.div4{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p5.jpg?1') no-repeat;background-size:100% 100%;
}
/*.div4_1{*/
    /*width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p5.1.png?1') no-repeat;background-size:100% 100%;*/
/*}*/
/*.div4_2{*/
    /*width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p5.2.png?1') no-repeat;background-size:100% 100%;*/
/*}*/
/*.div4_3{*/
    /*width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p5.3.png?1') no-repeat;background-size:100% 100%;*/
/*}*/
.div4_ul{
    width: 100%;height:100%;position: absolute;top:0;left:0;
}
.div4_li:nth-of-type(1){
    width: 15.45%;height:17.4%;position: absolute;top:72.6%;left:19.08%;background:url('../images/p5.6.png?1') no-repeat;background-size:100% 100%;
}
.div4_li:nth-of-type(2){
    width: 15.45%;height:17.4%;position: absolute;top:72.6%;left:42.27%;background:url('../images/p5.7.png?1') no-repeat;background-size:100% 100%;
}
.div4_li:nth-of-type(3){
    width: 15.45%;height:17.4%;position: absolute;top:72.6%;left:65.45%;background:url('../images/p5.8.png?1') no-repeat;background-size:100% 100%;
}
.div4_mask{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p5.9.png?1') no-repeat;background-size:100% 100%;display:none
}
.div4_right{
    width: 24.15%;height:14.88%;position: absolute;top:63%;left:60%;background:url('../images/p1.6.png?1') no-repeat;background-size:100% 100%;display: none;
}
/*.div4_error{*/
    /*width: 24.15%;height:14.88%;position: absolute;top:63%;left:60%;background:url('../images/p1.7.png?1') no-repeat;background-size:100% 100%;display: none;*/
/*}*/
.div4_error{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p5.10.png?1') no-repeat;background-size:100% 100%;display: none;
}

.div5{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p6.jpg?1') no-repeat;background-size:100% 100%;
}
.div5_0{
    width: 5%;height:6.25%;position: absolute;top:12%;left:53%;
}
.div5_0_1{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/0.png?1') no-repeat;background-size:100% 100%;display:none
}
.div5_0_2{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/1.png?1') no-repeat;background-size:100% 100%;display: none;
}
.div5_0_3{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/2.png?1') no-repeat;background-size:100% 100%;display: none;
}
.div5_0_4{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/3.png?1') no-repeat;background-size:100% 100%;display: none;
}
.div5_0_5{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/4.png?1') no-repeat;background-size:100% 100%;display: none;
}
.div5_0_6{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/5.png?1') no-repeat;background-size:100% 100%;display: none;
}

.div5_1{
    width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 0;
}
.div5_1_1{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p6.1.png?1') no-repeat;background-size:100% 100%;display:none
}
.div5_1_2{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p6.1.1.png?1') no-repeat;background-size:100% 100%;display:none
}

.div5_2{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p6.2.png?1') no-repeat;background-size:100% 100%;
}
.div5_3{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p6.3.png?1') no-repeat;background-size:100% 100%;
}
.div5_more{
    width: 31%;height:10%;position: absolute;top:71%;left:14%;
}
.div5_share{
    width: 31%;height:10%;position: absolute;top:70%;left:56%;
}
.div5_mask{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/p6.4.png?1') no-repeat;background-size:100% 100%;display:none
}


.div5.ani .div5_1{
    -webkit-animation:1.2s 0.1s Out linear both;
    animation:1.2s 0.1s Out linear both;
}
.div5.ani .div5_2{
    -webkit-animation:1.2s 1s Out linear both;
    animation:1.2s 1s Out linear both;
}
.div5.ani .div5_3{
    -webkit-animation:1.2s 2.1s Out linear both;
    animation:1.2s 2.1s Out linear both;
}











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






#s0.ani .arrow,#s1.ani .arrow{
    -webkit-animation:1s 5s arrow infinite;
    animation:1s 5s arrow infinite ;
}

#s2.ani .arrow,#s5.ani .arrow{
    -webkit-animation:1s 5s arrow infinite;
    animation:1s 5s arrow infinite ;
}

#s3.ani .arrow{
    -webkit-animation:1s 6s arrow infinite;
    animation:1s 6s arrow infinite ;
}

#s4.ani .arrow{
    -webkit-animation:1s 4.5s arrow infinite;
    animation:1s 4.5s arrow infinite ;
}

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

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



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

@keyframes loading12 {
    0% {transform:translate3d(0,0,0);}
    100% {transform:translate3d(5%,0,0);}
}
@-webkit-keyframes s3_0 {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,5%,0);opacity: 1}
}
@keyframes s3_0 {
    0% {transform:translate3d(0,0,0);opacity: 0}
    100% {transform:translate3d(0,5%,0);opacity: 1}
}



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

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


@-webkit-keyframes bg0_3 {
    0% {-webkit-transform: scale(2);opacity: 0}
    10% {-webkit-transform: scale(1);opacity: 1;}
    85%{-webkit-transform: scale(1);opacity: 1;}
    100%{-webkit-transform: scale(1);opacity: 0;}
}
@keyframes bg0_3 {
    0% {transform: scale(2);opacity: 0}
    10% {transform: scale(1);opacity: 1}
    85%{-webkit-transform: scale(1);opacity: 1;}
    100%{-webkit-transform: scale(1);opacity: 0;}
}


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





.arrow.ani{
    -webkit-animation:arrow1 1s linear infinite;
    animation:arrow1 1s linear infinite;
}

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

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


@-webkit-keyframes s5_0 {
    0% {  opacity: 0;  }
    15% {  opacity: 1;  }
    50% {  opacity: 1;  }
    65%{opacity: 0; }
    100% {  opacity:0;  }
}

@keyframes s5_0 {
    0% {  opacity: 0;  }
    15% {  opacity: 1;  }
    50% {  opacity: 1;  }
    65%{opacity: 0; }
    100% {  opacity:0;  }
}

@-webkit-keyframes s5_1 {
    0% {  opacity: 0;  }
    15% {  opacity: 1;  }
    50% {  opacity: 1;  }
    65%{opacity: 0; }
    100% {  opacity:0;  }
}
@keyframes s5_1 {
    0% {  opacity: 0;  }
    15% {  opacity: 1;  }
    50% {  opacity: 1;  }
    65%{opacity: 0; }
    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}
}


@-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;}
}
@-webkit-keyframes loading0 {
    0% {-webkit-transform:translate3d(0,0,0);}
    100% {-webkit-transform:translate3d(400%,0,0);}
}
@keyframes loading0 {
    0% {transform:translate3d(0,0,0);}
    100% {transform:translate3d(400%,0,0);}
}