@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */
.only-desktop {display:block !important;}
.only-mobile {display:none !important;}

#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}

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

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

/* header */
#header {position:fixed; width:100%; z-index:102; top:0; left:0; right:0; background-color:#fff;}
#header:after {position:absolute; content:''; bottom:0; left:0; right:0; height:1px; background-color:#ddd;}
#header .contain {max-width:100%; padding:0 var(--contain-paddingx3); position:relative; display:flex; align-items:center; justify-content:space-between; min-height:var(--header-height);}

.sitelogo a {display:flex;}
.sitelogo a img {height:52px; width:auto;}

#gnb {position:absolute; left:50%; transform:translateX(-50%); text-align:center; flex:none; width:auto;}
#gnb > ul {display:flex; justify-content:center; align-items:center; gap:clamp(40px, calc(100 / var(--inner) * 100vw), 100px);}
#gnb > ul > li {position:relative; z-index:1;}
#gnb > ul > li > a {height:var(--header-height); padding:0; font-size:var(--font-size-20); font-weight:600; letter-spacing:-0.03em; color:#121212; display:flex; align-items:center; justify-content:center; position:relative; text-align:center; z-index:5; line-height:1em;}
#gnb > ul > li.active > a {color:var(--color-primary);}

.btn-header-cta {flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 20px; border-radius:1000px; background:var(--color-primary); color:#fff; font-size:var(--font-size-16); font-weight:600; line-height:1em; letter-spacing:-0.03em;}
.btn-header-cta .icon {display:flex; width:24px; height:24px; border-radius:50%; background:#fff; align-items:center; justify-content:center;}
.btn-header-cta .icon img {width:9px; height:8px; display:block;}

/* for mobile */
.btn-m-menu {position:relative;width:30px;height:30px;text-indent:-9999em;z-index:50; display:none; flex-shrink:0;}
.btn-m-menu div {position:relative; width:100%; height:100%;}
.btn-m-menu span {position:absolute; right:0; top:50%; width:20px; height:2px; margin-top:-1px; background:#121212; border-radius:2px; transition:all .3s;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:""; position:absolute; right:0; width:27px; height:2px; background:#121212; transition-duration:0.3s; border-radius:2px;}
.btn-m-menu span:before {top:-9px;}
.btn-m-menu span:after {bottom:-9px;}

.mobile-navigation {position:fixed; top:var(--header-height); right:0; width:280px; height:100%; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #dfdfdf;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:12px 18px; display:block; color:#121212; font-size:18px; font-weight:700; line-height:1.3em;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:15px; transform:translateY(-75%) rotate(45deg); width:10px; height:10px; border-right:2px solid #454545; border-bottom:2px solid #454545; display:none;}
.mobile-navigation .nav-menu>ul>li.active {background:#f4f4f4}
.mobile-navigation .nav-menu>ul>li.active>a {color:#242424; 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>ul>li.home>a {padding:19px 18px;}
.mobile-navigation .nav-menu>ul>li.home>a:after {display:none;}
.mobile-navigation .nav-menu .submenu {display:none; margin:-1px 0 0 0; padding:10px 0;}
.mobile-navigation .nav-menu .submenu ul li a {display:block; padding:5px 18px; color:#454545; font-size:14px; font-weight:400; line-height:1.4em;}
.mobile-navigation .nav-menu .submenu ul li a:hover {color:var(--color-primary);}
.mobile-navigation .menu-close {position:absolute; top:15px; right:15px; width:30px; height:30px;overflow:hidden; text-indent:-999em;}
.mobile-navigation .menu-close:before, 
.mobile-navigation .menu-close:after {content:""; position:absolute; left:14px; height:30px; width:2px; background-color:#ddd;}
.mobile-navigation .menu-close:before {transform:rotate(45deg);}
.mobile-navigation .menu-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 .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}
html.menu-opened .btn-m-menu span {background:none !important;}
html.menu-opened .btn-m-menu span:before {top:0; transform:rotate(45deg);}
html.menu-opened .btn-m-menu span:after {bottom:0; transform:rotate(-45deg);}

/* main */
.main-visual {background:url('/images/main/mv-bg.jpg') 50% 50%/cover no-repeat;}
.main-visual, .main-visual .item {height:calc(100dvh - var(--header-height)); position:relative; overflow:hidden;}
.main-visual .item > img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:5s linear; transform:scale(1.15);}
.main-visual .active .item > img {transform:scale(1);}

.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.video .vjs-control-bar,
.main-visual .item.video .vjs-big-play-button {display:none;}

.main-visual .caption {display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-40); position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); padding:0 var(--contain-padding); width:100%; max-width:1500px; z-index:30;}
.main-visual .caption .txt {width:100%;}
.main-visual .caption p {transition:.8s; opacity:0; transform:translateX(20px); color:#fff;}
.main-visual .caption .t1 {font-family:'Raleway', sans-serif; font-size:var(--font-size-64); font-weight:700; line-height:1em; letter-spacing:-.03em;}
.main-visual .caption .t2 {margin-top:var(--space-20); font-size:var(--font-size-20); font-weight:400; line-height:1em; letter-spacing:-.03em;}
.main-visual .caption .t3 a {display:inline-flex; align-items:center; gap:var(--space-20); height:52px; padding:0 var(--space-30); font-family:'Raleway', sans-serif; font-weight:600; line-height:1em; letter-spacing:-.03em; color:#fff; background:var(--color-main); border-radius:99px;}
.main-visual .caption .t3-arrow {display:flex; align-items:center; flex-shrink:0; width:10px; height:8px;}
.main-visual .caption .t3-arrow img {display:block; width:100%; height:100%;}
.main-visual .active .caption p {opacity:1; transform:translateX(0);}
.main-visual .active .caption .t1 {transition-delay:0.4s;}
.main-visual .active .caption .t2 {transition-delay:0.6s;}
.main-visual .active .caption .t3 {transition-delay:0.8s;}

.main-visual .mv-bg {position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden;}
.main-visual .mv-bg-pattern {position:absolute; left:-17%; top:-26%; width:134%; max-width:none; height:125%; object-fit:cover; opacity:0.1;}
.main-visual .mv-inner {position:relative; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:var(--space-50); max-width:1500px; margin:0 auto; padding:0 var(--contain-padding); width:100%; height:100%;}
.main-visual .mv-copy {display:flex; flex-direction:column; align-items:flex-start; gap:60px; flex:1; min-width:0;}
.main-visual .mv-txt {display:flex; flex-direction:column; gap:var(--space-30);}
.main-visual .mv-title {margin:0; font-size:clamp(28px, calc(64 / var(--inner) * 100vw), 64px); font-weight:700; line-height:1.28em; letter-spacing:-0.03em; color:#121212; transition:0.8s; opacity:0; transform:translateX(20px);}
.main-visual .mv-title .point {color:var(--color-primary);}
.main-visual .mv-lead {margin:0; font-size:var(--font-size-18); font-weight:400; line-height:1.67em; letter-spacing:-0.03em; color:#505050; transition:0.8s; opacity:0; transform:translateX(20px);}
.main-visual .mv-copy .btn-main {transition:0.8s; opacity:0; transform:translateX(20px);}
.main-visual .mv-visual {flex-shrink:0; width:750px; max-width:55%; margin:0;}
.main-visual .mv-visual img {display:block; width:100%; height:auto; margin:0;}
.main-visual .active .mv-title {opacity:1; transform:translateX(0); transition-delay:0.4s;}
.main-visual .active .mv-lead {opacity:1; transform:translateX(0); transition-delay:0.6s;}
.main-visual .active .mv-copy .btn-main {opacity:1; transform:translateX(0); transition-delay:0.8s;}

.controls-wrap {position:absolute; bottom:var(--space-60); left:50%; display:flex; align-items:center; gap:var(--space-20); justify-content: center; max-width:1500px; padding:0 var(--contain-padding); width:100%; transform:translateX(-50%); z-index:30;}
.controls-inner {display:flex; align-items:center; gap:var(--space-20);}
.controls-wrap .slide-btn {width:9px; height:16px; padding:0; border:0; background:transparent; cursor:pointer; flex-shrink:0;}
.controls-wrap .slide-btn img {display:block; width:100%; height:100%;}
.dots-wrap {display:flex; align-items:center; gap:var(--space-25);}
.main-visual .dot-item {flex-shrink:0; width:10px; height:10px; padding:0; border:0; border-radius:50%; background:#ddd; opacity:0.8; cursor:pointer; font-size:0; line-height:0; transition:opacity .3s;}
.main-visual .dot-item.active {width:24px; height:24px; opacity:1; background:transparent; border:1px solid #ddd; position:relative;}
.main-visual .dot-item.active::after {content:''; position:absolute; top:50%; left:50%; width:10px; height:10px; border-radius:50%; background:#ddd; 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;}
}

.btn-main {transition:opacity .2s;}
.btn-main a {display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:1000px; font-size:var(--font-size-16); font-weight:600; line-height:1em; letter-spacing:-0.03em;}
.btn-main .icon {display:flex; width:24px; height:24px; border-radius:50%; align-items:center; justify-content:center; flex-shrink:0;}
.btn-main .icon img {width:9px; height:8px; display:block; filter: brightness(0) invert(1);}
.btn-main:hover img {filter:none;}
.btn-main--outline a {height:60px; padding:0 var(--space-25); border:1px solid #121212; color:#121212; background:#fff;}
.btn-main--outline .icon {background:#121212;}
.btn-main--outline a:hover {background-color: var(--color-primary); color: #fff; border:1px solid var(--color-primary);}
.btn-main--outline a:hover .icon {background:#fff;}
.btn-main--primary a {padding:var(--space-15) var(--space-20); background:var(--color-primary); color:#fff;}
.btn-main--primary .icon {background:#fff;}
.btn-main--primary img {filter:none !important;}
.btn-main--sm a {height:55px; padding:0 var(--space-40);}

.m-sec {padding:var(--space-150) 0; overflow:hidden;}
.main-sect-head {text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-16); margin-bottom:var(--space-60);}
.main-sect-head--left {text-align:left; align-items:flex-start; gap:var(--space-16);}
.main-sect-label {font-size:var(--font-size-18); font-weight:600; line-height:1em; letter-spacing:-0.03em; color:var(--color-primary);}
.main-sect-title {font-size:clamp(28px, calc(42 / var(--inner) * 100vw), 42px); font-weight:700; line-height:1.3em; letter-spacing:-0.03em; color:#121212;}
.main-sect-desc {font-size:var(--font-size-18); line-height:1.6em; letter-spacing:-0.03em; color:#505050;}

.main-sec1 {background:linear-gradient(0deg, rgba(2,74,216,0.15) 0%, rgba(255,255,255,0.15) 59%);}
.main-role-grid {grid-template-columns:repeat(2, 1fr); display:grid; gap:var(--space-25); margin-bottom:var(--space-80);}
.main-role-card {padding:var(--space-40); border-radius:16px; border:1px solid rgba(2,74,216,0.6); background:rgba(145,182,255,0.05); display:flex; flex-direction:column; align-items:center; gap:var(--space-30); text-align:center;}
.main-role-badge {display:inline-flex; align-items:center; justify-content:center; padding:var(--space-15); border-radius:60px; background:var(--color-primary); color:#fff; font-size:var(--font-size-14); font-weight:700; line-height:1em; letter-spacing:-0.03em;}
.main-role-title {font-size:var(--font-size-24); font-weight:700; line-height:1.5em; letter-spacing:-0.03em; color:#242424;}
.main-role-fig {width:clamp(120px, calc(186 / var(--inner) * 100vw), 186px); aspect-ratio:186 / 172; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.main-role-fig img {max-width:100%; max-height:100%; object-fit:contain;}
.main-role-desc {font-size:var(--font-size-16); line-height:1.6em; letter-spacing:-0.03em; color:#454545;}

.main-benefit-wrap {display:flex; flex-direction:column; align-items:center; gap:var(--space-55);}
.main-benefit-heading {font-size:clamp(24px, calc(32 / var(--inner) * 100vw), 32px); font-weight:700; line-height:1.3em; letter-spacing:-0.03em; color:#121212; text-align:center;}
.main-benefit-list {width:100%; grid-template-columns:repeat(4, 1fr); display:grid; gap:var(--space-20);}
.main-benefit-list li {padding:var(--space-40); border-radius:24px; background:#fff; display:flex; flex-direction:column; align-items:center; gap:var(--space-30); text-align:center;}
.main-benefit-icon img {height:clamp(40px, calc(64 / var(--inner) * 100vw), 64px);}
.main-benefit-tit {font-size:var(--font-size-24); font-weight:600; line-height:1.3em; letter-spacing:-0.03em; color:#121212;}
.main-benefit-txt {font-size:var(--font-size-16); line-height:1.75em; letter-spacing:-0.03em; color:#505050;}

.main-sec2 .main-sect-row {display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-30); margin-bottom:var(--space-60);}
.main-sec2 .main-sect-head {margin-bottom:0;}
.main-dashboard {margin-bottom:var(--space-40); border-radius:var(--radius-16); border:1px solid #ddd; overflow:hidden;}
.main-dashboard video {display:block; width:100%; aspect-ratio:16/9;}

.main-feat-grid {grid-template-columns:repeat(2, 1fr); display:grid; gap:var(--space-40);}
.main-feat-card {padding:var(--space-40); border-radius:var(--radius-24); background:#fff;}
.main-feat-card:after {position: absolute; content:''; top: 0; left: 0; right: 0; bottom: 0; border:1px solid #ddd; border-radius:24px;}
.main-feat-card:hover .main-feat-tit {color:var(--color-primary);}
.main-feat-card:hover:after {border:2px solid var(--color-primary);}
.main-feat-body {margin-bottom:var(--space-30);flex:1; display:flex; flex-direction:column; gap:var(--space-25);}
.main-feat-tit {font-size:var(--font-size-24); font-weight:600; line-height:1.3em; letter-spacing:-0.03em; color:#121212;}
.main-feat-desc {font-size:var(--font-size-16); line-height:1.5em; letter-spacing:-0.03em; color:#505050;}
.main-feat-icon {flex-shrink:0; width:clamp(60px, calc(120 / var(--inner) * 100vw), 120px); aspect-ratio:1/1; margin-left:auto;}
.main-feat-icon img {max-width:100%; max-height:100%; object-fit:contain;}

.main-sec3 {background:rgba(2,74,216,0.08);}
.main-faq {padding:var(--space-50); border-radius:24px; background:#fff; box-shadow:0 0 12px rgba(2,74,216,0.16); display:flex; flex-direction:column;}
.main-faq-item {border-bottom:1px solid #ddd; padding:var(--space-40) 0;}
.main-faq-item:first-child {padding-top: 0;}
.main-faq-item:last-child {border-bottom:0; padding-bottom:0;}
.main-faq-q {display:flex; align-items:center; gap:var(--space-15); cursor:pointer; border:0; width:100%; text-align:left; background:none;}
.main-faq-mark {flex-shrink:0; width:32px; height:32px; border-radius:50%; background:var(--color-primary); color:#fff; font-size:var(--font-size-18); font-weight:700; line-height:32px; text-align:center;}
.main-faq-qtxt {flex:1; font-size:var(--font-size-20); font-weight:600; line-height:1.3em; letter-spacing:-0.03em; color:#121212;}
.main-faq-arrow {flex-shrink:0; width:24px; height:24px; background:url('/images/main/icon-faq-close.svg') 50% 50% / contain no-repeat; transition:transform .2s;}
.main-faq-item.active .main-faq-arrow {background-image:url('/images/main/icon-faq-open.svg');}
.main-faq-a {display:none; padding:20px 15px 20px 0; margin-top: 20px; border-top: 1px solid #ddd; font-size:var(--font-size-16); line-height:1.75em; letter-spacing:-0.03em; color:#505050;}

.main-sec4 {position:relative; padding:var(--space-120) 0; overflow:hidden;}
.main-sec4-bg {position:absolute; inset:0; pointer-events:none;}
.main-sec4-bg img {width:100%; height:100%; object-fit:cover;}
.main-sec4-inner {position:relative; z-index:2;}
.main-sec4-copy {display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-30);}
.main-sec4-title {font-size:clamp(22px, calc(42 / var(--inner) * 100vw), 42px); font-weight:700; line-height:1.5em; letter-spacing:-0.03em; color:#121212;}
.main-sec4-desc {font-size:var(--font-size-18); line-height:1.5em; letter-spacing:-0.03em; color:#505050;}

/* sub page */
.sub-visual {position:relative; display:flex; flex-direction:column; background:#001B50; height:clamp(180px, calc(450 / var(--inner) * 100vw), 450px); overflow:hidden; color:#fff;}
.sub-visual .bg {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:3s linear; transform:scale(1.1); opacity:0;}
.sub-visual .title {position:relative; width:100%; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(20px, calc(60 / var(--inner) * 100vw), 60px) 0;}
.sub-visual .title .contain {width:100%; display:flex; flex-direction:column; gap:var(--space-24);}
.sub-visual .title h2 {font-size:clamp(28px, calc(54 / var(--inner) * 100vw), 54px); line-height:1.3em; color:#fff; letter-spacing:-0.03em;}
.sub-visual .title p {font-size:clamp(14px, calc(18 / var(--inner) * 100vw), 18px); line-height:1.4em; color:rgba(255,255,255,0.8); letter-spacing:-0.03em;}
.loaded .sub-visual .bg {transform:scale(1); opacity:1;}

.sub-title {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0;}

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

.real-cont {padding:var(--space-100) 0 var(--space-150);}

/* footer */
#footer {background:#000; color:#fff;}
#footer a {color:inherit; text-decoration:none;}
#footer a:hover {text-decoration:underline;}
.footer-inner {max-width:none; padding:60px var(--contain-paddingx3); display:flex; flex-direction:column; gap:40px;}
.footer-head {display:flex; flex-direction:column; gap:30px; width:100%;}
.footer-head-top {display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%;}
.footer-logo {display:flex; align-items:center; gap:var(--space-24);}
.footer-logo .slash {width:1px; height:clamp(16px, calc(24 / var(--inner) * 100vw), 24px); transform:rotate(40deg); background:#fff;}
.footer-logo img {height:40px;}

.footer-family {position:relative; flex-shrink:0;}
.footer-family-toggle {display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 16px; border:1px solid rgba(255,255,255,0.2); border-radius:1000px; background:transparent; color:#fff; font-size:var(--font-size-16); font-weight:400; line-height:1em; letter-spacing:-0.03em; cursor:pointer;}
.footer-family-toggle::-webkit-details-marker {display:none;}
.footer-family-toggle::marker {content:"";}
.footer-family-icon {display:flex; width:24px; height:24px; border-radius:50%; background:#fff; align-items:center; justify-content:center; flex-shrink:0;}
.footer-family-icon img {width:9px; height:8px; display:block;}
.footer-family[open] .footer-family-icon {transform:rotate(180deg);}
.footer-family-list {position:absolute; right:0; bottom:calc(100% + 8px); min-width:180px; z-index:5; padding:8px 0; border-radius:12px; background:#242424; box-shadow:0 4px 16px rgba(0,0,0,0.3);}
.footer-family-list a {display:block; padding:10px 16px; font-size:var(--font-size-14); line-height:1.5em; color:rgba(255,255,255,0.8);}
.footer-family-list a:hover {background:rgba(255,255,255,0.08); text-decoration:none;}
.footer-head-nav {display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%;}
.footer-gnb ul {display:flex; align-items:center; gap:40px;}
.footer-gnb a {font-size:var(--font-size-16); font-weight:600; line-height:1em; letter-spacing:-0.03em; color:#fff;}
.footer-policy {display:flex; align-items:center; gap:14px;}
.footer-policy a {font-size:var(--font-size-16); font-weight:400; line-height:1em; letter-spacing:-0.03em; color:rgba(255,255,255,0.5);}
.footer-divider {width:100%; height:1px; background:rgba(221,221,221,0.3);}
.footer-bottom {display:flex; align-items:flex-end; justify-content:space-between; gap:40px; width:100%;}
.footer-info {display:flex; align-items:flex-start; gap:60px;}
.footer-block {display:flex; flex-direction:column; gap:14px;}
.footer-contact {width:287px; max-width:100%;}
.footer-block-tit {font-size:var(--font-size-18); font-weight:600; line-height:1em; letter-spacing:-0.03em; color:#fff;}
.footer-block-mail {font-size:var(--font-size-16); line-height:1.75em; letter-spacing:-0.03em;}
.footer-block-mail a {color:#fff;}
.footer-block-desc {font-size:var(--font-size-16); line-height:1.75em; letter-spacing:-0.03em; color:rgba(255,255,255,0.5);}
.footer-copy {flex-shrink:0; font-size:var(--font-size-12); font-weight:400; line-height:1em; letter-spacing:-0.03em; color:rgba(255,255,255,0.2); text-align:right;}