@charset "UTF-8";
/* ---------- init ---------- */
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, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; word-wrap: break-word; }

body, button, input, select, textarea { font-family: 'PingFang-SC',Helvetica,sans-serif; font-size: 0.24rem; color: #333; line-height: 1.2; }

th { text-align: inherit; }

ol, ul { list-style: none; }

fieldset, img { border: 0; vertical-align: middle; }

caption, th { text-align: left; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 500; }

a, img { -webkit-touch-callout: none; }

table { border-collapse: collapse; }

i { font-style: normal; }

img { max-width: 100%; display: inline-block; }

a { color: inherit; text-decoration: none; }

input, select, textarea { -webkit-appearance: none; }

.lCenter, .app .avatar-wrap .lv-box { left: 50%; -webkit-transform: translateX(-50%); position: absolute; transform: translateX(-50%); position: absolute; }

.lcenter { left: 50%; -webkit-transform: translateX(-50%); position: absolute; transform: translateX(-50%); position: absolute; }

.vCenter { top: 50%; -webkit-transform: translateY(-50%); position: absolute; transform: translateY(-50%); position: absolute; }

.vcenter, .app .desc-content dt:before { top: 50%; -webkit-transform: translateY(-50%); position: absolute; transform: translateY(-50%); position: absolute; }

.allCenter, .app .avatar-wrap .avt-bg, .app .avatar-wrap .avt-img { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); position: absolute; transform: translate(-50%, -50%); position: absolute; }

.allcenter, .loading-mask .loading-img { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); position: absolute; transform: translate(-50%, -50%); position: absolute; }

