@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 
 
#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

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

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

#wrapper {position:relative;}

/* header */
#header {position:fixed; top: var(--space-24); left: var(--space-24); right: var(--space-24); z-index:100; height:var(--header-height); transition:.2s; border-radius: var(--radius-8); background: transparent;}
#header .contain {position:relative; display:flex; align-items:center; justify-content:space-between; width:100%; max-width: 100%; height:100%; padding: var(--space-16); z-index:2;}

.header-fixed #header {box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.16);}
.header-fixed .submenu-bg {box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.16);}

.sitelogo {margin-left: var(--space-14);}
.sitelogo a {display:block; aspect-ratio:161/30; height:clamp(22px, calc(30 / var(--inner) * 100vw), 30px); background:url('/images/common/logo-w.svg') 0 50%/contain no-repeat;}

#gnb {flex:1 1 auto; min-width:0; width:1%; text-align:center; padding:0 var(--space-100); margin-right: auto;}
#gnb>ul {display:flex; justify-content:flex-start; gap: var(--space-64);}
#gnb>ul>li>a {position:relative; display:flex; align-items:center; flex-direction:column; justify-content:center; height: 100%; color:#fff; font-size:var(--font-size-18); font-weight:600; letter-spacing:-.03em; line-height:1.3em;}
#gnb>ul>li.active > a {color:var(--color-primary);}
#gnb .submenu {display:none; position:absolute; left:50%; top:calc(100% + 8px); text-align:center; transform:translateX(-50%); width:100%; z-index:3; background:transparent;}
#gnb .submenu>ul {display:flex; width:100%; height:clamp(200px, calc(270 / var(--inner) * 100vw), 270px); border-radius:var(--radius-8); background:transparent;}
#gnb .submenu>ul>li {flex:1;}
#gnb .submenu>ul>li>a {display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:var(--space-40); color:#2c2c2c; font-size:var(--font-size-20); font-weight:600; line-height:1.7em; white-space:nowrap; gap:var(--space-16); height:clamp(200px, calc(270 / var(--inner) * 100vw), 270px); position:relative;}
#gnb .submenu>ul>li:first-child > a {border-top-left-radius: var(--radius-8); border-bottom-left-radius: var(--radius-8);}
#gnb .submenu>ul>li:last-child > a {border-top-right-radius: var(--radius-8); border-bottom-right-radius: var(--radius-8);}
#gnb .submenu>ul>li>a .icon {display:flex; align-items:center; justify-content:center; width: clamp(30px, calc(40 / var(--inner) * 100vw), 40px); height: clamp(30px, calc(40 / var(--inner) * 100vw), 40px); border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.12); color: var(--color-secondary); transition: .2s;}
#gnb .submenu>ul>li>a::after {content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: rgba(0, 0, 0, 0.07); z-index: -1; transition: .2s;}
#gnb .submenu>ul>li:last-child > a::after {content: none;}
#gnb .submenu>ul>li>a:hover {background: var(--color-primary); color: #fff;}
#gnb .submenu>ul>li>a:hover .icon {background: var(--color-secondary); border-color: var(--color-secondary); color: #fff;}
#gnb .submenu>ul>li.active>a {color:#42ade2;}
.submenu-bg {display:none; position:absolute; left:0.5px; top:calc(100% + 8px); width:calc(100% - 1px); height:clamp(200px, calc(270 / var(--inner) * 100vw), 270px); border-radius:var(--radius-8); background:rgba(255, 255, 255, 0.90); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); z-index:1; pointer-events:none;}

