

.logo-mark .li { -webkit-mask: none; mask: none; background: transparent center / contain no-repeat }
.logo-mark .li-en { background-image: url(../img/logo_pg_color.png) }
.logo-mark .li-kr { background-image: url(../img/logo_hd_color.png) }
.logo-mark.is-light .li-en, .pagehead.on-dark .logo-mark .li-en, .pagefoot .logo-mark .li-en { background-image: url(../img/logo_pg_light.png) }
.logo-mark.is-light .li-kr, .pagehead.on-dark .logo-mark .li-kr, .pagefoot .logo-mark .li-kr { background-image: url(../img/logo_hd_light.png) }
.pagehead.on-dark:hover .logo-mark .li-en { background-image: url(../img/logo_pg_color.png) }
.pagehead.on-dark:hover .logo-mark .li-kr { background-image: url(../img/logo_hd_color.png) }

@media (max-width:990px) { .pagefoot .logo-mark .li-en { background-image: url(../img/logo_pg_color.png) } .pagefoot .logo-mark .li-kr { background-image: url(../img/logo_hd_color.png) } }
.logo-mark .li-en { width: 96px; height: 22px }
.logo-mark .li-kr { width: 116px; height: 14px }
.logo-mark.is-lg .li-en { width: 144px; height: 33px }
.logo-mark.is-lg .li-kr { width: 174px; height: 21px }
@media (max-width: 990px) {
  .pagehead .brandmark .li-en { width: 20vw; height: 4.6vw; background-image: url(../img/logo_pg_light.png) }
  .pagehead .brandmark .li-kr { width: 23vw; height: 2.8vw; background-image: url(../img/logo_hd_light.png) }
}

