@charset "utf-8";
.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:1460px; margin:0 auto; padding-left:var(--contain-padding); padding-right:var(--contain-padding);}

/* header */
#header {transition:all 0.2s ease-in-out; position:fixed; width:100%; z-index:102; top:0; left:0; right:0; background-color:#fff;}
#header .contain {height:var(--header-height); position:relative; display:flex; align-items:center; justify-content:space-between; gap:var(--space-20); max-width:100%; padding:0 var(--contain-paddingx2);}

.sitelogo .logo-light {display:none;}
.sitelogo img {height:clamp(30px, calc(55 / var(--inner) * 100vw), 55px); aspect-ratio:279/55;}

#gnb {position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:20; width:auto;}
#gnb > ul {display:flex !important; justify-content:center; align-items:center; gap:clamp(60px, calc(150 / var(--inner) * 100vw), 150px); height:var(--header-height);}
#gnb > ul > li {position:relative; z-index:1;}
#gnb > ul > li > a {padding:0; display:flex; align-items:center; height:var(--header-height); position:relative; font-size:var(--font-size-22); font-weight:600; letter-spacing:-.03em; line-height:1em; color:#121212; z-index:15; white-space:nowrap;}
#gnb > ul > li:hover > a {color:#121212 !important;}
#gnb > ul > li:after {content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:0; height:3px; background:#0f2d50; z-index:16; transition:width 0.2s ease;}

#gnb .submenu {display:none; position:absolute; left:50%; top:100%; transform:translateX(-50%); padding:30px 0 60px; z-index:12; box-sizing:border-box; min-width:100px;}
#gnb .submenu>ul>li {margin-bottom:var(--space-25);}
#gnb .submenu>ul>li:last-child {margin-bottom:0;}
#gnb .submenu>ul>li>a {display:block; padding:0; font-size:var(--font-size-18); font-weight:400; line-height:1em; letter-spacing:-.03em; color:#505050; white-space:nowrap; text-decoration:none;}
#gnb .submenu>ul>li>a:hover,
#gnb .submenu>ul>li.active>a {color:#121212; text-decoration:underline; text-underline-offset:4px;}

