/* 2026-10-29: business.css에서 본문·반응형·애니메이션만 추출하고 #businessPage로 범위를 제한한다. */
@keyframes business_float1 {

   0%,
   100% {
      transform: translateY(0) rotate(0)
   }

   50% {
      transform: translateY(-8%) rotate(8deg)
   }
}

@keyframes business_glowA {

   0%,
   100% {
      translate: 0 0
   }

   50% {
      translate: calc(46 * var(--u)) calc(-34 * var(--u))
   }
}

#businessPage {
   --u: clamp(0.42px, calc(100vw / 1920), 1px);
   --bg: #f8f8f8;
   --ink: #111;
   --text: #555;
   --yellow: #f49b20;
   --orange: #f49b20;
   --blue: #1b4dff;
   --soft: #e1e1e1;
   --pad: max(20px, calc(70 * var(--u)), env(safe-area-inset-left, 0px));
   --ease: cubic-bezier(.16, 1, .3, 1);
   --spring: cubic-bezier(.34, 1.56, .64, 1);
   color-scheme: light;
}

#businessPage * {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

#businessPage {
   background: #fff;
   color: var(--ink);
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   word-break: keep-all
}

#businessPage img {
   display: block;
   max-width: 100%
}

#businessPage a {
   color: inherit;
   text-decoration: none
}

#businessPage button {
   font: inherit;
   color: inherit;
   background: none;
   border: 0;
   cursor: pointer
}

#businessPage ul {
   list-style: none
}

#businessPage main {
   overflow-x: clip
}

#businessPage .arw {
   display: block;
   flex: none
}

#businessPage .rv {
   opacity: 0;
   transform: translate3d(0, 60px, 0);
   transition: opacity 1.6s ease, transform 2s var(--ease);
   transition-delay: var(--d, 0s)
}

#businessPage .rv.in {
   opacity: 1;
   transform: none
}

#businessPage .ttl2 .w {
   display: inline-block;
   overflow: hidden;
   vertical-align: bottom;
   padding-bottom: .06em
}

#businessPage .ttl2 .w>span {
   display: inline-block;
   transform: translate3d(0, 110%, 0);
   transition: transform 2s var(--ease);
   transition-delay: var(--d, 0s)
}

#businessPage .ttl2.in .w>span {
   transform: none
}

#businessPage .ttl2 {
   font-weight: 700;
   font-size: max(40px, calc(80 * var(--u)));
   font-size: round(max(40px, calc(80 * var(--u))), 1px);
   line-height: 1.3;
   letter-spacing: -.01em;
   color: var(--ink)
}

#businessPage .pill {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   width: 240px;
   height: 60px;
   padding: 0 13px 0 30px;
   border-radius: 50px;
   background: #111;
   color: #fff;
   font-size: 20px;
   font-weight: 600;
   letter-spacing: -.05em;
   line-height: 1.3;
   white-space: nowrap;
   transition: background .4s, color .4s, box-shadow .4s
}

#businessPage .pill .arw {
   width: 35px;
   height: 35px;
   transition: transform .7s var(--spring)
}

#businessPage .pill:hover {
   background: #000
}

#businessPage .pill:hover .arw {
   transform: rotate(45deg)
}

#businessPage .pill.dk {
   background: #111;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2)
}

#businessPage .pill.dk:hover {
   background: #fff;
   color: #111
}

#businessPage .sheet {
   position: relative;
   z-index: 2;
   background: var(--bg);
   border-radius: 80px 80px 0 0
}

@media (max-width:640px) {
   #businessPage .br-pc {
      display: none
   }
}

#businessPage .qa {
   width: min(1144px, 60%)
}

#businessPage .qi {
   position: relative
}

#businessPage .qi+.qi {
   margin-top: 17px;
   padding-top: 17px
}

#businessPage .qi+.qi::before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 1px;
   background: rgba(0, 0, 0, .08);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 1.8s var(--ease);
   transition-delay: var(--d, 0s)
}

#businessPage .qi.in::before {
   transform: none
}

