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

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.contain {width:100%; max-width:1460px; margin:0 auto; padding-left:var(--contain-padding); padding-right:var(--contain-padding);}
.contain:after {content:""; display:block; clear:both;}

/* header */
#header {transition:all 0.2s ease-in-out; position:fixed; width:100%; z-index:102; top:0; left:0; right:0; font-family:'Montserrat', sans-serif;}
#header:after {content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background-color:#ddd; opacity:0;}
#header .contain {padding:0 var(--space-100); position:relative; display:flex; align-items:center; max-width:100%; height:var(--header-height);}

.sitelogo {height:clamp(28px, calc(40 / var(--inner) * 100vw), 40px); aspect-ratio:207/40;}
.sitelogo a {display:block; height:100%; width:100%; background:url('../images/common/logo-w.png') 0 50% / contain no-repeat;}

#gnb {text-align:center; flex:1 1 auto; min-width:0; width:1%;}
#gnb>ul {display:flex; justify-content:center; gap:var(--gnb-gutter);} 
#gnb>ul>li {position:relative;}
#gnb>ul>li>a {position:relative; display:flex; align-items:center; flex-direction:column; justify-content:center; height:100%; color:#fff; font-size:var(--font-size-18); font-weight:600; letter-spacing:-.03em; line-height:1.3em;}
#gnb>ul>li:hover > a {color:var(--color-primary) !important;}

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

#gnb .submenu {left:var(--gnb-gutter); z-index:10; display:none; position:absolute;}
#gnb .submenu>ul {display:flex;}
#gnb .submenu>ul>li>a {display:block; padding:var(--space-35) var(--space-120) var(--space-35) 0; color:#222; font-size:var(--font-size-18); line-height:1.3em; white-space:nowrap;}
#gnb .submenu>ul>li>a:hover {font-weight:600; color:var(--color-secondary); text-underline-offset:3px;}

.submenu-bg {display:none; position:absolute; width:100%; left:0; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}

