body{ position: relative; -webkit-text-size-adjust: 100%; font-family: "Inter", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif; font-size: .16rem;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, span, a { margin: 0; padding: 0; vertical-align: baseline;}
ul, ol { list-style: none;}
a { text-decoration: none; color: inherit; cursor: pointer; outline: none;}
a:hover{ text-decoration:none;}
img { border: 0; object-fit: cover;}
video{ object-fit: cover; }
table { border-collapse: collapse;}
area{ outline:none; }
input, textarea, select{ -webkit-appearance: none; outline: none; resize: none; border-radius: 0;}
input::-ms-clear{ display:none;}
input[type="text"], input[type="password"] { -webkit-appearance: none; -moz-appearance: none; appearance: none;}
button { border: none; background: none; cursor: pointer; font-size: inherit;}
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0;}
h1.wm-public{height:0; line-height:0; font-size:0;}
.cf:after {content:"";display:block;height:0;clear:both;} 
.cf {zoom:1;}
.fl{ float: left; }
.fr{ float: right; }
.rel{ position: relative;}
.abs{ position: absolute;}
.auto{left: 50%; -webkit-transform:translate(-50%,0); -moz-transform:translate(-50%,0); -ms-transform:translate(-50%,0); -o-transform:translate(-50%,0); transform:translate(-50%,0);}

