@charset "utf-8";

/* =============================================================================
   MAIN PAGE STYLES (merged from main.css)
   ============================================================================= */

/* ******************  메인 비주얼 ********************** */
html:has(.main-wrap) {scroll-snap-type: y proximity;}
#mainVisual{overflow:hidden; width:100%; position:relative; height: 100vh; height: 100dvh; scroll-snap-align: start; /* background-color:#060910; */}
.main-visual-swiper {width:100%; height:100%; position:relative; z-index:1;}
.main-visual-item {height:100%;}
.main-visual-video-bg {position:absolute; inset:var(--area-padding); overflow:hidden; z-index:0; border-radius:8rem;}
/* .main-visual-video-bg::after {content:''; position:absolute; inset:0; background:rgba(0,0,0,0.45); z-index:1;} */
.main-visual-video-bg video {width:100%; height:100%; object-fit:cover; display:block;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item {position:relative;}
.main-visual-img-cover {position: absolute; inset:var(--area-padding); overflow: hidden; border-radius:6rem; }
/* .main-visual-img-cover::after {content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 60%); z-index:1; pointer-events:none;} */
.main-visual-item .main-visual-img{
	position: absolute;
	top:50%;
	left:50%;
	width:100vw;
	height: 100vh;
	background-size:cover !important;
	transform:translate(-50%, -50%) scale(1,1);
	opacity: 0;
	transition: opacity 1s;
	will-change: transform;
}
.main-visual-item .main-visual-m-img{display:none;}
.main-visual-item .main-visual-img video {position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%,-50%); object-fit:cover;}
.main-start .main-visual-item.active-item:not(.first-progress) .main-visual-img{animation: image-zoom-out 7s 0s ease-in-out both;}
.main-start .main-visual-item.active-item.first-progress .main-visual-img{animation: image-zoom-first 7s 0s ease-in-out both;}
.main-start .main-visual-item .main-visual-img {opacity: 1;}
/* 서브페이지: introCover(외부 컨테이너)만 실행, 내부 이미지 이중 줌 방지 */
.sub-wrap .main-start .main-visual-item.active-item:not(.first-progress) .main-visual-img,
.sub-wrap .main-start .main-visual-item.active-item.first-progress .main-visual-img {animation: none; transform: translate(-50%, -50%);}