#businessPage .qi button {
   width: 100%;
   min-height: 90px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   padding: 0 34px;
   border-radius: 25px;
   text-align: left;
   font-size: max(17px, calc(24 * var(--u)));
   font-size: round(max(17px, calc(24 * var(--u))), 1px);
   font-weight: 500;
   line-height: 1.3;
   letter-spacing: -.05em;
   color: #111;
   transition: background .4s
}

#businessPage .qi .arw {
   width: 35px;
   height: 35px;
   color: #111;
   transform: rotate(135deg);
   transition: transform .9s var(--ease), color .4s
}

#businessPage .qi.open .arw {
   transform: rotate(-45deg);
   color: var(--orange)
}

#businessPage .qi .a {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows .85s var(--ease)
}

#businessPage .qi.open .a {
   grid-template-rows: 1fr
}

#businessPage .qi .a>div {
   overflow: hidden
}

/* 2026-10-30: DB FAQ의 에디터 HTML에 답변 여백을 적용하고 중첩 문단의 중복 여백 방지. */
#businessPage .qi .a p,
#businessPage .business-faq-answer {
   padding: 16px 34px 8px;
   font-size: 17px;
   line-height: 1.7;
   color: var(--text)
}

#businessPage .qi .a .business-faq-answer p {
   padding: 0;
   font: inherit;
   color: inherit;
}

#businessPage .business-faq-answer ul {
   padding-left: 1.4em;
   list-style: disc;
}

#businessPage .business-faq-answer ol {
   padding-left: 1.4em;
   list-style: decimal;
}

#businessPage .business-faq-answer a {
   text-decoration: underline;
}

#businessPage .business-faq-answer iframe,
#businessPage .business-faq-answer video {
   max-width: 100%;
}

@media (max-width:1100px) {
   #businessPage .qa {
      width: 100%
   }
}

@media (max-width:900px) {
   #businessPage .qi button {
      padding: 0 18px;
      border-radius: 18px
   }

   #businessPage .qi .a p,
   #businessPage .business-faq-answer {
      padding: 12px 18px 6px
   }
}

@media (max-width:640px) {
   #businessPage .sheet {
      border-radius: 40px 40px 0 0
   }
}

@media (prefers-reduced-motion:reduce) {

   #businessPage *,
   #businessPage *::before,
   #businessPage *::after {
      animation: none !important;
      transition-duration: .01ms !important;
      transition-delay: 0s !important
   }

   #businessPage .rv,
   #businessPage .ttl2 .w>span {
      opacity: 1 !important;
      transform: none !important;
      filter: none !important
   }

   #businessPage .qi::before {
      transform: none !important
   }
}

#businessPage {
   --spad: max(var(--pad), calc(50vw - 720px))
}

#businessPage .sw {
   width: 100%;
   max-width: 1440px;
   margin: 0 auto
}

#businessPage .shero {
   position: sticky;
   top: 0;
   z-index: 0;
   padding: 100px var(--spad) 0;
   background: #fff
}

#businessPage .sh-veil {
   position: absolute;
   inset: 0;
   z-index: 2;
   background: #f8f8f8;
   opacity: 0;
   pointer-events: none
}

#businessPage .shero-in {
   min-height: max(300px, calc(450 * var(--u)));
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   padding: 30px 0 40px
}

#businessPage .sh-t {
   font-size: max(48px, calc(90 * var(--u)));
   font-size: round(max(48px, calc(90 * var(--u))), 1px);
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: -.03em;
   color: #111
}

#businessPage .sh-t b {
   font-weight: 700;
   color: var(--orange)
}

#businessPage .sh-sub {
   margin-top: 20px;
   display: flex;
   flex-direction: column;
   gap: 10px
}

#businessPage .sh-s1 {
   font-size: max(21px, calc(45 * var(--u)));
   font-size: round(max(21px, calc(45 * var(--u))), 1px);
   font-weight: 500;
   line-height: 1.3;
   letter-spacing: -.05em;
   color: #111
}

#businessPage .sh-s2 {
   font-size: max(15px, calc(20 * var(--u)));
   font-size: round(max(15px, calc(20 * var(--u))), 1px);
   line-height: 1.5;
   letter-spacing: -.05em;
   color: #555
}

#businessPage .shero.deco {
   overflow-x: clip;
   overflow-y: visible
}

#businessPage .sh-deco {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 0
}

