@charset "utf-8";
/* =========================
[기본 폰트 : Pretendard Full Weight]
========================= */
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
html, body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
                'Noto Sans KR', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    color: #111;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.section-wrap{
    position:relative;overflow:hidden;isolation:isolate;
    width:100%; max-width:1820px; margin:0 auto;
    padding:0;
}
/* ===== 헤더 변수 ===== */
:root{
--hdr-h0: 88px;           /* 초기 높이 */
--hdr-h1: 68px;           /* 스크롤 후 높이 */
--hdr-bg-scrolled: #ffffff; /* 스크롤 후 배경(밝은 톤) */
--hdr-border: rgba(0,0,0,.06);
--txt-dark: #111;         /* 스크롤 후 텍스트 */
--txt-light: #fff;        /* 초기 텍스트 */
}

/* ===== 초기: 투명 + 화이트 텍스트 ===== */
.site-header{
margin-top: 50px;
position: fixed; inset: 0 0 auto 0; z-index: 1040;
height: var(--hdr-h0);
background: transparent;
border-bottom: 1px solid transparent;
transition: height .3s ease, background-color .25s ease, box-shadow .25s ease, transform .25s ease, border-color .25s ease;
will-change: transform, background-color, box-shadow, height;
}
.site-header .container{ min-height: inherit; }

/* 로고 사이즈 */
.logo-img{ height: 36px; transition: height .2s ease, filter .2s ease, opacity .2s ease; }
@media (max-width: 991.98px){
:root{ --hdr-h0: 68px; --hdr-h1: 64px; }
.logo-img{ height: 30px; }
}

/* 메뉴/아이콘: 초기(투명) - 흰색 */
.site-header .nav-link{ color: var(--txt-light); opacity:.95; transition: color .2s ease, opacity .15s ease; }
.site-header .nav-link:hover{ opacity: 1; }

/* 모바일 토글/마이 아이콘 */
.off-menu-btn i{ color: var(--txt-light); transition: color .2s ease; }

/* 서브 바(두번째 줄)는 기본 숨김 */
.site-header .sub-header{
opacity: 0; pointer-events: none; transform: translateY(-6px);
transition: opacity .2s ease, transform .2s ease;
}

/* 로고: 초기 상태는 화이트 보이기 */
.logo-white{ display: block; }
.logo-dark { display: none; }