/* 메인 비주얼 :: 텍스트+pagination 오버레이 */
.main-visual-overlay {position:absolute; left:0; right:0; bottom:0; z-index:2; padding-bottom:8rem; pointer-events:none;}
/* .main-visual-overlay:after {
	content: "";
	position: absolute;
	left: 8rem;
	bottom: 5rem;
	width: 90rem;
	height: 20rem;
	border-radius: 2.4rem;
	background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(15px) opacity(1);
	z-index: -1;
} */
.main-visual-overlay-inner {padding:0 var(--area-padding); box-sizing:border-box;}
.main-visual-txt-list {position:relative;}
.main-visual-txt-item {display:none; text-align:left; pointer-events:auto;}
.main-visual-txt-item.active-item {display:block;}
.main-visual-txt-item .main-visual-txt1,
.main-visual-txt-item .main-visual-txt2 {opacity:0; will-change:transform, opacity;}
.main-visual-txt-item .main-visual-txt1 b {font-weight:700; font-size: 8.0rem; white-space: nowrap; letter-spacing:-0.02em; color:#fff; line-height:1.2; }
.main-visual-txt-item .main-visual-txt2 {font-size:7.6rem; font-weight:500; letter-spacing:-0.02em; color:#fff; line-height:1.2; overflow:visible; padding-bottom:0.1em;}
.main-visual-txt-item .main-visual-txt3 {font-size:2.4rem; letter-spacing:-0.03em; color:rgba(255,255,255,0.8); line-height:1.6; margin-top:1.6rem; opacity:0; will-change:transform, opacity;}
/* 메인 비주얼 :: 스크롤 다운 인디케이터 */
.main-scroll-down {position:fixed; right:5rem; top:50%; transform:translateY(-50%); z-index:10; display:flex; flex-direction:column; align-items:center; gap:1.2rem; opacity:1; transition:opacity 0.5s ease; pointer-events:none;}
.main-scroll-down.hide {opacity:0;}
.main-scroll-down span {writing-mode:vertical-rl; font-size:1.2rem; font-weight: 600; letter-spacing:0.3em; color:rgba(255,255,255,0.65); text-transform:uppercase; font-weight:300; font-family:var(--font-family2);}
.main-scroll-down .scrolldown {width:1px; height:8rem; background:rgba(255,255,255,0.2); position:relative; overflow:hidden;}
.main-scroll-down .scrolldown::after {content:''; position:absolute; top:-100%; left:0; width:100%; height:60%; background:linear-gradient(to bottom, transparent, #fff 50%, transparent); animation:scrollLineDown 1.8s ease-in-out infinite;}
@keyframes scrollLineDown {
	0%   { top:-60%; }
	100% { top:160%; }
}


/* 메인 비주얼 :: 텍스트 :: active효과 */
.main-visual-txt-item.active-item .main-visual-txt1 {animation: text-active-animation  1.5s cubic-bezier(0.4, 0, 0.2, 1) 0s   both;}
.main-visual-txt-item.active-item .main-visual-txt2 {animation: text-active-animation2 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;}
.main-visual-txt-item.active-item .main-visual-txt3 {animation: text-active-animation2 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both;}

/* 메인 비주얼 :: Animation */
@keyframes image-zoom-first {
	0% { transform:translate(-50%, -50%) scale(1.15,1.15) }
	20% { transform:translate(-50%, -50%) scale(1,1) }
	100% { transform:translate(-50%, -50%) scale(1.12,1.12) }
}
@keyframes image-zoom-out {
	from {
		transform:translate(-50%, -50%) scale(1,1)
	}
	to {
		transform:translate(-50%, -50%) scale(1.15,1.15)
	}
}
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(100%); 
		transform: translateY(100%); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-active-animation2 {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(30px); 
		transform: translateY(30px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인비주얼 :: active */
.main-start .main-visual-video-bg {animation: introCover 1.1s ease-in-out forwards;}
.main-start .main-visual-img-cover {animation: introCover 1.1s ease-in-out forwards;}

@keyframes introCover {
	from {transform:scale(0.98); inset:var(--area-padding); border-radius:8rem;}
	to   {transform:scale(1);   inset:0;                   border-radius:0;}
}


/* 메인 비주얼 :: pagination */
.main-visual-pagination {position:relative !important; margin-top:2.4rem; display:flex !important; gap:1.2rem; align-items:center; pointer-events:auto; width:auto !important; bottom:auto !important; left:auto !important; transform:none !important; text-align:left !important;}
.main-visual-pagination .swiper-pagination-bullet {position:relative !important; width:100px !important; height:3px !important; border-radius: 0; background:rgba(255,255,255,0.3) !important; opacity:1 !important; overflow:hidden !important; cursor:pointer; display:inline-block !important; margin:0 !important; flex-shrink:0;}
.main-visual-pagination .swiper-pagination-bullet-active {background:rgba(255,255,255,0.3) !important; opacity:1 !important;}
.main-visual-pagination .swiper-pagination-bullet .mv-pag-bar {position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:left; border-radius:0;}
.main-visual-pagination .swiper-pagination-bullet-active .mv-pag-bar {animation:mvProgressFill 5s linear forwards;}
@keyframes mvProgressFill {
	0% { transform: scaleX(0); }
	100% { transform: scaleX(1); }
}

/* ---- 서브 비주얼 텍스트 오버라이드 ---- */
.sub-wrap #mainVisual .main-visual-txt-item .main-visual-txt1 {font-size:4.8rem; font-weight:500; color:#fff; line-height:1.2; letter-spacing:-0.03em;}
.sub-wrap #mainVisual .main-visual-txt-item .main-visual-txt1 b {font-size:4.8rem; white-space:normal;}
.sub-wrap #mainVisual .main-visual-txt-item .main-visual-txt2 {font-size:2.0rem; font-weight:400; line-height:1.6; letter-spacing:-0.02em; margin-top:2.4rem;}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box .main-sub-tit {display: block; font-size: 2.4rem; font-weight: 600; letter-spacing: -0.02em; color: var(--main-color); line-height: 1.4; margin-bottom: 1.5rem;}
.main-tit-box .main-tit{font-size: 4.8rem; font-weight: 600; letter-spacing: -0.05em; color: var(--color-dark); line-height: 1.2; margin-bottom: 2.4rem;}
.main-tit-box .main-txt01 {font-size: 2rem; font-weight: 700; letter-spacing: -0.05em; color: var(--color-dark); line-height: 1.6; margin-top: 1.8rem;}
.main-tit-box .main-txt02 {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.05em; color: var(--body-color); line-height: 1.6;}
.sub-txt {font-size: 2rem; font-weight: 500; letter-spacing: -0.05em; color: var(--body-color); line-height: 1.6; margin-top: 1.5rem;}

.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:none;
}

/* 공통 :: 버튼 */
.main-btn{position: relative; display: flex; align-items:center; justify-content:space-between; width:24rem; height:5.6rem; border-radius:2.8rem; overflow:hidden; padding:0 2.4rem; box-sizing:border-box; margin-top: 4.8rem;}
.main-btn:before{position: absolute; content:''; top:0; left:0; width:100%; height:100%; border:2px solid var(--color-dark); border-radius: 2.8rem; box-sizing:border-box;}
.main-btn .txt {position: relative; margin: 0 !important; font-size:1.8rem; color:var(--color-dark); font-weight:600; white-space: nowrap; z-index:1; opacity: 1 !important; transition:var(--transition-custom);}
.main-btn .icon{position: absolute; top:50%; right:2.4rem; transform:translateY(-50%); width: 0.8rem; height: 0.8rem; border-radius:50%; background:var(--color-dark); transition:var(--transition-custom);}
.main-btn .hover-icon{position: absolute; top:50%; right:2.4rem; transform:translateY(-50%); width: 0.8rem; height: 0.8rem; border-radius:50%; background:#fff; transition:var(--transition-custom); opacity:0;}
.main-btn:hover .txt{color:#fff;}
.main-btn:hover .icon{width:60rem; height:60rem; right:-28rem;}
.main-btn:hover .hover-icon{opacity:1;}
.main-btn:hover:before {border: 2px solid #fff;}


/* -------- 메인 컨텐츠 :: 컨텐츠1(About) -------- */
#mainContent > article {position: relative; width: 100%; height: 100%; min-height: 100vh;}
#mainContent1 {position: relative; width: 100%; height: 100vh; scroll-snap-align: start; background: radial-gradient(circle at 20% 20%, rgba(0, 180, 255, 0.2), transparent 40%), radial-gradient(circle at 80% 30%, rgba(0, 120, 255, 0.2), transparent 40%), radial-gradient(circle at 50% 100%, rgba(0, 60, 255, 0.15), transparent 50%), linear-gradient(135deg, #0a0f1f, #0e1a35, #101c3a);}
#mainContent1::before {content: ''; position: absolute; inset: 0; background: url('../../assets/images/main/bg_about.png') center/cover fixed no-repeat; opacity: 0.4; z-index: 0; pointer-events: none;}
.main-con01 {width: 100%; padding: 20rem 20rem 40rem; box-sizing: border-box; text-align: center;}
.main-con01 .main-sub-tit {display: block; font-size: 3.6rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.4; margin-bottom: 4rem; background: #fff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.main-con01-txt {position: relative; z-index: 1;}
.main-con01-txt .text {position:relative; font-size: 4.4rem; line-height: 1.4; letter-spacing: -0.05em; font-weight: 500; word-break: keep-all;}
.main-con01-txt .text.text01 + .text02 {margin-top: 4rem;}
.main-con01-txt .text .char {opacity: 0; display: inline; color: #fff;}
.main-con01-txt .text .char.space {opacity: 1;}
.main-con01-txt.transmission-active .text .char {animation: transmissionGlow 0.9s ease forwards;}
@keyframes transmissionGlow {
	0%   { opacity: 1; color: rgba(255,255,255,0.15); text-shadow: none; }
	25%  { color: var(--color-dark); text-shadow: 0 0 6px var(--main-color), 0 0 18px var(--main-color), 0 0 35px rgba(197,160,89,0.6); }
	65%  { color: var(--main-color); text-shadow: 0 0 4px var(--main-color), 0 0 10px rgba(197,160,89,0.3); }
	100% { opacity: 1; color: rgba(255,255,255,1); text-shadow: none; }
}
.main-con01-txt.m-ver {display: none;}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Full-Stack AI) -------- */
#mainContent2 {display: none;}
.main-con02-inner {display: flex; align-items: center; justify-content: space-between;}
.main-ai-list-con {position: relative; width:66rem; height: 66rem; display: flex; align-items: center; justify-content: center;}
.main-ai-list-con:before {position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; border-radius: 13rem; background: rgba(255, 255, 255, .2); backdrop-filter: blur(15px) opacity(1); opacity: 0; transform:scale(0.8); transition: var(--transition-custom2); }
.main-ai-list {position: relative; width: 45.4rem; height: 45.4rem; }
.main-ai-list:before {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/main/main_ai_arrow.png)no-repeat center/100%; animation:spin 12s linear infinite; opacity: 0; transition: var(--transition-custom2);}
.main-ai-list li {position: absolute; width: 16rem; height: 16rem; border-radius: 50%; background: rgba(170, 170, 170, .3);
    backdrop-filter: blur(15px); z-index: 3; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; transition: var(--transition-custom); }
.main-ai-list li.on {background: var(--main-color);}
.main-ai-list li.item01 {top: 1.0rem; left: 1.0rem;}
.main-ai-list li.item02 {top: 1.0rem; right: 1.0rem;}
.main-ai-list li.item03 {bottom: 1.0rem; right:1.0rem;}
.main-ai-list li.item04 {bottom: 1.0rem; left: 1.0rem;}
.main-ai-list li .inner {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.main-ai-list li .icon-box {width: 6.2rem; height: 6.2rem; display: flex; align-items: center; justify-content: center;}
.main-ai-list li:nth-child(1) .icon-box {background: url(../images/main/consultation.gif) no-repeat 50% 50%; background-size: contain;}
.main-ai-list li:nth-child(2) .icon-box {background: url(../images/main/engineering.gif) no-repeat 50% 50%; background-size: contain;}
.main-ai-list li:nth-child(3) .icon-box {background: url(../images/main/verification.gif) no-repeat 50% 50%; background-size: contain;}
.main-ai-list li:nth-child(4) .icon-box {background: url(../images/main/support.gif) no-repeat 50% 50%; background-size: contain;}
.main-ai-list li .icon-box img {width: 100%; height: auto;}
.main-ai-list li strong {display: block; font-size: 1.6rem; font-weight: 500; letter-spacing: -0.05em; color: #fff; line-height:1.2; margin-top: 0.8rem; font-family: var(--font-family2);}
.main-ai-list-con .inner-txt {text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-42%); z-index: 1; opacity: 0;  transition:var(--transition-custom2); } 
.main-ai-list-con .inner-txt .tit {font-size: 4.0rem; font-weight: 500; letter-spacing: -0.02em; color: #fff; line-height: 1.4;}
.main-ai-list-con .inner-txt span {display: block; font-size: 3.6rem; font-weight: 500; letter-spacing: -0.02em; color:#fff; line-height: 1.4;}
.main-ai-txt-wrap {opacity: 0; transform:translateX(-30px);  transition:var(--transition-custom2); }
.main-ai-txt-wrap .main-tit-box .main-txt01 {margin-top: 0;}
.main-ai-txt-pc {position: relative; height: 15.5rem; margin-top: 1.8rem;}
.main-ai-txt-con {position: absolute; top: 0; left: 0; opacity: 0;  transition: opacity 0.4s; }
.main-ai-txt-con.on {opacity: 1;}
.main-ai-list li.on strong {color: #fff;}
/* .main-ai-list li:nth-child(1).on .icon-box {background: url(../images/icon/consultation-on.gif) no-repeat 50% 50%; background-size: contain;}
.main-ai-list li:nth-child(2).on .icon-box {background: url(../images/icon/engineering-on.gif) no-repeat 50% 50%; background-size: contain;}
.main-ai-list li:nth-child(3).on .icon-box {background: url(../images/icon/verification-on.gif) no-repeat 50% 50%; background-size: contain;}
.main-ai-list li:nth-child(4).on .icon-box {background: url(../images/icon/support-on.gif) no-repeat 50% 50%; background-size: contain;} */

.animated .main-ai-list-con:before  {opacity: 1; transform:scale(1.0);}
.animated .main-ai-list:before {opacity: 1;}
.animated .main-ai-list li {opacity: 1;}
.animated .main-ai-list-con .inner-txt {opacity: 1; }
.animated .main-ai-txt-wrap {opacity: 1;  transform:translateX(0); min-width: 50%;}
@keyframes spin {
	from {transform:rotate(0)}
	to {transform:rotate(360deg)}
}

.main-ai-txt-m {display: none;}
#mainContent3 {
	position: relative; 
	width: 100%;   
    min-height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
	padding: 20rem 0; 
	background-color: rgba(0, 78, 146, 0.1);
}
.main-con03 {display: flex;}
.main-con03 .left-con {width: 40.97%;}
.main-con03 .main-tit-box .main-txt02 {margin-top: 2.4rem;}
.main-con03 .right-con {width: 59.03%;}
.main-con03-list {display: flex; flex-wrap:wrap; margin: 0 -0.8rem;}
.main-con03-list li {position: relative; width: calc(33.333% - 1.6rem); margin: 0 0.8rem; border-radius: 3.2rem; background-color: #fff; backdrop-filter:blur(1rem); padding: 4rem 4rem 13rem; box-sizing: border-box; opacity: 0; transition:var(--transition-custom2); opacity: 0; -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); transition-property: opacity, transform, -webkit-transform; will-change: transform, opacity;}
.main-con03-list li.item01 {transition-delay:0.1s;}
.main-con03-list li.item02 {transition-delay:0.3s;}
.main-con03-list li.item03 {transition-delay:0.5s;}
li .tit-box strong {display: block; margin-top:2.4rem; font-size: 2.4rem; font-weight: 600; color: var(--color-dark); line-height: 1; white-space: nowrap;}
.main-con03-list li .tit-box p {font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; color: var(--body-color); line-height: 1.6; margin-top: 2.4rem; opacity: 0.7;}
.main-con03-list li .icon-box {position: absolute; left: 50%; bottom: 4rem; width: 8.0rem; height: 8.0rem; display: flex; align-items: center; justify-content: center; margin-left: -4rem;}
.badge span,
.badge-group .badge {display: inline-block; border-radius: 4rem; padding: 0.8rem 1.6rem; background: rgba(0, 78, 146, 0.1); font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; color: var(--main-color); line-height: 1.3; white-space: nowrap;}
.badge-group {display: flex; flex-wrap: wrap; gap: 0.8rem;}
.animated .main-con03-list li {opacity: 1;-webkit-transform: none; transform: none;}

#mainContent4 {padding: 20rem 0; position: relative; z-index: 1; transform: translateZ(0);}
.main-con04 .main-tit-box {text-align: center; margin-bottom: 8rem;}
.main-con04 .main-tit-box .main-btn {margin: 4rem auto 0;}

.main-con04-box {position: relative; z-index: 0; width: 100%; padding: 8rem; box-sizing: border-box; transform: translateZ(0); overflow: hidden;}
.main-con04-box  + .main-con04-box {margin-top: 10rem;}
.main-con04-box .video-area {position: relative; z-index: 1; width: 100%; min-height: 80rem; display: block; border-radius: 4rem; overflow: hidden;}
.video-overlay-controls {
    position: absolute; bottom: 2.4rem; right: 2.4rem; z-index: 10;
    display: flex; gap: 1rem;
    opacity: 0; transition: opacity 0.3s;
}
.video-area:hover .video-overlay-controls { opacity: 1; }
.voc-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 4.4rem; height: 4.4rem; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(0,0,0,0.5); color: var(--color-dark); font-size: 2rem;
    backdrop-filter: blur(4px); transition: background 0.2s;
}
.voc-btn:hover { background: var(--main-color); }
.main-con04-box video {
	position: absolute;
	width: calc(100% + 7.8rem);
    display: block;
    object-fit: cover;
    top: -8.6rem;
    left: -3.6rem;
    right: -3.6rem;
}

.main-con04-box:before {position: absolute; top: 0; left: 0; content: ''; width: 0; height: 100%; border-radius: 6rem; background-color: rgba(0, 78, 146, 0.1);; opacity: 0; backdrop-filter:blur(3rem);  transition: all 1.6s ease-in-out;}
.main-application-list {position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 4rem; width: 100%;}
.main-application-list li {position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; z-index: 1; opacity: 0; transform: translateX(-10%); transition: var(--transition-custom2); transition-property: opacity, transform;}
.main-application-list li img {border-radius: 2.4rem;}
.main-application-list li.item01 {transition-delay: 0s;}
.main-application-list li.item02 {transition-delay: 0.2s;}
.main-application-list li.item03 {transition-delay: 0.4s;}
.main-application-list li.item04 {transition-delay: 0.6s;}
.main-application-list li.item05 {transition-delay: 0.8s;}
.main-con04-box.animated .main-application-list li {opacity: 1; transform: translateX(0);}
.main-application-list li p {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.02em; color: var(--body-color); line-height: 1.4; margin-top: 2.4rem;}
.main-con04-box.animated:before {opacity: 1;width: 100%;}

#mainContent5 {width: 100%; min-height: 100vh; padding: 20rem 0; position: relative; z-index: 1; overflow: hidden; overflow: hidden;
    background: radial-gradient(circle at 20% 20%, rgba(0, 180, 255, 0.2), transparent 40%), radial-gradient(circle at 80% 30%, rgba(0, 120, 255, 0.2), transparent 40%), radial-gradient(circle at 50% 100%, rgba(0, 60, 255, 0.15), transparent 50%), linear-gradient(135deg, #0a0f1f, #0e1a35, #101c3a);
}
#mainContent5:before {
	content: "";
	position: absolute;
	inset: -4%;
	background: url(../images/main/bg_workflow.png) right center / cover no-repeat fixed;
	opacity: 0.2;
	z-index: -1;
}
#mainContent5 .main-tit-box .main-sub-tit {display: block; font-size: 2.4rem; font-weight: 600; letter-spacing: -0.02em; color: #fff; line-height: 1.4; margin-bottom: 1.5rem;}
#mainContent5 .main-tit-box .main-tit{font-size: 4.8rem; font-weight: 600; letter-spacing: -0.05em; color: #fff; line-height: 1.2; margin-bottom: 2.4rem;}
#mainContent5 .main-tit-box .main-txt01 {font-size: 2.4rem; font-weight: 700; letter-spacing: -0.05em; color: #fff; line-height: 1.6;}
#mainContent5 .main-tit-box .main-txt02 {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.05em; color: rgba(255,255,255,0.7); line-height: 1.6;}
#mainContent5 .sub-txt {font-size: 2rem; font-weight: 500; letter-spacing: -0.05em; color: rgba(255,255,255,0.7); line-height: 1.6; margin-top: 1.5rem;}
#mainContent5 .main-btn:before{border:2px solid #fff;}
#mainContent5 .main-btn .txt {color:#fff;}
#mainContent5 .main-btn .icon{background:#fff;}
#mainContent5 .main-btn .hover-icon {background:var(--color-dark);}
#mainContent5 .main-btn:hover .txt{color:var(--color-dark);}
#mainContent5 .main-btn:hover .hover-icon{opacity:1; background-color: var(--color-dark);}
#mainContent5 .main-btn:hover:before {border: 2px solid #fff;}
#mainContent6 {padding: 24rem 0; background-color: #f3f6f9; display: flex; align-items: center;}
.main-con06 {display: flex;}
.main-con06 .left-con {width: 30%;}
.main-con06 .main-tit-box .main-txt02 {margin-top: 1.5rem;}
.main-con06 .right-con {width: 70%; padding-left: 120px;}
.main-con06-list {display: flex; flex-wrap:wrap; margin: 0 -1rem;}
.main-con06-list li {width: calc(25% - 2rem); margin: 0 1rem; border-radius: 3.2rem; background: #fff; min-height: 34rem; opacity: 0; transition:var(--transition-custom2); opacity: 0; -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); transition-property: opacity, transform, -webkit-transform; will-change: transform, opacity;}
.main-con06-list li.item01 {transition-delay:0.1s;}
.main-con06-list li.item02 {transition-delay:0.3s;}
.main-con06-list li.item03 {transition-delay:0.5s;}
.main-con06-list li.item04 {transition-delay:0.7s;}
.main-con06-list li a {position: relative; display: block; width: 100%; height: 100%; padding: 2.4rem; box-sizing: border-box; border-radius: 3.2rem;  transition:all 0.4s;}
.main-con06-list li a .tit-box strong {display: inline-block; font-size: 2.2rem; font-weight: 600; letter-spacing: -0.05em; color: var(--color-dark); line-height: 1.4;}
.main-con06-list li a .tit-box strong i {display: inline-block; width: 2.0rem; height: 2.0rem; margin-left: 0.4rem; position: relative; top: 0.4rem; opacity: 0; transition:all 0.4s; background: url(../images/icon/arrow-big-right.gif) no-repeat 0 center; background-size: contain;}
.main-con06-list li a .tit-box p {font-size: 1.5rem; font-weight: 500; letter-spacing: -0.05em; color: var(--body-color); line-height: 1.44; margin-top: 1rem; opacity: 0.7;}
.main-con06-list li a .icon-box {position: absolute; bottom: 4rem; right: calc(50% - 3rem); width: 6rem; height: 6rem;}
.main-con06-list li:nth-child(1) .icon-box,
.main-con06-list li:nth-child(3) .icon-box {background: url(../images/icon/icon-catalog.gif) no-repeat center center; background-size: contain;}
.main-con06-list li:nth-child(2) .icon-box,
.main-con06-list li:nth-child(4) .icon-box {background: url(../images/icon/icon-brochure.gif) no-repeat center center; background-size: contain;}
.main-con06-list li:nth-child(1) a:hover .icon-box,
.main-con06-list li:nth-child(3) a:hover .icon-box {background: url(../images/icon/icon-catalog-on.gif) no-repeat center center; background-size: contain;}
.main-con06-list li:nth-child(2) a:hover .icon-box,
.main-con06-list li:nth-child(4) a:hover .icon-box {background: url(../images/icon/icon-brochure-on.gif) no-repeat center center; background-size: contain;}
.main-con06-list li a .icon-box img {max-width: 100%;}
.animated .main-con06-list li {opacity: 1;-webkit-transform: none; transform: none;}
.main-con06-list li a:hover {background-color: var(--main-color);}
.main-con06-list li a:hover .tit-box strong i {opacity: 1;}
.main-con06-list li a:hover .badge span {background-color: rgba(255,255,255,0.4);}
.main-con06-list li a:hover .tit-box strong {color: #fff;}
.main-con06-list li a:hover .tit-box p {color: #fff;}

/* -------- #mainContent7 Inquiry -------- */
#mainContent7 {
	position: relative;
	padding: 20rem 0;
	z-index: 1;
	overflow: hidden;
	background:
		radial-gradient(circle at 20% 20%, rgba(0, 180, 255, 0.2), transparent 40%),
		radial-gradient(circle at 80% 30%, rgba(0, 120, 255, 0.2), transparent 40%),
		radial-gradient(circle at 50% 100%, rgba(0, 60, 255, 0.15), transparent 50%),
		linear-gradient(135deg, #0a0f1f, #0e1a35, #101c3a);
}
#mainContent7:before {
	content: "";
	position: absolute;
	inset: -4%;
	background: url(../images/main/bg_inquiry.png) right center / cover no-repeat fixed;
	/* filter: blur(2px); */
	opacity: 0.2;
	z-index: -1;
}
.main-con07-tit-con {display: flex; margin-bottom: 8rem;}
.main-con07-tit-con .tit {width: 20%; font-size: 6.4rem; font-weight: 500; letter-spacing: -0.02em; color: #fff; line-height: 1.2;}
.main-con07-tit-con .txt-box {position: relative; width: calc(100% - 20%); padding-left: 6.4rem; box-sizing: border-box;}
.main-con07-tit-con .txt-box:before {position: absolute; content: ''; width: 3px; height: calc(100% - 1.5rem); left: -2px; top:1.1rem; background-color: rgba(255,255,255,0.07);}
.main-con07-tit-con .txt-box:after {position: absolute; content: ''; width: 3px; height: 4rem; top:1.1rem;  left: -2px; background-color: #fff;}
.main-con07-tit-con .txt-box .txt01 {font-size: 4rem; font-weight: 600; letter-spacing: -0.05em; color: #fff; line-height: 1.4;}
.main-con07-tit-con .txt-box .txt02 {font-size: 2rem; font-weight: 500; letter-spacing: -0.05em; color: rgba(255,255,255,0.7); line-height: 1.4; margin-top: 1.5rem;}
.main-con07-box {position: relative;width: 100%; padding: 8rem; display: flex; align-items: center; box-sizing: border-box;}
.main-con07-box:before {position: absolute; top: 0; left: 0; content: ''; width: 0; height: 100%; border-radius: 6rem; background-color: rgba(255,255,255,0.05); opacity: 0; backdrop-filter:blur(3rem);  transition: all 1.6s}
.main-con07-box.animated:before {opacity: 1; width: 100%;}

/* --------  #mainContent7 문의 폼  -------- */
.inquiry-form-wrap {position: relative; z-index: 1; width: 100%; opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity 0.4s ease-in-out, clip-path 1.6s ease-in-out; transition-delay: 0.3s;}
.main-con07-box.animated .inquiry-form-wrap {opacity: 1; clip-path: inset(0 0% 0 0);}
.inquiry-form .form-row {display: flex; gap: 2.4rem; margin-bottom: 2.4rem;}
.inquiry-form .form-group {flex: 1; min-width: 0;}
.inquiry-form .form-group.full {margin-bottom: 2.4rem;}
.inquiry-form label {display: flex; font-size: 1.4rem; font-weight: 500; color: #FFF; letter-spacing: -0.02em; margin-bottom: 0.8rem;}
.inquiry-form label .required {color: var(--main-color3); margin-left: .4rem;}
.inquiry-form input[type="text"],
.inquiry-form input[type="tel"],
.inquiry-form input[type="email"],
.inquiry-form select,
.inquiry-form textarea {
	box-sizing: border-box; width: 100%; height: 5.6rem;
	background: rgba(255,255,255,0.07);
	border: 1px solid transparent;
	border-radius: 1rem;
	padding: 0 2rem;
	font-size: 1.6rem; font-family: var(--font-family1); color: #fff;
	letter-spacing: -0.02em;
	transition: border-color 0.3s ease, background 0.3s ease;
}
.inquiry-form input:-webkit-autofill,
.inquiry-form input:-webkit-autofill:hover,
.inquiry-form input:-webkit-autofill:focus,
.inquiry-form input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 100px rgba(255,255,255,0.07) inset !important;
	-webkit-text-fill-color: #fff !important;
	caret-color: var(--color-dark);
	transition: background-color 9999s ease 0s;
}
/* custom select */
.custom-select {position: relative; flex: 1; min-width: 0;}
.custom-select-trigger {display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; height: 5.6rem; padding: 0 2rem; background: rgba(255,255,255,0.07); border: 1px solid transparent; border-radius: 1rem; cursor: pointer; transition: border-color 0.3s ease, background 0.3s ease;}
.custom-select.open .custom-select-trigger {border-color: var(--main-color); background: rgba(255,255,255,0.1);}
.custom-select-value {font-size: 1.6rem; font-family: var(--font-family1); color: #fff; letter-spacing: -0.02em;}
.custom-select-arrow {display: flex; align-items: center; color: rgba(255,255,255,0.5); font-size: 2rem; transition: transform 0.3s ease;}
.custom-select.open .custom-select-arrow {transform: rotate(180deg);}
.custom-select-options {position: absolute; top: calc(100% + 0.6rem); left: 0; right: 0; background: var(--main-color); border-radius: 1rem; overflow: hidden; z-index: 100; opacity: 0; visibility: hidden; transform: translateY(-0.6rem); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;}
.custom-select.open .custom-select-options {opacity: 1; visibility: visible; transform: translateY(0);}
.custom-select-option {padding: 1.4rem 2rem; font-size: 1.6rem; font-family: var(--font-family1); color: rgba(255,255,255,0.65); letter-spacing: -0.02em; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;}
.custom-select-option:hover {background: rgba(255,255,255,0.07); color: #fff;}
.custom-select-option.selected {color: #fff;}
.inquiry-form textarea {height: 15rem; padding: 1.6rem 2rem; resize: none; line-height: 1.6;}
.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder {color: rgba(255,255,255,0.25);}
.inquiry-form select option {background: #1a1a1a; color: var(--color-dark);}
.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {outline: none; border-color: var(--main-color); background: rgba(255,255,255,0.1);}
.inquiry-form .form-bottom {display: flex; align-items: center; justify-content: space-between; margin-top: 2.4rem; gap: 2rem;}
.privacy-check {position: relative; display: flex; align-items: center; gap: 1.2rem; cursor: pointer;}
.privacy-check input[type="checkbox"] {display: none;}
.privacy-check .checkmark {flex-shrink: 0; width: 2rem; height: 2rem; border: 1px solid rgba(255,255,255,0.3); border-radius: 0.4rem; background: rgba(255,255,255,0.05); position: relative; transition: all 0.2s ease;}
.privacy-check input:checked ~ .checkmark {background: var(--main-color); border-color: var(--main-color);}
.privacy-check .checkmark:after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-60%) rotate(45deg); width: 0.5rem; height: 0.9rem; border: 2px solid #fff; border-top: 0; border-left: 0; opacity: 0; transition: opacity 0.2s ease;}
.privacy-check input:checked ~ .checkmark:after {opacity: 1;}
.privacy-check .txt {font-size: 1.4rem; font-weight: 400; color: rgba(255,255,255,0.5); letter-spacing: -0.02em;}
.privacy-check .txt .link {color: rgba(255,255,255,0.7); text-decoration: underline; text-underline-offset: 0.3rem;}

/* Glow Button */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-glow {
  to { --angle: 360deg; }
}
.submit-btn {display: inline-flex; align-items: stretch; justify-content: center; height: 6rem; padding: 0; border-radius: 10rem; background: none; flex-shrink: 0; cursor: pointer; position: relative; transition: transform 0.18s ease; transform: translate3d(0,0,0); overflow: hidden;}
.submit-btn::after,
.submit-btn::before {content: ""; position: absolute; inset: 0; border-radius: 10rem; background-image: conic-gradient(from var(--angle) at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 33%, var(--main-color) 50%, rgba(0,0,0,0) 66%, rgba(0,0,0,0) 100%); animation: rotate-glow 2s infinite linear;}
.submit-btn::before {filter: blur(1.4rem);}
.submit-btn-inner {position: relative; display: inline-flex; align-items: center; gap: 1.2rem; padding: 0 3.5rem; width: 100%; border-radius: 10rem; background: rgba(255,255,255,0.06); backdrop-filter: blur(4rem); z-index: 1; transition: background 0.3s ease;}
.submit-btn:hover .submit-btn-inner {background: var(--main-gradient);}
.submit-btn:active {transform: scale(0.95);}
.submit-btn .txt {font-size: 1.6rem; font-weight: 600; color: #fff; letter-spacing: 0.02em;}
.submit-btn .icon {display: flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: rgba(255,255,255,0.1);}
.submit-btn .icon i {font-size: 1.6rem; color: #fff;}


/* -------- #mainContent8 Partners -------- */
#mainContent8 {padding: 20rem 0; z-index: 1; display: flex; align-items: center; flex-direction: column; justify-content: center;}
.main-con08 .main-tit-box {text-align: center; padding-bottom: 8rem;}
/* Partners :: Dual Infinite Marquee */
.main-partners-wrap {
	position: relative;
	display: flex;
	overflow: hidden;
	padding: 1rem 0;
}
.main-partners-wrap::before,
.main-partners-wrap::after {
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	width: 12rem;
	z-index: 2;
	pointer-events: none;
}
.main-partners-wrap::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.main-partners-wrap::after  { right: 0; background: linear-gradient(to left,  #fff, transparent); }

.main-partners-list {
	display: flex;
	flex-flow: row nowrap;
	flex-shrink: 0;
	align-items: center;
}
.main-partners-list .partner-item {flex-shrink: 0; padding: 0 3rem; display: flex; align-items: center;}
.main-partners-list .partner-inner {display: flex; align-items: center;}
.main-partners-list .partner-inner > span {display: flex; align-items: center; justify-content: center;}
.main-partners-list .partner-inner > span img {height: 4rem; width: auto;}

.logo-animate     {animation: partners-marquee 30s linear infinite;}
.logo-animate-alt {animation: partners-marquee 30s linear infinite reverse;}

@keyframes partners-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

.main-partners-bottom {margin-top: 5rem;}

/* -------- 개인정보 모달 -------- */
.privacy-modal-btn {display: inline; background: none; border: none; padding: 0; font-size: inherit; font-family: inherit; color: rgba(255,255,255,0.7); text-decoration: underline; text-underline-offset: 0.3rem; cursor: pointer; line-height: inherit; transition: color 0.2s ease;}
.privacy-modal-btn:hover {color: var(--color-dark);}
.privacy-modal-overlay {position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 99998; display: flex; align-items: center; justify-content: center; padding: 2rem; opacity: 0; visibility: hidden; backdrop-filter: blur(10px); transition: opacity 0.3s ease, visibility 0.3s ease;}
.privacy-modal-overlay.open {opacity: 1; visibility: visible;}
.privacy-modal-box {
	position: relative; 
	width: 100%; 
	max-width: 60rem; 
	max-height: 80vh;	
	border-radius: 4rem; 
	background-color: var(--main-rgb20);
	display: flex; 

	flex-direction: column; 
	overflow: hidden; 
	transform: translateY(20px); 
	transition: transform 0.3s ease; 
}
/* .privacy-modal-box::before {content: ""; position: absolute; inset: 0; border-radius: 2rem; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.06), transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.06), transparent 60%);} */
.privacy-modal-overlay.open .privacy-modal-box {transform: translateY(0);}
.privacy-modal-header {display: flex; align-items: center; justify-content: space-between; padding: 4rem 4rem 0; flex-shrink: 0;}
.privacy-modal-title {font-size: 2.4rem; font-weight: 600; letter-spacing: -0.03em; color: var(--color-dark);}
.privacy-modal-close {width: 3.6rem; height: 3.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--body-color); font-size: 2.8rem; line-height: 1; transition: background 0.2s ease, color 0.2s ease;}
.privacy-modal-close:hover {background: #fff;}
.privacy-modal-body {margin: 4rem; padding: 2.4rem; overflow-y: auto; flex: 1; background-color: #fff; border-radius: 2.4rem;}
.privacy-modal-body::-webkit-scrollbar {width: 4px;}
.privacy-modal-body::-webkit-scrollbar-track {background: transparent;}
.privacy-modal-body::-webkit-scrollbar-thumb {background: rgba(255,255,255,0.2); border-radius: 2px;}
.privacy-modal-intro {font-size: 1.4rem; font-weight: 400; color: var(--body-color); line-height: 1.4; letter-spacing: -0.02em; margin-bottom: 2rem;}
.privacy-table {width: 100%; border-collapse: collapse; font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 1.6rem; border-radius: 2.4rem; overflow: hidden; box-shadow: 0 1px 1px var(--main-rgb10);}
.privacy-table th {background-color: var(--main-rgb10); color: var(--body-color); font-weight: 500; padding: 1.2rem 1.4rem; text-align: center; white-space: nowrap;}
.privacy-table td {color: var(--body-color); padding: 1.2rem 1.4rem; text-align: left; line-height: 1.4; word-break: keep-all;}
.privacy-modal-notice {list-style: none; padding: 0.8rem 0 0;}
.privacy-modal-notice li {position: relative; font-size: 1.4rem; color: var(--body-color); line-height: 1.4; letter-spacing: -0.02em; padding-left: 1.2rem;}
.privacy-modal-notice li + li {margin-top: 1.6rem;}
.privacy-modal-notice li::before {content: '·'; position: absolute; left: 0; top: 0;}
.privacy-modal-footer {padding: 0 4rem 4rem; flex-shrink: 0; display: flex; justify-content: center;}
.privacy-modal-confirm {height: 4.8rem; padding: 0 4rem; background: var(--main-color); color: #fff; border-radius: 4.8rem; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; cursor: pointer; transition: 0.25s;}
.privacy-modal-confirm:hover {background: var(--main-color2); transform: translateY(-2px);}

/* Custom Alert */
.custom-alert-overlay {position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 2rem; opacity: 0; visibility: hidden; backdrop-filter: blur(8px); transition: opacity 0.25s ease, visibility 0.25s ease;}
.custom-alert-overlay.open {opacity: 1; visibility: visible;}
.custom-alert-box {position: relative; width: 100%; max-width: 28rem; text-align: center; padding: 2.4rem; background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)); backdrop-filter: blur(35px) saturate(180%); border-radius: 2.2rem; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1rem 3rem rgba(0,0,0,0.4); overflow: hidden; transform: scale(0.88) translateY(12px); transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);}
.custom-alert-box::before {content: ""; position: absolute; inset: 0; border-radius: 2.2rem; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.06), transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(39,102,248,0.06), transparent 60%); }
.custom-alert-overlay.open .custom-alert-box {transform: scale(1) translateY(0);}
.custom-alert-icon {display: flex; align-items: center; justify-content: center; width: 5.6rem; height: 5.6rem; border-radius: 50%; background: rgba(255,255,255,0.1); margin: 0 auto 2rem; position: relative; z-index: 1;}
.custom-alert-icon i {font-size: 2.6rem; color: var(--color-dark);}
.custom-alert-msg {font-size: 1.6rem; font-weight: 500; color: rgba(255,255,255,0.88); letter-spacing: -0.02em; line-height: 1.6; margin-bottom: 2.8rem; position: relative; z-index: 1; white-space: pre-line;}
.custom-alert-confirm {position: relative; z-index: 1; height: 4rem; padding: 0 4rem; background: var(--main-color); border: 1px solid rgba(255,255,255,0.15); color: var(--color-dark); border-radius: 4rem; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; cursor: pointer; transition: 0.25s;}
.custom-alert-confirm:hover {background: var(--main-color2); transform: translateY(-2px);}


/* product */
.highlights-section {position: relative; padding-bottom: 40rem;}
.section-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 0 10rem;
}
.section-title {
	font-size: 6rem;
	font-weight: 700;
	letter-spacing: -0.003em;
	color: #f5f5f7;
	line-height: 1.1;
}

/* ── Swiper 컨테이너 ── */
.highlights-swiper {
	width: 100%;
	overflow: visible !important;
}

.highlights-swiper .swiper-wrapper {
	align-items: flex-start;
}

/* ── 슬라이드 카드 ── */
.highlights-swiper .swiper-slide {
	width: 1260px;       /* 카드 너비 */
	height: 680px;      /* 카드 높이 */
	border-radius: 60px;
	overflow: hidden;
	background-color: #000;
	flex-shrink: 0;
	position: relative;
	transition: transform 0.4s ease;
}

/* 비활성 슬라이드 살짝 축소 (Apple 느낌) */
.highlights-swiper .swiper-slide:not(.swiper-slide-active) {
	transform: scale(0.97);
}

/* ── 슬라이드 활성 시 등장 애니메이션 ── */
@keyframes slideCardFromRight {
	from { opacity: 0; transform: translateX(20px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* 이미지 zoom-out: active 시 큰 상태에서 서서히 줄어듦 */
@keyframes imgZoomOut {
	from { transform: scale(1.15); }
	to   { transform: scale(1.0); }
}

/* 이미지: active되면 zoom-out 애니메이션 (5.5s, 슬라이드 체류 시간보다 약간 길게) */
.highlights-swiper .swiper-slide-active .card-image {
	animation: imgZoomOut 5.5s ease-out both;
}

/* 텍스트: 기본 숨김 */
.highlights-swiper .swiper-slide .card-caption .headline {
	opacity: 0;
}

/* 텍스트: active 시 오른쪽에서 서서히 등장 (0.4s 딜레이) */
.highlights-swiper .swiper-slide-active .card-caption .headline {
	animation: slideCardFromRight 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

/* 카드 이미지 */
.card-image {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.7;
}
/* ── 카드 캡션 (텍스트 오버레이) ── */
.card-caption {
	position: absolute;
	padding: 80px;
	max-width: 600px;
	word-break: keep-all;
	z-index: 2;
}

/* 위치 변형 */
.card-caption.top-center {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}

.card-caption.top-left {
	top: 0;
	left: 0;
	text-align: left;
}
	.card-caption.top-right {
	top: 0;
	right: 0;
	text-align: left;
}
	.card-caption.bottom-left {
	bottom: 0;
	left: 0;
	text-align: left;
}
.card-caption.bottom-right {
	bottom: 0;
	right: 0;
	text-align: left;
}

.card-caption.bottom-center {
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}

.card-caption.center-left {
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	text-align: left;
}

.card-caption .eyebrow {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 8px;
	opacity: 0.8;
}

.card-caption .headline {
	display: block;
	width: 100%;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.4;
	color: rgb(255,255,255,0.8);
}

.card-caption .headline .highlight {
	display: block;
	margin-bottom: 8px;
	font-size: 28px;
	font-weight: 700;
	background: var(--main-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ── 하단 네비게이션 영역 ── */
.gallery-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-top: 28px;
	position: relative;
}

/* 텍스트 도트 네비게이션 */
.text-dotnav {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
}

.text-dotnav li {
	position: relative;
	padding: 0 2px;
}
.text-dotnav li button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
/* 도트 원 */
.text-dotnav li button .dot-circle {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.3);
	transition: background-color 0.3s ease, width 0.3s ease;
	position: relative;
	overflow: hidden;
}
/* 활성 도트: 가로 바 형태로 확장 + 진행 애니메이션 */
.text-dotnav li.active button .dot-circle {
	width: 36px;
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.25);
}
.text-dotnav li.active button .dot-circle::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: var(--color-dark);
	border-radius: 4px;
	animation: dotProgress 5s linear forwards;
}
@keyframes dotProgress {
	from { width: 0%; }
	to   { width: 100%; }
}
/* 도트 레이블 텍스트 */
.text-dotnav li button .dot-label {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.4);
	white-space: nowrap;
	transition: color 0.3s ease;
}
.text-dotnav li.active button .dot-label {
	color: rgba(255, 255, 255, 0.85);
}
/* 재생/일시정지 버튼 */
.play-pause-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	margin-left: 12px;
	color: rgba(255, 255, 255, 0.6);
	transition: color 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
.play-pause-btn:hover {
	color: var(--color-dark);
}
.play-pause-btn svg {width: 24px; height: 24px;}

/* product features */
.section {position: relative;}

.features-inner {padding: 20rem 0 0;}
.features-inner .section-header {padding: 20rem 0 10rem;}
.features-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem;}
.features-item {border-radius: 4rem; background: rgba(255,255,255,0.05); overflow: hidden; opacity: 0; transition:var(--transition-custom2); -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); transition-property: opacity, transform, -webkit-transform; will-change: transform, opacity;}
.features-item:nth-child(1) {transition-delay: 0.0s;}
.features-item:nth-child(2) {transition-delay: 0.2s;}
.features-item:nth-child(3) {transition-delay: 0.4s;}
.features-item:nth-child(4) {transition-delay: 0.6s;}
.features-item:nth-child(5) {transition-delay: 0.8s;}
.features-item:nth-child(6) {transition-delay: 1.0s;}
.features-list.animated .features-item {opacity: 1; transform: translateX(0);}
.features-item:hover {background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18);}
.features-item-inner {position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 38rem; padding: 0; background-color: #01020a;}
.features-num {
	display: block;
    font-size: 7.2rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: #0c1e35;
    line-height: 1;
    margin-bottom: 2.4rem;
    position: relative;
    z-index: 2;
    padding: 12rem 4rem 0;
}
.features-txt-box {position: relative; padding: 0 4rem 4rem; z-index: 2;}
.features-name {display: block; font-size: 2rem; font-weight: 600; letter-spacing: -0.04em; color: var(--main-color); line-height: 1.3; white-space: nowrap;}
.features-desc-txt {
	font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin-top: 1.6rem;
	word-break: keep-all;
}
.features-img-box {position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: right; overflow: hidden; z-index: 1;}
.features-img-box img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; width: 100%; object-fit: cover; object-position: right;}
.features-list.animated .features-item {
    opacity: 1;
    transform: translateX(0);
}
/* Discover More */
.look-closer-section {margin: 4rem auto 0;}
.viewer-card {
    position: relative;
    background: #1c1c1e;
    border-radius: 4rem;
    overflow: hidden;
    min-height: 68rem;
    display: grid;
    grid-template-columns: 40rem 1fr;
}
/* ─── 왼쪽 패널 ─── */
.feature-panel {
	position: relative;
	padding: 4rem 4rem 4rem 8rem;
	z-index: 10;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
	overflow: hidden;
	height: 100%;
}
/* 항목 리스트 */
.feature-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	height: 100%;;
	justify-content: center;
}
.feature-list .feature-item {flex: 1;}
/* 항목 토글 버튼 */
.feature-btn {
	height: 4rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	background: transparent;
	border: none;
	color: var(--color-dark);
	font-size: 1.6rem;
	font-weight: 500;
	cursor: pointer;
	padding: 0.8rem 1.6rem 0.8rem 0.8rem;
	border-radius: 3rem;
	transition: background 0.2s;
	text-align: left;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.feature-btn:hover {background: rgba(255,255,255,0.08); padding-left: 0.8rem;}
.feature-btn span {
	display: flex;
	align-items: center;
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: -0.022em;
	white-space: nowrap;
}
/* 아이콘 원형 */
.btn-icon {
	width: 2.0rem;
	height: 2.0rem;
	border-radius: 50%;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.25s, border-color 0.25s, transform 0.3s;
	position: relative;
	font-size: 2.4rem;
	color: rgba(255,255,255,0.7);
}
/* 기본: add 아이콘 표시, sub 아이콘 숨김 (opacity 토글 → reflow 없음) */
.btn-icon .icon-add,
.btn-icon .icon-sub {
	font-size: 2.0rem;
	transition: opacity 0.2s;
	position: absolute;
}
.btn-icon .icon-add { opacity: 1; }
.btn-icon .icon-sub { opacity: 0; color: var(--color-dark); }

/* 활성 항목: 배경 채우고 sub 아이콘으로 전환 */
.feature-item.active .btn-icon {
	background: rgba(255,255,255,0.25);
	color: var(--color-dark);
}
.feature-item.active .btn-icon .icon-add { opacity: 0; }
.feature-item.active .btn-icon .icon-sub { opacity: 1; font-size: 1.2rem;}

/* 활성 항목 버튼 */
.feature-item.active .feature-btn {background: rgba(255,255,255,0.08);}

/* ─── 펼쳐지는 설명 영역 ─── */
.feature-detail {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature-item.active .feature-detail {
	max-height: 300px;
}
/* detail-inner: Apple 스타일 fade + translateY 애니메이션 */
.detail-inner {
	background: rgba(255,255,255,0.08);
	border-radius: 2.8rem;
	padding: 1.6rem;
	margin: 0.8rem 0;
	/* 기본(접힌) 상태 */
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	/* 접힐 때: opacity 300ms / transform 400ms */
	transition:
		opacity 300ms ease-in-out 0ms,
		transform 400ms ease-in-out 0ms,
		visibility 0ms linear 400ms;
}

/* 펼쳐질 때: opacity 600ms(250ms delay) / transform 400ms(0ms delay) */
.feature-item.active .detail-inner {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition:
		opacity 600ms ease-in-out 250ms,
		transform 400ms ease-in-out 0ms,
		visibility 0ms linear 0ms;
}
.detail-title {
	font-size: 1.5rem;
	font-weight: 600;
	color: #f5f5f7;
	margin-bottom: 6px;
	letter-spacing: -0.005em;
	white-space: nowrap;
}
.detail-desc {
	font-size: 1.4rem;
	line-height: 1.6;
	color: rgba(255,255,255,0.72);
	word-break: keep-all;
}
/* ─── 위/아래 네비게이션 화살표 ─── */
.nav-arrows {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	position: absolute;
	left: 2.4rem;
	top: 50%;
	transform: translateY(-50%);
}
.nav-arrow {
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	background: rgba(255,255,255,0.12);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-dark);
	transition: background 0.2s;
	font-size: 1.6rem;
}
.nav-arrow:hover {background: rgba(255,255,255,0.22);}
.nav-arrow:disabled {opacity: 0.3; cursor: default;}
/* ─── 오른쪽 이미지 패널 ─── */
.image-panel {
	position: relative;
	overflow: hidden;
	min-height: 540px;
}
.feature-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}
.feature-image.active { opacity: 1; transform: scale(1); }
.feature-default {object-position: center 20%;}
/* 이미지 좌측 그라디언트 블렌딩 */
.image-panel::before {
	content: '';
	position: absolute;
	inset: 0;
	left: 0;
	width: 80px;
	background: linear-gradient(to right, #1c1c1e, transparent);
	z-index: 2;
	pointer-events: none;
}

/* 이미지/영상 위 컬러 오버레이 */
/* .image-panel::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #010610 0%, #000 100%);
	opacity: 0.45;
	z-index: 1;
	pointer-events: none;
} */

  /* ─── 닫기 버튼 (우상단) ─── */
  .close-btn {
    position: absolute;
    top: 4rem;
    right: 4rem;
    width: 3.2rem;
    height: 3.2rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--color-dark);
    font-size: 1.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
	z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: background 0.2s, opacity 0.3s ease;
  }
  .viewer-card.has-active .close-btn {
    opacity: 1;
    pointer-events: auto;
  }
  .close-btn:hover { background: rgba(255,255,255,0.25); }

/* 제품사양 */
.specifications {position: relative; padding: 40rem 0;}





/* -------- 공통 스크롤바  -------- */
.custom-scrollbar-cover,
.cm-scroll-drag-guide{display:none;}

/* product */
.discover-more {max-width: var(--area-box-width); margin: 0 auto; padding: 10rem; background: rgba(255, 255, 255, 0.05); border-radius: 8rem; backdrop-filter: blur(3rem);}
.discover-more .tit-box strong {font-size:4rem; color: var(--color-dark); font-weight: 700; letter-spacing:-0.02em; line-height:1.4;}
.discover-more .tit-box strong > span {color: var(--main-color);}
.discover-more .tit-box p {font-size:2.2rem; font-weight: 600; color: var(--color-dark); line-height:1.5em; letter-spacing:-0.02em; margin-top: 0.8rem;}

/* 공통 타이틀 */
.tit-box {position: relative;}
.tit-box.center {text-align:center;}
.tit-box .sub-tit {font-size:2rem; letter-spacing:-0.02em; color:var(--main-color); font-family: var(--font-family2); font-weight: 600; line-height:1.2; white-space: nowrap;}
.tit-box .tit {display: block; font-size:4.8rem; letter-spacing:-0.05em; color:#fff; font-weight: 600; line-height:1.2; margin-top: 1.6rem;}
.tit-box .tit > em {font-size:4rem; letter-spacing:-0.05em; color: var(--color-dark); font-weight: 700; line-height:1.2;}
.tit-box .txt {font-size:2rem; letter-spacing:-0.05em; color:#fff; opacity: 0.6; font-weight: 500; line-height:1.5; margin-top: 2rem;}

/* applications */
.applications {position: relative; margin: 30rem auto;}
.applications .tit-box .tit {font-size: 4.4rem; font-weight: 500;}
.applications .tit-box .txt + .txt {margin-top: 0.4rem;}
.applications-list {margin-top: 8rem; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4rem;}
.applications-list li {position: relative; width: 100%; display:flex; align-items: center; gap: 8rem; padding: 4rem;}
.applications-list li:before {display: block; content:""; position:absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 0.05); border-radius:4rem; opacity: 0; transform: scale(0.8); transition: var(--transition-custom2); backdrop-filter: blur(3rem);}
.applications-list li.animated:before {opacity: 1; transform: scale(1.0);}
.applications-list li .img-box {width: 40%; flex-shrink: 0;}
.applications-list li .img-box img {border-radius: 3.2rem; max-width: 100%;}
.applications-list li .txt-box {flex: 1; width: 100%;}
.applications-list .tit {font-size:4rem; letter-spacing:-0.02em; color: var(--color-dark); font-weight: 700; line-height:1.2;}
.applications-list .sub-tit {font-size:1.8rem; letter-spacing:-0.02em; color:var(--main-color); font-weight: 700; line-height:1.667; margin-top: 0.5rem;}
.applications-list .txt {display:inline-block; font-size:1.6rem; letter-spacing:-0.02em; color:rgba(255,255,255,0.6); font-weight: 500; line-height:1.4; margin-top: 1.6rem; word-break: keep-all;}
.applications-list .txt.dot-txt {position: relative; display:block; padding-left: 1.6rem;}
.applications-list .txt.dot-txt + .txt.dot-txt {margin-top: 0.5rem;}
.applications-list .txt.dot-txt:before {content: ""; position: absolute; left: 0; top: 44%; display:inline-block; width: 0.4rem; height: 0.4rem; border-radius: 50%; background-color: var(--body-color);}

/* product img */
.product-wrap {position: relative; padding: 20rem;}
.product-wrap .product-img-area {width: 100%; display: flex; align-items: flex-start; justify-content: center; gap: 2.4rem; padding: 8rem 0 0;}
.product-wrap .product-img-area .product-img-box {border-radius: 4rem; overflow: hidden; opacity: 0; transform: translate3d(-30px, 0, 0); transition: var(--transition-custom2); transition-property: opacity, transform, -webkit-transform; will-change: transform, opacity;}
.product-img-zoom {position: relative; display: block; overflow: hidden;}
.product-img-zoom img {display: block; width: 100%; transition: filter 0.4s ease;}
.product-zoom-icon {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0);
    transition: background 0.4s ease;
}
.product-zoom-icon i {
    font-size: 3.6rem; color: var(--color-dark); line-height: 1;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.product-img-zoom:hover img { filter: brightness(0.3); }
.product-img-zoom:hover .product-zoom-icon { background: rgba(0,0,0,0.2); }
.product-img-zoom:hover .product-zoom-icon i { opacity: 1; transform: translateY(0); }
.product-wrap .product-img-area .product-img-box:nth-child(1) {transition-delay: 0.0s;}
.product-wrap .product-img-area .product-img-box:nth-child(2) {transition-delay: 0.2s;}
.product-wrap .product-img-area .product-img-box:nth-child(3) {transition-delay: 0.4s;}
.product-wrap .product-img-area .product-img-box:nth-child(4) {transition-delay: 0.6s;}
.product-wrap .product-img-area.animated .product-img-box {opacity: 1; transform: translateX(0);}

/* ── Magnific Popup 커스텀 ── */
.mfp-bg {
    background: rgba(0, 0, 0, 0.55) !important;
    opacity: 1 !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
/* 닫기 버튼 */
.mfp-close {
    width: 4.8rem !important;
    height: 4.8rem !important;
    background: rgba(255,255,255,0.12) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;
    top: 2.4rem !important;
    right: 2.4rem !important;
    backdrop-filter: blur(4px);
    transition: background 0.2s !important;
}
.mfp-close i { font-size: 2.2rem; color: var(--color-dark); line-height: 1; }
.mfp-close:hover { background: rgba(255,255,255,0.25) !important; }
.mfp-close:after { display: none !important; }
/* 화살표 */
.mfp-arrow {
    width: 5.6rem !important;
    height: 5.6rem !important;
    background: rgba(255,255,255,0.12) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-top: -2.8rem !important;
    backdrop-filter: blur(4px);
    transition: background 0.2s !important;
    opacity: 1 !important;
}
.mfp-arrow-left  { left:  2.4rem !important; }
.mfp-arrow-right { right: 2.4rem !important; }
.mfp-arrow:before, .mfp-arrow:after,
.mfp-arrow .mfp-a, .mfp-arrow .mfp-b { display: none !important; }
.mfp-arrow i { font-size: 2.8rem; color: var(--color-dark); line-height: 1; }
.mfp-arrow:hover { background: rgba(255,255,255,0.25) !important; }

/* product detail */
.detail-box {padding: 20rem 0;}
.detail-box .tit-box {max-width:1400px; margin: 0 auto;}
.detail-list-box {position: relative; background: rgba(255,255,255,0.05); padding:10rem; border-radius:8rem; margin-top: 10rem; backdrop-filter:blur(30px);}
.detail-area-box {display: flex; align-items: center; justify-content: center;text-align:center; position: relative; top: 0; left: 50%; transform: translateX(-50%);}
.detail-area-box > .img-box {width: 64rem; border-radius: 4rem; overflow: hidden; box-shadow: 0 2rem 4rem rgba(0,0,0,.18), 0 6rem 10rem rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.35); position: relative; z-index: 1;}
.detail-area-box > .img-box img {max-width:100%; border-radius: 3.2rem;}
.option-list li::before {content:''; position:absolute; height:2px; top:calc(50% - 2px); left:50%; transform-origin:0 50%; background-image:linear-gradient(90deg, transparent 50%, rgba(255,255,255,0.55) 50%), linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.1)); background-size:8px 2px, 100% 2px; animation:monitorDashMove 0.7s linear infinite; opacity:0; transition:opacity 0.6s ease, background-image 0.3s ease;}
.option-list li.selected::before {background-image:linear-gradient(90deg, transparent 50%, var(--main-color) 50%), linear-gradient(90deg, rgba(39,102,248,0.2), rgba(39,102,248,0.2));}
@keyframes monitorDashMove {to {background-position:-12px 0, 0 0;}}
.option-list li:nth-of-type(1)::before {width:46rem; transform:rotate(18deg);}
.option-list li:nth-of-type(2)::before {width:24.5rem; transform:rotate(158.2deg); left: 5%;}
.option-list li:nth-of-type(3)::before {width:58.3rem; transform:rotate(-184.6deg);}
.option-list li:nth-of-type(4)::before {width:44.3rem; transform:rotate(-12.75deg);}
.option-list li:nth-of-type(5)::before {width:40.8rem; transform:rotate(20.46deg); margin-top: -3.5rem; margin-left: 5rem;}
.option-list li:nth-of-type(6)::before {width:32rem; transform:rotate(-162deg);}
.option-list {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;}
.option-list li {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition:var(--transition-custom2); opacity: 0;}
.option-list li img {max-width:100%; display: none;}
.option-list li:nth-of-type(1) {width: 32rem;}
.option-list li:nth-of-type(2) {transition-delay:0.2s; width: 32rem;}
.option-list li:nth-of-type(3) {transition-delay:0.4s; width: 24rem;}
.option-list li:nth-of-type(4) {transition-delay:0.6s; width: 25.5rem;}
.option-list li:nth-of-type(5) {transition-delay:0.8s; width: 24rem;}
.option-list li:nth-of-type(6) {transition-delay:1.0s; width: 26rem;}
.detail-area-box > .img-box.animated ~ .option-list li {opacity: 1;}
.detail-area-box > .img-box.animated ~ .option-list li:nth-of-type(1) {margin-top: -36rem; margin-left: -60rem;}
.detail-area-box > .img-box.animated ~ .option-list li:nth-of-type(2) {margin-top: -24rem; margin-left: 60rem;}
.detail-area-box > .img-box.animated ~ .option-list li:nth-of-type(3) {margin-top: -1.5rem; margin-left: 58rem;}
.detail-area-box > .img-box.animated ~ .option-list li:nth-of-type(4) {margin-top: 12rem; margin-left: -53rem;}
.detail-area-box > .img-box.animated ~ .option-list li:nth-of-type(5) {margin-top: -10rem; margin-left: -60rem;}
.detail-area-box > .img-box.animated ~ .option-list li:nth-of-type(6) {margin-top: 17rem; margin-left: 42rem;}
.detail-area-box > .img-box.animated ~ .option-list li::before {opacity:1; transition:opacity 0.6s ease 1.6s;}
.option-list li em {font-size: 2.0rem; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.6); font-weight: 500; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; border-radius: 4rem; padding: 1.6rem 2.4rem; background: #343434; transition: background 0.2s, color 0.2s; cursor: pointer;}
.option-list li.selected em {background: var(--main-color); color: var(--color-dark);}

/* 설명 패널 */
.detail-info-panel {display: none; margin-top: 4rem;}
.detail-info-panel-inner {position: relative; background: rgba(255,255,255,0.07); border-radius: 3.2rem; padding: 3rem 4rem; padding-right: 6rem; opacity: 0; transform: translateY(-8px); transition: opacity 0.35s ease, transform 0.35s ease;}
.detail-info-panel.open .detail-info-panel-inner {opacity: 1; transform: translateY(0);}
.detail-info-close {position: absolute; top: 4rem; right: 4rem; width: 3.2rem; height: 3.2rem; background: rgba(255,255,255,0.1); border: none; border-radius: 50%; color: var(--color-dark); font-size: 1.6rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s;}
.detail-info-close:hover {background: rgba(255,255,255,0.2);}
.detail-info-title {display: block; font-size: 2rem; font-weight: 700; color: var(--color-dark); margin-bottom: 1.2rem; letter-spacing: -0.01em; font-family: var(--font-family1) !important;}
.detail-info-desc {font-size: 1.6rem; font-weight: 400; color: rgba(255,255,255,0.65); line-height: 1.7; letter-spacing: -0.02em; word-break: keep-all;}
.option-list li:nth-of-type(1) em {margin-top: 1.6rem; margin-left: -2.3rem;}
.option-list li:nth-of-type(2) em {margin-top: -0.6rem; margin-left: -3.3rem;}
.option-list li:nth-of-type(3) em {margin-top: 1rem; margin-left: -3.3rem;}
.option-list li:nth-of-type(4) em {margin-top: -1.5rem; margin-left: -3.3rem;}
.option-list li:nth-of-type(5) em {margin-top: -2.2rem; margin-left: -2.2rem;}
.option-list li:nth-of-type(6) em {margin-top: 0; margin-left: 6rem;}

/* 제품사양 */
.spec-inner {display:flex; align-items:flex-start; justify-content: space-between;}
.spec-inner .tit-box {width:40%; padding: 0 8rem 0 4rem;}
.spec-inner .tit-box .tit em {display:inline-block; margin-bottom: 0.8rem;}
.spec-list {display:flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 0.8rem; flex:1;}
.spec-list li {display: flex; flex-wrap: nowrap; width: 100%; height: 6rem; border-radius:1.6rem; background: rgba(255,255,255,0.05); text-align: left; overflow: hidden; backdrop-filter:blur(30px);}
.spec-list li p {width: 20%; height: 100%; display: flex; align-items: center; flex-shrink: 0; padding: 0 2.4rem; background: rgba(255,255,255,0.05); font-size:1.8rem; letter-spacing:-0.05em; color: var(--color-dark); font-weight: 500; text-align:left;}
.spec-list li em {width: 80%; height: 100%; display: flex; align-items: center; padding: 0 4rem; font-size:1.6rem; letter-spacing:-0.05em; color: var(--color-dark); opacity: 0.5; font-weight: 500; line-height:1.4em; word-break: keep-all;}


/* =============================================
   SERVICE PAGE
   ============================================= */

/* Sub-page visual intro animation */
@keyframes subVisualIntro {
	from { transform: scale(0.9); }
	to   { transform: scale(1); }
}

/* Service Visual */
.service-visual {
	position: relative;
	margin: var(--area-padding);
	height: calc(100vh - calc(var(--area-padding) * 2));
	min-height: 66rem;
	border-radius: 6rem;
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, #060500 0%, #100d02 45%, #1c1804 100%);
	overflow: hidden;
	transform-origin: center center;
	animation: subVisualIntro 1.6s ease-in-out forwards;
}
.service-visual::before {
	content: '';
	position: absolute;
	inset: 0;
	/* background-image:
		linear-gradient(rgba(212,168,55,0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(212,168,55,0.07) 1px, transparent 1px);
	background-size: 72px 72px; */
	z-index: 1;
}
.service-visual-glow {
	position: absolute;
	width: 70rem;
	height: 70rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(212,168,55,0.22) 0%, rgba(180,133,40,0.08) 50%, transparent 70%);
	top: -10rem;
	right: -10rem;
	z-index: 1;
}
.service-visual #canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}
.service-visual-inner {
	position: relative;
	z-index: 3;
	width: 100%;
}
.service-visual-txt-box {
	max-width: var(--area-box-width);
	margin: 0 auto;
	padding: 0 4rem;
}
.service-visual-label {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	font-size: 1.3rem;
	letter-spacing: 0.3em;
	color: var(--main-color);
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 2.4rem;
}
.service-visual-label::before {
	content: '';
	display: inline-block;
	width: 3rem;
	height: 1px;
	background: var(--main-color);
}
.service-visual-tit {
	font-size: 5.6rem;
	font-weight: 600;
	color: var(--color-dark);
	line-height: 1.2;
	letter-spacing: -0.03em;
	margin-bottom: 2.4rem;
}
.service-visual-tit b { color: var(--main-color); font-weight: inherit; }
.service-visual-txt-box .char { opacity: 0; display: inline; color: rgba(255,255,255,0.15); }
.service-visual-txt-box .char.space { opacity: 1; }
.service-visual-txt-box.transmission-active .char { animation: transmissionGlow 0.9s ease forwards; }
.service-visual-desc {
	font-size: 2.4rem;
    letter-spacing: -0.05em;
    color: var(--color-dark);
    line-height: 1.5;
    margin-top: 0.5rem;
}


/* Service intro */
.service { padding: 12rem 0; }
.service .tit-box { margin-bottom: 8rem; }

/* Service Cards */
.service-card-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.4rem;
}
.service-card {
	background: rgba(255,255,255,0.05);
	border-radius: 4rem;
	opacity: 0;
	-webkit-transform: translate3d(-30px, 0, 0);
	transform: translate3d(-30px, 0, 0);
	transition: var(--transition-custom2);
	transition-property: opacity, transform, -webkit-transform;
	will-change: transform, opacity;
	padding: 4rem;
	cursor: default;
	backdrop-filter: blur(3rem);
}
.service-card:nth-child(1) {transition-delay: 0.1s;}
.service-card:nth-child(2) {transition-delay: 0.25s;}
.service-card:nth-child(3) {transition-delay: 0.4s;}
.service-card:nth-child(4) {transition-delay: 0.55s;}
.service-card:nth-child(5) {transition-delay: 0.7s;}
.service-card:nth-child(6) {transition-delay: 0.85s;}
.service-card-list.animated .service-card {opacity: 1; -webkit-transform: none; transform: none;}
/* .service-card:hover {
	background: rgba(255,255,255,0.07);
	transform: translateY(-6px);
} */
.service-card-icon {
	width: 10rem;
	height: 10rem;
	border-radius: 50%;
	background: rgba(255,255,255,0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 2.8rem;
	transition: background 0.3s ease;
}
.service-card-icon i { font-size: 2.6rem; color: var(--main-color); }
.service-card-icon img {width: 5.6rem; height: auto;}
.service-card-en {
	font-size: 1.4rem;
	color: var(--main-color);
	font-weight: 500;
	margin-bottom: 0.8rem;
	font-family: var(--font-family2);
	white-space: nowrap;
}
.service-card-tit {
	display: block;
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--color-dark);
	margin-bottom: 1.6rem;
	line-height: 1.6;
	white-space: nowrap;
}
.service-card-desc {
	font-size: 1.8rem;
	color: var(--body-color);
	line-height: 1.6;
	letter-spacing: -0.05em;
	margin-bottom: 2.4rem;
	word-break: keep-all;
}
.service-card-features {
	border-top: 1px solid rgba(255,255,255,0.08);
	padding-top: 2.4rem;
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}
.service-card-features li {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 1.6rem;
	color: var(--body-color);
	line-height: 1.4;
}
.service-card-features li::before {
	content: '';
	flex-shrink: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--main-color);
	opacity: 0.8;
}

/* Service Process */
.service-process .tit-box { margin-bottom: 8rem; }
.process-list {
	display: flex;
	align-items: flex-start;
	position: relative;
}
.process-item {
	flex: 1;
	text-align: center;
	padding: 4rem;
	position: relative;
	z-index: 1;
	border-radius: 3.2rem;
	opacity: 0;
	-webkit-transform: translate3d(-30px, 0, 0);
	transform: translate3d(-30px, 0, 0);
	transition: var(--transition-custom2), background 0.5s ease;
	transition-property: opacity, transform, -webkit-transform, background;
	will-change: transform, opacity;
}
.process-item.active {
	background: var(--main-color);
	transition-delay: 0s !important;
}
.process-item.active .process-num {
	background: #fff;
	color:var(--main-color)
}
.process-item.active .process-en {
	color: #fff;
}
.process-item.active .process-tit {
	color: rgba(255,255,255,1);
}
.process-item.active .process-desc {
	color: rgba(255,255,255,0.8);
}
.process-item:nth-child(1) { transition-delay: 0.05s; }
.process-item:nth-child(2) { transition-delay: 0.18s; }
.process-item:nth-child(3) { transition-delay: 0.31s; }
.process-item:nth-child(4) { transition-delay: 0.44s; }
.process-item:nth-child(5) { transition-delay: 0.57s; }
.process-item:nth-child(6) { transition-delay: 0.70s; }
.process-item:nth-child(7) { transition-delay: 0.83s; }
.process-list.animated .process-item { opacity: 1; -webkit-transform: none; transform: none; }
.process-num {
	position: relative;
	width: 6.2rem;
	height: 6.2rem;
	border-radius: 50%;	
	background: var(--main-rgb10);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 2.4rem;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-dark);
	/* border: 8px solid rgba(255,255,255,0.1); */
	transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}
/* .process-num:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	width: 270%;
	height: 1px;
	background-color: var(--main-color);
	opacity: 0.2;
} */
.process-item:last-child .process-num:after {display: none;}
/* .process-item:hover .process-num {
	background: var(--main-color);
	color: var(--color-dark);
	border-color: var(--main-color);
} */
.process-tit {
	display: block;
	font-size: 2.4rem;
	font-weight: 600;
	color: var(--color-dark);
	letter-spacing: -0.02em;
	margin-bottom: 2.4rem;
	white-space: nowrap;
	transition: color 0.5s ease;
}
.process-en {
	font-size: 1.6rem;
	color: var(--main-color);
	margin-bottom: 1.6rem;
	font-family: var(--font-family2);
	font-weight: 500;
	white-space: nowrap;
	transition: color 0.5s ease;
}
.process-desc {
	font-size: 1.6rem;
	color: var(--body-color);
	line-height: 1.6;
	font-weight: 500;
	letter-spacing: -0.05rem;
	word-break: keep-all;
	transition: color 0.5s ease;
}

/* =============================================
   ABOUT PAGE
   ============================================= */
/* About Article */
article.about { padding: 0; }

/* Philosophy — Mission / Vision */
.philosophy-section,
.business-section {
	position: relative;
	width: 100%;
	padding: 20rem 8rem;
	background-color: var(--main-rgb10);
}
.philosophy-section .tit-box .tit, 
.business-section .tit-box .tit {
	color: var(--color-dark)
}
.philosophy-section .tit-box .txt,
.business-section .tit-box .txt {
	color: var(--body-color);
	opacity: 1;
}
.philosophy-con {	
	width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin: 4rem auto 0;
}
.business-con {	
	width: 100%;
	margin: 4rem auto 0;
}
/* .business-con {		
	grid-template-columns: repeat(4, 1fr);
} */
.philosophy-item,
.business-item {
	background: #fff;
	border-radius: 4rem;
	padding: 4rem;
	position: relative;
	/* overflow: hidden; */
	opacity: 0;
	backdrop-filter: blur(3rem);
	-webkit-transform: translate3d(-30px, 0, 0);
	transform: translate3d(-30px, 0, 0);
	transition: var(--transition-custom2);
	transition-property: opacity, transform, -webkit-transform;
	will-change: transform, opacity;
}
.philosophy-item:nth-child(1),
.business-item:nth-child(1) { transition-delay: 0.1s; }
.philosophy-item:nth-child(2),
.business-item:nth-child(2) { transition-delay: 0.25s; }
.business-item:nth-child(3) { transition-delay: 0.5s; }
.business-item:nth-child(4) { transition-delay: 0.75s; }
.philosophy-con.animated .philosophy-item,
.business-con.animated .business-item { opacity: 1; -webkit-transform: none; transform: none; }

.philosophy-icon,
.business-icon {
	width: 10rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.8rem;
    transition: background 0.3s ease;
}
.philosophy-icon img,
.business-icon img {
    width: 100%;
    height: auto;
}
.philosophy-icon i,
.business-icon i { font-size: 2.4rem; color: var(--main-color); }
.philosophy-img,
.business-img {display: block; width: 100%; margin-bottom: 4rem; border-radius: 3.2rem; overflow: hidden;}
.philosophy-label {
	font-size: 1.6rem;
	color: var(--main-color);
	font-weight:600;
	margin-bottom: 0.8rem;
	font-family: var(--font-family2);
	white-space: nowrap;
}
.business-label {
	display: inline-block;
	width: 3.6rem;
	height: 3.6rem;
	font-size: 1.6rem;
	color: #fff;
	font-weight:500;
	text-align: center;
	line-height: 3.6rem;
	margin-bottom: 1.6rem;
	font-family: var(--font-family2);
	white-space: nowrap;
	background-color: var(--main-color);
	border-radius: 50%;
}
.philosophy-tit,
.business-tit {
	display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 1.6rem;
    line-height: 1.4;
    word-break: keep-all;
}
.philosophy-txt,
.business-txt {
	font-size: 1.8rem;
    color: var(--body-color);
    line-height: 1.6;
	font-weight: 500;
    /* letter-spacing: -0.05em; */
    margin-bottom: 2.4rem;
    word-break: keep-all;
}

/* Stats */
.about-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 2rem;
	overflow: hidden;
	margin-top: 10rem;
}
.stat-item {
	padding: 5rem 3.6rem;
	text-align: center;
	border-right: 1px solid rgba(255,255,255,0.07);
	position: relative;
	transition: background 0.3s ease;
}
.stat-item:last-child { border-right: none; }
.stat-item:hover { background: rgba(39,102,248,0.05); }
.stat-num {
	font-size: 5.2rem;
	font-weight: 800;
	color: var(--color-dark);
	letter-spacing: -0.05em;
	line-height: 1;
	margin-bottom: 1.2rem;
}
.stat-num em { color: var(--main-color); font-style: normal; }
.stat-unit {
	font-size: 2.8rem;
	font-weight: 700;
	color: rgba(255,255,255,0.4);
}
.stat-label {
	font-size: 1.45rem;
	color: rgba(255,255,255,0.45);
	letter-spacing: -0.01em;
	margin-top: 0.8rem;
}

/* Core Values */
.values-section {
	padding: 20rem 0;
}
.values-section .tit-box { margin-bottom: 4rem; }
.values-section .tit-box .tit {color: var(--color-dark)}
.values-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.4rem;
}
.value-card {
	background: var(--main-rgb10);
	border-radius: 4rem;
	padding: 4rem;
	opacity: 0;
	backdrop-filter: blur(3rem);
	-webkit-transform: translate3d(-30px, 0, 0);
	transform: translate3d(-30px, 0, 0);
	transition: var(--transition-custom2), background 0.3s ease, border-color 0.3s ease;
	transition-property: opacity, transform, -webkit-transform, background, border-color;
	will-change: transform, opacity;
}
.value-card:nth-child(1) { transition-delay: 0.1s; }
.value-card:nth-child(2) { transition-delay: 0.25s; }
.value-card:nth-child(3) { transition-delay: 0.4s; }
.value-card:nth-child(4) { transition-delay: 0.55s; }
.values-list.animated .value-card { opacity: 1; -webkit-transform: none; transform: none; }
.value-icon {
	width: 6.0rem;
	height: 6.0rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 2.8rem;
}
.value-icon i { font-size: 2.6rem; color: var(--main-color); }
.value-en {
	font-size: 1.6rem;
    color: var(--main-color);
    font-weight: 500;
    margin-bottom: 0.8rem;
    font-family: var(--font-family2);
    white-space: nowrap;
}
.value-tit {
	display: block;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 1.6rem;
    line-height: 1.4;
    white-space: nowrap;
}
.value-desc {
	font-size: 1.8rem;
    color:var(--body-color);
	font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.05em;
    word-break: keep-all;
}

/* Timeline */
.timeline-section {
	margin-top: 12rem;
	padding-top: 10rem;
	border-top: 1px solid rgba(255,255,255,0.07);
}
.timeline-section .tit-box { margin-bottom: 6rem; }
.timeline {
	position: relative;
	padding-left: 2px;
}
.timeline::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1rem;
	bottom: 2rem;
	width: 1px;
	background: linear-gradient(to bottom, var(--main-color), rgba(39,102,248,0.1) 80%, transparent);
}
.timeline-item {
	position: relative;
	display: flex;
	gap: 5rem;
	padding: 0 0 5.6rem 5.6rem;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
	position: absolute;
	left: -0.55rem;
	top: 0.55rem;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background: var(--main-color);
	box-shadow: 0 0 0 4px rgba(39,102,248,0.15);
	flex-shrink: 0;
}
.timeline-year {
	flex-shrink: 0;
	width: 6rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--main-color);
	letter-spacing: 0.02em;
	padding-top: 0.2rem;
}
.timeline-body { flex: 1; }
.timeline-tit {
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--color-dark);
	letter-spacing: -0.03em;
	margin-bottom: 0.8rem;
	line-height: 1.35;
}
.timeline-desc {
	font-size: 1.5rem;
	color: rgba(255,255,255,0.45);
	line-height: 1.7;
	word-break: keep-all;
}

/* Location */
.location-section {
	position: relative;
}
.location-section .tit-box {
	position: relative;
	z-index: 2;
	margin-bottom: 4rem;
}
.location-con {
	position: relative;
	display: block;
	width: 100%;
	min-height: 80rem;
	margin: 0 0 -6rem;
	padding: 0;
	background: none;
	border-radius: 0;
	overflow: hidden;
}
.location-info {
	position: absolute;
	z-index: 2;
	top: 8rem;
	left: 8rem;
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
	padding: 4rem;
	-webkit-transform: translate3d(-30px, 0, 0);
	transform: translate3d(-30px, 0, 0);
	transition: var(--transition-custom2);
	transition-property: opacity, transform, -webkit-transform;
	will-change: transform, opacity;
	backdrop-filter: blur(1rem);
    border-radius: 4rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.3);
    transition: 0.3s ease-out;
}
.location-info-item { display: flex; gap: 2rem; align-items: flex-start; }
.location-info-icon {
	flex-shrink: 0;
	width: 4.8rem;
	height: 4.8rem;
	border-radius: 50%;
	background: rgba(0, 78, 146, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(1rem);
}
.location-info-icon img {width: 2.8rem; height: auto;}
.location-info-icon i { font-size: 2rem; color: var(--main-color); }
.location-info-txt dt {
	font-size: 1.4rem;
	color: #fff;
	margin-bottom: 0.8rem;
	font-family: var(--font-family2);
	font-weight: 500;
}
.location-info-txt dd {
	font-size: 1.6rem;
	color: var(--main-color);
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}
.location-info-txt dd span {
	display: block;
	margin-top: 0.8rem;
	font-size:1.4rem;
	color: var(--main-color);
}
.location-info-txt dd a { color: var(--main-color); transition: color 0.2s; }
.location-info-txt dd a:hover { color: var(--main-color); }
.location-map {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	border: none;
	min-height: 70rem;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	-webkit-transform: translate3d(-30px, 0, 0);
	transform: translate3d(-30px, 0, 0);
	transition: var(--transition-custom2);
	transition-property: opacity, transform, -webkit-transform;
	will-change: transform, opacity;
}
.location-info { transition-delay: 0.1s; }
.location-map { transition-delay: 0.25s; }
.location-con.animated .location-info,
.location-con.animated .location-map { opacity: 1; -webkit-transform: none; transform: none; }
#vts-map {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
	min-height: 70rem;
	border-radius: 0;
}
#vts-map:before {
	content:"";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	/* background: radial-gradient(circle at 20% 20%, rgba(0, 180, 255, 0.2), transparent 40%), radial-gradient(circle at 80% 30%, rgba(0, 120, 255, 0.2), transparent 40%), radial-gradient(circle at 50% 100%, rgba(0, 60, 255, 0.15), transparent 50%), linear-gradient(135deg, #0a0f1f, #0e1a35, #101c3a); */
	background-color: rgba(0, 78, 146, 0.6);;
}
#vts-map .leaflet-pane.leaflet-map-pane {
	opacity: 0.7;
}
/* Leaflet 라이트 타일 필터 */
.vts-map-tiles {
	filter: grayscale(15%) contrast(95%) brightness(1.04);
}

/* Leaflet 커스텀 마커 */
.vts-marker-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.vts-marker-pin {
	width: 2rem;
	height: 2rem;
	border-radius: 50% 50% 50% 0;
	background: var(--main-color);
	border: 3px solid #fff;
	transform: rotate(-45deg);
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.vts-marker-label {
	margin-top: 0.8rem;
	font-size: 1.4rem;
	font-weight: 600;
	color: #fff;
	background: var(--main-color);
	padding: 0.4rem 1.6rem;
	border-radius: 2.4rem;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	letter-spacing: 0.05em;
}
/* Leaflet 팝업 라이트 스타일 */
.leaflet-popup-content-wrapper {
	background: #fff !important;
	color: var(--body-color) !important;
	border-radius: 1.6rem !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}
.leaflet-container a.leaflet-popup-close-button {top: 4px !important; right: 8px !important; color: var(--body-color) !important;}
.leaflet-popup-tip {
	background: #fff !important;
}
.leaflet-popup-content {
	font-size: 1.2rem !important;
	line-height: 1.4;
}
.leaflet-popup-content strong {
	display: block;
	font-size: 1.5rem;
	color: var(--color-dark);
	margin-bottom: 0.4rem;
}
.leaflet-container .leaflet-control-attribution {
	background: rgba(255,255,255,0.75) !important;
	color: rgba(0,0,0,0.45) !important;
	font-size: 1rem;
}
.leaflet-container .leaflet-control-attribution a { color: rgba(0,0,0,0.55); }
.location-map iframe {
	width: 100%;
	height: 100%;
	min-height: 36rem;
	border: none;
	filter: grayscale(70%) brightness(1.08) contrast(95%);
}

/* ---- Business Area: 확장형 패널 ---- */
.business-expand {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	overflow: hidden;
	width: 100%;
	height: 60rem;
	margin-top: 4rem;
}
.business-expand-item {
	position: relative;
	overflow: hidden;
	flex: 1 1 0;
	min-width: 6rem;
	margin: 0 1.2rem;
	border-radius: 6rem;
	background-image: var(--optionBackground);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	cursor: pointer;
	transition: flex-grow 0.6s cubic-bezier(0.45, 0, 0.2, 1),
		border-radius 0.6s cubic-bezier(0.45, 0, 0.2, 1),
		background-size 0.6s cubic-bezier(0.45, 0, 0.2, 1);
}
.business-expand-item:first-child { margin-left: 0; }
.business-expand-item:last-child { margin-right: 0; }
.business-expand-item:not(.active) { flex-grow: 1; }
.business-expand-item.active {
	flex-grow: 8;
	border-radius: 6rem;
	background-size: cover;
}
.be-shadow {
	position: absolute;
	inset: 0;
	/* box-shadow: inset 0 -8rem 0 -6rem rgba(0,0,0,0.85); */
	transition: box-shadow 0.6s cubic-bezier(0.05, 0.61, 0.41, 0.95);
	background: radial-gradient(circle at 20% 20%, rgba(0, 180, 255, 0.2), transparent 40%), radial-gradient(circle at 80% 30%, rgba(0, 120, 255, 0.2), transparent 40%), radial-gradient(circle at 50% 100%, rgba(0, 60, 255, 0.15), transparent 50%), linear-gradient(135deg, #0a0f1f, #0e1a35, #101c3a);
    opacity: 0.8;
}
.business-expand-item.active .be-shadow {
	box-shadow: inset 0 -16rem 12rem -12rem rgba(0,0,0,0.85), inset 0 -16rem 12rem -8rem rgba(0,0,0,0.55);
	opacity: 0.2;
}
.be-label {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: absolute;
	right: 1rem;
	bottom: 4rem;
	left: 1rem;	
	padding: 0.8rem 1.6rem;
	pointer-events: none;
	transition: bottom 0.6s cubic-bezier(0.05, 0.61, 0.41, 0.95),
		left 0.6s cubic-bezier(0.05, 0.61, 0.41, 0.95),
		right 0.6s cubic-bezier(0.05, 0.61, 0.41, 0.95),
		opacity 0.35s ease;
}
.business-expand-item.active .be-label {
	bottom: 4rem;
	left: 4rem;
	right: 4rem;
	gap: 2.4rem;
	opacity: 1;
	pointer-events: auto;
	padding: 0.8rem 1.6rem;
	background-color: rgba(255,255,255,0.2);
	backdrop-filter: blur(1rem);
	border-radius: 10rem;
}
.be-num {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 50%;
	bottom: 0;
	width: 4.8rem;
	height: 4.8rem;
	transform: translateX(-50%);
	border-radius: 50%;
	background: none;
	color: var(--main-color);
	background-color: #fff;
	font-size: 1.8rem;
	font-weight: 700;
	font-family: var(--font-family2);
	letter-spacing: 0.05em;
	/* transition: left 0.6s cubic-bezier(0.05, 0.61, 0.41, 0.95),
		bottom 0.6s cubic-bezier(0.05, 0.61, 0.41, 0.95),
		transform 0.6s cubic-bezier(0.05, 0.61, 0.41, 0.95),
		width 0.6s cubic-bezier(0.05, 0.61, 0.41, 0.95),
		height 0.6s cubic-bezier(0.05, 0.61, 0.41, 0.95),
		background 0.4s ease,
		color 0.4s ease; */
}
.business-expand-item.active .be-num {
	position: relative;
	left: 0;
	bottom: 0;
	transform: translateX(0);
	width: 4.8rem;
	height: 4.8rem;
}
.be-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #fff;
	min-width: 0;
	gap: 0.8rem;
}
.be-info > div {
	position: relative;
	left: 2rem;
	opacity: 0;
	transition: left 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
}
.business-expand-item.active .be-info > div { left: 0; opacity: 1; }
.be-main {
	font-size: 2.8rem;
	font-weight: 600;
	white-space: nowrap;
}
.be-sub {
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1.6;
	max-width: 100%;
	transition-delay: 0.1s;
}

/* ================================================================
 * Solutions
================================================================ */
.solutions {position: relative;}
.solution-intro-section .tit-box .tit { color: var(--color-dark); }
.solution-intro-section .tit-box .txt { color: var(--body-color); opacity: 1; }

.solution-section { padding: 8rem 0; border-bottom: 1px solid rgba(0,0,0,0.07); }
.solution-section:last-of-type { border-bottom: none; }
.solution-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6rem;
	align-items: center;
	opacity: 0;
	-webkit-transform: translate3d(-30px, 0, 0);
	transform: translate3d(-30px, 0, 0);
	transition: var(--transition-custom2);
	transition-property: opacity, transform, -webkit-transform;
	will-change: transform, opacity;
}
.solution-row.animated { opacity: 1; -webkit-transform: none; transform: none; }
.solution-row-reverse .solution-media { order: 2; }
.solution-row-reverse .solution-body { order: 1; }
.solution-media {
	border-radius: 4rem;
	overflow: hidden;
}
.solution-media img { width: 100%; height: auto; display: block; }
.solution-brand {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--main-color);
	letter-spacing: 0.05em;
	margin-bottom: 2.4rem;
	width: 200px;
}
.solution-tagline {
	display: block;
	font-size: 3rem;
	font-weight: 700;
	color: var(--color-dark);
	line-height: 1.3;
	margin-bottom: 2rem;
}
.solution-desc {
	font-size: 2.0rem;
	color: var(--body-color);
	line-height: 1.6;
	margin-bottom: 4rem;
	word-break: keep-all;
}
.solution-feature-list {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	margin-bottom: 3rem;
	list-style: none;
	padding: 0;
}
.solution-feature-list li {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	font-size: 1.5rem;
	color: var(--color-dark);
	line-height: 1.5;
	word-break: keep-all;
}
.solution-feature-list li i {
	color: var(--main-color);
	font-size: 1.8rem;
	flex-shrink: 0;
	margin-top: 0.1rem;
}

/* 글로벌 파트너 :: 이미지·텍스트 동기화 Swiper (solutions.html section04) */
.partner-swiper-wrap {
	display: flex;
	align-items: flex-start;
	gap: 8rem;
	margin-top: 8rem;
}
.partner-swiper-media {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}
.partner-img-swiper {position: relative; z-index: 1; overflow: hidden; border-radius: 3.2rem;}
.partner-img-swiper .solution-media {position: relative; width: 100%; border-radius: 3.2rem; overflow: hidden; aspect-ratio: 1 / 1; max-height: 540px;}
.partner-img-swiper .solution-media img {width: 100%; height: 100%; object-fit: cover; display: block;}
.partner-img-swiper .solution-media:after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.03), rgba(0,0,0,0.3));
}

