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

#skipToContent a {z-index:100000;position:absolute;overflow:hidden;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;}
#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;outline-color:#f37736;}
a:focus {outline:#f37736;}

.only-desktop-tablet {display:block;}
.only-desktop {display:block;}
.only-tablet {display:none;}
.only-mobile {display:none;}
.fr-box .swiper-wrapper {display:block;}

.contain {max-width:1460px; width: 100%; padding-left:var(--container-space); padding-right:var(--container-space); margin:0 auto;}

/* header — 메인/서브 동일: fixed, 기본 투명·흰 글자, .active(스크롤/호버) 흰 배경 */
#header {position:fixed; top:0; left:0; width:100%; background:transparent; border-bottom:0; z-index:100; transition: .2s;}
#header .contain {position:relative; display:flex; align-items:center; justify-content:space-between; max-width:none; width:100%; height:auto; min-height:var(--header-height); z-index:10; box-sizing:border-box;}
#header .sitelogo a {display:inline-flex; align-items:center; height: var(--header-height); line-height:0;}

#gnb {text-align:center; flex:1 1 auto; min-width:0; width:1%;}
#gnb>ul {display:flex; align-items:center; justify-content:center;}
#gnb>ul>li {position:relative; padding:0 22px;}
#gnb>ul>li>a {position:relative; display:flex; align-items:center; justify-content:center; height:var(--header-height); padding:0; color:#fff; font-size:var(--font-size-22); font-weight:600; letter-spacing:-.02em; line-height:1.64em; white-space:nowrap;}
#gnb>ul>li>a:after {display:none;}
#gnb>ul>li.active>a,#gnb>ul>li:hover>a {background:linear-gradient(270deg,#f5ebd2,#e2c98a); -webkit-background-clip:text; background-clip:text; color:transparent;}
#gnb .submenu {display:none; position:absolute; left:50%; transform:translateX(-50%); width:max-content; min-width:120px; overflow:visible; text-align:left; background:rgba(0,0,0,.1); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-radius:0 0 8px 8px; padding:var(--space-16) var(--space-30) var(--space-24); box-sizing:border-box;}
#gnb .submenu>ul {padding:0; display:flex; flex-direction:column; gap:var(--space-16);}
#gnb .submenu>ul>li>a {display:block; padding:0; color:rgba(255,255,255,.6); font-size:var(--font-size-18); font-weight:600; line-height:1.67em; white-space:nowrap;}
#gnb .submenu>ul>li>a:hover,#gnb .submenu>ul>li.active>a {color:#fff; text-decoration:none;}
.submenu-bg {display:none !important; height:0 !important; opacity:0 !important; pointer-events:none;}

.hd-util {display:flex; align-items:center; gap:var(--space-24); flex:0 0 auto; margin-left:var(--space-24);}
.hd-util a {font-size:var(--font-size-22); font-weight:600; line-height:1.64em; color:rgba(255,255,255,.8); white-space:nowrap;}
.hd-util a:hover {color: #000;}

#header.active {background:#fff; border-bottom:1px solid #eee;}
#header.active .sitelogo img {opacity: 0;}
#header.active .sitelogo a {background: url('/images/common/logo-color.svg') no-repeat left center / contain;}
#header.active #gnb>ul>li>a {color:var(--color-dark);}
#header.active #gnb>ul>li.active>a,
#header.active #gnb>ul>li:hover>a {color: var(--primary-color)}
#header.active .hd-util a {color:#676767;}
#header.active .hd-util a:hover {color: var(--dark-color);}
#header.active .btn-m-menu span,#header.active .btn-m-menu span:before,#header.active .btn-m-menu span:after {background:var(--color-dark);}

/* for mobile */
.btn-m-menu {display:none; position:relative; width:26px; height:26px; flex-shrink:0;}
.btn-m-menu div {position:relative; width:100%; height:100%;}
.btn-m-menu span {position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:#fff;}
.btn-m-menu span:nth-child(1) {top:6px; margin-top:0;}
.btn-m-menu span:nth-child(2) {top:50%;}
.btn-m-menu span:nth-child(3) {top:auto; bottom:6px; margin-top:0;}
.btn-m-menu span:before,.btn-m-menu span:after {display:none;}

.mobile-navigation {display:none; position:fixed; top:0; right:0; width:300px; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;}
.mobile-navigation .home {display:flex; align-items:center; height:var(--header-height); padding:0 20px; color:#242424; font-size:19px; font-weight:700; line-height:1.5em;}
.mobile-navigation .hd-util {gap: 24px; margin: 10px 48px 10px 20px;}
.mobile-navigation .hd-util a {color: #505050;}
.mobile-navigation .nav-menu>ul {border-top:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:10px 48px 10px 20px; display:block; color:#242424; font-size:19px; font-weight:700; line-height:1.5em;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:20px; transform:translateY(-75%) rotate(45deg); width:11px; height:11px; border-right:2px solid #505050; border-bottom:2px solid #505050;}
.mobile-navigation .nav-menu>ul>li.active>a {color:#fff; background:var(--primary-color)}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#fff;}
.mobile-navigation .nav-menu .submenu {display:none; background:#f8f8f8; color:#454545; font-size:16px; font-weight:400; line-height:1.5em;}
.mobile-navigation .nav-menu .submenu ul li {border-top:1px solid #e5e5e5;}
.mobile-navigation .nav-menu .submenu ul li a {display:block; padding:12px 20px;}
.mobile-navigation .nav-menu .submenu ul li a:hover {color:var(--primary-color);}
.mobile-navigation .close {position:absolute; top:0; right:15px; width:26px; height:var(--header-height); text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:50%; left:0; width:100%; height:3px; background:#242424; border-radius:3px;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}

/* main */
.page-main {width:100%;}
.page-main .contain {max-width:1660px;}
.page-main .main-pin .contain {max-width: 100%;}
.main-hero {position:relative; overflow:hidden; color:#fff;}
.main-visual {position:relative; overflow:hidden; height:100vh; color:#fff;}
.main-visual .items,
.main-visual .slick-list,
.main-visual .slick-track{height:100%;}
.main-visual .slide-image {position: absolute; inset: 0;}
.main-visual .item {position:relative; height:100vh; outline:none;}
.main-visual iframe,
.main-visual video,
.main-visual img {width: 100%; height: 100%; object-fit: cover;}
.main-visual-bg {position:absolute; inset:0;}
.main-visual-bg img {width:100%; height:100%; object-fit:cover;}
.main-visual-bg::after {content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(13,42,74,.55),rgba(13,42,74,.12) 55%,rgba(13,42,74,.35));}
.main-visual-caption {position:relative; z-index:2; display:flex; align-items:stretch; height:100%; padding-top:calc(var(--header-height) + var(--space-70)); padding-bottom:var(--space-60); box-sizing:border-box;}
.main-visual .caption {display:flex; flex-direction:column; justify-content:space-between; max-width:1000px; width: 100%; height:100%; padding-bottom:0;}
.main-visual .caption p {opacity: 0; transform: translateX(50px); transition: 1.5s .2s;}
.main-visual .caption .txt1 {margin:0; font-size:var(--font-size-30); font-weight:600; line-height:1.375em; letter-spacing:-.02em; text-align: center;}
.main-visual .caption .txt1 span {display: block; text-align: center; font-size:var(--font-size-64); font-weight:600; line-height:1.375em;}
.main-visual .caption .txt2 {margin:0; font-size:var(--font-size-24); font-weight:500; line-height:1.666em;}
.main-visual .active .caption p {opacity: 1; transform: translateX(0);}
.main-visual .active .caption .txt2 {transition-delay: .7s;}
.main-visual-ui {position:absolute; left:0; right:0; top:0; bottom:0; z-index:3; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; padding-top:23%; padding-bottom:var(--space-60); box-sizing:border-box;}
.main-visual .visual-func {display:flex; align-items:center; gap:2px; width: 100%; max-width: 1000px; pointer-events:auto; width:fit-content;}
.main-visual .visual-func .slide-btn {display:none;}
.main-visual .mv-pager,
.main-visual .pagination {display:flex !important; align-items:center; gap:2px; position:static; width:auto; height:auto; bottom:auto; left:auto; transform:none;}
.main-visual .mv-pager ul,
.main-visual .pagination ul,
.main-visual .slick-dots {display:flex !important; align-items:center; gap:2px; margin:0; padding:0; list-style:none;}
.main-visual .slick-dots li {width:40px; height:40px; margin:0;}
.main-visual .slick-dots li button {display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:0; border-radius:var(--radius-8); background:rgba(255,255,255,.16); color:#fff; font-size:var(--font-size-16); font-weight:600; line-height:1.5em; backdrop-filter:blur(12px); cursor:pointer;}
.main-visual .slick-dots li button:before {display:none;}
.main-visual .slick-dots li.slick-active button {background:#fff; color:var(--color-dark);}
.main-visual .mv-scroll {display:flex; align-items:center; align-self:flex-end; gap:var(--space-12); font-size:var(--font-size-20); font-weight:500; line-height:1.7em; pointer-events:auto;}
.main-visual .mv-scroll img {animation:scrollDown .9s linear infinite alternate;}
.main-hero-sns {position:absolute; right:max(var(--container-space), calc((100% - 1660px) / 2 + var(--container-space))); bottom:calc(var(--space-60) + 54px + var(--space-70)); z-index:4; display:flex; align-items:center; gap:var(--space-12);}
.main-hero-sns-link {display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.3); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:background .3s ease, transform .3s ease, box-shadow .3s ease;}
.main-hero-sns-link .icon {width:48px; height:48px; padding: 10px;}
.main-hero-sns-link:hover {transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.22);}
.main-hero-sns-link .icon img {object-fit: contain;}
.main-hero-sns-link.is-kakao:hover {background:#fee500;}
.main-hero-sns-link.is-kakao:hover .icon img,
.main-hero-sns-link.is-kakao:hover .icon svg {filter:none;}
.main-hero-sns-link.is-naver:hover {background:#03C75A;}
.main-hero-sns-link.is-naver:hover .icon svg {transform:scale(1.08);}
.main-hero-aside {position:absolute; right:max(var(--container-space), calc((100% - 1660px) / 2 + var(--container-space))); bottom:calc(var(--space-60) + 54px + var(--space-70)); z-index:4; width:auto;}
.mv-notice-slider {width:564px; max-width:100%;}
.mv-notice {display:flex !important; gap:4px; align-items:stretch;}
.mv-notice-pic {width:280px; aspect-ratio:280 / 180; border-radius:var(--radius-16); overflow:hidden; flex:0 0 auto;}
.mv-notice-pic img {width:100%; height:100%; object-fit:cover; object-position:bottom; transition:transform .4s ease;}
.mv-notice-card {display:flex; flex-direction:column; justify-content:space-between; width:280px; min-height:180px; padding:var(--space-24); border-radius:var(--radius-16); background:rgba(255,255,255,.1); backdrop-filter:blur(12px); color:#fff; box-sizing:border-box; transition:background .3s ease, transform .3s ease, box-shadow .3s ease;}
.mv-notice-card .label {display:block; margin-bottom:var(--space-8); font-size:var(--font-size-13); font-weight:600; line-height:1.23em; color:rgba(255,255,255,.7); transition:color .3s ease;}
.mv-notice-card strong {font-size:var(--font-size-20); font-weight:600; line-height:1.5em; overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:keep-all; transition:color .3s ease;}
.mv-notice-card .meta {display:flex; align-items:center; justify-content:space-between; margin-top:var(--space-20);}
.mv-notice-card .date {font-size:var(--font-size-16); font-weight:500; line-height:1.5em; color:rgba(255,255,255,.7); transition:color .3s ease;}
.mv-notice-card .dots {display:flex; gap:10px;}
.mv-notice-card .dots i {display:block; width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.4);}
.mv-notice-card .dots i.is-on {background:#fff;}
.mv-notice-card:hover {background:rgba(255,255,255,.2); transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.22);}
.mv-notice-card:hover .label,.mv-notice-card:hover .date {color:rgba(255,255,255,.9);}
.mv-notice-card:hover strong {color:#fff;}
.mv-notice:hover .mv-notice-pic img {transform:scale(1.04);}
.mv-notice-slider .slick-dots {display:none !important;}

@keyframes scrollDown{
	0%{transform:translateY(0);}
	100%{transform:translateY(15px);}
}

.main-rate {position:relative; overflow:clip; padding:var(--space-140) 0; color:#fff;}
.main-rate-bg {position:absolute; inset:0;}
.main-rate-bg img {width:100%; height:100%; object-fit:cover;}
.main-rate-bg::after {content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(37,42,54,.7),rgba(17,19,24,.75));}
.main-rate-inner {position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-40); align-items:start;}
.rate-copy {position:sticky; top:calc(var(--header-height) + var(--space-40)); align-self:start; padding-bottom:var(--space-40);}
.rate-copy h2 {margin:0 0 var(--space-40); font-size:var(--font-size-60); font-weight:600; line-height:1.3em; letter-spacing:-.02em;}
.rate-copy .gold {background:linear-gradient(270deg,#f5ebd2,#e2c98a); -webkit-background-clip:text; background-clip:text; color:transparent;}
.rate-copy p {margin:0; font-size:var(--font-size-22); font-weight:500; line-height:1.727em;}
.rate-cards {display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-24); width:100%; padding:0 0 var(--space-40);}
.rate-col {display:flex; flex-direction:column; gap:clamp(60px, 12.5vw, 240px); width:330px; flex:0 0 auto;}
.rate-col--offset {padding-top:clamp(120px, 15.7vw, 302px); gap:0;}
.rate-card {width:100%; padding:var(--space-24); border-radius:var(--radius-16); background:rgba(255,255,255,.1); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); transition:transform .35s ease, box-shadow .35s ease, background .35s ease;}
.rate-card:hover {transform:translateY(-10px); box-shadow:0 24px 48px rgba(0,0,0,.28);}
.rate-card.is-primary {background:rgba(46,125,196,.8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);}
.rate-card.is-primary:hover {background:rgba(46,125,196,.92);}
.rate-card .badge {display:inline-flex; margin-bottom:var(--space-24); padding:6px 8px; border-radius:999px; background:rgba(255,255,255,.1); font-size:var(--font-size-14); font-weight:600; line-height:1.14em; color:rgba(255,255,255,.7);}
.rate-card.is-primary .badge {background:var(--color-gold); color:#252a36;}
.rate-card h3 {margin:0 0 var(--space-4); font-size:var(--font-size-26); font-weight:600; line-height:1.54em;}
.rate-card .term {margin:0 0 var(--space-30); font-size:var(--font-size-18); font-weight:500; line-height:1.67em; color:rgba(255,255,255,.7);}
.rate-card .num {display:flex; align-items:flex-start; justify-content:flex-end; gap:var(--space-4); margin:0;}
.rate-card .num strong {font-size:var(--font-size-96); font-weight:600; line-height:1.1em; letter-spacing:-.02em;}
.rate-card .num span {margin-top:var(--space-20); font-size:var(--font-size-32); font-weight:600; line-height:1.44em; color:rgba(255,255,255,.7);}
.rate-card .asset {display:flex;  align-items:flex-end; justify-content:center; gap:4px 4px; margin:0;}
.rate-card .asset strong {font-size:var(--font-size-68); font-weight:600; line-height:1.2em;}
.rate-card .asset em {font-style:normal; margin-bottom:6px; font-size:var(--font-size-24); font-weight:600; line-height:1.67em; color:rgba(255,255,255,.7);}
.rate-card .date {margin:var(--space-30) 0 0; text-align:right; font-size:var(--font-size-16); font-weight:500; line-height:1.5em; color:rgba(255,255,255,.6);}

.main-news {position:relative; overflow:hidden; padding:var(--space-140) 0 var(--space-180); background:#111318; color:#fff;}
.main-news .sec-head {margin-bottom:var(--space-80);}
.main-news .eyebrow {margin:0 0 var(--space-16); font-size:var(--font-size-20); font-weight:500; line-height:1.7em; color:var(--color-gold);}
.sec-head-row {display:flex; align-items:center; justify-content:space-between; gap:var(--space-24);}
.sec-head-row h2 {margin:0; font-size:var(--font-size-60); font-weight:600; line-height:1.3em;}
.btn-more {display:inline-flex; align-items:center; gap:12px; padding:8px 8px 8px var(--space-24); border:1px solid rgba(255,255,255,.1); border-radius:999px; background:rgba(255,255,255,.1); color:#fff; font-size:var(--font-size-18); font-weight:500; line-height:1.67em; backdrop-filter:blur(12px); transition:background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;}
.btn-more .icon {border-radius:50%; background:rgba(255,255,255,.16); transition:background .3s ease, transform .3s ease;}
.btn-more .icon img {display:block; transition:transform .3s ease;}
.btn-more:hover {background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.28); color:#fff;}
.btn-more:hover .icon {background:rgba(255,255,255,.28);}
.btn-more.is-solid .icon {background:#2e7dc4;}
.btn-more.is-solid:hover {background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.24);}
.btn-more.is-solid:hover .icon {background:#3d8fd4;}
.news-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin:0 0 var(--space-100); padding:0; list-style:none;}
.news-grid a {display:block; color:#fff;}
.news-grid .thumb {position:relative; aspect-ratio:1; margin-bottom:var(--space-30); border-radius:var(--radius-16); overflow:hidden;}
.news-grid .thumb img {width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.news-grid .thumb:after {content:""; position:absolute; top:12px; right:12px; width:72px; height:72px; background:url("/images/main/icon-link.svg") 50% 50% / contain no-repeat; opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease; pointer-events:none;}
.news-grid a:hover .thumb img {transform:scale(1.04);}
.news-grid a:hover .thumb:after {opacity:1; transform:translateY(0);}
/* 등록된 이미지가 없는 항목 : 칸 높이는 그대로 유지해 제목/날짜 줄을 맞추고, 사진 위에 뜨는 링크 아이콘만 감춘다 */
.news-grid .thumb.is-empty:after,.news-grid a:hover .thumb.is-empty:after {display:none;}
.news-grid .cate {margin:0 0 var(--space-4); font-size:var(--font-size-18); font-weight:400; line-height:1.67em; color:rgba(255,255,255,.6);}
.news-grid strong {display:block; margin-bottom:var(--space-20); font-size:var(--font-size-24); font-weight:600; line-height:1.67em;}
.news-grid .date {font-size:var(--font-size-18); font-weight:400; line-height:1.56em; color:#878787;}
.news-grid li.is-hover .cate,.news-grid li.is-hover strong,.news-grid a:hover .cate,.news-grid a:hover strong {color:#5baee0;}
.main-banner-wrap {position:relative;}
.main-banner-slider {margin:0 0 var(--space-30);}
.main-banner {position:relative; display:flex !important; align-items:center; justify-content:space-between; min-height:240px; padding:0 100px 0 80px; border-radius:var(--radius-16); overflow:hidden; color:#fff; text-decoration:none;}
.main-banner .banner-bg {position:absolute; inset:0;}
.main-banner .banner-bg img {width:100%; height:100%; object-fit:cover;}
.banner-copy {position:relative; z-index:1;}
.banner-copy strong {display:block; margin-bottom:var(--space-12); font-size:var(--font-size-36); font-weight:600; line-height:1.39em;}
.banner-copy p {margin:0; font-size:var(--font-size-20); font-weight:500; line-height:1.7em; color:#e7e7e7;}
.banner-illust {position:relative; z-index:1; max-width: 280px; height: 100%; flex-shrink:0;}
.banner-illust img {height:100%; display:block;}
.main-banner-ctrl {display:flex; align-items:center; gap:var(--space-40);}
.banner-progress {flex:1 1 auto; height:2px; background:rgba(255,255,255,.2); overflow:hidden;}
.banner-progress i {display:block; width:0; height:100%; background:rgba(255,255,255,.7); transition:width .4s ease;}
.banner-nav {display:flex; align-items:center; gap:16px; flex-shrink:0;}
.banner-prev,.banner-next {width:10px; height:16px; padding:0; border:0; background:transparent url('/images/main/banner-arrow.svg')  center/contain no-repeat; cursor:pointer; opacity:.7;}
.banner-prev:hover,.banner-next:hover {opacity:1;}
.banner-next {transform: scaleX(-1)}
.banner-count {margin:0; color:#fff; font-size:var(--font-size-14); font-weight:700; line-height:1.14em;}
.banner-count strong {display: inline-block; width: 1.2em;}
.banner-count span {color:rgba(255,255,255,.4);}

.main-pin {position:relative; background:#2f4256; color:#fff;}
.main-pin-track {height:220vh;}
.main-pin-sticky {position:sticky; top:0; height:100vh; min-height:700px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.pin-panel {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(24px); transition:opacity .45s ease, transform .45s ease, visibility .45s;}
.pin-panel.is-active {opacity:1; visibility:visible; transform:translateY(0); z-index:2;}
.slogan-box,.cta-panel {position:relative; z-index:2;}
.slogan-text,.cta-text {margin:0; font-size:var(--font-size-56); font-weight:600; line-height:1.43em; letter-spacing:-.02em; text-align:center;}
.slogan-text .gold,.cta-text .gold {background:linear-gradient(270deg,#f5ebd2,#e2c98a); -webkit-background-clip:text; background-clip:text; color:transparent;}
.cta-panel {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-60); width:100%; min-height:min(80vh,874px); margin:0 auto; border-radius:var(--radius-24); background:rgba(255,255,255,.04); backdrop-filter:blur(12px);}
.slogan-bg-roll {position:absolute; left:0; right:0; bottom:var(--space-60); z-index:1; overflow:hidden; pointer-events:none;}
.slogan-bg-track {display:flex; width:max-content; gap:80px; animation:sloganRoll 28s linear infinite; will-change:transform;}
.slogan-bg-track span {font-size:clamp(40px, calc(120 / var(--inner) * 100vw), 160px); font-weight:600; line-height:1.1em; color:rgba(255,255,255,.06); white-space:nowrap;}
@keyframes sloganRoll {from {transform:translateX(0);} to {transform:translateX(-50%);}}
.slogan-bg-text {position:absolute; left:50%; bottom:var(--space-60); transform:translateX(-50%); z-index:1; margin:0; font-size:clamp(40px, calc(120 / var(--inner) * 100vw), 160px); font-weight:600; line-height:1.1em; color:rgba(255,255,255,.06); white-space:nowrap; pointer-events:none;}

/* footer */
#footer {background:#0d0f14; color:#fff; font-size:var(--font-size-16);}
#footer .contain {max-width:1460px; padding-top:var(--space-40); padding-bottom:var(--space-60);}
#footer .f-top {display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-40); padding-bottom:var(--space-50); border-bottom:1px solid rgba(255,255,255,.12);}
#footer .f-right {display:flex; align-items:center; gap:var(--space-50);}
#footer .f-link {display:flex; gap:var(--space-24); color:#878787; font-weight:600; line-height:1.5em;}
#footer .scroll-top {display: flex; align-items: center; position:static; width:auto; height:auto; border:0; border-radius:0; background:transparent; gap:var(--space-16); color:#fff; font-size:var(--font-size-18); font-weight:600; line-height:1.56em;}
#footer .scroll-top span:before {display:none;}
#footer .f-btm {display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-40); margin-top:var(--space-40);}
#footer .f-addr {margin:0 0 var(--space-12); font-size:var(--font-size-20); font-weight:600; line-height:1.7em;}
#footer .f-meta {display:flex; flex-wrap:wrap; gap:var(--space-24); margin:0 0 var(--space-40); color:#ccc; font-weight:500; line-height:1.5em;}
#footer .copyright {margin:0; color:#676767; font-weight:500; line-height:1.5em;}
#footer .copyright a {color:#181818;}
#footer .f-family-btn {display:inline-flex; align-items:center; gap:var(--space-40); padding:var(--space-16) var(--space-24); border:1px solid rgba(255,255,255,.12); border-radius:60px; background:transparent; color:#fff; font-size:var(--font-size-16); font-weight:600; line-height:1.5em;}

body .scroll-top:not(#footer .scroll-top) {display:none;}

/* sub */
#sub {background:#252a36;}

/* 게시판 상세 — 흰 배경(헤더는 .active와 동일한 라이트 스타일을 처음부터 유지) */
body.is-board-view#sub {background:#fff;}
body.is-board-view #header {background:#fff; border-bottom:1px solid #eee;}
body.is-board-view #header .sitelogo img {filter:none;}
body.is-board-view #header #gnb>ul>li>a {color:var(--color-dark);}
body.is-board-view #header .hd-util a {color:#676767;}
body.is-board-view #header .btn-m-menu span,body.is-board-view #header .btn-m-menu span:before,body.is-board-view #header .btn-m-menu span:after {background:var(--color-dark);}
body.is-board-view .lnb-wrap {border-bottom-color:#eee;}
body.is-board-view .lnb .swiper {background:#fafafa; border-color:#eee;}
body.is-board-view .lnb .swiper-slide a {color:#878787;}
body.is-board-view .lnb .swiper-slide.active a {background:var(--color-gold); color:#111318;}
body.is-board-view #contArea {max-width:1060px; padding-top:var(--space-100);}

.sub-visual {position:relative; overflow:visible; height:auto; background:transparent; color:#fff; text-align:center; padding-top:var(--header-height);}
.sub-visual .contain {max-width:none;}
.sub-visual-card {position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:0 60px 30px; border-radius:32px; overflow:hidden;}
.sub-visual-card .bg {position:absolute; inset:0; overflow:hidden;}
.sub-visual-card .bg img {width:100%; height:100%; object-fit:cover;}
.sub-visual-card .bg::after {content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.24));}
.sub-visual-card .inner {position:static; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; width:100%; min-height:clamp(140px, calc(370 / var(--inner) * 100vw), 370px);}
.sub-visual-card h2 {position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; margin:0; padding:0 60px; box-sizing:border-box; text-align:center; font-size:var(--font-size-60); font-weight:600; line-height:1.3em; letter-spacing:-.02em;}
.sub-visual-card .path {position:relative; z-index:3; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-16); flex:0 0 auto; width:100%; font-size:var(--font-size-18); font-weight:500; line-height:1.67em; color:rgba(255,255,255,.7);}
.sub-visual-card .path .dot {width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.7);}
.sub-visual-card .path strong {font-weight:500; color:#fff;}
.sub-visual-card .path .icon img {filter:brightness(0) invert(1); opacity:.85;}

.lnb-wrap {position:relative; border:0; padding:var(--space-34) 0; border-bottom:1px solid rgba(255,255,255,.1);}
.lnb {display:flex; justify-content:center; margin:0 auto; max-width:none;}
.lnb .swiper {width:auto; max-width:100%; margin:0 auto; padding:var(--space-10); border:1px solid rgba(255,255,255,.1); border-radius:999px; background:#2e323e; overflow:hidden; box-sizing:border-box;}
.lnb .swiper-wrapper {display:flex; align-items:center; list-style:none; margin:0; padding:0; box-sizing:border-box;}
.lnb .swiper-slide {width:auto; height:auto; flex-shrink:0; text-align:center; border:0;}
.lnb .swiper-slide a {display:flex; align-items:center; justify-content:center; width:auto; min-width:167px; height:auto; padding:var(--space-14) 30px; border-radius:999px; color:rgba(255,255,255,.7); font-size:var(--font-size-20); font-weight:500; line-height:1.7em; letter-spacing:-.02em;}
.lnb .swiper-slide.active a {background:var(--color-gold); color:#111318;}

.sub-title {padding:var(--space-100) 0; max-width:none; margin:0;}
#contArea.wide .sub-title {padding-left:var(--container-space); padding-right:var(--container-space);}
.sub-title h2 {font-size:clamp(32px, calc(54 / var(--inner) * 100vw), 54px); line-height:1.26em; letter-spacing:-.02em; color:#fff; font-weight:600;}

#contArea {max-width:1460px; padding-left:var(--container-space); padding-right:var(--container-space); padding-top:0; margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}

.real-cont {padding-bottom:var(--space-180);}
.icon {display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.icon img {display:block; object-fit:contain; vertical-align:middle; margin-top:-.02em;}
.icon18 {width:18px; height:18px;}
.icon20 {width:20px; height:20px;}
.icon24 {width:24px; height:24px;}
.icon48 {width:48px; height:48px;}
.icon72 {width:72px; height:72px;}
.txt-center {text-align:center;}

.desc p:not(:last-child) {margin-bottom: 1.88em;}
.pb100-40 {padding-bottom: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px);}
.pt100-40 {padding-top: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px);}
.border-box {position: relative;}
.border-box:before {position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #ddd;}

.flex-wrap {display: flex;}
.flex-center {display: flex; justify-content: center;}
.flex-between {display: flex; justify-content: space-between;}
.flex-mid {display: flex; align-items: center;}
.flex-bottom {display: flex; align-items: flex-end;}
.flex-column {display: flex; flex-direction: column;}
.flex1 {flex: 1;}

.fw400 {font-weight: 400;}
.fw500 {font-weight: 500;}
.fw600 {font-weight: 600;}
.fw700 {font-weight: 700;}

.primary-color {color: var(--primary-color);}
.secondary-color {color: var(--secondary-color);}
.dark-color {color: var(--dark-color);}
.white-color {color: #fff;}

/* footer styles are above (main block) */