@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:0; overflow:hidden; z-index:0; border-radius:0;}
.main-visual-video-bg::after {content:''; position:absolute; inset:0; background:rgba(0,0,0,0.2); z-index:1;}
.main-visual-video-bg video {width:100%; height:100%; object-fit:cover; display:block; 
	/* object-position: right center; */
}
/* 메인 비주얼 :: 이미지 */
.main-visual-item {position:relative;}
.main-visual-img-cover {position: absolute; inset:0; overflow: hidden; border-radius:0; }
.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) 100%); z-index:1; pointer-events:none;
	/* opacity: 0.2; */
}
.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;}
/* about.html 등 서브비주얼(company/business/문의하기 등) 공통: 확대된 상태로 시작해 100%로 축소되며 정착 */
.sub-wrap .main-start .main-visual-item.active-item .main-visual-img{animation: image-zoom-shrink 2.4s 0s ease-out both;}
/* 서브페이지는 홈 인트로처럼 이미지를 숨겨뒀다 JS(main-start)로 나중에 페이드인할 이유가 없음 —
   비주얼 문구(main-visual-txt)·헤더(sub-start)보다도 이미지가 먼저 보이도록 main-start를 기다리지 않고 즉시 노출.
   (확대→축소 진입 애니메이션은 위 규칙대로 main-start가 붙는 시점에 그대로 재생됨) */
.sub-wrap .main-visual-item .main-visual-img { opacity: 1; transition: none; }

/* 메인 비주얼 :: 텍스트+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; margin-bottom: 16px;}
.main-visual-txt-item .main-visual-txt1 b {font-weight:500; font-size: 80px; white-space: nowrap; letter-spacing:-0.02em; color:#fff; line-height:1.2; }
.main-visual-txt-item .main-visual-txt2 {font-size:56px; 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:24px; 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;}
/* 메인 비주얼 :: 슬라이드별 문구 (슬라이드 내부에 영상+문구를 함께 담는 구조, index.html)
   pagination은 swiper 밖의 공용 .main-visual-overlay(8rem)에 별도로 위치하므로,
   문구 하단에는 기존과 같은 자리(8rem + 문구-pagination 간격 2.4rem + pagination bar 높이)를 비워 겹치지 않게 한다 */
.main-visual-slide-txt {position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 var(--area-padding) 10.7rem; box-sizing:border-box; pointer-events:none;}
/* 메인 비주얼 :: 스크롤 다운 인디케이터 */
.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)
	}
}
/* 확대된 상태(1.15배)로 시작해 100%(1배)로 축소되며 정착 */
@keyframes image-zoom-shrink {
	from {
		transform:translate(-50%, -50%) scale(1.15,1.15)
	}
	to {
		transform:translate(-50%, -50%) scale(1,1)
	}
}
@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-visual-img-cover의 introCover(둥근모서리→확대) 진입 애니메이션은 제거됨 —
   처음부터 전체화면을 차지하고, 대신 내부 이미지가 확대되는 image-zoom 애니메이션만 재생 */


