.logo-mark .li-en { width: 81px; height: 22px }
.logo-mark .li-kr { width: 130px; height: 13px }
.logo-mark.is-lg .li-en { width: 121px; height: 33px }
.logo-mark.is-lg .li-kr { width: 190px; height: 19px }
@media (min-width:991px) and (max-width:1199px) { .pagehead .brandmark .li-en { width: 70px; height: 19px } .pagehead .brandmark .li-kr { width: 110px; height: 11px } }
@media (min-width:2560px) { .pagehead .brandmark .li-en { width: 103px; height: 28px } .pagehead .brandmark .li-kr { width: 160px; height: 16px } }
@media (max-width:990px) { .pagehead .brandmark .li-en { width: 13.2vw; height: 3.6vw } .pagehead .brandmark .li-kr { width: 22vw; height: 2.2vw } }

@media (max-width:990px) {
  .pagehead .brandmark { gap: 1.80vw }
  .pagehead .brandmark .li-en { width: 19.55vw; height: 5.33vw }
  .pagehead .brandmark .li-kr { width: 32.62vw; height: 3.26vw }
  .mo-film .film-logo .li-en { width: 38.70vw; height: 10.55vw }
  .mo-film .film-logo .li-kr { width: 43.01vw; height: 4.29vw }
}

@media (max-width:990px) {
  .mo-hero .hero-scene img.hs-train { left: 1.151%; top: 60.590%; inline-size: 77.855%; --hs-from: -104.5% }
  :root { --train-h: calc(var(--train-w) * 251 / 2043); --train-roof: calc(var(--train-h) * 22 / 206); --pillar-h: 30vw }
}

@media (min-width:991px) {
  .hv-int { position: relative; display: flex; align-items: center; box-sizing: border-box; min-block-size: 100vh; padding: calc(var(--hd) + 40px) 0 50px; background: #f6f5f1 }   
  .hv-int-grid { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.6fr); gap: clamp(32px, 4vw, 70px); align-items: center }   
  .hv-int .hv-int-grid { width: min(1600px, 88vw) }   
  .hv-int-lead { margin-top: 18px; font-size: 15px; line-height: 1.8; color: #6b6a63 }
  .hv-int-count { margin-top: 28px; font-family: var(--serif); font-size: 22px; color: var(--brand-1) }
  .hv-int-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px }   
  .hv-int-tabs button { block-size: 46px; font-size: 15px }
  .hv-int-note { margin-top: 22px; font-size: 12px; line-height: 1.6; color: #8a897f }
  .hv-int-set { display: none; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; aspect-ratio: 254 / 100 }
  .hv-int-set.is-on { display: grid; animation: hvIntIn .7s cubic-bezier(.2, .7, .1, 1) }
  .hv-int-ph { position: relative; margin: 0; overflow: hidden }
  .hv-int-ph.is-main { grid-row: span 2 }
  .hv-int-ph img { inline-size: 100%; block-size: 100%; object-fit: cover; vertical-align: top }
  .hv-int-ph figcaption { position: absolute; left: 16px; bottom: 12px; font-size: 14px; font-weight: 600; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .55) }
  @keyframes hvIntIn { from { opacity: 0 } }
}

.mo-film .film-card.is-curtain { pointer-events: auto }
.mo-film .film-card.is-play { cursor: pointer }
.film-curtain { --cl: 50%; --cw: 50%; --ctp: 0; position: absolute; top: 0; bottom: 0; left: var(--cl); z-index: 2; inline-size: var(--cw); overflow: hidden;
  background: #ECECEA url(../img/film_curtain.webp) center / 100% 100% no-repeat; box-shadow: -6px 0 18px rgba(11, 22, 43, .38);
  touch-action: pan-y; cursor: grab; transform-origin: right center; animation: ctSway 4.6s cubic-bezier(.45, 0, .55, 1) 1.5s infinite }