#businessPage .shero.deco .shero-in {
   position: relative;
   z-index: 1
}

#businessPage .sh-big {
   position: absolute;
   left: calc(var(--bx, 800) * var(--u));
   top: calc(100px + 41.5 * var(--u));
   font-family: 'paperLogy', 'DM Sans', sans-serif !important;
   font-size: calc(200 * var(--u));
   font-size: round(calc(200 * var(--u)), 1px);
   font-weight: 700;
   line-height: 1.18;
   letter-spacing: 0;
   white-space: nowrap;
   color: #f8f8f8;
   opacity: 0;
   transform: translate3d(calc(80 * var(--u)), 0, 0);
   transition: opacity 1.6s ease .3s, transform 2.4s var(--ease) .3s
}

body.ready #businessPage .sh-big {
   opacity: 1;
   transform: none
}

#businessPage .sh-cube {
   display: inline-block;
   vertical-align: top;
   width: calc(57 / 90 * 1em);
   margin: calc(52 / 90 * 1em) 0 0 calc(10 / 90 * 1em);
   opacity: 0;
   transform: translate3d(0, 30%, 0) rotate(-25deg) scale(.6);
   transition: opacity 1.2s ease .5s, transform 1.8s cubic-bezier(.3, 1.25, .5, 1) .5s
}

#businessPage .sh-t.in .sh-cube {
   opacity: 1;
   transform: none
}

#businessPage .sh-cube img {
   display: block;
   width: 100%;
   animation: business_float1 5.7s ease-in-out 2.4s infinite
}

@media (max-width:900px) {
   #businessPage .sh-big {
      left: auto;
      right: -4%;
      top: 76px;
      font-size: 96px
   }
}

@media (max-width:640px) {
   #businessPage .sh-big {
      display: none
   }
}

@media (prefers-reduced-motion:reduce) {

   #businessPage .sh-big,
   #businessPage .sh-cube {
      opacity: 1 !important;
      transform: none !important
   }
}

#businessPage .shero.c .shero-in {
   align-items: center;
   text-align: center
}

#businessPage .shero.c .sh-sub {
   align-items: center
}

@media (max-width:640px) {
   #businessPage .shero-in {
      min-height: 260px;
      padding: 20px 0 36px
   }
}

#businessPage .pill {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   width: 240px;
   height: 60px;
   padding: 0 13px 0 30px;
   border-radius: 50px;
   background: #111;
   color: #fff;
   font-size: 20px;
   font-weight: 600;
   letter-spacing: -.05em;
   line-height: 1.3;
   white-space: nowrap;
   transition: background .4s, color .4s, box-shadow .4s
}

#businessPage .pill:hover {
   background: var(--orange)
}

#businessPage .sv-g {
   position: absolute;
   left: calc(-97 * var(--u));
   top: calc(100px + 41 * var(--u));
   width: calc(337 * var(--u));
   max-width: none;
   height: auto;
   opacity: 0;
   filter: blur(calc(100 * var(--u)));
   transition: opacity 2.4s ease .2s;
   animation: business_glowA 17s ease-in-out infinite
}

body.ready #businessPage .sv-g {
   opacity: .4
}

#businessPage .bz {
   position: relative;
   padding: calc(80 * var(--u) + 10px) var(--spad) calc(80 * var(--u) + 20px)
}

#businessPage .bz-tabs {
   position: relative;
   display: flex;
   gap: 10px;
   padding: 5px;
   border-radius: 50px;
   background: #fff;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08)
}

#businessPage .bz-ind {
   position: absolute;
   left: 0;
   top: 5px;
   height: 60px;
   width: 0;
   border-radius: 50px;
   background: linear-gradient(167.87deg, rgba(232, 145, 19, .9) 0%, rgba(233, 126, 27, .9) 49.52%, rgba(235, 107, 36, .9) 100%);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
   transition: transform .7s var(--ease), width .7s var(--ease);
   pointer-events: none
}

