/*
 * bizpr_main.css
 * bzp 사이트 메인(랜딩) 스타일 - 2026 하반기 디자인 스왑
 * bizpr_main_view.jsp 에 있던 인라인 <style> 5개 블록(SECTION 1~5)을
 * 문서 순서 그대로 옮긴 것으로, 규칙 내용/순서/중복은 원본과 동일하다 (변경 금지 대상).
 * 사용처: SPTL_PT/web/sp/bizpr/bizpr_main_view.jsp (이 화면 전용)
 */

/* ===== [원본] bizpr_main_view.jsp L46~L509 : SECTION 1 ===== */
/* ===== sec1 ===== */
.s1-section {
    height:auto;
    background:#fff;
    min-height:0;
    margin:0;
    /* 배너가 화면 최상단부터 시작해 투명 헤더 뒤로 파란 그라디언트가 비치도록 padding-top 두지 않음.
       히어로 콘텐츠는 세로 중앙 정렬이라 헤더에 가려지지 않음. */
  }
.s1-section * { margin:0; padding:0; box-sizing:border-box; }
/* 모바일 전용 줄바꿈(전 섹션 공통): 데스크탑/태블릿 숨김, ≤767에서만 줄바꿈 */
.mobile-break{ display:none; }
@media (max-width:767px){ .mobile-break{ display:inline; } }
.s1-section .s1-stage {
    width:100%;
    height:640px;
    max-width:none;
    margin:0 auto;
  }
.s1-section .s1-banner {
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:0;
    background:
      radial-gradient(120% 130% at 100% 8%, rgba(20,52,196,.55) 0%, rgba(20,52,196,0) 46%),
      radial-gradient(95% 120% at 10% 0%, rgba(104,150,255,.45) 0%, rgba(104,150,255,0) 48%),
      linear-gradient(125deg,#3768f2 0%,#2b56ec 50%,#2142d8 100%);
    container-type:inline-size;
    
    
  }
.s1-section .s1-deco { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.s1-section .s1-deco-panel {
    position:absolute;
    top:-12%;
    right:-6%;
    width:62%;
    height:135%;
    background:rgba(255,255,255,.05);
    clip-path:polygon(42% 0,66% 0,16% 100%,-10% 100%);
  }
.s1-section .s1-deco-panel2 {
    position:absolute;
    top:-20%;
    right:-2%;
    width:46%;
    height:150%;
    background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0));
    clip-path:polygon(76% 0,88% 0,38% 100%,26% 100%);
  }
.s1-section .s1-circle { position:absolute; border-radius:50%; }
.s1-section .s1-circle-a {
    width:46cqw; height:46cqw;
    right:-7cqw; top:-16cqw;
    background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.14),rgba(255,255,255,0) 70%);
  }
.s1-section .s1-circle-b {
    width:28cqw; height:28cqw;
    right:9cqw; bottom:-12cqw;
    border:1.5px solid rgba(255,255,255,.18);
  }
