/*音乐*/
.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.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.load{
    position: absolute;
    width: 50%;
    height: 0.5%;
    left: 25%;
    top: 35%;
    background-color: #37562f;
}
.loaded{
    position: absolute;
    width: 0%;
    height: 100%;
    background-color: #81a472;
}
.swiper-container{
    display: none;
    width: 100%;
    height: 100%;
}
.swiper-slide{
    width: 100%;
    height: 100%;
}
.p0{
    position:relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/p0.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
}
.p0_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p0.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    animation: fadeIn 2s linear both;
    -webkit-animation: fadeIn 2s linear both;
}
.p0_2{
    position: absolute;
    width: 100%;
    height: 100%;
    top:6%;
    background-image: url(../images/p1.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    animation: arr_move 1s linear infinite;
    -webkit-animation: arr_move 1s linear infinite;
}
.p1{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
}
.p1_1{
    position: absolute;
    width: 100%;
    height: 100%;
    top:6%;
    background-image: url(../images/p1.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    animation: arr_move 1s linear infinite;
    -webkit-animation: arr_move 1s linear infinite;
}
@keyframes arr_move{
    0%{
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
    100%{
        transform: translate3d(0,-2%,0);
        -webkit-transform: translate3d(0,-2%,0);
    }
}
@-webkit-keyframes arr_move{
    0%{
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
    100%{
        transform: translate3d(0,-2%,0);
        -webkit-transform: translate3d(0,-2%,0);
    }
}
.p2{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
}
.p2_1{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 6%;
    background-image: url(../images/p1.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: arr_move 1s linear infinite;
    -webkit-animation: arr_move 1s linear infinite;
}
.p3{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
}
.p3_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    top: 7%;
    animation: arr_move 1s linear infinite;
    -webkit-animation: arr_move 1s linear infinite;
}
.p3_2{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
}
.p3_click{
    position: absolute;
    width: 40%;
    height: 8%;
    top: 81%;
    left: 30%;
}
.p4{
    position:relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/p4.5.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;  
}
.p4_slide{
    position: absolute;
    width:50%;
    height: 3.5%;
    left: 24%;
    overflow: hidden;
}
.p4_slide>div{
    position: absolute;
    width:0%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-color: darkgreen;
}
.p4_slide:nth-of-type(1){
    top: 23%;
}
.p4_slide:nth-of-type(2){
    top: 29.5%;
}
.p4_slide:nth-of-type(3){
    top: 36.5%;
}
.p4_slide:nth-of-type(4){
    top: 43.5%;
}
.p4_slide:nth-of-type(5){
    top: 50.5%;
}
.p4_slide:nth-of-type(6){
    top: 57%;
}
.p4_slide:nth-of-type(7){
    top: 64%;
}
.p4_slide:nth-of-type(8){
    top: 71%;
}
.p4_slide:nth-of-type(9){
    top: 78%;
}
.p4_text{
    position: absolute;
    width: 12%;
    left: 74%;
    height: 6%;
    text-align: center;
    display: table;
}
.p4_text:nth-of-type(1){
   top: 21.5%;
}
.p4_text:nth-of-type(2){
   top: 28.5%;
}
.p4_text:nth-of-type(3){
   top: 35%;
}
.p4_text:nth-of-type(4){
   top: 42%;
}
.p4_text:nth-of-type(5){
   top: 49%;
}
.p4_text:nth-of-type(6){
   top: 55.8%;
}
.p4_text:nth-of-type(7){
   top: 62.8%;
}
.p4_text:nth-of-type(8){
   top: 69.8%;
}
.p4_text:nth-of-type(9){
   top: 76.8%;
}
.p4_text span{
    font-size: 20px;
    display: table;
    color: darkgreen;
    display: table-cell;
    vertical-align: middle;
}
.p4_arr{
    position:absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;  
    top: 6%;
    animation: arr_move 1s linear infinite;
    -webkit-animation: arr_move 1s linear infinite;
}
.p4_1{
    position:relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/p4.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;  
}
.p5{
    position:relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/p5.jpg?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;  
}
.p5_click{
    position: absolute;
    width: 37%;
    height: 9%;
    left: 30%;
    top: 64%;
}
.p5_1{
    display: none;
    position:absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p5.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;  
}
.rp4{
    display: none;
    position:fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/p4.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;  
    z-index: 10;
}
.rp4>div{
    position: absolute;
    width: 28%;
    height: 17%;
}
.rp4_1{
    left: 7%;
    top: 42.5%;
}
.rp4_2{
    left: 36%;
    top: 42.5%;
}
.rp4_3{
    left: 66%;
    top: 42.5%;
}
.rp4_4{
    left: 7%;
    top:60.5%;
}
.rp4_5{
    left: 36%;
    top: 60.5%;
}
.rp4_6{
    left: 66%;
    top: 60.5%;
}
.rp4_7{
    left: 7%;
    top: 79%;
}
.rp4_8{
    left: 36%;
    top: 79%;
}
.rp4_9{
    left: 66%;
    top: 79%;
}
.rp4_x{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: 20;
}
.rp4_x>div{
    display: none;
    position:absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;  
}
.rp4_x1{
    background-image: url(../images/xin.png)
}
.rp4_x2{
    background-image: url(../images/he.png)
}
.rp4_x3{
    background-image: url(../images/chuang.png)
}
.rp4_x4{
    background-image: url(../images/tong.png)
}
.rp4_x5{
    background-image: url(../images/tong-1.png)
}
.rp4_x6{
    background-image: url(../images/gong.png)
}
.rp4_x7{
    background-image: url(../images/hu.png)
}
.rp4_x8{
    background-image: url(../images/rong.png)
}
.rp4_x9{
    background-image: url(../images/ping.png)
}
.rp4_xclick{
    position: absolute;
    width: 33%;
    height: 7%;
    left: 33%;
    top: 67%;
}
.p_submit{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../images/p4.1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 30;
}
.userName{
    position: absolute;
    width: 29%;
    height: 4%;
    left: 45%;
    top: 37%;
    text-align: center;
    border: none;
    outline: none;
    background-color: transparent;
    color: darkgreen;
}
.userPhone{
    position: absolute;
    width: 29%;
    height: 4%;
    left: 45%;
    top: 45.4%;
    text-align: center;
    border: none;
    outline: none;
    background-color: transparent;
    color: darkgreen;
}
.ps_close{
    position: absolute;
    width: 15%;
    height: 9%;
    left: 82%;
    top: 12%;
}
.ps_click1{
    position: absolute;
    width: 28%;
    height: 7%;
    left: 36%;
    top: 57%;
}
.ps_click2{
    position: absolute;
    width: 28%;
    height: 7%;
    left: 36%;
    top: 65%;
}