@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;outline-color:#f37736;}

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

#ws-wrapper {min-height:100vh;}

#ws-header {position:fixed; top:0; left:0; z-index:100; overflow:auto; width:200px; height:100%; background:#fafafa; box-shadow:0 0 5px rgba(0,0,0,.2);}

.ws-menu .ui {display:block; padding:var(--space-13) 0; background:#5e31a1; color:#fff; font-size:var(--font-size-18); font-weight:700; line-height:1.5em; letter-spacing:-.03em; text-align:center; border-bottom:1px solid #3c2065;}
.ws-menu .title {display:flex; align-items:center; justify-content:space-between; font-size:var(--font-size-15); font-weight:700; color:#fff; line-height:1.3em; padding:var(--space-10) var(--space-15); background:#7952b3; border-top:1px solid #3c2065;}
.ws-menu .title:after {content:""; width:15px; height:15px; background:url("/images/arrow_down.svg") 50% 50% no-repeat;}
.ws-menu .submenu {display:none;}
.ws-menu .submenu .tt {padding:5px var(--space-11); background:#837c8e; color:#fff; font-size:var(--font-size-14); font-weight:500; line-height:1.4em; letter-spacing:-.04em;}
.ws-menu .submenu ul {display:flex; flex-wrap:wrap; padding:0; list-style:none;}
.ws-menu .submenu ul li {width:100%; border-bottom:1px solid #e5e5e5;}
.ws-menu .submenu ul li.w50 {width:50%; border-right:1px solid #e5e5e5;}
.ws-menu .submenu ul li.w50:nth-child(2n) {border-right:0;}
.ws-menu .submenu ul li a {display:block; color:#333; text-decoration:none; font-size:var(--font-size-13); line-height:1.4em; letter-spacing:-.04em; padding:5px 5px 5px var(--space-11);}
.ws-menu .submenu ul li a:hover,
.ws-menu .submenu ul li.active a {background:#eee; color:#653ba4; font-weight:500; padding-left:var(--space-14);}
.ws-menu.active .title {background:#6c42ab;}
.ws-menu.active .title:after {transform:rotate(180deg)}
.ws-menu.active .submenu {display:block;}

#ws-content {margin-left:var(--space-200); padding:var(--space-30);}

.ws-title {display:flex; align-items:center; padding-bottom:var(--space-15); margin-bottom:var(--space-50); border-bottom:1px solid #ddd;}
.ws-title h2 {flex:1 1 auto; min-width:0; width:1%; font-size:var(--font-size-30); line-height:1.3em; letter-spacing:-.04em;}

.btn-psd-download {display:inline-block; padding:8px var(--space-20); font-family:"Roboto",sans-serif; color:#fff; font-size:var(--font-size-16); font-weight:500; line-height:1.3em; background:#7952b3; border-radius:4px;}

.ws-real-cont {max-width:1200px; margin:0 auto;}

.syntaxhighlighter {position:relative; font-family: Consolas, Monaco, monospace; font-size:var(--font-size-14); line-height:1.33em; margin-top:var(--space-60);}
.syntaxhighlighter pre {padding:var(--space-20); background:#282b2e; color: #a9b7c6; overflow:auto; max-height:300px; margin:0;}
.syntaxhighlighter code {}

.code-tit {font-family:"Roboto",sans-serif; font-size:var(--font-size-18); font-weight:700; line-height:1.33em; margin-bottom:var(--space-10);}  
.copy-code {position:absolute; top:0; right:0; font-size:var(--font-size-13); font-family:"맑은고딕"; letter-spacing:-.04em; color:red; background:transparent; border:0;}


/* 서브 컨텐츠 */
.content-tab {margin-bottom:var(--space-30);}
.content-tab ul {display:flex; flex-wrap:wrap; gap:5px; padding:0; list-style:none;}
.content-tab ul li a {display:block; background:#555; color:#fff; padding:5px var(--space-16); border-radius:6px;}
.content-tab ul li.active a {background:#5e31a1;}

.content-list {margin-bottom:var(--space-30);}
.content-list h3 {font-size:var(--font-size-26); line-height:1.3em; letter-spacing:-.04em; margin-bottom:var(--space-20);}
.content-list ul {display:flex; flex-wrap:wrap; margin:0 calc(var(--space-18) * -1);  padding:0; list-style:none;}
.content-list ul li {width:20%; padding:0 var(--space-18); margin-bottom:var(--space-35); text-align:center;}
.content-list ul li a {display:block;}
.content-list ul li .thumb {position:relative; padding-bottom:64.8%; border:1px solid #222; border-bottom:0; border-radius:10px 10px 0 0; overflow:hidden;}
.content-list ul li .thumb img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.content-list ul li .tit {border-radius:0 0 10px 10px; color:#fff; line-height:1.33em; padding:8px; background:#222;}
.content-list ul li .etc {margin-top:8px; font-size:var(--font-size-14); line-height:1.5em; color:red;}
.content-list ul li .link {position:absolute; bottom:0; right:0; width:44px; height:44px; background:rgba(0,0,0,.5); border-radius:10px 0 0 0;}
.content-list ul li .link svg {position:absolute; top:50%; left:50%; width:20px; height:20px; transform:translate(-50%,-50%); overflow:visible;}
.content-list ul li .link svg path {transition:.2s;}
.content-list ul li a:hover .link svg path:nth-child(1) {transform:translate(2px,-2px);}
.content-list ul li a:hover .link svg path:nth-child(2) {transform:translate(-2px,2px);}

@media (max-width: 640px) {
	.content-list ul {margin:0 -8px;}
	.content-list ul li {width:50%; padding:0 8px; margin-bottom:var(--space-16);}
}

/* 템플릿 */
.temp-tab {margin-bottom:var(--space-30);}
.temp-tab ul {display:flex; flex-wrap:wrap;  padding:0; list-style:none;}
.temp-tab ul li {display:flex; align-items:center; padding:5px 0;}
.temp-tab ul li:before {content:''; width:1px; height:14px; margin:0 var(--space-15); background:#ccc;}
.temp-tab ul li:first-child::before {display:none;}
.temp-tab ul li a {display:block; color:#242424;}
.temp-tab ul li.active a {color:#5e31a1; font-weight:600; text-decoration:underline; text-underline-offset:0.25em}

.temp-list ul {display:flex; flex-wrap:wrap; margin:0 calc(var(--space-15) * -1);  padding:0; list-style:none;}
.temp-list ul li {width:16.66666666%; padding:0 var(--space-15); margin-bottom:var(--space-40);}
.temp-list ul li a {display:block;}
.temp-list ul li .thumb {position:relative; margin-bottom:var(--space-10); border-radius:10px; background:#fff; overflow:hidden;}
.temp-list ul li .thumb img {width:100%;}
.temp-list ul li .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.3); border-radius:10px;}
.temp-list ul li .tit-wrap {display:flex; align-items:center; justify-content:space-between; padding:0 5px;}
.temp-list ul li .tit {font-size:var(--font-size-16); font-weight:500; line-height:1.4em; letter-spacing:-.02em;}
.temp-list ul li .links {display:flex;}
.temp-list ul li .links a {display:flex; align-items:center; justify-content:center; width:22px; height:22px; margin-left:4px; background:#fff; border:1px solid #ccc;}
.temp-list ul li .links i {width:14px; height:14px; background-position:50% 50%; background-repeat:no-repeat; background-size:contain;}
.temp-list ul li .links .icon-down {background-image:url('../images/sub/icon_down.svg');}
.temp-list ul li .links .icon-link {background-image:url('../images/sub/icon_link.svg');}

@media (min-width: 1920px) {
	.temp-list ul li {width:14.2857142%;}
}

@media (max-width: 640px) {
	.temp-list ul {margin:0 -8px;}
	.temp-list ul li {width:50%; padding:0 8px; margin-bottom:var(--space-25);}
}

.temp-view-wrap {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; overflow:auto; z-index:100;}
.temp-view-wrap::-webkit-scrollbar {display:none;}
.temp-view-inner {display:flex; width:100%; min-height:100%;}
.temp-view-img {flex:1 1 auto; min-width:0; width:1%; padding:var(--space-50); background:#eff1f6; text-align:center;}
.temp-view-cnt {position:sticky; top:0; left:0; align-self:self-start; width:25%; max-width:460px; padding:var(--space-50);}
.temp-view-cnt h2 {margin-bottom:var(--space-20); font-size:var(--font-size-24); line-height:1.33em; letter-spacing:-.02em;}
.temp-view-cnt table {width:100%; border-collapse:collapse; border-spacing:0px; font-size:var(--font-size-15); line-height:1.5em; word-break:break-all;}
.temp-view-cnt table th {width:120px; padding:7px 0; vertical-align:top; text-align:left; font-size:var(--font-size-17); font-weight:600; background:none; border:0;}
.temp-view-cnt table td {padding:7px 0; vertical-align:top; border:0;}
.temp-view-cnt table td a:hover {text-decoration:underline;}
.temp-view-cnt .btns {display:flex; gap:var(--space-10); margin-top:var(--space-50);}
.temp-view-cnt .btns a {display:flex; align-items:center; justify-content:center; width:100%; height:48px; border:1px solid #ccc; font-weight:600; line-height:1.33em; letter-spacing:-.03em;}
.temp-view-cnt .btns svg {width:24px; height:24px; margin-right:6px;}
.temp-view-cnt .btns a:hover {border-color:#000; color:#000;}

.temp-view-close {position:fixed; top:0; right:0; width:100px; height:100px; z-index:10;}
.temp-view-close svg {position:absolute; top:50%; left:50%; width:36px; height:36px; transform:translate(-50%,-50%);}

.contain {max-width:1460px; padding-left:var(--container-space); padding-right:var(--container-space); margin:0 auto;}
body#main #container .contain {max-width:1660px;}

/* header */
#header {position:fixed; top:0; left:0; width:100%; background:rgba(0,0,0,.2); z-index:100;}
#header .contain {position:relative; display:flex; align-items:center; justify-content:space-between; max-width: 1460px; height:var(--header-height); z-index:10;}

#gnb {text-align:center; flex:1 1 auto; min-width:0; width:1%;}
#gnb>ul {display:flex; justify-content:center;}
#gnb>ul>li {position:relative; padding:0 var(--space-45);}
#gnb>ul>li>a {position:relative; display:flex; align-items:center; flex-direction: column; justify-content:center; height:var(--header-height); color:#fff; font-size:var(--font-size-18); font-weight:600; letter-spacing:-.03em; line-height:1.3em;}
#gnb>ul>li>a:after {content:""; position:absolute; bottom:-1px; left:50%; width:0; height:4px; background:var(--primary-color); transition:.2s;}
#gnb>ul>li.active>a:after {width:100%; left:0;}
#gnb .submenu {position:absolute; left:0; width:100%; height:0; overflow:hidden; text-align:center;}
#gnb .submenu>ul {padding:var(--space-20) 5px;}
#gnb .submenu>ul>li>a {display:block; padding:var(--space-13) 0; color:#454545; font-size:var(--font-size-16); line-height:1.5em;}
#gnb .submenu>ul>li>a:hover {text-decoration:underline;}
#gnb .submenu>ul>li.active>a {color:var(--primary-color);}
.submenu-bg {display:none; position:absolute; width:100%; left:0; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #eee;}

.btn-header-inquiry {display:flex; flex:none; align-items:center; justify-content:center; width:110px; height:46px; margin-left:var(--space-40); border-radius:23px; background:var(--color-primary); color:#fff; font-size:var(--font-size-16); font-weight:600; line-height:1em; letter-spacing:-.03em;}

#header .sitelogo a {display:flex; align-items:center;}
#header .sitelogo img {height:28px; width:auto;}
#header .sitelogo .logo {display:none;}
#header .sitelogo .logo-w {display:block;}
#header .btn-m-menu span,
#header .btn-m-menu span:before,
#header .btn-m-menu span:after {background:#fff;}
#header.active {background:#fff;}
#header.active #gnb>ul>li>a {color:var(--dark-color);}
#header.active #gnb>ul>li.active>a {color:var(--color-secondary);}
#header.active .sitelogo .logo {display:block;}
#header.active .sitelogo .logo-w {display:none;}
#header.active .btn-m-menu span,
#header.active .btn-m-menu span:before,
#header.active .btn-m-menu span:after {background:var(--dark-color);}

/* for mobile */
.btn-m-menu {display:none; position:relative; width:26px; height:26px;}
.btn-m-menu span {position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:#242424;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; left:0; right:0; height:2px; background:#242424;}
.btn-m-menu span:before {top:-9px;}
.btn-m-menu span:after {bottom:-9px;}

.mobile-navigation {display:none; 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; color:#242424; font-size:19px; font-weight:700; line-height:1.5em;}
.mobile-navigation .nav-menu>ul {border-top:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:10px 48px 10px 20px; display:block; color:#242424; font-size:19px; 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(--primary-color)}
.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:16px; 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(--primary-color);}
.mobile-navigation .close {position:absolute; top:0; right:15px; width:26px; height:var(--header-height); text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:50%; 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-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 fullpage */
@media (min-width:1025px) {
	html.fp-enabled .main-visual,
	html.fp-enabled .main-visual .slick-slide,
	html.fp-enabled .main-partner {min-height:0;}
}
@media (min-width:1025px) and (max-height:1000px) {
	html.fp-enabled .main-partner,
	html.fp-enabled .main-ref {display:flex; flex-direction:column; justify-content:center; padding-top:var(--header-height); padding-bottom:0;}
	html.fp-enabled .main-partner .tit,
	html.fp-enabled .main-ref .head,
	html.fp-enabled .main-partner .logos,
	html.fp-enabled .main-ref .swiper {flex:none; width:100%;}
}

/* main */
.main-visual {position:relative; overflow:hidden; height:100vh; min-height:700px; background:#000;}
.main-visual .slick-slide {position:relative; height:100vh; min-height:700px; overflow:hidden;}
.main-visual .item {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
.main-visual .item .image {position:absolute; inset:0;}
.main-visual .item .image:after {content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%), linear-gradient(180deg, rgba(0,0,0,0) 74%, #000 100%);}
.main-visual .item img {position:absolute; inset:0; width:100%; height:100% !important; max-width:none; object-fit:cover;}

/* 유튜브/비메오/MP4 메인비주얼: 슬라이드 영역을 16:9 cover 로 꽉 채움 */
.main-visual .item.youtube,
.main-visual .item.vimeo,
.main-visual .item.video {container-type:size;}
.main-visual .item.youtube iframe.embed-player,
.main-visual .item.vimeo iframe.embed-player,
.main-visual .item.video .video-js {
	position:absolute; top:50%; left:50%; z-index:1;
	width:100cqi; height:56.25cqi; min-width:177.78cqb; min-height:100cqb;
	border:0; transform:translate(-50%, -50%); pointer-events:none;
}
.main-visual .item.youtube:after,
.main-visual .item.vimeo:after,
.main-visual .item.video:after {
	content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
	background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%), linear-gradient(180deg, rgba(0,0,0,0) 74%, #000 100%);
}

.main-visual .caption {position:absolute; top:50%; left:50%; width:100%; max-width:700px; padding:0 var(--container-space); transform:translate(-50%,-50%); color:#fff; text-align:center; z-index:40;}
.main-visual .caption .txt1,
.main-visual .caption .txt2 {transition:1.2s; transform:translate(50px,0); opacity:0;}
.main-visual .caption .txt1 {font-size:clamp(32px, calc(64 / var(--inner) * 100vw), 64px); font-weight:700; line-height:1.3em; letter-spacing:-.03em; color:#fff;}
.main-visual .caption .txt2 {margin-top:var(--space-30); font-size:clamp(15px, calc(24 / var(--inner) * 100vw), 24px); font-weight:500; line-height:1.7em; letter-spacing:-.03em; color:rgba(255,255,255,.8);}
.main-visual .slide-btn {position:absolute; top:50%; z-index:40; width:28px; height:28px; margin-top:calc(var(--space-14) * -1); background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; background-size:7px 9px; border:0; overflow:hidden;}
.main-visual .slide-prev {left:clamp(16px, calc(60 / var(--inner) * 100vw), 60px); background-image:url("/images/main/mv-prev.svg");}
.main-visual .slide-next {right:clamp(16px, calc(60 / var(--inner) * 100vw), 60px); background-image:url("/images/main/mv-next.svg");}
.main-visual .pagination,
.main-visual .slide-stop,
.main-visual .slide-play {display:none;}
.main-visual .active .caption .txt1,
.main-visual .active .caption .txt2 {transform:translate(0,0); opacity:1;}
.main-visual .active .caption .txt1 {transition-delay:.2s;}
.main-visual .active .caption .txt2 {transition-delay:.5s;}
.main-visual .scroll {position:absolute; bottom:52px; left:50%; display:flex; flex-direction:column; align-items:center; gap:var(--space-10); width:auto; margin-left:0; transform:translateX(-50%); color:#fff; font-size:var(--font-size-14); font-weight:600; line-height:1.5em; letter-spacing:-.03em; z-index:40;}
.main-visual .scroll:after {content:""; width:2px; height:100px; background:linear-gradient(#fff 0 40px, rgba(255,255,255,.3) 40px 100%); animation:scrollDown .9s linear infinite alternate;}

@keyframes scrollDown {
	0%{transform:translateY(0);}
	100%{transform:translateY(15px);}
}

.main-partner {position:relative; overflow:hidden; min-height:980px; padding:var(--space-280) 0 var(--space-80); color:#fff;}
.main-partner .bg {position:absolute; inset:0;}
.main-partner .bg img {width:100%; height:100%; object-fit:cover; object-position:center bottom;}
.main-partner .bg:after {content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 33%), rgba(0,0,0,.2);}
.main-partner .tit {position:relative; max-width:1100px; margin:0 auto var(--space-80); padding:0 var(--container-space); font-size:clamp(26px, calc(48 / var(--inner) * 100vw), 48px); font-weight:700; line-height:1.3em; letter-spacing:-.03em; color:#fff; text-align:center; text-shadow:0 4px 24px rgba(0,0,0,.45); z-index:2;}
.main-partner .logos {position:relative; z-index:2;}
.main-partner .marquee {overflow:hidden;}
.main-partner .marquee + .marquee {margin-top:var(--space-40);}
.main-partner .track {display:flex; width:max-content;}
.main-partner .marquee-ltr .track {animation:partnerLtr 40s linear infinite;}
.main-partner .marquee-rtl .track {animation:partnerRtl 50s linear infinite;}
.main-partner .marquee:hover .track {animation-play-state:paused;}
.main-partner .logos ul {display:flex; align-items:center; gap:var(--space-40); padding-right:var(--space-40);}
.main-partner .logos li {flex:0 0 auto; width:250px; aspect-ratio: 250/100;}
.main-partner .logos img {width:100%; height:100%; object-fit:contain;}

@keyframes partnerLtr {
	0%{transform:translateX(-50%);}
	100%{transform:translateX(0);}
}
@keyframes partnerRtl {
	0%{transform:translateX(0);}
	100%{transform:translateX(-50%);}
}

.main-ref {position:relative; overflow:hidden; padding:var(--space-200) 0 var(--space-80);}
.main-ref .bg {position:absolute; inset:0;}
.main-ref .bg img {width:100%; height:100%; object-fit:cover; opacity:.8;}
.main-ref .head {position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-30); margin-bottom:var(--space-80); z-index:2;}
.main-ref .txt {max-width:420px; color:var(--dark-color);}
.main-ref .txt h2 {margin-bottom:var(--space-20); font-size:clamp(40px, calc(72 / var(--inner) * 100vw), 72px); font-weight:700; line-height:1.3em; letter-spacing:-.03em; color:var(--dark-color);}
.main-ref .txt p {font-size:clamp(15px, calc(18 / var(--inner) * 100vw), 18px); font-weight:400; line-height:1.5em; letter-spacing:-.03em; color:var(--dark-color);}
.main-ref .btn-more {display:flex; align-items:center; gap:var(--space-25); height:68px; padding:0 var(--space-10) 0 var(--space-40); border:1px solid #ddd; border-radius:99px; color:#505050; font-size:var(--font-size-16); font-weight:600; line-height:1.5em; letter-spacing:-.03em;}
.main-ref .btn-more i {display:block; width:48px; height:48px; border-radius:99px; background:rgba(0,0,0,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23505050' d='M6.2 3.2a.8.8 0 0 1 1.13 0l5 5a.8.8 0 0 1 0 1.13l-5 5a.8.8 0 1 1-1.13-1.13L10.5 9 6.2 4.33a.8.8 0 0 1 0-1.13z'/%3E%3C/svg%3E") 50% 50% no-repeat;}
.main-ref .swiper {position:relative; overflow:hidden; padding-left:max(0px, calc((100vw - 1600px) / 2)); z-index:2;}
.main-ref .swiper-wrapper {transition-timing-function:linear;}
.main-ref .swiper-slide {width:400px; height:auto;}
.main-ref .swiper-slide a {display:block;}
.main-ref .thumb {height:270px; border:1px solid #ddd; border-radius:16px; overflow:hidden;}
.main-ref .thumb img {width:100%; height:100%; object-fit:cover;}
.main-ref .info {display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-10); margin-top:var(--space-30);}
.main-ref .cate {display:inline-block; padding:5px; border-radius:4px; background:var(--color-secondary); color:#fff; font-size:var(--font-size-14); font-weight:600; line-height:1.5em; letter-spacing:-.03em;}
.main-ref .info .tit {display:block; font-size:var(--font-size-20); font-weight:600; line-height:1.5em; letter-spacing:-.03em; color:var(--dark-color);}

.btn-arrow {display: flex; align-items: center; gap: 8px; width: fit-content; padding: var(--space-20) var(--space-34); border-radius: 100px; background: #CA484A; border: 1px solid #CA484A; color: #fff; font-size: var(--font-size-20); font-weight: 700; line-height: 1.7em; transition: .2s;}
.btn-arrow:after {content: ''; display: block; width: 24px; height: 24px; background: url('/images/main/btn-arrow.svg') no-repeat center center / contain;}
.btn-chk {display: flex; align-items: center; gap: 8px; width: fit-content; padding: var(--space-20) var(--space-30); border-radius: 100px; background: #fff; border: 1px solid var(--dark-color); color: var(--dark-color); font-size: var(--font-size-18); font-weight: 700; line-height: 1.5556em; transition: .2s;}
.btn-chk:before {content: ''; display: block; width: 24px; height: 24px; background: url('/images/main/btn-chk.svg') no-repeat center center / contain;}

/* sub */
.sub-visual {position:relative; overflow:hidden; height:clamp(400px, calc(700 / var(--inner) * 100vw), 700px); background:#333; color:#fff; text-align:center; border-radius:0 0 var(--radius-80) var(--radius-80);}
.sub-visual .bg {position:absolute; top:0; left:0; overflow:hidden; width:100%; height:100%; object-fit:cover; object-position:50% 100%; background-repeat:no-repeat; background-position:50% 100%; background-size:cover;}
.sub-visual:after {content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 100%), linear-gradient(90deg, rgba(0,0,0,.1), rgba(0,0,0,.1)); pointer-events:none;}
.sub-visual .inner {position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); z-index:2; padding: 0 var(--container-space)}
.sub-visual h2 {font-size:var(--font-size-72); font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.sub-visual h2 + p {margin-top: var(--space-20); font-size: var(--font-size-18); line-height: 1.6em; font-weight: 500;}
.sub-visual .path {display:flex; justify-content:center; margin-bottom:var(--space-20);}
.sub-visual .path ol {display:flex; align-items:center; gap:var(--space-12); font-size:var(--font-size-16); font-weight:400; line-height:1.5em; letter-spacing:-.03em;}
.sub-visual .path .home a {display:block; width:16px; height:16px;}
.sub-visual .path .home svg {display:block; width:16px; height:16px;}
.sub-visual .path li + li {display:flex; align-items:center; gap:var(--space-12);}
.sub-visual .path li + li:before {content:""; width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:5px solid #fff;}
.sub-visual .bg1 {background-image:url("/images/common/sv1.jpg");}
.sub-visual .bg2 {background-image:url("/images/common/sv2.jpg");}
.sub-visual .bg3 {background-image:url("/images/common/sv3.jpg");}
.sub-visual .bg4 {background-image:url("/images/common/sv4.jpg");}
.sub-visual .bg5 {background-image:url("/images/common/sv5.jpg");}
.sub-visual.none-lnb .inner {padding:0;}

.lnb-wrap {position:relative; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.lnb {margin:0 auto; max-width:1200px;}
.lnb ul {display:flex;}
.lnb ul li {flex:1; text-align:center; border-right:1px solid #ddd;}
.lnb ul li:first-child {border-left:1px solid #ddd;}
.lnb ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:var(--lnb-height); padding:0 var(--space-15); color:#242424; font-size:var(--font-size-18); font-weight:500; line-height:1.2em; letter-spacing:-.03em;}
.lnb ul li.active {background:var(--primary-color); border:0;}
.lnb ul li.active a {color:#fff;}
.sub-visual .lnb-wrap {position:absolute; left:0; right:0; bottom:60px; z-index:2; border:0;}
.sub-visual .lnb {max-width:1460px; padding:0 var(--container-space);}
.sub-visual .lnb .swiper {margin: 0 -5px;}
.sub-visual .lnb ul {display: flex; width: max-content; min-width: 100%;}
.sub-visual .lnb ul li {flex: 1 1 auto; width: auto; border:0; padding: 0 5px;}
.sub-visual .lnb ul li:first-child {border:0;}
.sub-visual .lnb ul li a {height:60px; padding:0 10px; border-radius:99px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); color:rgba(255,255,255,.8); font-weight:500; line-height:1.5em; letter-spacing:-.03em; backdrop-filter:blur(5px);}
.sub-visual .lnb ul li.active {background:transparent;}
.sub-visual .lnb ul li.active a {background:#fff; color:var(--dark-color); font-weight:700;}


.sub-title {padding-bottom:var(--space-80); max-width:1460px; margin:0 auto;}
.sub-title.blind {display: none;}
#contArea.wide .sub-title {padding-left:var(--container-space); padding-right:var(--container-space);}
.sub-title h2 {font-size:var(--font-size-42); line-height:1.3em; color:#2c2c2c;}

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

.real-cont {padding-bottom:clamp(40px, calc( 120 / var(--inner) * 100vw ), 120px);}
.icon img {vertical-align: middle; margin-top: -.02em;}
.txt-center {text-align: center;}

.desc p:not(:last-child) {margin-bottom: 1.88em;}
.pb100-40 {padding-bottom: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px);}
.pt100-40 {padding-top: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px);}
.border-box {position: relative;}
.border-box:before {position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #ddd;}

.flex-wrap {display: flex;}
.flex-center {display: flex; justify-content: center;}
.flex-between {display: flex; justify-content: space-between;}
.flex-mid {display: flex; align-items: center;}
.flex-bottom {display: flex; align-items: flex-end;}
.flex-column {display: flex; flex-direction: column;}
.flex1 {flex: 1;}

.fw400 {font-weight: 400;}
.fw500 {font-weight: 500;}
.fw600 {font-weight: 600;}
.fw700 {font-weight: 700;}

.primary-color {color: var(--primary-color);}
.secondary-color {color: var(--secondary-color);}
.dark-color {color: var(--dark-color);}
.white-color {color: #fff;}

/* footer */
#footer {background:var(--dark-color); color:#fff; padding:var(--space-80) 0;}
#footer .contain {max-width:1460px;}
#footer .f-top {display:flex; align-items:center; justify-content:space-between; gap:var(--space-30); margin-bottom:var(--space-60);}
#footer .f-nav ul {display:flex; flex-wrap:wrap; gap:var(--space-60);}
#footer .f-nav a {font-size:var(--font-size-18); font-weight:600; line-height:1.5em; letter-spacing:-.03em; color:#fff;}
#footer .f-nav a:hover {text-decoration:underline; text-underline-offset:.25em;}
#footer .f-policy {display:flex; flex-wrap:wrap; gap:var(--space-30); font-size:var(--font-size-16); line-height:1.5em; letter-spacing:-.03em;}
#footer .f-policy a {color:rgba(255,255,255,.7);}
#footer .f-policy a:first-child {color:var(--color-primary); font-weight:600;}
#footer .f-mid {display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-40);}
#footer .f-brand {display:flex; align-items:flex-start; gap:var(--space-80);}
#footer .f-logo a {display:block; width:176px;}
#footer .f-logo img {width:176px; height:100px;}
#footer .f-info {display:flex; flex-direction:column; gap:var(--space-20);}
#footer .f-info div {display:flex; align-items:center; gap:var(--space-60);}
#footer .f-info dt {flex:0 0 61px; width:61px; font-size:var(--font-size-18); font-weight:400; line-height:1.5em; letter-spacing:-.03em; color:#fff;}
#footer .f-info dd {font-size:var(--font-size-18); font-weight:400; line-height:1.5em; letter-spacing:-.03em; color:rgba(255,255,255,.5);}
#footer .f-aside {display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-80);}
#footer .f-meta {display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-20);}
#footer .family-site {position:relative; width:226px;}
#footer .family-site button {display:flex; align-items:center; justify-content:space-between; width:100%; height:60px; padding:0 var(--space-30); border:0; border-radius:8px; background:rgba(255,255,255,.1); color:#fff; font-size:var(--font-size-16); font-weight:700; line-height:1.5em; letter-spacing:-.05em;}
#footer .family-site.active button {background:var(--primary-color);}
#footer .family-site button:after {content:""; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid #fff;}
#footer .family-site.active button:after {border-bottom:0; border-top:6px solid #fff;}
#footer .family-site ul {display:none; position:absolute; left:0; right:0; bottom:100%; margin-bottom:8px; padding:var(--space-10) 0; border-radius:8px; background:#1c1c1c;}
#footer .family-site.active ul {display:block;}
#footer .family-site ul a {display:block; padding:8px var(--space-20); color:rgba(255,255,255,.7); font-size:var(--font-size-14); line-height:1.5em;}
#footer .family-site ul a:hover {color:#fff;}
#footer .f-cert {display:flex; align-items:center; gap:var(--space-20);}
#footer .f-cert img {height:40px; width:auto;}
#footer .copyright {font-size:var(--font-size-14); font-weight:400; line-height:1.5em; letter-spacing:-.03em; color:rgba(255,255,255,.5);}

.scroll-top {display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; z-index:80; position:fixed; bottom:var(--container-space); right:var(--container-space); width:70px; height:70px; border-radius:100%; border:1px solid rgba(255,255,255,.2); background:var(--dark-color); color:#fff; font-size:var(--font-size-14); font-weight:600; line-height:1em; letter-spacing:-.03em; text-align:center;}
.scroll-top span:before {display:block; content:""; margin:0 auto 10px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:8px solid #fff;}
/* Managed main visual product CTA */
.main-visual .visual-cta {display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:54px; margin-top:32px; padding:14px 30px; border:1px solid rgba(255,255,255,.8); border-radius:999px; background:#fff; color:#111; font-size:17px; font-weight:600; line-height:1.4; text-decoration:none; transition:background .2s, color .2s;}
.main-visual .visual-cta:hover {background:#172c57; color:#fff;}
.main-visual .visual-cta:focus-visible {outline:3px solid #7dd3fc; outline-offset:5px;}
@media(max-width:768px) {.main-visual .visual-cta {min-height:48px; margin-top:24px; padding:12px 24px; font-size:15px;}}