@media (min-width:991px) {
  html, body { height: auto; overflow: visible }
  .v2-wrap { width: min(1320px,88vw); margin-left: auto; margin-right: auto }
  .v3 { --hd: var(--hd-h-pc); --serif: var(--font-serif); --ital: "Playfair Display", var(--font-serif) }
  .v3-label { font-family: var(--ital); font-style: italic; font-weight: 400; font-size: 1.6rem; letter-spacing: 0; color: var(--brand-1); margin-bottom: 14px }
  .v3-label.is-light { color: var(--brand-3) }
  .v3-link { position: relative; display: inline-block; margin-top: 40px; padding-bottom: 8px; font-size: var(--fs-16); font-weight: var(--fw-emph); letter-spacing: .02em; color: var(--brand-1) }
  .v3-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform .5s var(--ease-main) }
  .v3-link:hover::after { transform: scaleX(.35) }
  .v3-link.is-light { color: #fff }
  
  .pagehead { transition: background var(--dur-ui) var(--ease-main),box-shadow var(--dur-ui) var(--ease-main) }
  .pagehead.is-solid { background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.08) }
  
  [data-rv] { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease-main),transform 1.1s cubic-bezier(.2,.7,.1,1) }
  [data-rv].rv-on { opacity: 1; transform: translate3d(0,0,0) }
  [data-rv].rv-on+[data-rv].rv-on { transition-delay: .12s }
  [data-rv].rv-on+[data-rv].rv-on+[data-rv].rv-on { transition-delay: .24s }
  [data-rv].rv-on+[data-rv].rv-on+[data-rv].rv-on+[data-rv].rv-on { transition-delay: .36s }
  .v3-prem-no, .v3-prem-items h2, .v3-unit-size b, .v3-label { font-variant-numeric: lining-nums }

  
  .v3-hero { position: relative; height: 100vh; min-height: 720px; overflow: hidden }
  .v3-hero-shade { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 60% 40% at 50% 34%, rgba(var(--shadow-rgb),.36) 0%, rgba(var(--shadow-rgb),.12) 60%, rgba(var(--shadow-rgb),0) 100%), linear-gradient(0deg, rgba(var(--shadow-rgb),.62) 0%, rgba(var(--shadow-rgb),0) 34%) }
  .v3-hero-in { position: absolute; left: 0; right: 0; top: 34%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center }   
  .v3-hero-title { width: min(66vw, 1080px); margin: 0 auto; filter: drop-shadow(0 6px 26px rgba(0,0,0,.32)) }   
  .v3-hero-title img { display: block; width: 100%; height: auto; clip-path: inset(0 50% 0 50%); transition: clip-path 2s cubic-bezier(.6,.05,.2,1) .3s }      
  .v3-hero.is-loaded .v3-hero-title img { clip-path: inset(0 0 0 0) }
  .v3-hero-mark { margin-top: 34px; opacity: 0; transform: translateY(16px); transition: opacity 1s 1.6s,transform 1s 1.6s }
  .v3-hero.is-loaded .v3-hero-mark { opacity: 1; transform: translate3d(0,0,0) }
  
  .v3-prem { position: relative; height: 650vh; background: var(--brand-1) }
  .v3-prem-stage { position: sticky; top: var(--hd); height: calc(100vh - var(--hd)); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); overflow: hidden }
  .v3-prem-text { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(48px,6vw,110px)0 max(6vw,calc((100vw - 1320px)/2)); color: #fff }
  .v3-prem-items { position: relative; height: clamp(320px,44vh,420px) }
  .v3-prem-items article { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; opacity: 0; transform: translateY(40px); transition: opacity .7s var(--ease-main),transform .9s cubic-bezier(.2,.7,.1,1); pointer-events: none }
  .v3-prem-items article.is-on { opacity: 1; transform: none; pointer-events: auto }
  .v3-prem-items article.is-up { transform: translateY(-40px) }
  .v3-prem-no { position: absolute; left: -.04em; top: 0; font-family: var(--ital); font-style: normal; font-weight: 800; font-size: clamp(9rem,15vw,15rem); line-height: .8; letter-spacing: -.04em; color: rgba(var(--main3-rgb),.14) }
  .v3-prem-items h2 { position: relative; font-family: var(--ital); font-weight: 700; font-size: clamp(2.3rem, 3.8vw, 4.3rem); line-height: 1; letter-spacing: -.01em; white-space: nowrap; color: #fff }
  .v3-prem-items h2.is-ko { font-weight: 400; letter-spacing: -.03em }   
  .v3-prem-items p { position: relative; max-width: 30em; margin-top: 26px; font-family: var(--serif); font-weight: 300; font-size: clamp(1.1rem,1.35vw,1.3rem); line-height: 1.8; color: rgba(255,255,255,.82) }
  .v3-prem-nav { display: flex; gap: 40px; margin-top: 60px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.22); width: max-content }
  .v3-prem-nav button { position: relative; padding: 4px 0; font-size: 1.3rem; font-weight: var(--fw-btn); letter-spacing: -.3px; color: rgba(255,255,255,.5); transition: color .4s }
  .v3-prem-nav button::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 3px; background: var(--brand-3); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-main) }
  .v3-prem-nav li.is-on button { color: #fff }
  .v3-prem-nav li.is-on button::before { transform: scaleX(1) }
  .v3-prem-nav button:hover { color: #fff }
  .v3-prem-photos { position: relative; overflow: hidden; background: rgb(var(--shadow-rgb)) }
  .v3-prem-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1s var(--ease-main),transform 2.4s cubic-bezier(.2,.7,.1,1) }
  .v3-prem-photos img.is-on { z-index: 1; opacity: 1; transform: scale(1) }
  .v3-prem-cap { position: absolute; right: 18px; bottom: 14px; font-size: 12px; color: rgba(255,255,255,.75); text-shadow: 0 1px 6px rgba(0,0,0,.5) }
  
  .v3-park { position: relative; height: 540vh; background: rgb(var(--shadow-rgb)); color: #fff }
  .v3-park-stage { position: sticky; top: var(--hd); height: calc(100vh - var(--hd)); overflow: hidden }
  .v3-park-slides { position: absolute; inset: 0; z-index: 0; isolation: isolate }   
  
  .v3-park-slides > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; z-index: 0 }
  .v3-park-slides > img.was-on { visibility: visible; z-index: 1 }
  .v3-park-slides > img.is-on { visibility: visible; z-index: 2 }
  .park-blinds { position: absolute; inset: 0; z-index: 3; pointer-events: none }
  .park-blinds i { position: absolute; top: 0; bottom: 0; overflow: hidden; clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.76,0,.24,1) }
  .park-blinds.to-left i { clip-path: inset(0 0 0 100%) }
  .park-blinds.go i { clip-path: inset(0 0 0 0) }
  .park-blinds img { position: absolute; top: 0; height: 100%; max-width: none; object-fit: cover; transform: scale(1.06); transition: transform 1.6s cubic-bezier(.2,.7,.1,1) }
  .park-blinds.go img { transform: scale(1) }
  .v3-park-veil { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(0,0,0,.64) 0%,rgba(0,0,0,.36) 44%,rgba(0,0,0,.05) 74%),linear-gradient(0deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,0) 38%) }
  .v3-park-in { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center }
  .v3-park-eyebrow { font-size: var(--fs-14); font-weight: var(--fw-btn); letter-spacing: .44em; color: rgba(255,255,255,.88) }
  .v3-park-title { margin-top: 20px; font-family: var(--font-body); font-size: clamp(3.8rem,6.2vw,6.4rem); font-weight: var(--fw-btn); letter-spacing: .1em; line-height: 1; text-shadow: 0 4px 30px rgba(0,0,0,.25) }
  .v3-park-copy { position: relative; height: 120px; margin-top: clamp(56px,11vh,130px) }
  
  .v3-park-copy article { position: absolute; left: 0; top: 0; visibility: hidden; clip-path: inset(-12% 0 -12% 100%); transform: translateX(16px); transition: clip-path .45s cubic-bezier(.7,0,.3,1), transform .45s cubic-bezier(.7,0,.3,1), visibility 0s linear .45s }
  .v3-park-copy article:not(.is-on):not(.is-gone) { clip-path: inset(-12% 100% -12% 0); transform: translateX(-22px) }
  .v3-park-copy.to-left article.is-gone { clip-path: inset(-12% 100% -12% 0); transform: translateX(-16px) }
  .v3-park-copy.to-left article:not(.is-on):not(.is-gone) { clip-path: inset(-12% 0 -12% 100%); transform: translateX(22px) }
  .v3-park-copy article.is-on { visibility: visible; clip-path: inset(-12% -2% -12% 0); transform: translate3d(0,0,0); transition: clip-path .9s cubic-bezier(.2,.7,.1,1) .5s, transform .9s cubic-bezier(.2,.7,.1,1) .5s, visibility 0s linear .5s }
  .v3-park-copy h3 { font-size: clamp(1.8rem,2.3vw,2.25rem); font-weight: var(--fw-btn); letter-spacing: -.5px }
  .v3-park-copy p { margin-top: 18px; font-size: var(--fs-19); color: rgba(255,255,255,.86); text-shadow: 0 2px 14px rgba(0,0,0,.3) }
  .v3-park-nav { display: flex; gap: 32px; margin-top: clamp(48px,10vh,120px) }
  .v3-park-nav button { position: relative; padding: 4px 0 12px; font-size: var(--fs-20); font-weight: var(--fw-btn); letter-spacing: .08em; color: rgba(255,255,255,.5); transition: color .4s }
  .v3-park-nav button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-main) }
  .v3-park-nav button.is-on { color: #fff }
  .v3-park-nav button.is-on::after { transform: scaleX(1) }
  .v3-park-nav button:hover { color: #fff }
  .v3-park-cap { position: absolute; right: 24px; bottom: 18px; z-index: 1; font-size: 12px; color: rgba(255,255,255,.7) }
  
  .v3-unit { position: relative; height: 320vh; background: #f1efea }
  .v3-unit-pin { position: sticky; top: var(--hd); height: calc(100vh - var(--hd)); display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: #f3f1ec url(../img/unit_ceramic.webp) center / cover no-repeat }
  
  .v3-unit-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.5fr); gap: clamp(32px,4vw,70px); align-items: center }
  .v3-unit-title { font-family: var(--serif); font-size: clamp(1.4rem,1.7vw,1.75rem); font-weight: var(--fw-regular); color: #3c3c38 }
  .v3-unit-size { display: flex; align-items: flex-start; margin-top: 14px; color: var(--brand-1); line-height: .9 }
  .v3-unit-size b { font-family: var(--ital); font-weight: 800; font-size: clamp(8rem,13vw,13.5rem); letter-spacing: -.05em }
  .v3-unit-size span { margin: .35em 0 0 .1em; font-family: var(--serif); font-size: clamp(2rem,3vw,3rem) }
  .v3-unit-rows { margin-top: 30px; border-top: 1px solid rgba(0,0,0,.18) }
  .v3-unit-rows>div { display: flex; justify-content: space-between; align-items: baseline; padding: 15px 0; border-bottom: 1px solid rgba(0,0,0,.1) }
  .v3-unit-rows dt { font-size: var(--fs-14); color: #6f6e67 }
  .v3-unit-rows dd { font-family: var(--serif); font-size: 1.3rem; color: var(--brand-1) }
  .v3-unit-tabs { display: flex; gap: 10px; margin-top: 30px }
  .v3-unit-tabs button { flex: 1; height: 56px; border: 1px solid var(--brand-1); font-size: var(--fs-17); font-weight: var(--fw-emph); color: var(--brand-1); transition: background .8s cubic-bezier(.4,0,.2,1), color .8s cubic-bezier(.4,0,.2,1) }
  .v3-unit-tabs button[aria-selected="true"] { background: var(--brand-1); color: var(--brand-3) }
  .v3-unit-tabs button:not([aria-selected="true"]):hover { background: rgba(var(--main1-rgb),.06) }
  .v3-unit-stage { position: relative; height: clamp(420px, 62vh, 640px) }
  
  
  .v3-unit-iso, .v3-unit-crop img { transition: opacity .8s cubic-bezier(.4,0,.2,1) }
  .v3-unit-iso.u-out, .v3-unit-crop img.u-out { opacity: 0 }
  .u-ghost { opacity: 0 }
  .u-ghost.ghost-in { opacity: 1 }
  .v3-unit-size, .v3-unit-rows dd, .v3-unit-plan figcaption span { transition: opacity .8s cubic-bezier(.4,0,.2,1), transform 1.1s cubic-bezier(.2,.7,.1,1) }
  .v3-unit-size.u-out, .v3-unit-rows dd.u-out, .v3-unit-plan figcaption span.u-out { opacity: 0; transition-delay: 0s !important }   
  .u-ghost-t { opacity: 0; transform: none; transition: opacity .8s cubic-bezier(.4,0,.2,1) }
  .u-ghost-t.ghost-in { opacity: 1 }
  .v3-unit-iso { position: absolute; left: 0; top: 0; width: 74%; height: 100%; object-fit: contain; object-position: left center; mix-blend-mode: multiply }
  .v3-unit-plan { position: absolute; right: 0; bottom: calc(4% + 44px); width: 34%; margin: 0; background: #fff; padding: 14px 14px 10px; box-shadow: 0 22px 44px rgba(var(--shadow-rgb),.16) }
  
  .v3-unit-crop { position: relative; aspect-ratio: 936/712; overflow: hidden }
  .v3-unit-crop img { position: absolute; left: -19.44%; top: -23.17%; width: 138.89%; max-width: none; height: auto }
  .v3-unit-plan figcaption { margin-top: 8px; font-size: 13px; color: #77766f }
  .v3-unit-note { margin-top: 26px; font-size: 13px; color: #85847c }
  
  .v3-unit.is-plan-only { height: calc(100vh + var(--unit-n, 8) * 55vh) }
  .is-plan-only .v3-unit-iso { display: none }
  .is-plan-only .v3-unit-plan { left: 0; top: 0; bottom: 0; width: auto; display: flex; flex-direction: column; padding: 22px 22px 14px }
  .is-plan-only .v3-unit-crop { flex: 1; aspect-ratio: auto }
  .is-plan-only .v3-unit-crop img { left: 0; top: 0; width: 100%; height: 100%; object-fit: contain }
  .is-plan-only .v3-unit-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
  .is-plan-only .v3-unit-tabs button { height: 46px; font-size: 15px }
  .is-plan-only .v3-unit-size b { font-size: clamp(6rem, 9vw, 9.5rem) }
  
  .v3-visit { position: relative; min-height: 100vh; display: flex; align-items: center; padding: calc(var(--hd) + 50px)0 70px; overflow: hidden; background: rgb(var(--shadow-rgb)); color: #fff }
  .v3-visit-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
  .v3-visit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(var(--shadow-rgb),.92) 0%,rgba(var(--shadow-rgb),.72) 50%,rgba(var(--shadow-rgb),.55) 100%) }
  .v3-visit-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,460px); gap: clamp(48px,6vw,110px); align-items: center }
  .v3-visit-title { font-family: var(--serif); font-size: clamp(2.6rem,3.8vw,4rem); font-weight: var(--fw-btn); line-height: 1.3; letter-spacing: -1.5px }
  .v3-visit-offer { margin-top: 26px; font-size: var(--fs-17); color: rgba(255,255,255,.78) }
  .v3-visit-tel { display: block; margin-top: 44px; font-size: clamp(3.4rem,5vw,5rem); font-weight: 800; letter-spacing: -2px; line-height: 1; color: var(--brand-3); transition: color .3s }
  .v3-visit-tel small { display: block; margin-bottom: 12px; font-size: var(--fs-14); font-weight: var(--fw-btn); letter-spacing: .14em; color: rgba(255,255,255,.6) }
  .v3-visit-tel:hover { color: #fff }
  .v3-visit-facts { margin-top: 44px; border-top: 1px solid rgba(255,255,255,.2) }
  .v3-visit-facts li { display: flex; gap: 24px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: var(--fs-14); color: rgba(255,255,255,.82) }
  .v3-visit-facts span { width: 40px; flex: none; color: var(--brand-3) }
  .v3-form { padding: 42px 40px 38px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px) }
  .v3-form h3 { font-family: var(--serif); font-size: 1.6rem; font-weight: var(--fw-btn) }
  .v3-form .form-note { margin: 6px 0 10px; font-size: var(--fs-14); color: rgba(255,255,255,.6) }
  .v3-form label { display: block; margin-top: 18px; font-size: 13px; color: rgba(255,255,255,.7) }
  .v3-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
  .v3-form input:not([type="checkbox"]), .v3-form select { display: block; width: 100%; height: 44px; margin-top: 4px; padding: 0 2px; border: 0; border-bottom: 1px solid rgba(255,255,255,.4); border-radius: 0; background: transparent; font: inherit; font-size: 16px; color: #fff; color-scheme: dark }
  .v3-form input::placeholder { color: rgba(255,255,255,.4) }
  .v3-form select option { color: #111 }
  .v3-form input:focus, .v3-form select:focus { outline: none; border-bottom-color: var(--brand-3) }
  .v3-form .agree-row { display: flex; justify-content: space-between; align-items: center; margin-top: 24px }
  .v3-form .agree { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-14); color: rgba(255,255,255,.85) }
  .v3-form .agree input { accent-color: var(--brand-3) }
  .v3-form .agree-view { font-size: 13px; color: rgba(255,255,255,.6) }
  .v3-form .agree-body { margin-top: 10px; max-height: 160px; overflow-y: auto; padding: 12px 14px; background: rgba(0,0,0,.28); font-size: 12px; line-height: 1.65; color: rgba(255,255,255,.75) }
  .v3-form .agree-body[hidden] { display: none }
  .v3-form .form-status { min-height: 1em; margin-top: 10px; font-size: 13px }
  .v3-submit { width: 100%; height: 58px; margin-top: 8px; background: var(--brand-3); color: var(--brand-1); font-size: var(--fs-17); font-weight: var(--fw-head); transition: background .3s }
  .v3-submit:hover { background: #fff }
  
  .pagefoot .ft-wrap { width: min(1320px,88vw) }
  
  .pagefoot .ft-side #toTopBtn { order: -1; display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 22px; border-radius: 50%; background: #fff; color: var(--brand-1); box-shadow: 0 6px 16px rgba(0,0,0,.25); transition: transform .3s var(--ease-main) }
  .pagefoot .ft-side #toTopBtn:hover { transform: translateY(-3px) }
  .pagefoot .ft-side #toTopBtn .top-chev { width: 23px; aspect-ratio: 1 }

  
  .reg-orb { position: fixed; right: 18px; bottom: 18px; z-index: 45; width: 178px; height: 178px; padding: 0; color: #fff; opacity: 0; transform: scale(.88); pointer-events: none; transition: opacity .6s var(--ease-main), transform .7s cubic-bezier(.2,.7,.1,1), color .4s }
  .reg-orb.orb-on { opacity: 1; transform: scale(1); pointer-events: auto }
  .reg-orb.orb-ink { color: var(--brand-1) }
  .reg-orb__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: regOrbTurn 18s linear infinite }
  .reg-orb__ring text { font: 500 14px var(--font-body); letter-spacing: .32em; fill: currentColor }
  @keyframes regOrbTurn { to { transform: rotate(1turn) } }
  .reg-orb__core { position: absolute; left: 33px; top: 33px; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--brand-1); color: #fff; box-shadow: 0 10px 26px rgba(var(--shadow-rgb), .28) }
  .reg-orb__wash { position: absolute; inset: 0; border-radius: 50%; background: var(--brand-2); transform: scale(0); transition: transform .7s cubic-bezier(.2,.7,.1,1) }
  .reg-orb__txt { position: relative; font-size: 15px; font-weight: var(--fw-head); line-height: 1.3; text-align: center; transition: opacity .4s; white-space: nowrap }   
  .reg-orb__go { position: absolute; font: 400 34px/1 var(--font-body); opacity: 0; transform: translateX(-14px); transition: opacity .7s, transform .8s cubic-bezier(.2,.7,.1,1) }
  .reg-orb:hover .reg-orb__wash { transform: scale(1) }
  .reg-orb:hover .reg-orb__txt { opacity: 0 }
  .reg-orb:hover .reg-orb__go { opacity: 1; transform: translateX(0); transition-delay: .3s }
  .reg-orb:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 4px; border-radius: 50% }
}
@media (min-width:991px) and (max-height:760px) {
  .v3-prem-items { height: 300px }
  .v3-prem-nav { margin-top: 34px }
  .v3-visit-tel { margin-top: 28px }
  .v3-visit-facts { margin-top: 28px }
}
@media (min-width:991px) and (prefers-reduced-motion:reduce) {
  [data-rv] { opacity: 1; transform: none; transition: none }
  .v3-hero-title img { clip-path: none; transition: none }
  .v3-hero-mark { opacity: 1; transform: none; transition: none }
  .v3-prem-photos img { transition: opacity .3s; transform: none }
  .park-blinds { display: none }
  .v3-park-copy article, .v3-park-copy article.is-on { transition: none; transform: none }
  .reg-orb__ring { animation: none }
}

@media (max-width:990px) {
  
  .pagehead .menu-btn { left: auto; right: 4.6vw; width: 28px; height: 17px; z-index: 2 }
  .pagehead .menu-btn span { height: 1.5px; transition: transform .7s cubic-bezier(.7,0,.2,1), opacity .3s ease }
  .pagehead .menu-btn span:nth-child(2) { top: 7.75px }
  .pagehead.is-unfold .menu-btn span:nth-child(1) { transform: translateY(7.75px) rotate(45deg); transform-origin: 50% 50% }
  .pagehead.is-unfold .menu-btn span:nth-child(2) { opacity: 0 }
  .pagehead.is-unfold .menu-btn span:nth-child(3) { transform: translateY(-7.75px) rotate(-45deg); transform-origin: 50% 50% }
  .pagehead .hl-tel { display: none }
  .pagehead .tune-btn { left: 4vw }
  
  .allmenu { position: fixed; top: var(--hd-h-mo); left: 0; right: 0; bottom: 0; width: auto; height: auto; display: flex; flex-direction: column; justify-content: center; padding: 6vw 9vw calc(12vw + env(safe-area-inset-bottom)); background: var(--brand-1); overflow-y: auto; overscroll-behavior: contain; transform: none; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 1.1s cubic-bezier(.7,0,.2,1), visibility 0s linear 1.1s }
  .pagehead.is-unfold .allmenu { transform: none; clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s }
  .mega-inner { display: block }
  .mega-col { padding: 0; border-bottom: 1px solid rgba(255,255,255,.18); opacity: 0; transform: translate3d(0,26px,0); transition: opacity .9s ease, transform 1.2s cubic-bezier(.7,0,.2,1) }
  .pagehead.is-unfold .mega-col { opacity: 1; transform: translate3d(0,0,0) }
  .pagehead.is-unfold .mega-col:nth-child(2) { transition-delay: .06s }
  .pagehead.is-unfold .mega-col:nth-child(3) { transition-delay: .12s }
  .pagehead.is-unfold .mega-col:nth-child(4) { transition-delay: .18s }
  .pagehead.is-unfold .mega-col:nth-child(5) { transition-delay: .24s }
  .pagehead.is-unfold .mega-col:nth-child(6) { transition-delay: .3s }
  .mega-col h4 { position: relative; padding: 5.2vw 0; text-align: center; font-size: 6.4vw; font-weight: 500; letter-spacing: -.04em; color: #fff; pointer-events: auto; cursor: pointer }
  .mega-col h4:hover { background: none }
  .mega-col h4::after { display: none }
  .mega-col:has(li + li) h4::after { display: block; content: ""; position: absolute; left: auto; right: 1vw; top: 50%; width: 2.3vw; height: 2.3vw; border: 0; border-right: 1.5px solid rgba(255,255,255,.75); border-bottom: 1.5px solid rgba(255,255,255,.75); transform: translateY(-70%) rotate(45deg); transition: transform .45s cubic-bezier(.7,0,.2,1) }
  .mega-col.menu-shown h4::after { transform: translateY(-25%) rotate(-135deg) }
  
  .mega-col ul { display: none; margin: 0; background: none }
  .mega-col.menu-shown ul { display: grid; padding-bottom: 4vw; animation: subRise .45s cubic-bezier(.2,.7,.1,1) both }
  @keyframes subRise { from { opacity: 0; transform: translate3d(0,-8px,0) } to { opacity: 1; transform: translate3d(0,0,0) } }
  .mega-col ul li a { padding: 2.2vw 0; text-align: center; font-size: 4.3vw; color: rgba(255,255,255,.72) }
  .mega-col ul li a:hover { background: none; color: var(--brand-3) }
  .allmenu .mo-gnb { display: none }
  
  .mo-quick.v2-mbar { left: auto; right: 3.6vw; bottom: calc(4vw + env(safe-area-inset-bottom)); width: auto; display: flex; flex-direction: column; gap: 2.6vw; padding: 0; background: none; border: 0; box-shadow: none; pointer-events: none }
  .v2-mbar a, .v2-mbar button { position: relative; display: block; width: 15vw; height: 15vw; max-width: 62px; max-height: 62px; padding: 0; border: 0; border-radius: 50%; background: none; pointer-events: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.28)) }
  .v2-mbar img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 50% }
  .v2-mbar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
  #toTopBtn { margin-bottom: 0 }
  
  .v2-qband { position: relative; padding-top: 34vw; background: #f3f2ed; overflow: hidden }
  .v2-qband .q-scene { position: absolute; right: 4vw; bottom: 19vw; width: 33vw; max-width: 150px; pointer-events: none }
  .v2-qband .q-tram { display: block; inline-size: 100%; block-size: auto }
  .v2-qband .q-banner { position: relative; z-index: 1; display: block; font-size: 0 }
  .v2-qband .q-banner img { display: block; inline-size: 100%; block-size: auto }
}
@media (min-width:991px) {
  .v2-qband, .v2-mbar { display: none }
}
@media (max-width:990px) {
  .reg-orb { display: none }
  #toTopBtn .top-chev { width: 55%; height: 55% }
}

@media (min-width:991px) {
  .site-popup.sp-rise .sp-dim { opacity: 0; transition: opacity .8s ease }
  .site-popup.sp-rise .sp-inner { opacity: 0; transform: translate3d(0,80px,0); transition: opacity .9s cubic-bezier(.4,0,.2,1) .12s, transform 1.25s cubic-bezier(.16,1,.3,1) .12s }
  .site-popup.sp-up .sp-dim { opacity: 1 }
  .site-popup.sp-up .sp-inner { opacity: 1; transform: translate3d(0,0,0) }
}

@media (min-width:991px) {
  
  .pop-pill { position: fixed; right: 160px; bottom: 160px; z-index: 45; display: grid; place-items: center; width: 64px; aspect-ratio: 1; padding: 0; border-radius: 50%; background: var(--brand-1); color: #fff; font-size: 12.5px; font-weight: var(--fw-head); line-height: 1.25; letter-spacing: -0.02em; text-align: center; box-shadow: 0 8px 20px rgba(var(--shadow-rgb),.22), 0 0 0 4px rgba(255,255,255,.6); opacity: 0; transform: scale(.8); pointer-events: none; transition: opacity .6s var(--ease-main), transform .7s cubic-bezier(.2,.7,.1,1) .08s, background-color .3s }
  .pop-pill.orb-on { opacity: 1; transform: scale(1); pointer-events: auto }
  .pop-pill:hover { background: var(--brand-2) }
  .pop-pill:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 3px; border-radius: 50% }
}
@media (max-width:990px) {
  .pop-pill { display: none }
}

@media (min-width:991px) {
  .v3-veil { position: fixed; inset: 0; z-index: 990; background: var(--brand-1); opacity: 0; pointer-events: none; transition: opacity .55s cubic-bezier(.4,0,.2,1) }
  .v3-veil.is-on { opacity: 1; pointer-events: auto; transition-duration: .4s }
}
@media (max-width:990px) {
  .v3-veil { display: none }
}

@media (max-width:990px) {
  .mo-int2 { background: #fff; padding: 15vw 6.4vw 11vw; color: #1e2925 }
  .int2-eyebrow { display: flex; flex-direction: column; gap: 2.2vw; font-size: 2.9vw; font-weight: 600; letter-spacing: .1em; color: #6c7671 }
  .int2-eyebrow::before { content: ""; width: 24vw; border-top: 1px solid #9aa39f }
  .int2-title { margin: 7vw 0 0; font-size: 7.6vw; font-weight: 700; line-height: 1.3; letter-spacing: -.03em; color: var(--brand-1) }
  .int2-lead { margin-top: 5vw; padding-top: 4.4vw; border-top: 1px solid #cfd5d2; width: fit-content; font-size: 3.6vw; line-height: 1.65; color: #56615c }
  .int2-type { margin-top: 14vw }
  .int2-area { position: relative; display: inline-block; margin: 0; padding: 4.4vw 0 0 5.4vw; font-size: 10vw; font-weight: 300; line-height: 1; letter-spacing: -.02em; color: #1e2925 }
  .int2-area small { font-size: .5em; vertical-align: .9em; margin-left: .06em }
  .int2-area::before { content: ""; position: absolute; left: 0; top: 0; width: 31vw; height: 17.5vw; border-top: 1px solid #1e2925; border-left: 1px solid #1e2925; pointer-events: none }
  .int2-area::after { content: ""; position: absolute; left: 0; top: 0; width: 6.2vw; border-top: 1px solid #1e2925; transform-origin: 0 0; transform: rotate(45deg) }
  .int2-count { margin: 3vw 0 0; font-size: 3.5vw; color: #56615c }
  .int2-ph { margin: 6vw 0 0 }
  .int2-ph img { display: block; inline-size: 100%; height: auto }
  .int2-ph.is-side { width: 78%; margin-left: auto }
  .int2-ph figcaption { display: flex; align-items: center; gap: 1.8vw; margin-top: 2.4vw; font-size: 3.3vw; color: #36413d }
  .int2-ph figcaption b { display: inline-grid; place-items: center; width: 4.6vw; height: 4.6vw; border-radius: 50%; background: #1e2925; color: #fff; font-size: 2.7vw; font-weight: 600; line-height: 1 }
  .int2-note { margin: 9vw 0 0; font-size: 2.9vw; line-height: 1.6; color: #8a928e }
}

@media (max-width:990px) {
  .mo-val2 { background: #fff; padding: 13vw 7vw 14vw; text-align: center }
  .val2-title { margin: 0; display: flex; flex-direction: column; gap: 2.2vw; letter-spacing: -.04em }
  .val2-title span { font-size: 4.7vw; font-weight: 500; color: #2c3b34 }
  .val2-title b { font-size: 8.2vw; font-weight: 800; line-height: 1.2; color: var(--brand-1) }
  .vt { display: grid; grid-template-columns: 27vw 1fr 27vw; justify-items: center; align-items: center; row-gap: 3vw; margin: 11vw 0 0 }
  .vt-k { font-size: 5.4vw; font-weight: 700; color: var(--brand-1); letter-spacing: -.02em }
  .vt-v { font-size: 3.7vw; font-weight: 600; color: #34413b }
  .vt-dot { position: relative; display: block; width: 7.4vw; height: 7.4vw; border-radius: 50%; box-sizing: border-box }
  .vt-dot.is-now { border: 2px solid var(--brand-1); background: #fff }
  .vt-dot.is-end { background: var(--brand-1) }
  .vt-dot.is-end::after { content: ""; position: absolute; inset: -2vw; border-radius: 50%; border: 2px solid var(--brand-1); opacity: 0; animation: vtPulse 2.4s ease-out infinite }
  
  .vt-line { position: relative; justify-self: stretch; display: block; height: 2px; margin: 0 -1vw; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) }
  .vt-line::before { content: ""; position: absolute; top: 0; bottom: 0; left: -15px; right: 0; background: repeating-linear-gradient(90deg, var(--brand-1) 0 8px, transparent 8px 15px); animation: vtFlow 1.2s linear infinite; will-change: transform }
  @keyframes vtFlow { from { transform: translateX(0) } to { transform: translateX(15px) } }
  @keyframes vtPulse { 0% { transform: scale(.7); opacity: .55 } 80%, 100% { transform: scale(1.25); opacity: 0 } }
}
@media (max-width:990px) and (prefers-reduced-motion:reduce) {
  .vt-line::before, .vt-dot.is-end::after { animation: none }
}

@media (max-width:990px) {
  
  .mo-hero .hl-hero-copy { left: 3vw; right: auto; top: -2vw; width: 90vw; align-items: flex-start }
  .mo-hero .hero-title img { filter: drop-shadow(0 2px 14px rgba(0,0,0,.28)) }
  
  .mo-hero .hl-hero-media { position: relative }
  .mo-hero .hl-hero-media::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 62%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,26,17,.66) 0%, rgba(0,26,17,.42) 55%, rgba(0,26,17,0) 100%) }
  
  .mo-hero .hero-scene { left: 0; right: 0; bottom: -2vw; width: 100% }
  .mo-hero .hero-scene img { -webkit-mask-image: none; mask-image: none }
  
  .mo-hero .hero-scene { overflow: clip }
  .mo-hero .hero-scene img.hs-train { position: absolute; left: 1.151%; top: 55.249%; inline-size: 77.855% }
  .mo-hero .hero-scene.is-hold img.hs-train { transform: translateX(var(--hs-from, -103%)) }   
  .mo-hero .hero-scene.is-run img.hs-train { animation: hsArrive 2.6s cubic-bezier(.16,.72,.22,1) both }
  @keyframes hsArrive { from { transform: translateX(var(--hs-from, -103%)) } to { transform: none } }
  
  .v2-qband { padding-top: 46vw }
  .v2-qband .q-scene { left: 0; right: 0; bottom: min(13vw, 55px); width: 100%; max-width: none }
  
  .mo-final { padding: 0; background: #f4f3f0 }
  .mo-final .final-frame { display: block; inline-size: 100%; height: auto }
}

@media (max-width:990px) {
  
  .mo-brand3 { position: relative; overflow: hidden; background: #fff; padding: 13vw 6.4vw 22vw }   
  .br3-bg { position: absolute; right: -3vw; bottom: 1vw; font-size: 25vw; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: rgba(var(--main1-rgb),.06); pointer-events: none }
  .br3-k { display: flex; align-items: center; gap: 3vw; font-size: 2.6vw; letter-spacing: .24em; color: #8b8f8c }
  .br3-k span { padding-right: 3vw; border-right: 1px solid #b5b9b6; line-height: 1.6 }
  .br3-k::after { content: ""; flex: 1; border-top: 1px solid #c9ccca }
  .br3-t { position: relative; margin: 7vw 0 6vw; font-family: var(--font-serif); font-size: 6.6vw; font-weight: 500; line-height: 1.28; letter-spacing: .06em; color: #26302b }
  .br3-t em { font-style: normal; color: var(--brand-1) }
  .br3-p { position: relative; margin-left: 16%; text-align: right }
  .br3-p p { margin: 0; padding: 2.4vw 0; border-bottom: 1px solid #e3e5e3; font-size: 3.4vw; color: #4b5551 }
  
  .mo-comm3 { background: #fff; padding: 14vw 6.4vw 12vw; color: #1f2623 }
  .cm3-note { margin: 8vw 0 0; font-size: 2.9vw; line-height: 1.6; color: #8a928e }   
  .cm3-t { margin: 0; font-size: 5.6vw; font-weight: 500; letter-spacing: .02em; color: var(--brand-1) }
  .cm3-d { margin: 3vw 0 0; font-size: 3.6vw; line-height: 1.6; color: #3d4642 }
  .cm3-rule { display: block; height: 1px; margin: 8vw 0 7vw; background: linear-gradient(90deg, #2b2f2d 0 20%, transparent 20% 23%, #2b2f2d 23% 100%) }
  .cm3-lb { display: flex; align-items: center; gap: 2.4vw; margin: 0; font-size: 4.4vw; font-weight: 600 }
  .cm3-lb span { padding: .5vw 1.8vw; border: 1px solid #1f2623; font-size: 3.4vw; line-height: 1.25 }
  .cm3-plan { display: block; inline-size: 100%; height: auto; margin: 6vw 0 }
  .cm3-f { margin: 0 }
  .cm3-f img { display: block; inline-size: 100%; height: auto }
  .cm3-f figcaption b { display: block; margin-top: 4vw; font-size: 3.8vw; color: var(--brand-1) }
  .cm3-f figcaption span { display: block; margin-top: 1.6vw; font-size: 3.5vw; line-height: 1.6; color: #3d4642 }
  .cm3-l { display: grid; gap: 3vw; margin: 5vw 0 0; padding: 0; list-style: none }
  .cm3-l li { font-size: 3.3vw; line-height: 1.55; color: #525b57 }
  .cm3-l li b { display: block; margin-bottom: .6vw; font-size: 3.5vw; color: #1f2623 }
  
  .mo-form .form-box { display: grid; grid-template-columns: 21vw minmax(0,1fr); column-gap: 0; row-gap: 0 }
  .mo-form .form-box > :not(label):not(input):not(select) { grid-column: 1 / -1 }
  .mo-form .form-box > h3 { margin-bottom: 1vw }
  .mo-form .form-box > .form-note { margin-bottom: 4vw }
  .mo-form .form-box > label { display: flex; align-items: center; min-height: 13vw; margin: 0; border-bottom: 2px solid #1c2333; font-size: 3.6vw; font-weight: 600 }
  .mo-form .form-box > input:not([type="checkbox"]):not([type="radio"]), .mo-form .form-box > select { height: 13vw; margin: 0; padding: 0 2vw; border: 0; border-bottom: 1px solid #cfd4dc; border-radius: 0; background: transparent }
  .mo-form .form-box > .agree-row { margin-top: 5vw }
  .mo-section.mo-form button.btn-line { display: block; border-radius: 0; inline-size: 66%; height: 13.5vw; max-height: 58px; margin: 7vw auto 0; padding: 0; border: 1px solid rgba(255,255,255,.85); background: transparent; color: #fff; font-size: 4.2vw; font-weight: 600 }
  .mo-section.mo-form button.btn-line:active { background: rgba(255,255,255,.1) }
  
  .v2-mbar.orb-bar { gap: .6vw; right: 1.2vw }   
  .orb-bar a, .orb-bar button { position: relative; width: 21vw; height: 21vw; max-width: 88px; max-height: 88px; border-radius: 50%; background: transparent }
  .orb-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: orbSpin 18s linear infinite }
  .orb-ring text { font-size: 7.4px; font-weight: 600; letter-spacing: .14em; fill: var(--brand-1) }
  .orb-arc { fill: none; stroke: var(--brand-1); stroke-width: 1.1; stroke-linecap: round }
  .orb-bar .orb-core { position: absolute; inset: 16%; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5vw; border-radius: 50%; text-align: center; line-height: 1.15 }
  .orb-bar .q-reserve .orb-core { background: var(--brand-1); color: #fff }
  .orb-bar .q-call .orb-core { background: #fff; color: var(--brand-1); box-shadow: inset 0 0 0 1px var(--brand-1) }
  .orb-core b { font-size: 2.7vw; font-weight: 700; white-space: nowrap; letter-spacing: -.02em }
  .orb-bar .orb-core { box-shadow: 0 4px 12px rgba(0,0,0,.2) }
  .orb-bar .q-call .orb-core { box-shadow: inset 0 0 0 1.5px var(--brand-1), 0 4px 12px rgba(0,0,0,.2) }
  .orb-ic { width: 4.6vw; height: 4.6vw; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
  @keyframes orbSpin { to { transform: rotate(360deg) } }
  
  .pagefoot { background: #fff; color: #4a4f4c; padding: 12vw 6.4vw calc(28vw + env(safe-area-inset-bottom)); border-top: 1px solid #e3e5e3 }
  .pagefoot .ft-wrap { display: block; inline-size: auto; padding: 0 }
  .pagefoot .ft-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6vw; border-bottom: 1px solid #e3e5e3 }
  .pagefoot .ft-logo { margin: 0; color: var(--brand-1) }
  .pagefoot #toTopBtn { position: static; display: grid; place-items: center; width: 9vw; height: 9vw; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #1f2623 }
  .pagefoot #toTopBtn .top-chev { width: 70%; height: 70% }
  .ft-notes { display: grid; gap: 1.6vw; margin: 6vw 0 0; padding: 0; list-style: none }
  .ft-notes li { position: relative; padding-left: 3vw; font-size: 2.9vw; line-height: 1.6; color: #8a908d }
  .ft-notes li::before { content: "-"; position: absolute; left: 0 }
  .pagefoot .ft-tel { display: flex; align-items: center; gap: 2vw; margin-top: 7vw; padding-bottom: 6vw; border-bottom: 1px solid #e3e5e3; font-size: 5vw; font-weight: 700; color: #1f2623 }
  .pagefoot .ft-tel svg { width: 4.6vw; height: 4.6vw; fill: currentColor }
  .ft-rows { display: grid; gap: 2.4vw; margin: 6vw 0 0 }
  .ft-rows div { display: grid; grid-template-columns: 19vw minmax(0,1fr) }
  .ft-rows dt { font-size: 3vw; font-weight: 700; color: #1f2623 }
  .ft-rows dd { margin: 0; font-size: 3vw; line-height: 1.55; color: #5c625f }
  .pagefoot .ft-copyright { margin-top: 7vw; font-size: 2.7vw; color: #9aa09d }
  
  .subhero.sh-band { padding: 40px 16px 34px }
}

.subhero.sh-band { block-size: auto; height: auto; justify-content: center; text-align: center; padding: 64px 16px 56px; background-color: var(--brand-1); background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, rgba(0,0,0,.05) 2px 5px) }
.subhero.sh-band::after { display: none }
.sh-band .subhero-wrap { inline-size: auto; align-items: center; padding: 0; gap: 10px }
.sh-band .sh-en { margin: 0; color: #fff; font-size: 32px; font-weight: 300; letter-spacing: .5em; padding-left: .5em; line-height: 1.2 }
.sh-band h1 { margin: 0; color: rgba(255,255,255,.82); font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: 0; animation: none }

@media (min-width:991px) {
  .pagefoot { background: var(--brand-1); color: rgba(255,255,255,.72) }
  .pagefoot .ft-wrap { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "logo top" "notes tel" "rows tel" "copy copy"; column-gap: 60px; align-items: start }
  .pagefoot .ft-head { display: contents }
  .pagefoot .ft-logo { grid-area: logo; margin: 0 0 22px; color: #fff }
  .pagefoot #toTopBtn { grid-area: top; justify-self: end; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--brand-1); box-shadow: 0 6px 16px rgba(0,0,0,.25); transition: transform .3s var(--ease-main) }
  .pagefoot #toTopBtn:hover { transform: translateY(-3px) }
  .pagefoot #toTopBtn .top-chev { width: 23px; aspect-ratio: 1 }
  .ft-notes { grid-area: notes; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none }
  .ft-notes li { font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.55) }
  .ft-notes li::before { content: "- " }
  .pagefoot .ft-tel { grid-area: tel; justify-self: end; display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 30px; font-weight: 800; color: #fff }
  .pagefoot .ft-tel svg { width: 24px; height: 24px; fill: currentColor }
  .ft-rows { grid-area: rows; display: grid; gap: 6px; margin: 20px 0 0 }
  .ft-rows div { display: grid; grid-template-columns: 96px minmax(0,1fr) }
  .ft-rows dt { font-size: 12px; font-weight: 700; color: #fff }
  .ft-rows dd { margin: 0; font-size: 12px; color: rgba(255,255,255,.7) }
  .pagefoot .ft-copyright { grid-area: copy; margin-top: 26px; font-size: 12px; color: rgba(255,255,255,.45) }
}
@media (prefers-reduced-motion:reduce) {
  .orb-ring { animation: none }
}

@media (max-width:990px) {
  .u-head6 { padding: 13vw 1vw 8vw }
  .u6-s { margin: 0; font-size: 3.4vw; font-weight: 600; letter-spacing: -.01em; color: #6b766f }
  .u6-t { margin: 2vw 0 3.6vw; font-family: var(--font-body); font-size: 7.6vw; font-weight: 700; line-height: 1.3; letter-spacing: -.03em; color: var(--brand-1) }   
  .u6-d { margin: 0; font-size: 3.5vw; color: #5d6662 }
}

@media (max-width:990px) {
  .mo-video .mo-in { padding: 14vw 5.6vw 13vw }
  .pt4 { margin: 0; padding: 8vw 5vw 6vw; background: #fff; color: #1f2a24 }
  .pt4-k { margin: 0; font-size: 3.1vw; letter-spacing: .04em; color: #6b766f }
  .pt4-t { margin: 1.4vw 0 5.6vw; font-size: 6.4vw; font-weight: 800; letter-spacing: -.03em; color: var(--brand-1) }
  
  .pt4-g { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: 4px solid transparent; border-radius: 3px;
    background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#eef0f2 0%,#8e969c 20%,#fafbfb 42%,#7c848a 64%,#e6e9eb 82%,#9aa1a6 100%) border-box;
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 16px rgba(0,0,0,.08) }
  .pt4-g::before, .pt4-g::after { content: ""; position: absolute; pointer-events: none; background: linear-gradient(180deg,#d5d9dc,#8f979c 50%,#d5d9dc) }
  .pt4-g::before { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%) }
  .pt4-g::after { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); background: linear-gradient(90deg,#d5d9dc,#8f979c 50%,#d5d9dc) }
  .pt4-g div { padding: 5.4vw 3vw 4.8vw }
  .pt4-g span { display: block; font-size: 3.1vw; color: #6b766f }
  .pt4-g b { display: block; margin: 1vw 0 .8vw; font-size: 7.6vw; font-weight: 800; line-height: 1.12; letter-spacing: -.03em; white-space: nowrap; color: var(--brand-1) }
  .pt4-g b small { margin-left: .6vw; font-size: 3.6vw; font-weight: 700 }
  .pt4-g em { display: block; font-style: normal; font-size: 2.9vw; line-height: 1.45; color: #7d867f }
  .mo-pr5 { background: #fff; padding: 13vw 5.6vw 10vw; color: #1f2a24 }
  .pr5-k { margin: 0; font-size: 3.1vw; color: #6b766f }
  .pr5-t { margin: 1.6vw 0 6vw; font-size: 6.6vw; font-weight: 800; line-height: 1.3; letter-spacing: -.03em; color: var(--brand-1) }
  .pr5-l { display: grid; margin: 0; padding: 0; list-style: none }
  
  .pr5-r { display: grid; grid-template-columns: 42% 1fr; align-items: center; column-gap: 4.4vw; padding: 5.4vw 0; border-top: 1px solid #e3e6e4 }
  .pr5-r:last-child { border-bottom: 1px solid #e3e6e4 }
  .pr5-r:nth-child(even) { grid-template-columns: 1fr 42% }
  .pr5-r:nth-child(even) .pr5-bg { order: 2 }
  .pr5-r { overflow: hidden }
  .pr5-bg { display: block; inline-size: 116%; max-inline-size: none; height: auto; margin: -4% -8% }   
  .pr5-r > div { min-width: 0 }
  .pr5-r:nth-child(even) > div { text-align: right }
  .pr5-r span { display: block; font-size: 3.1vw; color: #6b766f }
  .pr5-r b { display: block; margin: .8vw 0; font-size: 5.3vw; font-weight: 800; line-height: 1.25; letter-spacing: -.03em; color: var(--brand-1); word-break: keep-all }
  .pr5-r em { display: block; font-style: normal; font-size: 3vw; line-height: 1.5; color: #56615c; word-break: keep-all }
}

@media (max-width:990px) {
  .v2-qband { padding-top: 36vw }
  .v2-qband .q-sign { position: absolute; left: 22vw; top: 12.3vw; z-index: 2; display: block; width: 56vw; height: auto }   
}

@media (max-width:990px) {
  .q-acts { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; background: var(--brand-1) }
  .q-acts a { display: block; padding: 0; line-height: 0 }
  .q-acts img { display: block; inline-size: 100%; height: auto }
  .q-acts a:active { filter: brightness(.92) }
}

@media (max-width:990px) {
  .pr5-r:nth-child(1) { --pc: #2e7d32 }
  .pr5-r:nth-child(2) { --pc: #1e6fb8 }
  .pr5-r:nth-child(3) { --pc: #b06a12 }
  .pr5-r:nth-child(4) { --pc: #c2410c }
  .pr5-r:nth-child(5) { --pc: var(--brand-1) }
  .pr5-r b { color: var(--pc) }
  
  .pr5-r > div { position: relative; padding-top: 9.5vw }
  .pr5-r span { position: absolute; left: -.6vw; top: -1.6vw; z-index: 0; font-size: 11.5vw; font-weight: 900; line-height: 1; letter-spacing: -.04em; color: var(--pc); opacity: .18; white-space: nowrap; pointer-events: none }
  .pr5-r:nth-child(even) span { left: auto; right: -.6vw }
  .pr5-r b, .pr5-r em { position: relative; z-index: 2 }
}

@media (max-width:990px) {
  .mo-section.mo-form button.btn-img.btn-silver { display: block; inline-size: 72%; max-width: 360px; margin: 7vw auto 0; padding: 0; border: 0; background: none; line-height: 0; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)) }
  .mo-form .btn-silver img { display: block; inline-size: 100%; height: auto }
}

@media (max-width:990px) {
  .pr5-t .pr5-n { font-size: 2em; line-height: .9; vertical-align: -.12em; margin: 0 .04em; letter-spacing: -.04em; color: var(--brand-1) }
}

@media (max-width:990px) {
  :root { --qband-h: 52.7vw }
  .v2-qband { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; background: none; overflow: visible; padding-bottom: env(safe-area-inset-bottom); pointer-events: none }
  .v2-qband .q-acts { pointer-events: auto }
  body:has(.v2-qband) { padding-bottom: calc(var(--qband-h) + env(safe-area-inset-bottom)) }
  .mo-quick.v2-mbar.orb-bar { bottom: calc(var(--qband-h) + 3vw + env(safe-area-inset-bottom)) }
  html.is-typing .v2-qband, html.is-form-active .v2-qband { display: none !important }
  body:has(.pagehead.is-unfold) .v2-qband, body:has(.pagehead.is-unfold) .orb-bar { visibility: hidden }   
}

@media (max-width:990px) {
  
  
  .mo-unit .u-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4vw }
  .mo-unit .u-card { padding: 3.6vw 2.4vw 3vw }
  .mo-unit .u-card h5.u-lb { display: flex; flex-direction: column; align-items: flex-start; gap: .6vw; margin: 0 0 2.4vw; font-family: var(--font-body); font-size: 5.2vw; font-weight: 800; letter-spacing: -.02em }
  .mo-unit .u-card h5.u-lb small { font-size: 2.7vw; font-weight: 500; letter-spacing: -.01em; color: #6b766f }
  .mo-unit .u-card .ph-media { position: relative; aspect-ratio: 900/695; overflow: hidden; height: auto }
  .mo-unit .u-card .ph-media img { position: absolute; left: -22.22%; top: -25.18%; width: 144.44%; max-width: none; height: auto }
  
  .mo-unit .u-card:first-child .ph-media { aspect-ratio: 770/540 }
  .mo-unit .u-card:first-child .ph-media img { left: -34.42%; top: -39.81%; width: 168.83% }
  
  .mo-unit.is-plan-only .u-card .ph-media { aspect-ratio: auto }
  .mo-unit.is-plan-only .u-card .ph-media img { position: static; left: auto; top: auto; width: 100%; height: auto }

  
  
  :root { --qacts-h: 16.67vw; --rail-h: 1.4vw; --train-w: 68vw; --train-h: calc(var(--train-w) * 206 / 1674); --train-roof: calc(var(--train-h) * 22 / 206); --pillar-h: 30vw; --qband-h: calc(var(--qacts-h) + var(--rail-h) + var(--train-h) - var(--train-roof) + var(--pillar-h)) }
  .v2-qband { z-index: 10; padding-top: calc(var(--qband-h) - var(--qacts-h)) }
  .v2-qband .q-scene { left: 0; right: 0; bottom: var(--qacts-h); width: 100%; height: calc(var(--qband-h) - var(--qacts-h)); max-width: none }
  .v2-qband .q-scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--rail-h); background: url(../img/q_rail.webp) repeat-x left bottom / auto 100% }
  .v2-qband .q-train { position: absolute; left: 0; bottom: var(--rail-h); z-index: 1; display: block; width: var(--train-w); height: auto }
  .v2-qband .q-pillar { position: absolute; left: 1vw; bottom: calc(var(--rail-h) + var(--train-h) - var(--train-roof)); z-index: 0; display: block; height: var(--pillar-h); width: auto }
  .v2-qband .q-sign { left: 17vw; top: auto; bottom: calc(var(--rail-h) + var(--train-h) + .3vw); width: 52vw }   
  
  .mo-quick.v2-mbar.orb-bar { z-index: 11; right: 1.2vw; bottom: calc(var(--qacts-h) + 3vw + env(safe-area-inset-bottom)) }   
}

.pointer-lens { position: fixed; top: 0; left: 0; z-index: 2147483000; width: 16px; height: 16px; border-radius: 50%; background: transparent;
  -webkit-backdrop-filter: invert(1); backdrop-filter: invert(1); pointer-events: none; opacity: 0;
  transform: translate3d(-100px,-100px,0) translate(-50%,-50%); transition: width 260ms ease, height 260ms ease, opacity 180ms ease; will-change: transform, width, height }
.pointer-lens.is-big { width: 44px; height: 44px }
.pointer-lens-on, .pointer-lens-on * { cursor: none }
.pointer-lens-on input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .pointer-lens-on textarea, .pointer-lens-on [contenteditable="true"] { cursor: text }

@media (max-width:990px) {
  .pt4-ic { display: block; width: 15vw; height: auto; margin: 0 auto 1.6vw }
  .vt { grid-template-columns: 38vw 1fr 38vw }   
  .vt-pic { display: block; width: 38vw; height: auto; margin: -2vw 0 }
  .q-acts.is-one { grid-template-columns: 1fr }
  
  .q-acts.is-one .qa-one { position: relative; overflow: clip }
  
  .q-acts.is-one .qa-one::after { content: ""; position: absolute; inset: 0; padding: 1.2%; pointer-events: none; mix-blend-mode: screen; opacity: 1;
    background: conic-gradient(from var(--qa-ang), transparent 0deg, rgba(255,255,255,0) 10deg, rgba(255,255,255,.5) 21deg, rgba(255,255,255,1) 30deg, rgba(255,255,255,.5) 39deg, rgba(255,255,255,0) 50deg, transparent 180deg, rgba(255,255,255,0) 190deg, rgba(255,255,255,.5) 201deg, rgba(255,255,255,1) 210deg, rgba(255,255,255,.5) 219deg, rgba(255,255,255,0) 230deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    animation: qaBeam 6s linear infinite }
  .v2-qband .q-sign { left: 12vw; width: 60vw }
}

@media (max-width:990px) {
  
  .pt4 { --fold: 9vw; --paper: #fefdfa; --paper-tex: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSdhJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPSczJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIC40MiAwIDAgMCAwIC4zOCAwIDAgMCAwIC4zIDAgMCAwIC4wNyAwJy8+PC9maWx0ZXI+PGZpbHRlciBpZD0nYic+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9Jy4wMTIgLjMyJyBudW1PY3RhdmVzPScyJyBzZWVkPSc3JyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIC41IDAgMCAwIDAgLjQ2IDAgMCAwIDAgLjM4IDAgMCAwIC4wNDUgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNhKScvPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNiKScvPjwvc3ZnPg==");
    position: relative; isolation: isolate;
    background: var(--paper-tex), radial-gradient(120% 90% at 50% 40%, #fffffd 0%, var(--paper) 62%, #f6f3ec 100%); box-shadow: inset 0 0 22px rgba(120,105,80,.06) }   
  
  .pt4 .pt4-g { border-width: 3px; border-radius: 1px;
    background: var(--paper-tex) padding-box, linear-gradient(var(--paper),var(--paper)) padding-box, linear-gradient(150deg,#d3d7da 0%,#adb3b7 34%,#7e858a 68%,#a2a8ac 100%) border-box;   
    box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px rgba(143,150,155,.55), 0 3px 10px rgba(70,60,40,.07) }
  .pt4 .pt4-g::before { width: 1px; transform: none; background: rgba(143,150,155,.5) }
  .pt4 .pt4-g::after { height: 1px; transform: none; background: rgba(143,150,155,.5) }
  .pt4::after { content: ""; position: absolute; left: 0; top: 0; width: var(--fold); height: var(--fold); pointer-events: none;
    background: var(--paper-tex), linear-gradient(135deg, transparent 50%, #e7e2d5 50%, #f3f0e7 60%, #fbf9f4 80%, #fffefb 100%);   
    filter: drop-shadow(3px 3px 4px rgba(40,30,10,.2)) }
}

@media (max-width:990px) {
  .mo-int2 { position: relative; overflow: clip }
  .int2-bg { position: absolute; top: 4vw; right: 0; z-index: 0; display: block; width: 74vw; height: auto; opacity: .38; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 18%, #000 60%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 18%, #000 60%, transparent 100%); mask-composite: intersect }
  .int2-head { position: relative; z-index: 2 }
}

@media (max-width:990px) {
  .pt4-head { margin: 0 -2vw 6vw; line-height: 0 }
  .pt4-head img { display: block; inline-size: 100%; block-size: auto }
  .mo-video .pt4 { padding: 5.6vw }   
  .pt4::after { content: none }
}

@media (max-width:990px) {
  .u-head6 { position: relative; isolation: isolate }
  
  .u6-bg { position: absolute; top: calc(-1 * var(--sp-40)); bottom: 0; right: -6.4vw; z-index: -1; inline-size: 50vw; max-inline-size: none; block-size: auto;    object-fit: cover; object-position: 50% 58%; opacity: .3; pointer-events: none; transform: scaleX(-1);   
    -webkit-mask-image: linear-gradient(270deg, transparent, #000 45%), linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(270deg, transparent, #000 45%), linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent); mask-composite: intersect }
}

@media (max-width:990px) {
  .mo-comm3 { position: relative }
  .cm3-deco { position: absolute; top: 11vw; right: 2vw; inline-size: 42vw; block-size: 29vw; pointer-events: none }
  .cm3-deco img { position: absolute; display: block; block-size: auto }
  .cm3-tree { right: 0; bottom: 0; z-index: 0; inline-size: 37vw; mix-blend-mode: multiply }   
  .cm3-bench { left: 0; bottom: -.4vw; z-index: 1; inline-size: 24vw }   
  .cm3-t, .cm3-d { position: relative; z-index: 2 }
}

@media (max-width:990px) {
  .mo-final { position: relative }
  .ff-mat { position: absolute; left: 13.4%; top: 14.35%; right: 13.16%; bottom: 13.88%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0 5%; background: #fafafa; box-shadow: inset 7px 5px 16px rgba(30,30,28,.16), inset -3px -3px 10px rgba(30,30,28,.06); text-align: center; color: #1e2622 }
  .ff-en { margin: 0; font-family: "Playfair Display", serif; font-style: italic; font-weight: 400; font-size: 8vw; line-height: 1.15; letter-spacing: .005em; color: #1e2622 }
  .ff-rule { display: block; inline-size: 9vw; block-size: 1px; margin: 3.4vw 0 3vw; background: #1e2622; opacity: .55 }
  .ff-k { margin: 0 0 3.2vw; font-family: "Noto Serif KR", serif; font-weight: 500; font-size: 3.2vw; letter-spacing: -.01em; color: #3b4440 }
  .ff-b { margin: 0; font-family: "Noto Serif KR", serif; font-weight: 500; font-size: 4.3vw; line-height: 1.45; letter-spacing: -.02em; color: #1e2622 }
  .ff-b b { font-weight: 700; font-size: 1.55em; letter-spacing: -.03em; color: var(--brand-1) }
  .ff-s { margin: 3.4vw 0 0; font-family: "Noto Serif KR", serif; font-weight: 300; font-size: 3.1vw; line-height: 1.7; color: #4a534f }
}

@media (max-width:990px) {
  .mo-video .pt4 { background: url(../img/pt4_paper.webp) center / 100% 100% no-repeat; box-shadow: none; filter: drop-shadow(0 6px 14px rgba(0,20,10,.28)) }
  
  .pt4 .pt4-g { background: none; border: 4px solid transparent;
    border-image: linear-gradient(135deg,#8b9297 0%,#f6f8f9 14%,#a9b0b5 27%,#e9edef 41%,#7c8389 55%,#f2f4f5 69%,#9aa1a6 83%,#dfe3e5 100%) 1;
    box-shadow: inset 0 0 0 1px rgba(60,66,70,.38), 0 0 0 1px rgba(255,255,255,.9), 0 2px 6px rgba(40,44,48,.16);
    outline: 1px solid rgba(150,157,162,.7); outline-offset: -9px }
  .mo-video .pt4 { position: relative }
  .mo-video .pt4 .pt4-shine { position: absolute; inset: 5.6vw; padding: 4px; pointer-events: none; mix-blend-mode: screen;
    background: conic-gradient(from var(--pt4-ang), transparent 0deg, rgba(255,255,255,0) 14deg, rgba(255,255,255,.6) 24deg, #fff 32deg, rgba(255,255,255,.6) 40deg, rgba(255,255,255,0) 50deg, transparent 180deg, rgba(255,255,255,0) 194deg, rgba(255,255,255,.6) 204deg, #fff 212deg, rgba(255,255,255,.6) 220deg, rgba(255,255,255,0) 230deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    animation: pt4Beam 7s linear infinite }   
}

@media (max-width:990px) {
  .mo-section.mo-form button.btn-img.btn-silver { inline-size: 100%; max-width: none; margin-top: 4vw; filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)) }
}

@media (max-width:990px) {
  .mo-loc .loc-head { padding: 15vw 7vw 5vw }   
}

@media (max-width:990px) {
  
  .mo-hero .hl-hero-media::after { height: 56%; background: linear-gradient(180deg, rgba(0,26,17,.66) 0%, rgba(0,26,17,.48) 58%, rgba(0,26,17,.2) 82%, rgba(0,26,17,0) 100%) }
  
  .mo-hero .hl-hero-media video { filter: brightness(1.15) contrast(1.05) saturate(1.06) }   
  .mo-hero .hero-title img { filter: drop-shadow(0 1px 1px rgba(0,0,0,.85)) drop-shadow(0 2px 6px rgba(0,0,0,.6)) drop-shadow(0 4px 18px rgba(0,0,0,.45)) }
}

@media (max-width:990px) {
  .mo-loc .loc-head { position: relative; isolation: isolate; overflow: clip }
  .loc-bg { position: absolute; inset: 0; z-index: -1; inline-size: 100%; max-inline-size: none; block-size: 100%; object-fit: cover; object-position: 50% 30%; opacity: .26; pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 92%) }
  .mo-loc .loc-head > img:not(.loc-bg) { position: relative }
}

@media (max-width:990px) {
  .mo-video { position: relative; isolation: isolate; overflow: clip }
  .pt4-headbg { position: absolute; top: 0; left: 0; z-index: -1; inline-size: 100%; max-inline-size: none; block-size: 70vw; object-fit: cover; object-position: 60% 30%; opacity: .3; pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%) }
}

@media (max-width:990px) {
  .mo-scale { position: relative; isolation: isolate; background: #fff }
  .mo-scale img.scale-bg { position: absolute; top: 0; left: 0; z-index: 0; inline-size: 100%; max-inline-size: none; block-size: 46%; object-fit: cover; object-position: 50% 18%;   
    opacity: .32; pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%) }
  .mo-scale > img:not(.scale-bg) { position: relative; z-index: 1; mix-blend-mode: multiply }
}

@media (max-width:990px) {
  .sh-band .sh-en { font-size: 4.6vw; letter-spacing: .28em; padding-left: .28em; line-height: 1.5 }
}

@property --qa-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg }
@keyframes qaBeam { to { --qa-ang: 360deg } }
@media (prefers-reduced-motion: reduce) { .q-acts.is-one .qa-one::after { animation-name: none; visibility: hidden } }

.zoom-hit { position: relative; display: block; inline-size: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; -webkit-tap-highlight-color: transparent }
.zoom-hit .zoom-pill { position: absolute; left: 3vw; bottom: 3vw; display: inline-flex; align-items: center; gap: 1.2vw; padding: 1.6vw 3.2vw 1.6vw 2.6vw; border-radius: 999px;
  background: rgba(0,48,31,.86); color: #fff; font-size: 3.2vw; font-weight: 600; letter-spacing: -.01em; line-height: 1; box-shadow: 0 4px 12px rgba(0,30,20,.28) }
.zoom-hit .zoom-pill svg { inline-size: 3.8vw; block-size: 3.8vw; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round }
@media (min-width:991px) { .zoom-hit .zoom-pill { left: 18px; bottom: 18px; gap: 6px; padding: 8px 14px 8px 11px; font-size: 14px } .zoom-hit .zoom-pill svg { inline-size: 16px; block-size: 16px } }
.zv { position: fixed; inset: 0; z-index: 2147483100; display: flex; align-items: center; justify-content: center; background: rgba(6,12,9,.94); opacity: 0; transition: opacity .25s ease; overscroll-behavior: contain }
.zv.is-on { opacity: 1 }
.zv[hidden] { display: none }   
.zv-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none }
.zv-img { display: block; max-inline-size: 100%; max-block-size: 100%; inline-size: auto; block-size: auto; transform-origin: 50% 50%; will-change: transform; user-select: none; -webkit-user-drag: none }
.zv-img.is-ease { transition: transform .28s cubic-bezier(.2,.7,.2,1) }
.zv-close { position: absolute; top: 8px; right: 8px; z-index: 1; inline-size: 40px; block-size: 40px; border: 0; border-radius: 50%; background: rgba(10,22,16,.72); box-shadow: 0 0 0 1px rgba(255,255,255,.35); cursor: pointer }   
.zv-close::before, .zv-close::after { content: ""; position: absolute; left: 50%; top: 50%; inline-size: 18px; block-size: 2px; background: #fff; transform: translate(-50%,-50%) rotate(45deg) }
.zv-close::after { transform: translate(-50%,-50%) rotate(-45deg) }
@media (prefers-reduced-motion: reduce) { .zv, .zv-img.is-ease { transition: none } }

.mo-film { padding: 13vw 5vw 13vw; background: linear-gradient(180deg, var(--brand-1) 0%, rgb(var(--shadow-rgb)) 100%); color: #fff; text-align: center }   
.mo-film .film-logo { display: flex; flex-direction: column; align-items: center; gap: 2.2vw; margin: 0 0 5.4vw }   
.mo-film .film-logo .li-en { width: 27vw; height: 7.4vw }
.mo-film .film-logo .li-kr { width: 30vw; height: 3vw }
.mo-film .film-eyebrow { margin: 0; font-size: 2.9vw; font-weight: 600; letter-spacing: .34em; padding-left: .34em; color: rgba(255,255,255,.74) }
.mo-film .film-title { margin: 2.4vw 0 6vw; font-family: var(--font-serif); font-size: 6.6vw; font-weight: 200;    letter-spacing: -.02em; line-height: 1.3 }
.mo-film .film-card { position: relative; inline-size: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: rgb(var(--shadow-rgb));
  box-shadow: 0 0 0 1px rgba(214,222,218,.75), 0 0 0 4px rgba(214,222,218,.12), 0 8px 16px rgba(0,0,0,.42), 0 26px 54px rgba(0,0,0,.55); pointer-events: none; user-select: none }   
.mo-film .film-v, .mo-film .film-thumb { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover }
.mo-film .film-thumb { z-index: 1; transition: opacity .9s ease }
.mo-film .film-card.is-play .film-thumb { opacity: 0 }
.mo-film .film-bar { position: absolute; left: 0; bottom: 0; z-index: 2; inline-size: 100%; block-size: 2px; background: linear-gradient(90deg, #eef2ef, #b9c4be); transform: scaleX(0); transform-origin: left center; opacity: .95 }
.mo-film .film-card.is-arm .film-bar { transform: scaleX(1); transition: transform .7s linear }
.mo-film .film-card.is-play .film-bar { opacity: 0; transition: opacity .5s ease }

@media (max-width:990px) {
  .pagehead .brandmark { gap: 1.8vw }
  .pagehead .brandmark .li-en { width: 14.55vw; height: 4vw }
  .pagehead .brandmark .li-kr { width: 33.7vw; height: 3.4vw }
}

@media (max-width:990px) {
  .mo-val2 { position: relative; isolation: isolate; overflow: clip }
  .mo-val2 .val2-bg { position: absolute; left: 50%; top: 0; z-index: -1; inline-size: 78vw; block-size: 40vw; max-inline-size: none; transform: translateX(-50%); object-fit: cover; object-position: 50% 50%; opacity: .42; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 26%, #000 74%, rgba(0,0,0,0) 100%), linear-gradient(180deg, #000 0%, #000 45%, rgba(0,0,0,0) 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 26%, #000 74%, rgba(0,0,0,0) 100%), linear-gradient(180deg, #000 0%, #000 45%, rgba(0,0,0,0) 100%); mask-composite: intersect }
  .mo-val2 .vt-pic { mix-blend-mode: multiply }   
}

@property --pt4-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg }
@keyframes pt4Beam { to { --pt4-ang: 360deg } }
@media (prefers-reduced-motion: reduce) { .mo-video .pt4 .pt4-shine { animation-name: none; visibility: hidden } }

@media (max-width:990px) {
  .u6-bg { left: 50%; right: auto; inline-size: 78vw; block-size: calc(100% + var(--sp-40)); transform: translateX(-50%) scaleX(-1);   
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent) }
}

@media (max-width:990px) {
  .pagefoot #toTopBtn { inline-size: 11vw; block-size: 11vw; border-radius: 50%; background: var(--brand-1); color: #fff; box-shadow: 0 1.2vw 3.2vw rgba(var(--shadow-rgb), .35) }
  .pagefoot #toTopBtn .top-chev { inline-size: 80%; block-size: 80%; stroke-width: 2.6 }   
}

@media (min-width:991px) { .pagefoot #toTopBtn .top-chev, .pagefoot .ft-side #toTopBtn .top-chev { width: 34px; stroke-width: 2.4 } }

.vr-frame.is-video { position: relative; aspect-ratio: 16/9 }
.vr-frame.is-video video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000 }
.vr-frame.is-video video[hidden] { display: none }

:where(h1, h2, h3, h4, h5, h6, dt, th, figcaption, button, b, strong) { text-wrap-style: balance }
:where(p, li, dd, td, blockquote) { text-wrap-style: pretty }
.nb { white-space: nowrap }