/* =====================================================
   ATE Main — Figma 디자인 + draft 스크롤 잭
   이미지 교체 위치 (모두 /images/main/ 폴더):
     · Hero 영상   bg.mp4
     · Hero 배경   hero-bg.jpg
     · 비즈니스 4   biz-01.jpg ~ biz-04.jpg
     · 보유기술 5  tech-01.jpg ~ tech-05.jpg
     · 납품실적    perf-bg.jpg
     · 뉴스 5      news-01.jpg ~ news-05.jpg
   ===================================================== */

/* ════════════ 공통 버튼 ════════════ */
.round-btn {
	display:inline-flex; align-items:center; gap:14px;
	height:56px; padding:0 28px;
	border:1.5px solid var(--c_base1); border-radius:999px;
	font-size:var(--fs17); font-weight:700; letter-spacing:0.05em;
	transition:all .35s cubic-bezier(0.16,1,0.3,1);
	white-space:nowrap;
}
.round-btn .arr {
	display:inline-flex; align-items:center; justify-content:center;
	padding:4px 0 0; width:16px; height:16px; transition:transform .35s;
}
.round-btn:hover {background: var(--c_base2);}
.round-btn:hover > * {color:#fff;}
.round-btn:hover .arr {transform:translate(3px,-3px);}
.round-btn.dark {color:#000;}
.round-btn.dark:hover {background:var(--c_base2); color:#fff;}
.round-btn.dark:hover > *{color:#fff;}
.round-btn.light {color:#fff;}
.round-btn.light:hover {background:#fff; color:#000;}
.round-btn.light:hover > *{color:#000;}
.round-btn.red {background:var(--c_base2); color:#fff; border-color:var(--c_base2);}
.round-btn.red:hover {background:#b80b13; border-color:#b80b13;}

/* ════════════ 공통 eyebrow ════════════ */
.eyebrow {
	display:inline-block;
	font-size:14px; font-weight:700; letter-spacing:0.15em;
	color:var(--c_base3);
	text-transform:uppercase;
}
.eyebrow.white {color:#fff;}

/* ════════════ 래퍼 / 슬라이드 컨테이너 ════════════ */
main .wrapper {
	position:fixed; top:0; left:0;
	width:100%; height:100%;
	overflow:hidden;
}
main .slide-container {
	will-change:transform;
	transition:transform .75s cubic-bezier(0.77, 0, 0.175, 1);
}

/* ════════════ 우측 플로팅 사이드 ════════════ */
main .m-side {
	position:fixed; right:30px; top:50%; transform:translateY(-50%); z-index:150;
	display:flex; flex-direction:column; gap:16px;
}
main .m-side-btn {
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	width:64px; height:64px; border-radius:32px;
	color:#fff; font-size:14px; font-weight:900; text-align:center; line-height:1.1;
	box-shadow:0 16px 15px rgba(0,0,0,0.18);
	transition:transform .25s;
}
main .m-side-btn:hover {transform:translateY(-4px);}
main .m-side-btn.blog {background:#089e00;}
main .m-side-btn.chat {background:var(--c_base3);}
main .m-side-btn.gotop {
	background:#fff; color:var(--ate-text);
	width:58px; height:58px; border-radius:18px;
	font-size:24px; font-weight:500;
	box-shadow:0 8px 12px rgba(0,0,0,0.12);
}

/* ════════════════════════════════════════════════
   [0] HERO — 100vh
════════════════════════════════════════════════ */
main .m-hero {position:relative; width:100%; height:100vh; min-height:400px; background:#0b0e14; overflow:hidden;}
main .m-hero-bg {position:absolute; inset:0; z-index:1;}
main .m-hero-bg video, .m-hero-bg img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.8;}
main .m-hero-bg::after {
	content:''; position:absolute; inset:0;
	background:
		linear-gradient(180deg, rgba(11,14,20,0.5) 0%, rgba(11,14,20,0.15) 40%, rgba(11,14,20,0.55) 100%),
		radial-gradient(circle at 50% 50%, rgba(19,67,143,0.25) 0%, transparent 60%);
}
main .m-hero-content {
	position:absolute; z-index:5; left:calc(50% - 700px); bottom:120px;
	display:flex; flex-direction:column; gap:40px;
	color:#fff; animation:heroFadeUp 1.2s .2s both;
	
}
@keyframes heroFadeUp {from {opacity:0; transform:translateY(40px);} to {opacity:1; transform:translateY(0);}}
main .m-hero-title {font-size:var(--fs70); font-weight:700; line-height:1.2; letter-spacing:-2px;color:#fff;}
main .m-hero-desc {font-size:var(--fs20); font-weight:500; line-height:1.6;color:rgba(255,255,255,0.84);}

/* ════════════════════════════════════════════════
   [1] ABOUT — 1000px
════════════════════.m-hero-content════════════════════════════ */
.m-about {position:relative; width:100%; height:1000px; background:#fff; overflow:hidden;}
.m-about-inner {
	position:relative; z-index:2;
	padding:316px 0 0;
	display:flex; justify-content:space-between; gap:60px;
}
.m-about-head {width:374px; flex-shrink:0;}
.m-about-head .eyebrow {margin-bottom:20px;}
.m-about-head h2 {
	font-size:var(--fs50); font-weight:800; line-height:1.2; letter-spacing:-0.02em;
	color:#000;
	margin-bottom:20px;
}
.m-about-head p {
	font-size:var(--fs17); line-height:1.7; color:var(--ate-text); font-weight:500;
	margin-bottom:60px;
	word-break:keep-all;
}
.m-about-head .btns {display:flex; gap:18px;}

.m-about-stats {
	display:flex; align-items:flex-start; gap:100px;
	padding-top:103px;
}
.m-about-stat {display:flex; flex-direction:column;}
.m-about-stat .num {
	font-size:var(--fs60); font-weight:900; line-height:1; letter-spacing:-0.04em;
	color:var(--c_base3);
}
.m-about-stat .num i {font-style:normal; font-size:0.6em; color:#000;}
.m-about-stat .lbl {margin-top:10px; font-size:16px; font-weight:700; color:#000; text-align:center;}
.m-about-stat .sub {margin-top:8px; font-size:14px; font-weight:500; color:var(--ate-text); text-align:center;}

.m-about-watermark {
	position:absolute; left:0; bottom:-40px;
	font-size:var(--fs240); font-weight:900; line-height:1; letter-spacing:-0.04em;
	color:rgba(19,67,143,0.06); text-transform:uppercase;
	white-space:nowrap; pointer-events:none; z-index:1;
}
.m-about-watermark-track {display: inline-flex;width: max-content;animation: watermarkFlow 28s linear infinite;}

.m-about-watermark span {
  flex: 0 0 auto;
  padding-right: 96px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

@keyframes watermarkFlow {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}
/* ════════════════════════════════════════════════
   [2] BUSINESS — 100vh + 4 horizontal panels
════════════════════════════════════════════════ */
.m-business {position:relative; width:100%; height:100vh; min-height:680px; overflow:hidden; background:#0b0e14;}
.m-biz-track {
	/*width:400%;*/
	width:303%;
	display:flex; height:100%; transition:transform 1s cubic-bezier(0.77,0,0.175,1); will-change:transform;
}
.m-biz-panel {
	position:relative;
	/* width:25%;  */
	width:33%; 
	height:100%;
	flex-shrink:0;
	overflow:hidden;
}
.m-biz-panel-bg {position:absolute; inset:0;}
.m-biz-panel-bg::before {content:''; position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.05);}
/* .m-biz-panel-bg::after {content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,14,20,0.3) 0%, rgba(11,14,20,0.5) 60%, rgba(11,14,20,0.85) 100%);} */
.m-biz-panel.p1 .m-biz-panel-bg::before {background-image:url(/images/main/img_m-business_01.WEBP);}
.m-biz-panel.p2 .m-biz-panel-bg::before {background-image:url(/images/main/img_m-business_02.WEBP);}
.m-biz-panel.p3 .m-biz-panel-bg::before {background-image:url(/images/main/img_m-business_03.WEBP);}
.m-biz-panel.p4 .m-biz-panel-bg::before {background-image:url(/images/main/img_m-business_04.WEBP);}

.m-biz-content {
	position:absolute; left:0; right:0; bottom:150px; z-index:3;
	color:#fff; padding:0 260px; justify-content: space-between;
	display:flex; gap:120px;
}
.m-biz-head {flex-shrink:0; width:474px;}
.m-biz-num {
	display:inline-block;color:var(--c_base3); margin-bottom:24px;
	font-size:var(--fs16); font-weight:700; letter-spacing:0.1em;
}
.m-biz-title {
	font-size:var(--fs70); font-weight:700; line-height:1; letter-spacing:-0.03em;
	color:#fff;
	margin-bottom:24px;
}
.m-biz-ko {
	font-size:var(--fs36); font-weight:700; letter-spacing:-0.02em;
	color:#fff;
}
.m-biz-right {display:flex; flex-direction:column; justify-content:end; flex:1; }
.m-biz-desc {
	font-size:var(--fs20); line-height:1.7; color:rgba(255,255,255,0.85); font-weight:500;
	margin-bottom:36px; text-align:right;
	word-break:keep-all;
}
.m-biz-tags {display:flex; flex-wrap:wrap; gap:12px; justify-content:end;}
.m-biz-tag {
	display:inline-flex; align-items:center; padding:0 32px; height:58px;
	border:1.5px solid rgba(255,255,255,0.4); border-radius:999px;
	font-size:15px; font-weight:600; color:#fff;
	background:rgba(255,255,255,0.05); backdrop-filter:blur(8px);
	transition:all .25s;
}
.m-biz-tag:hover {background:rgba(255,255,255,0.15); border-color:#fff;}

/* 4-segment progress bar */
.m-biz-bar {
	position:absolute; left:0; right:0; bottom:60px; z-index:3;
	padding:0 260px;
}
.m-biz-bar-inner {
	display:flex; gap:0;
	height:3px;
	background:rgba(255,255,255,0.15);
	border-radius:1.5px;
	overflow:hidden;
}
.m-biz-bar-seg {
	flex:1; height:100%;
	background:transparent;
	transition:background .5s;
}
.m-biz-bar-seg.on {background:var(--c_base3);}

/* ════════════════════════════════════════════════
   [3] TECH — 100vh + 카드 스크롤
════════════════════════════════════════════════ */
.m-tech {
	position:relative; width:100%; height:100vh; min-height:680px;
	background:#fff;
	overflow:hidden;
}
.m-tech::before {
	width:1361px; height:1000px; content:''; display:block;
	position:absolute; left:0; top:0;
	background:url(/images/main/bg_tech.WEBP)center no-repeat;
	z-index:1;
}
.m-tech-inner {
	height:100%; position:relative; z-index:2;
	max-width:1400px; margin:0 auto; width:100%;
	display:flex;  align-items:start;justify-content:space-between;
}

.m-tech-left {
	width:366px; z-index:3; position:relative; position:sticky;left:0;top:0;
	display:flex;flex-direction: column; align-self: center;
}
.m-tech-left .eyebrow {margin-bottom:20px;}
.m-tech-left h2 {
	font-size:var(--fs40); font-weight:700; line-height:1.2; letter-spacing:-0.02em;
	color:#000; margin-bottom:20px;
}
.m-tech-left p {
	font-size:16px; line-height:1.7; color:var(--ate-text); font-weight:500;
	margin-bottom:40px;
	word-break:keep-all;
}
.m-tech-left .round-btn {align-self: start;}

.m-tech-right {padding:50px 0;
	/* position:absolute; left:780px; right:0; top:0; bottom:0; */
	/* overflow:visible; */
}
.m-tech-track {
	display:flex; gap:32px;
	will-change:transform;
}
.m-tech-col {display:flex; flex-direction:column; gap:40px; width:420px;}
.m-tech-col.offset {padding-top:270px;}
.m-tech-card {
	width:420px; height:500px;
	border-radius:24px;
	overflow:hidden;
	background:#0b0e14;
	position:relative;
	cursor:pointer;
	transition:transform .4s cubic-bezier(0.16,1,0.3,1), box-shadow .4s;
}
.m-tech-card:hover {transform:translateY(-6px); box-shadow:0 30px 60px rgba(19,67,143,0.25);}
.m-tech-card-img {position:absolute; inset:0;}
.m-tech-card-img::before {content:''; position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .8s;}
.m-tech-card:hover .m-tech-card-img::before {transform:scale(1.08);}
.m-tech-card-img::after {content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,14,20,0) 30%, rgba(11,14,20,0.5) 60%, rgba(11,14,20,0.95) 100%);}
.m-tech-card.c1 .m-tech-card-img::before {background-image:url('/images/main/img_m-tech_01.WEBP');}
.m-tech-card.c2 .m-tech-card-img::before {background-image:url('/images/main/img_m-tech_02.WEBP');}
.m-tech-card.c3 .m-tech-card-img::before {background-image:url('/images/main/img_m-tech_03.WEBP');}
.m-tech-card.c4 .m-tech-card-img::before {background-image:url('/images/main/img_m-tech_04.WEBP');}
.m-tech-card.c5 .m-tech-card-img::before {background-image:url('/images/main/img_m-tech_05.WEBP');}
.m-tech-card-content {
	position:absolute; left:0; right:0; bottom:0; z-index:3;
	padding:36px 50px 40px;
	color:#fff;
}
.m-tech-card h4 {
	font-size:24px; font-weight:800; letter-spacing:-0.02em;
	color:#fff;
	margin-bottom:14px;
	line-height:1.3;
}
.m-tech-card p {
	font-size:15px; font-weight:500; line-height:1.7;
	color:rgba(255,255,255,0.78);
	word-break:keep-all;
}

/* ════════════════════════════════════════════════
   [4] PERFORMANCE — 1000px
════════════════════════════════════════════════ */
.m-perf {
	position:relative; width:100%; height:1000px;
	color:#fff;
	overflow:hidden;
}
.m-perf-bg {position:absolute; inset:0;}
.m-perf-bg::before {
	content:''; position:absolute; inset:0;
	background:url('/images/main/img_m-perf_01.WEBP') center/cover no-repeat;
}
.m-perf-bg::after {
	content:''; position:absolute; inset:0;
	background:rgba(0,0,0,.7);
}
.m-perf-inner {
	position:relative; z-index:2; width:100%;
	max-width:1400px; margin:0 auto;
	padding:185px 0 0;
}
.m-perf-head {margin-bottom:60px;}
.m-perf-head .eyebrow {margin-bottom:20px;}
.m-perf-head h2 {
	font-size:var(--fs50); font-weight:700; line-height:1.2; letter-spacing:-2px;
	color:#fff;
}

.m-perf-list {display:flex; flex-direction:column; }
.m-perf-row {border-bottom:1px solid rgba(255,255,255,.2); transition:all .25s;}
.m-perf-row:hover {border-bottom-color:#fff}
.m-perf-row a {
	display:flex; align-items:center; gap:40px;
	height:87px; padding:0 4px;
}
.m-perf-chip {
	flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
	width:170px; height:39px; padding:0 20px; border-radius:100px; background:var(--c_base2);
	font-size:var(--fs15); font-weight:700; color:#fff; white-space:nowrap;
	
}
.m-perf-ttl {
	width:calc(100% - 313px); font-size:var(--fs20); font-weight:700; color:#fff;
	letter-spacing:-0.01em;
}
.m-perf-arr {
	width:63px; height:26px;
	display:flex; align-items:center; justify-content:flex-end;
	opacity:0; transition:all .3s;
}
.m-perf-row:hover .m-perf-arr {opacity:1; transform:translateX(8px);}

.m-perf-cta {margin-top:60px; display:flex; justify-content:center;}
.m-perf-cta a {
	width:250px; height:64px; align-items: center; justify-content: center; border:0;
	background:var(--c_base3); color: #FFF;font-size: var(--fs20);font-weight: 600;letter-spacing: -1px; border-radius:100px;
}

/* ════════════════════════════════════════════════
   [5] NEWS — 1000px
════════════════════════════════════════════════ */
.m-news {position:relative; width:100%; height:1000px; background:#F4F5F7; overflow:hidden;}
.m-news-inner {
	position:relative; height:100%;
	max-width:1400px; width:100%; margin:0 auto;
	display:flex; flex-direction:column; justify-content:center; 
}
.m-news-top {
	display:flex; align-items:flex-end; justify-content:space-between;
	max-width:1400px;
	margin-bottom:65px;
}
.m-news-top .eyebrow {margin-bottom:20px;}
.m-news-top h2 {font-size:var(--fs40); font-weight:800; line-height:1.2; letter-spacing:-0.02em;color:#000;}
.m-news-top .round-btn {color:var(--c_base1); background:#fff;}

.m-news-track {display:flex; gap:40px;}
.m-news-track .swiper-wrapper {}

.m-news-card {
	flex-shrink:0; border-radius:22px;
	box-shadow: 20px 20px 20px 0 rgba(0, 0, 0, 0.05);
	/* width:340px !important; */
	height:420px !important;
	background:#fff;
	padding:50px;
	position:relative;
	transition:all .4s cubic-bezier(0.16,1,0.3,1);
	overflow:hidden;
}
.m-news-card:hover {transform:translateY(-6px);}
.m-news-card-indicator {
	width:10px; height:10px; border-radius:10px;
	background:var(--c_base3);
	transition:width .4s, background .4s;
	margin-bottom:30px;
}
.m-news-card:hover .m-news-card-indicator {width:50px; background:var(--c_base1);}
.m-news-card-cat {
	font-size:var(--fs14); font-weight:700; letter-spacing:0.05em;
	margin-bottom:18px; transition:color .4s;
}
.m-news-card h4 {
	color:#000; font-size:var(--fs24); font-weight:700; line-height:1.4; letter-spacing:-0.02em;
	margin-bottom:30px; transition:color .4s; word-break:keep-all;
}
.m-news-card:hover h4 {color:var(--c_base2);}
.m-news-card p {
	font-size:var(--fs17); line-height:1.7; font-weight:500;transition:color .4s; 
}
.m-news-card-bottom {
	position:absolute; left:50px; right:50px; bottom:50px;
	display:flex; align-items:center; justify-content:space-between;
	font-size:var(--fs15); font-weight:500; color:#9097A0;
	transition:color .4s;
}
.m-news-card-plus {font-size:var(--fs24);}


/* ════════════════════════════════════════════════
   반응형
════════════════════════════════════════════════ */
@media (max-width:1500px) {
	
	main .m-hero-content {left:60px; bottom:80px;}
	main .m-about-inner, .m-perf-inner {padding-left:60px; padding-right:60px;}
	main .m-perf-inner {padding:185px 60px 0;}
	main .m-news-inner {padding-left:60px;}
	main .m-tech-left {left:60px;}
	main .m-tech-right {left:540px;}
	main .m-biz-content, .m-biz-bar {padding-left:60px; padding-right:60px;}
	
}
@media (max-width:1199px) {
	.round-btn {height:50px; gap:10px;}
	
	main .wrapper {position:static;}
	main .m-hero {height:700px;}
	main .m-hero-content {gap:24px;}
	main .m-hero-title { letter-spacing:-1px;}
	main .m-hero-desc {}
	main .m-about {height:auto; min-height:auto; padding:100px 0;}
	main .m-about-inner {flex-direction:column; padding:0 30px; gap:60px;}
	main .m-about-head {width:100%;}
	main .m-about-head h2 {}
	main .m-about-stats {gap:40px; padding-top:0; flex-wrap:wrap;}
	main .m-about-stat .num {}
	main .m-about-watermark {bottom:-20px;}
	main .m-business {height:auto;}
	main .m-biz-track {flex-direction:column; width:100%; transform:translateX(0) !important;}
	main .m-biz-panel {width:100%; height:auto;}
	main .m-biz-content {padding:100px 30px; flex-direction:column; gap:30px; position:relative; bottom:auto;}
	main .m-biz-head {width:100%;}
	main .m-biz-right {}
	main .m-biz-title {}
	main .m-biz-bar {display:none;}
	main .m-tech {height:auto; padding:120px 0;}
	main .m-tech-inner {flex-direction:column; padding:0 30px;}
	main .m-tech-left {position:relative; left:auto; top:auto; width:100%; margin-bottom:50px;}
	main .m-tech-left h2 {}
	main .m-tech-right {padding:0; position:static;width: 100%;}
	main .m-biz-desc {text-align:left;}
	main .m-biz-tags {justify-content:start;}
	main .m-tech-track {flex-direction:column; padding:0; gap:20px; transform:translateY(0) !important;}
	main .m-tech-col {width:100%; gap:20px; flex-direction:row;}
	main .m-tech-col.offset {padding-top:0;}
	main .m-tech-card {width:100%;}
	main .m-perf {height:auto; padding:100px 0;}
	main .m-perf-inner {padding:0 30px;}
	main .m-perf-head h2 {}
	main .m-perf-row a {flex-wrap:wrap; height:auto; padding:24px 4px; gap:20px;}
	main .m-perf-ttl {width:calc(100% - 70px);}
	main .m-perf-cta {margin-top:40px;}
	main .m-perf-arr {width:50px;}
	main .m-perf-cta a {height:60px;}
	main .m-news {height:auto; padding:100px 0;}
	main .m-news-inner {padding:0 30px;}
	main .m-news-top {flex-direction:column; gap:30px; align-items:flex-start;}
	main .m-news-top h2 {}
	main .m-news-track {flex-wrap:wrap; padding:0;}
	main .m-news-card {width:100%;}
	main .m-side {right:14px; transform:none; top:auto; bottom:30px;}
	main .m-side-btn {width:48px; height:48px; border-radius:24px;}
	main .m-side-btn.gotop {width:44px; height:44px;}
	
}
@media (max-width:767px) {
	.round-btn {height:44px; padding:0 24px;}
	
	main .m-about-head p {}
	main .m-hero {height:600px;}
	main .m-hero-content {left:30px;}
	main .m-biz-tag {height:42px; padding:0 18px; }
	main .m-tech {padding:70px 0;}
	main .m-tech-col {flex-direction:column;}
	main .m-tech-card {height:420px;}
	main .m-tech-card-content {padding:40px 30px;}
	main .m-tech-card h4 {}
	main .m-perf-row {}
	main .m-perf-ttl {width:calc(100% - 45px);}
	main .m-perf-chip {height:32px; padding:0 14px;}
	main .m-perf-cta {margin-top:30px;}
	main .m-perf-cta a {height:50px;}
	main .m-perf-row a {gap:10px;}
	main .m-perf-arr {width:35px;}
	main .m-news-top {margin-bottom:40px;}
	main .m-news-card {padding:36px;}
	main .m-news-card h4 {}
}