@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 
body {overflow-x: hidden;}
#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}

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

#wrapper {position:relative;}

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

/* header */
#header {position:fixed; top:0; left:0; width:100%; height:var(--header-height); background:rgba(255,255,255,0.8); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(221,221,221,0.4); transition:.2s; z-index:100;}
#sub #header {position:sticky;}
#header .contain {display:flex; align-items:center; justify-content:space-between; position:relative; max-width:1500px; height:100%; gap:var(--space-24); z-index:10;}

.sitelogo {flex-shrink:0;}
.sitelogo a {display:block; line-height:0;}
.sitelogo img {display:block; width:139px; max-width:none; object-fit:contain;}

#gnb {display:flex; align-items:center; flex:1; justify-content:center; min-width:0;}
#gnb > ul {display:flex; align-items:center; justify-content:center; gap:clamp(32px, 5vw, 96px); text-align:center;}
#gnb > ul > li {position:relative;}
#gnb > ul > li > a {display:flex; align-items:center; justify-content:center; height:var(--header-height); padding:8px 0; color:#242424; font-size:var(--font-size-20); font-weight:500; line-height:1.3em; letter-spacing:-0.02em; white-space:nowrap; transition:color 0.2s;}
#gnb > ul > li > a:hover,
#gnb > ul > li.active > a {color:var(--color-primary);}

#gnb .submenu {display:none; position:absolute; left:50%; top:100%; transform:translateX(-50%); min-width:200px; margin-top:0; padding:16px 20px; border-radius:16px; background:#fff; border:1px solid rgba(221,221,221,0.4); box-shadow:0 8px 32px rgba(0,0,0,0.1); text-align:left; z-index:110;}
#gnb .submenu > ul {display:flex; flex-direction:column; gap:4px; padding:0;}
#gnb .submenu > ul > li > a {display:block; padding:8px 4px; color:#242424; font-size:var(--font-size-16); font-weight:500; line-height:1.4em; white-space:nowrap; transition:color 0.2s;}
#gnb .submenu > ul > li > a:hover,
#gnb .submenu > ul > li.active > a {color:var(--color-primary); font-weight:500;}

.gnb-wrap {display:flex; align-items:center; gap:var(--space-50);}

