/*音乐*/
.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.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.load{
    position: absolute;
    width: 50%;
    height: 1%;
    left: 25%;
    top: 70%;
    background-color: khaki;
}
.loading{
    position: absolute;
    width:0%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-color: darkred;
}
.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: 60%;
    height: 40%;
    left: 20%;
    top: 8%;
    background-image: url(../images/p1.2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p1_2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p1_3{
    position: absolute;
    width: 32%;
    height: 22%;
    left: 68%;
    top: 2%;
    background-image: url(../images/p1.4.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p1_click{
    position: absolute;
    width: 44%;
    height: 10%;
    left: 27%;
    top: 86%;
    background-image: url(../images/p1.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.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: 35%;
    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: 20.3%;
    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: 35%;
    top: 35%;
    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: 50.5%;
    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: 30%;
    height: 19%;
    left: 25%;
    top: 12%;
    background-image: url(../images/p2.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p2_2{
    position: absolute;
    width: 30%;
    height: 19%;
    left: 49%;
    top: 26%;
    background-image: url(../images/p2.6.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p2_3{
    position: absolute;
    width: 30%;
    height: 19%;
    left: 26%;
    top: 41%;
    background-image: url(../images/p2.6.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p2_4{
    position: absolute;
    width: 30%;
    height: 19%;
    left: 49%;
    top: 56%;
    background-image: url(../images/p2.6.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p2_click{
    position: absolute;
    width: 30%;
    height: 19%;
    left: 26%;
    top: 71%;
    background-image: url(../images/p2.5.1.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;
}
.p3_1{
    position: absolute;
    width: 70%;
    height: 9%;
    left: 14%;
    top: 52%;
    background-image: url(../images/q_bg2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_1_1{
    position: absolute;
    width: 30%;
    height: 30%;
    left: 7%;
    top: 33%;
    background-image: url(../images/p3.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_2{
    position: absolute;
    width: 70%;
    height: 9%;
    left: 14%;
    top: 64%;
    background-image: url(../images/q_bg2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_2_1{
    position: absolute;
    width: 30%;
    height: 30%;
    left: 7%;
    top: 33%;
    background-image: url(../images/p3.2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_3{
    position: absolute;
    width: 70%;
    height: 9%;
    left: 14%;
    top: 76%;
    background-image: url(../images/q_bg2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_3_1{
    position: absolute;
    width: 30%;
    height: 30%;
    left: 7%;
    top: 33%;
    background-image: url(../images/p3.3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_click{
     position: absolute;
    width: 42%;
    height: 10%;
    left: 29%;
    top: 88%;
    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?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
     contain:strict;
}
.p3_a1{
    position: absolute;
/*
    width: 80%;
    height: 36%;
    left: 10%;
    top: 15%;
*/
    width: 100%;
    height: 100%;
    background-image: url(../images/a_true.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_agif{
    position: absolute;
    width: 67.5%;
    height: 26%;
    left: 15.5%;
    top: 22.5%;
    background-image: url(../images/p4gif.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_a2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3_a.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_aclick{
    position: absolute;
    width: 50%;
    height: 11%;
    left: 25%;
    top: 83%;
    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;
}
.p4_1{
    position: absolute;
    width: 70%;
    height: 9%;
    left: 14%;
    top: 52%;
    background-image: url(../images/q_bg2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_1_1{
    position: absolute;
    width: 70%;
    height: 33%;
    left: 7%;
    top: 34%;
    background-image: url(../images/p4.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_2{
    position: absolute;
    width: 70%;
    height: 9%;
    left: 14%;
    top: 64%;
    background-image: url(../images/q_bg2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_2_1{
    position: absolute;
    width: 90%;
    height: 28%;
    left: 7%;
    top: 33%;
    background-image: url(../images/p4.2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_3{
    position: absolute;
    width: 70%;
    height: 9%;
    left: 14%;
    top: 76%;
    background-image: url(../images/q_bg2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_3_1{
    position: absolute;
    width: 60%;
    height: 32%;
    left: 7%;
    top: 33%;
    background-image: url(../images/p4.3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_click{
    position: absolute;
    width: 42%;
    height: 10%;
    left: 29%;
    top: 88%;
    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?1);
    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: 67.5%;
    height: 26%;
    left: 15.5%;
    top: 22.5%;
    background-image: url(../images/p3gif.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_a2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p4_a.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_aclick{
    position: absolute;
    width: 50%;
    height: 11%;
    left: 25%;
    top: 83%;
    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;
}
.p5_1{
    position: absolute;
    width: 70%;
    height: 9%;
    left: 14%;
    top: 52%;
    background-image: url(../images/q_bg2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_1_1{
    position: absolute;
    width: 54%;
    height: 32%;
    left: 7%;
    top: 34%;
    background-image: url(../images/p5.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_2{
    position: absolute;
    width: 70%;
    height: 9%;
    left: 14%;
    top: 64%;
    background-image: url(../images/q_bg2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_2_1{
    position: absolute;
    width: 34%;
    height: 30%;
    left: 7%;
    top: 33%;
    background-image: url(../images/p5.2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_3{
    position: absolute;
    width: 70%;
    height: 9%;
    left: 14%;
    top: 76%;
    background-image: url(../images/q_bg2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_3_1{
    position: absolute;
    width: 48%;
    height: 31%;
    left: 7%;
    top: 33%;
    background-image: url(../images/p5.3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p5_click{
    position: absolute;
    width: 42%;
    height: 10%;
    left: 29%;
    top: 88%;
    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?1);
    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: 67.5%;
    height: 26%;
    left: 15.5%;
    top: 22.5%;
    background-image: url(../images/p6gif.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: 50%;
    height: 11%;
    left: 25%;
    top: 83%;
    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;
}
.p6_1{
    position: absolute;
    width: 70%;
    height: 9%;
    left: 14%;
    top: 52%;
    background-image: url(../images/q_bg2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p6_1_1{
    position: absolute;
    width: 20%;
    height: 28%;
    left: 7%;
    top: 34%;
    background-image: url(../images/p6.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p6_2{
    position: absolute;
    width: 70%;
    height: 9%;
    left: 14%;
    top: 64%;
    background-image: url(../images/q_bg2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p6_2_1{
    position: absolute;
     width: 20%;
    height: 28%;
    left: 7%;
    top: 34%;
    background-image: url(../images/p6.2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p6_3{
    position: absolute;
    width: 70%;
    height: 9%;
    left: 14%;
    top: 76%;
    background-image: url(../images/q_bg2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p6_3_1{
    position: absolute;
     width: 20%;
    height: 28%;
    left: 7%;
    top: 34%;
    background-image: url(../images/p6.3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p6_click{
    position: absolute;
    width: 42%;
    height: 10%;
    left: 29%;
    top: 88%;
    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?1);
    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: 67.5%;
    height: 26%;
    left: 15.5%;
    top: 22.5%;
    background-image: url(../images/p5gif.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: 50%;
    height: 11%;
    left: 25%;
    top: 83%;
    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.1.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:29%;
    left: 19%;
    top: 46.2%;
}

.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);
}
.page8{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p8.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p8_click{
    position: absolute;
    width: 45%;
    height: 10%;
    left: 25%;
    top:72%;
}