@charset "utf-8";


/* ===========================
   HERO (craneHero 구조 공유)
   =========================== */
.industrial .industrialHero {position:relative; width:100%; min-height:520px; background:var(--c_base4) center/cover no-repeat; display:flex; align-items:flex-end; overflow:hidden; padding:80px 60px; border-radius:16px; margin-bottom:80px;}
.industrial .heroBg {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1;}
.industrial .heroOverlay {position:absolute; inset:0; background:linear-gradient(120deg, rgba(15,23,42,.88) 40%, rgba(15,23,42,.3) 100%);}
.industrial .heroInner {position:relative; z-index:2; display:flex; flex-direction:column; gap:18px; color:#fff;}
.industrial .heroLabel {display:inline-flex; align-items:center; gap:8px; padding:6px 16px; border:1.5px solid var(--c_base1); border-radius:100px; width:fit-content;}
.industrial .heroLabel span {font-size:var(--fs16); font-weight:700;}
.industrial .industrialHero h2 {font-size:var(--fs50); font-weight:900; line-height:1.2;}
.industrial .industrialHero h2 em {display:block; font-style:normal; color:var(--c_base1);}
.industrial .heroDesc {font-size:var(--fs16); line-height:1.85; max-width:580px; opacity:.85;}
.industrial .heroBadgeRow {display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;}
.industrial .heroBadge {padding:5px 14px; border-radius:100px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); font-size:var(--fs16); font-weight:600; backdrop-filter:blur(4px);}

@media screen and (max-width:1199px) {
  .industrial .industrialHero {min-height:440px; padding:60px 40px; margin-bottom:60px;}
  .industrial .industrialHero h2 {font-size:var(--fs40);}
}
@media screen and (max-width:768px) {
  .industrial .industrialHero {min-height:380px; padding:40px 24px; border-radius:12px; margin-bottom:48px;}
  .industrial .industrialHero h2 {font-size:var(--fs28);}
  .industrial .heroDesc {font-size:var(--fs16); line-height:1.7;}
  .industrial .heroDesc br {display:none;}
  .industrial .heroBadge {font-size:var(--fs16); padding:4px 12px;}
}


/* ===========================
   3단계 카드
   =========================== */
