html,body{
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}
.hid{
    display: none;
}
.bg_{
    position: relative;
    max-width: 1920px;
    min-width: 1200px;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
}
.frame .totla p:nth-child(4).select{
    height: 50px;
}
.totla p:hover{
    background: #1b1b1b;
    color: #ffffff;
}
.totla p:nth-child(4){
    height: 51px;

}
.logo{
    width: 486px;
    height: 254px;
    background: url(../images/logo_index.png) no-repeat;
    position: absolute;
    top: 104px;
    left: 266px;
    z-index: 9999;
    background-size: 497px 254px;
}
.frame_{
    background: url(../images/index_frame.png) no-repeat;
    width: 188px;
    height: 443px;
    background-size: 188px 443px;
}
.language{
   width: 70px;
   height: 100px;
   position: absolute;
   right: 20px;
   top: 10px; 
   z-index: 99999;
}
.language_title{
    background: url(../images/switch.png) no-repeat;
    width: 70px;
    height: 22px;
    font-size: 14px;
    color: #c5c5c5;
    text-indent: 10px;
    line-height: 22px;
    cursor: pointer;
}
.like{
    position: absolute;
    left: 960px;
    top: 105px;
}
.u_0_4 span{
    color: white!important;
}
.language_title:hover, .swith_select{
   background: url(../images/switch_hover.png) no-repeat;
    color: #a0a0a0;
}
.language ul{
    width: 100%;
    height: 44px;
    background: #1b1c1c;
    display: none;
    cursor: pointer;
}

