@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:1460px; margin:0 auto; padding-right:var(--space-container); padding-left:var(--space-container);}

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

/* header */
#header {position:fixed; top:0; left:0; z-index:100; width:100%; height:var(--header-height); transition:.2s; background:#fff; border-bottom:1px solid #eee;}
#header .contain {display:flex; align-items:center; justify-content:space-between; gap:var(--space-30); width:100%; max-width:1860px; height:100%; z-index:2;}
.header-fixed #header {box-shadow:0 0 10px rgba(0, 0, 0, 0.1);}
/* #header:has(#gnb>ul>li.active .submenu)::after {content:""; position:fixed; left:0; top:var(--header-height); width:100%; height:calc(100vh - var(--header-height)); background:rgba(0,0,0,.5); z-index:1; pointer-events:none;} */

.sitelogo {flex-shrink:0;}
.sitelogo a {display:block;}
.sitelogo img {display:block; height:clamp(28px, calc(36 / var(--inner) * 100vw), 36px);}

#gnb {flex:1; min-width:0;}
#gnb>ul {display:flex; justify-content: space-evenly; gap:20px;}
#gnb>ul>li>a {position:relative; display:flex; align-items:center; justify-content:center; height:var(--header-height); color:#121212; font-size:var(--font-size-18); font-weight:600; letter-spacing:-.03em; line-height:1em; text-align:center; white-space:nowrap;}
#gnb>ul>li.active>a {color:var(--color-primary);}

#gnb .submenu {display:none; position:absolute; left:0; top:var(--header-height); width:100%; transform:none; background:#fff; text-align:left; z-index:3; overflow:hidden;}
#gnb .submenu > ul {position:relative; max-width:1400px; margin:0 auto; display:flex; flex-wrap:wrap; gap:var(--space-30) 0; padding:var(--space-30) 0;}
#gnb .submenu > ul > li {position:relative; width:25%; padding:0 var(--space-30);}
#gnb .submenu > ul > li:after {content:''; position:absolute; top:-30px; right:0; width:1px; height:100vh; background:#ddd;}
#gnb .submenu > ul > li:first-child::before {content:''; position:absolute; top:-30px; left:0; width:1px; height:100vh; background:#ddd;}
#gnb .submenu > ul > li > a {display:block; font-size:var(--font-size-16); font-weight:600; line-height:1.25em; letter-spacing:-.03em;}
#gnb .submenu > ul > li > ul > li {margin-top:var(--space-16);}
#gnb .submenu > ul > li > ul > li > a {display:block; color:#505050; font-size:var(--font-size-14); font-weight:400; line-height:1.25em; letter-spacing:-.03em;}
#gnb .submenu > ul > li > ul > li > a:hover {color:var(--color-primary); text-decoration: underline;}


.submenu-bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:90; background:rgba(0, 0, 0, 0.50); pointer-events:none;}