/* ===== 스크롤 후: 밝은 배경 + 진한 텍스트 ===== */
.site-header.is-scrolled{
margin: 0;
height: var(--hdr-h1);
background: #ffffffe3;
border-bottom-color: var(--hdr-border);
box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.site-header.is-scrolled .nav-link{ color: var(--txt-dark) !important; }
.site-header.is-scrolled .off-menu-btn i{ color: var(--txt-dark); }
.site-header.is-scrolled .logo-img{ height: 30px; }

/* 로고: 스크롤 후 다크 보이기 */
.site-header.is-scrolled .logo-white{ display: none; }
.site-header.is-scrolled .logo-dark  { display: block; }

/* 서브 바 표시 */
.site-header.is-scrolled .sub-header{
opacity: 1; pointer-events: auto; transform: translateY(0);
}

/* 접근성 */
@media (prefers-reduced-motion: reduce){
.site-header, .logo-img, .site-header .sub-header,
.site-header .nav-link, .off-menu-btn i { transition: none !important; }
}

/* ===== (옵션) 화이트 로고 파일이 없을 경우 임시 처리 ===== */
/* 초기에는 로고 반전, 스크롤 후 정상화
.site-header .logo-dark{ filter: brightness(0) invert(1); }
.site-header.is-scrolled .logo-dark{ filter: none; }
.logo-white{ display: none; }
*/

/* =========================
   [섹션 0 : 비디오 히어로]
   - iOS/안드로이드 100vh 보정 (dvh 우선)
   - object-position으로 프레이밍 보정
   - CTA 애니메이션 버튼 포함
   ========================= */

/* 접근성용 숨김 */
.sr-only{
    position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  
  /* 컨테이너 */
  #section-hero-video{
    height:100dvh;               /* 모바일 브라우저 UI 제외한 실제 뷰포트 */
    height:100vh;                /* 폴백 */
    display:flex;align-items:center;
  }
  
  /* 래퍼: 중앙 정렬 + 최대폭(원하면 주석처리) */
  .hero-video-wrap{
    position:relative;overflow:hidden;isolation:isolate;
    width:100%; max-width:1820px; margin:0 auto;
    min-height:clamp(56vh,72vh,86vh);
    padding:0;
  }
  
  /* 배경 비디오 */
  .hero-video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:60% center; /* 인물/프레임 보정 */
    filter:brightness(.95) saturate(1.05);
    transform:translateZ(0);
  }
  
  /* 오버레이(가독성) */
  .hero-video-overlay{
    position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(80% 70% at 70% 40%, rgba(0,0,0,.15), transparent 60%),
      linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.5));
      
  }
  
  /* 캡션(타이틀/버튼 묶음) */
  .hero-video-caption{
    position:relative; z-index:2; color:#fff;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-height:95vh;
    padding:clamp(24px,6vw,80px);
    text-align:center;
  }
  
  /* 부제/강조 텍스트 */
  .hero-video-caption span{ font-size:30px; }
  
  /* 상단 라벨 */
  .hero-video-caption .eyebrow{
    display:inline; font-weight:700; opacity:.9; margin-bottom:.25rem;
    font-size:45px; text-transform:uppercase;
  }
  
  /* 메인 타이틀 */
  .hero-video-caption .title{
    font-size:55px;
    font-weight:800; line-height:1.2;
    font-size:clamp(1.8rem,3.6vw,3rem);
    margin:0 0 1.1rem;
    text-shadow:0 6px 24px rgba(0,0,0,.35);
  }
  
  /* CTA 그룹 */
  .hero-video-caption .cta-group{
    display:flex; flex-wrap:wrap; gap:.5rem; margin-top:40px; align-items: center;
  }
  
  /* -------------------------
     CTA 애니메이션 버튼 (ref. btn_learn_more)
     네임스페이스: #section-hero-video .bb-film
     ------------------------- */
  #section-hero-video .bb-film.btn_learn_more_svg{
    width:14rem; overflow:hidden; border-radius:2.75rem; display:inline-block;
    margin-right:.6rem;
  }
  #section-hero-video .bb-film .btn_learn_more{
    position:relative; display:block; width:100%; height:100%; padding:0;
    border-radius:2.75rem;color:#fff;
    stroke-dasharray:760; stroke-dashoffset:760; stroke-width:1px;
    transition: stroke-width 1.5s, stroke-dashoffset 1.5s, stroke-dasharray 1.5s;
  }
  #section-hero-video .bb-film svg{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  }
  #section-hero-video .bb-film .shape{ stroke:var(--primary, #0064f0); }
  #section-hero-video .bb-film .btn_learn_more::before{
    content:""; position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%); width:13.7rem; height:100%;
    border-radius:2.6rem; border:1px solid rgba(255,255,255,.4);
  }
  #section-hero-video .bb-film .txt_cont{
    position:relative; width:100%; height:100%; text-align:center;
    line-height:3.4rem; border-radius:2rem; color:#fff;
    transition:all .5s; font-size:1.05rem; font-weight:700;
  }
  #section-hero-video .bb-film .txt_cont .txt{ position:relative; z-index:1; }
  #section-hero-video .bb-film .txt_cont::before{
    content:""; position:absolute; left:50%; top:55%;
    width:99%; height:105%; border-radius:2rem; background:var(--primary, #0064f0);
    transform-origin:center center;
    transform:translateX(-52%) translateY(-50%) translateX(-100%); /* 좌측 바깥에서 */
    transition:transform .7s cubic-bezier(0.19,1,0.22,1);
  }
  #section-hero-video .bb-film.active .shape{
    stroke-width:2px; stroke-dashoffset:0; stroke-dasharray:760;
  }
  #section-hero-video .bb-film .txt_cont.active::before{
    transform:translateX(-50%) translateY(-50%) translateX(0) scaleX(1);
  }
  .video-caption-span{
    margin-top: 20%;
  }
  
  @media (max-width:767.98px){
    #section-hero-video .bb-film .btn_learn_more::before{ display:none; }
    .site-header{
      margin-top: 10px;
    }
    .hero-video-caption span{
      font-size: 22px;
    }
    .video-caption-span{
      margin-top: 0%;
    }
  }
  
  /* 떠 있는 배지(선택) */
  .float-badge{
    position:absolute; right:clamp(12px,4vw,36px); top:clamp(12px,4vw,36px);
    width:44px;height:44px;border-radius:50%;
    background:rgba(255,255,255,.95); color:#111; font-weight:800;
    display:grid;place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.2);
  }
  
  /* 스크롤 큐 */
  .scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 70px;
    transform: translateX(-50%);
    z-index: 3;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: 0.9;
    animation: fadeIn 1.5s ease;
  }
  
  /* 실제 스크롤 아이콘 */
  .scroll-cue .scroll-icon {
    width: 40px;   /* 아이콘 크기 */
    height: auto;
    animation: mousewheel 3s ease-in-out infinite;
    display: block;
  }
  
  @keyframes mousewheel {
    0% {
      transform: translateY(-8px);
      opacity: 0;
    }
    20% {
      transform: translateY(-8px);
      opacity: 0;
    }
    40% {
      transform: translateY(0);
      opacity: 1;
    }
    60% {
      transform: translateY(0);
      opacity: 1;
    }
    80% {
      transform: translateY(8px);
      opacity: 0;
    }
    100% {
      transform: translateY(8px);
      opacity: 0;
    }
  }
  .title.eyebrow {
    font-size: 55px;
    color: #ffd84d;
    text-shadow: 0 0 6px rgba(255,216,77,0.6);
    background: linear-gradient(90deg, #ffd84d, #fff6c2, #ffd84d);
    -webkit-background-clip: text;
    color: transparent;
    animation: glowPulse 1.8s ease-in-out infinite alternate, sweepGlow 2s linear infinite;
  }
  
  @keyframes sweepGlow {
    0% {
      background-position: -200%;
    }
    100% {
      background-position: 200%;
    }
  }
  /* 부드럽게 빛났다 사라지는 애니메이션 */
  @keyframes glowPulse {
    0% {
      text-shadow:
        0 0 4px rgba(255, 216, 77, 0.4),
        0 0 10px rgba(255, 216, 77, 0.3),
        0 0 16px rgba(255, 216, 77, 0.2);
      opacity: 0.9;
    }
    100% {
      text-shadow:
        0 0 10px rgba(255, 216, 77, 0.8),
        0 0 20px rgba(255, 216, 77, 0.7),
        0 0 30px rgba(255, 216, 77, 0.6);
      opacity: 1;
    }
  }
  
  /* 등장 모션 */
  @keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 0.9; transform: translate(-50%, 0); }
  }
  /* 모바일/태블릿 보정 */
  @media (max-width:991.98px){
    .hero-video{ object-position:65% center; }   /* 인물 좌우 노출 보정 */
  }
  @media (max-width:575.98px){
    .hero-video-caption .eyebrow{font-size: 40px;}
    .hero-video{ object-position:70% center; }
    .hero-video-overlay,.hero-video{
      border-radius: 20px;
    }
    .hero-video-caption{    min-height: 100vh;padding:22px 0 90px; justify-content: flex-end; border-radius: 20px;}
    .hero-video-caption .title{ font-size:40px; }
    #section-hero-video .bb-film.btn_learn_more_svg{ width:13.6rem; }
    #section-hero-video .bb-film .txt_cont{ line-height:3.8rem; font-size:1rem; }
  }
  
  /* 모션 최소화 환경 대응 */
  @media (prefers-reduced-motion: reduce){
    .scroll-cue .chev{ animation:none }
    #section-hero-video .bb-film .txt_cont::before{ transition:none }
  }
/* =========================
   [섹션 0 : 비디오 히어로]
   - iOS/안드로이드 100vh 보정 (dvh 우선)
   - object-position으로 프레이밍 보정
   - CTA 애니메이션 버튼 포함
   ========================= */



/* =========================
   [섹션 1 : 업무사례
   - iOS/안드로이드 100vh 보정 (dvh 우선)
   ========================= */
/* ===== 폰트 ===== *//* ===== Donoun / 두넌체 ===== */
/* =========================
   [섹션 1 : 업무사례]
   - iOS/안드로이드 100vh 보정 (dvh 우선)
   ========================= */

