/* ============================================================
   건설현장 종합 안전관리 솔루션
   ============================================================ */
 
/* ── Hero ── */
.csHero {position:relative; width:100%; min-height:560px; border-radius:20px; overflow:hidden; display:flex; align-items:stretch; margin-bottom:80px;}
.csHero-bg {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;}
.csHero-overlay {position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,20,50,.88) 38%, rgba(10,20,50,.45) 70%, rgba(10,20,50,.15) 100%);}
.csHero-inner {position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; gap:16px; padding:60px 60px 200px; max-width:680px;}
.csHero-inner h2 {font-size:var(--fs50); font-weight:900; line-height:1.25; color:#fff;}
.csHero-inner h2 em {display:block; font-style:normal; color:var(--c_base1);}
.csHero-inner p {font-size:var(--fs16); line-height:1.85; color:rgba(255,255,255,.85); word-break:keep-all; max-width:520px;}
.csHeroBadgeRow {display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;}
.csHeroBadge {display:flex; align-items:center; gap:6px; padding:7px 16px; border-radius:100px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); font-size:var(--fs15); font-weight:600; color:#fff; backdrop-filter:blur(4px);}
.csHeroBadge img {width:18px; height:18px; object-fit:contain; filter:brightness(10);}
 
/* 우측 뱃지 카드들 */
.csHero-cards {position:absolute; right:40px; top:40px; display:flex; flex-direction:column; gap:12px; z-index:3;}
.csHeroCard {background:rgba(255,255,255,.12); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.25); border-radius:12px; padding:12px 18px; display:flex; align-items:center; gap:10px; min-width:200px;}
.csHeroCard .hcIco {width:36px; height:36px; border-radius:8px; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.csHeroCard .hcIco img {width:22px; height:22px; object-fit:contain; filter:brightness(10);}
.csHeroCard .hcTxt strong {display:block; font-size:var(--fs14); font-weight:800; color:#fff;}
.csHeroCard .hcTxt span {font-size:var(--fs13); color:rgba(255,255,255,.7);}
 
/* 하단 통합관제 플랫폼 패널 */
.csHero-panel {position:absolute; bottom:0; left:0; right:0; background:rgba(15,23,42,.75); backdrop-filter:blur(8px); padding:20px 60px; display:flex; align-items:center; gap:40px; z-index:3;}
.csHeroPanel-tit {font-size:var(--fs16); font-weight:800; color:var(--c_base1); white-space:nowrap; display:flex; align-items:center; gap:8px; flex-shrink:0;}
.csHeroPanel-tit::before {content:''; display:inline-block; width:4px; height:16px; background:var(--c_base1); border-radius:2px;}
.csHeroPanel-items {display:flex; gap:0; flex:1;}
.csHeroPanelItem {display:flex; align-items:center; gap:10px; padding:0 28px; border-right:1px solid rgba(255,255,255,.15);}
.csHeroPanelItem:first-child {padding-left:0;}
.csHeroPanelItem:last-child {border-right:none;}
.csHeroPanelItem .piIco {width:32px; height:32px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.csHeroPanelItem .piIco img {width:100%; height:100%; object-fit:contain; filter:brightness(5) sepia(1) saturate(3) hue-rotate(190deg);}
.csHeroPanelItem .piTxt strong {display:block; font-size:var(--fs15); font-weight:800; color:#fff;}
.csHeroPanelItem .piTxt span {font-size:var(--fs13); color:rgba(255,255,255,.6);}
 
/* ── 건설현장 스마트 안전관리 3단계 프로세스 ── */
.csSec {padding-top:0;}
.csSecTit {text-align:center; margin-bottom:50px;}
.csSecTit h3 {font-size:var(--fs40); font-weight:900;}
.csSecTit h3 em {font-style:normal; color:var(--c_base2);}
.csSecTit p {font-size:var(--fs16); margin-top:10px;}
 
/* 3단계 감지→분석→대응 */
.csProcess {display:grid; grid-template-columns:1fr 60px 1fr 60px 1fr; gap:0; align-items:center;}
.csProcessArrow {display:flex; align-items:center; justify-content:center;}
.csProcessArrow svg {width:40px; height:40px;}
.csProcessStep {border:1.5px solid var(--border1); border-radius:16px; padding:28px 120px 28px 24px; background:#fff; display:flex; flex-direction:column; gap:14px; position:relative;}
.csProcessStep-hd {display:flex; align-items:center; gap:12px;}
.csProcessStep-hd .psNum {font-size:var(--fs13); font-weight:800; font-family:'Inter',sans-serif; color:var(--c_base3); background:rgba(29,72,146,.1); padding:3px 10px; border-radius:100px; white-space:nowrap;}
.csProcessStep-hd .psLabel {font-size:var(--fs20); font-weight:900;}
.csProcessStep-hd .psSub {font-size:var(--fs16); font-weight:700; margin-left:auto; white-space:nowrap; color:var(--c_base3); font-family:'Inter',sans-serif;}
.csProcessStep .psImg {width:100%; height:100px; object-fit:contain; border-radius:8px; background:#f4f6fb; display:block;}
.csProcessStep .psDesc {font-size:var(--fs16); line-height:1.65;}
.csProcessStep .psList {display:flex; flex-direction:column; gap:5px; padding:0; margin:0; list-style:none;}
.csProcessStep .csIcon {position:absolute; right:24px; top:24px; width:80px; height:80px; border-radius:50%; background:#f0f5ff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.csProcessStep .csIcon img {width:50px; height:50px; object-fit:contain;}
.csProcessStep .psList li {font-size:var(--fs15); display:flex; align-items:flex-start; gap:6px;}
.csProcessStep .psList li::before {content:'·'; font-weight:700; flex-shrink:0; color:var(--c_base3);}
 
/* ── 핵심 기능 ── */
.csFuncSec {padding-top:80px;}
.csFuncGrid {display:grid; grid-template-columns:repeat(6,1fr); gap:16px;}
.csFuncCard {border:1.5px solid var(--border1); border-radius:14px; padding:22px 16px; background:#fff; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; transition:all .25s;}
.csFuncCard:hover {border-color:var(--c_base3);}
.csFuncCard .fcNum {font-size:var(--fs13); font-weight:800; font-family:'Inter',sans-serif; color:#fff; background:var(--c_base3); padding:2px 9px; border-radius:100px; align-self:flex-start;}
.csFuncCard .fcIco {width:60px; height:60px; border-radius:12px; background:#f4f6fb; display:flex; align-items:center; justify-content:center; transition:all .25s;}
.csFuncCard .fcIco img {width:36px; height:36px; object-fit:contain; transition:all .25s;}
.csFuncCard .fcTit {font-size:var(--fs16); font-weight:800; line-height:1.3;}
.csFuncCard .fcDesc {font-size:var(--fs14); line-height:1.6; word-break:keep-all;}
/* ── 적용 분야 ── */
.csApplySec {padding-top:80px;}
.csApplyHead {text-align:center; margin-bottom:36px;}
.csApplyHead h3 {font-size:var(--fs40); font-weight:900;}
.csApplyHead p {font-size:var(--fs16); margin-top:10px;}
.csApplyGrid {display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.csApplyItem {position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3;}
.csApplyItem img {width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s;}
.csApplyItem:hover img {transform:scale(1.05);}
.csApplyItem .aiOverlay {position:absolute; inset:0; background:linear-gradient(to top, rgba(10,20,50,.8) 40%, transparent 80%);}
.csApplyItem .aiTxt {position:absolute; bottom:0; left:0; right:0; padding:20px 22px;}
.csApplyItem .aiTxt strong {display:block; font-size:var(--fs20); font-weight:700; color:#fff;}
 
/* ============================================================
   ⑤ RFID 기반 작업자 출입관리 (전면 재작성)
   ============================================================ */
 
/* ── 섹션 헤더 행: 뱃지+설명 / 우측 4개 통계 ── */
.csRfidSec {padding-top:80px;}
.csRfidTop {display:flex; align-items:center; justify-content:space-between; gap:40px; margin-bottom:28px;}
.csRfidTopLeft {display:flex; flex-direction:column; gap:12px;}
.csRfidTopLeft .rfidBadge {display:inline-flex; align-items:center; gap:10px; background:var(--c_base3); padding:10px 22px; border-radius:100px; width:fit-content;}
.csRfidTopLeft .rfidBadge img {width:24px; height:24px; flex-shrink:0;}
.csRfidTopLeft .rfidBadge span {font-size:var(--fs20); font-weight:800; color:#fff;}
.csRfidTopLeft .rfidDesc {font-size:var(--fs16); line-height:1.7; padding-left:4px;}
 
/* 우측 4개 통계 뱃지 */
.csRfidTopRight {display:grid; grid-template-columns:repeat(2,1fr); gap:10px; flex-shrink:0; min-width:440px;}
.csRfidBadge {display:flex; align-items:center; gap:10px; border:1.5px solid var(--border1); border-radius:10px; padding:12px 16px; background:#fff;}
.csRfidBadge .rbIco {width:36px; height:36px; border-radius:8px; border:1.5px solid var(--c_base3); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.csRfidBadge .rbIco img {width:20px; height:20px; object-fit:contain;}
.csRfidBadge .rbTxt strong {display:block; font-size:var(--fs15); font-weight:800;}
.csRfidBadge .rbTxt span {font-size:var(--fs13); line-height:1.4; display:block; margin-top:1px;}
 
/* ── 3단계 카드 영역 ── */
.csRfidCards {display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.csRfidCard {border:1.5px solid var(--border1); border-radius:16px; background:#fff; display:flex; flex-direction:column; overflow:hidden;}
 
/* 카드 헤더 */
.csRfidCard-hd {display:flex; align-items:center; gap:10px; padding:22px 24px 0;}
.csRfidCard-hd .rcNum {display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; background:var(--c_base3); font-size:var(--fs18); font-weight:900; color:#fff; font-family:'Inter',sans-serif; flex-shrink:0;}
.csRfidCard-hd h4 {font-size:var(--fs18); font-weight:900;}
 
/* 카드 설명 */
.csRfidCard-desc {padding:10px 24px 0; font-size:var(--fs15); line-height:1.65; word-break:keep-all; height:80px;}
 
/* 메인 이미지 (빨간 라인 영역) */
.csRfidCard-img {margin:16px 24px 0; border-radius:10px; overflow:hidden; border:1.5px solid var(--border1);}
.csRfidCard-img img {width:100%; display:block; object-fit:cover;}
 
/* 하단 서브 정보 카드들 */
.csRfidCard-sub {padding:16px 24px 24px; display:flex; flex-direction:column; gap:10px; margin-top:auto;}
.csRfidSubItem {display:flex; align-items:flex-start; gap:12px; border:1.5px solid var(--border1); border-radius:10px; padding:12px 14px;}
.csRfidSubItem .siIco {width:44px; height:44px; border-radius:8px; background:#f0f5ff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.csRfidSubItem .siIco img {width:28px; height:28px; object-fit:contain;}
.csRfidSubItem .siTxt strong {display:block; font-size:var(--fs15); font-weight:800; margin-bottom:3px;}
.csRfidSubItem .siTxt span {font-size:var(--fs13); line-height:1.5; display:block;}
 
/* 카드1 서브 리스트 */
.csRfidCard-list {padding:0 24px 0; list-style:none; display:flex; flex-direction:column; gap:6px;}
.csRfidCard-list li {font-size:var(--fs15); display:flex; align-items:center; gap:8px;}
.csRfidCard-list li::before {content:''; flex-shrink:0; width:20px; height:20px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' rx='4' fill='%231D4892'/%3E%3Cpath d='M5 10.5l3.5 3.5 6.5-7' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
 
/* ── 중간 플로우 (RFID → 통합서버 → 서버) ── */
.csRfidMidFlow {display:flex; align-items:center; justify-content:center; gap:0; margin-top:24px; background:#f4f6fb; border-radius:14px; border:1.5px solid var(--border1); padding:22px 40px;}
.csRfidMidFlow-inner {display:flex; align-items:center; gap:0; flex:1; justify-content:space-around;}
.rfMidItem {display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; flex:0 0 auto;}
.rfMidItem .rfMIco {width:56px; height:56px; border-radius:12px; background:#fff; border:1.5px solid var(--border1); display:flex; align-items:center; justify-content:center;}
.rfMidItem .rfMIco img {width:34px; height:34px; object-fit:contain;}
.rfMidItem strong {font-size:var(--fs15); font-weight:800;}
.rfMidItem span {font-size:var(--fs13); line-height:1.4;}
.rfMidArrow {display:flex; align-items:center; padding:0 16px; flex-shrink:0;}
.rfMidArrow svg {width:32px; height:20px;}
 
/* ── 하단 4개 요약 바 ── */
.csRfidFlow {display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:24px; border:1.5px solid var(--border1); border-radius:14px; overflow:hidden; background:#fff;}
.csRfidFlowItem {display:flex; align-items:center; gap:14px; padding:20px 22px; border-right:1px solid var(--border1);}
.csRfidFlowItem:last-child {border-right:none;}
.csRfidFlowItem .rfIco {width:48px; height:48px; border-radius:10px; border:1.5px solid var(--c_base3); background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.csRfidFlowItem .rfIco img {width:28px; height:28px; object-fit:contain;}
.csRfidFlowItem .rfTxt strong {display:block; font-size:var(--fs15); font-weight:800; margin-bottom:3px;}
.csRfidFlowItem .rfTxt span {font-size:var(--fs13); line-height:1.4; display:block;}
 
/* ── Non-Wearable First ── */
.csNwSec {padding-top:80px;}
.csNwHead {margin-bottom:30px;}
.csNwHead h3 {font-size:var(--fs48); font-weight:900; font-family:'Inter',sans-serif;}
.csNwHead h3 em {font-style:normal; color:var(--c_base2);}
.csNwHead p {font-size:var(--fs18); margin-top:10px;}
.csNwCompare {display:grid; grid-template-columns:1fr 80px 1fr; gap:0; align-items:stretch;}
.csNwPanel {border-radius:16px; overflow:hidden; border:1.5px solid var(--border1);}
.csNwPanel.before {background:#f8f8f8;}
.csNwPanel.after {border-color:var(--c_base3); background:#fff; box-shadow:0 8px 32px rgba(29,72,146,.12);}
.csNwPanel-hd {padding:18px 28px; text-align:center;}
.csNwPanel.before .csNwPanel-hd {background:#e8e8e8;}
.csNwPanel.after .csNwPanel-hd {background:var(--c_base3);}
.csNwPanel-hd h4 {font-size:var(--fs18); font-weight:800;}
.csNwPanel.before .csNwPanel-hd h4 {color:#444;}
.csNwPanel.after .csNwPanel-hd h4 {color:#fff;}
.csNwBody {padding:24px 28px; display:flex; flex-direction:column; gap:14px;}
.csNwImg {width:100%; border-radius:10px; object-fit:contain; display:block; max-height:160px; mix-blend-mode: multiply;}
.csNwList {display:flex; flex-direction:column; gap:8px; padding:0; margin:0; list-style:none;}
.csNwList li {font-size:var(--fs16); display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-radius:8px; background:#f4f4f4;}
.csNwPanel.after .csNwList li {background:#f0f5ff;}
.csNwList li::before {content:''; flex-shrink:0; width:20px; height:20px; margin-top:1px;}
.csNwPanel.before .csNwList li::before {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23aaa'/%3E%3Cpath d='M6 10h8' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.csNwPanel.after .csNwList li::before {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%231D4892'/%3E%3Cpath d='M5.5 10.5l3 3 6-6' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.csNwFooter {padding:14px 28px; font-size:var(--fs16); font-weight:700; text-align:center; border-top:1px solid var(--border1);}
.csNwPanel.before .csNwFooter {background:#f0f0f0;}
.csNwPanel.after .csNwFooter {background:#edf3ff; color:var(--c_base3);}
.csNwVs {display:flex; align-items:center; justify-content:center;}
.csNwVs span {width:52px; height:52px; border-radius:50%; background:var(--c_base4); display:flex; align-items:center; justify-content:center; font-size:var(--fs16); font-weight:900; color:#fff; font-family:'Inter',sans-serif;}
 
/* ── 도입 효과 ── */
.csEffectSec {padding-top:80px;}
.csEffectHead {text-align:center; margin-bottom:40px;}
.csEffectHead h3 {font-size:var(--fs40); font-weight:900;}
.csEffectGrid {display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
.csEffectItem {border:1.5px solid var(--border1); border-radius:14px; padding:28px 20px; background:#fff; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; transition:all .25s;}
.csEffectItem:hover {border-color:var(--c_base3);}
.csEffectItem .eiIco {width:64px; height:64px; border-radius:50%; background:#f4f6fb; display:flex; align-items:center; justify-content:center; transition:all .25s;}
.csEffectItem .eiIco img {width:36px; height:36px; object-fit:contain; transition:all .25s;}
.csEffectItem .eiTit {font-size:var(--fs16); font-weight:800; line-height:1.3;}
.csEffectItem .eiDesc {font-size:var(--fs14); line-height:1.6; word-break:keep-all;}
 
/* ============================================================
   반응형 1199
   ============================================================ */
@media screen and (max-width:1199px) {
  .csHero {min-height:460px; margin-bottom:60px;}
  .csHero-inner {padding:50px 40px 50px; max-width:560px;}
  .csHero-inner h2 {font-size:var(--fs38);}
  .csHero-cards {right:24px; top:24px;}
  .csHero-panel {padding:18px 40px; gap:24px;}
  .csHeroPanel-items {flex-wrap:wrap; gap:16px;}
  .csHeroPanelItem {padding:0 18px;}
 
  .csProcess {grid-template-columns:1fr; gap:0;}
  .csProcessArrow {padding:10px 0; transform:rotate(90deg);}
 
  .csFuncGrid {grid-template-columns:repeat(3,1fr);}
  .csFuncSec {padding-top:60px;}
 
  .csApplySec {padding-top:60px;}
 
  .csRfidSec {padding-top:60px;}
  .csRfidTop {flex-direction:column; gap:24px;}
  .csRfidTopRight {min-width:auto; width:100%; grid-template-columns:repeat(4,1fr);}
  .csRfidCards {grid-template-columns:1fr;}
  .csRfidCard {flex-direction:column;}
  .csRfidMidFlow {padding:18px 24px;}
  .csRfidFlow {grid-template-columns:repeat(2,1fr);}
  .csRfidFlowItem:nth-child(2) {border-right:none;}
  .csRfidFlowItem:nth-child(3) {border-top:1px solid var(--border1);}
  .csRfidFlowItem:nth-child(4) {border-top:1px solid var(--border1); border-right:none;}
 
  .csNwSec {padding-top:60px;}
  .csNwCompare {grid-template-columns:1fr 60px 1fr;}
 
  .csEffectSec {padding-top:60px;}
  .csEffectGrid {grid-template-columns:repeat(3,1fr);}
  
  
  
  
}
 
/* ============================================================
   반응형 768
   ============================================================ */
@media screen and (max-width:768px) {
  .csHero {min-height:380px; border-radius:12px; margin-bottom:40px;}
  .csHero-inner {padding:36px 24px 30px; max-width:100%; justify-content:flex-end;}
  .csHero-inner h2 {font-size:var(--fs28);}
  .csHero-cards {display:none;}
  .csHero-panel {padding:16px 20px; gap:14px; flex-wrap:wrap;}
  .csHeroPanel-tit {width:100%; margin-bottom:4px;}
  .csHeroPanel-items {gap:14px; flex-wrap:wrap;}
  .csHeroPanelItem {padding:0 14px;}
  .csHeroPanelItem:first-child {padding-left:0;}
 
  .csSecTit {margin-bottom:30px;}
 
  .csFuncSec {padding-top:50px;}
  .csFuncGrid {grid-template-columns:repeat(2,1fr);}
 
  .csApplySec {padding-top:50px;}
  .csApplyGrid {grid-template-columns:repeat(2,1fr); gap:10px;}
 
  .csRfidSec {padding-top:50px;}
  .csRfidTopRight {grid-template-columns:repeat(2,1fr);}
  .csRfidCards {gap:14px;}
  .csRfidMidFlow {padding:16px 16px;}
  .rfMidArrow {padding:0 8px;}
  .rfMidItem .rfMIco {width:44px; height:44px;}
  .rfMidItem .rfMIco img {width:26px; height:26px;}
  .csRfidFlow {grid-template-columns:1fr;}
  .csRfidFlowItem {border-right:none; border-top:1px solid var(--border1);}
  .csRfidFlowItem:first-child {border-top:none;}
  .csRfidFlowItem:nth-child(3) {border-top:1px solid var(--border1);}
  .csRfidFlowItem:nth-child(4) {border-top:1px solid var(--border1);}
 
  .csNwSec {padding-top:50px;}
  .csNwCompare {grid-template-columns:1fr; gap:0;}
  .csNwVs {padding:16px 0;}
  .csNwPanel.before {order:1;}
  .csNwVs {order:2;}
  .csNwPanel.after {order:3;}
 
  .csEffectSec {padding-top:50px;}
  .csEffectGrid {grid-template-columns:repeat(2,1fr);}
  .csEffectItem:last-child {grid-column:span 2;}
}
 
@media screen and (max-width:500px) {
  .csFuncGrid {grid-template-columns:repeat(2,1fr); gap:10px;}
  .csApplyGrid {grid-template-columns:1fr;}
  .csRfidStats {grid-template-columns:1fr;}
  .csRfidFlow {grid-template-columns:1fr;}
  .csRfidFlowItem {border-right:none !important; border-top:1px solid var(--border1);}
  .csRfidFlowItem:first-child {border-top:none;}
  .csEffectGrid {grid-template-columns:1fr;}
  .csEffectItem:last-child {grid-column:auto;}
  
  .csRfidTopRight {grid-template-columns:1fr;}
  .csRfidMidFlow-inner {flex-wrap:wrap; justify-content:center; gap:12px;}
  .rfMidArrow {}
}