@charset "utf-8";
/* 1:1 复刻 dislyte-kr.farlightgames.com（设计基准 1920×1080，源站 1rem = 本文件 1px） */

@font-face { font-family: "TmonMonsori"; src: url("../font/TmonMonsori.ttf"); font-display: swap; }
@font-face { font-family: "Noto Sans CJK KR"; src: url("../font/NotoSansCJKkr-Medium.otf"); font-display: swap; }
@font-face { font-family: "element-icons"; src: url("../font/element-icons.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }

* { margin: 0; padding: 0; box-sizing: border-box; }
a { text-decoration: none; color: inherit; cursor: pointer; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; overflow: hidden; }
body { font-size: 1px; font-family: "Noto Sans CJK KR"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: #1b1725; }
img { display: block; }
ul, li { list-style: none; }
::-webkit-scrollbar { width: 0 !important; }

.el-icon-close { font-family: "element-icons" !important; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; vertical-align: baseline; display: inline-block; -webkit-font-smoothing: antialiased; }
.el-icon-close:before { content: "\e6db"; }

/* ================================================================
   Layer 0：全局根 — 决定整体缩放
   ================================================================ */
#page-root {
  position: fixed;
  top: 0; left: 0;
  width: var(--root-w, 100vw);
  height: var(--root-h, 100vh);
  overflow: hidden;
  background: #1b1725;
  transform-origin: top left;
  transform: scale(var(--page-scale, 1));
}

/* ================================================================
   Swiper 容器（整屏翻页）
   ================================================================ */
.swiper.outer-swiper { width: 100%; height: 100%; }
.swiper.outer-swiper > .swiper-wrapper > .swiper-slide { width: 100%; height: 100%; position: relative; overflow: hidden; }

/* ================================================================
   Layer 1：背景层 (z-index: 0)；源站背景为整屏拉伸铺满（object-fit: fill）
   ================================================================ */
.slide-bg-full {
  position: absolute; inset: 0;
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}
#page-root.is-over-design .slide-bg-full,
#page-root.is-over-design .community-bg {
  background-size: 3840px 2160px;
  background-position: center center;
}

/* ================================================================
   Layer 2：设计画布层 (z-index: 10)
   ================================================================ */
.slide-canvas {
  width: 1920px;
  height: 1080px;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(var(--pc-scale, 1));
  transform-origin: center center;
  z-index: 10;
}

/* ================================================================
   Layer 4：顶部导航 (z-index: 1000)
   ================================================================ */
.tab-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background-color: #1b1725;
  z-index: 1000;
}
.menu-inner { position: relative; z-index: 9; width: 1400px; height: 80px; margin: 0 auto; padding-left: 307.2px; }
.nav { height: 80px; }
.nav-item {
  float: left;
  height: 80px; line-height: 80px;
  padding: 0 38.25px;
  font-family: "TmonMonsori";
  font-size: 24px; font-weight: 900;
  color: #656565;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: border-color .3s, color .3s;
}
.nav-item a { display: block; color: inherit; }
.nav-item.is-active {
  color: #fff;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, #21ffd8, #f119ff) 2 2 2 2;
}
.bgm-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); cursor: pointer; }
.bgm-toggle img { width: 26px; height: 24px; vertical-align: middle; }
.bgm-toggle .bgm-off { display: none; }
.bgm-toggle:not(.is-on) .bgm-on { display: none; }
.bgm-toggle:not(.is-on) .bgm-off { display: block; }