.industrial .indStageWrap {display:flex; flex-direction:column; gap:32px; margin-bottom:60px;}
.industrial .indStage {position:relative; border:1.5px solid var(--border1); border-radius:18px; background:#fff; overflow:hidden; transition:box-shadow .3s ease, border-color .3s ease, transform .3s ease;}
.industrial .indStage:hover {border-color:var(--c_base3); box-shadow:0 14px 36px rgba(45,54,61,.2); transform:translateY(-2px);}
.industrial .indStage#stage1:hover {border-color:var(--c_base3);}
.industrial .indStage#stage2:hover {border-color:#43a047;}
.industrial .indStage#stage3:hover {border-color:#fb8c00;}
.industrial .indStage::before {content:""; position:absolute; top:0; left:0; width:6px; height:100%; background:var(--c_base3);}
.industrial .indStage#stage1::before {background:var(--c_base3);}
.industrial .indStage#stage2::before {background:#43a047;}
.industrial .indStage#stage3::before {background:#fb8c00;}

.industrial .indStageHead {display:flex; gap:28px; padding:36px 40px 28px; border-bottom:1px dashed var(--border1); align-items:flex-start;}
.industrial .indStageNum {flex-shrink:0; width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #eef4fc 0%, #dbe8f7 100%); font-family:'Inter', sans-serif;}
.industrial .indStage#stage1 .indStageNum {background:linear-gradient(135deg, #e3f2fd 0%, #dff0fd 100%);}
.industrial .indStage#stage2 .indStageNum {background:linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);}
.industrial .indStage#stage3 .indStageNum {background:linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);}
.industrial .indStageNum span {font-size:var(--fs28); font-weight:900; color:#1e88e5; letter-spacing:-.02em;}
.industrial .indStage#stage1 .indStageNum span {color:var(--c_base3);}
.industrial .indStage#stage2 .indStageNum span {color:#2e7d32;}
.industrial .indStage#stage3 .indStageNum span {color:#ef6c00;}

.industrial .indStageTxt {flex:1;}
.industrial .indStageEn {display:block; font-size:var(--fs16); font-weight:700; letter-spacing:.04em; margin-bottom:8px;}
.industrial .indStageTxt h3 {font-size:var(--fs28); font-weight:900; line-height:1.3; margin-bottom:12px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.industrial .indStageTxt h3 small {font-size:var(--fs16); font-weight:700; color:#666; opacity:.85;}
.industrial .indStageTxt p {font-size:var(--fs16); font-weight:500; color:#444; line-height:1.65;}
.industrial .indStageTxt p strong {color:#222; font-weight:800;}
.industrial .indStage#stage1 .indStageTxt p strong {color:var(--c_base3);}
.industrial .indStage#stage2 .indStageTxt p strong {color:#43a047;}
.industrial .indStage#stage3 .indStageTxt p strong {color:#fb8c00;}

.industrial .indStageBody {padding:28px 40px 36px;}
.industrial .indDeviceList {display:grid; grid-template-columns:repeat(2, 1fr); gap:14px 28px;}
.industrial .indDeviceList li {display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:10px; background:#f8f9fb; font-size:var(--fs16); font-weight:600; color:#333; transition:background .25s ease, color .25s ease;}
.industrial .indDeviceList li:hover {background:#eef4fc; color:#000;}
.industrial .indDot {display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--c_base3); flex-shrink:0;}
.industrial .indStage#stage1 .indDot {background:var(--c_base3);}
.industrial .indStage#stage2 .indDot {background:#43a047;}
.industrial .indStage#stage3 .indDot {background:#fb8c00;}

@media screen and (max-width:1199px) {
  .industrial .indStageWrap {gap:24px; margin-bottom:60px;}
  .industrial .indStageHead {padding:30px 32px 24px; gap:22px;}
  .industrial .indStageNum {width:68px; height:68px;}
  .industrial .indStageNum span {font-size:var(--fs24);}
  .industrial .indStageTxt h3 {font-size:var(--fs24);}
  .industrial .indStageBody {padding:24px 32px 30px;}
}
@media screen and (max-width:768px) {
  .industrial .indStageWrap {gap:20px; margin-bottom:48px;}
  .industrial .indStage {border-radius:14px;}
  .industrial .indStageHead {flex-direction:column; gap:16px; padding:24px 22px 20px;}
  .industrial .indStageNum {width:56px; height:56px;}
  .industrial .indStageNum span {font-size:var(--fs20);}
  .industrial .indStageTxt h3 {font-size:var(--fs20); gap:8px;}
  .industrial .indStageTxt h3 small {font-size:var(--fs16);}
  .industrial .indStageTxt p {font-size:var(--fs16);}
  .industrial .indStageBody {padding:20px 22px 24px;}
  .industrial .indDeviceList {grid-template-columns:1fr; gap:10px;}
  .industrial .indDeviceList li {padding:12px 14px; font-size:var(--fs16);}
}


/* ===========================
   OUTRO
   =========================== */
.industrial .indOutro {text-align:center; padding:48px 30px; border-radius:16px; background:linear-gradient(135deg, var(--c_base3) 0%, #1a2d4a 100%); color:#fff;}
.industrial .indOutro p {font-size:var(--fs22); font-weight:700; line-height:1.5; letter-spacing:.01em;}
.industrial .indOutro p strong {font-weight:900; color:var(--c_base1);}
.industrial .indDash {display:inline-block; margin:0 6px; opacity:.7;}

@media screen and (max-width:1199px) {
  .industrial .indOutro {padding:40px 24px;}
  .industrial .indOutro p {font-size:var(--fs18);}
}
@media screen and (max-width:768px) {
  .industrial .indOutro {padding:32px 20px; border-radius:12px;}
  .industrial .indOutro p {font-size:var(--fs16);}
}


/* ===========================
   PROD BLOCK — 제품 상세
   =========================== */
.industrial .prodBlock {display:none;}
.industrial .prodBlock.on {display:block;}


/* ===========================
   PROD HEAD — 제품 헤더
   =========================== */
.industrial .prodHead {display:flex; align-items:center; justify-content:space-between; gap:40px; padding:36px 40px; border-radius:18px; background:linear-gradient(135deg, #f4f7fc 0%, #eaf1fb 100%); margin-bottom:60px; overflow:hidden; position:relative;}
.industrial .prodHead::before {content:""; position:absolute; top:-60px; right:-60px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(30,136,229,.12) 0%, rgba(30,136,229,0) 70%);}
.industrial .prodHeadTxt {flex:1; position:relative; z-index:1;}
.industrial .prodHeadEn {display:block; font-size:var(--fs16); font-weight:700; letter-spacing:.04em; margin-bottom:10px;}
.industrial .prodHeadTxt h3 {font-size:var(--fs36); font-weight:900; line-height:1.25; margin-bottom:16px; color:#1a1a1a;}
.industrial .prodMetaRow {display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.industrial .prodCode {display:inline-block; padding:6px 16px; border-radius:8px; background:#fff; border:1.5px solid var(--c_base3); color:var(--c_base3); font-size:var(--fs16); font-weight:800; letter-spacing:.02em;}
.industrial .prodTag {display:inline-block; padding:6px 14px; border-radius:100px; font-size:var(--fs16); font-weight:700; color:#fff;}
.industrial .prodTag.tagControl {background:var(--c_base2);}
.industrial .prodTag.tagMonitor {background:#43a047;}
.industrial .prodTag.tagAlert {background:#fb8c00;}
.industrial .prodHeadImg {flex-shrink:0; width:280px; aspect-ratio:1/1; border-radius:16px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; box-shadow:0 8px 24px rgba(0,0,0,.06);}


.industrial .prodHeadImg img {width:100%; height:100%; object-fit:contain; padding:20px;     mix-blend-mode: multiply;}

@media screen and (max-width:1199px) {
  .industrial .prodHead {padding:30px 32px; gap:32px; margin-bottom:50px;}
  .industrial .prodHeadTxt h3 {font-size:var(--fs28);}
  .industrial .prodHeadImg {width:220px;}
}
@media screen and (max-width:768px) {
  .industrial .prodHead {flex-direction:column-reverse; align-items:flex-start; gap:24px; padding:24px 22px; border-radius:14px; margin-bottom:40px;}
  .industrial .prodHeadTxt h3 {font-size:var(--fs22);}
  .industrial .prodHeadImg {width:100%; aspect-ratio:16/10;}
}


/* ===========================
   PROD SEC — 섹션 공용
   =========================== */
.industrial .prodSec {margin-bottom:60px;}
.industrial .prodSec:last-child {margin-bottom:0;}
.industrial .prodSecTit {position:relative; font-size:var(--fs24); font-weight:700; line-height:1.3; padding:16px 24px; border-radius:10px; background:linear-gradient(135deg, var(--c_base3) 0%, #1a2d4a 100%); color:#fff; margin-bottom:24px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
.industrial .prodSecTit em {font-style:normal; font-size:var(--fs16); font-weight:600; opacity:.8; letter-spacing:.02em;}
.industrial .prodSubTit {font-size:var(--fs18); font-weight:800; color:#222; margin-bottom:14px;}

.industrial .prodList {padding-left:0;}
.industrial .prodList li {position:relative; padding-left:18px; font-size:var(--fs18); font-weight:500; line-height:1.7; color:#333; margin-bottom:6px;}
.industrial .prodList li::before {content:""; position:absolute; left:0; top:13px; width:6px; height:6px; border-radius:50%; background:var(--c_base3);}
.industrial .prodList li:last-child {margin-bottom:0;}

@media screen and (max-width:1199px) {
  .industrial .prodSec {margin-bottom:50px;}
  .industrial .prodSecTit {font-size:var(--fs20); padding:16px 20px;}
}
@media screen and (max-width:768px) {
  .industrial .prodSec {margin-bottom:40px;}
  .industrial .prodSecTit {font-size:var(--fs18); padding:16px 16px; gap:8px;}
  .industrial .prodSecTit em {font-size:var(--fs16);}
  .industrial .prodList li {font-size:var(--fs16);}
}


/* ===========================
   PROD SPEC GRID — 시스템 구성 박스
   =========================== */
.industrial .prodSpecGrid {display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.industrial .prodSpecBox {position:relative; padding:28px 24px; border:1.5px solid var(--border1); border-radius:14px; background:#fff; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;}
.industrial .prodSpecBox:hover {border-color:var(--c_base3); box-shadow:0 10px 24px rgba(30,136,229,.08); transform:translateY(-2px);}
.industrial .prodSpecIcon {width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.industrial .prodSpecIcon img {width:50px; height:50px;}
.industrial .prodSpecTit {display:block; font-size:var(--fs20); font-weight:900; color:#1a1a1a; margin-bottom:12px;}
.industrial .prodSpecBox ul {padding-left:0;}
.industrial .prodSpecBox ul li {position:relative; padding-left:14px; font-size:var(--fs16); font-weight:500; line-height:1.65; color:#444; margin-bottom:4px;}
.industrial .prodSpecBox ul li::before {content:""; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%; background:var(--c_base3);}
.industrial .prodSpecBox ul li:last-child {margin-bottom:0;}

@media screen and (max-width:1199px) {
  .industrial .prodSpecGrid {gap:16px;}
  .industrial .prodSpecBox {padding:24px 20px;}
}
@media screen and (max-width:768px) {
  .industrial .prodSpecGrid {grid-template-columns:1fr; gap:14px;}
  .industrial .prodSpecBox {padding:22px 18px;}
  .industrial .prodSpecTit {font-size:var(--fs18);}
}


/* ===========================
   PROD TABLE — 표
   =========================== */
.industrial .prodTableWrap {margin-bottom:24px;}
.industrial .prodTable {width:100%; border-collapse:collapse; border-top:2px solid var(--c_base3); border-bottom:1.5px solid var(--border1); background:#fff;}
.industrial .prodTable th,
.industrial .prodTable td {padding:18px 24px; border-bottom:1px solid var(--border1); font-size:var(--fs16); line-height:1.65; vertical-align:top; text-align:left;}
.industrial .prodTable th {background:#f4f7fc; font-weight:800; color:#1a1a1a; width:25%;}
.industrial .prodTable td {color:#333; font-weight:500;}
.industrial .prodTable tr:last-child th,
.industrial .prodTable tr:last-child td {border-bottom:none;}
.industrial .prodTable ul {padding-left:0; margin:0;}
.industrial .prodTable ul li {position:relative; padding-left:14px; margin-bottom:6px;}
.industrial .prodTable ul li::before {content:""; position:absolute; left:0; top:10px; width:5px; height:5px; border-radius:50%; background:var(--c_base3);}
.industrial .prodTable ul li:last-child {margin-bottom:0;}
.industrial .prodTable ul li strong {font-weight:800; color:#1a1a1a;}
.industrial .prodOl {padding-left:18px; margin:0; list-style:auto;}
.industrial .prodOl li {margin-bottom:6px; line-height:1.65;}
.industrial .prodOl li:last-child {margin-bottom:0;}
.industrial .prodTable .prodSubList li {color:#999; margin-bottom:0;}
.industrial .prodTable .prodSubList li+li {margin-top:0;}
.industrial .prodTable .prodSubList li::before {width:5px; height:2px; background:#666; border-radius:0; top:11px;}
@media screen and (max-width:768px) {
  .industrial .prodTable th,
  .industrial .prodTable td {padding:14px 16px; font-size:var(--fs16);}
  .industrial .prodTable th {width:35%;}
}


/* ===========================
   PROD IMG — 이미지
   =========================== */
.industrial .prodImgWrap {width:100%; padding:24px; border:1.5px solid var(--border1); border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center;}
.industrial .prodImgWrap img {max-width:100%; height:auto; display:block; mix-blend-mode: multiply; aspect-ratio:16 / 9; object-fit: contain; width:100%;}

.industrial .prodImgRow {display:grid; gap:20px;}
.industrial .prodImgRow.col2 {grid-template-columns:repeat(2, 1fr);}
.industrial .prodImgRow.col3 {grid-template-columns:repeat(3, 1fr);}
.industrial .prodImgBox {position:relative; border:1.5px solid var(--border1); border-radius:14px; background:#fff; overflow:hidden;}
.industrial .prodImgBox .imgPadding {padding:20px;}
.industrial .prodImgBox img {width:100%; object-fit:contain; display:block; aspect-ratio:16/9; background:#fff; margin:0 auto;}
.industrial .prodImgCap {display:block; padding:12px 16px; border-top:1px solid var(--border1); background:#f8f9fb; font-size:var(--fs16); font-weight:600; color:#444; text-align:center;}

@media screen and (max-width:1199px) {
  .industrial .prodImgRow {gap:16px;}
}
@media screen and (max-width:768px) {
  .industrial .prodImgWrap {padding:16px; border-radius:12px;}
  .industrial .prodImgRow.col2,
  .industrial .prodImgRow.col3 {grid-template-columns:1fr;}
  .industrial .prodImgBox {border-radius:12px;}
  .industrial .prodImgCap {padding:10px 14px; font-size:var(--fs16);}
}

/* ===========================
   PROD CONCEPT (prod2: 3단 안전장치 개념도)
   =========================== */
.industrial .prodConceptWrap {flex-direction:column; gap:16px; margin-top:24px;}
.industrial .prodConceptWrap img {width:100%; max-width:760px;}
.industrial .prodConceptNote {font-size:var(--fs18); font-weight:800; color:var(--c_base3); text-align:center; margin:0;}
 
@media screen and (max-width:768px) {
  .industrial .prodConceptNote {font-size:var(--fs16);}
}
 
 
/* ===========================
   PROD USE LIST (prod2: 제품 용도 카드)
   =========================== */
.industrial .prodUseList {display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; padding-left:0;}
.industrial .prodUseList li {display:flex; align-items:center; gap:14px; padding:20px 22px; border:1.5px solid var(--border1); border-radius:14px; background:#fff; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;}
.industrial .prodUseList li:hover {border-color:var(--c_base3); box-shadow:0 10px 24px rgba(30,136,229,.08); transform:translateY(-2px);}
.industrial .prodUseIcon {flex-shrink:0; width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); display:flex; align-items:center; justify-content:center;}
.industrial .prodUseIcon img {width:48px; height:48px;}
.industrial .prodUseLabel {font-size:var(--fs20); font-weight:800; color:#1a1a1a;}
.industrial .prodUseLabel small {display:inline-block; margin-left:4px; font-size:var(--fs16); font-weight:600; color:#666;}
 
@media screen and (max-width:1199px) {
  .industrial .prodUseList {grid-template-columns:repeat(2, 1fr); gap:12px;}
}
@media screen and (max-width:768px) {
  .industrial .prodUseList {grid-template-columns:repeat(2, 1fr); gap:10px;}
  .industrial .prodUseList li {padding:16px 18px; gap:12px;}
  .industrial .prodUseIcon {width:40px; height:40px;}
  .industrial .prodUseIcon img {width:22px; height:22px;}
  .industrial .prodUseLabel {font-size:var(--fs18);}
  .industrial .prodImgWrap img {aspect-ratio:auto;}
}
 
 
/* ===========================
   PROD FOV (prod2: 설치 높이별 측정 예시 — 다이어그램 + 표 2단)
   =========================== */
.industrial .prodFovGrid {display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center;}
.industrial .prodFovImg {padding:24px; border:1.5px solid var(--border1); border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center;}
.industrial .prodFovImg img {max-width:100%; height:auto; display:block; width:100%;}
.industrial .prodFovTable {display:flex; flex-direction:column; gap:14px;}
.industrial .prodFovFormula {font-size:var(--fs16); font-weight:700; color:var(--c_base3); text-align:right; margin:0;}
.industrial .prodTable.prodFovOnly thead th {background:#eef4fc; color:var(--c_base3); text-align:center; font-weight:900; padding:14px 18px;}
.industrial .prodTable.prodFovOnly tbody td {text-align:center; font-weight:600; padding:14px 18px;}
 
@media screen and (max-width:1199px) {
  .industrial .prodFovGrid {gap:24px;}
}
@media screen and (max-width:768px) {
  .industrial .prodFovGrid {grid-template-columns:1fr; gap:20px;}
  .industrial .prodFovImg {padding:18px;}
  .industrial .prodFovFormula {text-align:left; font-size:var(--fs16);}
  .industrial .prodTable.prodFovOnly thead th,
  .industrial .prodTable.prodFovOnly tbody td {padding:12px 14px;}
}
 
 
/* ===========================
   PROD SPEC GRID — 4컬럼 옵션 (prod2)
   =========================== */
.industrial .prodSpecGrid.col4 {grid-template-columns:repeat(4, 1fr);}
 
@media screen and (max-width:1199px) {
  .industrial .prodSpecGrid.col4 {grid-template-columns:repeat(2, 1fr);}
}
@media screen and (max-width:768px) {
  .industrial .prodSpecGrid.col4 {grid-template-columns:1fr;}
}

/* ===========================
   PROD IMG ROW — 4컬럼 옵션 (prod3 UI 4단계)
   =========================== */
.industrial .prodImgRow.col4 {grid-template-columns:repeat(4, 1fr);}
 
@media screen and (max-width:1199px) {
  .industrial .prodImgRow.col4 {grid-template-columns:repeat(2, 1fr);}
}
@media screen and (max-width:768px) {
  .industrial .prodImgRow.col4 {grid-template-columns:1fr;}
}
 
 
/* ===========================
   PROD UI SET (prod3: UI 설정 방법)
   =========================== */
.industrial .prodUiSet .prodTableWrap {margin-bottom:32px;}
.industrial .prodSubDesc {font-size:var(--fs16); font-weight:500; color:#555; margin:-8px 0 20px; line-height:1.65;}
 
@media screen and (max-width:768px) {
  .industrial .prodSubDesc {margin:-4px 0 16px;}
}
 
 
/* ===========================
   PROD DETAIL GRID (prod3: 제어부 / 전원부 / 사용자입력부)
   =========================== */
.industrial .prodDetailGrid {display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.industrial .prodDetailBox {position:relative; padding:28px 24px; border:1.5px solid var(--border1); border-radius:14px; background:#fff; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;}
.industrial .prodDetailBox:hover {border-color:var(--c_base3); box-shadow:0 10px 24px rgba(30,136,229,.08); transform:translateY(-2px);}
.industrial .prodDetailTit {display:flex; align-items:center; gap:10px; font-size:var(--fs20); font-weight:900; color:#1a1a1a; margin-bottom:14px;}
.industrial .prodDetailNum {display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--c_base3); color:#fff; font-size:var(--fs16); font-weight:900; flex-shrink:0;}
.industrial .prodDetailBox ul {padding-left:0; margin:0;}
.industrial .prodDetailBox ul li {position:relative; padding-left:14px; font-size:var(--fs16); font-weight:500; line-height:1.65; color:#444; margin-bottom:6px;}
.industrial .prodDetailBox ul li::before {content:""; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%; background:var(--c_base3);}
.industrial .prodDetailBox ul li:last-child {margin-bottom:0;}
.industrial .prodDetailBadge {display:inline-block; margin-top:14px; padding:8px 16px; border-radius:8px; background:linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); color:var(--c_base3); font-size:var(--fs16); font-weight:900; letter-spacing:.02em;}
 
@media screen and (max-width:1199px) {
  .industrial .prodDetailGrid {grid-template-columns:repeat(2, 1fr); gap:16px;}
  .industrial .prodDetailBox {padding:24px 20px;}
}
@media screen and (max-width:768px) {
  .industrial .prodDetailGrid {grid-template-columns:1fr; gap:14px;}
  .industrial .prodDetailBox {padding:22px 18px;}
  .industrial .prodDetailTit {font-size:var(--fs18);}
}

/* ===========================
   PROD SPEC GRID — 2컬럼 옵션 (prod4)
   =========================== */
.industrial .prodSpecGrid.col2 {grid-template-columns:repeat(2, 1fr);}
 
@media screen and (max-width:768px) {
  .industrial .prodSpecGrid.col2 {grid-template-columns:1fr;}
}
 
 
/* ===========================
   PROD SUB LIST (prod4: 개요 내부 들여쓰기 리스트)
   =========================== */
.industrial .prodSubList {margin-top:8px; padding-left:0;}
.industrial .prodSubList li {position:relative; padding-left:16px; font-size:var(--fs16); font-weight:500; line-height:1.65; color:#555; margin-bottom:4px;}
.industrial .prodSubList li::before {content:""; position:absolute; left:0; top:11px; width:6px; height:1.5px; background:#999; border-radius:2px;}
 
 
/* ===========================
   PROD OPERATION ROW (prod4: 제품 동작 사양 — 좌 이미지 + 우 텍스트)
   =========================== */
.industrial .prodOpRow {display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start;}
.industrial .prodOpImg {padding:24px; border:1.5px solid var(--border1); border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center;}
.industrial .prodOpImg img {max-width:100%; height:auto; display:block;}
.industrial .prodOpTxt {display:flex; flex-direction:column; gap:20px;}
.industrial .prodOpItem {padding:18px 22px; border-left:4px solid var(--c_base3); background:#f8f9fb; border-radius:0 10px 10px 0;}
.industrial .prodOpTit {display:block; font-size:var(--fs18); font-weight:900; color:#1a1a1a; margin-bottom:8px;}
.industrial .prodOpItem ul {padding-left:0; margin:0;}
.industrial .prodOpItem ul li {position:relative; padding-left:14px; font-size:var(--fs16); font-weight:500; line-height:1.65; color:#444; margin-bottom:4px;}
.industrial .prodOpItem ul li::before {content:""; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%; background:var(--c_base3);}
.industrial .prodOpItem ul li:last-child {margin-bottom:0;}
 
@media screen and (max-width:1199px) {
  .industrial .prodOpRow {gap:24px;}
}
@media screen and (max-width:768px) {
  .industrial .prodOpRow {grid-template-columns:1fr; gap:20px;}
  .industrial .prodOpImg {padding:18px;}
  .industrial .prodOpItem {padding:16px 18px;}
  .industrial .prodOpTit {font-size:var(--fs16);}
}
 
 
/* ===========================
   PROD DIMENSION BLOCK (prod4: 제품 치수 — 도면 + 캡션)
   =========================== */
.industrial .prodDimBlock {margin-bottom:36px;}
.industrial .prodDimBlock:last-child {margin-bottom:0;}
.industrial .prodDimNote {margin-top:14px; padding-left:0;}
.industrial .prodDimNote li {position:relative; padding-left:16px; font-size:var(--fs16); font-weight:600; line-height:1.65; color:#333; margin-bottom:4px;}
.industrial .prodDimNote li::before {content:""; position:absolute; left:0; top:11px; width:6px; height:6px; border-radius:50%; background:var(--c_base3);}
.industrial .prodDimNote li:last-child {margin-bottom:0;}
 
@media screen and (max-width:768px) {
  .industrial .prodDimBlock {margin-bottom:28px;}
}

/* ===========================
   PROD SCENARIO (prod4: 사고 시나리오 일러스트)
   =========================== */
.industrial .prodScenario {width:100%; padding:24px; border:1.5px solid var(--border1); border-radius:14px; background:linear-gradient(135deg, #f4f7fc 0%, #eaf1fb 100%); display:flex; align-items:center; justify-content:center; margin:24px 0;}
.industrial .prodScenario img {width:100%; height:auto; display:block; mix-blend-mode: multiply;}
 
@media screen and (max-width:768px) {
  .industrial .prodScenario {padding:16px; border-radius:12px; margin-bottom:20px;}
}

/* ===========================
   PROD OP IMG NOTE (prod5 HUD: 예시 이미지 캡션)
   =========================== */
.industrial .prodOpImg {position:relative; flex-direction:column;}
.industrial .prodOpImgNote {display:block; margin-top:10px; font-size:var(--fs16); font-weight:500; color:#888; text-align:center;}


/* ===========================
   PROD STEP BAR (prod6: 3단계 시나리오 헤더 라벨)
   =========================== */
.industrial .prodScenarioStep {flex-direction:column; padding:24px; gap:16px;}
.industrial .prodStepBar {display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; padding-left:0; width:100%;}
.industrial .prodStepBar li {display:flex; flex-direction:column; gap:10px; padding:14px 18px; border-radius:10px; background:#fff; border:1.5px solid var(--border1); font-size:var(--fs16); font-weight:700; color:#1a1a1a;}
.industrial .prodStepBar li .tit .prodStepNum {margin-right:10px;}
.industrial .prodStepBar li small {display:inline-block; margin-left:4px; font-size:var(--fs16); font-weight:500; color:#666;}
.industrial .prodStepNum {display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--c_base3); color:#fff; font-size:var(--fs16); font-weight:900; flex-shrink:0;}

@media screen and (max-width:1199px) {
  .industrial .prodStepBar {grid-template-columns:repeat(3, 1fr); gap:8px;}
  .industrial .prodStepBar li {padding:12px 14px;}
}
@media screen and (max-width:768px) {
  .industrial .prodScenarioStep {padding:16px;}
  .industrial .prodStepBar {grid-template-columns:1fr; gap:8px;}
}


/* ===========================
   PROD SYS GRID (prod6: 작업자/관리실 시스템 구성 좌우 2단)
   =========================== */
.industrial .prodSysGrid {display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.industrial .prodSysBox {display:flex; flex-direction:column; border:1.5px solid var(--border1); border-radius:14px; background:#fff; overflow:hidden;}
.industrial .prodSysHead {padding:16px 22px; background:#f4f7fc; border-bottom:1.5px solid var(--border1);}
.industrial .prodSysTit {display:flex; align-items:baseline; gap:8px; font-size:var(--fs20); font-weight:900; color:#1a1a1a;}
.industrial .prodSysTit small {font-size:var(--fs16); font-weight:600; color:var(--c_base3);}
.industrial .prodSysBody {display:flex; flex-direction:column; padding:20px;}
.industrial .prodSysBody .prodImgWrap {padding:18px;}
.industrial .prodSysPhoto {background:#fafbfd; margin-top:16px;}

@media screen and (max-width:1199px) {
  .industrial .prodSysGrid {gap:20px;}
}
@media screen and (max-width:768px) {
  .industrial .prodSysGrid {grid-template-columns:1fr; gap:16px;}
  .industrial .prodSysHead {padding:14px 18px;}
  .industrial .prodSysTit {font-size:var(--fs18);}
  .industrial .prodSysBody {padding:16px; gap:12px;}
}

/* ===========================
   PROD ADVANTAGE (prod7: 제품 장점 좌우 2단)
   =========================== */
.industrial .prodAdvRow {display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:stretch;}
.industrial .prodAdvList {display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding-left:0; justify-content:center;}
.industrial .prodAdvList li {display:flex; align-items:center; gap:14px; padding:18px 22px; border:1.5px solid var(--border1); border-radius:12px; background:#fff; font-size:var(--fs18); font-weight:700; color:#1a1a1a; transition:border-color .25s ease, background .25s ease;}
.industrial .prodAdvList li:hover {border-color:var(--c_base3); background:#f4f8fd;}
.industrial .prodAdvIcon {flex-shrink:0; width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); display:flex; align-items:center; justify-content:center;}
.industrial .prodAdvIcon img {width:60px; height:60px;}
.industrial .prodAdvImg {display:flex; flex-direction:column; gap:10px; padding:24px; border:1.5px solid var(--border1); border-radius:14px; background:linear-gradient(135deg, #f4f7fc 0%, #eaf1fb 100%); align-items:center; justify-content:center;}
.industrial .prodAdvImg img {max-width:100%; height:auto; display:block;}
 
@media screen and (max-width:1199px) {
  .industrial .prodAdvRow {gap:24px;}
  .industrial .prodAdvList li {padding:16px 18px; font-size:var(--fs16);}
}
@media screen and (max-width:768px) {
  .industrial .prodAdvRow {grid-template-columns:1fr; gap:20px;}
  .industrial .prodAdvList {gap:10px; grid-template-columns:repeat(2, 1fr);}
  .industrial .prodAdvList li {padding:14px 16px; flex-direction: column; gap:8px;
        align-items: center;
        text-align: center;}
  /*.industrial .prodAdvIcon {width:36px; height:36px;}
  .industrial .prodAdvIcon img {width:20px; height:20px;}*/
  .industrial .prodAdvImg {padding:18px;}
}


/* ===========================
   PROD CALLOUT (prod8: 강조 카피 박스)
   =========================== */
.industrial .prodCallout {display:flex; align-items:center; gap:18px; margin-top:24px; padding:20px 28px; border-radius:12px; background:linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); border-left:5px solid #43a047;}
.industrial .prodCalloutIcon {flex-shrink:0; width:44px; height:44px; border-radius:50%; background:#43a047; display:flex; align-items:center; justify-content:center;}
.industrial .prodCalloutIcon img {width:22px; height:22px;}
.industrial .prodCalloutTxt {font-size:var(--fs18); font-weight:600; color:#1a3a20; line-height:1.55; margin:0;}
.industrial .prodCalloutTxt strong {display:inline-block; margin-top:4px; padding:4px 14px; border-radius:8px; background:#43a047; color:#fff; font-weight:900;}

@media screen and (max-width:768px) {
  .industrial .prodCallout {flex-direction:column; align-items:flex-start; gap:12px; padding:18px 20px;}
  .industrial .prodCalloutIcon {width:38px; height:38px;}
  .industrial .prodCalloutIcon img {width:20px; height:20px;}
  .industrial .prodCalloutTxt {font-size:var(--fs16);}
  .industrial .prodCalloutTxt br {display:none;}
}


/* ===========================
   PROD SPEC GRID — 1컬럼 옵션 (prod8)
   =========================== */
.industrial .prodSpecGrid.col1 {grid-template-columns:1fr;}
.industrial .prodSpecBoxWide {display:grid; grid-template-columns:auto 1fr; align-items:flex-start; gap:18px; padding:24px 28px;}
.industrial .prodSpecBoxWide .prodSpecIcon {margin-bottom:0;}
.industrial .prodSpecBoxWide .prodSpecTit {grid-column:2; margin-bottom:8px;}
.industrial .prodSpecBoxWide ul {grid-column:2;}

@media screen and (max-width:768px) {
  .industrial .prodSpecBoxWide {grid-template-columns:1fr; gap:12px; padding:22px 20px;}
  .industrial .prodSpecBoxWide .prodSpecTit {grid-column:auto;}
  .industrial .prodSpecBoxWide ul {grid-column:auto;}
}


/* ===========================
   PROD SENSOR VIEW (prod8: 적용 사진 + 부품 3종)
   =========================== */
.industrial .prodSensorView {display:flex; flex-direction:column; margin:24px 0;}
.industrial .prodSensorMain {padding:18px; border:1.5px solid var(--border1); border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center;}
.industrial .prodSensorMain img {max-width:100%; height:auto; display:block;}
.industrial .prodSensorParts {display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
.industrial .prodSensorPart {padding:18px; border:1.5px solid var(--border1); border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center; aspect-ratio:4/3;}
.industrial .prodSensorPart img {max-width:100%; max-height:100%; object-fit:contain; display:block;}
.industrial .prodSensorView .prodOpImgNote {text-align:center;}

@media screen and (max-width:768px) {
  .industrial .prodSensorMain {padding:14px;}
  .industrial .prodSensorParts {grid-template-columns:repeat(2, 1fr); gap:10px;}
  .industrial .prodSensorPart {padding:14px;}
}

/* ===========================
   PROD ZONE VIEW (prod9: 적용 사진 + 존 다이어그램)
   =========================== */
.industrial .prodZoneView {display:flex; flex-direction:column; gap:10px; margin-bottom:32px;}
.industrial .prodZoneRow {display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
.industrial .prodZoneImg {padding:14px; border:1.5px solid var(--border1); border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center; aspect-ratio:4/3;}
.industrial .prodZoneImg img {max-width:100%; max-height:100%; object-fit:contain; display:block;}
.industrial .prodZoneView .prodOpImgNote {text-align:left;}

@media screen and (max-width:1199px) {
  .industrial .prodZoneRow {gap:12px;}
}
@media screen and (max-width:768px) {
  .industrial .prodZoneRow {grid-template-columns:1fr; gap:10px;}
  .industrial .prodZoneImg {padding:12px;}
}


/* ===========================
   PROD PART LIST (prod9: 감지부 / 제어부 / 표출부 가로형 라벨 카드)
   =========================== */
.industrial .prodPartList {display:flex; flex-direction:column; gap:14px;}
.industrial .prodPartItem {display:grid; grid-template-columns:160px 1fr; gap:24px; align-items:flex-start; padding:24px 28px; border:1.5px solid var(--border1); border-radius:14px; background:#fff; transition:border-color .25s ease, box-shadow .25s ease; align-items:center;}
.industrial .prodPartItem:hover {border-color:var(--c_base3); box-shadow:0 8px 20px rgba(30,136,229,.06);}
.industrial .prodPartLabel {display:flex; align-items:center; justify-content:center; padding:12px 0; border:2px solid var(--c_base3); border-radius:100px; background:#fff;}
.industrial .prodPartLabel span {font-size:var(--fs20); font-weight:900; color:var(--c_base3);}
.industrial .prodPartTxt {padding-left:0; margin:0;}
.industrial .prodPartTxt li {position:relative; padding-left:14px; font-size:var(--fs16); font-weight:500; line-height:1.7; color:#333; margin-bottom:4px;}
.industrial .prodPartTxt li::before {content:""; position:absolute; left:0; top:13px; width:5px; height:5px; border-radius:50%; background:var(--c_base3);}
.industrial .prodPartTxt li:last-child {margin-bottom:0;}

@media screen and (max-width:1199px) {
  .industrial .prodPartItem {grid-template-columns:140px 1fr; gap:20px; padding:20px 22px;}
  .industrial .prodPartLabel {padding:10px 0;}
  .industrial .prodPartLabel span {font-size:var(--fs18);}
}
@media screen and (max-width:768px) {
  .industrial .prodPartItem {grid-template-columns:1fr; gap:14px; padding:18px 20px;}
  .industrial .prodPartLabel {padding:8px 0; max-width:140px;}
  .industrial .prodPartLabel span {font-size:var(--fs16);}
}

/* ===========================
   PROD FLOW LIST (prod10: 동작 흐름 - 번호형 단계 카드)
   =========================== */
.industrial .prodFlowList {display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; padding-left:0;}
.industrial .prodFlowList li {position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:18px 20px; border:1.5px solid var(--border1); border-radius:12px; background:#fff; font-size:var(--fs16); font-weight:700; color:#1a1a1a; line-height:1.5; transition:border-color .25s ease, box-shadow .25s ease;}
.industrial .prodFlowList li:hover {border-color:var(--c_base3); box-shadow:0 8px 20px rgba(30,136,229,.06);}
/*.industrial .prodFlowList li::after {content:""; position:absolute; right:-12px; top:50%; transform:translateY(-50%); width:12px; height:2px; background:var(--c_base3); z-index:1;}*/
.industrial .prodFlowList li:last-child::after {display:none;}
.industrial .prodFlowNum {display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--c_base3); color:#fff; font-size:var(--fs18); font-weight:900; flex-shrink:0;}
 
@media screen and (max-width:1199px) {
  .industrial .prodFlowList {grid-template-columns:repeat(3, 1fr); gap:10px;}
  .industrial .prodFlowList li::after {display:none;}
}
@media screen and (max-width:768px) {
  .industrial .prodFlowList {grid-template-columns:1fr; gap:10px;}
  .industrial .prodFlowList li {flex-direction:row; align-items:center; padding:14px 18px;}
  .industrial .prodFlowNum {width:28px; height:28px; font-size:var(--fs16);}
}
 
 
/* ===========================
   PROD OP IMG NOTE — 가운데 정렬 옵션 (prod10)
   =========================== */
.industrial .prodOpImgNoteCenter {text-align:center; margin-top:14px;}

/* ===========================
   PROD TYPE GRID (prod11: 표시 유형별 카테고리 카드)
   =========================== */
.industrial .prodTypeGrid {display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;}
.industrial .prodTypeBox {display:flex; flex-direction:column; border:1.5px solid var(--border1); border-radius:14px; background:#fff; overflow:hidden; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;}
.industrial .prodTypeBox:hover {border-color:var(--c_base3); box-shadow:0 10px 24px rgba(30,136,229,.08); transform:translateY(-2px);}
.industrial .prodTypeHead {padding:14px 22px; background:linear-gradient(135deg, #f4f7fc 0%, #eaf1fb 100%); border-bottom:1.5px solid var(--border1);}
.industrial .prodTypeHead strong {font-size:var(--fs18); font-weight:900; color:var(--c_base3);}
.industrial .prodTypeBody {padding:24px; display:flex; align-items:center; justify-content:center; flex:1;}
.industrial .prodTypeBody img {max-width:100%; height:auto; display:block;}
 
@media screen and (max-width:1199px) {
  .industrial .prodTypeGrid {gap:16px;}
  .industrial .prodTypeHead {padding:12px 18px;}
  .industrial .prodTypeBody {padding:20px;}
}
@media screen and (max-width:768px) {
  .industrial .prodTypeGrid {grid-template-columns:1fr; gap:14px;}
  .industrial .prodTypeHead {padding:12px 16px;}
  .industrial .prodTypeHead strong {font-size:var(--fs16);}
  .industrial .prodTypeBody {padding:16px;}
}

/* ===========================
   PROD UI SET — 통합 UI 섹션 (1~4 번호 항목)
   =========================== */
.industrial .prodUiSet {display:flex; flex-direction:column; gap:36px;}
.industrial .prodUiItem {display:flex; flex-direction:column;}
.industrial .prodUiTit {display:flex; align-items:center; gap:12px; font-size:var(--fs22); font-weight:900; color:#1a1a1a; margin:0 0 14px;}
.industrial .prodUiNum {display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--c_base3); color:#fff; font-size:var(--fs18); font-weight:900; flex-shrink:0;}

@media screen and (max-width:768px) {
  .industrial .prodUiSet {gap:28px;}
  .industrial .prodUiTit {font-size:var(--fs18); gap:10px;}
  .industrial .prodUiNum {width:28px; height:28px; font-size:var(--fs16);}
}


/* ===========================
   PROD UI ROW — 3·4번 가로 2단 배치 (PC) / 세로 (모바일)
   =========================== */
.industrial .prodUiRow {display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.industrial .prodUiRow .prodUiItem {height:100%;}
.industrial .prodUiRow .prodUiPower,
.industrial .prodUiRow .prodUiPlainList {height:100%;}

@media screen and (max-width:1199px) {
  .industrial .prodUiRow {gap:20px;}
}
@media screen and (max-width:768px) {
  .industrial .prodUiRow {grid-template-columns:1fr; gap:28px;}
}


/* ===========================
   PROD UI CTRL (2. 제어부 — 좌 텍스트 + 우 STATUS 화면 2장)
   =========================== */
.industrial .prodUiCtrl {display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; padding:24px; border:1.5px solid var(--border1); border-radius:14px; background:#fff;}
.industrial .prodUiCtrlTxt {padding-left:0; margin:0;}
.industrial .prodUiCtrlTxt li {position:relative; padding-left:14px; font-size:var(--fs16); font-weight:500; line-height:1.7; color:#333; margin-bottom:8px;}
.industrial .prodUiCtrlTxt li::before {content:""; position:absolute; left:0; top:13px; width:5px; height:5px; border-radius:50%; background:var(--c_base3);}
.industrial .prodUiCtrlTxt li:last-child {margin-bottom:0;}
.industrial .prodUiCtrlImg {display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;}

@media screen and (max-width:1199px) {
  .industrial .prodUiCtrl {gap:20px; padding:20px;}
}
@media screen and (max-width:768px) {
  .industrial .prodUiCtrl {grid-template-columns:1fr; gap:18px; padding:18px;}
  .industrial .prodUiCtrlImg {gap:10px;}
}


/* ===========================
   PROD UI POWER (3. 전원부 — 좌 텍스트 + 우 아이콘)
   =========================== */
.industrial .prodUiPower {display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; padding:24px 28px; border:1.5px solid var(--border1); border-radius:14px; background:#fff;}
.industrial .prodUiPowerTxt {padding-left:0; margin:0;}
.industrial .prodUiPowerTxt li {position:relative; padding-left:14px; font-size:var(--fs16); font-weight:500; line-height:1.7; color:#333; margin-bottom:6px;}
.industrial .prodUiPowerTxt li::before {content:""; position:absolute; left:0; top:13px; width:5px; height:5px; border-radius:50%; background:var(--c_base3);}
.industrial .prodUiPowerTxt li:last-child {margin-bottom:0;}
.industrial .prodUiPowerIcon {display:flex; flex-direction:column; align-items:center; gap:8px;}
.industrial .prodUiPowerIcon img {width:52px; height:52px;}
.industrial .prodUiPowerLabel {font-size:var(--fs16); font-weight:800; color:var(--c_base3); letter-spacing:.02em;}

@media screen and (max-width:768px) {
  .industrial .prodUiPower {grid-template-columns:1fr; gap:18px; padding:20px 22px; text-align:left;}
  .industrial .prodUiPowerIcon {flex-direction:row; align-self:flex-start;}
  .industrial .prodUiPowerIcon img {width:42px; height:42px;}
}


/* ===========================
   PROD UI PLAIN LIST (4. 사용자 입력부)
   =========================== */
.industrial .prodUiPlainList {padding-left:0; padding:24px 28px; border:1.5px solid var(--border1); border-radius:14px; background:#fff;}
.industrial .prodUiPlainList li {position:relative; padding-left:14px; font-size:var(--fs16); font-weight:500; line-height:1.7; color:#333; margin-bottom:6px;}
.industrial .prodUiPlainList li::before {content:""; position:absolute; left:0; top:13px; width:5px; height:5px; border-radius:50%; background:var(--c_base3);}
.industrial .prodUiPlainList li:last-child {margin-bottom:0;}

@media screen and (max-width:768px) {
  .industrial .prodUiPlainList {padding:20px 22px;}
}

/* ===========================
   PROD COMP CARD (제품 구성 — 좌측 3-Box 세로 카드)
   =========================== */
.industrial .prodSysBodyCard {display:flex; flex-direction:column; gap:14px; height:100%;}
.industrial .prodCompCard {display:grid; grid-template-columns:auto 1fr; align-items:center; gap:24px; padding:20px 22px; border:1.5px solid var(--border1); border-radius:12px; background:#fff; flex:1; transition:border-color .25s ease, box-shadow .25s ease;}
.industrial .prodCompCard:hover {border-color:var(--c_base3); box-shadow:0 6px 16px rgba(30,136,229,.06);}
.industrial .prodCompIcon {flex-shrink:0; width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); display:flex; align-items:center; justify-content:center;}
.industrial .prodCompIcon img {width:60px; height:60px;}
.industrial .prodCompTxt {min-width:0;}
.industrial .prodCompTit {display:block; font-size:var(--fs18); font-weight:900; color:#1a1a1a; margin-bottom:8px;}
.industrial .prodCompTxt ul {padding-left:0; margin:0;}
.industrial .prodCompTxt ul li {position:relative; padding-left:14px; font-size:var(--fs16); font-weight:500; line-height:1.65; color:#444; margin-bottom:4px;}
.industrial .prodCompTxt ul li::before {content:""; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%; background:var(--c_base3);}
.industrial .prodCompTxt ul li:last-child {margin-bottom:0;}
 
@media screen and (max-width:1199px) {
  .industrial .prodSysBodyCard {gap:12px;}
  .industrial .prodCompCard {padding:18px 20px; gap:14px;}
}
@media screen and (max-width:768px) {
  .industrial .prodSysBodyCard {gap:10px;}
  .industrial .prodCompCard {grid-template-columns:1fr; gap:12px; padding:18px 20px;}

  .industrial .prodCompTit {font-size:var(--fs16);}
}