@charset "utf-8";
/* 1:1 复刻 dislyte-kr-m.farlightgames.com（750 设计稿，1rem = 100 设计像素，与线上 rem.js 一致） */

@font-face { font-family: "TmonMonsori"; src: url("../font/TmonMonsori.otf"); font-display: swap; }
@font-face { font-family: "Noto Sans CJK KR"; src: url("../font/NotoSansCJKkr-Medium.otf"); font-display: swap; }

/* normalize（线上同款基础） */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body, html { height: 100%; }
body { margin: 0; font-family: "Noto Sans CJK KR" !important; font-size: 12px; }
::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
img { border-style: none; }
a { background-color: transparent; color: inherit; text-decoration: none; }
/* 线上 #app 的系统字体/限高样式带作用域、实际不生效：页面默认字体为 Noto，整页随窗口滚动 */

.main { width: 100vw; height: 100%; overflow-y: scroll; }
.main-box { width: 100vw; position: relative; overflow-x: hidden; }

/* ================================================================
   Vant 组件基础（popup / overlay / row / col / tabs / slider）
   ================================================================ */
.van-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); display: none; opacity: 0; transition: opacity .3s; }
.van-overlay.is-open { display: block; opacity: 1; }
.van-popup { position: fixed; max-height: 100%; overflow-y: auto; background: #fff; transition: transform .3s; display: none; }
.van-popup.is-open { display: block; }
.van-popup--center { top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); transition: opacity .3s; opacity: 0; }
.van-popup--center.is-shown { opacity: 1; }
.van-popup--right { top: 50%; right: 0; transform: translate3d(100%, -50%, 0); transition-timing-function: ease-in; }
.van-popup--right.is-shown { transform: translate3d(0, -50%, 0); transition-timing-function: ease-out; }
.van-popup--bottom { bottom: 0; left: 0; width: 100%; transform: translate3d(0, 100%, 0); transition-timing-function: ease-in; }
.van-popup--bottom.is-shown { transform: none; transition-timing-function: ease-out; }
.van-row { display: flex; flex-wrap: wrap; }
.van-col { display: block; box-sizing: border-box; min-height: 1px; }
.van-col--4 { flex: 0 0 16.66666667%; max-width: 16.66666667%; }
.van-col--5 { flex: 0 0 20.83333333%; max-width: 20.83333333%; }
.van-col--8 { flex: 0 0 33.33333333%; max-width: 33.33333333%; }
.van-col--12 { flex: 0 0 50%; max-width: 50%; }
.van-col--24 { flex: 0 0 100%; max-width: 100%; }

/* ================================================================
   顶栏 + 菜单
   ================================================================ */