.partner-swiper-text {flex: 1 1 0; min-width: 0;}
.partner-txt-swiper {overflow: hidden;}
.partner-swiper-control {display: flex; align-items: center; gap: 1.6rem; margin-bottom: 2.8rem;}
.partner-swiper-count {font-size: 1.6rem; color: var(--body-color); white-space: nowrap;}
.partner-swiper-control button {
	width: 4.4rem;
	height: 4.4rem;
	border-radius: 50%;
	background: transparent;
	color: var(--color-dark);
	font-size: 1.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0,0,0,0.15);
	transition: var(--transition-custom);
	flex-shrink: 0;
}
.partner-swiper-control button:hover {background: var(--main-color); color: #fff; border-color: var(--main-color);}
.partner-swiper-control button.swiper-button-disabled {opacity: 0.35; pointer-events: none;}
.partner-cta {margin-top: 0.8rem;}

/* Why VTS (solutions.html section05) */
/* .solution.section05.bg-primary {text-align: center; padding-bottom: 40rem; margin-bottom: -20rem;} */
.solution.section05 {
	position: relative;
	z-index: 0;
	text-align: center; 
	padding-bottom: 40rem !important; 
	margin-bottom: -6rem;
	overflow: hidden;
	background: radial-gradient(circle at 20% 20%, rgba(0, 180, 255, 0.2), transparent 40%), radial-gradient(circle at 80% 30%, rgba(0, 120, 255, 0.2), transparent 40%), radial-gradient(circle at 50% 100%, rgba(0, 60, 255, 0.15), transparent 50%), linear-gradient(135deg, #0a0f1f, #0e1a35, #101c3a);
}
.solution.section05:before {
	content: "";
    position: absolute;
    inset: -4%;
    background: url(../images/solutions/bg_whyVts.png) right center / cover no-repeat fixed;
    opacity: 0.1;
    z-index: -1;
}
.why-vts-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8rem;
	min-height: 44rem;
}
.why-vts-circle {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 40rem;
	height: 40rem;
	border-radius: 50%;
	background: rgba(0, 78, 146, .2);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
	z-index: 0;
	color: #fff;
	font-size: 6rem;
	font-weight: 500;
	font-family: var(--font-family2);
	line-height: 1.2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4rem;
	flex-direction: column;
	opacity: 0.8;
}
.why-vts-circle strong {
	display: block;
	font-size: 10rem;
	font-weight: 700;
	opacity: 1;
}
.why-vts-type {position: relative; display: inline-block;}
.why-vts-type:after {content: ""; white-space: pre;}
.why-vts-circle.typing-active .why-vts-type-sm:after {
	animation: whyVtsTypeSm 0.9s linear 1;
	animation-fill-mode: forwards;
}
.why-vts-circle.typing-active .why-vts-type-lg:after {
	animation: whyVtsTypeLg 0.9s linear 0.9s 1;
	animation-fill-mode: forwards;
}
@keyframes whyVtsTypeSm {
	0%   {content: "";}
	33%  {content: "W";}
	67%  {content: "Wh";}
	100% {content: "Why";}
}
@keyframes whyVtsTypeLg {
	0%   {content: "";}
	33%  {content: "V";}
	67%  {content: "VT";}
	100% {content: "VTS";}
}
/* .why-vts-circle h1 {
	display: inline-flex;
	position: relative;
	line-height: 1.1;   
	font-size: 6rem;
	font-weight: 500;
	margin: 0;
    padding: 0;
	text-shadow: 0 0 60px rgba(0, 0, 0, 0.2);
}	
.why-vts-circle h1:after {
	position: absolute;
    top: 0;
    bottom: -10px;
    left: 0;
    display: inline-block;
    overflow: hidden;
    width: 0%;
    white-space: pre;
    content: attr(data-text);
		-webkit-text-fill-color: transparent;
		-webkit-text-stroke: 1px hsla(0, 0%, 100%, 0.7);
    will-change: width;
		animation: grow 7s cubic-bezier(0.86, 0, 0.07, 1) .4s infinite alternate both;
}
.why-vts-circle h1 span {
	display: inline-block;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
	-webkit-text-fill-color: transparent;
	margin: 0;
    padding: 0;
	position: relative;
}	
.why-vts-circle h1 span::after {
	position: absolute;
	bottom: 0;
	left: 0;
	display: inline-block;
	overflow: hidden;
	width: 0%;
	white-space: pre;
	content: attr(data-text);
	will-change: width;
		animation: grow 7s cubic-bezier(0.86, 0, 0.07, 1) 2.15s infinite alternate both;		
		background: linear-gradient(to bottom, rgba(255,255,255,.85) 0%, rgba(254,254,254,.65) 100%);
		-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

@keyframes grow {
	0%,10%,90%,100% {
		width: 0%;
	}
	50% {
		width: 100%;
	}
} */
/* .why-vts-circle:before,
.why-vts-circle:after {
	content: "";
    position: absolute;
    top: 10rem;
    left: 4rem;
    width: 6rem;
    height: 6rem;
    background: url(../images/solutions/quotation_left.gif) no-repeat 0 0;
    z-index: 2;
    background-size: contain;
    opacity: 1;
}
.why-vts-circle:after {
	left: auto;
	right: 4rem;
	background: url(../images/solutions/quotation_right.gif) no-repeat 0 0;
	background-size: contain;
} */
.why-vts-col {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 8rem;
	max-width: 50%;
	text-align: left;
}
/* .why-vts-col-left .why-vts-item:nth-child(2) {
	padding-left: 8rem;
} */
.why-vts-col-right {margin-top: 12rem;}
.why-vts-item .icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 8.0rem;
	height: 8.0rem;
	border-radius: 2.4rem;
	background: rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    transition: .3s ease-out;
    transition: transform 0.3s ease, background 0.3s ease;
	font-size: 3.6rem;
	color: #fff;
	margin-bottom: 3.2rem;
}
.why-vts-item .icon-box img {
	width: 4.8rem;
	height: auto;
}
.why-vts-item strong {display: block; font-size: 2.8rem; font-weight: 600; color: #fff; margin-bottom: 1.6rem;}
.why-vts-item p {font-size: 2.0rem; color: rgba(255,255,255,0.65); line-height: 1.6; word-break: keep-all;}
.section05 .btn.more {display: block; margin: 4rem auto 0; width: 240px; font-family: var(--font-family1);}
.section05 .tit-box .txt {font-size: 2.0rem;}

/* 산업 분야 (Industries We Serve) */
.solution-industry-section {
	margin: 8rem 0;
	background: var(--main-rgb10);
	border-radius: 6rem;
	text-align: center;
}
.solution-industry-section .tit-box.center { display: flex; flex-direction: column; align-items: center; }
.solution-industry-section .tit-box .tit { color: var(--color-dark); }
.solution-industry-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.4rem;
	margin-top: 8rem;
	list-style: none;
	padding: 0;
}
.solution-industry-item {
	background: #fff;
	border-radius: 3rem;
	padding: 4rem 3rem;
	text-align: left;
}
.solution-industry-en {
	font-size: 1.4rem;
    color: var(--main-color);
    font-family: var(--font-family2);
    font-weight: 500;
    letter-spacing: 0;
    margin-bottom: 1.6rem;
}
.solution-industry-item strong {
	display: block;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 1.6rem;
	letter-spacing: -0.05rem;
}
.solution-industry-desc {
	text-align: start;
	font-size: 1.6rem;
	color: var(--body-color);
	font-weight: 500;
	line-height: 1.6;
	margin-bottom: 2rem;
	word-break: keep-all;
}
.solution-industry-tags {
	display: flex;
    flex-direction: column;
    gap: 0.8rem;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
}
.solution-industry-tags li {
	position: relative;
    padding-left: 2.8rem;
    font-size: 1.6rem;
    color: var(--color-dark);
    line-height: 1.4;
    word-break: keep-all;
}
.solution-industry-tags li:before {
	content: "\eb7b";
	font-family: remixicon !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-size: 1.6rem;
	position: absolute;
	left: 0;
	top: 0;
	color: var(--main-color);
	font-weight: bold;
}