/* 메인 비주얼 :: 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; text-transform: uppercase;}
.main-tit-box .main-tit{font-size: 48px; font-weight: 600; letter-spacing: -0.5px; color: var(--color-dark); line-height: 1.2; margin-bottom: 2.4rem;}
.main-tit-box .main-txt01 {font-size: 20px; font-weight: 700; letter-spacing: -0.5px; color: var(--color-dark); line-height: 1.6; margin-top: 1.8rem;}
.main-tit-box .main-txt02 {font-size: 18px; font-weight: 500; letter-spacing: -0.5px; color: var(--body-color); line-height: 1.6;}
.sub-txt {font-size: 2rem; font-weight: 500; letter-spacing: -0.5px; 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:100px; 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: 100px; 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%; min-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); */
	background: radial-gradient(circle at 20% 20%, rgba(0, 56, 148, 0.2), transparent 40%), radial-gradient(circle at 80% 30%, rgba(0, 0, 0, 0.4), 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.jpg') center/cover fixed no-repeat; opacity: 0.4; z-index: 0; pointer-events: none;}
.main-con01 {
	position: relative; 
	width: 100%; 
	height: 100%;
	padding: 200px 80px; 
	display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;    
	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.text01 {position:relative; font-size: 56px; line-height: 1.2; letter-spacing: -0.05em; font-weight: 500; word-break: keep-all;}
.main-con01-txt .text.text02 {position:relative; font-size: 24px; line-height: 1.6; 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;}

/* -------- 메인 컨텐츠 :: 컨텐츠1(About) :: 카운팅 박스 -------- */
.main-con01-count-wrap {position: relative; z-index: 1; width: 100%;}
.main-con01-count-box {position: relative; display: flex; align-items: stretch; gap: 80px; width: 100%; padding: 40px 40px 40px 120px; box-sizing: border-box; 
	/* background: rgba(10, 15, 31, 0.55); border: 1px solid rgba(255,255,255,0.08); border-radius: 3.2rem; backdrop-filter: blur(1.2rem); */
	/* border-radius: 6rem;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(15px) opacity(1); */
}
.main-con01-count-box:before {
	position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 0;
    height: 100%;
    border-radius: 6rem;
    background-color: rgba(255, 255, 255, 0.05);
    background-color: rgba(10, 15, 31, 0.05);
    opacity: 0;
    backdrop-filter: blur(3rem);
    transition: all 1.6s ease-in-out;
	z-index: -1;
}
.main-con01-count-box.animated:before {
	opacity: 1;
    width: 100%;
}
.main-count-list {display: flex; align-items: center; flex: 1 1 0; gap: 0;}
.main-count-list li {flex: 1 1 0; text-align: left; 
	/* border-right: 1px solid rgba(255,255,255,0.1); padding-right: 2.4rem; margin-right: 2.4rem;  */
	opacity: 0; transform: translateX(-10%); transition: var(--transition-custom2); transition-property: opacity, transform;}
.main-count-list li:last-child {border-right: 0; padding-right: 0; margin-right: 0;}
.main-count-list li:nth-child(1) {transition-delay: 0s;}
.main-count-list li:nth-child(2) {transition-delay: 0.2s;}
.main-count-list li:nth-child(3) {transition-delay: 0.4s;}
.main-count-list li:nth-child(4) {transition-delay: 0.6s;}
.main-count-list li:nth-child(5) {transition-delay: 0.8s;}
.main-con01-count-box.animated .main-count-list li {opacity: 1; transform: translateX(0);}
.main-count-list li > p {font-size: 2rem;
    letter-spacing: -0.05em;
    color: #fff;
    font-weight: 500;
    line-height: 1.4;
	opacity: 0.7;
}
.main-count-list .number {display: flex; align-items: flex-start; gap: 0; margin-top: 24px;}
.main-count-list .count-num-box {display: inline-flex; font-size: 80px; font-weight: 300; font-family: var(--font-family2); line-height: 1; color: #fff; letter-spacing: -0.02em;}
.main-count-list .count-unit {	
    display: flex;
    align-items: flex-end;
	justify-content: space-between;    
    font-weight: 400;
    color: #fff;
    flex-direction: column;
    height: 70px;
}
.main-count-list .count-unit i {
	display: block;
	font-size: 4.4rem;	
    font-weight: 400; 	
}
.main-count-list .count-unit span {
	font-size: 18px;
	font-weight: 400;
	padding-left: 8px;
}

.main-history-btn {
	flex: 0 0 auto; 
	display: flex; 
	flex-direction: column; 
	justify-content: space-between; 
	width: 200px; 
	height: 100%;
	padding: 40px;
	box-sizing: border-box; 
	background: var(--main-color); 
	border-radius: 24px;
	opacity: 0; 
	transform: translateX(-10%); 
	transition: var(--transition-custom2); 
	transition-property: opacity, transform; 
	transition-delay: 0.8s;
}
.main-con01-count-box.animated .main-history-btn {opacity: 1; transform: translateX(0);}
/* hover는 opacity를 즉시 반응시켜야 하므로 진입 애니메이션의 transition-delay(0.8s)를 상쇄 */
.main-history-btn:hover {opacity: 0.9; transition-delay: 0s;}
.main-history-btn h5 {
	font-family: var(--font-family2);
	font-size: 40px; 
	font-weight: 500; 
	line-height: 1.2; 
	color: #fff; 
	text-align: left;
}
.main-history-btn h5 span {
	display: block; 
	font-size: 16px; 
	font-weight: 500; 
	color: rgba(255,255,255,0.75);
	margin-bottom: 8px;
}
.main-history-btn p {display: flex; align-items: center; gap: 0.4rem; font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.85); margin-top: 2.4rem;}
.main-history-btn p i {font-size: 20px;}

/* 카운팅 숫자 롤링(슬롯머신) 효과 — assets/js/app.js buildCountBox()가 생성하는 구조.
   down: 리스트 첫 li가 최종값 → 시작(--count-start-y)엔 다른 숫자가 보이다가 애니메이션 후 translateY(0)으로 복귀하며 첫 li(최종값)가 보임
   기본: 리스트 마지막 li가 최종값 → 시작엔 translateY(0), 애니메이션 후 --count-final-y까지 밀려 올라가며 마지막 li(최종값)가 보임 */
.count-num-item-wrap {display: inline-block; overflow: hidden; height: 1em; vertical-align: bottom;}
.count-num-item-box {display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; transform: translateY(0); transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);}
.count-num-item-box.down {transform: translateY(var(--count-start-y, 0));}
.count-num-box.animated .count-num-item-box {transform: translateY(var(--count-final-y, 0));}
.count-num-box.animated .count-num-item-box.down {transform: translateY(0);}
.count-num-item {display: block; height: 1em; line-height: 1; text-align: center;
	font-size: 80px; font-family: var(--font-family2); font-weight: 300;
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Full-Stack AI) -------- */
#mainContent2 {display: none;}
.main-con02-inner {position: relative; width: 100%; height: 100%; display: flex; align-items: stretch; justify-content: center; gap: 120px;}
.main-ai-list-con {position: relative; width:680px; height: 680px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;}
.main-ai-list-con:before {position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; border-radius: 100px; 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-con02-inner .main-ai-txt-wrap .main-tit-box .main-ai-txt-pc {
	min-height: 240px;
    width: 100%;
}
.main-con02-inner .main-ai-txt-wrap .main-tit-box {
	position: relative;
	display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: flex-start;
    justify-content: center;    
}
.main-con02-inner .main-ai-txt-wrap .main-tit-box 
.main-ai-txt-con .badge-list {position: relative; display: flex; margin-top: 40px; list-style: none; gap: 16px;}
.main-ai-txt-con .badge-list .badge {    
	display: inline-block;
    border-radius: 40px;
    padding: 8px 16px;
	color: rgba(255,255,255,0.7);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.02em;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(15px) opacity(1);
    line-height: 1.3;
    white-space: nowrap;
	font-family: var(--font-family2);
}
.main-con02.animated .main-ai-list-con:before  {opacity: 1; transform:scale(1.0);}
.main-con02.animated .main-ai-list:before {opacity: 1;}
.main-con02.animated .main-ai-list li {opacity: 1;}
.main-con02.animated .main-ai-list-con .inner-txt {opacity: 1; }
.main-con02.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: var(--main-rgb10);
}
.main-con03 {display: flex;}
.main-con03 .left-con {width: 30%;}
.main-con03 .main-tit-box .main-txt02 {margin-top: 2.4rem;}
.main-con03 .right-con {width: 70%;}
.main-con03-list {display: flex; align-items: stretch; justify-content: space-between; flex-wrap:wrap; gap: 24px;}
.main-con03-list li {position: relative; flex:1; 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,
.badge-group .badge {display: inline-block; border-radius: 4rem; padding: 0.8rem 1.6rem; background: #fff; 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;}
.partner-swiper-wrap .icon-list {display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 40px;}
.partner-swiper-wrap .icon-list > li {position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px}
.partner-swiper-wrap .icon-list > li .icon {display: block;}
.partner-swiper-wrap .icon-list > li .icon img {width: auto; height: 60px;}
.partner-swiper-wrap .icon-list > li .text {display: block; width: 100%; text-align: center; font-size: 14px; font-weight: 500; white-space: nowrap;}

/*  */
#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: 40px; background-color: var(--main-rgb10); 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: 40px; width: 100%; flex-wrap: wrap;}
.main-application-list li {position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 30%; z-index: 1; opacity: 0; transform: translateX(-10%); transition: var(--transition-custom2); transition-property: opacity, transform;}
.main-application-list li img {border-radius: 24px; display: block; margin-bottom: 24px;}
.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-application-list li.item06 {transition-delay: 1.0s;}
.main-application-list li .badge {
    display: inline-block;
    border-radius: 40px;
    padding: 8px 16px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: var(--main-color);
    line-height: 1.3;
    white-space: nowrap;
}
.main-application-list li h5 {display: block; width: 100%; text-align: left; margin-top: 24px; color: var(--color-dark); font-size: 20px; font-weight: 600;}
.main-con04-box.animated .main-application-list li {opacity: 1; transform: translateX(0);}
.main-application-list li p {font-size: 16px; font-weight: 500; letter-spacing: -0.5px; color: var(--gray-600); line-height: 1.5; margin-top: 16px; word-break: keep-all;}
.main-con04-box.animated:before {opacity: 1;width: 100%;}

#mainContent5 {
	position: relative; 
	display: flex;
    align-items: center;
	width: 100%; 
	min-height: 100vh; 
	padding: 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);
}
#mainContent5:before {
	content: "";
	position: absolute;
	inset: -4%;
	background: url(../images/main/bg_workflow.jpg) right center / cover no-repeat fixed;
	opacity: 0.2;
	z-index: -1;
}
.main-products__cont-area .main-sub-tit,
#mainContent5 .main-tit-box .main-sub-tit {display: block; font-size: 24px; font-weight: 400; letter-spacing: -1px; color: #fff; line-height: 1.4; margin-bottom: 16px; font-family: var(--font-family2); text-transform: uppercase;}
#mainContent5 .main-tit-box .main-tit{font-size: 48px; font-weight: 600; letter-spacing: -0.05em; color: #fff; line-height: 1.2; margin-bottom: 24px;}
#mainContent5 .main-tit-box .main-txt01 {display: block; margin-bottom: 8px; font-size: 24px; font-weight: 600; letter-spacing: -0.05em; color: #fff; line-height: 1.6;}
#mainContent5 .main-tit-box .main-txt02 {font-size: 18px; font-weight: 400; letter-spacing: -1px;  color: var(--gray-200); line-height: 1.6;}
#mainContent5 .sub-txt {font-size: 20px; font-weight: 400; letter-spacing: -0.05em; color: var(--gray-200); line-height: 1.6; margin-top: 16px;}
#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: 240px 0; background-color: var(--main-rgb10); display: flex; flex-direction: column; align-items: stretch; justify-content: center;}
.main-con06 {display: flex;}
.main-con06 .left-con {width: 30%;}
.main-con06 .main-tit-box .main-txt02 {margin-top: 16px;}
.main-con06 .right-con {width: 70%; padding-left: 40px;}
.main-con06-list {display: flex; align-items: stretch; justify-content: space-between; gap: 24px;}
.main-con06-list li {flex:1; border-radius: 32px; background: #fff; min-height: 340px; 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 .box {position: relative; display: block; width: 100%; height: 100%; padding: 24px; box-sizing: border-box; border-radius: 32px;  transition:all 0.4s;}
.main-con06-list li .box .tit-box strong {display: inline-block; font-size: 24px; font-weight: 600; letter-spacing: -0.5px; color: var(--color-dark); line-height: 1.4;}
/* .main-con06-list li .box .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 .box .tit-box p {font-size: 16px; font-weight: 500; letter-spacing: -0.05em; color: var(--gray-600); line-height: 1.5; margin-top: 16px;}
.main-con06-list li .box .icon-box {
	position: absolute;
    height: 80px;
    text-align: center;
    bottom: 40px;
    left: calc(50% - 40px);
}

.main-con06-list li .box .icon-box img {width: 80px;}
.main-con06.animated .main-con06-list li {opacity: 1;-webkit-transform: none; transform: none;}

/* -------- #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.jpg) right center / cover no-repeat fixed;
	/* filter: blur(2px); */
	opacity: 0.2;
	z-index: -1;
}
.main-con07-tit-con {display: flex; margin-bottom: 80px;}
.main-con07-tit-con .tit {width: 20%; font-size: 64px; 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: 40px; top:1.1rem;  left: -2px; background-color: #fff;}
.main-con07-tit-con .txt-box .txt01 {font-size: 40px; font-weight: 600; letter-spacing: -0.05em; color: #fff; line-height: 1.4;}
.main-con07-tit-con .txt-box .txt02 {font-size: 20px; font-weight: 400; letter-spacing: -1px; color: var(--gray-300); line-height: 1.4; margin-top: 16px;}
.main-con07-box {position: relative;width: 100%; padding: 80px; 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: 60px; 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: 24px; margin-bottom: 24px;}
.inquiry-form .form-group {flex: 1; min-width: 0;}
.inquiry-form .form-group.full {margin-bottom: 24px;}
.inquiry-form label {display: flex; font-size: 14px; font-weight: 500; color: #FFF; letter-spacing: -0.02em; margin-bottom: 0.8rem;}
.inquiry-form label .required {color: var(--secondary); margin-left: 4px;}
.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-rgb10); 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: var(--body-color); letter-spacing: -0.02em; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;}
.custom-select-option:hover {background: var(--main-color); color: #fff;}
.custom-select-option.selected {color: var(--main-color);}
.custom-select-option.selected:hover {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); font-weight: 500;}
.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: 60px; 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(255,255,255,0) 0%, rgba(255,255,255,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); */
	background: rgba(0, 56, 148, 0.4);
    backdrop-filter: blur(8px);
	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: 24px; font-weight: 600; letter-spacing: -0.03em; color: #fff;}
.privacy-modal-close {width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2.8rem; line-height: 1; transition: background 0.2s ease, color 0.2s ease;}
.privacy-modal-close:hover {background: #fff; color: var(--body-color)}
.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: 20px;}
.privacy-table {width: 100%; border-collapse: collapse; font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 16px; border-radius: 24px; 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: 14px; font-weight: 500; color: var(--body-color); line-height: 1.4; letter-spacing: -0.02em; padding-left: 12px;}
.privacy-modal-notice li + li {margin-top: 16px;}
.privacy-modal-notice li::before {content: '·'; position: absolute; left: 0; top: 0;}
.privacy-modal-footer {padding: 0 40px 40px; flex-shrink: 0; display: flex; justify-content: center;}
.privacy-modal-confirm {height: 48px; padding: 0 4rem; background: #fff; color: var(--main-color); border-radius: 48px; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; cursor: pointer; transition: 0.25s;}
.privacy-modal-confirm:hover {background: var(--main-color); color: #fff; 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: 24px; 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: 56px; height: 56px; 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:40px; 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:20px; letter-spacing:-1px; color:var(--main-color); font-weight: 600; line-height:1.2; white-space: nowrap; text-transform: uppercase;}
.tit-box .tit {display: block; font-size:48px; letter-spacing:-0.05em; color:#fff; font-weight: 600; line-height:1.2; margin-top: 16px;}
.tit-box .tit > em {font-size:40px; letter-spacing:-0.05em; color: var(--color-dark); font-weight: 700; line-height:1.2;}
.tit-box .txt {font-size:20px; letter-spacing:-0.05em; color:#fff; opacity: 0.6; font-weight: 500; line-height:1.5; margin-top: 24px;}
.tit-box.dark .sub-tit {color: #fff; font-weight: 500;}
.tit-box.dark .tit {color: #fff !important;}
.tit-box.dark .txt {color: #fff !important; font-weight: 300;}

/* applications */
.applications {position: relative; margin: 30rem auto;}
.applications .tit-box .tit {font-size: 44px; 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: 32px; max-width: 100%;}
.applications-list li .txt-box {flex: 1; width: 100%;}
.applications-list .tit {font-size:40px; letter-spacing:-0.02em; color: var(--color-dark); font-weight: 700; line-height:1.2;}
.applications-list .sub-tit {font-size:18px; 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:16px; 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: 16px;}
.applications-list .txt.dot-txt + .txt.dot-txt {margin-top: 8px;}
.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);}

/* 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;
}


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

/* Philosophy — Mission / Vision */
.philosophy-section,
.business-section {
	position: relative;
	width: 100%;
	padding: 200px 80px;
	background-color: var(--main-rgb10);
	min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.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: 40px;
    margin: 40px auto 0;
	align-items: center;
}
.business-con {	
	width: 100%;
	margin: 40px auto 0;
}
/* .business-con {		
	grid-template-columns: repeat(4, 1fr);
} */
.philosophy-item,
.business-item {
	position: relative;
	height: 600px;
	background: #fff;
	border-radius: 40px;
	padding: 0;
	position: relative;
	/* overflow: hidden; */
	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;
	overflow: hidden;
}
.philosophy-item {background: url(../images/company/about_mission.jpg) no-repeat 100% 50%; background-size: cover;}
.philosophy-item:after,
.business-item:after {
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.4);
}


.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;
}
.mission .values-list {grid-template-columns: repeat(3, 1fr); margin: 80px 0 0; width: 100%;}
.mission .values-list .value-card {	
	background: rgba(255, 255, 255, .4);
    backdrop-filter: blur(15px) opacity(1);
}
.mission .values-list .value-icon {
    width: 80px;
    height: 80px;
	padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    background-color: var(--main-color);
    border-radius: 50%;
}
.philosophy-section.vision {
	z-index: 1;
	overflow: hidden;
	background: radial-gradient(circle at 20% 20%, rgba(0, 180, 255, 0.2), transparent 60%), radial-gradient(circle at 80% 30%, rgba(0, 120, 255, 0.8), transparent 40%), radial-gradient(circle at 50% 100%, rgba(0, 60, 255, 0.4), transparent 50%), linear-gradient(135deg, #0a0f1f, #0e1a35, #101c3a);
}
.philosophy-section.vision:before {
	content: "";
    position: absolute;
    inset: -4%;
    background: url(../images/company/about_vision.jpg) right center / cover no-repeat fixed;
    opacity: 0.2;
    z-index: -1;
}
.philosophy-section.vision:after {
	content: "";
    position: absolute;
    inset: -4%;
	/* background: linear-gradient(to right, #0c264d, transparent); */
	background: linear-gradient(to right, #000, transparent);
	opacity: 0.4;
    z-index: 2;
}
.philosophy-section.vision .philosophy-con {grid-template-columns: 1fr;}
.philosophy-section.vision .tit-box {position: relative; z-index: 3;}
.philosophy-section.vision .tit-box .sub-tit,
.philosophy-section.vision .tit-box .tit {color: #fff;}
.philosophy-section.vision .tit-box .txt {color: var(--gray-200) !important;}
.philosophy-section.vision .values-list {grid-template-columns: repeat(4, 1fr); margin: 80px 0 0; width: 100%;}
.philosophy-section.vision .values-list .value-card {	
	background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(16px) opacity(1);
}
.philosophy-section.vision .values-list .value-card .value-icon {
	width: 80px;
	height: 80px;	
	border-radius: 50%;
	padding: 16px;
	background: rgba(255, 255, 255, .02);
    backdrop-filter: blur(8px) opacity(1);
}
.philosophy-section.vision .values-list .value-card .value-en {color: #fff;}
.philosophy-section.vision .values-list .value-card .value-tit {color: #fff;}
.philosophy-section.vision .values-list .value-card .value-desc {color: var(--gray-200);}

/* 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: 60px;
	height: 60px;	
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
}
.value-icon i { font-size: 24px; color: var(--main-color); }
.value-en {
	font-size: 16px;
    color: var(--main-color);
    font-weight: 500;
    margin-bottom: 8px;
    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: 32px;
	font-weight: 600;
	color: var(--color-dark);
	line-height: 1.4;
	margin: 16px 0 24px;
	letter-spacing: -1px;
}
.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: 16px; margin-bottom: 40px;}
.partner-swiper-count {font-size: 16px; color: var(--body-color); white-space: nowrap;}
.partner-swiper-control button {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: transparent;
	color: var(--color-dark);
	font-size: 18px;
	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-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: 24px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 16px 0 8px;
	letter-spacing: -0.05rem;
	line-height: 1.2;
	word-break: keep-all;
}
.solution-industry-desc {
	display: block;
	margin-top: 16px;
	text-align: center;
	font-size: 16px;
	color: var(--body-color);
	font-weight: 500;
	line-height: 1;
	word-break: keep-all;
	white-space: nowrap;
}
.solution-industry-desc.date {
	font-size: 15px;
	opacity: 0.7;
}

/* 산업 분야 :: Swiper (solutions.html section02) */
.solution.section02.bg-blue {padding: 300px 0 400px; margin-bottom: -100px;}
.solution.section02 .tit-box .tit {font-family: var(--font-family1);}
.solution-industry-swiper-wrap {position: relative; margin-top: 80px;}
/* 카드 진입 애니메이션: 우→좌로 나타나며 제자리를 잡음 (효과가 뚜렷하게 보이도록 이동거리·시간을 늘림) */
@keyframes industrySlideIn {
	from { transform: translate3d(280px, 0, 0); opacity: 0; }
	to   { transform: none; opacity: 1; }
}
.solution-industry-swiper .swiper-slide {
	transform: translate3d(280px, 0, 0);
	opacity: 0;
}
.solution-industry-swiper.animated .swiper-slide {
	animation: industrySlideIn 0.85s 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: 420px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 4rem;
	padding: 4rem;
	text-align: center;
}
.solution-industry-swiper .solution-industry-item:before {
	content: "";
	position: absolute;
	left: 16px;
	top: 16px;
	right: 16px;
	bottom: 16px;
	background: url(../images/company/frame2.png) no-repeat 50% 50%;
	background-size: contain;
	opacity: 0.2;
	display: none;
}
/* 호버 시 부드럽게 나타나는 배경 이미지 (layout.css의 .card-hover:hover .opacity-0 와 연동) */
.solution-industry-swiper .solution-industry-item .opacity-0 {
	position: absolute;
	inset: 0;
	opacity: 0;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	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)); */
	background: var(--main-gradient);
	opacity: 0.4;
}
.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: 100px;
	height: 100px;
	margin-bottom: 24px;
	font-size: 40px;
	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-item .badge {font-size: 14px; background-color: transparent !important; word-break: keep-all; white-space: normal; line-height: 1.2;}
.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; display: flex; align-items: center; justify-content: space-between; gap: 2rem; 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 .download-doc-nav {display: flex; flex-shrink: 0; gap: 1.2rem;}
.section01 .tab_btn .download-doc-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);
}
.section01 .tab_btn .download-doc-nav button:hover {background: var(--main-color); color: #fff; border-color: var(--main-color);}
.section01 .tab_btn .download-doc-nav button.swiper-button-disabled {opacity: 0.35; pointer-events: none;}
.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-container .swiper-wrapper {cursor: move;}
.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: 200px 0; }

/* 레이아웃: 메인(2/3) + 사이드바(1/3) */
.pg-layout { display: flex; gap: 80px; align-items: flex-start;}
.pg-main { flex: 1; min-width: 0; }
.pg-sidebar { flex-shrink: 0; width: 280px; 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: 100px;
	padding: 4px;
	gap: 0;
}
.pg-filter-slider {
	position: absolute;
	top: 4px; bottom: 4px; left: 4px;
	background: var(--main-gradient);
	border-radius: 100px;
	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: 40px; padding: 0 20px;
	border: none; border-radius: 100px;
	background: transparent; color: var(--body-color);
	font-size: 15px; 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: 14px; 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: 28px; font-weight: 700; color: var(--color-dark); margin-bottom: 8px; font-family: var(--font-family2); }
.pg-brand-desc { font-size: 18px; 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: 24px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.pg-card:hover { transform: translateY(-0.6rem); box-shadow: 0 12px 32px rgba(15,23,42,0.1); }
.pg-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.pg-card-inner {position: relative; display: flex; flex-direction: column; height: 100%; color: inherit; }
.pg-admin-edit {
	position: absolute;
    top: 24px !important;
    right: 24px !important;
    padding: 8px 16px !important;
    border-radius: 100px !important;
    font-size: 13px !important;
    font-weight: 500;
    font-family: var(--font-family1);
    color: #fff;
    background: rgba(255, 255, 255, .2) !important;
    backdrop-filter: blur(15px) opacity(1) !important;
	z-index: 10 !important;
}
.pg-admin-edit:hover {
	background-color: var(--main-color);
}

/* 카드 카테고리 행: 카테고리명 + 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: 4px;
	font-size: 14px;
	font-weight: 500;
	color: var(--main-color);
	text-decoration: none;
	white-space: nowrap;
	padding: 8px 16px;
	border-radius: 100px;
	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% + 16px);
	left: 50%; transform: translateX(-50%) translateY(4px);
	background: rgba(18,18,18,0.9); color: #fff;
	font-size: 12px; font-weight: 500;
	white-space: nowrap;
	padding: 6px 12px;
	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);
}
.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: 24px; 
	left: 24px;
	padding: 8px 16px; 
	border-radius: 100px;
	font-size: 13px; 
	font-weight: 500; 
	font-family: var(--font-family2);
	color: #fff;
	background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(15px) opacity(1);
}

.pg-card-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 24px 36px; background-color: #f3f6f9;}
.pg-category { font-size: 14px; color: var(--main-color); font-weight: 600; letter-spacing: -0.02em; display: block; }
.pg-name { font-size: 24px; font-weight: 700; color: var(--color-dark); line-height: 1.2; letter-spacing: -0.05rem;}
.pg-name em { display: block; font-size: 16px; font-weight: 500; color: var(--body-color); font-style: normal; margin-top: 8px;}
.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: 24px; color: var(--body-color); font-weight: 500; font-size: 14px; 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);
}


/* 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: 24px; 
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	counter-increment: dlItem;
	box-shadow: 2px 4px 4px rgba(90, 116, 148, 0.2);
	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: 160px;
	background: url(../images/support/img_catalog.png) no-repeat 50% 0;
	background-size: cover;
	border-radius: 24px 24px 0 0;
	overflow: hidden;
}
.download-item .img-area::before {
	content: counter(dlItem, decimal-leading-zero);
	position: absolute; 
	top: 24px;
	right: 24px;
	font-family: var(--font-family2);
	font-size: 44px; 
	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 24px 24px;
	border-radius: 0 0 24px 24px;
	background-color: #fff;
	border: 1px solid #f3f3f3;
}
.download-item .icon {
	position: absolute;
	top: -16px;
	left: 24px;
	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 8rem; 
	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 .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: center; 
	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;
	min-width: 120px;
    text-align: center;
}
.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;
	max-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;	
	/* background-color: #000; */
	position: relative;
	z-index: 0;
}
/* 배경 동영상 */
.login-bg-video {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: -1;
}
.login-bg-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 카드 */
.login-card {
	display: flex;
	width: 50vw;
	max-width: 680px;
	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(0, 78, 146, 0.4);
	/* background: rgba(255, 255, 255, 0.08);*/	
	backdrop-filter: blur(5px);
}
@keyframes loginCardIn {
	from { opacity: 0; transform: translateY(24px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

/* ===== 좌측 패널 ===== */
.login-left {	
	flex: 1;	
	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;
	color: #fff !important;
}

.login-left__greeting {
	font-family: var(--font-family2);
	font-size: 4.0rem;
	font-weight: 600;
	display: block;
	margin-bottom: 24px;
	text-align: center;
	text-transform: uppercase;
}
.login-left__desc {
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1;
	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: 40px 0;
	/* background: rgba(255, 255, 255, .2); */
	
    /* backdrop-filter: blur(30px); */
}
.login-form-wrap {
	width: 100%;
	max-width: 80%;
}

/* 로고 */
.login-logo-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 4rem;
}
.login-logo {
	width: 160px;
	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.4rem;
	color: #fff;
	flex-shrink: 0;
	width: 2.0rem;
}
.login-field__input {
	flex: 1;
	border: none;
	outline: none;
	font-size: 1.6rem;
	color: #fff;
	background: transparent;
	font-family: var(--font-family1);
}
.login-field__input::placeholder { color: rgba(255,255,255,0.6); font-weight: 500;}
.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;
	/* 크롬이 자동완성 시 강제로 채우는 배경색은 background-color로는 안 지워져서, 대신 box-shadow로 배경을 덮어 안 보이게 함 */
	-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
	box-shadow: 0 0 0 1000px transparent inset !important;
	-webkit-text-fill-color: #fff !important;
	caret-color: var(--color-dark);
}
.login-field__toggle {
	font-size: 1.6rem;
	color: #fff;
	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;
	margin-top: -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: #fff; }

/* 로그인 버튼 */
.login-btn {
	width: 100%;
	height: 4.8rem;
	border: none;
	border-radius: 50px;
	background: #fff;
	color: var(--main-color);
	font-size: 1.6rem;
	font-weight: 600;
	font-family: var(--font-family1);
	cursor: pointer;
}
.login-btn:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	color: #fff;
	background-color: var(--main-color);
	box-shadow: 0 4px 8px var(--main-color);
}
.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.4);
}
.login-social-divider span {
	font-size: 1.4rem;
	color: var(--main-color);
	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.4rem; }
.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: #fff; }
.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 i {font-size: 18px; font-weight: normal; display: inline-block; margin-right: 4px;}
.login-footer-links a {
	font-size: 1.6rem;
	color: #fff;
	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; 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 var(--main-rgb20);
	border-radius: 3rem;
	background: var(--main-rgb10);
}
.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; }
.main-products.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;
	background-attachment: fixed;
	z-index: 0;
}

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

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

/* 패널 제목 */
.main-products__panel-title {
	font-size: 44px;
	font-weight: 500;
	color: #fff;
	line-height: 1.2;
	letter-spacing: -1px;
	word-break: keep-all;
}
.main-products__cont-area .txt02 {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -1px;
    color: var(--gray-200);
    line-height: 1.4;
	word-break: keep-all;
	margin: 16px 0 24px;
}
/* ===== 카드 슬라이더 영역 ===== */
.main-products__slider-wrap {
	position: relative;
	width: 100%;
	margin-top: 80px;
	opacity: 0;
	transform: translate3d(80px, 0px, 0px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	transition-delay: 0.2s;
}
.main-products.animated .main-products__slider-wrap {
	opacity: 1;
	transform: translate3d(0px, 0px, 0px);
}

/* 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: 480px;
	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);
}
.btn.more.long {width: 240px;}

/* 활성 패널의 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: 100%;                  /* 고정 너비 (Swiper slidesPerView: auto) */
	height: 100%;
	padding: 24px;
	border-radius: 24px;
	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: 0;
	width: 100%;	
	display: block;
}
.main-products__card-text .card-title {
	position: relative;
	font-size: 24px;
	font-weight: 500;
	color: #fff;
	line-height: 1.4;
	word-break: keep-all;
}
.main-products__card-text .card-title i {
	position: absolute;
	right: 0;
    top: 4px;
	font-size: 24px;
	opacity: 0;
	transform: translateX(-12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.main-products__card-text .card-text {
	display: block;
	margin-top: 8px;
	font-size: 16px;
	font-weight: 400;
	color: var(--gray-100);
	line-height: 1.2;
	word-break: keep-all;
}
.main-products__card:hover .main-products__card-text .card-title {
	color: var(--color-dark);
}
.main-products__card:hover .main-products__card-text .card-title i {
	opacity: 1;
	transform: translateX(0);
}
.main-products__card:hover .main-products__card-text .card-text {
	color: var(--gray-600);
}

/* 카드 이미지 영역 */
.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, 56, 148, 0.4);
	backdrop-filter: blur(6px);
	height: 48px;
}

.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: 16px 24px;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--font-family1);
	font-size: 16px;
	font-weight: 500;
	color: rgba(255,255,255,0.8);
	letter-spacing: -0.02em;
	transition: color 0.25s;
	text-align: center;
	white-space: nowrap;
}
.about-tab-btn:hover {color: var(--main-color); background-color:rgba(255,255,255,0.4);}
.about-tab-btn.active {color: var(--main-color); background-color:#fff; font-weight: 600;}

.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;
}
/* 스크롤 150vh 이상 진입 시 화면 하단에 고정 */
.about-tab-nav.is-sticky-bottom {
	position: fixed;
	top: auto;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.2);
    border-radius: 60px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(40px);
    flex-wrap: nowrap;
}
.about-tab-nav.is-sticky-bottom .about-tab-inner {padding: 0;}
.about-tab-nav.is-sticky-bottom .about-tab-btn {color: var(--gray-900);}
.about-tab-nav.is-sticky-bottom .about-tab-btn:hover {color: var(--gray-900); background-color: transparent;}
.about-tab-nav.is-sticky-bottom .about-tab-btn.active {
	color: #fff; 
	background-color: rgba(0, 56, 148, 1);
	border-radius: 60px;
	background: #05abe0;
    background: -moz-linear-gradient(45deg, #05abe0 0%, #003894 100%);
    background: -webkit-linear-gradient(45deg, #05abe0 0%, #003894 100%);
    background: linear-gradient(45deg, #05abe0 0%, #003894 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05abe0', endColorstr='#003894',GradientType=1 );
}

/* ---- Company Section (회사소개) ---- */
.company-section {
	padding: 200px 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: 48px;
    color: var(--color-dark);
    margin-bottom: 24px;
}
.company-section .tit-box .txt {
    color: var(--body-color);
	opacity: 1;
}
.company-body {
	position: relative;
	display: block;
	width: 100%;
	height: 600px;
	margin-top: 48px;
	background-size: cover;
	border-radius: 40px;
	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);
}
/* background: url()은 이미지 전용이라 mp4를 렌더링하지 못함 — 실제 <video> 엘리먼트를 배경처럼 채우는 방식으로 교체 */
.company-body-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.company-body-video video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	opacity: 0.6;
}
.company-desc {
	position: relative;
	width: 100%;
	padding: 80px;
	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 :: project.html / portfolio.html 전용 스타일은 references.css로 분리 이전됨 */

/* =============================================================================
   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;}

/* 카드가 왼쪽→오른쪽, 위→아래 순으로 하나씩 나타나는 진입 애니메이션 (main-products__tab-list와 동일한 방식) */
.brand-hub-card { opacity: 0; transform: translate3d(-30px, 0, 0); transition: opacity 0.5s ease, transform 0.5s ease; }
.brand-hub-card:nth-child(1) { transition-delay: 0.1s; }
.brand-hub-card:nth-child(2) { transition-delay: 0.22s; }
.brand-hub-card:nth-child(3) { transition-delay: 0.34s; }
.brand-hub-card:nth-child(4) { transition-delay: 0.46s; }
.brand-hub-card:nth-child(5) { transition-delay: 0.58s; }
.brand-hub-card:nth-child(6) { transition-delay: 0.70s; }
.brand-hub-grid.animated .brand-hub-card { opacity: 1; transform: none; }

.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; background: var(--main-rgb10); }
.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; }
/* 브랜드 로고 대신 카테고리명을 텍스트로 표시하는 경우(예: product/product.html 자체 제품 카테고리) */
.brand-hub-cat-name { display: block; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1.6rem; }
.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); }