/* 右上社区圆盘（视口锚定，距右边缘 = EDGE_GAP_BASE） */
.dial { width: 225px; height: 197px; border-radius: 50%; position: absolute; right: var(--edge-gap, 86px); top: 0; z-index: 2; cursor: pointer; }
.dial-badge { width: 100%; height: 100%; object-fit: contain; }
.dial-share { width: 290px; height: 200px; position: absolute; right: -30px; top: 31px; opacity: 0; }
.dial-bg { width: 100%; height: 100%; object-fit: contain; }
.dial-pointer { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0deg); margin-top: -10px; width: 85px; height: 85px; object-fit: contain; }
.dial-icon { position: absolute; width: 22px; height: 22px; }
.dial-icon img { width: 100%; height: 100%; object-fit: contain; }
.dial-icon img:nth-of-type(2) { display: none; }
.dial-icon:hover img:first-of-type { display: none; }
.dial-icon:hover img:nth-of-type(2) { display: inline-block; transform: scale(1.3); }
.dial-icon-naver { width: 19px !important; height: 23px; left: 70px; top: 50%; transform: translateY(-50%); margin-top: -15px; }
.dial-icon-youtube { left: 76px; top: 50%; transform: translateY(-50%); margin-top: 20px; }
.dial-icon-tiktok { right: 68px; top: 50%; transform: translateY(-50%); margin-top: -17px; }
.dial-icon-facebook { right: 80px; top: 50%; transform: translateY(-50%); margin-top: 22px; }
.dial-icon-instagram { left: 112px; top: 50%; transform: translateY(-50%); margin-top: 50px; }
.dial-icon-twitter { right: 106px; top: 50%; transform: translateY(-50%); margin-top: 50px; }
.dial-arrow { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) scale(.8); animation: dial-run 1.2s linear infinite; width: 46px; height: 63px; }
.dial:hover .dial-badge { animation: dial-fade-out .5s linear 0s 1 alternate forwards; }
.dial:hover .dial-share { animation: dial-fade-in .5s linear 0s 1 alternate forwards; }
.dial:hover .dial-arrow { display: none; }
/* 盖住圆盘上半截的导航底色块（源站 pointer-modal） */
.dial-mask { position: absolute; width: calc(var(--edge-gap, 86px) + 214px); height: 100%; right: 0; top: 0; background: #1b1725; z-index: 3; }
@keyframes dial-fade-out { 0% { opacity: 1; } to { opacity: 0; } }
@keyframes dial-fade-in { 0% { opacity: 0; top: 0; } to { opacity: 1; top: 31px; } }
@keyframes dial-run { 0% { bottom: 0; } 50% { bottom: -5px; } to { bottom: 0; } }

/* 各屏左上角小 Logo（视口锚定在左边缘） */
.screen-logo { position: absolute; left: calc(var(--edge-gap, 86px) * 29 / 86); top: 100px; width: 149px; height: 46px; cursor: pointer; z-index: 20; }
.screen-logo img { width: 100%; object-fit: contain; }
.screen-logo-esper { top: 90px; }
.screen-title { height: 70px; position: absolute; top: 160px; left: 50%; transform: translateX(-50%); }
.screen-title img { width: 100%; height: 100%; object-fit: contain; }

/* ================================================================
   第1屏：KV
   ================================================================ */
.slide-kv { cursor: default; }
.kv-video { position: absolute; left: 0; top: 80px; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; }
.kv-mask { position: absolute; left: 0; top: 80px; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); z-index: 2; }
.slide-kv .slide-canvas img { width: 100%; object-fit: contain; }
.kv-slogan { position: absolute; left: 50%; top: 140px; width: 456px; height: 70px; transform: translateX(-50%); }
.kv-logo { position: absolute; left: 50%; top: 240px; width: 539px; height: 170px; transform: translateX(-50%); }
.kv-play { position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; margin-top: 50px; transform: translate(-50%, -50%); cursor: pointer; }
.kv-download-title { position: absolute; left: 50%; top: 50%; width: 465px; height: 58px; margin-top: 200px; transform: translate(-50%, -50%); cursor: pointer; }
.slide-kv .kv-download-title img { height: 100%; }
.kv-stores { position: absolute; left: 50%; top: 50%; width: 510px; height: 71px; margin-top: 300px; transform: translate(-50%, -50%); display: flex; }
.kv-store { flex: 1; cursor: pointer; display: block; }
.kv-store-ios { margin-right: 10px; }
.slide-kv .kv-store img { height: 100%; }
.kv-next { position: absolute; left: 50%; bottom: 30px; width: 30px; height: 30px; transform: translate(-50%, -50%); cursor: pointer; animation: kv-next 1.2s ease-in-out infinite; }
@keyframes kv-next { 0% { bottom: 30px; } 50% { bottom: 10px; } to { bottom: 30px; } }

