/*音乐*/
.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?1') no-repeat;background-size:100% 100%;}
.music_on{
            -webkit-animation:rotate 1.2s linear infinite;
            animation:rotate 1.2s linear infinite;
}
@keyframes rotate{
    0%{
         -webkit-transform:rotateZ(0deg);
        transform:rotateZ(0deg);
      }
    100%{
        -webkit-transform:rotateZ(360deg);
        transform:rotateZ(360deg);
      }
}
@-webkit-keyframes rotate{
    0%{
         -webkit-transform:rotateZ(0deg);
        transform:rotateZ(0deg);
      }
    100%{
        -webkit-transform:rotateZ(360deg);
        transform:rotateZ(360deg);
    }
}
*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.loadWrap{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/load.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.loadNum{
    position: absolute;
    font-size: 30px;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
    color: orange;
}
.page0{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p0.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p0_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p0.1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: fadeInLeft 1s linear both;
    -webkit-animation: fadeInLeft 1s linear both;
}
.p0_click{
    position: absolute;
    width: 28%;
    height: 5.5%;
    left: 36%;
    top: 44%;
    background-image: url(../images/p0.2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: fadeInRight 1s 1s linear both;
    -webkit-animation: fadeInRight 1s 1s linear both;
}
.page{
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
}
.page_title{
    position: relative;
    width: 100%;
    height: 28%;
    background-image: url(../images/p1.1.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;  
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;

}
.pt_tag{
    position: absolute;
    width: 150%;
    height: 53%;
    top: 40%;
}
.pt_tag>div{
    width: 20%;
    height: 100%;
    float: left;
    text-align: center;
    display: table;
    color: white;
    font-size: 25px;
    background-repeat: no-repeat;
    background-size:70% 50%;
    background-position: center;  
}
.pt_tag_bg{
    background-image: url(../images/select.png); 
}
.pt_tag div span{
    display: table-cell;
    vertical-align: middle;
}
.p_close{
    position: absolute;
    width: 20%;
    height: 5%;
}
.p_click{
    position: absolute;
    width: 20%;
}
.p1{
    position: relative;
    width: 100%;
    height: 100%;
}
.p1_1{
    position: relative;
    width: 100%;
    height: 90%;
    background-image: url(../images/p1.2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p1_2{
    position: relative;
    width: 100%;
    height: 90%;
    background-image: url(../images/p1.3.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p1_x1{
    position: fixed;
    display: none;
    width:100%;
    height: 100%;
    left: 0%;
    top:0%;
    background-image: url(../images/1/3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p1_x2{
    position: fixed;
    display: none;
    width:100%;
    height: 100%;
    left: 0%;
    top:0%;
    background-image: url(../images/1/0.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p1_x3{
    position: fixed;
    display: none;
    width:100%;
    height: 100%;
    left: 0%;
    top:0%;
    background-image: url(../images/1/1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p1_x4{
    display: none;
    position: fixed;
    width:100%;
    height: 100%;
    left: 0%;
    top:0%;
    background-image: url(../images/1/2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p1_x1 .p_close{
    left: 40%;
    top:66.5%;
}
.p1_x2 .p_close{
    left: 42%;
    top:74.8%;
}
.p1_x3 .p_close{
    left: 42%;
    top:69.5%;
}
.p1_x4 .p_close{
    left: 42%;
    top:55.3%;
}
.p1_click1{
    height: 5%;
    left: 42%;
    top: 42.2%;
}
.p1_click2{
      height: 5%;
    left: 42%;
    top: 92.3%;
}
.p1_click3{
    height: 5%;
    left: 42%;
    top: 41.7%;
}
.p1_click4{
    height: 5%;
    left: 42%;
    top: 91.5%;
}
.p2{
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
}
.p2_1{
    position: relative;
    width: 100%;
    height: 85%;
    background-image: url(../images/p2.1.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p2_2{
    position: relative;
    width: 100%;
    height: 45%;
    background-image: url(../images/p2.2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p2_click2{
      height: 5%;
    left: 42%;
    top: 92.4%;
}
.p2_click3{
      height:11%;
    left: 42%;
    top: 81.4%;
}
.p2
/*.p2_x1{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top:0%;
    background-image: url(../images/1/5.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}*/
.p2_x2{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top:0%;
    background-image: url(../images/1/6.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p2_x3{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top:0%;
    background-image: url(../images/1/4.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p2_x2 .p_close{
    left: 42%;
    top: 65.8%;
}
.p2_x3 .p_close{
    left: 42%;
    top: 62%;
}
.p3{
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
}
.p3_1{
    position: relative;
    width: 100%;
    height: 85%;
    background-image: url(../images/p3.1.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_2{
    position: relative;
    width: 100%;
    height: 45%;
    background-image: url(../images/p3.2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_click1{
      height: 5%;
    left: 42%;
    top: 42%;
}
.p3_click2{
      height: 5%;
    left: 42%;
    top: 92%;
}
.p3_click3{
      height: 11%;
    left: 42%;
    top: 81%;
}
.p3_x1{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-image: url(../images/1/7.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_x2{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-image: url(../images/1/8.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_x3{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-image: url(../images/1/9.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_x1 .p_close{
    left: 42%;
    top: 65.8%;
}
.p3_x2 .p_close{
    left: 42%;
    top: 71.6%;
}
.p3_x3 .p_close{
    left: 42%;
    top: 68.6%;
}
.p4{
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
}
.p4_1{
    position: relative;
    width: 100%;
    height: 85%;
    background-image: url(../images/p4.1.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_2{
    position: relative;
    width: 100%;
    height: 85%;
    background-image: url(../images/p4.2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_3{
    position: relative;
    width: 100%;
    height: 85%;
    background-image: url(../images/p4.3.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_4{
    position: relative;
    width: 100%;
    height: 87%;
    background-image: url(../images/p4.4.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_click1{
      height: 5%;
    left: 42%;
    top: 42%;
}
.p4_click2{
      height: 5%;
    left: 42%;
    top: 92%;
}
.p4_click3{
      height: 5%;
    left: 42%;
    top: 42%;
}
.p4_click4{
      height: 5%;
    left: 42%;
    top: 92%;
}
.p4_click5{
      height: 5%;
    left: 42%;
    top: 42.5%;
}
.p4_click6{
      height: 5%;
    left: 42%;
    top: 92.8%;
}
.p4_click7{
      height: 5%;
    left: 42%;
    top: 43%;
}
.p4_click8{
      height: 5%;
    left: 42%;
    top: 90.8%;
}
.p4_x1{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-image: url(../images/1/10.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_x2{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-image: url(../images/1/11.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_x3{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-image: url(../images/1/12.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_x4{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-image: url(../images/1/13.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_x5{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-image: url(../images/1/14.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_x6{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-image: url(../images/1/16.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_x7{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-image: url(../images/1/15.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_x8{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-image: url(../images/1/17.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_x1 .p_close{
    left: 42%;
    top: 68.8%;
}
.p4_x2 .p_close{
    left: 42%;
    top: 76%;
}
.p4_x3 .p_close{
    left: 42%;
    top: 82.8%;
}
.p4_x4 .p_close{
    left: 42%;
    top: 49.3%;
}
.p4_x5 .p_close{
    left: 42%;
    top: 60.5%;
}
.p4_x6 .p_close{
    left: 42%;
    top: 58.3%;
}
.p4_x7 .p_close{
    left: 42%;
    top: 58.4%;
}
.p4_x8 .p_close{
    left: 42%;
    top: 79.8%;
}
.p5{
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
}
.p5_1{
    position: relative;
    width: 100%;
    height: 85%;
    background-image: url(../images/p5.1.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_2{
    position: relative;
    width: 100%;
    height: 45%;
    background-image: url(../images/p5.2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_3{
    position: relative;
    width: 100%;
    height: 45%;
    background-image: url(../images/p5.3.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_tapZan{
    position: absolute;
    width:20%; 
    height: 14%;
    left: 21%;
    top: 48.8%;
}
.p5_zanNum{
    position: absolute;
    width:33%; 
    height: 14%;
    left: 42%;
    top: 48.8%;
    display: table;
    text-align: center;
}
.p5_musTime{
    position: absolute;
    font-size: 15px;
    left: 68%;
    top: 29.8%;
}
.p5_zanNum span{
    display: table-cell;
    vertical-align: middle;
    color: white;
    font-size: 18px;
}
.p5_music1{
    position: absolute;
    width: 9%;
    height: 14%;
    left:51%;
    top: 26%;
    background-image: url(../images/laba1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_music2{
    position: absolute;
    width: 1.5%;
    height: 14%;
    left:61%;
    top: 26%;
    background-image: url(../images/laba2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_music2.ani{
    animation: flash 1s linear infinite;
    -webkit-animation: flash 1s linear infinite;
}
.p5_click1{
    height: 5%;
    left: 42%;
    top: 41.8%;
}
.p5_click2{
      height: 5%;
    left: 42%;
    top: 92%;
}
.p5_click3{
      height: 11%;
    left: 42%;
    top: 81%;
}
.p5_x1{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-image: url(../images/1/18.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_x2{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-image: url(../images/1/19.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_x3{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-image: url(../images/1/20.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_x1 .p_close{
    position: absolute;
    left: 42%;
    top:86%;
}
.p5_x2 .p_close{
    position: absolute;
    left: 42%;
    top:47.8%;
}
.p5_x3 .p_close{
    position: absolute;
    left: 42%;
    top:88%;
}