/*音乐*/
.music_blk{z-index:100;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{
/*    display: none;*/
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/loading.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.load{
    position: absolute;
    width: 50%;
    height: 0.5%;
    left: 25%;
    top: 50%;
    background-color: blue;
}
.loading{
    position: absolute;
    width: 0%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-color: yellow; 
}
.page1{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.jpg?1);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p1_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.1.png?1);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p1_2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p1_3{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.3.png?1);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p1_click{
    position: absolute;
    width: 67%;
    height: 9%;
    left: 16%;
    top: 83%;
}
.swiper-container {
    display: none;
    width: 100%;
    height: 100%;
}  
.swiper-slide{
    position: relative;
    width: 100%;
    height: 100%;
}
.prev-button{
    position: absolute;
    width: 14%;
    height: 10%;
    left: 3%;
    top: 88%;
    z-index: 1;
}
.next-button{
    position: absolute;
    width: 14%;
    height: 10%;
    left: 83%;
    top: 88%;
    z-index: 1;
}
.page2{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p2_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2.1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p2_2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2.2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p2_hand{
    position: absolute;
    width: 10%;
    height: 6%;
    left: 84%;
    top: 63%;
    background-image: url(../images/hand.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: flash 2s linear infinite alternate;
    -webkit-animation: flash 2s linear infinite alternate;
}
#p2_echarts{
    position: absolute;
    width: 90%;
    height: 60%;
    left: 5%;
    top:28%;
}
.page3{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;  
}
.p3_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3.1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p3_2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3.2.png?1);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p3_3{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3.3.png?1);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p3_hand{
    position: absolute;
    width: 10%;
    height: 6%;
    left: 64%;
    top: 31%;
    background-image: url(../images/hand.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: flash 2s linear infinite alternate;
    -webkit-animation: flash 2s linear infinite alternate;
}
.p3_click1{
    position: absolute;
    width: 45%;
    height: 6%;
    left: 5%;
    top: 27%;
}
.p3_click2{
    position: absolute;
    width: 45%;
    height: 6%;
    left: 50%;
    top: 27%;
}
.page4{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p4_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p4.1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p4_2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p4.2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p4_hand{
    position: absolute;
    width: 10%;
    height: 6%;
    left: 84%;
    top: 57%;
    background-image: url(../images/hand.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: flash 2s linear infinite alternate;
    -webkit-animation: flash 2s linear infinite alternate;
}
#p4_echarts{
    position: absolute;
    width: 90%;
    height: 60%;
    left: 5%;
    top:27.5%;
}
.page6{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p6_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p6.1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p6_2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p6.2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p6_hand{
    position: absolute;
    width: 10%;
    height: 6%;
    left: 68%;
    top: 62%;
    background-image: url(../images/hand.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: flash 2s linear infinite alternate;
    -webkit-animation: flash 2s linear infinite alternate;
}
#p6_echarts{
    position: absolute;
    width: 90%;
    height: 60%;
    left: 5%;
    top:27.5%;
}
.page7{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p7_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p7.1.png?1);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.page8{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/p8.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p8_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p8.1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p8_2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p8.2.png?1);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p8_3{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p8.3.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.page9{
    display: none;
    position: fixed;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    background-image: url(../images/p8.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 99;
}
.p9_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p8.1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p9_2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p8.2.png?1);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p9_3{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p8.3.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p9_4{
    display: none;
    position:absolute;
    width: 100%;
    height: 100%;
    left: -4%;
    top: 4%;
    background-image: url(../images/p8.4.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: flash 2s linear infinite alternate;
    -webkit-animation: flash 2s linear infinite alternate;
}
.p9_click{
    position: absolute;
    width: 54%;
    height: 8%;
    left: 23%;
    top: 83.5%;
}