.textcenter { position: absolute; width: 100%; text-align: center; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.textCenter { position: absolute; width: 100%; text-align: center; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.clear:after { content: ' '; font-size: 0; clear: both; height: 0px; display: block; }

.tCenter { position: absolute; width: 100%; text-align: center; }

.clear { clear: both; }

.tac { text-align: center; }

.t_i { text-indent: -9999em; font-size: 0; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; }

.bbx { box-sizing: border-box; }

.text-overflow, .app .nick-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

html { font-size: calc(100vw / 7.5); }

.l-en { display: none; }

body:not([cur-lang=zh-CN]) .l-zh { display: none !important; }

body:not([cur-lang=zh-CN]) .l-en, body:not([cur-lang=zh-CN]) div.l-en, body:not([cur-lang=zh-CN]) dd.l-en, body:not([cur-lang=zh-CN]) dt.l-en, body:not([cur-lang=zh-CN]) p.l-en { display: block; }

body:not([cur-lang=zh-CN]) span.l-en, body:not([cur-lang=zh-CN]) i.l-en { display: inline-block; }

/**
  勋章背景颜色
*/
/**
  勋章icon
*/
.loading-mask { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 999; display: none; }

.loading-mask .loading-img { width: 2rem; }

.app { overflow-x: hidden; background: url(../img/level/bg.png) no-repeat center top/100%; }

.app .avatar-wrap { width: 2.08rem; height: 2.08rem; margin: 0.18rem auto 0; border-radius: 50%; position: relative; background: rgba(166, 210, 89, 0.2); }

.app .avatar-wrap .avt-bg { width: 1.66rem; height: 1.66rem; border-radius: 50%; background-color: #a6d259; }

.app .avatar-wrap .avt-img { width: 1.52rem; height: 1.52rem; border-radius: 50%; }

.app .avatar-wrap .lv-box { top: 1.7rem; }

.app .avatar-wrap .flex-box { width: 1.16rem; height: 0.4rem; border-radius: 0.2rem; display: flex; justify-content: center; align-items: center; background-color: #a6d259; }

.app .avatar-wrap .icon-lv { width: 0.28rem; height: 0.28rem; background: url(../img/level/icon-r1.png) no-repeat center/100%; margin-right: 0.08rem; }

.app .avatar-wrap .lv-count { font-size: 0.26rem; font-weight: bold; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }

.app .avatar-wrap.l2 { background-color: rgba(64, 191, 249, 0.2); }

.app .avatar-wrap.l2 .avt-bg, .app .avatar-wrap.l2 .flex-box { background-color: #40bff9; }

.app .avatar-wrap.l2 .icon-lv { background: url(../img/level/icon-r2.png) no-repeat center/100%; }

.app .avatar-wrap.l3 { background-color: rgba(255, 190, 15, 0.2); }

.app .avatar-wrap.l3 .avt-bg, .app .avatar-wrap.l3 .flex-box { background-color: #ffbe0f; }

.app .avatar-wrap.l3 .icon-lv { background: url(../img/level/icon-r3.png) no-repeat center/100%; }

.app .avatar-wrap.l4 { background-color: rgba(141, 40, 241, 0.2); }

.app .avatar-wrap.l4 .avt-bg, .app .avatar-wrap.l4 .flex-box { background-color: #8d28f1; }

.app .avatar-wrap.l4 .icon-lv { background: url(../img/level/icon-r4.png) no-repeat center/100%; }

.app .avatar-wrap.l5 { background: linear-gradient(143deg, rgba(142, 69, 236, 0.2) 0%, rgba(253, 8, 94, 0.2) 100%); }

.app .avatar-wrap.l5 .avt-bg, .app .avatar-wrap.l5 .flex-box { background: linear-gradient(143deg, #8e45ec 0%, #fd085e 100%); }

.app .avatar-wrap.l5 .icon-lv { background: url(../img/level/icon-r5.png) no-repeat center/100%; }

.app .avatar-wrap.l6 { background: linear-gradient(146deg, rgba(255, 48, 25, 0.2) 0%, rgba(255, 212, 15, 0.2) 100%); }

.app .avatar-wrap.l6 .avt-bg, .app .avatar-wrap.l6 .flex-box { background: linear-gradient(146deg, #ff3019 0%, #ffd40f 100%); }

.app .avatar-wrap.l6 .icon-lv { background: url(../img/level/icon-r6.png) no-repeat center/100%; }

.app .nick-name { font-size: 0.3rem; font-weight: bold; color: #fff; width: 5.28rem; line-height: 0.42rem; margin: 0.3rem auto 0; text-align: center; }

.app .lv-info { width: 6.8rem; margin: 0.56rem auto 0; }

.app .lv-info .exp-show { display: flex; justify-content: space-between; align-items: center; }

.app .lv-info .lv-line { width: 2.42rem; margin: 0 0.1rem; }

.app .lv-info .progress-wrap { width: 100%; margin: 0 0.22rem; height: 0.12rem; border-radius: 0.15rem; background-color: rgba(255, 255, 255, 0.15); position: relative; overflow: hidden; }

.app .lv-info .cur-progress { position: absolute; left: 0; top: 0; width: auto; height: 100%; border-radius: 0.15rem; background: linear-gradient(176deg, #8e45ec 0%, #fd085e 100%); }

.app .lv-info .exp-count { display: flex; justify-content: space-between; margin-top: 0.04rem; }

.app .lv-info .exp-count p { font-size: 0.22rem; line-height: 0.32rem; color: rgba(255, 255, 255, 0.51); }

.app .lv-info .exp-count span { color: white; }

.app .lv-info .lvnum { font-size: 0.32rem; font-weight: bold; color: #ffe239; line-height: 0.44rem; }

.app .lv-info .lvnum.full-lv { font-size: 0.36rem; }

.app .desc-content { width: 6.8rem; margin: 0.52rem auto 0.64rem; background: white; box-shadow: 0 0.04rem 0.14rem 0 rgba(0, 0, 0, 0.08); border-radius: 0.28rem; overflow: hidden; }

.app .desc-content dl { width: 5.82rem; margin: 0.6rem auto; }

.app .desc-content dt { font-weight: 500; font-size: 0.3rem; line-height: 0.42rem; color: #333333; padding-left: 0.32rem; position: relative; }

.app .desc-content dt:before { content: ''; width: 0.12rem; height: 0.12rem; background-color: #fd085e; border-radius: 50%; left: 0; }

.app .desc-content dd { font-size: 0.26rem; line-height: 0.36rem; color: #888888; margin-top: 0.2rem; }

.app .label { color: #fd085e; }

.app .lv-show { display: flex; flex-wrap: wrap; align-content: center; }

.app .lv-show li { margin-top: 0.4rem; text-align: center; color: #aaa; width: 33.33%; font-size: 0.24rem; }

.app .lv-show li:nth-of-type(1) { width: 50%; padding-left: 0.8rem; }

.app .lv-show li:nth-of-type(2) { width: 50%; padding-right: 0.8rem; }

.app .lv-show li:nth-of-type(3) { padding-right: 0.28rem; }

.app .lv-show li:nth-of-type(5) { padding-left: 0.28rem; }

.app .lv-show li:last-child { width: 100%; }

.app .lv-show .mgt26 { margin-top: 0.06rem; }

.app .lv-show .medal-box { width: 0.92rem; height: 0.4rem; border-radius: 0.2rem; margin: auto; display: flex; justify-content: center; align-items: center; }

.app .lv-show .medal-box img { width: 100%; }

.app .lv-show .medal-box span { color: #fff; font-weight: bold; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }

.app .lv-show .stage-count { color: #aaaaaa; line-height: 0.34rem; margin-top: 0.06rem; }

.app .pv-show { display: flex; justify-content: space-between; margin: 0.4rem 0; }

.app .pv-show li { width: 50%; text-align: center; }

.app .pv-show img { width: 1.4rem; }

.app .pv-show p { color: #fd085e; line-height: 0.34rem; margin-top: 0.18rem; }

.app .up-show { display: flex; justify-content: space-between; margin-top: 0.04rem; }

.app .up-show li { text-align: center; }

.app .up-show img { width: 0.92rem; }

.app .up-show p { font-size: 0.22rem; line-height: 0.32rem; margin-top: 0.18rem; }