/* ================================================================
   第2屏：세계관
   ================================================================ */
.wv-title { width: 278px; }
.wv-carousel { position: absolute; left: 50%; top: 50%; width: 1344px; height: 450px; margin-top: 50px; transform: translate(-50%, -50%); font-family: "TmonMonsori"; }
.wv-swiper { width: 100%; height: 100%; }
.wv-slide { overflow: hidden; }
.wv-slide-title { width: 360px; height: 50px; margin: 20px auto 50px; text-align: center; position: relative; font-weight: 900; }
.wv-slide-title-text { font-size: 48px; color: #6fffdb; font-weight: 900; }
.wv-slide-title img { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); height: 4px; width: 100%; object-fit: fill; }
.wv-desc { text-align: center; font-size: 18px; font-weight: 400; color: #fff; line-height: 38px; margin: 0; font-family: "Noto Sans CJK KR"; }
.wv-btn { position: absolute; width: 60px; height: 41px; top: 50%; cursor: pointer; z-index: 9; }
.wv-btn img { width: 100%; object-fit: contain; }
.wv-prev { left: 0; transform: rotate(180deg); margin-top: -20px; }
.wv-next { right: 0; transform: translateY(-50%); }
.wv-cards { position: absolute; left: 50%; bottom: 100px; width: 1030px; height: 120px; margin-left: -515px; display: flex; font-family: "TmonMonsori"; }
.wv-card { flex: 1; margin: 0 20px; height: 160px; background: linear-gradient(122deg, #a080ff, #cbb7ff); border-radius: 6px; padding: 10px; text-align: center; cursor: pointer; position: relative; }
.wv-card.is-active { background: linear-gradient(122deg, #2bd9e4, #6afca7); }
.wv-card-icon { position: absolute; left: 50%; top: 15px; transform: translateX(-50%); object-fit: contain; }
.wv-card:nth-child(1) .wv-card-icon { width: 72px; height: 93.5px; }
.wv-card:nth-child(2) .wv-card-icon { width: 72.4px; height: 88px; }
.wv-card:nth-child(3) .wv-card-icon { width: 84.3px; height: 84.2px; }
.wv-card:nth-child(4) .wv-card-icon { width: 84px; height: 91.7px; }
.wv-card:nth-child(5) .wv-card-icon { width: 82.5px; height: 89.5px; }
.wv-card:nth-child(6) .wv-card-icon { width: 92.4px; height: 91.8px; }
.wv-card-line { width: 100%; padding: 0 10px; height: 3px; object-fit: fill; position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); }
.wv-card-text { width: 100%; height: 18px; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); object-fit: contain; }

/* ================================================================
   第3屏：에스퍼
   ================================================================ */
.esper-line { position: absolute; z-index: 1; pointer-events: none; }
.esper-line-top { top: 30px; left: 0; width: 40%; }
.esper-line-bottom { bottom: -60px; right: 0; width: 50%; }
.esper-title { width: 328px; }
.esper-list-box {
  position: absolute; left: 180px; bottom: 60px;
  width: 220px; height: 756px; padding: 20px 15px;
  background: linear-gradient(0deg, rgba(198, 200, 210, .4), hsla(0, 0%, 100%, .4));
  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, .14);
  border-radius: 10px;
  z-index: 2;
}
.esper-list { height: 100%; width: 70%; overflow-y: auto; text-align: center; }
.esper-thumbs { width: 100%; }
.esper-thumbs img { width: 78px; height: 78px; margin: 10px auto; display: block; cursor: pointer; }
.esper-thumbs img.is-active { width: 113px; height: 78px; }
.esper-scroll { position: absolute; right: 30px; top: 30px; height: 85%; }
.c-progress { display: flex; align-items: center; cursor: pointer; }
.c-progress-outer { width: 30px; height: 676px; border-radius: 5px; display: flex; align-items: center; position: relative; }
.c-progress-track { width: 2px; height: 676px; position: absolute; left: 50%; top: 0; transform: translateX(-50%); background: #b3b3b3; }
.c-progress-fill { height: 20px; width: 2px; border-radius: 5px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #2c214d; }
.c-progress-slider { width: 20px; height: 20px; border-radius: 50%; border: 5px solid #c9bee9; background: #2c214d; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 10; cursor: pointer; }
.esper-carousel { position: absolute; top: 0; bottom: 0; right: 0; left: calc(50% - 422.4px); z-index: 10; }
.esper-swiper { width: 100%; height: 100%; }
.esper-slide { width: 100%; height: 100%; position: relative; overflow: hidden; }
.esper-info { width: 680px; height: 500px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin-top: 60px; z-index: 9; opacity: 0; }
.esper-role { font-family: "Noto Sans CJK KR"; font-size: 40px; font-weight: 900; color: #2c214d; line-height: 51px; margin-bottom: 20px; }
.esper-name { font-family: "TmonMonsori"; font-size: 75px; font-weight: 900; color: #5e2da9; line-height: 51px; margin: 5px 0 20px; }
.esper-combat { margin-top: 10px; width: 462px; height: 44px; background: hsla(0, 0%, 100%, .6); border-radius: 3px; font-size: 0; }
.esper-combat img { display: inline-block; }
.esper-class { width: 30px; height: 30px; margin: 8px 21px 0 16px; vertical-align: baseline; }
.esper-combat-line { height: 22px; width: 232px; vertical-align: top; margin-top: 13px; margin-right: 10px; object-fit: contain; }
.esper-star { width: 15px; height: 23px; vertical-align: top; margin: 13px 6px 0; object-fit: contain; }
.esper-audio { margin-top: 50px; }
.esper-audio-icon { display: inline-block; width: 32px; height: 32px; vertical-align: middle; border-radius: 50%; text-align: center; margin-top: -8px; cursor: pointer; }
.esper-audio-icon img { width: 100%; margin-top: -2px; }
.esper-audio-icon .voice-playing { display: none; }
.slide-esper.is-voice-playing .esper-audio-icon .voice-playing { display: block; }
.slide-esper.is-voice-playing .esper-audio-icon .voice-idle { display: none; }
.esper-cv { margin-left: 10px; font-size: 24px; font-weight: 500; color: #1b1a30; line-height: 34px; font-family: "Noto Sans CJK KR"; }
.esper-audio-line { width: 533px; height: 2px; background: #1b1a30; margin-top: 10px; }
.esper-quote { font-size: 28px; font-weight: 900; color: #150c31; margin: 40px 0 20px; font-family: "TmonMonsori"; }
.esper-desc p { margin: 0; font-size: 18px; font-weight: 400; color: #1b1a30; line-height: 28px; font-family: "Noto Sans CJK KR"; }
.esper-image { position: absolute; width: 805px; height: 100%; opacity: 0; right: 0; top: calc(50% - 540px + var(--img-top, 0px)); }
.esper-image img { width: 100%; object-fit: contain; }
.esper-slide.is-current .esper-info { animation: esper-show-text 1s linear 0s 1 alternate forwards; }
.esper-slide.is-current .esper-image { animation: esper-show-image 1s linear 0s 1 alternate forwards; }
/* 立绘纵向位置（源站 imageStyle） */
.esper-slide:nth-child(1) .esper-image { --img-top: 80px; }
.esper-slide:nth-child(2) .esper-image { --img-top: 80px; }
.esper-slide:nth-child(3) .esper-image { --img-top: -100px; }
.esper-slide:nth-child(4) .esper-image { --img-top: 140px; }
.esper-slide:nth-child(5) .esper-image { --img-top: -80px; }
.esper-slide:nth-child(6) .esper-image { --img-top: -80px; }
.esper-slide:nth-child(7) .esper-image { --img-top: -150px; }
.esper-slide:nth-child(8) .esper-image { --img-top: 160px; margin-right: 200px; }
.esper-slide:nth-child(9) .esper-image { --img-top: 100px; }
.esper-slide:nth-child(10) .esper-image { --img-top: -300px; }
.esper-slide:nth-child(11) .esper-image { --img-top: -100px; }
.esper-slide:nth-child(12) .esper-image { --img-top: 60px; }
@keyframes esper-show-text { 0% { left: -400px; opacity: 0; } 30% { left: -400px; opacity: 0; } to { left: 0; opacity: 1; } }
@keyframes esper-show-image { 0% { right: -400px; opacity: 0; } 30% { right: -400px; opacity: 0; } to { right: 0; opacity: 1; } }

/* ================================================================
   第4屏：미디어
   ================================================================ */
.media-title { width: 271px; }
.media-gallery { position: absolute; left: 50%; top: 50%; width: 500px; height: 450px; transform: translate(-50%, -50%); margin-top: 45px; margin-left: -350px; }
.media-gallery-title { font-size: 0; }
.media-gallery-title span { font-size: 60px; font-weight: 900; color: #fff; line-height: 51px; font-family: "TmonMonsori"; margin-right: .25em; }
.media-gallery-title img { display: inline-block; width: 186px; height: 5px; vertical-align: bottom; }
.media-subtitle { font-size: 20px; font-weight: 400; color: #fff; line-height: 34px; margin: 10px 0; font-family: "Noto Sans CJK KR"; }
.media-more { width: 102px; height: 41px; background: hsla(0, 0%, 100%, .4); border: 1px solid #fff; border-radius: 20px 0 20px; text-align: center; line-height: 41px; color: #fff !important; cursor: pointer; position: relative; z-index: 7; font-size: 16px !important; }
.media-more:hover { background: rgba(8, 48, 255, .4); border-color: rgba(8, 48, 255, .4); }
.media-gallery-cover { position: absolute; top: 170px; width: 100%; cursor: pointer; }
.media-gallery-cover img { width: 100%; object-fit: contain; }
.media-ost { position: absolute; left: 50%; top: 50%; width: 500px; height: 450px; transform: translate(-50%, -50%); margin-top: 98px; margin-left: 350px; text-align: right; }
.media-ost-img { width: 100%; position: relative; left: 55px; cursor: pointer; }
.media-ost-img img { width: 100%; object-fit: contain; }
.media-ost-img .media-ost-mascot { position: absolute; right: -20px; top: -100px; width: 207px; height: 228px; }
.media-ost-title { font-size: 0; }
.media-ost-title img { display: inline-block; width: 130px; height: 18px; object-fit: contain; vertical-align: middle; }
.media-ost-title span { font-size: 60px; font-weight: 900; color: #fff; line-height: 51px; font-family: "TmonMonsori"; }
.media-ost-subtitle { font-size: 22px; }
.media-more-ost { float: right; font-family: "Noto Sans CJK KR"; border-radius: 20px 0 20px 0; }

/* ================================================================
   第5屏：커뮤니티 + 页脚
   ================================================================ */
.community-bg { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 270px); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; z-index: 1; pointer-events: none; }
.screen-logo-community { z-index: 20; }
.community-title { width: 346px; z-index: 2; }
.community-links { position: absolute; left: 50%; top: 50%; width: 1100px; height: 180px; margin-top: 20px; transform: translate(-50%, -50%); display: flex; z-index: 2; }
.community-link { flex: 1; margin: 0 20px; position: relative; cursor: pointer; }
.community-link .link-bg { width: 100%; object-fit: contain; display: inline-block; }
.community-link .link-bg-hover { width: 100%; object-fit: contain; display: none; }
.community-link .link-icon,
.community-link .link-icon-active { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; margin-top: -20px; margin-left: -3px; object-fit: contain; }
.community-link .link-icon-active { display: none; }
.community-link:hover .link-bg { display: none; }
.community-link:hover .link-bg-hover { display: inline-block; }
.community-link:hover .link-icon { display: none; }
.community-link:hover .link-icon-active { display: block; }
.community-link:first-of-type .link-icon,
.community-link:first-of-type .link-icon-active { width: 30px !important; height: 30px !important; margin-left: -4px; }
.site-footer { position: absolute; left: 0; right: 0; bottom: 0; height: 350px; background: #050508; font-family: Helvetica; z-index: 0; }
.footer-logo { position: absolute; left: 50%; top: 120px; transform: translateX(-50%); width: 203px; height: 79px; object-fit: contain; }
.footer-logo-farlight { margin-left: -130px; }
.footer-logo-lilith { margin-left: 130px; }
.footer-notice,
.footer-copyright { width: 100%; height: 13px; font-size: 14px; font-weight: 400; color: #818181; line-height: 30px; position: absolute; left: 50%; transform: translateX(-50%); text-align: center; font-family: Helvetica; }
.footer-notice { top: 210px; margin-top: 14px; }
.footer-copyright { top: 180px; margin-top: 80px; }

/* ================================================================
   弹窗（源站 el-dialog）
   ================================================================ */
.modal { display: none; position: absolute; inset: 0; z-index: 2000; }
.modal.is-open { display: block; animation: modal-in .3s; }
@keyframes modal-in { 0% { opacity: 0; } to { opacity: 1; } }
.modal-overlay { position: absolute; inset: 0; background: #000; opacity: .5; }
.el-icon-close { color: inherit; }

/* YouTube 视频弹窗 */
.ytb-dialog { position: relative; width: 70%; height: 700px; margin: 15vh auto 0; border-radius: 20px; }
.ytb-modal .ytb-dialog { margin-top: calc(var(--root-h, 100vh) * .15); }
.ytb-dialog .modal-close { font-size: 60px; position: absolute; right: -50px; top: -50px; cursor: pointer; color: #fff; z-index: 2; }
.ytb-frame { display: block; width: 100%; height: 100%; border: 0; }

/* 全屏弹窗通用 */
.full-modal { background-color: #fff; background-repeat: no-repeat; padding: 25px 25px 30px; font-size: 14px; color: #606266; }
.gallery-modal { background-size: cover; }
.ost-modal { background-size: 100% 100%; overflow: hidden; }
.modal-title { position: absolute; font-size: 70px; font-family: "TmonMonsori"; font-weight: 900; color: #191932; line-height: 111px; top: 50px; left: 0; white-space: nowrap; }
.modal-title-deco { position: absolute; top: 90px; left: 0; height: 16px; width: 365px; }

/* 画廊弹窗 */
.gallery-close { position: absolute; right: 30px; top: 30px; cursor: pointer; z-index: 9; }
.gallery-close i { font-size: 60px; color: #9ba7db; }
.gallery-cont { width: 1200px; height: 100%; position: relative; margin: 0 auto; }
.gallery-cont .modal-title { width: 219px; height: 66px; }
.gallery-tabs { position: absolute; left: 400px; top: 100px; display: flex; height: 50px; font-family: "Noto Sans CJK KR"; }
.gallery-tab { font-size: 28px; padding: 0 40px; line-height: 50px; height: 50px; font-weight: 700; color: #303133; cursor: pointer; position: relative; }
.gallery-tab:first-child { padding-left: 0; }
.gallery-tab:last-of-type { padding-right: 0; }
.gallery-tab:hover,
.gallery-tab.is-active { color: #8f78ff; }
.gallery-tab-bar { position: absolute; left: 0; bottom: 0; height: 2px; background-color: #8f78ff; transition: transform .3s cubic-bezier(.645, .045, .355, 1), width .3s cubic-bezier(.645, .045, .355, 1); }
.gallery-body { position: absolute; top: 210px; left: 0; height: 70%; width: 100%; }
.gallery-pane { position: absolute; inset: 0; }
.gallery-pane-movie { display: none; }
.gallery-modal.is-movie .gallery-pane-image { display: none; }
.gallery-modal.is-movie .gallery-pane-movie { display: block; }
.gallery-swiper { width: 100%; height: 100%; }
.gallery-grid { display: flex; height: 100%; margin: 0 -10px; }
.gallery-col { width: 33.3333%; height: 100%; padding: 0 10px; }
.gallery-col img { width: 100%; height: 50%; object-fit: cover; cursor: pointer; display: block; }
.gallery-col img:first-child { margin-bottom: 20px; }
.gallery-col iframe { display: block; width: 100%; height: 50%; border: 0; }
.gallery-col iframe:first-child { margin-bottom: 20px; }
.gallery-btn { width: 46px; height: 46px; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 9; }
.gallery-btn img { width: 100%; height: 100%; object-fit: contain; }
.gallery-prev { left: -80px; }
.gallery-next { right: -80px; }

/* OST 弹窗 */
.ost-modal { padding: 0; }
.ost-body { position: relative; width: 100%; height: 100%; padding: 25px 25px 30px; }
.ost-close { position: absolute; right: 30px; top: 30px; cursor: pointer; z-index: 30; }
.ost-close i { font-size: 40px; color: #fff; }
.ost-title { width: 183px; height: 63px; left: 200px; top: 50px; }
.ost-cont { margin: 100px auto 0; width: 1000px; height: 613px; position: relative; }
.ost-track-title { margin: 0 auto; text-align: center; width: 200px; height: 28px; font-size: 31px; font-family: Impact, "Times New Roman", serif; font-weight: 400; color: #fff; line-height: 123px; white-space: nowrap; }
.ost-disc { width: 500px; height: 500px; position: absolute; border-radius: 50%; left: 50%; bottom: 0; transform: translateX(-50%); }
.ost-cover { width: 520px; height: 520px; margin-top: -10px; margin-left: -10px; }
.ost-modal.is-playing .ost-cover { animation: ost-cover-rotate 10s linear infinite; }
.ost-disc-bg { width: 500px; height: 500px; margin-top: -10px; margin-left: -10px; object-fit: contain; position: absolute; left: 10px; top: 10px; display: inline-block; z-index: 9; }
.ost-tonearm { width: 270px; height: 340px; position: absolute; right: 60px; top: 100px; z-index: 9; transform: rotate(-15deg); transform-origin: right top; }
.ost-tonearm img { width: 100%; height: 100%; object-fit: contain; }
.ost-modal.is-playing .ost-tonearm { animation: ost-arm-on .5s linear 0s 1 alternate forwards; }
.ost-modal.is-paused .ost-tonearm { animation: ost-arm-off .5s linear 0s 1 alternate forwards; }
.ost-side { width: 189px; height: 189px; border-radius: 50%; background: url("../img/common/ost/icon-frame.lossless.png") no-repeat; background-size: 100%; padding: 8px; position: absolute; bottom: 30px; }
.ost-side img { width: 100%; height: 100%; object-fit: fill; border-radius: 50%; }
.ost-side-prev { left: 0; }
.ost-side-next { right: 0; }
.ost-bar { height: 100px; width: 700px; position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px; line-height: 80px; text-align: center; display: flex; z-index: 9; }
.ost-btn { flex: 1; cursor: pointer; }
.ost-btn img { display: inline-block; width: 30px; height: 30px; vertical-align: middle; margin-top: -10px; }
.ost-volume { font-size: 20px; position: relative; }
.ost-volume-box { width: 50px; height: 50px; position: absolute; top: 15px; left: 50%; transform: translateX(-50%); line-height: 50px; }
.ost-volume-box img { width: 30px; height: 30px; position: relative; z-index: 9; }
.ost-volume-box .vol-off { display: none; }
.ost-modal.is-muted .ost-volume-box .vol-on { display: none; }
.ost-modal.is-muted .ost-volume-box .vol-off { display: inline-block; }
.ost-prev, .ost-next { font-size: 20px; }
.ost-prev img, .ost-next img { width: 18px; height: 18px; vertical-align: middle; }
.ost-prev img:nth-of-type(2), .ost-next img:nth-of-type(2) { display: none; }
.ost-prev:hover img, .ost-next:hover img { display: inline-block; }
.ost-prev:hover img:first-of-type, .ost-next:hover img:first-of-type { display: none; }
.ost-play { font-size: 40px; margin-top: -5px; }
.svg-icon { width: 1em; height: 1em; vertical-align: -.15em; fill: currentColor; overflow: hidden; display: inline-block; }
.ost-play .icon-pause { display: none; }
.ost-modal.is-playing .ost-play .icon-play { display: none; }
.ost-modal.is-playing .ost-play .icon-pause { display: inline-block; }
.ost-list-btn .list-open { display: none; }
.ost-modal.is-list-open .ost-list-btn .list-open { display: inline-block; }
.ost-modal.is-list-open .ost-list-btn .list-closed { display: none; }
.ost-list { display: none; width: 277px; height: 330px; background: #232438; border-radius: 6px; position: absolute; right: -300px; bottom: 10px; overflow-y: scroll; padding-bottom: 20px; z-index: 20; }
.ost-modal.is-list-open .ost-list { display: block; }
.ost-mode { height: 40px; text-align: right; padding-right: 28px; }
.ost-mode img { width: 24px; height: 20px; margin-top: 10px; display: none; vertical-align: top; cursor: pointer; }
.ost-modal[data-mode="repeat-all"] .ost-mode .mode-repeat-all,
.ost-modal[data-mode="repeat-one"] .ost-mode .mode-repeat-one,
.ost-modal[data-mode="random"] .ost-mode .mode-random { display: inline-block; }
.ost-list-box { width: 100%; }
.ost-list-item { padding: 0 30px; }
.ost-list-item:hover { background: hsla(0, 0%, 100%, .08); }
.ost-list-item p { margin: 0; height: 60px; line-height: 60px; font-size: 24px; text-align: left; border-bottom: 1px solid #333; }
.ost-list-item .music-header { display: inline-block; width: 40px; height: 40px; border-radius: 50%; vertical-align: middle; }
.ost-list-item span { margin: 0 20px; font-size: 15px; font-family: "Noto Sans CJK KR"; font-weight: 400; color: #fff; line-height: 50px; }
.ost-list-item .play-icon { width: 18px; height: 18px; margin-top: 25px; float: right; cursor: pointer; }
.ost-list-item .play-icon.is-playing { display: none; }
.ost-list-item.is-current-playing .play-icon.is-playing { display: block; }
.ost-list-item.is-current-playing .play-icon.is-idle { display: none; }
.ost-run-line { position: absolute; right: -25px; bottom: 60px; width: 600px; height: 54px; transform: rotate(-30deg) scale(1.5); z-index: 1; }
.ost-run-line img { position: absolute; right: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
.ost-run-line .ost-run-text { z-index: 2; transform: scale(1.4); animation: ost-run 7s linear infinite; }
@keyframes ost-run { 0% { right: 0; } to { right: -145px; } }
@keyframes ost-cover-rotate { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } }
@keyframes ost-arm-on { 0% { transform: rotate(-15deg); } to { transform: rotate(0deg); } }
@keyframes ost-arm-off { 0% { transform: rotate(0deg); } to { transform: rotate(-15deg); } }