:root { --h4-ink: #14100c; --h4-mink: #47515b; --h4-brown: #403637; --h4-copper: #bd886a; --h4-rust: #ca8465; --h4-coal: #352f30; --h4-foot: #202020; --h4-ease-out: cubic-bezier(.25, .46, .45, .94); --h4-back: cubic-bezier(.175, .885, .32, 1.275); --h4-hd-h: 100px; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; }
body.h4-body { margin: 0; background: #fff; color: var(--h4-ink); font: 300 16px/1.5 'Montserrat', 'Noto Sans KR', sans-serif; letter-spacing: -1px; word-break: keep-all; overflow-wrap: break-word; }
.h4-body :where(h1, h2, h3, h4, p, ul, ol, li, figure, dl, dd, dt, table) { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; letter-spacing: inherit; }
.h4-body :where(ul, ol) { list-style: none; }
.h4-body :where(img) { max-inline-size: 100%; block-size: auto; vertical-align: top; border: 0; }
.h4-body :where(a) { color: inherit; text-decoration-line: none; }
.h4-body :where(button) { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.h4-body :where(table) { border-collapse: collapse; border-spacing: 0 0; }
.h4-body :where(em, i, small) { font-style: normal; }
.h4-sr { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.h4-skip { position: fixed; left: 12px; top: -60px; z-index: 100001; padding: 10px 14px; background: #fff; color: #000; font-weight: 600; }
.h4-skip:focus { top: 12px; }
.h4-body :focus-visible { outline: 2px solid var(--h4-copper); outline-offset: 2px; }


@media (max-width: 1023px) {
  .h4-pcsp { display: none; }
  .h4-hd, .h4-veil, .h4-kv, .h4-up, .h4-vp, .h4-sv, .h4-pz, .h4-pz__veil, .h4-ft__in, .h4-ft__up, .h4-bs__man, .h4-ov__pc, .h4-tabs__bar, .h4-fig--pc { display: none !important; }
  body.h4-body { font-family: 'SUIT', 'Montserrat', 'Noto Sans KR', sans-serif; font-weight: 400; color: var(--h4-mink); background: #fff; }
  main#h4Main { position: relative; inline-size: 100%; max-inline-size: 730px; min-inline-size: 320px; margin-inline: auto; padding-top: 80px; overflow: hidden; }
}
@media (min-width: 1024px) {
  .h4-mbr { display: none; }
  .h4-mh, .h4-dr, .h4-dr__veil, .h4-mkv, .h4-mup, .h4-mvp, .h4-bs__m, .h4-msv, .h4-mst, .h4-mft, .h4-mpop, .h4-mpop__veil, .h4-ov__mob, .h4-sel, .h4-fig--m, .h4-zoom, .h4-map__mark { display: none !important; }
}


.h4-arw { position: relative; flex: 0 0 auto; inline-size: 24px; block-size: 19px; color: #3d3534; }
.h4-arw::before { content: ""; position: absolute; inset-inline: 1px; inset-block-start: 50%; border-top: 1.5px solid currentColor; }
.h4-arw::after { content: ""; position: absolute; inset-block-start: calc(50% - 5px); inline-size: 10px; block-size: 10px; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; }
.h4-arw--prev::after { inset-inline-start: 2px; rotate: -45deg; }
.h4-arw--next::after { inset-inline-end: 2px; rotate: 135deg; }
.h4-arw--w { color: #a39d9b; block-size: 14px; }
.h4-arw:hover { color: #000; }
.h4-arw--w:hover { color: #fff; }


.h4-btn { position: relative; display: inline-flex; align-items: stretch; flex-shrink: 0; border: 1px solid var(--h4-coal); font: 500 16px/1.5 'SUIT', sans-serif; letter-spacing: .5px; color: var(--h4-coal); }
.h4-btn > span { position: relative; z-index: 1; padding: 16px 24px; transition: color .4s; }
.h4-btn > span::before { content: ""; position: absolute; z-index: -1; inset-block: 0; inset-inline-start: 0; inline-size: 0; background: var(--h4-coal); transition: inline-size .4s ease; }
.h4-btn:hover > span { color: #fff; }
.h4-btn:hover > span::before { inline-size: 100%; }
.h4-btn > i { display: flex; align-items: center; justify-content: center; padding: 16px 19px; border-left: 1px solid #000; }
.h4-btn > i::before { content: ""; inline-size: 18px; block-size: 13px; background: currentColor; -webkit-mask: var(--h4-arrow-mask) center / contain no-repeat; mask: var(--h4-arrow-mask) center / contain no-repeat; }
.h4-btn--solo > span { padding: 12.8px 40px; }
:root { --h4-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M10.6 14.6 18 22 25.4 14.6' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E"); }
:root { --h4-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13'%3E%3Cpath d='M0 6.5h16.6M11.4 1.1l5.6 5.4-5.6 5.4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }


@media (min-width: 1024px) {
  [data-rise] { opacity: 0; transition-property: opacity, transform; transition-timing-function: var(--h4-back); transition-duration: var(--h4-rise-dur, 1s); transition-delay: var(--h4-rise-wait, 0s); }
  [data-rise="u"] { transform: translate3d(0, 100px, 0); }
  [data-rise="d"] { transform: translate3d(0, -100px, 0); }
  [data-rise="l"] { transform: translate3d(100px, 0, 0); }
  [data-rise="r"] { transform: translate3d(-100px, 0, 0); }
  [data-rise].is-risen { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { [data-rise] { opacity: 1; transform: none; transition: none; } .h4-body *, .h4-body *::before, .h4-body *::after { animation: none !important; transition-duration: .01ms !important; } .h4-kv [data-in], .h4-mkv__copy { opacity: 1 !important; } }


.h4-rail { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; }
.h4-rail__track { display: flex; will-change: transform; }


.h4-hd { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 1000; block-size: var(--h4-hd-h); border-bottom: 1px solid rgba(0, 0, 0, .1); transition: background-color .4s, transform .5s, border-color .3s var(--h4-ease-out); }
.h4-hd.is-pinned { position: fixed; }
.h4-hd.is-away { transform: translateY(-100%); transition: background-color .4s, transform .5s; }
.h4-hd.is-back { transform: translateY(0); transition: background-color .4s, transform .8s; }
.h4-hd.is-solid { background: #fff; }
.h4-hd__logo { position: absolute; z-index: 3; inset-inline-start: var(--h4-side-l, 110px); inset-block-start: 60%; translate: 0 -50%; display: block; inline-size: var(--h4-logo-w, 212px); }
.h4-hd__lg { display: block; inline-size: 100%; block-size: auto; }
.h4-hd__lg--d { position: absolute; inset: 0; opacity: 0; }
.h4-hd.is-solid .h4-hd__lg--w { opacity: 0; }
.h4-hd.is-solid .h4-hd__lg--d { opacity: 1; }
.h4-hd__nav { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 80px; padding-top: 40px; text-align: center; }
.h4-g1 { display: inline-flex; }
.h4-g1__i { inline-size: var(--h4-col, 115px); text-align: center; }
.h4-g1__a { display: block; padding: 9px 0 23px; color: #fff; font-size: 18px; font-weight: 400; letter-spacing: -1px; white-space: nowrap; transition: color .2s; }
.h4-hd.is-solid .h4-g1__a { color: var(--h4-brown); }
.h4-hd__call { position: absolute; z-index: 2; inset-inline-end: var(--h4-side-r, 110px); inset-block-start: 56px; translate: 0 -50%; display: flex; align-items: center; gap: 23px; margin: 0; }
.h4-hd__open { color: var(--h4-copper); font-size: var(--h4-open-fs, 24px); font-weight: 600; letter-spacing: -1px; white-space: nowrap; }
.h4-hd__tel { color: #fff; font-size: var(--h4-tel-fs, 31px); font-weight: 700; letter-spacing: -1px; white-space: nowrap; }
.h4-hd.is-solid .h4-hd__tel { color: var(--h4-brown); }

.h4-mega { position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 99px; block-size: 0; overflow: hidden; background: #fff; border-top: 0 solid transparent; text-align: center; transition: block-size .2s ease, border-color .2s; }
.h4-mega.is-unfold { border-top-width: 1px; border-top-color: rgba(0, 0, 0, .1); }
.h4-mega__row { display: inline-flex; align-items: flex-start; padding: 25px 0 22px; }
.h4-mega__col { inline-size: var(--h4-col, 115px); }
.h4-mega__col li { margin-bottom: 3px; }
.h4-mega__a { display: block; padding: 6px 0; color: #676b6e; font-size: 15px; font-weight: 300; letter-spacing: -1px; line-height: 1.5; }
.h4-mega__a:hover, .h4-mega__a:focus-visible { color: #000000; font-weight: 500; }
.h4-veil { position: fixed; inset: 0; z-index: 998; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .3s; }
.h4-veil.is-on { opacity: 1; }

@media (min-width: 1440px) and (max-width: 1719px) { .h4-hd { --h4-side-r: 56px; --h4-open-fs: 18px; --h4-tel-fs: 26px; } }
@media (min-width: 1280px) and (max-width: 1439px) { .h4-hd { --h4-col: 100px; --h4-side-l: 60px; --h4-logo-w: 190px; --h4-side-r: 40px; --h4-open-fs: 16px; --h4-tel-fs: 24px; } }
@media (min-width: 1024px) and (max-width: 1279px) { .h4-hd { --h4-col: 84px; --h4-side-l: 30px; --h4-logo-w: 160px; --h4-side-r: 28px; --h4-tel-fs: 22px; } .h4-hd__open { display: none; } }


.h4-mh { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 99; block-size: 80px; background: #fff; border-bottom: 1px solid #ddd; text-align: center; transition: transform .5s; }
.h4-mh.is-away { transform: translateY(-100%); }
.h4-mh.is-back { transform: translateY(0); transition: transform .8s; }
.h4-mh__logo { display: flex; align-items: center; justify-content: center; block-size: 100%; margin: 0 auto; inline-size: 224px; max-inline-size: calc(100% - 150px); }
.h4-mh__logo img { inline-size: 100%; block-size: auto; }
.h4-mh__menu { position: absolute; inset-inline-start: 5%; inset-block-start: 25px; inline-size: 30px; block-size: 30px; }
.h4-mh__menu i { position: absolute; inset-inline: 2px; block-size: 2px; background: #3a3534; border-radius: 1px; transition: transform .45s cubic-bezier(.215, .61, .355, 1), opacity .3s; }
.h4-mh__menu i:nth-child(1) { inset-block-start: 6px; }
.h4-mh__menu i:nth-child(2) { inset-block-start: 14px; }
.h4-mh__menu i:nth-child(3) { inset-block-start: 22px; }
.h4-mh__menu[aria-expanded="true"] i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.h4-mh__menu[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.h4-mh__menu[aria-expanded="true"] i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.h4-mh__tel { position: absolute; inset-inline-end: 5%; inset-block-start: 25px; inline-size: 30px; block-size: 30px; color: #3a3534; }
.h4-mh__tel svg { inline-size: 100%; block-size: 100%; fill: currentColor; }
.h4-mh__tel .h4-mh__wave { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (max-width: 430px) { .h4-mh__logo { inline-size: 220px; } }
@media (max-width: 360px) { .h4-mh__logo { inline-size: 185px; } }

.h4-dr { position: fixed; z-index: 9999; inset-block: 80px 0; inset-inline-start: max(0px, calc((100vw - 730px) / 2)); inline-size: min(100vw, 730px); overflow-y: auto; overscroll-behavior: contain; background: #2e2a26; transform: translateX(-100%); visibility: hidden; transition: transform .5s cubic-bezier(.55, .055, .675, .19), visibility 0s .5s; }
.h4-dr.is-unfold { transform: translateX(0); visibility: visible; transition: transform .5s cubic-bezier(.215, .61, .355, 1), visibility 0s; }
.h4-dr__veil { position: fixed; inset: 0; z-index: 88; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .33s; }
.h4-dr__veil.is-on { opacity: 1; }
.h4-dr__list { margin-top: 30px; padding: 0 5% 40px; }
.h4-dr__t { position: relative; display: block; inline-size: 100%; block-size: 55px; text-align: left; color: #fff; font-size: 18px; line-height: 55px; letter-spacing: -1.5px; }
.h4-dr__t i { position: absolute; inset-inline-end: 9px; inset-block-start: 50%; inline-size: 13px; block-size: 13px; margin-top: -7px; border-top: 1.4px solid #fff; border-right: 1.4px solid #fff; transform: rotate(45deg); transition: transform .2s, inset-inline-end .2s; }
.h4-dr__t[aria-expanded="true"] i { inset-inline-end: 13px; transform: rotate(135deg); }
.h4-dr__s { background: #4a3e3c; }
.h4-dr__s a { display: block; block-size: 45px; padding-inline-start: 15px; color: #fff; font-size: 15px; line-height: 45px; letter-spacing: -1.5px; }


@media (min-width: 1024px) {
  
  .h4-kv { position: relative; block-size: 100vh; min-block-size: 640px; overflow: hidden; background: var(--h4-brown); }
  .h4-kv__s { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
  .h4-kv__s.is-cur { z-index: 2; opacity: 1; pointer-events: auto; }
  .h4-kv__bg { position: absolute; inset-inline: 0; inset-block-end: 0; margin: auto; inline-size: 100%; block-size: auto; max-inline-size: none; object-fit: contain; transform: scale3d(1.18, 1.18, 1.18); backface-visibility: hidden; }
  .h4-kv__s--1 .h4-kv__bg { inset-block-end: -40px; }
  .h4-kv__s.is-cur .h4-kv__bg { animation: h4-kvzoom 5s ease-out both; }
  .h4-kv__copy { position: absolute; z-index: 2; inset-inline-start: 50%; inset-block-start: 300px; translate: -50% 0; inline-size: calc(var(--copy-w) * var(--copy-k, 1)); }
  .h4-kv__s--1 .h4-kv__copy { --copy-w: 706px; }
  .h4-kv__s--2 .h4-kv__copy { --copy-w: 528px; inset-block-start: 16%; }
  .h4-kv__copy img { display: block; inline-size: 100%; block-size: auto; }
  .h4-kv__man { position: absolute; z-index: 2; inset-block-end: 0; inset-inline-end: 4%; inline-size: min(546px, 37.9vw); }
  .h4-kv__rail { position: absolute; z-index: 3; inset-block-end: 0; inset-inline-end: 0; inline-size: min(282px, 19.6vw); }
  .h4-kv__pts { position: absolute; z-index: 3; inset-block-start: 120px; inset-inline-end: 4%; inline-size: min(410px, 28.5vw); }
  .h4-kv__s--2 .h4-kv__pts { inset-block-start: 12%; inset-inline-end: 3%; }
  .h4-kv__man img, .h4-kv__rail img, .h4-kv__pts img { display: block; inline-size: 100%; block-size: auto; }
  .h4-kv__law { position: absolute; z-index: 3; inset-inline-start: 50px; inset-block-end: 50px; }
  .h4-kv__law li { padding-inline-start: 15px; text-indent: -15px; color: #000; font-size: 14px; font-weight: 300; opacity: .6; }
  .h4-kv [data-in] { opacity: 0; }
  .h4-kv__s.is-cur [data-in="l"] { animation: h4-from-l .8s ease 1s both; }
  .h4-kv__s.is-cur [data-in="u"] { animation: h4-from-u .8s ease 1s both; }
  .h4-kv__s.is-cur [data-in="r"] { animation: h4-from-r .8s ease 1s both; }
  @media (max-height: 1010px) { .h4-kv__copy { --copy-k: .9; inset-block-start: 15%; } .h4-kv__s--2 .h4-kv__copy { inset-block-start: 12%; } }
  @media (max-height: 900px) { .h4-kv__copy { --copy-k: .65; } }

  
  .h4-up { position: relative; display: flex; justify-content: space-between; padding: 190px 0 190px clamp(60px, 13.2vw, 190px); overflow: hidden; background: url("/assets/img/u-stage.webp?v=bd106aafd1") center bottom / cover no-repeat; }
  .h4-up__head { inline-size: 30%; }
  .h4-up__head h2 { margin-top: 20%; }
  .h4-up__head img { display: block; inline-size: 100%; block-size: auto; }
  .h4-up__rail { inline-size: 60%; }
  .h4-up__card { display: flex; flex-direction: column; align-items: center; justify-content: space-between; block-size: min(80vh, 1200px); padding: 140px 20px 60px; background: rgba(255, 255, 255, .1); border: 1px solid var(--h4-copper); transition: border-width .7s ease .3s; }
  .h4-up__card.is-cur { border-width: 10px; transition: border-width .7s ease; }
  .h4-up__type, .h4-up__more { inline-size: 100%; text-align: center; opacity: 0; transition: opacity .7s ease; }
  .h4-up__card.is-cur .h4-up__type, .h4-up__card.is-cur .h4-up__more { opacity: 1; }
  .h4-up__type b { display: block; color: #fff; font: 700 min(3.5vw, 64px)/24px 'SUIT', 'Noto Sans KR', sans-serif; letter-spacing: 1px; }
  .h4-up__type small { font-size: min(3.5vw, 40px); font-weight: 400; }
  .h4-up__type em { display: block; color: #fff; font: 400 24px/65px 'SUIT', sans-serif; letter-spacing: 0; }
  .h4-up__fig { display: block; inline-size: 80%; }
  .h4-up__fig img { display: block; inline-size: 100%; block-size: auto; }
  .h4-up__more { margin-top: 50px; }
  .h4-up__more img { display: inline-block; inline-size: auto; }
  .h4-up__pager { position: absolute; inset-inline-start: clamp(60px, 13.2vw, 190px); inset-block-start: 70%; display: flex; align-items: center; justify-content: space-between; inline-size: 136px; block-size: 50px; }
  .h4-up__no { position: relative; display: flex; align-items: center; justify-content: space-between; color: #948f8d; font: 500 17px/1.5 'SUIT', sans-serif; }
  .h4-up__no b { position: relative; inset-block-start: -10px; color: #fff; font-size: 24px; font-weight: 700; }
  .h4-up__no i { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: 32px; block-size: 1px; margin: -2px 0 0 -8px; background: #948f8d; rotate: -50deg; }
  .h4-up__no span { position: relative; inset-block-start: 10px; margin-inline-start: 15px; font-size: 20px; }

  
  .h4-vp { padding: 160px 0; overflow: hidden; background: #f6f1e7 url("/assets/img/v-silk.webp?v=5087a1e304") 0 0 / cover no-repeat; }
  .h4-vp__head { margin-inline-start: 18%; }
  .h4-vp__head img { display: block; inline-size: auto; max-inline-size: none; block-size: auto; }
  .h4-vp__area { inline-size: 100%; margin: 95px 0 0 18%; }
  .h4-vp__card { position: relative; display: flex; justify-content: space-between; }
  .h4-vp__pic { flex: 0 0 auto; }
  .h4-vp__pic img { display: block; block-size: 30vw; inline-size: auto; max-inline-size: none; }
  .h4-vp__txt { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; inline-size: 40%; padding: 7% 0 1.5%; }
  .h4-vp__txt > div { inline-size: 100%; }
  .h4-vp__mark { display: block; margin-bottom: 3%; }
  .h4-vp__k { color: var(--h4-rust); font: 500 24px/1.5 'SUIT', sans-serif; letter-spacing: .15em; }
  .h4-vp__lead { display: block; margin: 40px 0 15px; color: #000; font: 500 24px/40px 'SUIT', sans-serif; letter-spacing: -1px; }
  .h4-vp__lead small { font-size: 18px; line-height: 1; }
  .h4-vp__h { color: #000; font: 700 44px/1.2 'SUIT', sans-serif; letter-spacing: -2.5px; }
  .h4-vp__h small { font-size: 24px; font-weight: 700; }
  .h4-vp__pager { position: absolute; inset-inline-start: 60%; inset-block-start: 0; inline-size: 15%; block-size: 5%; min-block-size: 20px; }
  .h4-vp__pager .h4-arw { position: absolute; inset-block-start: 50%; translate: 0 -50%; }
  .h4-vp__pager .h4-arw--prev { inset-inline-start: 10px; }
  .h4-vp__pager .h4-arw--next { inset-inline-end: 10px; }
  .h4-vp__no { position: absolute; inset-inline-start: 50%; translate: -77% 0; display: flex; align-items: center; margin: 10px 20px 0; color: #8d8987; font: 700 18px/1 'SUIT', sans-serif; white-space: nowrap; }
  .h4-vp__no b { margin-inline-end: 5px; color: #000; font-size: 28px; }
  .h4-vp__no span { margin: -3px 0 0 6px; font-size: 15px; }
  @media (min-width: 1901px) { .h4-vp__pager { inline-size: 12%; } }
  @media (max-width: 1300px) { .h4-vp__pager { inline-size: 17%; } .h4-vp__h { margin: 2% 0; } .h4-vp__lead { line-height: 30px; } }

  
  .h4-bs { position: relative; padding-top: 150px; overflow: hidden; background: url("/assets/img/b-grid.webp?v=d6416263e1") center bottom / cover no-repeat; }
  .h4-bs__in { position: relative; inline-size: min(1512px, 95%); margin: 0 auto; padding-bottom: 350px; text-align: center; }
  .h4-bs__txt { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
  .h4-bs__en { margin: 16px 0 35px; color: #c1856a; font-size: 18px; font-weight: 600; line-height: 27px; letter-spacing: 10px; }
  .h4-bs__word { display: block; }
  .h4-bs__lead { margin-top: 51px; color: #1b1b1b; font-size: 28px; font-weight: 600; }
  .h4-bs__body { margin-block-start: 16px; color: #363232; font-size: 22px; font-weight: 400; }
  .h4-bs__txt .h4-btn { margin-top: 30px; }
  .h4-bs__man { position: absolute; inset-inline-end: -160px; inset-block-end: 0; inline-size: 925px; block-size: auto; }
  @media (max-width: 1660px) { .h4-bs__man { inset-inline-end: -80px; inline-size: 770px; } }

  
  .h4-ct { padding: 220px 0; background: url("/assets/img/c-satin.webp?v=9c1e0fe029") 0 0 / cover no-repeat; }
  .h4-ct__in { inline-size: min(1232px, calc(100% - 80px)); margin: 0 auto; }
  .h4-ct__t { margin-block-end: 70px; color: #2e2929; font-size: 55px; font-weight: 700; text-align: center; }
  .h4-ct__row { display: flex; justify-content: space-between; gap: 20px; }
  .h4-ct__item { display: block; inline-size: min(590px, 48%); }
  .h4-ct__item img { display: block; inline-size: 100%; block-size: auto; border: 2px solid #000; }
  .h4-ct__cap { display: flex; flex-direction: column; align-items: center; padding-block: 20px; color: #2e2929; font-size: 20px; font-weight: 400; line-height: 35px; text-align: center; }
  .h4-ct__cap b { display: inline-block; margin-inline-end: 10px; font-weight: 600; white-space: pre; }
  .h4-ct__cap b::before { content: "|  "; }
  .h4-ct__cap b::after { content: "  |"; }
}
@keyframes h4-kvzoom { 0% { transform: scale3d(1.18, 1.18, 1.18); } 100% { transform: none; } }
@keyframes h4-from-l { 0% { opacity: 0; translate: -100px 0; } 100% { opacity: 1; translate: 0 0; } }
@keyframes h4-from-r { 0% { opacity: 0; translate: 100px 0; } 100% { opacity: 1; translate: 0 0; } }
@keyframes h4-from-u { 0% { opacity: 0; translate: 0 100px; } 100% { opacity: 1; translate: 0 0; } }


@media (max-width: 1023px) {
  
  .h4-mkv { position: relative; block-size: 0; padding-bottom: 142.876%; overflow: hidden; background: #fff; text-align: center; }
  .h4-mkv__open { position: absolute; z-index: 3; inset-block-start: 34px; inset-inline-start: 25px; max-inline-size: 45%; color: #fff; font-size: 22px; font-weight: 900; text-align: left; }
  .h4-mkv__s { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .3s ease; }
  .h4-mkv__s.is-cur { z-index: 2; opacity: 1; pointer-events: auto; }
  .h4-mkv__bg { block-size: 100%; background: var(--bg) center bottom / 100% 100% no-repeat; transform: scale(1.2); transition: transform 2.5s ease .1s; }
  .h4-mkv__s.is-cur .h4-mkv__bg { transform: scale(1.01); }
  .h4-mkv__copy { position: absolute; z-index: 2; inset-block-start: 15%; inset-inline-start: 5%; inline-size: 70%; block-size: auto; opacity: 0; }
  .h4-mkv__s.is-left .h4-mkv__copy { inset-block-start: 12%; inset-inline-start: 5.59%; inline-size: 62.34%; }
  .h4-mkv__s.is-cur .h4-mkv__copy { opacity: 1; transition: opacity .7s linear .2s; }
  .h4-mkv__law { position: absolute; z-index: 2; inset-inline: 10px; inset-block-end: 16%; text-align: left; }
  .h4-mkv__law li { color: #fff; font-size: 10px; opacity: .6; letter-spacing: -1px; line-height: 1.5; }
  @media (max-width: 560px) { .h4-mkv__open { font-size: 4vw; } }

  
  .h4-mup { background: url("/assets/img/u-stage-m.webp?v=78e6e40c9c") 0 0 / 100% 100% no-repeat; }
  .h4-mup__in { inline-size: 640px; max-inline-size: 100%; margin: 0 auto; padding: 160px 40px; text-align: center; }
  .h4-mup__head { margin-bottom: 50px; text-align: left; font-family: 'SUIT', sans-serif; }
  .h4-mup__head p { margin-bottom: 9px; color: #fff; font-size: 36px; font-weight: 500; line-height: 1; letter-spacing: -.45px; }
  .h4-mup__head h2 { margin-bottom: 14px; color: var(--h4-copper); font-size: 68px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
  .h4-mup__head span { color: #fff; font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: -.35px; }
  .h4-mup__rail { --mcard: 648px; --mcard-pr: 60px; overflow: hidden; touch-action: pan-y; }
  .h4-mup__card { display: block; flex: 0 0 var(--mcard); inline-size: var(--mcard); padding-right: var(--mcard-pr); }
  .h4-mup__card img { display: inline; vertical-align: baseline; inline-size: 100%; block-size: auto; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
  .h4-mup__pager { display: flex; align-items: center; justify-content: space-between; gap: 13px; min-block-size: 24px; margin-block-start: 40px; }
  .h4-mup__cur, .h4-mup__all { flex: 0 0 auto; color: #fff; font: 800 32px/1 'SUIT', sans-serif; letter-spacing: -1px; }
  .h4-mup__all { color: #948f8d; }
  .h4-mup__bar { flex: 1 1 auto; block-size: 2px; background: rgba(146, 142, 140, .2); }
  .h4-mup__bar i { display: block; inline-size: 0; block-size: 2px; background: #928e8c; }
  @media (max-width: 680px) { .h4-mup__in { padding: 80px 20px; } .h4-mup__rail { --mcard: min(500px, 100%); --mcard-pr: 30px; } }
  @media (max-width: 640px) { .h4-mup__in { inline-size: 90%; padding: 80px 0; } .h4-mup__rail { --mcard: min(450px, 100%); } }
  @media (max-width: 580px) { .h4-mup__head p { font-size: 6vw; } .h4-mup__head h2 { font-size: 13vw; } .h4-mup__head span { font-size: 5vw; } .h4-mup__cur, .h4-mup__all { font-size: 5vw; } .h4-mup__rail { --mcard: min(400px, 100%); } }
  @media (max-width: 480px) { .h4-mup__rail { --mcard: min(350px, 100%); } }
  @media (max-width: 390px) { .h4-mup { padding: 40px 0; } .h4-mup__in { padding: 0; } .h4-mup__head p { font-size: 18px; } .h4-mup__head h2 { font-size: 34px; } .h4-mup__head span { font-size: 14px; } .h4-mup__cur, .h4-mup__all { font-size: 16px; } .h4-mup__rail { --mcard: min(294px, 100%); } }

  
  .h4-marw { position: relative; flex: 0 0 auto; inline-size: 24px; block-size: 14px; color: #c3bdbb; }
  .h4-marw::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; border-top: 1.5px solid currentColor; }
  .h4-marw::after { content: ""; position: absolute; inset-inline-start: 1px; inset-block-start: calc(50% - 5px); inline-size: 9px; block-size: 9px; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; rotate: -45deg; }
  .h4-marw--next { scale: -1 1; }
  .h4-marw--dark { inline-size: 29px; block-size: 25px; color: #8a8584; }

  
  .h4-mvp { background: url("/assets/img/v-silk-m.webp?v=a6d3b53856") 0 0 / 100% 100% no-repeat; }
  .h4-mvp__in { inline-size: 640px; max-inline-size: 100%; margin: 0 auto; padding: 100px 40px 0; text-align: center; }
  .h4-mvp__head { display: flex; }
  .h4-mvp__head img { inline-size: 100%; max-inline-size: 547px; block-size: auto; }
  .h4-mvp__rail { --vcard: 447px; --vgap: 90px; padding: 60px 0 80px; text-align: left; touch-action: pan-y; }
  .h4-mvp__card { flex: 0 0 var(--vcard); inline-size: var(--vcard); margin-right: var(--vgap); }
  .h4-mvp__pic { display: block; inline-size: 100%; block-size: auto; margin-bottom: 40px; }
  .h4-mvp__mark { display: block; inline-size: 104px; block-size: 104px; margin-bottom: 20px; }
  .h4-mvp__k { margin-bottom: 26px; color: var(--h4-rust); font: 600 18px/1.5 'SUIT', sans-serif; letter-spacing: .15em; }
  .h4-mvp__lead { margin-bottom: 10px; color: #000; font: 400 22px/1.5 'SUIT', sans-serif; letter-spacing: -1px; }
  .h4-mvp__lead small { font-size: 16px; }
  .h4-mvp__h { margin-bottom: 57px; color: #000; font: 800 30px/1.5 'SUIT', sans-serif; letter-spacing: -1px; }
  .h4-mvp__h small { font-size: 24px; }
  .h4-mbtn { display: flex; justify-content: space-between; inline-size: 212px; border: 1px solid #000; }
  .h4-mbtn span, .h4-mbtn i { display: flex; align-items: center; justify-content: center; padding: 15px 16px; color: var(--h4-coal); font: 700 20px/1.5 'SUIT', sans-serif; letter-spacing: -1px; }
  .h4-mbtn i { border-left: 1px solid #000; }
  .h4-mbtn i::before { content: ""; inline-size: 23px; block-size: 16px; background: currentColor; -webkit-mask: var(--h4-arrow-mask) center / contain no-repeat; mask: var(--h4-arrow-mask) center / contain no-repeat; }
  .h4-mvp__pager { display: flex; align-items: center; justify-content: space-between; padding: 0 0 90px; color: #000; font: 800 28px/1.5 'SUIT', sans-serif; letter-spacing: -1px; }
  .h4-mvp__pager .h4-marw--prev, .h4-mvp__pager > .h4-marw:first-child { margin-inline-end: 40px; }
  .h4-mvp__pager .h4-marw--next { margin-inline-start: 40px; }
  .h4-mvp__bar { flex: 1 1 auto; block-size: 2px; margin: 0 40px; background: #c8c8c8; }
  .h4-mvp__bar i { display: block; inline-size: 0; block-size: 2px; background: #000; transition: inline-size .3s; }
  @media (max-width: 640px) { .h4-mvp__in { inline-size: 90%; padding: 60px 0 0; } .h4-mvp__rail { --vcard: 390px; } }
  @media (max-width: 580px) { .h4-mvp__rail { --vgap: 50px; padding: 50px 0; } .h4-mvp__h { margin-bottom: 30px; } .h4-mbtn { inline-size: 175px; } .h4-mbtn span { font-size: 14px; } .h4-mvp__pager > .h4-marw:first-child { margin-inline-end: 20px; } .h4-mvp__pager .h4-marw--next { margin-inline-start: 20px; } .h4-mvp__bar { margin: 0 20px; } }
  @media (max-width: 480px) { .h4-mvp__head img { inline-size: 350px; } .h4-mvp__rail { --vcard: 300px; --vgap: 20px; padding: 26px 0; } .h4-mvp__pager { font-size: 20px; } .h4-mvp__mark { inline-size: 52px; block-size: 52px; } }
  @media (max-width: 430px) { .h4-mvp__head img { inline-size: 216px; } }
  @media (max-width: 390px) { .h4-mvp__in { padding: 40px 0; } .h4-mvp__pager { padding: 0 40px; } }
  @media (max-width: 380px) { .h4-mvp__pic { margin: 0 auto 20px; } }
  @media (max-width: 360px) { .h4-mvp__head img { inline-size: 280px; } }

  
  .h4-bs { background: url("/assets/img/b-grid-m.webp?v=2eac4452f0") 0 0 / 100% 100% no-repeat; }
  .h4-bs__in { inline-size: 640px; max-inline-size: 100%; margin: 0 auto; padding-top: 80px; text-align: center; }
  .h4-bs__en { display: block; margin-bottom: 20px; color: #c1856a; font-size: 20px; font-weight: 700; letter-spacing: 2px; }
  .h4-bs__word { display: block; inline-size: 190px; block-size: auto; margin: 0 auto; }
  .h4-bs__lead { margin-top: 50px; color: #1b1b1b; font: 700 30px/1.2 'SUIT', sans-serif; letter-spacing: -1px; }
  .h4-bs__body { margin-top: 30px; color: #1b1b1b; font: 400 20px/1.5 'SUIT', sans-serif; letter-spacing: -1px; }
  .h4-bs__txt .h4-btn { position: relative; display: inline-block; margin: 46px 0 0; border: 1px solid #000; background: #fff; color: var(--h4-coal); font: 800 20px/1.5 'SUIT', sans-serif; letter-spacing: -1px; }
  .h4-bs__txt .h4-btn span { display: block; padding: 12px 22px; }
  .h4-bs__txt .h4-btn span::before { content: none; }
  .h4-bs__txt .h4-btn:hover span { color: var(--h4-coal); }
  .h4-bs__txt .h4-btn::after { content: ""; position: absolute; inset-block-start: -50px; inset-inline-start: 50%; translate: -50% 0; inline-size: 1px; block-size: 35px; background: #fff; }
  .h4-bs__m { position: relative; inset-inline-start: 135px; text-align: center; }
  .h4-bs__mman { display: inline-block; inline-size: 80%; max-inline-size: 606px; block-size: auto; }
  .h4-bs__msign { position: absolute; inset-inline-start: -60px; inset-block-end: 66px; inline-size: 33%; max-inline-size: 187px; block-size: auto; }
  @media (max-width: 650px) { .h4-bs__m { inset-inline-start: 100px; } .h4-bs__msign { inset-inline-start: -5px; } }
  @media (max-width: 640px) { .h4-bs__in { inline-size: 90%; } }
  @media (max-width: 580px) { .h4-bs__word { inline-size: 150px; } .h4-bs__lead { font-size: 18px; } .h4-bs__body { font-size: 16px; } .h4-bs__txt .h4-btn { font-size: 16px; } .h4-bs__txt .h4-btn span { padding: 10px 25px; } .h4-bs__msign { inset-inline-start: -30px; inset-block-end: 50px; } }
  @media (max-width: 480px) { .h4-bs__m { inset-inline-start: 80px; } }
  @media (max-width: 380px) { .h4-bs__msign { inset-inline-start: -35px; } }
  @media (max-width: 360px) { .h4-bs__word { inline-size: 130px; } }
  @media (max-width: 335px) { .h4-bs__m { inset-inline-start: 65px; } .h4-bs__msign { inset-inline-start: -25px; } }

  
  .h4-ct { background: url("/assets/img/c-satin-m.webp?v=a1f99ff8f5") 0 0 / 100% 100% no-repeat; }
  .h4-ct__in { inline-size: 640px; max-inline-size: 100%; margin: 0 auto; padding: 100px 0; text-align: center; }
  .h4-ct__t { margin-bottom: 40px; color: #2e2929; font: 700 22px/1.5 'Montserrat', sans-serif; letter-spacing: -1px; }
  .h4-ct__item { display: block; inline-size: 90%; margin: 0 auto 120px; }
  .h4-ct__item:last-child { margin-bottom: 20px; }
  .h4-ct__item img { display: block; box-sizing: content-box; inline-size: 100%; block-size: auto; border: 2px solid #2e2929; }
  .h4-ct__cap { display: flex; flex-direction: column; gap: 5px; margin-top: 28px; color: #2e2929; font: 400 26px/1.5 'SUIT', sans-serif; letter-spacing: -1px; }
  .h4-ct__cap b { position: relative; inline-size: 138px; margin: auto; font-weight: 700; }
  .h4-ct__cap b::before, .h4-ct__cap b::after { content: ""; position: absolute; inset-block: 0; margin: auto; inline-size: 1px; block-size: 23px; background: #2e2929; opacity: .5; }
  .h4-ct__cap b::before { inset-inline-start: 0; }
  .h4-ct__cap b::after { inset-inline-end: 0; }
  @media (max-width: 680px) { .h4-ct__item { inline-size: 100%; margin-bottom: 40px; } }
  @media (max-width: 640px) { .h4-ct__in { inline-size: 90%; } }
  @media (max-width: 480px) { .h4-ct__cap { font-size: 18px; } .h4-ct__cap b { inline-size: 100px; } }
  @media (max-width: 380px) { .h4-ct__in { padding: 50px 0; } .h4-ct__cap { font-size: 16px; } .h4-ct__cap b { inline-size: 90px; } }

  
  .h4-mtrack { display: flex; will-change: transform; }
}


.h4-sc { position: relative; }
.h4-sc img { block-size: auto; }
.h4-fig { position: relative; }
.h4-fig img, .h4-fig picture { display: block; inline-size: 100%; }
@media (min-width: 1024px) {
  .h4-sv { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; block-size: 438px; background: url("/assets/img/s-top.webp?v=4b16096dc5") center / cover no-repeat; }
  .h4-sv__t { margin-block-end: 10px; color: #fff; font-size: 41px; font-weight: 400; }
  .h4-st { position: absolute; inset-block-end: 0; inset-inline-start: 50%; translate: -50% 0; inline-size: min(1300px, calc(100% - 80px)); }
  .h4-st__row { display: flex; block-size: 65px; }
  .h4-st__row > li { flex: 1 1 0; margin: 0 .5px; background: rgba(65, 65, 65, .7); text-align: center; }
  .h4-st__a { display: flex; align-items: center; justify-content: center; block-size: 65px; background: #62605f; color: #fff; font-size: 17px; font-weight: 400; line-height: 1.3; opacity: .8; transition: background-color .8s var(--h4-ease-out), opacity .8s var(--h4-ease-out); }
  .h4-st__a:hover, .h4-st__a.is-cur { background: #3b3433; opacity: .9; }
  .h4-sc { inline-size: min(1300px, calc(100% - 80px)); margin: 30px auto 150px; padding-top: 50px; }
  
  .h4-sc:has(> h1 + .h4-tabs) { padding-top: 0; }
  .h4-tabs, .h4-solo { padding-bottom: 50px; }
  
  .h4-sh { margin: 100px 0; color: #3b3433; text-align: center; }
  .h4-sh__en { position: relative; margin-block-end: 30px; padding-block-end: 20px; color: #a7a9ac; font-size: 18px; font-weight: 600; letter-spacing: 10px; }
  .h4-sh__en::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 50%; translate: -50% 0; inline-size: 40px; block-size: 1px; background: #a7a9ac; }
  .h4-sh__up, .h4-sh__dn { font-size: 27px; font-weight: 400; color: #3b3433; }
  .h4-sh__t { margin: 15px 0; color: #3b3433; font-size: 47px; font-weight: 500; line-height: 1.25; }
  .h4-sh__t b { font-weight: 700; }
  
  .h4-nt { margin-top: 60px; padding: 30px 40px; border: 1px solid #ededed; text-align: left; }
  .h4-nt li { display: flex; gap: 4px; padding-bottom: 5px; color: #666; font-size: 14px; font-weight: 300; }
  .h4-nt li:last-child { padding-bottom: 0; }
  
  .h4-tabs__bar { display: flex; flex-wrap: wrap; padding-bottom: 50px; }
  .h4-tabs__b { flex: 1 0 15%; block-size: 55px; border-bottom: 1px solid #3b3433; color: #949fa6; font: 700 19px/55px 'Noto Sans KR', sans-serif; letter-spacing: -1px; text-align: center; }
  .h4-tabs__b.is-cur { border: 1px solid #3b3433; border-bottom: 0; background: #f5f5f5; color: #3b3433; }
  
  .h4-ov__cg { display: block; margin-bottom: 80px; }
  .h4-ov__cg img { display: block; inline-size: 100%; }
  .h4-ov__pc { margin-bottom: 70px; }
  .h4-ov__t { inline-size: 100%; border-top: 2px solid #4b4241; text-align: center; }
  .h4-ov__t th { padding-block: 20px; padding-inline: 10px; border-bottom: 1px solid #ccc; background: #faf8f5; color: #4b4241; font-size: 17px; font-weight: 500; }
  .h4-ov__t tr > th:first-child { border-right: 1px solid #ccc; }
  .h4-ov__t td { padding: 20px; border-bottom: 1px solid #ccc; color: #222; font-size: 17px; font-weight: 400; letter-spacing: -.5px; }
  .h4-ov__t .h4-ov__bk { font-weight: 700; }
  .h4-ov__t .h4-ov__bk:last-child, .h4-ov__bl { border-left: 1px solid #ccc; }
  
  .h4-br { position: relative; }
  .h4-br picture, .h4-br img { display: block; inline-size: 100%; }
  .h4-br__go { position: absolute; display: block; block-size: 50px; background: #1b1816; color: #fff; font-size: 18px; font-weight: 400; line-height: 50px; text-align: center; transition: background-color .3s; }
  .h4-br__go:hover { background: #c1856a; }
  .h4-br__go--1 { inline-size: 252px; inset-block-start: 24.85%; inset-inline-start: 7.9%; }
  .h4-br__go--2 { inline-size: 250px; inset-block-end: 3.9%; inset-inline-start: 50%; translate: -50% 0; }
  
  .h4-map { padding: 220px 0 200px; background: var(--map-bg) 0 0 / auto no-repeat; }
  .h4-map__row { display: flex; inline-size: 90%; margin: 0 auto; }
  .h4-map__box { inline-size: 48%; margin: 0 auto; text-align: center; }
  .h4-map__box picture { display: block; margin-top: 40px; }
  .h4-map__box img { display: block; inline-size: 100%; }
  .h4-map__cap { block-size: 90px; margin: 30px 0; color: #fff; font-size: 20px; font-weight: 300; text-align: center; }
  .h4-map__cap b { font-weight: 700; }
  .h4-map__go { display: block; inline-size: 350px; max-inline-size: 100%; margin: 0 auto; padding: 15px 0; border-radius: 50px; background: #dcd8d1; color: #2e2929; font-size: 16px; font-weight: 500; line-height: 1.25; text-align: center; transition: background-color .3s, color .3s; }
  .h4-map__go:hover { background: #9e6f48; color: #fff; }
  
  .h4-vid { position: relative; aspect-ratio: 1300 / 731; margin-bottom: 7px; background: #000; }
  .h4-vid iframe, .h4-vr iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
  .h4-vr { position: relative; aspect-ratio: 1 / .562; background: #111; }
  .h4-vr__open { margin-top: 16px; text-align: right; font-size: 15px; font-weight: 500; }
  .h4-vr__open a { color: #3b3433; border-bottom: 1px solid currentColor; }
  
  .h4-doc { position: relative; padding-top: 80px; }
  .h4-doc__cg, .h4-doc__cg img { display: block; inline-size: 100%; }
  .h4-doc__btns { position: absolute; z-index: 1; inset-block-start: 0; inset-inline-start: 50%; translate: -50% 0; display: flex; gap: 0 5%; }
  .h4-doc__btns a { position: relative; display: block; overflow: hidden; padding: 24px 32px 24px 24px; background: #e19573; color: #3f3536; font-weight: 500; text-align: left; transition: transform .3s, box-shadow .3s; }
  .h4-doc__btns a:hover { transform: translate(-5px, -5px); box-shadow: rgba(0, 0, 0, .19) 0 4.8px 16px, rgba(0, 0, 0, .23) 0 3.2px 3.2px; }
  .h4-doc__up { display: block; font-size: 16px; font-weight: 400; white-space: nowrap; }
  .h4-doc__t { display: block; font-size: 24px; font-weight: 500; white-space: nowrap; }
  .h4-doc__ic { display: block; padding: 48px 0 0 160px; }
  .h4-doc__ic::before { content: ""; display: block; inline-size: 22px; block-size: 22px; margin-inline-start: auto; background: currentColor; -webkit-mask: var(--h4-down-mask) center / contain no-repeat; mask: var(--h4-down-mask) center / contain no-repeat; }
  
  .h4-dl { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin-top: 50px; }
  .h4-dl__a { display: flex; align-items: center; justify-content: center; inline-size: 300px; max-inline-size: 100%; padding: 20px 40px; border-radius: 30px; background: #3b3537; color: #fff; font-size: 16px; font-weight: 500; line-height: 24px; text-align: center; }
  
  .h4-news { inline-size: min(1200px, 100%); margin: 64px auto 0; }
  .h4-news__t { inline-size: 100%; border-top: 2px solid #b5b6b6; }
  .h4-news__t th { padding: 18px 0; border-bottom: 1px solid #b5b6b6; color: #222; font-size: 16px; font-weight: 500; text-align: center; }
  .h4-news__t th:nth-child(1) { inline-size: 80px; } .h4-news__t th:nth-child(2) { inline-size: 150px; } .h4-news__t th:nth-child(4) { inline-size: 100px; }
  .h4-news__t td { padding: 16px 0; border-bottom: 1px solid #d6d6d6; color: #000; font-size: 16px; line-height: 1.6; text-align: center; }
  .h4-news__n, .h4-news__d { font-family: 'Montserrat', sans-serif; font-weight: 600; white-space: nowrap; }
  .h4-news__m { padding: 0 16px !important; }
  .h4-news__m span { display: block; padding: 5px 0; background: #413c3b; color: #fff; font-size: 14px; }
  .h4-news__s { padding-inline-start: 32px !important; font-weight: 500; text-align: left !important; }
}
:root { --h4-down-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5v12.2M6.6 10.6l5.4 5.4 5.4-5.4M4 20.5h16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }


@media (max-width: 1023px) {
  .h4-msv { block-size: 70px; background: #413c3b; }
  .h4-msv__t { color: #fff; font-size: 22px; font-weight: 400; line-height: 70px; letter-spacing: -1.5px; text-align: center; }
  .h4-mst { inline-size: 90%; margin: 0 auto; padding: 50px 0; }
  .h4-mst__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .h4-mst__row > li { flex: 1 0 33%; block-size: 45px; margin: 2px; overflow: hidden; border: 1px solid #001e3e; border-radius: 10px; background: #fff; text-align: center; }
  .h4-mst__row a { display: flex; align-items: center; justify-content: center; block-size: 100%; color: #3a2f2d; font-size: 15px; line-height: 1.2; letter-spacing: -1.5px; }
  .h4-mst__row a br { display: none; }
  .h4-mst__row a.is-cur { background: #3a2f2d; color: #fff; }
  .h4-sc { inline-size: 90%; margin: 0 auto; padding: var(--m-top, 10px) 0 60px; text-align: center; }
  .h4-sc:has(> h1 + .h4-sh), .h4-sc:has(> h1 + .h4-tabs) { padding-top: var(--m-top, 0px); }
  @media (max-width: 430px) { .h4-msv__t { font-size: 20px; } }
  
  .h4-sh { margin-bottom: var(--m-head, 66px); color: #3b3433; text-align: center; }
  .h4-sh__en { position: relative; margin: var(--m-en, 20px) 20px 20px; padding: 15px 15px; color: #a7a9ac; font-size: 16px; font-weight: 600; letter-spacing: 10px; }
  .h4-sh__en::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 50%; translate: -50% 0; inline-size: 40px; block-size: 1px; background: #a7a9ac; }
  .h4-sh__t { color: #3b3433; font-size: 50px; font-weight: 700; line-height: 1.5; letter-spacing: -3px; }
  .h4-sh__t b { font-weight: 900; }
  .h4-sh__up, .h4-sh__dn { color: rgb(59 52 51); font-size: 30px; font-weight: 300; }
  @media (max-width: 605px) { .h4-sh__en, .h4-sh__up, .h4-sh__dn { font-size: 18px; } .h4-sh__t { font-size: calc(2vw + 24px); } }
  @media (max-width: 460px) { .h4-sh__t { font-size: calc(2vw + 18px); } }
  @media (max-width: 380px) { .h4-sh__en, .h4-sh__up, .h4-sh__dn { font-size: 15px; } .h4-sh__up br, .h4-sh__dn br { display: none; } }
  
  .h4-nt { inline-size: 100%; margin: var(--m-note, 60px) auto 0; padding: 37px 26px; border: 1px solid #eee; text-align: left; }
  .h4-nt li { display: flex; gap: 5px; color: #888; font-size: 14px; font-weight: 400; line-height: 1.5; }
  
  .h4-fig--m img { display: block; inline-size: 100%; }
  .h4-fig--m img + img { margin-top: var(--m-gap, 0px); }
  .h4-zoom { position: absolute; inset-inline-end: 0; inset-block-end: 0; display: block; inline-size: 30px; block-size: 30px; background: rgb(249 248 244); }
  .h4-zoom svg { display: block; inline-size: 100%; block-size: 100%; fill: none; stroke: rgb(63 53 54); stroke-width: 1.5; stroke-linecap: round; }
  .h4-sc--plan .h4-zoom { inset-block: 0 auto; }
  .h4-sc--layout .h4-zoom { inset-inline-end: 3%; inset-block-end: 58%; }
  
  .h4-sel { position: relative; margin: -10px 0 20px; text-align: left; }
  .h4-sel__cur { position: relative; display: block; inline-size: 100%; padding: 18px 22px; background: #3f3536; color: #fff; font-size: 15px; font-weight: 600; line-height: 1; text-align: left; }
  .h4-sel__cur::after { content: ""; position: absolute; inset-inline-end: 22px; inset-block-start: 50%; inline-size: 20px; block-size: 20px; margin-top: -10px; border-radius: 50%; background: rgb(255 255 255 / .15) var(--h4-chev) no-repeat 50% 50% / 100% 100%; transition: rotate .3s ease-in-out; }
  .h4-sel.is-unfold .h4-sel__cur::after { rotate: 180deg; }
  .h4-sel__opts { position: absolute; z-index: 2; inline-size: 100%; display: none; padding-bottom: 6px; background: #3f3536; }
  .h4-sel.is-unfold .h4-sel__opts { display: block; }
  .h4-sel__opts button { display: block; inline-size: 100%; padding: 7px 22px; color: #fff; font-size: 15px; text-align: left; transition: background-color .6s ease; }
  .h4-sel__opts button.is-cur { background-color: #413c3b; font-weight: 600; }
  
  .h4-ov__cg, .h4-ov__cg img { display: block; inline-size: 100%; }
  .h4-ov__mob { margin-top: 30px; }
  .h4-ov__m { inline-size: 100%; border-top: 2px solid #4b4241; }
  .h4-ov__m + .h4-ov__m { margin-top: 60px; }
  .h4-ov__m th { padding: 20px 10px; border-bottom: 1px solid #eee; background: #fff; color: #4b4241; font-size: 16px; font-weight: 600; text-align: center; }
  .h4-ov__m td { padding: 20px 10px 20px 20px; border-bottom: 1px solid #eee; color: #222; font-size: 15px; font-weight: 400; text-align: left; }
  .h4-ov__m .h4-ov__mh { background: #faf8f5; font-weight: 700; }
  @media (max-width: 480px) { .h4-ov__m th:not(.h4-ov__mh) { display: block; inline-size: 100%; padding-bottom: 0; border-bottom: 0; text-align: left; } .h4-ov__m td { display: block; inline-size: 100%; padding: 5px 10px 20px; } }
  
  .h4-br { position: relative; }
  .h4-br picture, .h4-br img { display: block; inline-size: 100%; }
  .h4-br__go { position: absolute; display: flex; align-items: center; justify-content: center; padding: 2% 4%; background: #1b1816; color: #fff; font-size: 24px; font-weight: 400; white-space: nowrap; }
  .h4-br__go--1 { inset-block-start: 16%; inset-inline-start: 7%; }
  .h4-br__go--2 { inset-block-end: 3%; inset-inline-start: 50%; translate: -50% 0; }
  @media (max-width: 530px) { .h4-br__go { font-size: 14px; } }
  @media (max-width: 480px) { .h4-br__go { font-size: 12px; } }
  @media (max-width: 390px) { .h4-br__go { font-size: 10px; } }
  
  .h4-map { padding: 90px 0 16px; background: #3e3738; }
  .h4-map__mark { display: block; margin: 0 auto 60px; inline-size: 360px; max-inline-size: 90%; }
  .h4-map__row { padding: 0 7%; }
  .h4-map__box picture, .h4-map__box img { display: block; inline-size: 100%; }
  .h4-map__cap { padding: 30px 0 0; color: #fff; font-size: 18px; font-weight: 400; line-height: 1.55; text-align: center; }
  .h4-map__cap b { font-weight: 800; }
  .h4-map__go { display: block; inline-size: 80%; margin: 50px auto 60px; padding: 10px 0; border-radius: 50px; background: #dcd8d1; color: #2e2929; font-size: 18px; text-align: center; }
  @media (max-width: 540px) { .h4-map__mark { inline-size: 240px; } }
  
  .h4-vid { position: relative; aspect-ratio: 16 / 9; margin-bottom: 8px; background: #000; }
  .h4-vid iframe, .h4-vr iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
  .h4-vr { position: relative; aspect-ratio: 1 / 1.5; background: #111; }
  .h4-vr__open { margin-top: 14px; text-align: center; font-size: 15px; }
  .h4-vr__open a { color: #3b3433; border-bottom: 1px solid currentColor; }
  
  .h4-doc { position: relative; padding-top: 80px; }
  .h4-doc__cg, .h4-doc__cg img { display: block; inline-size: 100%; }
  .h4-doc__btns { position: absolute; z-index: 1; inset-block-start: 0; inset-inline-start: 50%; translate: -50% 0; display: flex; gap: 10px; }
  .h4-doc__btns a { display: block; padding: 27px; background: #e19573; color: #3f3536; text-align: left; }
  .h4-doc__up { display: block; font-size: 2vw; white-space: nowrap; }
  .h4-doc__t { display: block; font-size: 2.5vw; font-weight: 500; white-space: nowrap; }
  .h4-doc__ic { display: block; padding-top: 16px; }
  .h4-doc__ic::before { content: ""; display: block; inline-size: 20px; block-size: 20px; margin-inline-start: auto; background: currentColor; -webkit-mask: var(--h4-down-mask) center / contain no-repeat; mask: var(--h4-down-mask) center / contain no-repeat; }
  @media (max-width: 480px) { .h4-doc { padding-top: 48px; } .h4-doc__btns a { padding: 16px; } .h4-doc__up { font-size: 2.5vw; } .h4-doc__t { font-size: 3vw; } .h4-doc__ic { padding-top: 0; } }
  
  .h4-dl { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin-top: 50px; }
  .h4-dl__a { display: flex; align-items: center; justify-content: center; inline-size: 300px; max-inline-size: 100%; padding: 20px 40px; border-radius: 30px; background: #3b3537; color: #fff; font-size: 16px; font-weight: 500; line-height: 24px; text-align: center; }
  
  .h4-news__t, .h4-news__t tbody { display: block; inline-size: 100%; }
  .h4-news__t { border-top: 2px solid #b5b6b6; }
  .h4-news__t thead { display: none; }
  .h4-news__t tr { display: grid; grid-template-areas: "m d" "s s"; grid-template-columns: auto 1fr; gap: 16px 10px; padding: 18px 0 20px; border-bottom: 1px solid #d6d6d6; text-align: left; }
  .h4-news__n { display: none; }
  .h4-news__m { grid-area: m; }
  .h4-news__m span { display: block; min-inline-size: 88px; padding: 4px 10px; background: #413c3b; color: #fff; font-size: 13px; text-align: center; }
  .h4-news__d { grid-area: d; align-self: center; justify-self: end; color: #000; font: 600 15px/1.4 'Montserrat', sans-serif; letter-spacing: -.5px; }
  .h4-news__s { grid-area: s; min-inline-size: 0; overflow: hidden; color: #222; font-size: 15px; font-weight: 500; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
}


.h4-ft { position: relative; background: var(--h4-foot); }
@media (min-width: 1024px) {
  .h4-ft__up { position: absolute; z-index: 2; inset-block-start: -30px; inset-inline-start: 50%; translate: -50% 0; display: grid; place-items: center; inline-size: 52px; block-size: 52px; background: var(--h4-brown); }
  .h4-ft__up i { inline-size: 14px; block-size: 14px; margin-top: 7px; border-top: 1.5px solid #fff; border-left: 1.5px solid #fff; rotate: 45deg; }
  .h4-ft__in { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; inline-size: min(1512px, calc(100% - 80px)); margin: 0 auto; padding: 50px 0; }
  .h4-ft__mark { display: block; }
  .h4-ft__biz { margin: 20px 0 15px; color: #e8e7e0; font-size: 14px; font-weight: 400; }
  .h4-ft__law { color: #e8e7e0; font-size: 13px; font-weight: 400; }
  .h4-ft__copy { margin-top: 15px; color: #e8e7e0; font-size: 13px; font-weight: 400; }
  .h4-ft__side { flex: 0 0 auto; margin: 15px; text-align: right; }
  .h4-ft__tel { display: block; color: #fff; font-size: 40px; font-weight: 700; line-height: 1.5; }
  .h4-ft__scale { color: rgb(201 201 201); font-size: 17px; font-weight: 400; }
  .h4-ft__scale b { color: #ffffff; font-weight: 500; }
  .h4-ft__ptn { display: block; margin: 30px 0 0 auto; max-inline-size: 100%; block-size: auto; }
  @media (max-width: 1660px) { .h4-ft__in { inline-size: min(1300px, calc(100% - 80px)); } }
}
@media (max-width: 1023px) {
  .h4-ft { max-inline-size: 730px; margin: 0 auto; color: #fff; }
  .h4-mft { padding: 50px 6% 100px; text-align: center; }
  .h4-mft__mark { display: block; margin: 0 auto 25px; }
  .h4-mft__biz li { margin-bottom: 7px; color: #c9c9c9; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: -.8px; }
  .h4-mft__biz a { color: #fff; font-weight: 700; }
  .h4-mft__law { margin-top: 25px; padding-top: 25px; border-block-start: 1px solid #646464; }
  .h4-mft__law li { margin-bottom: 7px; color: #808080; font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: -.8px; }
  .h4-mft__copy { margin-top: 33px; color: #fff; font-size: 12px; line-height: 1.2; letter-spacing: -.8px; opacity: .4; }
  @media (max-width: 580px) { .h4-mft__mark { inline-size: 110px; margin-bottom: 20px; } }
  @media (max-width: 480px) { .h4-mft__mark { inline-size: 100px; } }
}


.h4-pz { position: fixed; z-index: 10000; inset-inline: 0; inset-block-start: 0; block-size: 508px; background: #d0cbca; transition: inset-block-start .5s ease; }
.h4-pz:not(.is-unfold) { inset-block-start: -503px; }
.h4-pz__box { block-size: 100%; padding: 15px 0; overflow: hidden; }
.h4-pz__row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; }
.h4-pz__i { position: relative; margin: 0 2px; max-inline-size: 350px; }
.h4-pz__i img { display: block; inline-size: 100%; block-size: auto; max-block-size: 478px; object-fit: contain; }
.h4-pz__tab { position: absolute; inset-block-start: 497px; inset-inline-start: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; justify-content: center; inline-size: 147px; block-size: 36px; padding-bottom: 2px; border-radius: 0 0 74px 74px / 0 0 30px 30px; background: #d0cbca; color: #3f3a3a; font: 600 12px/1.1 'Montserrat', sans-serif; letter-spacing: -.3px; }
.h4-pz__tab i { inline-size: 7px; block-size: 7px; margin-top: 4px; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; rotate: 45deg; transition: rotate .3s; }
.h4-pz:not(.is-unfold) .h4-pz__tab i { rotate: 225deg; margin-top: 0; }
.h4-pz__veil { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .7); }
@media (max-width: 1840px) { .h4-pz__row { transform: scale(.96); } }
@media (max-width: 1780px) { .h4-pz__row { transform: scale(.95); } .h4-pz__i { inline-size: calc(160px + 10vw); max-inline-size: 100%; } }
@media (max-width: 1400px) { .h4-pz__i { min-inline-size: 200px; } }


.h4-mpop { position: absolute; z-index: 999; inset-inline: 0; inset-block-start: 120px; overflow: hidden; }
.h4-mpop[hidden] { display: none; }
.h4-mpop__frame { position: relative; }
.h4-mpop__view { position: relative; inline-size: 80%; max-inline-size: 600px; margin: 0 auto; overflow: hidden; touch-action: pan-y; }
.h4-mpop__track { display: flex; will-change: transform; }
.h4-mpop__s { flex: 0 0 100%; inline-size: 100%; }
.h4-mpop__s img { display: block; inline-size: 100%; block-size: auto; }
.h4-mpop__arw { position: absolute; z-index: 2; inset-block-start: 50%; translate: 0 -50%; display: grid; place-items: center; inline-size: 27px; block-size: 44px; opacity: .75; }
.h4-mpop__arw::before { content: ""; inline-size: 20px; block-size: 20px; border-radius: 50%; background: #fff; }
.h4-mpop__arw::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 6px; block-size: 6px; margin: -3px 0 0 -2px; border-top: 2px solid #222; border-left: 2px solid #222; rotate: -45deg; }
.h4-mpop__arw--prev { inset-inline-start: calc(10% - 32px); }
.h4-mpop__arw--next { inset-inline-end: calc(10% - 32px); }
.h4-mpop__arw--next::after { margin-left: -4px; rotate: 135deg; }
.h4-mpop__bar { position: relative; inline-size: 80%; max-inline-size: 600px; block-size: 30px; margin: 0 auto; background: #d0cbca; }
.h4-mpop__x { position: absolute; inset-inline-end: 0; inset-block-start: 0; inline-size: 30px; block-size: 30px; }
.h4-mpop__x::before, .h4-mpop__x::after { content: ""; position: absolute; inset-inline-start: 6px; inset-block-start: 14.5px; inline-size: 18px; block-size: 1px; background: #f4f2f1; rotate: 45deg; }
.h4-mpop__x::after { rotate: -45deg; }
.h4-mpop__veil { position: fixed; inset: 0; z-index: 8; background: rgba(0, 0, 0, .4); }


.h4-reg { max-inline-size: 640px; margin: 0 auto; padding: 40px 0 0; text-align: center; }
.h4-reg__head { margin-bottom: 40px; color: #3b3433; }
.h4-reg__en { position: relative; margin-bottom: 26px; padding-bottom: 18px; color: #a7a9ac; font-size: 16px; font-weight: 600; letter-spacing: 10px; }
.h4-reg__en::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 50%; translate: -50% 0; inline-size: 40px; block-size: 1px; background: #a7a9ac; }
.h4-reg__head h3 { margin-bottom: 14px; font-size: 40px; font-weight: 700; letter-spacing: -2px; }
.h4-reg__head p { color: #5c5352; font-size: 17px; font-weight: 400; }
.h4-reg__tel { margin-top: 28px; color: #3b3433; font-size: 17px; font-weight: 500; }
.h4-reg__tel a { margin-inline-start: 6px; font-size: 26px; font-weight: 700; color: var(--h4-brown); }
.h4-form { display: grid; gap: 14px; padding: 36px 32px; border: 1px solid #e3ddd8; background: #faf8f5; text-align: left; }
.h4-form__f { display: grid; gap: 6px; color: #3b3433; font-size: 15px; font-weight: 600; }
.h4-form__f input, .h4-form__f select { inline-size: 100%; min-inline-size: 0; block-size: 50px; padding: 0 14px; border: 1px solid #cfc7c1; border-radius: 0; background: #fff; color: #222; font: 400 16px/1.2 'Noto Sans KR', sans-serif; letter-spacing: -.5px; -webkit-appearance: none; appearance: none; }
.h4-form__f select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23403637' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center / 12px 8px no-repeat; }
.h4-form__f input:focus, .h4-form__f select:focus { outline: 2px solid var(--h4-copper); outline-offset: -1px; }
.h4-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.h4-form__agree { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #3b3433; font-size: 15px; font-weight: 500; }
.h4-form__agree label { display: flex; align-items: center; gap: 8px; }
.h4-form__agree input { inline-size: 18px; block-size: 18px; accent-color: var(--h4-brown); }
.h4-form__agree .agree-view { color: #7a6f6d; font-size: 14px; text-decoration: underline; }
.h4-form__law { max-block-size: 220px; overflow-y: auto; padding: 14px 16px; border: 1px solid #e3ddd8; background: #fff; color: #555; font-size: 13px; font-weight: 400; line-height: 1.6; letter-spacing: -.3px; }
.h4-form__law ul { padding-inline-start: 4px; }
.h4-form__law .ab-title { margin-bottom: 6px; color: #222; font-weight: 700; }
.h4-form__law .ab-head { margin-top: 8px; color: #333; font-weight: 600; }
.h4-form__go { block-size: 58px; margin-top: 6px; background: var(--h4-brown); color: #fff; font-size: 18px; font-weight: 600; letter-spacing: -.5px; transition: background-color .3s; }
.h4-form__go:hover { background: #2b2223; }
.h4-form__go:disabled { opacity: .6; cursor: default; }
.h4-form .form-status { min-block-size: 22px; color: #3b3433; font-size: 15px; font-weight: 500; text-align: center; }
.h4-form .form-status.is-warn { color: #c0392b; }
.h4-form .form-status.is-ok { color: #2e7d32; }
.hp-field { position: absolute !important; left: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
@media (max-width: 1023px) {
  .h4-reg { padding-top: 0; }
  .h4-reg__head h3 { font-size: 30px; }
  .h4-reg__head p { font-size: 15px; }
  .h4-form { padding: 24px 18px; }
  .h4-form__row { grid-template-columns: 1fr; }
  .h4-form__f input[type="date"] { display: block; min-inline-size: 0; block-size: 50px; line-height: 50px; }
}