/*音乐*/
.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') 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-image: url(../images/loading.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.load{
    position: absolute;
    width: 50%;
    height: 1%;
    left: 25%;
    top: 52%;
    background-color: #c89d60;
}
.loading{
    position: absolute;
    width:0%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-color: #8ca02f;
}
.page1{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    contain:strict;
}
.p1_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p1_2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p1_3{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p1_4{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.4.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p1_click{
    position: absolute;
    width: 44%;
    height: 10%;
    left: 32%;
    top: 68%;
}

.page2{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    contain:strict;
}
.p2_star1{
    position: absolute;
    width: 12%;
    height: 7%;
    left: 26%;
    top: 5.5%;
    background-image: url(../images/p2.11.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
}
.ani.p2_star1{
     animation: fadeIn 1.5s both;
    -webkit-animation: fadeIn 1.5s both;
}
.p2_star2{
    position: absolute;
    width: 12%;
    height: 7%;
    left: 58%;
    top: 19%;
    background-image: url(../images/p2.11.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
}
.ani.p2_star2{
      animation: fadeIn 1.5s both;
    -webkit-animation: fadeIn 1.5s both;
}
.p2_star3{
    position: absolute;
    width: 12%;
    height: 7%;
    left: 26%;
    top: 30%;
    background-image: url(../images/p2.11.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
}
.ani.p2_star3{
     animation: fadeIn 1.5s both;
    -webkit-animation: fadeIn 1.5s both;
}
.p2_star4{
    position: absolute;
    width: 12%;
    height: 7%;
    left: 58.5%;
    top: 42%;
    background-image: url(../images/p2.11.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
}
.ani.p2_star4{
    animation: fadeIn 1.5s both;
    -webkit-animation: fadeIn 1.5s both;
}
.p2_1{
    position: absolute;
    width: 29%;
    height: 13.5%;
    left: 18%;
    top: 13%;
    background-image: url(../images/p2.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p2_2{
    position: absolute;
    width: 29%;
    height: 13.5%;
    left: 50%;
    top: 26%;
    background-image: url(../images/p2.6.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p2_3{
    position: absolute;
    width: 29%;
    height: 13.5%;
    left: 18%;
    top: 37%;
    background-image: url(../images/p2.6.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p2_4{
    position: absolute;
    width: 29%;
    height: 13.5%;
    left: 50%;
    top: 49.5%;
    background-image: url(../images/p2.6.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p2_click{
    position: absolute;
    width: 29%;
    height: 13.5%;
    left: 18%;
    top: 61%;
    background-image: url(../images/p2.5.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.page3{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    contain:strict;
}
.page3 .bg{
    position: absolute;
    top: 4%;
    left: 15%;
    width: 77%;
    height: 30%;
    background-image: url(../images/01.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_1{
    position: absolute;
    width: 42%;
    height: 6%;
    left: 28%;
    top: 52%;
    opacity: 0.7;
}
.p3_1_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_2{
    position: absolute;
    width: 42%;
    height: 6%;
    left: 28%;
    top: 62%;
    opacity: 0.7;
}
.p3_2_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3.2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_click{
    position: absolute;
    width: 26%;
    height: 6%;
    left: 35%;
    top: 73%;
    background-image: url(../images/q_click.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.page3_answer{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p_a.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
     contain:strict;
}
.p3_a1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/a_true.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_agif{
    position: absolute;
    width: 77%;
    height: 30.5%;
    left: 15%;
    top: 19%;
    background-image: url(../images/p3gif.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_a2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3_a.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_aclick{
    position: absolute;
    width: 33%;
    height: 7%;
    left: 34%;
    top: 72%;
    background-image: url(../images/p_a2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.page4{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p4.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
     contain:strict;
}
.page4 .bg{
    position: absolute;
    top: 4%;
    left: 15%;
    width: 77%;
    height: 30%;
    background-image: url(../images/02.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_1{
    position: absolute;
    width: 70%;
    height: 6%;
    left: 14%;
    top: 52%;
    opacity: 0.7;
}
.p4_1_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p4.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_2{
    position: absolute;
    width: 70%;
    height: 6%;
    left: 14%;
    top: 63%;
    opacity: 0.7;
}
.p4_2_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p4.2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_click{
    position: absolute;
    width: 26%;
    height: 6%;
    left: 35%;
    top: 73%;
    background-image: url(../images/q_click.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.page4_answer{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p_a.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
     contain:strict;
}
.p4_a1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/a_true.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_agif{
    position: absolute;
    width: 77%;
    height: 30.5%;
    left: 15%;
    top: 19%;
    background-image: url(../images/p4gif.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_a2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p4_a.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_aclick{
    position: absolute;
    width: 33%;
    height: 7%;
    left: 34%;
    top: 72%;
    background-image: url(../images/p_a2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.page5{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p5.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
     contain:strict;
}
.page5 .bg{
    position: absolute;
    top: 4%;
    left: 15%;
    width: 77%;
    height: 30%;
    background-image: url(../images/03.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_1{
    position: absolute;
    width: 36%;
    height: 6%;
    left: 31%;
    top: 52%;
    opacity: 0.7;
}
.p5_1_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p5.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_2{
    position: absolute;
    width: 36%;
    height: 6%;
    left: 31%;
    top: 62%;
    opacity: 0.7;
}
.p5_2_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p5.2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_click{
    position: absolute;
    width: 26%;
    height: 6%;
    left: 35%;
    top: 73%;
    background-image: url(../images/q_click.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.page5_answer{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p_a.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
     contain:strict;
}
.p5_a1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/a_true.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_agif{
    position: absolute;
    width: 77%;
    height: 30.5%;
    left: 15%;
    top: 19%;
    background-image: url(../images/p5gif.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_a2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p5_a.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_aclick{
    position: absolute;
    width: 33%;
    height: 7%;
    left: 34%;
    top: 72%;
    background-image: url(../images/p_a2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.page6{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p6.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
     contain:strict;
}
.page6 .bg{
    position: absolute;
    top: 4%;
    left: 15%;
    width: 77%;
    height: 30%;
    background-image: url(../images/04.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p6_1{
    position: absolute;
    width: 52%;
    height: 9%;
    left: 23%;
    top: 49%;
    opacity: 0.7;
}
.p6_1_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p6.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p6_2{
    position: absolute;
    width: 50%;
    height: 6%;
    left: 24%;
    top: 62%;
    opacity: 0.7;
}
.p6_2_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p6.2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p6_click{
    position: absolute;
    width: 26%;
    height: 6%;
    left: 35%;
    top: 73%;
    background-image: url(../images/q_click.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.page6_answer{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p_a.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
     contain:strict;
}
.p6_a1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/a_true.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p6_agif{
    position: absolute;
    width: 77%;
    height: 30.5%;
    left: 15%;
    top: 19%;
    background-image: url(../images/p6gif.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p6_a2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p6_a.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p6_aclick{
    position: absolute;
    width: 33%;
    height: 7%;
    left: 34%;
    top: 72%;
    background-image: url(../images/p_a2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.page7{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p7.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p7_1{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p7.3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 10;
}
.p7_2{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p7.4.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 10;
}

.p7_3{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p7.5.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p7_4{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p7.6.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p7_5{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p7.7.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p7_6{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p7.8.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.p7_click{
    position: absolute;
    width: 45%;
    height: 10%;
    left: 28%;
    top:83%;
}
.swiper-container{
    position:absolute;
    width:63.5%;
    height:27%;
    left: 18%;
    top: 30.5%;
}

.swiper-slide{
    position: relative;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.l0{
    background-image: url(../images/p7_l1.jpg);
}
.l1{
    background-image: url(../images/p7_l2.jpg);
}
.l2{
    background-image: url(../images/p7_l3.jpg);
}
.l3{
    background-image: url(../images/p7_l4.jpg);
}
.l4{
    background-image: url(../images/p7_l5.jpg);
}
.l5{
    background-image: url(../images/p7_l6.jpg);
}
.l6{
    background-image: url(../images/p7_l7.jpg);
}
.l7{
    background-image: url(../images/p7_l8.jpg);
}
.l8{
    background-image: url(../images/p7_l9.jpg);
}