#businessPage .bz-tab {
   position: relative;
   z-index: 1;
   flex: 1 0 0;
   min-width: 0;
   height: 60px;
   padding: 0 20px;
   border-radius: 50px;
   font-size: max(15px, calc(20 * var(--u)));
   font-size: round(max(15px, calc(20 * var(--u))), 1px);
   font-weight: 500;
   line-height: 1.3;
   letter-spacing: -.05em;
   color: #111;
   white-space: nowrap;
   transition: color .5s ease
}

#businessPage .bz-tab:hover {
   color: var(--orange)
}

#businessPage .bz-tab.on {
   color: #fff
}

#businessPage .bz-tabs:not(.ind-ok) .bz-tab.on {
   background: linear-gradient(167.87deg, rgba(232, 145, 19, .9), rgba(235, 107, 36, .9))
}

#businessPage .bz-panels {
   max-width: 1400px;
   margin: calc(80 * var(--u) + 10px) auto 0
}

#businessPage .bz-eb {
   font-size: 14px;
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: -.03em;
   text-transform: uppercase;
   color: #f49b20
}

#businessPage .bz-h {
   margin-top: 20px;
   font-size: max(26px, calc(48 * var(--u)));
   font-size: round(max(26px, calc(48 * var(--u))), 1px);
   font-weight: 600;
   line-height: 1.3;
   letter-spacing: -.05em;
   color: #111
}

#businessPage .bz-d {
   margin-top: 20px;
   font-size: max(15px, calc(20 * var(--u)));
   font-size: round(max(15px, calc(20 * var(--u))), 1px);
   line-height: 1.5;
   letter-spacing: -.05em;
   color: #6b7280
}

#businessPage .bz-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   padding-top: 40px
}

#businessPage .bz-l {
   display: flex;
   flex-direction: column;
   justify-content: space-between
}

#businessPage .bz-ul {
   list-style: none;
   padding-top: 40px;
   display: flex;
   flex-direction: column;
   gap: 20px
}

#businessPage .bz-ul li {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: max(16px, calc(20 * var(--u)));
   font-size: round(max(16px, calc(20 * var(--u))), 1px);
   font-weight: 500;
   line-height: 1.3;
   letter-spacing: -.05em;
   color: #161e2e
}

#businessPage .bz-ul img {
   flex: none;
   width: 20px;
   height: auto;
   transition: scale .8s cubic-bezier(.3, 1.4, .5, 1), rotate .9s cubic-bezier(.3, 1.3, .5, 1)
}

#businessPage .bz-ul li:hover img {
   scale: 1.3;
   rotate: -14deg
}

#businessPage .bz-meta {
   margin-top: 40px;
   padding-top: 20px;
   border-top: 1px solid rgba(0, 0, 0, .08);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px 20px
}

#businessPage .bz-mi {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 16px;
   line-height: 1.5;
   letter-spacing: -.05em
}

#businessPage .bz-mi .k {
   color: #797e8d
}

#businessPage .bz-mi .v {
   font-weight: 500;
   color: #111
}

#businessPage .bz-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 5px
}

#businessPage .bz-chips span {
   padding: 5px 20px;
   border-radius: 10px;
   background: #fff;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 0 25px rgba(0, 0, 0, .05);
   font-size: 16px;
   font-weight: 500;
   line-height: 1.3;
   color: #555
}

#businessPage .bz-b {
   margin-top: 40px;
   width: 240px;
   padding: 0 13px 0 20px;
   font-size: 16px;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2)
}

#businessPage .bz-img {
   position: relative;
   margin: 0;
   height: max(260px, calc(446 * var(--u)));
   border-radius: 32px;
   overflow: hidden;
   background: #f9fafb
}

#businessPage .bz-img img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   scale: 1.08;
   transition: scale 2.4s var(--ease), opacity .8s ease
}

#businessPage .bz-img.in img {
   scale: 1
}

#businessPage .bz-img.rv {
   opacity: 1;
   transform: none;
   clip-path: inset(6% 8% round 32px);
   transition: clip-path 1.6s cubic-bezier(.65, 0, .25, 1);
   transition-delay: var(--d, 0s)
}

#businessPage .bz-img.rv.in {
   clip-path: inset(0 round 32px)
}

#businessPage .bz-img.ic {
   background: #fff;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06)
}