.s1-section .s1-skyline {
    position:absolute;
    left:0; bottom:0;
    width:48%; height:70%;
    opacity:.10;
    background:
      repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 26px);
    -webkit-mask:linear-gradient(180deg,transparent,#000 60%);
            mask:linear-gradient(180deg,transparent,#000 60%);
    clip-path:polygon(0 38%,8% 30%,8% 60%,16% 52%,16% 44%,24% 40%,24% 64%,33% 56%,33% 30%,42% 24%,42% 100%,0 100%);
  }
.s1-section .s1-wave { position:absolute; left:0; bottom:0; width:100%; height:auto; display:block; }
.s1-section .s1-inner {
    position:relative;
    height:100%;
    max-width:1120px;
    margin:0 auto;
    padding:0;
    display:flex;
    align-items:center;
  }
.s1-section .s1-copy {
    position:relative;
    z-index:3;
    width:54%;
    max-width:600px;
    transform:translateY(35px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0;
  }
.s1-section .s1-sub {
    color:#fff;
    font-weight:400;
    font-size:20px;
    letter-spacing:-.01em;
    margin-bottom:24px;
    opacity:.92;
  }
.s1-section .s1-title {
    color:#fff;
    font-weight:700;
    font-size:40px;
    line-height:1.4;
    letter-spacing:-.035em;
    white-space:nowrap;
    word-break:keep-all;
  }
.s1-section .s1-title .s1-l1 { font-weight:350; }
.s1-section .s1-title .s1-l1 .s1-em { font-weight:350; }
.s1-section .s1-title .s1-em { font-weight:650 !important; }
.s1-section .s1-title.s1-title { font-weight:650; }
.s1-section .s1-title .s1-em {
    position:relative;
    font-weight:800;
    white-space:nowrap;
    color:var(--em-accent);
  }
.s1-section .s1-title .s1-em::after {
    content:"";
    display:none;
    position:absolute;
    left:0; right:0; bottom:-.08em;
    height:.14em;
    background:var(--em-accent);
    border-radius:2px;
    transform-origin:left center;
  }
.s1-section .s1-banner[data-em="highlight"] .s1-title .s1-em::after { display:none; }
.s1-section .s1-banner[data-em="highlight"] .s1-title .s1-em {
    background:color-mix(in srgb, var(--em-accent) 32%, transparent);
    box-shadow:0 0 0 .18em color-mix(in srgb, var(--em-accent) 32%, transparent);
    border-radius:.12em;
  }
.s1-section .s1-banner[data-em="glow"] .s1-title .s1-em::after { display:none; }
.s1-section .s1-banner[data-em="glow"] .s1-title .s1-em {
    color:var(--em-accent);
    text-shadow:0 0 .35em color-mix(in srgb, var(--em-accent) 75%, transparent);
  }
.s1-section .s1-banner[data-em="box"] .s1-title .s1-em::after { display:none; }
.s1-section .s1-banner[data-em="box"] .s1-title .s1-em {
    padding:.04em .28em;
    border:.08em solid var(--em-accent);
    border-radius:.34em;
  }
@media (prefers-reduced-motion: no-preference) {
.s1-section .s1-banner[data-motion="draw"] .s1-title .s1-em::after {
      animation:s1-emDraw 1s cubic-bezier(.6,.1,.2,1) .35s both;
    }
@keyframes s1-emDraw { from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.s1-section .s1-banner[data-motion="pulse"] .s1-title .s1-em {
      animation:s1-emPulse 2.4s ease-in-out infinite;
    }
@keyframes s1-emPulse { 0%,100%{ filter:none; } 50%{ filter:drop-shadow(0 0 .3em var(--em-accent)); } }
}
.s1-section .s1-cta {
    display:flex;
    align-items:center;
    gap:22px;
    margin-top:40px;
  }
.s1-section .s1-cta-line {
    width:226px;
    max-width:240px;
    height:1px;
    background:rgba(255,255,255,.65);
  }
.s1-section .s1-cta-link {
    display:inline-flex;
    align-items:center;
    gap:.55em;
    color:#fff;
    font-weight:700;
    font-size:20px;
    text-decoration:none;
    letter-spacing:-.01em;
    transition:color .2s ease, gap .2s ease;
  }
.s1-section .s1-cta-link .s1-arrow { transition:transform .2s ease; }
.s1-section .s1-cta-link:hover { color:var(--cta-hover); gap:.9em; }
.s1-section .s1-cta-link:hover .s1-arrow { transform:translateX(3px); }
.s1-section .s1-arrow svg { stroke-width:1.6px; }
.s1-section .s1-banner[data-cta="button"] .s1-cta-line { display:none; }
.s1-section .s1-banner[data-cta="button"] .s1-cta-link {
    background:var(--main-blue);
    padding:.85em 1.6em;
    border-radius:6px;
    box-shadow:0 10px 24px rgba(26,50,216,.35);
  }
.s1-section .s1-banner[data-cta="button"] .s1-cta-link:hover {
    color:#fff;
    background:#15f6fe;
    box-shadow:0 12px 28px rgba(21,246,254,.4);
  }
.s1-section .s1-banner[data-cta="button"] .s1-cta-link:hover .s1-arrow { transform:translateX(3px); }
.s1-section .s1-people {
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    pointer-events:none;
  }
.s1-section .s1-person {
    position:absolute;
    bottom:0;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 18px 30px rgba(8,18,60,.28));
  }
.s1-section .s1-person.s1-cfo {
    right:0;
    height:66.6%;
    z-index:2;
  }
.s1-section .s1-person.s1-finance {
    right:240px;
    height:59.4%;
    z-index:3;
  }
.s1-section .s1-metrics {
    position:absolute;
    left:0; right:0; bottom:0;
    z-index:4;
    display:flex;
    align-items:center;
    height:13.5%;
    padding:0 5cqw;
    background:linear-gradient(180deg,rgba(15,27,78,0),rgba(15,27,78,.28));
    backdrop-filter:blur(2px);
    border-top:1px solid rgba(255,255,255,.18);
  }
.s1-section .s1-metric {
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    gap:.15em;
    padding:0 1.6cqw;
    position:relative;
  }
.s1-section .s1-metric + .s1-metric::before {
    content:"";
    position:absolute;
    left:0; top:50%;
    transform:translateY(-50%);
    width:1px; height:54%;
    background:rgba(255,255,255,.22);
  }
.s1-section .s1-metric .s1-num {
    color:#fff;
    font-weight:700;
    font-size:2cqw;
    line-height:1;
    letter-spacing:-.02em;
  }
.s1-section .s1-metric .s1-num .s1-unit {
    color:var(--cta-hover);
    font-weight:700;
    font-size:.7em;
    margin-left:.12em;
  }
.s1-section .s1-metric .s1-lbl {
    color:#fff;
    font-weight:300;
    font-size:1.1cqw;
    letter-spacing:-.01em;
    opacity:.88;
  }
/* ===== carousel ===== */
.s1-section .s1-track {
    position:absolute; inset:0;
    z-index:2;
  }
.s1-section .s1-slide {
    position:absolute; inset:0; width:100%; height:100%;
    transform:translateX(100%);
    z-index:0; pointer-events:none;
    /* 대기 슬라이드(현재/이전 아님)는 전환 없음 → 화면을 가로지르지 않고 즉시 오른쪽 밖에서 대기 */
  }
/* 가로 슬라이드: 각 슬라이드는 position:absolute 로 완전히 분리된 레이어. 다음은 오른쪽→정위치, 이전은 왼쪽으로 밀려남. 두 슬라이드는 항상 배너 1폭만큼 떨어져 있어 텍스트가 겹치지 않음 */
.s1-section .s1-slide.s1-current {
    transform:translateX(0);
    z-index:2; pointer-events:auto;
    transition:transform 1.1s cubic-bezier(.4,0,.2,1);
  }
.s1-section .s1-slide.s1-prev {
    transform:translateX(-100%);
    z-index:1;
    transition:transform 1.1s cubic-bezier(.4,0,.2,1);
  }
.s1-section .s1-slide .s1-inner { max-width:1120px; }
.s1-section .s1-visual { position:absolute; right:max(0px, calc((100% - 1120px)/2)); top:0; bottom:0; width:min(52%, 620px); pointer-events:none; z-index:2; }

/* slide 1 : cutout man + process flow */
.s1-section .s1-visual-1 .s1-man {
    position:absolute; right:0; left:auto; transform:none; bottom:0;
    height:66%; width:auto;
    filter:drop-shadow(0 20px 34px rgba(8,18,60,.30));
  }

.s1-section .s1-flow {
    position:absolute; top:150px; left:0; right:0;
    display:flex; align-items:flex-end; justify-content:flex-end;
    gap:6px; padding-right:36px; z-index:4; flex-wrap:nowrap;
  }
.s1-section .s1-chip {
    background:rgba(255,255,255,.15);
    color:#fff; font-weight:600; font-size:14px;
    letter-spacing:-.01em;
    padding:8px 15px; border-radius:999px;
    border:1px solid rgba(255,255,255,.42);
    box-shadow:0 6px 16px -10px rgba(8,18,60,.28);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    white-space:nowrap;
  }
.s1-section .s1-flow .s1-sep { color:rgba(255,255,255,.65); font-weight:700; font-size:14px; }
.s1-section .s1-flow .s1-chip:nth-child(1){ transform:translateY(24px) rotate(-9deg); }
.s1-section .s1-flow .s1-sep:nth-child(2){ transform:translateY(13px) rotate(-6deg); }
.s1-section .s1-flow .s1-chip:nth-child(3){ transform:translateY(5px) rotate(-3deg); }
.s1-section .s1-flow .s1-sep:nth-child(4){ transform:translateY(2px); }
.s1-section .s1-flow .s1-chip:nth-child(5){ transform:translateY(5px) rotate(3deg); }
.s1-section .s1-flow .s1-sep:nth-child(6){ transform:translateY(13px) rotate(6deg); }
.s1-section .s1-flow .s1-chip:nth-child(7){ transform:translateY(24px) rotate(9deg); }

/* slide 2 / 3 : rounded photo card */
.s1-section .s1-visual .s1-card {
    position:absolute; right:0; bottom:97px;
    width:78%; max-width:430px;
    object-fit:cover;
    border-radius:0;
    box-shadow:0 6px 26px rgba(8,18,60,.12);
  }
/* slide 2 : monitor PNG has its own shadow — kill the box-shadow */
.s1-section .s1-visual-2 .s1-card { box-shadow:none; width:73%; max-width:420px; right:0; bottom:82px; }
/* slide 2 : simple floating icon flow above the photo */
.s1-section .s1-visual-2 .s1-s2-icons {
    position:absolute; right:-34px; bottom:374px;
    width:84%; max-width:525px; z-index:5;
    display:flex; align-items:flex-start; justify-content:center; gap:26px;
  }
.s1-section .s1-s2-chip { display:flex; flex-direction:column; align-items:center; gap:9px; }
.s1-section .s1-s2-ic {
    width:58px; height:58px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    background:rgba(255,255,255,.16);
    border:0.5px solid rgba(255,255,255,.4);
    backdrop-filter:blur(4px);
    box-shadow:0 14px 24px -12px rgba(8,18,60,.5);
  }
.s1-section .s1-s2-ic svg { width:30px; height:30px; }
.s1-section .s1-s2-lb {
     font-size:15px; font-weight:400; color:#fff;
    letter-spacing:-.2px;
  }
.s1-section .s1-s2-arw {
    align-self:center; margin-top:-16px;
    font-size:26px; font-weight:400; line-height:1;
    color:rgba(255,255,255,.7);
  }
@keyframes s1-s2floaty { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* slide 3 : single tablet monitor (matches slide 2) */
.s1-section .s1-visual-3 .s1-card { box-shadow:none; width:65.25%; max-width:360px; right:9%; bottom:91px; transform:translateX(15px); }
.s1-section .s1-visual-3 .s1-s3-phone { position:absolute; width:35%; max-width:202px; right:0; bottom:47px; z-index:5; filter:drop-shadow(0 16px 30px rgba(8,18,60,.35)); }
/* slide 3 : horizontal 3-step flow */
.s1-section .s1-visual-3 .s1-s3-flow { position:absolute; left:2%; top:calc(14% + 10px); z-index:7; display:flex; align-items:center; gap:10px; }
.s1-section .s1-visual-3 .s1-s3-flow .s1-step { display:flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(4px); }
.s1-section .s1-visual-3 .s1-s3-flow .s1-step .s1-n { display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#fff; color:#2f5bd7; font-size:12px; font-weight:800; }
.s1-section .s1-visual-3 .s1-s3-flow .s1-step .s1-t { font-size:15px; font-weight:700; letter-spacing:-.02em; color:#f4f7ff; white-space:nowrap; }
.s1-section .s1-visual-3 .s1-s3-flow .s1-sep { color:rgba(255,255,255,.75); font-size:16px; font-weight:700; }
.s1-section .s1-visual-3 .s1-s3-cap { position:absolute; right:0; bottom:385px; width:38%; max-width:220px; z-index:6; border-radius:8px; box-shadow:0 10px 24px rgba(8,18,60,.28); }
/* slide 3 : horizontal step bar between header and phone top */
.s1-section .s1-visual-3 .s1-s3-hbar { position:absolute; right:551px; top:156px; transform:translateY(-50%); z-index:7; display:flex; align-items:flex-start; gap:54px; }
.s1-section .s1-visual-3 .s1-s3-hbar .s1-step { display:flex; flex-direction:column; align-items:center; gap:9px; }
.s1-section .s1-visual-3 .s1-s3-hbar .s1-line { position:absolute; left:36px; right:29px; bottom:4px; height:1px; background:rgba(143,178,255,.55); z-index:-1; }
.s1-section .s1-visual-3 .s1-s3-hbar .s1-t { font-size:16px; font-weight:400; letter-spacing:-.02em; color:#f4f7ff; white-space:nowrap; }
.s1-section .s1-visual-3 .s1-s3-hbar .s1-d { width:9px; height:9px; border-radius:50%; background:#8fb2ff; box-shadow:0 0 0 4px rgba(143,178,255,.25); flex:none; }
/* slide 3 : 폰 위쪽 중앙 캡션 (구 체크리스트 대체) — 태블릿 좌측끝~폰 우측끝 가로 중앙, 폰 상단 위 */
.s1-section .s1-visual-3 .s1-s3-cline { position:absolute; left:376px; top:133px; transform:translateX(-50%); z-index:8; display:flex; align-items:center; gap:8px; font-size:17px; font-weight:400; letter-spacing:-.02em; color:#f4f7ff; white-space:nowrap; }
.s1-section .s1-visual-3 .s1-s3-cline .s1-vchk { width:22px; height:22px; flex:none; display:block; }
/* controls */
.s1-section .s1-controls {
    position:absolute; left:0; right:0; bottom:26px;
    z-index:7; display:flex; align-items:center;
    justify-content:center; gap:16px;
  }
.s1-section .s1-dots { display:flex; align-items:center; gap:9px; }
.s1-section .s1-dot {
    width:9px; height:9px; border-radius:50%;
    background:rgba(255,255,255,.45); border:0; padding:0;
    cursor:pointer; transition:width .25s ease, background .25s ease, border-radius .25s ease;
  }
.s1-section .s1-dot.s1-active { width:26px; border-radius:5px; background:#fff; }
.s1-section .s1-pp {
    width:30px; height:30px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.18); border:0; cursor:pointer;
    color:#fff; transition:background .18s ease;
  }
.s1-section .s1-pp:hover { background:rgba(255,255,255,.3); }
.s1-section .s1-pp svg { width:13px; height:13px; display:block; }
.s1-section .s1-pp .s1-ic-play { display:none; }
.s1-section .s1-pp.s1-paused .s1-ic-pause { display:none; }
.s1-section .s1-pp.s1-paused .s1-ic-play { display:block; }
.s1-section .s1-plogo {
    display:inline-flex; align-self:flex-start;
    background:transparent; padding:0;
    margin-bottom:18px;
  }
.s1-section .s1-plogo img { height:34px; width:auto; display:block; }
.s1-section .s1-plogo.s1-ptext {
    align-items:center; height:34px;
    
    font-size:20px; font-weight:600; line-height:1;
    letter-spacing:-.03em; color:#fff; white-space:nowrap;
  }
.s1-section .s1-vtag {
    position:absolute; top:158px; right:21px; left:auto; transform:none; z-index:5;
    text-align:right; line-height:1.42;
     font-size:21px; font-weight:300; color:#fff;
    text-shadow:0 3px 12px rgba(8,18,60,.4);
  }
.s1-section .s1-vtag b { font-weight:600; color:#15f6fe; }
.s1-section .s1-vtag .s1-vq { font-family:Georgia,serif; font-size:38px; line-height:1; color:#15f6fe; opacity:.55; vertical-align:-8px; margin-right:8px; }
.s1-section .s1-vtag .s1-vqc { margin-right:0; margin-left:6px; }

/* ===== 반응형: 데스크탑(≥1240) 고정 유지 / 태블릿(≤1239) 제목 줄바꿈+축소 / 모바일(≤767) 카피 전폭 ===== */
/* ===== 모바일·태블릿(≤1239): 라이브 패턴 — 텍스트 상단(중앙) + 이미지 하단(중앙) 세로 스택 ===== */
@media (max-width:1239px){
  .s1-section .s1-inner{ flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; padding:92px 24px 0; }
  .s1-section .s1-copy{ width:100%; max-width:600px; align-items:center; text-align:center; transform:none; }
  .s1-section .s1-title{ white-space:normal; font-size:37px; line-height:1.3; }
  .s1-section .s1-sub{ font-size:17px; }
  .s1-section .s1-cta{ margin-top:26px; justify-content:center; }
  .s1-section .s1-cta-line{ display:none; }
  /* 장식용 플로팅 칩/라벨은 모바일에서 숨김 → 라이브처럼 간결하게 */
  .s1-section .s1-visual-2 .s1-s2-icons,
  .s1-section .s1-visual-3 .s1-s3-flow,
  .s1-section .s1-visual-3 .s1-s3-hbar,
  .s1-section .s1-visual-3 .s1-s3-cline,
  .s1-section .s1-visual-3 .s1-s3-cap,
  .s1-section .s1-vtag{ display:none; }
  /* 비주얼: 배너 하단 중앙 배치 + 전체 축소(내부 구성 비율 유지) */
  .s1-section .s1-visual{
    left:50%; right:auto; top:auto; bottom:44px; width:600px; height:340px;
    transform:translateX(-50%) scale(.7); transform-origin:bottom center; opacity:1;
  }
  /* 각 슬라이드 메인 이미지 가로 중앙 정렬 */
  .s1-section .s1-visual-1 .s1-man{ right:50%; left:auto; transform:translateX(50%); height:120%; }
  .s1-section .s1-visual-2 .s1-card{ right:50%; left:auto; transform:translateX(50%); }
  .s1-section .s1-visual-3 .s1-card{ transform:translateX(-93px); }
  .s1-section .s1-visual-3 .s1-s3-phone{ transform:translateX(-93px); }
}
@media (max-width:767px){
  .s1-section .s1-inner{ padding:88px 18px 0; }
  .s1-section .s1-title{ font-size:26px; line-height:1.32; }
  .s1-section .s1-sub{ font-size:14px; margin-bottom:14px; }
  .s1-section .s1-cta{ margin-top:20px; }
  .s1-section .s1-visual{ width:560px; height:300px; bottom:40px; transform:translateX(-50%) scale(.76); }
}
/* ===== [원본] bizpr_main_view.jsp L737~L874 : SECTION 2 ===== */

  .sec2-section *{margin:0;padding:0;box-sizing:border-box;}
  /* 모바일 전용 줄바꿈: 데스크탑/태블릿 숨김, ≤767에서만 줄바꿈 */
  .sec2-section .mobile-break{ display:none; }
  @media (max-width:767px){ .sec2-section .mobile-break{ display:inline; } }
  .sec2-section{
    font-family:"Pretendard","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:linear-gradient(180deg,#e1e8f0 0%,#dde5ef 100%);
    padding:83.5px 32px 83.5px;
  }
  .sec2-section .sec2-prod-wrap{ max-width:1120px; margin:0 auto; }
  .sec2-section .sec2-prod-grid{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
  }
  .sec2-section .sec2-pcard{
    display:flex; flex-direction:column;
    background:#ffffff; border-radius:10px; overflow:hidden;
    /* 두께는 평상시/hover 동일(1px) — hover 시 색만 바뀌므로 레이아웃 흔들림 없음 — hover 시 색만 바뀌므로 레이아웃 흔들림 없음 */
    border:1px solid transparent;
    box-shadow:0 10px 30px -18px rgba(23,40,90,.28);
    /* 카드 hover 통일 스펙: .3s / cubic-bezier(.2,.7,.2,1) — transform 이동 없음 */
    transition:box-shadow .3s cubic-bezier(.2,.7,.2,1), border-color .3s cubic-bezier(.2,.7,.2,1);
  }
  .sec2-section .sec2-pcard:hover{
    /* 통일: 카드 이동(translateY)·배경색 변화 없음 — 그림자 강화 + 블루 테두리 강조 */
    box-shadow:0 18px 45px -18px rgba(26,50,216,.35);
    border-color:#6A88F5;   /* 강조 상향: #c5d0ff(1.52:1) → #6A88F5(3.25:1) */
  }
  .sec2-section .sec2-pcard-body{
    display:flex; flex-direction:column; gap:11px;
    padding:38px 24px 13.3px; flex:1;
  }
  .sec2-section .sec2-pcard-logo{ display:flex; align-items:center; gap:5px; }
  .sec2-section .sec2-pcard-logo img{ height:26px; width:auto; display:block; }
  .sec2-section .sec2-pcard-name{ font-size:25px; font-weight:700; letter-spacing:-.02em; color:#2f3b52; }
  .sec2-section .sec2-pcard-desc{
    font-size:17px; font-weight:500; letter-spacing:-.06em;
    color:#566075; line-height:1.8; word-break:keep-all; margin-top:10px;   /* 기본 본문색 통일(섹션5 기준 #566075) / 행간 1.7→1.8 (+5.9%) */
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    transition:color .3s cubic-bezier(.2,.7,.2,1);
  }
  /* 통일: hover 시 설명문 색상만 진하게 (#566075 → #21222b) */
  .sec2-section .sec2-pcard:hover .sec2-pcard-desc{ color:#21222b; }
  .sec2-section .sec2-pcard-more{
    align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:10px;
    padding:0; border:0; background:none;
    font-size:15px; font-weight:500; color:#6b7794; text-decoration:none; letter-spacing:-.01em;
    transition:color .2s ease, gap .25s; cursor:pointer;
  }
  /* 화살표만 이동 (텍스트 span .sec2-more-txt 는 제외) */
  .sec2-section .sec2-pcard-more span:not(.sec2-more-txt){ transition:transform .25s; }
  .sec2-section .sec2-pcard:hover .sec2-pcard-more{ gap:9px; }
  .sec2-section .sec2-pcard:hover .sec2-pcard-more span:not(.sec2-more-txt){ transform:translateX(3px); }
  .sec2-section .sec2-pcard:hover .sec2-pcard-more,
  .sec2-section .sec2-pcard-more:hover{ color:#1a32d8; }
  /* hover 시 텍스트에만 밑줄 (화살표 제외) — 색상 전환으로 부드럽게 */
  .sec2-section .sec2-more-txt{
    text-decoration:underline; text-decoration-color:transparent;
    text-decoration-thickness:1px; text-underline-offset:3px;
    transition:text-decoration-color .2s ease;
  }
  .sec2-section .sec2-pcard:hover .sec2-more-txt{ text-decoration-color:#1a32d8; }
  .sec2-section .sec2-pcard-img{ width:100%; display:block; margin-top:18px; }
  /* ===== 통합 헤드라인 스펙 (섹션2·3·5 공통): 32px / 700 / -.025em / 1.45 / #14224d ===== */
  .sec2-section .sec2-prod-intro{
    text-align:center; font-size:32px; font-weight:700; letter-spacing:-.025em;
    color:#14224d; line-height:1.45; word-break:keep-all; margin:0 0 44px;
  }
  /* 32px 2줄 유지에 1146px 필요 → 헤드라인만 1160px로 확장.
     .sec2-prod-wrap(1120px)은 카드 그리드와 공용이라 건드리지 않음.
     데스크탑(≥1240px)에서만 적용 — 그 이하는 헤드라인이 16px/14px라 확장 불필요. */
  @media (min-width:1240px){
    .sec2-section .sec2-prod-intro{
      width:calc(100% + 40px); max-width:none;
      margin-left:-20px; margin-right:-20px;
    }
  }
  /* 이후 강조구: 기존 강조색 유지 */
  .sec2-section .sec2-prod-intro b{ font-weight:700; color:#2A55EE; }
  /* 첫 강조구: 단색 강조 (섹션2·3·5 공통 #2A55EE) */
  .sec2-section .sec2-prod-intro .sec2-hl{ color:#2A55EE; }
  /* 카드 하단 마크 영역: 원형 로고 + 연한 블루 틴트.
     상하 padding(21.89 / 26px)은 카드 높이 383.75px 유지용 상쇄값이고,
     좌우 24px 는 margin 이 아닌 padding 이라 틴트가 카드 전체 폭을 덮는다.
     하단 모서리는 .sec2-pcard 의 border-radius:10px + overflow:hidden 으로 자동 라운딩. */
  .sec2-section .sec2-pcard-mark{
    display:flex; align-items:center; justify-content:center;
    padding:21.89px 24px 26px; margin:auto 0 0;
    background:#f5f7ff;
  }
  /* 원형 마크: 순수 흰 원 + #21222B 텍스트("bzp 5.0" / 카테고리).
     테두리·바깥 그림자·배경 음영 없음. 텍스트는 이미지 안에서 1.09배 확대 상태.
     (<img> 는 대체 요소라 원·텍스트가 모두 이미지에 그려져 있음) */
  .sec2-section .sec2-pcard-mark img,
  .sec2-section .sec2-pcard-mark svg{ width:100.8px; height:100.8px; display:block; background:transparent; border:0; border-radius:0; outline:0; padding:0; }
  /* 반응형: 데스크탑 4열 유지 / 태블릿(≤1239) 2열 / 모바일(≤767) 1열, 여백·제목 축소 */
  /* ===== 태블릿·모바일(≤1239): 라이브 패턴 — 1열 + 카드 내부 좌우 배치(좌 텍스트 / 우 이미지), 가로로 긴 낮은 카드 ===== */
  @media (max-width:1239px){
    .sec2-section{ padding:72px 28px; }
    .sec2-section .sec2-prod-grid{ grid-template-columns:1fr; gap:16px; max-width:720px; margin:0 auto; }
    .sec2-section .sec2-pcard{ flex-direction:row; align-items:stretch; }
    .sec2-section .sec2-pcard-body{ flex:1 1 auto; min-width:0; padding:22px 24px; gap:9px; justify-content:center; }
    .sec2-section .sec2-pcard-name{ font-size:20px; }
    .sec2-section .sec2-pcard-desc{ font-size:14px; line-height:1.6; }
    /* 이미지 슬롯 우측 고정폭 — 1·2·4번=img 직접 자식 / 3번=데코 span 래퍼가 슬롯(통일) */
    .sec2-section .sec2-pcard > .sec2-pcard-img,
    .sec2-section .sec2-pcard > span{ flex:0 0 38%; width:38%; max-width:230px; margin-top:0!important; align-self:stretch; overflow:hidden; }
    .sec2-section .sec2-pcard-img{ object-fit:cover; }
    .sec2-section .sec2-pcard > span > .sec2-pcard-img{ width:100%; height:100%; max-width:none; }
    .sec2-section .sec2-prod-intro{ font-size:16px; margin-bottom:32px; }
    /* 태블릿: 가로형 카드라 데스크탑 고정높이(148.67px) 해제 */
    .sec2-section .sec2-pcard-mark{ flex:0 0 auto; width:auto; padding:16px 22px; margin-top:0; align-self:center; background:transparent; border-radius:0; }
    .sec2-section .sec2-pcard-mark img,
    .sec2-section .sec2-pcard-mark svg{ width:96px; height:96px; }
  }
  @media (max-width:767px){
    .sec2-section{ padding:56px 20px; }
    .sec2-section .sec2-prod-grid{ gap:14px; }
    .sec2-section .sec2-pcard-body{ padding:18px 18px; gap:8px; }
    .sec2-section .sec2-pcard-name{ font-size:18px; }
    .sec2-section .sec2-pcard-desc{ font-size:13px; line-height:1.6; }
    .sec2-section .sec2-pcard > .sec2-pcard-img,
    .sec2-section .sec2-pcard > span{ flex-basis:32%; width:32%; }
    .sec2-section .sec2-prod-intro{ font-size:14px; line-height:1.6; margin-bottom:24px; }
    .sec2-section .sec2-pcard-mark{ flex:0 0 auto; width:auto; padding:12px 14px; }
    .sec2-section .sec2-pcard-mark img,
    .sec2-section .sec2-pcard-mark svg{ width:72px; height:72px; min-width:0; }
  }

  /* ===== 데스크탑(≥1240px) 섹션 높이 685px 통일 (섹션2·3·5 공통) =====
     콘텐츠 520.55px + 상하 padding 164.45px = 685px. 좌우 padding 32px 불변.
     ≤1239px 태블릿/모바일 규칙은 그대로 유지됨. */
  @media (min-width:1240px){
    .sec2-section{ padding-top:82.23px; padding-bottom:82.22px; }
  }

/* ===== [원본] bizpr_main_view.jsp L925~L1140 : SECTION 3 ===== */

  .sec3-section *{ margin:0; padding:0; box-sizing:border-box; }
  .sec3-section{
    font-family:"Pretendard","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:#ffffff;
    padding:93.4px 32px 71.9px;
  }
  .sec3-section .sec3-sme-wrap{ max-width:1200px; margin:0 auto; }
  /* ===== 통합 헤드라인 스펙 (섹션2·3·5 공통): 32px / 700 / -.025em / 1.45 / #14224d ===== */
  .sec3-section .sec3-sme-title{
    text-align:center; font-size:32px; font-weight:700;
    letter-spacing:-.025em; color:#14224d; line-height:1.45;
    word-break:keep-all; margin:0 auto 34px; max-width:1120px;
  }
  /* 이후 강조구: 기존 강조색 유지 */
  .sec3-section .sec3-sme-title .sec3-em{ color:#2A55EE; }
  .sec3-section .sec3-sme-title .sec3-bold{ font-weight:700; }
  /* 첫 강조구: 단색 강조 (섹션2·3·5 공통 #2A55EE) */
  .sec3-section .sec3-sme-title .sec3-hl{ color:#2A55EE; }

  .sec3-section .sec3-plan-grid{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
    width:100%; max-width:1120px; margin:0 auto;
  }
  .sec3-section .sec3-plan{
    display:flex; flex-direction:column; text-align:left;
    /* 두께는 평상시/hover 동일(1px) — hover 시 색만 바뀌므로 레이아웃 흔들림 없음 — hover 시 색만 바뀌므로 레이아웃 흔들림 없음 */
    background:#ffffff; border:1px solid #dbe2f1; border-radius:16px;
    padding:26px 24px 30px;
    box-shadow:0 10px 26px -22px rgba(23,40,90,.34);
    /* 카드 hover 통일 스펙: .3s / cubic-bezier(.2,.7,.2,1) — transform 이동 없음 */
    transition:box-shadow .3s cubic-bezier(.2,.7,.2,1), border-color .3s cubic-bezier(.2,.7,.2,1);
  }
  /* 카드 전체 클릭 가능 → 커서만 손 모양으로 (디자인·hover 효과는 기존 그대로) */
  .sec3-section .sec3-plan{ cursor:pointer; }
  .sec3-section .sec3-plan:hover{
    /* 통일: 카드 이동(translateY)·배경색 변화 없음 — 그림자 강화 + 블루 테두리 강조 */
    box-shadow:0 18px 39px -22px rgba(26,50,216,.43);
    border-color:#6A88F5;   /* 강조 상향: #c5d0ff(1.52:1) → #6A88F5(3.25:1) */
  }
  .sec3-section .sec3-plan-name{
    font-size:20px; font-weight:700; letter-spacing:-.02em; color:#2A55EE;
  }
  .sec3-section .sec3-plan-scale{ margin-top:22px; }
  .sec3-section .sec3-plan-scale p{
    font-size:19px; font-weight:700; letter-spacing:-.03em; color:#21222b; line-height:1.65;
    word-break:keep-all;
    transition:color .3s cubic-bezier(.2,.7,.2,1);
  }
  .sec3-section .sec3-plan-list{ list-style:none; margin-top:11.5px; padding-top:11.5px; border-top:1px solid #eef1f7; }
  .sec3-section .sec3-plan-list li{
    position:relative; padding-left:15px; margin-top:0;
    font-size:16.15px; font-weight:500; letter-spacing:-.03em; color:#566075; line-height:1.6;   /* 기본 본문색 통일(섹션5 기준 #566075) */
    word-break:keep-all;
    transition:color .3s cubic-bezier(.2,.7,.2,1);
  }
  /* 통일: hover 시 설명문 색상만 진하게 (#566075 → #21222b) */
  .sec3-section .sec3-plan:hover .sec3-plan-scale p,
  .sec3-section .sec3-plan:hover .sec3-plan-list li{ color:#21222b; }
  .sec3-section .sec3-plan-list li:first-child{ margin-top:0; }
  .sec3-section .sec3-plan-list li + li{ margin-top:5px; }
  .sec3-section .sec3-plan-list li::before{
    content:""; position:absolute; left:2px; top:11px;
    width:4px; height:4px; border-radius:50%; background:#c1c7d4;
  }
  .sec3-section .sec3-plan-more{
    align-self:flex-start; margin-top:22px; display:inline-flex; align-items:center; gap:6px;
    font-size:15px; font-weight:500; letter-spacing:-.03em; color:#2A55EE;   /* 통일: 15px */
    text-decoration:none; transition:color .2s ease, gap .25s;
    cursor:pointer;   /* href 제거 상태에서도 기존 포인터 커서 유지 (실제 URL 연결 후에도 무해) */
  }
  .sec3-section .sec3-plan-arrow{ transition:transform .2s ease, color .2s ease; }
  .sec3-section .sec3-plan:hover .sec3-plan-more,
  .sec3-section .sec3-plan:hover .sec3-plan-arrow{ color:#1a32d8; }
  .sec3-section .sec3-plan:hover .sec3-plan-more{ gap:9px; }              /* 통일: 6px → 9px */
  .sec3-section .sec3-plan:hover .sec3-plan-arrow{ transform:translateX(3px); }
  /* hover 시 텍스트에만 밑줄 (화살표 제외) — 색상 전환으로 부드럽게 */
  .sec3-section .sec3-more-txt{
    text-decoration:underline; text-decoration-color:transparent;
    text-decoration-thickness:1px; text-underline-offset:3px;
    transition:text-decoration-color .2s ease;
  }
  .sec3-section .sec3-plan:hover .sec3-more-txt{ text-decoration-color:#1a32d8; }

  .sec3-section .sec3-notes{ list-style:none; max-width:1120px; margin:26px auto 0; }
  .sec3-section .sec3-notes li{
    position:relative; padding-left:14px; margin-top:7px;
    font-size:13px; font-weight:400; letter-spacing:-.02em; color:#8a93a6; line-height:1.7;
    word-break:keep-all;
  }
  .sec3-section .sec3-notes li:first-child{ margin-top:0; }
  .sec3-section .sec3-notes li::before{
    content:""; position:absolute; left:0; top:9px;
    width:3px; height:3px; border-radius:50%; background:#b3bacb;
  }
  .sec3-section .sec3-notes a{ color:#2A55EE; text-decoration:none; }
  .sec3-section .sec3-notes a:hover{ color:#1a32d8; text-decoration:underline; }

  /* 32px는 2줄 유지에 984px 폭이 필요 → 가용 폭이 그보다 좁아지는 1047px 이하에서는
     헤드라인만 한 단계 축소(28px, 필요폭 약 860px)해 2줄을 유지. 카드 그리드는 불변. */
  @media (max-width:1047px){
    .sec3-section .sec3-sme-title{ font-size:28px; }
  }
  @media (max-width:1023px){
    .sec3-section{ padding:72px 24px; }
    .sec3-section .sec3-sme-title{ font-size:24px; margin-bottom:28px; }
    .sec3-section .sec3-plan-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  }
  @media (max-width:600px){
    .sec3-section{ padding:56px 20px; }
    .sec3-section .sec3-sme-title{ font-size:20px; line-height:1.5; margin-bottom:22px; }
    .sec3-section .sec3-plan-grid{ grid-template-columns:1fr; gap:12px; }
    .sec3-section .sec3-plan{ padding:22px 20px; }
    .sec3-section .sec3-plan-name{ font-size:18px; }
    .sec3-section .sec3-plan-scale p{ font-size:15px; }
    .sec3-section .sec3-plan-list li{ font-size:14px; }
    .sec3-section .sec3-notes li{ font-size:12px; }
  }

  /* ===== 데스크탑(≥1240px) 섹션 높이 685px 통일 (섹션2·3·5 공통) =====
     콘텐츠 522.19px + 상하 padding 162.81px = 685px.
     기존 상:하 비율(93.4:71.9)을 유지한 채 축소. 좌우 padding 32px 불변.
     ≤1239px(태블릿 포함) 규칙은 그대로 유지됨. */
  @media (min-width:1240px){
    .sec3-section{ padding-top:91.99px; padding-bottom:70.82px; }
  }

  /* ===== 법령 전문 팝업 =====
     footer 약관은 window.open() 별도 창 방식이라 화면 내 모달이 없어 신규 구현.
     크기(880×790)는 footer 팝업창 규격에 맞추고, 색/폰트는 브랜드 토큰 사용.
     .sec3-section 밖에 위치하므로 자체 리셋을 둔다. */
  .sec3-modal, .sec3-modal *{ box-sizing:border-box; }
  .sec3-modal{
    position:fixed; inset:0; z-index:2000;
    display:none; align-items:center; justify-content:center;
    padding:24px;
    font-family:"Pretendard","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  }
  .sec3-modal.sec3-is-open{ display:flex; }
  .sec3-modal-dim{
    position:absolute; inset:0;
    background:rgba(20,34,77,.55);          /* 브랜드 잉크 #14224d 기반 딤 */
    animation:sec3-modal-fade .2s ease;
  }
  .sec3-modal-panel{
    position:relative; z-index:1;
    width:100%; max-width:880px;            /* footer 팝업창 가로 880px 과 동일 */
    max-height:min(790px, 90vh);            /* footer 팝업창 세로 790px 기준 */
    display:flex; flex-direction:column;
    background:#ffffff; border-radius:16px;
    box-shadow:0 24px 60px -20px rgba(20,34,77,.45);
    overflow:hidden;
    animation:sec3-modal-pop .22s cubic-bezier(.2,.7,.2,1);
  }
  @keyframes sec3-modal-fade{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes sec3-modal-pop{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion:reduce){
    .sec3-modal-dim, .sec3-modal-panel{ animation:none; }
  }
  .sec3-modal-head{
    flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:24px 28px 18px; border-bottom:1px solid #eef1f7;
  }
  .sec3-modal-title{
    margin:0; font-size:20px; font-weight:700; letter-spacing:-.025em;
    color:#14224d; line-height:1.4; word-break:keep-all;
  }
  .sec3-modal-close{
    flex:none; width:36px; height:36px; padding:0;
    display:flex; align-items:center; justify-content:center;
    border:0; border-radius:10px; background:transparent; cursor:pointer;
    color:#8a93a6; transition:color .2s ease, background-color .2s ease;
  }
  .sec3-modal-close svg{ width:20px; height:20px; display:block; }
  .sec3-modal-close:hover{ color:#1a32d8; background:#f0f3fa; }
  .sec3-modal-close:focus-visible{ outline:2px solid #2A55EE; outline-offset:2px; }
  .sec3-modal-body{
    flex:1 1 auto; min-height:0; overflow-y:auto;
    padding:22px 28px 28px;
    font-size:14px; color:#566075; line-height:1.75; letter-spacing:-.02em;
    word-break:keep-all;
  }
  .sec3-modal-body:focus-visible{ outline:2px solid #2A55EE; outline-offset:-2px; }
  /* 법령 본문 — 조항 번호 구조를 들여쓰기로 표현 */
  .sec3-law-act{
    margin:28px 0 0; font-size:16px; font-weight:700; letter-spacing:-.025em;
    color:#14224d; line-height:1.5;
  }
  .sec3-modal-body .sec3-law-act:first-child{ margin-top:0; }
  .sec3-law-art{
    margin:6px 0 12px; font-size:15px; font-weight:700; letter-spacing:-.02em;
    color:#21222b; line-height:1.6;
  }
  .sec3-law-cl{                              /* ①②③④ 항 — 행잉 인덴트 */
    margin:10px 0 0; padding-left:1.25em; text-indent:-1.25em;
  }
  .sec3-law-item{                            /* 1.2.3.4. 호 — 한 단계 더 들여쓰기 */
    margin:6px 0 0; padding-left:2.45em; text-indent:-1.2em;
  }
  .sec3-law-note{
    margin:12px 0 0; font-size:13px; color:#8a93a6; line-height:1.6;
  }
  @media (max-width:600px){
    .sec3-modal{ padding:16px; }
    .sec3-modal-panel{ max-height:92vh; border-radius:14px; }
    .sec3-modal-head{ padding:18px 18px 14px; }
    .sec3-modal-title{ font-size:17px; }
    .sec3-modal-body{ padding:16px 18px 22px; font-size:13px; }
    .sec3-law-act{ font-size:15px; }
    .sec3-law-art{ font-size:14px; }
  }
  /* 트리거 링크 (href 제거 상태에서도 포인터 커서 유지) */
  .sec3-section .sec3-notes .sec3-law-open{ cursor:pointer; }

/* ===== [원본] bizpr_main_view.jsp L1322~L1687 : SECTION 4 ===== */
#s4-ref, #s4-ref *, #s4-ref *::before, #s4-ref *::after{ box-sizing:border-box; }
  #s4-ref{
       
       
    position:relative; isolation:isolate;
    width:100%; height:777px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    
    background:url("/bzp/img/s4_01.png") center 26%/cover no-repeat;
    padding:38px 34px 40px; color:#fff;
  }
  /* 시네마틱 네이비 오버레이 + 상단/좌우 비네트 */
  #s4-ref::before{
    content:""; position:absolute; inset:0; z-index:-2;
    background:
      radial-gradient(140% 120% at 50% -10%,rgba(36,64,132,.10) 0%,rgba(20,40,86,.30) 68%,rgba(14,30,66,.44) 100%),
      linear-gradient(180deg,rgba(26,48,100,.20) 0%,rgba(18,36,80,.38) 100%);
  }
  /* 브랜드 컬러 광원 한 점 */
  #s4-ref::after{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:radial-gradient(60% 50% at 82% 8%,rgba(58,139,255,.22) 0%,rgba(58,139,255,0) 60%);
  }

  /* ===== 상단 바 (아이브로우 + 탭 한 줄) ===== */
  #s4-ref .s4-ref-topbar{
    position:absolute; top:20px; left:0; right:0; z-index:6;
    display:flex; align-items:center; justify-content:center; gap:14px;
    margin:0;
  }
  #s4-ref .s4-pp svg{ width:16px; height:16px; display:block; }

  /* ===== 세그먼트 탭 ===== */
  #s4-ref .s4-ref-tabs{
    display:inline-flex; gap:30px; padding:0;
    background:transparent; border:0;
  }
  #s4-ref .s4-ref-tabs button{
    appearance:none; border:0; cursor:pointer; background:transparent;
    font-family:inherit; font-size:15px; font-weight:600; letter-spacing:-.01em;
    color:rgba(233,241,255,.6); padding:6px 2px; position:relative;
    transition:color .2s;
  }
  #s4-ref .s4-ref-tabs button::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
    background:#fff; border-radius:2px;
    transform:scaleX(0); transform-origin:center;
    transition:transform .25s ease;
  }
  #s4-ref .s4-ref-tabs button:hover{ color:rgba(255,255,255,.9); }
  #s4-ref .s4-ref-tabs button.s4-active{
    color:#fff; font-weight:700;
  }
  #s4-ref .s4-ref-tabs button.s4-active::after{ transform:scaleX(1); }
  #s4-ref .s4-pp{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; padding:0; color:#fff;
    background:transparent; border:0;
    cursor:pointer; opacity:.9;
    transition:opacity .18s, transform .12s;
  }
  #s4-ref .s4-pp:hover{ opacity:1; }
  #s4-ref .s4-pp:active{ transform:scale(.9); }
  #s4-ref .s4-pp svg{ width:16px; height:16px; display:block; }
  #s4-ref .s4-pp .s4-ic-play{ display:none; }
  #s4-ref .s4-pp.s4-paused .s4-ic-pause{ display:none; }
  #s4-ref .s4-pp.s4-paused .s4-ic-play{ display:block; }

  /* ===== 캐러셀 ===== */
  #s4-ref .s4-ref-carousel{ width:100%; max-width:1120px; position:relative; height:670px; display:flex; flex-direction:column; }
  #s4-ref .s4-ref-viewport{ overflow:hidden; border-radius:14px; flex:1; min-height:0; }
  #s4-ref .s4-ref-track{ position:relative; height:100%; }
  #s4-ref .s4-ref-panel{
    position:absolute; inset:0; width:100%; height:100%;
    border-radius:14px; padding:72px 50px 40px;
    display:flex; flex-direction:column;
    opacity:0; visibility:hidden; pointer-events:none; z-index:1;
    transition:opacity .45s ease, visibility 0s linear .45s;
  }
  #s4-ref .s4-ref-panel.s4-is-active{
    opacity:1; visibility:visible; pointer-events:auto; z-index:2;
    transition:opacity .45s ease;
  }
  @media (prefers-reduced-motion:reduce){
    #s4-ref .s4-ref-panel{ transition:opacity .3s ease, visibility 0s linear .3s; }
    #s4-ref .s4-ref-panel.s4-is-active{ transition:opacity .3s ease; }
  }
  /* 슬라이드 3 : 로열 블루 */
  #s4-ref .s4-panel--navy{
    background:linear-gradient(150deg,rgba(96,86,214,.9) 0%,rgba(60,46,150,.92) 100%);
    border:0;
    box-shadow:0 26px 60px rgba(40,30,110,.42), inset 0 1px 0 rgba(255,255,255,.18);
  }
  #s4-ref .s4-panel--navy .s4-panel-title .s4-em{ color:#d6e6ff; }
  /* 슬라이드 1 : 딥 사파이어 잉크 */
  #s4-ref .s4-panel--blue{
    background:linear-gradient(150deg,rgba(79,116,242,.91) 0%,rgba(51,85,230,.93) 50%,rgba(35,64,212,.94) 100%);
    border:0;
    box-shadow:0 26px 60px rgba(28,58,140,.4), inset 0 1px 0 rgba(255,255,255,.18);
  }
  /* 슬라이드 2 : 딥 틸 */
  #s4-ref .s4-panel--green{
    background:linear-gradient(155deg,rgba(46,148,138,.88) 0%,rgba(26,108,102,.9) 100%);
    border:0;
    box-shadow:0 26px 60px rgba(16,72,66,.36), inset 0 1px 0 rgba(255,255,255,.16);
  }
  #s4-ref .s4-panel--green .s4-panel-title .s4-em{ color:#9fe4d6; }
  #s4-ref .s4-panel--green .s4-gov-case::before{ background:linear-gradient(90deg,#2bb0a0,#0e6157); }
  #s4-ref .s4-panel--green .s4-gov-case .s4-badge{ color:#0c6157; background:#e8faf6; border-color:#c2ece5; }
  #s4-ref .s4-panel--green .s4-gov-case .s4-stat b{ color:#0f8f81; }
  #s4-ref .s4-panel--green .s4-name-card.s4-hi{
    color:#0c6157; background:linear-gradient(180deg,#f4fdfb,#e6f7f3); border-color:#c6ece5;
  }
  #s4-ref .s4-panel--green .s4-name-card:hover{ border-color:#a3e0d5; }

  #s4-ref .s4-panel-title{
    text-align:center; font-size:36px; font-weight:700; letter-spacing:-.03em;
    line-height:1.34; margin:0 0 22px; color:#fff; text-wrap:balance;
    text-shadow:0 1px 2px rgba(6,16,40,.22);
    min-height:96px; display:flex; align-items:center; justify-content:center;
  }
  #s4-ref .s4-ref-panel:has(.s4-logo-grid) .s4-panel-title,
  #s4-ref .s4-ref-panel:has(.s4-gov-body) .s4-panel-title,
  #s4-ref .s4-ref-panel:has(.s4-sme-card) .s4-panel-title{ margin-bottom:28px; }
  #s4-ref .s4-panel-title .s4-em{ color:#bcd2ff; }
  #s4-ref .s4-panel--blue .s4-panel-title .s4-em{ color:#d6e6ff; }

  /* 등장 애니메이션 (활성 슬라이드) */
  @media (prefers-reduced-motion:no-preference){
    #s4-ref .s4-ref-panel .s4-anim{ opacity:0; transform:translateY(16px); }
    #s4-ref .s4-ref-panel.s4-is-active .s4-anim{
      opacity:1; transform:none;
      transition:opacity .85s ease, transform .95s cubic-bezier(.25,.6,.2,1);
      transition-delay:var(--d,0ms);
    }
    /* 로고 카드(.s4-logo-card)도 제네릭 .s4-anim 규칙을 그대로 사용해 슬라이드2·3과 통일 */
  }

  /* ---- 공통 네임 카드 ---- */
  #s4-ref .s4-name-card{
    background:#fff; border:1px solid var(--line); border-radius:7px;
    min-height:62px; display:flex; align-items:center; justify-content:center;
    text-align:center; padding:10px 12px; font-size:15px; font-weight:600;
    color:#2a3547; letter-spacing:-.02em; word-break:keep-all; line-height:1.35;
    box-shadow:0 4px 12px rgba(6,16,36,.16);
    transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s;
  }
  #s4-ref .s4-name-card:hover{ transform:translateY(-3px); box-shadow:0 16px 30px rgba(8,20,45,.28); border-color:#c5d0ff; }
  #s4-ref .s4-sme-names .s4-name-card:hover{ transform:none; box-shadow:0 16px 30px rgba(8,20,45,.28); border-color:#c5d0ff; }
  #s4-ref .s4-name-card.s4-hi{
    color:var(--main-blue); font-weight:800;
    background:linear-gradient(180deg,#fbfcff,var(--wash));
    border-color:#d9e2ff;
  }

  /* ===== 슬라이드 1 : 초대기업 ===== */
  #s4-ref .s4-ent-banner{
    position:relative; background:#fff; border-radius:8px; padding:19px 24px 19px 26px;
    text-align:center; font-size:17px; font-weight:700; letter-spacing:-.02em; color:#1f2a3d;
    box-shadow:0 12px 30px rgba(6,16,36,.24); margin-bottom:16px; word-break:keep-all; overflow:hidden;
  }
  #s4-ref .s4-ent-banner::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
    background:linear-gradient(180deg,var(--pt-lite),var(--main-blue)); }
  #s4-ref .s4-ent-banner .s4-pt{ color:var(--pt); }
  #s4-ref .s4-logo-grid{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:1fr; gap:5px; }
  #s4-ref .s4-ref-panel:has(.s4-logo-grid),
  #s4-ref .s4-ref-panel:has(.s4-gov-body){ padding:64px 50px 40px; }
  #s4-ref .s4-logo-card{
    background:linear-gradient(180deg,#ffffff,#fbfcfe); border:1px solid #eef1f8; border-radius:8px;
    display:flex; align-items:center; justify-content:center; padding:12px 16px;
    box-shadow:0 6px 16px rgba(8,20,45,.16), inset 0 1px 0 rgba(255,255,255,.9);
    transition:transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s, border-color .24s;
  }
  #s4-ref .s4-logo-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(8,20,45,.28); border-color:#c9d6ff; }
  #s4-ref .s4-logo-card img{ max-width:92%; max-height:64px; width:auto; height:auto; object-fit:contain; display:block; margin:auto; }
  #s4-ref .s4-logo-card img.s4-big{ max-width:100%; max-height:70px; }
  #s4-ref .s4-logo-card img.s4-sm{ max-width:78%; max-height:52px; }
  #s4-ref .s4-logo-card img.s4-xs{ max-width:66%; max-height:44px; }
  #s4-ref .s4-logo-card img.s4-md{ max-width:85%; max-height:58px; }
  #s4-ref .s4-logo-card img.s4-lg2{ max-width:94%; max-height:66px; }
  #s4-ref .s4-logo-card img.s4-shrink6{ transform:scale(.94); }
  #s4-ref .s4-logo-card img.s4-sc87{ transform:scale(.87); }
  #s4-ref .s4-logo-card img.s4-sc93{ transform:scale(.93); }
  /* 아래 7개 로고만 현재 대비 ~12% 확대 (카드 크기·패딩·위치 불변, transform 시각 확대) */
  #s4-ref .s4-logo-card img[alt="한화오션"]{ transform:scale(1.12); }
  #s4-ref .s4-logo-card img[alt="하림"]{ max-width:80%; max-height:49px; }
  #s4-ref .s4-logo-card img[alt="HD한국조선해양"]{ transform:scale(1.04); }
  #s4-ref .s4-logo-card img[alt="HD현대로보틱스"]{ transform:scale(1.05); }
  #s4-ref .s4-logo-card img[alt="한화로보틱스"]{ transform:scale(1.04); }
  #s4-ref .s4-logo-card img[alt="신세계 아이앤씨"]{ transform:scale(.97); }
  #s4-ref .s4-logo-card img[alt="HD현대삼호"]{ transform:scale(1.04); }
  #s4-ref .s4-logo-card img[alt="HD현대일렉트릭"]{ transform:scale(.97); }
  #s4-ref .s4-logo-card img[alt="HD현대마린솔루션"]{ transform:scale(1.05); }
  #s4-ref .s4-logo-card img[alt="HD현대마린솔루션테크"]{ transform:scale(1.12); }
  #s4-ref .s4-logo-card img[alt="HD현대중공업"]{ transform:scale(.92); }
  #s4-ref .s4-logo-card img[alt="HD현대"]{ transform:scale(.92); }
  #s4-ref .s4-logo-card img[alt="농심"]{ transform:scale(.83); }

  /* ===== 슬라이드 2 : 공공기관 ===== */
  #s4-ref .s4-gov-body{ flex:1; min-height:0; display:grid; grid-template-columns:352px 1fr; gap:5px; }
  #s4-ref .s4-gov-cases{ display:flex; flex-direction:column; gap:5px; }
  #s4-ref .s4-gov-case{
    position:relative; background:#fff; border-radius:9px; padding:24px 26px 22px;
    box-shadow:0 10px 26px rgba(6,16,36,.2); overflow:hidden;
    flex:1; display:flex; flex-direction:column; justify-content:center;
  }
  #s4-ref .s4-gov-case::before{ display:none; }
  #s4-ref .s4-gov-case .s4-badge{
    position:absolute; top:24px; right:26px; font-size:12px; font-weight:700;
    color:#8792a8; letter-spacing:.02em; text-transform:none;
  }
  #s4-ref .s4-panel--green .s4-gov-case .s4-badge{ color:#5a9d8c; background:transparent; border:0; }
  #s4-ref .s4-gov-case .s4-org{ font-size:22px; font-weight:800; color:#16233c; letter-spacing:-.025em; }
  #s4-ref .s4-gov-case .s4-stat{ margin:13px 0 0; font-size:18px; font-weight:600; color:#48526a; letter-spacing:-.02em; line-height:1.55; }
  #s4-ref .s4-gov-case .s4-stat b{ color:var(--pt); font-weight:800; }
  #s4-ref .s4-gov-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:5px; min-height:0; }
  #s4-ref .s4-gov-grid .s4-name-card{ padding:6px 12px; }
  #s4-ref .s4-gov-grid .s4-name-card img.s4-glogo{ width:auto; height:auto; object-fit:contain; display:block; margin:auto; }
  #s4-ref .s4-gov-grid .s4-name-card img[alt="굿네이버스"]{ transform:scale(1.12); }
  #s4-ref .s4-gov-grid .s4-name-card img[alt="대한석탄공사"]{ transform:scale(1.05); }
  #s4-ref .s4-gov-grid .s4-name-card img[alt="서울대학교"]{ transform:scale(1.1); }
  #s4-ref .s4-gov-grid .s4-name-card img[alt="중소벤처기업진흥공단"]{ transform:scale(1.05); }
  #s4-ref .s4-gov-grid .s4-name-card img[alt="한국지능정보사회진흥원"]{ transform:scale(1.05); }
  #s4-ref .s4-gov-grid .s4-name-card img[alt="한국소방시설협회"]{ transform:scale(1.05); }
  #s4-ref .s4-gov-grid .s4-name-card img[alt="한국보육진흥원"]{ transform:scale(1.1); }

  /* ===== 슬라이드 3 : 중소·중견기업 ===== */
  #s4-ref .s4-sme-card{ flex:1; min-height:0; display:flex; flex-direction:column; }
  #s4-ref .s4-sme-top{ flex:1; min-height:0; display:grid; grid-template-columns:272px 1fr; gap:22px; align-items:stretch; }
  #s4-ref .s4-sme-stat{ position:relative; text-align:center; display:flex; flex-direction:column; justify-content:center; padding:0; }
  #s4-ref .s4-sme-stat .s4-lbl{ font-size:24px; font-weight:800; color:#c9c6ff; letter-spacing:-.02em; }
  #s4-ref .s4-sme-stat .s4-num{
    font-size:60px; font-weight:900; line-height:1; margin:22px 0 20px; letter-spacing:-.04em;
    background:linear-gradient(120deg,#ffffff,#cfcbff); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  #s4-ref .s4-sme-stat .s4-cap{ font-size:22px; font-weight:800; color:#ffffff; letter-spacing:-.02em; }
  #s4-ref .s4-sme-stat .s4-rule{ width:60px; height:4px; border-radius:999px; margin:18px auto 0;
    background:linear-gradient(90deg,var(--cta-hover),var(--pt-lite)); }
  #s4-ref .s4-sme-names{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(0,1fr); gap:5px; height:100%; min-height:0; }
  #s4-ref .s4-sme-names .s4-name-card{ min-height:0; }
  #s4-ref .s4-sme-names .s4-name-card{ padding:6px 12px; }
  #s4-ref .s4-sme-names .s4-name-card img.s4-logo{ max-width:82%; max-height:56%; width:auto; height:auto; object-fit:contain; display:block; margin:auto; }
  #s4-ref .s4-sme-names .s4-name-card img.s4-logo.s4-lgw{ max-width:92%; max-height:46%; }
  #s4-ref .s4-sme-names .s4-name-card img[alt="오스템임플란트"],
  #s4-ref .s4-sme-names .s4-name-card img[alt="서울반도체"]{ transform:scale(.8); }
  #s4-ref .s4-sme-names .s4-name-card img[alt="금호건설"]{ transform:scale(.8); }
  #s4-ref .s4-sme-names .s4-name-card img[alt="아주약품"]{ transform:scale(.68); }
  #s4-ref .s4-sme-names .s4-name-card img[alt="아이센스"]{ max-height:46%; }
  #s4-ref .s4-sme-names .s4-name-card img[alt="슈프리마"]{ transform:scale(.58); }
  #s4-ref .s4-sme-quotes{ flex:0 0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:5px; order:-1; }
  #s4-ref .s4-sme-logo{
    background:#fff; border:1px solid var(--line); border-radius:8px;
    display:flex; align-items:center; justify-content:center; padding:10px 14px;
    box-shadow:0 4px 12px rgba(6,16,36,.16);
  }
  #s4-ref .s4-sme-logo img{ max-width:82%; max-height:60%; width:auto; height:auto; object-fit:contain; display:block; margin:auto; }
  #s4-ref .s4-sme-quote{
    position:relative; background:#fff; border:1px solid var(--line); border-radius:8px;
    padding:16px 18px 14px; text-align:center; box-shadow:0 6px 16px rgba(6,16,36,.1);
    display:flex; flex-direction:column; justify-content:center;
  }
  #s4-ref .s4-sme-quote::before{ content:"\201C"; position:absolute; top:6px; left:18px;
    font-size:38px; line-height:1; font-weight:900; color:#6b6fd6; font-family:Georgia,serif; }
  #s4-ref .s4-sme-quote .s4-q-org{ font-size:15px; font-weight:800; color:var(--main-blue); margin-bottom:8px; letter-spacing:-.02em; }
  #s4-ref .s4-sme-quote .s4-q-org img.s4-qlogo{ width:auto; max-width:120px; object-fit:contain; display:block; margin:0 auto 2px; }
  #s4-ref .s4-sme-quote .s4-q-txt{ font-size:15px; color:#33405a; line-height:1.62; word-break:keep-all; }
   #s4-ref .s4-sme-quote.s4-metric::before{ content:none; }
   #s4-ref .s4-sme-quote .s4-m-lbl{ font-size:20.9px; font-weight:600; color:#3c3d43; letter-spacing:-.01em; margin-bottom:6px; }
   #s4-ref .s4-sme-quote .s4-m-num{ font-size:32.55px; font-weight:800; color:#3467ff; letter-spacing:-.02em; line-height:1.1; }
   #s4-ref .s4-sme-quote .s4-m-num .s4-plus{ font-size:0.65em; font-weight:700; color:rgba(52,103,255,0.5); vertical-align:0.18em; margin-left:2px; letter-spacing:0; }
   #s4-ref .s4-sme-quote.s4-metric{ min-height:107.35px; background:#ffffff; border-radius:7px; box-shadow:0 4px 12px rgba(6,16,36,.16); }

  @media (max-width:1180px){ #s4-ref .s4-ref-panel{ width:100%; } }
  #s4-ref .s4-mbr{ display:none; }
  @media (max-width:760px){
    #s4-ref{ padding:40px 16px 48px; height:auto; }              /* 문제3: 섹션 고정높이(777px) 해제 */
    #s4-ref .s4-panel-title{ font-size:19px; }
    /* 탭 3개 항상 1행 유지: 줄바꿈 금지 + 폰트 자동 축소(clamp) + 세로 padding으로 터치영역(≈44px) 확보 */
    /* 탭바를 고정 헤더(64px) 바로 아래에 sticky 고정 → 헤더가 탭을 덮어 클릭이 가로채이던 문제 해결. 스크롤 내내 탭 노출/탭 가능 */
    #s4-ref .s4-ref-topbar{ position:sticky; top:64px; z-index:20; margin:0 -16px 10px; padding:8px 16px; background:#2b3c60; box-shadow:0 6px 16px rgba(8,17,40,.30); flex-wrap:nowrap; gap:clamp(6px,2vw,14px); }
    #s4-ref .s4-ref-tabs{ flex-wrap:nowrap; white-space:nowrap; gap:clamp(7px,2.4vw,18px); }
    #s4-ref .s4-ref-tabs button{ font-size:clamp(10px,3vw,14px); padding:16px 6px; white-space:nowrap; min-height:44px; box-sizing:border-box; }
    #s4-ref .s4-ref-tabs button::after{ bottom:8px; }

    /* 문제3: 캐러셀/뷰포트/트랙/패널 고정높이 해제 → 콘텐츠 양에 따라 자동 확장(하단 잘림 없음) */
    #s4-ref .s4-ref-carousel{ height:auto; }
    #s4-ref .s4-ref-viewport{ overflow:visible; flex:none; height:auto; }
    #s4-ref .s4-ref-track{ height:auto; }
    #s4-ref .s4-ref-panel{
      position:static; display:none; width:100%; height:auto;
      opacity:1; visibility:visible; pointer-events:auto; transition:none;
    }
    #s4-ref .s4-ref-panel.s4-is-active{ display:flex; }
    #s4-ref .s4-ref-panel:has(.s4-logo-grid),
    #s4-ref .s4-ref-panel:has(.s4-gov-body),
    #s4-ref .s4-ref-panel:has(.s4-sme-card){ padding:12px 6px 16px; }
    #s4-ref .s4-ref-panel .s4-anim{ opacity:1 !important; transform:none !important; }  /* in-flow 전환 시 콘텐츠 즉시 표시 */

    /* 레이아웃 스택(기존 유지) */
    #s4-ref .s4-sme-top,#s4-ref .s4-gov-body{ grid-template-columns:1fr; }
    #s4-ref .s4-gov-cases{ grid-template-columns:1fr 1fr; }

    /* 문제1: 로고/카드 그리드 → flex-wrap + center (마지막 줄 중앙 정렬) */
    #s4-ref .s4-logo-grid,
    #s4-ref .s4-gov-grid,
    #s4-ref .s4-sme-names,
    #s4-ref .s4-sme-quotes{
      display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start;
      gap:5px; flex:none; min-height:0;
    }
    #s4-ref .s4-logo-grid .s4-logo-card,
    #s4-ref .s4-gov-grid .s4-name-card{ width:calc((100% - 11px) / 3); }   /* 3열 */
    #s4-ref .s4-sme-names .s4-name-card{ width:calc((100% - 11px) / 3); }  /* 3열 (초대/공공과 통일) */
     #s4-ref .s4-sme-quotes .s4-sme-quote{ width:calc((100% - 6px) / 2); }  /* 2열 */

    /* 문제2: 초대기업 로고박스 높이 고정 + 로고 이미지 object-fit:contain 통일 */
    #s4-ref .s4-logo-card{ height:58px; padding:8px 10px; }
    #s4-ref .s4-logo-card img{ max-width:86% !important; max-height:38px !important; transform:none !important; }

    /* 중소·중견 전용: 로고박스/인용카드 높이 통일(모바일에서만 제각각 → 초대기업과 동일 방식으로 고정) */
    #s4-ref .s4-sme-names .s4-name-card{ height:58px; padding:8px 10px; }
    #s4-ref .s4-sme-names .s4-name-card img{ max-width:88% !important; max-height:38px !important; transform:none !important; object-fit:contain; margin:auto; }
    #s4-ref .s4-sme-quotes .s4-sme-quote{ min-height:190px; }

    /* 공공·교육 전용: 로고박스 높이 통일(모바일에서만 제각각 → 초대기업과 동일 방식으로 고정) */
    #s4-ref .s4-gov-grid .s4-name-card{ height:58px; min-height:0; padding:8px 10px; }
    #s4-ref .s4-gov-grid .s4-name-card img{ max-width:88% !important; max-height:38px !important; transform:none !important; object-fit:contain; margin:auto; }

    /* 탭 간 세로 격차 완화(모바일 전용): 상단 텍스트 영역만 축소 → 카드/영역 높이 감소. 로고그리드는 미변경 */
    /* 공공·교육: 상단 도입사례 카드 2개(인사혁신처/한국관광공사) 텍스트·패딩 축소 */
    #s4-ref .s4-gov-case{ padding:14px 16px; }
    #s4-ref .s4-gov-case .s4-org{ font-size:16px; }
    #s4-ref .s4-gov-case .s4-stat{ font-size:13px; margin:6px 0 0; line-height:1.45; }
    #s4-ref .s4-gov-case .s4-badge{ top:14px; right:16px; font-size:11px; }
    /* 중소·중견: 상단 통계영역(누적 고객사 30,000+) 텍스트·마진 축소 */
    #s4-ref .s4-sme-stat{ flex-direction:row; align-items:center; justify-content:center; gap:8px; flex-wrap:nowrap; order:1; margin-bottom:12px; }
     #s4-ref .s4-sme-top{ display:contents; }
     #s4-ref .s4-sme-quotes{ order:2; }
     #s4-ref .s4-sme-names{ order:3; }
     #s4-ref .s4-sme-stat .s4-cap-pre{ display:none; }
     #s4-ref .s4-sme-stat .s4-lbl{ font-size:14.5px; white-space:nowrap; }
    #s4-ref .s4-sme-stat .s4-num{ font-size:29px; margin:0; white-space:nowrap; }
    #s4-ref .s4-sme-stat .s4-cap{ font-size:14.5px; white-space:nowrap; }
    #s4-ref .s4-sme-stat .s4-rule{ display:none; }

    /* [1] 중소·중견: 헤딩 → 통계영역 세로 간격 축소 (28px → 12px) */
    #s4-ref .s4-ref-panel:has(.s4-sme-card) .s4-panel-title{ margin-bottom:12px; }
     #s4-ref .s4-mbr{ display:inline; }
     #s4-ref .s4-panel--navy .s4-panel-title{ word-break:keep-all; }
     #s4-ref .s4-sme-names .s4-name-card:has(img[alt="소만사"]){ display:none; }

    /* [2] 인용카드: 정사각형 2열 그리드 → 가로형 직사각형 1열 세로 스택 (로고 좌 / 후기 우) */
    #s4-ref .s4-sme-quotes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
     #s4-ref .s4-sme-quotes .s4-sme-quote{
       width:auto; min-height:0; height:62px;
       flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:2px; padding:6px 8px;
     }
     #s4-ref .s4-sme-quotes .s4-sme-quote .s4-m-lbl{ font-size:14px; margin-bottom:0; }
     #s4-ref .s4-sme-quotes .s4-sme-quote .s4-m-num{ font-size:24px; }
    #s4-ref .s4-sme-quotes .s4-sme-quote::before{ display:none; }   /* 세로형 인용부호 숨김 */
    #s4-ref .s4-sme-quotes .s4-q-org{ flex:0 0 86px; margin-bottom:0; display:flex; align-items:center; justify-content:center; }
    #s4-ref .s4-sme-quotes .s4-q-org img.s4-qlogo{ margin:0 auto; max-width:86px; }
    #s4-ref .s4-sme-quotes .s4-q-txt{ flex:1; font-size:14px; line-height:1.5; }
  }
/* ===== [원본] bizpr_main_view.jsp L1909~L2086 : SECTION 5 ===== */
  .s5-section, .s5-section *, .s5-section *::before, .s5-section *::after { box-sizing:border-box; }
  .s5-section * { margin:0; padding:0; }
  .s5-section {

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    position:relative;
    width:100%;
    height:680px;
    margin:0 auto;
    padding:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#f0f0f3;   /* 그라데이션 → 단색 (브랜드 토큰 --bg-light 값) */
    overflow:hidden;
  }
  .s5-cta-wrap { position:relative; max-width:1184px; width:100%; margin:0 auto; padding:0 32px; }
  .s5-cta-head { text-align:center; margin-bottom:60px; }
  .s5-cta-eyebrow {
    display:inline-block;
    font-size:13px; font-weight:700; letter-spacing:.16em;
    color:#3467ff; text-transform:uppercase; margin-bottom:14px;
  }
  /* ===== 통합 헤드라인 스펙 (섹션2·3·5 공통): 32px / 700 / -.025em / 1.45 / #14224d ===== */
  .s5-cta-title {
    font-size:32px; font-weight:700; letter-spacing:-.025em;
    color:#14224d; line-height:1.45;
  }
  /* 첫 강조구: 단색 강조 (섹션2·3·5 공통 #2A55EE) */
  .s5-cta-title .s5-hl { color:#2A55EE; }
  .s5-cta-sub {
    margin-top:14px; font-size:16px; font-weight:400; letter-spacing:-.02em;
    color:#4a5878; line-height:1.6;
  }
  .s5-cta-grid {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
  }
  .s5-ccard {
    position:relative;
    display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
    padding:52px 28px;
    border-radius:16px;
    background:#ffffff;
    /* 두께는 평상시/hover 동일(1px) — hover 시 색만 바뀌므로 레이아웃 흔들림 없음 — hover 시 색만 바뀌므로 레이아웃 흔들림 없음 */
    border:1px solid #e7ecf6;
    box-shadow:0 2px 4px rgba(20,34,77,.03), 0 12px 28px rgba(20,34,77,.05);
    text-decoration:none; color:inherit;
    /* 카드 hover 통일 스펙: .3s / cubic-bezier(.2,.7,.2,1) — transform 이동 없음 */
    transition:box-shadow .3s cubic-bezier(.2,.7,.2,1), border-color .3s cubic-bezier(.2,.7,.2,1);
  }
  .s5-ccard-text { flex:1; min-width:0; display:flex; flex-direction:column; }
  .s5-ccard:hover {
    /* 통일: 카드 이동(translateY)·배경색 변화 없음 — 그림자 강화만 */
    box-shadow:0 4px 6px rgba(20,34,77,.04), 0 22px 42px rgba(52,103,255,.16);
  }
  /* 블루 테두리 강조는 흰 배경 카드 2개만 (primary 파란 카드는 제외) */
  .s5-ccard:not(.s5-is-primary):hover { border-color:#6A88F5; }   /* #c5d0ff(1.52:1) → #6A88F5(3.25:1) */
  .s5-ccard-ico {
    flex:none;
    position:absolute; top:42px; right:28px;
    width:50px; height:50px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(140deg,#2cd3e6,#2f6dff);
    box-shadow:0 6px 16px rgba(52,103,255,.26);
  }
  .s5-ccard-ico svg { width:25px; height:25px; }
  .s5-ccard-ico svg path, .s5-ccard-ico svg rect, .s5-ccard-ico svg circle { stroke:#ffffff; }
  .s5-ccard-title {
    font-size:27px; font-weight:700; letter-spacing:-.035em; color:#14224d;
  }
  .s5-ccard-desc {
    margin-top:8px;
    font-size:14.5px; font-weight:400; letter-spacing:-.01em;
    color:#566075; line-height:1.5;
    transition:color .3s cubic-bezier(.2,.7,.2,1);
  }
  /* 통일: hover 시 설명문 색상만 진하게 (#566075 → #21222b) */
  .s5-ccard:hover .s5-ccard-desc{ color:#21222b; }
  .s5-cta-phone {
    margin-top:60px;
    display:flex; align-items:center; justify-content:center; gap:16px;
    flex-wrap:wrap;
  }
  .s5-cta-phone-ico {
    width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#3355E6;   /* 단색 — 섹션4 초대기업 패널(.s4-panel--blue) 중간 스톱 톤 */
    box-shadow:0 6px 16px rgba(52,103,255,.28);
  }
  .s5-cta-phone-ico svg { width:23px; height:23px; }
  .s5-cta-phone-ico svg path { stroke:#ffffff; }
  .s5-cta-phone-label {
    font-size:17px; font-weight:600; letter-spacing:-.02em; color:#46506a;
  }
  .s5-cta-phone-num {
    font-size:42px; font-weight:800; letter-spacing:-.02em;
    color:#3355E6;   /* 단색 — 섹션4 초대기업 패널(.s4-panel--blue) 중간 스톱 톤 */
    font-variant-numeric:tabular-nums;
    text-decoration:none; line-height:1;
  }
  .s5-ccard-arrow {
    margin-top:auto; padding-top:18px;
    display:inline-flex; align-items:center; gap:6px;      /* 통일: 기본 6px */
    font-size:15px; font-weight:600; color:#6b7794;                        /* 통일: 15px */
    transition:color .25s, gap .25s;
  }
  .s5-ccard-arrow svg { width:17px; height:17px; transition:transform .25s; }
  .s5-ccard:hover .s5-ccard-arrow { color:#1a32d8; gap:9px; }              /* 통일: 6px → 9px */
  .s5-ccard:hover .s5-ccard-arrow svg { transform:translateX(3px); }       /* 통일: 3px */
  /* hover 시 텍스트에만 밑줄 (화살표 svg 제외) — 색상 전환으로 부드럽게 */
  .s5-more-txt{
    text-decoration:underline; text-decoration-color:transparent;
    text-decoration-thickness:1px; text-underline-offset:3px;
    transition:text-decoration-color .25s ease;
  }
  .s5-ccard:hover .s5-more-txt{ text-decoration-color:#1a32d8; }
  .s5-ccard.s5-is-primary {
    background:#3355E6;   /* 단색 — 섹션4 초대기업 패널(.s4-panel--blue) 중간 스톱 톤 */
    border:none;
    box-shadow:0 12px 30px rgba(52,103,255,.34);
  }
  .s5-ccard.s5-is-primary:hover {
    /* y×1.8 blur×1.5 alpha×1.25 (파란빛 그림자 색상 유지) */
    box-shadow:0 22px 45px rgba(52,103,255,.43);
  }
  .s5-ccard.s5-is-primary .s5-ccard-ico {
    background:rgba(255,255,255,.18);
    box-shadow:none;
  }
  .s5-ccard.s5-is-primary .s5-ccard-title { color:#ffffff; text-shadow:0 1px 2px rgba(10,30,120,.22); }
  .s5-ccard.s5-is-primary .s5-ccard-desc { color:rgba(255,255,255,.92); text-shadow:0 1px 2px rgba(10,30,120,.18); }
  /* primary 카드는 파란 배경이므로 다크 컬러 대신 흰색 불투명도만 100%로 (.92 → 1) */
  .s5-ccard.s5-is-primary:hover .s5-ccard-desc { color:#ffffff; }
  .s5-ccard.s5-is-primary .s5-ccard-arrow { color:rgba(255,255,255,.95); }
  .s5-ccard.s5-is-primary:hover .s5-ccard-arrow { color:#ffffff; }
  /* primary 카드는 흰 텍스트이므로 밑줄도 흰색 (파란 배경 위 #1a32d8 밑줄은 보이지 않음) */
  .s5-ccard.s5-is-primary:hover .s5-more-txt { text-decoration-color:#ffffff; }
  @media (max-width:1350px) {
    .s5-section { height:auto; padding:72px 0; }
  }
  @media (max-width:920px) {
    .s5-cta-grid { grid-template-columns:1fr; }
  }
  @media (max-width:520px) {
    .s5-section { padding:48px 0 52px; }
    .s5-cta-title { font-size:24px; }
    .s5-cta-phone-num { font-size:34px; }
  }
  /* 카드 텍스트·여백·아이콘을 섹션2 카드 기준으로 축소 (헤딩 18 / 본문 13 / padding 18) */
  @media (max-width:767px) {
    .s5-ccard { padding:18px; }
    .s5-ccard-ico { top:18px; right:18px; width:36px; height:36px; border-radius:10px; }
    .s5-ccard-ico svg { width:18px; height:18px; }
    .s5-ccard-title { font-size:18px; }
    .s5-ccard-desc { font-size:13px; margin-top:6px; line-height:1.5; }
    .s5-ccard-arrow { padding-top:10px; font-size:13px; }
    /* 제목~첫 카드 간격 축소 */
    .s5-cta-head { margin-bottom:28px; }
    /* 3번째 카드~전화상담 간격 축소 + 전화상담·번호 한 줄 배치 (번호 축소) */
    .s5-cta-phone { margin-top:30px; gap:10px; }
    .s5-cta-phone-ico { width:36px; height:36px; }
    .s5-cta-phone-ico svg { width:18px; height:18px; }
    .s5-cta-phone-label { font-size:15px; }
    .s5-cta-phone-num { font-size:20px; font-weight:700; }
  }

  /* ===== 데스크탑(≥1240px) 섹션 높이 685px 통일 (섹션2·3·5 공통) =====
     섹션5는 원래 height 고정형(680px) + flex 세로중앙 정렬 → 685px 로만 변경.
     콘텐츠 417.1px 로 여유 충분(잘림 없음).
     ≤1350px 의 height:auto 규칙보다 뒤에 두어 1240~1350 구간도 685px 로 통일.
     ≤1239px 태블릿/모바일 규칙은 그대로 유지됨. */
  @media (min-width:1240px){
    .s5-section{ height:685px; padding-top:0; padding-bottom:0; }
  }