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;}
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;}
.viewM{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: 1.25rem; box-sizing: border-box; padding: 0 2.3rem 0 1.6rem; background: url(../images/fixedTop.jpg) no-repeat center center / auto 100%; z-index: 2; display: flex; justify-content: space-between; align-items: center;}
.logo{ height: .82rem;}
.topMenu{ display: flex; align-items: center;}
.ruleBtn{ width: .69rem; height: .69rem; background: url(../images/ruleBtn.png) no-repeat 0 0 / 100% auto;}
.community{ margin-left: .23rem; width: .69rem; height: .69rem; background: url(https://nte.perfectworld.com/public/images/cover251223/community.png) no-repeat 0 0 / 100% auto; cursor: pointer; overflow: hidden;}
.community:hover{ background-position-y: bottom;}
.community.on{ overflow: visible;}
.community .otherPlatform{ top: 1rem; right: -0.55rem; height: .86rem; box-sizing: border-box; padding: 0 .26rem; justify-content: center; border-radius: .43rem; background: rgba(29,29,29,.8); display: flex; justify-content: center; align-items: center;}
.community .otherPlatform::after{ content: ""; position: absolute; top: -0.26rem; right: .7rem; width: .45rem; height: .26rem; background: url(https://nte.perfectworld.com/public/images/cover260204/languageArrow.png) no-repeat 0 0 / 100% auto;}
.community .otherPlatform a{ margin: 0 .09rem;}
.language{width:.69rem;height:.69rem; margin-left: .23rem;}
.iconLanguage{width:.69rem;height:.69rem; background:url(https://nte.perfectworld.com/public/images/cover251223/iconLanguage.png) no-repeat 0 0 / 100% auto}
.iconLanguage:hover{ background-position-y: bottom;}
.chooseLanguage{ position: absolute; top:.93rem;width:1.5rem;border-radius:.1rem;padding-top:.13rem;background: rgba(29,29,29,.8);display:none}
.chooseLanguage::after{ content: ""; position: absolute; top: -0.25rem; left: 50%; transform: translateX(-50%); width: .45rem; height: .26rem; background: url(https://nte.perfectworld.com/public/images/cover260204/languageArrow.png) no-repeat 0 0 / 100% auto;}
.chooseLanguage button{display:block;float:none;margin:0 auto;width:1.25rem;height:.49rem;border-bottom:.01rem solid #606060;font-size:.2rem;color:#FFF}
.chooseLanguage button:hover, .chooseLanguage button[active="on"]{color:#7cecfc}
.shareHref{ margin-left: .23rem; width: .69rem; height: .69rem; background: url(https://nte.perfectworld.com/public/images/cover251223/shareHref.png) no-repeat 0 0 / 100% auto;}
.shareHref:hover{ background-position-y: bottom;}
.enter_btn{ margin-left: .23rem; width:.69rem;height:0.69rem;background:url(https://nte.perfectworld.com/public/images/cover251223/enter_btn.png) no-repeat 0 0 / 100% auto;}
.enter_btn:hover{ background-position-y: bottom;}

/* header */
.header{ margin-top: 1.25rem; height: 10.03rem; background: url(../images/header.jpg) no-repeat center center / auto 100%;}
.headerCont{ top: 50%; right: 3.27rem; transform: translateY(-50%); width: 8.4rem; display: flex; justify-content: flex-end; flex-wrap: wrap;}
.headerTit{ margin-bottom: .75rem;}
.headerDec{ margin-bottom: .7rem; width: 100%; line-height: .36rem; font-size: .3rem; color: #FFF;}
.participate{ width: 4.71rem; height: 1.44rem;}

/* nav */
.nav_placeholder{ height: 1.67rem; z-index: 1;}
.nav{ height: 1.67rem; box-sizing: border-box; padding: 0 1.5rem; background: url(../images/nav.jpg) no-repeat center center / auto 100%; display: flex; justify-content: space-between; align-items: center;}
.nav.fixed{ position: fixed; top: 1.25rem; left: 0; width: 100%;}
.nav_sub1{ display: flex; align-items: center;}
.nav_sub1 button{ width: 2.91rem; height: .93rem; margin-right: .15rem;}
.nav_sub2{ display: flex; align-items: center; height: .54rem; border: .02rem solid #000; border-radius: .27rem; background: #4f4f4f;}
.nav_sub2 button{ height: .53rem;}
.nav button.active{ background-position-y: bottom!important;}
.new{ margin-right: .07rem;}
.new::after{ content: ""; position: absolute; top: 50%; right: -0.07rem; transform: translateY(-50%); width: .01rem; height: .25rem; background: #777;}
.hot{ margin-left: .07rem;}

/* content */
.content{ min-height: 19.13rem; padding: 1.5rem 0; background: linear-gradient(#212121, #E3E3E3); overflow: hidden;}
.list{ margin: 0 auto; width: 19.6rem;}
.item{ margin-bottom: .65rem; width: 4.58rem; border: .04rem solid #000; border-radius: .3rem; overflow: hidden;}
.pic{ display: block; width: 100%; min-height: 1rem;}
.info{ height: 1.17rem; background: url(../images/info.png) no-repeat center center / cover; display: flex; justify-content: center; align-items: center;}
.info::before{ content: ""; position: absolute; top: -.28rem; left: 0; width: 100%; height: .28rem; background: url(../images/adorn.png) no-repeat 0 0 / 100% auto;}
.info dl{ width: 4.07rem;}
.info dt{ display: flex; align-items: center;}
.info dt img{ width: .52rem; height: .52rem; border-radius: 50%; border: .03rem solid #fa5691;}
.info dt p{ margin-left: .15rem; font-size: .32rem; color: #FFF; width: 3.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.info dd{ text-align: right;}
.like{ font-size: .35rem; color: #FFF;}
.like::before{ content: ""; display: inline-block; margin-right: .14rem; width: .36rem; height: .31rem; 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: .02rem 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: -1.1rem; right: -.9rem; width: .89rem; height: .89rem; background: url(../images/close.png) no-repeat 0 0 / 100% auto;}

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






/********************************************** cn **********************************************/
.html-cn .headerTit{ width: 6.6rem; height: 2.33rem; background: url(../../cn/images/headerTit.png) no-repeat 0 0 / 100% auto;}
.html-cn .participate{ background: url(../../cn/images/participate.png) no-repeat 0 0 / 100% auto;}
.html-cn .tr{ background: url(../../cn/images/tr.png) no-repeat 0 0 / 100% auto;}
.html-cn .gl{ background: url(../../cn/images/gl.png) no-repeat 0 0 / 100% auto;}
.html-cn .ec{ background: url(../../cn/images/ec.png) no-repeat 0 0 / 100% auto;}
.html-cn .qt{ background: url(../../cn/images/qt.png) no-repeat 0 0 / 100% auto;}
.html-cn .nav_sub2 button{ width: 1.1rem; }
.html-cn .new{ background: url(../../cn/images/new.png) no-repeat 0 0 / 100% auto;}
.html-cn .hot{ background: url(../../cn/images/hot.png) no-repeat 0 0 / 100% auto;}
.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 .headerTit{ width: 6.05rem; height: 1.93rem; background: url(../../de/images/headerTit.png) no-repeat 0 0 / 100% auto;}
.html-de .participate{ background: url(../../de/images/participate.png) no-repeat 0 0 / 100% auto;}
.html-de .tr{ background: url(../../de/images/tr.png) no-repeat 0 0 / 100% auto;}
.html-de .gl{ background: url(../../de/images/gl.png) no-repeat 0 0 / 100% auto;}
.html-de .ec{ background: url(../../de/images/ec.png) no-repeat 0 0 / 100% auto;}
.html-de .qt{ background: url(../../de/images/qt.png) no-repeat 0 0 / 100% auto;}
.html-de .nav_sub2 button{ width: 1.72rem; }
.html-de .new{ background: url(../../de/images/new.png) no-repeat 0 0 / 100% auto;}
.html-de .hot{ background: url(../../de/images/hot.png) no-repeat 0 0 / 100% auto;}
.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;}
.html-de .loading::after{ width: 2.1rem; height: .28rem; background: url(../../de/images/loading-txt.png) no-repeat 0 0 / 100% auto;}
.html-de .allOver::before{ width: 4.4rem; height: .38rem; background: url(../../de/images/allOver.png) no-repeat 0 0 / 100% auto;}






/********************************************** en **********************************************/
.html-en .headerTit{ width: 6.53rem; height: 2.22rem; background: url(../../en/images/headerTit.png) no-repeat 0 0 / 100% auto;}
.html-en .participate{ background: url(../../en/images/participate.png) no-repeat 0 0 / 100% auto;}
.html-en .tr{ background: url(../../en/images/tr.png) no-repeat 0 0 / 100% auto;}
.html-en .gl{ background: url(../../en/images/gl.png) no-repeat 0 0 / 100% auto;}
.html-en .ec{ background: url(../../en/images/ec.png) no-repeat 0 0 / 100% auto;}
.html-en .qt{ background: url(../../en/images/qt.png) no-repeat 0 0 / 100% auto;}
.html-en .nav_sub2 button{ width: 1.1rem; }
.html-en .new{ background: url(../../en/images/new.png) no-repeat 0 0 / 100% auto;}
.html-en .hot{ background: url(../../en/images/hot.png) no-repeat 0 0 / 100% auto;}
.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 .headerTit{ width: 8.45rem; height: 1.61rem; background: url(../../es/images/headerTit.png) no-repeat 0 0 / 100% auto;}
.html-es .participate{ background: url(../../es/images/participate.png) no-repeat 0 0 / 100% auto;}
.html-es .tr{ background: url(../../es/images/tr.png) no-repeat 0 0 / 100% auto;}
.html-es .gl{ background: url(../../es/images/gl.png) no-repeat 0 0 / 100% auto;}
.html-es .ec{ background: url(../../es/images/ec.png) no-repeat 0 0 / 100% auto;}
.html-es .qt{ background: url(../../es/images/qt.png) no-repeat 0 0 / 100% auto;}
.html-es .nav_sub2 button{ width: 1.72rem; }
.html-es .new{ background: url(../../es/images/new.png) no-repeat 0 0 / 100% auto;}
.html-es .hot{ background: url(../../es/images/hot.png) no-repeat 0 0 / 100% auto;}
.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 .headerTit{ width: 7.84rem; height: 2.19rem; background: url(../../fr/images/headerTit.png) no-repeat 0 0 / 100% auto;}
.html-fr .participate{ background: url(../../fr/images/participate.png) no-repeat 0 0 / 100% auto;}
.html-fr .tr{ background: url(../../fr/images/tr.png) no-repeat 0 0 / 100% auto;}
.html-fr .gl{ background: url(../../fr/images/gl.png) no-repeat 0 0 / 100% auto;}
.html-fr .ec{ background: url(../../fr/images/ec.png) no-repeat 0 0 / 100% auto;}
.html-fr .qt{ background: url(../../fr/images/qt.png) no-repeat 0 0 / 100% auto;}
.html-fr .nav_sub2 button{ width: 1.72rem; }
.html-fr .new{ background: url(../../fr/images/new.png) no-repeat 0 0 / 100% auto;}
.html-fr .hot{ background: url(../../fr/images/hot.png) no-repeat 0 0 / 100% auto;}
.html-fr .loading::after{ width: 1.6rem; height: .28rem; background: url(../../fr/images/loading-txt.png) no-repeat 0 0 / 100% auto;}
.html-fr .allOver::before{ width: 4.04rem; height: .38rem; background: url(../../fr/images/allOver.png) no-repeat 0 0 / 100% auto;}




/********************************************** jp **********************************************/
.html-jp .headerTit{ width: 8.18rem; height: 1.67rem; background: url(../../jp/images/headerTit.png) no-repeat 0 0 / 100% auto;}
.html-jp .participate{ background: url(../../jp/images/participate.png) no-repeat 0 0 / 100% auto;}
.html-jp .tr{ background: url(../../jp/images/tr.png) no-repeat 0 0 / 100% auto;}
.html-jp .gl{ background: url(../../jp/images/gl.png) no-repeat 0 0 / 100% auto;}
.html-jp .ec{ background: url(../../jp/images/ec.png) no-repeat 0 0 / 100% auto;}
.html-jp .qt{ background: url(../../jp/images/qt.png) no-repeat 0 0 / 100% auto;}
.html-jp .nav_sub2 button{ width: 1.1rem; }
.html-jp .new{ background: url(../../jp/images/new.png) no-repeat 0 0 / 100% auto;}
.html-jp .hot{ background: url(../../jp/images/hot.png) no-repeat 0 0 / 100% auto;}
.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 .headerTit{ width: 7.96rem; height: 2.2rem; background: url(../../kr/images/headerTit.png) no-repeat 0 0 / 100% auto;}
.html-kr .participate{ background: url(../../kr/images/participate.png) no-repeat 0 0 / 100% auto;}
.html-kr .tr{ background: url(../../kr/images/tr.png) no-repeat 0 0 / 100% auto;}
.html-kr .gl{ background: url(../../kr/images/gl.png) no-repeat 0 0 / 100% auto;}
.html-kr .ec{ background: url(../../kr/images/ec.png) no-repeat 0 0 / 100% auto;}
.html-kr .qt{ background: url(../../kr/images/qt.png) no-repeat 0 0 / 100% auto;}
.html-kr .nav_sub2 button{ width: 1.1rem; }
.html-kr .new{ background: url(../../kr/images/new.png) no-repeat 0 0 / 100% auto;}
.html-kr .hot{ background: url(../../kr/images/hot.png) no-repeat 0 0 / 100% auto;}
.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 .headerTit{ width: 7.37rem; height: 2.19rem; background: url(../../ru/images/headerTit.png) no-repeat 0 0 / 100% auto;}
.html-ru .participate{ background: url(../../ru/images/participate.png) no-repeat 0 0 / 100% auto;}
.html-ru .tr{ background: url(../../ru/images/tr.png) no-repeat 0 0 / 100% auto;}
.html-ru .gl{ background: url(../../ru/images/gl.png) no-repeat 0 0 / 100% auto;}
.html-ru .ec{ background: url(../../ru/images/ec.png) no-repeat 0 0 / 100% auto;}
.html-ru .qt{ background: url(../../ru/images/qt.png) no-repeat 0 0 / 100% auto;}
.html-ru .nav_sub2 button{ width: 1.72rem; }
.html-ru .new{ background: url(../../ru/images/new.png) no-repeat 0 0 / 100% auto;}
.html-ru .hot{ background: url(../../ru/images/hot.png) no-repeat 0 0 / 100% auto;}
.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;}