/* ===== 컬러 토큰(브랜드 팔레트) ===== */
:root{
    --brand:       #B0104A;   /* 메인 포인트 */
    --brand-600:   #9A0E41;
    --brand-700:   #820B36;
    --brand-100:   #FDE5EE;   /* 연한 배경칩 */
    --brand-10:    #FFF4F8;
  
    --ink:         #111827;   /* 본문 진한 글자 */
    --ink-2:       #6B7280;   /* 본문 보조 */
    --line:        #E5E7EB;   /* 테두리 */
    --card-line:   #F0F2F4;   /* 카드 테두리 */
  
  
  }
  
  /* ===== 폰트 ===== */
  /* Donoun / 두넌체 (CDN) */
  @font-face {
    font-family: 'Donoun';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/Donoun-Medium.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
  }
  /* Black Han Sans (무죄 폰트) */
  @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
  
  /* ===== 공통 여백 ===== */
  .py-6{ padding-block: clamp(2rem, 6vw, 4.5rem); }
  
  /* ===== 슬로건 (단5%/무죄) ===== */
  .cases-slogan{
    text-align:center;
    font-size:55px;
    font-weight:bold;
    line-height:1.25;
    margin:0 0 0rem;
    color: var(--ink);
  }
  .dono-5{
    font-family:'Donoun','Noto Sans KR',system-ui,sans-serif;
    color: #2446A8;
    font-weight:800;
  }
  .bh-muje{
    position:relative;
    display:inline-block;
    font-family:'Black Han Sans','Noto Sans KR',sans-serif;
    margin:0 .2em;
    color: #D20520;
    position: relative;
    z-index: 11;
  }
  .bh-muje::after{
    content:"";
    position:absolute; left:50%; transform:translateX(-50%);
    bottom:-.15em; width:120%; height:.55em;
    pointer-events:none;
  }
  .bh-muje img{width:100%;}
  .muje_img{
    position: absolute;
    width: 100%;
    left: 0;
    top: 31%;
    z-index: 10;
  }
  #section-cases{
    padding: 120px 0;
  }
  /* ===== 카테고리 탭 ===== */
  .case-tabs-wrap{
    display:flex; justify-content:flex-start; align-items:center;
    gap:6px; margin-top:75px; color:#9AA1AB;
  }
  .case-tab{
    background:none; border:0; padding:.25rem .25rem;
    font-weight:700; color:#B9B9B9; opacity:.55; transition:.15s;
  }
  .case-tab.active{ opacity:1; color:#000000; }
  .case-tab:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
  .slash{ opacity:.35; user-select:none; }
  
  /* ===== 슬라이더 & 카드 ===== */
  .cases-slider{ --btn:48px;  overflow: hidden;   /* 가로 스크롤 막기 */ }
  .cases-slider .swiper {
    overflow: visible;  /* 슬라이드 그림자 같은 건 보이도록 */
  }
  #cases-swiper .swiper-slide{ height:auto; }
  
  .case-card{
    display:flex;
    flex-direction: column;
    gap: 20px;
    height:100%;
    background:#F8F8F8;
    border:1px solid var(--card-line);
    border-radius:22px;
    padding: 30px 30px 0 30px;
    box-shadow:0 2px 10px rgba(0,0,0,.03);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    color:inherit;
    text-decoration:none;
  }
  .case-card:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 22px rgba(0,0,0,.06);
    border-color: var(--line);
  }
  
  /* === 킥커(‘각하, 불송치’ 등 큰 1행 라벨) === */
  .case-kicker{
    display:block;
    font-size:1.25rem;
    font-weight:800;
    color:var(--brand);
    margin-bottom:.4rem;
    letter-spacing:-0.01em;
  }
  
  /* (선택) 기존 칩 스타일도 유지하고 싶을 때 사용 */
  .case-chip{
    display:inline-block; font-size:30px; font-weight:bold;
     color:#9F003A;
     word-break: auto-phrase;
     min-height: 80px;
  }
  
  /* 제목/설명 */
  .case-title{ font-size:20px; font-weight:800; margin:.6rem 0 .45rem; color:var(--ink); }
  .case-desc{ 
    white-space: normal;
    text-overflow: ellipsis;
    max-height: 90px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
    margin-bottom: 12px;
    font-size: 14px;
    color: #333;
  }
  
  /* ===== 네비게이션 버튼(원형, 좌/우) ===== */
  .nav-btn{
    position:absolute; top:-62px;
    width:var(--btn); height:var(--btn);
    border-radius:999px; border:1px solid var(--line);
    background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.05);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .nav-btn.prev{ right:var(--btn); }
  .nav-btn.next{ right:0; }
  .nav-btn::before{
    content:""; display:block; width:10px; height:10px; margin:auto;
    border-right:2px solid #111; border-bottom:2px solid #111;
    transform:rotate(-225deg); position:relative; top:0px;
  }
  .nav-btn.next::before{ transform:rotate(-45deg); }
  .nav-btn:hover{ border-color: var(--brand); box-shadow:0 6px 22px rgba(0,0,0,.06); transform:translateY(-1px); }
  
  /* ===== 더보기 버튼 ===== */
  .moremore{
    margin-top: 70px;
  }
  .btn-more{
    display:inline-flex; align-items:center; gap:20px;
    padding:.9rem 1.4rem;
    border:1px solid var(--line); border-radius:999px;
    color:var(--ink); background:#fff; font-weight:500;
    text-decoration:none;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  }
  .btn-more:hover{
    box-shadow:0 6px 22px rgba(0,0,0,.06);
    transform:translateY(-1px);
    border-color: var(--brand);
  }
  .btn-more .arrow{ font-weight:500; }
  
  /* ===== 반응형 약간의 간격 튜닝 ===== */
  @media (max-width: 575.98px){
    .case-chip{
      min-height: 60px;
    }
    .nav-btn{ top:-56px; }
    .cases-slogan{
      font-size: 22px;
      font-weight: bold;
    }
    .dono-5{
      font-size: 36px;
    }
    .bh-muje{
      font-size: 48px;
    }
    .case-tabs-wrap{
      flex-wrap: wrap;
      justify-content: center;
      padding: 0 60px;
      margin-top: 48px;
    }
    #cases-prev,#cases-next{display: none;}

    .case-tab{
      font-size: 20px;
      font-weight: bold;
    }
    .moremore{
      margin-top: 40px;
    }
  }
  

/* =========================
   [섹션 1 : 업무사례
   - iOS/안드로이드 100vh 보정 (dvh 우선)
   ========================= */


/* =========================
   Section 2 : 판사 재직 당시 판결 (최종)
   - 데스크탑: 2×2 (컬럼 2개 보임)
   - 태블릿: 1×2 (컬럼 1개 보임)
   - 모바일: 1×2 (컬럼 1개 보임, 폭 가변)
   ========================= */