html, body{ background-color: #c3c3c3;}
#wrapper{ display: none; font-size: .16rem;}
.viewPc{display:none !important;}

.otherPlatform a{background:url(https://nte.perfectworld.com/public/login/imgs260331/common/otherPlatform.png) no-repeat;background-position-y:0;background-size:auto 200%;height:0.66rem;margin:0 0.09rem;position:relative;width:0.66rem}
.otherPlatform .platform_twitter{background-position-x:0}
.otherPlatform .platform_facebook{background-position-x:-0.84rem}
.otherPlatform .platform_youtube{background-position-x:-1.68rem}
.otherPlatform .platform_discord{background-position-x:-2.52rem}
.otherPlatform .platform_reddit{background-position-x:-3.37rem}
.otherPlatform .platform_ins{background-position-x:-4.2rem}
.otherPlatform .platform_tiktok{background-position-x:-5.04rem}
.otherPlatform .platform_line{background-position-x:-5.88rem}
.otherPlatform .platform_naver{background-position-x:-6.72rem}
.otherPlatform .platform_talk{background-position-x:-7.56rem}
.otherPlatform .platform_twitch{background-position-x:-8.4rem}
.otherPlatform a:hover{background-position-y:-0.66rem}

/* 头 */
.fixedTop{ position: fixed; top: 0; left: 0; width: 100%; height: .99rem; box-sizing: border-box; padding: 0 .28rem 0 .33rem; background: url(../images/fixedTop.png) no-repeat center center / auto 100%; z-index: 3; display: flex; justify-content: space-between; align-items: center;}
.logo{ height: .82rem;}
.topMenu{ display: flex; align-items: center;}
.iconLanguage{ width: .7rem; height: .7rem; background: url(../images/iconLanguage.png) no-repeat 0 0 / 100% auto;}
.chooseLanguage{ position: fixed; top:1.2rem; right: .18rem; width:4.9rem;border-radius:.3rem;padding-top:.3rem;background: rgba(29,29,29,.85); border: .03rem solid #e8e8e8; display:none}
.chooseLanguage button{display:block;float:none;margin:0 auto;width:3.4rem;height:.72rem;border-bottom:.05rem solid #373a3a;font-size:.43rem;color:#bfbfbf}
.chooseLanguage button[active="on"]{color:#7cecfc}
.menuBtn{ margin-left: .07rem; width: .7rem; height: .7rem; background: url(../images/menuBtn.png) no-repeat 0 0 / 100% auto;}
.menuBtn.closeMenu{ background-position-y: bottom;}

/* 菜单层 */
.menuLayer{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(29, 29, 29, .9); z-index: 2; display: none;}
.community{ top: 5.3rem; left: 0; width: 100%;}
.community dt{ margin: 0 auto .38rem auto;}
.community dd{ display: flex; justify-content: center; align-items: center;}
.menuSubNav{ top: 9.5rem; display: flex; justify-content: center; align-items: center;}
.ruleBtn{ width: 1rem; height: 1rem; background: url(../images/ruleBtn.png) no-repeat 0 0 / 100% auto;}
.enter_btn{ margin-left: .32rem; width: 1rem; height: 1rem; background: url(../images/enter_btn.png) no-repeat 0 0 / 100% auto;}
.shareHref{ margin-left: .32rem; width: 1rem; height: 1rem; background: url(../images/shareHref.png) no-repeat 0 0 / 100% auto;}

/* header */
.header{ height: 13.34rem; background: url(../images/header.jpg) no-repeat 0 0 / 100% auto;}
.headerCont{ top: 3.97rem; left: 50%; transform: translateX(-50%);}
.headerTit{ margin: 0 auto .6rem auto;}
.headerDec{ margin-bottom: 1.1rem; width: 6.5rem; line-height: .29rem; font-size: .23rem; color: #FFF;}
.participate{ display: block; margin: 0 auto; width: 3.93rem; height: 1.22rem;}

/* nav */
.nav_placeholder{ height: 2.82rem; z-index: 1;}
.nav{ height: 2.82rem; background: url(../images/nav.jpg) no-repeat 0 0 / 100% auto;}
.nav.fixed{ position: fixed; top: .99rem; left: 0; width: 100%;}
.activeSub1Nav{ position: absolute; top: .43rem; left: 50%; transform: translateX(-50%); width: 4.19rem; height: 1rem; z-index: 2;}
.activeSub1Nav[name="tr"]{ background-position-y: 0!important;}
.activeSub1Nav[name="gl"]{ background-position-y: -1rem!important;}
.activeSub1Nav[name="ec"]{ background-position-y: -2rem!important;}
.activeSub1Nav[name="qt"]{ background-position-y: -3rem!important;}
.nav_sub1{ position: absolute; top: .57rem; left: 50%; transform: translateX(-50%); width: 4.18rem; height: 4.29rem; box-sizing: border-box; padding-top: .93rem; background: url(../images/nav_sub1.png) no-repeat 0 0 / 100% auto; display: none; z-index: 1;}
.nav_sub1 button{ display: block; margin: 0 auto .1rem auto; width: 2.71rem; height: .7rem;}
.nav_sub1 button.active{ background: #4d4d4d; border-radius: .1rem;}
.nav_sub1 button::before{ content: ""; display: block; width: 100%; height: 100%;}
.nav_sub2{ position: absolute; top: 1.66rem; left: 0; width: 100%; display: flex; justify-content: center; align-items: center;}
.nav_sub2 button{ margin: 0 .13rem; width: 1rem; height: 1rem;}
.hot{ background: url(../images/hot.png) no-repeat 0 0 / 100% auto;}
.new{ background: url(../images/new.png) no-repeat 0 0 / 100% auto;}
.nav_sub2 button.active{ background-position-y: bottom!important;}

/* content */
.content{ min-height: 21.65rem; padding: .73rem 0; background: linear-gradient(#212121, #E3E3E3); overflow: hidden;}
.list{ margin: 0 auto; width: 5.92rem;}
.item{ margin-bottom: .61rem; width: 5.84rem; border: .04rem solid #000; border-radius: .3rem; overflow: hidden;}
.pic{ display: block; width: 100%; min-height: 1rem;}
.info{ height: 1.4rem; background: url(../images/info.png) no-repeat center center / cover; display: flex; justify-content: center; align-items: center;}
.info::before{ content: ""; position: absolute; top: -.36rem; left: 0; width: 100%; height: .36rem; background: url(../images/adorn.png) no-repeat 0 0 / 100% auto;}
.info dl{ width: 5.3rem;}
.info dt{ display: flex; align-items: center;}
.info dt img{ width: .68rem; height: .68rem; border-radius: 50%; border: .03rem solid #fa5691;}
.info dt p{ margin-left: .19rem; font-size: .38rem; color: #FFF; width: 4.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.info dd{ text-align: right;}
.like{ font-size: .46rem; color: #FFF;}
.like::before{ content: ""; display: inline-block; margin-right: .18rem; width: .45rem; height: .39rem; background: url(../images/like.png) no-repeat 0 0 / 100% auto;}
.like.active{ color: #fa5691;}
.like.active::before{ background-position-y: bottom;}
.loading{ margin-top: .85rem; text-align: center;}
.loading::before, .loading::after{ content: ""; display: inline-block; vertical-align: middle;}
.loading::before{ width: .41rem; height: .42rem; margin: .15rem; background: url(../../images/loading-icon.png) no-repeat 0 0 / 100% auto; animation: turn 1s linear infinite;}
@keyframes turn {
  from{ transform: rotate(0deg);}
  to{ transform: rotate(360deg);}
}
.allOver{ margin: .85rem auto 0 auto; border-top: .03rem solid #3e3e3e; display: none;}
.allOver::before{ content: ""; display: block; margin: .57rem auto 0 auto;}

/* 弹出框 */
.pop{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: rgba(0, 0, 0, .8); display: none;}
.pop_cont{ top: 50%; left: 50%; transform: translate(-50%, -50%);}
.close{ top: .1rem; right: .1rem; width: .89rem; height: .89rem; background: url(../images/close.png) no-repeat 0 0 / 100% auto;}

/* 弹出框：作品详情 */
.pop_workCont{ width: 100%; height: 100%;}
.workInner{ height: 100%; display: flex; justify-content: center; align-items: center;}
.workInner > img{ width: 100%; max-height: 100%;}
.workInner iframe{ width: 100%; height: 100%;}






/********************************************** cn **********************************************/
.html-cn .community dt{ width: 3.78rem; height: .58rem; background: url(../../../cn/m/images/community.png) no-repeat 0 0 / 100% auto;}
.html-cn .headerTit{ width: 5.07rem; height: 1.71rem; background: url(../../../cn/m/images/headerTit.png) no-repeat 0 0 / 100% auto;}
.html-cn .participate{ background: url(../../../cn/m/images/participate.png) no-repeat 0 0 / 100% auto;}
.html-cn .activeSub1Nav{ background: url(../../../cn/m/images/activeSub1Nav.png) no-repeat 0 0 / 100% auto;}
.html-cn .tr::before{ background: url(../../../cn/m/images/tr.png) no-repeat center center / auto 100%;}
.html-cn .gl::before{ background: url(../../../cn/m/images/gl.png) no-repeat center center / auto 100%;}
.html-cn .ec::before{ background: url(../../../cn/m/images/ec.png) no-repeat center center / auto 100%;}
.html-cn .qt::before{ background: url(../../../cn/m/images/qt.png) no-repeat center center / auto 100%;}
.html-cn .loading::after{ width: 1.32rem; height: .31rem; background: url(../../../cn/images/loading-txt.png) no-repeat 0 0 / 100% auto;}
.html-cn .allOver::before{ width: 2.78rem; height: .38rem; background: url(../../../cn/images/allOver.png) no-repeat 0 0 / 100% auto;}








/********************************************** de **********************************************/
.html-de .community dt{ width: 6.38rem; height: .31rem; background: url(../../../de/m/images/community.png) no-repeat 0 0 / 100% auto;}
.html-de .headerTit{ width: 5.22rem; height: 1.49rem; background: url(../../../de/m/images/headerTit.png) no-repeat 0 0 / 100% auto;}
.html-de .participate{ background: url(../../../de/m/images/participate.png) no-repeat 0 0 / 100% auto;}
.html-de .activeSub1Nav{ background: url(../../../de/m/images/activeSub1Nav.png) no-repeat 0 0 / 100% auto;}
.html-de .tr::before{ background: url(../../../de/m/images/tr.png) no-repeat center center / auto 100%;}
.html-de .gl::before{ background: url(../../../de/m/images/gl.png) no-repeat center center / auto 100%;}
.html-de .ec::before{ background: url(../../../de/m/images/ec.png) no-repeat center center / auto 100%;}
.html-de .qt::before{ background: url(../../../de/m/images/qt.png) no-repeat center center / auto 100%;}
.html-de .loading::after{ width: 1.6rem; height: .28rem; background: url(../../../de/images/loading-txt.png) no-repeat 0 0 / 100% auto;}
.html-de .allOver::before{ width: 4.04rem; height: .38rem; background: url(../../../de/images/allOver.png) no-repeat 0 0 / 100% auto;}







/********************************************** en **********************************************/
.html-en .community dt{ width: 6rem; height: .53rem; background: url(../../../en/m/images/community.png) no-repeat 0 0 / 100% auto;}
.html-en .headerTit{ width: 5.39rem; height: 1.6rem; background: url(../../../en/m/images/headerTit.png) no-repeat 0 0 / 100% auto;}
.html-en .participate{ background: url(../../../en/m/images/participate.png) no-repeat 0 0 / 100% auto;}
.html-en .activeSub1Nav{ background: url(../../../en/m/images/activeSub1Nav.png) no-repeat 0 0 / 100% auto;}
.html-en .tr::before{ background: url(../../../en/m/images/tr.png) no-repeat center center / auto 100%;}
.html-en .gl::before{ background: url(../../../en/m/images/gl.png) no-repeat center center / auto 100%;}
.html-en .ec::before{ background: url(../../../en/m/images/ec.png) no-repeat center center / auto 100%;}
.html-en .qt::before{ background: url(../../../en/m/images/qt.png) no-repeat center center / auto 100%;}
.html-en .loading::after{ width: 1.15rem; height: .34rem; background: url(../../../en/images/loading-txt.png) no-repeat 0 0 / 100% auto;}
.html-en .allOver::before{ width: 4.33rem; height: .38rem; background: url(../../../en/images/allOver.png) no-repeat 0 0 / 100% auto;}





/********************************************** es **********************************************/
.html-es .community dt{ width: 6.41rem; height: .37rem; background: url(../../../es/m/images/community.png) no-repeat 0 0 / 100% auto;}
.html-es .headerTit{ width: 6.74rem; height: 1.3rem; background: url(../../../es/m/images/headerTit.png) no-repeat 0 0 / 100% auto;}
.html-es .participate{ background: url(../../../es/m/images/participate.png) no-repeat 0 0 / 100% auto;}
.html-es .activeSub1Nav{ background: url(../../../es/m/images/activeSub1Nav.png) no-repeat 0 0 / 100% auto;}
.html-es .tr::before{ background: url(../../../es/m/images/tr.png) no-repeat center center / auto 100%;}
.html-es .gl::before{ background: url(../../../es/m/images/gl.png) no-repeat center center / auto 100%;}
.html-es .ec::before{ background: url(../../../es/m/images/ec.png) no-repeat center center / auto 100%;}
.html-es .qt::before{ background: url(../../../es/m/images/qt.png) no-repeat center center / auto 100%;}
.html-es .loading::after{ width: 1.51rem; height: .28rem; background: url(../../../es/images/loading-txt.png) no-repeat 0 0 / 100% auto;}
.html-es .allOver::before{ width: 3.83rem; height: .38rem; background: url(../../../es/images/allOver.png) no-repeat 0 0 / 100% auto;}








/********************************************** fr **********************************************/
.html-fr .community dt{ width: 6.53rem; height: .37rem; background: url(../../../fr/m/images/community.png) no-repeat 0 0 / 100% auto;}
.html-fr .headerTit{ width: 6.31rem; height: 1.64rem; background: url(../../../fr/m/images/headerTit.png) no-repeat 0 0 / 100% auto;}
.html-fr .participate{ background: url(../../../fr/m/images/participate.png) no-repeat 0 0 / 100% auto;}
.html-fr .activeSub1Nav{ background: url(../../../fr/m/images/activeSub1Nav.png) no-repeat 0 0 / 100% auto;}
.html-fr .tr::before{ background: url(../../../fr/m/images/tr.png) no-repeat center center / auto 100%;}
.html-fr .gl::before{ background: url(../../../fr/m/images/gl.png) no-repeat center center / auto 100%;}
.html-fr .ec::before{ background: url(../../../fr/m/images/ec.png) no-repeat center center / auto 100%;}
.html-fr .qt::before{ background: url(../../../fr/m/images/qt.png) no-repeat center center / auto 100%;}
.html-fr .loading::after{ width: 2.1rem; height: .28rem; background: url(../../../fr/images/loading-txt.png) no-repeat 0 0 / 100% auto;}
.html-fr .allOver::before{ width: 4.4rem; height: .38rem; background: url(../../../fr/images/allOver.png) no-repeat 0 0 / 100% auto;}









/********************************************** jp **********************************************/
.html-jp .community dt{ width: 5.69rem; height: .61rem; background: url(../../../jp/m/images/community.png) no-repeat 0 0 / 100% auto;}
.html-jp .headerTit{ width: 6.62rem; height: 1.36rem; background: url(../../../jp/m/images/headerTit.png) no-repeat 0 0 / 100% auto;}
.html-jp .participate{ background: url(../../../jp/m/images/participate.png) no-repeat 0 0 / 100% auto;}
.html-jp .activeSub1Nav{ background: url(../../../jp/m/images/activeSub1Nav.png) no-repeat 0 0 / 100% auto;}
.html-jp .tr::before{ background: url(../../../jp/m/images/tr.png) no-repeat center center / auto 100%;}
.html-jp .gl::before{ background: url(../../../jp/m/images/gl.png) no-repeat center center / auto 100%;}
.html-jp .ec::before{ background: url(../../../jp/m/images/ec.png) no-repeat center center / auto 100%;}
.html-jp .qt::before{ background: url(../../../jp/m/images/qt.png) no-repeat center center / auto 100%;}
.html-jp .loading::after{ width: 2.01rem; height: .32rem; background: url(../../../jp/images/loading-txt.png) no-repeat 0 0 / 100% auto;}
.html-jp .allOver::before{ width: 5.67rem; height: .4rem; background: url(../../../jp/images/allOver.png) no-repeat 0 0 / 100% auto;}






/********************************************** kr **********************************************/
.html-kr .community dt{ width: 4.8rem; height: .6rem; background: url(../../../kr/m/images/community.png) no-repeat 0 0 / 100% auto;}
.html-kr .headerTit{ width: 5.99rem; height: 1.61rem; background: url(../../../kr/m/images/headerTit.png) no-repeat 0 0 / 100% auto;}
.html-kr .participate{ background: url(../../../kr/m/images/participate.png) no-repeat 0 0 / 100% auto;}
.html-kr .activeSub1Nav{ background: url(../../../kr/m/images/activeSub1Nav.png) no-repeat 0 0 / 100% auto;}
.html-kr .tr::before{ background: url(../../../kr/m/images/tr.png) no-repeat center center / auto 100%;}
.html-kr .gl::before{ background: url(../../../kr/m/images/gl.png) no-repeat center center / auto 100%;}
.html-kr .ec::before{ background: url(../../../kr/m/images/ec.png) no-repeat center center / auto 100%;}
.html-kr .qt::before{ background: url(../../../kr/m/images/qt.png) no-repeat center center / auto 100%;}
.html-kr .loading::after{ width: 1.31rem; height: .31rem; background: url(../../../kr/images/loading-txt.png) no-repeat 0 0 / 100% auto;}
.html-kr .allOver::before{ width: 5.61rem; height: .36rem; background: url(../../../kr/images/allOver.png) no-repeat 0 0 / 100% auto;}








/********************************************** ru **********************************************/
.html-ru .community dt{ width: 6.74rem; height: .44rem; background: url(../../../ru/m/images/community.png) no-repeat 0 0 / 100% auto;}
.html-ru .headerTit{ width: 5.62rem; height: 1.59rem; background: url(../../../ru/m/images/headerTit.png) no-repeat 0 0 / 100% auto;}
.html-ru .participate{ background: url(../../../ru/m/images/participate.png) no-repeat 0 0 / 100% auto;}
.html-ru .activeSub1Nav{ background: url(../../../ru/m/images/activeSub1Nav.png) no-repeat 0 0 / 100% auto;}
.html-ru .tr::before{ background: url(../../../ru/m/images/tr.png) no-repeat center center / auto 100%;}
.html-ru .gl::before{ background: url(../../../ru/m/images/gl.png) no-repeat center center / auto 100%;}
.html-ru .ec::before{ background: url(../../../ru/m/images/ec.png) no-repeat center center / auto 100%;}
.html-ru .qt::before{ background: url(../../../ru/m/images/qt.png) no-repeat center center / auto 100%;}
.html-ru .loading::after{ width: 1.25rem; height: .35rem; background: url(../../../ru/images/loading-txt.png) no-repeat 0 0 / 100% auto;}
.html-ru .allOver::before{ width: 3.88rem; height: .41rem; background: url(../../../ru/images/allOver.png) no-repeat 0 0 / 100% auto;}