/* 개인정보처리방침 */
#container.content-page {
	position: relative;
    min-height: 800px;
    width: 100%;
    top: 100px;
    padding: 120px 0 200px;
}
.btn {
	display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: all .15s;
    text-decoration: none;
    white-space: nowrap;
    justify-content: center;
}
.btn_admin {
	padding: 8px 16px;
	color: var(--main-color);
	font-size: 14px;
	background-color: var(--main-rgb10);
}
.btn_admin:hover {
	color: #fff;
	background-color: var(--main-color);
}
#container.content-page .privacy {
	display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
	gap: 16px;
}
#container.content-page .privacy h2 {
	display: block;
	color: var(--color-dark);
	font-size: 24px;
	white-space: nowrap;
	font-weight: 700;
}
#container.content-page .privacy h3 {
	display: block;
	margin-top: 24px;
	color: var(--body-dark);
	font-size: 16px;
	white-space: nowrap;
	font-weight: 500;
}
#container.content-page .privacy h6 {
	display: block;
	margin-top: 16px;
	color: var(--body-dark);
	font-size: 14px;
	font-weight: 500;
}
#container.content-page .privacy p {
	display: block;
	color: var(--gray-600);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	word-break: keep-all;
}

/* History */
.history .company-section .tit-box .tit {margin-bottom: 24px; font-size: 40px;}
.history .list-area {
	position: relative;
	margin: 80px auto 0;
}