#businessPage .bz-img.ic img {
   inset: 0;
   margin: auto;
   /* width: 38%; */
   height: auto;
   /* max-height: 70%; */
   object-fit: contain;
   mix-blend-mode: multiply;
   animation: business_float1 5.7s ease-in-out infinite
}

#businessPage .bz-img.rv {
   opacity: 0;
   transform: translate3d(0, 24px, 0);
   clip-path: none;
   transition: opacity 1.2s ease, transform 1.4s var(--ease);
   transition-delay: var(--d, 0s)
}

#businessPage .bz-img.rv.in {
   opacity: 1;
   transform: none;
   clip-path: none
}

#businessPage .bz-img img,
#businessPage .bz-img.in img {
   scale: 1;
   animation: none;
   transition: opacity .5s ease
}

@media (max-width:1100px) {
   #businessPage .bz-tab {
      padding: 0 14px
   }
}

@media (max-width:900px) {
   #businessPage .bz-tabs {
      overflow-x: auto;
      scrollbar-width: none;
      margin-right: calc(-1 * var(--spad))
   }

   #businessPage .bz-tabs::-webkit-scrollbar {
      display: none
   }

   #businessPage .bz-tab {
      flex: none;
      height: 50px;
      padding: 0 20px
   }

   #businessPage .bz-ind {
      height: 50px
   }

   #businessPage .bz-row {
      grid-template-columns: 1fr
   }

   #businessPage .bz-img {
      height: auto;
      aspect-ratio: 690/446;
      order: -1;
      border-radius: 24px
   }

   #businessPage .bz-img.rv.in {
      clip-path: inset(0 round 24px)
   }

   #businessPage .bz-ul {
      padding-top: 10px;
      gap: 14px
   }
}

@media (max-width: 680px) {
   #businessPage .bz-tabs {
      border-radius: unset;
      background: transparent;
      box-shadow: unset;
   }
}

@media (max-width:640px) {
   #businessPage .bz-b {
      width: 100%
   }

   #businessPage .bz-mi {
      flex-wrap: wrap
   }
}

@media (prefers-reduced-motion:reduce) {
   #businessPage .bz-img.rv {
      clip-path: none !important
   }

   #businessPage .bz-img img {
      scale: 1 !important;
      animation: none
   }

   #businessPage .sv-g {
      opacity: .4 !important
   }

   #businessPage .bz-ind {
      transition: none
   }
}

#businessPage .bz-row {
   gap: max(20px, calc(60 * var(--u)))
}

#businessPage .bz-b {
   height: 45px;
   width: 218px;
   padding: 0 10px 0 20px;
   font-size: 16px
}

#businessPage .bz-b .arw {
   width: 25px;
   height: 25px
}

#businessPage .sol {
   margin-top: max(60px, calc(80 * var(--u)))
}

#businessPage .sol-t {
   font-size: max(28px, calc(48 * var(--u)));
   font-size: round(max(28px, calc(48 * var(--u))), 1px);
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: -.03em;
   color: #111
}

#businessPage .sol-d {
   margin-top: 20px;
   font-size: max(15px, calc(24 * var(--u)));
   font-size: round(max(15px, calc(24 * var(--u))), 1px);
   line-height: 1.5;
   letter-spacing: -.05em;
   color: #555
}

#businessPage .sol-n {
   margin-top: 30px;
   font-size: max(20px, calc(26 * var(--u)));
   font-size: round(max(20px, calc(26 * var(--u))), 1px);
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: -.05em;
   color: #000
}

#businessPage .sol-tags {
   margin-top: 18px;
   display: flex;
   flex-wrap: wrap;
   gap: 5px
}

#businessPage .sol-tags i {
   padding: 5px 20px;
   border-radius: 10px;
   background: #e8e8e8;
   font-style: normal;
   font-size: 14px;
   font-weight: 500;
   line-height: 1.3;
   letter-spacing: -.05em;
   color: #555
}

#businessPage .bz-w {
   position: relative;
   z-index: 2;
   background: #fff
}

#businessPage .bz2 {
   padding: calc(160 * var(--u) + 20px) var(--spad) calc(160 * var(--u))
}

#businessPage .bz2-blk+.bz2-blk {
   margin-top: calc(160 * var(--u) + 20px)
}

