@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:var(--font-size-14);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;}

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

#wrapper {position:relative; padding-top:var(--header-height);}

/* header */
#header {position:fixed; top:0; left:0; z-index:100; height:var(--header-height); width:100%; background:#fff; border-bottom:1px solid #ddd; }
#header .contain {position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; height:100%; max-width:1580px; z-index:2;}
.sitelogo {flex-shrink:0;}
.sitelogo img {display:block; height:clamp(38px, calc(56 / var(--inner) * 100vw), 56px);}

#gnb {flex:1 1 auto; min-width:0; display:flex; justify-content:center;}
#gnb>ul {display:flex; justify-content:center; gap:clamp(40px, calc(80 / var(--inner) * 100vw), 80px);}
#gnb>ul>li {position:relative;}
#gnb>ul>li>a {position:relative; display:flex; align-items:center; justify-content:center; height:var(--header-height); color:#454545; font-size:var(--font-size-20); font-weight:600; line-height:1.2em; text-align:center;}
#gnb>ul>li:hover>a {color:var(--color-primary);}

.all-menu {display:none; position:absolute; left:0; top:var(--header-height); z-index:3; width:100%; background:#fff; box-shadow:8px 8px 8px rgba(0,0,0,0.1);}
.all-menu .all-menu-inner {display:flex; gap:4px; width:100%; max-width:1520px; margin:0 auto;}
.all-menu .all-menu-list {flex:1; padding:var(--space-30) var(--space-40); transition:background .2s ease;}
.all-menu .all-menu-list:hover {background:#f6f6f6;}
.all-menu .all-menu-list .col-tit {margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #ddd; color:var(--color-primary); font-size:var(--font-size-16); font-weight:700; line-height:1.5em; letter-spacing:-0.01em;}
.all-menu .all-menu-list ul {display:flex; flex-direction:column; gap:10px; font-size:var(--font-size-16); line-height:1.5em; color:#454545; font-weight:600;}
.all-menu .all-menu-list ul li a {display:block;}
.all-menu .all-menu-list ul li a:hover {color:var(--color-primary);}
.all-menu .all-menu-list .depth3 {padding:4px 0 4px 8px;}
.all-menu .all-menu-list .depth3 ul {gap:2px; color:#888; font-weight:400;}
.all-menu .all-menu-list .depth3 a {display:block; position:relative; padding-left:10px;}
.all-menu .all-menu-list .depth3 a:hover {color:var(--color-primary);}
.all-menu .all-menu-list .depth3 a:before {content:"·"; position:absolute; left:0; top:0; font-weight:700;}

.header-util {display:flex; align-items:center; gap:20px; flex-shrink:0;}
.header-util .btn-search {display:flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0; background:none; border:0;}
.header-util .btn-search img {display:block; width:20px; height:20px;}
.header-util .btn-contact {display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; border:1px solid var(--color-primary); border-radius:40px; color:var(--color-primary); font-size:var(--font-size-16); font-weight:500; line-height:1.2em; white-space:nowrap;}
.header-util .btn-contact:hover {background:var(--color-primary); color:#fff;}

.language {position:relative; display:inline-block;}
.language .toggle-button {display:flex; align-items:center; gap:8px; padding:0; background:none; border:0; color:#454545; font-size:var(--font-size-16); line-height:1.75em;}
.language .toggle-button .ico {width:16px; height:16px; line-height:0;}
.language .toggle-button .ico svg,
.language .toggle-button .chevron svg {display:block; width:100%; height:auto;}
.language .toggle-button .chevron {width:8px;}
.language .toggle-layer {display:none; position:absolute; left:50%; top:100%; z-index:10; width:60px; padding:16px 8px; background:#fff; border:1px solid #ddd; text-align:center; transform:translateX(-50%);}
.language .toggle-layer ul {display:grid; gap:4px;}
.language .toggle-layer a {display:block; color:#888; font-size:var(--font-size-16); font-weight:400; line-height:1.5em;}
.language .toggle-layer a:hover {color:#454545;}
.language.active .toggle-button .chevron {transform:scaleY(-1);}

.btn-m-menu {display:flex; align-items:center; justify-content:center; width:20px; height:20px; flex-shrink:0;}
.btn-m-menu svg {display:block; width:100%; height:auto;}

/* search layer */
.search-layer {position:fixed; inset:0; z-index:200; background:rgba(255,255,255,0.5);}
.search-layer[hidden] {display:none !important;}
.search-layer .search-bar {display:flex; align-items:center; justify-content:center; gap:24px; height:var(--header-height); padding:0 40px; background:#f4f5f9; border:1px solid var(--color-primary);}
.search-layer form {position:relative; display:flex; align-items:center; width:100%; max-width:420px; height:56px; padding:0 56px 0 24px; background:#fff; border:1px solid #ddd; border-radius:50px;}
.search-layer input[type="search"] {flex:1; min-width:0; border:0; color:#454545; font-size:18px; line-height:1.55em; letter-spacing:-0.03em; outline:none; background:transparent;}
.search-layer input[type="search"]::placeholder {color:#878787;}
.search-layer .btn-submit {position:absolute; right:20px; top:50%; width:28px; height:28px; padding:0; background:none; border:0; transform:translateY(-50%);}
.search-layer .btn-submit img {display:block; width:28px; height:28px;}
.search-layer .btn-close-search {width:24px; height:24px; padding:0; background:none; border:0; flex-shrink:0;}
.search-layer .btn-close-search img {display:block; width:100%; height:auto;}

/* mobile / hamburger panel */
.mobile-navigation {position:fixed; top:0; left:0; z-index:102; width:80%; max-width:1170px; height:100dvh; overflow:auto; background:#fff; transition:.4s ease; -webkit-transform:translateX(-105%); transform:translateX(-105%); overflow:auto;}
.mobile-navigation .close {position:absolute; top:var(--space-40); right:var(--space-40); width:24px; height:24px; padding:0; background:url('/images/common/close.svg') 50% 50%/contain no-repeat; border:0; line-height:0;}
.mobile-navigation .wrap {display:flex; flex-direction:column; justify-content:center; width:100%; min-height:100dvh; padding:30px clamp(30px, calc(120 / var(--inner) * 100vw), 120px); }
.mobile-navigation .inner {display:flex; flex-direction:column; gap:clamp(30px, calc(130 / var(--inner) * 100vw), 130px);}
.mobile-navigation .nav-menu .all-menu-inner {display:flex; flex-direction:column; gap:var(--space-50); width:100%;}
.mobile-navigation .nav-menu .all-menu-list {display:flex; gap:var(--space-30);}
.mobile-navigation .nav-menu .all-menu-list .col-tit {flex-shrink:0; width:clamp(150px, calc(170 / var(--inner) * 100vw), 170px); color:#2c2c2c; font-size:var(--font-size-26); font-weight:700; line-height:1.2em;} 
.mobile-navigation .nav-menu .all-menu-list > ul {flex:1; min-width:0; border-bottom:1px solid #ddd; padding-bottom:16px; gap:6px 0;}
.mobile-navigation .nav-menu .all-menu-list > ul > li > a:hover {font-weight:600;}
.mobile-navigation .nav-menu .all-menu-list ul {display:flex; flex-wrap:wrap; font-size:var(--font-size-18); line-height:1.4em; color:#898989;}
.mobile-navigation .nav-menu .all-menu-list ul li {display:flex; align-items:center}
.mobile-navigation .nav-menu .all-menu-list ul li:before {content:''; flex-shrink:0; width:1px; height:.8em; opacity:.6; background:#898989; margin:0 .65em;}
.mobile-navigation .nav-menu .all-menu-list ul li:first-child:before {display:none;}
.mobile-navigation .nav-menu .all-menu-list ul li a {display:block;}
.mobile-navigation .nav-menu .all-menu-list ul li a:hover {color:var(--color-primary);}
.mobile-navigation .nav-menu .all-menu-list > ul > li > a {display:block;}
.mobile-navigation .nav-menu .all-menu-list .depth3 {display:flex; align-items:center;}
.mobile-navigation .nav-menu .all-menu-list .depth3 ul li:first-child:before {content:'('; margin-right:.3em; margin-left:.3em; display:block; opacity:1; width:auto; height:auto; background:none;}
.mobile-navigation .nav-menu .all-menu-list .depth3 ul li:last-child:after {content:')'; margin-left:.3em;}

.mobile-navigation .menu-brand img {display:block; height:clamp(38px, calc(60 / var(--inner) * 100vw), 60px); margin-top:var(--space-20);}
.mobile-navigation .menu-brand p {color:#898989; font-size:var(--font-size-20); line-height:1.5em; letter-spacing:-0.03em;}
.mobile-navigation .menu-brand strong {font-weight:600;}

.mobile-overlay {display:none; position:fixed; top:0; left:0; z-index:101; width:100%; height:100%; background:#000; opacity:0.8;}
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 */
.main {position:relative; padding:var(--space-100) 0; background:#000; color:#fff; text-align:center; overflow:hidden;}
.main .contain {position:relative; z-index:2; max-width:1560px;}

.main-visual {position:absolute; top:0; left:0; z-index:1; width:100%; height:100%;}
.main-visual .slick-list {position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual .slick-track {position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual .slick-slide {position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual .slick-slide img {display:block; width:100%; height:100%; object-fit:cover;}

.main-visual .items {position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual .item {position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual .item img {display:block; width:100%; height:100%; object-fit:cover;}
.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%);}

@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;}
}

.main-slogan {margin-bottom:var(--space-50); display:flex; flex-direction:column; gap:10px;}
.main-slogan h2 {font-size:clamp(40px, calc(60 / var(--inner) * 100vw), 60px); font-weight:700; line-height:1.3em; letter-spacing:-0.03em; color:#fff;}
.main-slogan p {font-size:var(--font-size-24); font-weight:500; line-height:1.5em; letter-spacing:-0.03em; color:#fff;}

.biz-accordion {display:flex; align-items:space-between; justify-content:center; gap:var(--space-30); width:100%;}
.biz-card {position:relative; flex:1; height:clamp(360px, calc(454 / var(--inner) * 100vw), 454px); border-radius:16px; overflow:hidden;  background-position:50% 50%; background-repeat:no-repeat; background-size:cover;  transition:all .5s ease !important;}
.biz-card.n1 {background-image:url('/images/main/biz-1.jpg');}
.biz-card.n2 {background-image:url('/images/main/biz-2.jpg');}
.biz-card.n3 {background-image:url('/images/main/biz-3.jpg');}
.biz-card.n4 {background-image:url('/images/main/biz-4.jpg');}
.biz-card.n5 {background-image:url('/images/main/biz-5.jpg');}
.biz-card.n6 {background-image:url('/images/main/biz-6.jpg');}
.biz-card .biz-card-info {position:absolute; left:0; bottom:0; z-index:1; display:flex; flex-direction:column; gap:12px; width:100%; padding:var(--space-30) var(--space-20); color:#fff; text-align:left;}
.biz-card .title {flex-shrink:0; display:block; font-size:var(--font-size-30); font-weight:700; line-height:1.2em; letter-spacing:-0.03em;}
.biz-card .hidden-text {flex:0; max-height:0; overflow:hidden; opacity:0; transition:1.2s ease;}
.biz-card .desc {margin:var(--space-20) 0 var(--space-30); font-size:var(--font-size-16); font-weight:400; line-height:1.5em; letter-spacing:-0.03em;}
.biz-card .more {display:inline-flex; align-items:center; gap:10px; margin-top:8px; font-size:var(--font-size-16); font-weight:500; line-height:1.5em;}
.biz-card .more:after {content:""; display:block; width:28px; height:28px; border:1px solid #fff; border-radius:50%; background:url("/images/main/arrow.svg") 50% 50% no-repeat;}
.biz-card.active {flex:0 1 30%; max-width:410px;  border:1px solid #fff;}
.biz-card.active .hidden-text {opacity:1; flex:1; min-height:0; max-height:500px; transition-delay:.2s;}

.main-desc {display:flex; flex-direction:column; margin:var(--space-50) 0; gap:1.2em; font-size:var(--font-size-20); line-height:1.4em; letter-spacing:-0.03em;}

.main-links {display:flex; align-items:center; justify-content:center; gap:clamp(20px, 10vw, 200px); max-width:1400px; margin:0 auto; padding-top:var(--space-50); border-top:1px solid rgba(255,255,255,0.35);}
.main-links a {display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:var(--font-size-20); font-weight:500; line-height:1.3em; letter-spacing:-0.03em; text-align:left;}
.main-links img {display:block; width:24px; height:24px;}

/* sub path / visual */
.path-wrap {position:relative; background:#f9f9f9; z-index:50;}
.path-wrap .wrap {max-width:1580px; margin:0 auto; padding:0 var(--space-container);}
.path-wrap .inner {display:flex; align-items:center; height:var(--lnb-height);}
.path-wrap .home {position:relative; padding:0 18px 0 0; flex-shrink:0;}
.path-wrap .home a {display:block;}
.path-wrap .home img {display:block; width:24px; height:auto;}
.path-wrap .home:after {content:""; position:absolute; right:0; top:50%; width:1px; height:var(--font-size-18); background:#ddd; transform:translateY(-50%);}
.path-wrap .part {position:relative; display:flex; align-items:center; min-width:300px; padding:0 18px; z-index:50;}
.path-wrap .part:after {content:""; position:absolute; right:0; top:50%; width:1px; height:var(--font-size-18); background:#ddd; transform:translateY(-50%);}
.path-wrap .part > a {display:flex; align-items:center; justify-content:space-between; width:100%; height:var(--lnb-height); color:#2c2c2c; font-size:var(--font-size-18); font-weight:400; line-height:1.33em;}
.path-wrap .part > a:after {content:""; width:22px; height:20px; background:url("/images/common/path-down.svg") 50% 50% / contain no-repeat; flex-shrink:0;}
.path-wrap .part ul {display:none; position:absolute; left:0; right:0; top:100%; background:#fff; border:1px solid #ddd; z-index:50;}
.path-wrap .part ul li:not(:last-child) {border-bottom:1px solid #ddd;}
.path-wrap .part ul li a {display:block; padding:var(--space-16) var(--space-30); color:#2c2c2c; font-size:var(--font-size-18); font-weight:400; line-height:1.33em;}
.path-wrap .part ul li a:hover,
.path-wrap .part ul li.active a {color:var(--color-primary); font-weight:600;}

.sub-heading {text-align:center; padding:var(--space-50) 0; border-bottom:3px solid #172761;}
.sub-heading h2 {color:#172761; font-size:clamp(30px, calc(60 / var(--inner) * 100vw), 60px); font-weight:700; line-height:1.3em; letter-spacing:-0.02em;}

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

.sub-title {margin:var(--space-90) 0 var(--space-70); text-align:center;}
.sub-title h2 {font-size:clamp(26px, calc(58 / var(--inner) * 100vw), 58px); font-weight:700; line-height:1.17em; color:#2c2c2c; letter-spacing:-0.03em;}

.real-cont {min-height:200px; padding-bottom:var(--space-150);}

html:has(.sub-title.blind) .real-cont {padding-top:var(--space-100)}

/* sub-nav (연혁·사업분야 공통) */
.sub-nav {position:relative; z-index:20; margin-bottom:var(--space-100); margin-top:var(--space-30); background:#fff; border-radius:8px; box-shadow:0 4px 7px rgba(0,0,0,0.25);}
.sub-nav > ul {display:flex; flex-wrap:wrap;}
.sub-nav > ul > li {position:relative; flex:1 1 0; min-width:140px;}
.sub-nav .sub-nav-link {display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:70px; padding:10px 16px; border:0; background:none; color:#454545; font-size:var(--font-size-20); font-weight:400; line-height:1.2em; letter-spacing:-0.03em; text-align:center; cursor:pointer;}
.sub-nav > ul > li.current > .sub-nav-link {color:var(--color-primary); font-weight:600;}
.sub-nav > ul > li.active > .sub-nav-link {color:var(--color-primary); font-weight:600;}
.sub-nav .toggle-layer {display:none; position:absolute; left:0; right:0; top:100%; z-index:21; background:#fff; border:1px solid #ddd; border-top:0; border-radius:0 0 8px 8px; box-shadow:0 8px 16px rgba(0,0,0,0.12); overflow:hidden;}
.sub-nav .toggle-layer a {display:flex; align-items:center; justify-content:center; min-height:clamp(40px, calc(80 / var(--inner) * 100vw), 80px); padding:10px; color:#454545; font-size:var(--font-size-16); font-weight:400; line-height:1.3em; letter-spacing:-0.03em; text-align:center;}
.sub-nav .toggle-layer a:hover,
.sub-nav .toggle-layer li.current > a {background:var(--color-primary); color:#fff; font-weight:600;}

/* floating quick menu */
.floating-menu {position:fixed; right:var(--space-container); bottom:20vh; z-index:90; display:flex; flex-direction:column; gap:10px;}
.floating-menu .quick-item {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:110px; height:110px; background:#fff; border-radius:50%; box-shadow:0 8px 24px rgba(0,0,0,0.12); color:var(--color-primary); font-size:var(--font-size-16); font-weight:600; line-height:1.2em; letter-spacing:-0.03em;}
.floating-menu .icon {display:flex; align-items:center; justify-content:center; width:25px; height:25px;}
.floating-menu .icon.tel {background:url('/images/common/float-icon-tel.svg') 50% 50% / contain no-repeat;}

#sub .floating-menu .quick-item {width:90px; height:90px; background:var(--color-primary); color:#fff; box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.25);}
#sub .floating-menu .quick-item .icon.tel {background:url('/images/common/float-icon-tel-w.svg');}

/* footer */
#footer {position:relative; z-index:2; background:#f4f4f4; border-top:1px solid #ddd; color:#454545; padding:var(--space-60) 0;}
#footer .contain {max-width:1680px;}
#footer .footer-inner {display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-40);}
#footer .company {margin-bottom:16px; color:#454545; font-size:var(--font-size-18); font-weight:700; line-height:1.3em; letter-spacing:-0.03em;}
#footer .info-row {display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin-bottom:12px;}
#footer .info-item {display:flex; gap:10px; font-size:var(--font-size-18); line-height:1.3em; letter-spacing:-0.03em;}
#footer .info-item .label {color:#454545; font-weight:700;}
#footer .info-item p {color:#8c8c8c; font-weight:400;}
#footer .info-item a {color:inherit;}
#footer .copyright {color:#8c8c8c; font-size:var(--font-size-14); line-height:1.5em; letter-spacing:-0.03em;}
#footer .copyright span {display:inline-block;}
#footer .copyright .designed {font-weight:300;}
#footer .footer-aside {display:flex; flex-direction:column; align-items:flex-end; gap:24px; flex-shrink:0;}
#footer .footer-links {display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:#454545; font-size:var(--font-size-16); line-height:1.3em; letter-spacing:-0.03em;}
#footer .footer-links a {color:#454545;}
#footer .footer-links a:hover {color:var(--color-primary); text-decoration:underline;}

.familysite {position:relative; display:inline-block; width:200px;}
.familysite .toggle-button {display:flex; justify-content:space-between; align-items:center; width:100%; padding:12px 16px; background:#fff; border:1px solid #ddd; border-radius:8px; color:#454545; font-size:var(--font-size-16); font-weight:400; line-height:1.5em; letter-spacing:-0.03em; text-align:left;}
.familysite .toggle-button .chevron {transition:transform .2s ease; width:12px; line-height:0;}
.familysite .toggle-button .chevron svg {display:block; width:100%; height:auto;}
.familysite .toggle-button .chevron path {fill:#454545;}
.familysite .toggle-layer {display:none; position:absolute; left:0; bottom:100%; width:100%; background:#fff; border:1px solid #ddd; border-bottom:0; border-radius:8px 8px 0 0; overflow:hidden;}
.familysite .toggle-layer a {display:block; padding:10px 16px; color:#888; font-size:var(--font-size-16); font-weight:400; line-height:1.5em;}
.familysite .toggle-layer a:hover {background:var(--color-primary); color:#fff;}
.familysite.active .toggle-button {border-radius:0 0 8px 8px;}
.familysite.active .toggle-button .chevron {transform:rotate(-180deg);}