@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */

/* ========================================
   공통 레이아웃
======================================== */
#skipToContent a {z-index:100000; position:absolute; top:0; left:0; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden;}
#skipToContent a:focus,#skipToContent a:active {width:200px; height:50px; background:#21272e; color:#fff; font-size:14px; font-weight:bold; text-align:center; text-decoration:none; line-height:50px;}
#wrapper {width:100%;}
.contain {width:100%; max-width:calc(var(--sub-inner-max) + var(--space-container) * 2); margin:0 auto; padding:0 var(--space-container);}

.only-desktop {display:block;}
.only-desktop-tablet {display:block;}
.only-tablet-mobile {display:none;}
.only-tablet {display:none;}
.only-mobile {display:none;}

/* ========================================
   1. 헤더 영역
======================================== */
#header {position:fixed; top:0; left:0; right:0; z-index:200; height:var(--gnb-h); background:rgba(0,0,0,.3); transition:background .25s ease,box-shadow .25s ease;}
#header .contain {height:100%; display:flex; align-items:center; justify-content:space-between;}
#header .sitelogo {position:relative; height:36px; flex-shrink:0; line-height:1;}
#header .sitelogo a {display:block; position:relative; height:36px;}
#header .logo-img {height:36px; width:auto; display:block; transition:opacity .25s ease;}
#header .logo-img--blue {position:absolute; left:0; top:0; opacity:0;}
body#sub #header, html.header-fixed #header, #header:hover {background:#fff; box-shadow:0 4px 24px rgba(12,31,51,.08); border-bottom:1px solid var(--color-hairline);}
body#sub #header .logo-img--white, html.header-fixed #header .logo-img--white, #header:hover .logo-img--white {opacity:0;}
body#sub #header .logo-img--blue, html.header-fixed #header .logo-img--blue, #header:hover .logo-img--blue {opacity:1;}
#gnb {display:flex; align-items:center; height:100%;}
#gnb > ul {display:flex; align-items:center; height:100%;}
#gnb > ul > li {position:relative; height:100%; display:flex; align-items:center;}
#gnb > ul > li > a {display:flex; align-items:center; height:var(--gnb-h); padding:0 28px; font-size:var(--font-size-16); line-height:1.2; font-weight:700; color:rgba(255,255,255,.88); text-align:center;}
body#sub #gnb > ul > li > a, html.header-fixed #gnb > ul > li > a, #header:hover #gnb > ul > li > a {color:var(--color-steel);}
body#sub #gnb > ul > li.active > a, body#sub #gnb > ul > li > a:hover, html.header-fixed #gnb > ul > li.active > a, #header:hover #gnb > ul > li.active > a, #header:hover #gnb > ul > li > a:hover {color:var(--color-main);}
#gnb .submenu {display:none; position:absolute; top:100%; left:50%; min-width:180px; background:#fff; border-radius:8px; box-shadow:0 12px 40px rgba(0,0,0,.15); padding:8px 0; z-index:210; transform:translateX(-50%);}
#gnb > ul > li.active .submenu, #gnb > ul > li:hover .submenu {display:block;}
#gnb .submenu ul {display:block;}
#gnb .submenu li a {display:block; padding:10px 20px; font-size:var(--font-size-16); font-weight:600; color:var(--color-steel); white-space:nowrap;}
#gnb .submenu li a:hover, #gnb .submenu li.active a {background:var(--color-surface-soft); color:var(--color-point);}
#header .submenu-bg {display:none;}
.btn-m-menu {display:none; width:28px; height:22px; position:relative;}
.btn-m-menu span {display:block; width:24px; height:2px; background:#fff; margin:5px 0;}
body#sub .btn-m-menu span, html.header-fixed .btn-m-menu span, #header:hover .btn-m-menu span {background:var(--color-main);}
.gnb:not(.gnb--solid):not(.gnb--hover) .gnb-link:hover,.gnb:not(.gnb--solid):not(.gnb--hover) .gnb-link.gnb-active{color:#fff;}

.mobile-navigation {display:none;}
.mobile-navigation .home {margin-bottom:30px;}
.mobile-navigation .home img {height:36px;}
.mobile-navigation .nav-menu > ul > li > a {display:block; padding:14px 0; font-size:16px; font-weight:600; border-bottom:1px solid var(--color-hairline); color:var(--color-main);}
.mobile-navigation .submenu {display:none; padding:8px 0 12px 12px;}
.mobile-navigation .submenu a {display:block; padding:8px 0; font-size:14px; color:var(--color-steel);}
.mobile-navigation .close {position:absolute; top:24px; right:16px; width:26px; height:26px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:2px; background:#242424; border-radius:2px;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none;}


html.menu-opened .mobile-navigation {display:block; position:fixed; inset:0; background:#fff; z-index:300; overflow:auto; padding:24px 28px;}
html.menu-opened .mobile-overlay {display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:290;}

/* ========================================
   2. 메인 영역
======================================== */
body#main #container {padding-top:0;}
.main-visual{position:relative; width:100%; height:100vh; min-height:600px; margin-top:0; overflow:hidden;}
.main-visual .items,.main-visual .slick-list,.main-visual .slick-track,.main-visual .item,.main-visual .slick-slide{height:100%;}
.main-visual .item{position:relative; overflow:hidden; height:100vh;}
.main-visual .item::before{content:''; position:absolute; inset:0; background:rgba(0,0,0,.36); z-index:1;}
.main-visual .item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 52%; transform:scale(1.08); transform-origin:center center; transition:transform 6.5s ease-out;}
.main-visual .active .item img,.main-visual .items:not(.slick-initialized) .item:first-child img{transform:scale(1.18);}
.main-visual .item .video-js,
.main-visual .item video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.main-visual .item iframe {position:absolute; top:50%; left:50%; width:100vw; height:100vh; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.main-visual .caption{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; width:100%; padding:0 20px;}
.main-visual .caption .ani{opacity:0; transform:translateY(30px); transition:opacity 1s ease,transform 1s ease;}
.main-visual .active .caption .ani,.main-visual .items:not(.slick-initialized) .item:first-child .caption .ani{opacity:1; transform:translateY(0);}
.main-visual .active .caption .hero-label{transition-delay:.15s;}
.main-visual .active .caption .hero-title{transition-delay:.35s;}
.main-visual .active .caption .hero-desc{transition-delay:.55s;}
.main-visual .active .caption .hero-cta{transition-delay:.75s;}
.main-visual .slick-dots{position:absolute; bottom:112px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; z-index:5;}
.main-visual .slick-dots li{width:auto; height:auto; margin:0;}
.main-visual .slick-dots li button{width:16px; height:16px; padding:0; border:none; border-radius:100px; background:rgba(255,255,255,.35); font-size:0; line-height:0; cursor:pointer;}
.main-visual .slick-dots li.slick-active button{width:56px; background:var(--color-point);}

@media (min-aspect-ratio: 16/9) {
	.main-visual .item iframe {height:56.25vw;}
}
@media (max-aspect-ratio: 16/9) {
	.main-visual .item iframe {width:177.78vh;}
}


/* 모든 섹션 동일: 위 80 + 아래 80 → 인접 섹션 간 총 160px */
.main-sec{position:relative; padding-top:var(--sec-gap)!important; padding-bottom:var(--sec-gap)!important; overflow:hidden;}
.genst-side-label{position:absolute; left:100px; top:var(--sec-gap); writing-mode:vertical-rl; text-orientation:mixed; font-size:11px; color:var(--color-steel); white-space:nowrap; z-index:2; line-height:1.4; letter-spacing:0;}
.genst-side-label__sec{font-weight:800; color:var(--color-ink-deep);}
.genst-side-label__sep{font-weight:400; opacity:.45;}
.genst-side-label__brand{font-weight:400; color:var(--color-steel); opacity:.72;}
.main-about>.inner,.main-product>.inner,.main-project>.inner,.main-news>.inner,.main-cta>.inner{max-width:var(--sub-inner-max); padding-left:0; padding-right:0;}
.main-cta > .contain {max-width:var(--sub-inner-max);}
.about-intro-grid{display:flex; align-items:center; justify-content:flex-start; gap:80px; margin-bottom:64px;}
.main-product>.inner,.main-product>.contain{position:relative; z-index:1;}
.product-hscroll-wrap{position:relative; padding:0 56px;}
.main-product .swiper{overflow:hidden; padding-top:12px;}
.main-product .swiper-slide{height:auto;}
.product-scroll-nav{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:24px;}
.product-scroll-arr{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:2px solid var(--color-point); background:#fff; color:var(--color-point); font-size:var(--font-size-20); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; z-index:3;}
.product-scroll-arr.product-scroll-prev{left:0;}
.product-scroll-arr.product-scroll-next{right:0;}
.product-scroll-arr:hover{background:var(--color-point); color:#fff;}
.main-product .swiper-pagination{position:static; display:flex; gap:8px; align-items:center; justify-content:center;}
.main-product .swiper-pagination-bullet{width:8px; height:8px; border-radius:100px; background:rgba(255,255,255,.28); opacity:1; margin:0; transition:all .3s;}
.main-product .swiper-pagination-bullet-active{width:24px; background:var(--color-point);}
.project-thumb-row{margin-bottom:48px;}
.project-thumb-row .swiper{overflow:visible;}
.project-thumb-row .swiper-wrapper{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.project-thumb-row .swiper-slide{height:auto; width:auto;}
.project-thumb-row .swiper-pagination{display:none; position:static; align-items:center; justify-content:center; gap:8px; margin-top:20px;}
.project-thumb-row .swiper-pagination-bullet{width:8px; height:8px; border-radius:100px; background:rgba(12,31,51,.2); opacity:1; margin:0; transition:all .3s;}
.project-thumb-row .swiper-pagination-bullet-active{width:24px; background:var(--color-point);}
.main-news>.inner,.main-news>.contain{position:relative; z-index:1;}
.news-panel-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:stretch;}
.btn-primary{display:inline-flex; align-items:center; justify-content:center; background:#000; color:#fff; padding:14px 32px; border-radius:var(--radius-btn); font-size:var(--font-size-15); font-weight:600; border:none; cursor:pointer;}
.btn-outline{display:inline-flex; align-items:center; justify-content:center; background:transparent; color:#fff; padding:12px 28px; border-radius:var(--radius-btn); font-size:var(--font-size-15); font-weight:600; border:2px solid rgba(255,255,255,.55); cursor:pointer;}
.btn-point{display:inline-flex; align-items:center; justify-content:center; background:var(--color-point); color:#fff; padding:12px 28px; border-radius:var(--radius-btn); font-size:14px; font-weight:600; border:none; cursor:pointer;}
.btn-pill-light,.product-tab-btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 28px; border-radius:100px; border:1px solid rgba(255,255,255,.35); background:transparent; color:rgba(255,255,255,.85); font-size:var(--font-size-15); font-weight:600; cursor:pointer; transition:all .2s;}
.btn-pill-light.active,.btn-pill-light:hover,.product-tab-btn.active,.product-tab-btn:hover{background:var(--color-point); border-color:var(--color-point); color:#fff;}
.sec-label{font-size:11px; font-weight:700; text-transform:uppercase; color:var(--color-point); margin-bottom:12px; display:block;}
.sec-num{font-size:12px; font-weight:800; color:var(--color-point); margin-bottom:8px; display:block;}
.sec-title{font-size:var(--font-size-38); font-weight:700; color:var(--color-ink-deep); line-height:1.3; margin-bottom:14px;}
.sec-desc{font-size:var(--font-size-16); color:var(--color-steel); line-height:1.75;}
.link-more{font-size:14px; font-weight:600; color:var(--color-point);}
.hero-label{font-size:var(--font-size-18); font-weight:700; color:var(--color-point);}
.hero-title{font-size:var(--font-size-56); font-weight:700; color:#fff; line-height:1.22;}
.hero-desc{font-size:var(--font-size-22); color:rgba(255,255,255,.84); max-width:580px; line-height:1.75; margin:0 auto;}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:20px;}
.hero-cta .btn-pill-light,.main-cta .btn-pill-light{padding:16px 44px; font-size:var(--font-size-18); min-height:52px; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.hero-cta .btn-pill-light:hover,.hero-cta .btn-pill-light.active,.main-cta .btn-pill-light:hover,.main-cta .btn-pill-light.active{background:var(--color-point); border-color:var(--color-point); backdrop-filter:none; -webkit-backdrop-filter:none;}
.genst-sec-head{padding:0 0 var(--sec-head-gap); text-align:center; margin:0;}
.genst-sec-title{font-size:var(--font-size-52); font-weight:800; color:var(--color-ink-deep); line-height:1; margin:0 0 20px;}
.genst-sec-desc{font-size:var(--font-size-18); color:var(--color-steel); line-height:1.7; max-width:720px; margin:0 auto;}
.genst-en{display:block; font-size:12px; font-weight:600; color:var(--color-steel); margin-bottom:6px;}
.genst-ko{font-size:var(--font-size-20); font-weight:700; color:var(--color-main); margin-bottom:16px; line-height:1.35;}
.genst-ko a{display:inline-flex; align-items:center; gap:6px; transition:color .2s;}
.genst-ko a:hover{color:var(--color-point);}
.genst-ko span{font-weight:400; color:var(--color-point);}
.genst-list{display:flex; flex-direction:column; gap:8px;}
.genst-list li{font-size:14px; color:var(--color-steel); line-height:1.5; padding-left:12px; position:relative;}
.genst-list li::before{content:''; position:absolute; left:0; top:9px; width:4px; height:4px; border-radius:50%; background:var(--color-point); opacity:.6;}
/* ① ABOUT */
.main-about{background:#fff;}
.about-intro-visual{flex:1 1 620px; min-width:0; max-width:620px; border-radius:var(--radius-card); overflow:hidden; box-shadow:0 16px 48px rgba(12,31,51,.1);}
.about-intro-img{width:100%; aspect-ratio:1/1; background:var(--color-surface-soft);}
.about-intro-body{flex:1 1 700px; min-width:0; max-width:700px;}
.about-intro-body .genst-ko{font-size:var(--font-size-40); margin-bottom:20px; line-height:1.35;}
.about-intro-text{font-size:var(--font-size-20); color:var(--color-steel); line-height:1.85; margin-bottom:16px;}
.about-intro-quote{margin:28px 0 32px; padding:0; border:none; background:none; border-radius:0; font-size:var(--font-size-20); font-weight:700; color:var(--color-main); line-height:1.55; position:relative;}
.about-values{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--color-hairline);}
.about-value-card{background:transparent; border:none; border-radius:0; border-bottom:none; border-right:1px solid var(--color-hairline); padding:32px 28px; box-shadow:none; transition:none;}
.about-value-card:last-child{border-right:none;}
.about-value-card:hover{box-shadow:none; transform:none;}
.about-value-card__head{display:flex; align-items:center; gap:14px; margin-bottom:20px;}
.about-value-card__icon{flex-shrink:0; width:40px; height:40px; color:var(--color-point); display:block;}
.about-value-card .genst-en{margin-bottom:0; color:var(--color-point); font-size:14px;}
.about-value-card .genst-ko{font-size:var(--font-size-22); margin-bottom:0;}
.about-value-card p{font-size:var(--font-size-16); color:var(--color-steel); line-height:1.75; margin:0; padding-left:0;}
/* ② PRODUCT */
.product-tabs{display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:36px;}
.product-tab-panel{display:none;}
.product-tab-panel.active{display:block;}
.product-thumb__img img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.product-thumb__img::after{content:''; position:absolute; inset:0; background:rgba(0,0,0,.6); opacity:0; transition:opacity .3s ease; z-index:1; pointer-events:none;}
.product-thumb__name{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 16px; color:#fff; font-size:var(--font-size-17); font-weight:700; opacity:0; transition:opacity .3s ease; z-index:2; pointer-events:none;}
.product-thumb{transition:transform .35s ease;}
.product-thumb:hover{transform:translateY(-10px);}
.product-thumb:hover .product-thumb__img::after,.product-thumb:hover .product-thumb__name{opacity:1;}
.about-intro-img img,.project-thumb img,.news-panel-feature__visual img{width:100%; height:100%; object-fit:cover;}
.about-intro-img,.project-thumb,.news-panel-feature__visual{position:relative; overflow:hidden;}
.main-product{background:var(--color-main) url('/images/main/product-section-bg.jpg') center/cover no-repeat; position:relative;}
.main-product::before{content:''; position:absolute; inset:0; background:rgba(12,31,51,.82); pointer-events:none;}
.main-product>.genst-side-label{z-index:1;}
.main-product .genst-side-label__sec{color:rgba(255,255,255,.88);}
.main-product .genst-side-label__brand{color:rgba(255,255,255,.38);}
.main-product .genst-sec-title{color:#fff;}
.main-product .genst-sec-desc{color:rgba(255,255,255,.72);}
.product-thumb{display:block; width:100%; min-width:0; border-radius:8px; overflow:hidden; background:transparent; border:none; box-shadow:none; text-decoration:none; color:inherit;}
.product-thumb__img{aspect-ratio:4/5; background:var(--img-ph-bg); border-radius:8px; position:relative; overflow:hidden;}
.product-thumb__wrap,.product-thumb__label{display:none;}
.main-product .product-scroll-arr{border-color:rgba(255,255,255,.45); background:transparent; color:#fff;}
.main-product .product-scroll-arr:hover{background:var(--color-point); border-color:var(--color-point); color:#fff;}
/* ③ PROJECT */
.main-project{background:#fff; position:relative;}
.main-project .inner{position:relative; z-index:1;}
.project-thumb-wrap{aspect-ratio:4/3; border-radius:var(--radius-card); overflow:hidden; position:relative;}
.project-thumb{display:block; height:100%; border-radius:var(--radius-card); overflow:hidden; background:var(--img-ph-bg); cursor:pointer; border:none; position:relative; text-decoration:none; color:inherit;}
.project-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.project-thumb__overlay{position:absolute; inset:0; background:rgba(12,31,51,.72); opacity:0; transition:opacity .25s ease; display:flex; flex-direction:column; justify-content:flex-end; padding:24px; color:#fff; pointer-events:none;}
.project-thumb-wrap:hover .project-thumb__overlay{opacity:1;}
.project-thumb__cat{font-size:12px; font-weight:700; color:var(--color-point); margin-bottom:8px; text-transform:uppercase;}
.project-thumb__title{font-size:var(--font-size-16); font-weight:700; line-height:1.4; margin:0; color:#fff;}
.project-board-list{background:#fff; border-radius:var(--radius-card); border:1px solid var(--color-hairline); overflow:hidden;}
.project-board-row{display:grid; grid-template-columns:120px 1fr auto auto 32px; gap:16px; align-items:center; padding:28px 24px; border-bottom:1px solid var(--color-hairline); cursor:pointer; transition:background .2s; text-decoration:none; color:inherit;}
.project-board-row:last-child{border-bottom:none;}
.project-board-row:hover{background:var(--color-surface-soft);}
.project-board-cat{font-size:var(--font-size-16); font-weight:600; color:var(--color-point); white-space:nowrap;}
.project-board-row .genst-ko{margin-bottom:0; font-size:var(--font-size-18);}
.project-board-region,.project-board-year{font-size:var(--font-size-16); color:var(--color-steel); white-space:nowrap;}
.project-board-arrow{font-size:var(--font-size-20); color:var(--color-steel); text-align:right;}
/* ④ NEWS */
.main-news{background:#f5f8fb url('/images/main/news-section-bg.jpg') center/cover no-repeat; position:relative;}
.main-news::before{content:''; position:absolute; inset:0; background:rgba(255,255,255,.78); pointer-events:none;}
.main-news>.genst-side-label{z-index:1;}
.main-news .genst-sec-title{color:var(--color-ink-deep);}
.main-news .genst-sec-desc{color:var(--color-steel);}
.main-news .genst-side-label__sec{color:var(--color-ink-deep);}
.main-news .genst-side-label__brand{color:var(--color-steel); opacity:.72;}
.main-news .news-panel-feature__body .genst-sec-desc{color:var(--color-steel);}
.news-panel-feature{display:flex; flex-direction:column; height:100%; border-radius:var(--radius-card); overflow:hidden; background:#fff; border:1px solid var(--color-hairline); box-shadow:0 8px 32px rgba(12,31,51,.06); text-decoration:none; color:inherit;}
.news-panel-feature__visual-wrap{flex:1 1 auto; min-height:180px; overflow:hidden; position:relative;}
.news-panel-feature__visual{height:100%; min-height:180px; background:var(--img-ph-bg); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--img-ph-color); font-weight:600;}
.news-panel-feature__body{flex-shrink:0; padding:32px 28px;}
.news-panel-feature__body .genst-ko{margin-bottom:12px; font-size:var(--font-size-18);}
.news-panel-feature__body .genst-sec-desc{font-size:var(--font-size-16); text-align:left; margin:0; max-width:none; line-height:1.75; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.news-panel-list{display:flex; flex-direction:column; height:100%; background:#fff; border-radius:var(--radius-card); border:1px solid var(--color-hairline); overflow:hidden;}
.news-panel-row{flex:1; display:grid; grid-template-columns:96px 1fr; gap:20px; align-items:center; padding:20px 24px; border-bottom:1px solid var(--color-hairline); cursor:pointer; transition:background .2s; text-decoration:none; color:inherit;}
.news-panel-row:last-child{border-bottom:none;}
.news-panel-row:hover{background:var(--color-surface-soft);}
.news-date-box{flex-shrink:0; width:88px; height:88px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--color-surface-soft); border-radius:8px;}
.news-date-year{font-size:14px; font-weight:500; color:var(--color-steel); line-height:1.2;}
.news-date-md{font-size:var(--font-size-22); font-weight:700; color:var(--color-point); line-height:1.1;}
.news-panel-row .genst-ko{margin-bottom:0; font-size:var(--font-size-18);}
.genst-more-wrap{text-align:center; margin-top:48px;}
.genst-more{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--color-main); padding:12px 28px; border:1px solid var(--color-hairline); border-radius:var(--radius-btn); transition:all .2s;}
.genst-more:hover{background:var(--color-main); color:#fff; border-color:var(--color-main);}
.img-ph{height:100%; min-height:120px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:var(--color-steel); background:var(--color-surface-soft);}
.main-cta{padding-top:var(--sec-gap); padding-bottom:var(--sec-gap); background:var(--color-main) url('/images/main/cta-stripe-bg.jpg') center/cover no-repeat; text-align:center; color:#fff; position:relative;}
.main-cta::before{content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(12,31,51,.78),rgba(12,31,51,.55)); pointer-events:none;}
.main-cta .inner{position:relative; z-index:1;}
.main-cta .sec-title{color:#fff;}
.main-cta .sec-desc{font-size:var(--font-size-18); color:rgba(255,255,255,.85); max-width:560px; margin:0 auto 28px;}

/* ========================================
   3. 서브 레이아웃 영역
======================================== */

.sub-visual {position:relative; margin-top:var(--gnb-h); height:var(--sub-hero-h); overflow:hidden;}
.sub-visual .bg {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.sub-visual::before {content:''; position:absolute; inset:0; background:rgba(0,0,0,.58); z-index:1;}
.sub-visual .contain {position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;}
.sub-visual .sub-path{font-size:13px; color:#fff; margin-bottom:10px; opacity:.85;}
.sub-visual .sub-title {font-size:var(--font-size-40); font-weight:700; color:#fff; line-height:1.3em;}


.lnb-tabs{border-bottom:1px solid var(--color-hairline); position:sticky; top:var(--gnb-h); background:var(--color-canvas); z-index:50;}
.lnb-tabs .inner{display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; height:72px; padding:0;}
.lnb-tab{display:inline-flex; align-items:center; padding:0 22px; font-size:var(--font-size-15); font-weight:600; color:var(--color-steel); border-bottom:3px solid transparent; margin-bottom:-1px; line-height:1.2; white-space:nowrap;}
span.lnb-tab{cursor:default;}
.lnb-tab.active{color:var(--color-main); font-weight:700; border-bottom-color:var(--color-point);}
.lnb-wrap {border-bottom:1px solid var(--color-hairline); position:sticky; top:var(--gnb-h); background:var(--color-canvas); z-index:50;}
.lnb {max-width:var(--sub-inner-max); margin:0 auto;}
.lnb ul {height:72px;}
.lnb ul li {width:auto;}
.lnb ul li a {display:flex; justify-content:center; align-items:center; height:100%; padding:0 22px; font-size:var(--font-size-15); font-weight:600; color:var(--color-steel); border-bottom:3px solid transparent; margin-bottom:-1px; line-height:1.2em; white-space:nowrap;}
.lnb ul  li.active a {color:var(--color-main); font-weight:700; border-bottom-color:var(--color-point);}

#contArea {max-width:calc(var(--sub-inner-max) + var(--space-container) * 2); padding:0 var(--space-container); padding-top:var(--sub-nav-content-gap); margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}
#contArea .sub-title {display:none;}

.real-cont {padding-bottom:var(--sec-gap);}




/* ========================================
   4. 푸터 영역
======================================== */
.footer{background:var(--color-main-dark); color:rgba(255,255,255,.75); padding:48px 0 32px; font-size:14px; border-top:none;}
.footer-top{display:flex; align-items:flex-start; justify-content:flex-start; gap:32px; flex-wrap:wrap; margin-bottom:28px;}
.footer-brand-col{display:flex; flex-direction:column; align-items:flex-start; gap:0;}
.footer-brand img{height:36px; width:auto; display:block;}
.footer-info{font-size:var(--font-size-15); line-height:1.45; color:#f2f2f2; margin-top:14px; font-style:normal;}
.footer-contact{font-size:var(--font-size-15); line-height:1.45; color:#fff; margin-top:6px;}
.footer-contact a{color:inherit; text-decoration:none;}
.footer-contact span{display:inline-block;}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:0; border-top:none;}
.footer-meta-left{display:flex; align-items:center; flex-wrap:wrap; gap:14px;}
.footer-copy{font-size:13px; color:rgba(255,255,255,.45);}
.footer-design{font-size:13px; color:rgba(255,255,255,.35); cursor:pointer; transition:color .2s;}
.footer-design:hover{color:var(--color-point);}
.footer-legal-bottom{display:flex; gap:16px; font-size:13px; flex-shrink:0; margin-left:auto;}
.footer-legal-bottom span{color:rgba(255,255,255,.55); cursor:pointer; transition:color .2s;}
.footer-legal-bottom span:hover{color:var(--color-point);}
#footer {background:var(--color-main-dark); color:rgba(255,255,255,.75); padding:48px 0 32px; font-size:14px;}
.go-top{position:fixed; right:28px; bottom:32px; width:48px; height:48px; border-radius:50%; border:none; background:var(--color-point); color:#fff; font-size:var(--font-size-22); line-height:1; cursor:pointer; z-index:180; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .25s ease,visibility .25s ease,transform .25s ease; box-shadow:0 4px 20px rgba(0,153,204,.35); display:flex; align-items:center; justify-content:center;}
.go-top.is-visible{opacity:1; visibility:visible; transform:none;}
.scroll-top {position:fixed; right:28px; bottom:32px; width:48px; height:48px; border-radius:50%; border:none; background:var(--color-point); color:#fff; font-size:var(--font-size-22); line-height:1; z-index:180; opacity:0; visibility:hidden; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(0,153,204,.35);}
.scroll-top.is-visible {opacity:1; visibility:visible;}