@keyframes ctSway { 0%, 55%, 100% { transform: scaleX(1) } 72% { transform: scaleX(.95) } 86% { transform: scaleX(1.008) } }
.film-curtain.is-drag { animation: none; cursor: grabbing }
.film-curtain.is-anim { animation: none; transition: left .55s cubic-bezier(.23, 1, .32, 1), inline-size .55s cubic-bezier(.23, 1, .32, 1) }
.film-curtain.is-gone { opacity: 0; visibility: hidden; transition: left .55s cubic-bezier(.23, 1, .32, 1), inline-size .55s cubic-bezier(.23, 1, .32, 1), opacity .35s ease, visibility 0s linear .35s }

.ct-label { position: absolute; left: 0; bottom: 10%; inline-size: 12.5vw; block-size: auto; aspect-ratio: 2 / 1; display: block; mix-blend-mode: multiply; pointer-events: none }

.ct-arw { position: absolute; left: 4.6vw; top: 50%; display: flex; align-items: center; gap: .2vw; translate: 0 -50%; opacity: calc(1 - var(--ctp) * 3); pointer-events: none }
.ct-arw i { inline-size: 5vw; block-size: 5vw; border: solid var(--brand-1); border-width: 3px 3px 0 0; rotate: 45deg; opacity: .3; animation: ctArw 1.4s cubic-bezier(.45, 0, .55, 1) infinite }

.ct-txt { margin-inline-start: 3.4vw; font-style: normal; font-size: 3.7vw; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--brand-1); white-space: nowrap }
.ct-arw i:nth-child(2) { animation-delay: .15s }
.ct-arw i:nth-child(3) { animation-delay: .3s }
@keyframes ctArw { 0%, 70%, 100% { opacity: .3; translate: 0 0 } 35% { opacity: 1; translate: 1.6vw 0 } }
.ct-btn { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: inherit; -webkit-tap-highlight-color: transparent }
.ct-btn:focus-visible { outline: 2px solid var(--brand-1); outline-offset: -6px }

.film-stop { position: absolute; left: 2.6vw; top: 2.6vw; z-index: 3; padding: 1.6vw 3vw; border: 0; border-radius: 2px; background: rgba(11, 22, 43, .86); color: #fff; font: inherit; font-size: 3.1vw; visibility: hidden; opacity: 0 }
.mo-film .film-card.is-play .film-stop { visibility: visible }
.mo-film .film-card.is-play .film-stop:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px }
@media (prefers-reduced-motion: reduce) { .film-curtain, .ct-arw i { animation: none } .ct-arw i { opacity: 1 } }

@media (max-width:990px) {
  .pr5-r:nth-child(1) { --pc: #b06a12 }
  .pr5-r:nth-child(2) { --pc: #2e7d32 }
  .pr5-r:nth-child(3) { --pc: #1e6fb8 }
  .pr5-r:nth-child(4) { --pc: var(--brand-1) }
  .pr5-r:nth-child(5) { --pc: #c2410c }
  .pr5-r:nth-child(6) { --pc: #4d7c0f }
}

@media (max-width:990px) {
  .mo-gift .gift-list li { position: relative; transform-origin: 20% 50% }
  .mo-gift.is-armed .gift-list li { opacity: 0; transform: scale(.35) }
  .mo-gift.is-pop .gift-list li { animation: giftPop .6s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--gi, 0) * .28s) }
  .mo-gift.is-pop .gift-list li.is-voucher::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--brand-3); pointer-events: none;
    animation: giftRing .7s ease-out both; animation-delay: calc(var(--gi, 0) * .28s + .3s) }
}
@keyframes giftPop { 0% { opacity: 0; transform: scale(.35) } 55% { opacity: 1; transform: scale(1.1) } 78% { transform: scale(.97) } 100% { opacity: 1; transform: scale(1) } }
@keyframes giftRing { 0% { opacity: .95; transform: scale(1) } 100% { opacity: 0; transform: scale(1.06, 1.45) } }