/*音乐*/

.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%{       
    }
    100%{
        transform: rotateZ(360deg);
        -webkit-transform:rotateZ(360deg);
    }
}
@-webkit-keyframes rotate{
    0%{
    }
    100%{
        transform: rotateZ(360deg);
        -webkit-transform:rotateZ(360deg);
    }
}
*/

*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.loadWrap{
/*    display: none;*/
    position: absolute;
    width: 200%;
    height: 100%;
    background-image: url(../images/loading.jpg?4);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.ani.loadWrap{
    animation: load_move 2s linear both;
    -webkit-animation: load_move 2s linear both;
}
@keyframes load_move{
    0%{
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
    100%{
        transform: translate3d(-50%,0,0);
         -webkit-transform: translate3d(-50%,0,0);
    }
}
@-webkit-keyframes load_move{
    0%{
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
    100%{
        transform: translate3d(-50%,0,0);
         -webkit-transform: translate3d(-50%,0,0);
    }
}
.loadnext{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/loadnext.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.loading{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/loading2.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: load_flash 8s linear infinite alternate;
    -webkit-animation: load_flash 8s linear infinite alternate;
}
@-webkit-keyframes load_flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0.5;
  }
}

@keyframes load_flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0.5;
  }
}
.loading1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/loading1.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.loading3{
    position: absolute;
    width: 10%;
    height: 4%;
    left: 34%;
    top: 82%;
    background-image: url(../images/loading3.gif?2);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.load_hand{
    position: absolute;
    width: 7%;
    height: 9%;
    left: 90%;
    top: 71%;
    background-image: url(../images/hand.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: flash 3s linear infinite alternate;
    -webkit-animation: flash 3s linear infinite alternate;
}
.load_click{
    position: absolute;
    width: 36%;
    height: 8%;
    left: 57%;
    top: 68%;
}
.loadtext{
    position: absolute;
    color: darkorange;
    left: 5%;
    top: 89%;
    font-size: 20px;
    font-weight:bold;
}


.page1{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.jpg?4);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p1_md{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.1.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%;
     transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
.p1_wd{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.2.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%;
     transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    opacity: 0;
}
.p1_input{
    position: absolute;
    width: 32%;
    height: 20%;
    left: 10%;
    top: 7%;
    opacity: 0;
}
.p1_canWrap{
    position: absolute;
    width: 31.7%;
    height: 19.7%;
    left: 10.4%;
    top: 7.1%;
}
.p1_selage{
    position: absolute;
    width: 33%;
    height: 4%;
    left: 44%;
    top:30.5%;
}
.p1_selpos{
    position: absolute;
    width: 33%;
    height: 4%;
    left: 44%;
    top:37.5%;
}
.p1_bq div{
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    opacity: 0;
}
.p1_gr{
     background-image: url(../images/p1.3.png?3);
}
.p1_nm{
     background-image: url(../images/p1.4.png?3);
}
.p1_jr{
     background-image: url(../images/p1.5.png?3);
}
.p1_dy{
     background-image: url(../images/p1.6.png?3);
}
.p1_gb{
     background-image: url(../images/p1.7.png?3);
}
.p1_js{
     background-image: url(../images/p1.8.png?3);
}
.p1_kj{
    background-image: url(../images/p1.9.png?3);
}
.p1_zs{
     background-image: url(../images/p1.10.png?3);
}
.p1_qy{
     background-image: url(../images/p1.11.png?3);
}
.p1_pk{
    background-image: url(../images/p1.12.png?3);
}
.p1_gx{
    background-image: url(../images/p1.13.png?3);
}
.p1_ys{
    background-image: url(../images/p1.14.png?3);
}
.p1_hand{
    position: absolute;
    width: 12%;
    height: 8%;
    left: 78%;
    top: 63%;
    background-image: url(../images/hand.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    animation: hand_flash 3s linear 3 both;
    -webkit-animation: hand_flash 3s linear 3 both;
}
@keyframes hand_flash{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@-webkit-keyframes hand_flash{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
.p1_clicks div{
    position: absolute;
    width: 23%;
    height: 6%; 
}
.p1_click1{
    left: 13%;
    top:53.5%;
}
.p1_click2{
    left: 38%;
    top:53.5%;
}
.p1_click3{
    left: 64%;
    top:53.5%;
}
.p1_click4{
    left: 13%;
    top:61%;
}
.p1_click5{
    left: 38%;
    top:61%;
}
.p1_click6{
    left: 64%;
    top:61%;
}
.p1_clicks .p1_click7{
    width: 27%;
    left: 11%;
    top:69%;
}
.p1_clicks .p1_click8{
    width: 30%;
    left: 39%;
    top:69%;
}
.p1_clicks .p1_click9{
    width: 19%;
    left: 70%;
    top:69%;
}
.p1_clicks .p1_click10{
    width: 27%;
    left: 11%;
    top:76.5%;
}
.p1_clicks .p1_click11{
    width: 27%;
    left: 39%;
    top:76.5%;
}
.p1_clicks .p1_click12{
    width: 19%;
    left: 70%;
    top:76.5%;
}

.p1_mclick{
   position: absolute;
    width: 17%;
    height: 6%;
    left: 53%;
    top: 18%;
}
.p1_wclick{
   position: absolute;
    width: 17%;
    height: 6%;
    left: 77%;
    top: 18%;
}
.p1_nextclick{
    position: absolute;
    width: 40%;
    height: 8%;
    left: 30%;
    top: 87.5%;
}
.p1_imgtip{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/movetip.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
.p1_nexttip{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/nexttip.png?3);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
.p1_ntclick{
    position: absolute;
    width: 34%;
    height: 7%;
    left: 33%;
    top: 50.8%;
}

.page3{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../images/1.gif?3);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}


.page4{
    display: none;
    position: absolute;
    width: 100%;
    height: 580%;
    background-image: url(../images/bg.jpg?2);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
}
.p4_1{
    position: absolute;
    width: 100%;
    height: 4%;
    top: 3.4%;
    left: 0%;
}
.p4_photo{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/headp.png?5);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_upimgWrap{
    position: absolute;
    width: 23.5%;
    height: 58.2%;
    top: 17.1%;
    left: 6.1%; 
    overflow: hidden;
}
.p4_upimg{
    width: 100%;
}
.p4_username{
    position: absolute;
    left: 10%;
    top:87%;
    color: white;
    font-size: 13px;
}
.p4_count{
    position: absolute;
    left: 71%;
    top: 40%;
    color: white;
    font-size: 24px;
}
.p4_2{
    position: absolute;
    width: 100%;
    height: 8%;
    top: 4.5%;
    left: 0%;
}
.p4_2w{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/sector.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_3r{
    position: absolute;
    width: 100%;
    height: 5%;
    top: 12%;
    left: 0%;
}
.p4_3rw{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/rword.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p4_rhw{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/r_hw.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#container1{
    position: absolute;
    width: 100%;
}
.p4_w1{
    position: absolute;
    width: 100%;
    height: 4%;
    top: 16.5%;
    left: 0%;
    background-image: url(../images/lead.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.p4_3{
    position: absolute;
    width: 100%;
    height: 9%;
    top: 20.4%;
    left: 0%;
}
.p4_3w{
    position: relative;
    width: 90%;
    height: 19%;
    background-image: url(../images/income.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#container3{
    position: relative;
    width: 90%;
    left: 5%;
}
.p4_4{
    position: absolute;
    width: 100%;
    height: 11%;
    top: 29%;
    left: 0%;
}
.p4_4w{
    position: relative;
    width: 90%;
    left: 5%;
    height: 48%;
    background-image: url(../images/medical.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#container4{
    position: relative;
    width: 90%;
    left: 5%;
}
.p4_5{
    position: absolute;
    width: 100%;
    height: 8.5%;
    top: 40.5%;
    left: 0%;
}
.p4_5w{
    position: relative;
    width: 90%;
    height: 28%;
    background-image: url(../images/yanglao.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#container5{
    position: relative;
    width: 90%;
    left: 5%;
}
.p4_6{
    position: absolute;
    width: 100%;
    height: 20%;
    top: 49.5%;
    left: 0%;
}
.p4_6w{
    position: relative;
    width: 90%;
    left:5%;
    height: 50%;
    background-image: url(../images/traffic.png?3);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#container6{
    position: relative;
    width: 90%;
    left: 5%;
}
.p4_7{
    position: absolute;
    width: 100%;
    height: 7.5%;
    top: 67.5%;
    left: 0%;
}
.p4_7w{
    position: relative;
    width: 90%;
    height: 30%;
    background-image: url(../images/culture.png?3);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#container7{
    position: relative;
    width: 90%;
    left:5%;
}
.saveImg{
    position: absolute;
    width: 150%;
    bottom: 0%;
    opacity: 0;
}
.p4_8{
    position: absolute;
    width: 90%;
    left: 5%;
    height: 10%;
    top: 77.5%;
    background-image: url(../images/intel.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
}
.p4_9{
    position: absolute;
    width: 100%;
    height: 4.6%;
    top: 88%;
    background-image: url(../images/endword.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
}
.p4_10{
    position: absolute;
    width: 100%;
    height: 4%;
    top: 95.5%;
    background-image: url(../images/button.png?5);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
}
.p4_hs{
    position: absolute;
    width: 100%;
    height:1.5%;
    left: 0%;
    top: 93%;
    background-image: url(../images/holdsave.png?3);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    animation: flash 4s linear infinite alternate;
    -webkit-animation: flash 4s linear infinite alternate;
}
.p4_hs1{
    position: absolute;
    width: 100%;
    height:1.5%;
    left: 0%;
    top: 93%;
    background-image: url(../images/holdsave1.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    animation: flash 4s linear infinite alternate;
    -webkit-animation: flash 4s linear infinite alternate;
}
.p4_data{
    display: none;
    position: absolute;
    width: 100%;
    height: 17.25%;
    bottom: 0%;
    background-image: url(../images/butcontent.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
}
.p4_click1{
    position: absolute;
    width: 33%;
    height: 1.3%;
    left: 15%;
    top: 95.75%;
}
.p4_click2{
    position: absolute;
    width: 33%;
    height: 1.3%;
    left: 53%;
    top: 95.75%;
}
.p4_taptip{
    position: absolute;
    width: 100%;
    height: 17.24%;
    left: 0%;
    top: 0%;
    background-image: url(../images/tip.png?3);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
}
.p4_taptip1{
    position: absolute;
    width: 100%;
    height: 17.24%;
    left: 0%;
    top: 0%;
    background-image: url(../images/tip1.png?2);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
}