/* 산업 분야 :: Swiper (solutions.html section02) */
.solution.section02.bg-blue {padding: 20rem 0;}
.solution-industry-swiper-wrap {position: relative; margin-top: 6rem;}
/* 카드 진입 애니메이션: 우→좌 (index.html main-products와 동일한 방식) */
@keyframes industrySlideIn {
	from { transform: translate3d(120px, 0, 0); }
	to   { transform: none; }
}
.solution-industry-swiper .swiper-slide {
	transform: translate3d(120px, 0, 0);
}
.solution-industry-swiper.animated .swiper-slide {
	animation: industrySlideIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.solution-industry-swiper {overflow: hidden;}
.solution-industry-swiper .swiper-wrapper {align-items: stretch;}
.solution-industry-swiper .swiper-slide {width: 30rem; height: auto; flex-shrink: 0;}
.solution-industry-swiper .solution-industry-item {
	position: relative;
	overflow: hidden;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #fff;
	border-radius: 4rem;
	padding: 4rem;
	text-align: center;
}
/* 호버 시 부드럽게 나타나는 배경 이미지 (layout.css의 .card-hover:hover .opacity-0 와 연동) */
.solution-industry-swiper .solution-industry-item .opacity-0 {
	position: absolute;
	inset: 0;
	opacity: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}
.solution-industry-swiper .solution-industry-item .opacity-0:after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.3));
}
.solution-industry-swiper .solution-industry-item > *:not(.opacity-0) {
	position: relative;
	z-index: 1;
	transition: color 0.3s ease-in-out;
}