.top-right {display:flex; align-items:center; gap: var(--space-30);}
.top-right .language {display:flex; align-items:center; justify-content:center; gap: 4px; padding: 4px; border-radius: var(--radius-8); background: rgba(238, 238, 238, 0.10); backdrop-filter: blur(12px); transition: .2s;}
.top-right .language a {display:flex; align-items:center; justify-content:center; width: 43px; height: 28px; border-radius: 4px; color: rgba(255, 255, 255, 0.50); font-size: var(--font-size-14); font-weight: 600; line-height: 1.55em; letter-spacing: -0.03em;}
.top-right .language .active {background: rgba(255, 255, 255, 0.16); color: #fff;}
.top-right .btn-solution {display:flex; align-items:center; justify-content:center; gap: var(--space-8); padding: var(--space-16) var(--space-24); border-radius: 6px; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(12px); color: #fff; font-size: var(--font-size-16); font-weight: 700; line-height: 1.5; letter-spacing: -0.03em;}
.top-right .btn-solution .icon {display:flex; align-items:center; justify-content:center; width: 16px; height: 16px;}
.top-right .btn-solution .icon img {width: 100%; height: 100%; object-fit: contain;}

#header:hover {background:#fff;}
#header:hover .sitelogo a {background-image:url('/images/common/logo.svg');}
#header:hover #gnb>ul>li>a {color:#2c2c2c;}
#header:hover .btn-m-menu span {background:#2c2c2c;}
#header:hover .top-right .language {background: #eee;}
#header:hover .top-right .language a {color: #878787;}
#header:hover .top-right .language a.active {background: #fff; color: var(--color-primary);}
#header:hover .btn-solution {background: #121212; color: #fff;}

.header-fixed #header {background:#fff; box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.16);}
.header-fixed .sitelogo a {background-image:url('/images/common/logo.svg');}
.header-fixed #gnb>ul>li>a {color:#2c2c2c;}
.header-fixed .btn-m-menu span {background:#2c2c2c;}
.header-fixed .top-right .language {background: #eee;}
.header-fixed .top-right .language a {color: #878787;}
.header-fixed .top-right .language a.active {background: #fff; color: var(--color-primary);}
.header-fixed .btn-solution {background: #121212; color: #fff;}

/* for mobile */ 
.btn-m-menu {display:none; position:relative; width:24px; height:24px; margin-right: 10px;}
.btn-m-menu div {display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:7px; width:100%; height:100%;}
.btn-m-menu span {display:block; width:100%; height:2px; background:#fff;}

.mobile-navigation {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; border-bottom:1px solid #ddd;;}
.mobile-navigation .home a {height:clamp(22px, calc(30 / var(--inner) * 100vw), 30px);}
.mobile-navigation .home img {height: 100%;}
.mobile-navigation .solution {display:flex; align-items:center; justify-content:center; padding: 10px; border-bottom:1px solid #ddd;}
.mobile-navigation .btn-solution {display:flex; align-items:center; justify-content:center; gap: var(--space-8); padding: var(--space-16) var(--space-24); border-radius: 6px; background: #121212; color: #fff; font-size: var(--font-size-16); font-weight: 700; line-height: 1.5; letter-spacing: -0.03em; width: 100%; height: 45px;}
.mobile-navigation .btn-solution .icon {display:flex; align-items:center; justify-content:center; width: 12px; height: 12px;}
.mobile-navigation .btn-solution .icon img {width: 100%; height: 100%; object-fit: contain;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:12px 48px 12px 20px; display:block; color:#242424; font-size:18px; 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(--color-primary);}
.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:15px; 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(--color-primary);}
.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-navigation .submenu a .icon {display: none;}
.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 */
.vjs-has-started .vjs-control-bar {display: none !important;}
.vjs-big-play-button {display: none !important;}
.vjs-control {display: none !important;}

.main-visual {position:relative; overflow:hidden; height:100vh; background:#121212;}
.main-visual .slick-slider {height:100%;}
.main-visual .slick-list {height:100%;}
.main-visual .slick-track {height:100%;}
.main-visual .slick-slide {position:relative; height:100%; overflow:hidden;}
.main-visual .item {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
.main-visual .item .video-js,
.main-visual .item video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.main-visual .item iframe {position:absolute; top:50%; left:50%; width:100vw; height:100vh; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.main-visual .item img {position:absolute; top:50%; left:0; transform:translateY(-50%) scale(1.1); -ms-transform:translateY(-50%) scale(1.1); -webkit-transform:translateY(-50%) scale(1.1); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover; transition: 5s linear;}
.main-visual .slick-active img {transform:translateY(-50%) scale(1); -ms-transform:translateY(-50%) scale(1); -webkit-transform:translateY(-50%) scale(1);}
.main-visual .slick-slide.first-slide .item img {transition:none; animation:first-slide-img 5s linear forwards; -webkit-animation:first-slide-img 5s linear forwards;}
.main-visual .slick-slide.first-slide .caption .ani {opacity:0; transform:translate(0, 30px); transition:none; animation:first-slide-cap 1.2s ease forwards; -webkit-animation:first-slide-cap 1.2s ease forwards; animation-delay:0.15s;}

@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;}
}
@keyframes first-slide-img {
	0% {transform:translateY(-50%) scale(1.1); -ms-transform:translateY(-50%) scale(1.1); -webkit-transform:translateY(-50%) scale(1.1);}
	100% {transform:translateY(-50%) scale(1); -ms-transform:translateY(-50%) scale(1); -webkit-transform:translateY(-50%) scale(1);}
}

.main-visual .contain {position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; max-width: 100%; padding: 0; color: #fff;}
.main-visual .top-area {display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-40); padding-bottom: var(--space-50); gap: var(--space-40);}
.main-visual .top-area .links {display: flex; gap: var(--space-24); margin-bottom: var(--space-24);}
.main-visual .top-area .links a {display: flex; align-items: center; justify-content: center; gap: var(--space-10); color: rgba(255, 255, 255, 0.70); font-size: var(--font-size-20); font-weight: 600; line-height: 1.7; letter-spacing: -0.03em;}
.main-visual .top-area .links a .arrow {display: flex; align-items: center; justify-content: center; width: 10px; height: 10px;}
.main-visual .top-area .links a .arrow svg {width: 100%; height: 100%; object-fit: contain;}
.main-visual .top-area .links a:hover {color: #fff;}
.main-visual .top-area .tit {font-size: var(--font-size-68); font-weight: 600; line-height: 1.23;}
.main-visual .slick-dots {display:flex; gap: 4px;}
.main-visual .slick-dots li button {display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius: 4px; background:rgba(255, 255, 255, 0.16); border: 0; padding:0; font-size:var(--font-size-16); font-weight:600; line-height:1em; color: #fff; overflow:hidden; transition: .2s;}
.main-visual .slick-dots li.slick-active button {background:#fff; color: #2c2c2c;}
.main-visual .bottom-area {padding: var(--space-50) var(--space-40); border-top: 1px solid rgba(255, 255, 255, 0.10); display: flex; align-items: center; justify-content: space-between; gap: var(--space-40);}
.main-visual .bottom-area .desc {display: flex; align-items: center; gap: var(--space-16); color: rgba(255, 255, 255, 0.90); font-size: var(--font-size-20); font-weight: 500; line-height: 1.7; letter-spacing: -0.03em;}
.main-visual .bottom-area .desc .icon {width: clamp(30px, calc(40 / var(--inner) * 100vw), 40px); height: clamp(30px, calc(40 / var(--inner) * 100vw), 40px); position: relative; display: block; flex-shrink: 0;}
.main-visual .bottom-area .desc .icon span {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; backdrop-filter: blur(12px);}
.main-visual .bottom-area .desc .icon .c1 {background: rgba(255, 255, 255, 0.40); z-index: 2; width: 10px; height: 10px; animation: main-visual-desc-icon 1.5s 0.4s ease-out infinite;}
.main-visual .bottom-area .desc .icon .c2 {background: rgba(255, 255, 255, 0.24); z-index: 1; width: 24px; height: 24px; animation: main-visual-desc-icon 1.5s 0.2s ease-out infinite;}
.main-visual .bottom-area .desc .icon .c3 {background: rgba(255, 255, 255, 0.16); z-index: 0; animation: main-visual-desc-icon 1.5s ease-out infinite;}

@keyframes main-visual-desc-icon {
	0% {opacity: 1; transform: translate(-50%, -50%) scale(0.5);}
	50% {opacity: 1; transform: translate(-50%, -50%) scale(1);}
	99% {opacity: 0; transform: translate(-50%, -50%) scale(1);}
	100% {opacity: 0; transform: translate(-50%, -50%) scale(0.99);}
}

.main-visual .bottom-area .scroll {display: flex; align-items: center; justify-content: center; gap: 12px; font-size: var(--font-size-20); font-weight: 500; line-height: 1.7;}
.main-visual .bottom-area .scroll .icon {display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; transition: .2s; animation: main-visual-scroll 0.8s alternate ease-in-out infinite;}
.main-visual .bottom-area .scroll .icon img {width: 100%; height: 100%; object-fit: contain;}

@keyframes main-visual-scroll {
	0% {transform: translateY(-10%);}
	100% {transform: translateY(10%);}
}

.point {color:var(--color-primary);}
.main-sec {overflow: hidden;}
.main-sec .head {display:flex; flex-direction:column; gap:var(--space-16); margin-bottom:var(--space-60);}
.main-sec .head .sub-tit {display:flex; align-items:center; gap:var(--space-10); font-size:var(--font-size-20); line-height:1.7; color:#676767;}
.main-sec .head .sub-tit::before {content:''; flex-shrink:0; width:4px; height:4px; background:var(--color-primary);}
.main-sec .head .tit {font-size:var(--font-size-54); font-weight:600; line-height:1.27; color:#2c2c2c;}
.main-sec .head .desc {font-size:var(--font-size-20); font-weight:500; line-height:1.7; color:#676767;}

/* main overview */
.main-overview {padding:var(--space-100) 0 var(--space-120);}
.main-overview .tabs {display:flex; margin-bottom: var(--space-54);}
.main-overview .tabs li {flex:1 1 0; min-width:0; position: relative; display: flex;}
.main-overview .tabs li::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #eee;}
.main-overview .tabs li button {display: flex; align-items: center; justify-content: center; width:100%; padding: var(--space-16); border:0; background:transparent; color:#878787; font-size:var(--font-size-20); font-weight:500; line-height:1.7; text-align:center;}
.main-overview .tabs li.active::after {height: 2px; background: var(--color-primary);}
.main-overview .tabs li.active button {color:var(--color-primary);}
.main-overview .cont {display:flex; flex-direction:column; gap: var(--space-54);}
.main-overview .slider {margin-right:calc(var(--space-container) * -1); margin-left:calc(var(--space-container) * -1); overflow:hidden;}
.main-overview .slider .slick-list {overflow:visible;}
.main-overview .slider .slick-slide {padding:0 calc(var(--space-24) / 2);}
.main-overview .slider .slick-slide.slick-center {opacity:1;}
.main-overview .slider .item {height:clamp(400px, calc(600 / var(--inner) * 100vw), 600px);}
.main-overview .slider .card {position:relative; display:flex; flex-direction:column; justify-content:flex-end; height:100%; padding:var(--space-40); border-radius:var(--radius-8); overflow:hidden; color:#fff;}
.main-overview .slider .card-bg {position:absolute; inset: 0; z-index:0;}
.main-overview .slider .card-bg .img {display:block; height:100%;}
.main-overview .slider .card-bg .img img {width: 100%; height:100%; object-fit:cover; }
.main-overview .slider .card-bg .logos {position:absolute; top:var(--space-40); right:var(--space-40); z-index:1; display:flex; align-items:center;}
.main-overview .slider .card-bg .logos li {display:flex; align-items:center; justify-content:center; width:clamp(50px, calc(100 / var(--inner) * 100vw), 100px); height:clamp(50px, calc(100 / var(--inner) * 100vw), 100px); border-radius:50%; background:rgba(255, 255, 255, 0.90); backdrop-filter:blur(12px);}
.main-overview .slider .card-bg .logos li + li {margin-left:calc(var(--space-20) * -1);}
.main-overview .slider .card-bg .logos li:nth-child(1) {z-index:3;}
.main-overview .slider .card-bg .logos li:nth-child(2) {z-index:2;}
.main-overview .slider .card-bg .logos li:nth-child(3) {z-index:1;}
.main-overview .slider .card-bg .logos img {width:auto; max-width:60%; max-height:40%; object-fit:contain;}
.main-overview .slider .card-body {position:relative; z-index:1; display:flex; flex-direction:column; gap:var(--space-40);}
.main-overview .slider .card-tit {display:flex; flex-direction:column; gap:var(--space-10);}
.main-overview .slider .card-tit .label {font-size:var(--font-size-18); font-weight:600; line-height:1.56; color:rgba(255, 255, 255, 0.60);}
.main-overview .slider .card-tit .name {font-size:var(--font-size-48); font-weight:600; line-height:1.29; color:#fff;}
.main-overview .slider .desc {max-width:720px; font-size:var(--font-size-20); font-weight:500; line-height:1.7; color:#e7e7e7;}
.main-overview .slider .tags {display:flex; gap:var(--space-6);}
.main-overview .slider .tags li {display:flex; flex:1 1 0; align-items:center; gap:var(--space-12); min-width:0; padding:var(--space-16); border-radius:var(--radius-4); background:rgba(255, 255, 255, 0.10); backdrop-filter:blur(12px);}
.main-overview .slider .tags .bar {flex-shrink:0; width:2px; height:16px; background:var(--color-primary);}
.main-overview .slider .tags .txt {font-size:var(--font-size-18); font-weight:600; line-height:1.56; color:#fff;}

/* main why */
.main-why {padding:0 0 var(--space-120);}
.main-why .list {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-50) var(--space-40);}
.main-why .list li {display:flex; flex-direction:column; gap:var(--space-30); min-width:0;}
.main-why .thumb {position:relative; height:clamp(240px, calc(360 / var(--inner) * 100vw), 360px); padding:var(--space-24); border-radius:var(--radius-8); overflow:hidden;}
.main-why .thumb .img {position:absolute; inset:0;}
.main-why .thumb .img img {width:100%; height:100%; object-fit:cover;}
.main-why .thumb .icon {position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:clamp(48px, calc(64 / var(--inner) * 100vw), 64px); height:clamp(48px, calc(64 / var(--inner) * 100vw), 64px); border-radius:var(--radius-4); background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px);}
.main-why .thumb .icon img {position:relative; z-index:1; width:clamp(24px, calc(32 / var(--inner) * 100vw), 32px); height:auto; max-height:clamp(24px, calc(32 / var(--inner) * 100vw), 32px); object-fit:contain;}
.main-why .info {display:flex; flex-direction:column; gap:var(--space-10);}
.main-why .info .tit {font-size:var(--font-size-28); font-weight:600; line-height:1.5; color:#2c2c2c;}
.main-why .info .desc {font-size:var(--font-size-18); line-height:1.67; color:#676767;}

/* main story */
.main-story {padding:var(--space-100) 0 var(--space-120); background:#f6f8f9;}
.main-story .head {flex-direction:row; align-items:flex-end; justify-content:space-between; gap:var(--space-40);}
.main-story .btn-more {display:flex; gap:var(--space-10); font-size:var(--font-size-20); font-weight:600; color:#676767;}
.main-story .btn-more .arrow {display:flex; align-items:center; justify-content:center; width:10px; height:10px; transition: .2s; margin-top: 0.3em;}
.main-story .btn-more .arrow svg {width:100%; height:100%;}
.main-story .btn-more:hover {color: #2c2c2c;}
.main-story .slider {display:flex; flex-direction:column; gap:var(--space-30);}
.main-story .slider .swiper {width: 100%;}
.main-story .swiper-slide {height:auto;}
.main-story .story-card {display:flex; align-items:stretch; border:1px solid #eee; border-radius:var(--radius-8); background:#fff; overflow:hidden;}
.main-story .story-aside {display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-50); flex-shrink:0; width:clamp(280px, calc(340 / var(--inner) * 100vw), 340px); padding:var(--space-50) var(--space-40); background:#121212; color:#fff;}
.main-story .story-meta {display:flex; flex-direction:column; gap:var(--space-20);}
.main-story .story-aside .tag {display:inline-flex; align-items:center; justify-content:center; padding:var(--space-10) var(--space-16); border-radius: 30px; background:var(--color-primary); font-size:var(--font-size-14); font-weight:600; line-height:1; color:#fff; margin-right: auto;}
.main-story .story-aside .tag.is-light {background:#fff; color:var(--color-secondary);}
.main-story .story-aside.is-navy {background:var(--color-secondary);}
.main-story .story-aside.is-navy .company .sub {color:rgba(255,255,255,0.5);}
.main-story .story-aside .company .name {font-size:var(--font-size-32); font-weight:700; line-height:1.56; color:#fff;}
.main-story .story-aside .company .sub {margin-top:var(--space-10); font-size:var(--font-size-14); font-weight:500; line-height:1.14; color:#676767;}
.main-story .metrics {display:flex; flex-direction:column;}
.main-story .metric {padding-top:var(--space-20); padding-bottom:var(--space-24); border-top:1px solid #333;}
.main-story .story-aside.is-navy .metric {border-top-color:rgba(255,255,255,0.1);}
.main-story .metric:first-child {padding-top:var(--space-20);}
.main-story .metric .val {display:flex; align-items:flex-end; gap:var(--space-6); flex-wrap:wrap;}
.main-story .metric .point {font-size:var(--font-size-36); font-weight:700; line-height:1.39; color:#fff;}
.main-story .metric .point.is-sm {font-size:var(--font-size-32); line-height:1.56;}
.main-story .metric .unit {padding-bottom: 4px; font-size:var(--font-size-18); font-weight:700; line-height:1.56; color:var(--color-primary);}
.main-story .story-aside.is-navy .metric .unit {color:rgba(255,255,255,0.5);}
.main-story .metric .label {margin-top:0; font-size:var(--font-size-16); font-weight:500; line-height:1.5; color:#a8a8a8;}
.main-story .story-aside.is-navy .metric .label {color:rgba(255,255,255,0.7);}
.main-story .story-panel {display:flex; flex:1 1 auto; flex-direction:column; gap:var(--space-40); min-width:0; padding:var(--space-50);}
.main-story .story-panel .subject {font-size:var(--font-size-32); font-weight:600; line-height:1.44; color:#2c2c2c;}
.main-story .story-body {display:flex; flex:1 1 auto; flex-direction:column; justify-content:space-between; gap:var(--space-40); min-height:0;}
.main-story .details {display:flex; align-items:stretch;}
.main-story .detail {display:flex; flex:1 1 0; flex-direction:column; gap:var(--space-24); min-width:0; padding:clamp(24px, calc(34 / var(--inner) * 100vw), 34px); border:1px solid #eee;}
.main-story .detail:first-child {border-radius:var(--radius-8) 0 0 var(--radius-8);}
.main-story .detail:last-child {border-left:0; border-radius:0 var(--radius-8) var(--radius-8) 0;}
.main-story .detail .tit {font-size:var(--font-size-16); font-weight:600; line-height:1.5; color:var(--color-secondary);}
.main-story .detail .desc {font-size:var(--font-size-16); line-height:1.75; color:#676767;}
.main-story .hash {display:flex; flex-wrap:wrap; gap:var(--space-6); padding-top:var(--space-30); border-top:1px solid #eee;}
.main-story .hash li {padding:var(--space-8) var(--space-10); border-radius:var(--radius-6); background:#edf1f5; font-size:var(--font-size-13); font-weight:500; line-height:1.23; color:var(--color-primary);}
.main-story .swiper-pagination {position:relative; left:auto; top:auto; width:100%; height:1px; margin:0; background:#dfdfdf;}
.main-story .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#000;}
.main-story .controls {display:flex; align-items:center; gap:var(--space-16);}
.main-story .controls .navigation {display:flex; flex:0 0 auto; align-items:center; justify-content:center; gap:var(--space-16);}
.main-story .controls .pager {font-size:var(--font-size-13); font-weight:600; line-height:1.23; color:#a8a8a8; white-space:nowrap;}
.main-story .controls .pager .current {color:#2c2c2c;}
.main-story .slide-btn {display:flex; align-items:center; justify-content:center; width:10px; height:10px; padding:0; border:0; background:transparent; color:#505050; cursor:pointer;}
.main-story .slide-btn svg {width:100%; height:100%; object-fit:contain;}
.main-story .slide-btn:hover {color:var(--color-primary);}
.main-story .slide-btn.swiper-button-disabled {opacity:0.35; cursor:default;}

/* main insights */
.main-insights {padding:var(--space-100) 0 var(--space-160);}
.main-insights .head {gap:var(--space-20);}
.main-insights .list {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-40);}
.main-insights .list a {display:flex; flex-direction:column; gap:var(--space-30);}
.main-insights .thumb {position:relative; height:clamp(240px, calc(360 / var(--inner) * 100vw), 360px); padding:var(--space-16); border-radius:var(--radius-8); overflow:hidden;}
.main-insights .thumb .img {position:absolute; inset:-1px;}
.main-insights .thumb .img img {width:100%; height:100%; object-fit:cover; transition: .2s;}
.main-insights .link-icon {position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:clamp(48px, calc(56 / var(--inner) * 100vw), 56px); height:clamp(48px, calc(56 / var(--inner) * 100vw), 56px); margin-left:auto; opacity:0; transition: .2s; border-radius: var(--radius-8); background: rgba(0, 34, 80, 0.90); backdrop-filter: blur(12px);}
.main-insights .list li:hover .link-icon {opacity:1;}
.main-insights .list li:hover .thumb .img img {transform: scale(1.02);}
.main-insights .info {display:flex; flex-direction:column; gap:var(--space-12);}
.main-insights .info .cate {display:inline-flex; align-self:flex-start; padding:var(--space-8) var(--space-10); border-radius:var(--radius-6); background:#edf1f5; font-size:var(--font-size-13); font-weight:500; line-height:1.23; color:var(--color-primary);}
.main-insights .info .tit {font-size:var(--font-size-22); font-weight:600; line-height:1.55; color:#2c2c2c; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: calc(1.55em * 2);}
.main-insights .info .date {font-size:var(--font-size-16); font-weight:500; line-height:1.5; color:#878787;}

/* sub */
.sub-visual {position:relative; display:flex; flex-direction:column; background:#eee; height:clamp(350px, calc(580 / var(--inner) * 100vw), 580px); overflow:hidden;}
.sub-visual .bg {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:1s; transform:scale(1.1); opacity:0;}
.sub-visual .title {position:relative; flex:1 1 auto; min-height:0; height:1%; display:flex; align-items:center; text-align:center; padding-top: calc((var(--space-24) * 2) + var(--header-height));}
.sub-visual .title .contain {width:100%; display: flex; align-items: center; gap: 16px;}
.sub-visual .title h2 {font-size:clamp(28px, calc(68 / var(--inner) * 100vw), 68px); font-weight: 600; line-height:1.23em; color:#fff;}
.sub-visual .title .sub {color: rgba(255, 255, 255, 0.70); font-size: var(--font-size-16); font-weight: 700; line-height: 1.5; margin-top: 8px; margin-bottom: auto;}
.sub-visual.loaded .bg {transform:scale(1); opacity:1;}

.lnb-wrap {position:relative; padding: var(--space-30) var(--space-container) var(--space-64);}
.lnb {position:relative; overflow:hidden; max-width:1200px; margin:0 auto;}
.lnb ul {display:flex; gap: 6px; flex-wrap: wrap;}
.lnb ul li a {display:flex; justify-content:center; align-items:center; width:100%; height:var(--lnb-height); padding:0 var(--space-30); color:#fff; font-weight:500; font-size:clamp(15px, calc(18 / var(--inner) * 100vw), 18px); line-height:1.2em; letter-spacing:-.03em; border-radius: 6px; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(12px);}
.lnb ul li.active a {background: #121212;}

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

.sub-title {padding:var(--space-100) 0;}
.sub-title h2 {font-size:var(--font-size-48); line-height:1.37em; color:#2c2c2c; font-weight: 600;}

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

/* footer */
.footer {overflow:hidden; background:#121212;}
.footer .foot-contact {position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--space-40); padding:var(--space-120) var(--space-container); overflow:hidden; background:url('/images/common/footer-cta-bg.jpg') 50% 50% / cover no-repeat;}
.footer .foot-contact::after {content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, #121212 100%); pointer-events:none;}
.footer .foot-contact .tit {position:relative; z-index:1; font-size:var(--font-size-48); font-weight:700; line-height:1.29; color:#fff; text-align:center;}
.footer .foot-contact .btns {position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-10);}
.footer .foot-contact .btn {display:flex; align-items:center; justify-content:center; gap: 8px; padding:var(--space-16) var(--space-24); border-radius:var(--radius-6); font-size:var(--font-size-18); font-weight:700; line-height:1.56;}
.footer .foot-contact .btn .icon {display:flex; flex-shrink:0; width:16px; height:16px;}
.footer .foot-contact .btn .icon svg {width:100%; height:100%; object-fit: contain;}
.footer .foot-contact .btn.consult {border:1px solid rgba(255, 255, 255, 0.10); background:rgba(255, 255, 255, 0.10); backdrop-filter:blur(12px); color:#fff;}
.footer .foot-contact .btn.kakao {background:#fff; color:#2c2c2c;}
.footer .foot-body {display:flex; align-items:stretch; margin: var(--space-24); border-radius:var(--radius-8); background:#fff; overflow:hidden;}
.footer .foot-about {display:flex; flex:1 0 auto; flex-direction:column; gap:var(--space-120); min-width:0; padding:var(--space-40);}
.footer .foot-about .name {font-size:var(--font-size-15); line-height:1.6; color:#676767;}
.footer .foot-about .detail {display:flex; flex-direction:column; gap:var(--space-12); margin-top:clamp(24px, calc(34 / var(--inner) * 100vw), 34px);}
.footer .foot-about .ceo {font-size:var(--font-size-16); font-weight:500; line-height:1.5; color:#676767;}
.footer .foot-about .contact {display:flex; flex-direction:column; gap:var(--space-4);}
.footer .foot-about .contact li {font-size:var(--font-size-16); line-height:1.5; color:#2c2c2c; margin-bottom: 4px;}
.footer .foot-about .logo {margin-top: auto;}
.footer .foot-about .logo img {width:clamp(180px, calc(236 / var(--inner) * 100vw), 236px); height:auto;}
.footer .foot-about .links {display:flex; flex-wrap:wrap; gap:clamp(20px, calc(34 / var(--inner) * 100vw), 34px); margin-top:var(--space-24);}
.footer .foot-about .links a {font-size:var(--font-size-15); line-height:1.6; color:#676767;}
.footer .foot-menu {display:flex; flex:0 0 auto; flex-direction:column; width:clamp(230px, calc(400 / var(--inner) * 100vw), 400px); border-left:1px solid #eee;}
.footer .foot-menu a {display:flex; flex:1 1 auto; flex-direction:column; gap:var(--space-16); padding:var(--space-40); border-bottom:1px solid #eee;}
.footer .foot-menu a:last-child {border-bottom: 0;}
.footer .foot-menu a .tit {font-size:var(--font-size-20); font-weight:600; line-height:1.7; color:#2c2c2c;}
.footer .foot-menu a .icon {display:flex; width:clamp(28px, calc(40 / var(--inner) * 100vw), 40px); height:clamp(28px, calc(40 / var(--inner) * 100vw), 40px); color:var(--color-secondary); transition: .2s; border: 1px solid #dfdfdf; display: flex; align-items: center; justify-content: center; border-radius: 4px;}
.footer .foot-menu a:hover .icon {color: #fff; background: var(--color-primary); border-color: var(--color-primary);}
.footer .foot-banner {position:relative; display:flex; flex:1 0 auto; flex-wrap:wrap; align-items:flex-end; align-content:flex-end; justify-content:space-between; width:clamp(320px, calc(720 / var(--inner) * 100vw), 720px); align-self: stretch; padding:var(--space-40); gap:var(--space-16); background:url('/images/common/footer-visual.jpg') 50% 100% / cover no-repeat; max-width: 720px;}
.footer .foot-banner .designed {position:relative; z-index:1; font-size:var(--font-size-15); line-height:1.6; color:rgba(255, 255, 255, 0.06);}
.footer .foot-banner .designed a {color:inherit;}
.footer .foot-banner .copy {position:relative; z-index:1; font-size:var(--font-size-15); font-weight:600; line-height:1.6; color:#fff; text-align:right;}