@charset "utf-8"; :root{--deep:#3E1E87;--deep2:#241150;--blue:#6A4FB6;--sky:#A79BD8;--mist:#EEEAF7;--gray:#D6D2E2;--ink:#171326;--muted:#6E6883;--line:#E0DCEC;--paper:#F6F4FB;--shadow:0 24px 70px rgba(36,17,80,.12);--radius:10px;--head:117px;--head-min:76px;--shell:1440px;--gutter:clamp(20px,4vw,64px);--ease:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.16,.84,.44,1);--accent:#DCC66F;--accent-soft:#EFE1AE;--kr:Pretendard,"Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif;--en:Jost,Poppins,Arial,sans-serif;--mj:"Nanum Myeongjo","Noto Serif KR",serif;--sc:Parisienne,"Apple Chancery",cursive} #content *,#content *:before,#content *:after{box-sizing:border-box} body.nav-open{overflow:hidden} #content{color:var(--ink);background:#fff;font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif;font-size:17px;line-height:1.75;letter-spacing:-.02em;word-break:keep-all;-webkit-font-smoothing:antialiased} #content h1,#content h2,#content h3,#content h4,#content h5,#content h6{clear:none;margin:0;font-size:inherit;font-weight:750} #content p,#content figure,#content dl,#content dd,#content dt{margin:0} #content ul,#content ol{margin:0;padding:0;list-style:none} #content img{display:block;max-width:100%;vertical-align:top} #content [hidden]{display:none !important} #content :where(a,a:link,a:visited,a:focus){color:inherit;text-decoration:none} #content em{font-style:normal} #content small{font-size:inherit} #content strong,#content b{font-weight:750} #content button{padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none} #content input,#content select,#content textarea{padding:0;border:0;border-radius:0;font:inherit;line-height:inherit;vertical-align:baseline} #content details,#content summary{display:block} #content summary{list-style:none} #content .sound_only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} #content .shell{width:min(calc(100% - var(--gutter)*2),var(--shell));margin-inline:auto} /* 09-25 대표님 결정 B — 서브 콘텐츠 폭을 하나로(.shell 1440). .narrow 는 이름만 남고 .shell 과 같은 폭이다 */ #content .narrow{width:min(calc(100% - var(--gutter)*2),var(--shell));margin-inline:auto} #maincontent .section{padding:clamp(88px,10vw,168px) 0} #maincontent .section--soft{background:var(--paper)} #maincontent:not(.hm) section[id]{scroll-margin-top:calc(var(--head-min) + 24px)} #maincontent section[tabindex="-1"]:focus{outline:none} #maincontent .section--deep{color:#fff;background:var(--deep)} #maincontent .eyebrow{display:block;padding:12px 0;border-top:1px solid var(--accent);border-bottom:1px solid var(--line);color:var(--accent);font-size:.74rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase} #maincontent .eyebrow:before{display:none} #maincontent .section--deep .eyebrow{border-bottom-color:rgba(255,255,255,.18)} #maincontent .section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px;margin-bottom:56px} #maincontent .section-head h2{margin-top:24px;font-size:clamp(2.1rem,3.8vw,4rem);line-height:1.08;letter-spacing:-.05em} #maincontent .section-head p{max-width:460px;color:var(--muted);font-size:clamp(.98rem,1.15vw,1.1rem);line-height:1.85} #maincontent .section--deep .section-head p{color:#ffffffad} #maincontent .text-link{display:inline-flex;align-items:center;gap:16px;padding-bottom:8px;border-bottom:1px solid;font-weight:750} #maincontent .text-link:after{content:"↗";font-size:1.2em} #maincontent .btn{display:inline-flex;min-height:58px;padding:0 32px;align-items:center;justify-content:center;gap:12px;border:1px solid var(--deep);border-radius:4px;background:var(--deep);color:#fff;font-weight:750;letter-spacing:-.01em;transition:.25s} #maincontent .btn:hover{transform:none;background:var(--accent);border-color:var(--accent);color:var(--deep2)} #maincontent .btn--light{color:var(--deep);border-color:#fff;background:#fff} #maincontent .btn--ghost{color:#fff;border-color:#ffffff8c;background:transparent} #maincontent .btn--ghost:hover{background:#ffffff1f;border-color:#fff} #maincontent .hero{position:relative;height:max(740px,100svh);min-height:740px;overflow:hidden;color:#fff;background:var(--deep2);touch-action:pan-y} #maincontent .hero-slides,#maincontent .hero-slide{position:absolute;inset:0} #maincontent .hero-slide{visibility:hidden;opacity:0;transform:scale(1.03);transition:opacity .9s,transform 1.6s,visibility .9s} #maincontent .hero-slide.is-active{visibility:visible;opacity:1;transform:scale(1)} #maincontent .hero-slide picture,#maincontent .hero-slide img{width:100%;height:100%} #maincontent .hero-slide img{object-fit:cover} #maincontent .hero-slide:after{position:absolute;inset:0;content:"";background:linear-gradient(0deg,rgba(9,20,16,.88) 0%,rgba(9,20,16,.45) 32%,rgba(9,20,16,.06) 62%,transparent 80%)} #maincontent .hero-copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(140px,17vh,200px);pointer-events:none} #maincontent .hero-copy>*{pointer-events:auto} #maincontent .hero-kicker{display:inline-block;align-self:flex-start;margin-bottom:26px;padding:9px 16px;border:1px solid rgba(255,255,255,.34);color:var(--accent-soft);font-size:.74rem;font-weight:850;letter-spacing:.24em} #maincontent .hero h2{max-width:14em;font-size:clamp(2.6rem,4.2vw,4.7rem);line-height:1.1;letter-spacing:-.055em} #maincontent .hero h2 em{display:block;color:var(--accent);font-style:normal} #maincontent .hero-lead{max-width:44em;margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.26);color:#ffffffc7;font-size:clamp(.98rem,1.15vw,1.12rem);line-height:1.85} #maincontent .hero-actions{display:flex;flex-wrap:wrap;align-self:flex-start;gap:12px;margin-top:36px} #maincontent .hero-controls{position:absolute;z-index:4;left:var(--gutter);right:var(--gutter);bottom:48px;margin:auto;width:min(calc(100% - var(--gutter)*2),var(--shell));display:flex;align-items:center;gap:18px} #maincontent .hero-arrow{width:46px;height:46px;border:1px solid #ffffff59;border-radius:50%;color:#fff;background:#00000014;cursor:pointer} #maincontent .hero-count{display:flex;gap:8px;min-width:58px;font-size:.78rem;letter-spacing:.1em} #maincontent .hero-count b{font-size:1rem} #maincontent .hero-track{width:min(240px,18vw);height:2px;overflow:hidden;background:#ffffff52} #maincontent .hero-track span{display:block;width:0;height:100%;background:#fff} #maincontent .hero-scroll{margin-left:auto;display:flex;align-items:center;gap:12px;color:#ffffffb8;font-size:.72rem;letter-spacing:.16em} #maincontent .hero-scroll:after{width:1px;height:42px;content:"";background:#ffffff73} #maincontent .fact-band{position:relative;z-index:8;margin-top:-1px;color:#fff;background:var(--deep)} #maincontent .fact-grid{display:grid;grid-template-columns:repeat(4,1fr)} #maincontent .fact-grid li{min-height:138px;padding:30px clamp(18px,3vw,44px);border-right:1px solid #ffffff21} #maincontent .fact-grid li:first-child{border-left:1px solid #ffffff21} #maincontent .fact-grid span{display:block;color:#ffffff8c;font-size:.72rem;font-weight:750;letter-spacing:.13em} #maincontent .fact-grid strong{display:block;margin-top:10px;font-size:clamp(1.3rem,2vw,2.1rem);line-height:1.1} #maincontent .signature-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(40px,7vw,120px);align-items:center} #maincontent .signature-visual{position:relative;min-height:620px} #maincontent .signature-visual .image-primary{width:83%;height:540px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)} #maincontent .signature-visual .image-secondary{position:absolute;right:0;bottom:0;width:48%;height:300px;object-fit:cover;border:10px solid #fff;border-radius:22px;box-shadow:var(--shadow)} #maincontent .signature-copy h2{margin:22px 0 28px;font-size:clamp(2.4rem,4vw,4.6rem);line-height:1.1;letter-spacing:-.065em} #maincontent .signature-copy h2 strong{color:var(--blue)} #maincontent .signature-copy>p{color:var(--muted);font-size:1.08rem} #maincontent .signature-data{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:38px 0} #maincontent .signature-data div{padding:20px 0;border-top:1px solid var(--line)} #maincontent .signature-data dt{color:var(--muted);font-size:.75rem;font-weight:700} #maincontent .signature-data dd{margin-top:6px;font-size:1.08rem;font-weight:800} #maincontent .location-teaser{display:grid;grid-template-columns:1.05fr .95fr;min-height:740px} #maincontent .location-copy{padding:clamp(70px,9vw,150px) var(--gutter);color:#fff;background:var(--deep);display:flex;flex-direction:column;justify-content:center} #maincontent .location-copy h2{max-width:650px;margin:18px 0 28px;font-size:clamp(2.5rem,4.5vw,5.2rem);line-height:1.03;letter-spacing:-.065em} #maincontent .location-copy p{max-width:560px;color:#ffffffad;font-size:1.08rem} #maincontent .location-copy .text-link{margin-top:38px;align-self:flex-start} #maincontent .location-map{padding:clamp(40px,6vw,92px);display:grid;place-items:center;overflow:hidden;background:var(--mist)} #maincontent .location-map img{width:100%;max-height:630px;object-fit:contain;filter:drop-shadow(0 30px 45px #3E1E8724)} #maincontent .premium-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} #maincontent .premium-card{position:relative;min-height:300px;padding:34px;overflow:hidden;border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:var(--radius);background:#fff;transition:background .35s,border-color .35s} #maincontent .premium-card:hover{z-index:2;background:var(--mist);border-color:var(--line);border-top-color:var(--deep)} #maincontent .premium-card:after{display:none} #maincontent .premium-no{color:var(--sky);font-size:.76rem;font-weight:850;letter-spacing:.12em} #maincontent .premium-icon{width:62px;height:62px;margin:56px 0 28px;display:grid;place-items:center;color:var(--blue);border-radius:20px;background:var(--mist)} #maincontent .premium-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} #maincontent .premium-card h3{font-size:1.45rem;letter-spacing:-.045em} #maincontent .premium-card p{margin-top:8px;color:var(--muted)} #maincontent .unit-showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} #maincontent .unit-card{overflow:hidden;border-radius:24px;background:#fff;box-shadow:0 12px 45px #1B0F3A14} #maincontent .unit-card img{width:100%;aspect-ratio:1.16;object-fit:contain;padding:20px;background:#f8f9f8;transition:.4s} #maincontent .unit-card:hover img{transform:scale(1.035)} #maincontent .unit-card figcaption{display:flex;justify-content:space-between;align-items:end;padding:24px 26px 28px} #maincontent .unit-card b{font-size:1.55rem} #maincontent .unit-card span{color:var(--muted);font-size:.8rem} #maincontent .cta-panel{position:relative;overflow:hidden;padding:clamp(70px,8vw,126px);border-radius:34px;color:#fff;background:linear-gradient(120deg,var(--deep),var(--blue))} #maincontent .cta-panel:after{position:absolute;right:-12%;top:-80%;width:50%;aspect-ratio:1;content:"";border:1px solid #ffffff33;border-radius:50%;box-shadow:0 0 0 70px #ffffff09,0 0 0 140px #ffffff06} #maincontent .cta-panel h2{max-width:780px;font-size:clamp(2.4rem,4.5vw,5rem);line-height:1.05;letter-spacing:-.065em} #maincontent .cta-panel p{margin:24px 0 36px;color:#ffffffb8} #maincontent .cta-actions{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:12px} #content .sub-hero{position:relative;height:480px;overflow:hidden;display:grid;align-items:end;color:#fff;background:var(--deep)} #content .sub-hero>picture{display:contents} /* 09-27zu picture 로 감쌈 — 그림은 전처럼 히어로 전체를 덮는다 */ #content .sub-hero>picture>img{position:absolute;inset:0;width:100%;height:100%} #content .sub-hero>picture>img{object-fit:cover;object-position:center 44%} #content .sub-hero:after{position:absolute;inset:0;content:"";background:linear-gradient(90deg,#241150e6,#3E1E8778),linear-gradient(0deg,#160B338c,transparent 70%)} #content .sub-hero-inner{position:relative;z-index:2;padding-bottom:66px} #content .breadcrumb{display:flex;gap:10px;align-items:center;margin-bottom:22px;color:#ffffff94;font-size:.75rem} #content .breadcrumb i{width:4px;height:4px;border-radius:50%;background:var(--sky)} #content .sub-hero h1{font-size:clamp(3rem,5.5vw,6.3rem);line-height:.95;letter-spacing:-.065em} #content .sub-hero p{margin-top:15px;color:#ffffffad} #content .breadcrumb a{transition:color .2s} #content .breadcrumb a:hover{color:#fff} #content .breadcrumb [aria-current="page"]{color:#ffffffd9} /* 서브 하위 탭 — 같은 1단의 2단 한 줄 (15단계). 머리 사진 바로 아래 · 고정하지 않는다 */ #content .sub-tabs{border-bottom:1px solid var(--line);background:#fff} #content .sub-tabs ul{display:flex;justify-content:center;width:min(calc(100% - var(--gutter)*2),var(--shell));margin:0 auto;padding:0;list-style:none} #content .sub-tabs a{position:relative;display:block;padding:21px 24px;color:var(--muted);font-size:.95rem;font-weight:600;white-space:nowrap;transition:color .2s} #content .sub-tabs a:hover{color:var(--deep)} #content .sub-tabs a[aria-current="page"]{color:var(--deep);font-weight:800} #content .sub-tabs a[aria-current="page"]:after{content:"";position:absolute;left:24px;right:24px;bottom:-1px;height:2px;background:var(--deep)} #content .sub-tabs a:focus-visible{outline:2px solid var(--deep);outline-offset:-4px} @media(max-width:640px){ #content .sub-tabs ul{justify-content:flex-start;width:100%;padding:0 8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none} #content .sub-tabs ul::-webkit-scrollbar{display:none} #content .sub-tabs a{padding:16px 12px;font-size:.88rem} #content .sub-tabs a[aria-current="page"]:after{left:12px;right:12px} } #maincontent .page-intro{margin-bottom:70px;text-align:center} #maincontent .page-intro h2{margin-top:17px;font-size:clamp(2.5rem,4.5vw,5rem);line-height:1.05;letter-spacing:-.065em} #maincontent .page-intro p{max-width:760px;margin:24px auto 0;color:var(--muted);font-size:1.08rem} #maincontent .overview-visual{overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)} #maincontent .overview-visual img{width:100%} #maincontent .overview-table{margin-top:60px;border-top:2px solid var(--deep)} #maincontent .overview-table dl{display:grid;grid-template-columns:190px minmax(0,1fr);border-bottom:1px solid var(--line)} #maincontent .overview-table dt,#maincontent .overview-table dd{padding:23px 26px} #maincontent .overview-table dt{font-weight:800;background:var(--paper)} #maincontent .overview-table dd{color:#354d59} #maincontent .block-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px} /* 사업개요 요약 카드 (09-27g · 09-27j 배지 72 오른쪽 끝) — 왼쪽 숫자 / 제목 / 설명 · 오른쪽 원형 배지 · 금색 윗선 */ #maincontent .block-summary article{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;align-items:center;padding:26px;border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:20px;background:#fff} #maincontent .block-summary-badge{grid-column:2;grid-row:1 / span 3;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--deep);color:#fff} #maincontent .block-summary-badge svg{width:40px;height:40px} #maincontent .block-summary-num,#maincontent .block-summary strong,#maincontent .block-summary-t{grid-column:1} #maincontent .block-summary-num{margin:0;font-family:var(--en);font-size:2.3rem;font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--deep)} #maincontent .block-summary-num i{margin-left:3px;font-family:var(--kr);font-size:.48em;font-style:normal;font-weight:700;letter-spacing:0} #maincontent .block-summary strong{display:block;margin-top:9px;font-size:.98rem;font-weight:800;color:var(--ink)} #maincontent .block-summary-t{display:block;margin-top:2px;color:var(--muted);font-size:.9rem;line-height:1.55} @media(max-width:900px){#maincontent .block-summary{grid-template-columns:minmax(0,1fr)}} @media(max-width:640px){#maincontent .block-summary-badge{width:64px;height:64px}#maincontent .block-summary-badge svg{width:36px;height:36px}} /* 세 칸이면 641 ~ 900 에서 「지상 / 층수」 처럼 접힌다 */ #maincontent .brand-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:50px} /* 입지환경 상세가 쓴다 */ #maincontent .brand-grid h3{margin:0 0 14px;color:var(--deep);font-size:1.1rem;font-weight:800} #maincontent .brand-grid .overview-table{margin-top:0} #maincontent .brand-grid--one{grid-template-columns:1fr} @media(max-width:900px){#maincontent .brand-grid{grid-template-columns:1fr}} /* 브랜드 (09-27zi) — 다른 현장식: 큰 영문 이름을 화면 폭 전체 투시도 위에 · 스크롤하면 그림 1.2배 → 1배 · 슬로건 · 이름 뜻이 왼쪽에서 가치 3 은 큰 사진 · 글 좌우 교차 · 시공사 숫자는 화면에 들어오면 올라간다 (움직임은 script.js 「브랜드」 · 움직임 줄이기면 없음) */ #maincontent .brand-stage{padding-top:clamp(90px,10vw,150px);background:#fff;overflow:hidden} #maincontent .brand-stage-head{text-align:center} #maincontent .brand-stage-kicker{color:var(--accent);font-family:var(--en);font-size:.8rem;font-weight:700;letter-spacing:.3em} #maincontent .brand-stage-head h2{margin-top:16px} #maincontent .brand-stage-logo{display:block;width:clamp(160px,15vw,230px);height:auto;margin:26px auto 0} #maincontent .brand-stage-visual{position:relative;margin:clamp(44px,5vw,76px) 0 0;overflow:hidden;background:var(--deep2)} /* 09-27zk 높이를 그림 비율대로 — 조감도가 잘리지 않게 */ #maincontent .brand-stage-visual picture{position:relative;display:block;overflow:hidden;aspect-ratio:1920/1474} #maincontent .brand-stage-visual picture img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:60% 45%} #maincontent .brand-stage-visual picture:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(23,12,52,.5) 0%,rgba(23,12,52,0) 34%,rgba(23,12,52,0) 52%,rgba(23,12,52,.78) 100%)} #maincontent .brand-stage-en{position:absolute;top:6%;left:max(var(--gutter),calc((100% - var(--shell)) / 2));z-index:2;margin:0;color:#fff;font-family:var(--en);font-size:clamp(2.4rem,7.4vw,8rem);font-weight:400;line-height:.98;letter-spacing:.03em;text-align:left;white-space:nowrap} /* 왼쪽 하늘 두 줄 — 탑(가로 55 ~ 70%)을 가리지 않는다 */ #maincontent .brand-stage-en-w{display:block} #maincontent .brand-stage-en .ch{display:inline-block} #maincontent .brand-stage-title .w{display:inline-block} #maincontent .brand-stage-copy{position:absolute;left:max(var(--gutter),calc((100% - var(--shell)) / 2));bottom:clamp(40px,8vh,96px);z-index:2;max-width:560px;color:#fff} #maincontent .brand-stage-copy b{display:block;font-family:var(--en);font-size:clamp(1.5rem,2.2vw,2.1rem);font-weight:500;letter-spacing:.02em} #maincontent .brand-stage-copy p{margin-top:14px;font-size:1rem;line-height:1.8;color:#ffffffe0} #maincontent .brand-rows{display:flex;flex-direction:column;gap:clamp(56px,7vw,110px);margin-top:60px} #maincontent .brand-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center} #maincontent .brand-row:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)} #maincontent .brand-row:nth-child(even) .brand-row-media{order:2} #maincontent .brand-row-media{margin:0;overflow:hidden;border-radius:24px;aspect-ratio:16/9;background:#fff;box-shadow:0 20px 60px #1B0F3A12} #maincontent .brand-row-media picture{display:contents} /* 09-27zu 모바일 판 picture */ #maincontent .brand-row-media img{display:block;width:100%;height:100%;object-fit:cover} #maincontent .brand-row-no{display:flex;align-items:center;gap:12px;color:var(--deep);font-family:var(--en);font-size:.8rem;font-weight:700;letter-spacing:.16em} #maincontent .brand-row-no:before{content:"";width:36px;height:1px;background:var(--accent)} #maincontent .brand-row h3{margin-top:18px;color:var(--ink);font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:800;line-height:1.35;letter-spacing:-.04em} #maincontent .brand-row p{margin-top:14px;color:var(--muted);font-size:1.02rem;line-height:1.75} #maincontent .brand-row h3,#maincontent .brand-row p,#maincontent .brand-stage-copy p{text-wrap:balance} /* 끝말 한 단어 줄 막기 */ #maincontent .brand-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:56px 0 0;padding:0;list-style:none;border-top:2px solid var(--accent);border-bottom:1px solid var(--line)} #maincontent .brand-stats li{padding:34px 20px;text-align:center} #maincontent .brand-stats li+li{border-left:1px solid var(--line)} #maincontent .brand-stats b{color:var(--deep);font-family:var(--en);font-size:3rem;font-weight:500;line-height:1;font-variant-numeric:tabular-nums} #maincontent .brand-stats i{margin-left:2px;color:var(--deep);font-size:1.35rem;font-style:normal;font-weight:700} #maincontent .brand-stats span{display:block;margin-top:12px;color:var(--ink);font-size:.95rem;font-weight:700} #maincontent .brand-works-line{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;justify-content:center;margin-top:28px;text-align:center} #maincontent .brand-works-line b{color:var(--deep);font-size:.9rem;font-weight:800} #maincontent .brand-works-line span{color:var(--muted);font-size:.92rem} #maincontent #builder .gallery-note{text-align:center} /* 브랜드 보강 (09-27zj) — 약속 문구 띠 · 연혁 · 수상 타임라인 · 자주 묻는 질문 */ #maincontent .brand-promise{padding:clamp(84px,9vw,140px) 0;background:var(--deep2);color:#fff;text-align:center} #maincontent .brand-promise-en{color:var(--accent);font-family:var(--en);font-size:.8rem;font-weight:700;letter-spacing:.3em} #maincontent .brand-promise blockquote{margin:26px 0 0} #maincontent .brand-promise blockquote p{font-family:var(--mj);font-size:clamp(1.35rem,3.3vw,3.1rem);font-weight:800;line-height:1.45;letter-spacing:-.02em} #maincontent .brand-promise-src{margin-top:24px;color:#ffffff8c;font-size:.88rem} #maincontent .brand-history{position:relative;margin-top:64px} #maincontent .brand-history-line{position:absolute;left:0;right:0;top:8px;height:2px;background:var(--accent);transform-origin:0 50%} #maincontent .brand-history ol{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none} #maincontent .brand-history ol > li{position:relative;padding-top:40px} #maincontent .brand-history ol > li:before{content:"";position:absolute;left:0;top:2px;width:15px;height:15px;border:2px solid var(--accent);border-radius:50%;background:#fff} #maincontent .brand-history b{display:block;color:var(--deep);font-family:var(--en);font-size:1.9rem;font-weight:500;line-height:1.1} #maincontent .brand-history ul{margin:16px 0 0;padding:0;list-style:none} #maincontent .brand-history ul li{padding:10px 0;border-top:1px solid var(--line);color:var(--ink);font-size:.93rem;line-height:1.55;text-wrap:balance} #maincontent .brand-history ul li:first-child{border-top:0;padding-top:0} #maincontent .brand-faq{max-width:880px;margin:56px auto 0;border-top:2px solid var(--deep)} #maincontent .brand-faq details{border-bottom:1px solid var(--line)} #maincontent .brand-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px;color:var(--ink);font-size:1.12rem;font-weight:800;list-style:none;cursor:pointer} #maincontent .brand-faq summary::-webkit-details-marker{display:none} #maincontent .brand-faq summary:before{content:"Q";flex:none;margin-right:-6px;color:var(--accent);font-family:var(--en);font-size:1.3rem;font-weight:700} #maincontent .brand-faq summary span{flex:1;text-wrap:balance} #maincontent .brand-faq summary:after{content:"+";flex:none;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;color:var(--deep);font-family:var(--en);font-size:1.2rem;font-weight:400;line-height:30px;text-align:center;transition:transform .3s,background .3s} #maincontent .brand-faq details[open] summary:after{transform:rotate(45deg);background:var(--mist)} #maincontent .brand-faq summary:focus-visible{outline:2px solid var(--deep);outline-offset:2px} #maincontent .brand-faq details > div{padding:0 48px 26px 34px} #maincontent .brand-faq details p{color:var(--muted);font-size:1rem;line-height:1.8;text-wrap:pretty} #maincontent .brand-faq .nw{white-space:nowrap} /* 「Post-Premium」 하이픈에서 끊기지 않게 */ #maincontent .brand-faq details a{color:var(--deep);font-weight:700;text-decoration:underline;text-underline-offset:3px} @media(max-width:1100px){ #maincontent .brand-history-line{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto;transform-origin:50% 0} #maincontent .brand-history ol{grid-template-columns:minmax(0,1fr);gap:0} #maincontent .brand-history ol > li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;padding:0 0 30px 40px} #maincontent .brand-history ol > li:before{top:6px} #maincontent .brand-history ul{margin-top:4px} } @media(max-width:640px){ #maincontent .brand-history{margin-top:44px} #maincontent .brand-history ol > li{grid-template-columns:minmax(0,1fr);gap:8px;padding-left:34px} #maincontent .brand-history b{font-size:1.6rem} #maincontent .brand-faq{margin-top:40px} #maincontent .brand-faq summary{padding:20px 0;font-size:1.02rem} #maincontent .brand-faq details > div{padding:0 0 22px 22px} } @media(max-width:900px){ #maincontent .brand-stage-visual{background:var(--deep2)} #maincontent .brand-stage-visual picture{aspect-ratio:900/691} #maincontent .brand-stage-visual picture:after{background:linear-gradient(180deg,rgba(23,12,52,.55) 0%,rgba(23,12,52,0) 40%)} #maincontent .brand-stage-en{top:6%;font-size:7.4vw} /* PC 와 같은 비율 — 더 크면 탑을 덮는다 */ #maincontent .brand-stage-copy{position:static;max-width:none;padding:30px var(--gutter) 36px} #maincontent .brand-row,#maincontent .brand-row:nth-child(even){grid-template-columns:minmax(0,1fr);gap:24px} #maincontent .brand-row:nth-child(even) .brand-row-media{order:0} } @media(max-width:640px){ #maincontent .brand-stage-en{font-size:6.8vw} /* 좌우 여백 20px 만큼 줄여 탑 앞에서 멈춘다 */ #maincontent .brand-rows{margin-top:40px} #maincontent .brand-row-media{border-radius:16px} #maincontent .brand-stats{grid-template-columns:minmax(0,1fr)} #maincontent .brand-stats li{padding:24px 12px} #maincontent .brand-stats li+li{border-left:0;border-top:1px solid var(--line)} #maincontent .brand-stats b{font-size:2.5rem} } #maincontent .source-picture{width:100%;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:0 20px 60px #1B0F3A12} #maincontent .source-picture img{width:100%;height:auto} #maincontent .source-picture+.source-picture{margin-top:24px} #maincontent .location-points{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px} #maincontent .location-point{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:30px;border:1px solid var(--line);border-radius:20px} #maincontent .location-point .premium-icon{margin:0} #maincontent .location-point h3{font-size:1.28rem} #maincontent .location-point p{margin-top:8px;color:var(--muted)} #maincontent .premium-detail{display:grid;grid-template-columns:repeat(2,1fr);gap:26px} #maincontent .premium-story{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:#fff;transition:transform .35s,box-shadow .35s,border-color .35s} #maincontent .premium-story:hover{transform:translateY(-8px);border-color:transparent;box-shadow:var(--shadow)} #maincontent .premium-story-kicker{color:var(--muted);font-size:.95rem} #maincontent .premium-story h3{margin-top:5px;font-size:1.55rem;letter-spacing:-.045em} #maincontent .floor-groups{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px} #maincontent .floor-groups button,#maincontent .floor-units button{min-height:48px;padding:0 22px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;font-weight:700} #maincontent .floor-groups button.is-active,#maincontent .floor-units button.is-active{color:#fff;border-color:var(--deep);background:var(--deep)} #maincontent .gallery-viewer{border:1px solid var(--line);border-radius:24px;background:#fff;overflow:hidden} #maincontent .gallery-caption{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;border-bottom:1px solid var(--line)} #maincontent .gallery-caption strong{font-size:1.15rem} #maincontent .gallery-caption span{color:var(--muted);font-size:.8rem} #maincontent .gallery-viewer img{width:100%;height:auto;display:none} #maincontent .gallery-viewer img.is-active{display:block} #maincontent .plan-figure{margin-top:60px} #maincontent .plan-figure img{display:block} #maincontent .unit-grid-wrap{margin-top:60px;overflow-x:auto} #maincontent .unit-grid{width:100%;border-collapse:collapse;table-layout:fixed;background:#fff;border-top:2px solid var(--accent);text-align:center;font-variant-numeric:tabular-nums} #maincontent .unit-grid th,#maincontent .unit-grid td{padding:9px 4px;border:1px solid var(--line);text-align:center;font-size:.92rem;line-height:1.35} #maincontent .unit-grid thead th{padding:12px 4px;background:var(--deep);border-color:var(--deep);color:#fff;font-weight:800} #maincontent .unit-grid thead th:first-child{width:16%} #maincontent .unit-grid small{display:block;margin-top:2px;font-size:.76rem;font-weight:500} #maincontent .unit-grid thead small{color:#ffffffb8} #maincontent .unit-grid tbody th{background:var(--paper);font-weight:800} #maincontent .unit-grid td{color:#354d59} #maincontent .unit-grid .is-ph td:not(:empty){background:#DCC66F2e;color:var(--deep2);font-weight:800} #maincontent .unit-grid .is-band td{background:var(--paper);color:var(--muted);font-size:.84rem} /* 주택형 색 — 교육자료 p.5 호수 배치도와 같다. 머리 · 칩은 진한 색, 호수 칸은 25% 연한 색 */ #maincontent .unit-grid thead th.t84a,#maincontent .type-chip.t84a{background:#5B99CF;border-color:#5B99CF;color:var(--ink)} #maincontent .unit-grid td.t84a{background:#D6E6F3} #maincontent .unit-grid thead th.t59,#maincontent .type-chip.t59{background:#F5AF63;border-color:#F5AF63;color:var(--ink)} #maincontent .unit-grid td.t59{background:#FAEBD8} #maincontent .unit-grid thead th.t84c,#maincontent .type-chip.t84c{background:#8CC781;border-color:#8CC781;color:var(--ink)} #maincontent .unit-grid td.t84c{background:#E2F1DF} #maincontent .unit-grid thead th.t77,#maincontent .type-chip.t77{background:#A78ABD;border-color:#A78ABD;color:var(--ink)} #maincontent .unit-grid td.t77{background:#E9E2EE} #maincontent .unit-grid thead th.t84b,#maincontent .type-chip.t84b{background:#D35E54;border-color:#D35E54;color:var(--ink)} #maincontent .unit-grid td.t84b{background:#F4D7D4} #maincontent .unit-grid thead th.t134,#maincontent .type-chip.t134{background:#416CB4;border-color:#416CB4;color:#fff} #maincontent .unit-grid td.t134{background:#CFDAEC} #maincontent .unit-grid thead th.t136,#maincontent .type-chip.t136{background:#3D5382;border-color:#3D5382;color:#fff} #maincontent .unit-grid td.t136{background:#CFD4E0} #maincontent .unit-grid thead th[class^="t"] small{color:inherit;opacity:.85} #maincontent .unit-grid .is-ph td.t134{background:#CFDAEC} #maincontent .unit-grid .is-ph td.t136{background:#CFD4E0} #maincontent .type-chip{display:inline-block;width:12px;height:12px;margin-right:8px;border-radius:3px;vertical-align:-1px} #maincontent .unit-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start} #maincontent .unit-top .unit-map{margin:0} #maincontent .unit-top h3{margin:0 0 14px;color:var(--deep);font-size:1.1rem;font-weight:800} #maincontent .unit-top .overview-table{margin-top:0} @media(max-width:900px){#maincontent .unit-top{grid-template-columns:1fr}} /* 층별 구성 — 단면 도식(왼쪽) + 표(오른쪽) · 09-26 */ #maincontent .floor-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:stretch;margin-top:60px} #maincontent .floor-grid .overview-table{margin-top:0} /* 09-27ze 좌우 높이 맞춤 — 짧은 쪽이 늘어난다 (표는 줄이 · 단면은 칸이 비율대로) */ #maincontent .floor-grid .overview-table{display:flex;flex-direction:column} #maincontent .floor-grid .overview-table dl{flex:1 1 auto;align-items:center} #maincontent .floor-stack li{flex:1 1 auto} #maincontent .floor-stack{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none} #maincontent .floor-stack li{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:12px;min-height:52px;padding:10px 18px;border-radius:6px;background:#E4DEF3;color:var(--ink);font-size:.92rem;line-height:1.45;text-align:left} #maincontent .floor-stack b{font-family:var(--en);font-size:.95rem;font-weight:700;letter-spacing:.02em} #maincontent .floor-stack .is-tall{min-height:132px} #maincontent .floor-stack .is-mid{min-height:88px} #maincontent .floor-stack .is-ph{background:var(--deep);color:#fff} #maincontent .floor-stack .is-ph b{color:var(--accent)} #maincontent .floor-stack .is-refuge{background:var(--paper);border:1px dashed var(--gray);color:var(--muted)} #maincontent .floor-stack .is-comm{background:#E2F1DF} #maincontent .floor-stack .is-retail{background:var(--mist);color:#4F4A63} #maincontent .floor-stack .is-base{background:var(--deep2);color:#ffffffd9} @media(max-width:900px){#maincontent .floor-grid{grid-template-columns:1fr;gap:28px}} @media(max-width:640px){#maincontent .floor-stack li{grid-template-columns:84px minmax(0,1fr);padding:10px 14px;font-size:.86rem}} #maincontent .gallery-note{margin-top:18px;color:var(--muted);font-size:.84rem} #maincontent .gallery-note a{color:var(--deep);text-decoration:underline;text-underline-offset:3px} /* 오시는 길 (09-27z) — 약도 왼쪽 · 홍보관 정보 상자 오른쪽(약도 높이) · 1279 이하 위아래로 가운데 820 */ #maincontent .contact-top{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:40px;align-items:stretch;margin-top:60px} #maincontent .contact-figure{margin:0;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 20px 60px #1B0F3A12} #maincontent .contact-figure img{display:block;width:100%;height:auto} #maincontent .contact-info{display:flex;flex-direction:column;padding:32px 34px;border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:22px;background:#fff;box-shadow:0 20px 60px #1B0F3A12} #maincontent .contact-info-list{margin:0} #maincontent .contact-info-list div{padding:20px 0;border-bottom:1px solid var(--line)} #maincontent .contact-info-list div:first-child{padding-top:0} #maincontent .contact-info-list dt{color:var(--muted);font-size:.82rem;font-weight:800;letter-spacing:.06em} #maincontent .contact-info-list dd{margin:6px 0 0;color:var(--ink);font-size:1.05rem;font-weight:700;line-height:1.55} #maincontent .contact-tel{font-family:var(--en);font-size:2.3rem;font-weight:700;line-height:1.2;color:var(--deep);text-decoration:none} #maincontent .contact-tel:hover{color:var(--blue)} #maincontent .overview-table dd a{color:var(--deep);font-weight:700;text-decoration:underline;text-underline-offset:3px} #maincontent .map-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:auto;padding-top:24px} #maincontent .map-actions .btn{min-height:52px;padding:0 12px;background:transparent;color:var(--deep)} /* 꽉 찬 보라 → 외곽선 · 올리면 기본 금색 */ #maincontent .contact-visit{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:15px 20px;border-radius:4px;background:var(--mist);color:var(--deep);font-weight:750;text-decoration:none;transition:background .25s} #maincontent .contact-visit:after{content:"→";font-weight:400} #maincontent .contact-visit:hover{background:var(--accent-soft)} @media(max-width:1279px){ #maincontent .contact-top{grid-template-columns:minmax(0,1fr);gap:24px;max-width:820px;margin-inline:auto} } @media(max-width:640px){ #maincontent .contact-top{margin-top:40px} #maincontent .contact-info{padding:24px 22px} #maincontent .contact-tel{font-size:2rem} } /* 교통 안내 (09-27z) — 표 → 아이콘 카드 · 세 칸 / 1100 이하 두 칸 / 640 이하 한 칸 */ #maincontent .access-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:60px 0 0;padding:0;list-style:none} #maincontent .access-list li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:start;padding:26px;border:1px solid var(--line);border-radius:20px;background:#fff} #maincontent .access-badge{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--deep);color:#fff} #maincontent .access-badge svg{width:30px;height:30px} #maincontent .access-list b{display:block;margin-top:3px;color:var(--deep);font-size:1.08rem;font-weight:800} #maincontent .access-list span:not(.access-badge){display:block;margin-top:6px;color:var(--ink);font-size:.95rem;line-height:1.65} @media(max-width:1100px){#maincontent .access-list{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){ #maincontent .access-list{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:40px} #maincontent .access-list li{grid-template-columns:46px minmax(0,1fr);gap:14px;padding:20px} #maincontent .access-badge{width:46px;height:46px} #maincontent .access-badge svg{width:27px;height:27px} } #maincontent .floor-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:34px;align-items:start} #maincontent .floor-sidebar{position:sticky;top:155px;padding:26px;border-radius:22px;color:#fff;background:var(--deep)} #maincontent .floor-sidebar h3{margin-bottom:20px;font-size:1.25rem} #maincontent .floor-panel{display:none} #maincontent .floor-panel.is-active{display:block} #maincontent .floor-units{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} #maincontent .floor-units button{min-height:42px;padding:0 8px;color:#ffffffb3;border-color:#ffffff33;background:transparent;font-size:.78rem} #maincontent .floor-units button.is-active{color:var(--deep);border-color:#fff;background:#fff} #maincontent .form-layout{display:grid;grid-template-columns:.78fr 1.22fr;overflow:hidden;border-radius:30px;background:#fff;box-shadow:var(--shadow)} #maincontent .form-aside{position:relative;overflow:hidden;padding:54px;display:flex;flex-direction:column;justify-content:end;color:#fff;background:var(--deep)} #maincontent .form-aside>picture{display:contents} /* 09-27zu */ #maincontent .form-aside img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.66} #maincontent .form-aside:after{position:absolute;inset:0;content:"";background:linear-gradient(0deg,#241150f5,#1B0F3A0d)} #maincontent .form-aside>div{position:relative;z-index:2} #maincontent .form-aside h2{font-size:clamp(1.5rem,2.1vw,1.9rem);line-height:1.2;letter-spacing:-.04em} #maincontent .form-aside p{margin-top:18px;color:#ffffffb8} #maincontent .form-aside a{display:block;margin-top:26px;font-size:1.8rem;font-weight:850} #maincontent .form-aside a b{display:block;margin-bottom:4px;color:#ffffffb8;font-size:.85rem;font-weight:700;letter-spacing:.02em} #maincontent .form-aside .form-aside-link{display:inline-block;margin-top:14px;color:var(--accent);font-size:.94rem;font-weight:700;text-decoration:underline;text-underline-offset:3px} #maincontent .form-aside .form-aside-link:after{content:"\2192";display:inline-block;margin-left:5px} #maincontent .form-aside .form-aside-link:hover{color:#fff} #maincontent .lead-form{padding:clamp(36px,5vw,72px)} #maincontent .lead-form h2{margin-bottom:10px;font-size:1.5rem;letter-spacing:-.04em} #maincontent .lead-form>p{margin-bottom:36px;color:var(--muted)} #maincontent .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 18px} #maincontent .field{display:flex;flex-direction:column;gap:9px} #maincontent .field--full{grid-column:1/-1} #maincontent .field-hint{color:var(--muted);font-size:.8rem;line-height:1.55} #maincontent .field-opt{color:var(--muted);font-weight:500} /* 「(선택)」 09-27zl */ #maincontent .field label{font-size:.82rem;font-weight:800} #maincontent .field input,#maincontent .field select{width:100%;min-height:54px;padding:0 16px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:#fff;outline:none} #maincontent .field input:focus,#maincontent .field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #6A4FB617} #maincontent .form-agree{margin:26px 0;padding:20px;border-radius:12px;background:var(--paper)} #maincontent .form-agree label{display:flex;gap:10px;align-items:flex-start;font-size:.84rem} #maincontent .form-agree input{width:18px;height:18px;margin-top:3px;accent-color:var(--blue)} #maincontent .form-agree details{margin-top:12px;color:var(--muted);font-size:.78rem} #maincontent .form-agree summary{cursor:pointer} #maincontent .form-agree details div{max-height:120px;margin-top:10px;overflow-y:auto} #maincontent .lead-form .btn{width:100%;min-height:60px;border-radius:12px;cursor:pointer} #content .site-footer{background:#000;color:#ffffff80; font-size:.82rem;line-height:1.55;letter-spacing:-.01em} #content .footer-inner{padding:44px var(--gutter) 0} #content .footer-main{display:flex;align-items:flex-start;gap:0} #content .footer-left{flex:0 0 70.3%;display:flex;min-width:0} #content .footer-logo{flex:0 0 auto;width:191px;height:44px;object-fit:contain; object-position:left center;margin:7px 0 0;opacity:.85} #content .footer-body{flex:1 1 auto;margin-left:51px;min-width:0} #content .footer-right{flex:1 1 auto;display:flex;align-items:flex-start; justify-content:space-between;gap:20px;min-width:0} #content .footer-facts{margin:0;display:flex;flex-direction:column;gap:7px;line-height:1.3} #content .footer-facts>div{display:flex;gap:7px;min-width:0} #content .footer-facts dt{margin:0;flex:0 0 auto;color:#ffffff7a} #content .footer-facts dt:after{content:"."} #content .footer-facts dd{margin:0;min-width:0;color:#ffffff96} #content .footer-addr{margin:7px 0 0;line-height:1.3;color:#ffffff96} #content .footer-notes{margin-top:37px;color:#ffffff7a;line-height:1.7} #content .footer-notes p{margin:0 0 5px} #content .footer-gotop{flex:0 0 auto;display:grid;place-items:center; width:37px;height:41px;margin-top:10px;border:1px solid #ffffff2b; color:#ffffff96;font-family:var(--en);font-size:.6rem;font-weight:700;letter-spacing:.1em; transition:border-color .22s,color .22s} #content .footer-gotop:hover{border-color:#fff;color:#fff} #content .footer-foot{margin-top:42px;padding-bottom:clamp(30px,3.6vh,46px); display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 24px} #content .footer-policy{margin:0;display:flex;flex-wrap:wrap;gap:8px 18px} #content .footer-policy a{color:#ffffff7a;letter-spacing:.02em} #content .footer-policy a:hover{color:#fff} #content .copyright{margin:0;color:#fff;letter-spacing:.04em} @media(max-width:900px){ #content .footer-foot{justify-content:flex-start} #content .footer-main{flex-direction:column;gap:clamp(26px,4vw,38px)} #content .footer-left{flex:1 1 auto} #content .footer-right{flex:1 1 auto;width:100%} } @media(max-width:900px){ #content .footer-foot{padding-bottom:84px} } @media(max-width:560px){ #content .footer-left{flex-direction:column} #content .footer-logo{margin:0 0 20px} #content .footer-body{margin-left:0} #content .footer-right{flex-wrap:wrap;gap:18px} #content .footer-notes{margin-top:26px} } #content .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s cubic-bezier(.2,.75,.25,1)} #content .reveal.is-visible{opacity:1;transform:none} @media(max-width:1180px){ #maincontent .premium-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:900px){ #maincontent .hero{min-height:700px;height:90svh} #maincontent .hero h2{font-size:clamp(2.8rem,7.5vw,4.8rem)} #maincontent .fact-grid{grid-template-columns:repeat(2,1fr)} #maincontent .fact-grid li:nth-child(2){border-right:0} #maincontent .fact-grid li:nth-child(n+3){border-top:1px solid #ffffff21} #maincontent .signature-grid,#maincontent .location-teaser,#maincontent .form-layout{grid-template-columns:1fr} #maincontent .form-aside{order:2} #maincontent .signature-visual{min-height:540px} #maincontent .signature-visual .image-primary{height:460px} #maincontent .location-map{min-height:600px} #maincontent .unit-showcase{grid-template-columns:1fr 1fr} #maincontent .section-head{grid-template-columns:1fr} #maincontent .premium-detail{grid-template-columns:1fr} #maincontent .floor-layout{grid-template-columns:1fr} #maincontent .floor-sidebar{position:static} #maincontent .floor-units{grid-template-columns:repeat(4,1fr)} } @media(max-width:640px){ #maincontent .hero{height:820px;min-height:760px} #maincontent .hero-slide img{object-position:60% center} #maincontent .hero-slide:after{background:linear-gradient(90deg,#160B33d1,#160B335c),linear-gradient(0deg,#160B33ad,transparent 68%)} #maincontent .hero-copy{justify-content:flex-end;padding-bottom:170px} #maincontent .hero h2{font-size:clamp(2.3rem,9vw,3.8rem)} #maincontent .hero-lead{margin-top:22px;font-size:1rem} #maincontent .hero-actions{gap:10px;margin-top:24px} #maincontent .hero-actions .btn{flex:1 1 auto;min-height:50px;padding:0 18px} #maincontent .hero-controls{bottom:92px} #maincontent .hero-track{width:100px} #maincontent .hero-scroll{display:none} #maincontent .fact-grid li{min-height:110px;padding:22px 18px} #maincontent .fact-grid strong{font-size:1.25rem} #maincontent .section{padding:82px 0} #maincontent .section-head{margin-bottom:38px;gap:16px} #maincontent .section-head h2{font-size:2.65rem} #maincontent .signature-visual{min-height:390px} #maincontent .signature-visual .image-primary{width:92%;height:340px} #maincontent .signature-visual .image-secondary{height:180px;border-width:6px} #maincontent .signature-copy h2{font-size:2.65rem} #maincontent .signature-data{grid-template-columns:1fr;gap:0} #maincontent .location-teaser{min-height:auto} #maincontent .location-copy{padding-block:80px} #maincontent .location-map{min-height:0;padding:38px 20px} #maincontent .premium-grid,#maincontent .premium-detail,#maincontent .unit-showcase,#maincontent .location-points,#maincontent .block-summary{grid-template-columns:1fr} #maincontent .premium-card{min-height:310px} #maincontent .premium-icon{margin-top:40px} #maincontent .cta-panel{padding:54px 26px;border-radius:24px} #content .sub-hero{height:410px} #content .sub-hero-inner{padding-bottom:48px} #content .sub-hero h1{font-size:3.3rem} #maincontent .page-intro{margin-bottom:44px;text-align:left} #maincontent .page-intro h2{font-size:2.65rem} #maincontent .page-intro p{font-size:1rem} #maincontent .overview-table dl{grid-template-columns:110px minmax(0,1fr)} #maincontent .overview-table dt,#maincontent .overview-table dd{padding:18px 14px} #maincontent .source-picture{border-radius:16px} #maincontent .location-point{grid-template-columns:52px 1fr;padding:22px 18px;gap:16px} #maincontent .location-point .premium-icon{width:52px;height:52px;border-radius:16px} #maincontent .floor-groups{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px} #maincontent .floor-groups button{flex:0 0 auto} #maincontent .gallery-caption{padding:18px} #maincontent .floor-sidebar{padding:20px} #maincontent .floor-units{grid-template-columns:repeat(3,1fr)} #maincontent .form-aside{padding:34px 26px} #maincontent .lead-form{padding:36px 22px} #maincontent .form-grid{grid-template-columns:1fr} #maincontent .field--full{grid-column:auto} } @media(prefers-reduced-motion:reduce){ #content .reveal{opacity:1;transform:none} } #maincontent .hero-slide>img{position:absolute;inset:0} @media(max-width:640px){ #maincontent .hero h2{font-size:clamp(2.2rem,8.8vw,3.6rem)} } #maincontent .complex-preview-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(360px,.55fr);gap:clamp(24px,4vw,64px);align-items:stretch} #maincontent .complex-preview-media{position:relative;min-height:680px;overflow:hidden;border-radius:30px;background:#fff;box-shadow:var(--shadow)} #maincontent .complex-preview-media img{width:100%;height:100%;min-height:680px;object-fit:contain;padding:72px 28px 28px;display:none} #maincontent .complex-preview-media img.is-active{display:block} #maincontent .complex-preview-caption{position:absolute;z-index:2;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);backdrop-filter:blur(12px)} #maincontent .complex-preview-caption strong{font-size:1.15rem} #maincontent .complex-preview-caption span{color:var(--muted);font-size:.86rem} #maincontent .complex-preview-panel{padding:clamp(30px,4vw,54px);border-radius:30px;color:#fff;background:var(--deep);display:flex;flex-direction:column} #maincontent .complex-preview-tabs{display:grid;gap:8px} #maincontent .complex-preview-tabs button{display:flex;justify-content:space-between;align-items:center;min-height:60px;padding:0 18px;border:1px solid rgba(255,255,255,.18);border-radius:14px;color:rgba(255,255,255,.65);background:transparent;cursor:pointer;font-weight:750;text-align:left} #maincontent .complex-preview-tabs button:after{content:"↗";opacity:.5} #maincontent .complex-preview-tabs button.is-active{color:var(--deep);border-color:#fff;background:#fff} #maincontent .complex-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:34px 0} #maincontent .complex-blocks article{padding:20px 14px;border-top:1px solid rgba(255,255,255,.22)} #maincontent .complex-blocks span,#maincontent .complex-blocks small{display:block;color:rgba(255,255,255,.58)} #maincontent .complex-blocks span{font-size:.75rem;font-weight:800;letter-spacing:.12em} #maincontent .complex-blocks strong{display:block;margin:8px 0 4px;font-size:1.25rem} #maincontent .complex-blocks small{font-size:.78rem} #maincontent .complex-preview-panel .text-link{margin-top:auto;align-self:flex-start} @media(max-width:900px){ #maincontent .complex-preview-grid{grid-template-columns:1fr} #maincontent .complex-preview-media,#maincontent .complex-preview-media img{min-height:560px} #maincontent .complex-preview-panel{min-height:430px} } @media(max-width:640px){ #maincontent .complex-preview-section .section-head p{display:block} #maincontent .complex-preview-media,#maincontent .complex-preview-media img{min-height:420px} #maincontent .complex-preview-media{border-radius:20px} #maincontent .complex-preview-media img{padding:66px 12px 16px} #maincontent .complex-preview-caption{padding:19px 18px} #maincontent .complex-preview-panel{min-height:0;padding:24px 20px;border-radius:20px} #maincontent .complex-preview-tabs{grid-template-columns:repeat(3,1fr)} #maincontent .complex-preview-tabs button{min-height:50px;padding:0 8px;justify-content:center;font-size:.8rem} #maincontent .complex-preview-tabs button:after{display:none} #maincontent .complex-blocks{grid-template-columns:1fr;margin:24px 0} #maincontent .complex-blocks article{display:grid;grid-template-columns:55px 1fr auto;align-items:center;padding:14px 0} #maincontent .complex-blocks strong{margin:0;font-size:1.1rem} } #maincontent .complex-preview-media{height:clamp(680px,56vw,820px);min-height:0} #maincontent .complex-preview-media img{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:74px 0 0;object-fit:cover;object-position:top center} @media(max-width:900px){ #maincontent .complex-preview-media{height:720px;min-height:0} #maincontent .complex-preview-media img{min-height:0} } @media(max-width:640px){ #maincontent .complex-preview-media{height:560px;min-height:0} #maincontent .complex-preview-media img{min-height:0;padding:64px 0 0} } #maincontent .complex-preview-grid{grid-template-columns:minmax(0,1.22fr) minmax(400px,.78fr)} #maincontent .complex-preview-panel{padding:clamp(34px,4vw,58px)} #maincontent .complex-preview-tabs button{min-height:64px;padding-inline:20px} #maincontent .complex-blocks{grid-template-columns:1fr;gap:0;margin:clamp(28px,4vw,48px) 0} #maincontent .complex-blocks article{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:16px;padding:20px 0;border-top:1px solid rgba(255,255,255,.22)} #maincontent .complex-blocks article:last-child{border-bottom:1px solid rgba(255,255,255,.22)} #maincontent .complex-blocks strong{margin:0;font-size:1.45rem} #maincontent .complex-blocks small{font-size:.9rem} @media(max-width:900px){ #maincontent .complex-preview-grid{grid-template-columns:1fr} #maincontent .complex-preview-panel{min-height:0} } @media(max-width:640px){ #maincontent .complex-preview-panel{padding:26px 22px} #maincontent .complex-preview-tabs button{min-height:52px;padding-inline:8px} #maincontent .complex-blocks article{grid-template-columns:54px minmax(0,1fr) auto;gap:10px;padding:16px 0} #maincontent .complex-blocks strong{font-size:1.15rem} #maincontent .complex-blocks small{font-size:.8rem} } #maincontent .premium-page-section{position:relative;overflow:hidden;background:linear-gradient(145deg,#edf3f4 0%,#f9f9f7 48%,#eef5f6 100%)} #maincontent .premium-page-section:before{position:absolute;right:-12vw;top:5%;width:42vw;aspect-ratio:1;content:"";border:1px solid rgba(0,133,173,.13);border-radius:50%;box-shadow:0 0 0 80px rgba(0,133,173,.035),0 0 0 160px rgba(0,133,173,.022)} #maincontent .premium-page-section .shell{position:relative;z-index:1} #maincontent .premium-story-copy{flex:1;padding:26px 30px 32px;display:flex;flex-direction:column} #maincontent .premium-story-meta{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px} @media(max-width:640px){ #maincontent .premium-page-section:before{display:none} #maincontent .premium-story-copy{padding:22px 22px 26px} #maincontent .premium-story-meta{margin-bottom:16px} #maincontent .premium-story h3{font-size:1.4rem} } @media(max-width:900px){ } @media(max-width:640px){ } #maincontent .complex-gallery-controls{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:32px;margin-bottom:28px;padding:24px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.92);box-shadow:0 16px 50px rgba(0,47,71,.07)} #maincontent .complex-category-tabs{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr));gap:8px} #maincontent .complex-category-tabs button,#maincontent .complex-type-tabs button{min-height:54px;padding:0 20px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;font-weight:800;transition:.25s} #maincontent .complex-category-tabs button:hover,#maincontent .complex-type-tabs button:hover{border-color:rgba(0,133,173,.45);transform:translateY(-2px)} #maincontent .complex-category-tabs button.is-active{color:#fff;border-color:var(--deep);background:var(--deep);box-shadow:0 10px 24px rgba(0,47,71,.18)} #maincontent .complex-type-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} #maincontent .complex-type-tabs button.is-active{color:#fff;border-color:var(--blue);background:var(--blue);box-shadow:0 10px 24px rgba(0,133,173,.2)} #maincontent .complex-tab-system .gallery-viewer{border-radius:28px;box-shadow:0 24px 70px rgba(0,47,71,.1)} #maincontent .complex-tab-system .gallery-viewer img{transition:opacity .18s ease} #maincontent .complex-tab-system .gallery-viewer.is-switching img{opacity:.28} @media(max-width:900px){ #maincontent .complex-gallery-controls{grid-template-columns:1fr;align-items:stretch;gap:22px} } @media(max-width:640px){ #maincontent .complex-gallery-controls{margin-bottom:18px;padding:16px;border-radius:18px} #maincontent .complex-category-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} #maincontent .complex-category-tabs button,#maincontent .complex-type-tabs button{min-height:50px;padding:0 8px;border-radius:11px;font-size:.84rem} #maincontent .complex-tab-system .gallery-viewer{border-radius:18px} } #maincontent .visit-schedule{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} #maincontent .visit-schedule > input{grid-column:span 2} #maincontent .visit-schedule > select{justify-content:flex-end} @media(max-width:640px){ #maincontent .visit-schedule{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} #maincontent .visit-schedule > input{grid-column:1/-1} } #maincontent .hero h2,#maincontent .section-head h2,#maincontent .signature-copy h2,#maincontent .location-copy h2,#maincontent .cta-panel h2,#content .sub-hero h1,#maincontent .page-intro h2{letter-spacing:-.035em} #maincontent .hero h2{line-height:1.04} #maincontent .section-head h2{line-height:1.06} #maincontent .signature-copy h2{line-height:1.12} #maincontent .location-copy h2{line-height:1.08} #maincontent .cta-panel h2{line-height:1.12} #content .sub-hero h1{line-height:1.02} #maincontent .page-intro h2{font-size:clamp(2.25rem,3.7vw,3.5rem);line-height:1.1} #maincontent .signature-copy h2 strong{font-weight:800} #maincontent .premium-card h3{letter-spacing:-.025em} @media(max-width:640px){ #maincontent .section-head h2,#maincontent .signature-copy h2,#maincontent .location-copy h2{font-size:2.35rem} #maincontent .page-intro h2{font-size:2.1rem} #content .sub-hero h1{font-size:2.85rem} #maincontent .cta-panel h2{font-size:2.1rem} #maincontent .floor-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;padding-bottom:0} #maincontent .floor-groups button{width:100%;padding-inline:12px} } #maincontent .more-link{margin-top:44px} #maincontent .floor-layout .gallery-viewer{padding:0} #content .site-header{position:fixed;inset:0 0 auto;z-index:1002;height:var(--head);color:#fff;transition:height .35s,background .35s,color .35s,box-shadow .35s} #content .site-header:not(.is-scrolled):before{content:"";position:absolute;inset:0 0 -62px;z-index:-1; pointer-events:none;background:linear-gradient(180deg,#160B3366 0%,#160B3329 58%,#160B3300 100%)} #content .site-header.is-scrolled{height:var(--head-min);color:var(--ink);background:rgba(255,255,255,.96);box-shadow:0 12px 34px rgba(4,35,50,.08)} #content .header-inner{width:100%;max-width:none;margin:0; padding:0 5.35% 0 6.53%; height:100%;display:flex;align-items:center;gap:0} #content .header-inner>.brand-title, #content .header-inner>.site-brand{flex:1 1 0;min-width:0;display:flex;margin:0; font-size:inherit;font-weight:inherit} #content .brand-title>.site-brand{flex:0 1 auto;min-width:0;display:flex} #content .site-brand img{width:auto;max-width:100%;max-height:71px} #content .site-header.is-scrolled .site-brand img{max-height:50px} #content .site-brand .brand-basic{display:none} #content .site-header.is-scrolled .site-brand .brand-white{display:none} #content .site-header.is-scrolled .site-brand .brand-basic{display:block} #content .main-nav{flex:none;display:flex;align-items:center;margin:0 clamp(16px,2vw,30px)} #content .gnb{display:flex;align-items:center;gap:clamp(16px,3.1vw,44px);margin:0;padding:0;list-style:none} #content .gnb>li{position:relative} #content .gnb-top{position:relative;display:block;padding:24px 0;font-size:1rem;font-weight:650;letter-spacing:-.02em} #content .gnb-top:after{content:"";position:absolute;left:0;right:0;bottom:18px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)} #content .gnb>li:hover>.gnb-top:after,#content .gnb>li:focus-within>.gnb-top:after{transform:scaleX(1);transform-origin:left} #content .gnb-top.is-current:after{transform:scaleX(1)} #content .gnb-sub{display:none} #content .header-actions{flex:1 1 0;min-width:0;display:flex;align-items:center; justify-content:flex-end;gap:14px} #content .header-phone{display:inline-flex;align-items:center;gap:9px;font-size:1.05rem;font-weight:850;white-space:nowrap} #content .header-phone svg{width:18px;flex:none} #content .header-cta{display:inline-flex;align-items:center;justify-content:center; min-width:133px;height:42px;padding:0 18px;border-radius:999px; border:1px solid var(--accent);background:var(--accent);color:var(--deep2); font-size:.92rem;font-weight:800;letter-spacing:-.02em;box-shadow:0 6px 18px rgba(22,11,51,.18); transition:background .24s,color .24s,border-color .24s,box-shadow .24s} #content .header-cta:hover{background:var(--accent-soft);border-color:var(--accent-soft)} #content .header-cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px} #content .site-header.is-scrolled .header-cta{background:var(--deep);border-color:var(--deep);color:#fff;box-shadow:none} #content .site-header.is-scrolled .header-cta:hover{background:var(--accent);border-color:var(--accent);color:var(--deep2)} #content .site-header.is-scrolled .header-cta:focus-visible{outline-color:var(--deep)} body.nav-open #content .site-header .header-cta{background:var(--accent);border-color:var(--accent);color:var(--deep2);outline-color:var(--accent)} #content .nav-toggle{display:none;align-items:center;gap:9px; position:relative;z-index:1002;height:40px;padding:0;background:none;border:0; color:inherit;cursor:pointer} #content .nav-toggle-t{font-family:var(--en);font-size:.76rem;font-weight:500;letter-spacing:.06em} #content .nav-toggle-bars{display:flex;flex-direction:column;justify-content:center;gap:6px; width:23px;height:40px} #content .nav-toggle-bars i{display:block;width:23px;height:2px;background:currentColor; transition:transform .25s var(--ease),opacity .2s} #content .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1){transform:translateY(8px) rotate(45deg)} #content .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2){opacity:0} #content .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3){transform:translateY(-8px) rotate(-45deg)} #content .site-map{position:fixed;inset:0;z-index:1001; display:flex;flex-direction:column;align-items:center; padding:calc(var(--head) + 12px) 0 0;overflow-y:auto;overscroll-behavior:contain; background:rgba(0,0,0,.95); /* 09-27zz6 .85 → .95 — 뒤 화면이 비쳐 메뉴 글자가 잘 안 보였다 */ opacity:0;transition:opacity .38s var(--ease)} #content .site-map[hidden]{display:none} #content .site-map.is-open{opacity:1} #content .site-map-nav{margin-top:auto} #content .site-map-nav>ul{width:min(331px,82vw);margin:0;padding:0;list-style:none} #content .site-map-nav>ul>li{padding:9.5px 0} #content .site-map-nav>ul>li>a{display:block;padding:0 0 0 27px;color:#ffffff66; transition:color .24s var(--ease),padding-left .24s var(--ease)} #content .site-map-nav>ul>li>a:hover,#content .site-map-nav>ul>li>a:focus-visible, #content .site-map-nav>ul>li>a[aria-current="page"]{color:#fff;padding-left:38px} #content .site-map-nav>ul>li.is-parent>a{color:#fff} #content .site-map-sub{display:flex;flex-wrap:wrap;gap:4px 16px;margin:9px 0 0;padding:0 0 0 27px;list-style:none} #content .site-map-sub a{display:block;color:#ffffffa6;font-size:.92rem;font-weight:500;line-height:1.55; transition:color .24s var(--ease)} #content .site-map-sub a:hover,#content .site-map-sub a:focus-visible{color:#fff} #content .site-map-sub a:focus-visible{outline:2px solid var(--accent);outline-offset:3px} #content .site-map-sub a[aria-current="page"]{color:var(--accent)} #content .site-map-t{display:block;font-family:var(--mj);font-size:1.88rem;font-weight:700; line-height:1.16;letter-spacing:-.02em} #content .site-map-e{display:block;margin-top:2px;font-family:var(--en); font-size:.76rem;font-weight:500;letter-spacing:.14em;color:var(--accent)} #content .site-map-copy{margin:auto 0 0;padding:28px 20px 45px; text-align:center;font-family:var(--en);font-size:.76rem;font-weight:300; letter-spacing:.04em;color:#ffffff59} body.nav-open #content .site-header, body.nav-open #content .site-header.is-scrolled{color:#fff;background:none;box-shadow:none} @media(min-width:901px){ #content .site-header:not(.is-scrolled) .header-phone{text-shadow:0 2px 10px rgba(0,20,32,.52)} } /* PC 메가 판 — 1401 이상 (14단계). 1단에 올리거나 포커스가 들어오면 2단 전체가 흰 판 위에 한꺼번에 펼쳐진다 li 를 헤더 높이까지 늘려 1단 → 판으로 내려가는 사이에 hover 가 끊기지 않게 한다 판 바탕은 .main-nav:before (기준 = 고정 헤더) — 판 위의 빈 곳도 .main-nav:hover 로 친다 바 색 · 로고는 JS 가 붙이는 .is-mega 가 바꾼다 (⑯ 바까지 흰색 · 색 로고). Esc 로 닫으면 .mega-closed */ @media(min-width:1401px){ #content .main-nav{align-self:stretch} #content .gnb{height:100%} #content .gnb>li{display:flex;align-items:center;height:100%} #content .main-nav:before{content:"";position:absolute;left:0;right:0;top:100%;height:13rem; background:#fff;border-top:1px solid var(--line);box-shadow:0 22px 40px rgba(36,17,80,.12); visibility:hidden;opacity:0;transition:opacity .22s var(--ease),visibility 0s linear .22s} #content .gnb-sub{display:block;position:absolute;left:0;top:100%;z-index:1;min-width:max-content;margin:0;padding:26px 0 0;list-style:none; visibility:hidden;opacity:0;transform:translateY(-6px); transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear .22s} #content .gnb-sub li+li{margin-top:12px} #content .gnb-sub a{display:block;color:var(--muted);font-size:.95rem;font-weight:500;line-height:1.4;white-space:nowrap;transition:color .2s} #content .gnb-sub a:hover,#content .gnb-sub a:focus-visible{color:var(--deep)} #content .gnb-sub a[aria-current="page"]{color:var(--deep);font-weight:800} #content .gnb-sub a:focus-visible{outline:2px solid var(--deep);outline-offset:3px} #content .site-header:not(.mega-closed) .main-nav:hover:before, #content .site-header:not(.mega-closed) .main-nav:focus-within:before, #content .site-header:not(.mega-closed) .main-nav:hover .gnb-sub, #content .site-header:not(.mega-closed) .main-nav:focus-within .gnb-sub{visibility:visible;opacity:1;transform:none;transition-delay:0s} #content .site-header.is-mega{color:var(--ink);background:#fff;box-shadow:none} #content .site-header.is-mega:before{display:none} #content .site-header.is-mega .site-brand .brand-white{display:none} #content .site-header.is-mega .site-brand .brand-basic{display:block} #content .site-header.is-mega .header-phone{text-shadow:none} #content .site-header.is-mega .header-cta{background:var(--deep);border-color:var(--deep);color:#fff;box-shadow:none} #content .site-header.is-mega .header-cta:hover{background:var(--accent);border-color:var(--accent);color:var(--deep2)} #content .site-header.is-mega .header-cta:focus-visible{outline-color:var(--deep)} } #content .skip-link{position:fixed;left:16px;top:-80px;z-index:9999;padding:12px 18px;background:var(--deep);color:#fff} #content .skip-link:focus{top:0} #content .mobile-actions{display:none} #content .mainquickcs_wrap{display:none;position:fixed;left:0;bottom:0;z-index:20;width:100%;background:var(--deep2)} #content .mainquickcs_wrap > .inner{margin:0 auto;padding:16px 0;width:min(var(--shell),calc(100% - var(--gutter)*2))} #content .mainquickcs_wrap .rqfrm_wrap{display:flex;align-items:center;gap:10px;color:#fff;white-space:nowrap} #content .mainquickcs_wrap h3{flex:none;margin-right:10px;font-size:1.05rem;font-weight:750;letter-spacing:-.03em} #content .mainquickcs_wrap .rqfrm_2{flex:1} #content .mainquickcs_wrap .rqfrm_2 .c{display:flex;gap:8px} #content .mainquickcs_wrap .rqfrm_2_2{flex:1.6} #content .mainquickcs_wrap .rqfrm_2_2 .c > span{display:flex;gap:8px;width:50%} #content .mainquickcs_wrap .frm_input, #content .mainquickcs_wrap select{width:100%;height:44px;padding:0 16px;border:0;border-radius:999px;background:#fff;font-size:.9rem;color:var(--ink)} #content .mainquickcs_wrap select{padding-right:34px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23667781' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center/11px;-webkit-appearance:none;appearance:none} #content .mainquickcs_wrap .rqfrm_agree{display:flex;align-items:center;gap:6px;flex:none;font-size:.82rem;color:rgba(255,255,255,.72)} #content .mainquickcs_wrap .rqfrm_agree input{width:16px;height:16px;accent-color:var(--sky)} #content .mainquickcs_wrap .rqfrm_agree a{color:var(--sky)} #content .mainquickcs_wrap .rqfrm_submit{flex:none} #content .mainquickcs_wrap .btn_submit{min-width:126px;height:44px;background:var(--blue);border-radius:999px;color:#fff;font-size:.9rem;font-weight:750} #content .mainquickcs_wrap .rqfrm_2_2 .c > span{flex:1;width:auto} /* 09-27zm 날짜 · 시간 반반 */ @media(max-width:1100px){#content .mainquickcs_wrap h3{display:none}#content .mainquickcs_wrap .frm_input,#content .mainquickcs_wrap select{padding-left:14px}} /* 좁은 폭 — 제목을 빼 입력칸을 넓힌다 */ @media(max-width:1400px){ #content .main-nav{display:none} #content .nav-toggle{display:inline-flex} #content .header-phone{font-size:.98rem} } @media(max-width:1024px){ #content .site-brand img{max-height:58px} } @media(max-width:1080px){ #content .header-phone span{display:none} #content .header-phone{width:42px;height:42px;justify-content:center;gap:0;font-size:0} /* 09-27zw gap 0 — 숨긴 번호 글자와의 간격 9px 때문에 아이콘이 4.5px 왼쪽으로 밀렸다 */ #content .header-phone svg{width:20px} #content .nav-toggle{width:42px;height:42px;justify-content:center} /* 09-27zs 전화와 같은 42×42 — 원이 타원이 되지 않게 · 폰에서 누르는 곳도 넓힌다 */ #content .nav-toggle-t{display:none} #content .site-header:not(.is-scrolled) .header-phone,#content .site-header:not(.is-scrolled) .nav-toggle{border:1px solid rgba(255,255,255,.38);border-radius:50%;background:rgba(0,35,52,.44);box-shadow:0 6px 24px rgba(0,24,38,.16);backdrop-filter:blur(10px)} } @media(max-width:900px){ #content .header-inner>.brand-title, #content .header-inner>.site-brand{flex:none} #content .header-actions{flex:none;order:2;margin-left:auto} #content .nav-toggle-t{display:none} #content .header-cta{display:none} #content .site-map-t{font-size:1.5rem} :root{--head:76px} #content .site-map-copy{padding:24px 20px 28px;font-size:.66rem;line-height:1.5} #content .mainquickcs_wrap{display:none !important} #content .mobile-actions{position:fixed;inset:auto 0 0;z-index:950;display:grid;grid-template-columns:1fr 1fr;height:62px;box-shadow:0 -8px 26px rgba(36,17,80,.2)} #content .mobile-actions a{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--deep);color:#fff;font-size:.94rem;font-weight:700} #content .mobile-actions svg{flex:none;width:18px;height:18px} /* 09-27zz4 「전화」 → 아이콘 */ #content .mobile-actions a:last-child{background:var(--blue)} } @media(max-width:900px) and (max-height:500px){#content .mobile-actions{display:none}} /* 09-27zu 폰 가로 — 헤더 76 + 바 62 가 화면 37% 를 가려 바를 뺀다 (전화 · 메뉴는 헤더에) */ @media(max-width:640px){ #content .site-brand img{max-height:44px} } #maincontent .signature-visual .image-secondary, #maincontent .unit-card, #maincontent .block-summary article, #maincontent .source-picture, #maincontent .location-point, #maincontent .premium-story, #maincontent .gallery-viewer, #maincontent .floor-sidebar, #maincontent .cta-panel, #maincontent .complex-preview-media, #maincontent .complex-preview-panel, #maincontent .complex-gallery-controls, #maincontent .complex-tab-system .gallery-viewer, #maincontent .doc-list li{border-radius:var(--radius)} #maincontent .premium-icon, #maincontent .location-point .premium-icon, #maincontent .complex-preview-tabs button, #maincontent .complex-category-tabs button, #maincontent .complex-type-tabs button{border-radius:6px} #maincontent .floor-units button, #content .mainquickcs_wrap .btn_submit, #maincontent .premium-no{color:var(--accent);font-weight:850;letter-spacing:.14em} /* 09-27zm 퀵폼 select · 입력칸은 뺐다 — 금색 · 넓은 자간이 입력 글자까지 먹었다 */ #maincontent .floor-groups button.is-active{border-color:var(--deep);background:var(--deep);color:#fff} #maincontent .text-link{border-bottom-color:var(--accent)} #maincontent .overview-table{border-top-color:var(--accent)} #maincontent .floor-sidebar .unit-spec{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.22);display:grid;gap:11px} #maincontent .floor-sidebar .unit-spec div{display:flex;align-items:baseline;justify-content:space-between;gap:14px} #maincontent .floor-sidebar .unit-spec dt{flex:none;color:rgba(255,255,255,.68);font-size:.85rem} #maincontent .floor-sidebar .unit-spec dd{font-size:.95rem;font-weight:700;text-align:right} #maincontent .floor-sidebar .unit-point{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22);display:grid;gap:8px} #maincontent .floor-sidebar .unit-point li{position:relative;padding-left:14px;color:rgba(255,255,255,.82);font-size:.88rem;line-height:1.65} #maincontent .floor-sidebar .unit-point li:before{position:absolute;left:0;top:.62em;width:5px;height:5px;content:"";border-radius:50%;background:var(--sky)} #maincontent .doc-list{margin-top:26px;display:grid;gap:10px} #maincontent .doc-list li{position:relative;padding:14px 20px 14px 38px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--muted);font-size:.96rem;line-height:1.65} #maincontent .doc-list li:before{position:absolute;left:18px;top:1.25em;width:6px;height:6px;content:"";border-radius:50%;background:var(--blue)} #maincontent .overview-table dd small{color:var(--muted);font-size:.82rem} @media(max-width:900px){ #maincontent .floor-sidebar .unit-spec div{flex-wrap:wrap;gap:2px 14px} #maincontent .floor-sidebar .unit-spec dd{text-align:left} } @media(max-width:640px){ #maincontent .doc-list li{padding:12px 16px 12px 32px;font-size:.9rem} #maincontent .unit-grid th,#maincontent .unit-grid td{padding:7px 2px;font-size:.8rem} #maincontent .unit-grid small{font-size:.68rem} #maincontent .doc-list li:before{left:14px} } #maincontent .sec-key{display:block;margin:0 0 18px;font-family:var(--en);font-size:clamp(3.2rem,7vw,5rem);font-weight:700;line-height:.98;letter-spacing:.02em;text-transform:uppercase;color:var(--deep)} #maincontent .section--deep .sec-key{color:#fff} #maincontent .sec-key span{display:inline-block} #maincontent .sec-mj{font-family:var(--mj);font-size:clamp(1.6rem,3vw,2.25rem);font-weight:700;line-height:1.5;letter-spacing:-.02em;color:var(--deep)} #maincontent .section--deep .sec-mj{color:var(--accent-soft)} #maincontent .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} #maincontent .tags li{padding:7px 14px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.86rem;font-weight:600} #maincontent .section--deep .tags li{border-color:#ffffff2e;color:#ffffffc4} #maincontent .num{font-family:var(--en);font-variant-numeric:tabular-nums;letter-spacing:0} #maincontent .mood{position:relative;margin:clamp(56px,7vw,96px) 0;overflow:hidden;border-radius:var(--radius)} #maincontent .mood img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover} #maincontent .mood figcaption{position:absolute;right:14px;bottom:12px;padding:5px 11px;border-radius:4px;background:#160B3399;color:#ffffffd6;font-size:.72rem;letter-spacing:-.01em} #maincontent .page-intro p.sec-key{max-width:none;margin:0 0 18px;color:var(--deep);font-size:clamp(3.2rem,7vw,5rem);line-height:.98;letter-spacing:.02em} #maincontent .section--deep .page-intro p.sec-key{color:#fff} #maincontent .page-intro h2.sec-mj{margin-top:0;font-size:clamp(1.6rem,3vw,2.25rem);line-height:1.5;letter-spacing:-.02em} #maincontent .page-intro .tags{justify-content:center} @media(max-width:640px){ #maincontent .page-intro .tags{justify-content:flex-start} #maincontent .sec-key,#maincontent .page-intro p.sec-key{font-size:clamp(2rem,9.5vw,3.2rem)} } #maincontent .mood--band{margin:0;border-radius:0} #maincontent .mood--band img{aspect-ratio:auto;height:clamp(110px,16vw,210px)} @media(min-width:901px) and (max-height:760px){ } @media(max-width:900px){ } @media(max-width:640px){ } @media(max-height:820px) and (min-width:641px){ } #content .swiper-button-prev,#content .swiper-button-next{width:44px;height:44px;margin-top:-22px; border:1px solid #ffffff5c;border-radius:50%;background:#160B3345;backdrop-filter:blur(6px); opacity:0;transition:opacity .35s var(--ease)} #content .swiper-button-prev:focus-visible,#content .swiper-button-next:focus-visible{opacity:1} @media(max-width:900px){ #content .swiper-button-prev,#content .swiper-button-next{display:none} } @media(max-width:900px){ } @media(max-width:640px){ } #maincontent.hm{background:var(--deep2)} #maincontent.hm .hm-s{position:relative;width:100%;height:100svh;min-height:640px;overflow:hidden} #maincontent.hm .hm-auto-height{height:auto;min-height:0} #maincontent.hm .hm-w{display:inline-block;opacity:0;transform:translateY(10px); filter:blur(5px); transition:opacity 1.5s var(--ease-soft),transform 1.5s var(--ease-soft), filter 1.5s var(--ease-soft)} #maincontent.hm .hm-s.is-seen .hm-w{opacity:1;transform:none;filter:blur(0); transition-delay:calc(var(--d,.35s) + var(--i,0) * var(--g,.07s))} #maincontent.hm .hm-w:nth-child(1){--i:0} #maincontent.hm .hm-w:nth-child(2){--i:1} #maincontent.hm .hm-w:nth-child(3){--i:2} #maincontent.hm .hm-w:nth-child(4){--i:3} #maincontent.hm .hm-w:nth-child(5){--i:4} #maincontent.hm .hm-w:nth-child(6){--i:5} #maincontent.hm .hm-w:nth-child(7){--i:6} #maincontent.hm .hm-w:nth-child(8){--i:7} #maincontent.hm .hm-hero{background:var(--deep2)} #maincontent.hm .hm-hero-photo{position:absolute;inset:0;z-index:1;overflow:hidden} #maincontent.hm .hm-hero-photo picture, #maincontent.hm .hm-hero-pr-fig picture{display:block;width:100%;height:100%} #maincontent.hm .hm-hero-shot{position:absolute;inset:0;margin:0;z-index:1; opacity:0;transition:opacity 1.3s var(--ease-soft)} #maincontent.hm .hm-hero-shot.is-on{opacity:1} #maincontent.hm .hm-hero-shot.is-bright:after{content:"";position:absolute;inset:0; pointer-events:none; background:linear-gradient(94deg,#160B33e8 0%,#160B33d1 34%,#160B338f 52%,#160B3333 66%,#160B3300 78%)} #maincontent.hm .hm-hero-shot img{width:100%;height:100%;object-fit:cover; object-position:35% center;transform:scale(1.2); transition:transform 6s cubic-bezier(.16,.68,.35,1)} #maincontent.hm .hm-hero.is-shot .hm-hero-shot.is-on img{transform:scale(1)} @media(max-width:900px){#maincontent.hm .hm-hero-shot img{object-position:var(--mpos,35%) center}} /* 09-27zz 슬라이드마다 탑이 보이는 가로 위치 (home.php "mp") */ #maincontent.hm .hm-hero:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background: radial-gradient(88% 58% at 50% 31%,#160B3391 0%,#160B333d 54%,#160B3300 74%), linear-gradient(180deg,#160B33ab 0%,#160B332e 20%,#160B3300 46%,#160B3347 76%,#160B33bf 100%)} #maincontent.hm .hm-hero-copy{position:absolute;left:8.33%;top:50%;z-index:4; width:min(84%,669px);transform:translateY(-50%) translateY(-9.33vh); text-align:left;color:#fff} #maincontent.hm .hm-hero-eyebrow{margin:0 0 15px;font-family:var(--en);font-size:.94rem; font-weight:700;letter-spacing:.16em;color:var(--accent-soft);text-transform:uppercase} #maincontent.hm .hm-hero-name{margin:0;font-family:var(--mj);font-weight:100; font-size:clamp(2.2rem,6.12vw,5.5rem);line-height:1.1;letter-spacing:-.03em; text-shadow:0 3px 26px #160B33} #maincontent.hm .hm-hero-name b,#maincontent.hm .hm-hero-name strong{font-weight:700} #maincontent.hm .hm-hero-eyebrow .hm-w{--d:.45s;--g:0s} #maincontent.hm .hm-hero-name .hm-w{--d:.78s;--g:.16s} #maincontent.hm .hm-hero-lead{margin:34px 0 0;font-size:clamp(.95rem,1.28vw,1.14rem); font-weight:500;line-height:1.7;letter-spacing:-.01em;color:#fff; opacity:0;transform:translateY(12px); transition:opacity 1.4s var(--ease-soft) 1.4s,transform 1.4s var(--ease-soft) 1.4s; text-shadow:0 2px 16px #160B33} #maincontent.hm .hm-hero.is-seen .hm-hero-lead{opacity:1;transform:none} #maincontent.hm .hm-hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0} #maincontent.hm .hm-hero-btn{display:inline-flex;align-items:center;justify-content:center; min-width:132px;height:46px;padding:0 22px;border-radius:999px; border:1px solid #ffffff5c;color:#fff;font-size:.9rem;font-weight:700;letter-spacing:-.02em; backdrop-filter:blur(6px);background:#160B3352; opacity:0;transform:translateY(14px); transition:opacity 1.35s var(--ease-soft),transform 1.35s var(--ease-soft), background .24s var(--ease),border-color .24s var(--ease),color .24s var(--ease); transition-delay:1.62s,1.62s,0s,0s,0s} #maincontent.hm .hm-hero-cta a:nth-child(2){transition-delay:1.78s,1.78s,0s,0s,0s} #maincontent.hm .hm-hero.is-seen .hm-hero-btn{opacity:1;transform:none} #maincontent.hm .hm-hero-btn:hover{background:#160B3396;border-color:#fff} #maincontent.hm .hm-hero-btn--fill{background:var(--accent);border-color:var(--accent); color:var(--deep2);backdrop-filter:none} #maincontent.hm .hm-hero-btn--fill:hover{background:var(--accent-soft);border-color:var(--accent-soft); color:var(--deep2)} #maincontent.hm .hm-hero-pr{position:absolute;right:6.46%;bottom:6.4%;z-index:5; width:clamp(160px,17.4vw,250px); opacity:0;transform:translateY(22px); transition:opacity 1.35s var(--ease-soft) 1.95s,transform 1.35s var(--ease-soft) 1.95s} #maincontent.hm .hm-hero-pr .hm-hero-pr-fig{transition:box-shadow .3s var(--ease)} #maincontent.hm .hm-hero-pr:hover .hm-hero-pr-fig{box-shadow:0 18px 48px #160B33b8} #maincontent.hm .hm-hero-pr img{transition:transform 1.1s var(--ease)} #maincontent.hm .hm-hero-pr:hover img{transform:scale(1.06)} #maincontent.hm .hm-hero.is-seen .hm-hero-pr{opacity:1;transform:none} #maincontent.hm .hm-hero-pr-fig{position:relative;margin:0;overflow:hidden;border-radius:16px; border:3px solid #fff;box-shadow:0 14px 40px #160B3380;box-sizing:border-box; aspect-ratio:250/149} #maincontent.hm .hm-hero-pr-fig img{display:block;width:100%;height:100%;object-fit:cover} #maincontent.hm .hm-hero-pr-label{position:absolute;left:0;right:0;bottom:0;margin:0; padding:14px 0 7px;text-align:center;font-family:var(--en); font-size:.62rem;font-weight:700;letter-spacing:.2em;color:#fff; background:linear-gradient(180deg,#160B3300,#160B33b8)} #maincontent.hm .hm-note{position:absolute;right:var(--gutter);bottom:18px;z-index:5; margin:0;color:#ffffff96;font-size:.7rem} #maincontent.hm .hm-todo{display:grid;place-items:center;background:var(--deep)} #maincontent.hm .hm-todo-t{margin:0;font-family:var(--en);font-size:clamp(1rem,2.4vw,1.8rem); font-weight:700;letter-spacing:.2em;color:#ffffff4d} @media(max-width:1100px){ #maincontent.hm .hm-s{height:auto;min-height:100svh} } @media(max-width:900px){ #maincontent.hm .hm-hero-copy{width:83%;transform:translateY(-50%) translateY(-9.33vh)} /* 09-27zx -20vh → PC 와 같은 -9.33vh — AERIAL VIEW 를 뺀 자리만큼 내림 */ @media(max-height:640px){#maincontent.hm .hm-hero-copy{transform:translateY(-50%)}} /* 키 작은 폰(320×568) — 올리면 헤더에 11px 걸린다 */ #maincontent.hm .hm-hero-pr{display:none} /* 09-27zu 폰 · 태블릿은 AERIAL VIEW 썸네일을 뺀다 (감추면 lazy 그림도 안 받는다) */ #maincontent.hm .hm-note{right:var(--gutter);bottom:14px} } #maincontent.hm .hm-loca{display:grid;grid-template-columns:58% 42%; gap:0;align-items:center; padding:0; background:linear-gradient(180deg,#E9E4F4 0%,var(--paper) 16%)} #maincontent.hm .hm-loca-map{opacity:0;transform:translateY(38px); box-shadow:0 8px 22px #160b331a; transition:opacity 1.15s var(--ease-soft) .3s,transform 1.15s var(--ease-soft) .3s, box-shadow 1.15s var(--ease-soft) .3s} #maincontent.hm .hm-loca.is-seen .hm-loca-map{opacity:1;transform:none; box-shadow:0 34px 76px #160b3366,0 4px 12px #160b331f} #maincontent.hm .hm-loca-photo{position:relative;align-self:stretch;min-width:0; display:flex;align-items:center;justify-content:flex-start; padding-left:clamp(20px,3.3vw,56px)} #maincontent.hm .hm-loca-photo-in{position:absolute;left:0;top:0;bottom:0;width:86.207%; z-index:0;overflow:hidden;display:block} #maincontent.hm .hm-loca-photo-in:after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,#24115073 0%,#2411501f 44%,#24115096 100%)} #maincontent.hm .hm-loca-photo-bg{position:absolute;inset:0;z-index:0; width:100%;height:100%;object-fit:cover;object-position:52% center; transform:scale(1.1);transition:transform 9.5s cubic-bezier(.16,.68,.35,1)} #maincontent.hm .hm-loca.is-seen .hm-loca-photo-bg{transform:scale(1)} #maincontent.hm .hm-loca-photo b{position:absolute;left:14px;bottom:12px;z-index:3; font-size:.66rem;font-weight:500;letter-spacing:.02em;color:#ffffff8c} #maincontent.hm .hm-loca-map{position:relative;z-index:2;margin:0;min-width:0;overflow:hidden; width:min(100%,960px);height:auto;max-height:calc(100% - 48px); border:0;border-radius:12px;padding:10px;background:#fff} #maincontent.hm .hm-loca-map picture{display:block;width:100%;height:auto} #maincontent.hm .hm-loca-map img{display:block;width:100%;height:auto; max-height:100%;object-fit:contain;border-radius:6px} #maincontent.hm .hm-loca-con{min-width:0;display:flex;flex-direction:column; justify-content:center;padding:0 var(--gutter) 0 8%} #maincontent.hm .hm-loca-head{min-height:150px} #maincontent.hm .hm-loca-head .hm-eyebrow .hm-w{--d:.38s;--g:0s} #maincontent.hm .hm-loca-head .hm-h2 .hm-w{--d:.6s;--g:.12s} #maincontent.hm .hm-eyebrow{margin:0 0 14px;font-family:var(--en);font-size:.74rem; font-weight:800;letter-spacing:.26em;color:var(--blue)} #maincontent.hm .hm-h2{margin:0;font-family:var(--mj);font-weight:700; font-size:clamp(1.45rem,2.6vw,2.34rem);line-height:1.34;letter-spacing:-.03em;color:var(--ink)} #maincontent.hm .hm-loca-figs{display:flex;gap:0;align-items:stretch; margin:30px 0 0;padding:0;list-style:none} #maincontent.hm .hm-loca-figs li{min-width:0;padding-right:clamp(12px,1.5vw,22px); opacity:0;transform:translateY(18px);filter:blur(6px); transition:opacity .95s var(--ease-soft),transform .95s var(--ease-soft), filter .95s var(--ease-soft); transition-delay:calc(1s + var(--i,0) * .1s)} #maincontent.hm .hm-loca-figs li:nth-child(1){--i:0} #maincontent.hm .hm-loca-figs li:nth-child(2){--i:1} #maincontent.hm .hm-loca-figs li:nth-child(3){--i:2} #maincontent.hm .hm-loca-figs li+li{padding-left:clamp(14px,1.8vw,24px); border-left:1px solid var(--line)} #maincontent.hm .hm-loca.is-seen .hm-loca-figs li{opacity:1;transform:none;filter:blur(0)} #maincontent.hm .hm-loca-figs b{display:block;font-family:var(--en);font-weight:500; font-size:clamp(2.4rem,4.4vw,4rem);line-height:1;letter-spacing:-.045em;color:var(--deep)} #maincontent.hm .hm-loca-figs b i{font-style:normal;font-weight:700;font-size:.34em; margin-left:2px;letter-spacing:-.01em} #maincontent.hm .hm-loca-figs span{display:block;margin:11px 0 0;font-size:.76rem; line-height:1.5;letter-spacing:-.02em;color:var(--muted)} #maincontent.hm .hm-loca-tabs{display:flex;gap:14px;margin:38px 0 0;height:48px; opacity:0;transform:translateY(12px); transition:opacity 1s var(--ease-soft) 1.34s,transform 1s var(--ease-soft) 1.34s} #maincontent.hm .hm-loca.is-seen .hm-loca-tabs{opacity:1;transform:none} #maincontent.hm .hm-loca-tab{display:flex;flex-direction:row;align-items:center; gap:7px;padding:0;border:0;background:none;color:var(--muted);cursor:pointer} #maincontent.hm .hm-loca-tab-no{display:grid;place-items:center; width:48px;height:48px;border-radius:50%; border:1px solid var(--line);background:#fff; color:var(--blue);transition:border-color .24s,background .24s,color .24s} #maincontent.hm .hm-loca-tab-no svg{width:23px;height:23px;fill:none; stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} #maincontent.hm .hm-loca-tab-t{font-size:.82rem;font-weight:700;letter-spacing:-.02em; transition:color .24s;white-space:nowrap} #maincontent.hm .hm-loca-tab:hover .hm-loca-tab-no{border-color:var(--sky)} #maincontent.hm .hm-loca-tab.is-active .hm-loca-tab-no{border-color:var(--deep); background:var(--deep);color:#fff} #maincontent.hm .hm-loca-tab.is-active .hm-loca-tab-t{color:var(--deep)} #maincontent.hm .hm-loca-panels{display:grid;margin-top:15px; opacity:0;transition:opacity .9s var(--ease-soft) 1.52s} #maincontent.hm .hm-loca-panel{grid-area:1/1} #maincontent.hm .hm-loca-panel[hidden]{display:block !important; visibility:hidden;pointer-events:none} #maincontent.hm .hm-loca.is-seen .hm-loca-panels{opacity:1} #maincontent.hm .hm-loca-panel ul{margin:0;padding:0;list-style:none} #maincontent.hm .hm-loca-panel li{position:relative;padding:7px 0 7px 16px; font-size:.92rem;line-height:1.55;color:var(--ink)} #maincontent.hm .hm-loca-panel li:before{content:"";position:absolute;left:0;top:15px; width:5px;height:5px;border-radius:50%;background:var(--accent)} #maincontent.hm .hm-loca-panel.is-active ul{animation:hmRise .6s var(--ease-soft) both} @keyframes hmRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media(max-width:1100px){ #maincontent.hm .hm-loca{grid-template-columns:1fr;align-content:start; padding:clamp(56px,7vh,84px) 0 0;gap:20px} #maincontent.hm .hm-loca-photo{padding:26px 0;align-self:auto; justify-content:center;padding-left:0} #maincontent.hm .hm-loca-photo-in{width:100%} #maincontent.hm .hm-loca-map{width:calc(100% - 40px);margin-inline:auto; max-height:none;border-radius:10px;padding:8px} #maincontent.hm .hm-loca-figs b{font-size:clamp(1.6rem,7.4vw,2.3rem)} #maincontent.hm .hm-loca-figs li{padding-right:9px} #maincontent.hm .hm-loca-figs li+li{padding-left:10px} #maincontent.hm .hm-loca-con{padding:34px var(--gutter) 30px} #maincontent.hm .hm-loca-map{height:auto;overflow-x:auto;overflow-y:hidden; -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; scrollbar-width:none; box-shadow:inset -20px 0 20px -20px #17132633,inset 20px 0 20px -20px #17132633} #maincontent.hm .hm-loca-map::-webkit-scrollbar{display:none} #maincontent.hm .hm-loca-map picture{display:inline-block;width:auto;height:auto} #maincontent.hm .hm-loca-map img{width:auto;max-width:none;max-height:none; height:clamp(280px,44vh,420px);object-fit:fill} #maincontent.hm .hm-loca-con{justify-content:flex-start} #maincontent.hm .hm-loca-head{min-height:0} #maincontent.hm .hm-loca-tabs{flex-wrap:wrap;gap:10px 14px;height:auto;margin-top:26px} #maincontent.hm .hm-loca-tab-no{width:42px;height:42px} #maincontent.hm .hm-loca-tab-no svg{width:20px;height:20px} #maincontent.hm .hm-loca-tab-t{font-size:.76rem} } #maincontent.hm .hm-prem{background:var(--deep2);color:#fff} #maincontent.hm .hm-prem-bgs{position:absolute;inset:0;z-index:1;overflow:hidden} #maincontent.hm .hm-prem-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transform:scale(1.045);transition:opacity 1s var(--ease),transform 5s linear} #maincontent.hm .hm-prem-bg.is-active{opacity:1;transform:scale(1)} #maincontent.hm .hm-prem:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(72deg,#160B33f2 0%,#160B33cf 32%,#160B3382 56%,#160B33b5 100%), linear-gradient(0deg,#160B33a8 0%,#160B3342 24%,#160B3300 48%)} #maincontent.hm .hm-prem-copy{position:absolute;left:12.5%;top:50%;z-index:4; transform:translateY(-50%);width:min(45%,640px)} #maincontent.hm .hm-prem-panel{animation:hmRise .55s var(--ease) both} #maincontent.hm .hm-prem-en{position:relative;display:flex;align-items:center; margin:0 0 18px;font-family:var(--en);font-size:.68rem;font-weight:700; letter-spacing:.22em;color:#ffffffa3} #maincontent.hm .hm-prem-en:before{content:"";position:absolute;left:0;top:-15px; width:34px;height:1px;background:var(--accent);opacity:.8} #maincontent.hm .hm-prem-en b{margin-left:auto;font-size:1.02rem;font-weight:700; letter-spacing:.04em;color:var(--accent)} #maincontent.hm .hm-prem-en i{font-style:normal;font-size:.78rem;font-weight:500; letter-spacing:.06em;color:#ffffff6b;margin-left:7px} #maincontent.hm .hm-prem-t{margin:0 0 16px;min-height:2.4em;font-family:var(--mj);font-weight:800; font-size:clamp(1.9rem,4.45vw,4rem);line-height:1.2;letter-spacing:-.04em; text-shadow:0 3px 22px #160B33} #maincontent.hm .hm-prem-copy ul{margin:0;padding:0;list-style:none;min-height:109px} #maincontent.hm .hm-prem-copy li{position:relative;padding:6px 0; font-size:.95rem;line-height:1.6;color:#ffffffd1} #maincontent.hm .hm-prem-copy li:before{content:"";position:absolute;left:-16px;top:14px; width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.85} #maincontent.hm .hm-prem-tabs{position:absolute;left:auto;right:calc(var(--gutter) + 46px); top:50%;z-index:5;transform:translateY(-50%);width:clamp(216px,18.5vw,268px); display:grid;grid-template-columns:1fr;gap:12px} #maincontent.hm .hm-prem-tab{display:inline-flex;align-items:center;justify-content:center; gap:11px;height:48px;padding:0 18px;border:1px solid #ffffff38;border-radius:999px; background:#160B3340;backdrop-filter:blur(8px);color:#ffffffb8;cursor:pointer; font-family:inherit;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)} #maincontent.hm .hm-prem-tab:hover{border-color:#ffffff7a;color:#fff} #maincontent.hm .hm-prem-tab.is-active{border-color:var(--accent);background:var(--accent);color:var(--deep2)} #maincontent.hm .hm-prem-tab-no{font-family:var(--en);font-size:.7rem;font-weight:700; letter-spacing:.1em;color:var(--accent)} #maincontent.hm .hm-prem-tab.is-active .hm-prem-tab-no{color:var(--deep2);opacity:.62} #maincontent.hm .hm-prem-tab-t{font-size:.9rem;font-weight:600;letter-spacing:-.02em;white-space:nowrap} #maincontent.hm .hm-prem .hm-note{color:#ffffff9e;right:auto;left:12.5%;bottom:5.5%} @media(max-width:1100px){ #maincontent.hm .hm-prem-tabs{position:static;left:auto;right:auto;top:auto;bottom:auto; transform:none;width:auto;margin:0 var(--gutter);gap:8px; grid-template-columns:repeat(3,1fr)} #maincontent.hm .hm-prem-copy{transform:none;top:auto} #maincontent.hm .hm-prem-tab{height:42px;padding:0 10px;gap:8px} #maincontent.hm .hm-prem-no{font-size:clamp(2.6rem,13vw,3.6rem)} #maincontent.hm .hm-prem-tab-t{font-size:.82rem} #maincontent.hm .hm-prem-tab-no{font-size:.64rem} @media(max-width:360px){#maincontent.hm .hm-prem-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}} /* 09-27zu 320 에서 셋째 칸이 29px 잘렸다 */ #maincontent.hm .hm-prem{display:flex;flex-direction:column;justify-content:flex-end;gap:22px; padding-bottom:clamp(40px,6vh,70px)} #maincontent.hm .hm-prem-copy{position:static;left:auto;bottom:auto;width:auto; margin:0 var(--gutter)} #maincontent.hm .hm-prem:after{background:linear-gradient(180deg,#160B3347 0%,#160B3399 42%,#160B33f2 100%)} #maincontent.hm .hm-prem .hm-note{position:static;margin:0 var(--gutter)} } #maincontent.hm .hm-unit{display:grid;grid-template-columns:34% 66%; align-items:center;align-content:center;gap:0; --fig-h:clamp(260px,calc(100svh - 300px),620px); --row-h:clamp(34px,4.4vh,50px); padding:var(--head) 0 24px;background:#fff} #maincontent.hm .hm-unit-side{min-width:0; padding-left:var(--gutter);padding-right:clamp(24px,3vw,56px)} #maincontent.hm .hm-unit-lead{margin:14px 0 0;font-size:.94rem;line-height:1.75;color:var(--muted)} #maincontent.hm .hm-unit-navlabel{display:flex;align-items:center;gap:11px; width:min(100%,360px);margin:clamp(22px,3.4vh,40px) 0 9px; font-family:var(--en);font-size:.66rem;font-weight:700;letter-spacing:.2em; color:var(--muted)} #maincontent.hm .hm-unit-navlabel:after{content:"";flex:1;height:1px;background:var(--line)} #maincontent.hm .hm-unit-bar{display:grid;width:min(100%,360px);margin:0; border-top:1px solid var(--line)} #maincontent.hm .hm-unit-dot{display:flex;align-items:center;gap:11px; width:100%;height:var(--row-h);padding:0 13px; border:0;border-bottom:1px solid var(--line);background:none; color:var(--muted);text-align:left;cursor:pointer; transition:background-color .26s var(--ease),color .26s var(--ease)} #maincontent.hm .hm-unit-dot b{flex:none;font-family:var(--en);font-size:.68rem; font-weight:700;letter-spacing:.06em;opacity:.5} #maincontent.hm .hm-unit-dot span{font-size:.94rem;font-weight:600;letter-spacing:-.02em} #maincontent.hm .hm-unit-dot i{margin-left:auto;font-style:normal; font-size:.74rem;font-weight:500;letter-spacing:-.01em; opacity:.62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #maincontent.hm .hm-unit-dot:after{content:"\203A";flex:none;margin-left:11px; font-size:1.05rem;line-height:1;opacity:0;transform:translateX(-5px); transition:opacity .26s var(--ease),transform .26s var(--ease)} #maincontent.hm .hm-unit-dot:hover{background:var(--mist);color:var(--deep)} #maincontent.hm .hm-unit-dot:hover:after{opacity:.6;transform:none} #maincontent.hm .hm-unit-dot.is-active{background:var(--deep);color:#fff; border-bottom-color:var(--deep)} #maincontent.hm .hm-unit-dot.is-active b{color:var(--accent);opacity:1} #maincontent.hm .hm-unit-dot.is-active span{font-weight:700} #maincontent.hm .hm-unit-dot.is-active i{opacity:.72} #maincontent.hm .hm-unit-dot.is-active:after{opacity:1;transform:none} #maincontent.hm .hm-unit-more{grid-column:2;grid-row:2;justify-self:start;align-self:center; display:inline-flex;align-items:center;gap:9px; margin:14px 0 0;padding-bottom:5px; border-bottom:1px solid var(--line); font-size:.86rem;font-weight:700;letter-spacing:-.02em;color:var(--deep); transition:border-color .3s var(--ease),gap .3s var(--ease)} #maincontent.hm .hm-unit-more:after{content:"\2192";font-size:.95rem;line-height:1} #maincontent.hm .hm-unit-more:hover{border-color:var(--deep);gap:14px} #maincontent.hm .hm-unit-more:focus-visible, #maincontent.hm .hm-unit-dot:focus-visible{outline:2px solid var(--deep);outline-offset:3px} #maincontent.hm .hm-unit-main{min-width:0;display:flex;flex-direction:column; gap:0;padding-right:var(--gutter)} #maincontent.hm .hm-unit-track{display:flex;gap:clamp(14px,1.6vw,26px); overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none;cursor:grab;padding:0} #maincontent.hm .hm-unit-track::-webkit-scrollbar{display:none} #maincontent.hm .hm-unit-track.is-drag{cursor:grabbing;scroll-snap-type:none} #maincontent.hm .hm-unit-track:focus-visible{outline:2px solid var(--deep);outline-offset:3px} #maincontent.hm .hm-unit-card{flex:0 0 100%;scroll-snap-align:start; display:grid;grid-template-columns:31% 69%; gap:0;align-items:stretch; height:auto;min-height:var(--fig-h); padding:0;border:0;background:none} #maincontent.hm .hm-unit-txt{min-width:0;overflow:hidden; display:flex;flex-direction:column;justify-content:center; padding-right:clamp(16px,1.8vw,34px)} #maincontent.hm .hm-unit-type{margin:0;font-family:var(--mj);font-weight:800; font-size:clamp(1.5rem,2.1vw,2.1rem);line-height:1.12; letter-spacing:-.04em;color:var(--ink)} #maincontent.hm .hm-unit-type span{display:block;margin-top:9px;font-family:var(--kr); font-size:.82rem;font-weight:600;letter-spacing:-.01em;color:var(--blue)} #maincontent.hm .hm-unit-count{margin:16px 0 0;font-size:.8rem;font-weight:600; letter-spacing:-.02em;color:var(--muted)} #maincontent.hm .hm-unit-table{width:100%;margin-top:20px; border-collapse:collapse;border-top:1px solid var(--deep)} #maincontent.hm .hm-unit-table th,#maincontent.hm .hm-unit-table td{ padding:9px 1px;border-bottom:1px solid var(--line);font-size:.84rem;line-height:1.4} #maincontent.hm .hm-unit-table th{text-align:left;font-weight:500;color:var(--muted);white-space:nowrap} #maincontent.hm .hm-unit-table td{text-align:right;font-weight:700;color:var(--ink); font-variant-numeric:tabular-nums} #maincontent.hm .hm-unit-feat{margin:18px 0 0;padding:0;list-style:none} #maincontent.hm .hm-unit-feat li{position:relative;padding:4px 0 4px 14px; font-size:.84rem;line-height:1.55;color:var(--ink)} #maincontent.hm .hm-unit-feat li:before{content:"";position:absolute;left:0;top:13px; width:5px;height:1px;background:var(--accent)} #maincontent.hm .hm-unit-figs{display:flex;min-width:0; align-items:stretch;justify-content:center;height:var(--fig-h)} #maincontent.hm .hm-unit-fig{margin:0;flex:1 1 0;min-width:0;display:flex; align-items:center;justify-content:center;height:100%; border:0;background:none;padding:0} #maincontent.hm .hm-unit-fig img{max-width:100%;max-height:100%;width:auto;height:auto; object-fit:contain} #maincontent.hm .hm-unit .hm-note{position:static;grid-column:2;grid-row:2;justify-self:end;align-self:center; margin:14px 0 0;padding-right:var(--gutter);color:var(--muted)} #maincontent.hm .hm-unit-lead, #maincontent.hm .hm-unit-navlabel, #maincontent.hm .hm-unit-bar, #maincontent.hm .hm-unit-more, #maincontent.hm .hm-unit-main, #maincontent.hm .hm-unit .hm-note{opacity:0;transform:translateY(24px); transition:opacity .95s var(--ease-soft),transform .95s var(--ease-soft)} #maincontent.hm .hm-unit.is-seen .hm-unit-lead, #maincontent.hm .hm-unit.is-seen .hm-unit-navlabel, #maincontent.hm .hm-unit.is-seen .hm-unit-bar, #maincontent.hm .hm-unit.is-seen .hm-unit-more, #maincontent.hm .hm-unit.is-seen .hm-unit-main, #maincontent.hm .hm-unit.is-seen .hm-note{opacity:1;transform:none} #maincontent.hm .hm-unit.is-seen .hm-unit-lead{transition-delay:.38s} #maincontent.hm .hm-unit.is-seen .hm-unit-main{transition-delay:.5s} #maincontent.hm .hm-unit.is-seen .hm-unit-navlabel{transition-delay:.58s} #maincontent.hm .hm-unit.is-seen .hm-unit-bar{transition-delay:.62s} #maincontent.hm .hm-unit.is-seen .hm-unit-more{transition-delay:.74s} #maincontent.hm .hm-unit.is-seen .hm-note{transition-delay:.86s} @media(max-width:1100px){ #maincontent.hm .hm-unit{grid-template-columns:1fr;align-content:start;gap:22px; --fig-h:clamp(220px,34vh,320px);padding:var(--head) 0 0} #maincontent.hm .hm-unit-side{padding:0 var(--gutter)} #maincontent.hm .hm-unit-main{padding-right:0} #maincontent.hm .hm-unit-card{grid-template-columns:1fr;min-height:0} #maincontent.hm .hm-unit-txt{display:block;padding:0 var(--gutter)} #maincontent.hm .hm-unit-figs{padding:0 var(--gutter);margin-top:20px} #maincontent.hm .hm-unit-navlabel{width:auto;margin:22px 0 10px} /* 09-27zz5 가로 스크롤 한 줄 → 4칸 격자 (7개 = 4 + 3) · 가운데 맞춤 */ #maincontent.hm .hm-unit-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:auto; margin:0;border-top:0;gap:6px} #maincontent.hm .hm-unit-dot{justify-content:center;width:auto;height:auto;min-width:0; padding:9px 4px;border:1px solid var(--line);border-radius:999px; background:#fff;white-space:nowrap} #maincontent.hm .hm-unit-dot i, #maincontent.hm .hm-unit-dot b, #maincontent.hm .hm-unit-dot:after{display:none} #maincontent.hm .hm-unit-dot:hover{background:#fff} #maincontent.hm .hm-unit-dot span{font-size:.82rem} #maincontent.hm .hm-unit-dot.is-active{border-color:var(--deep);background:var(--deep);color:#fff} #maincontent.hm .hm-unit-dot.is-active span{font-weight:700} #maincontent.hm .hm-unit-more{grid-column:auto;grid-row:auto;margin:4px var(--gutter) 0} #maincontent.hm .hm-unit .hm-note{grid-column:auto;grid-row:auto;justify-self:stretch; margin:12px var(--gutter) 22px;padding-right:0} } #maincontent.hm .hm-contact{background:var(--deep2);color:#fff} #maincontent.hm .hm-contact:before{content:attr(data-mark);content:attr(data-mark) / ""; position:absolute;right:var(--gutter);bottom:-.24em;z-index:0;pointer-events:none; font-family:var(--en);font-weight:500;font-size:min(10.5rem,calc((100vw - var(--gutter) * 2) / 10.4));line-height:1; letter-spacing:.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px #ffffff17} #maincontent.hm .hm-contact-inner{position:relative;z-index:1;height:100%; max-width:calc(1250px + var(--gutter) * 2);margin:0 auto; display:flex;flex-direction:column;justify-content:center; --map-h:clamp(220px,calc(100svh - 430px),453px); padding:calc(var(--head) + clamp(8px,1.4vh,20px)) var(--gutter) 26px} #maincontent.hm .hm-contact-top{display:grid; grid-template-columns:minmax(0,min(640px,calc(var(--map-h) * 1.4135))) minmax(340px,1fr); column-gap:clamp(32px,3.4vw,49px);align-items:center} #maincontent.hm .hm-contact-mapcol{grid-column:1;grid-row:1;min-width:0} #maincontent.hm .hm-contact-side{grid-column:2;grid-row:1;min-width:0} #maincontent.hm .hm-contact .hm-eyebrow{color:var(--accent)} #maincontent.hm .hm-contact .hm-h2{color:#fff} #maincontent.hm .hm-contact .hm-eyebrow .hm-w{--d:.38s;--g:0s} #maincontent.hm .hm-contact .hm-h2 .hm-w{--d:.56s;--g:.1s} #maincontent.hm .hm-contact-lead{margin:12px 0 0;font-size:.86rem;line-height:1.6;color:#ffffffb8} #maincontent.hm .hm-contact-tel{display:flex;align-items:baseline;gap:12px; margin-top:clamp(14px,2.2vh,24px);padding-bottom:10px;border-bottom:1px solid #ffffff2e} #maincontent.hm .hm-contact-tel span{flex:none;font-size:.74rem;font-weight:700; letter-spacing:.04em;color:#ffffffa8} #maincontent.hm .hm-contact-tel b{font-family:var(--en);font-weight:700; font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1;letter-spacing:.01em;color:var(--accent)} #maincontent.hm .hm-contact-tel:hover{border-color:var(--accent)} #maincontent.hm .hm-contact-tel:focus-visible{outline:2px solid var(--accent);outline-offset:4px} #maincontent.hm .hm-reg{margin:clamp(16px,2.4vh,26px) 0 0} #maincontent.hm .hm-reg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #maincontent.hm .hm-reg-field--full{grid-column:1/-1} #maincontent.hm .hm-reg-field label{display:block;margin:0 0 5px;font-size:.72rem;font-weight:700; letter-spacing:.02em;color:#ffffffb3} #maincontent.hm .hm-reg-field input{display:block;width:100%;height:48px;margin:0;padding:0 15px; border:1px solid #ffffff38;border-radius:4px;background:#ffffff0d;color:#fff; font:inherit;font-size:1rem;line-height:1.2;letter-spacing:-.01em; /* 09-27zu .94 → 1rem(16px) — 아이폰은 16px 미만 입력칸을 누르면 확대한다 */ -webkit-appearance:none;appearance:none;transition:border-color .2s,background-color .2s} #maincontent.hm .hm-reg-field input::placeholder{color:#ffffff8a;opacity:1} #maincontent.hm .hm-reg-field input:hover{border-color:#ffffff66} #maincontent.hm .hm-reg-field input:focus{outline:none;border-color:var(--accent); background:#ffffff14;box-shadow:0 0 0 1px var(--accent)} #maincontent.hm .hm-reg-field input:-webkit-autofill{-webkit-text-fill-color:#fff;caret-color:#fff; box-shadow:0 0 0 60px #33216b inset} #maincontent.hm .hm-reg-agree{display:flex;align-items:center;gap:8px;margin:14px 0 0; font-size:.8rem;line-height:1.4;color:#ffffffc4} #maincontent.hm .hm-reg-agree input{flex:none;width:16px;height:16px;margin:0;accent-color:var(--accent)} #maincontent.hm .hm-reg-agree label{cursor:pointer} #maincontent.hm .hm-reg-agree a{color:#ffffffc4;text-decoration:underline;text-underline-offset:3px} #maincontent.hm .hm-reg-agree a:hover{color:var(--accent)} #maincontent.hm .hm-reg-agree a:focus-visible{outline:2px solid var(--accent);outline-offset:2px} #maincontent.hm .hm-reg-submit{display:flex;align-items:center;justify-content:center;width:100%; height:54px;margin:16px 0 0;padding:0 20px;border:1px solid var(--accent);border-radius:4px; background:var(--accent);color:var(--deep2);font:inherit;font-size:1rem;font-weight:800; letter-spacing:-.01em;cursor:pointer;transition:background-color .24s,border-color .24s} #maincontent.hm .hm-reg-submit:hover{background:var(--accent-soft);border-color:var(--accent-soft)} #maincontent.hm .hm-reg-submit:focus-visible{outline:2px solid #fff;outline-offset:3px} #maincontent.hm .hm-contact-map{position:relative;margin:0;width:100%;aspect-ratio:1200/849; border-radius:6px;overflow:hidden;box-shadow:0 22px 52px #0d0524b3} #maincontent.hm .hm-contact-map:after{content:"";position:absolute;inset:0;border:1px solid var(--accent); border-radius:inherit;opacity:.55;pointer-events:none} #maincontent.hm .hm-contact-map img{display:block;width:100%;height:100%;object-fit:cover} #maincontent.hm .hm-contact-maplink{display:block;width:100%;height:100%} #maincontent.hm .hm-contact-mapgo{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:6px; min-height:30px;padding:0 12px;border-radius:999px;background:var(--deep2);color:#fff;font-size:.74rem;font-weight:700; box-shadow:0 6px 18px #0d052459;transition:background-color .22s,color .22s} #maincontent.hm .hm-contact-mapgo:after{content:"\2192";font-weight:400} #maincontent.hm .hm-contact-maplink:hover .hm-contact-mapgo{background:var(--accent);color:var(--deep2)} #maincontent.hm .hm-contact-maplink:focus-visible{outline:2px solid var(--accent);outline-offset:-4px} #maincontent.hm .hm-contact-place{display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:10px 18px;margin-top:14px} #maincontent.hm .hm-contact-addr{margin:0;font-size:.84rem;line-height:1.5;color:#ffffffc4} #maincontent.hm .hm-contact-addr b{margin-right:10px;font-weight:700;color:var(--accent)} #maincontent.hm .hm-contact-btns{display:flex;gap:7px} #maincontent.hm .hm-map-btn{display:inline-flex;align-items:center;min-height:33px;padding:0 13px; border:1px solid #ffffff52;border-radius:999px;color:#fff;font-size:.78rem;font-weight:700; white-space:nowrap;transition:.22s} #maincontent.hm .hm-map-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--deep2)} #maincontent.hm .hm-map-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px} #maincontent.hm .hm-map-btn--go{display:none} @media(max-width:640px){ #maincontent.hm .hm-map-btn--go{display:inline-flex} #maincontent.hm .hm-contact-mapgo{display:none} } #maincontent.hm .hm-cond{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); margin:clamp(24px,4vh,44px) 0 0;padding:0;list-style:none; border-top:1px solid #ffffff29;border-bottom:1px solid #ffffff29} #maincontent.hm .hm-cond li{min-width:0;padding:clamp(16px,2.4vh,24px) clamp(14px,1.6vw,24px)} #maincontent.hm .hm-cond li:first-child{padding-left:0} #maincontent.hm .hm-cond li+li{border-left:1px solid #ffffff1f} #maincontent.hm .hm-cond li:nth-child(1){--i:0} #maincontent.hm .hm-cond li:nth-child(2){--i:1} #maincontent.hm .hm-cond li:nth-child(3){--i:2} #maincontent.hm .hm-cond li:nth-child(4){--i:3} #maincontent.hm .hm-cond li:nth-child(5){--i:4} #maincontent.hm .hm-cond-t{display:block;font-size:.74rem;font-weight:700;letter-spacing:.02em;color:var(--accent)} #maincontent.hm .hm-cond b{display:flex;align-items:flex-end;height:clamp(2rem,3.2vw,3rem);margin:8px 0 0; font-family:var(--en);font-weight:500;font-size:clamp(2rem,3.2vw,3rem);line-height:1; letter-spacing:-.04em;color:#fff;white-space:nowrap} #maincontent.hm .hm-cond b i{font-style:normal;font-weight:700;font-size:.42em;margin:0 0 .12em 3px; letter-spacing:0;color:var(--accent)} #maincontent.hm .hm-cond b.is-ko{font-family:var(--mj);font-weight:800; font-size:clamp(1.4rem,2.1vw,2rem);letter-spacing:-.04em} #maincontent.hm .hm-cond small{display:block;margin:10px 0 0;font-size:.74rem;line-height:1.5;color:#ffffffa3} #maincontent.hm .hm-cond-note{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 18px; margin:12px 0 0;font-size:.72rem;line-height:1.5;color:#ffffff8f} #maincontent.hm .hm-cond-more{flex:none;color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px} #maincontent.hm .hm-cond-more:after{content:"\2192";display:inline-block;margin-left:4px} #maincontent.hm .hm-cond-more:hover{color:#fff} #maincontent.hm .hm-cond-more:focus-visible{outline:2px solid var(--accent);outline-offset:3px} #maincontent.hm .hm-contact-lead, #maincontent.hm .hm-contact-tel, #maincontent.hm .hm-reg, #maincontent.hm .hm-contact-map, #maincontent.hm .hm-contact-place, #maincontent.hm .hm-cond li, #maincontent.hm .hm-cond-note{opacity:0;transform:translateY(24px); transition:opacity .95s var(--ease-soft),transform .95s var(--ease-soft)} #maincontent.hm .hm-contact-tel{transition:opacity .95s var(--ease-soft),transform .95s var(--ease-soft), border-color .3s var(--ease)} #maincontent.hm .hm-contact.is-seen .hm-contact-lead, #maincontent.hm .hm-contact.is-seen .hm-contact-tel, #maincontent.hm .hm-contact.is-seen .hm-reg, #maincontent.hm .hm-contact.is-seen .hm-contact-map, #maincontent.hm .hm-contact.is-seen .hm-contact-place, #maincontent.hm .hm-contact.is-seen .hm-cond li, #maincontent.hm .hm-contact.is-seen .hm-cond-note{opacity:1;transform:none} #maincontent.hm .hm-contact.is-seen .hm-contact-map{transition-delay:.4s} #maincontent.hm .hm-contact.is-seen .hm-contact-place{transition-delay:.58s} #maincontent.hm .hm-contact.is-seen .hm-contact-lead{transition-delay:.7s} #maincontent.hm .hm-contact.is-seen .hm-contact-tel{transition-delay:.8s} #maincontent.hm .hm-contact.is-seen .hm-reg{transition-delay:.92s} #maincontent.hm .hm-contact.is-seen .hm-cond li{transition-delay:calc(1.05s + var(--i,0) * .08s)} #maincontent.hm .hm-contact.is-seen .hm-cond-note{transition-delay:1.5s} @media(min-width:1101px) and (max-height:820px){ #maincontent.hm .hm-contact-inner{--map-h:clamp(220px,calc(100svh - 360px),453px); padding-top:calc(var(--head) + 4px);padding-bottom:16px} #maincontent.hm .hm-contact .hm-h2{font-size:clamp(1.3rem,2vw,1.9rem)} #maincontent.hm .hm-contact-lead{display:none} #maincontent.hm .hm-contact-tel{margin-top:12px;padding-bottom:7px} #maincontent.hm .hm-contact-tel b{font-size:1.6rem} #maincontent.hm .hm-reg{margin-top:12px} #maincontent.hm .hm-reg-field input{height:42px} #maincontent.hm .hm-reg-agree{margin-top:10px} #maincontent.hm .hm-reg-submit{height:46px;margin-top:12px} #maincontent.hm .hm-cond{margin-top:18px} #maincontent.hm .hm-cond li{padding-top:12px;padding-bottom:12px} #maincontent.hm .hm-cond b{height:2.2rem;font-size:2.2rem} #maincontent.hm .hm-cond b.is-ko{font-size:1.5rem} #maincontent.hm .hm-cond small{margin-top:6px} #maincontent.hm .hm-cond-note{margin-top:8px} } @media(max-width:1100px){ #maincontent.hm .hm-contact-inner{height:auto;max-width:none;justify-content:flex-start; padding:calc(var(--head) + clamp(10px,1.8vh,28px)) var(--gutter) clamp(48px,7vh,80px)} #maincontent.hm .hm-contact-top{display:contents} #maincontent.hm .hm-contact-side{order:1;max-width:640px} #maincontent.hm .hm-cond{order:2;grid-template-columns:repeat(2,minmax(0,1fr))} #maincontent.hm .hm-cond-note{order:3} #maincontent.hm .hm-contact-mapcol{order:4;max-width:720px;margin-top:clamp(28px,5vh,44px)} #maincontent.hm .hm-cond li{padding:18px 14px} #maincontent.hm .hm-cond li:nth-child(odd){padding-left:0;border-left:0} #maincontent.hm .hm-cond li:nth-child(n+3){border-top:1px solid #ffffff1f} #maincontent.hm .hm-cond li:last-child{grid-column:1/-1} } @media(max-width:480px){ #maincontent.hm .hm-reg-grid{grid-template-columns:1fr} } #maincontent.hm .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} #content .hm-ui{position:fixed;inset:0;z-index:900;pointer-events:none} #content .hm-scroll{position:absolute;right:2.6%;top:37%; display:flex;flex-direction:column;align-items:center;gap:14px;color:#ffffffb3} #content .hm-scroll-t{font-family:var(--en);font-size:.6rem;font-weight:700;letter-spacing:.28em; writing-mode:vertical-rl;text-orientation:mixed} #content .hm-scroll-line{position:relative;width:1px;height:132px;background:#ffffff33;overflow:hidden} #content .hm-scroll-line i{position:absolute;left:0;top:0;width:100%;height:40px; background:var(--accent);animation:hmScroll 2.1s var(--ease) infinite} @keyframes hmScroll{0%{transform:translateY(-100%)}60%,100%{transform:translateY(330%)}} #content .hm-ui.is-end{opacity:0;transition:opacity .4s} #content .hm-badge{position:fixed;left:2.6%;bottom:5%;z-index:901; display:grid;place-items:center;width:clamp(86px,7.6vw,110px);aspect-ratio:1; border-radius:50%;background:#241150e0;border:1px solid #ffffff2e; box-shadow:0 14px 40px #160B3373;transition:background .3s,transform .3s,opacity .4s,visibility .4s} #content .hm-badge:hover{background:var(--deep);transform:scale(1.05)} #content #maincontent.hm:has(#reservation.is-on)~.hm-badge{opacity:0;visibility:hidden;pointer-events:none} #content .hm-badge svg{position:absolute;inset:0;width:100%;height:100%; animation:hmSpin 16s linear infinite} #content .hm-badge text{font-family:var(--en);font-size:9.2px;font-weight:700; letter-spacing:.19em;fill:var(--accent)} #content .hm-badge-mid{position:relative;text-align:center;color:#fff; font-size:1rem;font-weight:800;line-height:1.3;letter-spacing:-.02em} @keyframes hmSpin{to{transform:rotate(360deg)}} @media(max-width:900px){#content .hm-badge{display:none}} /* 09-27zu 폰에서 내용을 가리고, 하단 바에 같은 「관심고객등록」 이 있다 */ @media(max-width:900px){ #content .hm-ui{display:none} #content .hm-badge{left:auto;right:14px;bottom:76px;width:72px} #content .hm-badge text{font-size:8px} #content .hm-badge-mid{font-size:.66rem} } @media(prefers-reduced-motion:reduce){ #content .site-header,#content .site-map,#content .site-map *, #content .hm-ui,#content .hm-ui *,#content .hm-badge,#content .hm-badge *, #maincontent.hm,#maincontent.hm *, #maincontent.hm *::before,#maincontent.hm *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important} #maincontent.hm .hm-w{opacity:1;transform:none;filter:none} #maincontent.hm .hm-hero-photo img{transform:none} #maincontent.hm .hm-hero-lead{opacity:1;transform:none} #maincontent.hm .hm-hero-pr{opacity:1} #maincontent.hm .hm-prem-bg.is-active{opacity:1;transform:none} #content .hm-scroll-line i{transform:translateY(46px)} } @media(prefers-reduced-motion:reduce) and (min-width:901px){ #maincontent.hm .hm-hero-pr{transform:none} } html.intro-pending{background:var(--paper)} html.intro-pending body{overflow:hidden} html.intro-pending::before{content:"";position:fixed;inset:0;z-index:1499;background:var(--paper)} html.intro-pending .site-header,html.intro-pending #maincontent,html.intro-pending .site-footer,html.intro-pending .hm-ui,html.intro-pending .hm-badge,html.intro-pending .mobile-actions{visibility:hidden} html.intro-pending #opening[hidden]{display:block!important;position:fixed;inset:0;z-index:1500;background:var(--paper)} #opening{position:fixed;inset:0;z-index:1500;overflow:hidden;color:var(--ink)} #content .opening-curtain{position:absolute;left:0;right:0;height:50.1%;background:var(--paper);z-index:0} #content .opening-curtain--top{top:0} #content .opening-curtain--bottom{bottom:0} #content .opening-registration{position:absolute;z-index:3;left:5%;right:5%;top:5%;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.19em;color:var(--muted)} #content .opening-registration::after{content:'';position:absolute;left:0;right:0;bottom:-18px;height:1px;background:var(--line);transform-origin:left} #content .opening-photo{position:absolute;overflow:hidden;z-index:2;opacity:0;will-change:transform,clip-path} #content .opening-photo::after{content:'';position:absolute;inset:8px;border:1px solid rgba(255,255,255,.36);border-radius:inherit;pointer-events:none} #content .opening-photo img{width:100%;height:100%;object-fit:cover;will-change:transform} #content .opening-photo--city{left:7%;top:17%;width:29%;height:62%;border-radius:250px 250px 0 0} #content .opening-photo--city img{object-position:32% center} #content .opening-photo--nature{right:7%;top:28%;width:29%;height:59%;border-radius:0 0 250px 250px} #content .opening-photo--nature img{object-position:50% center} #content .opening-photo--architecture{right:6%;top:21%;width:45%;height:auto;aspect-ratio:1800/1382;border-radius:30px} #content .opening-photo--architecture::after{border-radius:22px} #content .opening-photo--architecture img{width:100%;height:auto;object-fit:contain} #content .opening-message{position:absolute;left:6%;right:6%;text-align:center;top:36%;z-index:3;line-height:1.55;letter-spacing:-.035em;opacity:0;color:var(--deep)} #content .opening-message--one{font-size:clamp(32px,3.25vw,54px)} #content .opening-message small{display:block;font-size:10px;letter-spacing:.18em;font-weight:400;color:var(--muted);line-height:1.5;margin-bottom:27px} #content .opening-message>span{display:block;overflow:hidden;padding:0 .025em} #content .opening-message b{display:block;font-weight:400;will-change:transform} #content .opening-message--two{left:10%;right:46%;text-align:left;top:32%;font-size:clamp(38px,4vw,66px)} #content .opening-brand{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0} #content .opening-brand>i{width:1px;height:52px;background:var(--accent);margin-bottom:34px;transform-origin:top} #content .opening-brand img{width:340px;height:auto} #content .opening-brand>p{font-size:26px;letter-spacing:.25em;margin-top:23px;padding-left:.25em;color:var(--deep)} #content .opening-brand>span{font-size:11px;letter-spacing:.15em;margin-top:42px;color:var(--accent)} #content .opening-footer{position:absolute;z-index:10;left:5%;right:5%;bottom:28px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:10px;letter-spacing:.16em;color:var(--muted)} #content .opening-controls{display:flex;align-items:center;gap:24px} #content .opening-skip{display:flex;align-items:center;gap:25px;border:0;border-bottom:1px solid var(--ink);background:none;color:var(--ink);font-size:15px;font-family:inherit;padding:8px 0;cursor:pointer} #content .opening.is-follow .opening-skip{position:fixed;left:0;top:0;z-index:12; gap:15px;height:48px;padding:0 9px 0 23px;border:0;border-radius:999px; color:rgba(23,19,38,.78);font-size:12px;font-weight:600;letter-spacing:.2em; background:rgba(246,244,251,.42);backdrop-filter:blur(16px) saturate(1.35); box-shadow:inset 0 0 0 1px rgba(23,19,38,.13),inset 0 1px 0 rgba(255,255,255,.55), 0 16px 40px rgba(22,11,51,.10); transition:color .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease); will-change:transform} #content .opening.is-follow .opening-skip svg{width:15px;height:9px;overflow:visible; box-sizing:content-box;padding:10px;border-radius:50%; background:rgba(23,19,38,.06); transition:background .5s var(--ease),transform .5s var(--ease)} #content .opening.is-follow .opening-skip:hover{color:var(--ink); background:rgba(246,244,251,.66); box-shadow:inset 0 0 0 1px rgba(62,30,135,.22),inset 0 1px 0 rgba(255,255,255,.75), 0 20px 52px rgba(22,11,51,.16)} #content .opening.is-follow .opening-skip:hover svg{background:var(--accent);transform:translateX(3px)} #content .opening.is-follow .opening-skip:active{background:rgba(246,244,251,.82)} #content .opening-skip svg{width:27px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4} #content .opening-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--line);z-index:10} #content .opening-progress i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left} @media(max-width:1100px) and (orientation:portrait){ #content .opening-message--one{top:14%;font-size:38px} #content .opening-photo--city{left:9%;top:max(37%,calc(14% + 235px));width:34%;height:43%} #content .opening-photo--nature{right:9%;top:max(44%,calc(21% + 235px));width:34%;height:40%} #content .opening-message--two{font-size:43px;top:18%;right:7%;left:7%} #content .opening-photo--architecture{right:7%;top:auto;bottom:14%;width:64%} } @media(max-width:700px){ #content .opening-registration{left:6%;right:6%;top:5%;font-size:8px;letter-spacing:.08em} #content .opening-registration::after{bottom:-15px} #content .opening-photo--city{left:5%;top:max(38%,calc(17% + 178px));width:42%;height:36%;border-radius:140px 140px 0 0} #content .opening-photo--nature{right:5%;top:max(47%,calc(26% + 178px));width:42%;height:35%;border-radius:0 0 140px 140px} #content .opening-photo--architecture{right:5%;top:auto;bottom:17%;width:90%;height:auto} #content .opening-photo::after{inset:6px} #content .opening-photo--architecture::after{border-radius:24px} #content .opening-message{left:7%;right:7%;line-height:1.6} #content .opening-message--one{top:17%;font-size:30px} #content .opening-message small{font-size:9px;letter-spacing:.14em;margin-bottom:16px} #content .opening-message--two{top:21%;left:8%;right:8%;text-align:left;font-size:32px} #content .opening-brand>i{height:40px;margin-bottom:28px} #content .opening-brand img{width:245px} #content .opening-brand>p{font-size:23px;margin-top:18px} #content .opening-brand>span{font-size:9px;letter-spacing:.09em;margin-top:35px} #content .opening-footer{left:6%;right:6%;bottom:21px;gap:14px} #content .opening-footer>span{font-size:8px;max-width:105px;line-height:1.7} #content .opening-controls{gap:14px} #content .opening-skip{font-size:13px;gap:12px} #content .opening-skip svg{width:20px} } @media(max-width:360px){ #content .opening-message--one,#content .opening-message--two{font-size:27px} #content .opening-photo--city{top:max(38%,calc(17% + 164px))} #content .opening-photo--nature{top:max(47%,calc(26% + 164px))} } body.is-opening{overflow:hidden} /* 공용 CTA — 얇은 띠 (09-25o). 서브 14페이지 아래. 예전 판(글자 5rem · 여백 115px · 섹션 858px)은 한 화면을 다 차지했다 */ #maincontent .section--cta{padding:clamp(40px,5vw,72px) 0} #maincontent .section--cta .cta-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 40px; padding:clamp(28px,3vw,40px) clamp(24px,4vw,56px);border-radius:var(--radius);background:var(--deep2)} #maincontent .section--cta .cta-panel:after{display:none} #maincontent .section--cta .cta-panel .eyebrow{grid-column:1;padding:0;border:0;font-size:.7rem} #maincontent .section--cta .cta-panel h2{grid-column:1;max-width:none;margin:0;font-size:clamp(1.3rem,1.9vw,1.75rem);line-height:1.3;letter-spacing:-.03em} #maincontent .section--cta .cta-panel p{grid-column:1;margin:0;font-size:.9rem} #maincontent .section--cta .cta-actions{grid-column:2;grid-row:1/4;flex-wrap:nowrap} #maincontent .section--cta .btn{min-height:52px;padding:0 26px} #maincontent .section--cta .btn--accent{border-color:var(--accent);background:var(--accent);color:var(--deep2)} #maincontent .section--cta .btn--accent:hover{border-color:var(--accent-soft);background:var(--accent-soft)} #maincontent .section--cta .btn--ghost:hover{color:#fff} @media(max-width:640px){ #maincontent .section--cta .cta-panel{grid-template-columns:1fr} #maincontent .section--cta .cta-actions{grid-column:1;grid-row:auto;margin-top:16px} #maincontent .section--cta .btn{flex:1 1 0;padding:0 12px} } /* 세대안내 — 평면도와 입체도를 한 번에 (09-26f). 도면 선택 버튼 대신 주택형마다 한 묶음 · 펜트하우스 다락은 평면도 아래 칸 */ #maincontent .floor-sidebar h3 small{display:block;margin-top:6px;color:rgba(255,255,255,.68);font-size:.85rem;font-weight:600} #maincontent .floor-view{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;padding:28px;align-items:start} #maincontent .floor-view.is-active{display:grid} #maincontent .floor-view figure{margin:0;min-width:0} #maincontent .floor-view figure img{display:block;width:100%;height:auto} #maincontent .floor-view figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)} #maincontent .floor-view figcaption b{color:var(--deep);font-size:1.05rem;font-weight:800} #maincontent .floor-view figcaption span{color:var(--muted);font-size:.85rem} @media(max-width:640px){#maincontent .floor-view{grid-template-columns:minmax(0,1fr);gap:28px;padding:20px}} /* 세대안내 주택형 탭 — 콘텐츠 폭 전체를 같은 칸으로 (09-26k). 칸 수는 탭 개수대로 · 640 이하 네 칸 두 줄 */ #maincontent .floor-groups{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;overflow:visible;padding-bottom:0} #maincontent .floor-groups button{width:100%;padding-inline:8px} @media(max-width:640px){#maincontent .floor-groups{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} #maincontent .floor-groups button{padding-inline:4px;white-space:nowrap}} /* 구비서류 — 입주 절차 4단계 · 챙길 것 두 칸 (09-26m · 교육자료 p.38) */ #maincontent .move-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none} #maincontent .move-steps li{padding:26px 24px 28px;border:1px solid var(--line);border-radius:var(--radius);background:#fff} #maincontent .move-steps span{display:block;color:var(--deep);font-family:var(--en);font-size:.8rem;font-weight:700;letter-spacing:.14em} #maincontent .move-steps strong{display:block;margin:10px 0 4px;color:var(--ink);font-size:1.25rem;font-weight:800;letter-spacing:-.03em} #maincontent .move-steps em{display:block;color:var(--muted);font-size:.85rem;font-style:normal} #maincontent .move-steps p{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:.93rem;line-height:1.65} #maincontent .move-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-top:40px} #maincontent .move-lists h3{color:var(--deep);font-size:1.05rem;font-weight:800} #maincontent .move-lists .doc-list{margin-top:14px} @media(max-width:900px){#maincontent .move-steps{grid-template-columns:repeat(2,minmax(0,1fr))}#maincontent .move-lists{grid-template-columns:minmax(0,1fr);gap:24px}} @media(max-width:640px){#maincontent .move-steps{grid-template-columns:minmax(0,1fr)}#maincontent .move-steps li{padding:22px 20px}} /* 둘째 제목(.eyebrow + h2) — 페이지 첫 제목(sec-mj 36px)보다 작게 · 같은 명조 · 앞 내용과 틈 · 영문 글자 대비 (09-26m) 전에는 Pretendard 53px 로 첫 제목보다 컸고, 표 · 목록 바로 밑에 붙어 있었다. brand · contact · documents · layout · location · premium · sales */ #maincontent .page-intro h2:not(.sec-mj){margin-top:18px;font-family:var(--mj);font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:700;line-height:1.45;letter-spacing:-.02em;color:var(--deep)} #maincontent .page-intro .eyebrow{color:var(--deep)} #maincontent .section--deep .page-intro .eyebrow{color:var(--accent)} #maincontent .section--deep .page-intro h2:not(.sec-mj){color:#fff} #maincontent * + .page-intro{margin-top:clamp(72px,8vw,110px)} /* 홈 S5 — 노트북 높이(700 이하 · 1366 브라우저 657 · 1280 × 680)에서 아래 주석 · 「계약 안내 자세히」 여유 (09-26r) 820 이하 규칙만으로는 주석 끝이 화면 끝 2px 앞이었다. 내용은 세로 가운데 정렬이라 가장 큰 약도 칸을 줄여야 여유가 생긴다 */ @media(min-width:1101px) and (max-height:700px){ #maincontent.hm .hm-contact-inner{--map-h:clamp(220px,calc(100svh - 400px),453px);padding-bottom:10px} #maincontent.hm .hm-reg-submit{margin-top:10px} #maincontent.hm .hm-cond{margin-top:12px} #maincontent.hm .hm-cond li{padding-top:9px;padding-bottom:9px} #maincontent.hm .hm-cond small{margin-top:4px} } /* 홈 S2 입지 탭 — 이름이 「교통 · 도로」 처럼 길어져(09-26r) 640 이하에서 3 + 1 로 갈렸다 → 2 × 2 */ @media(max-width:640px){ #maincontent.hm .hm-loca-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} } /* 홈 S3 06 배경 perspective(1920 × 1474 세로로 긴 투시도) — 가운데로 자르면 1366 × 657 에서 탑 꼭대기가 잘린다 → 위쪽 20% 기준 (09-26y) */ #maincontent.hm .hm-prem-bg[src$="/perspective.webp"]{object-position:50% 20%} /* 단지배치도 — 그림 1장 + 유의사항 (09-26ze · 09-26zc 좌우 배치는 표를 빼면서 되돌림) 폭 = 화면 높이에 맞춤 (그림 1300 × 1223 + 캡션 약 70 · 헤더 76) · 600 ~ 900 · 가운데 */ #maincontent .siteplan-fig{max-width:clamp(600px,calc((100svh - 186px) * 1.063),900px);margin:0 auto} @media(max-width:900px){#maincontent .siteplan-fig{max-width:none}} /* 프리미엄 카드 (09-27f) — 아이콘을 번호 줄 왼쪽 원형 배지로 · 금색 윗선 · 번호 짙은 보라(금색 12px 는 대비 1.70) · 제목 고딕(09-27u) · 1280 이상 세 칸 (1101 ~ 1279 는 세 칸이면 제목 · 근거 줄이 접혀 두 칸) */ #maincontent .premium-story{border-top:2px solid var(--accent)} #maincontent .premium-story-meta{justify-content:flex-start;gap:16px} #maincontent .premium-story-badge{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:50%;background:var(--deep);color:#fff;transition:background .3s} #maincontent .premium-story-badge svg{width:36px;height:36px} #maincontent .premium-story:hover .premium-story-badge{background:var(--blue)} #maincontent .premium-story .premium-no{color:var(--deep)} #maincontent .premium-story h3{font-family:var(--kr);font-size:1.6rem;font-weight:800;line-height:1.4;letter-spacing:-.035em} /* 09-27u 명조 → 고딕 */ /* 카드 사진 (09-27v) — 16:9 · 카드 윗부분. 올리면 사진만 살짝 커진다 · 입체도(06)는 흰 바탕이라 아래 선으로 글 칸과 나눈다 */ #maincontent .premium-story-media{margin:0;aspect-ratio:16/9;overflow:hidden;background:#fff;border-bottom:1px solid var(--line)} #maincontent .premium-story-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} #maincontent .premium-story:hover .premium-story-media img{transform:scale(1.04)} #maincontent .premium-story-kicker .nw{white-space:nowrap} /* 「삼성역 20분대(예정)」 한 덩어리 */ @media(min-width:1280px){#maincontent .premium-detail{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:640px){#maincontent .premium-story-badge{width:56px;height:56px}#maincontent .premium-story-badge svg{width:31px;height:31px}#maincontent .premium-story h3{font-size:1.5rem}} @media(max-width:380px){#maincontent .premium-story h3{font-size:1.32rem}} /* 입지환경 윗부분 (09-27n) — 지도 왼쪽 · 6개 요약(아래 상세로 이동 링크) 오른쪽. 오른쪽 칸은 내용 폭(max-content) · 지도가 나머지 */ /* 09-27s — 목록을 지도와 같은 높이의 테두리 상자로 감싸고(지도 figure 와 같은 선 · 모서리 · 그림자), 여섯 줄을 같은 높이로 나눠 간격을 고르게 */ #maincontent .loc-top{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:40px;align-items:stretch} #maincontent .loc-top+.source-picture{margin-top:24px} #maincontent .loc-summary{display:flex;flex-direction:column;padding:10px 34px;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:0 20px 60px #1B0F3A12} #maincontent .loc-summary ul{display:grid;grid-template-rows:repeat(6,1fr);flex:1;margin:0;padding:0;list-style:none} #maincontent .loc-summary li{display:flex} #maincontent .loc-summary li+li{border-top:1px solid var(--line)} #maincontent .loc-summary a{flex:1;display:grid;grid-template-columns:48px auto;gap:16px;align-items:center;padding:15px 0;color:inherit;text-decoration:none} #maincontent .loc-summary-badge{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--deep);color:#fff;transition:background .3s} #maincontent .loc-summary-badge svg{width:28px;height:28px} #maincontent .loc-summary b{display:block;color:var(--deep);font-size:1rem;font-weight:800} /* 제목 옆 링크(사슬) 아이콘 — 아래 화살표는 「하락」 느낌이라 바꿨다 (09-27r). 글자색을 따르게 mask 로 칠한다 */ #maincontent .loc-summary b:after{content:"";display:inline-block;width:.95em;height:.95em;margin-left:7px;vertical-align:-.13em;background:currentColor;opacity:.5;transition:opacity .3s; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center/contain no-repeat} #maincontent .loc-summary a:hover b:after,#maincontent .loc-summary a:focus-visible b:after{opacity:1} #maincontent .loc-summary small{display:block;margin-top:3px;color:var(--muted);font-size:.9rem;line-height:1.5} #maincontent .loc-summary .nw{white-space:nowrap} /* 「GTX-C」 하이픈에서 끊기지 않게 */ #maincontent .loc-summary a:hover .loc-summary-badge,#maincontent .loc-summary a:focus-visible .loc-summary-badge{background:var(--blue)} #maincontent .loc-summary a:hover b{text-decoration:underline;text-underline-offset:3px} /* 지도 옆에 나란히 둘 수 없는 폭(1279 이하)에서는 요약 목록을 감추고 지도만 (09-27t 대표님 요청) — 바로 아래 상세 섹션이 같은 내용이다 */ @media(max-width:1279px){ #maincontent .loc-top{grid-template-columns:minmax(0,1fr)} #maincontent .loc-summary{display:none} } /* 페이지 인트로 문단 줄 길이 고르게 (09-27p) — 「…걸어서 / 누립니다.」 같은 끝말 한 단어 줄을 막는다. 지원 안 하는 브라우저는 지금처럼 */ #maincontent .page-intro p:not(.sec-key){text-wrap:balance} /* 팝업 (09-29 대표님) — 관리자 팝업(gocompany popup.inc.php). #hd_pop 은 #content 밖이라 #content 로 스코프하지 못한다 — 이 CSS 는 320 에서만 불린다 · 층: 인트로(#opening 1500)가 끝나면 팝업이 제일 먼저 보이게 고정 헤더(1002) 위로 — 1003 · 위치: 지금처럼 페이지 위 기준(absolute) — 스크롤하면 같이 올라가고 길면 스크롤해 아래를 본다 PC(901 이상) 관리자 입력값 그대로 · 태블릿(641 ~ 900) left 10 · top 100 (헤더 76 아래) · 폰(640 이하) left 10 · top 10 · 폭 100% − 20 · 높이 내용만큼 폰은 팝업이 여러 개여도 모두 같은 자리 (대표님). 폭 · 높이는 theme.css 의 640 이하 규칙(내용 폭 100% · 높이 auto)을 그대로 쓴다 */ #hd_pop{z-index:1003} @media(min-width:641px) and (max-width:900px){ #hd_pop .hd_pops{left:10px!important;top:100px!important} } @media(max-width:640px){ #hd_pop .hd_pops{left:10px!important;top:10px!important;width:calc(100% - 20px)!important} #hd_pop .hd_pops img{height:auto} /* 편집기가 넣은 height 속성 때문에 폭만 줄고 세로로 늘어나지 않게 */ } /* 마감재리스트 (/p/finishes · 10-01 대표님) — 탭은 평면정보 .floor-groups 그대로. 주택형마다 표 3개(마감재 · 가전 등 · 조명 등) PC · 태블릿은 표(대분류 띠 + 6칸), 640 이하는 한 줄씩 카드(사진 왼쪽 · 글 오른쪽). 내용 · 사진은 gen320finishes.py 가 엑셀에서 만든다 */ #maincontent .fin-panel{display:none} #maincontent .fin-panel.is-active{display:block} #maincontent .fin-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin:6px 0 30px;padding-bottom:16px;border-bottom:2px solid var(--deep)} #maincontent .fin-title{color:var(--ink);font-size:1.3rem;font-weight:800;letter-spacing:-.03em} #maincontent .fin-title b{color:var(--deep)} #maincontent .fin-date{color:var(--muted);font-size:.95rem;font-weight:600} #maincontent .fin-group+.fin-group{margin-top:56px} #maincontent .fin-group h3{margin-bottom:14px;color:var(--deep);font-size:1.12rem;font-weight:800} #maincontent .fin-table{width:100%;border-collapse:collapse;table-layout:fixed;border-top:2px solid var(--deep);background:#fff;font-size:.94rem;line-height:1.5} #maincontent .fin-table thead th{padding:13px 10px;border-bottom:1px solid var(--line);background:var(--mist);color:var(--deep2);font-size:.86rem;font-weight:800;text-align:center} #maincontent .fin-table thead th:nth-child(1){width:25%} #maincontent .fin-table thead th:nth-child(2){width:18%} #maincontent .fin-table thead th:nth-child(3){width:16%} #maincontent .fin-table thead th:nth-child(4){width:14%} #maincontent .fin-table thead th:nth-child(5){width:112px} #maincontent .fin-table thead th:nth-child(6){width:96px} /* 비고 칸을 정하지 않으면 901 에서 70px 남짓이라 「유상옵션」 이 넘쳤다 */ #maincontent .fin-table td{padding:8px 12px;border-bottom:1px solid var(--line);color:#3a3550;text-align:center;vertical-align:middle;overflow-wrap:anywhere} #maincontent .fin-cat th{padding:11px 14px;border-bottom:1px solid var(--line);background:var(--paper);color:var(--deep);font-size:.9rem;font-weight:800;text-align:left} #maincontent .fin-table td.fin-place{color:var(--ink);font-weight:700;text-align:left} #maincontent .fin-table td.fin-spec{color:var(--ink);font-weight:600} #maincontent .fin-table td small{display:block;margin-top:2px;color:var(--muted);font-size:max(13px,.84em);font-weight:500} /* 13px 아래로 안 내려가게 */ #maincontent .fin-pic{display:block;width:88px;height:88px;margin:0 auto;border:1px solid var(--line);background:#fff} #maincontent .fin-pic img{width:100%;height:100%;object-fit:contain} /* 칸 안에 비율 그대로 — max-height:100% 는 칸 높이를 못 읽어 긴 사진이 아래 줄로 넘쳤다 */ #maincontent .fin-pic.is-none{background:var(--paper)} #maincontent .fin-opt{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--deep);color:#fff;font-size:13px;font-weight:700;line-height:1.4;white-space:nowrap} #maincontent .fin-notes{margin-top:34px;line-height:1.7} @media(max-width:900px){ #maincontent .fin-table{font-size:.88rem} #maincontent .fin-table thead th:nth-child(5){width:92px} #maincontent .fin-table thead th:nth-child(1){width:24%} #maincontent .fin-table thead th:nth-child(2){width:17%} #maincontent .fin-table thead th:nth-child(3){width:15%} #maincontent .fin-table thead th:nth-child(4){width:13%} #maincontent .fin-table thead th:nth-child(6){width:88px} /* 768 에서 비고 63px 라 「유상옵션」(72px)이 넘쳤다 */ #maincontent .fin-opt{padding:3px 7px} #maincontent .fin-table td{padding:9px 8px} #maincontent .fin-pic{width:72px;height:72px} } /* 폰 — 표 머리를 숨기고(낭독기에는 남긴다) 줄마다 카드: 사진 76 | 위치 · 사양 · 규격 · 제조사 · 비고. 빈 규격 · 비고는 감춘다 */ @media(max-width:640px){ #maincontent .fin-head{margin-bottom:20px} #maincontent .fin-title{font-size:1.15rem} #maincontent .fin-table,#maincontent .fin-table tbody{display:block;border-top:0;background:none} #maincontent .fin-table tbody{padding:0 12px 4px;border-radius:12px;background:#fff} #maincontent .fin-table tbody+tbody{margin-top:12px} #maincontent .fin-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} #maincontent .fin-cat,#maincontent .fin-cat th{display:block} #maincontent .fin-cat th{margin:0 -12px;padding:10px 12px;border:0;border-radius:12px 12px 0 0;background:var(--mist)} /* 폰 바탕(--paper)과 같으면 띠가 안 보인다 */ #maincontent .fin-table tr:not(.fin-cat){display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:14px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)} #maincontent .fin-table tbody tr:last-child{border-bottom:0} #maincontent .fin-table td{display:block;padding:0;border:0;text-align:left;font-size:.92rem} #maincontent .fin-table td.fin-img{grid-column:1;grid-row:1 / span 6} #maincontent .fin-table td:not(.fin-img){grid-column:2} #maincontent .fin-table td.fin-place{color:var(--muted);font-size:.84rem;font-weight:600} #maincontent .fin-table td.fin-spec{margin-top:1px;font-size:1rem;font-weight:800} #maincontent .fin-table td.fin-size,#maincontent .fin-table td.fin-maker{margin-top:3px;color:#4a4560;font-size:.88rem} #maincontent .fin-table td.fin-size::before,#maincontent .fin-table td.fin-maker::before{content:attr(data-label);display:inline-block;min-width:3.4em;margin-right:6px;color:var(--muted);font-weight:600} #maincontent .fin-table td.fin-size small{display:block;margin-left:calc(3.4em + 6px)} #maincontent .fin-table td.is-empty{display:none} #maincontent .fin-table td.fin-note{margin-top:6px} #maincontent .fin-pic{width:76px;height:76px;margin:0} }