/* 타이틀 서체 */
@font-face{
    font-family:'KccImKwonTaek';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202@1.0/KCCImkwontaek.woff') format('woff');
    font-weight:normal; font-display:swap;
  }
  
  /* 섹션 기본 */
  .section2{
    background:#fff;
    padding:72px 20px 0;
    color:#0e1a2b;
  }
  .section2 .inner{ max-width:1260px; margin:0 auto; }
  
  /* 타이틀 */
  .section2 .title{
    font-family:'KccImKwonTaek', Pretendard, system-ui, sans-serif;
    font-size:clamp(28px,3.2vw,46px);
    line-height:1.25;
    text-align:center;
    color:#111;
    margin:0 0 28px;
  }
  .strong_title{
    font-family:'KccImKwonTaek', Pretendard, system-ui, sans-serif;
    font-size:82px;
    line-height:1.25;
    text-align:center;
    color:#111;
    margin:0 0 28px;
  }
  /* 좌우 레이아웃 */
  .section2 .layout{
    display:flex; align-items:center; gap:32px;
  }
  .section2 .left{ flex:1 1 0; min-width:0; }
  .section2 .right{ flex:0 0 420px; margin:0 }
  .section2 .right img{
    width:100%; height:auto; display:block;
    /* filter:drop-shadow(0 12px 28px rgba(0,0,0,.25)); */
  }
  
  /* 슬라이드 컨테이너 */
  .section2 .slide-wrap{ position:relative; }
  .section2 .viewport{ overflow:hidden; }
  .section2 .track{
    display:flex;
    gap:30px;              /* 컬럼(=한 장) 간격 */
    will-change:transform;
    transform:translate3d(0,0,0);
    justify-content: center;
  }
  
  /* ✅ 한 ‘컬럼’ = 카드 2장(위/아래) */
  .section2 .col{
    --col-w: 380px;        /* 데스크탑 기본 폭 */
    display:flex;
    flex-direction:column;
    gap:52px;              /* 위/아래 카드 간격 */
    flex:0 0 var(--col-w);
    width:var(--col-w);
  }
  
  /* 카드 */
  .section2 .card{
    background:#fff;
    border-radius:18px;
    /* box-shadow:0 8px 24px rgba(0,0,0,.12); */
    padding:26px 22px 22px;
    position:relative;
    display:flex; flex-direction:column;
    width:100%;
    min-height:300px;      /* 두 장 합치면 대략 321 느낌 */
    justify-content: center;
  }
  
  .section2 .quote{
    width:36px; height:36px; border-radius:50%;
    background:#eaf1ff; position:absolute; left:18px; top:18px;
  }
  .section2 .quote::after{
    content:"“"; position:absolute; inset:0;
    display:grid; place-items:center;
    font-weight:700; font-size:22px; color:#3a63d1;
  }
  
  .section2 .badge{
    position:absolute; right:0; top:0;
    background:#9F003A; color:#fff; font-weight:700;
    font-size:20px; padding:32px 0px;
    border-radius:0 18px 0 18px; min-width:100px; max-width: 100px; text-align:center;
  }
  
  .section2 .badge small{ display:block; opacity:.85; }
  
  .section2 .card-title{
    margin:50px 0 30px;
    font-size:24px; font-weight:bold; color:#000000;
    word-break: keep-all;
  }

  .section2 .excerpt{
    font-size:20px; color:#5a6a7f; line-height:1.6;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    word-break: keep-all;
    overflow:hidden;
  }
  .quote-img{
    width: 10%;
  }
  /* 네비 버튼 */
  .section2 .nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border:0; border-radius:50%;
    background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.18);
    display:grid; place-items:center; cursor:pointer; z-index:2;
  }
  .section2 .nav.prev{ left:-45px; }
  .section2 .nav.next{ right:-30px; }
  .section2 .nav .chev{
    width:10px; height:10px;
    border-right:2px solid #1e3ea6; border-bottom:2px solid #1e3ea6;
    transform:rotate(-45deg);
  }
  .section2 .nav.prev .chev{ transform:rotate(135deg); }
  .mo{display: none;}
  .pc{display: block;}
  /* ================= 반응형 ================= */
  /* 태블릿(폭 축소): 컬럼 폭만 줄임, 여전히 1컬럼 보이게 */
  @media (min-width:768px) and (max-width:1179.98px){
    .section2 .right{ flex-basis:340px; }
    .section2 .col{ --col-w: 360px; }
    .section2 .card{ min-height:160px; }
  }
  
  /* 모바일: 인물은 아래로, 컬럼 폭은 가변(가장자리 여백 34px씩) */
  @media (max-width:767.98px){
    .section2 .layout{ flex-direction:column; }
    .section2 .right{ order:3; width:100%; }
    .section2 .col{ --col-w: calc(100% - 68px);    justify-content: flex-start; }
    .section2 .card{ min-height:220px; }
    .mo{display: block;}
    .pc{display: none;}
  }
  @media (max-width:767.98px){
    #section-cases{
      padding: 50px 10px;
    }
    /* 섹션 여백/타이포 */
    .section2{ padding:48px 15px 0; }
    .section2 .title{
      font-size: 36px;
      line-height: 1.18;
      letter-spacing: -.01em;
      text-align: center;
      margin: 0 0 53px;
      
    }
    /* 제목 안의 강조 단어(“판사”) */
    .section2 .title .strong_title{
      font-family:'KccImKwonTaek', Pretendard, system-ui, sans-serif;
      font-size:55px;  /* 문장 흐름 속에서 살짝 키움 */
      font-weight: bold;
      display:inline;
    }
  
    /* 레이아웃: 카드 먼저, 인물은 맨 아래 중앙 */
    .section2 .layout{ flex-direction:column; gap:22px; }
    .section2 .left{ width:100%;        margin: 10px 0; }
    .section2 .right{ order:3; width:100%; margin:8px 0 0; }
    .section2 .right img{ width:88%; margin:0 auto; filter:drop-shadow(0 10px 24px rgba(0,0,0,.16)); }
  
    /* 슬라이드(뷰포트/트랙/컬럼) */
    .section2 .viewport{
      overflow:auto hidden;            /* 가로 스크롤만 */
      -webkit-overflow-scrolling:touch;
      scroll-snap-type:x mandatory;    /* 네이티브 스냅(보조) */
    }
    .section2 .track{
      gap:22px;                        /* ✅ JS의 GAP(22)와 일치 */
      justify-content:flex-start;
    }
    .section2 .col{
      --col-w: calc(100% - 64px);      /* 좌우 여백 확보 */
      width:var(--col-w);
      flex:0 0 var(--col-w);
      gap:18px;
      scroll-snap-align:start;
      padding: 0px 0 10px;
    }
  
    /* 카드 */
    .section2 .card{
      border-radius:16px;
      padding:22px 18px 18px;
      min-height:204px;                    /* 고정 높이 제거 */
    }
    .section2 .card-title{
      margin:44px 0 10px;
      font-size:18px; font-weight:800; color:#111; word-break:keep-all;
    }
    .section2 .excerpt{
      font-size:15px; line-height:1.58; color:#5a6a7f; -webkit-line-clamp:3;
    }
  
    /* 따옴표/배지 크기 축소 */
    .section2 .quote{ width:28px; height:28px; left:14px; top:14px; background:#eaf1ff; }
    .section2 .quote::after{ font-size:18px; color:#3a63d1; }
    .section2 .badge{
      top:0; right:0; min-width:86px; max-width:86px;
      padding:22px 0; font-size:16px; line-height:1.15; border-radius:0 16px 0 16px;
    }
  
    /* 네비 버튼은 모바일에서 숨김 (스와이프만) */
    .section2 .nav{ display:none; }
  
    /* 만약 아이콘 이미지를 쓰면 카드 안에서 과하게 커지지 않게 */
    .quote-img{ width:28px; height:auto; position:absolute; left:14px; top:14px; }
    #gotop{display:none;}
  }
  
/* =========================
   [섹션 2 : 업무사례
   - iOS/안드로이드 100vh 보정 (dvh 우선)
   ========================= */



   /* ====== Section3 전용 ====== */
.s3-wrap{
    position:relative;
    padding:80px 20px;
    color:#fff;
    /* 배경 이미지 */
    background: url('http://bblawcrime.co.kr/theme/bblawcrime/img/section3-center-bg.png') center/cover no-repeat;
    /* 필요 시, 방사형 보정 레이어 */
    /* background-image:
        radial-gradient(1200px 600px at 55% 45%, rgba(255,255,255,.06), transparent 60%),
        url('<?= G5_THEME_URL ?>/img/section3-center-bg.jpg'); */
  }
  .s3-inner{ max-width:1500px; margin:0 auto; }
  .s3-title{
    text-align:center; font-weight:800; letter-spacing:-.02em;
    font-size:clamp(24px,3.2vw,40px); margin-bottom:36px;
  }
  
  /* 슬라이더 */
  .s3-slider{ display:flex; align-items:center; gap:16px; }
  .s3-btn{
    width:48px; height:48px; border-radius:50%; flex:0 0 48px;
    border:0; cursor:pointer; background:#fff; position:relative;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
  }
  .s3-btn::before{
    content:""; position:absolute; inset:0; margin:auto; width:12px; height:12px;
    border-top:2px solid #0b2b6a; border-right:2px solid #0b2b6a; transform:rotate(45deg);
  }
  .s3-prev::before{ transform:rotate(225deg); left:2px; }
  .s3-next::before{ right:2px; }
  
  .s3-track{
    display:flex; gap:24px; overflow-x:auto; scroll-behavior:smooth;
    padding:6px 4px; -webkit-overflow-scrolling:touch;
  }
  .s3-track::-webkit-scrollbar{ height:8px; }
  .s3-track::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); border-radius:4px; }
  .s3-track{ cursor: grab; user-select:none; -webkit-overflow-scrolling:touch; }
  .s3-track.is-dragging{ cursor: grabbing; scroll-behavior:auto; } /* 드래그 중엔 즉시 반응 */
  .s3-card, .s3-card *{ -webkit-user-drag:none; user-select:none; }
  
  /* 카드 */
  .s3-card{
    position: relative;
    display: block;
    flex: 0 0 250px;
    background:#fff url('http://bblawcrime.co.kr/theme/bblawcrime/img/Mask_group.png')no-repeat left;
    color: #0b1a2b;
    border-radius: 18px;
    padding: 22px 22px 60px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s, box-shadow 0.25s;
    overflow: hidden;
  }
  .s3-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
  }
  
  .s3-label{ display:block; font-size:20px; font-weight:800; color:#9F003A; }
  .s3-sub{ display:block; font-size: 20px;
    color: #000;
    font-weight: bold;
    }
  
  .s3-card-mark{
    position:absolute; right:16px; bottom:16px; width:72px; opacity:.18; pointer-events:none;
  }
  .s3-link-ic{
    position:absolute; right:20px; bottom:20px; width:24px; height:24px; opacity:.9;
  }
  
  @media (max-width:768px){
    .s3-wrap{ padding:56px 16px; }
    .s3-track{ gap:16px; }
    .s3-card{ flex-basis:170px; padding:18px 18px 56px; }
    .s3-btn{
      display: none;
    }
    .s3-sub{
      font-size: 18px;
    }

  }
/* ====== Section 4 : 변호사 소개 ====== */
.s4-wrap{ padding:120px 20px; background:#fff; color:#0e1a2b; }
.s4-inner{ max-width:1260px; margin:0 auto; }
.s4-title{ text-align:center; font-weight:700; letter-spacing:-.02em; font-size:55px; margin-bottom:80px; }
.s4-title_sub{ text-align:center; font-weight:700; letter-spacing:-.02em; font-size:40px; }

/* === 대표 2인 === */
.s4-feature{
  display:flex; flex-wrap:wrap; gap:60px;
  justify-content:center; align-items:stretch; margin-bottom:70px;
}
.s4-card--feature{
  position:relative;
  flex:1 1 380px;          /* 2장 나란히 */
  width:100%; max-width:480px;
  aspect-ratio:380/570;    /* ← 컨테이너가 높이 확보(핵심) */
  background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}
.s4-card--feature .s4-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; object-position:center; display:block;
}
.s4-card--feature .s4-infos{
  position:absolute; left:0; right:0; bottom:0;
  background:#0d2a68; color:#fff; border-radius:100px 100px 0 0;
  text-align:center; padding:16px 16px 18px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
}
.s4-card--feature .s4-infos::before{
  content:""; position:absolute; left:50%; top:-64px; transform:translateX(-50%);
  width:140%; aspect-ratio:2.25/1; background:#0d2a68;
  border-top-left-radius:1000px; border-top-right-radius:1000px; z-index:0;
}
.s4-card--feature .s4-infos>*{ position:relative; z-index:1; }
.s4-feat-head{ display:flex; align-items:center; margin-bottom:6px; }
.s4-feat-ico{ width:22px; height:22px; object-fit:contain; opacity:.95; }
.s4-cap{ font-size:18px; opacity:.95; }
.s4-desc{ font-size:20px; line-height:1.45; font-weight:700; letter-spacing:-.01em; color:#FFE066; }
.s4-name{ margin-top:8px; font-size:30px; font-weight:700; }
.s4_sname{ font-size:16px; margin-right:5px; }

/* === 하단 리스트(슬라이더) === */
.s4-slider{ display:flex; align-items:center; gap:16px; }
.s4-btn{
  width:44px; height:44px; flex:0 0 44px; border-radius:50%; border:0; cursor:pointer;
  background:#0f2040; position:relative; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.s4-btn::before{ content:""; position:absolute; inset:0; margin:auto; width:12px; height:12px;
  border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); }
.s4-prev::before{ transform:rotate(225deg); left:2px; }
.s4-next::before{ right:2px; }

.s4-track{
  display:flex; gap:30px; overflow:hidden; padding:6px 2px;
  align-items:flex-start; user-select:none; cursor:grab;
}
.s4-track.is-dragging{ cursor:grabbing; }

.s4-card{
  flex:0 0 225px; width:225px; height:270px; position:relative; border-radius:16px;
  overflow:hidden; background:#fff; box-shadow:0 8px 22px rgba(0,0,0,.12);
  transition:transform .22s, box-shadow .22s;
}
.s4-card:hover{ transform:translateY(-6px); box-shadow:0 10px 28px rgba(0,0,0,.18); }
.s4-thumb{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; }

.s4-reveal{
  position:absolute; left:0; right:0; bottom:0; background:#0d2a68; color:#fff;
  padding:16px 16px 18px; transform:translateY(100%); transition:transform .35s ease;
  overflow:hidden; border-radius:60px 60px 0 0; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.s4-reveal::before{
  content:""; position:absolute; left:50%; top:-52px; transform:translateX(-50%);
  width:140%; aspect-ratio:2.2/1; background:#0d2a68;
  border-top-left-radius:1000px; border-top-right-radius:1000px; z-index:0;
}
.s4-reveal>*{ position:relative; z-index:1; }
.s4-rev-desc{ color:#FFE066; font-size:20px; font-weight:700; letter-spacing:-.01em; }
.s4-rev-row{ margin-top:6px; display:flex; gap:6px; align-items:baseline; }
.s4-rev-pos{ opacity:.95; font-size:16px; }
.s4-rev-name{ font-size:30px; font-weight:700; }

.s4-card.is-open .s4-reveal,
.s4-card:hover .s4-reveal{ transform:translateY(0); }
.s4-card, .s4-card *{ -webkit-user-drag:none; }

/* === 반응형 === */
@media (max-width:1024px){
  .s4-feature{ flex-direction:column; gap:14px; }
  .s4-card--feature{ max-width:none; border-radius:14px; }
}
@media (max-width:767.98px){
  .s4-wrap{ padding:48px 16px; }
  .s4-title{ font-size:34px; line-height:1.22; margin-bottom:22px; }
  .s4-title_sub{ font-size:18px; }

  .s4-card--feature{ aspect-ratio:3/4; } /* 모바일 비율만 살짝 변경 (선택) */
  .s4-card--feature .s4-infos{ padding:14px 12px 16px; border-radius:54px 54px 0 0; }
  .s4-name{ font-size:18px; }
  .s4-desc{ font-size:13px; }
  .s4_sname{ font-size:13px; }

  .s4-slider{ gap:12px; }
  .s4-btn{ display:none; }

  .s4-track{ gap:20px; padding:6px 2px; }
  .s4-card{
    flex:0 0 108px; width:108px; height:129px; border-radius:12px;
    box-shadow:0 6px 18px rgba(0,0,0,.10); transition:none;
  }
  .s4-reveal{ transform:translateY(0); padding:6px 0px 0px; border-radius:20px 20px 0 0; }
  .s4-reveal::before{ top:-44px; }
  .s4-rev-desc{ font-size:12px;word-break: auto-phrase;}
  .s4-rev-pos{ font-size:11px; }
  .s4-rev-name{ font-size:13px; }

  .s4-feature{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
    margin-bottom:18px;
  }
  .s4-card--feature{
    flex:none;              /* grid일 때 flex 값 무시 */
    max-width:none;
    width:100%;
    aspect-ratio: 170/280;      /* 모바일 비율(선택) */
    border-radius:14px;
  }
  .s4-card--feature .s4-infos{
    padding:14px 0px 16px; border-radius:30px 30px 0 0;
  }
  .s4-name{ font-size:18px; }
  .s4_sname{ font-size:13px; }
}



/* ====== Section5 (화이트 · Flex · pin.png 적용) ====== */
:root{
  --s5-navy:#17357c;
  --s5-text:#0e1a2b;
  --s5-muted:#70798a;
  --s5-br:#e7ebf3;
  --s5-badge-w:270px;
  --s5-radius:18px;
  --s5-shadow:0 10px 24px rgba(16,31,63,.10);
}

.s5-wrap{ background:#f7f8fb; color:var(--s5-text); padding:120px 20px; }
.s5-inner{ max-width:1260px; margin:0 auto; }
.s5-title{
  font-weight: bold;
  font-size: 55px;
  margin-bottom: 90px;
}
.s5-title strong{ 
  font-weight: bold;
  font-size: 55px;
  margin-bottom: 90px; }

.s5-grid{ display:flex; align-items:stretch; gap:28px; flex-wrap:nowrap; }
.s5-left{
  display:flex; flex-direction:column; gap:18px;justify-content: center;
  flex:0 0 55%; max-width:690px; min-width:300px;
}
.s5-right{ position:relative; flex:1 1 0; min-width:0; }

/* 리스트 카드 */
.s5-item{
  display:flex; align-items:center; gap:15px;
  width:100%; text-align:left; cursor:pointer;
  background:#fff; border:1px solid var(--s5-br);
  border-radius:var(--s5-radius);
  padding:50px 30px;
  box-shadow:var(--s5-shadow);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.s5-item:hover{ border-color:#dce3f1; }

/* 배지형 캡슐 */
.s5-item .badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px;
  border-radius:999px; background:#eff3ff; color:var(--s5-navy);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;justify-content: center;
}
.s5-item .badge-label{ font-weight:bold; font-size:20px; letter-spacing:-.02em; }

/* pin.png 아이콘 */
.pin-img{
  width:18px; height:18px; flex:0 0 18px;
  display:inline-block; object-fit:contain;
  vertical-align:middle;
}

/* 설명 */
.s5-item .desc{
  flex:1 1 auto; min-width:0;
  font-size:16px; color:#000;
  text-align: center;
}

/* 액티브 */
.s5-item.active{
  background:var(--s5-navy);
  border-color:transparent;
  color:#fff;
}
.s5-item.active .badge{ background:#fff; color:var(--s5-navy); }
.s5-item.active .desc{ color:rgba(255,255,255,.92); }

/* 지도 */
.s5-map {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;

}

.s5-map img{ width:100%; height:auto; display:block; border-radius:12px; }

/* 포커스 접근성 */
.s5-item:focus{ outline:3px solid #b9c8ff; outline-offset:2px; }


.s5-map img {
  outline: none !important;
}
.s5-map img:focus,
.s5-map img:active {
  outline: none !important;
  box-shadow: none !important;
}

@keyframes s5-pulse{
  0%{ opacity:0; transform:scale(.98); }
  30%{ opacity:1; }
  100%{ opacity:0; transform:scale(1.02); }
}

@media (max-width:980px){
  .s5-grid{ flex-direction:column; gap:18px; }
  :root{ --s5-badge-w:230px; }
  .s5-title, .s5-title strong{
    font-size: 28px;
    text-align: center;
    margin-bottom: 48px;
  }
  .s5-left{
    order:2;
  }
  .s5-item{
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px 5px;
  }
  .s5-wrap{
    padding:70px 10px;
  }
  .s5-item.active{
    text-align: center;
  }
}




/* =========================================================
   [SECTION 06] FAQ : 좌측 타이틀 + 우측 탭·아코디언
   ========================================================= */

/* ============ 기본 변수 ============ */
:root {
  --s6-navy: #162033;
  --s6-text: #0e1a2b;
  --s6-muted: #6b7e95;
  --s6-br: #e4e8f0;
  --s6-br2: #eef1f6;
  --s6-radius: 14px;
  --s6-shadow: 0 10px 24px rgba(16, 31, 63, 0.08);
}

/* ============ 공통 ============ */
.s6-wrap {
  position: relative;
  isolation: isolate;
  padding: 120px 20px;
  background: #fff;
  color: var(--s6-text);
  overflow: hidden;
  min-height: 700px;
}

.s6-inner {
  max-width: 1260px;
  margin: 0 auto;
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

/* ============ 좌측 타이틀 ============ */
.s6-left {
  flex: 0 0 42%;
  min-width: 320px;
}

.s6-hero {
  font-weight: bold;
  font-size: 55px;
  margin: 0;
}

.s6-hero strong {
  font-weight: bold;
  font-size: 55px;
  margin: 0;
}

/* ============ 우측 패널 ============ */
.s6-right {
  flex: 1 1 0;
  min-width: 0;
}

.s6-caption {
  margin: 0 0 20px;
  font-weight: bold;
  color: #000000;
  font-size: 24px;
}

/* ============ 탭 ============ */
.s6-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.s6-tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 999px;
  background: #eef1f6;
  color: #2c3e55;
  font-weight: 700;
  transition: 0.18s;
}

.s6-tab[aria-selected="true"],
.s6-tab:focus-visible {
  background:#9F003A;
  color: #fff;
  outline: none;
 
}


/* ============ 배경 일러스트 ============ */
.s6-bg{
  width:min(900px,70vw); 
  aspect-ratio:900 / 480;
  background:url("http://bblawcrime.co.kr/theme/bblawcrime/img/justice-bg.png") no-repeat left bottom / contain;
  pointer-events:none;
  position: absolute;
  bottom: 0;
}

/* =========================
   Section6 : FAQ 아코디언
   ========================= */

/* 아코디언 전체 */
.s6-accordion {
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

/* 각 항목 카드 */
.s6-item {
  background: #fff;
  border: 1px solid #e6ecf5;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.s6-item + .s6-item {
  margin-top: 12px;
  border-top: none;
}

/* 질문 영역 (닫힘 상태) */
.s6-q {
  display: flex;
  border: 1px solid #eaeaea;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 20px;
  font-weight: 800;
  line-height: 1.5;
  text-align: left;
  background: #fff;
  color: #0e1a2b;
  transition: background 0.25s ease, color 0.25s ease;
}

/* 화살표 기본 */
.s6-q .chev {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 0.2s;
  background: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center/contain;
}

/* 열린 상태 */
.s6-item[open] {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  border-color: #eaeaea;
}

/* 열린 상태의 헤더 (네이비 바) */
.s6-item[open] .s6-q {
  border:0;
  background: #183a78;
  color: #fff;
  border-radius: 12px 12px 0 0;
}

/* 열린 화살표 흰색 */
.s6-item[open] .chev {
  transform: rotate(180deg);
  background: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center/contain;
}

/* 답변 영역 */
.s6-a {
  display: none;
  padding: 16px 20px 20px 20px;
  color: #000;
  background: #fff;
  font-size: 16px;
  word-break: auto-phrase;
}
.s6-item[open] .s6-a {
  display: block;
  border-radius: 0 0 12px 12px;
}

/* ============ 반응형 ============ */
@media (max-width: 960px) {
  .s5-item .desc{
    font-size: 14px;
  }
  .s6-wrap {
    padding: 60px 16px;
  }
  .s6-inner {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  .s6-q {
    padding: 16px;
  }
  .s6-a {
    padding: 12px 16px 16px 16px;
  }
  .s6-hero, .s6-hero strong{
    font-size: 40px;
    text-align: center;
  }
  .s6-caption{
    text-align: center;
  }
  .s6-tabs{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 80%;
    justify-content: center;
    margin: 20px auto;
  }
}


/* ====== CTA 아이콘 버튼 공통 ====== */
.s7-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.s7-ctas .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 30px; border-radius:12px; font-weight:800;
  border:0; text-decoration:none; transition:.2s ease;
  box-shadow:0 6px 14px rgba(0,0,0,.08);width: 48%;
  font-size: 26px;
}
.s7-ctas .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.12); }
.bule_text{
  font-size: 55px;
  font-weight: bold;
  color: #2446A8;
}
.btn-icon .ico-img{
  display:inline-block; width:22px; height:22px; margin-right:10px;
  object-fit:contain; vertical-align:middle;
}

/* 버튼별 배경색 */
.s7-ctas .call{ background:#0e1a2b; color:#fff; }
.s7-ctas .kakao{ background:#fee500; color:#191600; }
.s7-ctas .naver{ background:#03c75a; color:#fff; }

/* (섹션 나머지 스타일이 이미 있다면 아래는 유지/병합) */
.s7-wrap{ padding: clamp(32px, 5vw, 60px) 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .0) 0%, rgba(255, 255, 255, .12) 40%, rgba(255, 255, 255, .9) 78%, #fff 100%), url(/theme/bblawcrime/img/section7-building.png) left / contain no-repeat;
  color: #0e1a2b;
  background-repeat: no-repeat; }
.s7-inner{ max-width:1260px; margin:0 auto; display:grid; gap:28px; grid-template-columns:1.1fr 0.9fr; }
@media (max-width:1024px){ .s7-inner{ grid-template-columns:1fr; } }
.s7-left{
  position:relative; min-height:520px; border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.s7-copy{ position:absolute; left:clamp(18px,3vw,32px); top:clamp(20px,3.2vw,34px); text-shadow:0 1px 0 rgba(255,255,255,.6); }
.s7-kicker{ font-size:55px; font-weight:bold;}
.s7-kicker b{ color:#b60b3b;  font-size: 55px;
  font-weight: bold; }
.s7-title{ margin:.2em 0 0; font-size:55px; font-weight:bold;}
.s7-meta{
  padding:clamp(16px,2.4vw,24px);
  border-top: 2px solid #888;
  border-bottom: 2px solid #888;
}

/* 상단 정보 영역: 전화 + 운영시간 가로 배치 */
.s7-info{
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; 
  padding-bottom:12px; margin-bottom:16px;
}

/* 전화 부분 */
.s7-phones{ display:flex; flex-direction:column; gap:6px; width:50%;border-right: 2px solid #888;}
.s7-phone{ display:flex; align-items:center; gap:8px; font-size:24px; font-weight:700; color:#111; justify-content: center;}
.s7-phone a{ color:inherit; text-decoration:none; }
.s7-phone a:hover{ text-decoration:underline; }

/* 운영시간 부분 */
.s7-hours{ width:50%;    text-align: center;}
.s7-hours .row{ display:flex; justify-content:space-between; gap:10px; margin:4px 0; font-size:24px; font-weight:700; color:#333;}
.s7-hours .th{ font-weight:700; color:#0e1a2b; min-width:48px; }

/* CTA 버튼 영역 */
.s7-ctas{ display:flex;justify-content: space-around;}
/* .s7-ctas .btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 20px; border-radius:10px; font-weight:800;
  border:0; text-decoration:none; transition:.2s ease;
  box-shadow:0 6px 14px rgba(0,0,0,.08);width: 40%;
} */
.s7-ctas .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.12); }
.btn-icon .ico-img{ display:inline-block; width:22px; height:22px; margin-right:10px; object-fit:contain; }

/* 버튼 색상 */
.s7-ctas .kakao{ background:#fee500; color:#191600; }
.s7-ctas .naver{ background:#03c75a; color:#fff; }
.s7-map-btn-wrap {
  text-align: center;
  margin-top: 18px;
}

.s7-nmap-btn {
  display: inline-block;
  padding: 10px 24px;
  border: 1px solid #222;
  border-radius: 24px;
  font-size: 15px;
  background: #fff;
  color: #222;
  transition: .25s;
}

.s7-nmap-btn:hover {
  background: #222;
  color: #fff;
}
/* =========================
   SECTION 7 : 모바일(≤767.98px) - flex 버전
   ========================= */
   @media (max-width: 767.98px){

    /* 부모 레이아웃을 flex로 세로 스택화 */
    .s7-inner{
      display:flex;
      flex-direction:column;
      gap:18px;
      align-items:stretch;
    }
  
    /* 좌측(제목+연락+CTA) 구조 */
    .s7-left{
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      align-items:stretch;
      gap:16px;
      min-height:auto;
      padding:0;
    }
  
    /* 제목 영역 - 겹침 해제 및 가운데 정렬 */
    .s7-copy{
      position:static;   /* absolute 제거 */
      text-align:center;
      margin-bottom:6px;
    }
  
    .bule_text{
      font-size:40px;
      color:#2446A8;
    }
    .s7-kicker{
      font-size:40px;
      font-weight:bold;
      margin:0;
    }
    .s7-kicker b{ color:#b60b3b; font-size:40px; }
    .s7-title{
      font-size:40px;
      font-weight:bold;
      margin:4px 0 0;
    }
  
    /* 연락/운영/CTA 공통 박스 */
    .s7-meta{
      display:flex;
      flex-direction:column;
      gap:14px;
      padding:16px 14px;
      background:#fff;
     
     
     
    }
  
    /* 전화 + 운영시간 */
    .s7-info{
      display:flex;
      flex-direction:column;
      gap:10px;
      align-items: center;
      align-content: center;
    }
  
    .s7-phones,
    .s7-hours{
      width:100%;
      border:0;
      text-align:center;
    }
  
    .s7-phone{
      display:flex;
      align-items:center;
      gap:8px;
      font-size:24px;
      font-weight:700;
    }
  
    .s7-hours .row{
      display:flex;
      justify-content:flex-start;
      gap:8px;
      font-size:24px;
      font-weight:700;
    }
  
    /* 버튼 2개를 flex로 나란히 */
    .s7-ctas{
      display:flex;
      flex-wrap: wrap;
      justify-content:space-between;
      flex-direction: column;
      gap:10px;
    }
  
    .s7-ctas .btn{
      width: 100%;
      flex:1;
      padding:14px 0;
      font-size:18px;
      font-weight:800;
      border-radius:10px;
      box-shadow:0 8px 18px rgba(0,0,0,.08);
    }
  
    .s7-ctas .kakao{ background:#fee500; color:#191600; }
    .s7-ctas .naver{ background:#03c75a; color:#fff; }
  
    /* 지도 + 주소 영역 */
    .s7-right{
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-top:10px;
    }
  
    .s7-addr{
      font-size:16px;
      line-height:1.45;
      text-align:left;
      font-weight: bold;
    }
  
    .s7-map{
      border-radius:12px;
      overflow:hidden;
      border:1px solid rgba(0,0,0,.08);
    }
  }
  /* 음주운전 처벌/행정처분 기준 접기·펼치기 */
.law-fold{
  margin-top:16px;
  border:1px solid #e5e5e5;
  border-radius:10px;
  background:#fafafa;
  overflow:hidden;
}
.law-fold summary{
  cursor:pointer;
  padding:14px 16px;
  font-weight:700;
  color:#222;
  list-style:none;
  position:relative;
}
.law-fold summary::-webkit-details-marker{ display:none; }
.law-fold summary::after{
  content:"＋";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  font-weight:800;
}
.law-fold[open] summary::after{ content:"－"; }
.law-fold .law-content{
  padding:14px 16px;
  border-top:1px solid #e5e5e5;
  font-size:14px;
  line-height:1.7;
  color:#333;
  word-break:keep-all;
}
.law-table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
  background:#fff;
}
.law-table th,
.law-table td{
  border:1px solid #e5e5e5;
  padding:10px 10px;
  vertical-align:top;
  text-align:left;
}
.law-table th{
  background:#f3f3f3;
  font-weight:700;
}