

.sec-main .media-bg .hero-bg { object-position: center 58%; transform-origin: 62% 60% }
.sec-main .hero-src { position: absolute; left: 40px; bottom: 28px; z-index: 3; margin: 0; font-size: 12px; letter-spacing: .02em; color: rgba(255,255,255,.55); pointer-events: none }
@media (max-width:990px) {
  .mo-hero .hl-hero-media .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; z-index: 0 }
  .mo-hero .hero-src { position: absolute; left: 12px; bottom: 8px; z-index: 2; margin: 0; font-size: 10px; letter-spacing: .02em; color: rgba(255,255,255,.62); pointer-events: none }
}
@media (prefers-reduced-motion: no-preference) {
  .sec-main .media-bg .hero-bg, .mo-hero .hl-hero-media .hero-bg { animation: sjHeroBreath 24s ease-in-out infinite alternate; will-change: transform }
  @keyframes sjHeroBreath { from { transform: scale(1) } to { transform: scale(1.07) } }
}

.v3-unit-soon { margin: 28px 0 0; font-size: 15px; line-height: 1.7; color: var(--brand-1) }
.mo-unit .u-card.is-soon { display: flex; align-items: center; min-height: 18vw }
.mo-unit .u-card.is-soon h5.u-lb { margin: 0 }

@media (max-width:990px) {
  .pagehead .brandmark { gap: 1.80vw }
  .pagehead .brandmark .li-en { width: 11.45vw; height: 6.07vw }
  .pagehead .brandmark .li-kr { width: 40.72vw; height: 5.16vw }
  .mo-film .film-logo .li-en { width: 19.94vw; height: 10.57vw }
  .mo-film .film-logo .li-kr { width: 33.84vw; height: 4.29vw }
}

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