.top-search {flex-shrink:0; width:250px;}
.top-search form {display:block; width:100%; position:relative;}
.top-search .input {display:block; width:100%; padding:0 40px 0 15px; color:#121212; font-size:var(--font-size-14); font-weight:400; line-height:1.2em; letter-spacing:-.03em;}
.top-search .input::placeholder {color:#878787;}
.top-search .submit {position:absolute; top:calc(50% - 12px); right:15px; width:24px; height:24px; padding:0; border:0; background:url('/images/common/search.svg') 50% 50%/contain no-repeat; text-indent:-9999em; overflow:hidden; cursor:pointer;}

.pull-right {display:none; align-items:center; gap:12px; flex-shrink:0;}
.btn-m-search {display:none; width:28px; height:28px; padding:0; border:0; background:url('/images/common/search.svg') 50% 50%/contain no-repeat; cursor:pointer;}

/* for mobile */ 
.btn-m-menu {display:none; position:relative; width:24px; height:24px;}
.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:#121212;}

.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 img {height:clamp(28px, calc(36 / var(--inner) * 100vw), 36px);}
.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; max-height:300px; overflow:auto; background:#f8f8f8;}
.mobile-navigation .nav-menu .submenu > ul > li {border-top:1px solid #e5e5e5; padding:12px 20px;}
.mobile-navigation .nav-menu .submenu > ul > li > a {display:block; color:#242424; font-size:16px; font-weight:500; line-height:1.5em;}
.mobile-navigation .nav-menu .submenu > ul > li > ul {padding-top:5px;}
.mobile-navigation .nav-menu .submenu > ul > li > ul > li {}
.mobile-navigation .nav-menu .submenu > ul > li > ul > li > a {display:block; padding:3px 0; font-size:14px; color:#505050; line-height:1.5em;}
.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-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 */
#main #container {overflow:hidden;}
.main-visual {position:relative; overflow:hidden; width:100%; height:calc(100vh - var(--header-height)); background:#333;}
.main-visual .item {position:relative; overflow:hidden; width:100%; height:calc(100vh - var(--header-height));}
.main-visual .item::after {content:""; position:absolute; inset:0; z-index:1; background:rgba(0,0,0,0.5); pointer-events:none;}
.main-visual .item img {position:absolute; width:100%; height:100%; object-fit:cover; transform:scale(1.1); 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:50%; left:50%; z-index:2; width:100%; max-width:1460px; padding:0 var(--space-container); text-align:left; text-shadow:0 3px 5px rgba(0,0,0,0.3); transform:translate(-50%,-50%);}
.main-visual .caption .ani {transition:1.2s; transform:translate(0,30px); opacity:0; color:#fff;}
.main-visual .caption .t0 {font-size:clamp(12px, calc(22 / var(--inner) * 100vw), 22px); font-weight:400; line-height:1.3em; letter-spacing:-.03em; color:rgba(255,255,255,0.7);}
.main-visual .caption .t1 {margin-top:var(--space-20); font-size:clamp(32px, calc(80 / var(--inner) * 100vw), 80px); font-weight:700; line-height:1.1em; letter-spacing:-.03em;}
.main-visual .caption .t2 {margin-top:var(--space-20); font-size:clamp(14px, calc(24 / var(--inner) * 100vw), 24px); font-weight:400; line-height:1.3em; letter-spacing:-.03em;}
.main-visual .caption .t3 {margin-top:var(--space-10); font-size:clamp(14px, calc(24 / var(--inner) * 100vw), 24px); font-weight:600; line-height:1.3em; letter-spacing:-.03em; color:var(--color-primary);}
.main-visual .caption .btn-more {display:inline-flex; align-items:center; gap:var(--space-40); margin-top:var(--space-40); padding: var(--space-10) var(--space-30); min-height: clamp(32px, calc(60 / var(--inner) * 100vw), 60px); border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.05); color:#fff; font-size:var(--font-size-16); font-weight:600; letter-spacing:-.03em; text-decoration:none;}
.main-visual .caption .btn-more:after {content:""; display:block; width:7px; height:12px; background:url('/images/main/icon-arrow.svg') 50% 50%/contain no-repeat; filter:brightness(0) invert(1);}
.main-visual .active img {transform:scale(1);}
.main-visual .active .caption .ani {opacity:1; transform:translate(0,0);}
.main-visual .active .caption .t0 {transition-delay:.2s;}
.main-visual .active .caption .t1 {transition-delay:.3s;}
.main-visual .active .caption .t2 {transition-delay:.4s;}
.main-visual .active .caption .t3 {transition-delay:.5s;}
.main-visual .active .caption .btn-more {transition-delay:.6s;}
.main-visual .slick-dots {position:absolute; bottom:clamp(16px, calc(80 / var(--inner) * 100vw), 80px); left:50%; z-index:2; width:100%; max-width:1460px; display:flex; gap:var(--space-10); padding:0 var(--space-container); transform:translate(-50%,0);}
.main-visual .slick-dots button {display:block; width:clamp(32px, calc(50 / var(--inner) * 100vw), 50px); height:3px; background:#fff; opacity:.2; transition:.2s; border:0; border-radius:0; font-size:0; line-height:0; text-indent:-9999em;}
.main-visual .slick-dots .slick-active button {opacity:1;}

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

.scroll-down {position:absolute; z-index:10; left:50%; bottom:clamp(16px, calc(80 / var(--inner) * 100vw), 80px); -webkit-transform:translateX(-50%); transform:translateX(-50%); text-align:center; color:#fff; font-size:12px; font-weight:600; line-height:1em; letter-spacing:0;}
.scroll-down .inner {display:flex; flex-direction:column; gap:10px; animation:scrollDown .9s linear infinite alternate;}
@media (max-width:900px) {.scroll-down {display:none;}}
@keyframes scrollDown{
	0%{transform:translateY(0);}
	100%{transform:translateY(15px);}
}

.m-head .st {margin-bottom:var(--space-16); font-size:var(--font-size-24); font-weight:600; line-height:1.2em; letter-spacing:-.03em; color:var(--color-primary);}
.m-head .tit {font-size:clamp(24px, calc(48 / var(--inner) * 100vw), 48px); font-weight:700; line-height:1.3em; letter-spacing:-.03em; color:#121212;}
.m-head .desc {margin-top:var(--space-30); font-size:var(--font-size-18); font-weight:400; line-height:1.66em; letter-spacing:-.03em; color:#878787;}
.m-head.type-center {text-align:center;}
.m-head.type-white .st {color:var(--color-primary);}
.m-head.type-white .tit {color:#fff;}
.m-head.type-white .tit .regular {font-weight:400;}
.m-head.type-white .desc {color:#fff;}

.btn-more {display:inline-flex; align-items:center; gap:var(--space-40); min-height:clamp(32px, calc(60 / var(--inner) * 100vw), 60px); padding:var(--space-10) var(--space-30); border:1px solid #ddd; background:#fff; color:#505050; font-size:var(--font-size-16); font-weight:600; letter-spacing:-.03em; text-decoration:none;}
.btn-more:after {content:""; display:block; width:7px; height:12px; background:url('/images/main/icon-arrow.svg') 50% 50%/contain no-repeat;}

.main-system {padding:var(--space-120) 0; overflow:hidden;}
.main-system .m-head {margin-bottom:var(--space-80);}
.main-system .slider {position:relative;}
.main-system .slide-btn {position:absolute; top:50%; z-index:5; transform:translateY(-50%); width:64px; height:64px; padding:0; border:1px solid #ddd; border-radius:50%; background-color:#fff; background-position:50% 50%; background-repeat:no-repeat; cursor:pointer; box-shadow:0 5px 10px 0 rgba(0, 0, 0, 0.10);}
.main-system .slide-btn.prev {left:-32px; background-image:url('/images/main/slide-prev.svg');}
.main-system .slide-btn.next {right:-32px; background-image:url('/images/main/slide-next.svg');}
.main-system .system-swiper {overflow:visible;}
.main-system .swiper-slide {width:700px; opacity:.5; transition:opacity .3s;}
.main-system .swiper-slide-active {opacity:1;}
.main-system .slide-inner {display:flex;}
.main-system .info {display:flex; flex-direction:column; justify-content:center; align-items:flex-start; width:50%; padding:0 var(--space-50) 0 var(--space-80);}
.main-system .num {margin-bottom:var(--space-60); font-size:var(--font-size-48); font-weight:600; line-height:1.2em; letter-spacing:-.03em; color:var(--color-primary);}
.main-system .num .total {font-size:var(--font-size-24); color:#878787;}
.main-system .name {margin-bottom:var(--space-40); font-size:clamp(24px, calc(40 / var(--inner) * 100vw), 40px); font-weight:600; line-height:1.2em; letter-spacing:-.03em; color:#121212;}
.main-system .txt {margin-bottom:var(--space-80); font-size:var(--font-size-18); font-weight:400; line-height:1.66em; letter-spacing:-.03em; color:#505050;}
.main-system .thumb {width:50%; aspect-ratio:700/525; overflow:hidden; border:1px solid #ddd;}
.main-system .thumb img {display:block; width:100%; height:100%; object-fit:contain;}

.main-product {padding:var(--space-120) 0; background:#f9f9f9; overflow:hidden;}
.main-product .head-row {display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-40); margin-bottom:var(--space-60);}
.main-product .head-left {flex:1; min-width:0;}
.main-product .m-head {margin-bottom:var(--space-40);}
.main-product .tab ul {display:flex; flex-wrap:wrap; gap:10px;}
.main-product .tab ul li a {display:flex; align-items:center; justify-content:center; min-height:42px; padding:10px 15px; border:1px solid #ddd; border-radius:99px; color:#505050; font-size:var(--font-size-16); font-weight:400; line-height:1.2em; letter-spacing:-.03em; background:transparent; text-decoration:none;}
.main-product .tab ul li.active a {border-color:#121212; background:#121212; color:#fff; font-weight:600;}
.main-product .arrows {display:flex; gap:15px; flex-shrink:0;}
.main-product .arrows .slide-btn {width:64px; height:64px; padding:0; border:1px solid #ddd; border-radius:50%; background-color:#fff; background-position:50% 50%; background-repeat:no-repeat; cursor:pointer; box-shadow:0 5px 10px 0 rgba(0, 0, 0, 0.10);}
.main-product .arrows .slide-btn.prev {background-image:url('/images/main/slide-prev.svg');}
.main-product .arrows .slide-btn.next {background-image:url('/images/main/slide-next.svg');}
.main-product .product-area .slider {position:relative;}
.main-product .link-item {display:block; border:1px solid #ddd; background:#fff; text-decoration:none; color:inherit;}
.main-product .link-item .thumb {height:240px; overflow:hidden; border-bottom:1px solid #ddd;}
.main-product .link-item .thumb img {width:100%; height:100%; object-fit:cover; transition:.4s;}
.main-product .link-item .info {padding:var(--space-30);}
.main-product .link-item .cate {margin-bottom:var(--space-15); font-size:var(--font-size-14); font-weight:600; line-height:1.2em; letter-spacing:-.03em; color:var(--color-primary);}
.main-product .link-item .title {margin-bottom:var(--space-30); font-size:var(--font-size-18); font-weight:600; line-height:1.5em; letter-spacing:-.03em; color:#121212;}
.main-product .link-item .text {font-size:var(--font-size-14); font-weight:400; line-height:1.57em; letter-spacing:-.03em; color:#878787; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.main-product .link-item:hover .thumb img {transform:scale(1.05);}
.main-product .slider-foot {margin-top:var(--space-40);}
.main-product .swiper-pagination-progressbar {position:relative; height:3px; background:#ddd; border-radius:0;}
.main-product .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#505050; height:100%; border-radius:0;}

.main-support {position:relative; padding:var(--space-120) 0; overflow:hidden; background:url('/images/main/support-bg.jpg') 50% 50%/cover no-repeat;}
.main-support .contain {position:relative; z-index:1;}
.main-support .inner {display:flex; align-items:center; justify-content:space-between; gap:var(--space-60);}
.main-support .m-head {flex:1; min-width:0;}
.main-support .grid {display:grid; grid-template-columns:repeat(2, 300px); gap:5px; flex-shrink:0;}
.main-support .item {display:flex; flex-direction:column; justify-content:space-between; min-height:300px; padding:var(--space-40); background:rgba(0,0,0,0.7); backdrop-filter:blur(5px); color:#fff; text-decoration:none; transition:background .2s;}
.main-support .item .icon {display:block; width:56px; height:56px;}
.main-support .item .icon img {display:block; width:100%; height:100%; object-fit:contain;}
.main-support .item .tit {display:block; margin-top:var(--space-40); font-size:var(--font-size-24); font-weight:700; line-height:1.2em; letter-spacing:-.03em;}
.main-support .item .txt {display:block; margin-top:var(--space-20); font-size:var(--font-size-16); font-weight:400; line-height:1.5em; letter-spacing:-.03em; color:rgba(255,255,255,0.7);}
.main-support .item:hover {background:var(--color-primary);}

.main-notice {padding:var(--space-120) 0;}
.main-notice .head-row {display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-40); margin-bottom:var(--space-30);}
.main-notice .slider {position:relative;}
.main-notice .notice-swiper {padding:var(--space-30) 0;}
.main-notice .swiper-slide {width:320px; height:auto; transition:transform .3s;}
.main-notice .link-item {display:flex; flex-direction:column; justify-content:space-between; padding:var(--space-30); border:1px solid #ddd; background:#fff; text-decoration:none; color:inherit; transition:background .3s, box-shadow .3s, transform .3s;}
.main-notice .link-item .title {margin-bottom:var(--space-20); font-size:var(--font-size-22); font-weight:700; line-height:1.45em; letter-spacing:-.03em; color:#121212; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; height:calc(1.45em * 2);}
.main-notice .link-item .text {margin-bottom:var(--space-80); font-size:var(--font-size-16); font-weight:400; line-height:1.62em; letter-spacing:-.03em; color:#505050; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;  height:calc(1.62em * 3);}
.main-notice .link-item .date {display:flex; align-items:center; gap:8px; font-size:var(--font-size-14); font-weight:600; line-height:1.2em; letter-spacing:-.03em; color:#121212;}
.main-notice .swiper-slide:hover {transform:translateY(-30px);}
.main-notice .swiper-slide:hover .link-item {background:var(--color-primary); border-color:var(--color-primary); box-shadow:0 5px 10px rgba(0,0,0,0.2);}
.main-notice .swiper-slide:hover .link-item .title {color:#fff;}
.main-notice .swiper-slide:hover .link-item .text {color:#fff;}
.main-notice .swiper-slide:hover .link-item .date {color:#fff;}
.main-notice .swiper-slide:hover .link-item .date svg {filter:brightness(0) invert(1);}
.main-notice .slider-foot {margin-top:var(--space-20);}
.main-notice .swiper-pagination-progressbar {position:relative; height:3px; background:#ddd; border-radius:0;}
.main-notice .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#505050; height:100%; border-radius:0;}

.main-partners {padding:30px 0; border-top:1px solid #eee; border-bottom:1px solid #eee;}
.main-partners .contain {display:flex; align-items:center; gap:var(--space-60);}
.main-partners .head-row {display:flex; flex-direction:column; align-items:flex-start; gap:25px; flex-shrink:0;}
.main-partners .tit {font-size:var(--font-size-24); font-weight:600; line-height:1.2em; letter-spacing:-.03em; color:#121212;}
.main-partners .controls {display:flex; gap:5px;}
.main-partners .controls .slide-btn {display:flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:0; background: #EEE; cursor:pointer;}
.main-partners .controls .slide-btn svg {display:block;}
.main-partners .partners-swiper {flex:1; min-width:0; overflow:hidden;}
.main-partners .swiper-slide {width:clamp(140px, calc(200 / var(--inner) * 100vw), 200px);}
.main-partners .logo {aspect-ratio:200/60;}
.main-partners .logo img {width:100%; height:100%; object-fit:contain;}


/* sub */
.sub-visual {position:relative; display:flex; flex-direction:column; background:#000; height:clamp(240px, calc(400 / var(--inner) * 100vw), 400px); overflow:hidden; color:#fff; text-align:center;}
.sub-visual .bg {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:1.5s linear; transform:scale(1.1); opacity:0;}
.sub-visual .title {position:relative; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center;}
.sub-visual .title .contain {width:100%;}
.sub-visual .title h2 {font-size:clamp(28px, calc(56 / var(--inner) * 100vw), 56px); line-height:1.3em; color:#fff;}
.sub-visual.loaded .bg {transform:scale(1); opacity:1;}

.path-wrap {margin-bottom:var(--space-60);}
.path-wrap .wrap {max-width:1400px; margin:0 auto;}
.path-wrap .inner {display:flex; align-items:center;}
.path-wrap .home {display:flex; align-items:center; height:100%; gap:15px; padding-right:15px; flex-shrink:0;}
.path-wrap .home a {display:block; width:24px; height:24px; background:url('/images/common/icon-home.svg') 50% 50%/contain no-repeat; text-indent:-9999em; overflow:hidden;}
.path-wrap .part {position:relative; display:flex; align-items:center; flex:1; max-width:clamp(240px, calc(294 / var(--inner) * 100vw), 294px);}
.path-wrap .part > a {display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; width:100%;  min-height:clamp(48px, calc(80 / var(--inner) * 100vw), 80px); color:#121212; font-size:var(--font-size-16); font-weight:600; line-height:1.2em; letter-spacing:-.03em; text-decoration:none;}
.path-wrap .part > a:after {content:""; display:block; width:20px; height:20px; background:url('/images/common/path-down.svg') 50% 50%/contain no-repeat;}
.path-wrap .part > ul {display:none; position:absolute; top:95%; left:0; z-index:10; width:100%; padding:8px 0; border:1px solid #ddd; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.path-wrap .part > ul li a {display:block; padding:10px 16px; color:#505050; font-size:var(--font-size-16); line-height:1.4em; text-decoration:none;}
.path-wrap .part > ul li.active a,
.path-wrap .part > ul li a:hover {color:var(--color-primary);}
.path-wrap .part:before {content:""; display:block; width:1px; height:18px; background:#ddd;}

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

.sub-title {margin-bottom:var(--space-60); text-align:center;}
.sub-title h2 {font-size:clamp(28px, calc(40 / var(--inner) * 100vw), 40px); font-weight:700; line-height:1.2em; letter-spacing:-.03em; color:#121212;}
.sub-title h2:after {content:""; display:block; width:40px; height:2px; margin:var(--space-20) auto 0; background:var(--color-primary);}
.sub-title p {margin-top:var(--space-30); font-size:var(--font-size-18); font-weight:400; line-height:1.2em; letter-spacing:-.03em; color:#505050;}
.sub-title.search-title {margin:0; padding:var(--space-120) 0 var(--space-100);}
.sub-title.search-title h2:after{display:none;}
@media (max-width: 640px) {
    .sub-title.search-title {padding:30px 0;}
}
.real-cont {min-height:300px; padding-bottom:var(--space-150);}


/* footer */
#footer {position:relative; padding:0 0 var(--space-60); background:#02101c; color:#fff; font-size:var(--font-size-14); line-height:1.5em; letter-spacing:-.03em;}
#footer a {color:inherit; text-decoration:none;}
#footer a:hover {text-decoration:underline;}

.foot-nav {border-bottom:1px solid rgba(255,255,255,0.2);}
.foot-nav .contain {display:flex; align-items:center; justify-content:space-between; gap:var(--space-30); min-height:80px;}
.foot-menu ul {display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-30);}
.foot-menu a {color:#fff; font-size:var(--font-size-14); font-weight:400; line-height:1em; letter-spacing:-.05em; opacity:.5; white-space:nowrap;}
.foot-menu a:hover {opacity:1; text-decoration:underline;}
.foot-links {display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-30);}
.foot-links a {color:#fff; font-size:var(--font-size-14); font-weight:700; line-height:1em; letter-spacing:-.03em; white-space:nowrap;}
.foot-links .pop_email {font-weight:400; opacity:.5;}

.foot-body {padding-top:var(--space-40);}
.foot-body .contain {display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-40);}
.foot-info {display:flex; flex-direction:column; gap:var(--space-30); flex:1; min-width:0; max-width:597px;}
.foot-info .office-block {display:flex; flex-direction:column; gap:var(--space-15);}
.foot-info .office-tit {color:#fff; font-size:var(--font-size-16); font-weight:700; line-height:1em; letter-spacing:-.03em;}
.foot-info .office-row {display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-8) var(--space-15); color:rgba(255,255,255,0.5); font-size:var(--font-size-14); font-weight:400; line-height:1.2em; letter-spacing:-.03em;}
.foot-info .office-row .item {white-space:nowrap;}

.foot-side {display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-40); flex-shrink:0;}
.foot-logo img {display:block; height:28px; width:auto;}
.foot-sns {display:flex; align-items:center; gap:10px;}
.foot-sns a {display:block; flex-shrink:0; line-height:0;}
.foot-sns img {display:block; width:40px; height:40px;}
.foot-copyright {color:#fff; font-size:var(--font-size-12); font-weight:400; line-height:1em; letter-spacing:-.03em; opacity:.5; text-align:right; white-space:nowrap;}

.floating-menu {position:fixed; top:50%; right:var(--space-container); z-index:89; transform:translateY(-50%); display:flex; flex-direction:column; align-items:flex-end; gap:10px;}
.floating-menu ul {display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none;}
.floating-menu .link-item {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:80px; height:80px; color:#fff; font-size:13px; font-weight:500; line-height:1em; letter-spacing:-.05em; text-align:center; text-decoration:none;}
.floating-menu .link-item .ico {display:flex; align-items:center; justify-content:center; width:24px; height:24px;}
.floating-menu .link-item .ico img {display:block; width:100%; height:auto;}
.floating-menu .link-item.type-tel {background:var(--color-primary);}
.floating-menu .link-item.type-shop {background:#008fc8;}
.floating-menu .link-item.type-store {background:#3bae37;}
.floating-menu .scroll-top {display:flex; align-items:center; justify-content:center; width:56px; height:56px; padding:12px; border:2px solid #ddd; border-radius:28px; background:#fff; opacity:1; visibility:visible;}
.floating-menu .scroll-top img {display:block; width:32px; height:32px;}