/*音乐*/
.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/loading.gif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.load{
    position: absolute;
    width: 60%;
    height: 0.5%;
    left: 20%;
    top: 65%;
    background-color: dimgray;
}
.loaded{
    position: absolute;
    left: 0%;
    top: 0%;
    width: 0%;
    height: 100%;
    background-color: darkred;
}
.page0{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p0/p0.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p0_1{
    display: none;
    position: absolute;
    width: 4.8%;
    height: 3%;
    left: 68.4%;
    top: 4.6%;
    background-image: url(../images/p0/p0.2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p0_2{
    display: none;
    position: absolute;
    width: 11%;
    height: 8%;
    left: 67%;
    top:15%;
    background-image: url(../images/p0/p0.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: flash 2s linear infinite alternate;
    -webkit-animation: flash 2s linear infinite alternate;
}
.p0_click{
    position: absolute;
    width: 27%;
    height: 16%;
    left: 54%;
    top: 4%;
}
.vid{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#video1{
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.page2{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2/p2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p2_1{
    position: absolute;
    width: 35%;
    height: 11%;
    left: 10%;
    top: 55%;
    background-image: url(../images/p2/p2.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p2_2{
    position: absolute;
    width: 35%;
    height: 11%;
    left: 55%;
    top: 55%;
    background-image: url(../images/p2/p2.2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p2_3{
    position: absolute;
    width: 7%;
    height: 4%;
    left: 38%;
    top: 23%;
    background-image: url(../images/p2/p2.3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: ye_move 2s linear infinite alternate;
    -webkit-animation: ye_move 2s linear infinite alternate;
    transform-origin: left bottom;
    -webkit-transform-origin: left bottom;
}
@keyframes ye_move{
    0%{
        transform:rotateZ(-20deg);
        -webkit-transform:rotateZ(-20deg);
    }
    100%{
        transform:rotateZ(10deg);
        -webkit-transform:rotateZ(10deg);
    }
}
@-webkit-keyframes ye_move{
    0%{
        transform:rotateZ(-20deg);
        -webkit-transform:rotateZ(-20deg);
    }
    100%{
        transform:rotateZ(10deg);
        -webkit-transform:rotateZ(10deg);
    }
}
.p2_4{
    position: absolute;
    width: 18%;
    height: 6%;
    left: 8%;
    top: 5%;
    background-image: url(../images/p2/p2.6.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: cloud_move 8s linear infinite;
    -webkit-animation: cloud_move 8s linear infinite
}
@keyframes cloud_move{
    0%{
        transform: translate3d(500%,0,0);
        -webkit-transform: translate3d(500%,0,0);
    }
    100%{
        transform: translate3d(-200%,0,0);
        -webkit-transform: translate3d(-200%,0,0);
    }
}
@-webkit-keyframes cloud_move{
    0%{
        transform: translate3d(500%,0,0);
        -webkit-transform: translate3d(500%,0,0);
    }
    100%{
        transform: translate3d(-200%,0,0);
        -webkit-transform: translate3d(-200%,0,0);
    }
}
.p2_5{
    position: absolute;
    width: 19%;
    height: 7%;
    left: 74%;
    top: 7%;
    background-image: url(../images/p2/p2.5.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: cloud1_move 10s linear infinite;
    -webkit-animation: cloud1_move 10s linear infinite;
}
@keyframes cloud1_move{
     0%{
        transform: translate3d(110%,0,0);
        -webkit-transform: translate3d(110%,0,0);
    }
    100%{
        transform: translate3d(-500%,0,0);
        -webkit-transform: translate3d(-500%,0,0);
    }
}
@-webkit-keyframes cloud1_move{
     0%{
        transform: translate3d(110%,0,0);
        -webkit-transform: translate3d(110%,0,0);
    }
    100%{
        transform: translate3d(-500%,0,0);
        -webkit-transform: translate3d(-500%,0,0);
    }
}
.p2_6{
    position: absolute;
    width: 16%;
    height: 6%;
    left: 73%;
    top: 36%;
    background-image: url(../images/p2/p2.6.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: cloud2_move 12s linear infinite;
    -webkit-animation: cloud2_move 12s linear infinite;
}
@keyframes cloud2_move{
     0%{
        transform: translate3d(120%,0,0);
        -webkit-transform: translate3d(120%,0,0);
    }
    100%{
        transform: translate3d(-550%,0,0);
        -webkit-transform: translate3d(-550%,0,0);
    }
}
@-webkit-keyframes cloud2_move{
     0%{
        transform: translate3d(120%,0,0);
        -webkit-transform: translate3d(120%,0,0);
    }
    100%{
        transform: translate3d(-550%,0,0);
        -webkit-transform: translate3d(-550%,0,0);
    }
}
.p2_7{
    position: absolute;
    width: 10%;
    height: 3%;
    left: 85%;
    top: 41%;
    background-image: url(../images/p2/p2.4.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: cloud3_move 14s linear infinite;
    -webkit-animation: cloud3_move 14s linear infinite;
}
@keyframes cloud3_move{
     0%{
        transform: translate3d(120%,0,0);
        -webkit-transform: translate3d(120%,0,0);
    }
    100%{
        transform: translate3d(-800%,0,0);
        -webkit-transform: translate3d(-800%,0,0);
    }
}
@-webkit-keyframes cloud3_move{
     0%{
        transform: translate3d(120%,0,0);
        -webkit-transform: translate3d(120%,0,0);
    }
    100%{
        transform: translate3d(-800%,0,0);
        -webkit-transform: translate3d(-800%,0,0);
    }
}