@charset "utf-8";
/* =========================================================================
   회계법인형 2 (cpa2)
   흰 바탕 · 넉넉한 여백 · 검정 글자. 포인트는 주황 하나 — 제목 끝 마침표와 버튼에만 쓴다.
   카드는 얇은 테두리, 둥근 모서리는 작게. 글꼴은 Pretendard.
   ========================================================================= */

:root{
  --ob-ink:#111111;
  --ob-body:#555a61;
  --ob-mut:#9aa0a8;
  --ob-line:#e6e7ea;
  --ob-soft:#f6f6f7;
  --ob-dark:#232323;
  --ob-orange:#ff6a2b;
  --ob-orange-d:#ec5510;
  --ob-wrap:1240px;
  --ob-gutter:32px;
  --ob-fixedh:78px;
  --ob-font:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:#fff; color:var(--ob-ink); font-family:var(--ob-font); font-size:16px; line-height:1.7; letter-spacing:-.02em; -webkit-text-size-adjust:100%; }
img{ max-width:100%; height:auto; vertical-align:middle; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.35; letter-spacing:-.035em; word-break:keep-all; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
table{ border-collapse:collapse; }
:focus-visible{ outline:2px solid var(--ob-orange); outline-offset:3px; }

.ob-skip{ position:absolute; left:-9999px; }
.ob-skip:focus{ left:10px; top:10px; z-index:999; background:#fff; padding:10px 16px; }
.sound_only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.ob-wrap{ max-width:var(--ob-wrap); margin:0 auto; padding-left:var(--ob-gutter); padding-right:var(--ob-gutter); }
.ob-ico{ width:1.1em; height:1.1em; flex:none; }
.ob-dot{ font-style:normal; color:var(--ob-orange); }
#ob-main [id]{ scroll-margin-top:var(--ob-fixedh); }
.ob-empty{ padding:24px; border:1px dashed var(--ob-line); color:var(--ob-mut); font-size:14px; }

.ob-rv{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.ob-rv.is-in{ opacity:1; transform:none; }

.ob-sec{ padding:110px 0; }
.ob-head{ margin-bottom:40px; }
.ob-head h2{ font-size:clamp(28px,3vw,38px); font-weight:600; letter-spacing:-.03em; }
.ob-head p{ margin-top:10px; font-size:15px; color:var(--ob-body); }

/* 헤더 ------------------------------------------------------------------ */
.ob-fixed{ position:fixed; inset:0 0 auto; z-index:60; color:#fff; transition:background .3s, color .3s, box-shadow .3s; }
.ob-fixed.is-solid,.ob-fixed:not(.is-main){ background:#fff; color:var(--ob-ink); box-shadow:0 1px 0 var(--ob-line); }
.ob-demo{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px; padding:6px 16px; background:var(--ob-ink); color:#aaa; font-size:12.5px; }
.ob-demo b{ color:#fff; }
.ob-demo a{ color:var(--ob-orange); font-weight:700; }
.ob-header__in{ display:flex; align-items:center; gap:38px; height:78px; }
.ob-logo{ display:inline-flex; flex-direction:column; line-height:1; }
.ob-logo strong{ font-size:20px; font-weight:800; letter-spacing:.06em; }
.ob-logo small{ margin-top:4px; font-size:8.5px; font-weight:700; letter-spacing:.18em; opacity:.8; }
.ob-gnb{ margin-left:auto; }
.ob-gnb>ul{ display:flex; gap:40px; }
.ob-gnb>ul>li{ position:relative; }
.ob-gnb>ul>li>a{ display:block; padding:26px 0; font-size:15px; font-weight:500; }
.ob-gnb>ul>li>a:hover{ color:var(--ob-orange); }
.ob-gnb li ul{ position:absolute; left:50%; top:100%; min-width:150px; padding:10px 0; transform:translateX(-50%); background:#fff; color:var(--ob-ink);
  border:1px solid var(--ob-line); border-radius:10px; box-shadow:0 14px 30px rgba(0,0,0,.08); opacity:0; visibility:hidden; transition:.2s; }
.ob-gnb li:hover ul,.ob-gnb li:focus-within ul{ opacity:1; visibility:visible; }
.ob-gnb li ul a{ display:block; padding:7px 20px; font-size:14px; white-space:nowrap; }
.ob-gnb li ul a:hover{ color:var(--ob-orange); }
.ob-gnb__empty{ font-size:13px; opacity:.7; }
.ob-headcta{ display:inline-flex; align-items:center; height:38px; padding:0 18px; border-radius:99px; background:var(--ob-orange); color:#fff; font-size:14px; font-weight:600; }
.ob-headcta:hover{ background:var(--ob-orange-d); }
.ob-burger{ display:none; width:40px; height:40px; padding:0; border:0; background:transparent; }
.ob-burger span{ display:block; width:22px; height:2px; margin:5px auto; background:currentColor; }

.ob-drawer{ position:fixed; inset:0; z-index:80; background:#fff; overflow-y:auto; }
.ob-drawer__panel{ padding:0 var(--ob-gutter) 40px; }
.ob-drawer__top{ display:flex; justify-content:space-between; align-items:center; height:68px; border-bottom:1px solid var(--ob-line); }
.ob-drawer__close{ width:40px; height:40px; border:0; background:transparent; font-size:18px; }
.ob-drawer__panel>ul>li{ border-bottom:1px solid var(--ob-line); }
.ob-drawer__panel>ul>li>a{ display:block; padding:16px 0; font-size:19px; font-weight:600; }
.ob-drawer__panel ul ul{ display:flex; flex-wrap:wrap; gap:4px 16px; padding-bottom:14px; }
.ob-drawer__panel ul ul a{ font-size:14.5px; color:var(--ob-body); }
.ob-drawer__cta{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:26px; height:54px; border-radius:99px; background:var(--ob-orange); color:#fff; font-weight:600; }

/* 서브 페이지 ----------------------------------------------------------- */
.ob-sbanner{ padding:calc(var(--ob-fixedh) + 70px) 0 50px; background:var(--ob-soft); }
.ob-sbanner p{ font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--ob-mut); }
.ob-sbanner h1{ margin-top:8px; font-size:clamp(30px,3.6vw,44px); font-weight:700; }
.ob-sub{ padding:60px 0 120px; }
.ob-sub #bo_v_con h3,.ob-sub #ctt_con h3{ margin:32px 0 10px; font-size:19px; font-weight:600; }
.ob-sub #bo_v_con table,.ob-sub #ctt_con table{ width:100%; max-width:760px; margin-bottom:10px; border-top:1px solid var(--ob-ink); font-size:15px; }
.ob-sub #bo_v_con th,.ob-sub #bo_v_con td,.ob-sub #ctt_con th,.ob-sub #ctt_con td{ padding:12px 14px; border-bottom:1px solid var(--ob-line); text-align:left; vertical-align:top; }
.ob-sub #bo_v_con th,.ob-sub #ctt_con th{ width:28%; font-weight:500; color:var(--ob-body); }
.ob-sub #bo_v_con ul,.ob-sub #ctt_con ul{ padding:0; }
.ob-sub #bo_v_con li,.ob-sub #ctt_con li{ position:relative; padding:5px 0 5px 16px; list-style:none; }
.ob-sub #bo_v_con li::before,.ob-sub #ctt_con li::before{ content:""; position:absolute; left:2px; top:15px; width:5px; height:5px; border-radius:50%; background:var(--ob-orange); }

/* 1. 첫 화면 ------------------------------------------------------------ */
.ob-hero{ position:relative; display:flex; align-items:center; min-height:max(620px,100vh); overflow:hidden; background:#1b1b1b; color:#fff; }
.ob-hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; transform:scale(1.06); animation:ob-zoom 12s ease-out forwards; }
@keyframes ob-zoom{ to{ transform:scale(1); } }
.ob-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15)); }
.ob-hero__in{ position:relative; z-index:1; width:100%; padding-left:calc(var(--ob-gutter) + 8%); }
.ob-hero__head{ font-size:clamp(40px,5.6vw,72px); font-weight:700; line-height:1.25; letter-spacing:-.045em; animation:ob-up 1s cubic-bezier(.2,.7,.2,1) .2s both; }
.ob-hero__desc{ margin-top:22px; font-size:18px; color:rgba(255,255,255,.8); animation:ob-up 1s cubic-bezier(.2,.7,.2,1) .45s both; }
@keyframes ob-up{ from{ opacity:0; transform:translateY(24px); } }
.ob-hero__scroll{ position:absolute; left:50%; bottom:40px; z-index:1; transform:translateX(-50%); display:grid; place-items:center; width:30px; height:48px; border:2px solid rgba(255,255,255,.7); border-radius:99px; }
.ob-hero__scroll .ob-ico{ width:14px; height:14px; animation:ob-bob 1.6s ease-in-out infinite; }
@keyframes ob-bob{ 50%{ transform:translateY(5px); } }

/* 2. 숫자 --------------------------------------------------------------- */
.ob-intro{ padding:110px 0 100px; text-align:center; }
.ob-intro__head{ font-size:clamp(24px,2.6vw,34px); font-weight:600; line-height:1.45; }
.ob-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:64px; }
.ob-stats dd{ font-size:clamp(34px,3.6vw,50px); font-weight:800; line-height:1.1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.ob-stats dd .ob-dot{ margin-left:2px; font-weight:800; }
.ob-stats dt{ margin-top:10px; font-size:14px; color:var(--ob-body); }

/* 3. 다른 점 ------------------------------------------------------------ */
.ob-diff{ background:var(--ob-soft); }
.ob-diff__grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ob-diff__grid li{ padding:36px 36px 40px; border:1px solid var(--ob-line); border-radius:6px; background:#fff; transition:border-color .25s, box-shadow .25s; }
.ob-diff__grid li:hover{ border-color:#d1d3d8; box-shadow:0 12px 30px rgba(0,0,0,.05); }
.ob-diff__no{ display:block; padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid var(--ob-line); font-size:14px; font-weight:700; color:var(--ob-orange); }
.ob-diff__grid h3{ font-size:22px; font-weight:600; line-height:1.4; }
.ob-diff__grid p{ margin-top:16px; font-size:14.5px; color:var(--ob-body); }

/* 4. 고객사 띠 ---------------------------------------------------------- */
.ob-client{ background:var(--ob-dark); color:#fff; overflow:hidden; }
.ob-client .ob-head p{ color:#b5b5b5; }
.ob-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.ob-marquee__track{ display:flex; gap:16px; width:max-content; animation:ob-marquee 40s linear infinite; }
.ob-marquee:hover .ob-marquee__track{ animation-play-state:paused; }
@keyframes ob-marquee{ to{ transform:translateX(-50%); } }
.ob-marquee li{ display:grid; place-items:center; width:220px; height:130px; border-radius:6px; font-size:22px; font-weight:800; letter-spacing:-.02em; }
.ob-marquee li.is-c1{ background:#2f3b52; }
.ob-marquee li.is-c2{ background:#3d6b58; }
.ob-marquee li.is-c3{ background:#5a4a78; }
.ob-marquee li.is-c4{ background:#7a4b3a; }
.ob-marquee li.is-c5{ background:#3b5f8a; }

/* 5. 서비스 ------------------------------------------------------------- */
.ob-svc{ background:var(--ob-soft); }
.ob-svc__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.ob-svc__grid a{ display:flex; flex-direction:column; height:100%; min-height:220px; padding:26px 24px 22px; border:1px solid var(--ob-line); border-radius:6px; background:#fff; transition:border-color .25s, transform .25s; }
.ob-svc__grid a:hover{ border-color:var(--ob-ink); transform:translateY(-4px); }
.ob-svc__grid h3{ font-size:19px; font-weight:600; }
.ob-svc__grid p{ margin-top:10px; font-size:13.5px; line-height:1.6; color:var(--ob-body); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ob-svc__go{ margin-top:auto; align-self:flex-end; padding-top:18px; }
.ob-svc__go .ob-ico{ width:22px; height:22px; transition:transform .25s, color .25s; }
.ob-svc__grid a:hover .ob-svc__go .ob-ico{ transform:translateX(4px); color:var(--ob-orange); }

/* 6. 칼럼 --------------------------------------------------------------- */
.ob-blog__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ob-blog__grid a{ position:relative; display:block; aspect-ratio:3/2; border-radius:4px; overflow:hidden; background:#222; color:#fff; }
.ob-blog__grid img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.ob-blog__grid a::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.78)); }
.ob-blog__grid a:hover img{ transform:scale(1.06); }
.ob-blog__txt{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:20px 22px; }
.ob-blog__txt em{ display:block; font-style:normal; font-size:12px; font-weight:600; color:var(--ob-orange); }
.ob-blog__txt strong{ display:block; margin-top:4px; font-size:18px; font-weight:600; line-height:1.45; }
.ob-more{ margin-top:26px; text-align:right; }
.ob-more a{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:600; }
.ob-more span{ display:grid; place-items:center; width:26px; height:26px; border:1px solid var(--ob-line); border-radius:50%; }
.ob-more .ob-ico{ width:13px; height:13px; }
.ob-more a:hover span{ border-color:var(--ob-orange); color:var(--ob-orange); }

/* 7. 상담 --------------------------------------------------------------- */
.ob-consult{ background:var(--ob-soft); }
.ob-consult__in{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start; }
.ob-head--left{ margin-bottom:26px; }
.ob-faq{ border-top:1px solid var(--ob-ink); }
.ob-faq details{ border-bottom:1px solid var(--ob-line); }
.ob-faq summary{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 0; cursor:pointer; list-style:none; }
.ob-faq summary::-webkit-details-marker{ display:none; }
.ob-faq summary h3{ font-size:16px; font-weight:600; }
.ob-faq summary .ob-ico{ transition:transform .25s; }
.ob-faq details[open] summary .ob-ico{ transform:rotate(180deg); color:var(--ob-orange); }
.ob-faq details p{ padding:0 0 18px; font-size:14.5px; color:var(--ob-body); }
.ob-consult__contact{ margin-top:30px; }
.ob-consult__contact>div{ display:flex; gap:12px; padding:4px 0; font-size:17px; }
.ob-consult__contact dt{ width:52px; color:var(--ob-mut); }
.ob-consult__contact dd{ font-weight:600; }
.ob-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; padding:34px; border:1px solid var(--ob-line); border-radius:8px; background:#fff; }
.ob-form__done{ grid-column:1 / -1; display:flex; align-items:center; gap:8px; padding:13px 16px; border-radius:6px; background:#fff1ea; color:var(--ob-orange-d); font-weight:600; }
.ob-form__row{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.ob-form__row.is-wide{ grid-column:1 / -1; }
.ob-form__row label,.ob-form__lb{ font-size:13.5px; font-weight:600; }
.ob-form__row label b,.ob-form__lb b{ color:var(--ob-orange); }
.ob-form input[type=text],.ob-form input[type=tel],.ob-form input[type=email],.ob-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--ob-line); border-radius:6px; background:#fff; font:inherit; font-size:15px; color:var(--ob-ink); }
.ob-form textarea{ resize:vertical; }
.ob-form input:focus,.ob-form textarea:focus{ outline:none; border-color:var(--ob-ink); }
.ob-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.ob-chips label{ position:relative; font-size:14px; }
.ob-chips input{ position:absolute; opacity:0; }
.ob-chips span{ display:block; padding:7px 14px; border:1px solid var(--ob-line); border-radius:99px; cursor:pointer; transition:.15s; }
.ob-chips input:checked+span{ border-color:var(--ob-ink); background:var(--ob-ink); color:#fff; }
.ob-chips input:focus-visible+span{ outline:2px solid var(--ob-orange); outline-offset:2px; }
.ob-form__captcha #captcha{ margin-top:2px; }
.ob-form__agree{ grid-column:1 / -1; font-size:14px; }
.ob-form__agree label{ display:inline-flex; align-items:center; gap:8px; }
.ob-form__agree a{ margin-left:8px; color:var(--ob-mut); text-decoration:underline; }
.ob-form__err{ grid-column:1 / -1; margin:0; padding:11px 14px; border-radius:6px; background:#fdecec; color:#b42318; font-size:14px; }
.ob-form__submit{ grid-column:1 / -1; display:flex; justify-content:center; align-items:center; gap:8px; height:56px; border:0; border-radius:99px; background:var(--ob-orange); color:#fff; font-size:16px; font-weight:600; cursor:pointer; }
.ob-form__submit:hover{ background:var(--ob-orange-d); }
.ob-form__submit:disabled{ background:var(--ob-mut); cursor:default; }

/* 푸터 ------------------------------------------------------------------ */
.ob-footer{ padding:70px 0 40px; background:var(--ob-dark); color:#b5b5b5; font-size:13.5px; }
.ob-footer__in{ display:flex; justify-content:space-between; gap:40px; padding-bottom:50px; }
.ob-footer .ob-logo{ color:#fff; }
.ob-footer__co{ margin:22px 0 20px; line-height:1.9; }
.ob-footer__co a{ color:var(--ob-orange); text-decoration:underline; }
.ob-footer__menu{ text-align:right; }
.ob-footer__menu a{ display:block; padding:3px 0; font-size:15px; font-weight:600; color:#fff; }
.ob-footer__menu a:hover{ color:var(--ob-orange); }
.ob-footer__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; border-top:1px solid #3a3a3a; font-size:12.5px; }
.ob-footer__bottom ul{ display:flex; gap:18px; }
.ob-footer__bottom b{ color:#fff; font-weight:600; }

/* 떠 있는 상담 버튼 · 맨 위로 ------------------------------------------- */
.ob-float{ position:fixed; left:50%; bottom:26px; z-index:65; transform:translateX(-50%); transition:transform .3s, opacity .3s; }
.ob-float.is-off{ transform:translate(-50%,150%); opacity:0; }
.ob-float__cta{ display:flex; align-items:center; gap:10px; padding:7px 8px 7px 12px; border-radius:10px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.18); }
.ob-float__ic{ display:grid; place-items:center; color:var(--ob-orange); }
.ob-float__ic .ob-ico{ width:22px; height:22px; }
.ob-float__txt{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px; border-radius:6px; background:var(--ob-orange); color:#fff; font-size:14.5px; font-weight:600; white-space:nowrap; }
.ob-float__cta:hover .ob-float__txt{ background:var(--ob-orange-d); }
.ob-top{ position:fixed; right:26px; bottom:30px; z-index:65; display:grid; place-items:center; width:46px; height:46px; border:1px solid var(--ob-line); border-radius:50%; background:#fff; cursor:pointer; opacity:0; visibility:hidden; transition:.3s; box-shadow:0 6px 20px rgba(0,0,0,.08); }
.ob-top.is-on{ opacity:1; visibility:visible; }

/* 반응형 ---------------------------------------------------------------- */
@media (max-width:1024px){
  .ob-gnb,.ob-headcta{ display:none; }
  .ob-burger{ display:block; margin-left:auto; }
  .ob-svc__grid{ grid-template-columns:repeat(3,1fr); }
  .ob-consult__in{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:760px){
  :root{ --ob-gutter:18px; --ob-fixedh:64px; }
  .ob-header__in{ height:64px; }
  .ob-sec{ padding:80px 0; }
  .ob-hero__in{ padding-left:var(--ob-gutter); }
  .ob-hero__head{ font-size:36px; }
  .ob-hero__desc{ font-size:15.5px; }
  .ob-stats{ grid-template-columns:1fr 1fr; gap:34px 10px; margin-top:44px; }
  .ob-diff__grid{ grid-template-columns:1fr; }
  .ob-diff__grid li{ padding:26px 22px 30px; }
  .ob-marquee li{ width:160px; height:96px; font-size:17px; }
  .ob-svc__grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .ob-svc__grid a{ min-height:170px; padding:18px 16px 14px; }
  .ob-svc__grid h3{ font-size:16.5px; }
  .ob-svc__grid p{ -webkit-line-clamp:2; }
  .ob-blog__grid{ grid-template-columns:1fr; }
  .ob-form{ grid-template-columns:1fr; padding:22px 18px; }
  .ob-footer__in{ flex-direction:column; }
  .ob-footer__menu{ text-align:left; display:flex; flex-wrap:wrap; gap:4px 18px; }
  .ob-float{ bottom:14px; width:calc(100% - 28px); }
  .ob-float__cta{ justify-content:space-between; }
  .ob-float__txt{ flex:1; justify-content:center; }
  .ob-top{ bottom:84px; right:14px; width:40px; height:40px; }
  body{ padding-bottom:70px; }
}
@media (prefers-reduced-motion:reduce){
  .ob-rv{ opacity:1; transform:none; transition:none; }
  .ob-hero__bg,.ob-hero__head,.ob-hero__desc,.ob-hero__scroll .ob-ico{ animation:none; }
  .ob-marquee__track{ animation:none; flex-wrap:wrap; width:auto; }
}