@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:3.5714em}

.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%; padding-right:var(--layout-sub-inset, var(--layout-gutter)); padding-left:var(--layout-sub-inset, var(--layout-gutter));}

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

/* header */
#header {position:fixed; top:0; left:0; z-index:100; width:100%; height:var(--header-height); transition:.2s; background:#fff;}
#header .contain {position:relative; display:flex; align-items:center; justify-content:space-between; padding:0 var(--layout-gutter); width:100%; max-width:none; height:100%; margin:0 auto; z-index:2;}
.header-fixed #header {box-shadow:0 0 10px rgba(0, 0, 0, 0.1);}

.sitelogo {position:relative; z-index:2; flex-shrink:0;}
.sitelogo a {display:flex; align-items:center; gap:12px;}
.sitelogo img {display:block; width:40px; height:40px; object-fit:contain;}
.sitelogo .sitelogo__name {color:#2c2c2c; font-size:var(--font-size-24); font-weight:600; line-height:1.3; letter-spacing:-0.03em;}

#gnb {flex:1; min-width:0;}
#gnb>ul {display:flex; align-items:center; justify-content:center; height:100%;}
#gnb>ul>li {position:relative; display:flex; align-items:center; transition:.2s; padding:0 60px;}
#gnb>ul>li>a {position:relative; display:flex; align-items:center; justify-content:center; height:var(--header-height); color:#2c2c2c; font-size:20px; font-weight:600; line-height:34px; letter-spacing:-0.4px; text-align:center; white-space:nowrap;}
#gnb>ul>li:hover>a,
#gnb>ul>li.active>a {color:#21409a; font-weight:600;}
#gnb .submenu {position:absolute; top:var(--header-height); left:0; width:100%; height:0; overflow:hidden; text-align:center;}
#gnb .submenu>ul {display:flex; flex-direction:column; align-items:center; gap:10px; padding:30px 0 40px;}
#gnb .submenu>ul>li + li {margin-top:0;}
#gnb .submenu>ul>li>a {display:block; padding:0; color:#676767; font-size:18px; font-weight:400; line-height:28px; letter-spacing:-0.36px; white-space:nowrap;}
#gnb .submenu>ul>li>a:hover {color:#2c2c2c; font-weight:500; text-decoration:none;}
#gnb .submenu>ul>li.active>a {color:#21409a; font-weight:500; text-decoration:none;}

.submenu-bg {display:none; position:absolute; width:100%; left:0; background:#fff; border-top:1px solid #eee; box-shadow:0 14px 26px rgba(0, 0, 0, 0.08);}

.pull-right {position:relative; z-index:2; display:flex; align-items:center; gap:12px; flex-shrink:0;}

.header-login {display:inline-flex; align-items:center; gap:10px; padding:8px 8px 8px 20px; border-radius:80px; background:#f1f1f1; color:#676767; font-size:16px; font-weight:600; line-height:36px; text-decoration:none; white-space:nowrap;}
.header-login:hover {background:#e8e8e8;}
.header-login:after {content:""; display:inline-block; width:36px; height:36px; border-radius:80px; background:#21409a url("/images/common/ico-login-user.svg") no-repeat center / 16px;}
.header-login.none-icon {padding:8px 20px;}
.header-login.none-icon:after {display:none;}


/* for mobile */ 
.btn-m-menu {display:none; position:relative; width:44px; height:44px; border:1px solid var(--color-border); border-radius:50%; background:var(--color-white); box-sizing:border-box; transition:border-color .2s ease, background-color .2s ease;}
.btn-m-menu:hover {border-color:var(--color-main);}
.btn-m-menu div {display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:100%; height:100%;}
.btn-m-menu span {display:block; width:18px; height:2px; background:var(--color-text); transition:transform .2s ease, opacity .2s ease, background-color .2s ease;}
.btn-m-menu:hover span {background:var(--color-main);}
html.menu-opened .btn-m-menu span:nth-child(1) {transform:translateY(6px) rotate(45deg);}
html.menu-opened .btn-m-menu span:nth-child(2) {opacity:0;}
html.menu-opened .btn-m-menu span:nth-child(3) {transform:translateY(-6px) rotate(-45deg);}

.mobile-navigation {position:fixed; top:0; right:0; display:none; flex-direction:column; width:min(100%, 400px); height:100%; overflow:hidden; transition:transform .35s cubic-bezier(0.22, 1, 0.36, 1); -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;}
.mobile-navigation .home {display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:var(--header-height); height:auto; padding:0 20px; border-bottom:1px solid #eee; background:#fff;}
.mobile-navigation .home>a:not(.close) {display:flex; align-items:center; gap:10px; min-width:0;}
.mobile-navigation .home img {display:block; width:40px; height:40px; object-fit:contain;}
.mobile-navigation .home .sitelogo__name {color:#2c2c2c; font-size:18px; font-weight:600; line-height:1.3; letter-spacing:-0.03em;}
.mobile-navigation .nav-menu {flex:1; overflow-y:auto; padding:0 0 20px;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #eee;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; display:flex; align-items:center; justify-content:space-between; padding:20px 22px; color:#2c2c2c; font-size:17px; font-weight:600; line-height:1.2em; text-align:left; transition:color .2s ease, background-color .2s ease;}
.mobile-navigation .nav-menu>ul>li>a:hover {background:#f3f5fb;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:static; top:auto; right:auto; flex-shrink:0; width:10px; height:10px; margin-left:12px; border-right:2px solid #676767; border-bottom:2px solid #676767; transform:rotate(45deg);}
.mobile-navigation .nav-menu>ul>li.active>a {color:var(--color-primary); background:#eef1f8;}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:rotate(-135deg); border-color:var(--color-primary);}
.mobile-navigation .nav-menu .submenu {display:none; position:static; top:auto; left:auto; z-index:auto; min-width:0; padding:8px 0 12px; transform:none; border-radius:0; background:#f5f5f5; color:#676767; font-size:15px; font-weight:400; line-height:1.4em; text-align:left;}
.mobile-navigation .nav-menu .submenu.wide {min-width:0;}
.mobile-navigation .nav-menu .submenu ul li {border-top:0;}
.mobile-navigation .nav-menu .submenu ul li a {display:block; padding:14px 22px 14px 34px; color:#676767; font-size:15px; font-weight:400; line-height:1.4em; transition:color .2s ease, background-color .2s ease;}
.mobile-navigation .nav-menu .submenu ul li a:hover {color:var(--color-primary); background:rgba(33, 64, 154, 0.06);}
.mobile-navigation .nav-menu .submenu ul li.active a {color:var(--color-primary); font-weight:600; background:rgba(33, 64, 154, 0.08);}
.mobile-navigation .close {position:relative; top:auto; right:auto; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:40px; height:40px; overflow:hidden; border:1px solid var(--color-border); border-radius:50%; background:#fff; text-indent:0; transition:border-color .2s ease, background-color .2s ease;}
.mobile-navigation .close:hover {border-color:var(--color-primary); background:#f3f5fb;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:""; position:absolute; top:50%; left:50%; width:16px; height:2px; background:var(--color-text); border-radius:0;}
.mobile-navigation .close:before {transform:translate(-50%, -50%) rotate(45deg);}
.mobile-navigation .close:after {transform:translate(-50%, -50%) rotate(-45deg);}
.mobile-navigation .mobile-foot {flex-shrink:0; padding:20px 22px 28px; border-top:1px solid #eee; background:#f8f8f8;}
.mobile-navigation .top-links {display:flex;  gap:8px;}
.mobile-navigation .header-login {width:100%; justify-content:center; padding:8px 8px 8px 20px; font-size:16px;}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(18, 18, 18, 0.52); z-index:101;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0); box-shadow:-12px 0 40px rgba(0, 0, 0, 0.14);}
html.menu-opened .mobile-overlay {display:block;}
html.menu-opened .float-ui {display:none;}

/* main */
#container {overflow-x:clip;}
.main-visual {position:relative; overflow:visible; width:100%; height:auto; min-height:0; padding:0 40px 40px; background:#fff; box-sizing:border-box;}
.main-visual__frame {position:relative; overflow:hidden; height:clamp(480px, 44vw, 880px); border-radius:16px; background:#1a1a1a;}
.main-visual .items {position:relative; overflow:hidden; height:clamp(480px, 44vw, 880px);}
.main-visual .items:not(.slick-initialized) > .item:not(:first-child) {display:none;}
.main-visual .items:not(.slick-initialized) > .item:first-child .ani {opacity:1; transform:none;}
.main-visual .item {position:relative; overflow:hidden; width:100%; height:100%; height:clamp(480px, 44vw, 880px);}
.main-visual .item img {position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.06); transition:5s linear;}
.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 .caption {position:absolute; top:auto; left:40px; right:40px; bottom:160px; z-index:3; display:flex; flex-direction:column; gap:32px; width:auto; max-width:none; text-align:left; color:#fff; transform:none;}
.main-visual .caption .ani {transition:1.2s; transform:translate(0, 30px); opacity:0; color:#fff;}
.main-visual .caption .txt1{font-size:56px; font-weight:600; line-height:1.36em; letter-spacing:-0.02em; color:#fff; white-space:nowrap;}
.main-visual .caption .txt2 {font-size:24px; font-weight:500; line-height:1.58em; letter-spacing:-0.02em; color:rgba(255, 255, 255, 0.9);}
.main-visual .slick-dots {position:absolute; left:40px; bottom:88px; z-index:20; display:flex; align-items:flex-end; gap:8px; width:auto; height:auto; margin:0; padding:0; list-style:none; transform:none;}
.main-visual .slick-dots li {width:auto; height:auto; margin:0; padding:0;}
.main-visual .slick-dots li button {width:80px; height:2px; padding:0; border:0; border-radius:0; background:#fff; opacity:0.48; font-size:0; line-height:0; color:transparent; cursor:pointer; transition:opacity .25s ease;}
.main-visual .slick-dots li button:before {display:none;}
.main-visual .slick-dots li.slick-active button {opacity:1;}
.main-visual .active img {transform:scale(1);}
.main-visual .active .caption .ani {opacity:1; transform:translate(0, 0);}
.main-visual .active .caption .txt1 {transition-delay:.3s;}
.main-visual .active .caption .txt2 {transition-delay:.5s;}

@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-link {width:100%; padding:0; overflow-x:clip; background:#fff;}
.main-link .contain {width:100%; max-width:none; margin:0; padding:0 var(--layout-gutter); box-sizing:border-box;}
.main-link ul {display:flex; align-items:stretch; gap:0; margin:0; padding:0; list-style:none;}
.main-link ul li {position:relative; flex:1 1 0; min-width:0;}
.main-link ul li + li:before {content:""; position:absolute; top:24px; bottom:24px; left:0; width:1px; background:#eee;}
.main-link ul li a {position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; width:100%; height:auto; padding:60px 16px; background:#fff; text-decoration:none; box-sizing:border-box;}
.main-link .ico {position:relative; flex:none; display:block; width:72px; height:72px;}
.main-link .ico img {position:absolute; overflow:hidden; width:1px; height:1px; padding:0; margin:-1px; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0;}
.main-link .ico:after {content:""; position:absolute; inset:0; display:block; background-color:#878787; mask-size:contain; mask-repeat:no-repeat; mask-position:center; -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; transition:background-color .25s ease;}
.main-link ul li:nth-child(1) .ico:after {mask-image:url("/images/main/ico-main-link-figma01.svg"); -webkit-mask-image:url("/images/main/ico-main-link-figma01.svg");}
.main-link ul li:nth-child(2) .ico:after {mask-image:url("/images/main/ico-main-link-figma02.svg"); -webkit-mask-image:url("/images/main/ico-main-link-figma02.svg");}
.main-link ul li:nth-child(3) .ico:after {mask-image:url("/images/main/ico-main-link-figma03.svg"); -webkit-mask-image:url("/images/main/ico-main-link-figma03.svg");}
.main-link ul li:nth-child(4) .ico:after {mask-image:url("/images/main/ico-main-link-figma04.svg"); -webkit-mask-image:url("/images/main/ico-main-link-figma04.svg");}
.main-link ul li a:hover .ico:after {background-color:#21409a;}
.main-link .tit {margin:0; color:#2c2c2c; font-size:24px; font-weight:500; line-height:1.58em; letter-spacing:-0.02em; text-align:center; transition:color .25s ease;}
.main-link ul li a:hover .tit {color:#21409a;}

.dbi-filtab__in {display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:0; padding:12px; border:1px solid #eee; border-radius:500px; background:#fff;}
.dbi-filtab__in a {padding:8px 24px; border-radius:100px; color:#999; font-size:18px; font-weight:600; line-height:1.78em; letter-spacing:-0.03em; text-decoration:none; white-space:nowrap;}
.dbi-filtab__in a.on {background:#21409a; color:#fff;}

.main-slide {display:block; width:100%; padding:100px 0 120px; overflow:visible;}
.main-slide .contain {width:100%; max-width:none; margin:0; padding:0 var(--layout-gutter); box-sizing:border-box;}
.main-slide .head {display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px 40px; margin-bottom:70px;}
.main-slide .head .txt-wrap {display:flex; flex:none; flex-direction:column; gap:10px;}
.main-slide .head .en {margin:0; color:#21409a; font-size:18px; font-weight:500; line-height:1.56em;}
.main-slide .head .wf-sec__h {margin:0; color:#242424; font-size:52px; font-weight:600; line-height:1.27em;}
.main-slide .cont {overflow:visible;}
.main-slide__viewport {overflow:hidden; width:100%; max-width:100%; padding-top:20px; padding-bottom:44px; margin-top:-20px; margin-bottom:-44px; box-sizing:content-box;}
.main-slide .swiper {overflow:visible;}
.main-slide .swiper-slide {height:auto;}
.main-slide .item {position:relative; z-index:1; min-width:0; transition:transform .35s cubic-bezier(0.22, 1, 0.36, 1);}
.main-slide .item a {position:relative; display:flex; flex-direction:column; width:100%; height:100%; overflow:hidden; background:#fff; border-radius:16px; text-decoration:none; color:inherit; transition:box-shadow .35s ease;}
.main-slide .item a:before {content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border:1px solid #21409a; border-radius:16px; opacity:0; transition:opacity .3s;}
.main-slide .item:hover {z-index:2; transform:translateY(-16px);}
.main-slide .item:hover a {box-shadow:0 12px 32px rgba(0, 0, 0, 0.12);}
.main-slide .item:hover a:before {opacity:1;}
.main-slide__controls {display:flex; align-items:center; gap:40px; width:100%; max-width:100%; margin-top:32px; box-sizing:border-box;}
.main-slide__nav {display:flex; align-items:center; gap:8px; flex:none;}
.main-slide__arrows {display:flex; align-items:center; gap:4px;}
.main-slide__btn {display:inline-flex; align-items:center; justify-content:center; flex:none; padding:14px; border:1px solid #eee; border-radius:80px; background-color:#fff; color:#676767; text-decoration:none; cursor:pointer; box-sizing:border-box; transition:border-color .2s, background-color .2s, opacity .2s;}
.main-slide__btn:before {content:""; display:block; width:12px; height:12px; background:no-repeat center / 12px; transition:filter .2s;}
.main-slide__btn--prev:before {background-image:url("/images/main/ico-main-news-prev.svg");}
.main-slide__btn--next:before {background-image:url("/images/main/ico-main-news-next.svg");}
.main-slide__btn--more:before {background-image:url("/images/main/ico-main-news-more.svg");}
.main-slide__btn:hover:not(:disabled):not(.main-slide__btn--more) {border-color:#21409a; background-color:#fff;}
.main-slide__btn--prev:hover:not(:disabled):before,
.main-slide__btn--next:hover:not(:disabled):before {filter:brightness(0) saturate(100%) invert(22%) sepia(90%) saturate(1500%) hue-rotate(205deg) brightness(90%) contrast(95%);}
.main-slide__btn--more:hover {border-color:#21409a; background-color:#21409a;}
.main-slide__btn--more:hover:before {filter:brightness(0) invert(1);}
.main-slide__btn:disabled,
.main-slide__btn.swiper-button-disabled {opacity:0.35; cursor:default;}
.main-slide__slide {flex:1 1 0; overflow:hidden; min-width:0; height:2px; border-radius:80px; background:#eee;}
.main-slide__slide-bar {display:block; width:25%; height:100%; border-radius:80px; background:#21409a; transition:width .35s ease;}

.main-news {background:#fafafa;}
.main-news__stash {display:none;}
.main-news .head .label {display:block; margin-bottom:16px; color:var(--color-main); font-size:16px; font-weight:600; text-transform:uppercase;}
.main-news .head .title {color:var(--color-text); font-size:48px; font-weight:700; line-height:1.3em;}
.main-news__cate {display:flex; flex:1 1 auto; justify-content:flex-end; min-width:0; margin:0;}
.main-news .item .img {position:relative; overflow:hidden; width:100%; height:0; padding-bottom:72%; border-radius:16px 16px 0 0;}
.main-news .item .img img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; border-radius:16px 16px 0 0;}
.main-news .item .txt-wrap {display:flex; flex-direction:column; gap:0; padding:var(--space-24) var(--space-24) var(--space-26); border-radius:0 0 16px 16px;}
.main-press .item .txt-wrap {display:flex; flex-direction:column; width:100%; padding:var(--space-30); border:1px solid #ddd; border-radius:16px; box-sizing:border-box;}
.main-slide .item .tag {display:inline-block; margin:0 auto 0 0; padding:6px 12px; border-radius:30px; background:#21409a; color:#fff; font-size:13px; font-weight:500; line-height:1.4em;}
.main-slide .item .tit {display:-webkit-box; overflow:hidden; min-height:calc(1.45em * 2); margin:12px 0 0; color:#242424; font-size:22px; font-weight:500; line-height:1.45em; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis;}
.main-news .item .date {display:block; margin-top:4px; color:#868686; font-size:14px; line-height:1.4em;}
.main-news .list {display:flex; flex-direction:column; gap:80px;}
.main-news .thumb {flex:0 0 500px; height:280px; border-radius:var(--radius-lg); overflow:hidden;}
.main-news .thumb img {width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.main-news .item:hover .thumb img {transform:scale(1.05);}
.main-news .content {flex:1; min-width:0;}
.main-news .item .label {display:block; margin-bottom:24px; color:var(--color-main); font-size:16px; font-weight:600;}
.main-news .title-row {display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:24px;}
.main-news .item .title {flex:1; min-width:0; margin-bottom:0; color:var(--color-text); font-size:32px; font-weight:600; line-height:1.2em; transition:color .25s ease;}
.main-news .item:hover .title {color:var(--color-main);}
.main-news .divider {height:1px; margin-bottom:24px; background:var(--color-border);}
.main-news .text {margin-bottom:24px; color:var(--color-text-sub); font-size:18px; line-height:1.78em;}

.main-press {background:#fff;}
.main-press .item .txt {display:-webkit-box; overflow:hidden; height:calc(1.75em * 3); margin:0 0 var(--space-20); line-height:1.75em; -webkit-line-clamp:3; -webkit-box-orient:vertical; text-overflow:ellipsis;}
.main-press .item .bot-area {display:flex; align-items:center; justify-content:space-between; padding-top:var(--space-20); border-top:1px solid #ddd;}
.main-press .item .date {display:flex; align-items:center; color:#868686; line-height:1em;}
.main-press .item .date .icon {width:18px; height:18px; margin-right:var(--space-10); margin-top:-2px;}
.main-press .item .date .icon img {width:100%; height:100%; object-fit:contain;}
.main-press .item .arrow {display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid #ddd; border-radius:50%; background:#fff; color:#242424; transition:background .3s, border-color .3s, color .3s;}
.main-press .item:hover .arrow {background:#21409a; border-color:#21409a; color:#fff;}


/* sub */
.sub-visual {position:relative; width:100%; height:400px; overflow:hidden; color:#fff; background:#000; margin:0; border-radius:0;}
.sub-visual:after {content:""; position:absolute; inset:0; z-index:1; background:rgba(0, 0, 0, 0.22); pointer-events:none;}
.sub-visual .bg {position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:1.5s linear; transform:scale(1.1); opacity:0;}
.sub-visual .bg.hero-bg-sub01-intro {object-position:58% 42%;}
.sub-visual .bg.hero-bg-sub04 {object-position:62% 64%;}
.sub-visual .title {position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; width:100%; height:100%; padding:0 var(--layout-gutter, clamp(20px, 13.542vw, 260px)); text-align:left;}
.sub-visual .title .contain {width:100%; max-width:none; margin:0; padding:0; text-align:left;}
.sub-visual .title .name {margin:0; color:#fff; font-size:52px; font-weight:600; line-height:66px; letter-spacing:-0.03em; text-align:left; white-space:normal; text-shadow:0 2px 20px rgba(0, 0, 0, 0.45);}
.sub-visual .title .desc {margin:30px 0 0; padding:0; max-width:720px; color:rgba(255, 255, 255, 0.92); font-size:18px; font-weight:400; line-height:1.65; letter-spacing:-0.03em; text-shadow:0 1px 12px rgba(0, 0, 0, 0.4);}
.sub-visual.loaded .bg {transform:scale(1); opacity:1;}
.sub-visual.loaded .title .name,
.sub-visual.loaded .title .desc {opacity:0; transform:translateY(18px); animation:subvisualFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;}
.sub-visual.loaded .title .name {animation-delay:0.12s;}
.sub-visual.loaded .title .desc {animation-delay:0.28s;}
@keyframes subvisualFadeUp {
	from {opacity:0; transform:translateY(18px);}
	to {opacity:1; transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce) {
	.sub-visual .bg {transition:none; transform:none; opacity:1;}
	.sub-visual.loaded .title .name,
	.sub-visual.loaded .title .desc {opacity:1; transform:none; animation:none;}
}

.lnb-wrap {position:relative; left:auto; bottom:auto; z-index:2; width:100%; padding:0; border-bottom:1px solid #eee; text-align:center;}
.lnb {display:block; width:100%; max-width:none; margin:0; padding:0 var(--layout-sub-inset, var(--layout-gutter)); background:transparent; border:0; border-radius:0; backdrop-filter:none;}

.lnb ul li {flex:1;}
.lnb ul li a {position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:80px; padding:0 15px; border-radius:0; background:transparent; color:#222; font-size:18px; font-weight:500; line-height:1.2; letter-spacing:-0.03em; white-space:nowrap; transition:color .2s ease;}
.lnb ul li a:after {content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--color-primary); transition:width .2s ease;}
.lnb ul li.active a {background:transparent; color:var(--color-primary);}
.lnb ul li.active a:after {width:100%;}

#contArea {padding: var(--space-120) var(--layout-sub-inset, var(--layout-gutter)) var(--space-140);}
#contArea.wide {padding-left:0; padding-right:0;}

.sub-title {margin-bottom:var(--space-100);}
.sub-title h2 {font-size:var(--font-size-48); line-height:1.3em; color:var(--color-text); font-weight:600;}
.sub-title.blind {margin:0 !important; padding:0 !important;}
.sub-title.center {text-align:center;}
.sub-title .cns-board-desc {margin:20px 0 0; color:#484848; font-size:var(--font-size-18); font-weight:400; line-height:1.5; letter-spacing:-0.03em;}

.real-cont {min-height:300px;}
.real-cont:has(.oem-story__section--cta) {padding-bottom:0;}


/* footer */
#footer {position:relative; width:100%; max-width:none; margin:0; padding:0; overflow-x:clip; background:#fff; color:inherit; font-size:16px; font-weight:400; line-height:normal; box-sizing:border-box;}
.footer-sns-cta {position:relative; z-index:0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; width:100%; margin:0 auto; padding:24px var(--layout-gutter-header); gap:20px 24px; box-sizing:border-box;}
.footer-sns-cta:before {content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; margin-left:-50vw; background:#0d1a3f;}
.footer-sns-cta__txt {margin:0; min-width:0; flex:0 1 auto; color:#fff; font-size:clamp(18px, 1.15vw, 22px); font-weight:600; line-height:1.636; letter-spacing:-0.44px; text-align:left;}
.footer-sns-cta__list {display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; flex:0 1 auto; gap:8px; min-width:0; max-width:100%; margin:0 0 0 auto; padding:0; list-style:none;}
.footer-sns-cta__btn {display:inline-flex; align-items:center; gap:10px; max-width:100%; padding:12px clamp(16px, 1.25vw, 24px); border-radius:80px; color:#fff; font-size:clamp(15px, 0.94vw, 18px); font-weight:600; line-height:28px; letter-spacing:-0.36px; text-decoration:none; box-sizing:border-box; transition:opacity .2s, transform .15s;}
.footer-sns-cta__btn:hover {opacity:.88; transform:translateY(-1px);}
.footer-sns-cta__btn--youtube {background:#ff0000;}
.footer-sns-cta__btn--insta {background:linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);}
.footer-sns-cta__icon {display:block; flex:none; width:24px; height:24px; object-fit:contain;}
.footer-box {width:100%; max-width:none; overflow-x:clip; background:#fff;}
.footer-top {display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; width:100%; margin:0 auto; padding:50px var(--layout-gutter-header); gap:32px 40px; box-sizing:border-box;}
.footer-logo {display:flex; align-items:center; gap:10px; flex:0 1 auto; min-width:0; max-width:100%;}
.footer-logo__mark {display:block; flex:none; width:55px; height:56px; object-fit:contain;}
.footer-logo__name {color:#2c2c2c; font-size:clamp(22px, 1.56vw, 30px); font-weight:600; line-height:1.47; letter-spacing:-0.9px; word-break:keep-all; overflow-wrap:anywhere;}
.footer-txt {display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:30px; min-width:0; max-width:100%;}
.footer-policy {display:flex; align-items:center; flex-wrap:wrap; gap:16px 24px; max-width:100%; margin:0; padding:0; list-style:none;}
.footer-policy a {color:#aaa; font-size:clamp(16px, 0.94vw, 18px); font-weight:500; line-height:32px; letter-spacing:-0.36px; text-decoration:none;}
.footer-policy a:hover {color:#676767;}
.footer-info {display:flex; flex-direction:column; align-items:flex-end; gap:10px; width:100%; max-width:100%; text-align:right;}
.footer-info__row {display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-end; gap:12px clamp(20px, 2.08vw, 40px); width:100%; max-width:100%;}
.footer-info__item {display:flex; align-items:flex-start; flex-wrap:wrap; gap:6px 10px; max-width:100%; font-size:clamp(15px, 0.94vw, 18px); line-height:28px; letter-spacing:-0.36px; word-break:keep-all; overflow-wrap:anywhere;}
.footer-info__label {flex:none; color:#878787; font-weight:500;}
.footer-info__value {min-width:0; color:#676767; font-weight:400;}
.footer-info__value a:hover {text-decoration:underline;}
.footer-bottom {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; width:100%; margin:0 auto; padding:30px var(--layout-gutter-header); border-top:1px solid #eee; gap:16px 24px; box-sizing:border-box;}
#footer .copyright {flex:1; min-width:0; max-width:100%; margin:0; color:#878787; font-size:14px; font-weight:400; line-height:1.875; letter-spacing:-0.32px; word-break:keep-all; overflow-wrap:anywhere; text-align:center;}
#footer .copyright .design-credit {color:inherit; font-size:inherit; text-decoration:none;}
#footer .copyright .design-credit:hover {text-decoration:underline;}
.footer-sns {display:flex; align-items:center; justify-content:flex-end; flex:none; gap:16px; margin:0; padding:0; list-style:none;}
.footer-sns a {display:flex; align-items:center; justify-content:center; width:24px; height:24px;}
.footer-sns img {display:block; width:24px; height:24px;}

.float-ui {position:fixed; right:20px; bottom:var(--float-ui-bottom, 24px); z-index:1200; display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none;}
.float-ui > * {pointer-events:auto;}
.pfm-quick {position:relative; right:auto; bottom:auto; z-index:auto; display:flex; flex-direction:column; gap:8px; width:88px;}
.pfm-quick__btn {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:88px; height:88px; min-height:88px; padding:0; border-radius:8px; color:#fff; text-decoration:none; box-sizing:border-box; transition:opacity .18s ease, transform .18s ease;}
.pfm-quick__btn:hover {opacity:.92; transform:translateY(-2px);}
.pfm-quick__btn svg {display:block; flex:none; width:24px; height:24px;}
.pfm-quick__label {font-size:15px; font-weight:600; line-height:20px; letter-spacing:-0.02em; white-space:nowrap;}
.pfm-quick__btn--yt {background:#ff0000;}
.pfm-quick__btn--join {background:#21409a;}
.pfm-quick__btn--join .pfm-quick__label {white-space:normal; text-align:center; word-break:keep-all;}
.pfm-quick__btn--ig {background-color:#3771c8; background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 90 90' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='100%' height='100%' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -8.9173 8.296 0 23.889 96.901)'><stop stop-color='%23ffdd55' offset='0'/><stop stop-color='%23ff994a' offset='0.3'/><stop stop-color='%23ff543e' offset='0.5'/><stop stop-color='%23c837ab' offset='1'/></radialGradient></defs></svg>"); background-repeat:no-repeat; background-size:100% 100%;}
.scroll-top {position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:88px; height:88px; min-height:88px; padding:0; border:0; border-radius:8px; background:#2c2c2c; color:#fff; text-decoration:none;}
/* .scroll-top.active {opacity:1; visibility:visible; transform:none;} */
.scroll-top:hover {background:#3a3a3a;}
.scroll-top svg {display:block; flex:none; width:24px; height:24px;}
.scroll-top__label {font-size:15px; font-weight:600; line-height:20px; letter-spacing:-0.02em; white-space:nowrap;}