.submenu-bg {display:none; position:absolute; top:var(--header-height); width:100%; left:0; height:0; background:#fff; border-bottom:1px solid #ddd; border-radius:0; z-index:10; overflow:hidden;}

.btn-store {width:160px; height:46px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid rgba(255,255,255,0.3); border-radius:99px; background:rgba(255,255,255,0.05);}
.btn-store img {height:16px; width:auto;}
.btn-store .store-dark {display:none;}

/* for mobile */
.btn-m-menu {position:relative; width:30px; height:30px; text-align:center; text-indent:-9999em; z-index:50; display:none; flex-shrink:0;}
.btn-m-menu div {position:relative; width:100%; height:100%;}
.btn-m-menu div span {position:absolute; right:0; width:20px; height:2px; background:var(--color-bk); border-radius:2px; transition:all 0.3s;}
.btn-m-menu div span:nth-child(1) {top:6px;}
.btn-m-menu div span:nth-child(2) {top:14px;}
.btn-m-menu div span:nth-child(3) {top:22px;}

.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:10px 18px; display:block; color:#333; font-size:var(--font-size-17); font-weight:500; 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;}
.mobile-navigation .nav-menu>ul>li.active {background:#f4f4f4}
.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>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 #header {background-color:#fff !important;}
html.menu-opened #header::after {position:absolute; content:''; bottom:0; left:0; right:0; height:1px; background-color:#ddd; display:block !important;}
html.menu-opened .sitelogo .logo-dark {display:block !important;}
html.menu-opened .sitelogo .logo-light {display:none !important;}
html.menu-opened #header:after {position:absolute; content:''; bottom:0; left:0; right:0; height:1px; background-color:#ddd;}
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 div span {background-color:var(--color-bk) !important;}
html.menu-opened .btn-m-menu div span:nth-child(1) {top:14px; transform:rotate(45deg);}
html.menu-opened .btn-m-menu div span:nth-child(2) {opacity:0;}
html.menu-opened .btn-m-menu div span:nth-child(3) {top:14px; transform:rotate(-45deg);}

html:not(.header-fixed) #header {background:rgba(0,0,0,0.2);}
html:not(.header-fixed):not(.header-hover) #header:after {display:none;}
html:not(.header-fixed) #gnb > ul > li > a {color:#fff;}
html:not(.header-fixed) #gnb > ul > li:hover > a {color:#fff !important;}
html:not(.header-fixed) .btn-m-menu div span {background:#fff;}
html:not(.header-fixed) .sitelogo .logo-dark {display:none;}
html:not(.header-fixed) .sitelogo .logo-light {display:block;}

html.header-hover #gnb > ul > li.active:after {width:90px;}
html.header-hover #header:after {position:absolute; content:''; bottom:0; left:0; right:0; height:1px; background-color:#ddd;}
html.header-hover #header {background-color:#fff;}
html.header-hover #gnb > ul > li > a {color:#121212;}
html.header-hover #gnb > ul > li:hover > a {color:#121212 !important;}
html.header-hover .sitelogo .logo-dark {display:block;}
html.header-hover .sitelogo .logo-light {display:none;}
html.header-hover .btn-m-menu div span {background:var(--color-bk);}
html.header-hover .btn-store {border-color:#7346f3; background:#fff;}
html.header-hover .btn-store .store-light {display:none;}
html.header-hover .btn-store .store-dark {display:block;}

html.header-fixed #gnb > ul > li.active:after {width:90px;}
html.header-fixed #header:after {position:absolute; content:''; bottom:0; left:0; right:0; height:1px; background-color:#ddd;}
html.header-fixed #gnb > ul > li > a {color:#121212;}
html.header-fixed .sitelogo .logo-dark {display:block;}
html.header-fixed .sitelogo .logo-light {display:none;}
html.header-fixed .btn-store {border-color:#7346f3; background:#fff;}
html.header-fixed .btn-store .store-light {display:none;}
html.header-fixed .btn-store .store-dark {display:block;}

/* main */
.font-play {font-family:'Play', sans-serif;}
.font-raleway {font-family:'Raleway', sans-serif;}

.main-visual, .main-visual .item {height:100dvh; position:relative; overflow:hidden; background:#000;}
.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 .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:1460px; 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;}

.controls-wrap {position:absolute; bottom:var(--space-100); left:50%; display:flex; align-items:center; gap:var(--space-20); max-width:1460px; 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:5px;}
.main-visual .dot-item {width:32px; height:32px; padding:0; border:0; background:transparent url("/images/main/icon-mv-dot.svg") no-repeat 50% 50%/contain; cursor:pointer; font-size:0; line-height:0;}
.main-visual .dot-item.active {background-image:url("/images/main/icon-mv-dot-active.svg");}

.main-visual .mv-scroll {position:absolute; right:var(--space-60); bottom:var(--space-100); display:flex; flex-direction:column; align-items:center; gap:20px; z-index:30;}
.main-visual .mv-scroll-icon {width:10px; height:40px;}
.main-visual .mv-scroll-icon img {display:block; width:100%; height:100%;}
.main-visual .mv-scroll-txt {margin:0; font-size:var(--font-size-14); font-weight:600; line-height:1; letter-spacing:-.03em; color:#fff; white-space:nowrap; writing-mode:vertical-rl; transform:rotate(360deg);}

@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-sec01 {padding:clamp(80px, calc(150 / var(--inner) * 100vw), 150px) 0;}
.main-sec01-head {display:flex; align-items:center; margin-bottom:clamp(50px, calc(100 / var(--inner) * 100vw), 100px);}
.main-sec01-logo {flex-shrink:0;}
.main-sec01-logo img {height:clamp(40px, calc(55 / var(--inner) * 100vw), 55px); width:auto;}
.main-sec01-tit {margin:0; font-size:var(--font-size-48); font-weight:700; line-height:1.33em; letter-spacing:-.03em; color:#121212;}
.main-value-list {display:flex; flex-direction:column; gap:var(--space-60);}
.main-value-item {display:flex; align-items:center; gap:clamp(40px, calc(80 / var(--inner) * 100vw), 80px);}
.main-value-item--reverse {flex-direction:row-reverse;}
.main-value-img {border-radius:16px; overflow:hidden;}
.main-value-txt {flex:1; min-width:0;}
.main-value-tit {margin:0 0 var(--space-30); font-size:clamp(28px, calc(40 / var(--inner) * 100vw), 40px); font-weight:600; line-height:1em; letter-spacing:-.03em; color:var(--color-main);}
.main-value-tit .accent {color:var(--color-accent);}
.main-value-desc {font-size:var(--font-size-18); line-height:1.67em; letter-spacing:-.03em; color:#505050;}

.main-sec02 {padding:clamp(80px, calc(150 / var(--inner) * 100vw), 150px) 0; background:#f8f9fa;}
.main-sec-en {font-family:'Raleway', sans-serif; margin:0 0 var(--space-20); font-size:var(--font-size-24); font-weight:700; line-height:1em; letter-spacing:-.03em; color:var(--color-main); text-align:center;}
.main-sec-tit {margin:0; font-size:var(--font-size-48); font-weight:700; line-height:1em; letter-spacing:-.03em; color:#121212; text-align:center;}
.main-sec-tit strong {font-weight:700; color:var(--color-main);}
.main-sec02-head {margin-bottom:var(--space-60);}
.main-product {display:flex; align-items:center; mix-blend-mode:multiply; gap:clamp(40px, calc(100 / var(--inner) * 100vw), 100px);}
.main-product-visual {position:relative; flex-shrink:0; width:clamp(280px, calc(600 / var(--inner) * 100vw), 600px); height:clamp(280px, calc(450 / var(--inner) * 100vw), 450px);}
.main-product-img {position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .3s;}
.main-product-img.is-active {opacity:1;}
.main-product-body {flex:1; min-width:0;}
.main-product-tabs {display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--space-60);}
.main-product-tabs button {display:flex; align-items:center; justify-content:center; min-width:130px; height:50px; padding:0 20px; border:0; border-radius:50px; background:#eee; font-size:var(--font-size-14); font-weight:600; line-height:1em; letter-spacing:-.03em; color:#505050; cursor:pointer;}
.main-product-tabs button.is-active {background:var(--color-main); color:#fff;}
.main-product-panel {display:none;}
.main-product-panel.is-active {display:block;}
.main-product-tit {margin:0 0 var(--space-30); font-size:clamp(28px, calc(40 / var(--inner) * 100vw), 40px); font-weight:700; line-height:1em; letter-spacing:-.03em; color:#121212;}
.main-product-desc {margin-bottom:var(--space-40); font-size:var(--font-size-18); line-height:1.67em; letter-spacing:-.03em; color:#505050;}
.main-product-desc p {margin:0;}
.main-btn-line {display:inline-flex; align-items:center; gap:var(--space-20); height:52px; padding:0 30px; border:1px solid #505050; border-radius:99px; font-size:var(--font-size-16); font-weight:600; line-height:1em; letter-spacing:-.03em; color:#505050; text-decoration:none;}
.main-btn-arrow {display:flex; align-items:center; justify-content:center;}
.main-btn-arrow img {width:10px; height:8px;}

.main-sec03 {padding:clamp(80px, calc(150 / var(--inner) * 100vw), 150px) 0;}
.main-sec03-head {display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-30); margin-bottom:clamp(40px, calc(60 / var(--inner) * 100vw), 60px);}
.main-sec03-tit-wrap .main-sec-en {text-align:left;}
.main-sec03-tit-wrap .main-sec-tit {text-align:left;}
.main-partners {display:flex; flex-direction:column; gap:var(--space-20);}
.main-partners-marquee {overflow:hidden; width:100%;}
.main-partners-marquee--offset {padding-left:clamp(80px, calc(184 / var(--inner) * 100vw), 184px);}
.main-partners-track {display:flex; width:max-content; animation:main-partners-marquee 60s linear infinite; will-change:transform;}
.main-partners-track--reverse {animation-direction:reverse;}
.main-partners-row {display:flex; gap:var(--space-20); flex-shrink:0;}
@keyframes main-partners-marquee {0% {transform:translateX(0);} 100% {transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce) {.main-partners-track {animation:none;}}

.btn-top {position:fixed; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:#505050; border-radius:8px; right:clamp(16px, calc(50 / var(--inner) * 100vw), 50px); bottom:clamp(16px, calc(50 / var(--inner) * 100vw), 50px); width:clamp(44px, calc(56 / var(--inner) * 100vw), 56px); height:clamp(44px, calc(56 / var(--inner) * 100vw), 56px); z-index:90; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; text-decoration:none;}
.btn-top-arrow {display:block; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid #fff;}
.btn-top-txt {font-size:12px; font-weight:700; line-height:1em; letter-spacing:-.03em; color:#fff;}
html.scrolled .btn-top {opacity:1; visibility:visible;}

.lnb-wrap-single {margin-bottom:var(--space-100);}
.lnb-wrap {display:flex; flex-direction:column; align-items:stretch;}
.sub-visual {position:relative; width:100%; color:#fff;}
.sub-visual--full {max-width:none; height:clamp(250px, calc(600 / var(--inner) * 100vw), 600px); border-radius:0;}
.lnb-wrap .sub-visual-bg {position:absolute; inset:0;}
.lnb-wrap .sub-visual-bg img {width:100%; height:100%; object-fit:cover;}
.lnb-wrap .sub-visual-dim {position:absolute; inset:0; background:rgba(0,0,0,0.5);}
.lnb-wrap .sub-visual-inner {position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-20); padding:calc(var(--header-height) + var(--space-50)) var(--contain-padding) var(--space-40);}
.lnb-wrap .page-depth ol {display:flex; align-items:center; justify-content:center; gap:12px;}
.lnb-wrap .page-depth .home a {display:flex;}
.lnb-wrap .page-depth .home img {height:clamp(13px, calc(16 / var(--inner) * 100vw), 16px);}
.lnb-wrap .page-depth .sep {display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.lnb-wrap .page-depth .sep img {height:clamp(8px, calc(10 / var(--inner) * 100vw), 10px);}
.lnb-wrap .page-depth .depth {font-size:var(--font-size-18); font-weight:600; line-height:1em; letter-spacing:-.03em; white-space:nowrap;}
.lnb-wrap .sub-visual-tit {margin:0; font-size:clamp(28px, calc(72 / var(--inner) * 100vw), 72px); font-weight:700; line-height:1em; letter-spacing:-.03em; text-align:center;}
.lnb-tabs {background:#f4f4f4; border-bottom:1px solid #ddd;}
.lnb-tabs .contain {max-width:1460px;}
.lnb-tabs ul {display:flex; align-items:center; justify-content:center; gap:clamp(40px, calc(100 / var(--inner) * 100vw), 100px); height:clamp(60px, calc(80 / var(--inner) * 100vw), 80px);}
.lnb-tabs li {position:relative; height:100%;}
.lnb-tabs li a {display:flex; align-items:center; height:100%; font-size:var(--font-size-20); font-weight:400; line-height:1em; letter-spacing:-.03em; color:#505050; white-space:nowrap;}
.lnb-tabs li.active a {font-weight:600; color:var(--color-main);}
.lnb-tabs li.active:after {content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--color-main);}
.lnb-tabs--sol ul {gap:clamp(24px, calc(60 / var(--inner) * 100vw), 60px);}
.lnb-tabs--prod ul {gap:clamp(20px, calc(48 / var(--inner) * 100vw), 48px);}
.lnb-wrap .lnb {background:#f8f8f8; border-radius:56px; padding:10px; height:clamp(70px, calc(80 / var(--inner) * 100vw), 80px); box-sizing:border-box;}
.lnb-wrap .lnb .swiper {height:100%;}
.lnb-wrap .lnb .swiper-wrapper {display:flex; height:100%;}
.lnb-wrap .lnb .swiper-slide {width:auto; flex:1; height:100%;}
.lnb-wrap .lnb .swiper-slide a {display:flex; align-items:center; justify-content:center; height:100%; padding:0 var(--space-25); border-radius:56px; font-size:var(--font-size-18); font-weight:600; line-height:1.5em; letter-spacing:-.03em; color:#454545; white-space:nowrap;}
.lnb-wrap .lnb .swiper-slide.active a {color:#fff; background:linear-gradient(90deg, #0049cf 0%, #3fccef 100%);}

.sub-title {padding:var(--space-100) 0; text-align:center;}
.sub-title .tit,
.sub-title2 .tit {font-size:var(--font-size-44); letter-spacing:-.03em; line-height:1.4em; color:var(--color-bk);}
.sub-title2 {padding:var(--space-100) 0 var(--space-100); text-align:center;}

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

.real-cont {padding-top:var(--space-120); padding-bottom:var(--space-120);}

/* footer */
#footer {position:relative; padding:var(--space-80) 0 var(--space-100); overflow:hidden;}
#footer .foot-bg {position:absolute; inset:0;}
#footer .foot-bg img {width:100%; height:100%; object-fit:cover;}
#footer .contain {position:relative; z-index:1; max-width:none; padding-left:var(--contain-paddingx3); padding-right:var(--contain-paddingx3);}
.foot-inner {display:flex; flex-direction:column; align-items:center; gap:var(--space-40);}
.foot-logo img {height:clamp(40px, calc(55 / var(--inner) * 100vw), 55px);}
.foot-info {display:flex; flex-direction:column; gap:var(--space-15); width:100%;}
.foot-addr, .foot-contact {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(12px, calc(30 / var(--inner) * 100vw), 30px); margin:0; font-size:var(--font-size-16); line-height:1em; letter-spacing:-.03em; color:rgba(255,255,255,0.7);}
.foot-links {display:flex; align-items:center; justify-content:center; gap:var(--space-20);}
.foot-links a {font-size:var(--font-size-14); line-height:1em; letter-spacing:-.03em; color:#fff;}
.foot-links .pop_privacy {font-weight:700;}
.foot-copy {margin:0; font-size:12px; line-height:1em; letter-spacing:-.03em; color:rgba(255,255,255,0.5);}