/* 베스트페이 리빌딩 샘플 공통 스타일 — 색 · 크기 값은 01 사이트(bestpay-vape-pg) 실측 토큰(디자인 시스템 조사 2026-10-17 A-0) */
@font-face{font-family:Pretendard;font-weight:400;font-display:swap;src:url(fonts/Pretendard-Regular.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:600;font-display:swap;src:url(fonts/Pretendard-SemiBold.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:700 900;font-display:swap;src:url(fonts/Pretendard-Bold.woff2) format("woff2")}
:root{--accent:#0759B5;--tint:#EAF3FF;--band:#F3F7FB;--ink:#172B3C;--muted:#50616D;--line:#DBE2E7;--navy:#102B43;--cap:#0759B5}
.site-b{--cap:#102B43}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 16px/1.8 Pretendard,system-ui,"Malgun Gothic",sans-serif;word-break:keep-all;overflow-wrap:break-word}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
h1,h2,h3{line-height:1.3;margin:0;text-wrap:balance}
p,li{text-wrap:pretty}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px}
.mo-only{display:none}.mo-br{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:56px;padding:0 26px;border-radius:7px;border:0;background:var(--accent);color:#fff;font:750 15px/1.2 Pretendard,system-ui,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn.light,.btn.white{background:#fff;color:var(--accent)}
.btn.kakao{background:#FEE500;color:#27221E}
.btn.outline{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85)}
.btn:disabled{opacity:.7;cursor:wait}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.eyebrow{margin:0 0 14px;font-size:12px;font-weight:750;letter-spacing:.14em;color:var(--accent)}
.fine{font-size:13.5px;color:var(--muted);margin:18px 0 0}.fine.center{text-align:center}

/* 헤더 */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:22px;min-height:89px}
.brand img{width:130px;height:68px;object-fit:contain}
#main-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-group{position:relative}
.nav-group summary,.nav-top{list-style:none;cursor:pointer;padding:10px 14px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;border-radius:8px}
.nav-group summary::-webkit-details-marker{display:none}
.nav-group summary:after{content:"▾";margin-left:6px;font-size:11px;color:var(--muted)}
.nav-group[open] summary,.nav-group summary:hover,.nav-top:hover{background:var(--band)}
.nav-panel{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(7,27,46,.12);padding:8px;display:grid}
.nav-panel a{padding:10px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:15px}
.nav-panel a:hover{background:var(--tint);color:var(--accent)}
.header-phone{font-weight:800;font-size:15px;text-decoration:none;color:#fff;background:var(--accent);padding:12px 16px;border-radius:7px;white-space:nowrap}
.menu-toggle{display:none;margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 13px;font:600 15px Pretendard,sans-serif;color:var(--ink)}

/* 히어로 — 사진 + 어두운 덮개 · 글자는 흰색(체크 3줄 포함, 대비 4.5:1 이상) */
.hero{position:relative;overflow:hidden;background:#11293C;color:#fff;padding:92px 0 40px}
.hero-bg,.hero-bg picture,.hero-bg img{position:absolute;inset:0;width:100%;height:100%}
.hero-bg img{object-fit:cover;object-position:50% 22%}   /* 위쪽을 덜 잘라 인물 머리를 살린다(10-17) */
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#071F31EB,#071F3199 70%,#071F3166)}
.hero-b:after{background:linear-gradient(270deg,#071F31EB,#071F3199 70%,#071F3170)}
.hero>.wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:56px;align-items:center;min-height:600px}
.hero-sub .hero-grid{min-height:520px}
.hero-b .hero-grid{grid-template-columns:470px minmax(0,1fr)}
.hero-b .hero-text{order:2}
.hero-b .card-form{order:1}
.hero .eyebrow{color:#fff;font-size:12px}
.h1{font-size:60px;font-weight:700;line-height:1.22;color:#fff;letter-spacing:-.01em}
.h1 .ln{display:block;white-space:nowrap}
.lead{font-size:20px;margin:22px 0 0;color:#fff;max-width:640px}
.hero-checks{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:10px}
.hero-checks li{position:relative;padding-left:34px;font-size:17px;font-weight:600;color:#fff;line-height:1.5}
.hero-checks li:before{content:"✓";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:#8FC1FF;color:#071F31;font-size:14px;font-weight:900;display:grid;place-items:center;line-height:1}
.hero-b .hero-checks{display:flex;flex-wrap:wrap;gap:10px}
.hero-b .hero-checks li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:8px 16px 8px 40px}
.hero-b .hero-checks li:before{left:10px;top:9px;width:22px;height:22px}
.card-form{background:#fff;color:var(--ink);border-radius:18px;box-shadow:0 18px 65px rgba(7,27,46,.125);padding:34px;display:grid;gap:12px}
.form-title{font-size:26px;font-weight:700;margin-bottom:4px}
.hero-b .form-title{border-left:5px solid var(--accent);padding-left:12px}
.consult-form label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.consult-form input:not([type=checkbox]){height:48px;border:1px solid #C9D3DC;border-radius:5px;padding:0 14px;font:400 16px Pretendard,sans-serif;color:var(--ink);background:#fff}
.consult-form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.consult-form .consent{display:flex;align-items:flex-start;gap:8px;font-weight:400;font-size:13.5px;color:var(--muted);line-height:1.55}
.consent input{margin-top:3px;width:17px;height:17px;flex:none}
.consult-form .btn{width:100%}
.form-status{margin:0;font-size:14px;color:var(--accent);min-height:0}
.form-status:empty{display:none}
.privacy-note{margin:0;font-size:12.5px;color:var(--muted)}
/* 히어로 바로 아래 가로 빠른 폼 띠 */
.quick-strip{margin-top:34px;display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:center;background:rgba(255,255,255,.97);border-radius:14px;padding:16px 18px;box-shadow:0 10px 34px rgba(7,27,46,.25)}
.qs-label{margin:0;font-weight:800;color:var(--accent);font-size:16px;padding:0 8px}
.quick-strip label span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.quick-strip input{width:100%;height:46px;border:1px solid #C9D3DC;border-radius:5px;padding:0 14px;font:400 15px Pretendard,sans-serif;color:var(--ink)}
.quick-strip .btn{min-height:46px}
.hero-b .quick-strip{background:var(--navy);box-shadow:none;border:1px solid #365066}
.hero-b .qs-label{color:#fff}

/* 섹션 공통 · 배경 번갈아 */
.sec{padding:96px 0}
.sec.alt{background:var(--band)}
.section-head{max-width:760px;margin-bottom:44px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:38px;font-weight:700;color:var(--ink)}
.section-head p{margin:16px 0 0;font-size:17px;color:var(--muted)}
.section-head .eyebrow{margin-bottom:12px}

/* 케러셀 3×3 (카카오일수 창원 B판 CSS 재사용) */
.d-deck-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;list-style:none;padding:0;margin:0}
.d-deck-grid a{display:block;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 6px 18px rgba(20,27,46,.08);text-decoration:none}
.d-deck-grid img{width:100%;aspect-ratio:1/1;object-fit:cover}
/* 케러셀 카드 아래 안내 줄 — 카드 하단바(파랑 · 남색)와 겹쳐 무거워 보이지 않게 흰 바탕 · 글씨만 브랜드 색(10-17 사장님 「색감이 아쉽다」) */
.d-cap{display:block;padding:16px 20px;font-weight:800;font-size:16px;background:#fff;color:var(--cap);border-top:1px solid var(--line)}
.d-deck-grid a:hover .d-cap{background:var(--tint)}

/* 핵심요약 */
.bp-glance{padding:72px 0;background:#fff}
.gl-wrap{border:1px solid var(--line);border-radius:20px;padding:34px 36px;background:#fff}
.gl-title{margin:0 0 18px;font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--accent)}
.gl-list{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:0;padding:0;list-style:none;counter-reset:g}
.gl-list strong{display:block;font-size:19px;margin-bottom:6px}
.gl-list p{margin:0 0 8px;font-size:15.5px;color:var(--muted)}
.gl-list a{font-weight:700;font-size:14.5px;text-decoration:none}

/* 본문 부품 */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat-grid.n4{grid-template-columns:repeat(4,1fr)}
.feat-grid.n2{grid-template-columns:repeat(2,1fr)}
.feat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px}
.feat h3{font-size:20px;margin-bottom:10px}
.feat p{margin:0;font-size:15.5px;color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev .split-img{order:-1}
.split .section-head{margin-bottom:20px}
.split-text>p{font-size:16.5px;color:var(--ink);margin:0 0 14px}
.split-img{margin:0}.split-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px}
.ticks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.ticks li{padding-left:30px;position:relative;font-weight:600}
.ticks li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:900}
.step-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.step-list li{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 20px;position:relative}
.step-list .num{display:inline-block;font-size:13px;font-weight:800;color:var(--accent);background:var(--tint);border-radius:999px;padding:3px 11px;margin-bottom:12px}
.step-list h3{font-size:17px;margin-bottom:8px}
.step-list p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.7}
.case-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case-grid li{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;border-top:4px solid var(--accent)}
.case-grid h3{font-size:19px;margin-bottom:10px}
.case-grid p{margin:0;font-size:15px;color:var(--muted)}
.tbl-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--line);background:#fff}
.cmp{width:100%;border-collapse:collapse;min-width:640px}
.cmp th,.cmp td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:15.5px;vertical-align:top}
.cmp thead th{background:var(--navy);color:#fff;font-weight:700}
.cmp tbody th{font-weight:700;color:var(--ink);width:24%}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.chk-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.chk-grid li{display:grid;gap:4px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px 20px 54px;position:relative}
.chk-grid li:before{content:"✓";position:absolute;left:20px;top:23px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:900;line-height:1}
.chk-grid b{font-size:17px}.chk-grid span{color:var(--muted);font-size:15px}

/* 중간 CTA ② */
.cta-mid{background:var(--navy);color:#fff;padding:64px 0}
.cta-mid-in{display:flex;align-items:center;justify-content:space-between;gap:32px}
.cta-mid .eyebrow{color:#9CC8FF}
.cta-mid h2{font-size:32px;color:#fff}
.cta-mid p{margin:12px 0 0;color:#D3DFEA;font-size:16.5px}
.site-b .cta-mid{background:linear-gradient(120deg,#0759B5,#0A4A93)}
.site-b .cta-mid .eyebrow{color:#DCEBFF}
.site-b .cta-mid p{color:#EAF3FF}

/* 영상 */
.v-wrap{max-width:960px;margin:0 auto;border-radius:20px;overflow:hidden;background:#0b1d2c;box-shadow:0 18px 50px rgba(7,27,46,.18)}
.v-wrap video{width:100%;aspect-ratio:16/9;background:#0b1d2c}

/* FAQ */
.faq-list{max-width:880px;margin:0 auto;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{text-wrap:balance;list-style:none;cursor:pointer;padding:22px 44px 22px 4px;font-size:17px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:8px;top:16px;font-size:26px;color:var(--accent);font-weight:400}
.faq details[open] summary:after{content:"−"}
.ans{padding:0 4px 22px}.ans p{margin:0 0 10px;color:var(--muted);font-size:15.5px}

/* 입력폼 섹션 (01 「간편상담신청」) */
.final-consult{background:var(--tint);padding:96px 0}
.fc-grid{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:56px;align-items:center}
.fc-text h2{font-size:40px;font-weight:700}
.fc-text>p{font-size:17px;color:var(--muted);margin:18px 0 0}
.fc-phone{display:inline-block;margin-top:26px;font-size:36px;font-weight:800;color:var(--accent);text-decoration:none;letter-spacing:-.01em}
.fc-pill{display:flex;align-items:center;gap:8px;margin-top:20px;flex-wrap:wrap}
.fc-pill span{background:#fff;border:1px solid #CDD9E2;border-radius:999px;padding:6px 16px;font-weight:700;font-size:14.5px}
.fc-pill i{font-style:normal;color:var(--accent);font-weight:800}

/* 하단 CTA ③ (푸터 바로 위) */
.bp-center{background:var(--accent);color:#fff;padding:56px 0}
.center-in{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.bp-center h2{font-size:30px;color:#fff}
.bp-center p{margin:8px 0 0;color:#fff;font-size:16.5px}

/* 푸터 · 법정고지 */
.site-footer{background:var(--navy);color:#F4F8FC;padding:44px 0 110px}
.legal{display:flex;gap:14px;align-items:flex-start;border-bottom:1px solid #365066;padding-bottom:22px;margin-bottom:30px}
.legal strong{flex:none;font-size:13px;border:1px solid #6E8AA3;border-radius:999px;padding:2px 10px;color:#F4F8FC}
.legal p{margin:0;font-size:13.5px;color:#B9CAD8;line-height:1.7}
.footer-top{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.footer-top img{width:140px;height:74px;object-fit:contain}
.footer-top p{margin:0;color:#B9CAD8;font-size:15px;flex:1}
.footer-call{background:#fff;color:#101A3A;font-size:18px;font-weight:800;border-radius:8px;min-height:54px;padding:0 22px;display:inline-flex;align-items:center;text-decoration:none}
.footer-nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin:28px 0;padding:20px 0;border-top:1px solid #365066;border-bottom:1px solid #365066}
.footer-nav a{color:#F4F8FC;text-decoration:none;font-size:15px}
.business p{margin:0 0 4px;color:#B9CAD8;font-size:14px}
.business a{color:#F4F8FC}

/* 플로팅(01 rail-01 그대로) */
.contact-rail{position:fixed;right:20px;bottom:20px;z-index:50;display:grid;gap:9px}
.contact-rail a,.contact-rail button{width:248px;height:76px;border-radius:12px;display:flex;align-items:center;gap:14px;padding:0 16px;text-decoration:none;box-shadow:0 5px 18px rgba(21,43,64,.1);border:0;cursor:pointer;font-family:Pretendard,sans-serif;text-align:left}
.contact-rail i{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.125)}
.contact-rail svg{width:24px;height:24px}
.contact-rail span{display:grid;line-height:1.25}
.contact-rail small{font-size:12.5px;font-weight:600}
.contact-rail b{font-size:19px;font-weight:800}
.rail-call{background:var(--accent);color:#fff}
.rail-kakao{background:#FEE500;color:#27221E}.rail-kakao i{background:rgba(39,34,30,.08)}
.rail-consult{background:#fff;color:var(--accent);box-shadow:0 5px 18px rgba(21,43,64,.1),inset 0 0 0 1px #D9E1E8!important}.rail-consult i{background:var(--tint)}
.m-dock{display:none}

/* 상담 모달 */
.bp-modal{width:min(520px,92vw);border:0;border-radius:18px;padding:0;box-shadow:0 30px 80px rgba(7,27,46,.3);color:var(--ink)}
.bp-modal::backdrop{background:rgba(7,27,46,.55)}
.bp-modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:26px 28px 0}
.bp-modal-head p{margin:0;font-size:12px;font-weight:750;letter-spacing:.12em;color:var(--accent)}
.bp-modal-head h2{font-size:24px}
.bp-modal-head button{border:0;background:var(--band);width:40px;height:40px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}
.bp-modal-form{display:grid;gap:12px;padding:16px 28px 28px}
.bp-modal-intro{margin:0;color:var(--muted);font-size:15px}
.bp-modal-success{padding:30px 28px 34px;text-align:center}
.success-icon{width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;font-size:28px;display:grid;place-items:center;margin:0 auto 14px}
.bp-modal-success p{color:var(--muted)}

/* PC 바닥 고정 입력폼 바(01 bp-dock 꼴) — 플로팅은 그 위로 올린다 · 모바일(≤900)은 m-dock 이 대신 */
.pc-dock{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--tint);border-top:1px solid #CDD9E2;box-shadow:0 -4px 24px rgba(12,41,64,.08)}
.pc-dock .quick-strip{margin:0;padding:12px 0;background:transparent;box-shadow:none;border:0;border-radius:0}
.pc-dock .qs-label{color:var(--accent)}
body{padding-bottom:72px}
.contact-rail{bottom:92px}
@media (max-width:900px){.pc-dock{display:none}}
/* A형(폼 오른쪽) — 히어로 폼도 플로팅 왼쪽에서 끝나게(10-17 사장님 지적: 「상담을 요청합니다」 버튼을 플로팅이 가림) */
@media (min-width:1201px) and (max-width:1840px){
 .hero-a .hero-grid{grid-template-columns:minmax(0,1fr) 440px;gap:40px}
 .hero-a .hero-grid,.hero-b .hero-grid{padding-right:max(24px,calc(284px - (100vw - min(100vw,1280px))/2))}
 .hero-a .h1{font-size:clamp(42px,3.6vw,60px)}
}
@media (min-width:901px) and (max-width:1200px){
 .hero.hero-a .hero-grid,.hero.hero-b .hero-grid{grid-template-columns:1fr;gap:32px}
 .hero.hero-b .hero-text{order:1}.hero.hero-b .card-form{order:2}
 .hero .card-form{max-width:520px}
}
@media (max-width:1100px){
 .hero-grid,.hero-b .hero-grid{grid-template-columns:minmax(0,1fr) 420px;gap:32px}
 .hero-b .hero-grid{grid-template-columns:420px minmax(0,1fr)}
 .h1{font-size:48px}
 .step-list{grid-template-columns:repeat(3,1fr)}
 .feat-grid.n4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
 .menu-toggle{display:block}
 .header-phone{display:none}
 #main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);padding:10px 16px 16px;flex-direction:column;align-items:stretch;gap:2px}
 #main-nav.open{display:flex}
 .nav-panel{position:static;box-shadow:none;border:0;padding:0 0 6px 10px;min-width:0}
 .nav-inner{position:relative;min-height:73px}
 .brand img{width:110px;height:58px}
 .contact-rail{display:none}
 .m-dock{display:grid;grid-template-columns:1fr 1.12fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:50;height:60px;box-shadow:0 -4px 24px rgba(12,41,64,.12)}
 .m-dock>*{display:flex;align-items:center;justify-content:center;gap:4px;font:800 15px Pretendard,sans-serif;text-decoration:none;border:0}
 .m-dock .is-form{background:#fff;color:var(--accent)}
 .m-dock .is-call{background:var(--accent);color:#fff}
 .m-dock .is-kakao{background:#FEE500;color:#27221E}
 body{padding-bottom:60px}
 .hero-grid,.hero-b .hero-grid{grid-template-columns:1fr;min-height:0}
 .hero-b .hero-text{order:1}.hero-b .card-form{order:2}
 .quick-strip{grid-template-columns:1fr 1fr}
 .qs-label{grid-column:1/-1;padding:0}
 .quick-strip .btn{grid-column:1/-1}
 .split,.fc-grid{grid-template-columns:1fr;gap:30px}
 .split.rev .split-img{order:0}
 .cta-mid-in{flex-direction:column;align-items:flex-start}
 .site-footer{padding-bottom:90px}
}
@media (max-width:720px){
 body{font-size:15px}
 .wrap{padding:0 16px}
 .pc-only{display:none}.mo-only{display:inline}.mo-br{display:inline}
 .hero{padding:44px 0 28px}
 .hero:after,.hero-b:after{background:#092234B8}
 .h1{font-size:27px}
 .lead{font-size:16px;margin-top:16px}
 .hero-checks{margin:18px 0 22px}
 .hero-checks li{font-size:15.5px}
 .hero-b .hero-checks{display:grid}
 .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .actions .btn{padding:0 10px;font-size:14.5px}
 .card-form{padding:26px 22px}
 .form-title{font-size:23px}
 .sec,.final-consult{padding:62px 0}
 .section-head{margin-bottom:28px}
 .section-head h2{font-size:25px}
 .section-head p{font-size:15.5px}
 .d-deck-grid{grid-template-columns:1fr;gap:16px}
 .gl-wrap{padding:24px 20px}
 .gl-list{grid-template-columns:1fr;gap:20px}
 .bp-glance{padding:44px 0}
 .feat-grid,.feat-grid.n4,.feat-grid.n2,.case-grid,.chk-grid,.step-list{grid-template-columns:1fr}
 .fc-text h2{font-size:27px}
 .fc-phone{font-size:28px}
 .cta-mid{padding:48px 0}.cta-mid h2{font-size:24px}
 .cta-mid .actions,.bp-center .actions{width:100%}
 .cta-mid .actions .btn:first-child,.bp-center .actions .btn:first-child{grid-column:1/-1}
 .bp-center h2{font-size:24px}
 .legal{flex-direction:column;gap:8px}
 .footer-call{font-size:17px}
}
/* CTA 버튼 두 개 같은 크기(10-17) */
.actions.cta2{display:grid;grid-template-columns:repeat(2,220px);gap:12px}
.actions.cta2 .btn{width:100%;padding:0 16px}
@media (max-width:720px){.actions.cta2{grid-template-columns:1fr 1fr;gap:10px}}
/* 모바일 히어로 — 인물 사진을 정사각으로 위에 따로 · 글은 그 아래 남색 바탕(10-17 사장님 「인물을 텍스트가 다 가린다」) */
@media (max-width:720px){
 .hero{padding:0 0 28px;background:#11293C}
 .hero:after,.hero-b:after{display:none}
 .hero-bg{position:relative;inset:auto;height:auto;aspect-ratio:1/1}
 .hero-bg picture,.hero-bg img{position:static;display:block;width:100%;height:100%}   /* picture 가 인라인이면 높이 100% 가 안 먹어 사진 아래 빈칸(10-17 사장님) */
 .hero-bg img{object-fit:cover;object-position:50% 18%}
 .hero-bg:after{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;background:linear-gradient(180deg,rgba(17,41,60,0),#11293C)}
 .hero>.wrap{padding-top:6px}
 /* 중간 · 하단 CTA 버튼은 모바일에서 둘 다 한 줄씩 같은 너비(사장님 「상담 요청하기 길게 보이는 가로 사이즈로」) */
 .cta-mid .actions.cta2,.bp-center .actions.cta2{grid-template-columns:1fr}
}
/* ★PC 히어로(배경 이미지형) 규칙(10-17 사장님) — 높이 1000~1080px · 검정 오버레이(다른 색 금지) · 배경 이미지 고정
   검수: _도구\히어로검사.py */
@media (min-width:901px){
 .hero{min-height:1000px;background:#000;display:flex;flex-direction:column;justify-content:center;padding:60px 0}
 .hero>.wrap{width:100%}
 .hero:after,.hero-b:after{background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.55) 60%,rgba(0,0,0,.42))}
 .hero-b:after{background:linear-gradient(270deg,rgba(0,0,0,.78),rgba(0,0,0,.55) 60%,rgba(0,0,0,.42))}
 .hero-bg{clip-path:inset(0)}
 .hero-bg picture,.hero-bg img{position:fixed;inset:0;width:100vw;height:100vh}
 /* 고정 배경이 헤더(89px) 뒤에 깔려 머리가 가려지던 것(10-17 사장님 「히어로 인물 머리 안 잘리게 내려 주세요」) — 헤더 바로 아래부터 · 사진 위끝부터 보이게 */
 .hero-bg picture,.hero-bg img{top:89px;height:calc(100vh - 89px)}
 .hero-bg img{object-position:50% 0%}
}
/* FAQ 답 = 공식홈페이지(bestpay.kr) 꼴 — 굵은 소제목 + • 항목 · 문단 사이 한 줄 띄움(10-17) */
.ans p{line-height:1.85;margin:0 0 16px}
.ans strong{color:var(--ink);font-weight:800}
.ans strong{white-space:nowrap}   /* 「베스트페이 010-3970-2769」 번호가 두 줄로 끊기지 않게 */
/* 케러셀 = 01 사이트처럼 카드만(카드 안에 하단 띠가 있으니 아래 안내 줄은 화면에서 숨김 · 링크 이름으로만 남김) — 10-17 사장님 「01과 동일하게」 */
.d-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.d-deck-grid a{position:relative;border:1px solid #DCE5ED;border-radius:12px;box-shadow:none}

/* ── 10-17 새 섹션 6꼴(부품 섹션에서 모양만 · 베스트페이 토큰) — 내용 폭은 다른 섹션과 같은 .wrap 1280 ── */
.step-list.n4{grid-template-columns:repeat(4,1fr)}
.step-list.n3{grid-template-columns:repeat(3,1fr)}
/* zz- 사진 글 지그재그 (개인 소장 · 소개 01) */
.zz-list{display:grid;gap:0;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#fff}
.zz-row{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.zz-row.rev .zz-img{order:2}
.zz-img{margin:0;position:relative;min-height:400px}
.zz-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.zz-text{padding:48px 56px;display:flex;flex-direction:column;justify-content:center}
.zz-no{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--accent);margin-bottom:10px}
.zz-text h3{font-size:26px;margin-bottom:14px}
.zz-text p{margin:0;font-size:16px;color:var(--muted)}
.zz-ticks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.zz-ticks li{padding-left:28px;position:relative;font-weight:600;font-size:15.5px}
.zz-ticks li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:900}
/* st- 큰 숫자 4칸 · 어두운 바탕 (힐스테이트 06_개요_숫자 03) */
.sec.st-sec{background:var(--navy);color:#fff}
.st-sec .section-head h2{color:#fff}
.st-sec .section-head p{color:#C9D7E4}
.st-sec .eyebrow{color:#8FC1FF}
.st-sec .section-head{max-width:none;border-top:1px solid #3E5A73;padding-top:36px}
.st-sec .section-head h2,.st-sec .section-head p{max-width:760px}
.st-nums{list-style:none;padding:0;margin:0 0 56px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #3E5A73;border-bottom:1px solid #3E5A73}
.st-nums li{padding:28px 24px;border-left:1px solid #3E5A73}
.st-nums li:first-child{border-left:0;padding-left:0}
.st-big{margin:0;font-size:46px;font-weight:800;line-height:1.1;color:#8FC1FF;letter-spacing:-.02em}
.st-big small{font-size:15px;font-weight:700;margin-left:6px;color:#DCEBFF;letter-spacing:0}
.st-lab{margin:10px 0 0;font-size:15px;color:#D7E3EE;line-height:1.6}
.st-body{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.st-img{margin:0}.st-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px}
.st-img figcaption{margin-top:10px;font-size:13.5px;color:#B9CAD8}
.st-rows{list-style:none;padding:0;margin:0;border-top:1px solid #3E5A73}
.st-rows li{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid #3E5A73}
.st-rows b{color:#8FC1FF;font-size:16px}
.st-rows span{color:#F4F8FC;font-size:15.5px;line-height:1.7}
/* tl- 가로 타임라인 (힐스테이트 19_일정_타임라인 04) */
.tl-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.tl-list.n4{grid-template-columns:repeat(4,1fr);gap:28px}
.tl-list.n5{grid-template-columns:repeat(5,1fr);gap:22px}
.tl-list li{position:relative;padding-top:34px}
.tl-list li:before{content:"";position:absolute;left:6px;right:0;top:6px;height:2px;background:linear-gradient(90deg,var(--accent),#9CC2EA)}
.tl-dot{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--tint)}
.tl-when{margin:0 0 6px;font-size:30px;font-weight:800;color:var(--accent);line-height:1.2;letter-spacing:-.01em}
.tl-list h3{font-size:19px;margin-bottom:8px}
.tl-list p:not(.tl-when){margin:0;font-size:15px;color:var(--muted)}
.tl-note{margin:36px 0 0;padding:18px 22px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:15.5px;color:var(--ink)}
/* sg- 사진 카드 엇갈림 (개인 소장 · 카드 03) */
.sg-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:56px;align-items:start}
.sg-head{position:sticky;top:120px}
.sg-head .section-head{margin-bottom:0}
.sg-cards{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.sg-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 22px 26px}
.sg-card:nth-child(even){transform:translateY(90px)}
.sg-cards{padding-bottom:90px}
.sg-card figure{margin:0 0 18px}
.sg-card img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;border-radius:12px}
.sg-card h3{font-size:20px;margin-bottom:8px}
.sg-card p{margin:0;font-size:15px;color:var(--muted)}
/* vs- 두 카드 비교 (개인 소장 · 메뉴·가격 02) */
.vs-grid{display:grid;grid-template-columns:1fr 72px 1fr;align-items:center}
.vs-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;height:100%;display:flex;flex-direction:column}
.vs-card h3{padding:22px 26px;font-size:20px;text-align:center;background:var(--tint);color:var(--ink)}
.vs-card.is-right h3{background:var(--accent);color:#fff}
.vs-card ul{list-style:none;margin:0;padding:22px 26px 6px;display:grid;gap:10px;flex:1}
.vs-card li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.65}
.vs-card li:before{content:"·";position:absolute;left:6px;font-weight:900;color:var(--muted)}
.vs-card.is-right li:before{content:"✓";left:0;color:var(--accent)}
.vs-verdict{margin:14px 26px 24px;padding:16px 18px;border-radius:10px;background:var(--band);font-weight:700;font-size:15.5px}
.vs-card.is-right .vs-verdict{background:var(--tint);color:var(--accent)}
.vs-mark{text-align:center;font-size:26px;font-weight:900;color:var(--navy)}
/* rw- 항목 줄 + 안내 상자 (힐스테이트 05_혜택_조건카드 09) */
.rw-list{list-style:none;padding:0;margin:0}
.rw-list li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:40px;padding:24px 0;border-top:1px solid #C9D3DC}
.rw-list li:last-child{border-bottom:1px solid #C9D3DC}
.rw-list h3{font-size:21px;font-weight:700;color:var(--ink)}
.rw-list p{margin:0;font-size:16px;color:var(--muted)}
.rw-box{margin-top:36px;background:var(--navy);color:#fff;border-radius:16px;padding:30px 34px}
.rw-box h3{font-size:21px;color:#fff;margin-bottom:8px}
.rw-box p{margin:0;color:#D7E3EE;font-size:15.5px}
@media (max-width:1100px){
 .tl-list.n4,.tl-list.n5{grid-template-columns:repeat(2,1fr);row-gap:40px}
 .st-nums{grid-template-columns:repeat(2,1fr)}
 .st-nums li:nth-child(3){border-left:0;padding-left:0}
 .st-nums li:nth-child(n+3){border-top:1px solid #3E5A73}
 .sg-grid{grid-template-columns:1fr;gap:32px}
 .sg-head{position:static}
}
@media (max-width:900px){
 .zz-row,.st-body{grid-template-columns:1fr}
 .zz-row.rev .zz-img{order:0}
 .zz-img{min-height:0}
 .zz-img img{position:static;aspect-ratio:4/3;height:auto}
 .zz-text{padding:30px 26px}
 .st-body{gap:30px}
}
@media (max-width:720px){
 .step-list.n4,.step-list.n3{grid-template-columns:1fr}
 .zz-text h3{font-size:21px}
 .st-nums{margin-bottom:36px}
 .st-nums li{padding:20px 14px}
 .st-nums li:nth-child(odd){padding-left:0}
 .st-big{font-size:32px}.st-big small{font-size:13px;margin-left:4px}
 .st-lab{font-size:14px}
 .st-rows li{grid-template-columns:1fr;gap:4px}
 .tl-list,.tl-list.n4,.tl-list.n5{grid-template-columns:1fr;gap:26px}
 .tl-list li{padding:0 0 0 34px}
 .tl-list li:before{left:6px;right:auto;top:20px;bottom:-26px;width:2px;height:auto;background:var(--accent);opacity:.35}
 .tl-list li:last-child:before{display:none}
 .tl-dot{top:6px}
 .tl-when{font-size:24px}
 .sg-cards{grid-template-columns:1fr;gap:18px;padding-bottom:0}
 .sg-card:nth-child(even){transform:none}
 .sg-card{padding:18px 18px 22px}
 .vs-grid{grid-template-columns:1fr;gap:12px}
 .vs-mark{font-size:20px}
 .vs-card ul{padding:18px 20px 4px}
 .vs-verdict{margin:12px 20px 20px}
 .rw-list li{grid-template-columns:1fr;gap:6px;padding:20px 0}
 .rw-list h3{font-size:18px}
 .rw-box{padding:24px 22px}
}

/* ── 10-17 미용실 샘플용 새 부품 6꼴(피씨방에서 안 쓴 모양 · 접두어 nl- ic- pl- = salon-pg / sc- cc- tr- = salon-card) ── */
/* nl- 붙은 목록 번호 (개인 소장 · 스크롤 효과 10) — 왼쪽 제목 · 번호 목록 고정, 오른쪽 사진 + 글 */
.nl-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:72px;align-items:start}
.nl-side{position:sticky;top:120px}
.nl-side .section-head{margin-bottom:30px}
.nl-index{list-style:none;padding:0;margin:0;display:grid;gap:4px;border-left:2px solid var(--line)}
.nl-index a{display:flex;gap:14px;padding:9px 0 9px 18px;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;font-weight:700;font-size:17px}
.nl-index a span{color:var(--accent);font-variant-numeric:tabular-nums}
.nl-index a:hover{color:var(--ink);border-left-color:var(--accent)}
.nl-items{display:grid;gap:64px}
.nl-item figure{margin:0 0 22px}
.nl-item img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 30%;border-radius:14px}
.nl-no{margin:0 0 6px;font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--accent)}
.nl-item h3{font-size:26px;margin-bottom:10px}
.nl-item p:not(.nl-no){margin:0;font-size:16px;color:var(--muted)}
/* ic- 아이콘 3칸 (개인 소장 · 카드 01) — 세로 줄로 나눈 칸 · 가운데 정렬 */
.ic-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr)}
.ic-list.n4{grid-template-columns:repeat(4,1fr)}
.ic-list li{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 34px 34px;border-left:1px solid var(--line)}
.ic-list li:first-child{border-left:0}
.ic-list h3{font-size:21px;margin-bottom:24px}
.ic-ico{width:96px;height:96px;border-radius:50%;background:var(--tint);color:var(--accent);display:grid;place-items:center;margin-bottom:24px}
.ic-ico svg{width:46px;height:46px}
.ic-list p{margin:0 0 22px;font-size:15.5px;color:var(--muted);flex:1}
.ic-more{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:7px;background:var(--accent);color:#fff;font-weight:700;font-size:14.5px;text-decoration:none}
/* pl- 큰 제목 · 사진 + 점 목록 (힐스테이트 20_단계_절차 03) */
.pl-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.pl-img{margin:0}.pl-img img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 30%;border-radius:4px}
.pl-img figcaption{margin-top:10px;font-size:13.5px;color:var(--muted)}
.pl-list{margin:0;padding:0 0 0 20px;display:grid;gap:20px}
.pl-list li{padding-left:6px;font-size:16px;line-height:1.7}
.pl-list li::marker{color:var(--accent)}
.pl-list b{display:block;font-size:18px;color:var(--ink);margin-bottom:2px}
.pl-list span{color:var(--muted)}
/* sc- 이야기 카드 4열 (개인 소장 · 슬라이드 02) — 사진 위 아래쪽 어두운 덮개 · 흰 글 */
.sc-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.sc-list li{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:#0b1d2c}
.sc-list img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.sc-list li:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.62) 60%,rgba(0,0,0,.88))}
.sc-txt{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:20px 20px 22px;color:#fff}
.sc-txt h3{font-size:19px;color:#fff;margin-bottom:8px}
.sc-txt p{margin:0;font-size:14.5px;line-height:1.65;color:#F1F5F9}
/* cc- 체크리스트 3칸 (힐스테이트 21_체크리스트 03) — 칸 제목 옆 가는 선 · 네모 체크 */
.cc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.cc-col h3{display:flex;align-items:center;gap:16px;font-size:20px;margin-bottom:22px}
.cc-col h3:after{content:"";flex:1;height:1px;background:#8A9AA8}
.cc-col ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cc-col li{position:relative;padding-left:34px;font-size:15.5px;line-height:1.65;color:var(--ink)}
.cc-col li:before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border:1.5px solid #8A9AA8;border-radius:3px;background:#fff}
.cc-col li:after{content:"";position:absolute;left:6px;top:6px;width:6px;height:10px;border:solid var(--accent);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.cc-note{margin:40px 0 0;font-size:15px;color:var(--muted)}
/* tr- 사진 세 장 바로가기 (개인 소장 · 소개 03) — 둥근 사진 + 아래 제목 · 설명 */
.tr-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tr-list a{display:block;text-decoration:none;color:var(--ink)}
.tr-list figure{margin:0 0 18px;border-radius:22px;overflow:hidden}
.tr-list img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 30%;transition:transform .3s}
.tr-list a:hover img{transform:scale(1.03)}
.tr-list h3{font-size:21px;margin-bottom:8px}
.tr-list h3 span{color:var(--accent)}
.tr-list p{margin:0;font-size:15.5px;color:var(--muted)}
@media (max-width:1100px){
 .nl-grid{gap:44px}
 .ic-list.n4{grid-template-columns:repeat(2,1fr)}
 .ic-list.n4 li:nth-child(3){border-left:0}
 .sc-list{grid-template-columns:repeat(2,1fr)}
 .cc-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
 .nl-grid,.pl-body{grid-template-columns:1fr;gap:30px}
 .nl-side{position:static}
 .nl-index{display:none}
 .nl-items{gap:44px}
}
@media (max-width:720px){
 .nl-item h3{font-size:21px}
 .ic-list,.ic-list.n4{grid-template-columns:1fr}
 .ic-list li{border-left:0;border-top:1px solid var(--line);padding:26px 8px}
 .ic-list li:first-child{border-top:0}
 .ic-ico{width:80px;height:80px;margin-bottom:18px}.ic-ico svg{width:38px;height:38px}
 .ic-list h3{margin-bottom:18px}
 .pl-list b{font-size:17px}
 .sc-list{grid-template-columns:1fr;gap:16px}
 .sc-list li{aspect-ratio:1/1}
 .cc-grid{grid-template-columns:1fr;gap:34px}
 .tr-list{grid-template-columns:1fr;gap:30px}
}

/* ── 새 키워드 8곳용 새 부품 4꼴(qa- · ld- · bn- · dp-) — 위 섹션과 클래스가 안 겹침 ── */
.qa-list{list-style:none;margin:0;padding:0;display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.qa-list.n4{grid-template-columns:repeat(2,1fr)}
.qa-list li{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 26px;display:flex;flex-direction:column;gap:14px}
.qa-q{margin:0;font-size:19px;font-weight:700;line-height:1.5;color:var(--ink)}
.qa-q span{display:block;font-size:48px;line-height:.8;color:var(--accent);margin-bottom:6px}
.qa-a{margin:0;font-size:15.5px;line-height:1.75;color:var(--muted);padding-top:14px;border-top:1px dashed var(--line)}
.ld-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.ld-list li{display:flex;gap:20px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:12px;padding:22px 26px;width:calc(100% - var(--i)*56px);margin-left:calc(var(--i)*56px)}
.ld-no{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;display:grid;place-items:center}
.ld-list h3{margin:0 0 6px;font-size:19px}.ld-list p{margin:0;font-size:15.5px;line-height:1.7;color:var(--muted)}
.bn-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.bn-list.n4{grid-template-columns:repeat(4,1fr)}
.bn-list li{padding:8px 30px 8px;border-left:1px solid var(--line)}.bn-list li:first-child{border-left:0;padding-left:0}
.bn-big{margin:0 0 10px;font-size:clamp(40px,5vw,64px);font-weight:700;line-height:1.05;letter-spacing:-.02em;color:var(--accent)}
.bn-list h3{margin:0 0 8px;font-size:19px}.bn-list li>p:last-child{margin:0;font-size:15.5px;line-height:1.7;color:var(--muted)}
.dp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.dp-card figure{margin:0}.dp-card img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;border-radius:10px;display:block}
.dp-txt{position:relative;margin:-56px 24px 0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 26px;box-shadow:0 10px 28px rgba(16,43,67,.1)}
.dp-txt h3{margin:0 0 8px;font-size:19px}.dp-txt p{margin:0;font-size:15.5px;line-height:1.7;color:var(--muted)}
@media (max-width:900px){.qa-list,.qa-list.n4{grid-template-columns:1fr 1fr}.bn-list,.bn-list.n4{grid-template-columns:1fr 1fr;row-gap:28px}.bn-list li:nth-child(odd){border-left:0;padding-left:0}.ld-list li{width:calc(100% - var(--i)*24px);margin-left:calc(var(--i)*24px)}}
@media (max-width:720px){.qa-list,.qa-list.n4,.dp-grid{grid-template-columns:1fr}.bn-list,.bn-list.n4{grid-template-columns:1fr}.bn-list li{border-left:0;padding:0 0 22px;border-bottom:1px solid var(--line)}.bn-list li:last-child{border-bottom:0}.ld-list li{width:calc(100% - var(--i)*10px);margin-left:calc(var(--i)*10px);padding:18px}.dp-txt{margin:-40px 14px 0;padding:18px 20px}}