/*音乐*/
.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{
    position: absolute;
    width: 100%;
    height: 100%;
}
.loadWrap{
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p0.jpg?1);
    contain:strict;
}
.l_1{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p0.1.png);
    animation: flash 2s linear both;
    -webkit-animation: flash 2s linear both;
}
.l_2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p0.3.png);  
}
.l_click{
    position: absolute;
    width: 24%;
    height: 15%;
    left: 38%;
    top: 66%;
}
.load{
    position: absolute;
    width: 50%;
    height: 1%;
    left: 25%;
    top: 61%;
    background-color: darkseagreen;
}
.loading{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background-color: maroon;
}
.page1{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1.jpg);
}
.p1_star{
    position: absolute;
    width: 100%;
    height: 100%;
    contain:strict;
}
.p1_1_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1.1.png); 
}
.ani .p1_1_1{
     animation: flash 2s linear 2 both;
    -webkit-animation: flash 2s linear 2 both;
}
.p1_1_2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1.2.png);
}
.ani .p1_1_2{
    animation: flash 2s 0.5s linear 2 both;
    -webkit-animation: flash 2s 0.5s linear 2 both;
}
.p1_1_3{
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1.3.png);  
}
.ani .p1_1_3{
    animation: flash 2s 1s linear 2 both;
    -webkit-animation:flash 2s 1s linear 2 both;
}
.p1_1_4{
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1.4.png);
}
.ani .p1_1_4{
    animation: flash 2s 1.5s linear 2 both;
    -webkit-animation: flash 2s 1.5s linear 2 both;
}
.p1_1_click1{
    position: absolute;
    width: 25%;
    height: 7%;
    top: 56%;
    left: 17%; 
}
.p1_1_click2{
    position: absolute;
    width: 25%;
    height: 7%;
    top: 67%;
    left: 35%;   
}
.p1_1_click3{
    position: absolute;
    width: 25%;
    height: 7%;
    top: 60%;
    left: 70%; 
}
.p1_1_click4{
    position: absolute;
    width: 25%;
    height: 7%;
    top: 39%;
    left: 48%; 
}
.p1_2{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1.10.jpg);
}
.p1_2_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1.5.png?1);
    animation: fadeIn 1s linear both;
    -webkit-animation: fadeIn 1s linear both;
}
.p1_2_click{
    position: absolute;
    width: 24%;
    height: 15%;
    top: 75%;
    left: 38%; 
}
.p1_3{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    contain:strict;
}
.p1_3_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1.6.1.png);
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
.p1_3_2{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1.6.2.png);
     transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
.p1_3_3{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1.6.3.png);
     transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
.p1_3_4{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1.6.4.png);
     transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
.p1_3_hand{
    position: absolute;
    width: 11%;
    height: 7%;
    left: 86%;
    top: 56%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/hand.png);
    animation: flash 2s linear both;
    -webkit-animation: flash 2s linear both;
}
.p1_3_5{
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1.6.jpg);
}
.p1_3_clickl{
    position: absolute;
    width: 10%;
    height: 9%;
    top: 51%;
    left: 8%; 
}
.p1_3_clickr{
    position: absolute;
    width: 10%;
    height: 9%;
    top: 51%;
    left: 82%; 
}
.p1_3_click{
    position: absolute;
    width: 24%;
    height: 15%;
    top: 78%;
    left: 38%; 
}
.p1_4{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1.10.jpg);
}
.p1_4_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1.7.png);
    animation: fadeIn 1s linear both;
    -webkit-animation: fadeIn 1s linear both;
}
.p1_4_click{
    position: absolute;
    width: 24%;
    height: 15%;
    top: 78%;
    left: 38%; 
}
.p1_5{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1.10.jpg);
}
.p1_5_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1.8.png?1);
    animation: fadeIn 1s linear both;
    -webkit-animation: fadeIn 1s linear both;
}
.p1_5_click{
    position: absolute;
    width: 24%;
    height: 15%;
    top: 78%;
    left: 38%; 
}
.p1_draw{
    display:none;
    position: absolute;
    width: 45.5%;
    height: 6.2%;
    left: 27%;
    top: 88%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p1.9.png);
    animation: flash 2s linear 2 both;
    -webkit-animation: flash 2s linear 2 both;
}
.page2{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p2.jpg);
}
.p2_1{
    position: absolute;
    width: 47%;
    height: 28%;
    left: 26%;
    top: 8.8%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p2_star1.png);
    transform: scale(0);
    -webkit-transform:scale(0);
    
}
/*
.p2_area{
    position: absolute;
    width: 40%;
    height: 24%;
    left: 30%;
    top: 11%;
    background-color: cyan;
    opacity: 0.4;
}
*/
.p2_hand{
    position: absolute;
    width: 11%;
    height: 7%;
    left: 63%;
    top: 48%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p2.7.png);
    animation: hand_move 1.5s linear infinite;
    -webkit-animation: hand_move 1.5s linear infinite;
}
@keyframes hand_move{
    0%{
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
    100%{
         transform: translate3d(-50%,-200%,0);
        -webkit-transform: translate3d(-50%,-200%,0);
    }
}
@-webkit-keyframes hand_move{
    0%{
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
    100%{
         transform: translate3d(-50%,-200%,0);
        -webkit-transform: translate3d(-50%,-200%,0);
    }
}
.p2_tip{
    position: absolute;
    width: 26%;
    height: 6.5%;
    left: 71%;
    top: 32%;
    background-image: url(../images/p2.8.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;  
}
.p2_star div{
    position: absolute;
    width: 11%;
    height: 6.5%;
    background-image: url(../images/p2_star.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;  
}
.p2_star .p2_star1{
     left: 23%;
     top: 57%;
}
.p2_star .p2_star2{
     left: 43%;
     top: 68%;
}
.p2_star .p2_star3{
     left: 79%;
     top: 61%;
}
.p2_star .p2_star4{
     left: 56%;
     top: 40%;
}

.page3{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p3.jpg?1);
}
.p3_1{
    position: absolute;
    width: 90%;
    height: 55%;
    top: -5%;
    left: 5%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p3.1.png);
    animation: shan_rotate 4s linear infinite;
    -webkit-animation: shan_rotate 4s linear infinite;
}
@keyframes shan_rotate{
    0%{
        transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
    }
    100%{
        transform: rotateZ(360deg);
        -webkit-transform: rotateZ(360deg);
    }
}
.p3_2{
    position: absolute;
    width: 47%;
    height: 28%;
    left: 26%;
    top: 8.8%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p2_star1.png);
}
.p3_3{
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p2.jpg);
    animation: fadeOut 2s linear both;
    -webkit-animation: fadeOut 2s linear both;
    will-change: opacity;
}