@charset "utf-8";

html { cursor: default;}
h1, h2, h3, h4, h5, h6,p, li, label, td, th {cursor: text;}
a:link, a:visited, a:hover, a:active { cursor: pointer;}
body{width:100%;margin:0; padding:0; font-size:12px; font-family:"微软雅黑",Arial, Helvetica, sans-serif;background-color: #fff;color: #333;overflow-x: hidden;}
div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,textarea,table,td{ margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
area{outline:none;}
img{ border:0;outline: none;}
ol,ul{list-style:none;}
a{ font-family:"微软雅黑",Arial, Helvetica, sans-serif;text-decoration:none;outline:none;}
a:hover{ text-decoration:none;}
.clearfix:after {content:"";display:block;height:0;clear:both;}
.clearfix {zoom:1;}
.vedio-box{position: absolute;left: 50%;margin-left: -960px;top:0;width: 1920px;height: 100%;z-index: 3333;}
.menu{
    width: 58px;
    height: 272px;
    position: fixed;
    right: 22px;
    top: 25%;
    z-index: 200;
}
.nav_top{
    width: 38px;
    height: 80px;
    margin: 0 auto;
    background: url(../images/nav_top.png) no-repeat;
    cursor: pointer;
}
.menu ul{
    width: 32px;
    margin: 0 auto;
}
.menu ul li{
    width: 32px;
    height: 38px;
    background: url(../images/nav_bar.png) no-repeat;
    cursor: pointer;
}
.menu ul li.on{
    background: url(../images/nav_bar_h.png) no-repeat;
}
.mouse_tip{
    width: 58px;
    height: 113px;
    margin: 0 auto;
    background: url(../images/mouse_tip.png) no-repeat;
}
.btn-video{display: block;margin-left:-16px;margin-top:-10px;width:90px;height: 89px;background: url(../images/btn-video.png);}
.wrap{
    width: 100%;
    min-width: 1200px;
    position: relative;
}
.page01{
    position: relative;
    width: 100%;
    height: 1086px;
    margin: 0 auto;
    overflow: hidden;
    background: url(../images/coverbg_01.jpg) center no-repeat;
}
.container{
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
.slogan{
    width: 502px;
    height: 588px;
    background: url(../images/slogan.png) no-repeat center top;
    position: absolute;
    top: 109px;
    right: 34px;
    z-index: 100;
}
.sec1_bt{
    width: 1920px;
    height: 295px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -960px;
    background: url(../images/sec1_bt.png) center no-repeat;
    z-index: 100;
}
.parallax_box {
    position: absolute;
    top:0px;
    left: 50%;
    margin-left: -1010px;
    width: 2020px;
    height: 1180px;
}
.content_box {
    width: 2020px;
    height: 1180px;
    position: absolute;
    bottom: 0px;
    left: 0px;
}
.content_box .pa_bj{
    width: 100%;
    height: 100%;
    background: url(../images/pa_bg321.jpg) no-repeat;
    position: absolute;
    top: -80px !important;
    left: 0px !important;
    z-index: 10;
}
.content_box .pa_rw{
    width: 100%;
    height: 100%;
    background: url(../images/pa_rw321.png) no-repeat;
    position: absolute;
    bottom: 34px !important;
    left: 39px !important;
    z-index: 30;
}
.content_box .pa_gc{
    width: 100%;
    height: 100%;
    background: url(../images/pa_hua321.png) no-repeat;
    position: absolute;
    top: -70px !important;
    left: 0px !important;
    z-index: 20;
}
.zx_logo{
    width: 179px;
    height: 115px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/logo.png) no-repeat;
    z-index: 100;
}

/*.zx_logo{
    width: 139px;
    height: 71px;
    position: absolute;
    top: 50px;
    left: 24px;
    background: url(../images/zxlogo321.png) no-repeat;
    z-index: 100;
}*/

.zx_logo a{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.page01 .container{
    width: 1200px;
    height: 392px;
    padding-top: 609px;
    position: relative;
}
.dowaload_box{
    width: 640px;
    height: 158px;
    z-index: 120;
    background: url(../images/dowaload_box_bg.png);
    position: absolute;
    top:770px;
    left: 50%;
    margin-left: -320px;
    padding-top: 36px;
}
.erwei_box{
    width: 170px;
    height: 138px;
    float: left;
    margin-left: 55px;
    margin-top: -2px;
}
.game_down{
    width: 173px;
    height: 138px;
    float: left;
}
.game_down .ios_down{
    display: block;
    width: 173px;
    height: 59px;
    margin-bottom: 6px;
    background: url(../images/app_btn.jpg) no-repeat;
}
.game_down .ios_down:hover{background-image: url(../images/app_btn_hov.jpg);}
.game_down .android_down{
    display: block;
    width: 173px;
    height: 59px;
    background: url(../images/android_btn.jpg) no-repeat;
}
.game_down .android_down:hover{background-image: url(../images/android_btn_hov.jpg);}
.desk_btn{
    width: 61px;
    height: 122px;
    float: left;
    margin-left: 12px;
    background: url(../images/desk_btn.jpg) no-repeat;
}
.desk_btn:hover{background-image: url(../images/desk_btn_hov.jpg);}
.zx_btn{
    display: block;
    width: 98px;
    height: 122px;
    float: left;
    margin-left: 12px;
    background: url(../images/zx_btn.jpg) no-repeat;
}
.zx_btn:hover{
    background: url(../images/zx_btn_hov.jpg) no-repeat;
}
/*绗簩椤�*/
.page02{
    width: 100%;
    height: 1082px;
    margin: 0 auto;
    background: url(../images/coverbg_02.jpg) center no-repeat;
}
.page02 .container{
    width: 1200px;
    height: 1012px;
    padding-top: 68px;
    position: relative;
}
.title02{
    width: 934px;
    height: 113px;
    margin: 30px auto 0;
    background: url(../images/title04.png) no-repeat;
}
.wtip{
    display: block;
    width: 688px;
    height: 260px;
    margin: 0 auto;
    margin-top: 40px;
    background: url(../images/wtip_515.png) no-repeat;
}
/*绂忓埄娲诲姩*/
.hot_link{
    width:1098px;
    height: 662px;
    margin: 0 auto;
    margin-top: 80px;
    position: relative;

}
.hot_link a{
    display: block;
    width: 155px;
    height: 254px;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    position: relative;
    float: left;
    margin:0  14px;
}
.hot_link a.hotlink01{
    /*position: absolute;
    top: 0;
    left: 0;*/
}
.hot_link a .pic2{
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
}
.hot_link a .pic2{
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateY(-180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;/*z-index:10;
    position:absolute;*/
}
.hot_link a .pic1{
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.hot_link a:hover .pic1{

    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);

}
.hot_link a:hover .pic2{
    -webkit-transform:rotateX(0deg) rotateY(0deg);
    -moz-transform:rotateX(0deg) rotate(0deg);
    z-index: 10;
    position: absolute;
}
.hot_link a.hotlink02{
  /*  position: absolute;
    top: 0;
    left: 183px;*/
}
.hot_link a.hotlink03{
   /* position: absolute;
    top: 0;
    left: 365px;*/
}
.hot_link a.hotlink04{
   /* position: absolute;
    top: 0;
    left: 546px;*/
}
.hot_link a.hotlink05{
  /*  position: absolute;
    top: 0px;
    left: 728px;*/
}
.hot_link a.hotlink06{
    position: absolute;
    top: 0px;
    left: 910px;
}

/*绗笁椤�*/
.page03{
    width: 100%;
    height: 984px;
    margin: 0 auto;
    background: url(../images/coverbg_03.jpg) center no-repeat;
}.page03 .container{
     width: 1200px;
     height: 1012px;
     padding-top: 68px;
     position: relative;
 }
.title03{
    width: 934px;
    height: 113px;
    margin: 40px auto 0;
    background: url(../images/title02.png) no-repeat;
}
/*杞挱*/
.game_slide{
    width: 1006px;
    height: 552px;
    padding-top: 20px;
    margin: 0 auto;
    margin-top: 50px;
    position: relative;
    background: url(../images/slide_bg.png) no-repeat;
}
.slideBox{
    width: 964px;
    height: 534px;
    margin: 0 auto;
    position: relative;
}
.slideBox .hd{
    width: 240px;
    height: 38px;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    margin-left: -120px;
    bottom: -60px;
    z-index: 100;
}
.slideBox .hd ul li{
    float: left;
    width: 38px;
    height: 38px;
    margin: 0 10px;
    cursor: pointer;
}
.slideBox .hd ul li span{
    display: block;
    width: 38px;
    height: 38px;

}
.slideBox .hd ul li span{
    background: url(../images/dot.png) center no-repeat;
}
.slideBox .hd ul li.on span{
    background: url(../images/doth.png) center no-repeat;
}
.slideBox .bd{
    width: 964px;
    height: 534px;
    margin: 0 auto;
}
.slideBox .bd ul{
    width: 964px;
    height: 534px;
    margin: 0 auto;
    position: relative;
}
.slideBox .bd ul li{
    width: 964px;
    height: 534px;
    text-align: center;
    position: relative;
}
/*绗洓椤�*/
.page04{
    width: 100%;
    height: 1650px;
    margin: 0 auto;
    background: url(../images/coverbg_04.jpg) top center no-repeat;
    overflow: hidden;
}.page04 .container{
     width: 1200px;
     height: 1012px;
     padding-top: 98px;
     position: relative;
 }
.title04{
    width: 934px;
    height: 113px;
    margin: 0 auto;
    background: url(../images/title03.png) no-repeat;
}
.slideBox2{
    width: 1200px;
    height: 990px;
    margin: 0 auto;
    position: relative;
}
.slideBox2 .hd{
    width: 612px;
    height: 68px;
    position: absolute;
    left: 50%;
    margin-left: -306px;
    bottom: 120px;
    z-index: 200;
}
.slideBox2 .hd ul li{
    float: left;
    width: 68px;
    height: 68px;
    margin: 0 4px;
    cursor: pointer;
}
.slideBox2 .hd ul li span{
    display: block;
    width: 68px;
    height: 68px;
    transition:All 0.4s ease-in-out;
    -webkit-transition:All 0.4s ease-in-out;
    -moz-transition:All 0.4s ease-in-out;
    -o-transition:All 0.4s ease-in-out;
}
.slideBox2 .hd ul li span:hover{
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}
.slideBox2 .hd ul li.jobdoth00 span{
    display: block;
    width: 68px;
    height: 68px;
    background: url(../images/dot01.png) center no-repeat;
}
.slideBox2 .hd ul li.jobdoth01 span{
    display: block;
    width: 68px;
    height: 68px;
    background: url(../images/dot2_1.png) center no-repeat;
}
.slideBox2 .hd ul li.jobdoth02 span{
    display: block;
    width: 68px;
    height: 68px;
    background: url(../images/dot2_2.png) center no-repeat;
}
.slideBox2 .hd ul li.jobdoth03 span{
    display: block;
    width: 68px;
    height: 68px;
    background: url(../images/dot2_3.png) center no-repeat;
}
.slideBox2 .hd ul li.jobdoth04 span{
    display: block;
    width: 68px;
    height: 68px;
    background: url(../images/dot2_4.png) center no-repeat;
}
.slideBox2 .hd ul li.jobdoth05 span{
    display: block;
    width: 68px;
    height: 68px;
    background: url(../images/dot2_5.png) center no-repeat;
}
.slideBox2 .hd ul li.jobdoth06 span{
    display: block;
    width: 68px;
    height: 68px;
    background: url(../images/dot2_6.png) center no-repeat;
}
.slideBox2 .hd ul li.jobdoth07 span{
    display: block;
    width: 68px;
    height: 68px;
    background: url(../images/dot2_7.png) center no-repeat;
}
.slideBox2 .hd ul li.jobdoth00.on span{
    background: url(../images/doth01.png) center no-repeat;
}
.slideBox2 .hd ul li.jobdoth01.on span{
    background: url(../images/doth2_1.png) center no-repeat;
}
.slideBox2 .hd ul li.jobdoth02.on span{
    background: url(../images/doth2_2.png) center no-repeat;
}
.slideBox2 .hd ul li.jobdoth03.on span{
    background: url(../images/doth2_3.png) center no-repeat;
}
.slideBox2 .hd ul li.jobdoth04.on span{
    background: url(../images/doth2_4.png) center no-repeat;
}
.slideBox2 .hd ul li.jobdoth05.on span{
    background: url(../images/doth2_5.png) center no-repeat;
}
.slideBox2 .hd ul li.jobdoth06.on span{
    background: url(../images/doth2_6.png) center no-repeat;
}
.slideBox2 .hd ul li.jobdoth07.on span{
    background: url(../images/doth2_7.png) center no-repeat;
}


.slideBox2 .bd ul{
    width: 1200px;
    height: 990px;
    position: relative;
}
.slideBox2 .bd ul li{
    width: 1200px;
    height: 990px;
    position: relative;
}
.slideBox2 .bd ul li .bing{
    width: 588px;
    height: 588px;
    background: url(../images/job_bing.png) no-repeat;
    position: absolute;
    top: 106px;
    left: 0;
}
.slideBox2 .bd ul li .job_tx01{

    position: absolute;
    top: 196px;
    left: 136px;
    z-index: 10;
}

.slideBox2 .bd ul li .job_tx02{

    position: absolute;
    top: 490px;
    left: 136px;
    z-index: 10;
}
.slideBox2 .bd ul li.job01 .job_role{
    width: 1532px;
    height: 951px;
    position: absolute;
    top: -26px;
    right: -372px;
    z-index: 10;
}
.role_btn{
    display: block;
    width: 107px;
    height: 107px;
    position: absolute;
    top: 614px;
    left: 234px;
    z-index: 210;
    background: url(../images/role_more.png) no-repeat;
}
.role_btn:hover{
    background: url(../images/role_more_h.png) no-repeat;
}
.sec4_bt{
    width: 1920px;
    height: 760px;
    background: url(../images/sec4_bt.png) center top no-repeat ;
    position: absolute;
    left: 50%;
    margin-left: -960px;
    bottom: 0px;
    z-index: 100;
}
.sec4_bt .zx_btn2{
    display: block;
    width: 412px;
    height: 102px;
    background: url(../images/zx_btn2.png) no-repeat;
    margin: 0 auto;
    margin-top: 350px;
}
.health {
    width: 100%;
    margin: 0 auto;
    margin-top: 200px;
    text-align: center;
    margin-bottom: 40px;
}
.health h1 {
    font-size: 24px;
    font-weight: bold;
    color: #464646;
    margin-bottom: 10px;
}
/*寮圭獥*/
.prompt{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: url(../images/opa8.png) repeat;
    display: none;
    z-index: 100;
}
.prompt.on{
    display: block;
}
.pop01{
    width: 1009px;
    height: 459px;
    background: url(../images/pop01_515.png) no-repeat;
    position: fixed;
    top: 50%;
    margin-top: -230px;
    left: 50%;
    margin-left: -494px;
    z-index: 200;
    display: none;
}
.pop02{
    width: 903px;
    height: 475px;
    background: url(../images/pop02_515.png) no-repeat;
    position: fixed;
    top: 50%;
    margin-top: -220px;
    left: 50%;
    margin-left: -515px;
    z-index: 200;
    display: none;
}
.pop03{
    width: 971px;
    height: 566px;
    background: url(../images/pop03_515.png) no-repeat;
    position: fixed;
    top: 50%;
    margin-top: -245px;
    left: 50%;
    margin-left: -458px;
    z-index: 200;
    display: none;
}
.pop03 .gift_btn{
    display: block;
    width: 206px;
    height: 56px;
    background: url(../images/opa0.png) repeat;
    position: absolute;
    top: 384px;
    left: 282px;

}
.pop04{
    width: 1026px;
    height: 627px;
    background: url(../images/pop04_515.png) no-repeat;
    position: fixed;
    top: 50%;
    margin-top: -300px;
    left: 50%;
    margin-left: -458px;
    z-index: 200;
    display: none;
}
.pop05{
    width: 903px;
    height: 486px;
    background: url(../images/pop05_515.png) no-repeat;
    position: fixed;
    top: 50%;
    margin-top: -233px;
    left: 50%;
    margin-left: -510px;
    z-index: 200;
    display: none;
}
.pop06{
    width: 970px;
    height: 573px;
    background: url(../images/pop06.png) no-repeat;
    position: fixed;
    top: 50%;
    margin-top: -286px;
    left: 50%;
    margin-left: -475px;
    z-index: 200;
    display: none;
}
.closebtn{
    width: 76px;
    height: 76px;
    position: absolute;
    top: 24px;
    left: 0;
    background: url(../images/opa0.png) repeat;
}

.pop02 .closebtn{
    top: 44px;
}

.pop03 .closebtn{
    top: 70px;
}

.pop04 .closebtn{
    top: 130px;
}

.pop05 .closebtn{
    top: 100px;
}
.version-box{position: absolute;top:644px;right: 190px;width: 321px;height: 72px;background: url(../images/version-bg.png) no-repeat center;}
.version-box p{position: absolute;bottom: -25px;left: 0;width: 100%;text-align: center;font-size: 16px;color: #fff;}
.version-box a{display: block;width: 72px;height: 72px;position: absolute;top:0;}
.version-box a.version-tab1{left:0;background: url(../images/version-tab1.png);}
.version-box a.version-tab1.cur{background-image: url(../images/version-tab1-hov.png);  z-index: 1}
.version-box a.version-tab2{left:125px;background: url(../images/version-tab2.png);}
.version-box a.version-tab2.cur{background-image: url(../images/version-tab2-hov.png);}
.moveRight{animation:moveRight 0.3s linear both;}
.moveLeft{animation:moveLeft 0.3s linear both;}
.version-box .parent{ height: 72px; top:0; margin-left: 59px;width: 197px}

@keyframes moveRight{

  100%{left: 125px;}
}
@keyframes moveLeft{
  100%{left: 0}
}
.share-box{position: absolute;top:50px;right: 45px;height: 30px;line-height: 30px;padding: 0 20px;background: rgba(255,255,255,0.3);border-radius: 15px;font-size: 12px;color: #deedff;}
.share-box a,.share-box span{float: left;}
.share-box a {margin-left: 5px;margin-top: 4px;position: relative;}
.share-box a img{width: 23px;height: 22px;}
.share-box a.share-wx:hover .share-code{display: block;}
.share-code{display:none;position: absolute;top:24px;left: -35px;width: 100px;height: 100px;}
.share-box .share-code img{width: 100px;height: 100px;}
#bgm{position: absolute;top:36px;right: 233px;width: 20px;height: 20px;z-index: 33;display: block;}
.equalizer {
    
    display: block;
    text-align: center;
    width: 25px;
    height: 20px;
    margin: 0 auto 0;
    padding-top: 18px;
    line-height: 20px; }
  .equalizer b {
      width: 3px;
      background: #deedff;
      display: inline-block;
      vertical-align: bottom;
      height: 12px;
      -webkit-animation-duration: 3s;
      animation-duration: 3s;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      margin: 0 2px;
      -webkit-animation-name: up-and-down;
      animation-name: up-and-down;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out; }
    .equalizer b:nth-child(1) {
        animation-delay: -0.4s;
        height: 10px; }
    .equalizer b:nth-child(2) {
        animation-delay: -0.8s;
        height: 20px; }
    .equalizer b:nth-child(3) {
        animation-delay: -1.2s;
        height: 15px; }
    
    .pause .equalizer b {
    -webkit-animation: none;
    animation-name: none; }
    @keyframes up-and-down {
  0%, 100% {
    height: 20px; }
  10% {
    height: 12px; }
  20% {
    height: 16px; }
  30% {
    height: 10px; }
  40% {
    height: 8px; }
  50% {
    height: 18px; }
  60% {
    height: 16px; }
  70% {
    height: 20px; }
  80% {
    height: 14px; }
  90% {
    height: 12px; } }
.pop-video{display: none;background-color: #222222;width: 1000px;height: 600px;}
.pop-video-close{position: absolute;right: -58px;top:0;width: 58px;height: 58px;background: url(../images/pop-close.png);}