#businessPage .bz2-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px 40px
}

#businessPage .bz2-head.c {
   flex-direction: column;
   justify-content: center;
   gap: 16px;
   text-align: center
}

#businessPage .bz2-t {
   font-size: max(28px, calc(48 * var(--u)));
   font-size: round(max(28px, calc(48 * var(--u))), 1px);
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: -.03em;
   color: #111
}

#businessPage .bz2-d {
   font-size: max(15px, calc(24 * var(--u)));
   font-size: round(max(15px, calc(24 * var(--u))), 1px);
   line-height: 1.5;
   letter-spacing: -.05em;
   color: #555
}

#businessPage .bz2-grid {
   margin-top: 40px;
   list-style: none;
   display: grid;
   gap: 20px
}

#businessPage .bz2-grid.three {
   grid-template-columns: repeat(3, minmax(0, 1fr))
}

#businessPage .bzf {
   padding: 40px;
   border-radius: 20px;
   background: #f8f8f8
}

#businessPage .bzf .no {
   display: block;
   margin-bottom: 24px;
   font-size: 14px;
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: -.03em;
   color: #f49b20
}

#businessPage .bzf h3 {
   font-size: max(22px, calc(30 * var(--u)));
   font-size: round(max(22px, calc(30 * var(--u))), 1px);
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: -.03em;
   color: #1c1f25
}

#businessPage .bzf p {
   margin-top: 24px;
   font-size: max(15px, calc(24 * var(--u)));
   font-size: round(max(15px, calc(24 * var(--u))), 1px);
   line-height: 1.5;
   letter-spacing: -.05em;
   color: #727780
}

#businessPage .bz-qa {
   width: 100%;
   max-width: 1144px;
   margin: 40px auto 0
}

#businessPage .bz-faq-b {
   margin-top: 40px;
   display: flex;
   justify-content: center
}

#businessPage .bz-faq-b .pill {
   width: 240px
}

@media (max-width:1100px) {
   #businessPage .bz2-grid.three {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   #businessPage .bzf {
      padding: 32px 28px
   }
}

@media (max-width:900px) {
   #businessPage .bz2-grid.three {
      grid-template-columns: 1fr
   }

   #businessPage .bzf {
      padding: 26px 22px
   }

   #businessPage .bzf p {
      margin-top: 14px
   }

   #businessPage .bzf .no {
      margin-bottom: 12px
   }
}

@media (max-width:640px) {
   #businessPage .bz-b {
      width: 100%
   }
}

#businessPage .bz2 {
   position: relative;
   z-index: 0;
   isolation: isolate;
   overflow-x: clip
}

#businessPage .bz2 .bgi {
   position: absolute;
   z-index: -1;
   max-width: none;
   height: auto;
   pointer-events: none;
   filter: blur(calc(100 * var(--u)))
}

#businessPage .bz2 .bgi.b3 {
   left: calc(-77 * var(--u));
   top: calc(903 * var(--u));
   width: calc(420 * var(--u));
   opacity: .4
}

#businessPage .bz2 .bgi.b2 {
   left: calc(1412 * var(--u));
   top: calc(1184 * var(--u));
   width: calc(640 * var(--u));
   opacity: .2
}

#businessPage .bz2-note {
   margin-top: 20px;
   text-align: right;
   font-size: max(14px, calc(20 * var(--u)));
   font-size: round(max(14px, calc(20 * var(--u))), 1px);
   line-height: 1.5;
   letter-spacing: -.05em;
   color: #797e8d
}

@media (max-width:900px) {
   #businessPage .bz2 .bgi {
      filter: blur(40px)
   }

   #businessPage .bz2-note {
      text-align: left
   }
}

#businessPage .sol-list {
   margin-top: 40px;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 40px
}

#businessPage .sol-list.drag {
   cursor: grabbing;
   scroll-snap-type: none
}

#businessPage .sol-list.drag .sol-c {
   pointer-events: none
}

#businessPage .sol-c {
   display: flex;
   flex-direction: column;
   min-width: 0;
   scroll-snap-align: start;
   border-radius: 24px;
   overflow: hidden;
   background: #fff;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 20px 50px -30px rgba(0, 0, 0, .18)
}

