/*网页的全局样式 盗模板死全家，v.lr51819,解决兼容问题*/
body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,tr,td,form,input,select,textarea,span,img,a,em,strong,*{ margin:0; padding:0;box-sizing: border-box;-webkit-tap-highlight-color:transparent;}
ul,ol,li{ list-style:none;}
h1,h2,h3,h4,h5,h6{ font-weight:normal; font-size:12px;}
img{ border:none; vertical-align:middle;width: 100%;}
a{ text-decoration:none;cursor: pointer; color: #8cbbce}
a:hover {    color: #64cef9;}
input,select,textarea { outline: none; }
em, s, i { font-style: normal; text-decoration:none;}

.wrap {       background: url(../image/bg.jpg) no-repeat #07122e; max-width: 1920px;margin: 0 auto;width: 100%;}
.topwrap { height: 100vh;background: url(../image/h_bg.jpg) no-repeat 50% 0;position: relative;background-size: cover;}
.topwrap .enter { width: 16%;padding-top: 7.44%;background: url(../image/enter.png) no-repeat;background-size: 100%;position: absolute;top:0;left:11.77%;opacity: .9;}
.topwrap .enter:hover {opacity: 1;}
.topwrap .main { width: 100%;position: absolute;bottom:0%;/*transform: translateY(-50%)*/;left: 0;     background: linear-gradient(to bottom, transparent 0%, rgb(10 22 44) 100%);}
.topbar{    background: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, .8) 100%);}
.logo { width: 16%;    margin: 0 auto;}
.txt { width: 40%;    margin: 0 auto;}
.content { width: 26%;border-radius: 10px;background: rgba(255,255,255,.7);    margin: 0 auto;padding:.5% 1%;overflow: hidden;position: relative;    margin-bottom: 20px;}
.ewm { float: left;width: 24.34%;}
.download { width: 38.9%;float: left;margin-left: 4%;}
.download a { width: 100%;padding-top: 29%;display: block;opacity: .8;}
.download a.appstore { background: url(../image/ios.jpg) no-repeat;background-size: 100%;}
.download a.android { background: url(../image/android.jpg) no-repeat;background-size: 100%;margin-top: 9%;}
.download a:hover {opacity: 1;}

/*轮播*/
.bg1{    background: url(../image/bg1.jpg) no-repeat; background-position: top; box-sizing: border-box; background-size: cover;}
.bg1::before{background: linear-gradient(to top, transparent 0%, rgb(13 25 48) 100%);content: '';width: 100%;height: 100px;position: absolute;}
.container { width: 1000px; margin: 0px auto; position: relative; overflow: hidden; }
.banner-news{padding-top: 20px; }
.banner{    box-shadow: 0px 2px 15px 0px rgb(217 217 217 / 20%);width: 480px;  float: left; overflow: hidden; position: relative;}
.banner .swiper-pagination{bottom:5px; padding-left: 10px; text-align: left;}
.banner .swiper-pagination-bullet{width: 15px; height: 15px; border-radius: 8px; background: #fff; opacity: 1; transition: width .2s linear; -webkit-transition: width .2s linear;}
.banner .swiper-pagination-bullet-active{width: 40px;}
.news_box{width: 500px; background: #0a2a48; float: right; position: relative;}
.news_tab{border-bottom: 1px solid #2bbebe; height: 34px; padding: 3px 10px 0;}
.news_tab a{float: left; padding: 0 16px;  line-height: 30px; font-size: 16px; position: relative; }
/*.news_tab a::after{content: '/';position: absolute; color: #ad9b93; height: 10px; font-size: 12px; right: -10px; top: 0;}
*/.news_tab a:last-child:after{display: none;}
.news_tab .cur{font-weight: bold; color: #fff;     text-shadow: 0 0 10px #00dcff, 0 0 20px #00b3ff, 0 0 40px #00b3ff, 0 0 80px #00b3ff, 0 0 120px #00b3ff; /*  background: #2bbebe;*/}
.news_tab .cur::before,.type .cur::before{content: ''; border: 10px solid #2bbebe; position: absolute;     left: 37%;bottom: -50px; -webkit-transform: translateY(-50%); transform: translateY(-150%); border-left-color: transparent; border-bottom-color: transparent; border-right-color: transparent;}
.news_list{margin: 20px 10px 0; position: relative; height: 252px; overflow: hidden;}
.news_tj{background: #2f5d8d; overflow: hidden; line-height: 30px; height: 30px; margin-bottom: 5px;}
.news_tj span{float: left;position: relative;padding: 0 15px; margin-right: 20px; font-size: 14px; font-weight: bold; background: #e71000;background-image: linear-gradient(top,#e71000,#e71000); background-image: -webkit-linear-gradient(top,#e71000,#e71000); color: #FFF;}
.news_tj span::before{content: ''; border: 4px solid #e71000;position: absolute;right: -8px;top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent;}
.news_list ul{width: 100%;position: absolute;top: 0; left: 0;display: none;}
.news_list ul.on{display: block;}
.news_list li{width: 100%; line-height: 42px; height: 42px; position: relative; border-bottom: 1px dashed #235e72;}
.news_list li a {font-size: 14px;}
.news_list li:last-child{border: none;}
.news_list li .news_title{ float: left; text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.news_list li .news_time,.content .list .news_time{float: right; color: #40859e;}
.news_more{position: absolute; top: 6px; right: 36px;  }
.news_prev,.news_next{float: right; width: 50px; height: 22px; border: 1px solid #999; margin-right: 10px; background: #fff url('../image/news_pn.jpg') no-repeat;}
.news_prev:hover,.news_next:hover{border-color: #666;}
.news_next{background-position: right top;}
.more_link{float: right; line-height: 20px; height: 20px; font-size: 12px;   padding: 0 10px;/* background: #2bbebe;*/}
.more_link:hover{background: #64cef9; color: #fff;}

.lb { width: 23%;float: left;margin-left: 6%;cursor: pointer;}
.webshop { width: 11.3%;border-radius: 10px;background: rgba(255,255,255,.7);margin:-7.3% 0 0 36%;padding:.5% 1%;overflow: hidden;position: relative;}

.gamewrap { height: 140vh;background: url(../image/bgb.jpg) no-repeat  ;position: relative;background-position: top; background-size: cover;   }
.gamewrap .main { width: 100%;position: absolute;top:50%;transform: translateY(-50%);left: 0;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;-webkit-flex-direction: column;flex-direction: column; }
.title { width: 50.88%;}
.picbox { width: 64.5%;margin-top: 2%;}
#pic { width: 100%;padding-bottom: 4%;}
#pic .swiper-slide { border: 2px solid #fff;width: 67%;}
.gamenext,.gameprev {     top: 40%;width: 10%;height: 26%;outline: none;}
.swiper-button-next:after,.swiper-button-prev:after { content: '';}
.gamenext { background: url(../image/right.png) no-repeat;background-size: 100%;right:1%;}
.gameprev { background: url(../image/left.png) no-repeat;background-size: 100%;left: 1%;}
#pic>.pic-pa { bottom: 0;}
#pic>.pic-pa .swiper-pagination-bullet { width:30px;height:30px;opacity: 1;background: url('../image/s_ico.png') no-repeat;margin: -5px 6px;}
#pic>.pic-pa .swiper-pagination-bullet.swiper-pagination-bullet-active { background: url('../image/s_ico_on.png') no-repeat;}
.link { margin-top: 1.5%;width: 100%;text-align: center;font-size: 0;}
.link a { display: inline-block;width: 13%;padding-top: 4%;margin: 0 3px;opacity: .8;}

.link a.appstore { background: url(../image/appstore.png) no-repeat;background-size: 100%;}
.link a.android { background: url(../image/android.png) no-repeat;background-size: 100%;}
.link a:hover {opacity: 1;}
/*职业*/
.mb0{margin-bottom:0;}
.zhiye {    position: relative;  }
.role_tab{position: absolute;width: 215px;top: 50%; transform: translateY(-50%);text-align: center;z-index: 9; }
.role_tab span{ width: 100%; height: 72px; font-size: 34px; cursor: pointer; background-color: transparent; opacity: 1; background-size: 100%; background-position: top; display: block; border-radius: 0; margin: 0;opacity: .4;}
.role_tab span.cur { opacity: 1; }
.role_tab span.role_mfs{background-image: url("../image/occu-mfs.png");}
.role_tab span.role_js{background-image: url("../image/occu-js.png");}
.role_tab span.role_gjs{background-image: url("../image/occu-gjs.png");}
.role_tab span.role_mjs{background-image: url("../image/occu-mjs.png");}
.role_tab span.role_sds{background-image: url("../image/occu-sds.png");}

.rolelist{    margin-top: 100px;width: 100%; height:780px; overflow: hidden; position: relative;}
.rolebox{position: absolute;width: 100%;height: 100%;opacity: 0;z-index: -1;transition: 0.3s;-webkit-transition: 0.3s;-moz-transition: 0.3s;-ms-transition: 0.3s;-o-transition: 0.3s; overflow: hidden;    transition: .3s opacity;    transform: translate3d(0, 0, 0);}
.rolebox.on{z-index: 1;opacity: 1;}
.rolebox .role_name{    padding: 0 20px;  position: relative;}
.rolebox .role_img { padding: 20px 0;}
.role_name span{color: #326881; font-weight: 700; font-size: 60px;}
.rolebox .dk .name{background-position: 0 0;}
.rolebox .role_des{ line-height: 22px;  position: absolute; z-index: 9; left: 0;  padding: 20px;  width: 380px; color: #666666;}
.rolebox .role_tit{height: 28px;      color: #326881;    font-weight: 700;border-bottom: 1px solid #b6bbbe; margin-bottom: 10px;}
.rolebox .role_tit .dot{width: 18px; height: 18px; float: left; background: url(../image/circle.png) 100% 0; margin: 2px 7px 0 0px;}
.role_char {position: absolute;right: 0; top: 0; opacity: 0;z-index: -1;transition: 0.3s;-webkit-transition: 0.3s; -moz-transition: 0.3s;-ms-transition: 0.3s;-o-transition: 0.3s;}
.role_char img {    float: right; }
.role_char.on {z-index: 1;opacity: 4;}
.p3{ line-height: 24px;text-align: center;display: flex;    align-items: center;background: #232635; border-radius: 10px;   color: #aec0d3;}

/*文章页面*/
.detailbox {margin: 0 auto}
.inner-head span { padding-left: 30px; position: relative; cursor: pointer;  background: url(../image/back.png) no-repeat;}
.inner-head span a{color: #cacaca}
.inner-head span a:hover{color: #64cef9}
.inner-head { line-height: 4.416667rem;  color: #cacaca; font-size: 14px; text-align: right; }
.left-side { width:230px; background: #091218; float: left; position: relative;  }
.left-side .side-ewm{ width: 100%;  padding: 50px 40px 90px 40px; box-sizing: border-box; background: url(../image/side-ewm.png) no-repeat; background-position: top; background-size: auto 100%;}
.left-side .side-ewm img{     width: 130px;vertical-align: middle; margin: 0 auto; display: block;}
.left-side .btns .btn-down{ width: 180px; height: 60px; margin: 0 auto 1rem; display: block; background-size: 100% 100%;    opacity: .8; }
.left-side .btns .btn-down:hover{ opacity: 1;}
.detail .detail-art { width: 710px;    box-shadow: 2px 0px 10px 0px rgb(217 217 217 / 20%);  color: #e2e2e2; float: right; background: rgba(0, 0, 0, .33); text-align: left; }
.addr  {      padding-left: 10px;line-height: 50px; border-bottom: 1px solid #535358; font-size: 26px; color: #5d8fab; }
.detail .detail-art .detail-til { line-height: 40px; text-align: center; font-size:22px; }
.detail .detail-art .time { font-size: 12px; color: grey; text-align: center; }
.detail .detail-art .art-wrap  { padding: 10px 20px; }
.detail .detail-art .detail-content { padding: 20px 0; font-size: 15px; line-height: 26px; color: #cacaca; }
.detail .detail-art .detail-content img {    height: auto;    margin: 10px 0;}
/*下载页*/
.downmain .topbar{position: absolute; z-index: 9; top: 0; width: 100%;}
.downmain .topwrap{height: 86vh;}
.down_mu {overflow: hidden;}
.index_banner { position: relative; background: #610000d9 url(../image/bg.png) bottom no-repeat; padding-top: 150px;}
.ib_right {padding: 0 0.5rem; text-align: center; color: #fff; margin: 0 auto; }
.ib_right-box { display: flex; flex-direction: column; height: 100%; text-align: center; color: #fff; }
.ib_right h2 {     font-size: 22px;margin-bottom: 34px; font-weight: bold; }
.ib_right h3 {    color: #fe0; font-size: 20px;  margin: 0 0 20px 0; letter-spacing: 5px; }
.ib_right-btn { height: 83px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; }
.ib_right .down { display: inline-block;width: 340px; height: 100%; margin: 0; transition: opacity .2s linear 0s; position: relative; float: right; text-align: center; }
.ib_right .time {    font-size: 18px; font-weight: 500; color: #FFFFFF; line-height: 30px; }
.ib_right_codeBox { display: flex; flex-direction: column-reverse; margin-top: 48px; }
.ib_right_codeBox .ib_right_code { width: 150px; height: 180px; background: #FFFFFF; border-radius: 10px; box-sizing: border-box; padding: 12px 10px; margin: 0 auto; }
.ib_right_codeBox .ib_right_code .ib_right_code-title { width: 130px; height: 18px; font-size: 16px; font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-weight: 500; color: #333333; margin: 7px auto 3px; }
.ib_right-box .icon_logo{margin:30px auto;    width: 100px;    height: 100px;}
.art_tit h1 { color: #fff; font-size: 20px; font-weight: 500; line-height:60px; text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #fff700, 0 0 40px #ffeb00, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;    text-align: center; }
.xhu-game{    border-top: 1px solid #393939; min-height: 130px;   box-shadow: 0px 2px 15px 0px rgb(217 217 217 / 20%);position:relative;padding:10px; }
.downbox .down_link{  position: absolute; z-index: 2; right: 15px; top: 50px; line-height: 26px; text-align: center; border-radius: 10px; padding: 0 10px;background: #e35109;    font-size: 16px;}
.downbox .down_link a {color:#fff}
.downbox .down_link:hover {background: #ff0000;}
.xhu-game img{width:64px;height:64px;float:left;position:relative;z-index:1;margin:0 12px 0 0;border-radius:5px}
.xhu-game:hover img{ opacity: .8; }
.xhu-game p{      color: #83ff00;  padding: 5px 0;font-size:12px;}
.xhu-game h2{font-size: 18px;     color: #fff;margin: 12px 0 10px; font-weight: 600;}
.xhu-game p em{    font-style: normal;background: #f00; padding: 2px 5px; border-radius: 5px; color: #fff; margin-right: 5px;}
.xhu-game p em.col1{background: #0095ff;}
.xhu-game p em.col2{background: #ffe000; color: #000;;}
.xhu-game p.star{color: #ffe000; font-size: 16px; padding: 0;}
.down-text { margin: 20px auto; line-height: 30px; z-index: 2; text-align: center; width: 50%; border-radius: 15px; overflow: hidden; text-overflow: ellipsis; background: #4383f4; background-image: -webkit-linear-gradient(left, #28c5fe 0%, #4383f4 100%); background-image: -o-linear-gradient(left, #28c5fe 0%, #4383f4 100%); background-image: linear-gradient(90deg, #28c5fe 0%, #4383f4 100%); animation: rainbow 3s infinite, heartbeat 0.6s infinite;}
.down-text:hover {background-image: -webkit-linear-gradient(left, #c90000 0%, #ff0c00 100%); background-image: -o-linear-gradient(left, #c90000 0%, #ff0c00 100%);background-image: linear-gradient(90deg, #c90000 0%, #ff0c00 100%);}
.down-text a {     font-size: 18px;color: #fff; font-weight: bold;display: flex; align-items: center; justify-content: center;  }
.down-text a span {    font-size: 12px;    line-height: 21px;    padding-left: 5px;}
.contact {text-align: center;}
.contact h2{line-height: 60px; color: #f9d383; font-size: 32px; height: 60px;.contact h2 { font-weight: 300; margin: 20px; text-align: center; line-height: 60px; color: #f9d383; font-size: 32px; height: 60px; }}
@keyframes rainbow {
  0% {
    background: #1abc9c;
  }
  10% {
    background: #2ecc71;
  }
  20% {
    background: #3498db;
  }
  30% {
    background: #9b59b6;
  }
  40% {
    background: #e74c3c;
  }
  50% {
    background: #e67e22;
  }
  60% {
    background: #f1c40f;
  }
  70% {
    background: #2c3e50;
  }
  80% {
    background: #9b59b6;
  }
}
@keyframes heartbeat {
  50% {
    transform: scale(1.1);
  }
}

/*底部二维码*/
.wxbox {display: inline-flex;     margin-top: 20px;   background: url("../image/guanzhu.png") no-repeat bottom;       background-size: auto 1rem; padding-bottom: 50px;}
.wxbox .ewm-item{width: 33.33%;    margin: 0 20px;    color: #fff;font-size: 13px;    text-align: center;}
.wxbox .ewm-item img {width: 140px;}
/*foot fuck you lr51819*/
.copyright {border-top: 1px solid #434343;width:100%;background: #000; padding: 30px 0; text-align: center; box-sizing: border-box;}
.foot{ width:1000px;margin:0 auto; position: relative;text-align:center;}
.longtu{display:inline-block;padding:0 20px 0 25px;}
.footpic {width: 200px}
.regard {display:inline-block;padding-left:15px;white-space:nowrap; vertical-align:top;padding-top: 5px;}
.regard p{color:#8c8c8c;font-size:13px;line-height:20px;}
.regard .p,.regard .p a{color:#ccc;font-size: 13px;padding-right: 5px;}
.regard .p a:hover{text-decoration:underline;}
.regard p img{width: 24px;}
.longtu p{color:#ccc;font-size:12px;}

.topbtn { width: 60px;height: 81px;background: url(../image/top.png) no-repeat;background-size: 100%;position: fixed;bottom:130px;right:50px;z-index: 99;}
.pf { width: 9.58%;position: fixed;right:0;top:100px;z-index: 99;}
.pf a { width: 12.5%;height: 100%;position: absolute;top:0;left: 0;}
.pf a.close { background: url(../image/pf2.png) no-repeat;background-size: 100%;}

.lbpop { width:519px;height:423px;background:url(../image/lbpop.png) no-repeat;position:fixed;display:none;z-index: 99;top:50%;left: 50%;transform: translate(-50%,-50%); }
.lbpop .btnclose { width:30px;height:30px;position:absolute;top:0;left:388px;background:none; }
.lbewm { width:190px;padding:50px 0 0 170px;text-align:center; }
.lbewm img { width:180px;height:180px; }
.sharewrap {     }
.item.gameAbstract{      margin: 0 auto;  width: 64.5%;position:relative;   }
.gameAbstract h3 {font-size: 28px;    text-align: center;line-height: 60px;color: #fff;  text-shadow: 0 0 10px #00dcff, 0 0 20px #00b3ff, 0 0 40px #00b3ff, 0 0 80px #00b3ff, 0 0 120px #00b3ff;}
.item.gameAbstract span{position:absolute;right:0;bottom:-0.6rem; }
.item.gameAbstract span img{width:50%;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}
.item.gameAbstract span.active img{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}
.item.gameAbstract .overstep{display:block;color:#94989d; }
.item.gameAbstract .overstep{ overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.item.gameAbstract.active .overstep{display:block;height:auto}
.item .gamedes {      font-size: 14px;     }
.item .gamedes p {padding: 5px 0}

@media screen and (min-width:769px) {   
    .mobile-only {
        display: none;
    }
}
@media screen and (max-width:768px) {  
	.container, .banner, .news_box, .zhiye, .gl_box, .mainMsg, .logo_b, .left-side, .detail .detail-art {    width: 100%!important;}
    .desktop-only {    }
	.role_tab{width: 100px;    }.role_tab span {height: 35px;}.rolelist{height: 350px;}
	.gamewrap {    overflow-y: scroll;height: 70vh;}
	.ewm{display: none}.content{width: 70%;    margin-bottom: 20px;}.download{    margin-left: 18%;}
    .topwrap { background-image: url(../image/bg_m.jpg);    height: 78vh; }
    .topwrap .enter { width: 3.57rem;height:1.66rem;padding-top: 0;left: 0;}
    .topwrap .main { padding: 0;transform: none; }
    .logo { width: 4.01rem;margin: 0 auto;}
    .txt { width: 8.3rem;margin: 0 auto;}
    .webshop { width: 3.8rem;margin: 0 auto;margin-top: 6rem;}
    .gamewrap {   }
    .gamewrap .main { top:.84rem;transform: none;}
    .title { width: 100%;}
	.zhiye{background-image: url("../image/bg2.jpg"); background-position: top;    box-sizing: border-box;    background-size: cover;}
    .picbox { width: 100%;margin-top: 1.7rem;}
    #pic { padding-bottom: .6rem;}
    #pic>.pic-pa .swiper-pagination-bullet { width: .15rem;height:.15rem;    border: 1px solid #fff;
    background: transparent;}
    #pic>.pic-pa .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #252727;}
    .topbtn { width: 1.25rem;height: 1.81rem;     bottom: 1.3rem;right:.2rem;}
    .link { margin-top: 10%;}
    .link a { width: 28%;padding-top: 9%;margin: 0 3px;}
	.item.gameAbstract{    width: 90%;}.wxbox .ewm-item img { width: 90px; }.wxbox{    background-size: auto 0.3rem;}
	.left-side{display: none}
    /*foot*/
    .copyright { text-align:center;padding-top:15px;width:100%;background-color:#000;height:auto;}
    .copyright img {vertical-align:middle;display:inline-block;margin-bottom:5px;width: 112px; }
    .foot { width: 100%;}
    .longtu { padding: 0;}
    .regard { text-align: center;padding: 0;white-space: normal;}
}