@charset "utf-8";

/* fonts */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'GangwonEducationSaeum';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduSaeeum_OTFMediumA.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

/* base */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: inherit; vertical-align: baseline; box-sizing: border-box;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote::before, blockquote::after, q::before, q::after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
table caption {overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0;}
a {color: #111; text-decoration: none;}
label, img {vertical-align: middle;}
html {-webkit-text-size-adjust: antialiased; -moz-osx-font-smoothing: grayscale;}
input {-webkit-border-radius: 0; border-radius: 0; -webkit-appearance: none; appearance: none;}
:focus {outline: 1px solid  #fff !important; box-sizing: border-box !important; box-shadow: 0 0 0 1px inset #111 !important;}
:focus:not(:focus-visible) {outline: none !important; box-shadow: none !important;}
::placeholder {color: #ccc !important; font-weight: 400;}
::-webkit-input-placeholder {color: #ccc !important; font-weight: 400;}
:-ms-input-placeholder {color: #ccc !important; font-weight: 400;}
a, button, input, select, div, li, span, p {-webkit-tap-highlight-color: rgba(0,0,0,.025);}

html {font-size: 62.5%;}
body {font-size: 1.6rem; font-family: 'Pretendard', system-ui, -apple-system, sans-serif, sans-serif; color: #111; background: #fff; line-height: 1.5; margin: 0; min-width: 320px;}

/* 부드러운 스크롤 */
html {scroll-behavior: smooth;}
:target {scroll-margin-top: 160px;}
@media (prefers-reduced-motion: reduce) {
    html {scroll-behavior: auto;}
}

/* 공통 */
body {opacity: 0; background: #000;}
body.fixed {overflow: hidden;}
.wrap {display: flex; flex-direction: column; justify-content: center;}
.inner {width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 2rem;}
.underline {text-decoration: underline;}
.video-wrap {position: relative; width: 100%; padding-top: 56.25%;}
.video-wrap iframe,
.video-wrap > video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/* 바로가기 */
.skip {position: absolute;}
.skip a {display: block; position: fixed; left: 0; top: -9999px; overflow: hidden; width: 100%; background: black; color: #fff; font-size: 1.2em; font-weight: bold; text-align: center;}
.skip a:focus {position: fixed; top: 0; padding: 1.1em 0; z-index: 99999; outline: none !important;}

/* popup */
.pop {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,.5); z-index: 100; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .3s; padding: 4rem;}
.pop.show {visibility: visible; opacity: 1; pointer-events: all; display: flex !important;}
.pop-container {display: flex; width: 100%; max-width: 90rem; padding: 4rem 3rem; flex-direction: column; justify-content: center; align-items: center; border-radius: .8rem; background: #fff; max-height: 100%; position: relative;}
.pop .tit {font-size: 3.2rem; font-weight: 700; line-height: 3.4rem; margin-bottom: 3rem;}
.pop h3 {font-size: 2rem; margin-top: 4rem;}
.pop p, .pop ul, .pop ol {text-align: left; font-size: 1.8rem; font-weight: 400; line-height: 1.6;}
.pop li {margin-bottom: 1rem; line-height: 1.35;}
.pop ul, .pop ol {margin-bottom: 1rem; padding: 1rem;}
.pop p.t {margin-top: 1rem;}
.pop .pop-cont {overflow: auto; height: calc( 100% - 10rem ); padding: 0 2rem;}
.pop .pop-cont::-webkit-scrollbar {width: .6rem;}
.pop .pop-cont::-webkit-scrollbar-thumb {background: rgba(0,0,0,0); border-radius: .3rem; transition: background .3s;}
.pop-container:hover .pop-cont::-webkit-scrollbar-thumb {background: rgba(0,0,0,.15); }
.pop .pop-cont::-webkit-scrollbar-track {background: transparent; border-radius: .2.5rem;}
.pop .btn-wrap {margin-top: 4rem; display: flex; gap: .8rem; width: 100%; justify-content: center;}
.pop .btn-wrap .btn {max-width: 24rem; width: 100%;}
.pop .btn-close {width: 4.8rem; height: 4.8rem; background: url(../images/ic_pop_close.svg) no-repeat center / contain; position: absolute; top: 2rem; right: 2rem; cursor: pointer; overflow: hidden; text-indent: -9999px;}

.nav-backdrop {position: fixed; inset: 0; z-index: 49; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility .35s ease;}
.nav-wrap.is-open .nav-backdrop {opacity: 1; visibility: visible; pointer-events: auto;}
.nav-list {position: fixed; top: 0; right: 0; z-index: 50; width: min(100% - 6rem, 32rem); max-width: 100%; height: 100vh; height: 100dvh; margin: 0; padding: 6.4rem 2.4rem 2.4rem; list-style: none; background: rgba(255,255,255,1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateX(100%); transition: transform .38s cubic-bezier(0.22, 1, 0.36, 1);}
.nav-wrap.is-open .nav-list {transform: translateX(0); box-shadow: -0.8rem 0 3.2rem rgba(0,0,0,.4);}
.nav-list a {display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 1.4rem 0; color: #111; font-weight: 600; font-size: 2rem; line-height: 1.3; border-bottom: 1px solid rgba(0,0,0,.2); text-decoration: none; gap: 8px;}
.nav-list a img {height: 5.6rem;}
.nav-list a:focus-visible {outline: 2px solid #fff; outline-offset: 2px;}
.btn-nav {width: 40px; height: 40px; position: fixed; top: 24px; right: 24px; background: url(../images/ic_nav.svg) no-repeat center / 100% 100%; z-index: 51; border: none; text-indent: -1000px; overflow: hidden; display: none; cursor: pointer;}
.nav-wrap.is-open .btn-nav {background-image: url(../images/ic_nav_close.svg); filter: invert()}

.main-wrap {position: relative; width: 100%; height: 160vw; overflow: hidden;}
.main-bg {position: relative; top: 0; left: 0; width: 100%; object-fit: cover; z-index: 0; pointer-events: none;}
.main-logo {position: absolute; top: 8vw; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 22vw; min-width: 320px; margin: 0 auto; z-index: 1;}

@keyframes star-wrap-float {
  0%, 100% {transform: translateX(-50%) translateY(0);}
  50% {transform: translateX(-50%) translateY(-1.5vw);}
}
.star-wrap, .star-nav-wrap {position: absolute; top: 10vw; left: 50%; width: 100%; max-width: 52vw; min-width: 856px; z-index: 1; animation: star-wrap-float 3s ease-in-out infinite;}
.star-wrap > img, .star-nav-wrap > img {width: 100%;}
.star-nav-wrap {z-index: 3; pointer-events: none;}
.star-nav-wrap ul {pointer-events: all;}
.star-nav-wrap > img {visibility: hidden;}
@keyframes choo-star-sprite {
    from {background-position: 0 0;}
    to {background-position: 100% 0;}
}
@keyframes choo-star-toggle {
    0%, 49.999% {opacity: 1;}
    50%, 100% {opacity: 0;}
}
.choo-star1,
.choo-star2 {width: 18.2%; height: 23%; position: absolute; top: 23.8%; left: 47.3%; animation: choo-star-sprite 3s steps(25) infinite, choo-star-toggle 6s steps(1) infinite; filter:brightness(1.1);}
.choo-star1 {background: url(../images/choo1.png) no-repeat 0 0 / 2600% 100%;}
.choo-star2 {background: url(../images/choo2.png) no-repeat 0 0 / 2600% 100%; animation-delay: 0s, -3s;}

.main-nav button {border: none; background: none; padding: 1vw; margin: 0; cursor: pointer; position: absolute; z-index: 3;}
.main-nav button img {width: 100%; display: block;}
@media (hover: hover) and (pointer: fine) {
    .main-nav button:hover {transform: scale(1.2); transition: all .3s ease;  filter: drop-shadow(0 0 9px rgba(255,255,255,1)) drop-shadow(0 0 9px rgba(255,255,255,1)) drop-shadow(0 0 6px rgba(255,255,255,1)) drop-shadow(0 0 3px rgba(255,255,255,1));}
}
.main-nav button:nth-of-type(1) {width: 8.8%; top: 51.8%; left: 17.8%;}
.main-nav button:nth-of-type(2) {width: 19.3%; top: 13.2%; left: 42.7%;}
.main-nav button:nth-of-type(3) {width: 14.2%; top: 33.2%; left: 7%;}
.main-nav button:nth-of-type(4) {width: 16.2%; top: 25.4%; left: 76.5%;}
.main-nav button:nth-of-type(5) {width: 16.2%; top: 44%; left: 59.2%;}

.scroll-guide-btn {position: fixed; width: 96px !important; bottom: 1em; left: 50%; transform: translateX(-50%); z-index: 3; opacity: 1; transition: opacity .35s ease; border: none; background: none; cursor: pointer;}
.scroll-guide {width: 100%;}
.scroll-guide-btn.is-hidden {opacity: 0; pointer-events: none;}
.scroll-guide-btn:hover {filter: brightness(2.5);}

.main-bottom,
.main-bottom-btn-wrap {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1200px; min-width: 600px; margin: 0 auto; z-index: 1; text-align: center;}
.main-bottom img {width: 100%;}
.main-bottom-btn-wrap {z-index: 3;}
.main-bottom-btn-wrap > img {visibility: hidden; pointer-events: none;}
.main-bottom-btn {position: absolute; top: 6.5%; left: 36.5%; transform: translate(-50%, -50%); width: 100%; max-width: 12vw; margin: 0 auto; background: none; border: none; padding: 0; margin: 0; cursor: pointer;}
@media (hover: hover) and (pointer: fine) {
    .main-bottom-btn:hover {transform: scale(110%) translate(-50%, -50%); transform-origin: 0 0;}
}
.main-bottom-btn img {width: 100%; display: block; opacity: 1;}

.main-message-wrap {position: absolute; top: 20%; left: 0; width: 100%; margin: 0 auto; height: 80%; z-index: 2; pointer-events: none;}

@keyframes main-message-float {
  0% {top: var(--msg-start-top, 93%); opacity: 0;}
  15% {opacity: 1;}
  85% {opacity: 1;}
  100% {top: 0; opacity: 0;}
}
.main-message-btn {position: absolute; left: var(--msg-left, 50%); top: var(--msg-start-top, 93%); opacity: 0; transform: translateX(-50%); width: var(--msg-width, 3.75vw); max-width: 120px; background: none; border: none; padding: 0; margin: 0; cursor: pointer; animation: main-message-float var(--msg-duration, 18s) ease-out infinite; animation-delay: var(--msg-delay, 0s); pointer-events: all;}
@media (hover: hover) and (pointer: fine) {
    .main-message-btn:hover {animation-play-state: paused; opacity: 1 !important; transform: translateX(-50%) scale(1.25); transition: all .3s ease; filter: drop-shadow(0 0 8px rgba(255,255,0,1)) drop-shadow(0 0 4px rgba(255,255,0,1));}
}
.main-message-btn img {width: 100%; display: block;}

.pop.pop-message {background: rgba(0,0,0,.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(12px);}
.pop-message .pop-container {background: none; width: auto; height: auto;}
.pop-message .pop-container img {filter: drop-shadow(1vw 1.25vw 1vw rgba(0,0,0,.17));}
.pop-message .pop-content {background: none; width: 79.5%; height: 64%; position: absolute; top: 17.5%; left: 9.6%; transform: rotate(-4deg); padding: 2% 6%; overflow-y: auto; color: #544E4E; font-size: 2.8rem; line-height: 1.42; letter-spacing: -0.02em; word-break: break-all; font-family: GangwonEducationSaeum; font-weight: 500;}
.pop-message .pop-content::-webkit-scrollbar {width: .4rem;}
.pop-message .pop-content::-webkit-scrollbar-track {background: transparent;}
.pop-message .pop-content::-webkit-scrollbar-thumb {background: rgb(84, 78, 78, 0.25); border-radius: .8rem;}
.pop-message .pop-content::-webkit-scrollbar-thumb:hover {background: rgb(84, 78, 78, 0.5);}
.pop-message .btn-close {position: absolute; top: 7.4%; right: 12%; width: 6%; height: 6.5%; background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-size: 1.2rem; line-height: 1.8; letter-spacing: -0.02em; word-break: keep-all; z-index: 1; border-radius: 50%; text-indent: -9999px; overflow: hidden;}

.pop.pop-video {padding: 0; background: rgba(0,0,0,.9);}
.pop-video .pop-container {width: 100vw; height: 100vh; max-width: none; max-height: none; padding: 0; border-radius: 0; background: #000;}
.pop-video .video-frame {width: 100%; height: 100%; border: 0; display: block;}
.pop-video .btn-close {position: absolute; top: 1.6rem; right: 1.6rem; z-index: 2; width: 4.8rem; height: 4.8rem; background: rgba(0,0,0,.48) url(../images/ic_nav_close.svg) no-repeat center / 1.8rem auto; border: none; border-radius: 50%; text-indent: -9999px; overflow: hidden; cursor: pointer;}

.sub-wrap {height: 100vh; overflow: auto; display: flex; flex-direction: row; align-items: flex-start;} 
.sub-wrap.sub1 {background: #088AAD;}
.sub-wrap.sub2 {background: #000000;}
.sub-wrap.sub3 {background: #28790B;}
.sub-wrap.sub4 {background: #F46F10;}
.sub-wrap.sub5 {background: #641A81;}

.title-wrap {padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; flex: 1; height: 100vh; overflow: auto;}
.title-wrap {scrollbar-width: thin; scrollbar-color: transparent transparent;}
.title-wrap::-webkit-scrollbar {width: 8px; height: 8px; background: transparent;}
.title-wrap::-webkit-scrollbar-track {background: transparent;}
.title-wrap::-webkit-scrollbar-thumb {background: transparent; border-radius: 999px;}

.title-wrap h1 {margin-bottom: 16px; text-align: left; width: 100%; position: relative; z-index: 1;}
.title-wrap h1 img {width: 60px;}
.title-wrap .title-inner {flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: -4rem;}
.sub-link {display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; max-width: 58rem;}
.sub-link li {flex: 1;}
.sub-link li a {display: block;}
.sub-link li a img {max-width: 100px; width: 100%; flex: 1;}
.sub-link li a.is-active {opacity: .5; filter: grayscale(1);}
.pagination-wrap {display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .8rem; padding: 1.6rem; margin-top: 1rem;}
.pagination-wrap button {border: none; background: none; padding: 0; margin: 0 1rem; cursor: pointer; width: 4.8rem; height: 4.8rem;}
.pagination-wrap button img {width: 100%; display: block;}
.pagination-wrap span { width: 1rem; height: 1rem; border-radius: 50%; background: #00415D; text-indent: -9999px; overflow: hidden;}
.pagination-wrap .current {background: #fff;}

.mobile-top-gradient {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 11rem; pointer-events: none; z-index: 50; background: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.14) 42%, rgba(0,0,0,0) 100%); opacity: 0; transition: opacity .28s ease;}
.mobile-top-gradient.is-visible {opacity: 1;}


/* sub1 */
.title-wrap .p1 {color: #fff; text-align: center; font-size: 24px; margin-bottom: 40px;}
.title1 {width: 60%; max-width: 440px; margin: 0 auto 50px;}
.sub1 .content-wrap {flex: 1; min-width: 0; padding: 2.4rem 3.2rem 4rem; background: transparent; display: flex; flex-direction: column; height: 100vh; overflow: auto; min-width: 80rem;}
.sub1 .message-write-wrap {width: 100%; padding-top: 4rem;}
.sub1 .message-write-card {position: relative; background: #FFFCF0; border-radius: 2rem; box-shadow: 0 0.4rem 2.4rem rgba(0,0,0,.12); padding: 2.4rem 1.6rem 1.6rem; margin-top: 1.6rem;}
.sub1 .message-write-top {position: relative; display: flex; flex-direction: row; align-items: flex-end; justify-content: center; min-height: 3.6rem;}
.sub1 .message-write-heading {flex: 1; text-align: center; padding: 0 0 0 3rem; min-width: 0; word-break: keep-all;}
.sub1 .message-write-card .p2 {margin: 0 0 .8rem; font-size: 2.4rem; font-weight: 600; color: #000; line-height: 1.35; letter-spacing: -.02em;}
.sub1 .message-write-card .p3 {margin: 0 0 1.5em; font-size: 1.4rem; font-weight: 400; color: #777; line-height: 1.45; letter-spacing: -.02em;}
.sub1 .message-write-character {width: 200px; bottom: 0; margin-top: -7rem; margin-left: -3rem;}
.sub1 .message-write-field {position: relative; background: #fafafa; border-radius: 1.2rem; border: 1px solid #EAE7D9; box-shadow: inset 0 0.4rem .6rem rgba(0,0,0,.06); padding: 0rem; min-height: 14rem; overflow: hidden;}
.sub1 .message-write-field textarea {display: block; width: 100%; min-height: 11rem; border: none; background: transparent; font-size: 2rem; line-height: 1.55; color: #111; padding: 1em; outline: none; letter-spacing: -0.02em; border-radius: 1.2rem;}
.sub1 .message-write-field textarea::placeholder {color: #b0b0b0;}
.sub1 .message-write-field .btn-write {position: absolute; bottom: 1.2rem; right: 1.2rem; width: 4rem; height: 4rem; padding: 0; border: none; background: none; cursor: pointer; border-radius: 50%; line-height: 0;}
.sub1 .message-write-field .btn-write:hover {transform: scale(1.06); box-shadow: 0 0.3rem 1.2rem rgba(253, 178, 19, .5);}
.sub1 .message-write-field .btn-write img {width: 100%; height: auto; display: block;}
.sub1 .message-list-wrap {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; padding: 3.2rem 1.6rem;}
.sub1 .message-item {display: flex; flex-direction: column; gap: 1.2rem; padding: 1.6rem; background: #fff; border-radius: 1rem; box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,.08); height: 18rem;}
.sub1 .message-item .no {margin: 0; font-size: 1.3rem; font-weight: 400; line-height: 1.3; color: #888;}
.sub1 .message-item .message {margin: 0; font-size: 1.6rem; font-weight: 400; line-height: 1.55; color: #111; word-break: break-all; height: 10rem; overflow: auto;}
.sub1 .message-item .bottom-wrap {display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 0.4rem;}
.sub1 .message-item .like-wrap {display: flex; flex-direction: row; align-items: center; gap: 0.6rem;}
.sub1 .message-item .btn-like {position: relative; width: 2.4rem; height: 2.4rem; flex-shrink: 0; padding: 0; border: none; background: url(../images/ic_like.svg) no-repeat center / contain; cursor: pointer; transition: transform .18s ease, filter .18s ease, opacity .18s ease; filter: grayscale(1) brightness(2.45); opacity: .55;}
.sub1 .message-item .btn-like.is-liked {filter: none; opacity: 1; transform: scale(1.06);}
.sub1 .message-item .btn-like__text {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
.sub1 .message-item .like-count {font-size: 1.3rem; font-weight: 500; line-height: 1; color: #333;}
.sub1 .message-item .date {margin: 0; font-size: 1.3rem; font-weight: 400; line-height: 1.3; color: #888;}

/* sub2 */
.title2 {width: 80%; max-width: 540px; margin: 0 auto;}
.title2-1 {margin-bottom: 4rem; margin-top: 4rem; max-width: 243px; width: 60%;}
.sub2 .content-wrap {position: relative; flex: 1; min-width: 0; padding: 4rem 3rem; background: transparent; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-width: 80rem; height: 100vh; overflow: auto;}
/* .sub2.vod-modal-open .content-wrap {overflow: hidden;} */
.sub2 .title-wrap {transition: opacity .25s ease;}
.sub2.vod-modal-open .title-wrap {opacity: .15; pointer-events: none;}
.vod-wrap {width: 100%; max-width: 96rem; margin: auto;}
.vod-grid {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 5rem;}
.vod-card {background: #141414; border-radius: 1rem; overflow: hidden; box-shadow: 0 0.8rem 3rem rgba(0,0,0,.45); transition: transform .22s ease, box-shadow .22s ease;}
.vod-card:hover {transform: scale(1.02); box-shadow: 0 1rem 3.6rem rgba(0,0,0,.55);}
.vod-card__thumb {position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #222; cursor: pointer;}
.vod-card__thumb img {width: 100%; height: 100%; object-fit: cover; display: block;}
.vod-card__overlay-title {position: absolute; left: 2rem; bottom: 1rem; right: 1.2rem; margin: 0; font-size: clamp(1.8rem, 2vw, 2.4rem); font-weight: 700; line-height: 1.2; color: #fff; text-shadow: 0 0.1rem 0.6rem rgba(0,0,0,.75); letter-spacing: -.02em;}
.vod-card__panel {padding: 2rem;}
.vod-card__actions {display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem;}
.vod-card__actions-start {display: flex; flex-direction: row; align-items: center; gap: 0.5rem;}
.vod-card__act {padding: 0; border: none; background: none; cursor: pointer; width: 4.2rem; height: 4.2rem; flex-shrink: 0; border-radius: 50%; line-height: 0; transition: transform .15s ease;}
.vod-card__act img {width: 100%; height: 100%; object-fit: contain; display: block;}
.vod-card__act:hover {transform: scale(1.08);}
.sub2 .vod-card .btn-like img {transition: filter .2s ease, opacity .2s ease; filter: grayscale(1) brightness(1.35); opacity: .5;}
.sub2 .vod-card .btn-like.is-liked img {filter: none; opacity: 1;}
.vod-card__meta {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 0.8rem;}
.vod-badge {display: inline-flex; align-items: center; justify-content: center; padding: 0.15rem 0.45rem; border: 1px solid rgba(255,255,255,.75); border-radius: 0.2rem; font-size: 1.1rem; font-weight: 600; color: #fff; line-height: 1.2;}
.vod-card__episodes {font-size: 1.3rem; font-weight: 500; color: #fff;}
.vod-card__tags {margin: 0; font-size: 1.2rem; font-weight: 400; line-height: 1.45; color: rgba(255,255,255,.82);}

/* sub2 VOD 상세 모달 */
.vod-modal {position: fixed; width: 50%; height: 100%; top: 0; right: 0; left: auto !important; inset: 0; z-index: 60; display: none; flex-direction: column; background: #141414; overflow: hidden; min-width: 80rem;}
.vod-modal.is-open {display: flex;}
.vod-modal__scroll {flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;}
.vod-modal__close {position: absolute; top: 1.2rem; right: 1.2rem; z-index: 40; width: 4.4rem; height: 4.4rem; padding: 0; border: none; background: rgba(20,20,20,.65) url(../images/ic_nav_close.svg) no-repeat center / 1.8rem auto; border-radius: 50%; cursor: pointer; transition: background .2s ease, transform .15s ease;}
.vod-modal__close:hover {background-color: rgba(40,40,40,.9); transform: scale(1.06);}
.vod-modal__close span {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
.vod-modal__hero {position: relative; aspect-ratio: 16 / 9; padding: 0 4rem 2.4rem; display: flex; flex-direction: column; justify-content: flex-end;}
.vod-modal__hero-bg {position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat;}
.vod-modal__hero-bg::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,.15) 0%, rgba(20,20,20,.55) 45%, #141414 100%);}
.vod-modal__hero-inner {position: relative; z-index: 2; width: 100%; max-width: 100rem; margin: 0 auto;}
.vod-modal__logo-title {margin: 0 0 1.6rem; font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 800; line-height: 1.1; color: #fff; text-align: left; letter-spacing: -.03em; text-shadow: 0 0.2rem 1.2rem rgba(0,0,0,.5);}
.vod-modal__hero-bar {display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem;}
.vod-modal__hero-start {display: flex; flex-direction: row; align-items: center; gap: 1rem;}
.vod-modal__play-btn {display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0 4rem 0 1.2rem; border: none; border-radius: 0.4rem; background: #fff; color: #141414; font-size: 2.4rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: transform .15s ease, background .2s ease; overflow: hidden}
.vod-modal__play-btn:hover {transform: scale(1.03); opacity: .9;}
.vod-modal__play-btn img {width: 8rem; height: 8rem; margin: -0.8rem 0; display: block;}
.vod-modal__icon-btn {width: 5.6rem; height: 5.6rem; padding: 0; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; background: rgba(20,20,20,.45); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s ease, background .2s ease, border-color .2s ease;}
.vod-modal__icon-btn:hover {transform: scale(1.06); background: rgba(40,40,40,.65);}
.vod-modal__icon-btn img {width: 100%; height: 100%; object-fit: contain; display: block;}
.vod-modal__icon-btn.vod-modal__btn-like img {transition: filter .2s ease, opacity .2s ease; filter: grayscale(1) brightness(1.35); opacity: .75;}
.vod-modal__icon-btn.vod-modal__btn-like.is-liked img {filter: none; opacity: 1;}
.vod-modal__icon-btn--mute img {width: 5.6rem; height: 5.6rem;}
.vod-modal__main {padding: 4rem 4rem 3.6rem; max-width: 104rem; margin: 0 auto; width: 100%;}
.vod-modal__meta-grid {display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2.4rem 3rem; margin-bottom: 2.8rem;}
.vod-modal__meta-line {display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 0.4rem; font-size: 1.8rem; font-weight: 500; color: #bcbcbc;}
.vod-modal__meta-line .vod-modal__hd {padding: 0.1rem 0.35rem; border: 1px solid #747474; color: #fff; letter-spacing: 0; border-radius: 0.15rem; font-size: 1.3rem; font-weight: 400; height: 2.2rem;}
.vod-modal__sub-icon {display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 2.2rem; border: none; border-radius: 0.15rem; font-size: 1.2rem; font-weight: 700; color: #ddd; line-height: 1;}
.vod-modal__rating {display: inline-block; padding: 0.2rem 0.5rem; border: 1px solid #747474; border-radius: 0.2rem; font-size: 1.6rem; font-weight: 300; color: #fff; margin-bottom: 4rem;}
.vod-modal__synopsis {margin: 0; font-size: 1.8rem; font-weight: 400; line-height: 1.55; color: #d0d0d0; letter-spacing: -.02em;}
.vod-modal__detail-list {margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; font-size: 1.8rem; line-height: 1.45; color: #b3b3b3;}
.vod-modal__detail-list > div {margin: 0;}
.vod-modal__detail-list dt {display: inline; font-weight: 300; color: #717171;}
.vod-modal__detail-list dd {display: inline; margin: 0;}
.vod-modal__episodes-head {display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; margin-bottom: 1.2rem; margin-top: 6rem; color: #fff;}
.vod-modal__episodes-title {margin: 0; font-size: 2.8rem; font-weight: 600; color: #fff;}
.vod-modal__episodes-year {font-size: 2rem; font-weight: 600; color: #fff;}
.vod-modal__ep-list {list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem;}
.vod-modal__ep-item {display: grid; grid-template-columns: 3.2rem minmax(0, 12rem) minmax(0, 1fr) auto; gap: 1rem 1.2rem; align-items: center; padding: 2rem 1.2rem; background: #333; border-radius: 0.5rem;}
.vod-modal__ep-item {cursor: pointer;}
.vod-modal__ep-num {font-size: 2.8rem; font-weight: 500; color: #888; line-height: 1;}
.vod-modal__ep-thumb {aspect-ratio: 16 / 9; border-radius: 0.35rem; overflow: hidden; background: #2a2a2a; margin-right: 1rem;}
.vod-modal__ep-thumb img {width: 100%; height: 100%; object-fit: cover; display: block;}
.vod-modal__ep-body {min-width: 0;}
.vod-modal__ep-title {margin: 0 0 0.35rem; font-size: 2rem; font-weight: 500; color: #fff;}
.vod-modal__ep-desc {margin: 0; font-size: 1.6rem; font-weight: 400; line-height: 1.4; color: #cfcfcf;}
.vod-modal__ep-dur {font-size: 1.8rem; font-weight: 500; color: #c4c4c4; white-space: nowrap;}
@media screen and (max-width: 768px) {
    .vod-modal__meta-grid {grid-template-columns: 1fr; gap: 1.6rem;}
    .vod-modal__ep-item {grid-template-columns: 2.4rem 9rem minmax(0, 1fr); grid-template-rows: auto auto;}
    .vod-modal__ep-num {grid-column: 1; grid-row: 1 / 3; align-self: center;}
    .vod-modal__ep-thumb {grid-column: 2; grid-row: 1 / 3;}
    .vod-modal__ep-body {grid-column: 3; grid-row: 1;}
    .vod-modal__ep-dur {grid-column: 3; grid-row: 2; justify-self: start;}
}

/* sub3 */
.title3 {width: 50%; max-width: 380px; margin: 0 auto 50px;}
.sub3 .title-wrap {flex: 1; position: relative;}
.sub3 .content-wrap {flex: 1; min-width: 0; padding: 0; background: transparent; display: flex; flex-direction: column; height: 100vh; min-width: 80rem;}
.promise-wrap {background: #fff; border-top-left-radius: 4rem; border-bottom-left-radius: 4rem; padding: 4rem; max-width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: relative; overflow: auto;}
.map-inner {width: 100%; display: flex; justify-content: center; align-items: center; position: relative; margin-top: 3rem;}
.map-inner img {width: 100%; max-width: 700px;}
.map-inner .map-m {display: none;}
.map-spots {position: absolute; inset: 0;}
.map-spot {position: absolute; border: 0; background: transparent; cursor: pointer; border-radius: 999px;}
.map-spot {width: 8.2%; height: 3%; transform: translate(-50%, -50%);}
.map-spot:focus-visible {outline: 2px solid #1d4ed8; outline-offset: 2px;}
.promise-list {display: flex; gap: 6rem; flex-direction: row; justify-content: center; align-items: center; padding: 0 2rem;}
.promise-list li {flex: 0 1 auto;}
.promise-list li a {display: block;}
.promise-tab {position: relative; width: 9.3rem;}
.promise-tab__img {display: block; width: 100%; height: auto;}
.promise-tab__img--on {display: none;}
.promise-tab.is-active .promise-tab__img--off {display: none;}
.promise-tab.is-active .promise-tab__img--on {display: block;}
.promise-panels {width: 100%; display: flex; justify-content: center; align-items: center; flex: 1; min-height: 0; position: relative;}
.promise-panel {display: none; width: 100%; max-width: 75rem; padding-bottom: 4rem;}
.promise-panel.is-active {display: block;}
.promise-slider {display: flex; flex-direction: row; align-items: center; gap: 2.4rem; width: 100%;}
.promise-slider__btn {flex-shrink: 0; width: 6rem; height: 6rem; padding: 0; border: none; background: none; cursor: pointer; border-radius: 50%; transition: opacity .2s ease, transform .15s ease;}
.promise-slider__btn img {width: 100%; height: auto; display: block;}
.promise-slider__btn:hover:not(:disabled) {transform: scale(1.06);}
.promise-slider__btn:disabled {opacity: .32; cursor: default; pointer-events: none;}
.promise-slider__viewport {flex: 1; min-width: 0; overflow: hidden; border-radius: 1.6rem;}
.promise-slider__track {display: flex; flex-direction: row; transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);}
.promise-slide {flex: 0 0 100%; width: 100%;}
.promise-slide img {display: block; width: calc( 100% - 4rem ); height: auto; border: 2rem solid #fff; border-radius: 1.6rem; box-shadow: 0 7px 19.7px 0 rgba(0, 0, 0, 0.17); margin: 2rem;}
.promise-slider__pagination {display: flex; justify-content: center; align-items: center; gap: .8rem; margin-top: 2rem;}
.promise-slider__dot {width: 1rem; height: 1rem; border: 0; border-radius: 50%; background: #D1D1D6; padding: 0; cursor: pointer; transition: transform .2s ease, background-color .2s ease;}
.promise-slider__dot.is-active {background: #001254; transform: scale(1.15);}
.region-popup {position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 20;}
.region-popup.is-open {display: flex;}
.region-popup__backdrop {position: absolute; inset: 0; background: rgba(255,255,255,.5);}
.region-popup__dialog {position: relative; z-index: 1; width: min(92%, 74rem); /*max-height: calc(100% - 4rem);*/ display: flex; justify-content: center; padding: 2rem; background: #fff; box-shadow: 0 0.4rem 2.4rem rgba(0, 0, 0, .35); border-radius: 2rem;}
.region-popup__image {display: block; width: 100%; height: auto; border-radius: 1.6rem;}
.region-popup__close {position: absolute; top: -1.6rem; right: -1.6rem; width: 4.2rem; height: 4.2rem; border: 0; border-radius: 50%; background: #fff url(../images/ic_nav_close_gray.svg) no-repeat center / 2.2rem auto; cursor: pointer; box-shadow: 0 .2rem .8rem rgba(0,0,0,.25);}
.map-title {color: #111; font-size: 4rem; font-weight: 600; letter-spacing: -.02em; position: absolute; top: 10rem; right: 5rem;}
.choo-side1 {position: absolute; top: 56%; left: 50%; transform: translateX(20.5rem); width: 13.5rem;}
.choo-side2 {position: absolute; top: 50%; left: 50%; transform: translate(-320%, -250%); width: 12rem;}
.choo-side3 {position: absolute; top: 47%; left: 50%; transform: translate(-380%, 60%); width: 8.3rem;}

/* sub4 */
.title4 {width: 60%; max-width: 440px; margin: 0 auto 80px;}
.sub4 .content-wrap {flex: 1; min-width: 0; padding: 2.4rem 3rem 4rem; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 50rem; height: 100vh; overflow: auto; min-width: 80rem;}

.game-wrap {width: 100%; max-width: 90rem; margin: auto; padding-top: 1rem;}
.game-slider {display: flex; flex-direction: row; align-items: center; gap: 4rem; width: 100%; position: relative;}
.game-slider__btn {flex-shrink: 0; width: 6rem; height: 6rem; padding: 0; border: none; background: none; cursor: pointer; border-radius: 50%; transition: opacity .2s ease, transform .15s ease;}
.game-slider__btn img {width: 100%; height: auto; display: block; filter: drop-shadow(0 0.15rem 0.4rem rgba(0,0,0,.12));}
.game-slider__btn:hover:not(:disabled) {transform: scale(1.06);}
.game-slider__btn:disabled {opacity: .32; cursor: default; pointer-events: none;}
.game-slider__viewport {flex: 1; min-width: 0; overflow: hidden;}
.game-slider__track {display: flex; flex-direction: row; gap: 1.5rem; transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);}
.game-slider__pagination {display: flex; justify-content: center; align-items: center; gap: .8rem; margin-top: 2rem;}
.game-slider__dot {width: 1rem; height: 1rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.45); padding: 0; cursor: pointer; transition: transform .2s ease, background-color .2s ease;}
.game-slider__dot.is-active {background: #fff; transform: scale(1.15);}
.game-card {background: #fff; border-radius: 5rem; overflow: hidden; box-shadow: 0 0.4rem 2.4rem rgba(0,0,0,.1); display: flex; flex-direction: column; min-height: 0; cursor: pointer;}
.game-card__media {position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; border-radius: 5rem; }
.game-card__media img {width: 100%; height: 100%; object-fit: cover; display: block;}
.game-card__body {padding: 2rem 2.2rem 2.4rem; display: flex; flex-direction: column; flex: 1; gap: 1rem;}
.game-card__title {margin: 0; font-size: 3.2rem; font-weight: 500; line-height: 1.2; color: #111; letter-spacing: -.02em;}
.game-card__title small {font-size: .7em;}
.game-card__desc {margin: 0; font-size: 1.6rem; font-weight: 400; line-height: 1.5; color: #888; letter-spacing: -.02em; word-break: keep-all;}
.game-card__actions {margin-top: auto; display: flex; justify-content: flex-end; padding-top: 0.4rem;}
.game-card__cta {display: inline-flex; align-items: center; justify-content: center; padding: 0.7rem 1.6rem; border-radius: 999px; background: #f0f4f9; color: #444; font-size: 1.4rem; font-weight: 500; text-decoration: none; transition: background .2s ease, color .2s ease;}
.game-card__cta:hover {background: #e2e8f2; color: #222;}

/* sub5 */
.title5 {width: 60%; max-width: 440px; margin: 0 auto 80px;}
.sub5 .title-wrap {flex: 1; position: relative;}
.sub5 .content-wrap {flex: 1; min-width: 0; padding: 0; background: transparent; display: flex; flex-direction: column; height: 100vh; overflow: auto; min-width: 80rem;}
.schedule-wrap {display: flex; flex-direction: column; justify-content: flex-start; align-items: center; height: 100%; min-height: 50rem; width: 100%; padding: 12rem 3rem 4rem;}
.schedule-slider {display: flex; flex-direction: row; align-items: center; gap: 4rem; width: 100%; max-width: 90rem; position: relative; margin-top: auto; margin-bottom: auto;}
.schedule-slider::before {content: ''; width: 100%; height: 5.5vw; max-height: 120px; position: absolute; bottom: 100%; left: 0; background: url(../images/schedule_top.png) no-repeat center / auto 100%; display: block; }
.schedule-slider__btn {flex-shrink: 0; width: 6rem; height: 6rem; padding: 0; border: none; background: none; cursor: pointer; border-radius: 50%; transition: opacity .2s ease, transform .15s ease;}
.schedule-slider__btn img {width: 100%; height: auto; display: block; filter: drop-shadow(0 0.15rem 0.4rem rgba(0,0,0,.12));}
.schedule-slider__btn:hover:not(:disabled) {transform: scale(1.06);}
.schedule-slider__btn:disabled {opacity: .32; cursor: default; pointer-events: none;}
.schedule-slider__viewport {flex: 1; min-width: 0; overflow: hidden; border-radius: 1em;}
.schedule-slider__track {display: flex; flex-direction: row; transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);}
.schedule-slider__pagination {display: flex; justify-content: center; align-items: center; gap: .8rem; margin-top: 2rem; width: 100%; max-width: 90rem;}
.schedule-slider__dot {width: 1rem; height: 1rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.45); padding: 0; cursor: pointer; transition: transform .2s ease, background-color .2s ease;}
.schedule-slider__dot.is-active {background: #fff; transform: scale(1.15);}
.schedule-slide {flex: 0 0 100%; width: 100%;}
.schedule-slide img {display: block; width: 100%; height: auto; border-radius: 1.6rem; box-shadow: 0 0.4rem 2.4rem rgba(0,0,0,.12);}
.no-schedule {text-align: center;}
.no-schedule p {color: #D896F2; text-align: center; font-size: 2rem; font-weight: 400;}
.no-schedule img {margin-bottom: 1rem; max-width: 50%;}

/* responsive */
@media screen and (min-width: 1920px) {
    .main-logo {max-width: 424px}
    .star-wrap, .star-nav-wrap {max-width: 1000px;}
    .main-message-wrap {top: 820px; height: calc( 100% - 820px );}
    .main-bottom-btn {max-width: 200px;}
}
@media screen and (max-width: 1680px) {
    .schedule-slider::before {height: 90px;}
}

@media screen and (max-width: 1280px) {
    .main-message-wrap {top: 500px; height: calc( 100% - 500px );}
    .sub-wrap {flex-direction: column; align-items: center; overflow: auto;}
    .title-wrap {width: 100%; height: auto; overflow: visible;}
    .sub1 .content-wrap, .sub2 .content-wrap, .sub3 .content-wrap, .sub4 .content-wrap, .sub5 .content-wrap {height: auto; overflow: visible; width: 100%; min-width: auto;}
    .map-wrap {height: auto; border-top-right-radius: 2rem; border-bottom-left-radius: 0; overflow-x: hidden;}
    .map-wrap img {max-width: none; margin: 4rem auto; width: 120%;}
    .vod-wrap {margin-top: 4rem;}
    .vod-modal {position: fixed; width: 100%; min-width: auto;}
    .vod-modal__hero-inner {max-width: none;}
    .vod-modal__main {max-width: none;}
    .main-bottom-btn {top: 6%; left: calc( 50% - 150px ); max-width: 160px;}
    .schedule-wrap {padding-top: 14rem; justify-content: flex-start;}
    .schedule-slider::before {height: 11.5vw;}
    .title-wrap .title-inner {margin-top: 0;}
    .promise-wrap {height: auto; border-top-right-radius: 4rem; border-bottom-left-radius: 0;}
    .sub-wrap.sub3 {height: auto;}
}

@media screen and (max-height: 1080px) {
    .promise-panels {align-items: flex-start;}
    .choo-side1 {top: 5rem;}
    .choo-side2 {top: 46rem;}
    .choo-side3 {top: 36rem;}
    .region-popup {align-items: flex-start;}
    .region-popup__dialog {margin: 2rem 0;}
}

@media screen and (min-width: 769px) {
    .nav-list,
    .nav-backdrop {display: none !important;}
}

@media screen and (max-width: 768px) {
    .mobile-top-gradient {display: block;}
    .sub1 .message-write-wrap {padding-top: 0;}
    .sub1 .message-write-heading {padding: 0;}
    .sub1 .message-write-deco {width: 6.4rem; height: 6.4rem; top: -2.2rem; right: 0;}
    .sub1 .message-write-card {padding: 2rem 1.6rem 1.6rem; margin-top: 1.2rem;}
    .main-wrap {height: 217vw; min-height: 780px;}
    .main-logo {width: 41%; max-width: none; min-width: 200px; top: 7%;}
    .star-wrap, .star-nav-wrap {width: 112%; max-width: none; min-width: auto; top: 12%;}
    .main-message-wrap {top: 31%; height: 69%;}
    .main-message-btn {transform: translateX(-50%) scale(2); min-width: 12px;}
    @media (hover: hover) and (pointer: fine) {
        .main-message-btn:hover {transform: translateX(-50%) scale(2.25);}
    }
    .sub-link {display: none;}
    .title-wrap {padding: 14rem 2rem 2rem;}
    .title-wrap h1 {position: fixed; top: 1.6rem; left: 2rem; width: 4rem; z-index: 51;}
    .sub1 .message-list-wrap {grid-template-columns: repeat(2, 1fr); padding: 1.6rem 0;}
    .sub1 .content-wrap, .sub2 .content-wrap {padding: 0 2rem 2rem;}
    .vod-grid {grid-template-columns: 1fr; gap: 1.4rem;}
    .vod-card:hover {transform: none;}
    .title1 {margin-bottom: 0;}

    .promise-wrap {padding: 1rem;}
    .promise-list {justify-content: center; margin-top: 2rem; gap: 3.2rem; padding: 0;}
    .promise-list li {flex: 0 1 auto;}
    .promise-tab {width: 8rem;}
    .promise-panels {align-items: flex-start;}
    .promise-slider {gap: 1.2rem;}
    .promise-slider__btn {width: 4rem; height: 4rem; position: absolute; z-index: 1;}
    .promise-slider__btn--prev {left: 0rem;}
    .promise-slider__btn--next {right: 0rem;}
    .promise-slider__pagination {margin-top: 1.4rem;}
    .map-title {font-size: 3rem; top: 4rem; right: 3rem;}
    .promise-slider__viewport {margin-top: 2rem;}
    .promise-slide img {width: calc(100% - 2rem); border-width: 1rem; margin: 1rem;}
    .map-spot {width: 10%; height: 4.5%;}
    .region-popup__close {top: -1rem; right: -1rem; width: 3.6rem; height: 3.6rem;}

    .game-slider {flex-direction: column; align-items: stretch; gap: 1.6rem;}
    .game-slider__btn {display: none;}
    .game-slider__viewport {overflow: visible; width: 100%;}
    .game-slider__track {flex-direction: row; gap: 1.6rem; transform: none !important; width: 100%; flex-wrap: wrap;}
    .game-slider__pagination {margin-top: 1.4rem;}
    .game-card {width: calc( 50% - .8rem ) !important; max-width: none !important; flex: none !important; border-radius: 2rem;}
    .game-card__media {aspect-ratio: 2 / 1;}
    .schedule-wrap {padding: 2rem; padding-top: 20vw;}
    .schedule-slider {gap: 1.2rem;}
    .schedule-slider::before {height: 13vw;}
    .schedule-slider__btn {width: 4rem; height: 4rem; position: absolute; z-index: 1;}
    .schedule-slider__btn--prev {left: -2rem;}
    .schedule-slider__btn--next {right: -2rem;}
    .schedule-slider__pagination {margin-top: 1.4rem;}

    .game-card__title {font-size: 2rem;}
    .game-card__desc {font-size: 1.4rem;}
    .game-card__media {border-radius: 0; background: #eee;}
    .vod-modal__hero, .vod-modal__main {padding: 2rem;}
    .vod-modal__episodes-title {font-size: 2rem;}
    .vod-modal__episodes-year {font-size: 1.8rem;}
    .vod-modal__play-btn {gap: 0; padding: 0 2rem 0 0; font-size: 1.8rem;}
    .vod-modal__play-btn img {width: 4rem; height: 4rem; margin: .2rem 0;}
    .vod-modal__icon-btn, .vod-modal__icon-btn--mute img {width: 4rem; height: 4rem;}
    .vod-modal__ep-dur {font-size: 1.4rem; font-weight: 300;}
    .vod-modal__ep-num {font-size: 1.8rem;}
    .vod-modal__ep-item {gap: .5rem;}
    .title-wrap {padding-top: 6rem;}
    .title-wrap .p1 {margin-bottom: 2.4rem;}
    .title2-1 {margin-bottom: 2rem; margin-top: 3rem;}
    .title-wrap .title-inner {flex: 0;}
    .sub1 .message-write-top {flex-direction: column; align-items: center;}
    .sub1 .message-write-character {margin-top: -2rem;}
    .sub3 .title-wrap {padding-bottom: 0;}
    .title4, .title5 {margin-bottom: 0;}
    .game-slider__track {flex-direction: column;}
    .game-card {width: 100% !important;}
    .sub4 .content-wrap {padding: 0 2rem 4rem;}
    .sub5 .title-wrap {flex: 0;}
    .sub1 .message-item {height: 16rem;}
    .main-bottom-btn {top: 5.5%; left: 36.5%; max-width: 22vw;}
    .choo-star1, .choo-star2 {width: 22%; height: 28%; position: absolute; top: 21.8%; left: 46.3%;}
    .sub1 .message-write-field textarea {font-size: 1.6rem;}
    .title-wrap .p1 {font-size: 2rem;}
    .map-inner .map-m {display: block;}
    .map-inner .map-pc {display: none;}
    .choo-side1 {top: auto; left: auto; bottom: 80vw; right: 2%; transform: none; width: 22%;}
    .choo-side2 {top: 7%; left: 4%; transform: none; width: 15%;}
    .choo-side3 {top: 89vw; left: 83%; transform: none; width: 14%;}
    .btn-nav {display: block;}
}
@media screen and (max-width: 640px) {
    .pop-message {padding: 0 2rem;}
    .pop-message .pop-container {width: 100%; padding: 0;}
    .pop-message .pop-container img {width: 100%;}
    .pop-message .pop-content {font-size: 2.4rem; padding: 0 1rem; width: 86%; top: 13%; left: 6%; height: 74%; line-height: 1.2;}
    .btn-nav {width: 32px; height: 32px;}
    .pop-message .btn-close {top: 1.4%; right: 8.4%;}
    .title-wrap h1 img {width: 48px;}
    .vod-card__panel {padding: 1.6rem;}
    .vod-wrap {margin-top: 0rem;}
    .scroll-guide {display: none;}
}
@media screen and (max-width: 480px) {
    .pop-message .pop-content {font-size: 2rem;}
    .btn-nav {width: 24px; height: 24px; top: 16px; right: 16px;}
    .title-wrap h1 {top: 1.2rem;}
    .title-wrap h1 img {width: 34px;}
    .sub1 .message-item {padding: 1.2rem;}
    .sub1 .message-write-field textarea {font-size: 1.6rem;}
    .sub1 .message-list-wrap {grid-template-columns: repeat(1, 1fr);}
    .title3 {margin-bottom: 2rem;}
    .game-card__body {padding: 1rem 1.5rem 1.5rem;}
}
@media screen and (min-aspect-ratio: 16/9) {
    .main-logo {min-width: 150px; top: 4%;}
    .star-wrap, .star-nav-wrap {min-width: 400px; top: 4%;}
    .main-message-wrap {top: 18%; height: 82%;}
}
@media screen and (max-height: 900px) {
    .title1 {max-width: 49vh; margin-bottom: 5.5vh;}
    .title2 {max-width: 60vh;}
    .title2-1 {max-width: 27vh; margin: 4.4vh 0;}
    .title3 {max-width: 42vh; margin-bottom: 5.5vh;}
    .title4 {max-width: 49vh; margin-bottom: 9vh;}
    .title5 {max-width: 49vh; margin-bottom: 9vh;}
    .sub2 .content-wrap,
    .sub4 .content-wrap {justify-content: flex-start;}
    .schedule-wrap {justify-content: flex-start;}
}