:root{ --navy:#212B3C; /* 컨셉 컬러 */ --navy-deep:#171E2A; --ink:#1B2430; --muted:#6B7688; --accent:#2F6BE5; --wrap:1180px; --nav-h:84px; --logo-a:#1B2A5E; /* 로고 국문 — 남색 */ --logo-b:#1B2A5E; /* 로고 영문 — 남색 */ } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased; /* 한글은 어절 단위로 끊어야 읽힙니다. 지금까지 p·li·td 처럼 요소마다 따로 걸어 왔는데 h3·small·dd 같은 빠진 요소에서는 글자 중간에서 끊겼습니다. 여기 한 줄로 전부 덮습니다. */ word-break:keep-all; /* 줄바꿈을 고르게 — 제목 마지막 줄에 한 글자만 남는 것을 막습니다. 모르는 브라우저는 무시하므로 위험이 없습니다. */ text-wrap:pretty; } /* 끊기면 안 되는 묶음 — 메인 키워드가 두 줄로 갈라지지 않게 합니다. 좁은 화면에서 '전국 건설업 / 면허' 로 끊기면 키워드가 둘로 쪼개집니다. */ .nw{white-space:nowrap} /* 제목은 줄 길이를 더 고르게 맞춥니다 */ h1,h2,h3,.lmi-t,.ah h1,.rghero h1{text-wrap:balance} /* 주소·코드처럼 끊어도 되는 것은 되돌립니다 — 긴 영문 주소가 칸을 넘지 않게 */ code,pre,.url,a[href^="http"]{word-break:break-word} a{color:inherit;text-decoration:none} ul{list-style:none} img{max-width:100%;display:block} /* ══════════ 상단 네비게이션 ══════════ */ .nav-wrap{ position:fixed;top:14px;left:0;right:0;z-index:100; display:flex;justify-content:center;padding:0 16px; } .nav{ display:flex;align-items:center; width:min(var(--wrap),100%);height:var(--nav-h); padding:0 12px 0 26px; border-radius:calc(var(--nav-h) / 2); background:rgba(255,255,255,.76); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%); box-shadow:0 8px 28px rgba(23,30,42,.14); transition:background .3s ease; } /* 크기는 그대로 두고, 스크롤하면 배경만 또렷해집니다 */ .nav-wrap.scrolled .nav{background:rgba(255,255,255,.93)} /* 히어로 위에 있을 때 — 영상이 비치는 반투명 유리 느낌 (넓은 화면) 히어로를 벗어나면 위의 흰 바탕으로 돌아갑니다. */ @media (min-width:981px){ .nav-wrap.on-hero .nav{ background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%); box-shadow:0 8px 28px rgba(10,14,22,.18); } .nav-wrap.on-hero{--logo-a:#FFFFFF;--logo-b:#FFFFFF} .nav-wrap.on-hero .menu a{color:#fff} .nav-wrap.on-hero .menu a:hover{color:#fff;background:rgba(255,255,255,.14)} .nav-wrap.on-hero .nav-cta{background:#fff;color:var(--navy);box-shadow:0 5px 16px rgba(10,14,22,.25)} .nav-wrap.on-hero .nav-cta:hover{background:#EEF1F6} } /* 좁은 화면 — 바는 반투명, 펼친 메뉴는 흰 바탕 그대로 */ @media (max-width:980px){ .nav-wrap.on-hero .nav{ background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%); box-shadow:none; } .nav-wrap.on-hero .brand{--logo-a:#FFFFFF;--logo-b:#FFFFFF} .nav-wrap.on-hero .burger{background:rgba(255,255,255,.16)} .nav-wrap.on-hero .burger span{background:#fff} } .nav,.brand .logo *,.menu a,.nav-cta{transition:background .3s ease, color .3s ease, fill .3s ease, box-shadow .3s ease} /* 로고 — 나우건설정보 벡터 원본 */ .brand{display:flex;align-items:center;flex:0 0 auto} .brand .logo{height:34px;width:auto;display:block} /* 메뉴 */ .menu{display:flex;align-items:center;gap:6px;margin:0 auto} .menu a{ display:block;padding:10px 16px;border-radius:999px; font-size:18px;font-weight:700;letter-spacing:-.03em;color:#212B3C; white-space:nowrap;transition:color .18s, background .18s; } .menu a:hover{color:#171E2A;background:rgba(33,43,60,.09)} .menu a[aria-current="page"]{color:#171E2A;background:rgba(33,43,60,.12)} .menu .m-cta{display:none} /* 오른쪽 상담 버튼 — 아이콘 위, 글자 아래 */ .nav-cta{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; flex:0 0 auto;min-width:96px;height:60px;padding:0 20px; border-radius:999px;background:var(--navy);color:#fff; font-size:13.5px;font-weight:700;letter-spacing:-.02em;line-height:1.2; box-shadow:0 5px 16px rgba(33,43,60,.3); transition:background .2s, transform .2s, box-shadow .2s; } .nav-cta svg{width:19px;height:19px} .nav-cta:hover{background:var(--navy-deep);transform:translateY(-1px);box-shadow:0 8px 22px rgba(33,43,60,.36)} /* 햄버거 */ .burger{ display:none;width:46px;height:46px;flex:0 0 auto;margin-left:auto; border:0;border-radius:50%;background:rgba(33,43,60,.07); cursor:pointer;position:relative; } .burger span{ position:absolute;left:14px;width:18px;height:2px;border-radius:2px;background:var(--navy); transition:transform .25s, opacity .2s; } .burger span:nth-child(1){top:18px} .burger span:nth-child(2){top:24px} .burger span:nth-child(3){top:30px} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} @media (max-width:1180px){ .menu{gap:0} .menu a{padding:10px 12px;font-size:17px} .nav{padding-left:20px} .brand .logo{height:30px} } @media (max-width:980px){ :root{--nav-h:72px} .nav{padding:0 10px 0 18px} .burger{display:block} .nav-cta{display:none} .menu{ position:absolute;top:calc(100% + 10px);left:0;right:0; flex-direction:column;align-items:stretch;gap:2px;margin:0; padding:14px;border-radius:26px; background:#fff; border:1px solid rgba(33,43,60,.08); box-shadow:0 14px 40px rgba(23,30,42,.16); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .22s, transform .22s, visibility .22s; } .menu.open{opacity:1;visibility:visible;transform:translateY(0)} .menu a{padding:13px 16px;border-radius:14px;font-size:16px} .menu .m-cta{ display:block;margin-top:6px;background:var(--navy);color:#fff; text-align:center;font-weight:700; } .menu .m-cta:hover{background:var(--navy-deep);color:#fff} } /* ══════════ 히어로 ══════════ */ .hero{ position:relative;height:100vh;height:100svh;min-height:620px; display:flex;align-items:center; overflow:hidden;background:#212B3C;color:#fff; } .hero video{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;opacity:0;transition:opacity 1.2s ease; will-change:opacity; } .hero video.show{opacity:1} /* 글씨가 읽히도록 어두운 층을 덮습니다 */ .hero .ov{ position:absolute;inset:0; background: linear-gradient(180deg,rgba(20,26,37,.52) 0%,rgba(20,26,37,.34) 24%,rgba(20,26,37,.34) 62%,rgba(20,26,37,.58) 100%); } .hero .wrap{ position:relative;z-index:2; width:min(var(--wrap),100%);margin-inline:auto;padding:78px 26px 0; display:flex;flex-direction:column;align-items:center;text-align:center; } /* 파티클 로고 */ .hero-logo{ position:relative;width:min(560px,80vw);height:clamp(150px,22vw,260px); margin-bottom:30px; } .hero-logo canvas{position:absolute;inset:0;width:100%;height:100%} /* 문구 — 영상이 바뀔 때 같이 교차됩니다 */ .hcaps{display:grid;width:100%;justify-items:center} .hcap{grid-area:1/1;opacity:0;transition:opacity 1.2s ease;pointer-events:none} .hcap.show{opacity:1;pointer-events:auto} .hcap .sm{ font-size:clamp(19px,2.4vw,30px);font-weight:500;letter-spacing:-.01em; color:rgba(255,255,255,.95); } /* .hcap-t 는 둘째 슬라이드의 큰 글자입니다 — 제목 태그가 아니라 h1 과 크기만 맞춘 칸입니다. h1 은 페이지마다 하나여야 하므로(네이버가 둘 이상을 오류로 봅니다) 태그를 쓰지 않습니다. */ .hcap h1,.hcap .hcap-t{ margin-top:12px; font-size:clamp(34px,5.2vw,62px);font-weight:900;line-height:1.28;letter-spacing:-.025em; color:#fff; } .hcap .sub{ margin-top:22px; font-size:clamp(15px,1.7vw,19px);font-weight:500;color:rgba(255,255,255,.85); } .hcap .btns{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center} .hcap .btn{ position:relative;overflow:hidden;isolation:isolate; display:inline-flex;align-items:center;gap:9px; padding:13px 26px;border-radius:8px; font-size:15.5px;font-weight:700; background:#fff;color:var(--navy);border:1.5px solid var(--navy); transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease; } .hcap .btn svg{width:18px;height:18px;flex:none;transition:stroke .22s ease} /* 글자와 아이콘은 광택 위에 올립니다 */ .hcap .btn svg, .hcap .btn .t{position:relative;z-index:1} /* 광택 — 마우스를 올리면 빛이 한 번 스쳐 지나갑니다 */ .hcap .btn::after{ content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;z-index:0; background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent); transform:skewX(-18deg); } .hcap .btn:hover{ background:var(--navy);color:#fff;border-color:#fff; transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,20,30,.45); } .hcap .btn:hover svg{stroke:#fff} .hcap .btn:hover::after{animation:btnShine .7s ease} @keyframes btnShine{from{left:-70%}to{left:130%}} @media (prefers-reduced-motion:reduce){ .hcap .btn:hover::after{animation:none} } @media (max-width:980px){ .hero{min-height:560px} .hero .wrap{padding:70px 22px 0} .hero-logo{margin-bottom:24px} .hcap .btns{margin-top:28px} } /* ══════════ 상담 CTA 배경 — 모바일은 가벼운 전용 파일 ══════════ */ @media (max-width:760px){ section.ctab.bg-on{background-image:url('https://img.baronowmap.com/cta-bg-v2-m.webp')} } /* ══════════ 자주 묻는 질문 ══════════ baronow2.com 형식 그대로. 원본은 5문항 기준 560px 라, 6문항에서는 펼친 카드가 잘리지 않게 높입니다. (좁은 화면에서는 원본 규칙대로 높이 자동) */ @media (min-width:961px){ .faqs .hfa{height:640px} } /* ══════════ 푸터 채널 — 아이콘만 표시 ══════════ 이름은 aria-label·title·alt 에 남겨 스크린리더와 검색엔진이 읽습니다. */ footer .channels{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} footer .channels a.ch{ width:44px;height:44px;padding:0;gap:0;justify-content:center;border-radius:50%; } footer .channels a.ch .ic{width:28px;height:28px;border-radius:7px;overflow:hidden} footer .channels a.ch .ic img{width:16px;height:16px} /* 로고 타일은 칸을 꽉 채웁니다 — 모두 연말결산 전문 로고와 같은 28px */ footer .channels a.ch .ic.full{padding:0;background:none} footer .channels a.ch .ic.full img{width:28px;height:28px;border-radius:0} /* 푸터 관리자 링크 — baronow2.com 과 같은 테두리 칩 */ footer .copy .admin-link{ display:inline-block;border:1px solid rgba(255,255,255,.28);border-radius:5px; padding:1px 9px;font-size:12px;margin-right:4px;color:inherit;vertical-align:1px; } footer .copy .admin-link:hover{border-color:rgba(255,255,255,.55);color:#fff} /* 공식 홈페이지는 원래 로고(흰 원형) 그대로 */ footer .channels a.ch .ic.home{border-radius:50%} footer .channels a.ch .ic.home img{width:28px;height:28px} @media (max-width:980px){ footer .channels{display:flex} footer .channels a.ch{width:42px;height:42px} } /* 임시 확인용 */ .band{padding:90px 20px;background:#F6F8FC;text-align:center;color:var(--muted)} /* ══════════ 메인 — PC 는 한 번에 한 화면씩 스크롤 ══════════ */ @media (min-width:961px) and (min-height:640px){ html:has(.hero){scroll-snap-type:y mandatory} .hero, body:has(.hero) .hk, body:has(.hero) .sol, body:has(.hero) .lc, body:has(.hero) .ctab, body:has(.hero) .co-loc, body:has(.hero) .faqs, body:has(.hero) .orgs{scroll-snap-align:start;scroll-snap-stop:always} body:has(.hero) footer{scroll-snap-align:end} } @property --a{syntax:'';initial-value:0deg;inherits:false} @keyframes ttlType{from{max-width:0}to{max-width:720px}} @keyframes ttlCaret{50%{border-color:transparent}} @keyframes btnspin{to{--a:360deg}} .wrap{max-width:1180px;margin:0 auto;padding:0 24px} .rv{opacity:0;transform:translateY(64px) scale(.96);transition:opacity 1.1s cubic-bezier(.34,1.4,.44,1),transform 1.1s cubic-bezier(.34,1.4,.44,1)} .rv.in{opacity:1;transform:none} .rv.d1{transition-delay:.15s} .rv.d2{transition-delay:.35s} .rv.d3{transition-delay:.55s} .rv.d4{transition-delay:.75s} .rv.in .simg{transform:scale(1)} @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} } .loc .lw1{display:inline-block;opacity:0;transform:translateY(-34px);transition:all .8s cubic-bezier(.22,1,.36,1) .1s} .loc .lw2{display:inline-block;opacity:0;transform:translateY(34px);transition:all .8s cubic-bezier(.22,1,.36,1) .1s} .loc.on .lw1, .loc.on .lw2{opacity:1;transform:none} .loc .loc-sub{opacity:0;transition:opacity .6s ease .55s} .loc.on .loc-sub{opacity:1} .loc .loc-map{clip-path:circle(0% at 50% 50%);transition:clip-path 1.2s cubic-bezier(.65,0,.35,1) .35s} .loc.on .loc-map{clip-path:circle(75% at 50% 50%)} .loc .loc-info{opacity:0;transform:translateY(26px);transition:all .8s ease .85s} .loc.on .loc-info{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .loc .lw1, .loc .lw2, .loc .loc-sub, .loc .loc-info{opacity:1;transform:none;transition:none} .loc .loc-map{clip-path:none;transition:none} } .ttl-pop{overflow:hidden} .ttl-pop span{display:inline-block;transform:translateY(115%);transition:transform .85s cubic-bezier(.22,1,.36,1) .1s} .tsec.on .ttl-pop span{transform:none} @media (prefers-reduced-motion:reduce){ .ttl-pop span{transform:none;transition:none} } .tsec.on .ttl-type{animation:ttlType 1.3s steps(30,end) .15s both, ttlCaret .8s step-end 6} @media(max-width:760px){ .tsec.on .ttl-type{animation:none;opacity:1;transition:opacity .7s} } .sec-title{font-size:clamp(24px,2.8vw,34px);font-weight:800;color:#1A2233;letter-spacing:-.02em;line-height:1.4} .sec-sub{margin-top:10px;color:#67707F;font-size:15.5px} .ctab{position:relative;min-height:100vh;display:flex;align-items:center;color:#fff;padding:90px 0;box-sizing:border-box; background:#020309 center/cover no-repeat} .ctab.bg-on{background-image:url('https://img.baronowmap.com/cta-bg-v2.webp')} .ctab::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,26,37,.86) 0%,rgba(23,30,42,.62) 40%,rgba(26,33,46,.28) 68%,rgba(23,30,42,.34) 100%)} .ctab-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:60px;width:100%} .ct-eyebrow{font-size:15.5px;font-weight:700;color:#E8ECF5} .ct-sub{margin-top:22px;font-size:17px;color:#D7DEEC;font-weight:500} .ctab .roll{display:inline-block;position:relative;height:1.38em;overflow:hidden;vertical-align:bottom;color:#FFC94A;text-align:left} .ctab .roll span{position:absolute;left:0;top:0;opacity:0;transform:translateY(105%);transition:all .5s cubic-bezier(.22,1,.36,1)} .ctab .roll span.on{opacity:1;transform:none} .ctab .roll span.out{opacity:0;transform:translateY(-105%)} .ctab-txt h2{margin-top:20px;font-size:clamp(30px,3.6vw,50px);font-weight:800;letter-spacing:-.02em;line-height:1.38} .ctab-btn{position:relative;display:inline-flex;align-items:center;gap:14px;flex:none;margin-top:34px;padding:19px 38px;border-radius:999px;overflow:hidden;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:17px;color:#fff;background:transparent} .ctab-btn::before{content:"";position:absolute;inset:0;border-radius:999px;background-image:conic-gradient(from var(--a,0deg),transparent 0 300deg,#7FB0FF 330deg,#fff 345deg,transparent 360deg);animation:btnspin 3.2s linear infinite} .ctab-btn::after{content:"";position:absolute;inset:2px;border-radius:999px;background:#171E2A;transition:background .3s ease} .ctab-btn:hover::after{background:#2E3A50} .ctab-btn>*{position:relative;z-index:1} .ctab-btn .st{display:inline-flex} .ctab-btn .st b{position:relative;display:inline-block;overflow:hidden;height:1.3em;font-weight:800} .ctab-btn .st b u{display:block;text-decoration:none;transition:transform .45s cubic-bezier(.65,0,.35,1)} .ctab-btn .st b u:nth-child(2){position:absolute;left:0;top:100%;color:#FFC94A} .ctab-btn:hover .st b u{transform:translateY(-100%)} .ctab-btn i{font-style:normal;font-size:19px;transition:transform .3s ease} .ctab-btn:hover i{transform:rotate(45deg)} @media (prefers-reduced-motion:reduce){ .ctab-btn::before{animation:none} .ctab-btn .st b u{transition:none} } @media(max-width:900px){ .ctab-in{flex-direction:column;align-items:flex-start;gap:36px} } .faqs{background:#EEF2F8;padding:92px 0} .faq-grid{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:start} .faq-head .sec-sub{white-space:nowrap} .faq-head .sec-sub{margin-top:12px} .hfa{display:flex;flex-direction:column;gap:12px;height:560px} .hfa-item{position:relative;flex:1 1 0;min-height:64px;border-radius:16px;background:#fff;overflow:hidden;cursor:pointer;transition:flex-grow .55s cubic-bezier(.22,1,.36,1);box-shadow:0 4px 14px rgba(10,25,58,.06)} .hfa-item.act{flex-grow:5.4;cursor:default} .hfa-closed{position:absolute;inset:0;display:flex;flex-direction:row;align-items:center;gap:18px;padding:0 28px;transition:opacity .3s ease} .hfa-closed .no{font-size:14px;font-weight:700;color:#8A94A6} .hfa-closed .q{font-size:16.5px;font-weight:700;color:#1A2233;letter-spacing:-.01em} .hfa-closed .q b{color:#2E6BE6} .hfa-closed::after{content:"↓";margin-left:auto;color:#B9C2CF;font-size:17px} .hfa-item.act .hfa-closed{opacity:0;pointer-events:none} .hfa-open{position:absolute;inset:0;background:linear-gradient(160deg,#2B3649 0%,#212B3C 100%);color:#fff;padding:30px 38px;display:flex;flex-direction:column;opacity:0;transition:opacity .4s ease .15s;pointer-events:none} .hfa-item.act .hfa-open{opacity:1;pointer-events:auto} .hfa-arrow{position:absolute;top:24px;right:30px;font-size:22px} .hfa-open .tag{font-size:12.5px;font-weight:700;letter-spacing:.1em;color:#8FB0E8} .hfa-open h3{margin-top:10px;font-size:23px;font-weight:800;letter-spacing:-.02em} .hfa-open p{margin-top:13px;font-size:14.5px;line-height:1.75;color:#C9D4E8;max-width:640px;word-break:keep-all} .hfa-cta{margin-top:auto;align-self:flex-start;background:none;border:0;border-bottom:1.5px solid rgba(255,255,255,.6);color:#fff;font:inherit;font-size:14.5px;font-weight:700;padding:0 2px 7px;cursor:pointer} .hfa-cta:hover{border-color:#fff} @media(max-width:960px){ .faq-grid{grid-template-columns:1fr;gap:26px} .hfa{height:auto} .hfa-item{flex:none;transition:none} .hfa-closed{position:static;padding:18px 20px} .hfa-open{position:static;padding:0 20px;height:0;overflow:hidden;transition:none} .hfa-item.act .hfa-open{height:auto;padding:4px 20px 24px} .hfa-item.act .hfa-closed{opacity:1;pointer-events:auto} .hfa-open h3{font-size:19px} .hfa-arrow{display:none} } .loc{background:#fff;padding:78px 0 90px;background:#F5F7FB} .loc-wrap{max-width:1120px;margin:0 auto;padding:0 28px} .loc-head{text-align:center;margin-bottom:44px} .loc-head h2{font-size:clamp(27px,3.3vw,38px);font-weight:800;color:#0F2233;letter-spacing:-.03em} @media(max-width:640px){ .loc-head h2{font-size:19px;word-break:keep-all} .loc-sub{word-break:keep-all} } .loc-head .loc-sub{margin-top:5px;font-size:16px;color:#5C6B7C} .loc-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;align-items:stretch} .loc-map{border-radius:20px;overflow:hidden;box-shadow:0 20px 44px rgba(33,43,60,.13);min-height:400px;background:#E6ECF3} .loc-map iframe{width:100%;height:100%;min-height:400px;border:0;display:block} .loc-info{background:#fff;border:1px solid #E7EDF5;border-radius:20px;padding:36px 34px;display:flex;flex-direction:column} .loc-info .li-name{font-size:20px;font-weight:800;color:#12233A;margin-bottom:18px} .li-row{display:flex;gap:12px;margin-bottom:16px} .li-row .li-ic{width:38px;height:38px;border-radius:11px;background:#EAF1FB;color:var(--navy);display:flex;align-items:center;justify-content:center;flex:none} .li-row .li-ic svg{width:20px;height:20px} .li-row .li-t{font-size:12px;font-weight:700;color:#8593A6;letter-spacing:.02em;margin-bottom:3px} .li-row .li-v{font-size:15px;color:#2D3A49;line-height:1.55;font-weight:500} .li-v a:hover{color:#2E6BE6} .map-btns{margin-top:auto;padding-top:22px;display:flex;gap:10px;flex-wrap:wrap} .map-btn{flex:1;min-width:96px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:13px;border:1px solid #E5EAF2;background:#fff;font-size:13px;font-weight:700;color:#33414F;transition:.15s} .map-btn:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(15,34,51,.1)} .mb-ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;color:#fff} .mb-naver{background:#03C75A} .mb-kakao{background:#FEE500;color:#3A1D1D} .mb-google{background:#fff;border:1px solid #E3E9F2;color:#4285F4} @media(max-width:820px){ .loc{background:#fff;padding:54px 0 64px} .loc-head{margin-bottom:32px} .loc-grid{grid-template-columns:1fr;gap:18px} .loc-map{min-height:300px} .loc-map iframe{min-height:300px} } .ftop{position:relative} .fnav{position:absolute;left:50%;top:10px;transform:translateX(-50%);display:flex;gap:30px;white-space:nowrap} @media(max-width:1080px){ .fnav{position:static;transform:none;margin:0 0 18px;flex-wrap:wrap;gap:16px} } .fnav a{color:#C7D3E4;font-size:15px;font-weight:700;letter-spacing:-.01em} .fnav a:hover{color:#fff} footer{--fmut:#C7D3E4;--fmut2:#C7D3E4;--fline:rgba(199,211,228,.28);--accent:#2E6BE6;--accent2:#2558C4} footer{color:#C7D3E4} .ch{color:#fff} .company .line, .company .line b, .clabel, .copy, .copy b, .policy, .policy a{color:#C7D3E4} footer{background:linear-gradient(180deg,#2B3649 0%,#212B3C 52%,#171E2A 100%);color:var(--fmut)} .fwrap{max-width:1200px;margin:0 auto;padding:44px 28px 40px} .channels{display:flex;gap:6px;flex-wrap:nowrap;justify-content:center;margin:0;overflow-x:auto;padding-bottom:2px} @media(max-width:560px){ .channels{display:grid;grid-template-columns:repeat(3,1fr);gap:7px} .channels .ch{justify-content:flex-start;font-size:11px;font-weight:600;padding:6px 6px;gap:6px;letter-spacing:-.02em;white-space:nowrap} .channels .ic{width:18px;height:18px;border-radius:5px} .channels .ic img, .channels .ic svg{width:12px;height:12px} } .ch{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--fline);border-radius:999px;padding:6px 11px 6px 6px;font-size:12.5px;font-weight:600;color:#fff;transition:.15s;white-space:nowrap} .ch:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff} .ic{width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden} .ic img{width:15px;height:15px;display:block} .ic svg{width:15px;height:15px;display:block} .ic.home{background:#fff;border-radius:50%} .ic.home img{width:26px;height:26px} .ic .blog{color:#fff;font-weight:800;font-size:9px;letter-spacing:-.4px} .divider{height:1px;background:var(--fline);margin:26px 0} .ftop{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap} .foot-logo{height:26px;width:auto;display:block;margin-bottom:14px} /* footer 의 text-align:center 가 여기까지 내려와 라벨(min-width:96px)이 가운데로 밀렸습니다. 회사 정보는 읽는 글이라 왼쪽에 맞춥니다. */ .company{text-align:left} .company .line{font-size:12px;line-height:2.0;color:var(--fmut)} .company .line b{color:#C7D3E4;font-weight:600;display:inline-block;min-width:96px} .company .line a:hover{color:#fff} .consult{text-align:right;flex:none} .clabel{font-size:13px;color:var(--fmut2);font-weight:600;margin-bottom:7px} .cnum{font-size:28px;font-weight:800;color:#fff;letter-spacing:-.01em;line-height:1.05} .cnum a{color:#fff} /* 상담 신청 — 문의 신청 섹션의 버튼과 같은 모양(테두리를 도는 빛) */ .fcta{margin-top:16px;padding:15px 30px;font-size:15.5px;gap:12px} .fcta i{font-size:17px} .fbot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} .policy{display:flex;gap:24px;font-size:13.5px;color:#DCE4F0;font-weight:600} .policy a:hover{color:#fff} .copy{font-size:12.5px;color:var(--fmut2);line-height:1.9;text-align:right} .copy b{color:var(--fmut);font-weight:600} @media(max-width:760px){ .ftop{flex-direction:column;gap:24px} .consult{text-align:left} .fbot{flex-direction:column;align-items:flex-start} .copy{text-align:left} .fwrap{padding:38px 20px 34px} } .orgs{padding:44px 0 56px;background:#F5F7FB;overflow:hidden} .orgs-head{text-align:center;margin-top:14px;margin-bottom:26px;padding:0 28px} .orgs-badge{display:inline-block;color:#212B3C;font-size:16px;font-weight:800;letter-spacing:-.01em} .orgs-head h2{font-size:clamp(26px,3.2vw,36px);font-weight:800;color:#0F2233;letter-spacing:-.03em} .orgs-head p{margin-top:12px;font-size:15.5px;color:#5C6B7C} .marquee{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:0 8px} .mq-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .marquee-track{display:flex;gap:14px;width:max-content;will-change:transform} .org-card{flex:none;width:210px;height:92px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #E7EDF5;border-radius:14px;padding:16px 22px;transition:border-color .15s, box-shadow .15s} .org-card:hover{border-color:#C3D3EC;box-shadow:0 12px 26px rgba(15,34,51,.1)} .org-card img{max-width:100%;max-height:48px;width:auto;object-fit:contain;display:block} .mq-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid #E1E8F2;color:#212B3C;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 20px rgba(15,34,51,.14);transition:.15s} .mq-arrow:hover{background:#212B3C;border-color:#212B3C;color:#fff} .mq-arrow svg{width:22px;height:22px} .mq-prev{left:-6px} .mq-next{right:-6px} @media(max-width:640px){ .orgs{padding:34px 0 44px} .org-card{width:176px;height:84px} .mq-arrow{width:40px;height:40px} } .mbr{display:none} @media(max-width:600px){ .li-v{font-size:13.5px;word-break:keep-all;letter-spacing:-.02em} .ct-eyebrow{font-size:clamp(11px,3vw,13px);white-space:nowrap;letter-spacing:-.04em} .ctab h2{font-size:clamp(20px,6vw,26px);line-height:1.4} .ctab h2 br{display:inline} .ctab h2 .roll{white-space:nowrap} } @media(max-width:370px){ .li-row .li-v{font-size:12.5px;letter-spacing:-.03em} } .flg1{fill: #ffffff;} .flg1, .flg2{stroke-width: 0px;} .flg2{fill: #9CB0CE;} .mbr{display:none} @media(max-width:900px){ .g-feat .ic{flex:0 0 56px;height:56px} .g-feat .ic svg{width:30px!important;height:30px!important} .chart{position:static;height:auto;margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch} .chart svg.lines, .chart .dot, .chart .opill{display:none} .chart .ceo{position:static;grid-column:1/-1;width:120px;height:120px;margin:0 auto 4px;opacity:1;transform:none;animation:none} .chart .ceo b{font-size:21px} .chart .ceo small{font-size:9px} .chart .node{position:static;left:auto;top:auto;translate:0 0;width:100%;transform:none;opacity:1;animation:none!important;padding:12px 10px;text-align:center} .chart .node .en{font-size:9.5px;letter-spacing:1px} .chart .node .ko{font-size:15px;margin-top:4px} .chart .node.n-coo{grid-column:1/-1;background:linear-gradient(135deg,#16223a,#121c30);border-color:rgba(20,174,181,.45)} .chart .node.staff{background:#141e30} .chart .node.dept{grid-column:1/-1;width:100%;text-align:left;display:block;padding:12px 14px;border-left:3px solid #14AEB5} .chart .node.dept .en{font-size:9.5px} .chart .node.dept .ko{font-size:15px} .chart .node.dept::after{content:"영업팀 · 실사팀 · 공무팀";display:block;margin-top:6px;padding-top:6px;border-top:1px dashed rgba(199,211,228,.18);font-size:11.5px;color:#9FB0CC;letter-spacing:0} .chart .node.n-d3::after{content:"진단팀 · 기장팀 · 전략기획팀 · 경영지원팀"} .def-grid{grid-template-columns:1fr!important;gap:26px} .def-img img{height:240px} .faq-grid{grid-template-columns:1fr!important;gap:22px;padding:0 20px} .faq-head p{white-space:normal} .def{padding:56px 0 48px} .mini{padding:60px 0} .def .sfade[style*="margin-top:56px"]{margin-top:28px!important;line-height:2!important} .mbr{display:inline} .mini-in>a{margin-top:24px} .company .line .adr{display:inline-block;vertical-align:top} .def, .mini, .loc{overflow-x:hidden} .loc-grid{width:100%;min-width:0} .loc-map, .loc-info{max-width:100%;min-width:0} .ctab-txt{max-width:100%;min-width:0} .mini-in>div>b{font-size:min(20px,5vw)!important} .mini-in{display:block} .mini-in>div{max-width:100%;min-width:0} .mini-in>div>span{display:block;max-width:100%} .hfa{height:auto!important} .hfa-item{flex:none!important;min-height:0;height:auto;transition:none} .hfa-closed{position:static!important;opacity:1!important;pointer-events:auto!important} .hfa-open{position:static!important;height:0;overflow:hidden;opacity:1!important;transition:none;padding:0 18px} .hfa-item.act .hfa-open{height:auto;padding:4px 18px 22px} .hfa-arrow{display:none} .hfa-open h3{font-size:18px} .hfa-open p{max-width:none} .hfa-cta{margin-top:14px} .hfa-closed{padding:16px 18px;gap:12px} .hfa-closed .q{font-size:15px;white-space:normal;word-break:keep-all;line-height:1.5} .hfa-open{padding:0 18px} .hfa-item.act .hfa-open{padding:4px 18px 22px} } .mbr-s{display:none} @media(max-width:370px){ .mbr-s{display:inline} } .mbr-m, .mbr-l{display:none} @media(min-width:371px) and (max-width:900px){ .mbr-m{display:inline} } @media(min-width:400px) and (max-width:900px){ .mbr-l{display:inline} } .mbr-x{display:none} @media(max-width:399px){ .mbr-x{display:inline} } .mbr-n{display:none} @media(min-width:371px) and (max-width:399px){ .mbr-n{display:inline} } .cmodal{position:fixed;inset:0;z-index:210;background:rgba(15,20,30,.62);display:flex;align-items:center;justify-content:center;padding:20px} .cmodal[hidden]{display:none} .cmodal .cbox{background:#fff;color:#2B3240;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;border-radius:20px;padding:30px 30px 26px;position:relative} .cmodal h3{font-size:22px;font-weight:800;color:#1A2233;letter-spacing:-.02em} .cmodal .cbanner{display:block;width:calc(100% + 60px);max-width:none;height:auto;margin:16px -30px 0;border-radius:0} .cmodal .cx{position:absolute;top:24px;right:24px;width:36px;height:36px;border-radius:50%;background:#EEF1F7;border:0;font-size:20px;line-height:1;cursor:pointer;color:#2B3240;display:flex;align-items:center;justify-content:center} .cmodal .cx:hover{background:#E1E6EF} .cmodal label{display:block;font-size:13px;font-weight:700;color:#3A4354;margin:17px 0 7px} .cmodal input[type=text],.cmodal input[type=tel],.cmodal select,.cmodal textarea{width:100%;border:1px solid #D9DEE8;border-radius:10px;padding:13px 14px;font:inherit;font-size:15px;background:#fff;color:#2B3240} .cmodal select:invalid{color:#9AA3B2} .cmodal textarea{height:96px;resize:vertical} .cmodal input:focus,.cmodal select:focus,.cmodal textarea:focus{outline:2px solid var(--navy);outline-offset:-1px} .cmodal .chp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .cmodal .cag{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:#4A5364;margin-top:16px} .cmodal .cag input{margin-top:2px;width:16px;height:16px;flex:none} .cmodal .cag label{margin:0;font-weight:400;font-size:13px;color:#4A5364} .cmodal .cerr{min-height:0;margin-top:10px;font-size:13.5px;color:#D14343} .cmodal .cerr:empty{display:none} .cmodal .csec{display:flex;align-items:center;gap:9px;margin:14px 0 0;padding:11px 14px;border:1px solid #E3E8F0;border-radius:10px;background:#F6F8FC;font-size:13px;color:#4A5364;letter-spacing:-.01em} .cmodal .csec svg{width:18px;height:18px;flex:none;fill:none;stroke:#2E9E5B;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .cmodal .csec b{color:#1A2233;font-weight:800} /* 상담 신청하기 — 마우스를 올리면 대각선 빛살이 지나갑니다 */ .cmodal .csend{position:relative;overflow:hidden;isolation:isolate;margin-top:18px;width:100%;background:var(--navy);color:#fff;border:0;border-radius:12px;padding:17px;font:inherit;font-weight:800;font-size:16px;cursor:pointer;transition:background .25s,transform .25s,box-shadow .25s} .cmodal .csend .t{position:relative;z-index:1} .cmodal .csend::after{content:"";position:absolute;top:0;left:-45%;width:32%;height:100%;z-index:0;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 30%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.12) 70%,transparent);transform:skewX(-28deg)} .cmodal .csend:hover{background:var(--navy-deep);transform:translateY(-2px);box-shadow:0 12px 26px rgba(8,12,33,.3)} .cmodal .csend:hover::after{animation:csendShine .85s cubic-bezier(.4,0,.2,1)} @keyframes csendShine{from{left:-45%}to{left:125%}} @media (prefers-reduced-motion:reduce){.cmodal .csend:hover::after{animation:none}} .cmodal .csend:disabled{opacity:.6;cursor:default} .cmodal .cok{text-align:center;padding:36px 0 20px;color:var(--navy)} .cmodal .cok svg{margin:0 auto} .cmodal .cok b{display:block;font-size:19px;color:var(--navy);margin-top:12px} .cmodal .cok p{margin-top:6px;font-size:14px;color:#67707F} body.cm-open{overflow:hidden} @media (max-width:600px){ .cmodal{padding:10px} .cmodal .cbox{padding:22px 16px 20px;border-radius:16px} .cmodal .cbanner{width:calc(100% + 32px);margin:14px -16px 0} .cmodal .cx{top:12px;right:12px;width:44px;height:44px;font-size:26px} .cmodal .cag{align-items:center;font-size:12.5px;letter-spacing:-.02em} .cmodal .cag input{margin-top:0;width:18px;height:18px} .cmodal .m-hide{display:none} .cmodal .csec{font-size:12.5px;padding:10px 12px;letter-spacing:-.03em} } .policy-page{background:#F5F7FB;padding:150px 0 90px} .policy-page .pl-wrap{width:min(900px,100%);margin:0 auto;padding:0 22px} .policy-page h1{font-size:clamp(26px,3.4vw,36px);font-weight:800;letter-spacing:-.03em;color:var(--navy)} .policy-page .pl-date{margin-top:8px;color:var(--muted);font-size:14px} .policy-page .pl-card{margin-top:26px;background:#fff;border-radius:18px;padding:34px 36px;box-shadow:0 2px 12px rgba(23,30,42,.05)} .policy-page .pl-card h2{font-size:18px;font-weight:800;color:var(--navy);margin:34px 0 12px;padding-top:26px;border-top:1px solid #E8ECF3} .policy-page .pl-card h2:first-of-type{margin-top:26px} .policy-page .pl-card h3{font-size:15.5px;font-weight:700;color:#2B3649;margin:18px 0 8px} .policy-page .pl-card p{font-size:15px;line-height:1.85;color:#3A4354;margin:4px 0;word-break:keep-all} .policy-page .pl-card p.pl-o{position:relative;padding-left:16px;margin-top:10px;font-weight:600;color:#2B3649} .policy-page .pl-card p.pl-o::before{content:"";position:absolute;left:3px;top:.8em;width:5px;height:5px;border-radius:50%;background:var(--navy)} .policy-page .pl-card p.pl-d{padding-left:16px;color:#4A5364} .policy-page .pl-card p.pl-d::before{content:"- ";margin-left:-12px} .policy-page .pl-card p.pl-n{padding-left:16px;text-indent:-16px;margin-left:16px} .policy-page .pl-card a{color:var(--accent);text-decoration:underline} @media (max-width:760px){ .policy-page{padding:110px 0 60px} .policy-page .pl-card{padding:24px 20px;border-radius:14px} } /* ══════════ 회사소개 — 히어로 ══════════ */ .co-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .co-hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;display:grid;place-items:center;color:#fff;background:#0B1020} .co-hero-bg{position:absolute;inset:0;overflow:hidden} .co-hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .co-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,30,42,.30) 0%,rgba(23,30,42,0) 35%,rgba(23,30,42,.35) 100%),rgba(33,43,60,.58)} .co-hero-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:80px 20px 0;width:100%;box-sizing:border-box} .co-plate{margin:0;position:relative;background:#171E2A;padding:clamp(24px,3.6vw,72px) clamp(26px,5vw,104px);width:min(90vw,max(820px,54vw),1100px);box-sizing:border-box; animation:coCurtain 1.15s cubic-bezier(.77,0,.18,1) .25s both} .co-plate-logo{display:block;overflow:hidden} .co-plate .logo{display:block;width:100%;height:auto;--logo-a:#fff;--logo-b:#fff;animation:coRise 1s cubic-bezier(.22,1,.36,1) .8s both} .co-hero-desc{margin:clamp(28px,3.4vw,64px) 0 0;text-align:center;font-size:clamp(16px,1.5vw,28px);line-height:1.9;font-weight:500;letter-spacing:-.015em;text-shadow:0 1px 14px rgba(0,0,0,.45)} .co-hero-desc .ln{display:block;overflow:hidden} .co-hero-desc .ln>span{display:inline-block;animation:coRise 1s cubic-bezier(.22,1,.36,1) both} .co-hero-desc .ln:nth-child(1)>span{animation-delay:1.3s} .co-hero-desc .ln:nth-child(2)>span{animation-delay:1.42s} .co-hero-desc .ln:nth-child(3)>span{animation-delay:1.54s} @keyframes coCurtain{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}} @keyframes coRise{from{transform:translateY(105%)}to{transform:translateY(0)}} @media (max-width:640px){ .co-hero-desc{max-width:360px;font-size:16px;line-height:1.85} .co-hero-desc .ln{display:inline} } @media (prefers-reduced-motion:reduce){ .co-plate,.co-plate .logo,.co-hero-desc .ln>span{animation:none} } /* ══════════ 회사소개 — 업무 분야 카드 ══════════ */ .co-biz{--pl:max(64px,calc((100vw - 1320px)/2));position:relative;background:#EEF0F4;min-height:100vh;min-height:100svh;padding:120px 0 80px;box-sizing:border-box;display:flex;align-items:center;overflow:hidden} .co-biz-panel{position:absolute;left:0;top:0;bottom:0;width:calc(var(--pl) + 600px); background:linear-gradient(0deg,rgba(33,43,60,.92),rgba(33,43,60,.92)),url('https://img.baronowmap.com/company/co-panel-bg.webp') center/cover no-repeat} .co-biz-in{position:relative;width:100%;box-sizing:border-box;display:grid;grid-template-columns:440px minmax(0,1fr);gap:70px;padding-left:var(--pl);align-items:center} .co-biz-txt{color:#fff} .co-biz-txt h2{margin:0;font-size:clamp(26px,2.3vw,36px);line-height:1.42;font-weight:700;letter-spacing:-.035em;color:#fff} .co-biz-p{margin-top:28px} .co-biz-p p{margin:0 0 12px;font-size:15.5px;line-height:1.8;color:rgba(255,255,255,.7);word-break:keep-all} .co-biz-ctrl{display:flex;align-items:center;gap:10px;margin-top:38px} .co-arrow{width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .25s,border-color .25s} .co-arrow:hover{background:#fff;border-color:#fff;color:#212B3C} .co-arrow svg{width:20px;height:20px} .co-biz-count{margin-left:14px;font-size:14px;color:rgba(255,255,255,.55);letter-spacing:.04em} .co-biz-count b{color:#fff;font-weight:700} .co-biz-view{overflow:hidden;padding:24px 0 24px 0} .co-track{list-style:none;margin:0;padding:0;display:flex;gap:22px;will-change:transform} .co-card{flex:0 0 292px;background:#fff;box-shadow:0 18px 40px rgba(14,22,48,.10);transition:background .6s ease,box-shadow .6s ease,transform .6s ease} .co-card figure{margin:0;aspect-ratio:1/1;overflow:hidden} .co-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.22,1,.36,1),filter .6s} .co-card-txt{padding:34px 24px 46px;text-align:center} .co-card-no{display:block;margin-bottom:14px;font-size:11.5px;font-weight:700;letter-spacing:.16em;color:#8A93A5;transition:color .6s} .co-card p{margin:0;min-height:44px;font-size:13.5px;line-height:1.6;color:#6B7280;word-break:keep-all;transition:color .6s} .co-card h3{margin:12px 0 0;font-size:21px;font-weight:700;letter-spacing:-.03em;color:#171E2A;transition:color .6s} .co-card.on{background:#0C5B5A;box-shadow:0 26px 50px rgba(14,22,48,.35);transform:translateY(-10px)} .co-card.on img{transform:scale(1.06)} .co-card.on .co-card-no{color:#C9A96A} .co-card.on p{color:rgba(255,255,255,.68)} .co-card.on h3{color:#fff} @media (max-width:960px){ .co-biz{padding:0 0 70px;display:block} .co-biz-panel{position:relative;width:auto;height:auto;display:none} .co-biz-in{grid-template-columns:1fr;gap:0;padding-left:0} .co-biz-txt{padding:70px 22px 90px;background:linear-gradient(0deg,rgba(33,43,60,.92),rgba(33,43,60,.92)),url('https://img.baronowmap.com/company/co-panel-bg.webp') center/cover no-repeat} .co-biz-view{margin-top:-56px;padding:24px 0 24px 22px} .co-card{flex-basis:74vw;max-width:300px} } @media (prefers-reduced-motion:reduce){.co-track{transition:none!important}} /* ══════════ 회사소개 — 업무 분야 문구: 라이트 필 ══════════ */ .co-biz-txt h2 .hl{display:block} .co-biz-txt h2 .hl-in{display:inline-block} .co-biz.fx-ready h2 .hl-in{color:transparent;background:linear-gradient(90deg,#fff 0 50%,rgba(255,255,255,.18) 50% 100%);background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text} .co-biz.is-in h2 .hl-in{animation:coFill 1.2s cubic-bezier(.65,0,.35,1) both} .co-biz.is-in h2 .hl:nth-child(1) .hl-in{animation-delay:.1s} .co-biz.is-in h2 .hl:nth-child(2) .hl-in{animation-delay:.35s} .co-biz.is-in h2 .hl:nth-child(3) .hl-in{animation-delay:.6s} .co-biz.is-in h2 .hl:nth-child(4) .hl-in{animation-delay:.85s} @keyframes coFill{to{background-position:0 0}} .co-biz.fx-ready .co-biz-p p,.co-biz.fx-ready .co-biz-ctrl{opacity:0} .co-biz.is-in .co-biz-p p,.co-biz.is-in .co-biz-ctrl{animation:coUp 1s cubic-bezier(.22,1,.36,1) both} .co-biz.is-in .co-biz-p p:nth-child(1){animation-delay:1.65s} .co-biz.is-in .co-biz-p p:nth-child(2){animation-delay:1.8s} .co-biz.is-in .co-biz-p p:nth-child(3){animation-delay:1.95s} .co-biz.is-in .co-biz-ctrl{animation-delay:2.15s} @keyframes coUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* ══════════ 회사소개 — 조직도 ══════════ */ .co-org{--pl:max(64px,calc((100vw - 1320px)/2));position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:120px 0 80px;box-sizing:border-box;overflow:hidden;background:#212B3C;color:#fff} .co-org-bg{position:absolute;inset:0;overflow:hidden} .co-org-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .co-org-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,30,42,.6) 0%,rgba(23,30,42,.3) 55%,rgba(23,30,42,.5) 100%),rgba(33,43,60,.8)} .co-org-in{position:relative;width:100%;box-sizing:border-box;padding:0 var(--pl);display:flex;flex-direction:column;align-items:center;gap:clamp(22px,3vh,42px)} .co-org-logo{display:block;width:180px} .co-org-logo .logo{display:block;width:100%;height:auto;--logo-a:#fff;--logo-b:#fff} .co-org-head{position:absolute;z-index:2;left:calc(var(--pl) + 10vw);top:calc(clamp(150px,19vh,230px) - 120px);width:auto;max-width:360px} .co-org-head h2{margin:18px 0 0;font-size:clamp(28px,2.1vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1;color:#fff} .co-org-head p{margin:14px 0 0;font-size:16px;line-height:1.7;color:rgba(255,255,255,.72);word-break:keep-all} .co-chart{--ln:rgba(255,255,255,.32);position:relative} .co-node{box-sizing:border-box;text-align:center;padding:14px 18px} .co-node small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;color:#C9A96A} .co-node b{display:block;margin-top:5px;font-size:18px;font-weight:700;letter-spacing:-.02em} .co-tier-top{display:flex;justify-content:center;position:relative;padding-bottom:34px} .co-tier-top::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:34px;background:var(--ln)} .co-ceo{min-width:250px;background:#fff;color:#212B3C;padding:18px 26px} .co-ceo small{color:#0C5B5A} .co-ceo b{font-size:22px} .co-tier-mid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:relative;padding-bottom:40px} .co-tier-mid::before{content:"";position:absolute;left:14%;right:14%;top:calc((100% - 40px)/2);height:1px;background:var(--ln)} .co-tier-mid::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:40px;background:var(--ln)} .co-coo{position:relative;min-width:230px;border:1px solid rgba(255,255,255,.7);background:rgba(10,16,30,.6)} .co-staff{position:relative;justify-self:start;min-width:170px;border:1px dashed rgba(255,255,255,.4);background:rgba(10,16,30,.6);padding:10px 16px} .co-staff:last-child{justify-self:end} .co-staff b{font-size:15.5px} .co-divs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;position:relative;padding-top:30px} .co-divs::before{content:"";position:absolute;top:0;left:calc((100% - 36px)/6);right:calc((100% - 36px)/6);height:1px;background:var(--ln)} .co-div{position:relative;background:rgba(33,43,60,.78);border:1px solid rgba(255,255,255,.12);border-top:2px solid #C9A96A} .co-div::before{content:"";position:absolute;left:50%;top:-32px;width:1px;height:30px;background:var(--ln)} .co-div-head{position:relative;padding:20px 20px 18px;border-bottom:1px solid rgba(255,255,255,.1)} .co-div-head span{position:absolute;right:18px;top:18px;font-size:12px;font-weight:700;color:rgba(255,255,255,.35);letter-spacing:.06em} .co-div-head small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;color:#C9A96A} .co-div-head b{display:block;margin-top:6px;font-size:19px;font-weight:700;letter-spacing:-.02em} .co-div ul{list-style:none;margin:0;padding:6px 20px 12px} .co-div li{display:flex;align-items:center;gap:10px;padding:11px 0;font-size:15px;color:rgba(255,255,255,.82);border-top:1px solid rgba(255,255,255,.07)} .co-div li:first-child{border-top:0} .co-div li::before{content:"";width:5px;height:5px;background:#3FA59E} .co-stage{position:relative;margin:clamp(40px,11vh,120px) 0 0;width:min(1320px, 100%, calc((100svh - 330px) * 2800 / 1575));aspect-ratio:2800/1575;perspective:1600px} .co-stage .co-pc,.co-stage .co-lines{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);display:block} .co-stage img{display:block;width:100%;height:100%;object-fit:contain} .co-stage .co-lines{pointer-events:none} .co-stage .co-pc img{transition:transform .4s cubic-bezier(.22,1,.36,1),filter .4s} .co-stage .co-pc:hover img{transform:translateY(-7px);filter:drop-shadow(0 12px 18px rgba(0,0,0,.35))} @media (max-width:1200px){.co-stage{max-height:none}} .co-tip{position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,-100%) translateY(6px);opacity:0; transition:opacity .3s,transform .35s cubic-bezier(.22,1,.36,1);background:#fff;color:#212B3C;border-radius:10px;padding:10px 14px; box-shadow:0 12px 32px rgba(0,0,0,.35);white-space:nowrap;text-align:left} .co-tip.on{opacity:1;transform:translate(-50%,-100%) translateY(-8px)} .co-tip small{display:block;font-size:11px;color:#0C5B5A;font-weight:700;letter-spacing:.04em} .co-tip b{display:block;margin-top:2px;font-size:15px;font-weight:700} .co-tip::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:#fff;transform:translateX(-50%) rotate(45deg)} /* 조직도 등장 */ /* 조각마다 차례로 (위 → 아래, 왼쪽 → 오른쪽) */ .co-org.fx-ready .co-pc{opacity:0} .co-org.is-in .co-pc{animation:coPcIn 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.55s + var(--d) * .07s)} @keyframes coPcIn{from{opacity:0;transform:scale(.8);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}} /* 연결선은 위에서 아래로 그어지듯 */ .co-org.fx-ready .co-lines{opacity:0} .co-org.is-in .co-lines{animation:coLinesFade 1.4s ease .8s both} @keyframes coLinesFade{from{opacity:0}to{opacity:1}} .co-org.fx-ready .co-org-head>*,.co-org.fx-ready .co-node,.co-org.fx-ready .co-div{opacity:0;transform:translateY(18px)} .co-org.fx-ready .co-tier-top::after,.co-org.fx-ready .co-tier-mid::after,.co-org.fx-ready .co-div::before{transform:scaleY(0);transform-origin:top} .co-org.fx-ready .co-tier-mid::before,.co-org.fx-ready .co-divs::before{transform:scaleX(0)} .co-org.is-in .co-org-head>*,.co-org.is-in .co-node,.co-org.is-in .co-div{animation:coUp 1s cubic-bezier(.22,1,.36,1) both} .co-org.is-in .co-org-head>:nth-child(1){animation-delay:.05s} .co-org.is-in .co-org-head>:nth-child(2){animation-delay:.15s} .co-org.is-in .co-org-head>:nth-child(3){animation-delay:.75s} .co-org-head h2 .org-ch{display:inline-block} .co-org.fx-ready .co-org-head h2{opacity:1;transform:none;perspective:600px} .co-org.is-in .co-org-head h2{animation:none} .co-org.fx-ready .co-org-head h2 .org-ch{opacity:0} .co-org.is-in .co-org-head h2 .org-ch{animation:coFlip .8s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.12s + var(--k) * .045s)} @keyframes coFlip{from{opacity:0;transform:translateY(-55%) rotateX(80deg)}to{opacity:1;transform:none}} .co-org.is-in .co-ceo{animation-delay:.45s} .co-org.is-in .co-tier-top::after{animation:coLineY .5s ease .85s both} .co-org.is-in .co-coo{animation-delay:1.1s} .co-org.is-in .co-tier-mid::before{animation:coLineX .7s cubic-bezier(.65,0,.35,1) 1.25s both} .co-org.is-in .co-staff{animation-delay:1.55s} .co-org.is-in .co-tier-mid::after{animation:coLineY .45s ease 1.7s both} .co-org.is-in .co-divs::before{animation:coLineX .7s cubic-bezier(.65,0,.35,1) 1.95s both} .co-org.is-in .co-div::before{animation:coLineY .35s ease 2.45s both} .co-org.is-in .co-div:nth-child(1){animation-delay:2.6s} .co-org.is-in .co-div:nth-child(2){animation-delay:2.72s} .co-org.is-in .co-div:nth-child(3){animation-delay:2.84s} @keyframes coLineX{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes coLineY{from{transform:scaleY(0)}to{transform:scaleY(1)}} @media (max-height:820px) and (min-width:761px){ .co-org{padding:108px 0 48px} .co-tier-top{padding-bottom:26px}.co-tier-top::after{height:26px} .co-tier-mid{padding-bottom:30px}.co-tier-mid::after{height:30px}.co-tier-mid::before{top:calc((100% - 30px)/2)} .co-ceo{padding:13px 22px}.co-node{padding:11px 16px} .co-div-head{padding:15px 18px 13px}.co-div li{padding:8px 0} } .co-org .co-chart{display:none} @media (max-width:1100px){ .co-org-in{grid-template-columns:1fr;gap:48px} } @media (max-width:760px){ .co-stage{display:none} .co-org .co-chart{display:block} } @media (max-width:760px){ .co-org{padding:120px 0 70px} .co-org-in{padding:0 20px} .co-org-head{position:static;max-width:none;align-self:start} .co-org-logo{width:170px} .co-tier-mid{grid-template-columns:1fr;gap:12px;justify-items:center} .co-tier-mid::before{display:none} .co-staff,.co-staff:last-child{justify-self:center} .co-coo{order:-1} .co-divs{grid-template-columns:1fr;gap:14px;padding-top:24px} .co-divs::before,.co-div::before{display:none} } @media (prefers-reduced-motion:reduce){ .co-biz.fx-ready *,.co-org.fx-ready *,.co-org.fx-ready *::before,.co-org.fx-ready *::after{animation:none!important;opacity:1!important;transform:none!important} .co-biz.fx-ready h2 .hl-in{background-position:0 0} } /* ══════════ 회사소개 — 오시는 길 ══════════ */ .co-loc{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:#DCE1E8;display:flex;align-items:flex-end} .co-loc-bg{position:absolute;inset:0;overflow:hidden} .co-loc-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .co-loc-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(33,43,60,.10),rgba(33,43,60,.22))} .co-loc-panel{position:relative;z-index:1;width:min(62%,1120px);min-height:78vh;min-height:78svh;box-sizing:border-box; background:#212B3C;color:#fff;border-top-right-radius:clamp(80px,9vw,150px); padding:clamp(56px,7vh,90px) clamp(40px,4vw,80px) clamp(40px,5vh,64px) max(56px,calc((100vw - 1320px)/2)); display:flex;flex-direction:column;justify-content:center;box-shadow:0 30px 80px rgba(10,14,24,.25)} .co-loc-map{position:relative;height:clamp(220px,34vh,380px);overflow:hidden;background:#1A2230} .co-loc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .co-loc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3vw,48px);align-items:center;margin-top:clamp(26px,3.6vh,40px)} .co-loc-info h3{margin:0 0 18px;font-size:clamp(20px,1.6vw,24px);font-weight:800;letter-spacing:-.03em;color:#fff} .co-loc-item{display:flex;gap:14px;align-items:flex-start} .co-loc-item+.co-loc-item{margin-top:16px} .co-loc-item .ic{flex:none;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center} .co-loc-item .ic svg{width:19px;height:19px} .co-loc-item small{display:block;font-size:12.5px;color:rgba(255,255,255,.5)} .co-loc-item p{margin:3px 0 0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.92);word-break:keep-all} .co-loc-item a{color:#fff;font-weight:700;text-decoration:none} .co-loc-item .nw{white-space:nowrap} .co-loc-btns{display:grid;grid-template-columns:repeat(3,108px);gap:12px} .co-loc-btns a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:108px;border-radius:14px; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;text-decoration:none;font-size:13.5px;font-weight:600; transition:background .25s,border-color .25s,transform .25s} .co-loc-btns a:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);transform:translateY(-3px)} .co-loc-btns b{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;font-size:17px;font-weight:800} .co-loc-btns b.nv{background:#03C75A;color:#fff} .co-loc-btns b.kk{background:#FEE500;color:#191919} .co-loc-btns b.gg{background:#fff;color:#4285F4} .co-loc-head{position:absolute;z-index:1;left:calc((min(62vw,1120px) + 100vw) / 2 - 4.5vw);top:50%;transform:translate(-50%,-50%);text-align:center;color:#212B3C;width:min(32vw,420px)} .co-loc-eyebrow{margin:0;font-size:16px;font-weight:600;color:#3A4557} .co-loc-head h2{margin:10px 0 0;font-size:clamp(36px,3.3vw,56px);font-weight:800;letter-spacing:-.01em;line-height:1;color:#212B3C} .co-loc-particle{position:relative;width:100%;height:clamp(110px,11vw,170px);margin:22px auto 0} .co-loc-particle canvas{position:absolute;inset:0;width:100%;height:100%} /* 등장 */ .co-loc.fx-ready .co-loc-panel{opacity:0;transform:translateX(-40px)} .co-loc.is-in .co-loc-panel{animation:coPanelIn 1.2s cubic-bezier(.22,1,.36,1) .15s both} @keyframes coPanelIn{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}} .co-loc.fx-ready .co-loc-head>*{opacity:0;transform:translateY(16px)} .co-loc.is-in .co-loc-head>*{animation:coUp 1s cubic-bezier(.22,1,.36,1) both} .co-loc.is-in .co-loc-head>:nth-child(1){animation-delay:.55s} .co-loc.is-in .co-loc-head>:nth-child(2){animation-delay:.65s} .co-loc.is-in .co-loc-head>:nth-child(3){animation-delay:.8s} @media (max-width:1100px){ .co-loc{flex-direction:column;align-items:stretch} .co-loc-head{position:relative;top:auto;right:auto;transform:none;width:auto;text-align:left;padding:120px 22px 36px} .co-loc-particle{margin-left:0} .co-loc-panel{width:100%;min-height:0;border-top-right-radius:60px;padding:48px 22px 40px} .co-loc-row{grid-template-columns:1fr} .co-loc-btns{grid-template-columns:repeat(3,minmax(0,1fr))} .co-loc-map{height:260px} .co-loc-head{order:-1} } @media (prefers-reduced-motion:reduce){ .co-loc.fx-ready *{animation:none!important;opacity:1!important;transform:none!important} } /* ══════════ 회사소개 — PC 는 한 화면씩 스크롤 ══════════ */ @media (min-width:961px) and (min-height:640px){ html:has(.co-hero){scroll-snap-type:y mandatory} .co-hero,.co-biz,.co-org,.co-loc,body:has(.co-hero) .ctab{scroll-snap-align:start;scroll-snap-stop:always} body:has(.co-hero) footer{scroll-snap-align:end} } /* ══════════ 메인 — 자가 진단 체크리스트 ══════════ */ .hk{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:flex;align-items:center;background:#080C21;color:#fff;padding:clamp(90px,9vw,130px) 0;box-sizing:border-box;overflow:hidden} .hk-bg{position:absolute;inset:0;z-index:-1;overflow:hidden} .hk-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hk-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,33,.9) 0%,rgba(8,12,33,.7) 45%,rgba(8,12,33,.55) 100%)} .hk-in{position:relative;width:min(1240px,100%);margin:0 auto;padding:0 28px;box-sizing:border-box;display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) minmax(0,.8fr);gap:clamp(28px,3.5vw,56px);align-items:start} .hk-head h2{margin:0;font-size:clamp(32px,3.2vw,50px);line-height:1.22;font-weight:800;letter-spacing:-.04em;color:#fff} .hk-head h2 em{font-style:normal;color:#AFC0DE;white-space:nowrap} .hk-lead{margin:24px 0 0;font-size:16px;line-height:1.8;color:rgba(255,255,255,.78);word-break:keep-all} .hk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .hk-item{all:unset;box-sizing:border-box;cursor:pointer;width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:16px;align-items:center; background:#fff;border:1px solid #E3E6EC;border-radius:16px;padding:20px 22px 20px 26px;transition:border-color .3s,box-shadow .3s,transform .3s,background .3s} .hk-item:hover{border-color:#C9CFD9;box-shadow:0 14px 30px rgba(0,0,0,.25);transform:translateY(-2px)} .hk-item:focus-visible{outline:2px solid #AFC0DE;outline-offset:3px} .hk-txt b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.02em;color:#171E2A;line-height:1.45;word-break:keep-all} .hk-txt small{display:block;margin-top:6px;font-size:14px;line-height:1.6;color:#6B7280;word-break:keep-all} .hk-box{width:30px;height:30px;border-radius:9px;border:1.5px solid #CBD1DB;display:grid;place-items:center;transition:background .3s,border-color .3s} .hk-box svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .35s ease .05s} .hk-item[aria-pressed="true"]{border-color:#080C21;box-shadow:0 12px 28px rgba(0,0,0,.25)} .hk-item[aria-pressed="true"] .hk-box{background:#080C21;border-color:#080C21} .hk-item[aria-pressed="true"] .hk-box svg{stroke-dashoffset:0} /* 체크 — 카드가 왼쪽부터 연한 남색으로 차오르고, 상자에서 물결이 퍼집니다 */ .hk-item{position:relative;overflow:hidden;isolation:isolate} .hk-item::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#E4E9F2,#EEF1F6);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s cubic-bezier(.65,0,.35,1)} .hk-item[aria-pressed="true"]::before{transform:scaleX(1)} .hk-item[aria-pressed="true"] .hk-txt b{color:#080C21} .hk-box{position:relative} .hk-box::after{content:"";position:absolute;inset:-2px;border-radius:12px;border:2px solid #080C21;opacity:0;pointer-events:none} .hk-item[aria-pressed="true"] .hk-box::after{animation:hkRing .6s cubic-bezier(.22,1,.36,1)} @keyframes hkRing{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(2.1)}} .hk-result{position:sticky;top:120px;background:rgba(8,12,33,.72);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:22px;padding:32px 26px 26px;text-align:center;box-shadow:0 24px 50px rgba(0,0,0,.3)} .hk-ring{position:relative;width:132px;height:132px;margin:0 auto} .hk-ring svg{width:100%;height:100%;transform:rotate(-90deg)} .hk-ring circle{fill:none;stroke-width:8} .hk-ring .bg{stroke:rgba(255,255,255,.12)} .hk-ring .fg{stroke:#AFC0DE;stroke-linecap:round;transition:stroke-dashoffset .7s cubic-bezier(.22,1,.36,1)} .hk-count{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;gap:3px;padding-top:42px;box-sizing:border-box} .hk-count b{font-size:40px;font-weight:800;letter-spacing:-.03em} .hk-count span{font-size:15px;color:rgba(255,255,255,.55)} .hk-msg{margin:18px 0 0;min-height:72px;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.82);word-break:keep-all} .hk-cta{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;height:52px;border-radius:999px;background:#fff;color:#080C21; font-size:15px;font-weight:700;text-decoration:none;transition:background .3s,color .3s,transform .3s,box-shadow .3s} .hk-cta>span,.hk-cta>i{position:relative;z-index:1} .hk-cta:hover{background:#080C21;color:#fff;box-shadow:0 0 0 1px rgba(175,192,222,.6);transform:translateY(-2px)} /* 파동 — 항목을 체크하면 버튼 둘레로 잔잔한 파동이 퍼집니다 */ .hk-cta::before,.hk-cta::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;border:1.5px solid rgba(175,192,222,.7);opacity:0;pointer-events:none} .hk.has-check .hk-cta::before{animation:hkRipple 2.4s cubic-bezier(.22,1,.36,1) infinite} .hk.has-check .hk-cta::after{animation:hkRipple 2.4s cubic-bezier(.22,1,.36,1) 1.2s infinite} @keyframes hkRipple{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.18,1.6)}} .hk-note{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.5)} .hk-note a{color:#fff;text-decoration:none;font-weight:700} /* 등장 — 끝난 뒤 원래 상태로 돌아가도록 backwards (마우스 올림 효과가 살아 있게) */ .hk.fx-ready .hk-lead,.hk.fx-ready .hk-item,.hk.fx-ready .hk-result,.hk.fx-ready .hk-ch{opacity:0} .hk.is-in .hk-lead,.hk.is-in .hk-item,.hk.is-in .hk-result,.hk.is-in .hk-ch{opacity:1} .hk-ch{display:inline-block} .hk.is-in .hk-ch{animation:hkBlur .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--c) * .035s)} @keyframes hkBlur{from{opacity:0;filter:blur(10px);transform:translateX(.25em)}to{opacity:1;filter:none;transform:none}} .hk.is-in .hk-lead{animation:hkUp 1s cubic-bezier(.22,1,.36,1) .7s backwards} .hk.is-in .hk-item{animation:hkSlide .95s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(.25s + var(--i) * .09s)} .hk.is-in .hk-result{animation:hkSlide 1s cubic-bezier(.16,1,.3,1) .7s backwards} /* 박스 — 오른쪽에서 흐릿하게 미끄러져 들어와 또렷해집니다 */ @keyframes hkSlide{from{opacity:0;transform:translateX(70px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}} @keyframes hkUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @media (max-width:1100px){ .hk-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .hk-head{grid-column:1/-1} .hk-result{position:static} } @media (max-width:760px){ .hk-in{grid-template-columns:minmax(0,1fr);padding:0 20px} .hk-list,.hk-result{min-width:0} .hk-item{grid-template-columns:minmax(0,1fr) 30px;padding:18px 16px 18px 20px;gap:12px} .hk-bg::after{background:rgba(8,12,33,.8)} } @media (prefers-reduced-motion:reduce){.hk.fx-ready *{animation:none!important;opacity:1!important;transform:none!important}.hk .hk-cta::before,.hk .hk-cta::after,.hk .hk-box::after{animation:none!important}} /* ══════════ 떠 있는 버튼 ══════════ */ .fc{position:fixed;right:20px;bottom:20px;z-index:110;display:flex;flex-direction:column;gap:12px} .fc .fbtn{position:relative;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;padding:0;font-family:inherit; box-shadow:0 2px 4px rgba(8,12,33,.18),0 8px 20px rgba(8,12,33,.28),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 3px rgba(0,0,0,.12); transition:transform .18s,box-shadow .18s,opacity .25s} .fc .fbtn:hover{transform:scale(1.1);box-shadow:0 4px 8px rgba(8,12,33,.22),0 14px 30px rgba(8,12,33,.38),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 3px rgba(0,0,0,.12)} .fc .fbtn:active{transform:scale(.92);box-shadow:0 2px 6px rgba(8,12,33,.3),inset 0 2px 4px rgba(0,0,0,.18)} .fc .fbtn:focus-visible{outline:2px solid #fff;outline-offset:3px} .fc .fbtn svg{width:26px;height:26px} .fc .kk{background:#FEE500} .fc .tl{background:#080C21} .fc .fm{background:#fff;border:1px solid #E2E8F2} .fc .tp{background:#fff;border:1px solid #E2E8F2;opacity:0;pointer-events:none} .fc .tp.on{opacity:1;pointer-events:auto} .fc .tp:hover{transform:translateY(-3px)} .fc .tip{position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%) translateX(6px);background:#080C21;color:#fff;font-size:12.5px;font-weight:600; padding:8px 13px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s} .fc .tip::after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left-color:#080C21} .fc .fbtn:hover .tip{opacity:1;transform:translateY(-50%) translateX(0)} body.cm-open .fc{display:none} @media (max-width:640px){ .fc{right:14px;bottom:14px;gap:9px} .fc .fbtn{width:46px;height:46px} .fc .fbtn svg{width:21px;height:21px} .fc .tip{display:none} } @media print{.fc{display:none!important}} /* ══════════ 메인 — 최적화 솔루션 ══════════ */ .sol{position:relative;isolation:isolate;background:#080C21;color:#fff;padding:clamp(90px,10vw,140px) 0;overflow:hidden} .sol-bg{position:absolute;inset:0;z-index:-1;overflow:hidden} .sol-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .sol-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,33,.9) 0%,rgba(8,12,33,.7) 45%,rgba(8,12,33,.55) 100%)} .sol-in{width:min(1240px,100%);margin:0 auto;padding:0 28px;box-sizing:border-box;display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:start} .sol-head{position:sticky;top:120px} .sol-logo{margin:0 0 14px} .sol-logo svg{width:min(260px,70%);height:auto;display:block;--logo-a:#FFFFFF;--logo-b:#FFFFFF} .sol-head h2{margin:0;font-size:clamp(34px,3.6vw,54px);font-weight:800;letter-spacing:-.04em;line-height:1.15;color:#fff} .sol-lead{margin:20px 0 0;font-size:15.5px;line-height:1.8;color:rgba(255,255,255,.78);word-break:keep-all} .sol-ln{display:block;overflow:hidden} .sol-ln>span{display:block} /* 들어올 때 — 로고·제목이 왼쪽부터 커튼 걷히듯 나타나고, 안내 줄이 올라옵니다 */ .sol.fx-ready .sol-logo{clip-path:inset(0 100% 0 0)} .sol.fx-ready .sol-head h2{clip-path:inset(0 100% 0 0)} .sol.fx-ready .sol-ln>span{transform:translateY(115%)} .sol.is-in .sol-logo{animation:solClip .9s cubic-bezier(.65,0,.35,1) both} .sol.is-in .sol-head h2{animation:solClip .9s cubic-bezier(.65,0,.35,1) .25s both} @keyframes solClip{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} .sol.is-in .sol-ln>span{transform:none;transition:transform .8s cubic-bezier(.22,1,.36,1) .6s} .sol.is-in .sol-ln:nth-child(2)>span{transition-delay:.72s} /* PC 자동 재생 — 초점·선이 부드럽게 옮겨 갑니다 */ .sol-auto .sol-step{transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1),filter .55s} .sol-auto .sol-rail i{transition:transform .75s cubic-bezier(.4,0,.2,1)} .sol-auto .sol-comet{transition:top .75s cubic-bezier(.4,0,.2,1),opacity .3s} /* PC 에서는 한 화면을 꽉 채워 스크롤 한 번에 다음 섹션으로 넘어갑니다 */ @media (min-width:961px) and (min-height:640px){ .sol{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:clamp(80px,8vw,110px) 0} .sol-in{width:min(1240px,100%)} .sol-head{position:static} } .sol-list{position:relative;list-style:none;margin:0;padding:0 0 0 clamp(54px,6vw,76px)} /* 단계를 잇는 세로선 — 차오르는 선 끝을 빛나는 점이 따라옵니다 */ .sol-rail{position:absolute;z-index:0;left:clamp(25px,2.9vw,36px);top:14px;bottom:14px;width:2px;background:rgba(255,255,255,.18);border-radius:2px} .sol-rail i{position:absolute;inset:0;background:#AFC0DE;transform-origin:50% 0;transform:scaleY(0);transition:transform .25s linear} .sol-comet{position:absolute;left:50%;top:0;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#fff;opacity:0; box-shadow:0 0 0 3px rgba(175,192,222,.5),0 0 16px 5px rgba(175,192,222,.9);transition:top .25s linear,opacity .3s} .sol-step{position:relative;z-index:1;padding:0 0 clamp(28px,3vw,40px)} .sol-step:last-of-type{padding-bottom:0} .sol-no{position:absolute;left:calc(-1 * clamp(54px,6vw,76px));top:-4px;width:clamp(52px,5.8vw,72px);display:flex;justify-content:center;perspective:300px} .sol-no b{display:grid;place-items:center;width:clamp(38px,4vw,46px);height:clamp(38px,4vw,46px);border-radius:50%;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.3); font-size:14.5px;font-weight:800;color:rgba(255,255,255,.55);position:relative;transition:background .4s,border-color .4s,color .4s} /* 선이 닿으면 — 배지가 뒤집히며 흰색이 되고, 동그라미가 한 번 퍼집니다 */ .sol-no b::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #AFC0DE;opacity:0;pointer-events:none} .sol-step.on .sol-no b{background:#fff;border-color:#fff;color:#080C21;animation:solFlip .55s cubic-bezier(.22,1,.36,1)} @keyframes solFlip{from{transform:rotateX(90deg)}to{transform:none}} .sol-step.on .sol-no b::after{animation:solPing .75s ease-out .15s} @keyframes solPing{0%{opacity:.8;transform:scale(.85)}100%{opacity:0;transform:scale(2)}} /* 제목은 가림막 뒤에서 올라오고, 설명이 뒤따릅니다 */ .sol-txt h3{margin:0;font-size:clamp(19px,1.9vw,24px);font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1.35;word-break:keep-all;overflow:hidden} .sol-txt h3 .w{display:inline-block;transform:translateY(115%);transition:transform .65s cubic-bezier(.22,1,.36,1)} .sol-step.on .sol-txt h3 .w{transform:none} .sol-txt p{margin:10px 0 0;font-size:15px;line-height:1.8;color:rgba(255,255,255,.72);word-break:keep-all;max-width:44em; opacity:0;transform:translateY(10px);transition:opacity .6s .15s,transform .6s .15s} .sol-step.on .sol-txt p{opacity:1;transform:none} @media (max-width:900px){ .sol-in{grid-template-columns:minmax(0,1fr);gap:40px} .sol-head{position:static} .sol-logo svg{width:220px} } @media (max-width:760px){ .sol-in{padding:0 20px} .sol-list{padding-left:60px} .sol-rail{left:22px} .sol-no{left:-60px;width:44px} .sol-no b{width:36px;height:36px;font-size:13px} .sol-bg::after{background:rgba(8,12,33,.82)} } @media (prefers-reduced-motion:reduce){ .sol.fx-ready *{animation:none!important;opacity:1!important;transform:none!important;transition:none!important;filter:none!important;clip-path:none!important} .sol.fx-ready .sol-logo,.sol.fx-ready .sol-head h2{clip-path:none} .sol-txt h3 .w{transform:none} .sol-txt p{opacity:1;transform:none} .sol-comet{display:none} } /* ══════════ 메인 — 건설업 면허, 업종별로 정확하게 ══════════ */ .lc{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:flex;align-items:center;background:#080C21;color:#fff; padding:clamp(90px,9vw,120px) 0;box-sizing:border-box;overflow:hidden} .lc-bg{position:absolute;inset:0;z-index:-1;overflow:hidden} .lc-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .lc-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,33,.9) 0%,rgba(8,12,33,.7) 45%,rgba(8,12,33,.55) 100%)} .lc-in{width:min(1240px,100%);margin:0 auto;padding:0 28px;box-sizing:border-box} .lc-head{text-align:center} .lc-head h2{margin:0;font-size:clamp(30px,3.4vw,50px);line-height:1.22;font-weight:800;letter-spacing:-.04em;color:#fff} .lc-ln{display:block;overflow:hidden;padding-bottom:.06em} .lc-ln>span{display:block} .lc-sub{margin:12px 0 0;font-size:15.5px;line-height:1.8;color:rgba(255,255,255,.78);word-break:keep-all} /* 들어올 때 — 제목 줄이 가림막 뒤에서 올라오고, 막대와 내용이 뒤따릅니다 */ .lc.fx-ready .lc-ln>span{transform:translateY(115%)} .lc.fx-ready .lc-sub,.lc.fx-ready .lc-tab,.lc.fx-ready .lc-views{opacity:0} .lc.is-in .lc-ln>span{transform:none;transition:transform .85s cubic-bezier(.22,1,.36,1)} .lc.is-in .lc-ln:nth-child(2)>span{transition-delay:.12s} .lc.is-in .lc-sub,.lc.is-in .lc-tab,.lc.is-in .lc-views{opacity:1;animation:lcUp .9s cubic-bezier(.22,1,.36,1) backwards} .lc.is-in .lc-sub{animation-delay:.3s} .lc.is-in .lc-tab{animation-delay:calc(.4s + var(--i) * .08s)} .lc.is-in .lc-views{animation-delay:.55s} @keyframes lcUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} .lc-grid{margin:clamp(32px,4vw,52px) 0 0;display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(20px,2.6vw,40px);align-items:start} /* 왼쪽 — 가로 막대 네 개. 흰 판(.lc-ind)이 활성 막대 자리로 미끄러집니다 */ .lc-tabs{position:relative;display:flex;flex-direction:column;gap:12px} .lc-ind{position:absolute;left:0;width:100%;border-radius:16px;background:#fff;box-shadow:0 14px 30px rgba(0,0,0,.3); z-index:0;transition:top .45s cubic-bezier(.22,1,.36,1),height .45s cubic-bezier(.22,1,.36,1)} .lc-tab{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:14px;width:100%;position:relative;z-index:1;overflow:hidden; padding:20px 22px;border-radius:16px;background:transparent;border:1px solid rgba(255,255,255,.22); transition:border-color .35s,transform .35s} .lc-tab:hover{border-color:rgba(255,255,255,.45);transform:translateY(-2px)} .lc-tab:focus-visible{outline:2px solid #fff;outline-offset:3px} .lc-no{font-size:13px;font-weight:800;color:rgba(255,255,255,.5);letter-spacing:.04em;transition:color .35s} .lc-name{font-size:16.5px;font-weight:800;letter-spacing:-.03em;color:#fff;white-space:nowrap;transition:color .35s} .lc-mark{margin-left:auto;width:26px;height:26px;border-radius:50%;background:#080C21;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .35s,transform .35s} .lc-mark svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .lc-tab.on{border-color:transparent;transform:none} .lc-tab.on .lc-no{color:#9AA3B2} .lc-tab.on .lc-name{color:#080C21} .lc-tab.on .lc-mark{opacity:1;transform:none} /* 자동 전환 진행선 — 활성 막대 아래에서 4.5초 동안 차오릅니다 */ .lc-tab.on::before{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:#AFC0DE;transform-origin:0 50%;animation:lcProg 4.5s linear both} @keyframes lcProg{from{transform:scaleX(0)}to{transform:scaleX(1)}} .lc:hover .lc-tab.on::before{animation-play-state:paused} /* 오른쪽 — 고른 업종 내용 (흰 카드) */ .lc-views{position:relative;min-width:0} .lc-view{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,2.4vw,34px);align-items:center; padding:clamp(20px,2vw,26px);border-radius:20px;background:#fff;color:#080C21;box-shadow:0 24px 50px rgba(0,0,0,.3); animation:lcIn .5s cubic-bezier(.22,1,.36,1) backwards} .lc-view[hidden]{display:none} @keyframes lcIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* 사진이 커튼처럼 오른쪽으로 열립니다 */ .lc-photo{position:relative;border-radius:14px;overflow:hidden;background:#EEF1F6} .lc-photo::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:100% 50%;animation:lcCurtain .7s cubic-bezier(.65,0,.35,1) .05s both} @keyframes lcCurtain{from{transform:scaleX(1)}to{transform:scaleX(0)}} .lc-photo img{width:100%;height:clamp(210px,23vw,300px);object-fit:cover;animation:lcZoom 1.4s cubic-bezier(.22,1,.36,1) backwards} @keyframes lcZoom{from{transform:scale(1.06)}to{transform:none}} .lc-txt h3{margin:0;font-size:clamp(20px,2.1vw,26px);font-weight:800;letter-spacing:-.03em;color:#171E2A} .lc-txt p{margin:12px 0 0;font-size:14.5px;line-height:1.8;color:#5B6372;word-break:keep-all} /* 체크 항목이 한 줄씩 나타나며 체크가 그어집니다 */ .lc-txt ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px} .lc-txt li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.6;color:#171E2A;word-break:keep-all;opacity:0;animation:lcLi .5s ease both} .lc-txt li:nth-child(1){animation-delay:.3s} .lc-txt li:nth-child(2){animation-delay:.44s} .lc-txt li:nth-child(3){animation-delay:.58s} @keyframes lcLi{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}} .lc-ck{flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:#080C21;display:grid;place-items:center} .lc-ck svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26;animation:lcCk .35s ease both} .lc-txt li:nth-child(1) .lc-ck svg{animation-delay:.5s} .lc-txt li:nth-child(2) .lc-ck svg{animation-delay:.64s} .lc-txt li:nth-child(3) .lc-ck svg{animation-delay:.78s} @keyframes lcCk{to{stroke-dashoffset:0}} .lc-cta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;height:46px;padding:0 22px;border-radius:999px;background:#080C21;color:#fff; font-size:14.5px;font-weight:700;transition:background .25s,transform .25s,box-shadow .25s} .lc-cta i{font-style:normal;font-size:12px;transition:transform .25s} .lc-cta:hover{background:#171E2A;transform:translateY(-2px);box-shadow:0 12px 26px rgba(8,12,33,.24)} .lc-cta:hover i{transform:translate(2px,-2px)} @media (max-width:1000px){ .lc-grid{grid-template-columns:minmax(0,1fr);gap:20px} .lc-tabs{flex-direction:row;flex-wrap:wrap} .lc-ind{display:none} .lc-tab{flex:1 1 calc(50% - 6px);padding:16px 18px} .lc-tab.on{background:#fff} .lc-view{grid-template-columns:minmax(0,1fr)} } @media (max-width:760px){ .lc{min-height:0;padding:clamp(70px,12vw,100px) 0} .lc-in{padding:0 20px} .lc-tab{flex:1 1 100%} .lc-photo img{height:200px} .lc-bg::after{background:rgba(8,12,33,.82)} } @media (prefers-reduced-motion:reduce){ .lc.fx-ready *{animation:none!important;opacity:1!important;transform:none!important;transition:none!important} .lc-ln>span{transform:none!important} .lc-view,.lc-photo::after,.lc-photo img,.lc-txt li,.lc-ck svg{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0} .lc-tab.on::before{display:none} } /* ══ 전국면허(/license-map) 전용 ══ */ .ah{position:relative;isolation:isolate;overflow:hidden;background:#080C21;color:#fff;padding:clamp(56px,6vw,84px) 0 clamp(46px,5vw,70px)} .ah-bg{position:absolute;inset:0;z-index:-1;overflow:hidden} .ah-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ah-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,33,.92) 0%,rgba(8,12,33,.75) 45%,rgba(8,12,33,.62) 100%)} .ah-wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,66%);z-index:-1;pointer-events:none;opacity:.05} .ah-wm img{width:100%;display:block} .ah-in{width:min(1200px,100%);margin:0 auto;padding:0 28px} .bc{margin:0 0 16px;font-size:13px;color:rgba(255,255,255,.5);display:flex;gap:8px;flex-wrap:wrap} .bc a:hover{color:#fff} .bc em{font-style:normal;color:#fff;font-weight:700} .ah-cat{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.06em;color:#F6D289;border:1px solid rgba(243,195,92,.45);border-radius:999px;padding:6px 13px;margin-bottom:14px} .ah h1{font-size:clamp(27px,3vw,42px);font-weight:800;letter-spacing:-.04em;line-height:1.3;word-break:keep-all} .ah-lead{margin:18px 0 0;font-size:15.5px;line-height:1.9;color:rgba(255,255,255,.82);max-width:56em;word-break:keep-all} .ah-lead b{color:#fff} .ah-date{margin:16px 0 0;font-size:12.5px;color:rgba(255,255,255,.45);line-height:1.7} .ah-facts{margin:30px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px} .ah-fact{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:15px 18px} .ah-fact small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:rgba(255,255,255,.5)} .ah-fact b{display:block;margin-top:5px;font-size:15.5px;font-weight:800;letter-spacing:-.02em;word-break:keep-all} .ah-fact b em{font-style:normal;color:#F6D289} .ar-wrap{width:min(1200px,100%);margin:0 auto;padding:clamp(36px,4vw,56px) 28px 70px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start} .ar-side{position:sticky;top:calc(var(--nav-h) + 30px);display:grid;gap:16px} .ar{background:#fff;border:1px solid #E7EAF0;border-radius:20px;padding:clamp(26px,3.4vw,48px)} .ar-thumb{display:block;width:100%;max-width:440px;border-radius:16px;margin:0 auto 34px;box-shadow:0 16px 36px rgba(8,12,33,.16)} .ar h2{margin:96px 0 28px;font-size:clamp(19px,2vw,23px);font-weight:800;letter-spacing:-.03em;line-height:1.45;word-break:keep-all; padding-left:16px;border-left:4px solid #080C21} .ar section:first-of-type h2{margin-top:0} .ar h2 mark{background:none;color:#B07A16} .ar p{margin:16px 0 0;font-size:15px;line-height:1.95;color:#333C4E;word-break:keep-all} .ar p b{color:#080C21} .ar-note{margin:18px 0 0;background:#F5F7FA;border-radius:12px;padding:14px 18px;font-size:13.5px;line-height:1.8;color:#5B6372} .ar-note b{color:#080C21} .ar table{width:100%;margin:18px 0 0;border-collapse:collapse;font-size:14px;line-height:1.7} .ar th,.ar td{padding:13px 14px;border-bottom:1px solid #ECEFF4;text-align:left;vertical-align:top;word-break:keep-all} .ar thead th{background:#080C21;color:#fff;font-size:13px;font-weight:700} .ar thead th:first-child{border-radius:10px 0 0 0} .ar thead th:last-child{border-radius:0 10px 0 0} .ar tbody th{width:130px;background:#F7F8FB;font-weight:700;color:#080C21;font-size:13.5px} .ar td b{color:#080C21} .ar td em{font-style:normal;font-size:12.5px;color:#8A93A3;display:block;margin-top:2px} .ar-steps{margin:20px 0 0;counter-reset:stp} .ar-step{position:relative;padding:0 0 22px 46px} .ar-step:last-child{padding-bottom:0} .ar-step::before{counter-increment:stp;content:counter(stp);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%; background:#080C21;color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center} .ar-step::after{content:"";position:absolute;left:14.5px;top:34px;bottom:4px;width:1.5px;background:#E7EAF0} .ar-step:last-child::after{display:none} .ar-step b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.02em;line-height:30px} .ar-step p{margin:4px 0 0;font-size:13.5px;color:#5B6372;line-height:1.75} .ar-list{margin:16px 0 0;display:grid;gap:9px} .ar-list li{list-style:none;display:flex;gap:10px;font-size:14.5px;line-height:1.7;color:#333C4E;word-break:keep-all} .ar-list li::before{content:"✓";flex:none;width:19px;height:19px;margin-top:3px;border-radius:50%;background:#080C21;color:#fff; font-size:11px;font-weight:800;display:grid;place-items:center} .ar-dl{display:inline-flex;align-items:center;gap:10px;margin:24px 0 26px;padding:13px 22px;border-radius:10px;border:1.5px solid #080C21; font-size:14px;font-weight:800;color:#080C21;transition:.22s} .ar-dl:hover{background:#080C21;color:#fff;transform:translateY(-2px)} .ar-dl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ar-faq{margin:18px 0 0;display:grid;gap:10px} .ar-faq details{border:1px solid #E7EAF0;border-radius:12px;overflow:hidden;background:#fff} .ar-faq summary{list-style:none;display:flex;align-items:center;gap:12px;padding:16px 18px;font-size:14.5px;font-weight:700;cursor:pointer;color:#080C21;word-break:keep-all} .ar-faq summary::-webkit-details-marker{display:none} .ar-faq summary::before{content:"Q";flex:none;width:24px;height:24px;border-radius:8px;background:#080C21;color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center} .ar-faq summary::after{content:"+";margin-left:auto;font-size:18px;font-weight:600;color:#9AA3B2;transition:transform .25s} .ar-faq details[open] summary::after{transform:rotate(45deg)} .ar-faq details p{margin:0;padding:0 18px 16px 54px;font-size:14px;line-height:1.85;color:#5B6372;word-break:keep-all} .toc{background:#fff;border:1px solid #E7EAF0;border-radius:16px;padding:20px 22px} .toc .tt{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.08em;color:#9AA3B2;margin-bottom:12px} .toc a{display:block;padding:7px 0 7px 14px;font-size:13.5px;font-weight:600;color:#5B6372;border-left:2px solid #ECEFF4;transition:.2s} .toc a:hover,.toc a.on{color:#080C21;border-left-color:#080C21;font-weight:800} .cz{position:relative;overflow:hidden;border-radius:18px;padding:30px 22px 22px;text-align:center;color:#fff; background:radial-gradient(130% 95% at 50% 0%,#161C3A,#080C21 72%); border:1px solid rgba(255,255,255,.1);box-shadow:0 26px 60px rgba(8,12,33,.35)} .cz-conf i{position:absolute;width:3px;height:10px;border-radius:2px;opacity:.7;pointer-events:none} .cz-conf i:nth-child(1){left:9%;top:9%;background:#F3C35C;transform:rotate(35deg)} .cz-conf i:nth-child(2){right:10%;top:6%;background:#E4573D;transform:rotate(-20deg);height:7px} .cz-conf i:nth-child(3){left:15%;top:30%;background:#5C7CFA;transform:rotate(70deg);height:8px} .cz-conf i:nth-child(4){right:6%;top:26%;background:#F3C35C;transform:rotate(15deg)} .cz-conf i:nth-child(5){left:5%;top:52%;background:#67C587;transform:rotate(-40deg);height:7px} .cz-conf i:nth-child(6){right:13%;top:47%;background:#F3C35C;transform:rotate(80deg);height:8px} .cz-conf i:nth-child(7){left:50%;top:3.5%;background:#E4573D;transform:rotate(10deg);height:6px} .cz-zimg{display:block;width:88%;max-width:300px;margin:2px auto 0;filter:drop-shadow(0 10px 24px rgba(243,185,79,.22))} .cz-sub{margin:16px 0 0;font-size:14.5px;line-height:1.6;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:-.02em;word-break:keep-all} .cz-sub b{display:block;font-size:16.5px;font-weight:800;color:#fff} .cz-ticket{position:relative;margin:18px auto 0;max-width:260px} .cz-ticket>svg{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 26px rgba(0,0,0,.35))} .cz-tin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:15px 20px} .cz-tbtn{flex:1;display:flex;align-items:center;justify-content:center;height:100%;max-height:52px;background:#12151F;border-radius:10px; font-size:16.5px;font-weight:900;color:#fff;letter-spacing:-.02em;cursor:pointer;transition:.22s} .cz-tbtn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(18,21,31,.45)} .cz-tel{margin:15px 0 0;font-size:12.5px;color:rgba(255,255,255,.55)} .cz-tel b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums} .rel{padding:clamp(44px,5vw,64px) 0 clamp(50px,5vw,70px)} .rel-in{width:min(1200px,100%);margin:0 auto;padding:0 28px} .rel h3{font-size:19px;font-weight:800;letter-spacing:-.02em;color:#080C21} .rel h3 small{display:block;margin-top:6px;font-size:12.5px;font-weight:600;color:#8A93A3} .rel-grid{margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px} .rcard{background:linear-gradient(90deg,#F2BB54 0 3px,transparent 3px),#fff; border:1px solid #E7EAF0;border-radius:13px;padding:14px 17px;display:flex;align-items:center;justify-content:space-between;gap:10px;transition:.25s} .rcard b{font-size:13.5px;font-weight:800;word-break:keep-all;color:#171E2A} .rcard i{font-style:normal;flex:none;color:#B07A16;font-size:13px;transition:transform .25s} .rcard:hover{border-color:#E9B44C;transform:translateY(-2px);box-shadow:0 10px 24px rgba(8,12,33,.08)} .rcard:hover i{transform:translateX(3px)} footer{background:#080C21;color:rgba(255,255,255,.45);text-align:center;font-size:12.5px;padding:24px 20px;border-top:1px solid rgba(255,255,255,.08)} @media (max-width:960px){ .ar-wrap{grid-template-columns:minmax(0,1fr)} .ar-side{position:static;order:2} .toc{display:none} } @media (max-width:700px){.flt a span{display:none}.flt a{padding:0;width:52px;justify-content:center}} .ar p{margin:18px 0 0;line-height:2.0;color:#39424F} .ar p+p{margin-top:20px} .ar table{font-size:14.2px} .ar th,.ar td{padding:14px 16px} .ar tbody tr:nth-child(even) th{background:#F2F4F8} .ar tbody tr:nth-child(even) td{background:#FAFBFD} .ar td em{margin-top:4px;line-height:1.6} .ar-note{margin:22px 0 0;background:#FDF9F0;border-left:4px solid #E9B44C;border-radius:0 12px 12px 0;padding:16px 20px;line-height:1.85} .ar-list{margin:18px 0 0;gap:11px} .ar-list li{line-height:1.8} .ar-step p{color:#59626F;line-height:1.8} .ar-step b{letter-spacing:-.015em} .ar-faq details p{line-height:1.9;padding-bottom:18px} .ar-faq summary{line-height:1.5} .ar li b,.ar td b{color:#080C21} /* ── 허브(전국·서울) ── */ .mh{position:relative;isolation:isolate;background:#080C21;color:#fff;overflow:hidden;min-height:100svh;padding:clamp(70px,8vw,110px) 0 clamp(60px,6vw,90px)} .mh-bg{position:absolute;inset:0;z-index:-1;overflow:hidden} .mh-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .mh-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,33,.9) 0%,rgba(8,12,33,.72) 45%,rgba(8,12,33,.6) 100%)} .mh-in{width:min(1240px,100%);margin:0 auto;padding:0 28px} .mh-bc{font-size:13px;color:rgba(255,255,255,.55)} .mh h1{margin:14px 0 0;font-size:clamp(30px,3.6vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1.2} .mh-sub{margin:16px 0 0;font-size:15.5px;color:rgba(255,255,255,.78);word-break:keep-all} .mh-date{margin:10px 0 0;font-size:12.5px;color:rgba(255,255,255,.45)} .mh-find{margin:30px 0 0;display:grid;grid-template-columns:1fr 1fr 1.2fr auto;gap:10px;background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .mh-find label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.5);margin:2px 0 6px 4px} .mh-q{grid-column:1/-1;position:relative} .mh-qbox{display:flex;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:0 14px} .mh-qbox svg{width:18px;height:18px;flex:none;fill:none;stroke:#9AA3B2;stroke-width:2;stroke-linecap:round} .mh-qbox input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:15px;font-weight:600;color:#080C21;padding:13px 0} .mh-qbox input::placeholder{color:#A5ADBA;font-weight:500} .mh-sug{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;background:#fff;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.35);overflow:hidden;padding:6px} .mh-sug a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;font-size:14.5px;font-weight:700;color:#171E2A;cursor:pointer} .mh-sug a small{font-weight:600;font-size:12px;color:#9AA3B2} .mh-sug a:hover{background:#EEF1F6} .mh-sug a b{color:#080C21} .mh-find select{width:100%;border:0;border-radius:10px;background:#fff;color:#080C21;font:inherit;font-size:15px;font-weight:700;padding:12px 12px} .mh-go{align-self:end;height:47px;padding:0 26px;border:0;border-radius:10px;background:#fff;color:#080C21;font-weight:800;font-size:15px; display:inline-flex;align-items:center;gap:8px;transition:background .25s,transform .25s} .mh-go:hover{background:#DCE1E8;transform:translateY(-2px)} .mh-hot{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .mh-hot small{font-size:12.5px;color:rgba(255,255,255,.5);font-weight:700;margin-right:2px} .mh-hot a{font-size:13px;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 14px;transition:background .25s} .mh-hot a:hover{background:rgba(255,255,255,.22)} .kmap-wrap{margin:48px auto 0;max-width:700px} .kmap-cap{text-align:center;font-size:14.5px;color:rgba(255,255,255,.65);margin-bottom:26px} .kmap{position:relative} .kmap-wm{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:105%;pointer-events:none;z-index:0;opacity:.04} .kmap-wm img{width:100%;height:auto;display:block} .sec-wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,70%);z-index:-1;pointer-events:none;opacity:.05} .sec-wm img{width:100%;height:auto;display:block} .kmap #kmapSvg{position:relative;z-index:1} .kmap svg{width:100%;height:auto;display:block; filter:drop-shadow(0 1px 0 #93A0B4) drop-shadow(0 1px 0 #8B98AD) drop-shadow(0 1px 0 #8593A9) drop-shadow(0 1px 0 #7E8CA3) drop-shadow(0 1px 0 #77869E) drop-shadow(0 1px 0 #718099) drop-shadow(0 1px 0 #6A7A94) drop-shadow(0 1px 0 #64748F) drop-shadow(0 30px 38px rgba(0,0,0,.5))} .kp{fill:#F4F6FA;stroke:#BFC8D5;stroke-width:.7;cursor:pointer;transition:fill .25s} .kp:hover,.kp.on{fill:#AFC0DE} .klab{position:absolute;transform:translate(-50%,-50%);background:#080C21;color:#fff;font-size:12.5px;font-weight:800; padding:6px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;box-shadow:0 5px 12px rgba(0,0,0,.4); transition:background .22s,color .22s,transform .22s;z-index:2} .klab small{font-weight:600;font-size:10.5px;opacity:.55;margin-left:4px} .klab:hover,.klab.on{background:#fff;color:#080C21;transform:translate(-50%,-50%) translateY(-2px)} @media (max-width:700px){.klab{font-size:10.5px;padding:4px 8px}.klab small{display:none}} .tw-in{width:min(1240px,100%);margin:0 auto;padding:0 28px} .tw-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap} .tw-head h2{font-size:clamp(24px,2.6vw,36px);font-weight:800;letter-spacing:-.035em;color:#080C21} .tw-head p{font-size:14px;color:#5B6372} .tw-tabs{margin:24px 0 0;display:flex;gap:8px} .tw-tab{border:1px solid #DCE1E8;background:#fff;color:#5B6372;border-radius:999px;padding:10px 20px;font-size:14px;font-weight:700;transition:.25s} .tw-tab.on{background:#080C21;border-color:#080C21;color:#fff} .tw-grid{margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px} .tcard{background:#fff;border:1px solid #E3E6EC;border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:5px; transition:border-color .25s,transform .25s,box-shadow .25s} .tcard:hover{border-color:#080C21;transform:translateY(-3px);box-shadow:0 12px 26px rgba(8,12,33,.1)} .tcard b{font-size:15px;font-weight:800;color:#171E2A;letter-spacing:-.02em;word-break:keep-all} .tcard span{font-size:12.5px;color:#6B7280} .tcard i{font-style:normal;font-size:11.5px;color:#9AA3B2;margin-top:2px} .tcard:hover i{color:#080C21} .rghero{position:relative;isolation:isolate;background:#080C21;color:#fff;overflow:hidden;min-height:100svh;padding:clamp(60px,7vw,90px) 0} .rghero .rg-fact{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15)} .rghero .rg-fact small{color:rgba(255,255,255,.5)} .rghero .rg-fact b{color:#fff} .rghero h3,.rghero .sggl-t{margin:46px 0 0;font-size:19px;font-weight:800;color:#fff;letter-spacing:-.02em} .rghero .gu{position:relative;overflow:hidden;isolation:isolate;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff;padding:13px 8px} .rghero .gu::before{content:"";position:absolute;inset:0;z-index:-2;background:#fff;transform:translateX(-101%);transition:transform .35s cubic-bezier(.22,1,.36,1)} .rghero .gu::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;transform:skewX(-20deg);z-index:-1;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(175,192,222,.75),transparent)} .rghero .gu:hover{color:#080C21;border-color:#fff;transform:translateY(-2px)} .rghero .gu:hover::before{transform:none} .rghero .gu:hover::after{animation:guShine .55s ease .16s} @keyframes guShine{from{left:-70%}to{left:130%}} .rghero .gu.sido::before{transform:none} .rghero .gu.sido{background:#fff;border-color:#fff;color:#080C21} .tsearch{margin:16px 0 0;display:flex;align-items:center;gap:10px;max-width:520px;background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:0 14px;transition:border-color .25s,background .25s} .tsearch:focus-within{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)} .tsearch svg{width:17px;height:17px;flex:none;fill:none;stroke:rgba(255,255,255,.5);stroke-width:2;stroke-linecap:round} .tsearch input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:14.5px;font-weight:600;color:#fff;padding:12px 0} .tsearch input::placeholder{color:rgba(255,255,255,.4);font-weight:500} .rghero .tw-tabs{margin-top:14px} .rghero .tw-tab{background:transparent;border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.75)} .rghero .tw-tab.on{background:#fff;border-color:#fff;color:#080C21} .rghero .tcard{position:relative;overflow:hidden;isolation:isolate;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);box-shadow:none} .rghero .tcard::before{content:"";position:absolute;inset:0;z-index:-2;background:#fff;transform:translateX(-101%);transition:transform .35s cubic-bezier(.22,1,.36,1)} .rghero .tcard::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;transform:skewX(-20deg);z-index:-1;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(175,192,222,.75),transparent)} .rghero .tcard b{color:#fff;transition:color .25s} .rghero .tcard i{margin-top:0;color:rgba(255,255,255,.55);transition:color .25s} .rghero .tcard:hover{border-color:#fff;transform:translateY(-2px);box-shadow:none} .rghero .tcard:hover::before{transform:none} .rghero .tcard:hover::after{animation:guShine .55s ease .16s} .rghero .tcard:hover b,.rghero .tcard:hover i{color:#080C21} .rghero h1{margin:0;font-size:clamp(28px,3vw,44px);font-weight:800;letter-spacing:-.04em} .rghero-lead{margin:16px 0 0;font-size:15px;line-height:1.85;color:rgba(255,255,255,.78);max-width:52em;word-break:keep-all} .rghero .mh-date{margin-top:16px} .rg-in{width:min(1240px,100%);margin:0 auto;padding:0 28px} .rg-lead{margin:14px 0 0;font-size:15px;line-height:1.85;color:#5B6372;max-width:52em;word-break:keep-all} .rg-facts{margin:26px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px} .rg-fact{background:#F4F6FA;border:1px solid #E3E6EC;border-radius:14px;padding:16px 18px} .rg-fact small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:#9AA3B2} .rg-fact b{display:block;margin-top:5px;font-size:15.5px;font-weight:800;color:#171E2A;letter-spacing:-.02em;word-break:keep-all} .gu-grid{margin:16px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px} .gu{background:#fff;border:1px solid #DCE1E8;border-radius:10px;padding:11px 8px;text-align:center;font-size:14px;font-weight:700;color:#3A4557; transition:.22s} .gu:hover{background:#080C21;border-color:#080C21;color:#fff;transform:translateY(-2px)} .gu i{font-style:normal;display:block;font-size:10.5px;font-weight:600;color:#9AA3B2;margin-top:1px} .gu:hover i{color:rgba(255,255,255,.6)} @media (max-width:960px){ .mh-find{grid-template-columns:1fr 1fr} .mh-go{grid-column:1/-1;justify-content:center} .mh-map-wrap{grid-template-columns:minmax(0,1fr)} .tilemap{max-width:none} .dg-grid{grid-template-columns:minmax(0,1fr)} .dg-side{position:static} } /* 고정 네비 아래 여백 — 면허 페이지 히어로 공통 */ .mh.page-hero{padding-top:clamp(150px,16vw,190px)} .rghero.page-hero{padding-top:clamp(140px,15vw,180px)} .ah.page-hero{padding-top:clamp(140px,15vw,180px)} /* 준비 중 시·도 알약 */ .klab.soon{background:rgba(8,12,33,.55);color:rgba(255,255,255,.55);cursor:default;box-shadow:none} .klab.soon:hover{transform:translate(-50%,-50%)} .ar-thumb{height:auto} /* 핵심 요약 — 썸네일 아래, AI 인용 지점(.ar-sum) */ .ar-sum{margin:0 0 36px;background:#F7F9FC;border:1px solid #E3E8F0;border-radius:14px;padding:20px 22px} .ar-sum .ars-t{margin:0 0 12px;font-size:11.5px;font-weight:800;letter-spacing:.1em;color:#8A93A3} .ar-sum ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .ar-sum li{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:baseline;gap:14px;font-size:14px;border-bottom:1px solid #EFF2F7;padding-bottom:10px} .ar-sum li span{color:#8A93A3;font-weight:700;font-size:12.5px;word-break:keep-all} .ar-sum li b{color:#080C21;line-height:1.6;word-break:keep-all} .ar-sum li em{display:block;margin-top:2px;font-size:12.5px;font-weight:600;color:#8A93A3} .ar-sum li em{font-style:normal;color:#B07A16} .ar-sum .ars-note{margin:14px 0 0;font-size:13.5px;line-height:1.85;color:#39424F;word-break:keep-all} /* ── 시·군·구 페이지 — 본문이 section 없이 h2/p/details 로 이어집니다 ── */ .ar>h2{margin-top:56px} .ar>h2:first-child,.ar-thumb+h2{margin-top:0} .ar>details{border:1px solid #E7EAF0;border-radius:12px;overflow:hidden;background:#fff;margin:10px 0 0} .ar>details summary{list-style:none;display:flex;align-items:center;gap:12px;padding:16px 18px;font-size:14.5px;font-weight:700;cursor:pointer;color:#080C21;word-break:keep-all} .ar>details summary::-webkit-details-marker{display:none} .ar>details summary::before{content:"Q";flex:none;width:24px;height:24px;border-radius:8px;background:#080C21;color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center} .ar>details summary::after{content:"+";margin-left:auto;font-size:18px;font-weight:600;color:#9AA3B2;transition:transform .25s} .ar>details[open] summary::after{transform:rotate(45deg)} .ar>details p{margin:0;padding:0 18px 16px 54px;font-size:14px;line-height:1.85;color:#5B6372;word-break:keep-all} /* 시·도 허브의 시·군·구 목록 */ /* 좁은 화면에서 표가 넘칠 때 — 양도양수 구비서류 표 */ .ar-tw{margin:18px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch} .ar-tw table{margin:0;min-width:520px} .sggl{margin:46px 0 0} .sggl h3,.sggl .sggl-t{margin:0 0 4px} /* ── 공제조합 안내 ── */ .gj-grid{margin:22px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px} .gj-card{background:#F7F9FC;border:1px solid #E3E8F0;border-radius:14px;padding:16px 18px} .gj-name{margin:0;font-size:15.5px;font-weight:800;color:#080C21;letter-spacing:-.02em} .gj-name a{color:#080C21;border-bottom:1px solid #C9D2E0} .gj-name a:hover{color:#B07A16;border-bottom-color:#E9B44C} .gj-unit{margin:8px 0 0;font-size:13.5px;color:#5B6372} .gj-unit b{color:#080C21} .gj-unit em{font-style:normal;font-size:12px;color:#9AA3B2} .gj-loan{margin:5px 0 0;font-size:12.5px;color:#8A93A3} .gj-tr{margin:10px 0 0;font-size:12.5px;line-height:1.7;color:#6B7280;word-break:keep-all} .gj-tw{margin:18px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch} .gj-table{width:100%;min-width:640px;border-collapse:collapse;font-size:13.5px;line-height:1.7} .gj-table thead th{background:#080C21;color:#fff;font-size:12.5px;font-weight:700;padding:12px 13px;text-align:left} .gj-table tbody th{background:#F2F4F8;font-weight:800;color:#080C21;font-size:13px;padding:12px 13px;text-align:left;vertical-align:top;border-bottom:1px solid #E7EAF0;white-space:nowrap} .gj-table td{padding:12px 13px;border-bottom:1px solid #ECEFF4;vertical-align:top;word-break:keep-all;color:#333C4E} .gj-table td b{color:#080C21} .lmi{background:#F4F6FA;border-top:1px solid #E6EAF1;padding:clamp(52px,6vw,80px) 0} .lmi+.lmi{border-top:0;padding-top:0} .lmi-in{width:min(1240px,100%);margin:0 auto;padding:0 28px} .lmi-sec+.lmi-sec{margin-top:clamp(42px,4.4vw,64px);padding-top:clamp(42px,4.4vw,64px);border-top:1px solid #E6EAF1} .lmi-t{margin:0;font-size:clamp(20px,2.2vw,27px);font-weight:800;letter-spacing:-.03em;color:#080C21;line-height:1.45;word-break:keep-all} .lmi-lead{margin:12px 0 0;font-size:15px;line-height:1.9;color:#5B6372;max-width:54em;word-break:keep-all} .lmi-lead b{color:#080C21} /* 한눈에 — 이 사이트가 이미 쓰는 요약 카드(.ah-fact·.rg-fact)와 같은 모양입니다. 2열 정의 목록으로 두면 좌우 행 높이가 어긋나고 홀수 항목에서 빈칸이 생겨 어색합니다. */ .lmi-facts{margin:22px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));gap:10px} .lmi-fact{background:#fff;border:1px solid #E3E8F0;border-radius:14px;padding:16px 18px} .lmi-fact small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:#9AA3B2} .lmi-fact b{display:block;margin-top:6px;font-size:15px;font-weight:800;color:#171E2A;letter-spacing:-.02em;line-height:1.55;word-break:keep-all} .lmi-fact em{font-style:normal;display:block;margin-top:4px;font-size:12.5px;font-weight:600;color:#8A93A3;letter-spacing:0} /* 표 — 좁은 화면에서는 표만 가로로 밀립니다 */ .lmi-tw{margin:22px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch} .lmi-tbl{width:100%;min-width:520px;border-collapse:separate;border-spacing:0;font-size:14.2px;line-height:1.75; background:#fff;border:1px solid #E3E8F0;border-radius:12px;overflow:hidden} .lmi-tbl thead th{background:#080C21;color:#fff;font-size:13px;font-weight:700;padding:13px 16px;text-align:left;word-break:keep-all} .lmi-tbl tbody th{width:148px;background:#F7F8FB;font-weight:700;color:#080C21;font-size:13.5px;text-align:left} /* 첫 칸이 짧은 표는 그 칸을 좁힙니다 — 순서 번호에 148px 을 주면 빈 자리만 넓습니다. 등급은 글을 만들 때 src/license/table.js 가 붙입니다. */ .lmi-tbl-n tbody th{width:54px;text-align:center;white-space:nowrap} .lmi-tbl-n thead th:first-child{width:54px;text-align:center} .lmi-tbl-s tbody th{width:98px} @media (max-width:560px){ .lmi-tbl-n tbody th,.lmi-tbl-n thead th:first-child{width:44px} .lmi-tbl-s tbody th{width:86px} } .lmi-tbl tbody th,.lmi-tbl tbody td{padding:14px 16px;vertical-align:top;word-break:keep-all;border-top:1px solid #ECEFF4;color:#39424F} .lmi-tbl tbody b{color:#080C21} .lmi-tbl tbody em{font-style:normal;display:block;margin-top:3px;font-size:12.5px;color:#8A93A3} .lmi-list{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:11px} /* 순서가 있는 목록 — 번호를 CSS 가 매깁니다. 본문에 '하나·둘·셋' 을 적지 않아도 되고, 굵은 라벨 자리에는 그 단계가 무엇인지가 들어가 훑어보기 좋아집니다. */ .lmi-step{margin:20px 0 0;padding:0;list-style:none;counter-reset:lst;display:grid;gap:12px} .lmi-step li{position:relative;counter-increment:lst;padding-left:36px;font-size:14.5px; line-height:1.85;color:#39424F;word-break:keep-all} .lmi-step li::before{content:counter(lst);position:absolute;left:0;top:3px; width:23px;height:23px;border-radius:8px;background:#080C21;color:#fff; font-size:12px;font-weight:700;display:grid;place-items:center} .lmi-step li b{color:#080C21} @media (max-width:560px){ .lmi-step li{padding-left:31px} .lmi-step li::before{width:21px;height:21px} } .lmi-list li{position:relative;padding-left:19px;font-size:14.5px;line-height:1.85;color:#39424F;word-break:keep-all} .lmi-list li::before{content:"";position:absolute;left:3px;top:11px;width:5px;height:5px;border-radius:50%;background:#C3CBD8} .lmi-list li b{color:#080C21} .lmi-note{margin:18px 0 0;padding-left:15px;border-left:2px solid #DDE3EC;font-size:13.5px;line-height:1.9;color:#6B7280;word-break:keep-all} .lmi-note b{color:#39424F} .lmi-sec .ar-faq{margin-top:20px} /* 본문 옆에 상담 카드를 두는 배치 — 칼럼 페이지(.ar-wrap)와 같은 자리에 오게 합니다 */ .lmi-side{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start} .lmi-side .lmi-main{min-width:0} .lmi-side .ar-side{position:sticky;top:calc(var(--nav-h) + 30px);display:grid;gap:16px} @media (max-width:960px){ .lmi-side{grid-template-columns:minmax(0,1fr);gap:28px} .lmi-side .ar-side{position:static;order:2} } /* ── 상단 메뉴의 펼침 목록 (전국면허 → 시·도) ── */ .has-sub{position:relative} .nsub{position:absolute;left:50%;top:100%;transform:translateX(-50%) translateY(-6px); display:grid;grid-template-columns:repeat(3,minmax(72px,1fr));gap:2px; min-width:260px;padding:10px;border-radius:16px;background:#fff; border:1px solid rgba(33,43,60,.08);box-shadow:0 16px 40px rgba(23,30,42,.18); opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;z-index:30} .has-sub:hover .nsub,.has-sub:focus-within .nsub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} /* 히어로 위에서는 메뉴 글자가 흰색이 됩니다(.nav-wrap.on-hero .menu a). 펼침 목록은 배경이 흰색이라 그 색을 그대로 물려받으면 글자가 보이지 않습니다. */ .nav-wrap .nsub a,.nav-wrap.on-hero .menu .nsub a{display:block;padding:9px 10px;border-radius:9px; text-align:center;font-size:14px;font-weight:700;color:#3A4557;white-space:nowrap} .nav-wrap .nsub a:hover,.nav-wrap.on-hero .menu .nsub a:hover{background:#F1F4F9;color:#080C21} @media (max-width:980px){ .nsub{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0; background:#F7F9FC;border-radius:12px;padding:8px;margin:2px 0 6px;min-width:0; grid-template-columns:repeat(4,minmax(0,1fr))} .nsub a{padding:10px 4px;font-size:13.5px} } @media (max-width:860px){.lmi-sum dl{grid-template-columns:minmax(0,1fr)}} @media (max-width:620px){ .lmi-sum div{grid-template-columns:minmax(0,1fr);gap:3px} .lmi-sum dt{font-size:12px} } .cfd{margin:18px 0 0} .cfd-s{display:flex;align-items:center;gap:10px;max-width:460px; background:#fff;border:1px solid #DDE2EB;border-radius:12px;padding:0 14px; transition:border-color .2s,box-shadow .2s} .cfd-s:focus-within{border-color:#8E9AAF;box-shadow:0 0 0 3px rgba(142,154,175,.14)} .cfd-s svg{width:18px;height:18px;flex:none;fill:none;stroke:#98A0B0;stroke-width:2; stroke-linecap:round} .cfd-s input{flex:1;min-width:0;border:0;background:none;outline:none; font:inherit;font-size:14px;color:#1B2230;padding:12px 0} .cfd-s input::placeholder{color:#AEB6C4} .cfd-g{transition:max-height .28s ease} .cfd.is-fold .cfd-g{overflow:hidden; -webkit-mask-image:linear-gradient(#000 calc(100% - 34px),transparent); mask-image:linear-gradient(#000 calc(100% - 34px),transparent)} .cfd-more{display:block;margin:12px auto 0;padding:11px 26px; background:#fff;border:1px solid #DDE2EB;border-radius:999px; font:inherit;font-size:13px;font-weight:600;color:#3A4557;cursor:pointer} .cfd-more:active{transform:translateY(1px)} @media (prefers-reduced-motion:reduce){ .cfd-g{transition:none} } .cfd-no{margin:14px 0 0;font-size:13px;color:#8A93A5} .gu,.tcard,.cfd-more,.tpk-c,.tpk-r{position:relative;overflow:hidden;isolation:isolate; transition:color .25s,border-color .25s,transform .25s,box-shadow .25s} .gu::before,.tcard::before,.cfd-more::before,.tpk-c::before,.tpk-r::before{content:"";position:absolute;inset:0;z-index:-2; background:#080C21;transform:translateX(-101%); transition:transform .35s cubic-bezier(.22,1,.36,1)} .gu::after,.tcard::after,.cfd-more::after,.tpk-c::after,.tpk-r::after{content:"";position:absolute;top:0;left:-70%; width:45%;height:100%;transform:skewX(-20deg);z-index:-1;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent)} .gu:hover::before,.tcard:hover::before,.tpk-c:hover::before,.tpk-r:hover::before, .cfd-more:hover::before,.cfd-more:focus-visible::before{transform:none} .gu:hover::after,.tcard:hover::after,.tpk-c:hover::after,.tpk-r:hover::after, .cfd-more:hover::after,.cfd-more:focus-visible::after{animation:guShine .55s ease .16s} /* 바탕은 흰색 그대로 둡니다 — 미끄러져 들어오는 면이 보여야 하므로 */ .gu:hover{background:#fff;border-color:#080C21;color:#fff;transform:translateY(-2px)} .gu:hover i{color:#fff} .tcard:hover{background:#fff;border-color:#080C21;color:#fff;transform:translateY(-3px); box-shadow:0 12px 26px rgba(8,12,33,.16)} .tcard:hover b,.tcard:hover i,.tcard:hover span{color:#fff} .cfd-more:hover,.cfd-more:focus-visible{color:#fff;border-color:#080C21} @media (prefers-reduced-motion:reduce){ .gu::before,.tcard::before,.cfd-more::before,.tpk-c::before,.tpk-r::before{transition:none} .gu:hover::after,.tcard:hover::after,.cfd-more:hover::after,.tpk-c:hover::after,.tpk-r:hover::after{animation:none} } .nav-wrap .nsub a.nsub-all,.nav-wrap.on-hero .menu .nsub a.nsub-all{ grid-column:1/-1;margin:0 0 6px;padding:11px 10px; background:#080C21;color:#fff;border-radius:10px;font-size:13.5px} .nav-wrap .nsub a.nsub-all:hover,.nav-wrap.on-hero .menu .nsub a.nsub-all:hover{ background:#18203D;color:#fff} .nsub-two{grid-template-columns:minmax(238px,268px) minmax(214px,1fr);gap:12px;min-width:524px} .nsub-tp{display:grid;gap:2px;align-content:start} .nav-wrap .nsub-tp a,.nav-wrap.on-hero .menu .nsub-tp a{ text-align:left;white-space:normal;padding:9px 11px;line-height:1.35} .nsub-tp a b{display:block;font-size:14px;font-weight:700;color:#171E2A;letter-spacing:-.02em;word-break:keep-all} .nsub-tp a em{display:block;margin-top:3px;font-style:normal;font-size:11.5px;font-weight:500; color:#8A93A3;line-height:1.5;word-break:keep-all} .nav-wrap .nsub-tp a:hover b,.nav-wrap.on-hero .menu .nsub-tp a:hover b{color:#080C21} .nsub-rg{display:grid;grid-template-columns:repeat(3,minmax(66px,1fr));gap:2px;align-content:start; padding-left:12px;border-left:1px solid #EDF0F5} @media (max-width:980px){ .nsub-two{grid-template-columns:minmax(0,1fr);min-width:0;gap:8px} .nsub-rg{grid-template-columns:repeat(4,minmax(0,1fr));padding-left:0;border-left:0; padding-top:8px;border-top:1px solid #E6EAF1} } .itr{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center; padding:20px;background:rgba(8,12,33,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); animation:itrIn .22s ease} .itr[hidden]{display:none} @keyframes itrIn{from{opacity:0}to{opacity:1}} body.itr-open{overflow:hidden} .itr-box{position:relative;width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto; background:#fff;border-radius:22px;padding:34px 30px 26px; box-shadow:0 30px 70px rgba(8,12,33,.3);animation:itrUp .26s cubic-bezier(.22,1,.36,1)} .itr-box:focus{outline:none} @keyframes itrUp{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}} .itr-x{position:absolute;top:16px;right:16px;width:34px;height:34px;display:grid;place-items:center; background:none;border:0;border-radius:50%;font-size:26px;line-height:1;color:#98A0B0;cursor:pointer; transition:background .2s,color .2s} .itr-x:hover{background:#F1F4F9;color:#3A4557} .itr-box h2{margin:0 0 8px;font-size:23px;font-weight:800;letter-spacing:-.02em;color:#101726} .itr-box h2 mark{background:none;padding:0;color:inherit} .itr-lead{margin:0 0 22px;font-size:13.5px;color:#7A8497;line-height:1.65} .itr-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} /* 카드는 코발트 블루로 두고, 손을 얹으면 대표색이 밀려 들어옵니다 */ .itr-c{position:relative;overflow:hidden;isolation:isolate; display:flex;flex-direction:column;align-items:center;gap:6px; padding:18px 8px 15px;background:#0047AB;border:1px solid #0047AB;border-radius:14px; font:inherit;cursor:pointer;transition:border-color .25s,transform .25s,box-shadow .25s} .itr-c::before{content:"";position:absolute;inset:0;z-index:-2;background:#080C21; transform:translateX(-101%);transition:transform .35s cubic-bezier(.22,1,.36,1)} .itr-c::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%; transform:skewX(-20deg);z-index:-1;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent)} .itr-c:hover,.itr-c:focus-visible{border-color:#080C21;transform:translateY(-2px); box-shadow:0 10px 22px rgba(8,12,33,.22);outline:none} .itr-c:hover::before,.itr-c:focus-visible::before{transform:none} .itr-c:hover::after,.itr-c:focus-visible::after{animation:guShine .55s ease .16s} .itr-i svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s} .itr-c b{font-size:13.5px;font-weight:700;color:#fff;transition:color .25s; word-break:keep-all;text-align:center;line-height:1.35} .itr-c em{font-size:11.5px;font-style:normal;color:#B9CDEE;transition:color .25s; word-break:keep-all;text-align:center} .itr-c:hover em,.itr-c:focus-visible em{color:#AFC0DE} .itr-c:hover .itr-i svg,.itr-c:focus-visible .itr-i svg{stroke:#F3C35C} .itr-later{display:block;width:100%;margin:18px 0 0;padding:10px;background:none;border:0; font:inherit;font-size:12.5px;color:#98A0B0;cursor:pointer;text-decoration:underline; text-underline-offset:3px;transition:color .2s} .itr-later:hover{color:#3A4557} @media (max-width:560px){ .itr-box{padding:30px 20px 22px;border-radius:18px} .itr-box h2{font-size:20px} .itr-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .itr-c{padding:15px 6px 13px} } @media (prefers-reduced-motion:reduce){ .itr,.itr-box{animation:none} .itr-c::before{transition:none} .itr-c:hover::after{animation:none} } .hpk{padding:54px 20px 10px;background:#fff} .hpk-in{max-width:var(--wrap);margin:0 auto;text-align:center} .hpk h2{margin:0 0 10px;font-size:clamp(21px,3.4vw,27px);font-weight:800; letter-spacing:-.02em;color:#101726} .hpk-lead{margin:0 0 26px;font-size:14px;color:#7A8497;line-height:1.7} .hpk .itr-g{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px; max-width:1040px;margin:0 auto} .hpk .itr-c{padding:22px 10px 18px} @media (max-width:900px){ .hpk .itr-g{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:560px){ .hpk{padding:38px 16px 6px} .hpk .itr-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} } .tpk-g{margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:12px} .tpk-c{background:#fff;border:1px solid #E3E6EC;border-radius:14px;padding:18px 19px; display:flex;flex-direction:column;gap:6px} .tpk-c b{font-size:16px;font-weight:800;color:#171E2A;letter-spacing:-.02em;word-break:keep-all} .tpk-c em{font-style:normal;font-size:12.5px;line-height:1.6;color:#6B7280;word-break:keep-all} .tpk-c i{font-style:normal;font-size:11.5px;font-weight:600;color:#9AA3B2;margin-top:4px} .tpk-c:hover{background:#fff;border-color:#080C21;transform:translateY(-3px); box-shadow:0 12px 26px rgba(8,12,33,.14)} .tpk-c:hover b,.tpk-c:hover em,.tpk-c:hover i{color:#fff} /* 허브로 돌아가는 카드만 바탕을 옅게 깔아 성격을 구분합니다 */ .tpk-hub{background:#F7F9FC} .tpk-hub b{color:#080C21} /* 지역 알약 — 주제는 전국이 같고 접수처가 지역마다 다릅니다 */ .tpk-rg{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px} .tpk-r{background:#fff;border:1px solid #DCE1E8;border-radius:999px;padding:9px 16px; font-size:13.5px;font-weight:700;color:#3A4557} .tpk-r:hover{background:#fff;border-color:#080C21;color:#fff} @media (max-width:560px){ .tpk-g{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px} .tpk-c{padding:15px 15px} .tpk-c b{font-size:14.5px} .tpk-r{padding:8px 13px;font-size:12.5px} } .gpk{margin:18px 0 0} .gpk-list{margin:14px 0 0} .gpk-gu{font:inherit;cursor:pointer} .gpk-gu.on{background:#080C21;border-color:#080C21;color:#fff} .gpk-gu.on::before{transform:none} .gpk-2{margin:26px 0 0;padding:20px 20px 22px;background:#F7F9FC;border:1px solid #E3E8F0;border-radius:16px} .gpk-head{margin:0 0 14px;font-size:14.5px;color:#5B6372} .gpk-head b{font-size:16px;font-weight:800;color:#080C21} .gpk-2 .cfd{margin-top:0} /* 링크가 아닌 알약 — 그 갈래에 해당 글이 없는 시·군·구입니다 */ .tpk-off{color:#8A93A3;background:#F7F9FC;cursor:default} .tpk-off:hover{border-color:#DCE1E8;color:#8A93A3;transform:none;box-shadow:none} .tpk-off::before,.tpk-off::after{display:none} @media (max-width:560px){ .gpk-2{padding:16px 14px 18px} } .atg{margin-top:30px;padding-top:20px;border-top:1px solid #E7EAF1; display:flex;gap:14px;align-items:baseline;flex-wrap:wrap} .atg-h{flex:none;font-size:13px;font-weight:700;color:#98A0B0} .atg-l{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} .atg-l li{font-size:13px;color:#4C566B;background:#F3F5F9; border-radius:999px;padding:6px 13px;line-height:1.35} .atg-l li:last-child{background:#080C21;color:#fff;font-weight:600} @media (max-width:560px){ .atg{gap:10px} .atg-l li{font-size:12px;padding:5px 11px} }