.language ul li{
    width: 100%;
    height: 22px;
    text-indent: 10px;
    line-height: 22px;
    color: #c5c5c5;
    font-size: 14px;
}
.language ul {
    height: 70px;
}
.ad_icon{
    width: 218px;
    height: 227px;
    position: absolute;
    top: 424px;
}
.big_icon{
    background: url(../images/bg_icon.png) no-repeat;
    width: 218px;
    height: 62px;
    display: inline-block;
    margin-bottom: 10px;
}
.big_icon.app{
    background-position: 0 0;
}
.big_icon.google{
    background-position: 0 -62px;
}
.big_icon.recharge{
    background-position: 0 -124px;
}
.center{
    width: 1200px;
    height: 100%;
    top: 0;
    left: 50%;
    margin-left: -600px;
    position: relative;
    z-index: 9999;
}
.video{
    position: absolute;
    width: 139px;
    height: 139px;
    background: url(../images/icon_img.jpg) no-repeat;
    top: 493px;
    left: 236px;
}
.video_btn{
    background: url(../images/video_btn.png) no-repeat;
    width: 60px;
    height: 60px;
    display: inline-block;
    position: absolute;
    left: 50%;
    margin-left: -30px;
    top: 50%;
    margin-top: -30px;
}
.main{
    position: absolute;
    top: 652px;
    width: 100%;
}
.static{
    width: 369px;
    height: 292px;
    float: left;
}
.news_item{
    width: 526px;
    height: 278px;
    background: #171717;
    float: left;
    padding: 10px 26px;
    position: relative;
    overflow: hidden;
}
.news_title{
    width: 503px;
    height: 40px;
    border-bottom: 1px solid #333638;
    margin-right: 10px;
}
.news_title a{
    display: inline-block;
    width: 96px;
    height: 100%;
    line-height: 40px;
    float: left;
    font-size: 16px;
    color: #a3a3a3;
    cursor: pointer;
}
.news_title a:hover{
    color: #ffffff;
}
.news_title .has{
    color: #ffffff;
}
.new_big_title{
    width: 100%;
    height: 227px;
    position: relative;
    overflow: hidden;
}
.headline{
    font-size: 20px;
    color: #ffffff;
    margin-top: 16px;
    width: 500px;
}
.new_big_title ul{
    width: 553px;
    height: 151px;
    margin-top: 7px;
    margin-left: 0px;
    /*display: none;*/
    float: left;
    overflow: hidden;
}
/*.new_big_title ul.show{
    display: block;
}*/
.new_big_title ul li{
    margin-bottom: 15px;
    width: 500px;
    height: 17px;
}
.new_big_title ul li i{
    background: url(../images/i_icon.png) no-repeat;
    width: 10px;
    height: 10px;
    display: inline-block;
    float: left;
    margin-right: 10px;
    position: relative;
    top: 3px;
}
.new_big_title ul li p{
    font-size: 14px;
    color: #a3a3a3;
    float: left;
    width: 418px;
    height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.new_big_title ul li .date{
    position: relative;
    display: inline-block;
    float: right;
    width: auto;
}
.page_img{
    position: absolute;
    width: 38px;
    height: 38px;
    right: 0px;
    top: 0;
}
.main .blank{
    width: 235px;
    height: 292px;
    float: left;
    background: white;
}
.two_title{
    width: 164px;
    height: 39px;
    position: absolute;

    top: 71px;
    left: 369px;
}
.swiper-container_two{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.swiper-container_two img{
    width: 83%;
    height: 87%;
    margin: 37px 33px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}
.swiper-slide .mask_{
    width: 325px;
    height: 566px;
    background: black;
    opacity: 0.5;
    position: absolute;
    left: 32px;
    top: 37px;
}
.swiper-container_two .swiper-slide.swiper-slide-active .mask_{
    animation:smooth 0.4s linear forwards;
    -webkit-animation:smooth 0.4s linear forwards;
    -moz-animation:smooth 0.4s linear forwards;
    -o-animation:smooth 0.4s linear forwards;
    -ms-animation:smooth 0.4s linear forwards;
}
@keyframes smooth{
    0%{
         background: black;
    }
    100%{
         background: transparent;
    }
}
@-webkit-keyframes smooth{
    0%{
         background: black;
    }
    100%{
         background: transparent;
    }
}
.swiper-container_two .swiper-slide{
    width: 390px;
    height: 650px;

}
.swiper-container_two .swiper-slide.swiper-slide-active{
    background: url(../images/img_border.png) center center no-repeat;
    background-size: 395px 639px;
}
#certify{
    position: relative;
    width: 730px;
    margin: 160px auto;
}
#certify .swiper-button-prev{
    background-position: 0 -279px;
    width: 63px;
    height: 48px;
    left: -172px;
}
#certify .swiper-button-next{
    background-position: -62px -279px;
    width: 63px;
    height: 48px;
    right: -160px;
}
.three_title{
    width: 163px;
    height: 38px;
    position: absolute;
    /*left: 368px;*/
    top: 96px;
}
.occupation_btn{
    top: 186px;
    /*left: 368px;*/
    position: absolute;
    z-index: 80;
}
.oc_title{
    width: 148px;
    top: 39px;
    left: 272px;
    position: absolute;
}
.occupation_btn ul li{
    margin-right: 28px;
    float: left;
    cursor: pointer;
}
.occupation_btn ul{
    width: 620px;
}
.occupation_btn ul li a{
    background: url(../images/occupation_btn.png) left top no-repeat;
    width: 74px;
    height: 74px;
    display: block;
    cursor: pointer;
}
.occupation_btn ul li.zs a {
    background-position: 0 0px;
}
.occupation_btn ul li.ymr a {
    background-position: -74px 0px;
}
.occupation_btn ul li.sz a {
    background-position: -148px 0px;
}
.occupation_btn ul li.fs a {
    background-position: -222px 0px;
}
.occupation_btn ul li.hqs a {
    background-position: -296px 0px;
}
.occupation_btn ul li.qxz a {
    background-position: -370px 0px;
}
.occupation_btn ul  .zs.active a{
    background-position: 0 -74px; 
}
.occupation_btn ul  .ymr.active a{
     background-position: -74px -74px;
}
.occupation_btn ul  .sz.active a{
  background-position: -148px -74px;
}
.occupation_btn ul  .fs.active a{
  background-position: -222px -74px; 
}
.occupation_btn ul  .hqs.active a{
   background-position: -296px -74px;
}
.occupation_btn ul  .qxz.active a{
   background-position: -370px -74px;
}
.occupation_btn ul  .zs a:hover{
   background-position: 0 -74px; 
}
.occupation_btn ul  .ymr a:hover{
    background-position: -74px -74px;
}   
.occupation_btn ul  .sz a:hover{
   background-position: -148px -74px;
}
.occupation_btn ul  .fs a:hover{
   background-position: -222px -74px; 
}
.occupation_btn ul  .hqs a:hover{
   background-position: -296px -74px;
}
.occupation_btn ul  .qxz a:hover{
   background-position: -370px -74px;
}
.role_little{
    width: 870px;
    height: 124px;
    top: 304px;
    /*left: 370px;*/
    position: absolute;
}
.role_little ul{
    width: 620px;
}
.role_little ul li a.active{
    width: 58px;
    height: 58px;
    border: 3px solid #1e8163;
    display: inline-block;
}
.role_little.zs ul li:nth-child(2) a.active, .role_little.zs ul li:nth-child(3) a.active{
    margin-left: 3px;
}
.role_little.zs ul li:nth-child(5) a.active{
    margin-left: 4px;
}
.role_little.qxz ul li:nth-child(4) a.active{
    margin-left: 5px;
}
.role_little.qxz ul li:nth-child(5) a.active{
    margin-left: 4px;
}
.role_little.zs ul li{
    background: url(../images/zs/zs_role_litile.png) left top no-repeat;
    width: 64px;
    height: 83px;
    display: block;
    cursor: pointer;
}
.role_little.ymr ul li{
    background: url(../images/ymr/zs_role_litile.png) left top no-repeat;
    width: 64px;
    height:86px;
    display: block;
    cursor: pointer;
}
.role_little.sz ul li{
    background: url(../images/sz/zs_role_litile.png) left top no-repeat;
    width: 64px;
    height: 83px;
    display: block;
    cursor: pointer;
}
.role_little.fs ul li{
    background: url(../images/fs/zs_role_litile.png) left top no-repeat;
    width: 64px;
    height: 83px;
    display: block;
    cursor: pointer;
}
.role_little.hqs ul li{
    background: url(../images/hqs/zs_role_litile.png) left top no-repeat;
    width: 64px;
    height: 83px;
    display: block;
    cursor: pointer;
}
.role_little.qxz ul li{
    background: url(../images/qxz/zs_role_litile.png) left top no-repeat;
    width: 64px;
    height: 83px;
    display: block;
    cursor: pointer;
}
.role_little ul li:nth-child(1){
    background-position: 0px 0px;
}
.role_little ul li:nth-child(2){
    background-position: -64px 0px;
}
.role_little ul li:nth-child(3){
   background-position: -128px 0px;
}
.role_little ul li:nth-child(4){
     background-position: -192px 0px;
}
.role_little ul li:nth-child(5){
    background-position: -256px 0px;
}
.role_little.zs ul li:nth-child(5){
    width: 72px;
}
.role_little.zs ul li:nth-child(2){
     width: 70px;
     background-position: -64px 0px;
}
.role_little.zs ul li:nth-child(3){
    width: 68px;
}
.role_little.zs ul li:nth-child(3){
   background-position: -143px 0px;
}
.role_little.zs ul li:nth-child(4){
    background-position: -220px 0px;
}
.role_little.zs ul li:nth-child(5){
     background-position: -287px 0px;
}
.role_little.qxz ul li:nth-child(4){
    width: 72px;
}
.role_little.qxz ul li:nth-child(5){
    width: 72px;
    background-position: -266px 0px;
}
.role_little ul li{
    margin-right: 28px;
    float: left;
}
.title_{
    width: 100%;
    height: 74px;
    text-align: center;
    position: absolute;
    top: 60px;
    opacity: 0;
}
.title{
    /*left: 372px;*/
    top: 435px;
    position: absolute;
}
.title_des{
    font-size: 30px;
    color: #f3e0b8;
   /* margin-left: 272px;
    margin-top: 20px;*/
    position: absolute;
    top: 20px;
    left: 272px;
}
.branch{
    width: 500px;
    /*left: 371px;*/
    top: 527px;
    position: absolute;
}
.txt{
    font-size: 14px;
    color: #bababa;
    width: 591px;
    /*left: 372px;*/
    top: 710px;
    position: absolute;
}
.txt p{
    line-height: 23px;
    word-wrap: break-word;
    text-align: justify;
}
.role{
    top: -34px;
    right: -171px;
    position: absolute;
    z-index: 77;
}
.role.sz {
    top: 31px;
}
.role.zs{
    top: 31px;
}
.role.ymr{
    top: 12px;
}
.role.fs{
    /*top: -138px;*/
}
.role.hqs{
    margin-top: 74px;
}
.role.hqs img{
    /*width: 800px;*/
}
.role.hqs img{
    /*width: 800px;*/
}
.occupation_tab_com .role.fs .zs_char_one{
    margin-top: -72px;
}
.occupation_tab_com .role.hqs .zs_char_one{
    margin-top: -73px;
}
/*.occupation_btn ul  .zs a:hover{
   background-position: 0 0; 
}
.occupation_btn ul  .ymr a:hover{
    background-position: -74px 0;
}
.occupation_btn ul  .sz a:hover{
   background-position: -148px 0;
}
.occupation_btn ul  .fs a:hover{
   background-position: -222px 0; 
}
.occupation_btn ul  .hqs a:hover{
   background-position: -296px 0;
}
.occupation_btn ul  .qxz a:hover{
   background-position: -370px 0;
}*/