#businessPage .sol-v {
   position: relative;
   aspect-ratio: 690/440;
   overflow: hidden;
   isolation: isolate
}

#businessPage .sol-v.or {
   background: linear-gradient(150deg, #f6a93b 0%, #eb6b24 100%)
}

#businessPage .sol-v.dk {
   background: linear-gradient(150deg, #3a3f48 0%, #16181d 100%)
}

#businessPage .sol-v .sh {
   position: absolute;
   z-index: -1;
   border-radius: 28%;
   background: rgba(255, 255, 255, .12);
   transform: rotate(-18deg)
}

#businessPage .sol-v .sh.s1 {
   width: 46%;
   aspect-ratio: 1;
   left: -10%;
   top: -26%
}

#businessPage .sol-v .sh.s2 {
   width: 38%;
   aspect-ratio: 1;
   right: -8%;
   bottom: -20%;
   background: rgba(255, 255, 255, .08);
   transform: rotate(22deg)
}

#businessPage .sol-v img {
   position: absolute;
   left: 12%;
   top: 16%;
   width: 76%;
   height: auto;
   border-radius: 8px;
   box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .45);
   transition: transform .9s var(--ease)
}

#businessPage .sol-c:hover .sol-v img {
   transform: translate3d(0, -8px, 0)
}

#businessPage .sol-b {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding: max(26px, calc(44 * var(--u)))
}

#businessPage .sol-n {
   font-size: max(24px, calc(36 * var(--u)));
   font-size: round(max(24px, calc(36 * var(--u))), 1px);
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: -.04em;
   color: #111
}

#businessPage .sol-tags {
   margin-top: 14px;
   display: flex;
   flex-wrap: wrap;
   gap: 8px
}

#businessPage .sol-tags span {
   padding: 6px 16px;
   border-radius: 40px;
   background: #eef0f4;
   font-size: max(14px, calc(17 * var(--u)));
   font-size: round(max(14px, calc(17 * var(--u))), 1px);
   font-weight: 600;
   line-height: 1.3;
   letter-spacing: -.03em;
   color: #555
}

#businessPage .sol-ck {
   list-style: none;
   align-self: stretch;
   margin-top: 28px;
   padding-top: 28px;
   border-top: 1px solid #e5e7eb;
   display: flex;
   flex-direction: column;
   gap: 12px
}

#businessPage .sol-ck li {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   font-size: max(15px, calc(20 * var(--u)));
   font-size: round(max(15px, calc(20 * var(--u))), 1px);
   line-height: 1.5;
   letter-spacing: -.05em;
   color: #555
}

#businessPage .sol-ck .ck {
   flex: none;
   width: 20px;
   height: 20px;
   margin-top: .2em;
   color: #f49b20
}

#businessPage .sol-more {
   margin-top: auto;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   height: 56px;
   padding: 0 26px 0 30px;
   border-radius: 40px;
   box-shadow: inset 0 0 0 1px #cfd3d9;
   font-size: 16px;
   font-weight: 600;
   letter-spacing: -.04em;
   color: #111;
   transition: background .35s, color .35s, box-shadow .35s
}

#businessPage .sol-ck+.sol-more {
   margin-top: max(30px, calc(44 * var(--u)))
}

#businessPage .sol-more .cv {
   width: 16px;
   height: 16px;
   transition: transform .5s var(--ease)
}

#businessPage .sol-more:hover {
   background: #111;
   color: #fff;
   box-shadow: inset 0 0 0 1px #111
}

#businessPage .sol-more:hover .cv {
   transform: translate3d(3px, 0, 0)
}

@media (max-width:900px) {
   #businessPage .sol-list {
      grid-template-columns: 1fr;
      gap: 20px
   }

   #businessPage .sol-c {
      border-radius: 20px
   }

   #businessPage .sol-more {
      height: 50px
   }
}

/* 2026-10-29: 기존 공통 레이아웃 안에서 너비와 숨김 상태를 유지한다. */
#businessPage {
   width: 100%;
   overflow-x: clip
}

#businessPage [hidden] {
   display: none !important
}

#businessPage .bz-tab:focus-visible {
   outline: 2px solid var(--orange);
   outline-offset: -4px
}