@charset "utf-8";
/* =====================================================
   보유기술 공통 인터랙티브 디자인 시스템
   (desulf · pretreat · chembio · dynafilter · dynaenr 공유)
   prefix: .pt-* (page-tech)
   ===================================================== */

/* .page-tech {padding-top:80px; padding-bottom:80px;} */
/* .page-tech .w1400 {position:relative;} */

/* ────────────────────────────────────────────────
   공통 토큰
──────────────────────────────────────────────── */
.pt-eyebrow {display:inline-flex; align-items:center; gap:14px; font-size:var(--fs13); font-weight:700; color:#999; letter-spacing:0.22em; text-transform:uppercase; margin-bottom:18px;}
.pt-eyebrow::before {content:''; width:42px; height:1px; background:currentColor;}
.pt-eyebrow.white {color:#fff;}
.pt-eyebrow.center {justify-content:center;}
.pt-eyebrow.center::before {display:none;}

[data-animate] {opacity:0; transform:translateY(40px); transition:opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1);}
[data-animate].show {opacity:1; transform:translateY(0);}

/* ════════════════════════════════════════════════
   1. HERO — 풀 너비 이미지 + 인터랙티브 헤더
════════════════════════════════════════════════ */
.pt-hero {position:relative; margin:20px 0 80px; min-height:580px; border-radius:32px; overflow:hidden; isolation:isolate; box-shadow:0 40px 90px -30px rgba(11,28,58,0.45);}
.pt-hero-bg {position:absolute; inset:0; z-index:1;}
.pt-hero-img {position:absolute; inset:-4%; background-size:cover; background-position:center; transition:transform 1.1s cubic-bezier(0.16,1,0.3,1); filter:saturate(1.05);}
.pt-hero-overlay {position:absolute; inset:0; background:linear-gradient(115deg, rgba(11,28,58,0.88) 0%, rgba(19,67,143,0.6) 45%, rgba(47,113,200,0.35) 100%);}
.pt-hero-grid {position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size:60px 60px; mix-blend-mode:overlay; pointer-events:none;}
.pt-hero-orb {position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none;}
.pt-hero-orb-1 {top:-100px; right:-80px; width:400px; height:400px; background:radial-gradient(circle, var(--c_base2) 0%, transparent 70%); opacity:0.55; animation:ptOrb 9s ease-in-out infinite alternate;}
.pt-hero-orb-2 {bottom:-120px; left:-100px; width:440px; height:440px; background:radial-gradient(circle, var(--c_base3) 0%, transparent 70%); opacity:0.32; animation:ptOrb 12s ease-in-out infinite alternate-reverse;}
@keyframes ptOrb { from{transform:translate(0,0)} to{transform:translate(40px,-30px)} }

.pt-hero-inner {position:relative; z-index:5; padding:80px 70px 60px; display:grid; grid-template-columns:1fr; gap:50px;}
.pt-hero-eyebrow {padding:0 0 10px; display:inline-flex; align-items:center; gap:14px; font-size:var(--fs13); font-weight:700; color:rgba(255,255,255,0.85); letter-spacing:0.24em; text-transform:uppercase;}
.pt-hero-eyebrow span.line {width:46px; height:1px; background:#fff;}
.pt-hero-num {display:inline-block; padding:5px 14px 4px; background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.35); border-radius:50px; backdrop-filter:blur(8px); margin-left:6px;}

.pt-hero-title {font-size:clamp(34px, 4.6vw, 64px); font-weight:900; color:#fff; line-height:1.18; letter-spacing:-0.025em;}
.pt-hero-title .row {display:block; opacity:0; transform:translateY(36px); animation:ptUp 1s cubic-bezier(0.16,1,0.3,1) forwards;}
.pt-hero-title .row:nth-child(1) {animation-delay:.2s;}
.pt-hero-title .row:nth-child(2) {animation-delay:.45s;}
.pt-hero-title em {color:#7fb3ff; font-style:normal; position:relative;}
.pt-hero-title em::after {content:''; position:absolute; left:0; right:0; bottom:-4px; height:5px; background:linear-gradient(90deg, var(--c_base3), transparent); opacity:.75; border-radius:3px;}
@keyframes ptUp { to {opacity:1; transform:translateY(0);} }

.pt-hero-lead {padding:25px 0 0; font-size:var(--fs17); color:rgba(255,255,255,0.85); line-height:1.7; max-width:680px; opacity:0; animation:ptUp 1s cubic-bezier(0.16,1,0.3,1) .65s forwards;}
.pt-hero-lead strong {color:#fff; font-weight:700;}

.pt-hero-stats {display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; opacity:0; animation:ptUp 1s cubic-bezier(0.16,1,0.3,1) .85s forwards;}
.pt-hero-stat {padding:22px 22px 24px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.22); border-radius:16px; backdrop-filter:blur(12px); transition:all .35s cubic-bezier(0.16,1,0.3,1);}
.pt-hero-stat:hover {background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.42); transform:translateY(-4px);}
.pt-hero-stat .lbl {font-size:var(--fs12); font-weight:600; color:rgba(255,255,255,0.7); letter-spacing:0.14em; text-transform:uppercase; margin-bottom:10px; display:block;}
.pt-hero-stat .val {font-size:var(--fs22); font-weight:800; color:#fff; line-height:1.25; letter-spacing:-0.01em;}
.pt-hero-stat .val sub {font-size:0.5em; vertical-align:baseline; color:rgba(255,255,255,0.65); font-weight:600;}

.pt-hero-scroll {position:absolute; right:60px; bottom:40px; display:flex; flex-direction:column; align-items:center; gap:12px; color:rgba(255,255,255,0.6); font-size:var(--fs12); font-weight:600; letter-spacing:0.2em; text-transform:uppercase; z-index:6; display:none;}
.pt-hero-scroll-line {width:1px; height:56px; background:rgba(255,255,255,0.4); position:relative; overflow:hidden;}
.pt-hero-scroll-line::after {content:''; position:absolute; left:0; right:0; top:-56px; height:56px; background:linear-gradient(180deg, transparent, #fff); animation:ptScroll 1.8s ease-in-out infinite;}
@keyframes ptScroll { 0%{top:-56px} 100%{top:56px} }

/* ════════════════════════════════════════════════
   2. SECTION HEAD — 공통 섹션 제목
════════════════════════════════════════════════ */
.pt-sect {margin-bottom:90px;}
.pt-sect:last-of-type {margin-bottom:60px;}
.pt-sect-head {margin-bottom:40px; max-width:880px;}
.pt-sect-head.center {text-align:center; margin-left:auto; margin-right:auto;}
.pt-sect-head h3 {font-size:clamp(26px, 3.4vw, 44px); font-weight:800; color:#222; line-height:1.25; letter-spacing:-0.022em;}
.pt-sect-head h3 em {color:var(--c_base1); font-style:normal;}
.pt-sect-head h3 .alt {color:var(--c_base2); font-style:normal;}
.pt-sect-head p {margin-top:18px; color:#666; line-height:1.75;}

/* ════════════════════════════════════════════════
   3. INTERACTIVE CONCEPT — 이미지 + 텍스트 + 호버
════════════════════════════════════════════════ */
.pt-concept {display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center;}
.pt-concept.reverse {grid-template-columns:1fr 1.05fr;}
.pt-concept.reverse .pt-concept-visual {order:2;}
.pt-concept-visual {position:relative; aspect-ratio:4/3; border-radius:24px; overflow:hidden; background:#0b1c3a; box-shadow:0 30px 70px -25px rgba(11,28,58,0.4);}
.pt-concept-visual .pt-vimg {position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 1.2s cubic-bezier(0.16,1,0.3,1);}
.pt-concept-visual::after {content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,28,58,0.0) 50%, rgba(11,28,58,0.45) 100%); pointer-events:none;}
.pt-concept-visual:hover .pt-vimg {transform:scale(1.06);}
.pt-concept-visual .pt-vtag {position:absolute; top:24px; left:24px; padding:8px 16px; background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.35); border-radius:50px; backdrop-filter:blur(10px); color:#fff; font-size:var(--fs12); font-weight:700; letter-spacing:0.18em; text-transform:uppercase; z-index:2;}
.pt-concept-visual .pt-vcap {position:absolute; left:24px; right:24px; bottom:24px; color:#fff; font-size:var(--fs15); font-weight:600; line-height:1.5; z-index:2;}

.pt-concept-body h4 {font-size:clamp(22px, 2.4vw, 32px); font-weight:800; color:#222; line-height:1.3; letter-spacing:-0.015em; margin-bottom:18px;}
.pt-concept-body h4 em {color:var(--c_base3); font-style:normal;}
.pt-concept-body p {font-size:var(--fs16); color:#555; line-height:1.85; margin-bottom:14px;}
.pt-concept-body p strong {color:var(--c_base1); font-weight:700;}
.pt-concept-symbol {}
.pt-concept-symbol .pt-concept-symbol-tit {margin:0; font-size: var(--fs21);font-weight: 800;color:#333;line-height: 1.3;letter-spacing: -0.01em;}
.pt-concept-formula {padding:18px 22px; background:linear-gradient(135deg, rgba(19,67,143,0.05), rgba(47,113,200,0.05)); border-left:4px solid var(--c_base2); border-radius:0 10px 10px 0; font-family:'Consolas', 'Pretendard', monospace; font-size:var(--fs14); color:var(--c_base1); line-height:1.7; font-weight:600;}
.pt-concept-formula>p {color:#666}

.pt-concept-list {display:flex; gap:20px;}
.pt-concept-list ul {display:grid; grid-template-columns:repeat(3, 1fr); gap:10px 40px;}



/* ════════════════════════════════════════════════
   4. INTERACTIVE TAB — 모델/메커니즘 선택형
════════════════════════════════════════════════ */
.pt-tabs {position:relative;}
.pt-tab-nav {display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; margin-bottom:26px;}
.pt-tab-btn {position:relative; padding:18px 22px; background:#fff; border:1.5px solid var(--border1); border-radius:14px; cursor:pointer; text-align:left; transition:all .4s cubic-bezier(0.16,1,0.3,1); overflow:hidden;}
.pt-tab-btn::before {content:''; position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(135deg, var(--c_base1), var(--c_base2)); transition:width .5s cubic-bezier(0.16,1,0.3,1); z-index:0;}
.pt-tab-btn > * {position:relative; z-index:1;}
.pt-tab-btn .num {display:block; font-size:var(--fs12); font-weight:700; color:#999; letter-spacing:0.16em; text-transform:uppercase; margin-bottom:5px; transition:color .35s;}
.pt-tab-btn .tit {display:block; font-size:var(--fs16); font-weight:800; color:var(--c_base1); letter-spacing:-0.01em; transition:color .35s;}
.pt-tab-btn:hover {border-color:var(--c_base2); transform:translateY(-2px);}
.pt-tab-btn.is-active {border-color:transparent; box-shadow:0 18px 40px -16px rgba(19,67,143,0.4);}
.pt-tab-btn.is-active::before {width:100%;}
.pt-tab-btn.is-active .num {color:rgba(255,255,255,0.7);}
.pt-tab-btn.is-active .tit {color:#fff;}

.pt-tab-panels {position:relative;}
.pt-tab-panel {display:none; animation:ptFadeIn .55s cubic-bezier(0.16,1,0.3,1);}
.pt-tab-panel.is-active {display:block;}
@keyframes ptFadeIn { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }

.pt-tab-panel-grid {display:grid; grid-template-columns:1.1fr 1fr; gap:30px; align-items:stretch;}
/* .pt-tab-panel-grid {display:flex; flex-direction:column; gap:30px; align-items:stretch;} */
.pt-tab-panel-img {position:relative; min-height:380px; border-radius:20px; overflow:hidden; background-size:cover; background-position:center; background-repeat:no-repeat; box-shadow:0 24px 50px -20px rgba(11,28,58,0.3);}
.pt-tab-panel-img::after {content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,28,58,0.0) 50%, rgba(11,28,58,0.7) 100%);}
.pt-tab-panel-img .badge {position:absolute; top:22px; left:22px; padding:8px 16px; background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.35); border-radius:50px; backdrop-filter:blur(10px); color:#fff; font-size:var(--fs12); font-weight:700; letter-spacing:0.16em; text-transform:uppercase; z-index:2;}
.pt-tab-panel-img .caption {position:absolute; left:22px; right:22px; bottom:22px; color:#fff; font-size:var(--fs16); font-weight:600; line-height:1.5; z-index:2;}

.pt-tab-panel-body {padding:36px 34px; background:linear-gradient(180deg, #ffffff, #f7f9fc); border-radius:20px; border:1px solid var(--border1); display:flex; flex-direction:column;}
.pt-tab-panel-body h4 {font-size:var(--fs26); font-weight:800; color:var(--c_base1); line-height:1.3; letter-spacing:-0.01em; margin-bottom:14px;}
.pt-tab-panel-body>p {font-size:var(--fs15); color:#555; line-height:1.75; margin-bottom:20px;}
.pt-tab-panel-body>p strong {color:var(--c_base1); font-weight:700;}

/* .pt-tab-points {display:flex; flex-direction:column; gap:10px; margin-top:auto;} */
.pt-tab-points {display:grid; grid-template-columns:1.1fr 1fr; gap:10px; margin-top:auto;}
.pt-tab-points li {display:flex; align-items:flex-start; gap:12px; padding:12px 16px; background:rgba(47,113,200,0.06); border-radius:10px; font-size:var(--fs14); color:#444; line-height:1.6;}
.pt-tab-points li::before {content:''; flex-shrink:0; width:6px; height:6px; border-radius:50%; background:var(--c_base2); margin-top:9px;}
.pt-tab-points li strong {color:var(--c_base1); font-weight:700;}

/* ════════════════════════════════════════════════
   5. FEATURE GRID — 4단/3단 카드
════════════════════════════════════════════════ */
.pt-feat-grid {display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;}
.pt-feat-grid.c3 {grid-template-columns:repeat(3, 1fr);}
.pt-feat {position:relative; padding:32px 26px 34px; background:#fff; border:1px solid var(--border1); border-radius:18px; transition:all .4s cubic-bezier(0.16,1,0.3,1); overflow:hidden;}
.pt-feat::before {content:''; position:absolute; left:0; top:0; right:0; height:3px; background:linear-gradient(90deg, var(--c_base1), var(--c_base2)); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(0.16,1,0.3,1);}
.pt-feat::after {content:''; position:absolute; right:-40px; bottom:-40px; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle, rgba(47,113,200,0.06), transparent 70%); transition:transform .6s ease;}
.pt-feat:hover {transform:translateY(-6px); border-color:var(--c_base2); box-shadow:0 22px 45px -20px rgba(19,67,143,0.3);}
.pt-feat:hover::before {transform:scaleX(1);}
.pt-feat:hover::after {transform:scale(1.6); background:radial-gradient(circle, rgba(226,14,22,0.08), transparent 70%);}

.pt-feat .icon {position:relative; display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:16px; background:linear-gradient(135deg, var(--c_base1), var(--c_base2)); color:#fff; margin-bottom:20px;}
.pt-feat .icon svg {width:28px; height:28px; }
.pt-feat h4 {position:relative; font-size:var(--fs18); font-weight:800; color:var(--c_base1); margin-bottom:10px; letter-spacing:-0.01em;}
.pt-feat p {position:relative; font-size:var(--fs14); color:#666; line-height:1.7;}
.pt-feat .num {position:absolute; top:24px; right:26px; font-size:var(--fs48); font-weight:900; color:var(--bg1); line-height:1; letter-spacing:-0.04em; pointer-events:none; transition:color .4s;}
.pt-feat:hover .num {color:rgba(47,113,200,0.08);}


/* ════════════════════════════════════════════════
   5-2. PRODUCT LINEUP — 이미지 중심 제품 카드
════════════════════════════════════════════════ */
.pt-prod-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
.pt-prod {position:relative; background:#fff; border:1px solid var(--border1); border-radius:20px; overflow:hidden; transition:all .5s cubic-bezier(0.16,1,0.3,1); display:flex; flex-direction:column;}
.pt-prod:hover {transform:translateY(-8px); border-color:var(--c_base2); box-shadow:0 28px 60px -25px rgba(19,67,143,0.35);}
.pt-prod-media {position:relative; aspect-ratio:4/3; overflow:hidden; background:linear-gradient(135deg, #f4f7fc 0%, #e8eef8 100%);}
.pt-prod-img {position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .8s cubic-bezier(0.16,1,0.3,1);}
.pt-prod:hover .pt-prod-img {transform:scale(1.06);}
.pt-prod-media::after {content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(11,28,58,0.15) 100%); pointer-events:none;}
.pt-prod-num {position:absolute; top:20px; left:22px; z-index:2; display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 12px; background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); color:var(--c_base1); font-size:var(--fs16); font-weight:800; border-radius:50px; letter-spacing:0.02em; box-shadow:0 8px 20px -8px rgba(19,67,143,0.3);}
.pt-prod-body {padding:28px 28px 32px; flex:1; display:flex; flex-direction:column;}
.pt-prod-tag {display:inline-block; align-self:flex-start; padding:5px 12px; background:linear-gradient(135deg, var(--c_base1), var(--c_base2)); color:#fff; font-size:var(--fs12); font-weight:700; letter-spacing:0.08em; border-radius:50px; margin-bottom:14px; text-transform:uppercase;}
.pt-prod-body h4 {font-size:var(--fs20); font-weight:800; color:var(--c_base1); line-height:1.35; letter-spacing:-0.012em; margin-bottom:12px;}
.pt-prod-body h4 em {font-style:normal; font-size:var(--fs14); font-weight:700; color:var(--c_base2); margin-left:4px;}
.pt-prod-body p {font-size:var(--fs14); color:#666; line-height:1.75;}


/* ════════════════════════════════════════════════
   6. ADVANTAGE LIST — 강조 리스트
════════════════════════════════════════════════ */
.pt-adv {display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;}
.pt-adv li {position:relative; padding:24px 28px 24px 64px; background:linear-gradient(135deg, #fff, #fafbfd); border:1px solid var(--border1); border-radius:14px; font-size:var(--fs15); color:#444; line-height:1.7; transition:all .35s; cursor:default;}
.pt-adv li::before {content:''; position:absolute; left:24px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg, var(--c_base1), var(--c_base2)); color:#fff; display:flex; align-items:center; justify-content:center;}
.pt-adv li::after {content:''; position:absolute; left:33px; top:49%; transform:translateY(-50%) rotate(45deg); width:6px; height:10px; border-right:2px solid #fff; border-bottom:2px solid #fff;}
.pt-adv li:hover {border-color:var(--c_base2); transform:translateX(6px); box-shadow:0 14px 30px -14px rgba(19,67,143,0.25);}
.pt-adv li strong {color:#222; font-weight:800;}

/* ════════════════════════════════════════════════
   7. PROCESS FLOW — 단계별 흐름
════════════════════════════════════════════════ */
.pt-flow {display:flex; align-items:stretch; flex-wrap:wrap; gap:6px;}
.pt-flow-step {position:relative; flex:1; min-width:130px; padding:24px 18px 26px; background:#fff; border:1.5px solid var(--border1); border-radius:14px; text-align:center; transition:all .35s cubic-bezier(0.16,1,0.3,1); display:flex; flex-direction:column; align-items:center; gap:8px;}
.pt-flow-step.end {background:linear-gradient(135deg, var(--c_base1), var(--c_base2)); border-color:transparent; color:#fff;}
.pt-flow-step:hover {transform:translateY(-4px); border-color:var(--c_base2); box-shadow:0 16px 35px -10px rgba(19,67,143,0.3);}
.pt-flow-step.end:hover {transform:translateY(-4px); box-shadow:0 18px 40px -10px rgba(19,67,143,0.5);}
.pt-flow-num {display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--c_base1); color:#fff; font-size:var(--fs13); font-weight:800;}
.pt-flow-step.end .pt-flow-num {background:#fff; color:var(--c_base1);}
.pt-flow-tit {font-size:var(--fs15); font-weight:800; color:var(--c_base1); letter-spacing:-0.01em; line-height:1.35;}
.pt-flow-step.end .pt-flow-tit {color:#fff;}
.pt-flow-sub {font-size:var(--fs12); color:#888; line-height:1.5;}
.pt-flow-step.end .pt-flow-sub {color:rgba(255,255,255,0.85);}
.pt-flow-arr {display:flex; align-items:center; justify-content:center; width:22px;}
.pt-flow-arr::before {content:''; display:block; width:0; height:0; border-left:9px solid var(--c_base2); border-top:7px solid transparent; border-bottom:7px solid transparent;}

/* ════════════════════════════════════════════════
   8. APPLICATION TABLE — 납품 실적
════════════════════════════════════════════════ */
.pt-table-wrap {background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 18px 50px -28px rgba(11,28,58,0.18); border:1px solid var(--border1);}
.pt-table {width:100%; border-collapse:collapse;}
.pt-table thead th {padding:20px 22px; background:var(--c_base1); color:#fff; font-size:var(--fs13); font-weight:700; text-align:left; letter-spacing:0.06em; text-transform:uppercase;}
.pt-table tbody td {padding:20px 22px; font-size:var(--fs14); color:#555; line-height:1.5; border-bottom:1px solid var(--border1); transition:background .25s;}
.pt-table tbody tr:last-child td {border-bottom:0;}
.pt-table tbody tr {transition:background .3s;}
.pt-table tbody tr:hover {background:rgba(47,113,200,0.05);}
.pt-table tbody tr:hover td {color:#222;}
.pt-model-tag {display:inline-flex; align-items:center; padding:5px 12px; border-radius:50px; background:rgba(19,67,143,0.1); color:var(--c_base1); font-size:var(--fs12); font-weight:800; letter-spacing:0.02em;}
.pt-model-tag.grn {background:rgba(43,168,74,0.12); color:#2ba84a;}
.pt-model-tag.red {background:rgba(226,14,22,0.1); color:var(--c_base3);}
.pt-model-tag.aqua {background:rgba(91,194,231,0.18); color:#0c87a8;}

/* ════════════════════════════════════════════════
   9. SPLIT VIEW — 좌우 비교형 (Hybrid/Bio 등)
════════════════════════════════════════════════ */
.pt-split {display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.pt-split-card {position:relative; min-height:480px; border-radius:24px; overflow:hidden; background:#0b1c3a; isolation:isolate; transition:transform .5s cubic-bezier(0.16,1,0.3,1); box-shadow:0 24px 60px -25px rgba(11,28,58,0.4);}
.pt-split-card:hover {transform:translateY(-6px);}
.pt-split-card-bg {position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 1s cubic-bezier(0.16,1,0.3,1); z-index:1;}
.pt-split-card:hover .pt-split-card-bg {transform:scale(1.08);}
.pt-split-card::before {content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,67,143,0.3) 0%, rgba(11,28,58,0.7) 100%); z-index:2;}
.pt-split-card.b::before {background:linear-gradient(180deg, rgba(43,168,74,0.45) 0%, rgba(11,46,74,0.94) 100%);}
.pt-split-card-inner {position:relative; z-index:3; padding:40px 36px; height:100%; display:flex; flex-direction:column; color:#fff;}
.pt-split-card .num {display:inline-block; align-self:flex-start; font-size:var(--fs13); font-weight:800; color:rgba(255,255,255,0.7); letter-spacing:0.2em; text-transform:uppercase; padding:6px 14px; border:1px solid rgba(255,255,255,0.3); border-radius:50px; backdrop-filter:blur(8px); margin-bottom:20px;}
.pt-split-card h4 {font-size:clamp(22px, 2.4vw, 30px); font-weight:800; color:#fff; line-height:1.3; letter-spacing:-0.012em; margin-bottom:14px;}
.pt-split-card p {font-size:var(--fs15); color:rgba(255,255,255,0.85); line-height:1.75; margin-bottom:22px;}
.pt-split-card .formula {margin-bottom:22px; padding:16px 20px; background:rgba(255,255,255,0.12); border:1px dashed rgba(255,255,255,0.3); border-radius:10px; font-family:'Consolas', 'Pretendard', monospace; font-size:var(--fs13); color:#fff; line-height:1.6;}
.pt-split-card-tags {margin-top:auto; display:flex; flex-wrap:wrap; gap:8px;}
.pt-split-card-tags span {padding:7px 14px; background:rgba(255,255,255,0.13); border:1px solid rgba(255,255,255,0.25); border-radius:50px; font-size:var(--fs13); color:#fff; font-weight:600; backdrop-filter:blur(8px);}

/* ════════════════════════════════════════════════
   10. STAT COUNTER — 큰 숫자 강조
════════════════════════════════════════════════ */
.pt-counters {display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;}
.pt-counter {position:relative; padding:38px 28px; background:linear-gradient(135deg, #fff, #fafbfd); border:1px solid var(--border1); border-radius:18px; overflow:hidden; transition:all .4s cubic-bezier(0.16,1,0.3,1);}
.pt-counter:hover {transform:translateY(-6px); border-color:var(--c_base2); box-shadow:0 22px 45px -20px rgba(19,67,143,0.28);}
.pt-counter::after {content:''; position:absolute; right:-30px; bottom:-30px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, rgba(47,113,200,0.08), transparent 70%); transition:transform .6s ease;}
.pt-counter:hover::after {transform:scale(1.5);}
.pt-counter-num {position:relative; display:flex; align-items:baseline; gap:4px; font-size:var(--fs48); font-weight:900; color:var(--c_base1); line-height:1; letter-spacing:-0.03em; margin-bottom:14px;}
.pt-counter-num i {font-style:normal;}
.pt-counter-num em {font-style:normal; font-size:0.55em; color:#333; font-weight:800;}
.pt-counter-lbl {position:relative; display:block; font-size:var(--fs18); font-weight:700; color:#222; margin-bottom:5px;}
.pt-counter-sub {position:relative; display:block; color:#888; line-height:1.55;}

/* ════════════════════════════════════════════════
   11. GALLERY — 현장 사진 갤러리
════════════════════════════════════════════════ */
.pt-gallery {display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;}
.pt-gallery-item {position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden; cursor:pointer; isolation:isolate;}
.pt-gallery-item .img {position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .8s cubic-bezier(0.16,1,0.3,1);}
.pt-gallery-item::before {content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(11,28,58,0.85) 100%); z-index:2;}
.pt-gallery-item:hover .img {transform:scale(1.1);}
.pt-gallery-item .cap {position:absolute; left:20px; right:20px; bottom:25px; color:#fff; font-weight:700; line-height:1.4; z-index:3; transform:translateY(6px); opacity:0.9; transition:all .4s;}
.pt-gallery-item:hover .cap {transform:translateY(0); opacity:1;}

/* ════════════════════════════════════════════════
   12. CTA — 하단 행동유도 배너
════════════════════════════════════════════════ */
.pt-cta {position:relative; margin-top:80px; border-radius:32px; overflow:hidden; isolation:isolate; box-shadow:0 30px 70px -22px rgba(11,28,58,0.4);}
.pt-cta-bg {position:absolute; inset:0; background-size:cover; background-position:center; z-index:1; transition:transform 1s ease;}
.pt-cta:hover .pt-cta-bg {transform:scale(1.05);}
.pt-cta-overlay {position:absolute; inset:0; background:linear-gradient(115deg, rgba(11,28,58,0.8) 0%, rgba(19,67,143,0.6) 60%, rgba(226,14,22,0.3) 100%); z-index:2;}
.pt-cta-inner {position:relative; z-index:3; padding:70px 60px; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;}
.pt-cta-text h3 {font-size:clamp(24px, 3.0vw, 38px); font-weight:800; color:#fff; line-height:1.3; letter-spacing:-0.02em;}
.pt-cta-text h3 em {color:#7fb3ff; font-style:normal;}
.pt-cta-text p {margin-top:14px; font-size:var(--fs15); color:rgba(255,255,255,0.82); line-height:1.7;}

.pt-cta-btns {display:flex; flex-direction:column; gap:10px;}
.pt-cta-btn {display:inline-flex; align-items:center; justify-content:space-between; gap:22px; min-width:240px; padding:18px 28px; border-radius:50px; font-size:var(--fs15); font-weight:700; transition:all .35s cubic-bezier(0.16,1,0.3,1);}
.pt-cta-btn .arr {font-size:var(--fs16); transition:transform .35s;}
.pt-cta-btn.primary {background:#fff; color:var(--c_base1); box-shadow:0 16px 35px -10px rgba(255,255,255,0.4);}
.pt-cta-btn.primary:hover {background:var(--c_base3); color:#fff;}
.pt-cta-btn.primary:hover .arr {transform:translateX(6px);}
.pt-cta-btn.ghost {background:rgba(255,255,255,0.1); border:1.5px solid rgba(255,255,255,0.5); color:#fff; backdrop-filter:blur(10px);}
.pt-cta-btn.ghost:hover {background:rgba(255,255,255,0.2); border-color:#fff;}
.pt-cta-btn.ghost:hover .arr {transform:translateX(6px);}

/* ════════════════════════════════════════════════
   13. ACCENT VARIANTS — 페이지별 컬러 변경
════════════════════════════════════════════════ */
.page-tech.accent-grn {--pt-accent:#2ba84a; --pt-accent2:#34c75d;}
.page-tech.accent-aqua {--pt-accent:#0c87a8; --pt-accent2:#5bc2e7;}
.page-tech.accent-red {--pt-accent:#e20e16; --pt-accent2:#ff4a52;}

.tech-page .t-types {background:var(--bg2); border-radius:20px; padding:36px;}
.tech-page .t-types-tabs {display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:32px;}
.tech-page .t-types-tab {display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:22px 24px; background:#fff; border:1px solid var(--border1); border-radius:14px; text-align:left; transition:all .3s;}
.tech-page .t-types-tab .n {font-size:var(--fs12); font-weight:800; letter-spacing:.12em; color:#8a95a1;}
.tech-page .t-types-tab .t {font-size:var(--fs20); font-weight:800; color:var(--c_base6);}
.tech-page .t-types-tab .s {font-size:var(--fs14); color:#5b6772;}
.tech-page .t-types-tab:hover {transform:translateY(-4px); box-shadow:0 12px 24px rgba(13,43,78,.08);}
.tech-page .t-types-tab.is-active {background:var(--c_base1); border-color:var(--c_base1);}
.tech-page .t-types-tab.is-active .n {color:#a8d9ff;}
.tech-page .t-types-tab.is-active .t,
.tech-page .t-types-tab.is-active .s {color:#fff;}
.tech-page .t-types-panel {display:none; grid-template-columns:1fr 1.4fr; gap:40px; align-items:center;}
.tech-page .t-types-panel.is-active {display:grid;}
.tech-page .t-types-img {aspect-ratio:5/4; border-radius:14px; background-size:cover; background-position:center;}
.tech-page .t-types-info h5 {font-size:var(--fs28); font-weight:800; color:var(--c_base6); margin-bottom:16px;}
.tech-page .t-types-info h5 span {display:inline-block; margin-left:10px; font-size:var(--fs15); font-weight:600; color:var(--c_base1);}
.tech-page .t-types-info p {font-size:var(--fs15); color:#5b6772; line-height:1.8; margin-bottom:24px;}
.tech-page .t-types-info p strong {color:var(--c_base1); font-weight:700;}
.tech-page .t-types-spec {display:grid; gap:10px;}
.tech-page .t-types-spec li {display:flex; align-items:center; gap:16px; padding:12px 18px; background:#fff; border-radius:10px;}
.tech-page .t-types-spec li span {font-size:var(--fs13); font-weight:700; color:#8a95a1; letter-spacing:.06em; min-width:60px;}
.tech-page .t-types-spec li b {font-size:var(--fs16); font-weight:700; color:var(--c_base6);}

.tech-page .t-diagram {background:var(--bg2); border-radius:20px; padding:40px; text-align:center;}
.tech-page .t-diagram img {display:block; max-width:100%; height:auto; margin:0 auto; border-radius:12px;}

/* Delivery Sites (납품 현장) */
.tech-page .t-sites {display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;}
.tech-page .t-site {background:#fff; border:1px solid var(--border1); border-radius:16px; overflow:hidden; transition:all .35s;}
.tech-page .t-site:hover {transform:translateY(-6px); box-shadow:0 20px 40px rgba(13,43,78,.1); border-color:var(--c_base1);}
.tech-page .t-site-img {aspect-ratio:4/3; background-size:cover; background-position:center; background-color:var(--bg1); transition:transform .8s ease;}
.tech-page .t-site:hover .t-site-img {transform:scale(1.04);}
.tech-page .t-site-body {padding:22px 24px 26px;}
.tech-page .t-site-num {display:inline-block; font-size:var(--fs12); font-weight:800; letter-spacing:.12em; color:var(--c_base1);}
.tech-page .t-site-body h5 {font-size:var(--fs18); font-weight:800; color:var(--c_base1); line-height:1.4; margin-top:8px;}

/* ════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════ */
@media screen and (max-width:1199px) {
	/* .page-tech {padding-top:60px;} */
	.pt-hero {min-height:520px; border-radius:24px;}
	.pt-hero-inner {padding:60px 40px 50px; gap:36px;}
	.pt-hero-stats {grid-template-columns:repeat(2, 1fr);}
	.pt-hero-scroll {display:none;}

	.pt-concept {grid-template-columns:1fr; gap:30px;}
	.pt-concept.reverse .pt-concept-visual {order:0;}

	.pt-tab-panel-grid {grid-template-columns:1fr;}
	.pt-tab-panel-img {min-height:300px;}

	.pt-feat-grid {grid-template-columns:repeat(2, 1fr);}
	.pt-feat-grid.c3 {grid-template-columns:repeat(2, 1fr);}
	.pt-prod-grid {grid-template-columns:1fr; gap:20px;}
	.pt-adv {grid-template-columns:1fr;}
	.pt-counters {grid-template-columns:repeat(2, 1fr);}
	.pt-split {grid-template-columns:1fr;}
	.pt-gallery {grid-template-columns:repeat(2, 1fr);}

	.pt-flow {flex-direction:column;}
	.pt-flow-arr {transform:rotate(90deg); align-self:center;}

	.pt-cta-inner {grid-template-columns:1fr; padding:50px 40px;}
	.pt-cta-btns {flex-direction:row; flex-wrap:wrap;}
	
	.tech-page .t-types {padding:28px;}
	.tech-page .t-types-tabs {grid-template-columns:1fr; gap:8px; margin-bottom:24px;}
	.tech-page .t-types-tab {flex-direction:row; align-items:center; gap:16px; padding:18px 20px;}
	.tech-page .t-types-panel {grid-template-columns:1fr; gap:28px;}
	
	.tech-page .t-diagram {padding:28px;}
	.tech-page .t-sites {grid-template-columns:repeat(3, 1fr); gap:18px;}
	.tech-page .t-site-body {padding:18px 20px 22px;}
	.tech-page .t-site-body h5 {}
	

}

@media screen and (max-width:767px) {
	/* .page-tech {padding-top:40px;} */
	.pt-hero {min-height:480px;}
	.pt-hero-inner {padding:48px 28px 40px;}
	.pt-hero-stats {grid-template-columns:1fr 1fr;}
	.pt-hero-stat {padding:18px 18px 20px;}
	.pt-hero-stat .val {font-size:var(--fs18);}

	.pt-sect {margin-bottom:60px;}
	.pt-tab-nav {grid-template-columns:1fr;}
	.pt-feat-grid, .pt-feat-grid.c3 {grid-template-columns:1fr;}
	.pt-prod-body {padding:24px 22px 26px;}
	.pt-counters {grid-template-columns:1fr 1fr;}
	.pt-gallery {grid-template-columns:1fr;}
	.pt-concept-list ul {grid-template-columns:repeat(2, 1fr); gap:10px 30px;}
	
	.pt-table-wrap {overflow-x:auto;}
	.pt-table {min-width:680px;}

	.pt-cta {margin-top:50px;}
	.pt-cta-inner {padding:40px 28px;}
	.pt-cta-btn {min-width:0; width:100%;}
	
	.tech-page .t-types {padding:20px;}
	.tech-page .t-types-tab {padding:14px 16px;}
	
	.tech-page .t-diagram {padding:18px;}
	.tech-page .t-sites {grid-template-columns:repeat(2, 1fr); gap:14px;}
	
}

/* ════════════════════════════════════════════════
   LEGACY FALLBACK — 기존 클래스도 유지 (점진적 마이그)
════════════════════════════════════════════════ */
.tech-hero, .tech-keyimg, .tech-section, .tech-spec, .tech-spec-item,
.tech-principle, .tech-principle-img, .tech-principle-body,
.tech-feat-grid, .tech-feat, .tech-models, .tech-model,
.feature-list, .tech-table, .cta-banner {display:none;}