.history .list-area .line-wrap {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.8rem;
  height: 100%
}

.history .list-area .line-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--border-color)
}

.history .list-area .line-wrap .bar {
  position: absolute;
  top: 0;
  width: 1px;
  height: 0;
  background: var(--main-color)
}

.history .list-area .list-item {
  display: flex;
  align-items: center;
  gap: 160px
}

.history .list-area .list-item+.list-item {
  margin-top: 160px
}

.history .list-area .list-item:nth-child(odd) {
  flex-direction: row-reverse
}

.history .list-area .list-item .imageset {
	position: relative;
	overflow: hidden;
	flex: 1 1 668px;
	height: auto;
	border-radius: 40px;
	aspect-ratio: 668/428;
	background-color: #000;
}
.history .list-area .list-item .imageset img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.history .list-area .list-item .imageset img {opacity: 0.7;}
.history .list-area .list-item .dot {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--border-color);
	transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1)
}
.history .list-area .list-item .dot.active {
	background: var(--main-color);
	width: 16px;
	height: 16px;
	border: 4px solid rgba(0, 56, 148, 0.4);
}
/* .history .list-area .list-item .dot.active:before {
	content :"";
	position: absolute;
	top: -4px;
	left: -4px;
	right: -4px;
	bottom: -4px;
	width: 24px;
	height: 24px;
	background-color: rgba(0, 56, 148, 0.2);
	border-radius: 50%;
} */

