@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 {width: 100%; margin:0 auto; padding-right:var(--space-80); padding-left:var(--space-80);}

/* header */
#header {position:fixed; top:0; left:0; width:100%; height:var(--header-height); background:rgba(255,255,255,.92); border-bottom:1px solid transparent; backdrop-filter:blur(8px); transition:background .4s, border-color .4s; z-index:100;}
#header.active {background:rgba(255,255,255,.98); border-bottom-color:#e2e3e4;}
#header .contain {display:flex; align-items:center; justify-content:flex-start; position:relative; height:100%;  z-index:10;}
.sitelogo {flex-shrink:0;}
.sitelogo a {display:block;}
.sitelogo img {display:block; width:auto; height:56px;}
#gnb {height:100%; margin-left:auto;}
#gnb > ul {display:flex; align-items:stretch; gap:var(--space-80); height:100%; text-align:center; margin-right: var(--space-16);}
#gnb > ul > li {position:relative;}
#gnb > ul > li > a {display:flex; align-items:center; position:relative; height:100%; padding:0 16px; color:#2c2c2c; font-size:var(--font-size-20); font-weight:600; line-height:1.3em; white-space:nowrap;}
#gnb > ul > li > a:after {content:""; position:absolute; right:12px; bottom:24px; left:12px; height:2px; background:var(--color-primary); transform:scaleX(0); transform-origin:left center; transition:transform .2s;}
#gnb > ul > li.active > a:after, #gnb > ul > li.current > a:after, #gnb > ul > li > a:hover:after, #gnb > ul > li > a:focus:after {transform:scaleX(1);}
#gnb .submenu {display:none; position:absolute; top:100%; left:50%; min-width:220px; padding:8px 0; background:#fff; border:1px solid #e2e3e4; border-radius:10px; box-shadow:0 12px 32px rgba(20,23,26,.08); text-align:left; transform:translateX(-50%); z-index:102;}
#gnb .submenu > ul > li > a {display:block; padding:12px 24px; color:#505050; font-size:var(--font-size-14); font-weight:500; line-height:1.5em; white-space:nowrap;}
#gnb .submenu > ul > li > a:hover, #gnb .submenu > ul > li > a:focus, #gnb .submenu > ul > li.current > a {color:#2c2c2c; background:#f8f8f7;}
.submenu-bg {display:none; position:fixed; top:var(--header-height); left:0; width:100%; height:0; background:rgba(255,255,255,.96); border-top:1px solid #e2e3e4; z-index:99;}
.btn-m-menu {display:none; width:28px; height:22px;}
.btn-m-menu div {display:flex; flex-direction:column; justify-content:space-between; width:100%; height:100%;}
.btn-m-menu span {display:block; width:100%; height:2px; background:#14171a;}
.mobile-navigation {display:block; position:fixed; top:0; right:0; width:min(340px,85vw); height:100%; overflow:auto; background:#fff; transform:translateX(100%); transition:transform .25s linear; z-index:102;}
.mobile-navigation .home {height:64px; padding: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 #e2e3e4;}
.mobile-navigation .nav-menu > ul > li {border-bottom:1px solid #e2e3e4;}
.mobile-navigation .nav-menu > ul > li > a {display:block; position:relative; padding:16px 50px 16px 20px; color:#2c2c2c; font-size:18px; font-weight:700; line-height:1.3em;}
.mobile-navigation .nav-menu > ul > li > a:after {content:""; position:absolute; top:50%; right:22px; width:10px; height:10px; border-right:2px solid #676767; border-bottom:2px solid #676767; transform:translateY(-70%) rotate(45deg);}
.mobile-navigation .nav-menu > ul > li.active > a:after {border-color:var(--color-primary); transform:translateY(-30%) rotate(-135deg);}
.mobile-navigation .nav-menu .submenu {display:none; position:static; min-width:0; padding:8px 0; background:var(--color-primary); border:0; border-radius:0; box-shadow:none; transform:none;}
.mobile-navigation .nav-menu .submenu > ul > li > a {display:block; padding:10px 20px; color:#fff; font-size:16px; font-weight:500; line-height:1.3em;}
.mobile-navigation .close {position:absolute; top:18px; right:18px; width:28px; height:28px; overflow:hidden; text-indent:-9999em;}
.mobile-navigation .close:before, .mobile-navigation .close:after {content:""; position:absolute; top:13px; left:0; width:100%; height:2px; background:#14171a;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:101;}
html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}

/* main-visual */
.main-visual {position:relative; width:100%; height:100vh;}
.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%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.main-visual .img::after {content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,23,26,0.20) 0%,rgba(20,23,26,0.28) 55%,rgba(20,23,26,0.62) 100%); z-index:1; pointer-events:none;}
.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 {max-width:none; text-align:left;}
.main-visual .caption .hero-badges {display:flex; gap:12px; margin-bottom:28px; flex-wrap:wrap; transition:1s; transform:translate(-30px,0); opacity:0;}
.main-visual .caption h2 {font-size:clamp(30px, 2.45vw, 50px); font-weight:600; line-height:1.08em; letter-spacing:-0.02em; color:#fff; white-space:normal; transition:1.2s; transform:translate(-50px,0); opacity:0;}
.main-visual .caption h2 .hero-title-line2 {display:inline-block; font-size:clamp(26px, 2.3vw, 46px); white-space:nowrap !important;}
.main-visual .caption p {margin-top:18px; max-width:620px; color:#e7e7e7; font-size:16px; line-height:1.55em; transition:1s; transform:translate(-30px,0); opacity:0;}
.main-visual .active .img {transform:scale(1);}
.main-visual .active .caption h2, .main-visual .active .caption .hero-badges, .main-visual .active .caption p {transform:translate(0,0); opacity:1;}
.main-visual .active .caption .hero-badges {transition-delay:.15s;}
.main-visual .active .caption h2 {transition-delay:.3s;}
.main-visual .active .caption p {transition-delay:.45s;}
.main-visual .slick-dots {position:absolute; bottom:var(--space-64); left:50%; transform:translateX(-50%); width:100%; height:8px; padding:0 var(--space-80); margin:0 auto; text-align:left; line-height:0; z-index:50;}
.main-visual .slick-dots li {display:inline-block; margin:0 4px;}
.main-visual .slick-dots li button {position:relative; display:block; width:28px; height:3px; border-radius:2px; background:rgba(255,255,255,0.35); 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:var(--color-primary);}
.main-visual .slide-btn {position:absolute; bottom:var(--space-64); z-index:50; width:40px; height:40px; border:1px solid rgba(255,255,255,0.4); border-radius:50%; background:transparent; color:#fff; cursor:pointer; transition:background .2s;}
.main-visual .slide-btn:hover {background:rgba(255,255,255,0.15);}
.main-visual .slide-prev {right:calc(var(--space-80) + 50px);}
.main-visual .slide-next {right:var(--space-80);}
.main-visual .slide-prev:before, .main-visual .slide-next:before {content:""; display:block; width:8px; height:8px; margin:0 auto; border-top:2px solid #fff; border-right:2px solid #fff;}
.main-visual .slide-prev:before {transform:rotate(-135deg); margin-left:16px;}
.main-visual .slide-next:before {transform:rotate(45deg); margin-left:14px;}
.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; transform:translate(-50%,-50%);}
.vjs-has-started .vjs-control-bar {display:none !important; visibility:hidden !important;}

/* 메인 컨텐츠 영역 */
.main-section.jl-story { padding-block:clamp(66px, calc(112 / var(--inner) * 100vw), 112px); }
.jl-story__inner { display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--space-80); align-items:center; }
.jl-story__inner--reverse { direction:rtl; }
.jl-story__inner--reverse > * { direction:ltr; }
.jl-story__inner--reverse .jl-story__copy { text-align:right; }
.jl-story__inner--reverse .jl-story__label { justify-content:flex-end; }
.jl-story__inner--reverse .jl-story__points li { padding-left:0; padding-right:var(--space-18); }
.jl-story__inner--reverse .jl-story__points li::before { left:auto; right:0; }
.jl-story__graphic { height:480px; padding:var(--space-24); box-sizing:border-box; background:#fff; border:1px solid #e2e3e4; display:flex; flex-direction:column; align-items:stretch; justify-content:center; }
.jl-story__graphic > * { width:100%; flex:1; min-height:0; }
.section--alt .jl-story__graphic { background:#fff; }
.jl-story--why .jl-story__graphic, .jl-story--how .jl-story__graphic { padding:0; }
.jl-story__graphic-img { width:100%; height:100%; display:block; object-fit:contain; object-position:center; }
.jl-story__label { display:flex; align-items:center; gap:var(--space-10); font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#2c2c2c; line-height:1.4em; }
.jl-story__label-en { letter-spacing:0.14em; color:#2c2c2c; }
.jl-story__label-sep { color:#676767; font-weight:400; letter-spacing:-0.02em; text-transform:none; }
.jl-story__label-ko { color:#676767; font-weight:600; letter-spacing:-0.02em; text-transform:none; }
.jl-story__copy h2 { margin-top:var(--space-12); font-size:var(--font-size-38); font-weight:600; line-height:1.3em; letter-spacing:-0.02em; color:#2c2c2c; }
.jl-story__lead { margin-top:var(--space-20); font-size:var(--font-size-18); line-height:1.75em; color:#505050; }
.jl-story__lead strong { color:#545e34; font-weight:600; }
.jl-story__points { margin-top:var(--space-24); display:flex; flex-direction:column; gap:var(--space-12); }
.jl-story__points li { position:relative; padding-left:var(--space-18); font-size:var(--font-size-16); line-height:1.7em; color:#505050; }
.jl-story__points li::before { content:""; position:absolute; left:0; top:0.65em; width:var(--space-6); height:var(--space-6); border-radius:50%; background:var(--color-primary); }
.jl-story__points li strong { color:#2c2c2c; font-weight:600; }
.jl-story__extend { margin-top:clamp(var(--space-56),7vw,var(--space-88)); padding-top:clamp(var(--space-40),5vw,var(--space-56)); border-top:1px solid #e2e3e4; }
.jl-what-system__title { font-size:var(--font-size-32); font-weight:600; line-height:1.35em; letter-spacing:-0.02em; color:#545e34; }
.jl-what-system__lead { margin-top:var(--space-16); font-size:var(--font-size-18); line-height:1.75em; color:#505050; }
.jl-what-system__steps { margin-top:clamp(var(--space-32),4vw,var(--space-48)); padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(var(--space-16),2vw,var(--space-24)); }
.jl-what-system__step { display:flex; flex-direction:column; min-width:0; }
.jl-what-system__thumb { aspect-ratio:4/3; overflow:hidden; background:#e2e3e4; border:1px solid #e2e3e4; }
.jl-what-system__thumb img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; transition:transform .8s cubic-bezier(0.22,1,0.36,1); }
.jl-what-system__step:hover .jl-what-system__thumb img { transform:scale(1.03); }
.jl-what-system__num { display:block; margin-top:var(--space-16); font-size:var(--font-size-13); font-weight:600; letter-spacing:0.08em; color:#878787; line-height:1.4em; }
.jl-what-system__name { display:block; margin-top:var(--space-6); font-size:var(--font-size-18); font-weight:600; line-height:1.45em; color:#2c2c2c; }
.jl-what-system__desc { margin-top:var(--space-8); font-size:var(--font-size-16); line-height:1.65em; color:#505050; }
.jl-grid-4 { grid-template-columns:repeat(4,1fr); }
.main-news .jl-news-card__tag--press { color:#c0392b; }
.contact-cta { position:relative; overflow:hidden; padding-top:clamp(var(--space-80),10vw,var(--space-120)); padding-bottom:clamp(var(--space-80),10vw,var(--space-120)); }
.contact-cta__media { position:absolute; inset:0; background:url("/images/main/contact-bg.jpg") center / cover no-repeat; }
.contact-cta__media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,23,26,0.5) 0%,rgba(20,23,26,0.88) 100%); }
.contact-cta .contain { position:relative; z-index:2; }
.contact-cta__head h2 { font-size:var(--font-size-48); font-weight:600; line-height:1.35em; color:#fff; }
.contact-cta__head p { margin-top:var(--space-20); font-size:var(--font-size-18); line-height:1.7em; color:#e7e7e7; max-width:560px; }
.contact-cta__btn { margin-top:var(--space-32); }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:var(--space-14) var(--space-28); font-size:var(--font-size-16); font-weight:600; line-height:1.4em; border-radius:4px; transition:background .2s,border-color .2s,color .2s; }
.btn--outline { border:1px solid rgba(255,255,255,0.7); color:#fff; background:transparent; }
.btn--outline:hover, .btn--outline:focus { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.jl-float-island.is-hidden { opacity:0; transform:translateX(-50%) translateY(var(--space-20)); pointer-events:none; }
.jl-float-island.is-hidden .jl-float-island__shell { pointer-events:none; }

/* 서브 공통 (비주얼, 타이틀 등 전체적인 서브공통레이아웃) */ 
.sub-visual {position:relative; width:100%; padding:calc(var(--header-height) + 56px) 0 56px; overflow:hidden; color:#2c2c2c; background:#fff; border-bottom:1px solid #14171a;}
.sub-visual .bg {display:none;}
.sub-visual .cell {position:relative; width:100%;}
.sub-visual .cell .contain {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; gap:24px 80px; max-width:none; padding-right:clamp(20px,5vw,80px); padding-left:clamp(20px,5vw,80px);}
.sub-visual h2 {font-size:clamp(36px,4.5vw,56px); font-weight:600; line-height:1.15em; letter-spacing:-.02em;}
.sub-visual p {max-width:560px; margin-left:auto; color:#505050; font-size:var(--font-size-16); line-height:1.8em; text-align:right;}
.lnb-wrap {position:relative; background:#fff; border-bottom:1px solid #e2e3e4;}
.lnb {max-width:1200px; margin:0 auto;}
.lnb .swiper {overflow:hidden;}
.lnb ul {display:flex;}
.lnb ul li {flex:1; width:auto; text-align:center; border-right:1px solid #e2e3e4;}
.lnb ul li:first-child {border-left:1px solid #e2e3e4;}
.lnb ul li a {display:flex; align-items:center; justify-content:center; width:100%; min-height:60px; padding:12px 15px; color:#2c2c2c; font-size:var(--font-size-16); font-weight:500; line-height:1.3em; letter-spacing:-.03em;}
.lnb ul li.active {background:var(--color-primary); border-color:var(--color-primary);}
.lnb ul li.active a {color:#fff;}

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

.sub-title h2 {position: relative; padding-top: var(--space-120); padding-bottom: var(--space-80); font-size:var(--font-size-48); font-weight:600; color:#2c2c2c; line-height:1.375em; text-align: center;}

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

/* footer */
#footer {position:relative; width:100%; padding:var(--space-64) 0 var(--space-40); color:#505050; background:#fff; border-top:1px solid #e2e3e4; z-index:1;}
.footer__top {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-32); padding-bottom:var(--space-40); margin-bottom:var(--space-40); border-bottom:1px solid #e2e3e4;}
.footer__brand img {display:block; width:auto; height:56px;}
.footer__partners {display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-32);}
.footer__partners img {display:block; width:auto; height:32px;}
.footer__partners img[src*="saeondesign"] {height:40px;}
.footer__partners img[src*="jangdesign"] {height:52px;}
.footer__partners .divider {width:1px; height:24px; background:#e2e3e4;}
.footer__grid {display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:var(--space-32);}
.footer__col-title { color:#2c2c2c; font-size:var(--font-size-14); font-weight:700; }
.footer__info { display:flex; flex-direction:column; gap:var(--space-16); }
.footer__info p { font-size:var(--font-size-14); line-height:1.9em; }
.footer__links { display:flex; flex-direction:column; gap:var(--space-16); }
.footer__list { display:flex; flex-direction:column; }
.footer__list a { display:block; padding:5px 0; font-size:var(--font-size-14); line-height:1.5em; }
.footer__list a:hover, .footer__list a:focus { color:#2c2c2c; }
.footer__legal {display:flex; flex-wrap:wrap; gap:var(--space-8) var(--space-20); margin-top:var(--space-40); font-size:var(--font-size-13);}
.footer__legal a:first-child {color:#2c2c2c; font-weight:700;}
.footer__bottom {display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-8); margin-top:var(--space-16); color:#676767; font-size:var(--font-size-13); line-height:1.5em;}
.jl-float-island {position:fixed; left:50%; bottom:var(--space-48); width:min(1200px,calc(100% - var(--space-60))); opacity:1; pointer-events:none; transform:translateX(-50%); transition:opacity .45s, transform .45s; z-index:90;}
.jl-float-island__shell {display:flex; align-items:stretch; width:100%; padding:var(--space-24) var(--space-40); background:rgb(255 255 255 / 58%); border:1px solid #dfdfdf; border-radius:16px; box-shadow:0 6px 32px rgba(0,0,0,.1); backdrop-filter:blur(12px); pointer-events:auto;}
.jl-float-island__main {display:flex; align-items:center; flex:1; min-width:0;}
.jl-float-island__news {display:flex; flex-direction:column; flex-shrink:0; gap:var(--space-8); width: 32%; max-width:260px;}
.jl-float-island__news-head {display:flex; align-items:center; gap:var(--space-10);}
.jl-float-island__news-tag {flex-shrink:0; padding:var(--space-4) var(--space-10); color:#fff; background:var(--color-primary); border-radius:4px; font-size:13px; font-weight:600; line-height:1.23em; letter-spacing:-.02em;}
.jl-float-island__news-month {color:#505050; font-size:15px; font-weight:600; line-height:1.4em; white-space:nowrap;}
.jl-float-island__news-title {overflow:hidden; color:#2c2c2c; font-size:20px; font-weight:700; line-height:1.35em; text-overflow:ellipsis; white-space:nowrap;}
.jl-float-island__news-title:hover, .jl-float-island__news-title:focus {color:#545e34;}
.jl-float-island__desc {flex:1; min-width:0; padding:0 var(--space-20); border-right:1px solid #a8a8a8; border-left:1px solid #a8a8a8;}
.jl-float-island__desc p {display:-webkit-box; overflow:hidden; color:#505050; font-size:14px; line-height:1.57em; -webkit-box-orient:vertical; -webkit-line-clamp:3;}
.jl-float-island__sns {display:flex; align-items:center; flex-shrink:0; gap:var(--space-20); padding:0 var(--space-24); border-right:1px solid #a8a8a8;}
.jl-float-island__sns-item {display:flex; flex-direction:column; align-items:center; gap:var(--space-8); transition:opacity .2s;}
.jl-float-island__sns-item:hover {opacity:.85;}
.jl-float-island__sns-item.is-disabled {cursor:default;}
.jl-float-island__sns-icon {display:flex; align-items:center; justify-content:center; width:48px; height:48px; background:#fff; border:1px solid var(--color-primary); border-radius:50%;}
.jl-float-island__sns-icon img {display:block; width:24px; height:24px; object-fit:contain;}
.jl-float-island__sns-label {color:#505050; font-size:14px; font-weight:600; line-height:1.14em;}
.jl-float-island__top {display:flex; align-items:center; flex-shrink:0; padding-left:var(--space-24);}
.jl-float-island__top-btn {display:flex; flex-direction:column; align-items:center; gap:var(--space-8); padding:0; border:0; background:none;}
.jl-float-island__top-icon {display:flex; align-items:center; justify-content:center; width:48px; height:48px; background:#14171a; border-radius:50%;}
.jl-float-island__top-icon img {display:block; width:24px; height:24px; object-fit:contain;}
.jl-float-island__top-label {color:#505050; font-size:14px; font-weight:600; line-height:1.14em;}