.header { position: fixed; width: 100%; height: .9rem; background: #1b1725; z-index: 100; }
.header img { object-fit: contain; }
.header .logo { position: absolute; left: .2rem; top: .18rem; width: 1.62rem; height: .51rem; }
.header .audio-airpods-on, .header .audio-airpods, .header .banner { position: absolute; width: .44rem; height: .41rem; right: 1.4rem; top: 50%; transform: translateY(-50%); }
.header .banner { width: .34rem; height: .32rem; right: .4rem; object-fit: contain; }
.header .audio-airpods { display: none; }
.header.is-bgm-off .audio-airpods { display: block; }
.header.is-bgm-off .audio-airpods-on { display: none; }
.header .van-overlay { z-index: 2001; }
.menuModal.van-popup { width: 100%; height: 100%; background: #0d0d0d !important; z-index: 2002; }
.menuModal .listLine { width: 100%; height: .04rem; position: absolute; left: 0; top: 0; object-fit: contain; }
.menuModal .menu-cont { padding: .6rem; box-sizing: border-box; }
.menuModal .menu-cont .menuItem { display: block; padding: .5rem .16rem; border-bottom: .02rem solid #424343; color: #fff; font-size: .4rem; font-family: TmonMonsori; }
.menuModal .menu-cont .menuItem:last-child { border-bottom: none; }
.menuModal .video-cont { position: absolute; top: .32rem; right: .47rem; width: .46rem; height: .46rem; }
.menuModal .video-cont img { width: 100%; height: 100%; object-fit: contain; }
.menuModal .mediaCont { width: 100%; box-sizing: border-box; text-align: center; }
.menuModal .mediaCont .media { object-fit: contain; }
.menuModal .mediaCont .n { width: .55rem; height: .65rem; }
.menuModal .mediaCont .ytb { width: .78rem; height: .66rem; }
.menuModal .mediaCont .ins { width: .71rem; height: .61rem; }
.menuModal .mediaCont .tw { width: .81rem; height: .6rem; }
.menuModal .mediaCont .fb { width: .41rem; height: .63rem; }
.menuModal .mediaCont .tt { width: .65rem; height: .63rem; }

/* ================================================================
   首屏
   ================================================================ */
.first-screen { height: 100vh; width: 100%; position: relative; }
.first-screen video { width: 100vw; height: 100vh; object-fit: cover; position: relative; z-index: 1; display: block; }
.first-screen .mask { width: 100vw; height: 100vh; position: absolute; left: 0; top: 0; z-index: 2; background: rgba(0, 0, 0, .5); }
.first-screen > img { position: absolute; left: 50%; transform: translateX(-50%); object-fit: contain; z-index: 3; }
.first-screen .gad { width: 4.8rem; height: .97rem; top: 2.5rem; }
.first-screen .logo { width: 5.39rem; height: 1.7rem; top: 3.8rem; }
.first-screen .play-icon { width: 1.61rem; height: 1.61rem; top: 50%; transform: translate(-50%, -50%); margin-top: 1rem; }
.first-screen .next-page { width: 4.8rem; height: 1rem; top: 50%; transform: translate(-50%, -50%); margin-top: 2.8rem; }
.first-screen .download-wrapper { width: 83%; height: .89rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 4.2rem; z-index: 9; display: flex; }
.first-screen .download-wrapper a { display: inline-block; flex: 1; width: 50%; height: 100%; }
.first-screen .download-wrapper .ios-download { margin-right: .3rem; }
.first-screen .download-wrapper img { display: block; width: 100%; height: 100%; object-fit: contain; }
.first-screen .next-icon { width: .6rem; height: .6rem; bottom: 2rem; animation: m-arrow 1s linear infinite; }
@keyframes m-arrow { 0% { bottom: 2rem; } 50% { bottom: 1.6rem; } to { bottom: 2rem; } }
@media (min-width: 760px) and (max-width: 900px) {
  .first-screen .gad { top: 1.8rem; }
  .first-screen .logo { top: 3.2rem; }
  .first-screen .play-icon { margin-top: .6rem; }
  .first-screen .next-page { margin-top: 1.8rem; }
  .first-screen .download-wrapper { margin-top: 3.1rem; }
  .first-screen .next-icon { margin-bottom: -1.8rem; }
}
@media (min-width: 660px) and (max-width: 760px) {
  .first-screen .next-icon { margin-bottom: -1rem; }
}
.ytb-modal.van-popup { width: 100%; height: 55%; background: transparent; overflow-y: visible; z-index: 2004; }
.first-screen .van-overlay { z-index: 2003; }
.ytb-modal .cont { height: 95%; width: 100%; position: relative; margin-top: .4rem; }
.ytb-modal .cont iframe { display: block; border: 0; }
.ytb-modal .cont .closeModal { width: .48rem; height: .48rem; position: absolute; right: .2rem; top: -.4rem; }
.ytb-modal .cont .closeModal img { height: 100%; width: 100%; object-fit: contain; }

/* ================================================================
   세계관
   ================================================================ */
.fourth-screen { background-repeat: no-repeat; background-size: 100% 100%; padding-top: 1.47rem; box-sizing: border-box; }
.fourth-screen .title { width: 2.62rem; height: .82rem; margin: 0 auto 1.32rem; }
.fourth-screen .title img { width: 100%; height: 100%; object-fit: contain; }
.fourth-screen .swiper-box { position: relative; width: 100%; }
.fourth-screen .wv-swipe { width: 100%; }
.fourth-screen .swipe-title { width: 4.315rem; height: .7rem; text-align: center; line-height: .7rem; position: relative; font-size: .66rem; font-family: TmonMonsori; margin: 0 auto .55rem; color: #6fffdb; }
.fourth-screen .swipe-title img { width: 100%; height: 3px; position: absolute; left: 0; bottom: -.1rem; }
.fourth-screen .my-swipe-item p { text-align: center; font-size: .24rem; font-family: "Noto Sans CJK KR"; font-weight: 400; color: #fff; width: 5.92rem; margin: 0 auto; line-height: .38rem; }
.fourth-screen .swiper-icon { position: absolute; top: 50%; transform: translateY(-50%); width: .26rem; height: .41rem; z-index: 2; }
.fourth-screen .prev { left: .25rem; }
.fourth-screen .next { right: .25rem; }
.fourth-screen .outlook { padding: .24rem .24rem 1rem; box-sizing: border-box; }
/* Vant row gutter=24：三列分别 0/16、8/8、16/0 的左右内边距 */
.fourth-screen .wv-cards .van-col:nth-child(3n+1) { padding-right: 16px; }
.fourth-screen .wv-cards .van-col:nth-child(3n+2) { padding-left: 8px; padding-right: 8px; }
.fourth-screen .wv-cards .van-col:nth-child(3n) { padding-left: 16px; }
.fourth-screen .outlook .card { width: 1.794rem; height: 2.08rem; margin: .24rem auto; background: linear-gradient(122deg, #a080ff, #cbb7ff); text-align: center; border-radius: 6px; position: relative; }
.fourth-screen .outlook .card .card-icon { width: .941rem; height: 1.145rem; margin: .2rem auto 0; }
.fourth-screen .outlook .card .line { width: 1.573rem; height: .04rem; position: absolute; left: 50%; transform: translateX(-50%); bottom: .47rem; object-fit: contain; }
.fourth-screen .outlook .card .imageText { height: .25rem; position: absolute; left: 50%; transform: translateX(-50%); bottom: .1rem; object-fit: cover; }
.fourth-screen .outlook .activeCard { background: linear-gradient(122deg, #2bd9e4, #6afca7); }
.fourth-screen .wv-cards .van-col:nth-child(1) .card-icon { width: .95rem; height: 1.38rem; }
.fourth-screen .wv-cards .van-col:nth-child(2) .card-icon { width: .95rem; height: 1.16rem; }
.fourth-screen .wv-cards .van-col:nth-child(3) .card-icon { width: 1.1rem; height: 1.1rem; }
.fourth-screen .wv-cards .van-col:nth-child(4) .card-icon { width: 1.1rem; height: 1.2rem; }
.fourth-screen .wv-cards .van-col:nth-child(5) .card-icon { width: 1.08rem; height: 1.18rem; }
.fourth-screen .wv-cards .van-col:nth-child(6) .card-icon { width: 1.21rem; height: 1.2rem; }

/* ================================================================
   에스퍼
   ================================================================ */
.fifth-screen { background-repeat: no-repeat; background-size: 100% 103%; background-position: 0 -.4rem; padding: 0 0 1rem; position: relative; }
.fifth-screen .arrow-top { width: 3.37rem; height: 1.6rem; object-fit: contain; position: absolute; left: 0; top: -.8rem; }
.fifth-screen .arrow-bottom { width: 5.37rem; height: 1.6rem; object-fit: contain; position: absolute; right: -.1rem; bottom: -.8rem; }
.fifth-screen .title { width: 3.88rem; height: .79rem; position: absolute; left: 50%; transform: translateX(-50%); top: 1.3rem; z-index: 2; }
.fifth-screen .title img { width: 100%; height: 100%; object-fit: contain; }
.fifth-screen .swiper-box { width: 100%; }
.fifth-screen .esper-swipe { width: 100%; }
.fifth-screen .esper-swipe .swiper-slide.is-lazy > * { display: none; }
.fifth-screen .role-image { width: 100%; object-fit: fill; display: block; }
.fifth-screen .role-info { width: 100%; padding: .27rem; padding-right: 0; box-sizing: border-box; margin-top: -2rem; position: relative; }
.fifth-screen .role-info .role { height: .39rem; font-size: .4rem; font-family: "Noto Sans CJK KR"; font-weight: 900; color: #2c214d; line-height: .51rem; }
.fifth-screen .role-info .role-name { height: .7rem; font-size: .76rem; font-family: TmonMonsori; color: #5e2da9; line-height: .71rem; margin: .3rem 0; }
.fifth-screen .role-info .combat-value { width: auto; padding-left: .16rem; box-sizing: border-box; display: inline-block; height: .44rem; background: hsla(0, 0%, 100%, .8); }
.fifth-screen .role-info .combat-value img { vertical-align: middle; }
.fifth-screen .role-info .combat-value .combat-type { width: .31rem; height: .31rem; margin: .07rem .21rem 0 0; }
.fifth-screen .role-info .combat-value .combat-line { width: 2.32rem; height: .22rem; margin: .07rem .16rem 0 0; }
.fifth-screen .role-info .combat-value .combat-value-icon { width: .15rem; height: .23rem; margin: .07rem .15rem 0 0; }
.fifth-screen .role-info .role-audio { margin-top: .5rem; }
.fifth-screen .role-info .role-audio .role-audio-icon { display: inline-block; width: .32rem; height: .32rem; margin-right: .14rem; }
.fifth-screen .role-info .role-audio .role-audio-icon img { width: 100%; height: 100%; object-fit: contain; vertical-align: middle; margin-top: -3px; }
.fifth-screen .role-info .role-audio .role-audio-icon .voice-playing { display: none; }
.fifth-screen.is-voice-playing .role-audio-icon .voice-playing { display: inline; }
.fifth-screen.is-voice-playing .role-audio-icon .voice-idle { display: none; }
.fifth-screen .role-info .role-audio span { width: 1.17rem; height: .27rem; font-size: .28rem; font-family: "Noto Sans CJK KR"; font-weight: 500; color: #1b1a30; line-height: .34rem; }
.fifth-screen .role-info .role-audio .line { width: 5.33rem; height: 1px; background: #1b1a30; margin-top: .2rem; }
.fifth-screen .role-info .role-desc-title { min-height: .4rem; font-size: .34rem; font-family: TmonMonsori; color: #150c31; line-height: .55rem; margin: .18rem 0 .2rem; }
.fifth-screen .role-info p { font-size: .24rem; font-family: "Noto Sans CJK KR"; font-weight: 400; color: #1b1a30; line-height: .3rem; margin: 0; }
/* 立绘纵向偏移（线上 imageStyle.marginTop） */
.esper-swipe .swiper-slide:nth-child(1) .role-image { margin-top: 1rem; }
.esper-swipe .swiper-slide:nth-child(2) .role-image { margin-top: 1rem; }
.esper-swipe .swiper-slide:nth-child(3) .role-image { margin-top: -1rem; }
.esper-swipe .swiper-slide:nth-child(4) .role-image { margin-top: 2rem; }
.esper-swipe .swiper-slide:nth-child(5) .role-image { margin-top: .6rem; }
.esper-swipe .swiper-slide:nth-child(6) .role-image { margin-top: -.4rem; }
.esper-swipe .swiper-slide:nth-child(7) .role-image { margin-top: .7rem; }
.esper-swipe .swiper-slide:nth-child(8) .role-image { margin-top: 2rem; }
.esper-swipe .swiper-slide:nth-child(9) .role-image { margin-top: 2rem; }
.esper-swipe .swiper-slide:nth-child(10) .role-image { margin-top: -2rem; }
.esper-swipe .swiper-slide:nth-child(11) .role-image { margin-top: 0; }
.esper-swipe .swiper-slide:nth-child(12) .role-image { margin-top: 2rem; }
.fifth-screen .role-box { width: 6.9rem; height: 2.52rem; background: linear-gradient(0deg, rgba(198, 200, 210, .06), hsla(0, 0%, 100%, .06)); box-shadow: 0 .02rem .3rem 0 rgba(0, 0, 0, .14); border-radius: .1rem; margin: .45rem auto 0; padding-top: .22rem; box-sizing: border-box; }
.fifth-screen .role-box .role-cont { touch-action: auto; height: 1.326rem; overflow-x: scroll; overflow-y: hidden; }
.fifth-screen .role-box .role-list { width: 20.2rem; height: 100%; touch-action: auto; }
.fifth-screen .role-box .role-list .role-item { touch-action: auto; width: 1.342rem; height: 1.326rem; margin-left: .32rem; display: inline-block; border-radius: .03rem; vertical-align: top; }
.fifth-screen .role-box .role-list .role-item img { width: 100%; height: 100%; object-fit: contain; }
.fifth-screen .role-box .role-list .role-item .thumb-active { display: none; }
.fifth-screen .role-box .role-list .role-item.is-active .thumb-normal { display: none; }
.fifth-screen .role-box .role-list .role-item.is-active .thumb-active { display: inline; }
.fifth-screen .role-box .speed { padding: 0 .22rem 0 .42rem; box-sizing: border-box; margin-top: .61rem; }
.van-slider { position: relative; width: 100%; height: 2px; background: #b3b3b3; border-radius: 999px; cursor: pointer; }
.van-slider:before { position: absolute; top: -8px; right: 0; bottom: -8px; left: 0; content: ""; }
.van-slider__bar { position: absolute; width: 0; height: 100%; background: #2c214d; border-radius: inherit; transition: all .2s; }
.van-slider.is-dragging .van-slider__bar { transition: none; }
.van-slider__button-wrapper { position: absolute; cursor: grab; top: 50%; }
.van-slider__button-wrapper--right { right: 0; transform: translate3d(50%, -50%, 0); }
.fifth-screen .role-box .speed .slider-btn { width: .22rem; height: .22rem; background: #2c214d; border-radius: 50%; border: 5px solid #c9bee9; }

/* ================================================================
   미디어
   ================================================================ */
.sixth-screen { padding: 1.46rem 0; background-repeat: no-repeat; background-size: 100%; position: relative; z-index: 2; }
.sixth-screen > .title { width: 2.64rem; height: .82rem; margin: 0 auto; }
.sixth-screen > .title img { width: 100%; height: 100%; object-fit: contain; }
.sixth-screen > .video-cont { width: 5.388rem; margin: 1.16rem auto 1.6rem; }
.sixth-screen .cont-title { height: .54rem; font-size: .58rem; font-family: TmonMonsori; color: #fff; line-height: .51rem; }
.sixth-screen .cont-title img { width: 1.86rem; height: .26rem; object-fit: contain; vertical-align: bottom; }
.sixth-screen > .video-cont .video-title img { width: 1.86rem; height: .06rem; vertical-align: bottom; object-fit: contain; }
.sixth-screen .cont-subtitle { height: .22rem; font-size: .24rem; font-family: "Noto Sans CJK KR"; font-weight: 400; color: #fff; line-height: .34rem; margin: .21rem 0; }
/* 线上是白底白字（文字看不见）；按用户要求改为与 PC 版一致的半透明白底 + 白字 */
.sixth-screen .cont-btn { width: 1.43rem; height: .57rem; background: hsla(0, 0%, 100%, .4); border: 1px solid #fff; border-radius: .2rem 0 .2rem 0; font-size: .25rem; font-family: "Noto Sans CJK KR"; font-weight: 500; color: #fff; line-height: .57rem; text-align: center; cursor: pointer; }
.sixth-screen > .video-cont .video-image { width: 5.44rem; height: 3.41rem; margin-top: .13rem; }
.sixth-screen > .video-cont .video-image img { width: 100%; height: 100%; object-fit: contain; }
.sixth-screen > .audio-cont { width: 5.388rem; margin: -.3rem auto 0; text-align: right; }
.sixth-screen > .audio-cont .audio-image { width: 5.38rem; height: 3.34rem; margin: .38rem 0; position: relative; }
.sixth-screen > .audio-cont .audio-image img { width: 100%; height: 100%; object-fit: contain; }
.sixth-screen > .audio-cont .audio-image .audio-image-cont { width: 6.1rem; height: 3.74rem; object-fit: contain; }
.sixth-screen > .audio-cont .audio-image .audio-baby { width: 2.19rem; height: 2.15rem; position: absolute; right: -1rem; top: -1rem; animation: m-runn 2s linear infinite; }
@keyframes m-runn { 0% { top: -1rem; } 50% { top: -1.2rem; } to { top: -1rem; } }
.sixth-screen > .audio-cont .audio-btn { float: right; }
.sixth-screen > .van-overlay { z-index: 2002; }

/* OST 弹窗 */
.audioModal.van-popup { height: 100%; background-repeat: no-repeat !important; background-size: 100% 100% !important; background-position: 50% !important; overflow: hidden; z-index: 2003; } /* 线上 padding 规则带作用域、实际不生效 */
.audioModal .close { width: .67rem; height: .67rem; position: absolute; top: 1rem; right: .34rem; }
.audioModal .audio-cont .title { margin-left: .95rem; }
.audioModal .audio-cont .title img { display: block; }
.audioModal .audio-cont .title .ost { width: 1.45rem; height: .69rem; object-fit: contain; margin-top: 1.57rem; }
.audioModal .audio-cont .title .audio-line { width: 3.65rem; height: .16rem; object-fit: contain; margin-top: .1rem; }
.audioModal .audio-cont .music-player { margin-top: .8rem; position: relative; height: 8rem; }
.audioModal .audio-cont .music-player .play-card .music-title { height: .46rem; font-size: .5rem; font-family: Impact, "Times New Roman", serif; font-weight: 400; color: #fff; text-align: center; }
.audioModal .audio-cont .music-player .play-card .current-music-card { width: 6.13rem; height: 6.13rem; position: absolute; left: 50%; transform: translateX(-50%); border-radius: 50%; top: 1rem; }
.audioModal .audio-cont .music-player .play-card .current-music-card .music-card-img { width: 100%; height: 100%; object-fit: contain; }
.audioModal .audio-cont .music-player .play-card .current-music-card .disc-bg { width: 5.85rem; height: 5.85rem; object-fit: contain; position: absolute; left: .125rem; top: .125rem; }
.audioModal .audio-cont .music-player .play-card .current-music-card .pointer { position: absolute; z-index: 9; width: 2.79rem; height: 4.91rem; top: -1.4rem; right: -.2rem; }
.audioModal .audio-cont .music-player .music-icon { background: url("../img/m/common/ost/icon-frame.lossless.png") no-repeat; background-size: 100%; padding: .08rem; position: absolute; width: 1.889rem; height: 1.889rem; bottom: .2rem; z-index: 9; }
.audioModal .audio-cont .music-player .music-icon img { width: 100%; height: 100%; object-fit: fill; border-radius: 50%; }
.audioModal .audio-cont .music-player .coverRotate { animation: m-cover-rotate 10s linear infinite; }
.audioModal .audio-cont .music-player .rotatePointer { animation: m-pointer-on .5s linear 0s 1 alternate forwards; }
.audioModal .audio-cont .music-player .rotatePointerBack { animation: m-pointer-off .5s linear 0s 1 alternate forwards; }
.audioModal .audio-cont .music-player .prev-icon { left: -.9rem; }
.audioModal .audio-cont .music-player .next-icon { right: -.9rem; }
.audioModal .audio-cont .music-banner { height: .78rem; position: relative; z-index: 9; text-align: center; left: -.1rem; top: 1.2rem; }
@media (max-height: 740px) { .audioModal .audio-cont .music-banner { top: .4rem !important; } }
.audioModal .audio-cont .music-banner img { width: 100%; height: 100%; object-fit: contain; vertical-align: middle; }
.audioModal .audio-cont .music-banner .volume { width: .56rem; height: .47rem; margin: .17rem auto 0; }
.audioModal .audio-cont .music-banner .prev-icon { width: .45rem; height: .47rem; margin: .17rem auto 0; }
.audioModal .audio-cont .music-banner .play-music { width: .56rem; height: .78rem; margin: 0 auto; }
.audioModal .audio-cont .music-banner .next-icon { width: .45rem; height: .47rem; margin: .17rem auto 0; }
.audioModal .audio-cont .music-banner .music-list-icon { width: .56rem; height: .47rem; margin: .17rem auto 0; }
.audioModal .vol-off, .audioModal .btn-pause, .audioModal .list-open { display: none; }
.audioModal.is-muted .vol-on { display: none; }
.audioModal.is-muted .vol-off { display: inline; }
.audioModal.is-playing .btn-play { display: none; }
.audioModal.is-playing .btn-pause { display: inline; }
.audioModal.is-list-open .list-closed { display: none; }
.audioModal.is-list-open .list-open { display: inline; }
.audioModal .van-overlay { background: transparent !important; z-index: 2004; }
.music-list-cont.van-popup { height: 4rem; background: transparent !important; z-index: 2005; }
.audioModal .musicList { width: 80%; height: 100%; margin: 0 auto; background: #25233b; border-radius: .06rem; position: relative; padding-top: .8rem; box-sizing: border-box; }
.audioModal .musicList .play-model { position: absolute; width: .54rem; height: .38rem; right: .7rem; top: .3rem; }
.audioModal .musicList .play-model img { width: 100%; height: 100%; object-fit: contain; display: none; }
.audioModal[data-mode="all"] .play-model .mode-all,
.audioModal[data-mode="one"] .play-model .mode-one,
.audioModal[data-mode="random"] .play-model .mode-random { display: inline; }
.audioModal .musicList .music-list-box { width: 100%; height: 99%; overflow-y: scroll; padding-bottom: .2rem; box-sizing: border-box; }
.audioModal .musicList .music-item { height: 1rem; width: 100%; padding: 0 .7rem; box-sizing: border-box; color: #fff; position: relative; line-height: 1rem; }
.audioModal .musicList .music-item img { vertical-align: middle; }
.audioModal .musicList .music-item .music-header { width: .78rem; height: .78rem; object-fit: contain; margin-right: .3rem; }
.audioModal .musicList .music-item span { font-size: .24rem; font-family: "Noto Sans CJK KR"; font-weight: 400; color: #fff; }
.audioModal .musicList .music-item .play-icon { position: absolute; right: .8rem; top: .3rem; }
.audioModal .musicList .music-item .is-playing-icon { display: none; }
.audioModal .musicList .music-item.is-current-playing .is-playing-icon { display: inline; }
.audioModal .musicList .music-item.is-current-playing .suspend { display: none; }
@keyframes m-cover-rotate { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } }
@keyframes m-pointer-on { 0% { transform: rotate(-30deg); transform-origin: right top; } to { transform: rotate(-2deg); transform-origin: right top; } }
@keyframes m-pointer-off { 0% { transform: rotate(-2deg); transform-origin: right top; } to { transform: rotate(-30deg); transform-origin: right top; } }

/* 画廊弹窗 */
.videoModal.van-popup { height: 100%; background-repeat: no-repeat !important; background-size: 100% 100% !important; background-position: 50% !important; z-index: 2003; } /* 线上 padding 规则带作用域、实际不生效 */
.videoModal > .video-cont .close { width: .67rem; height: .67rem; position: absolute; top: 1rem; right: .34rem; }
.videoModal .video-cont .title { margin-left: .95rem; }
.videoModal .video-cont .title img { display: block; }
.videoModal .video-cont .title .ost { width: 1.45rem; height: .69rem; object-fit: contain; margin-top: 1.57rem; }
.videoModal .video-cont .title .audio-line { width: 3.65rem; height: .16rem; object-fit: contain; margin-top: .1rem; }
.van-tabs { position: relative; margin-top: 0; }
.van-tabs--line .van-tabs__wrap { height: 44px; overflow: hidden; }
.van-tabs__nav { position: relative; display: flex; background: transparent !important; user-select: none; }
.van-tabs__nav--line { box-sizing: content-box; height: 100%; padding-bottom: 15px; }
.van-tab { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 4px; color: #191e38 !important; font-size: .4rem !important; line-height: 20px; cursor: pointer; }
.van-tab.van-tab--active { color: #8f79ff !important; font-weight: 500; }
.van-tabs__line { position: absolute; bottom: 15px; left: 0; z-index: 1; width: 1.4rem !important; height: 3px; background: #8f79ff !important; border-radius: 3px; transition-duration: .3s; }
.videoModal .video-cont .image-tab-cont,
.videoModal .video-cont .video-tab-cont { width: 6rem; margin: .3rem auto 0; position: relative; }
.videoModal .video-cont .video-tab-cont { display: none; }
.videoModal.is-video .image-tab-cont { display: none; }
.videoModal.is-video .video-tab-cont { display: block; }
.videoModal .video-cont .image-tab-cont .image { width: 100%; height: 3.42rem; margin-bottom: .2rem; object-fit: contain; vertical-align: middle; }
.videoModal .video-cont .video-tab-cont iframe { width: 100%; border: 0; }
.videoModal .video-cont .left-prev { width: .47rem; height: .47rem; position: absolute; left: -.57rem; top: 50%; transform: translateY(-50%); z-index: 2; }
.videoModal .video-cont .right-next { width: .47rem; height: .47rem; position: absolute; right: -.57rem; top: 50%; transform: translateY(-50%); z-index: 2; }
.videoModal .van-overlay { z-index: 2004; }
.preview-Modal.van-popup { height: 100%; z-index: 2005; }
.preview-Modal .video-cont { position: relative; width: 100vw; height: 100vh; }
.preview-Modal .video-cont .close { width: .67rem; height: .67rem; position: absolute; top: 1rem; right: .34rem; z-index: 99; }
.preview-Modal .video-cont .preview-cont-image { width: 100%; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 90; }
.preview-Modal .video-cont .download { width: .6rem; height: .6rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 2.8rem; z-index: 99; }
.preview-Modal .video-cont .download img { width: 100%; height: 100%; object-fit: contain; }

/* ================================================================
   커뮤니티 + 页脚
   ================================================================ */
.seventh-screen .share-cont { height: 8.4rem; padding-top: 1.46rem; box-sizing: border-box; background-repeat: no-repeat; background-size: cover; }
.seventh-screen .share-cont .title { width: 2.98rem; height: .78rem; margin: 0 auto .97rem; }
.seventh-screen .share-cont .title img { width: 100%; height: 100%; object-fit: contain; }
.seventh-screen .share-cont .share-btm, .seventh-screen .share-cont .share-top { display: flex; padding: 0 .9rem; margin-bottom: .49rem; }
.seventh-screen .share-cont .share-item { flex: 1; width: 1.607rem; height: 1.607rem; position: relative; }
.seventh-screen .share-cont .share-item:nth-of-type(2) { margin: 0 .44rem; }
.seventh-screen .share-cont .share-item .defaut { width: 100%; height: 100%; object-fit: contain; display: inline-block; }
.seventh-screen .share-cont .share-item .media { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: .33rem; height: .33rem; display: inline-block; object-fit: contain; margin-left: -.02rem; }
.share-top .share-item:nth-child(1) .media { width: .47rem; height: .33rem; }
.share-top .share-item:nth-child(2) .media { width: .5rem; height: .42rem; }
.share-top .share-item:nth-child(3) .media { width: .445rem; height: .435rem; }
.share-btm .share-item:nth-child(1) .media { width: .489rem; height: .406rem; }
.share-btm .share-item:nth-child(2) .media { width: .223rem; height: .468rem; }
.share-btm .share-item:nth-child(3) .media { width: .384rem; height: .435rem; }
.seventh-screen .footer { height: 2.38rem; background: #050508; padding-top: .61rem; box-sizing: content-box; }
.seventh-screen .footer .footer-comp { height: .75rem; text-align: center; margin-bottom: .47rem; }
.seventh-screen .footer .footer-comp img { width: 2.28rem; height: 100%; }
.seventh-screen .footer .footer-comp img:first-of-type { margin-right: .6rem; }
.seventh-screen .footer .footer-comp-desc { font-size: .15rem; font-family: Arial; font-weight: 400; color: #818181; line-height: .3rem; text-align: center; }