.dong-labels { position: absolute; inset: 0; pointer-events: none; z-index: 2 }
.dong-lb { position: absolute; transform: translate(-50%,-50%); background: #1f2937; color: #fff; font-weight: 700; line-height: 1; padding: .3em .6em; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; box-shadow: 0 1px 3px rgba(0,0,0,.35) }

@media (min-width:991px) {
  .loc-text .loc-no { font-family: var(--font-display-en); letter-spacing: 3px; color: var(--brand-3); font-size: var(--fs-14); margin-bottom: 8px }
}

@media (max-width:990px) {
  .mo-form .req { color: #c00 }
}
@media (max-width:990px) {
  .mo-amenity .cm-list { list-style: none; padding: 0; margin: 0 0 var(--sp-12); display: grid; grid-template-columns: repeat(3,1fr); gap: 4px 8px; font-size: var(--fs-13); line-height: 1.35 }
  .mo-amenity .cm-list li { display: flex; gap: 4px; align-items: baseline }
  .mo-amenity .cm-list li i { font-style: normal; flex: none; min-width: 20px; color: var(--brand-1); font-weight: var(--fw-emph) }
}

.contents-wrap .doc-head { margin: 48px 0 16px }
.contents-wrap .doc-head:first-child { margin-top: 0 }
.contents-wrap .doc-tag { display: block; font-size: 12px; letter-spacing: 1px; color: var(--color-gray-3); margin-bottom: 6px }
.contents-wrap .doc-head .doc-subhead { margin: 0 0 8px }
.contents-wrap .tab-danji button { flex: 1 1 auto }
.contents-wrap .tab-danji button em { font-style: normal; font-size: .85em; opacity: .75; margin-left: 4px }
.contents-wrap .tabpanel { display: none }
.contents-wrap .tabpanel.is-on { display: block }
.contents-wrap .sp-head { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 12px }
.contents-wrap .sp-head b { font-size: var(--fs-20); color: var(--brand-1) }
.contents-wrap .sp-head em { font-style: normal; color: var(--color-gray-3) }
.contents-wrap .sp-head span { margin-left: auto; font-weight: var(--fw-emph) }
.contents-wrap .bz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 2px solid var(--brand-1); margin: 12px 0 0 }
.contents-wrap .bz-kv { display: grid; grid-template-columns: 110px 1fr; border-bottom: 1px solid var(--color-gray-2); padding: 12px 8px; font-size: 14px }
.contents-wrap .bz-kv dt { color: var(--color-gray-3); font-weight: var(--fw-emph) }
.contents-wrap .bz-kv dd { margin: 0 }
.contents-wrap .le-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start }
.contents-wrap .le-grid { display: grid }
.contents-wrap .le-grid { gap: 12px }
.contents-wrap .le-card { border: 1px solid var(--color-gray-2); padding: 14px 16px; border-radius: var(--radius-btn) }
.contents-wrap .le-no { font-family: var(--font-display-en); color: var(--brand-3); font-size: 18px; margin-right: 8px }
.contents-wrap .le-lead { color: var(--brand-1); font-weight: var(--fw-emph) }
.contents-wrap .le-card b { display: block; margin: 6px 0 4px; font-size: var(--fs-17) }
.contents-wrap .le-card p { margin: 0; font-size: 14px; color: #444 }
.contents-wrap .loc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.contents-wrap .loc-item { border-top: 2px solid var(--brand-1); padding: 12px 4px 4px }
.contents-wrap .loc-no { font-family: var(--font-display-en); color: var(--brand-1); font-size: 20px; margin-right: 8px }
.contents-wrap .loc-item b { font-size: var(--fs-17) }
.contents-wrap .loc-item p { margin: 6px 0 0; font-size: 14px; color: #444 }
.contents-wrap .fig { color: var(--brand-1); font-weight: var(--fw-head) }
.contents-wrap .pr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; margin: 0 0 28px }
.contents-wrap .pr-row.pr-r .pr-img { order: 2 }
.contents-wrap .pr-img { margin: 0 }
.contents-wrap .pr-no { display: block; font-family: var(--font-display-en); color: var(--brand-3); letter-spacing: 2px; font-size: 13px; margin-bottom: 6px }
.contents-wrap .pr-txt b { display: block; font-size: var(--fs-20); margin-bottom: 8px }
.contents-wrap .pr-txt p { margin: 0; color: #444 }
.contents-wrap .cm-list { list-style: none; padding: 0; margin: 12px 0 20px; display: grid; grid-template-columns: repeat(4,1fr); gap: 6px 12px; font-size: 14px }
.contents-wrap .cm-list li i { font-style: normal; display: inline-block; min-width: 24px; color: var(--brand-1); font-weight: var(--fw-emph) }
.contents-wrap .grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px }
.contents-wrap .grid figure { margin: 0 }
.contents-wrap .grid figcaption { text-align: left }
.contents-wrap .grid figcaption b { display: block }
.contents-wrap .ut-hero { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 12px }
.contents-wrap .ut-hero b { font-size: 34px; color: var(--brand-1); font-family: var(--font-display-en) }
.contents-wrap .ut-hero span { letter-spacing: 3px; color: var(--color-gray-3) }
.contents-wrap .ut-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px }
.contents-wrap .ut-card { border: 1px solid var(--color-gray-2); border-radius: var(--radius-btn); padding: 12px 14px }
.contents-wrap .ut-cap { font-weight: var(--fw-head); color: var(--brand-1); margin-bottom: 8px }
.contents-wrap .ut-cap em { font-style: normal; color: var(--color-gray-3); font-weight: var(--fw-regular) }
.contents-wrap .ut-card dl { margin: 0 }
.contents-wrap .ut-card dl>div { display: flex; justify-content: space-between; border-top: 1px dashed var(--color-gray-2); padding: 6px 0; font-size: 14px }
.contents-wrap .ut-card dl>div.ut-hh { font-weight: var(--fw-emph) }
.contents-wrap .ut-card dd { margin: 0 }
.contents-wrap .ut-tot { text-align: right; margin: 10px 0 20px }
.contents-wrap .ut-tot b { color: var(--brand-1); font-size: var(--fs-19) }
.contents-wrap .ut-lay3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 16px }
.contents-wrap .ut-lay3 figure { margin: 0 }
.contents-wrap .lay-box { background: #fff; border: 1px solid var(--color-gray-2) }
.contents-wrap .ut-two { margin: 0 0 12px }
.contents-wrap .plcard img { max-width: 780px; margin: 0 auto; display: block }
.contents-wrap .tbl-scroll { overflow-x: auto; margin: 8px 0 12px }
.contents-wrap .tbl-scroll table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: center; border-top: 2px solid var(--brand-1) }
.contents-wrap .tbl-scroll th, .contents-wrap .tbl-scroll td { border: 1px solid var(--color-gray-2); padding: 10px 8px }
.contents-wrap .tbl-scroll thead th { background: #eef2f6 }
.contents-wrap .tbl-scroll tbody th { background: #f7f8fa; font-weight: var(--fw-emph) }
.contents-wrap .tbl-scroll td.hl { color: var(--brand-1); font-weight: var(--fw-head) }
.contents-wrap .pill { display: inline-block; padding: 2px 10px; border-radius: 100px; background: var(--brand-1); color: #fff; font-weight: var(--fw-head) }
.contents-wrap .pill-sub { margin-left: 6px; color: var(--color-gray-3) }
.contents-wrap .rare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; margin: 32px 0 8px; padding: 20px; background: #f7f8fa; border-radius: var(--radius-btn) }
.contents-wrap .rare-txt b { display: block; font-size: var(--fs-20); color: var(--brand-1); margin-bottom: 8px }
.contents-wrap .rare-txt em { font-style: normal; font-weight: var(--fw-head) }
.contents-wrap .rb { display: grid; grid-template-columns: 110px 1fr 90px; align-items: center; gap: 10px; margin: 6px 0; font-size: 14px }
.contents-wrap .rb-t { height: 10px; background: #dfe4ea; border-radius: 5px; overflow: hidden }
.contents-wrap .rb-t i { display: block; height: 100%; background: var(--color-gray-1); width: var(--w, 40%) }
.contents-wrap .rb:nth-child(1) .rb-t i { --w: 41.5% }
.contents-wrap .rb:nth-child(2) .rb-t i { --w: 49.3% }
.contents-wrap .rb:nth-child(3) .rb-t i { --w: 9.2%; background: var(--brand-1) }
.contents-wrap .rb-v { text-align: right; font-weight: var(--fw-head) }
.contents-wrap .rb-v small { display: block; font-weight: var(--fw-regular); color: var(--color-gray-3) }
.contents-wrap .rb.is-hl .rb-v { color: var(--brand-1) }
.contents-wrap .hl-info { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.contents-wrap .info-card { border: 1px solid var(--color-gray-2); border-radius: var(--radius-btn); padding: 20px }
.contents-wrap .info-card b { display: block; color: var(--brand-1); margin-bottom: 6px }
.contents-wrap .info-card .ic-big { font-size: 30px; font-weight: var(--fw-head); letter-spacing: -1px; margin: 4px 0 8px }
.contents-wrap .info-card p { margin: 0 0 4px; font-size: 14px; color: #444 }
.contents-wrap .visit-form .req { color: #c00 }
.contents-wrap .visit-form .hl-terms { font-size: 12.5px; color: var(--color-gray-3); margin: 6px 0 12px }
@media (max-width:990px) {
  .contents-wrap .bz-grid, .contents-wrap .le-wrap, .contents-wrap .loc, .contents-wrap .pr-row, .contents-wrap .rare, .contents-wrap .hl-info { grid-template-columns: 1fr }
  .contents-wrap .pr-row.pr-r .pr-img { order: 0 }
  .contents-wrap .cm-list { grid-template-columns: repeat(2,1fr) }
  .contents-wrap .grid, .contents-wrap .ut-grid, .contents-wrap .ut-lay3 { grid-template-columns: 1fr 1fr }
  .contents-wrap .tab-danji { flex-wrap: wrap }
}

@media (max-width:990px) {
  .pagehead .brandmark { gap: 1.80vw }
  .pagehead .brandmark .li-en { width: 24.28vw; height: 5.57vw }
  .pagehead .brandmark .li-kr { width: 27.91vw; height: 3.38vw }
  .mo-film .film-logo .li-en { width: 42.67vw; height: 9.78vw }
  .mo-film .film-logo .li-kr { width: 39.15vw; height: 4.74vw }
}

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

