/* 세무회계 담율 · 홈 전용 (2026-10-16 개편)
   첫 화면 고층빌딩 영상 + 바로 보이는 상담 신청 바 + 담율 소개처럼 스크롤 등장 효과 */
.fw{width:100%;max-width:1480px;margin:0 auto;padding:0 clamp(20px,4.5vw,80px);position:relative;z-index:1}
.topbar .wrap,.header .wrap,.footer .wrap{max-width:1480px;padding-left:clamp(20px,4.5vw,80px);padding-right:clamp(20px,4.5vw,80px)}

/* 머리말: 영상 위에서는 투명, 내려가면 흰색 */
.hv-page .topbar{display:none}
.hv-page .header{position:fixed;left:0;right:0;top:0;background:transparent;border-bottom:1px solid rgba(255,255,255,.14);transition:background .35s,border-color .35s,box-shadow .35s}
.hv-page .header .wrap{height:84px;transition:height .35s}
.hv-page .header:not(.solid) .nav>a,.hv-page .header:not(.solid) .nav-dd>a{color:#fff}
.hv-page .header:not(.solid) .nav>a:hover,.hv-page .header:not(.solid) .nav-dd>a:hover{color:#C8D4FF}
.hv-page .header:not(.solid) .btn-navy{background:#fff;color:var(--navy)}
.hv-page .header:not(.solid) .btn-navy:hover{background:#E8ECF7}
.hv-page .header.solid{background:rgba(255,255,255,.97);border-bottom-color:#E3E6EC;box-shadow:0 6px 24px rgba(14,27,64,.08)}
.hv-page .header.solid .wrap{height:72px}
.hv-page .nav-dd{height:auto;min-height:72px}

/* 1. 첫 화면 영상 */
.hv{position:relative;min-height:calc(100vh - var(--bh,0px));min-height:calc(100svh - var(--bh,0px));display:flex;flex-direction:column;justify-content:flex-end;color:#fff;overflow:hidden;background:#0B1633}
.hv-media{position:absolute;inset:0;overflow:hidden}
.hv-media video,.hv-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease}
.hv-media video.on{opacity:1;animation:hvZoom 16s linear both}
@keyframes hvZoom{from{transform:scale(1)}to{transform:scale(1.06)}}
.hv-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,16,40,.5) 0%,rgba(8,16,40,.12) 30%,rgba(8,16,40,.3) 70%,rgba(8,16,40,.82) 100%),linear-gradient(90deg,rgba(11,22,51,.72) 0%,rgba(11,22,51,.3) 45%,rgba(11,22,51,0) 75%)}
.hv-in{padding-top:clamp(110px,14vh,170px);padding-bottom:clamp(26px,4vh,48px)}
.hv-eye{font-size:14px;font-weight:800;letter-spacing:.3em;color:#AFC0EE;margin:0 0 22px}
.hv h1{font-size:clamp(38px,4.4vw,74px);line-height:1.14;letter-spacing:-.045em;font-weight:800;margin:0 0 26px;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hv h1 em{font-style:normal;color:#9FB6F5}
.hv-lead{font-size:clamp(16px,1.3vw,19px);line-height:1.75;color:#DDE3F1;max-width:640px;margin:0 0 26px}
.hv-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.hv-path{display:inline-flex;align-items:center;gap:14px;padding:14px 20px 14px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.07);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;text-decoration:none;font-weight:700;transition:background .25s,border-color .25s,transform .25s}
.hv-path small{font-weight:500;color:#C9D0E3;font-size:13.5px}
.hv-path svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.hv-path:hover{background:rgba(255,255,255,.16);border-color:#fff}.hv-path:hover svg{transform:translateX(4px)}
.hv-direct{display:flex;align-items:center;gap:12px;color:#DDE3F1;font-size:14.5px}
.hv-direct img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.6)}
.hv-direct b{display:block;color:#fff;font-size:15.5px}

/* 첫 화면 상담 신청 바 */
.hv-form{position:relative;z-index:2;padding-bottom:30px;animation:hvUp .9s cubic-bezier(.2,.8,.2,1) .45s both}
@keyframes hvUp{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
.hv-bar{display:flex;align-items:stretch;background:#fff;color:var(--ink);border-radius:999px;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:10px 10px 10px 34px;gap:0}
.hv-bar .hb-t{display:flex;flex-direction:column;justify-content:center;padding-right:26px;margin-right:6px;border-right:1px solid #E3E6EC;white-space:nowrap}
.hv-bar .hb-t b{font-size:18px;color:var(--navy);letter-spacing:-.02em}
.hv-bar .hb-t span{font-size:12.5px;color:var(--gray-500)}
.hv-bar label.hb-f{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:0 20px;border-right:1px solid #E3E6EC}
.hv-bar label.hb-f:last-of-type{border-right:0}
.hv-bar .hb-f>span{font-weight:800;font-size:15px;white-space:nowrap}
.hv-bar input,.hv-bar select{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;padding:14px 0;color:var(--ink)}
.hv-bar input:focus,.hv-bar select:focus{outline:0}
.hv-bar label.hb-f:focus-within{background:#F6F7FB}
.hv-bar button[type=submit]{flex:none;display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;background:var(--navy);color:#fff;font:inherit;font-weight:800;font-size:17px;padding:0 34px;cursor:pointer;transition:background .25s}
.hv-bar button[type=submit]:hover{background:#0B1633}
.hv-bar button[type=submit] svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.hv-bar button[type=submit]:hover svg{transform:translateX(4px)}
.hv-sub{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:14px;padding:0 22px;font-size:13.5px;color:#C9D0E3}
.hv-sub label{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.hv-sub input[type=checkbox]{width:16px;height:16px;accent-color:#fff}
.hv-sub button{border:0;background:none;color:#fff;text-decoration:underline;font:inherit;cursor:pointer;padding:0}
.hv-sub a{color:#fff;text-decoration:none;font-weight:700}
.hv-sub .ways{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.hv-sub .ways a.kk{color:#FEE500}
.hv-agree-txt{margin:12px 22px 0;padding:14px 18px;border-radius:14px;background:rgba(8,16,40,.72);border:1px solid rgba(255,255,255,.14);font-size:13px;line-height:1.7;color:#DDE3F1}
.hv-agree-txt a{color:#fff}
.hv-scroll{position:absolute;right:clamp(20px,4.5vw,80px);top:50%;writing-mode:vertical-rl;font-size:12px;letter-spacing:.3em;color:#AFC0EE;display:flex;align-items:center;gap:14px;z-index:2}
.hv-scroll span{display:block;width:1px;height:60px;background:linear-gradient(#fff,transparent);animation:hvDrop 1.8s infinite}
@keyframes hvDrop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 오른쪽 빠른 메뉴 (데스크톱) */
.hv-quick{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:56;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;box-shadow:0 14px 40px rgba(14,27,64,.25);background:#0E1B40}
.hv-quick a,.hv-quick button{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;padding:14px 4px 12px;color:#fff;text-decoration:none;font:inherit;font-size:12.5px;font-weight:700;border:0;background:transparent;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.1);transition:background .2s}
.hv-quick a:hover,.hv-quick button:hover{background:#1D3474}
.hv-quick svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hv-quick .q-main{background:var(--red)}.hv-quick .q-main:hover{background:#8A1515}
.hv-quick .q-kk{background:#FEE500;color:#191919}.hv-quick .q-kk:hover{background:#F2D900}
.hv-quick .q-kk svg{fill:#191919;stroke:none}
.hv-quick .q-top{border-bottom:0;font-size:11.5px;letter-spacing:.1em}
.hv-page .kakao-fab{display:none}

/* 공통: 섹션 머리 */
.hs{padding:clamp(80px,9vw,150px) 0;position:relative;overflow:hidden}
.hs.paper{background:#F6F7F9}
.hs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(36px,4vw,60px)}
.hs-eye{font-size:13.5px;font-weight:800;letter-spacing:.24em;color:var(--navy);margin:0 0 16px;display:flex;align-items:center;gap:12px}
.hs-eye::before{content:"";width:28px;height:2px;background:var(--red)}
.hs-head h2{font-size:clamp(30px,3.4vw,54px);line-height:1.2;letter-spacing:-.04em;font-weight:800;margin:0}
.hs-head h2 strong{color:var(--navy)}
.hs-head p{margin:16px 0 0;font-size:clamp(15.5px,1.15vw,18px);color:var(--gray-500);max-width:640px;line-height:1.7}
.hs-more{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-weight:800;color:var(--navy);text-decoration:none;padding:13px 22px;border:1px solid var(--navy);border-radius:999px;transition:background .25s,color .25s}
.hs-more:hover{background:var(--navy);color:#fff}
.hs-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hs-wm{position:absolute;right:-1vw;top:2vw;font-size:clamp(80px,13vw,230px);font-weight:900;letter-spacing:-.04em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(22,41,96,.07);white-space:nowrap;user-select:none;pointer-events:none;z-index:0}

/* 2. 신뢰 4칸 (담율 소개 가치 칸처럼) */
.hv-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid #E3E6EC;background:#fff}
.hv-trust>div{position:relative;padding:clamp(34px,3.4vw,56px) clamp(22px,2.6vw,48px);border-right:1px solid #E3E6EC;overflow:hidden;transition:color .45s}
.hv-trust>div:last-child{border-right:0}
.hv-trust>div::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,#0E1B40,#1D3474);transform:translateY(101%);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.hv-trust>div>*{position:relative}
.hv-trust>div:hover::before{transform:none}
.hv-trust>div:hover b{color:#fff}.hv-trust>div:hover span{color:#C9D0E3}.hv-trust>div:hover svg{stroke:#fff}.hv-trust>div:hover em{color:rgba(255,255,255,.14)}
.hv-trust em{position:absolute;right:20px;top:12px;font-style:normal;font-size:clamp(46px,4.4vw,78px);font-weight:900;color:#F0F2F6;letter-spacing:-.04em;line-height:1;transition:color .45s}
.hv-trust svg{width:36px;height:36px;fill:none;stroke:var(--navy);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s}
.hv-trust b{display:block;font-size:clamp(18px,1.5vw,22px);letter-spacing:-.02em;margin:22px 0 6px;transition:color .45s}
.hv-trust span{display:block;color:var(--gray-500);font-size:15px;transition:color .45s}

/* 흐르는 띠 */
.hv-marquee{overflow:hidden;background:var(--navy);color:#fff;padding:24px 0;white-space:nowrap}
.hv-marquee .trk{display:inline-flex;animation:hvMarq 40s linear infinite}
.hv-marquee span{font-size:clamp(20px,2.2vw,34px);font-weight:800;letter-spacing:-.02em;padding:0 30px;display:inline-flex;align-items:center}
.hv-marquee span::after{content:"";width:9px;height:9px;border-radius:50%;background:#E24A4A;margin-left:60px}
@keyframes hvMarq{to{transform:translateX(-50%)}}

/* 자가진단 · 업종 · 계산기: 기존 부품을 넓은 폭에 맞춤 */
.hs .diag-grid{gap:20px}
.hs .diag{border-radius:20px;padding:26px;transition:transform .3s,box-shadow .3s}
.hs .diag:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.hs .diag-group{font-size:19px}
.hs .tabpanel,.hs .calc{border-radius:24px;padding:clamp(24px,3vw,44px)}
.hs .tab{padding:12px 20px;font-size:15.5px}

/* 서비스: 어두운 띠 */
.hv-svc{background:#0B1633;color:#fff}
.hv-svc .hs-eye{color:#9FB2E8}
.hv-svc .hs-head h2{color:#fff}.hv-svc .hs-head h2 strong{color:#9FB6F5}
.hv-svc .hs-head p{color:#AEB8D3}
.hv-svc .hs-more{color:#fff;border-color:rgba(255,255,255,.45)}.hv-svc .hs-more:hover{background:#fff;color:var(--navy)}
.hv-svc .hs-wm{-webkit-text-stroke:1px rgba(255,255,255,.07)}
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.16)}
.svc{position:relative;padding:clamp(30px,3vw,48px) clamp(22px,2.4vw,40px) clamp(34px,3vw,50px);border-bottom:1px solid rgba(255,255,255,.16);border-right:1px solid rgba(255,255,255,.16);transition:background .4s}
.svc:nth-child(3n){border-right:0}
.svc:hover{background:rgba(255,255,255,.05)}
.svc .no{font-size:14px;font-weight:800;letter-spacing:.14em;color:#E24A4A}
.svc svg{position:absolute;right:clamp(22px,2.4vw,40px);top:clamp(28px,3vw,46px);width:40px;height:40px;fill:none;stroke:#9FB6F5;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s}
.svc:hover svg{transform:translateY(-4px)}
.svc h3{font-size:clamp(21px,1.8vw,27px);letter-spacing:-.03em;margin:22px 0 12px;color:#fff}
.svc p{margin:0;color:#AEB8D3;font-size:15.5px;line-height:1.8;max-width:420px}

/* 일하는 방식: 담율 소개 STEP 선 */
.hv-proc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.hv-proc::before{content:"";position:absolute;left:0;right:0;top:36px;height:2px;background:#D9DDE5}
.hv-proc::after{content:"";position:absolute;left:0;top:36px;height:2px;width:0;background:var(--navy);transition:width 1.6s cubic-bezier(.2,.8,.2,1) .2s}
.hv-proc.go::after{width:100%}
.hv-proc li{position:relative;padding-right:clamp(14px,2vw,36px)}
.hv-proc .dot{position:relative;z-index:1;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#fff;border:2px solid var(--navy);transition:background .3s}
.hv-proc li:hover .dot{background:var(--navy)}.hv-proc li:hover .dot svg{stroke:#fff}
.hv-proc .dot svg{width:30px;height:30px;fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hv-proc em{display:block;font-style:normal;font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--navy);margin:26px 0 8px}
.hv-proc b{display:block;font-size:clamp(19px,1.6vw,24px);letter-spacing:-.02em;margin-bottom:10px}
.hv-proc p{margin:0;color:var(--gray-500);font-size:15px;line-height:1.7}

/* 성공사례·Q&A 카드 */
.hs .cards{gap:22px}
.hs .card{border-radius:20px;transition:transform .3s,box-shadow .3s}
.hs a.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}

/* 후기 */
.hs .carousel{max-width:980px}

/* 마무리 */
.hv-cta{position:relative;color:#fff;padding:clamp(100px,11vw,180px) 0;overflow:hidden;background:#0B1633}
.hv-cta .bg{position:absolute;inset:0;background:url(/assets/img/city1.jpg) center/cover no-repeat;opacity:.35;filter:grayscale(.3)}
.hv-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,22,51,.95) 0%,rgba(11,22,51,.7) 60%,rgba(11,22,51,.5) 100%)}
.hv-cta .fw{z-index:2}
.hv-cta h2{font-size:clamp(38px,5.2vw,88px);line-height:1.15;letter-spacing:-.045em;margin:0 0 22px;font-weight:800}
.hv-cta h2 span{color:#9FB6F5}
.hv-cta p{color:#C9D0E3;font-size:clamp(16px,1.3vw,19px);margin:0 0 40px;max-width:640px;line-height:1.75}
.hv-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.hv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:190px;padding:18px 30px;border-radius:999px;background:#fff;color:var(--navy);font-weight:800;font-size:17px;text-decoration:none;transition:transform .25s,background .25s,color .25s}
.hv-btn:hover{transform:translateY(-3px)}
.hv-btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hv-btn.line{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}.hv-btn.line:hover{background:#fff;color:var(--navy)}
.hv-btn.kk{background:#FEE500;color:#191919}
.hv-cta small{display:block;color:#9AA5C2;font-size:14px;line-height:1.8}

/* 스크롤 등장 효과 (담율 소개와 동일) */
.rv-on .rv,.rv-on .rv-l,.rv-on .rv-r{opacity:0;transition:opacity .9s ease,transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.rv-on .rv{transform:translateY(48px)}
.rv-on .rv-l{transform:translateX(-80px)}
.rv-on .rv-r{transform:translateX(80px)}
.rv-on .in{opacity:1;transform:none}
.rv-on .hs .diag.rv.in:hover,.rv-on .hs a.card.rv.in:hover{transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){.rv-on .rv,.rv-on .rv-l,.rv-on .rv-r{opacity:1;transform:none;transition:none}.hv-media video,.hv-media img,.hv-form{animation:none}.hv-marquee .trk,.hv-scroll span{animation:none}.hv-proc::after{width:100%;transition:none}}

/* 오른쪽 빠른 메뉴와 겹치지 않도록 넓은 화면에서 좌우 여백 확보 */
@media (min-width:1181px){.fw{padding-left:max(4.5vw,104px);padding-right:max(4.5vw,104px)}.hv-scroll{right:110px}}

/* 반응형 */
@media (max-width:1180px){
 .hv-bar{flex-wrap:wrap;border-radius:24px;padding:14px}
 .hv-bar .hb-t{width:100%;border-right:0;padding:4px 8px 10px;margin:0;flex-direction:row;align-items:baseline;gap:10px}
 .hv-bar label.hb-f{flex:1 1 30%;border:1px solid #E3E6EC;border-radius:14px;margin:4px;padding:0 14px}
 .hv-bar label.hb-f:last-of-type{border-right:1px solid #E3E6EC}
 .hv-bar button[type=submit]{flex:1 1 100%;justify-content:center;padding:16px;margin:6px 4px 0;border-radius:14px}
 .hv-trust{grid-template-columns:repeat(2,minmax(0,1fr))}.hv-trust>div:nth-child(2){border-right:0}.hv-trust>div:nth-child(-n+2){border-bottom:1px solid #E3E6EC}
 .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.svc:nth-child(3n){border-right:1px solid rgba(255,255,255,.16)}.svc:nth-child(2n){border-right:0}
 .hv-proc{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}.hv-proc::before,.hv-proc::after{display:none}
 .hv-quick{display:none}
}
@media (max-width:1180px) and (min-width:961px){.hv-page .kakao-fab{display:flex}}
@media (max-width:900px){
 .hv-page .header .wrap,.hv-page .header.solid .wrap{height:64px}
 .hs-head{flex-direction:column;align-items:flex-start}
 .hv-scroll{display:none}
}
@media (max-width:640px){
 .hv-in{padding-top:110px;padding-bottom:26px}
 .hv-eye{font-size:11.5px;letter-spacing:.16em}
 .hv h1{font-size:clamp(32px,9vw,44px)}
 .hv-lead{font-size:15.5px;margin-bottom:20px}
 .hv-path{padding:12px 16px;font-size:15px}.hv-path small{display:none}
 .hv-direct{display:none}
 .hv-bar label.hb-f{flex:1 1 100%}
 .hv-bar .hb-f>span{min-width:52px}
 .hv-sub{padding:0 6px;flex-direction:column}
 .hv-trust{grid-template-columns:minmax(0,1fr)}.hv-trust>div{border-right:0;border-bottom:1px solid #E3E6EC}
 .svc-grid{grid-template-columns:minmax(0,1fr)}.svc,.svc:nth-child(3n){border-right:0}
 .hv-proc{grid-template-columns:minmax(0,1fr)}
 .hv-proc li{display:grid;grid-template-columns:60px minmax(0,1fr);column-gap:18px}.hv-proc .dot{width:56px;height:56px;grid-row:span 3}.hv-proc em{margin-top:2px}
 .rv-on .rv-l{transform:translateX(-40px)}.rv-on .rv-r{transform:translateX(40px)}
 .hv-btn{flex:1 1 100%}
 .hs-wm{display:none}
}