.language {min-width:72px; z-index:10; position:relative; display:inline-block;}
.language .toggle-button {width:100%; justify-content:center; display:flex; align-items:center; border:0; gap:10px; background:none; color:#fff; text-align:left;}
.language .toggle-button .ico {width:26px; display:flex; align-items:center;}
.language .toggle-button .chevron {width:9px; margin-top:-.1em;}
.language .toggle-button svg {display:block; width:100%; height:auto;}
.language .toggle-button path {fill:#fff;}
.language .toggle-layer {font-size:var(--font-size-14); margin-top:7px; display:none; position:absolute; left:0; width:100%; padding:10px; background:#003976; border-radius:8px; text-align:center;}
.language .toggle-layer ul {display:grid; gap:4px;}
.language .toggle-layer a {display:block; font-weight:500; line-height:1.15em; color:#fff; opacity:0.4;}
.language .toggle-layer a:hover {opacity:1;}
.language.active .toggle-button .chevron {transform:scaleY(-1);}

#header:hover {background-color:#fff;}
#header:hover .sitelogo a {background-image:url('../images/common/logo.png');}
#header:hover #gnb>ul>li>a {color:var(--color-bk);}
#header:hover .language .toggle-button {color:var(--color-bk);}
#header:hover .language .toggle-button path {fill:var(--color-bk);}
#header:hover .btn-m-menu span,
#header:hover .btn-m-menu span:before,
#header:hover .btn-m-menu span:after {background:var(--color-bk);}

html.header-hover #header {background:#fff; color:var(--color-bk);}
html.header-hover #header:after {opacity:0.5;}
html.header-hover #gnb>ul>li>a {color:var(--color-bk);}
html.header-hover .sitelogo a {background-image:url('/images/common/logo.png');}
html.header-hover .language .toggle-button {color:var(--color-bk);}
html.header-hover .language .toggle-button path {fill:var(--color-bk);}

html.loaded,
html.header-fixed {transition:all 0.2s ease-in-out;}
html.header-fixed #header {background:#fff; color:var(--color-bk);}
html.header-fixed #header:after {opacity:0.5;}
html.header-fixed #header .contain {height:80px; transition:all 0.2s ease-in-out;}
html.header-fixed #gnb>ul>li>a {color:var(--color-bk);}
html.header-fixed .sitelogo a {background-image:url('/images/common/logo.png');}
html.header-fixed .language .toggle-button {color:var(--color-bk);}
html.header-fixed .language .toggle-button path {fill:var(--color-bk);}
html.header-fixed .btn-m-menu span,
html.header-fixed .btn-m-menu span:before,
html.header-fixed .btn-m-menu span:after {background:var(--color-bk);}

#header.header-on {background:#fff; color:var(--color-bk);}
#header.header-on:after {background-color:#ddd;}
#header.header-on #gnb>ul>li>a {color:var(--color-bk);}
#header.header-on .sitelogo a {background-image:url('/images/common/logo.png');}
#header.header-on .btn-m-menu span,
#header.header-on .btn-m-menu span:before,
#header.header-on .btn-m-menu span:after {background:var(--color-bk);}
#header.header-on .language .toggle-button {color:#242424;}
#header.header-on .language .toggle-button path {fill:#242424;}

/* for mobile */
.btn-m-menu {position:relative;width:30px;height:30px;text-align:center;text-indent:-9999em;z-index:50; display:none;}
.btn-m-menu span {position:absolute; right:0; top:50%; width:20px; height:3px; background:#fff; border-radius:2px;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; right:0; width:27px; height:3px; background:#fff; transition-duration:0.3s, 0.3s; transition-delay:0.3s, 0s; border-radius:2px;}
.btn-m-menu span:before {top:-9px; transition-property:top, transform;}
.btn-m-menu span:after {bottom:-9px; transition-property:bottom, transform;}

.mobile-navigation {border-top:1px solid #ddd; 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:17px; font-weight:500; line-height:1.3em;}
.mobile-navigation .nav-menu>ul>li>a:after {display:none; 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 .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}
html.menu-opened .btn-m-menu span {background:none !important;}
html.menu-opened .btn-m-menu span:before,
html.menu-opened .btn-m-menu span:after {transition-delay:0s, 0.3s; background-color:var(--color-bk);}
html.menu-opened .btn-m-menu span:before {top:0; transform:rotate(45deg);}
html.menu-opened .btn-m-menu span:after {bottom:0; transform:rotate(-45deg);}
html.menu-opened #header {background:#fff;}
html.menu-opened #header:after {display:none;}
html.menu-opened .sitelogo a {background-image:url('/images/common/logo.png');}
html.menu-opened .btn-m-menu span,
html.menu-opened .btn-m-menu span:before,
html.menu-opened .btn-m-menu span:after {background:var(--color-bk);}
html.menu-opened .language .toggle-button {color:var(--color-bk);}
html.menu-opened .language .toggle-button path {fill:var(--color-bk);}

/* main */
.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 .item video {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.main-visual .active .item img {transform:scale(1);}
.main-visual .caption {z-index:1000; color:#fff; position:absolute; top:50%; text-align:center; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); padding:0 var(--contain-padding); width:100%; max-width:1500px; z-index:30;}
.main-visual .caption p {transition:.8s; opacity:0; transform:translateX(20px);}
.main-visual .caption .t1 {font-family:"Barlow Condensed", sans-serif; font-size:clamp(25px, calc(96 / var(--inner) * 100vw), 96px); font-weight:700; line-height:1.08em; letter-spacing:-.03em; color:#fff;}
.main-visual .caption .t2 {margin-top:8px; font-family:"Barlow Condensed", sans-serif; font-size:clamp(20px, calc(72 / var(--inner) * 100vw), 72px); font-weight:700; line-height:1em; letter-spacing:-.03em; color:#C9CACA;}
.main-visual .caption .t3 {margin-top:var(--space-30); font-size:var(--font-size-18); line-height:1.33em; letter-spacing:-.03em; color:#fff;}
.main-visual .active .caption p {opacity:1; transform:translateX(0);}
.main-visual .active .caption .t1 {transition-delay:0.4s;}
.main-visual .active .caption .t2 {transition-delay:0.6s;}
.main-visual .active .caption .t3 {transition-delay:0.8s;}

.main-visual .slick-dots {position:absolute; bottom:var(--space-30); left:50%; transform:translateX(-50%); display:flex; gap:var(--space-20); align-items:center;}
.main-visual .slick-dots li button {width:30px; height:4px; display:block; background:#000; opacity:.1; border:0; transition:.2s; overflow:hidden; font-size:0; line-height:0; text-indent:-9999em;}
.main-visual .slick-dots li.slick-active button {width:64px; opacity:.2;}

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

.visual-scroll {position:absolute; bottom:var(--space-60); left:50%; transform:translateX(-50%); z-index:10; line-height:0; width:100%; text-align:center;}
.visual-scroll .img {animation:pulse 2s infinite;}
@keyframes pulse {
  0% {
    -webkit-transform:translate(0, 0);
	transform:translate(0, 0);}
  50% {
    -webkit-transform:translate(0, 10px);
	transform:translate(0, 10px);}
  100% {
    -webkit-transform:translate(0, 0);
	transform:translate(0, 0);}
}

.m-sec {padding:var(--space-150) 0; position:relative; overflow:hidden; color:#fff; line-height:1.75; background-position:50% 50%; background-repeat:no-repeat; -webkit-background-size:cover; background-size:cover;}
.main-sec2 {background-image:url('/images/main/sec2bg.jpg');}
.main-sec2 .sec1 {display:flex; flex-direction:column; align-items:center; gap:var(--space-60); text-align:center;}
.main-sec2 .cont-tit {display:flex; flex-direction:column; align-items:center; gap:var(--space-20); width:100%;}
.main-sec2 .cont-tit .tit.en {font-family:"Montserrat", sans-serif; font-size:var(--font-size-60); font-weight:700; line-height:1.13; color:#fff; letter-spacing:-0.03em;}
.main-sec2 .cont-tit .lead {font-size:var(--font-size-28); font-weight:500; line-height:1.28; color:#fff; letter-spacing:-0.02em;}
.main-sec2 .cont-tit .lead strong {font-weight:700;}
.main-sec2 .cont-tit .desc {line-height:1.75; color:rgba(255,255,255,0.8); letter-spacing:-0.02em;}
.main-sec2 .cont {width:100%; max-width:994px;}
.main-sec2 .pill {padding:30px; position:relative; border:2px solid var(--color-tertiary); border-radius:800px; box-sizing:border-box;}
.main-sec2 .pill .list {display:flex;}
.main-sec2 .pill .item {width:100%; max-width:338px; aspect-ratio:1 / 1; box-sizing:border-box; border-radius:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; font-size:var(--font-size-28); font-weight:700; line-height:1.14; color:#fff; letter-spacing:-0.02em; text-align:center; animation:company-pill-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;}
.main-sec2 .pill .item:nth-child(1) {background:rgba(144,39,142,0.4); animation-delay:0.5s;}
.main-sec2 .pill .item:nth-child(2) {margin:0 -42px; background:rgba(144,39,142,0.6); animation-delay:1s;}
.main-sec2 .pill .item:nth-child(3) {background:var(--color-tertiary); animation-delay:1.5s;}

@keyframes company-pill-in {
	from {opacity:0; transform:scale(0) translateX(-100px);}
	to {opacity:1; transform:scale(1) translateX(0);}
}

.main-logos {padding:10px; overflow:hidden;}
.main-logos .swiper {overflow:visible;}
.main-logos .swiper-wrapper {transition-timing-function:linear !important;}
.main-logos .swiper-slide {width:auto; padding:0 5px;}
.main-logos .swiper-slide .thumb {min-width:280px; position:relative; padding-bottom:35.715%; overflow:hidden;}
.main-logos .swiper-slide img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%, -50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}

.main-sec3 {background-image:url('/images/main/sec3bg.jpg');}
.main-sec3 .cols {display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--space-60);}
.main-sec3 .mapcol {flex:1 1 480px; min-width:0;}
.main-sec3 .cardcol {flex:0 1 644px; max-width:100%; width:100%;}
.main-sec3 .sec1 {display:flex; flex-direction:column;}
.main-sec3 .cont-tit {display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-20); text-align:left; max-width:655px;}
.main-sec3 .cont-tit .tit.en {font-family:"Montserrat", sans-serif; font-size:var(--font-size-60); font-weight:700; line-height:1.13; color:#fff; letter-spacing:-0.03em;}
.main-sec3 .cont-tit .lead {font-size:var(--font-size-28); font-weight:500; line-height:1.28; color:#fff; letter-spacing:-0.02em;}
.main-sec3 .cont-tit .desc {font-size:var(--font-size-16); line-height:1.75; color:rgba(255,255,255,0.8); letter-spacing:-0.02em;}
.main-sec3 .mapbox {position:relative; width:100%; max-width:815px; margin:0 auto; aspect-ratio:815 / 628;}
.main-sec3 .mapbox .img {margin:0;}
.main-sec3 .mapbox .img.base {position:absolute; inset:0; max-width:none;}
.main-sec3 .mapbox .img.base img {position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:50% 50%;}
.main-sec3 .mapbox .img.line {position:absolute; left:59%; top:44%; width:clamp(48px, calc(84 / var(--inner) * 100vw), 84px); transform:translate(-50%, -50%); aspect-ratio:84 / 186; pointer-events:none;}
.main-sec3 .mapbox .img.line img {display:block; width:100%; height:100%; object-fit:contain;}
.main-sec3 .spots {position:absolute; inset:0; padding:0; list-style:none; pointer-events:none;}
.main-sec3 .spots .item {position:absolute; transform:translate(-50%, -50%);}
.main-sec3 .spots .item.kr {left:63.4%; top:40.8%;}
.main-sec3 .spots .item.vn {left:53.1%; top:54.1%;}
.main-sec3 .spots .item.id {left:58.5%; top:70.5%;}
.main-sec3 .spot {display:flex; flex-direction:column; align-items:center; gap:var(--space-10); text-align:center;}
.main-sec3 .spot .marker {width:clamp(40px, calc(56 / var(--inner) * 100vw), 56px); aspect-ratio:1;}
.main-sec3 .spot .marker img {display:block; width:100%; height:100%; object-fit:contain;}
.main-sec3 .spot .tit {font-size:var(--font-size-16); font-weight:700; line-height:1; color:#fff; letter-spacing:0.02em;}

.network-map-viewport {margin:-10px 0 0 -160px; position:relative; width:815px; border-radius:12px; overflow:hidden; aspect-ratio:815/628;}
.network-map-board {position:relative; width:100%; max-width:815px; aspect-ratio:815/628; flex-shrink:0;}
.network-map-raster {position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; z-index:1; pointer-events:none; opacity:1;}
.network-map-raster.is-fallback {display:none;}
.network-map-lines {position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:visible;}
.network-pin {position:absolute; left:0; top:0; z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px; width:auto; min-width:0; padding:0; border:0; background:none; cursor:unset; font:inherit; color:#fff; text-align:center; transform:translate(-50%,-50%);}
.network-pin:focus-visible {outline:2px solid #ad46ff; outline-offset:6px; border-radius:12px;}
.network-pin-mark{position:relative;width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.network-pin-mark::before{opacity: 0; content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,0,250,.3);animation:none}
.network-pin-mark::after{opacity: 0; content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,0,250,.3); animation:none}

.main-sec3 .cols:has(.cards .item[data-region="kr"]:hover) .network-pin[data-region="kr"] .network-pin-mark::before{animation:wave 3s infinite ease-out}
.main-sec3 .cols:has(.cards .item[data-region="kr"]:hover) .network-pin[data-region="kr"] .network-pin-mark::after{animation:wave 3s infinite ease-out;animation-delay:1.5s}
.main-sec3 .cols:has(.cards .item[data-region="vn"]:hover) .network-pin[data-region="vn"] .network-pin-mark::before{animation:wave 3s infinite ease-out}
.main-sec3 .cols:has(.cards .item[data-region="vn"]:hover) .network-pin[data-region="vn"] .network-pin-mark::after{animation:wave 3s infinite ease-out;animation-delay:1.5s}
.main-sec3 .cols:has(.cards .item[data-region="id"]:hover) .network-pin[data-region="id"] .network-pin-mark::before{animation:wave 3s infinite ease-out}
.main-sec3 .cols:has(.cards .item[data-region="id"]:hover) .network-pin[data-region="id"] .network-pin-mark::after{animation:wave 3s infinite ease-out;animation-delay:1.5s}

@keyframes wave{
	0%{transform:scale(.2); opacity:.8}
	70%{transform:scale(1.3); opacity:.8}
	100%{transform:scale(1.5); opacity:0}
}

.network-pin-dot {position:relative; z-index:1; width:10px; height:10px; border-radius:50%; background:#FF00FA;}
.network-pin-badge {min-width:70px; padding:4px 10px; border-radius:999px; font-size:18px; font-weight:600; line-height:16px; color:#fff; letter-spacing:0.02em;}
.network-pin[data-region="kr"] {left:69.57%; top:46.95%;}
.network-pin[data-region="vn"] {left:59.26%; top:60.42%;}
.network-pin[data-region="id"] {left:64.66%; top:76.83%;}

.main-sec3 .cards {display:flex; flex-direction:column; gap:var(--space-20);}
.main-sec3 .cards .item {border:2px solid rgba(255,255,255,0); position:relative; display:flex; flex-direction:column; cursor:pointer; gap:var(--space-15); padding:var(--space-30); box-sizing:border-box; border-radius:16px; overflow:hidden; background:linear-gradient(164.8deg, rgba(29, 41, 61, 0.8) 0%, rgba(15, 23, 43, 0.8) 100%);}
.main-sec3 .cards .item:before {border:2px solid rgba(173, 70, 255, 0.00); content:""; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background:rgba(173, 70, 255, 0.1); filter:blur(64px); border-radius:999px; pointer-events:none; z-index:0;}
.main-sec3 .cards .item:hover {border:2px solid #AD46FF;}

.main-sec3 .cards .item .meta,
.main-sec3 .cards .item .name,
.main-sec3 .cards .item .addr {position:relative; z-index:1;}
.main-sec3 .cards .item .meta {display:flex; align-items:center; gap:var(--space-15); min-height:28px;}
.main-sec3 .cards .item .meta .dot {flex-shrink:0; width:8px; height:8px; border-radius:50%; background:#ad46ff; opacity:0.83;}
.main-sec3 .cards .item .meta .txt {font-size:0; line-height:1;}
.main-sec3 .cards .item .meta .lbl {font-size:var(--font-size-16); font-weight:600; line-height:1.625; color:#e2e8f0; letter-spacing:-0.02em;}
.main-sec3 .cards .item .meta .eng {position: relative; font-size:var(--font-size-14); padding-left:20px; font-weight:400; line-height:1.625; color:#90a1b9; letter-spacing:-0.02em;}
.main-sec3 .cards .item .meta .eng:before {position: absolute; content: '•'; left:8px;}
.main-sec3 .cards .item .name {display:flex; align-items:center; gap:var(--space-15); min-height:36px;}
.main-sec3 .cards .item .name .tit {font-size:var(--font-size-20); font-weight:700; line-height:1.4; color:#fff; letter-spacing:-0.02em;}
.main-sec3 .cards .item .addr {display:flex; align-items:flex-start; gap:var(--space-15);}
.main-sec3 .cards .item .addr .ico.pin {position:relative; flex-shrink:0; width:16px; height:16px; margin:2px 0 0;}
.main-sec3 .cards .item .addr .txt {font-size:var(--font-size-14); line-height:1.62; color:rgba(255, 255, 255, 0.8); letter-spacing:-0.02em;}
.main-sec3 .cards .item .bar {position:absolute; width: 100%; left:0; bottom:0; height:4px; z-index:2; background:linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(173, 70, 255, 0.5) 50%, rgba(0, 0, 0, 0) 100%); transition:width 0.45s linear;}

.main-sec4 {background-image:url('/images/main/sec4bg.jpg');}
.main-sec4 .sec1 {display:flex; flex-direction:column; align-items:center; gap:var(--space-50);}
.main-sec4 .cont-tit {display:flex; flex-direction:column; align-items:center; gap:var(--space-20); text-align:center; width:100%;}
.main-sec4 .cont-tit .tit.en {font-family:"Montserrat", sans-serif; font-size:var(--font-size-60); font-weight:700; line-height:1.13; color:#fff; letter-spacing:-0.03em;}
.main-sec4 .cont-tit .lead {font-size:var(--font-size-28); font-weight:500; line-height:1.28; color:#fff; letter-spacing:-0.02em;}
.main-sec4 .cont-tit .lead strong {font-weight:700;}
.main-sec4 .cont-tit .desc {line-height:1.75; color:rgba(255, 255, 255, 0.8); letter-spacing:-0.02em;}
.main-sec4 .cont {width:100%;}
.main-sec4 .track {position:relative; padding-top:var(--space-80); --vline:0;}
.main-sec4 .track .start {position:absolute; left:50%; top:10px; z-index:3; width:40px; height:40px; margin-left:-20px; border-radius:20px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, #9440df 0%, #c27aff 100%); box-shadow:0 4px 24px rgba(173, 70, 255, 0.35);}
.main-sec4 .track .btn-arr {display:block; width:0; height:0; margin-top:4px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid #fff;}
.main-sec4 .track .vline {position:absolute; left:50%; top:48px; bottom:0; width:4px; margin-left:-2px; z-index:0; border-radius:60px; background:linear-gradient(180deg, #ad46ff 0%, rgba(173, 70, 255, 0.15) 55%, rgba(0, 0, 0, 0) 100%); clip-path:inset(0 0 calc((1 - var(--vline)) * 100%) 0 round 60px); transition:clip-path 0.15s ease-out;}
.main-sec4 .track .list {position:relative; z-index:1; display:flex; flex-direction:column; gap:var(--space-60);}
.main-sec4 .track .item {display:flex; align-items:flex-start; justify-content:center; gap:0 var(--space-10); width:100%; box-sizing:border-box;}
.main-sec4 .track .item.alt {flex-direction:row-reverse;}
.main-sec4 .track .col.year {flex:1 50%; padding-right:clamp(30px, calc( 105 / var(--inner) * 100vw ), 105px); min-width:0; max-width:50%; display:flex; align-items:flex-start; justify-content:flex-end; box-sizing:border-box;}
.main-sec4 .track .item.alt .col.year {justify-content:flex-start;}
.main-sec4 .track .col.year .num {font-size:var(--font-size-48); font-weight:700; line-height:1em; color:rgba(255, 255, 255, 0.4); letter-spacing:-0.02em;}
.main-sec4 .track .item.on .col.year .num {font-weight:800; color:#c27aff;}
.main-sec4 .track .col.axis {flex:0 0 40px; width:40px; display:flex; flex-direction:column; align-items:center; position:absolute; min-height:24px;}
.main-sec4 .track .col.axis .hub {flex-shrink:0; width:8px; height:8px; margin-top:11px; border-radius:50%; background:#ad46ff; box-shadow:0 0 0 6px #fff;}
.main-sec4 .track .col.axis .bridge {width:65px; height:1px; margin-top:15px; position:absolute; top:0; left:50%; margin-left:6px; display:block; transform-origin:left center; background:repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 6px, transparent 6px 12px); opacity:0.9;}
.main-sec4 .track .col.body {flex:1; box-sizing:border-box; padding-left:clamp(30px, calc( 105 / var(--inner) * 100vw ), 105px);}

.main-sec4 .track .pair {display:flex; flex-wrap:wrap; align-items:flex-start; gap:0 var(--space-10);}
.main-sec4 .track .pair .mon {flex-shrink:0; font-size:var(--font-size-18); font-weight:700; color:#c27aff;}
.main-sec4 .track .pair .txt {font-size:var(--font-size-18); font-weight:600; color:#fff; letter-spacing:-0.02em;}
.main-sec4 .track .pair .txt .note {font-size:var(--font-size-16); font-weight:400; color:#fff; letter-spacing:-0.02em;}
.main-sec4 .track .rows {display:grid; gap:10px;}
.main-sec4 .track .rows li {gap:10px; display:flex; flex-wrap:wrap;}
.main-sec4 .track .rows .mon {flex-shrink:0; width:28px; font-size:var(--font-size-18); font-weight:700; color:rgba(255, 255, 255, 0.6); text-align:right;}
.main-sec4 .track .rows .txt {flex:1; min-width:0; font-size:var(--font-size-18); font-weight:600; color:rgba(255, 255, 255, 0.4); letter-spacing:-0.02em;}
.main-sec4 .track .item.viz .col.year .num {color:#C27AFF; font-weight:700;}
.main-sec4 .track .item.viz .pair .mon {color:#C27AFF;}
.main-sec4 .track .rows li.viz .mon {color:#C27AFF;}
.main-sec4 .track .rows li.viz .txt {color:#fff;}
.main-sec4 .track .pair.end {align-items:center; gap:var(--space-10);}
.main-sec4 .track .pair.end .mon {line-height:48px; color:rgba(255, 255, 255, 0.6);}
.main-sec4 .track .pair.end .txt {line-height:48px; color:rgba(255, 255, 255, 0.4);}

.main-sec4 .track .item:nth-child(even) .col.axis .bridge {left:auto; right:50%;}
.main-sec4 .track .item:nth-child(even) .year {padding-left:clamp(30px, calc( 105 / var(--inner) * 100vw ), 105px); order:2; padding-right:0; justify-content:flex-start}
.main-sec4 .track .item:nth-child(even) .rows .mon {order:2;}
.main-sec4 .track .item:nth-child(even) .col.body {padding-right:clamp(30px, calc( 105 / var(--inner) * 100vw ), 105px); text-align:right; padding-left:0;}

.main-sec5 {background-image:url('/images/main/sec5bg.jpg');}
.main-sec5 .sec1 {display:flex; flex-direction:column; align-items:center; gap:var(--space-60);}
.main-sec5 .cont-tit {display:flex; flex-direction:column; align-items:center; gap:var(--space-20); text-align:center; width:100%;}
.main-sec5 .cont-tit .tit.en {font-family:"Montserrat", sans-serif; font-size:var(--font-size-60); font-weight:700; line-height:1.13; color:#fff; letter-spacing:-0.03em;}
.main-sec5 .cont-tit .lead {font-size:var(--font-size-28); font-weight:500; line-height:1.28; color:#fff; letter-spacing:-0.02em;}
.main-sec5 .cont-tit .desc {font-size:var(--font-size-16); line-height:1.75; color:rgba(255, 255, 255, 0.8); letter-spacing:-0.02em;}
.main-sec5 .cont {width:100%;}
.main-sec5 .pnl {display:flex; flex-direction:column; gap:var(--space-40); padding:var(--space-40) var(--space-60); border:2px solid rgba(255, 255, 255, 0.2); border-radius:40px; background:linear-gradient(120.1deg, rgba(255, 255, 255, 0.18) 1.2%, rgba(15, 23, 43, 0.24) 99.1%); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
.main-sec5 .row.two {grid-template-columns:repeat(2, 1fr); display:grid; gap:var(--space-50); width:100%;}
.main-sec5 .row.two .cell {padding:15px 10px; display:flex; border-bottom:1px solid rgba(255, 255, 255, 0.3); box-sizing:border-box;}
.main-sec5 .lbl {display:block; width:110px; flex-shrink:0; font-size:var(--font-size-20); font-weight:600; line-height:1.3; color:#fff; letter-spacing:-0.02em; box-sizing:border-box;}
.main-sec5 .req {color:var(--color-tertiary);}
.main-sec5 .inp {display:block; width:100%; line-height:1.5; color:#fff; letter-spacing:-0.02em; background:transparent; border:0; border-radius:0;}
.main-sec5 .inp::placeholder {color:rgba(255, 255, 255, 0.45);}
.main-sec5 .inp:focus {outline:none; /* box-shadow:0 1px 0 0 rgba(144, 39, 142, 0.85); */}
.main-sec5 .inp.area {min-height:120px; resize:vertical;}

.main-sec5 .cell.full {border-bottom:1px solid rgba(255, 255, 255, 0.3); display:flex;}
.main-sec5 .cell.full .inp.area:focus {box-shadow:none; border-bottom-color:rgba(144, 39, 142, 0.85);}
.main-sec5 .grp {display:flex; gap:var(--space-10); width:100%;}
.main-sec5 .grp .top {width:110px; flex-shrink:0;}
.main-sec5 .grp .top .lbl {display:inline; border-bottom:0; line-height:1.3;}
.main-sec5 .opts {display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-20) var(--space-50);}
.main-sec5 .pick {display:inline-flex; align-items:center; gap:var(--space-10); cursor:pointer; vertical-align:middle;}
.main-sec5 .pick input {position:absolute; top:0; left:0; width:0; height:0; padding:0; border:0; opacity:0; z-index:-1;}
.main-sec5 .pick .ico {flex-shrink:0; width:18px; height:18px; background:url("/images/main/contact-radio-off.svg") 50% 50% / contain no-repeat;}
.main-sec5 .pick input:checked + .ico {background-image:url("/images/main/contact-radio-on.svg");}
.main-sec5 .pick .txt {font-size:var(--font-size-16); font-weight:500; line-height:1.125; color:#fff; letter-spacing:-0.02em;}
.main-sec5 .pick.chk input + .ico {width:18px; height:18px; border:1px solid rgba(255, 255, 255, 0.3); border-radius:5px; background:transparent;}
.main-sec5 .pick.chk input:checked + .ico {border-color:transparent; background:url("/images/main/contact-check.svg") 50% 50% / contain no-repeat;}

.main-sec5 .foot {margin-top:30px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-30); width:100%;}
.main-sec5 .foot .agree {display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-10);}
.main-sec5 .foot .pop_privacy.mini {display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:44px; min-height:18px; font-size:10px; line-height:1.2; color:#fff; letter-spacing:-0.06em; border:1px solid rgba(255, 255, 255, 0.3);}
.main-sec5 .foot .send {flex-shrink:0; min-width:200px; height:54px; padding:var(--space-10); box-sizing:border-box; font-size:var(--font-size-16); font-weight:500; line-height:1.875; color:#fff; letter-spacing:-0.02em; background:rgba(255, 255, 255, 0.2); border:0; border-radius:60px;}
.main-sec5 .foot .send:hover {background:rgba(255, 255, 255, 0.28);}









/* sub page */
.sub-visual {padding:var(--space-100) 0; color:#fff;}
.sub-visual .contain {display:flex; align-items:flex-end;}
.sub-visual .txt-wrap {flex:1;}

.sub-visual .txt1 {margin-bottom:var(--space-35); font-size:clamp(24px, calc( 52 / var(--inner) * 100vw ), 52px); line-height:1em; display:block; letter-spacing:-.03em; font-weight:700;}
.sub-visual .pg-depth {display:flex; justify-content:flex-end;}
.sub-visual .pg-depth .loc {display:flex; flex-wrap:wrap; align-items:center; gap:8px; line-height:1;}
.sub-visual .pg-depth .lnk {display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#fff;}
.sub-visual .pg-depth .lnk .ico {width:14px; flex-shrink:0;}
.sub-visual .pg-depth .lnk .ico img {display:block; width:14px; aspect-ratio:14/13; object-fit:contain;}
.sub-visual .pg-depth .lbl {font-family:"Montserrat", sans-serif; font-weight:500; color:#fff; white-space:nowrap;}
.sub-visual .pg-depth .sep {display:inline-flex; flex-shrink:0; align-items:center;}
.sub-visual .pg-depth .sep .ico {width:5px;}
.sub-visual .pg-depth .sep .ico img {display:block; width:5px; aspect-ratio:5/8; object-fit:contain;}

.sub-title {padding:var(--space-120) 0 var(--space-100); text-align:center;}
.sub-title .tit {font-size:var(--font-size-40); letter-spacing:-.03em; line-height:1em; font-weight:700; color:var(--color-bk);}

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

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

.container-bg {background-position:0 0; background-repeat:no-repeat; background-size:cover;}

/* footer */
.foot-top {padding:var(--space-60) 0;}
.foot-top .row {display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--space-40);}
.foot-top .info {display:flex; flex-direction:column; gap:var(--space-40); max-width:684px;}
.foot-top .detail {display:flex; flex-direction:column; gap:var(--space-15); line-height:normal;}
.foot-top .detail .line {display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-10) var(--space-40); font-size:var(--font-size-18); letter-spacing:-.03em;}
.foot-top .pair {display:flex; align-items:center; gap:var(--space-10); margin:0;}
.foot-top .lbl {color:#454545; font-weight:500;}
.foot-top .val {color:rgba(69,69,69,.5); text-decoration:none;}
.foot-top .sns {display:flex; align-items:center; gap:var(--space-10); list-style:none; padding:0;}
.foot-top .sns .lnk {display:block;}

.foot-copy {min-height:80px; position:relative; overflow:hidden; border-radius:16px 16px 0 0; padding:var(--space-30) 0; background:url('/images/common/footcopy-bg.jpg') 50% 50% / cover no-repeat; display:flex; align-items:center; justify-content:center;}
.foot-copy .contain {position:relative; z-index:1; display:flex; align-items:center;}
.foot-copy .copy {flex:1; line-height:normal; color:rgba(255,255,255,.6);}
.foot-copy .copy .main {color:#fff;}
.foot-copy .copy .by {font-size:10px;}
.foot-copy .policy {text-align:right; display:flex; gap:var(--space-40); font-size:var(--font-size-15); line-height:normal;}
.foot-copy .policy a {color:#fff; text-decoration:none; font-weight:300;}
.foot-copy .policy a:hover {font-weight:600;}