.history .list-area .list-item .desc {
	flex: 1 1 668px;
}
.history .list-area .list-item .desc strong {
	display: block; 
	font-size: 42px;
	color: var(--color-dark);
	font-weight: 700;
}
.history .list-area .list-item .desc span {
	display: inline-block;
	margin-bottom: 24px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	/* font-family: var(--font-family2); */
	border-radius: 20px;
	background-color: var(--main-rgb10);
}
.history .list-area .list-item .desc ul {
	margin-top: 16px;
}
.history .list-area .list-item .desc li {
	display: flex;
	gap: 8px;
	align-items: center;
	color: var(--body-color);
	font-size: 16px;
	line-height: 1.8;
	font-weight: 500;
}
.history .list-area .list-item .desc li::before {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 1px;
	background: var(--gray-500)
}

.history .list-area .list-item .desc li+li {
  margin-top: 0.4rem
}


/* 대로시스템 location */
.location-area {
	position: relative;
	width: 100%;
	margin-top: 80px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 80px;
}
.location-area .location-row {
	width: 100%;
	display: flex; 
	align-items: stretch;
	justify-content: space-between;
	gap: 40px;
}
.location-area .location-row > div {
	border-radius: 40px;
	height: 480px;
	overflow: hidden;
}
.location-area .location-row .map-wrap {
	background-color: var(--main-color3);
	flex: 1;
}
.location-area .location-row .map-wrap iframe {
	width: 100%;
	height: 100%;
	opacity: 0.9;
}
.location-area .location-row .info-wrap {
	position: relative;
	width: 440px;
	padding: 40px;
	background-color: var(--main-rgb10);
	display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
}
.location-area .location-row .info-wrap h3 {
    display: block;
	padding-bottom: 24px;
    font-size: 32px;
    color: var(--color-dark);
    font-weight: 700;
	border-bottom: 1px solid var(--main-rgb20);
}
.location-area .location-row .info-wrap ul {
	display: flex;
	flex-direction: column;
    gap: 16px;
    align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	margin-top: -16px;
}
.location-area .location-row .info-wrap ul li {
	display: flex;
    gap: 16px;
    align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
    color: var(--body-color);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
	word-break: keep-all;
}
.location-area .location-row .info-wrap ul li i {
	display: inline-block;
	margin-top: -2px;
	font-size: 20px;
}
.location-area .location-row .info-wrap .main-btn {
	width: 100%;
	flex-shrink: 0;
}
.location-area .location-row .info-wrap .main-btn:hover .icon {
	width: 80rem;
}
.location-area .location-row .info-wrap .main-btn i {font-weight: 200;}