.btn-inquiry {display:inline-flex; align-items:center; gap:var(--space-10); height:48px; padding:0 16px 0 7px; border-radius:50px; background:linear-gradient(67deg, var(--color-sub) 0%, var(--color-primary) 100%); color:#fff; font-size:var(--font-size-16); font-weight:600; flex-shrink:0; white-space:nowrap;}
.btn-inquiry__icon {display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.2);}
.btn-inquiry__icon img {width:20px; height:20px; object-fit:contain;}
.btn-inquiry.muted {background:rgba(0,0,0,0.04); color:#454545;}
.btn-inquiry.muted .btn-inquiry__icon {background:#fff;}

.submenu-bg {display:none;}

#header.active #gnb > ul > li > a {color:#242424;}
#header.active #gnb > ul > li > a:hover,
#header.active #gnb > ul > li.active > a {color:var(--color-primary);}

/* for mobile */
.btn-m-menu {display:none; position:absolute; top:50%; right:var(--space-container); width:24px; height:24px; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
.btn-m-menu div {display:flex; flex-direction:column; justify-content:center; gap:7px; width:100%; height:100%;}
.btn-m-menu span {display:block; width:100%; height:2px; background:#242424;}
#sub:not(:has(.sub-visual)) .btn-m-menu span {background:#242424;}
#header.active .btn-m-menu span {background:#242424;}

.mobile-navigation {display:block;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 {max-height:60px; padding: 19px 20px;}
.mobile-navigation .home a {display: block;  color: #2c2c2c; font-size:20px; font-weight: 700; line-height: 1.3em;}
.mobile-navigation .nav-menu>ul {border-top:1px solid #dfdfdf;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #dfdfdf;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; display:block; padding:13px 20px; color:#242424; font-size:18px; font-weight:700; line-height:1.3em;}
.mobile-navigation .nav-menu>ul>li>a div {display:flex; align-items:flex-end; gap:5px;}
.mobile-navigation .nav-menu>ul>li>a .en {order:2;  font-size:.8em; font-weight:500; line-height:1.3em; opacity:.4;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:20px; transform:translateY(-75%) rotate(45deg); width:12px; height:12px; border-right:2px solid #454545; border-bottom:2px solid #454545;}
.mobile-navigation .nav-menu>ul>li.active>a:after  {transform:translateY(-35%) rotate(-135deg); border-color:var(--color-primary);}
.mobile-navigation .nav-menu .submenu {display:none; background:var(--color-primary); padding: 10px 0;}
.mobile-navigation .nav-menu .submenu > ul > li > a {display:flex; align-items:flex-end; gap:5px; padding:8px 20px; color:#fff; font-size:16px; font-weight:500; line-height:1.3em;}
.mobile-navigation .nav-menu .submenu > ul > li > a .bar {display:none;}
.mobile-navigation .nav-menu .submenu > ul > li > a .en {order:2; font-size:.8em; line-height:1.3em; font-weight:400; opacity:.4;}
.mobile-navigation .close {position:absolute; top:15px; right:15px; 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: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-visual */
.main-visual {position:relative; width:100%; height:100vh; }
.main-visual .contain {max-width: 1780px;}
.main-visual .items {position:relative; background:#000; overflow:hidden;}
.main-visual .item {position:relative; height:100vh; overflow:hidden;}
.main-visual .img {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; transition:5s linear; transform:scale(1.15);}
.main-visual .img img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.main-visual .caption {position:absolute; bottom: var(--space-180); left: 0;  width:100%; color:#fff; z-index:40;}
.main-visual .caption img {margin:0 auto;}
.main-visual .caption .txt {text-align:left;}
.main-visual .caption h2 {transition:1.2s; transform:translate(-50px,0); opacity:0;}
.main-visual .caption h2 {font-size:var(--font-size-58); font-weight:600; line-height:1.344em; letter-spacing:-.02em;}

.main-visual .active .img {transform:scale(1);} 
.main-visual .active .caption h2 {transform:translate(0,0); opacity:1;}
.main-visual .active .caption h2 {transition-delay:.3s;}

.main-visual .slick-dots {position:absolute; bottom:var(--space-120); left:50%; transform:translateX(-50%); width:100%; max-width:1780px; height: 8px; padding:0 var(--space-container); margin:0 auto; text-align:left; line-height:0; z-index:5;}
.main-visual .slick-dots li {display:inline-block; margin: 0 4px;}
.main-visual .slick-dots li button {position:relative; display:block; width:60px; height:4px; background:rgba(255, 255, 255, 0.24); backdrop-filter: blur(20px); border:none; overflow:hidden; text-indent:-9999em; transition:.2s;}
.main-visual .slick-dots li button:before {display:none;}
.main-visual .slick-dots .slick-active button {background: #fff;}

.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%);}
.vjs-has-started .vjs-control-bar {display:none !important; visibility:hidden !important;}


/* 메인 컨텐츠 영역 */
/* ========== 메인 (fullPage) ========== */
#main {--font-display:'gmarketsans', 'Pretendard', sans-serif; --color-heading:#242424; --color-body:#454545; --color-muted:#868686; --color-border:#dddddd; --color-gray-bg:#f8f8f8; --color-white:#fff; --content-w:1440px; --layout-gutter:var(--space-container); --header-h:var(--header-height); --main-pager-left:clamp(16px, 5vw, 100px); --main-pager-gap:12px;}
#main #header {position:fixed; top:0; left:0; width:100%; z-index:100;}
#main #container {max-width:none; width:100%; margin:0; padding:0; min-height:0 !important; overflow:visible;}
#main #fullpage {width:100%;}
#main #fullpage .section {height: 100vh; overflow:hidden; }
.fp-tableCell {height: 100vh;}
#main #fullpage .section .contain {padding-top: calc(var(--header-height) + var(--space-100)) ; padding-bottom: var(--space-100);}
#main #fullpage .main-section--intro {padding:0;}
#main #fullpage .main-section--intro .contain {padding-top: var(--header-height); padding-bottom: 0;}
#main #fullpage  .cs-section__inner.contain {padding-top: calc(var(--header-height) + var(--space-150));}
#main #fullpage .section.footsec {width:100%; border-top:none; overflow:visible;}
#main #fullpage .section.footsec .contain {padding-top: 0; padding-bottom: 0;}


/* fullPage 네비 — 시안 .main-pager */
#main #fp-nav {left:var(--main-pager-left) !important; right:auto !important; margin:0 !important; z-index:50; transform:translateY(-50%);}
#main #fp-nav ul {margin:0; padding:0;}
#main #fp-nav ul li {display:block; width:10px; height:10px; margin:0 0 var(--main-pager-gap); border:none; border-radius:0; background:transparent;}
#main #fp-nav ul li:last-child {margin-bottom:0;}
#main #fp-nav ul li a {display:block; width:10px; height:10px; border:2px solid var(--color-primary); border-radius:50%; background:transparent; box-sizing:border-box; transition:background 0.2s, transform 0.2s;}
#main #fp-nav ul li a:hover {transform:scale(1.15); background:transparent;}
#main #fp-nav ul li a span {display:none !important;}
#main #fp-nav ul li a.active,
#main #fp-nav ul li:hover a.active {background:var(--color-primary); border-color:var(--color-primary); border-radius:50%;}

#main #fullpage .hero {min-height:0; height:100%;}
.hero {position:relative; width:100%; min-height:calc(100dvh - var(--header-h)); display:flex; align-items:center; overflow:hidden; background:var(--color-white, #fff);}
.hero__visual {position:absolute; right:0; top: calc(50% + var(--header-height) / 2);; transform:translateY(-50%); z-index:0; width:min(972px, 50.625vw); background:var(--color-primary); border-radius:400px 0 0 400px; overflow:hidden; display:flex; flex-direction:column; align-items:flex-end;}
.hero__visual-frame {position:relative; width:100%; aspect-ratio:972 / 680; max-height:calc(100dvh - var(--header-h));}
.hero__visual-img {position:absolute; max-width:none;}
.hero__visual-img--fill {width:103.52%; height:118.49%; left:-3.52%; top:-7.78%; object-fit:cover;}
.hero__visual-img--cover {inset:0; width:100%; height:100%; object-fit:cover;}
.hero__inner.contain {position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-80); max-width:none; width:100%; margin-inline:0; box-sizing:border-box; padding-inline-start:max(var(--layout-gutter), calc((100vw - var(--content-w)) / 2)); padding-inline-end:calc(min(972px, 50.625vw) + 40px);}
.hero__txt {display:flex; flex-direction:column; gap:var(--space-32); max-width:680px;}
.hero__title-wrap {display:flex; flex-direction:column; gap:var(--space-24); width:100%;}
.hero__eyebrow {font-family:var(--font-display); font-weight:700; font-size:var(--font-size-16); line-height:1.5em; color:var(--color-primary); letter-spacing:0.01em;}
.hero__title {font-family:var(--font-display); color:var(--color-heading); font-weight:500;}
.hero__title-light {display:block; font-weight:300; font-size:var(--font-size-40); line-height:1.75em;}
.hero__title-strong {display:block; font-weight:500; font-size:var(--font-size-68); line-height:1.18em;}
.hero__desc {font-size:var(--font-size-18); line-height:1.67em; color:var(--color-body);}
.hero__btn {display:inline-flex; align-items:center; gap:var(--space-12); padding:var(--space-14) var(--space-16) var(--space-14) var(--space-20); border:1px solid var(--color-border); border-radius:50px; background:var(--color-white, #fff); color:var(--color-heading); transition:background 0.2s, border-color 0.2s, color 0.2s;}
.hero__btn:hover {background:var(--color-primary); border-color:var(--color-primary); color:#fff;}
.hero__btn-text {font-weight:500; font-size:var(--font-size-16); line-height:1.5em; white-space:nowrap;}
.hero__btn:after {content:""; display:block; width:24px; height:24px; flex-shrink:0; background:url("/images/main/icon-hero-btn-arrow.svg") center / 24px 24px no-repeat; transform:scaleY(-1); transition:background-image 0.2s;}
.hero__btn:hover:after {background-image:url("/images/main/icon-hero-btn-arrow-hover.svg");}

.section--category {background:linear-gradient(0deg, rgba(59, 141, 227, 0.04) 0%, rgba(59, 141, 227, 0.04) 100%), #fff; padding:0; box-sizing:border-box;}
#category .contain {display:flex; flex-direction:column; width:100%; height:100%; min-height:0; justify-content:center; box-sizing:border-box;}
#category .section-head {text-align:center; margin-bottom:var(--space-64); flex-shrink:0;}
.section--products {background:#fff; padding:0; box-sizing:border-box;}
#products .contain {display:flex; flex-direction:column; width:100%; height:100%; min-height:0; justify-content:center; box-sizing:border-box;}
.section-head {margin-bottom:var(--space-32);}
.section-head__label {font-family:var(--font-display); font-weight:700; font-size:var(--font-size-16); line-height:1.5em; color:var(--color-primary); letter-spacing:0.01em; text-transform:uppercase; margin-bottom:var(--space-16);}
.section-head__title {font-family:var(--font-display); font-weight:500; font-size:var(--font-size-40); line-height:1.2em; color:var(--color-heading);}

.cat-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-24);}
#category .cat-grid {flex:1; width:100%; min-height:0; grid-template-rows:1fr 1fr;}
.cat-card {position:relative; border-radius:var(--radius-16); overflow:hidden; aspect-ratio:5/3; display:flex; align-items:flex-end; text-decoration:none; box-shadow:0 4px 16px rgba(0,0,0,0.1); transition:box-shadow 0.3s, transform 0.3s;}
#category .cat-card {aspect-ratio:auto; height:100%; min-height:0;}
.cat-card::before {content:''; position:absolute; inset:0; background:rgba(59, 141, 227, 0.6); opacity:0; z-index:1; pointer-events:none; transition:opacity 0.3s;}
.cat-card:hover {transform:translateY(-4px); box-shadow:0 10px 32px rgba(0,0,0,0.18);}
.cat-card:hover::before {opacity:1;}
.cat-card__bg {position:absolute; inset:0;}
.cat-card__bg img {width:100%; height:100%; object-fit:cover; transition:transform 0.5s;}
.cat-card:hover .cat-card__bg img {transform:scale(1.07);}
.cat-card__overlay {position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 55%, rgba(0,0,0,0.32) 100%);}
.cat-card__overlay img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform 0.5s;}
.cat-card:hover .cat-card__overlay img {transform:scale(1.07);}
.cat-card__overlay:has(img) {background:none;}
.cat-card__overlay:has(img)::after {content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 55%, rgba(0,0,0,0.32) 100%); z-index:1;}
.cat-card__info {position:relative; z-index:2; padding:var(--space-24) var(--space-32); color:#fff;}
.cat-card__info h3 {font-size:var(--font-size-26); font-weight:700; margin-bottom:4px; line-height:1.4em;}
.cat-card__info p {font-size:var(--font-size-16); opacity:0.92; line-height:1.5em;}
.cat-card--cta {background:linear-gradient(135deg, var(--color-sub) 0%, var(--color-primary) 100%); align-items:stretch; justify-content:flex-start;}
.cat-card__cta-logo {position:absolute; left:50%; top:50%; width:88px; height:auto; transform:translate(-50%, -50%); opacity:0.45; filter:brightness(0) invert(1); pointer-events:none; z-index:0;}
.cat-card__cta-inner {position:relative; z-index:2; width:100%; height:100%; min-height:100%; padding:var(--space-24) var(--space-32); box-sizing:border-box; color:#fff;}
.cat-card__cta-text {position:absolute; left:32px; bottom:24px; max-width:calc(100% - 64px); font-size:var(--font-size-26); font-weight:700; line-height:1.4em;}

#products .tab-slider .tab {display:flex; flex-wrap:wrap; gap:var(--space-24); margin:0; padding:0; list-style:none;}
#products .tab-slider .tab li a {display:inline-block; font-size:var(--font-size-14); font-weight:500; color:var(--color-body); padding-bottom:6px; border-bottom:2px solid transparent; background:none; cursor:pointer;}
#products .tab-slider .tab li.active a {color:var(--color-primary); border-bottom-color:var(--color-primary); font-weight:700;}
#products .product-slider-head {display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:var(--space-20); flex-wrap:wrap; gap:var(--space-16);}
#products .product-card {display:flex; flex-direction:column;}
#products .product-card__thumb {position:relative; aspect-ratio:1; border-radius:16px; background:var(--color-gray-bg); overflow:hidden; margin-bottom:12px;}
#products .product-card__placeholder {position:absolute; left:50%; top:50%; width:60px; height:60px; transform:translate(-50%, -50%); z-index:0;}
#products .product-card__placeholder img {width:60px; height:60px; max-width:none; display:block; object-fit:contain;}
#products .product-card__photo {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:bottom center; z-index:1;}
#products .product-card__badge {position:absolute; top:16px; left:16px; z-index:2; padding:4px 12px; border-radius:50px; background:var(--color-primary); color:#fff; font-size:var(--font-size-12); font-weight:700;}
#products .product-card__cat {font-size:var(--font-size-16); color:var(--color-primary); margin-bottom:8px;}
#products .product-card__name {font-size:var(--font-size-16); font-weight:600; color:var(--color-heading); margin-bottom:12px; line-height:1.4em; min-height:2.8em; overflow:hidden;}
#products .product-card__name a {display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;}
#products .product-card__price {font-size:var(--font-size-20); font-weight:700; color:var(--color-heading);}
#products .product-card__price small {font-size:var(--font-size-16); font-weight:400; color:var(--color-body); margin-left:4px;}
#products .slider-arrows {display:flex; gap:var(--space-12); align-items:center;}
#products .slider-arrows button {width:56px; height:56px; border-radius:30px; border:1px solid var(--color-border); background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.2s, border-color 0.2s, opacity 0.2s;}
#products .slider-arrows button:hover {background:var(--color-primary); border-color:var(--color-primary);}
#products .slider-arrows button:hover .slider-arrows__icon img {filter:brightness(0) invert(1);}
#products .slider-arrows button:disabled,
#products .slider-arrows button.swiper-button-disabled {opacity:0.35; cursor:default; pointer-events:none; background:rgba(255,255,255,0.1); border-color:var(--color-border);}
#products .slider-arrows button:disabled:hover,
#products .slider-arrows button.swiper-button-disabled:hover {background:rgba(255,255,255,0.1); border-color:var(--color-border);}
#products .slider-arrows button:disabled:hover .slider-arrows__icon img,
#products .slider-arrows button.swiper-button-disabled:hover .slider-arrows__icon img {filter:none;}
#products .slider-arrows__icon {display:flex; width:9px; height:16px; align-items:center; justify-content:center; overflow:visible;}
#products .slider-arrows__icon img {width:16px; height:9px; max-width:none; display:block; transform:rotate(-90deg);}
#products .slider-arrows__icon--next img {transform:rotate(-90deg) scaleY(-1);}
#products .section-head {margin-bottom:0;}
#products .product-slider-head {margin-bottom:var(--space-32);}
#products .product-slider-head__txt {display:flex; flex-direction:column; gap:var(--space-40); align-items:flex-start;}
#products .tab-slider .tab {gap:var(--space-32); margin-bottom:0;}
#products .tab-slider .tab li a {font-size:var(--font-size-18); font-weight:600; line-height:1.44em; color:var(--color-muted); padding:0 0 8px;}
#products .tab-slider .tab li.active a {color:var(--color-primary); font-weight:600;}
.product-slider {overflow:hidden; width:100%;}
#products .product-slider .swiper-slide {width:300px; height:auto; box-sizing:border-box;}
#products .product-card {width:100%; gap:var(--space-24);}
#products .product-card__thumb {width:100%; height:300px; aspect-ratio:auto; border-radius:24px; background:#eee; margin-bottom:0;}
#products .product-card__con {display:flex; flex-direction:column; gap:var(--space-16); width:100%;}
#products .product-card__title-wrap {display:flex; flex-direction:column; gap:12px;}
#products .product-card__cat {font-size:var(--font-size-16); font-weight:500; line-height:1.5em; margin-bottom:0;}
#products .product-card__name {font-size:var(--font-size-18); font-weight:500; line-height:1.56em; min-height:56px; margin-bottom:0; overflow:hidden;}
#products .product-card__price {display:flex; gap:8px; align-items:flex-end; font-size:var(--font-size-20); font-weight:700; line-height:1.4em;}
#products .product-card__price small {font-size:var(--font-size-16); font-weight:500; color:var(--color-muted); margin-left:0; line-height:1.5em;}
#products .product-card__badge {top:var(--space-20); left:var(--space-20); padding:4px 10px 4px 12px; font-size:var(--font-size-14); font-weight:600; line-height:1.57em;}

.cs-section {position:relative; overflow:hidden; padding:0; background:linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(59,141,227,0.1) 100%);}
#customer .cs-section__inner.contain {display:flex; flex-direction:column; justify-content:center; height:100%; min-height:0; box-sizing:border-box;}
.cs-section__deco {position:absolute; right:0; bottom:0; width:701px; height:730px; pointer-events:none; z-index:0;}
.cs-section__deco img {width:701px; height:730px; max-width:none; display:block;}
.cs-section__inner {position:relative; z-index:1;}
.cs-section__head {display:flex; flex-direction:column; align-items:center; gap:var(--space-16); margin-bottom:var(--space-64); text-align:center; flex-shrink:0;}
.cs-section__label {font-family:var(--font-display); font-weight:700; font-size:var(--font-size-16); line-height:1.5em; color:var(--color-primary); letter-spacing:0.01em;}
.cs-section__title {font-family:var(--font-display); font-weight:500; font-size:var(--font-size-40); line-height:1.2em; color:var(--color-heading);}
.cs-grid {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-24);}
.cs-panel {min-width:0; background:none; border:none; border-radius:0; overflow:visible;}
.cs-panel__head {display:flex; justify-content:space-between; align-items:center; height:84px; padding:var(--space-30) var(--space-40); border-radius:var(--radius-24) var(--radius-24) 0 0;}
.cs-panel__head--notice {background:var(--color-sub);}
.cs-panel__head--qa {background:var(--color-primary);}
.cs-panel__head h3 {font-size:var(--font-size-28); font-weight:700; line-height:1.29em; color:#fff;}
.cs-panel__more {font-size:var(--font-size-16); font-weight:700; line-height:1.5em; color:rgba(255,255,255,0.8); white-space:nowrap;}
.cs-panel__more:hover {color:#fff;}
.cs-list {background:#fff; border:1px solid #eee; border-top:0; border-radius:0 0 var(--radius-24) var(--radius-24); overflow:hidden;}
.cs-list li {height:84px; padding:0;}
.cs-list li a {display:flex; align-items:center; justify-content:space-between; gap:var(--space-16); height:84px; padding:0 var(--space-40); color:var(--color-heading); background:#fff; border-bottom:1px solid #EEEEEE; transition:background 0.2s, color 0.2s;}
.cs-list li:last-child a {border-bottom:0;}
.cs-list li a:hover {background:#f8fafc;}
.cs-list__main {display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 0; overflow:hidden;}
.cs-list__main .new {display: flex; align-items: center; justify-content: center;}
.cs-list__title {display:block; min-width:0; flex:0 1 auto; font-size:var(--font-size-18); font-weight:400; line-height:1.44em; color:var(--color-heading); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cs-list__date {font-size:var(--font-size-14); line-height:1.57em; color:#999; flex-shrink:0;}
.cs-badge {display:inline-flex; align-items:center; justify-content:center; min-width:50px; height:26px; padding:6px 12px; box-sizing:border-box; border-radius:800px; background:#e7e7e7; color:#454545; font-size:var(--font-size-14); font-weight:600; flex-shrink:0; white-space:nowrap;}
.cs-list__new {display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:4px; background:var(--color-primary); color:#fff; font-size:var(--font-size-13); font-weight:500; line-height:1em; flex-shrink:0;}
.cs-list.cs-list--qa li a {justify-content:flex-start; gap:var(--space-24); text-align:left;}
.cs-list__q {font-size:var(--font-size-22); font-weight:700; line-height:1.18em; color:#bebebe; flex-shrink:0; text-align:left; transition:color 0.2s;}
.cs-list--qa .cs-list__title {flex:1 1 0; font-weight:600; color:var(--color-body); text-align:left; transition:color 0.2s;}
.cs-list--qa a:hover .cs-list__q,
.cs-list--qa a:hover .cs-list__title {color:var(--color-primary);}


/* 서브 공통 (비주얼, 타이틀 등 전체적인 서브공통레이아웃) */
.sub-visual {position:relative; width:100%; height:clamp(220px, calc(352 / var(--inner) * 100vw), 352px); color:#242424; background-color:#eee;}
.sub-visual .bg-wrap {position: relative; width: 100%; height: 100%; overflow: hidden;}
.sub-visual .bg {position:absolute; inset:0; width:100%; height:100%; background-position:50% 50%; background-size:cover; animation:sv-zoomIn 5s forwards linear;}
.sub-visual .cell {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1; width:100%; text-align:center;}
.sub-visual .cell .contain {display:flex; flex-direction:column; align-items:center;}
.sub-visual__eyebrow {font-family:'gmarketsans', 'Pretendard', sans-serif; font-size:var(--font-size-16); line-height:1.5em; font-weight:700; letter-spacing:0.01em; text-transform:uppercase; color:var(--color-primary); margin-bottom:var(--space-24);}
.sub-visual .cell h2 {font-family:'gmarketsans', 'Pretendard', sans-serif; font-size:var(--font-size-48); line-height:1.167em; font-weight:500; color:#242424;}
.sub-visual .bg1 {background-image:url("../images/sub/sub-visual-company.png");}
.sub-visual .bg2 {background-image:url("../images/sub/sub-visual-products.png");}
.sub-visual .bg3 {background-image:url("../images/sub/sub-visual-location.png");}
.sub-visual .bg4 {background-image:url("../images/sub/sub-visual-customer.png");}
.sub-visual__foot {position:absolute; left:0; right:0; bottom:var(--space-24); z-index:2; pointer-events:none;}
.sub-visual__foot .contain {display:flex; justify-content:flex-end; pointer-events:auto;}

@keyframes sv-zoomIn {
    0% {transform:scale(1.1);}
    100% {transform:scale(1);}
}

/* path-wrap */
.path-wrap {position:relative; border:0; background:transparent; z-index:50;}
.path-wrap .wrap {max-width:none; margin:0;}
.path-wrap .inner {display:flex; align-items:center; gap:8px; justify-content:flex-end;}
.path-wrap .home a {display:flex; align-items:center; justify-content:center; width:48px; height:48px; border:0; border-radius:50%; background:var(--color-primary) url("../images/common/icon-subnav-home.svg") 50% 50% no-repeat; background-size:22px; text-indent:-999em; overflow:hidden;}
.path-wrap .part {position:relative; width:200px; min-width:200px; border:0; z-index:50;}
.path-wrap .part > a {display:flex; align-items:center; position:relative; height:48px; padding:0 var(--space-24); border-radius:50px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.06); color:#686868; font-size:var(--font-size-16); font-weight:500; line-height:1.3em; transition:color 0.15s;}
.path-wrap .part > a:hover {color:var(--color-primary);}
.path-wrap .part.active > a {color:var(--color-primary);}
.path-wrap .part > a:after {content:""; position:absolute; top:50%; right:var(--space-24); margin:-8px 0 0; width:16px; height:16px; background:url("../images/common/icon-subnav-chevron.svg") 50% 50% no-repeat; background-size:16px; transition:transform 0.15s;}
.path-wrap .part.active > a:after {transform:rotate(180deg);}
.path-wrap .part ul {display:none; position:absolute; left:0; right:0; bottom:calc(100% + 8px); top:auto; width:200px; padding:10px 24px; border:0; border-radius:24px; background:#fff; box-shadow:0 4px 1px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.1); z-index:50; max-height:280px; overflow-y:auto;}
.path-wrap .part ul li {border:0; color:#686868; line-height:1.3em;}
.path-wrap .part ul li a {display:block; padding:6px 0; color:#686868; font-size:var(--font-size-16); font-weight:500; background:transparent;}
.path-wrap .part ul li a:hover,
.path-wrap .part ul li.active a {color:var(--color-primary); background:transparent;}

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

.sub-title.none {display:none;}
.sub-title h2 {position:relative; padding-top:var(--space-100); padding-bottom:var(--space-80); font-size:var(--font-size-40); font-weight:600; color:#242424; line-height:1.2em; text-align:center;}

.real-cont {min-height:300px; padding-bottom: var(--space-120);}
.real-cont.pb0 {padding-bottom: 0;}

/* footer */
.footsec {width:100%; z-index:1; position:relative; padding:var(--space-64) 0; background:#fff; border-top:1px solid #ddd; color:#454545;}

.site-footer__grid {display:flex; flex-wrap:wrap; gap:var(--space-24); justify-content:space-between; align-items:stretch; width:100%;}
.site-footer__left {display:flex; flex-direction:column; gap:var(--space-32); align-items:flex-start;}
.site-footer__logo {display:flex; align-items:center; gap:10px; width:208px; height:60px;}
.site-footer__logo img {width:52px; height:55px; flex-shrink:0; object-fit:contain;}
.site-footer__logo .site-logo__text {display:flex; flex-direction:column; gap:2px; justify-content:center; color:#000; font-family:'gmarketsans', 'Pretendard', sans-serif; line-height:1.1em;}
.site-footer__logo .site-logo__text small {font-size:var(--font-size-16); font-weight:500; line-height:1.2em;}
.site-footer__logo .site-logo__text strong {font-size:var(--font-size-38); font-weight:500; line-height:1em;}
.site-footer__info {display:flex; flex-direction:column; gap:var(--space-40); align-items:flex-start;}
.site-footer__chips {display:flex; flex-wrap:wrap; gap:10px;}
.footsec .chip {display:inline-flex; align-items:center; gap:8px; padding:6px 16px; border-radius:50px; background:#f8f8f8; font-size:var(--font-size-16); font-weight:400; line-height:1.5em; color:#454545;}
.footsec .chip strong {color:#242424; font-weight:600;}
.footsec .chip a {color:inherit;}
.site-footer__meta {display:flex; flex-direction:column; gap:4px; font-size:var(--font-size-16); line-height:1.5em;}
.site-footer__meta p {display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; color:#454545; font-weight:400;}
.site-footer__meta strong {color:#242424; font-weight:600;}
.site-footer__right {display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; gap:var(--space-40); margin-left:auto;}

.site-footer__legal {text-align:right; display:flex; flex-direction:column; gap:4px; align-items:flex-end;}
.site-footer__legal p {color:#868686; font-size:var(--font-size-16); font-weight:400; line-height:1.5em;}
.site-footer__legal a {color:inherit;}
.site-footer__copy {white-space:nowrap;}
.site-footer__copy-main {font-weight:300; color:rgba(134,134,134,0.8); font-size:var(--font-size-16); line-height:1.5em;}
.site-footer__copy-credit {font-weight:400; font-size:var(--font-size-12); line-height:1.5em; color:rgba(134,134,134,0.3);}

/* 퀵메뉴 (있을때 아래에 스타일 구현) */