@charset "UTF-8";

@font-face {
  font-family: "HD";
  src: url("../font/HD-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HD";
  src: url("../font/HD-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HD";
  src: url("../font/HD-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== Common ===== */
:root {--point-color:#199ad6; --primary-color:#199ad6; --content-max:1680px;}
.inner {box-sizing:content-box; max-width:var(--content-max); margin:0 auto; padding:0 60px;}

/* 공통 섹션 타이틀 */
.sec_head {display:flex; align-items:flex-end; justify-content:space-between;}
.sec_head .sec_head_left {display:flex; flex-direction:column;}
.sec_head .eyebrow {display:block; font-size:14px; font-weight:700; color:var(--point-color); margin-bottom:24px;}
.sec_head .title {font-size:56px; font-weight:800; color:#111;}
.sec_head .sub {font-size:46px; font-weight:300; color:#111;}

/* reveal 효과 */
.reveal {opacity:0; transform:translateY(40px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in {opacity:1; transform:translateY(0);}

/* ===== Header ===== */
.header {position:fixed; top:0; left:0; width:100%; height:90px; z-index:1000; background:rgba(0,0,0,.3); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.2); transition:background .3s ease, border-color .3s ease;}
.header .header_inner {position:relative; box-sizing:content-box; max-width:var(--content-max); height:100%; margin:0 auto; padding:0 60px; display:flex; align-items:center; justify-content:space-between;}
.header .logo {flex-shrink:0;}
.header .logo a {display:inline-block;}
.header .logo a img {height:33px; width:auto;}

/* 헤더 흰색 버전 */
.header.on {background:#fff; border-bottom-color:rgba(0,0,0,.08); backdrop-filter:none; -webkit-backdrop-filter:none;}
.header.on .header_btn .btn_apply {}
.header.on .gnb_1depth > li > a {color:#111;}
.header.on .mo_btn span {background:#111;}

/* ===== GNB 1depth ===== */
.header .gnb {position:absolute; left:50%; top:0; transform:translateX(-50%); height:100%;}
.header .gnb_1depth {display:flex; align-items:center; height:100%; gap:80px;}
.header .gnb_1depth > li {position:relative; height:100%; display:flex; align-items:center;}
.header .gnb_1depth > li > a {position:relative; display:inline-block; font-size:20px; font-weight:700; color:#fff; padding-bottom:4px; transition:color .3s ease;}
.header .gnb_1depth > li > a::after {content:''; position:absolute; left:0; bottom:-32px; width:0; height:3px; background:var(--point-color); transition:width .35s ease;}
.header .gnb_1depth > li:hover > a,
.header .gnb_1depth > li.sub_on > a,
.header .gnb_1depth > li.current > a {color:var(--point-color);}
.header .gnb_1depth > li:hover > a::after,
.header .gnb_1depth > li.sub_on > a::after,
.header .gnb_1depth > li.current > a::after {width:100%;}
.header.on .gnb_1depth > li.current > a {color:var(--point-color);}

/* 모바일 화살표 */
.header .gnb_1depth > li .arrow {display:none;}

/* ===== GNB 2depth ===== */
.header .gnb_sub {position:absolute; top:90px; left:50%; transform:translateX(-50%) translateY(-12px); width:100vw; background:#f3f4f6; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease, transform .35s ease, visibility .35s ease;}
.header .gnb.open .gnb_sub {opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto;}
.header .gnb_sub_inner {position:relative; max-width:var(--content-max); margin:0 auto; padding:30px 60px; min-height:262px;}
.header .gnb_sub_col {position:absolute; top:30px; white-space:nowrap; text-align:center; transform:translateX(-50%);}
.header .gnb_sub_col ul li + li {margin-top:8px;}
.header .gnb_sub_col ul li a {display:inline-block; font-size:16px; line-height:34px; color:#757575; transition:color .25s ease;}
.header .gnb_sub_col ul li a:hover {color:var(--point-color);}

/* ===== 청약신청조회 버튼 ===== */
.header .header_btn {flex-shrink:0;}
.header .btn_apply {position:relative; display:inline-flex; align-items:center; gap:8px; height:45px; padding:0 32px; overflow:hidden; border:1px solid var(--point-color); border-radius:22px; font-size:16px; font-weight:600; color:var(--point-color);}
.header .btn_apply::before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:var(--point-color); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; z-index:0;}
.header .btn_apply:hover::before {transform:scaleX(1);}
.header .btn_apply_icon {position:relative; z-index:1; width:16px; height:16px;}
.header .btn_apply_icon img {position:absolute; top:0; left:0; width:16px; height:16px; transition:opacity .35s ease;}
.header .btn_apply_icon img.hover {opacity:0;}
.header .btn_apply:hover .btn_apply_icon img.default {opacity:0;}
.header .btn_apply:hover .btn_apply_icon img.hover {opacity:1;}
.header .btn_apply_txt {position:relative; z-index:1; color:inherit; transition:color .35s ease;}
.header .btn_apply:hover .btn_apply_txt {color:#fff;}

/* ===== 모바일 햄버거 버튼 ===== */
.header .mo_btn {display:none; flex-direction:column; justify-content:center; gap:6px; width:32px; height:32px;}
.header .mo_btn span {display:block; width:100%; height:2px; background:#fff; transition:background .3s ease, transform .3s ease, opacity .3s ease;}
.header .mo_btn.active span:nth-child(1) {transform:translateY(8px) rotate(45deg);}
.header .mo_btn.active span:nth-child(2) {opacity:0;}
.header .mo_btn.active span:nth-child(3) {transform:translateY(-8px) rotate(-45deg);}

/* ===== Hero ===== */
.hero {position:relative; width:100%; height:100vh; min-height:700px; overflow:hidden;}
.hero .hero_video_wrap {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
.hero .hero_video {position:absolute; top:50%; left:50%; width:100%; height:100%; object-fit:cover; transform:translate(-50%,-50%);}
/* 아래 hero_bg(이미지 슬라이드) 스타일은 영상으로 교체되면서 미사용 상태 — 마크업/JS와 함께 주석 처리 대신 남겨둠(타임라인 복구 시 함께 필요) */
.hero .hero_bg_wrap {position:absolute; top:0; left:0; width:100%; height:100%;}
.hero .hero_bg {position:absolute; top:0; left:0; width:100%; height:100%; background-position:center; background-size:cover; background-repeat:no-repeat; opacity:0; transform:scale(1.15); transition:opacity 1s ease; z-index:1;}
.hero .hero_bg.on {opacity:1; z-index:2; animation:heroZoomOut 8s linear forwards;}

@keyframes heroZoomOut {
	from {transform:scale(1.15);}
	to {transform:scale(1);}
}

.hero .hero_cont {position:relative; box-sizing:content-box; z-index:3; max-width:var(--content-max); height:100%; margin:0 auto; padding:0 60px; display:flex; flex-direction:column; justify-content:center;}
.hero .hero_txt {filter:drop-shadow(0 4px 16px rgba(0,0,0,.35));}
.hero .hero_txt .hero_title {max-width:100%; height:auto;}
.hero .hero_txt .hero_desc {margin-top:48px; font-size:36px; font-weight:500; line-height:56px; color:#fff; text-shadow:0 4px 16px rgba(0,0,0,.35); font-family:"HD";}

/* 타임라인 */
.hero .hero_timeline {position:absolute; left:60px; right:60px; bottom:100px; display:flex; gap:32px;}
.hero .hero_timeline .timeline_item {display:flex; flex-direction:column; align-items:flex-start; gap:16px; flex:1;}
.hero .hero_timeline .timeline_item .num {font-size:16px; font-weight:700; color:rgba(255,255,255,.4); transition:color .3s ease;}
.hero .hero_timeline .timeline_item.on .num {color:#fff;}
.hero .hero_timeline .timeline_item .bar {position:relative; width:100%; height:2px; background:rgba(255,255,255,.4);}
.hero .hero_timeline .timeline_item.on .bar {background:rgba(255,255,255,1);}
.hero .hero_timeline .timeline_item .bar_fill {position:absolute; top:0; left:0; width:0; height:100%; background:var(--point-color);}
.hero .hero_timeline .timeline_item.on .bar_fill {animation:barFill 8s linear forwards;}

@keyframes barFill {
	from {width:0%;}
	to {width:100%;}
}

/* ===== Premium ===== */
.premium {padding:100px 0;}
.premium .sec_head {margin-bottom:60px;}

.premium_list {display:flex; gap:24px;}
.premium_item {flex:1;}
.premium_item:nth-child(2) {transition-delay:.15s;}
.premium_item:nth-child(3) {transition-delay:.3s;}

.premium_img {border-radius:20px; overflow:hidden;}
.premium_img img {display:block; width:100%; height:auto;}

.premium_txt {margin-top:32px;}
.premium_tit {display:block; font-size:32px; font-weight:800; color:#111;}
.premium_desc {margin-top:16px; font-size:18px; font-weight:400; line-height:26px; color:#757575;}

/* ===== Move-in Condition (최상의 입주조건) ===== */
.movein {display:flex; width:100%;}
.movein_left {width:50%; background:#f3f4f6;}
.movein_left_inner {box-sizing:content-box; max-width:840px; padding:80px 0; padding-left:max(60px, calc((100vw - var(--content-max)) / 2));}
.movein_desc {margin-top:24px; font-size:20px; font-weight:400; color:#757575;}

.movein_list {margin-top:60px;}
.movein_item_inner {position:relative; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; height:120px; padding-left:50px;}
.movein_item_inner .en {display:block; font-size:18px; font-weight:400; line-height:1.4; color:#757575;}
.movein_item_inner .kr {display:block; margin-top:8px; font-size:26px; font-weight:600; line-height:1.3; color:#111;}

.movein_item.active {cursor:default;}
.movein_item:not(.active) {cursor:pointer;}
.movein_item.active .movein_item_inner {z-index:5; width:calc(100% + 100px); background:#0b3d8f; border-radius:14px; box-shadow:0 3px 13px rgba(0,0,0,.26);}
.movein_item.active .movein_item_inner .en,
.movein_item.active .movein_item_inner .kr {color:#fff;}

.movein_right {position:relative; width:50%; overflow:hidden;}
.movein_img {position:absolute; top:0; left:0; width:100%; height:100%; background-position:center; background-size:cover; background-repeat:no-repeat; opacity:0; transition:opacity .8s ease;}
.movein_img.on {opacity:1;}

/* ===== Information (단지안내) ===== */
.info {padding:100px 0;}
.info .sec_head {margin-bottom:60px;}

.info_list {display:flex; align-items:flex-start; gap:24px;}
.info_item {flex:1;}
.info_item:nth-child(2) {margin-top:80px; transition-delay:.15s;}
.info_item:nth-child(3) {transition-delay:.3s;}
.info_item img {display:block; width:100%; height:auto; border-radius:20px;}

/* ===== CTA + Footer 배경 wrap ===== */
.bottom_area {background-color:#13294a; background-image:url('../images/cta_bg.jpg'); background-position:bottom center; background-size:cover; background-repeat:no-repeat;}

/* ===== CTA (지도 / 연락처 / 바로가기) ===== */
.cta {padding:120px 0 38px;}

.cta_row {display:flex; gap:32px;}
.cta_map {box-sizing:border-box; width:calc(50% - 16px); min-width:0; border-radius:20px; overflow:hidden;}
.cta_map img {display:block; width:100%; height:100%; object-fit:cover;}

.cta_info {box-sizing:border-box; width:calc(50% - 16px); min-width:0; padding:60px 50px; border-radius:20px; background:var(--point-color); color:#fff;}
.cta_info_top {font-size:18px; font-weight:700;}
.cta_logo {display:block; margin-top:16px; max-width:100%; height:auto;}

.cta_fields {display:flex; flex-direction:column; gap:32px; margin-top:48px;}
.cta_field_label {display:block; font-size:15px; font-weight:600; margin-bottom:10px;}
.cta_field_value {font-size:20px; font-weight:400;}
.cta_field_row {display:flex; gap:60px;}
.cta_field_row .cta_field {flex:1;}

/* 바로가기 4개 */
.cta_links {display:flex; gap:32px; margin-top:32px;}
.cta_link {box-sizing:border-box; flex:1; height:140px; display:flex; align-items:center; justify-content:space-between; padding:32px; border-radius:20px; background:#fff; transition:transform .3s ease, box-shadow .3s ease;}
.cta_link:hover {transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.15);}
.cta_link_left {display:flex; align-items:center; gap:16px;}
.cta_link_left img {width:50px; height:50px; object-fit:contain;}
.cta_link_left strong {font-size:26px; font-weight:700; color:#111;}
.cta_link_arrow {position:relative; flex-shrink:0; width:46px; height:46px;}
.cta_link_arrow img {position:absolute; top:0; left:0; width:46px; height:46px; transition:opacity .3s ease;}
.cta_link_arrow img.hover {opacity:0;}
.cta_link:hover .cta_link_arrow img.default {opacity:0;}
.cta_link:hover .cta_link_arrow img.hover {opacity:1;}

/* ===== Footer (서브페이지 공통 사용) ===== */
.footer {padding:56px 0; color:#fff;}
.footer_top {display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px;}
.footer_logo {height:53px; width:auto;}
.footer_slogan {font-size:30px; font-weight:300;}
.footer_slogan strong {font-weight:700;}

.footer_line {margin:40px 0 48px; height:1px; background:rgba(255,255,255,.2);}

.footer_bottom {display:flex; align-items:flex-start; justify-content:space-between; gap:40px;}
.footer_info p {font-size:16px; font-weight:400; line-height:32px; color:#fff;}
.footer_copy {margin-top:8px; font-size:13px; color:#999 !important;}
.footer_links {display:flex; gap:24px; flex-shrink:0;}
.footer_links a {font-size:16px; color:#fff;}

/* ================= Responsive ================= */

/* 1600px 이하 : 좌우 여백 축소 */
@media screen and (max-width:1600px) {
	.header .header_inner {padding:0 40px;}
	.header .gnb_1depth {gap:60px;}
	.hero .hero_cont {padding:0 40px;}
	.hero .hero_timeline {left:40px; right:40px;}
	.inner {padding:0 40px;}
}

/* 1280px 이하 : 모바일 메뉴 전환 */
@media screen and (max-width:1280px) {
	.header .header_inner {padding:0 24px;}
	.header .header_btn {display:none;}
	.header .mo_btn {display:flex; z-index:1002;}

	.header .gnb {position:fixed; top:90px; left:0; width:100%; height:calc(100vh - 90px); transform:none; background:#fff; overflow-y:auto; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;}
	.header .gnb.active {opacity:1; visibility:visible;}

	.header .gnb_1depth {flex-direction:column; align-items:stretch; height:auto; gap:0; padding:20px 0;}
	.header .gnb_1depth > li {height:auto; display:block; border-bottom:1px solid #eee;}
	.header .gnb_1depth > li > a {display:block; padding:18px 24px; color:#111;}
	.header .gnb_1depth > li > a::after {display:none;}
	.header .gnb_1depth > li.active > a {color:var(--point-color);}

	.header .gnb_1depth > li .arrow {display:block; position:absolute; top:50%; right:24px; width:9px; height:9px; margin-top:-7px; border-right:2px solid #111; border-bottom:2px solid #111; transform:rotate(45deg); transition:transform .3s ease;}
	.header .gnb_1depth > li.active .arrow {transform:rotate(-135deg); margin-top:-3px;}

	.header .gnb_sub {position:static; display:none;}
	.header .gnb_sub_inner {min-height:0;}
	.header .gnb_1depth > li > .gnb_sub_col {position:static; top:auto; left:auto; transform:none; white-space:normal; text-align:left; max-height:0; overflow:hidden; background:#f3f4f6; transition:max-height .3s ease;}
	.header .gnb_1depth > li > .gnb_sub_col ul {padding:16px 24px; text-align:left;}
}

/* 1024px 이하 */
@media screen and (max-width:1024px) {
	.hero .hero_txt .hero_desc {font-size:26px; line-height:40px; margin-top:32px;}
	.sec_head .title {font-size:38px;}
	.sec_head .sub {font-size:30px;}
	.premium {padding:100px 0;}
	.premium_list {flex-direction:column; gap:40px;}

	.movein {flex-direction:column;}
	.movein_left,
	.movein_right {width:100%;}
	.movein_left_inner {padding:100px 60px; max-width:none;}
	.movein_right {min-height:420px;}
	.movein_item_inner {height:100px; padding-left:36px;}
	.movein_item.active .movein_item_inner {width:100%;}
	.movein_item_inner .kr {font-size:22px;}

	.info {padding:100px 0;}
	.info_list {flex-direction:column; gap:40px;}
	.info_item:nth-child(2) {margin-top:0;}

	.cta {padding:100px 0 60px;}
	.cta_row {flex-direction:column;}
	.cta_map {width:100%; height:360px;}
	.cta_info {width:100%; padding:40px;}
	.cta_field_row {flex-direction:column; gap:16px;}
	.cta_field_value {font-size:18px;}
	.cta_links {flex-wrap:wrap; gap:16px;}
	.cta_link {flex:1 1 calc(50% - 16px);}
	.cta_link_left strong {font-size:20px;}

	.footer_slogan {font-size:22px;}
}

/* 768px 이하 */
@media screen and (max-width:768px) {
	.header {height:70px;}
	.header .header_inner {padding:0 20px;}
	.header .logo a img {height:25px;}
	.header .gnb {top:70px; height:calc(100vh - 70px);}

	.hero .hero_cont {padding:0 20px;}
	.hero .hero_txt .hero_desc {font-size:20px; line-height:30px; margin-top:24px;}
	.hero .hero_timeline {left:20px; right:20px; bottom:30px; gap:16px;}
	.hero .hero_timeline .timeline_item {gap:8px;}
	.hero .hero_timeline .timeline_item .num {font-size:13px;}

	.inner {padding:0 20px;}
	.sec_head {flex-direction:column; align-items:flex-start;}
	.sec_head .eyebrow {font-size:13px; margin-bottom:8px;}
	.sec_head .title {font-size:28px;}
	.sec_head .sub {font-size:18px; margin-top:12px;}

	.premium {padding:70px 0;}
	.premium .sec_head {margin-bottom:36px;}
	.premium_tit {font-size:22px;}
	.premium_desc {font-size:15px; line-height:22px;}

	.movein_left_inner {padding:70px 24px;}
	.movein_desc {font-size:16px; line-height:24px;}
	.movein_list {margin-top:40px;}
	.movein_item_inner {height:auto; padding:16px 24px;}
	.movein_item_inner .en {font-size:13px;}
	.movein_item_inner .kr {font-size:18px; margin-top:4px;}
	.movein_right {min-height:280px;}
    
	.cta {padding:60px 0 20px 0;}
	.cta_map {height:220px;}
	.cta_info {padding:28px;}
	.cta_fields {margin-top:24px; gap:20px;}
	.cta_info_top {font-size:15px;}
	.cta_field_value {font-size:15px;}

	.cta_link {flex:1 1 100%;}
	.cta_link_left strong {font-size:18px;}

	.footer {padding:60px 0 30px;}
	.footer_top {flex-direction:column; align-items:flex-start; gap:16px;}
	.footer_logo {height:40px;}
	.footer_slogan {font-size:18px;}
	.footer_bottom {flex-direction:column; gap:16px;}
	.footer_info p {font-size:13px; line-height:26px;}
	.footer_links a {font-size:13px;}
	.footer_line {margin:24px 0;}
}

/* 480px 이하 */
@media screen and (max-width:480px) {
	.hero .hero_txt .hero_desc {font-size:16px; line-height:26px;}
	.hero .hero_timeline {gap:10px;}

	.cta_link {height:auto; min-height:100px; padding:20px;}
	.cta_link_left {gap:12px;}
	.cta_link_left img {width:36px; height:36px;}
	.cta_link_left strong {font-size:17px;}
	.cta_link_arrow {width:34px; height:34px;}
	.cta_link_arrow img {width:34px; height:34px;}
}