.occupation_tab_com.active{
    display: block;
}
.occupation_tab_com{
    display: none;
}
.occupation_tab{
    position: relative;
}
.wamp .architecture {
    position: absolute;
}
.architecture.grassland {
    left: 210px;
    top: 620px;
}
.architecture a {
    display: block;
}
.architecture.grassland a {
    width: 365px;
    height: 329px;
}
.architecture.grassland i {
    left: 140px;
    bottom: 44px;
}
.architecture i {
    position: absolute;
    background: url(../images/build_title.png) left top no-repeat;
    width: 96px;
    height: 36px;
    color: #990000;
    font-size: 16px;
    text-align: center;
    line-height: 36px;
}
.architecture.grassland a.active {
    background: url(../images/build/dead.png) left top no-repeat;
    margin-top: -1px;
}
.architecture.warehouse a.active {
    background: url(../images/build/depot.png) left top no-repeat;
    margin-top: -1px;
}
.architecture.pub a.active {
    background: url(../images/build/tarven.png) left top no-repeat;
    margin-top: -1px;
}
.architecture.castle a.active {
    background: url(../images/build/town.png) left top no-repeat;
    margin-top: -1px;
}
.architecture.arena a.active {
    background: url(../images/build/arena.png) left top no-repeat;
    margin-top: -1px;
}
.architecture.market a.active {
    background: url(../images/build/market.png) left top no-repeat;
    background-size: 363px 375px;
    margin-top: -1px;
    
}
.architecture.workshop a.active {
    background: url(../images/build/workshop.png) left top no-repeat;
    margin-top: -1px;
    
}
.architecture.manor a.active {
    background: url(../images/build/manor.png) left top no-repeat;
    margin-top: -1px;
}
.architecture.warehouse {
    left: 296px;
    top: 310px;
}
.architecture.warehouse a {
    width: 439px;
    height: 539px;
}
.architecture.warehouse i {
    left: 275px;
    bottom: 48px;
}
.architecture.pub {
    left: 498px;
    top: 319px;
}
.architecture.pub a {
    width: 465px;
    height: 431px;
}
.architecture.pub i{
    left: 262px;
    bottom: 33px;
}
.architecture.castle {
    left: 685px;
    top: -13px;
}
.architecture.castle a {
    width: 308px;
    height: 284px;
}
.architecture.castle i {
    left: 100px;
    bottom: 12px;
}
.architecture.arena {
    left: 1129px;
    top: 117px;
}
.architecture.arena a {
    width: 277px;
    height: 184px;
}
.architecture.arena i {
    left: 90px;
    bottom: 11px;
}
.architecture.market {
    left: 1047px;
    top: 377px;
}
.architecture.market a {
    width: 363px;
    height: 374px;
}
.architecture.market i {
    left: 136px;
    bottom: 43px;
}
.architecture.workshop {
    left: 1259px;
    top: 418px;
}
.architecture.workshop a {
    width: 330px;
    height: 399px;
}
.architecture.workshop i {
    left: 87px;
    bottom: 49px;
}
.architecture.manor {
    left: 1410px;
    top: 358px;
}
.architecture.manor a {
    width: 408px;
    height: 581px;
}
.architecture.manor i {
    left: 140px;
    bottom: 53px;
}
.architecture .tet_fl {
    position: absolute;
    background: url(../images/tet_fl.png) left top no-repeat;
    width: 172px;
    height: 174px;
    padding: 8px;
    z-index: 3;
    display: none;
}
.architecture .tet_fl h4 {
    color: #a63232;
    font-weight: normal;
    padding-top: 6px;
    font-size: 16px;
}
.architecture .tet_fl h4:nth-child(3){
    padding-top: 4px;
    margin-bottom: 7px;
}
.architecture .tet_fl h4:nth-child(1){
    padding-top: 13px;
    margin-bottom: 7px;
}
.architecture .tet_fl p {
    color: #ffffff;
    font-size: 13px;
    line-height: 15px;
    word-wrap: break-word;
    text-align: justify;
}
.architecture.castle .tet_fl{
    right: -76px;
    top: 115px;
}
.architecture.arena .tet_fl{
    right: -97px;
    top: 15px;
}
.architecture.market .tet_fl{
    top: 173px;
    left: -55px;
}
.architecture.workshop .tet_fl{
    right: 249px;
    top: 193px;
}
.architecture.manor .tet_fl{
    right: 269px;
    top: 422px;
}
.architecture.pub .tet_fl{
    right: -89px;
    top: 241px;
}
.architecture.warehouse .tet_fl{
    right: -123px;
    top: 454px;
}
.architecture.grassland .tet_fl{
    right: -63px;
    top: 162px;
}
.architecture.pub{
    z-index: 88;
}
.architecture.warehouse{
    z-index: 99;
}
.architecture.grassland{
    z-index: 100;
}
.architecture.pub .tet_fl{
    background: url(../images/big_tel.png) left top no-repeat;
    width: 173px;
    height: 196px;
    background-size: 187px 206px;
}
.architecture.pub .tet_fl h4{
    padding-top: 18px;
}
.wamp{
    margin: 0 auto;
    width: 100%;
    height: 100%;
    top: 0;
    left: 50%;
    margin-left: -960px;
    position: relative;
}
.close_btn_{
    display: inline-block;
    background: url(../images/close_btn_.png) no-repeat;
    width: 62px;
    height: 63px;
    position: absolute;
    top: 30px;
    right: 0;
}
@media screen and (min-width: 1200px) and (max-width:1600px){

    .three_center{
        width: 1200px;
        height: 100%;
        top: -51px;
        left: 50%;
        margin-left: -600px;
        position: relative;
        z-index: 9999;
    }
  /*  .architecture.manor {
        left: 1259px;
        top: 408px;
    }
    .architecture.workshop {
        left: 1122px;
        top: 462px;
    }
    .architecture.market {
        left: 931px;
        top: 425px;
    }
    .architecture.arena {
        left: 1010px;
        top: 192px;
    }
    .architecture.castle {
        left: 605px;
        top: 76px;
    }
    .architecture.pub {
        left: 437px;
        top: 373px;
    }
    .architecture.warehouse {
        left: 255px;
        top: 364px;
    }
    .architecture.grassland {
        left: 178px;
        top: 644px;
    }*/
}
.bg3{
    background: url(../images/bg_three.png) 50% top no-repeat;
    background-size: cover;
}
.bg2{
    background: url(../images/bg_two.png) 50% top no-repeat;
    background-size: cover;
}
.bg4{
    width: 1920px;
    height: 1080px;
    position: absolute;
    top: -95px;
    left: 50%;
    margin-left: -960px;
    z-index: 0;
}