/* 대로시스템 organization :: 조직도 */
.organization {
	position: relative;
	margin-top: -48px;
	margin-bottom: -120px;
	padding-top: 48px;
	padding-bottom: 200px;
	z-index: 1;
    overflow: hidden;
    background: radial-gradient(circle at 20% 20%, rgba(0, 56, 148, 0.2), transparent 40%), radial-gradient(circle at 80% 30%, rgba(0, 0, 0, 0.4), transparent 40%), radial-gradient(circle at 50% 100%, rgba(0, 60, 255, 0.15), transparent 50%), linear-gradient(135deg, #0a0f1f, #0e1a35, #101c3a);
	/* background: var(--main-color); */
}
.organization:before {
	content: "";
    position: absolute;
    opacity: 0.4;
    z-index: -1;
    inset: -4%;
    background: url(../images/company/bg_organization.jpg) right center / cover no-repeat fixed;
}
.organization:after {
	content: "";
    position: absolute;
    inset: -4%;
    background: linear-gradient(to right, #000, transparent);
    opacity: 0.4;
    z-index: -1;
}
.org-chart {
	position: relative;
	width: 100%;
	margin-top: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 대표이사 배지 :: 회전하는 그라디언트 보더 */
@property --org-ceo-angle {
	syntax: '<angle>';
	initial-value: 90deg;
	inherits: true;
}
.org-ceo {
	position: relative;
	z-index: 2;
	--org-ceo-angle: 90deg;
	--org-ceo-border: 2px;
	--org-ceo-c1: var(--secondary);
	--org-ceo-c2: rgba(255, 255, 255, 0);
	animation: orgCeoBorderRotate 3200ms linear infinite forwards;
}
.org-ceo-badge {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	box-shadow: 0 24px 48px -16px rgba(0, 56, 148, 0.24);
	background: rgba(0, 56, 148, 1);
	backdrop-filter: blur(16px) opacity(1);
}
/* 회전하는 conic-gradient 링: 원형이라 border-image 대신 mask로 안쪽을 뚫어 테두리만 표시 */
.org-ceo-badge::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	padding: var(--org-ceo-border);
	background: conic-gradient(from var(--org-ceo-angle), var(--org-ceo-c2), var(--org-ceo-c1) 0.1turn, var(--org-ceo-c1) 0.15turn, var(--org-ceo-c2) 0.25turn, var(--org-ceo-c2));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
}
@keyframes orgCeoBorderRotate {
	100% { --org-ceo-angle: 450deg; }
}
@media (prefers-reduced-motion: reduce) {
	.org-ceo { animation: none; }
}
.org-ceo-role {
	font-size: 16px;
    display: block;
    padding-bottom: 8px;
    color: var(--gray-200);
}
.org-ceo-name {
	font-size: 24px;
	font-weight: 700;
	color: #fff;
}

/* 대표이사 → 부서 점선 브랜치 */
.org-branch {
	position: relative;
	width: 100%;
	/* max-width: 1000px; */
	height: 80px;
}
.org-branch::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 40px;
	border-left: 1px solid #fff;
	transform: translateX(-50%);
}
/* .org-branch::after {
	content: "";
	position: absolute;
	top: 40px;
	left: 10.6%;
	width: 78.8%;
	border-top: 1px solid rgba(255, 255, 255, 0.4);
} */


.org-dept-list > li {position: relative;}
.org-dept-list > li:after {content: ""; position: absolute; top: -100px; left: 50%; right: calc(-50% - 80px); height: 1px; background-color: #fff;}
.org-dept-list > li:last-child:after {display: none;}

/* 부서 목록 */
.org-dept-list {
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 80px;
	margin-top: 60px;
}
.org-dept-list li {
	padding: 80px 40px 40px;
	border-radius: 40px;
	background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(16px) opacity(1);
    opacity: 0;
    transform: scale(0.8);
    transition: var(--transition-custom2);
	border: 1px solid rgba(255, 255, 255, 0.24);
}
.org-dept {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.org-dept::before {
	content: "";
	position: absolute;
	top: -100px;
	left: 50%;
	width: 1px;
	height: 40px;
	/* border-left: 1px dashed var(--main-rgb20); */
	border-left: 1px solid #fff;
	transform: translateX(-50%);
}
.org-dept-icon {
	position: absolute;
	top: -60px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: rgba(0, 56, 148, 1);
    backdrop-filter: blur(16px) opacity(1);
	transition: var(--transition-custom);	
    box-shadow: 0 24px 48px -8px rgba(0, 56, 148, 0.8);
}
.org-dept-icon img {
	width: 50%;
    opacity: 0.6;
}
.org-dept-name {
	margin-top: 24px;
	font-size: 24px;
	font-weight: 500;
	color: #fff;
}
.org-dept-en {
	margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
    color: var(--gray-300);
}

/* 부서별 하위 팀 목록 */
.org-team-list {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	width: 100%;
	margin-top: 24px;
}
.org-team-list li {
	padding: 16px;
	border-radius: 99px;
	font-size: 18px;
	font-weight: 500;
	color: #fff;
	transition: var(--transition-custom);
	opacity: 1;
	background-color: rgba(255,255,255, 0.001);
	border: 0;
	letter-spacing: 1px;
}


/* ================================================================
	certification
================================================================ */
.certification .section01 {
	position: relative;
	padding: 20rem var(--area-padding);
}
.certification .section01 ul {
	position: relative;
	margin-top: 8rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-items: center;
	gap: 4rem;
}

/* 카드 플립 */
.certification .section01 ul li.card {
	position: relative;
	min-height: 470px;
    border-radius: 40px;
    perspective: 150rem;
    cursor: pointer;
    padding: 0;
	width: 100%;
	min-width: 330px;
    max-width: 330px;
}
.certification .section01 .card-flip-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	transform-style: preserve-3d;
}
/* PC: hover로 뒤집기 / 터치기기: 클릭 시 .is-flipped 토글(app.js) */
.certification .section01 .card:hover .card-flip-inner,
.certification .section01 .card.is-flipped .card-flip-inner {
	transform: rotateY(180deg);
}
.certification .section01 .card-flip-front,
.certification .section01 .card-flip-back {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	background-color: var(--main-rgb10);
	border-radius: 4rem;
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.certification .section01 .card-flip-front:before {
	content:"";
	position: absolute;
	left: 16px;
	top: 16px;
	right: 16px;
	bottom: 16px;
	background: url(../images/company/frame.png) no-repeat center;
	background-size: contain;
}
.certification .section01 .patent .card-flip-front .medal {
	position: absolute;
	top: 27px;
	width: 100%;
	height: 160px;

}
.certification .section01 .iso .card-flip-front .medal {
	position: absolute;
	top: 70px;
	width: 100%;
	height: 100px;

}
.certification .section01 .ce .card-flip-front .medal {
	position: absolute;
	top: 80px;
	width: 100%;
	height: 80px;

}
.certification .section01 .card-flip-front .medal img {
	width: auto;
	height: 100%;
}
.certification .section01 .card-flip-front .card-body {
	padding: 160px 0 24px
}
.certification .section01 .card-flip-back {
	transform: rotateY(180deg);
}
.certification .section01 .card-body {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
	padding: 40px;
	box-sizing: border-box;
}
.certification .section01 .card-body.text-center {
	align-items: center;
	justify-content: center;
	text-align: center;
}
.certification .section01 .card-body .badge {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.5px;
}
.certification .section01 .card-body h3 {
	display: block;
	margin: 8px 0;
	color: var(--color-dark);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 1.2;
	word-break: keep-all;
}
.certification .section01 .card-text {
	display: block;
	color: var(--body-color);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.05rem;
	word-break: keep-all;
}
.certification .section01 .card-text.date {
	opacity: 0.6;
	font-size: 14px;
}
.certification .section01 .card-flip-back .card-body {
	padding: 24px;
}
.certification .section01 .card-flip-back .img-area {
	width: 100%;
	height: 100%;
}
.certification .section01 .card-flip-back .img-area img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.certification .section02 .flex-area {
	align-items: flex-end;
}

.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: 32px;
	font-weight: 600;
	color: var(--color-dark);
	line-height: 1.4;
	margin: 16px 0 24px;
	letter-spacing: -1px;
}
.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;
}