.solution-industry-swiper .solution-industry-item .icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6rem;
	height: 6rem;
	margin-bottom: 0.8rem;
	font-size: 4.0rem;
	color: var(--main-color);
}
.solution-industry-swiper .solution-industry-item:hover .icon-box,
.solution-industry-swiper .solution-industry-item:hover .solution-industry-tags,
.solution-industry-swiper .solution-industry-item:hover > *:not(.opacity-0) {display: none;}
.solution-industry-swiper .solution-industry-en {text-align: center;}
.solution-industry-swiper .solution-industry-item strong {text-align: center;}
.solution-industry-swiper .solution-industry-tags {}
.solution-industry-nav {display: flex; justify-content: flex-end; gap: 1.2rem; margin-top: 4rem;}
.solution-industry-nav button {
	width: 5.2rem;
	height: 5.2rem;
	border-radius: 50%;
	background: transparent;
	color: var(--color-dark);
	font-size: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0,0,0,0.15);
	transition: var(--transition-custom);
}
.solution-industry-nav button:hover {background: var(--main-color); color: #fff; border-color: var(--main-color);}
.solution-industry-nav button.swiper-button-disabled {opacity: 0.35; pointer-events: none;}

/* CTA */
.solution-cta-section {
	padding: 10rem 0 4rem;
	text-align: center;
}
.solution-cta-tit {
	display: block;
	font-size: 2.8rem;
	font-weight: 700;
	color: var(--color-dark);
	margin-bottom: 1.6rem;
}
.solution-cta-txt {
	font-size: 1.7rem;
	color: var(--body-color);
	margin-bottom: 3.2rem;
}
.solution-cta-btns {
	display: flex;
	gap: 1.6rem;
	justify-content: center;
}

/* ================================================================
 * Support :: Media 탭 + Swiper
================================================================ */
.support .section {
	padding: 20rem 0;
}
.section01 .tab_btn { position: relative; margin-top: 8rem; }
.section01 .tab_btn .scroll { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.section01 .tab_btn .scroll::-webkit-scrollbar { display: none; }
.section01 .tab_btn .scroll ul { display: flex; gap: 1.2rem; white-space: nowrap; }
.section01 .tab_btn .scroll ul li button {
	position: relative;
	display: inline-flex; 
	align-items: center; 
	justify-content: center;
	height: 5rem; 
	padding: 0 3.2rem;
	border: 1px solid #e1e5ea;
	border-radius: 10rem;
	background: #fff;
	color: var(--color-dark);
	font-size: 1.6rem; 
	font-weight: 500; 
	white-space: nowrap;
	letter-spacing: -0.02em;
	font-family: var(--font-family2);
	cursor: pointer;
    z-index: 1;
    transition: .2s ease-out, backdrop-filter .2s 1s ease-out;
    overflow: hidden;
}

.section01 .tab_btn .scroll ul li button:hover { border-color: var(--main-color); color: var(--main-color); }
.section01 .tab_btn .scroll ul li.active button { background: var(--main-gradient); border-color: transparent; color: var(--body-color); }
/* .section01 .tab_btn.active::after {
	content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 6rem;
	background: linear-gradient(to right, transparent, #fff);
	pointer-events: none; opacity: 1; transition: opacity 0.2s ease;
}
.section01 .tab_btn.active.scroll__active::after { opacity: 0.3; } */

.section01 .tab_btn .scroll ul li button:before {
	content: "";
	width: 100%;
	height: 100%;
	background-color: var(--main-color);
	transform: translateX(-102%);
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 99px;
	transition: .2s ease-out;
	z-index: -1;
} 
.section01 .tab_btn .scroll ul li.active button:before {transform: translateX(0);}
/* .section01 .tab_btn .scroll ul li button:hover:before {transform: translateX(0);} */

.section01 .tab_btn .scroll ul li.active button {color: #fff;}
.section01 .tab_con { margin-top: 8rem; }
.section01 .tab_con .con { display: none; }
.section01 .tab_con .con.active { display: block; }
.section01 .slider_wrap .swiper-container { overflow: hidden; }
.section01 .slider_wrap .swiper-slide { width: 40rem; margin-right: 4rem; opacity: 0; padding-bottom: 2.4rem;}
.section01 .slider_wrap .swiper-slide:last-child { margin-right: 0; }
.section01 .slider_wrap .swiper-slide a.btn-download {
	position: relative; 
	display: flex; 
	border-radius: 1.2rem; 
	overflow: hidden;	
	background: #fff;
	color: var(--main-color);
	display: inline-flex; 
	align-items: center; 
	gap: 0.6rem;
	flex-shrink: 0;
	height: 3.6rem; 
	padding: 0 1.8rem;
	border: 1px solid var(--main-color);
	font-size: 1.4rem; 
	font-weight: 600; 
	transition: var(--transition-custom);
}
.section01 .slider_wrap .swiper-slide a.btn-download:hover {color: #fff; background-color: var(--main-color);}
.section01 .slider_wrap .swiper-slide img { width: 100%; object-fit: cover; transition: transform 0.4s ease; }
.section01 .slider_wrap .swiper-slide a:hover img { transform: scale(1.06); }
.section01 .slider_wrap .swiper-slide a:hover::before { background: var(--main-color); transform: translate(-50%, -50%) scale(1.08); }
.section01 .slider_wrap .swiper-scrollbar { position: relative; width: 100%; height: 0.4rem; margin-top: 4rem; background: rgba(0,0,0,0.08); border-radius: 10px; }
.section01 .slider_wrap .swiper-scrollbar-drag { background: var(--main-color); border-radius: 10px; cursor: grab; }

/* 탭 클릭/스크롤 진입 시 슬라이드 우→좌 순차 등장 */
@keyframes mediaSlideIn {
	from { opacity: 0; transform: translate3d(14rem, 0, 0); }
	to   { opacity: 1; transform: none; }
}
.section01 .con.animated .swiper-slide { animation: mediaSlideIn 0.7s ease-out both; }
.section01 .con.animated .swiper-slide:nth-child(1)  { animation-delay: 0s; }
.section01 .con.animated .swiper-slide:nth-child(2)  { animation-delay: 0.06s; }
.section01 .con.animated .swiper-slide:nth-child(3)  { animation-delay: 0.12s; }
.section01 .con.animated .swiper-slide:nth-child(4)  { animation-delay: 0.18s; }
.section01 .con.animated .swiper-slide:nth-child(5)  { animation-delay: 0.24s; }
.section01 .con.animated .swiper-slide:nth-child(6)  { animation-delay: 0.30s; }
.section01 .con.animated .swiper-slide:nth-child(7)  { animation-delay: 0.36s; }
.section01 .con.animated .swiper-slide:nth-child(8)  { animation-delay: 0.42s; }
.section01 .con.animated .swiper-slide:nth-child(9)  { animation-delay: 0.48s; }
.section01 .con.animated .swiper-slide:nth-child(10) { animation-delay: 0.54s; }

/* ================================================================
 * Product Gallery UI
================================================================ */
#content.product-gallery-page { padding: 20rem 0; }

/* 레이아웃: 메인(2/3) + 사이드바(1/3) */
.pg-layout { display: flex; gap: 8rem; align-items: flex-start;}
.pg-main { flex: 1; min-width: 0; }
.pg-sidebar { flex-shrink: 0; width: 28rem; align-self: flex-start; }

 /* 필터 탭 */
.pg-filter-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3.2rem; }
.pg-filter {
	position: relative;
	display: inline-flex;
	align-items: center;
	/* background: #f0f2f5; */
	border-radius: 10rem;
	padding: 0.4rem;
	gap: 0;
}
.pg-filter-slider {
	position: absolute;
	top: 0.4rem; bottom: 0.4rem; left: 0.4rem;
	background: var(--main-gradient);
	border-radius: 10rem;
	transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 0;
	pointer-events: none;
}
.pg-filter-btn {
	position: relative; z-index: 1;
	height: 4rem; padding: 0 2.2rem;
	border: none; border-radius: 10rem;
	background: transparent; color: var(--body-color);
	font-size: 1.5rem; font-weight: 500; font-family: var(--font-family2);
	cursor: pointer; white-space: nowrap;
	transition: color 0.25s ease;
}
.pg-filter-btn:hover { color: var(--color-dark); }
.pg-filter-btn.active { color: #fff; font-weight: 600; }
.pg-result-count { font-size: 1.4rem; color: var(--body-color); white-space: nowrap; }
.pg-result-count strong { color: var(--main-color); }

/* 브랜드 헤더 (2depth 브랜드 페이지용) */
.pg-brand-header { margin-bottom: 8rem;}
.pg-brand-header-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
.pg-brand-logo { height: 4rem; width: auto; object-fit: contain; flex-shrink: 0; }
.pg-brand-logo.buerkert {height: 6rem;}
.pg-brand-name {display: none; font-size: 2.8rem; font-weight: 700; color: var(--color-dark); margin-bottom: 0.8rem; font-family: var(--font-family2); }
.pg-brand-desc { font-size: 1.8rem; color: var(--body-color); line-height: 1.6; word-break: keep-all; font-weight: 500; opacity: 1;}

/* 카드 그리드 */
.pg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem; }
.pg-card { background: #fff; border-radius: 2.4rem; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.pg-card:hover { transform: translateY(-0.6rem); box-shadow: 0 1.2rem 3.2rem rgba(15,23,42,0.1); }
.pg-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.pg-card-inner { display: flex; flex-direction: column; height: 100%; color: inherit; }

/* 카드 카테고리 행: 카테고리명 + Datasheet 다운로드 */
.pg-cat-row {
	width: 100%;
	display: flex; 
	align-items: center; 
	justify-content: space-between;
}
.pg-cat-row .pg-category { margin-bottom: 0; }
.pg-card-dl {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--main-color);
	text-decoration: none;
	white-space: nowrap;
	padding: 0.8rem 1.6rem;
	border-radius: 10rem;
	background: #fff;
	transition: background 0.2s ease, color 0.2s ease;
}
.pg-card-dl i { font-size: 1.3rem; }
.pg-card-dl:hover { background: var(--main-color); color: #fff; }
.pg-card-dl[data-tooltip]::before {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 1rem);
	left: 50%; transform: translateX(-50%) translateY(4px);
	background: rgba(18,18,18,0.9); color: #fff;
	font-size: 1.2rem; font-weight: 500;
	white-space: nowrap;
	padding: 0.5rem 1.2rem;
	border-radius: 0.6rem;
	pointer-events: none;
	opacity: 0; visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	backdrop-filter: blur(8px);
	z-index: 10;
}
.pg-card-dl[data-tooltip]::after {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%; transform: translateX(-50%) translateY(4px);
	width: 0; height: 0;
	border: 6px solid transparent;
	border-top-color: rgba(18,18,18,0.9);
	pointer-events: none;
	opacity: 0; visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 10;
}
.pg-card-dl[data-tooltip]:hover::before,
.pg-card-dl[data-tooltip]:hover::after {
	opacity: 1; visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* SNS 공유 버튼 */
.pg-share-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.pg-share-btn {
	position: relative;
	width: 3.6rem; 
	height: 3.6rem;
	display: flex; 
	align-items: center; 
	justify-content: center;
	border-radius: 50%;
	background-color: var(--main-rgb10);
	color: var(--color-dark);
	font-size: 1.6rem;
	border: none; cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	text-decoration: none;
}
.pg-share-btn:hover { background: var(--main-color); color: #fff; }
.pg-share-kakao:hover { background: #FEE500; color: #3C1E1E; }
.pg-share-btn[data-tooltip]::before {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 1rem);
	left: 50%; transform: translateX(-50%) translateY(4px);
	background: rgba(18,18,18,0.9); color: #fff;
	font-size: 1.2rem; font-weight: 500;
	white-space: nowrap;
	padding: 0.5rem 1.2rem;
	border-radius: 0.6rem;
	pointer-events: none;
	opacity: 0; visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	backdrop-filter: blur(8px);
	z-index: 10;
}
.pg-share-btn[data-tooltip]::after {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%; transform: translateX(-50%) translateY(4px);
	width: 0; height: 0;
	border: 6px solid transparent;
	border-top-color: rgba(18,18,18,0.9);
	pointer-events: none;
	opacity: 0; visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 10;
}
.pg-share-btn[data-tooltip]:hover::before,
.pg-share-btn[data-tooltip]:hover::after {
	opacity: 1; visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.pg-card-img { position: relative; aspect-ratio: 16/14; overflow: hidden; background: url(../images/product/product_bg.png) no-repeat center; background-size: cover;}
.pg-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.pg-card:hover .pg-card-img img { transform: scale(1.04); }
.pg-brand-badge {
	position: absolute; 
	top: 2.4rem; 
	left: 2.4rem;
	padding: 0.8rem 1.6rem; 
	border-radius: 10rem;
	font-size: 1.3rem; 
	font-weight: 500; 
	font-family: var(--font-family2);
	color: #fff;
	background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(15px) opacity(1);
}
/* .pg-brand-badge.burkert { background: rgba(0, 78, 146, 0.2) }
.pg-brand-badge.valmac  { background: rgba(94,52,50, 0.2)} */

.pg-card-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; padding: 2.4rem 2.4rem 3.6rem; background-color: #f3f6f9;}
.pg-category { font-size: 1.4rem; color: var(--main-color); font-weight: 600; letter-spacing: -0.02em; display: block; }
.pg-name { font-size: 2.4rem; font-weight: 700; color: var(--color-dark); line-height: 1.2; letter-spacing: -0.05rem;}
.pg-name em { display: block; font-size: 1.6rem; font-weight: 500; color: var(--body-color); font-style: normal; margin-top: 0.8rem;}
.checked-list,
.doted-list {list-style: none; display: flex; width: 100%; flex-direction: column; gap: 8px; align-items: flex-start; justify-content: flex-start;}
.checked-list li {list-style: none; position: relative; padding-left: 2.4rem; color: var(--body-color); font-weight: 500; font-size: 1.4rem; word-break: keep-all; line-height: 1.4;}
.checked-list li:before {
	content: "\eb7b"; 
	font-family: remixicon !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	position: absolute;
	left: 0;
	font-size: 1.6rem;
	font-weight: bold;
	color: var(--main-color);
}
.doted-list li {
	list-style: none; 
	position: relative; 
	width: 100%;
	padding-left: 1.2rem; 
	color: var(--body-color); 
	font-weight: 500; 
	font-size: 1.4rem; 
	word-break: keep-all; 
	line-height: 1.4;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2.4rem;
}
.doted-list li span {display: inline-block; white-space: nowrap;}
.doted-list li span:last-child {
	font-weight: 700;
	word-break: keep-all;
	text-align: right;
	white-space: unset;
}
.doted-list li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6rem;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background-color: var(--main-color);
}
.pg-desc { flex: 1; font-size: 1.4rem; line-height: 1.65; color: var(--body-color); word-break: keep-all; margin-bottom: 1.6rem; }
.pg-more {
	display: inline-flex; 
	align-items: center; 
	gap: 0.4rem;
	font-size: 1.4rem; 
	font-weight: 600; 
	color: var(--main-color);
	transition: gap 0.2s ease;
	display: none;
}
.pg-card:hover .pg-more { gap: 0.8rem; }

/* 사이드바 */
.pg-sidebar { display: flex; flex-direction: column; gap: 2.4rem; }

.pg-search-box {
	display: flex; align-items: center; gap: 1.2rem;
	padding: 0 2rem; height: 5rem;
	border: 1px solid #e1e5ea; border-radius: 10rem;
	background: #fff; transition: border-color 0.2s ease;
}
.pg-search-box:focus-within { border-color: var(--main-color); }
.pg-search-box i { font-size: 1.8rem; color: var(--body-color); flex-shrink: 0; }
.pg-search-input { flex: 1; font-size: 1.4rem; color: var(--color-dark); background: none; border: none; outline: none; }
.pg-search-input::placeholder { color: rgba(15,23,42,0.35); }

.pg-sidebar-section { padding-top: 2.4rem; border-top: 1px solid #eceef1; }
.pg-sidebar-title { font-size: 1.8rem; font-weight: 700; color: var(--color-dark); margin-bottom: 1.6rem; }

.pg-cat-list { display: flex; flex-direction: column; gap: 0.4rem; }
.pg-cat-list li button {
	width: 100%; display: flex; align-items: center; justify-content: space-between;
	padding: 0.9rem 1.2rem; border-radius: 0.8rem;
	font-size: 1.5rem; color: var(--body-color); cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	text-align: left;
}
.pg-cat-list li button:hover { background: rgba(0,78,146,0.06); color: var(--main-color); }
.pg-cat-list li.active button { background: rgba(0,78,146,0.08); color: var(--main-color); font-weight: 600; }
.pg-cat-list li button span { font-size: 1.4rem; color: var(--body-color); }

.pg-featured-list { display: flex; flex-direction: column; gap: 1.6rem; }
.pg-featured-item a { display: flex; align-items: center; gap: 1.4rem; text-decoration: none; }
.pg-featured-img { width: 6.4rem; height: 6.4rem; border-radius: 1rem; overflow: hidden; flex-shrink: 0; background: #f4f5f7; }
.pg-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.pg-featured-item a:hover .pg-featured-img img { transform: scale(1.06); }
.pg-featured-info strong { display: block; font-size: 1.4rem; font-weight: 600; color: var(--color-dark); margin-bottom: 0.3rem; line-height: 1.3; }
.pg-featured-info span { font-size: 1.2rem; color: var(--body-color); }

/* Product Gallery :: Download Center (사이드바) */
.pg-dl-guide { font-size: 1.2rem; color: var(--body-color); margin-bottom: 1.6rem; line-height: 1.5; }
.pg-dl-group { margin-bottom: 2rem; }
.pg-dl-group:last-child { margin-bottom: 0; }
.pg-dl-group[hidden] { display: none; }
.pg-dl-cat-label { font-size: 1.4rem; font-weight: 700; color: var(--main-color); font-family: var(--font-family2); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 0.8rem; }
.pg-dl-list { display: flex; flex-direction: column; gap: 0; }
.pg-dl-list li a {
	display: flex; align-items: center; gap: 0.8rem;
	padding: 0.8rem 0;
	font-size: 1.4rem; color: var(--color-dark);
	text-decoration: none;
	transition: color 0.2s ease;
}
.pg-dl-list li:last-child a { border-bottom: none; }
.pg-dl-list li a:hover { color: var(--main-color); }
.pg-dl-list li a i { font-size: 1.6rem; color: var(--main-color); flex-shrink: 0; }
.pg-dl-icon {
	margin-left: auto; flex-shrink: 0;
	font-size: 1.6rem; color: var(--main-color);
	transition: transform 0.2s ease;
}
.pg-dl-list li a:hover .pg-dl-icon { transform: translateY(2px); }

/* Support :: Download Center 카드 (download-item) */
.section01 .tab_con .con { counter-reset: dlItem; }
.section01 .slider_wrap .swiper-slide .download-item {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 2.4rem; 
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	counter-increment: dlItem;
	box-shadow: 0 0.4rem 0.8rem 0 rgba(90, 116, 148, 0.4);
	overflow: hidden;
	min-height: 40rem;;
}
/* .download-item:hover { transform: translateY(-0.6rem); box-shadow: 0 1.6rem 4rem rgba(15,23,42,0.12); } */

.download-item .img-area {
	position: relative;
	width: 100%;
	height: 16rem;;
	background: url(../images/support/img_catalog.png) no-repeat 50% 0;
	background-size: cover;
	border-radius: 2.4rem 2.4rem 0 0;
	overflow: hidden;
}
.download-item .img-area::before {
	content: counter(dlItem, decimal-leading-zero);
	position: absolute; 
	top: 2.4rem;
	right: 2.4rem;
	font-family: var(--font-family2);
	font-size: 4.4rem; 
	font-weight: 600; 
	line-height: 1;
	color: rgba(15,23,42,0.08);
}
.download-item .text-area {
	position: relative;
	width: 100%;
	flex: 1;
	display: flex; 
	flex-direction: column;
	padding: 0 2.4rem 2.4rem;
	border-radius: 0 0 2.4rem 2.4rem;
	background-color: #fff;
	border: 1px solid #f3f3f3;
}
.download-item .icon {
	position: absolute;
	top: -1.6rem;
	left: 2.4rem;
	display: block;
	width: 6.4rem; 
	height: 6.8rem;
	border-radius: 1.6rem;
	background-color: #fff;
	box-shadow: 0 0.6rem 1.6rem rgba(15,23,42,0.14);
	z-index: 2;
}
.download-item .icon.pdf::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4.0rem;
	height: 4.0rem;
	background-color: var(--main-color);
	-webkit-mask: url(../images/icon/icon_pdf.svg) no-repeat 50% 50%;
	mask: url(../images/icon/icon_pdf.svg) no-repeat 50% 50%;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.download-item .icon.link::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4.0rem;
	height: 4.0rem;
	background-color: var(--main-color);
	-webkit-mask: url(../images/icon/icon_global.svg) no-repeat 50% 50%;
	mask: url(../images/icon/icon_global.svg) no-repeat 50% 50%;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.download-item h4 {
	display: block; 
	padding: 2.4rem 0 0 10rem; 
	font-size: 2.2rem; 
	font-weight: 600; 
	color: var(--color-dark); 
	line-height: 1.3; 
	letter-spacing: -0.05rem;
	font-family: var(--font-family2);
	word-break: keep-all;
}
.download-item p {
	flex: 1;
	margin-top: 2.4rem;
	font-size: 1.6rem; 
	font-weight: 500;
	line-height: 1.6;
	color: var(--body-color);
	word-break: keep-all;
}
.download-item .item-info {
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	flex-wrap: wrap; 
	gap: 1.2rem 1.6rem;	
	margin-top: 2.4rem; 
}
.download-item .file-meta { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.download-item .file-meta span { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 1.4rem; color: var(--body-color); font-family: var(--font-family2); white-space: nowrap; }
.download-item .file-meta i { font-size: 1.4rem; }
.download-item .btn-download i { font-size: 1.6rem; }
.download-item .btn-download:hover { background: var(--main-gradient); border-color: transparent; color: #fff; }

/* ================================================================
 * Technical Support
================================================================ */
.support .section02 {
	background: radial-gradient(circle at 20% 20%, rgba(0, 180, 255, 0.2), transparent 40%), radial-gradient(circle at 80% 30%, rgba(0, 120, 255, 0.2), transparent 40%), radial-gradient(circle at 50% 100%, rgba(0, 60, 255, 0.15), transparent 50%), linear-gradient(135deg, #0a0f1f, #0e1a35, #101c3a);
}
.support .section02:before {
	content: '';
    position: absolute;
    inset: 0;
    background: url(../../assets/images/support/bg_media.png) center / cover fixed no-repeat;
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}
.support .section02 .tit-box .sub-tit {color: #fff;}
.resources-section { padding: 0; }
.resources-section + .resources-section { padding-top: 40rem; }
.resources-section .tit-box { margin-bottom: 8rem; }

/* 다운로드 카드 */
.resource-dl-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; }
.resource-dl-card {
	position: relative;
	background: rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(1.5rem);
    backdrop-filter: blur(1.5rem);
	border-radius: 4rem;	
	overflow: hidden;
	opacity: 0;
	-webkit-transform: translate3d(-30px, 0, 0);
	transform: translate3d(-30px, 0, 0);
	transition: var(--transition-custom2), background 0.3s ease, border-color 0.3s ease;
	transition-property: opacity, transform, -webkit-transform, background, border-color;
	will-change: transform, opacity;
}

.resource-dl-card:nth-child(1) { transition-delay: 0.1s; }
.resource-dl-card:nth-child(2) { transition-delay: 0.25s; }
.resource-dl-card:nth-child(3) { transition-delay: 0.4s; }
.resource-dl-card:nth-child(4) { transition-delay: 0.55s; }
.resource-dl-list.animated .resource-dl-card { opacity: 1; -webkit-transform: none; transform: none; }
.resource-dl-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
.resource-dl-card-icon {	
    position: absolute;
	width: 8rem;
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    top: -4rem;
    transform: translateX(-50%);
    /* background-color: var(--main-color); */
    background-color: rgba(0, 78, 146, 0.5);
	-webkit-backdrop-filter: blur(1.5rem);
    backdrop-filter: blur(1.5rem);
    border-radius: 50%;
}
.resource-dl-card-icon i {
	font-size: 3.2rem;
	color: #fff;
}
.resource-dl-card .text-area {
	position: relative;	
	padding: 6rem 4rem 4rem;
}
.resource-dl-card-label {
	font-size: 1.6rem;
	color: var(--main-color);
	font-weight: 500;
	margin-bottom: 0.8rem;
	font-family: var(--font-family2);
	white-space: nowrap;
}
.resource-dl-card-tit {
	display: block;
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0.8rem 0 1.6rem;
    line-height: 1.4;
    white-space: nowrap;
}
.resource-dl-card-tit .icon {
	display: inline-block;
    width: 2.0rem;
    height: 2.0rem;
    margin-left: 0.4rem;
    position: relative;
    top: 0.2rem;
    opacity: 0;
    transition: all 0.4s;
    background: url(../images/icon/arrow-big-right.gif) no-repeat 0 center;
    background-size: contain;
	display: none;
}
.resource-dl-card-desc {
	font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    letter-spacing: -0.05em;
    word-break: keep-all;
}
.resource-dl-card a:hover {
	background-color: var(--main-color);
}
.resource-dl-card a:hover .resource-dl-card-label {
	color: var(--body-color);
}
.resource-dl-card a:hover .resource-dl-card-tit .icon {opacity: 1; display: inline-block;}
.resource-dl-list + .tit-box {margin-top: 12rem;}
.list-technical {
	position: relative;
	width: 100%;
	margin-top: 4rem;
	padding: 4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;	
	gap: 4rem;
}
.list-technical:before {	
    content: '';
	position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-radius: 4rem;
    background-color: rgba(255, 255, 255, 0.2);
    opacity: 0;
    backdrop-filter: blur(3rem);
    transition: all 1.6s ease-in-out;
}
.list-technical.animated:before {
    opacity: 1;
    width: 100%;
}
.list-technical li {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
}
.list-technical li .icon {
	flex-shrink: 0;
	width: 8rem;
	height: 8rem;
	display: flex;
    align-items: center;
    justify-content: center;
}
.list-technical li .icon img {
	width: 6.8rem;
	height: auto;
}
.list-technical li .text-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 1.6rem;
}
.list-technical li .text-wrap h5 {
	color: #fff;
	font-size: 2rem;
	font-weight: 500;
	white-space: nowrap;
}
.list-technical li .text-wrap p {
	display: block;
	color: rgba(255,255,255,0.7);
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;word-break: keep-all;
}
/* 뉴스 리스트 */
.news-list { 
	display: flex; 
	flex-direction: column; 
	gap: 0; 
	border-radius: 4rem; 
	overflow: hidden;  
	background-color: #fff; 
}
.news-item {
	display: flex; 
	align-items: flex-start; 
	gap: 4rem;
	padding: 4rem;
	border-bottom: 1px solid var(--main-rgb10);
	transition: var(--transition-custom);
	text-decoration: none;
	opacity: 0; 
	transform: translateY(20px);
	transition-property: opacity, transform, background;
}
.news-item.animated { opacity: 1; transform: translateY(0); }
.news-item:nth-child(1) { transition-delay: 0s; }
.news-item:nth-child(2) { transition-delay: 0.08s; }
.news-item:nth-child(3) { transition-delay: 0.16s; }
.news-item:nth-child(4) { transition-delay: 0.24s; }
.news-item:nth-child(5) { transition-delay: 0.32s; }
.news-item:hover { 
	background: rgba(255,255,255,0.05); 
	padding-left: 4rem; 
    border-radius: 4rem; 
	overflow: hidden;
}
.news-badge {
	display: inline-block;
    border-radius: 4rem;
    padding: 0.8rem 1.6rem;
    background: var(--main-rgb10);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--body-color);
    line-height: 1.3;
    white-space: nowrap;
}
.news-tit { flex: 1; font-size: 1.8rem; font-weight: 500; color: var(--color-dark); letter-spacing: -0.03em; line-height: 1.4; word-break: keep-all; }
.news-item:hover .news-tit { color: var(--color-dark); }
.news-date { flex-shrink: 0; font-size: 1.4rem; color: var(--secondary); font-family: var(--font-family2); font-weight: 400; letter-spacing: 0.02em; }
.news-more-btn {
	position: absolute;
	right: 0;
	top: 0;
	display: inline-flex; 
	align-items: center; 
	gap: 0.8rem;
	margin-top: 5rem;
	height: 5.4rem; 
	padding: 0 3rem;
	border-radius: 5.4rem;
	border: 1px solid var(--secondary);
	color: var(--body-color);
	font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em;
	transition: var(--transition-custom);
}
.news-more-btn i { font-size: 2rem; transition: transform 0.3s; }
.news-more-btn:hover { border-color: var(--main-color); color: var(--main-color); }
.news-more-btn:hover i { transform: translateX(4px); }
.support .section03 .btn.more {width: 240px; color: var(--body-color); border: 1px solid var(--secondary); position: absolute; bottom: 0; right: 0;}
.support .section03 .btn.more i {color: var(--body-color);}
.support .section03 .btn.more:hover {border: 1px solid #fff;}

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--main-rgb10); }
.faq-item { border-bottom: 1px solid var(--main-rgb10); }
.faq-question {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2.4rem;
	padding: 4rem 0;
	background: transparent; border: none; cursor: pointer;
	text-align: left;
	transition: var(--transition-custom);
}
.faq-question:hover .faq-q-tit { color: var(--color-dark); }
.faq-q-mark { flex-shrink: 0; width: 2.8rem; height: 2.8rem; background: url(../images/support/icon_q.gif) no-repeat center / contain; }
.faq-item.open .faq-q-mark { background-image: url(../images/support/icon_q_on.gif); }
.faq-q-tit { flex: 1; font-size: 2rem; font-weight: 500; color: var(--color-dark); letter-spacing: -0.03em; line-height: 1.4; word-break: keep-all; transition: color 0.3s; }
.faq-q-icon { flex-shrink: 0; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; transition: var(--transition-custom); }
.faq-q-icon i { font-size: 2rem; color: var(--color-dark); transition: transform 0.4s ease; }
.faq-item.open .faq-q-icon { background: var(--main-rgb10); }
.faq-item.open .faq-q-icon i { transform: rotate(45deg); color: var(--main-color); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer-inner { padding: 0 5.2rem 4rem 5.2rem; }
.faq-answer-inner p { font-size: 1.8rem; color: var(--body-color); letter-spacing: -0.02em; line-height: 1.6; word-break: keep-all; }




/* =============================================================================
   LOGIN PAGE
   ============================================================================= */

.login-page-body {
	overflow: hidden;
}

/* 풀스크린 페이지 */
.login-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	/* background: linear-gradient(-45deg, var(--main-color) 0%, #7a4e10 100%); */
	/* background: linear-gradient(-45deg, #111 0%, #3a3026 100%); */
	background-color: #000;
	position: relative;
	z-index: 0;
}
.login-page::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../images/login/login_bg2.png') right center / cover no-repeat;
	pointer-events: none;
	opacity: 0.6;
	z-index: -1;
}

#login-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	z-index: 0;
}

/* 카드 */
.login-card {
	display: flex;
	width: 50vw;
	max-width: 600px;
	min-height: 60vh;
	border-radius: 40px;
	overflow: hidden;
	/* box-shadow: 0 20px 60px rgba(0,0,0,0.26); */
	position: relative;
	z-index: 1;
	animation: loginCardIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
	/* background: rgba(255, 255, 255, 0.08);	
    backdrop-filter: blur(3rem); */
	background: rgba(0, 0, 0, 0.7);
}
@keyframes loginCardIn {
	from { opacity: 0; transform: translateY(24px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

/* ===== 좌측 패널 ===== */
.login-left {
	flex: 1;
	/* background: linear-gradient(-45deg, rgba(197,160,89,0.82) 0%, rgba(100,65,8,0.88) 100%); */
	background: linear-gradient(-45deg, rgba(197,160,89,0.82) 0%, rgba(0,0,0,0.88) 100%);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 0;
	display: none;
}

.smiley-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}
.smiley-ctr {
	display: grid;
	height: 100%;
	width: 100%;
	align-items: center;
	justify-content: center;
	opacity: 0;
	animation: smileyFadeIn 0.6s 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes smileyFadeIn {
	from { opacity: 0; transform: scale(0.8); }
	to   { opacity: 1; transform: none; }
}
.smiley-ctr svg {
	width: 70%;
	display: block;
	margin: auto;
	opacity: 0.85;
}

.login-left__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: var(--color-dark);
}

.login-left__greeting {
	font-family: var(--font-family2);
	font-size: 4.0rem;
	font-weight: 600;
	display: block;
	margin-bottom: 3.2rem;
	text-align: center;
	text-transform: uppercase;
}
.login-left__desc {
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1.8;
	margin: 0;
	word-break: keep-all;
	text-align: center;
}

/* 글로우 문자 */
.glow-char {
	display: inline;
	color: transparent;
	opacity: 0;
	animation: glowCharIn 0.6s ease forwards;
	white-space: pre;
}
@keyframes glowCharIn {
	0%   { opacity: 0; color: transparent; }
	100% { opacity: 1; color: var(--color-dark); }
}
.glow-char--desc {
	font-size: 1.8rem;
	font-weight: 400;
}

/* ===== 우측 패널 ===== */
.login-right {
	flex: 1;	
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	/* background: rgba(255,255,255,0.1);
	backdrop-filter: blur(3rem); */
}
.login-form-wrap {
	width: 100%;
	max-width: 80%;
}

/* 로고 */
.login-logo-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 4rem;
}
.login-logo {
	width: 200px;
	height: auto;
}

/* 시스템명 */
.login-system-name {
	text-align: center;
	font-size: 2.4rem;
	font-weight: 500;
	margin: 0 0 6.0rem;
	color: var(--color-dark);
	word-break: keep-all;
	line-height: 1.2;
	display: none;
}

/* ===== 폼 ===== */
.login-form {
	display: flex;
	flex-direction: column;
}
.login-field {
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	padding: 10px 0;
	margin-bottom: 1.6rem;
}
.login-field__icon {
	font-size: 2.0rem;
	color: #aaa;
	flex-shrink: 0;
	width: 2.0rem;
}
.login-field__input {
	flex: 1;
	border: none;
	outline: none;
	font-size: 1.6rem;
	color: var(--color-dark);
	background: transparent;
	font-family: var(--font-family1);
}
.login-field__input::placeholder { color: #bbb; }
.login-field__input:-webkit-autofill,
.login-field__input:-webkit-autofill:hover,
.login-field__input:-webkit-autofill:focus,
.login-field__input:-webkit-autofill:active {
	transition: background-color 9999s ease 0s;
	-webkit-text-fill-color: #fff !important;
	caret-color: var(--color-dark);
}
.login-field__toggle {
	font-size: 1.6rem;
	color: var(--body-color);
	flex-shrink: 0;
	cursor: pointer;
	transition: color 0.15s;
	background: none;
	border: none;
	padding: 0;
	line-height: 1;
}
.login-field__toggle:hover { color: var(--main-color); }

/* 옵션 */
.login-options {
	margin-bottom: 4.0rem;
	margin-top: 0.8rem;
}
.login-check {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	cursor: pointer;
}
.login-check input[type="checkbox"] { display: none; }
.login-check__box {
	width: 1.6rem; 
	height: 1.6rem;
	border: 1.5px solid rgba(255,255,255,0.4);
	border-radius: 0.4rem;
	display: flex; align-items: center; justify-content: center;
	transition: all 0.2s;
	flex-shrink: 0;
}
.login-check input[type="checkbox"]:checked ~ .login-check__box {
	background: var(--main-color);
	border-color: var(--main-color);
}
.login-check input[type="checkbox"]:checked ~ .login-check__box::after {
	content: '';
	display: block;
	width: 10px; 
	height: 5px;
	margin-left: 2px;
	border-left: 1.5px solid #fff;
	border-bottom: 1.5px solid #fff;
	transform: rotate(-45deg) translateY(-1px);
}
.login-check__label { font-size: 1.4rem; color: var(--color-dark); }

/* 로그인 버튼 */
.login-btn {
	width: 100%;
	height: 4.8rem;
	border: none;
	border-radius: 50px;
	background: var(--main-gradient);
	color: var(--color-dark);
	font-size: 1.6rem;
	font-weight: 600;
	font-family: var(--font-family1);
	cursor: pointer;
	transition: opacity 0.15s, transform 0.15s, box-shadow 0.2s;
	box-shadow: 0 6px 24px rgba(197,160,89,0.3);
}
.login-btn:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	box-shadow: 0 10px 32px rgba(197,160,89,0.4);
}
.login-btn:active { transform: translateY(0); }

/* 소셜 구분선 */
.login-social-divider {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin-top: 4.0rem;
}
.login-social-divider::before,
.login-social-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(255,255,255,0.1);
}
.login-social-divider span {
	font-size: 1.4rem;
	color: var(--color-dark);
	white-space: nowrap;
	font-family: var(--font-family1);
}

/* 소셜 버튼 */
.login-social-btns {
	display: flex;
	gap: 1.0rem;
	margin-top: 2.4rem;
}
.login-social-btn {
	flex: 1;
	height: 4.6rem;
	border-radius: 1.2rem;
	/* border: 1.5px solid #e4e4e4; */
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	font-family: var(--font-family1);
	font-size: 1.4rem;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	color: #111;
	transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}
.login-social-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.1); }
.login-social-btn:active { transform: translateY(0); }
.login-social-btn__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.login-social-btn__label { font-size: 1.2rem; }
.login-social-btn--google { border-color: #e0e0e0; }
.login-social-btn--google:hover { border-color: #4285F4; box-shadow: 0 6px 18px rgba(66,133,244,0.14); }
.login-social-btn--kakao { background: #FEE500; border-color: #FEE500; color: rgba(0,0,0,0.85); }
.login-social-btn--kakao:hover { border-color: #e6ce00; box-shadow: 0 6px 18px rgba(254,229,0,0.35); }
.login-social-btn--naver { background: #03C75A; border-color: #03C75A; color: var(--color-dark); }
.login-social-btn--naver:hover { border-color: #02b350; box-shadow: 0 6px 18px rgba(3,199,90,0.28); }

/* 하단 링크 */
.login-footer-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.6rem;
	margin-top: 4rem;
}
.login-footer-links a {
	font-size: 1.4rem;
	color: var(--color-dark);
	text-decoration: none;
	transition: color 0.2s;
}
.login-footer-links a:hover { color: var(--main-color); }
.login-footer-links__divider { width: 1px; height: 10px; background: rgba(255,255,255,0.2); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1280px) {
	.login-card { width: 80vw; min-height: 80vh; }
	.login-system-name { margin: 0 auto 2.4rem; font-size: 2.0rem; }
	.login-options { margin-bottom: 2.4rem; }
	.smiley-wrap { width: 160px; height: 160px; }
	.login-left__greeting { font-size: 3.2rem; margin-bottom: 1.6rem; }
	.login-left__desc { font-size: 1.6rem; line-height: 1.5; }
	.glow-char--desc { font-size: 1.6rem; }
}
@media (max-width: 768px) {
	.login-page-body { overflow: auto; }
	.login-left { display: none; }
	.login-card { border-radius: 16px; width: 90vw; min-height: auto; }
	.login-right { padding: 3.2rem 2.4rem; width: 100%; }
	.login-form-wrap { max-width: 100%; }
}
@media (max-width: 500px) {
	.login-card { width: 100%; min-height: 100vh; border-radius: 0; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(3rem);}
	.login-field { padding-right: 4px; }
	.login-social-btns {gap: 2.4rem; flex-wrap: nowrap; justify-content: center;}
	.login-social-btn__label { display: none; }
	.login-social-btn {width: 4.6rem; border-radius: 50%; flex: none;}
	.login-social-btn.login-social-btn--naver svg {width: 2.4rem; height: 2.4rem;}
}
/* ── 문의 폼 피드백 메시지 ── */
.inquiry-feedback {
	display: none;
	margin-top: 16px;
	padding: 14px 18px;
	border-radius: 8px;
	font-size: 1.4rem;
	line-height: 1.6;
	font-weight: 500;
}
.inquiry-feedback.is-success {
	background: rgba(76,175,80,.12);
	border: 1px solid rgba(76,175,80,.35);
	color: #4caf50;
}
.inquiry-feedback.is-error {
	background: rgba(244,67,54,.1);
	border: 1px solid rgba(244,67,54,.3);
	color: #f44336;
}

/* ── Contact Q&A Section ── */
.contact-qa-section { padding: 6rem 0; }
.contact-qa-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6rem;
	align-items: center;
}
.contact-qa-label {
	display: inline-block;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--main-color);
	margin-bottom: 1.4rem;
	padding: 0.4rem 1.2rem;
	border: 1px solid rgba(197,160,89,.4);
	border-radius: 3rem;
	background: rgba(197,160,89,.08);
}
.contact-qa-title {
	font-size: 3.6rem;
	font-weight: 700;
	color: #111;
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin-bottom: 1.6rem;
}
.contact-qa-desc {
	font-size: 1.6rem;
	color: #666;
	line-height: 1.8;
	margin-bottom: 3.2rem;
}
.contact-qa-btns { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.contact-qa-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 1.3rem 2.6rem;
	border-radius: 5rem;
	font-size: 1.5rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.25s;
	letter-spacing: 0.01em;
}
.contact-qa-btn--primary {
	background: #111;
	color: var(--color-dark);
}
.contact-qa-btn--primary:hover { background: var(--main-color); color: var(--color-dark); }
.contact-qa-btn--outline {
	background: transparent;
	color: #333;
	border: 1.5px solid #ddd;
}
.contact-qa-btn--outline:hover { border-color: #111; color: #111; }

/* 연락처 정보 */
.contact-info-list { list-style: none; display: flex; flex-direction: column; gap: 2.4rem; }
.contact-info-list li { display: flex; align-items: flex-start; gap: 1.6rem; }
.contact-info-icon {
	width: 4.8rem;
	height: 4.8rem;
	border-radius: 50%;
	background: rgba(197,160,89,.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: var(--main-color);
	flex-shrink: 0;
}
.contact-info-list strong { display: block; font-size: 1.4rem; font-weight: 700; color: #111; margin-bottom: 0.4rem; }
.contact-info-list p { font-size: 1.4rem; color: #666; line-height: 1.6; }
.contact-info-list a { color: var(--main-color); text-decoration: none; }
.contact-info-list a:hover { text-decoration: underline; }

@media (max-width: 900px) {
	.contact-qa-inner { grid-template-columns: 1fr; gap: 4rem; }
	.contact-qa-title { font-size: 2.8rem; }
}
@media (max-width: 600px) {
	.contact-qa-btns { flex-direction: column; }
	.contact-qa-btn { width: 100%; justify-content: center; }
}

/* Start: main 제품소개 */
/* ===== 제품소개 섹션 전체 ===== */
.main-products {
	position: relative;
	width: 100%;
	height: 100vh;                /* 뷰포트 전체 높이 */
}

/* sticky 래퍼: 스크롤 시 화면에 고정 */
.main-products__sticky {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

/* ===== 왼쪽 탭 버튼 영역 ===== */
.main-products__btn-area {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-38%);
	padding: 0 80px 92px;
	z-index: 10;
}
.main-products__tab-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: stretch;
}
.main-products__tab-list li {
	opacity: 0;
	transform: translate3d(-30px, 0, 0);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.main-products__tab-list li:nth-child(1) { transition-delay: 0.1s; }
.main-products__tab-list li:nth-child(2) { transition-delay: 0.22s; }
.main-products__tab-list li:nth-child(3) { transition-delay: 0.34s; }
.main-products__tab-list li:nth-child(4) { transition-delay: 0.46s; }
.main-products__tab-list li:nth-child(5) { transition-delay: 0.58s; }
.main-products__tab-list li:nth-child(6) { transition-delay: 0.70s; }
.main-products__tab-list li:nth-child(7) { transition-delay: 0.82s; }
.main-products__tab-list li:nth-child(8) { transition-delay: 0.94s; }
.main-products__tab-list li:nth-child(9) { transition-delay: 1.06s; }
.animated .main-products__tab-list li {
	opacity: 1;
	transform: none;
}
	
.main-products__tab-list li button {
	display: block;
	width: 100%;
	min-width: 200px;
	cursor: pointer;
	font-size: 20px;
	font-weight: 500;
	border-radius: 99px;
	padding: 12px 24px;
	white-space: nowrap;
	letter-spacing: -0.01em;
	line-height: 1.4;
	color: #fff;
	background: rgba(255, 255, 255, .2);
	border: 1px solid rgba(255, 255, 255, .2);
	backdrop-filter: blur(10px) opacity(1);
	position: relative;
	z-index: 1;
	transition: .2s ease-out, backdrop-filter .2s 1s ease-out;
	overflow: hidden;
	text-align: center;
}

.main-products__tab-list li button:before {
	content: "";
	width: 100%;
	height: 100%;
	background-color: #fff;
	transform: translateX(-102%);
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 99px;
	transition: .2s ease-out;
	z-index: -1;
} 
.main-products__tab-list li.active button:before,
.main-products__tab-list li button:hover:before {
	transform: translateX(0);
}

.main-products__tab-list li.active button,
.main-products__tab-list li button:hover {
	color: var(--color-dark);
}

    /* ===== 콘텐츠 패널들 ===== */
    .main-products__cont-area {
      position: absolute;
      inset: 0;                     /* top/right/bottom/left: 0 */
      width: 100%;
      height: 100%;
    }

    /* 각 패널 (탭별 콘텐츠) */
    .main-products__panel {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
      z-index: 1;
    }

.main-products__panel.active {
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
}

/* 패널 내부 영역: 탭 전환 시 우→좌 슬라이드인
	opacity 는 제외 — opacity 변화는 stacking context를 생성해
	자식 요소의 backdrop-filter가 panel-bg를 보지 못하게 막음.
	페이드는 패널 자체의 opacity transition이 담당. */
@keyframes panelInnerSlideIn {
	from { transform: translateX(100px); }
	to   { transform: none; }
}
.main-products__panel.active .main-products__panel-inner {
	animation: panelInnerSlideIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: 0.05s;
}

/* 배경 이미지 */
.main-products__panel-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}

/* 배경 어두운 오버레이 */
.main-products__panel-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

/* 패널 내부 컨텐츠 래퍼
	z-index 제거: position+z-index 조합이 stacking context를 생성해
	자식 카드의 backdrop-filter가 panel-bg(배경이미지)를 볼 수 없게 막음 */
.main-products__panel-inner {
	position: relative;
	width: 100%;
	margin: 0 0 0 400px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

/* 패널 제목 */
.main-products__panel-title {
	font-size: 44px;
	font-weight: 500;
	color: #fff;
	line-height: 1.2;
	letter-spacing: -0.02em;
	word-break: keep-all;
}
.main-products__cont-area .txt02 {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -0.05em;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
	word-break: keep-all;
	margin: 16px 0 24px;
}
/* ===== 카드 슬라이더 영역 ===== */
.main-products__slider-wrap {
	position: relative;
	width: 100%;
	margin-top: 80px;
}

/* Swiper 컨테이너 */
.main-products__swiper {
	width: 100%;
	overflow: visible !important;  /* 옆 카드 살짝 보이게 */
}

/* 슬라이드 너비 고정 + 비활성 상태 숨김
	opacity 대신 translateX로 숨김: opacity<1 은 stacking context를 생성해
	backdrop-filter 가 panel-bg 를 보지 못하게 막음 */
.main-products__panel .swiper-slide {
	width: 440px;
	height: 520px;
	flex-shrink: 0;
	transform: translate3d(120px, 0, 0);  /* off-screen, panel-inner overflow:hidden 으로 클립 */
}

/* 카드 진입 애니메이션: transform만 사용 (opacity 제거 → stacking context 방지) */
@keyframes cardSlideIn {
	from { transform: translate3d(120px, 0, 0); }
	to   { transform: none; }
}
.main-products__panel.active .swiper-slide {
	animation: cardSlideIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* .main-products__panel.active .swiper-slide:nth-child(1) { animation-delay: 0.05s; }
.main-products__panel.active .swiper-slide:nth-child(2) { animation-delay: 0.20s; }
.main-products__panel.active .swiper-slide:nth-child(3) { animation-delay: 0.35s; }
.main-products__panel.active .swiper-slide:nth-child(4) { animation-delay: 0.50s; }
.main-products__panel.active .swiper-slide:nth-child(5) { animation-delay: 0.65s; } */

.sec-products__panel-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 0 80px 0 400px;
	display: flex;
	flex-direction: column;
	gap: 32px;

	/* 초기 상태: 오른쪽에서 대기 */
	opacity: 0;
	transform: translateX(60px);
	transition: opacity 0s, transform 0s; /* 비활성일 땐 즉시 초기화 */
}

.btn.more {
	display: inline-block;
    width: 180px;
    padding: 0 48px 0 24px;
    border-radius: 99px;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.02em;
    font-weight: 500;
    color: #fff;
    height: 56px;
    line-height: 56px;
    position: relative;
    background: rgba(255, 255, 255, .2);
    overflow: hidden;
    z-index: 2;
    transition: .2s ease-out;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .4);
    backdrop-filter: blur(10px) opacity(1);
}
.btn.more:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #fff;
    transform: translateX(-102%);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 99px;
    transition: .2s ease-out;
    z-index: -1;
}
.btn.more i {
    display: block;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
	font-size: 18px;
	color: #fff;
}
.btn.more:hover {
    color: var(--color-dark);
}
.btn.more:hover:before {
    transform: translateX(0);
}
.btn.more:hover i {
	color: var(--color-dark);
}

/* 활성 패널의 inner: 좌측으로 슬라이드 인 */
.sec-products__panel.active .sec-products__panel-inner {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.5s ease 0.1s,
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

/* active-end 패널의 inner: 바로 숨김 (전환 즉시 초기화) */
.sec-products__panel.active-end .sec-products__panel-inner {
  opacity: 0;
  transform: translateX(60px);
  transition: none;
}

/* 각 카드 */
.main-products__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	width: 440px;                  /* 고정 너비 (Swiper slidesPerView: auto) */
	height: 520px;
	padding: 24px;
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	background: rgba(255, 255, 255, .2);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
	transition: .3s ease-out;
	/* transition: transform 0.3s ease, background 0.3s ease; */
}
.main-products__card:hover {
	transform: translateY(-4px);
	background: #fff;
}

/* 카드 텍스트 영역 */
.main-products__card-text {
	padding: 16px 0 0;
	width: 100%;	
	display: block;
}
.main-products__card-text .card-title {
	font-size: 24px;
	font-weight: 500;
	color: #fff;
	line-height: 1.4;
	word-break: keep-all;
}
.main-products__card:hover .main-products__card-text .card-title {
	color: var(--color-dark);
}
/* 카드 이미지 영역 */
.main-products__card-img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	overflow: hidden;
	flex: 1;
	background-color: #090e15;
}
.main-products__card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.main-products__card:hover .main-products__card-img img {
	transform: scale(1.05);
}

/* ===== Swiper Scrollbar 커스텀 ===== */
.main-products__scrollbar {
	position: relative;
	width: 100%;
	height: 40px;
	margin-top: 8px;
	display: flex;
	align-items: center;
}

.main-products__scrollbar .swiper-scrollbar {
	position: relative;
	width: 100%;
	height: 4px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 10px;
}

.main-products__scrollbar .swiper-scrollbar-drag {
	background: #fff;
	border-radius: 10px;
	cursor: grab;
}
/* End: main 제품소개 */


/* =============================================
   ABOUT TAB NAVIGATION
   ============================================= */
.company {position: relative;}
.about-tab-nav {
	position: relative;
	z-index: 90;
	background:  rgba(0, 78, 146, 0.3);
	    backdrop-filter: blur(1rem);
	/* border-bottom: 1px solid rgba(0,0,0,.1);
	box-shadow: 0 2px 12px rgba(0,0,0,.06); */
}
.about-tab-nav.is-sticky {
	position: fixed;
	top: var(--header-height);
	left: 0;
	right: 0;
	transition: top 0.4s ease;
}
.about-tab-nav.is-sticky.header-up {
	top: 0;
}
.about-tab-placeholder {
	display: none;
}
.about-tab-placeholder.is-active {
	display: block;
}
.about-tab-inner {
	position: relative;
	display: flex;
	align-items: stretch;
	max-width: var(--area-box-width);
	margin: 0 auto;
	padding: 0 var(--area-padding);
}
.about-tab-list {
	display: flex;
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}
.about-tab-item { flex: 1; }
.about-tab-btn {
	display: block;
	width: 100%;
	padding: 1.8rem 0;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--font-family1);
	font-size: 1.6rem;
	font-weight: 500;
	color: rgba(255,255,255,0.8);
	letter-spacing: -0.02em;
	transition: color 0.25s;
	text-align: center;
}
.about-tab-btn:hover { color: var(--main-color); }
.about-tab-item.is-active .about-tab-btn {
	color: var(--main-color);
	font-weight: 700;
}
.about-tab-indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2px;
	width: 0;
	background: var(--main-color);
	transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}
/* ---- Company Section (회사소개) ---- */
.company-section {
	padding: 20rem 0;
	position: relative;
	/* background: url(../images/about/company.png) no-repeat center center;
	background-size: cover;
	background-attachment: fixed; */
}
.company-section .tit-box .tit {
	font-size: 4.8rem;
    color: var(--color-dark);
    margin-bottom: 2.4rem;
}
.company-section .tit-box .txt {
    color: var(--body-color);
	opacity: 1;
}
.company-body {
	position: relative;
	display: block;
	width: 100%;
	height: 60rem;
	margin-top: 4.8rem;
	background-size: cover;
	border-radius: 6rem;
	overflow: hidden;
	/* scroll-snap-align: start; */
	background: radial-gradient(circle at 20% 20%, rgba(0, 180, 255, 0.2), transparent 40%), radial-gradient(circle at 80% 30%, rgba(0, 120, 255, 0.2), transparent 40%), radial-gradient(circle at 50% 100%, rgba(0, 60, 255, 0.15), transparent 50%), linear-gradient(135deg, #0a0f1f, #0e1a35, #101c3a);
}
.company-body:before {
	content: '';
    position: absolute;
    inset: 0;
    background: url(../images/about/company.png) center / cover fixed no-repeat;
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}
.company-desc {
	position: relative;
	width: 100%;
	padding: 8rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
.company-desc p {
	font-size: 1.8rem;
	color: rgba(255,255,255,1);
	line-height: 1.6;
	word-break: keep-all;
}
.company-desc p + p { margin-top: 1.6rem; }
.company-list {
	width: 100%;
    height: 100%;
    display: flex;
    padding: 0 8rem;
    align-items: center;
    justify-content: space-between;
}
.company-list li {
	flex-shrink: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.4rem;
	width: 24rem;
	height: 24rem;
	max-width: 24rem;
	padding: 2.4rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px) opacity(1);
    overflow: hidden;
    transition: .3s ease-out;
}
.company-list li .icon-box {
	width: 8rem;
	height: auto;
}
.company-list li .icon-box img {
	width: 100%;
	height: auto;
}
.company-list li .text-box {
	font-size: 2rem;
	color: #fff;
}


/* ---- Company List 스크롤 입장 애니메이션 ---- */
.company-list li {
	opacity: 0;
	-webkit-transform: translate3d(-40px, 0, 0);
	transform: translate3d(-40px, 0, 0);
	transition: opacity 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out, transform 0.8s ease-in-out, background 0.3s ease-out;
	will-change: transform, opacity;
}
.company-list li:nth-child(1) { transition-delay: 0.05s; }
.company-list li:nth-child(2) { transition-delay: 0.15s; }
.company-list li:nth-child(3) { transition-delay: 0.25s; }
.company-list li:nth-child(4) { transition-delay: 0.35s; }
.company-list li:nth-child(5) { transition-delay: 0.45s; }
.company-body.animated .company-list li {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
	flex-shrink: 0;
	min-width: 200px;
}
/* =============================================
    Solutions
   ============================================= */
.solutions .solution {
	position: relative;
	padding: 20rem 0;
}
.solutions .solution.section01 ul {
	position: relative;
	margin-top: 8rem;
	display: flex;
	align-items: stretch; 
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 4rem;
}
.solutions .solution.section01 ul li {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0;
	padding: 0;
	background-color: var(--main-rgb10);
	border-radius: 4rem;
}
.solutions .solution.section01 ul li .img-area {
	width: 100%;
	height: 24rem;
	background-color: #fff;
	border-radius: 2.4rem;
	overflow: hidden;
}
.solutions .solution.section01 ul li .img-area img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.solutions .solution.section01 ul li .txt-area {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 2.4rem;
	padding: 4rem;
}
.solutions .solution.section01 ul li .txt-area h3 {
	display: block;
	color: var(--color-dark);
	font-size: 2.4rem;
	font-weight: 500;
	font-family: var(--font-family2);
	letter-spacing: -0.05rem;
	line-height: 1.2;
	word-break: keep-all;
}
.solutions .solution.section01 ul li .txt-area p {
	display: block;
	color: var(--body-color);
	font-size: 1.6rem;
	font-weight: 500;
	font-family: var(--font-family1);
	line-height: 1.6;
	letter-spacing: -0.05rem;
	word-break: keep-all;
}

/* Solutions :: Section01 카드 hover 액션 (진입 애니메이션 없이 hover만) */
.solutions .solution.section01 ul li {
	overflow: hidden;
	cursor: pointer;
	/* transition: transform 0.35s ease, box-shadow 0.35s ease; */
}
/* .solutions .solution.section01 ul li:hover {
	transform: translateY(-0.8rem);
	box-shadow: 0 2rem 4.8rem rgba(0,78,146,0.18);
} */
.solutions .solution.section01 ul li .img-area img {
	transition: transform 0.4s ease;
}
.solutions .solution.section01 ul li:hover .img-area img {
	transform: scale(1.06);
}

/* Product Gallery :: 카드 진입(왼→오 순차) + hover 액션 (Solutions와 동일) */
.pg-card {
	opacity: 0;
	transform: translateX(-3rem);
	transition: opacity 0.8s ease, transform 0.8s ease, box-shadow 0.35s ease;
}
.pg-grid.animated .pg-card {
	opacity: 1;
	transform: none;
}
.pg-grid.animated .pg-card:nth-child(1) { transition-delay: 0.1s; }
.pg-grid.animated .pg-card:nth-child(2) { transition-delay: 0.3s; }
.pg-grid.animated .pg-card:nth-child(3) { transition-delay: 0.5s; }
.pg-grid.animated .pg-card:nth-child(4) { transition-delay: 0.7s; }
.pg-grid.animated .pg-card:nth-child(5) { transition-delay: 0.9s; }
.pg-grid.animated .pg-card:nth-child(6) { transition-delay: 1.1s; }
/* hover — animated 이후에도 작동하도록 동일 수준 특이도 유지 */
.pg-grid .pg-card:hover,
.pg-grid.animated .pg-card:hover {
	transform: translateY(-0.8rem);
	box-shadow: 0 2rem 4.8rem rgba(0,78,146,0.18);
}
.pg-card:hover .pg-card-img img { transform: scale(1.06); }

/*  */
.reference {
	position: relative;
	padding: 20rem 0;
}

/* References :: 연도별 탭 */
.ref-year-tabs {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.6rem; margin-top: 8rem;}
.ref-year-tab {display: inline-flex; align-items: center; justify-content: center; height: 4.8rem; padding: 0 3.2rem; border: 1px solid #e1e5ea; border-radius: 10rem; background: #fff; color: var(--color-dark); font-size: 1.6rem; font-weight: 600; font-family: var(--font-family2); letter-spacing: -0.02em; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;}
.ref-year-tab:hover {border-color: var(--main-color); color: var(--main-color);}
.ref-year-tab.active {background: var(--main-color); border-color: var(--main-color); color: #fff;}

/* References :: 탭 컨텐츠 카드 */
.ref-year-panel {display: none; margin-top: 8rem;}
.ref-year-panel.active {display: block;}
.ref-card-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 4rem;}
.ref-card {position: relative; display: flex; flex-direction: column; padding: 4rem; background: var(--main-rgb10); border-radius: 4rem; transition: transform 0.25s ease, box-shadow 0.25s ease; opacity: 0;}
.ref-card:hover {transform: translateY(-0.4rem); box-shadow: 0 1.2rem 2.4rem rgba(0,78,146,0.4);}
/* 탭 클릭 시 카드 좌→우 순차 등장 (main-products__tab-list와 동일한 방식) */
@keyframes refCardSlideIn {
	from {opacity: 0; transform: translate3d(-30px, 0, 0);}
	to   {opacity: 1; transform: none;}
}
.ref-year-panel.animated .ref-card {animation: refCardSlideIn 0.5s ease both;}
.ref-year-panel.animated .ref-card:nth-child(1) {animation-delay: 0s;}
.ref-year-panel.animated .ref-card:nth-child(2) {animation-delay: 0.06s;}
.ref-year-panel.animated .ref-card:nth-child(3) {animation-delay: 0.12s;}
.ref-year-panel.animated .ref-card:nth-child(4) {animation-delay: 0.18s;}
.ref-year-panel.animated .ref-card:nth-child(5) {animation-delay: 0.24s;}
.ref-year-panel.animated .ref-card:nth-child(6) {animation-delay: 0.30s;}
.ref-year-panel.animated .ref-card:nth-child(7) {animation-delay: 0.36s;}
.ref-year-panel.animated .ref-card:nth-child(8) {animation-delay: 0.42s;}
.ref-year-panel.animated .ref-card:nth-child(9) {animation-delay: 0.48s;}
.ref-year-panel.animated .ref-card:nth-child(10) {animation-delay: 0.54s;}
.ref-year-panel.animated .ref-card:nth-child(11) {animation-delay: 0.60s;}
.ref-year-panel.animated .ref-card:nth-child(12) {animation-delay: 0.66s;}
.ref-year-panel.animated .ref-card:nth-child(13) {animation-delay: 0.72s;}
.ref-year-panel.animated .ref-card:nth-child(14) {animation-delay: 0.78s;}
.ref-card-meta {display: flex; align-items: center; gap: 1.2rem; margin-bottom: 2.4rem;}
.ref-card-meta .ref-card-date {display: inline-block; padding: 5px 10px; color: var(--secondary); font-size: 13px; font-weight: 500; border-radius: 24px; border: 1px solid var(--main-rgb20)}
.ref-card-meta .badge {display: inline-block; padding: 2px 0 0; color: var(--main-color); font-size: 16px; font-weight: 600; line-height: 1.4; word-break: keep-all;}
.ref-card-date {font-size: 1.4rem; color: var(--secondary); font-weight: 500;}
.ref-card-divider {display: inline-block; width: 1px; height: 1.2rem; background: #ccd2da;}
.ref-card-title {display: block; font-size: 2.4rem; font-weight: 700; color: var(--color-dark); line-height: 1.4; margin-bottom: 1.6rem; word-break: keep-all;}
.ref-card-desc {font-size: 1.6rem; color: var(--body-color); font-weight: 500; line-height: 1.6; word-break: keep-all; flex: 1;}
.ref-card-line {width: 100%; height: 1px; background: var(--main-rgb20); margin: 2.4rem 0;}
.ref-card-author {display: flex; align-items: center; gap: 1.2rem;}
.ref-card-avatar {display: flex; align-items: center; justify-content: center; width: 4.0rem; height: 4.0rem; border-radius: 50%; background: var(--main-color); color: #fff; font-size: 1.5rem; font-weight: 700; font-family: var(--font-family2); flex-shrink: 0;}
.ref-card-name {font-size: 2.4rem; font-weight: 700; color: var(--color-dark); display: block; width: 100%; height: 2.4rem; }
.ref-card-name.vts {background: url(../images/logo/VTS_color.svg) no-repeat 0 0; background-size: contain;}
.ref-card-name.valmac {background: url(../images/logo/valmac.png) no-repeat 0 0; background-size: contain;}
.ref-card-name.festo {background: url(../images/logo/festo.svg) no-repeat 0 0; background-size: contain; height: 2rem;}
.ref-card-name.burkert {background: url(../images/logo/buerkert.svg) no-repeat 0 0; background-size: contain; height: 3.2rem;}
.ref-empty {grid-column: 1 / -1; text-align: center; padding: 6rem 0; color: var(--body-color); font-size: 1.6rem;}

/* =============================================================================
   Brand Hub Page (product.html)
   ============================================================================= */
.brand-hub-page { padding: 7rem 0 12rem; }
.brand-hub-header { text-align: center; padding: 20rem 0 8rem;}
.brand-hub-header .brand-hub-title { font-size: 4.8rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom:2.4rem; color: var(--main-color); }
.brand-hub-header .brand-hub-subtitle { font-size: 1.8rem; color: var(--body-color); line-height: 1.6; font-weight: 500;}

.brand-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem; padding-bottom: 20rem;}

.brand-hub-card { position: relative; border-radius: 2rem; overflow: hidden; min-height: 500px; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; }
.brand-hub-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94); }
.brand-hub-card:hover .brand-hub-card-bg { transform: scale(1.06); }
.brand-hub-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.15) 100%); }

.brand-hub-card-inner { position: relative; z-index: 1; padding: 3.2rem; color: #fff; }
.brand-hub-logo { height: 3.2rem; width: auto; max-width: 14rem; filter: brightness(0) invert(1); margin-bottom: 1.6rem; object-fit: contain; display: block; }
.brand-hub-desc { font-size: 1.4rem; color: rgba(255,255,255,0.78); margin-bottom: 2rem; line-height: 1.65; }

.brand-hub-cats { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 2.8rem; list-style: none; padding: 0; }
.brand-hub-cats li { font-size: 1.15rem; padding: 0.4rem 1.1rem; border: 1px solid rgba(255,255,255,0.35); border-radius: 10rem; color: rgba(255,255,255,0.82); }

.brand-hub-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.18); }
.brand-hub-count { font-size: 1.4rem; color: rgba(255,255,255,0.6); }
.brand-hub-btn { font-size: 1.6rem; color: #fff; display: flex; align-items: center; gap: 0.6rem; font-weight: 500; }
.brand-hub-btn i { transition: transform 0.3s ease; }
.brand-hub-card:hover .brand-hub-btn i { transform: translateX(5px); }