﻿/* 이펙터 · 2026-10 제작 · 지방·체형센터 페이지 스타일 */

.bd { --bd-accent: #9675ba; --bd-accent-soft: #eeebf1; --sp-accent: var(--bd-accent); }
.bd-face  { --bd-accent: #ce7e27; --bd-bar: #f0923e; --bd-peach: #f5e6d6; }
.bd-abdo  { --bd-accent: #f287b7; --bd-pink-soft: #f8f0f4; }
.bd-lipo  { --bd-accent: #439c59; --bd-green-soft: #d8ebdc; }

.bd-kv .sp-kv-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; aspect-ratio: auto !important; }
@media (min-width: 992px) {
  .bd-kv .sp-kv-img { inset: 0; width: 100%; transform: none; }
  .bd-kv .img-ph.sp-kv-img { aspect-ratio: auto !important; }
}

.bd-lead { display: block; font-size: .9375em; font-weight: 300; }
@media (min-width: 992px) { .bd-lead { font-size: 1.5625rem; } }

.sp-band.bd-band { background: var(--ss-bg-soft); }
.bd-band-lead { margin: 1rem auto 0; max-width: 62rem; text-align: center; font-size: 1.0625rem; font-weight: 500; line-height: 1.5; letter-spacing: -.012em; color: var(--ss-muted); }
@media (min-width: 768px) { .bd-band-lead { margin-top: 1.5rem; font-size: 1.25rem; } }
@media (min-width: 1400px) { .bd-band-lead { font-size: 1.5rem; line-height: 1.2083; } }
.bd-band .sp-h2 { margin-bottom: 0; }
.bd-band-lead + * { margin-top: 2.5rem; }
@media (min-width: 992px) { .bd-band-lead + * { margin-top: 4.5rem; } }
@media (min-width: 1400px) { .bd-band-lead + * { margin-top: 5.5rem; } }

.bd-cmp-warm .sp-cmp-a { color: var(--ss-muted); border-bottom-color: var(--ss-line-strong); }
.bd-cmp-warm .sp-cmp-k { background: #e7e7e7; color: var(--ss-muted); font-weight: 500; }
.bd-cmp-warm .sp-cmp-b { background: var(--bd-peach); color: var(--ss-ink); font-weight: 500; border-bottom: 1px solid rgb(206 126 39 / .18); }
.bd-cmp-warm .sp-cmp-row-head .sp-cmp-a { color: var(--ss-text); }
.bd-cmp-warm .sp-cmp-row-head .sp-cmp-b { color: var(--bd-accent); }
.bd-cmp-warm .sp-cmp-row-head .sp-cmp-k { background: #e7e7e7; color: var(--ss-muted); font-size: inherit; font-weight: 500; }
.bd-cmp-warm .sp-cmp-row-head { grid-template-areas: "a b"; }
@media (min-width: 768px) {
  .bd-cmp-warm .sp-cmp-row, .bd-cmp-warm .sp-cmp-row-head { grid-template-columns: minmax(0, 1fr) 8rem minmax(0, 1fr); grid-template-areas: "a k b"; }
  .bd-cmp-warm .sp-cmp-a, .bd-cmp-warm .sp-cmp-b, .bd-cmp-warm .sp-cmp-k { min-height: 4rem; }
}
@media (min-width: 992px) {
  .bd-cmp-warm .sp-cmp-row, .bd-cmp-warm .sp-cmp-row-head { grid-template-columns: minmax(0, 1fr) 10rem minmax(0, 1fr); }
  .bd-cmp-warm .sp-cmp-a, .bd-cmp-warm .sp-cmp-b, .bd-cmp-warm .sp-cmp-k { min-height: 4.5rem; font-size: 1.125rem; }
  .bd-cmp-warm .sp-cmp-row-head .sp-cmp-a, .bd-cmp-warm .sp-cmp-row-head .sp-cmp-b { font-size: 1.375rem; }
}
@media (min-width: 1400px) {
  .bd-cmp-warm .sp-cmp-row, .bd-cmp-warm .sp-cmp-row-head { grid-template-columns: minmax(0, 1fr) 12.9375rem minmax(0, 1fr); }
  .bd-cmp-warm .sp-cmp-a, .bd-cmp-warm .sp-cmp-b, .bd-cmp-warm .sp-cmp-k { font-size: 1.25rem; }
  .bd-cmp-warm .sp-cmp-row-head .sp-cmp-a, .bd-cmp-warm .sp-cmp-row-head .sp-cmp-b { font-size: 1.5rem; }
}
.sp-band.bd-band .sp-cmp { margin-top: 0; }

.bd-cmp-pink .sp-cmp-row, .bd-cmp-pink .sp-cmp-row-head { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b"; }
.bd-cmp-pink .sp-cmp-k { display: none; }
.bd-cmp-pink .sp-cmp-a { background: #e7e7e7; color: var(--ss-muted); border-bottom: 1px solid rgb(255 255 255 / .55); }
.bd-cmp-pink .sp-cmp-b { background: var(--bd-pink-soft); color: var(--ss-ink); font-weight: 500; border-bottom: 1px solid var(--bd-accent); border-inline: 1px solid var(--bd-accent); }
.bd-cmp-pink .sp-cmp-row:not(.sp-cmp-row-head):last-child .sp-cmp-a, .bd-cmp-pink .sp-cmp-row:not(.sp-cmp-row-head) .sp-cmp-a { border-bottom-color: rgb(255 255 255 / .55); }
.bd-cmp-pink .sp-cmp-row-head .sp-cmp-a { background: #c2c2c2; color: var(--ss-text); }
.bd-cmp-pink .sp-cmp-row-head .sp-cmp-b { background: var(--bd-accent); color: var(--ss-white); border-color: var(--bd-accent); }
.bd-cmp-pink .sp-cmp-row:not(.sp-cmp-row-head) .sp-cmp-b { border-bottom-color: rgb(242 135 183 / .35); }
.bd-cmp-pink .sp-cmp-row:not(.sp-cmp-row-head):last-child .sp-cmp-b { border-bottom-color: var(--bd-accent); }
@media (min-width: 768px) {
  .bd-cmp-pink .sp-cmp-row, .bd-cmp-pink .sp-cmp-row-head { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b"; }
  .bd-cmp-pink .sp-cmp-a, .bd-cmp-pink .sp-cmp-b { min-height: 4rem; }
}
@media (min-width: 992px) {
  .bd-cmp-pink .sp-cmp-row, .bd-cmp-pink .sp-cmp-row-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-cmp-pink .sp-cmp-a, .bd-cmp-pink .sp-cmp-b { min-height: 4.5rem; font-size: 1.125rem; }
  .bd-cmp-pink .sp-cmp-row-head .sp-cmp-a, .bd-cmp-pink .sp-cmp-row-head .sp-cmp-b { font-size: 1.375rem; }
}
@media (min-width: 1400px) {
  .bd-cmp-pink .sp-cmp-a, .bd-cmp-pink .sp-cmp-b { font-size: 1.25rem; }
  .bd-cmp-pink .sp-cmp-row-head .sp-cmp-a, .bd-cmp-pink .sp-cmp-row-head .sp-cmp-b { font-size: 1.5rem; }
}

.sp-feat-pic { container-type: inline-size; }
.bd-pin { position: absolute; left: var(--x); top: var(--y); z-index: 2; padding: 0 .79em; border-radius: 62.4375rem; background: rgb(236 236 236 / .92); color: #664827;
  font-size: max(.6875rem, 3.2147cqw); font-weight: 500; line-height: 1.7143; white-space: nowrap; }
.bd-pin::before, .bd-pin::after { content: ""; position: absolute; top: 50%; pointer-events: none; }
.bd-pin::after { height: 0; border-top: max(1px, .23cqw) solid rgb(255 255 255 / .9); width: var(--l); }
.bd-pin::before { width: 1.8cqw; height: 1.8cqw; margin-top: -.9cqw; border-radius: 50%; background: #f7d3dc; }
.bd-pin-l::after { left: 100%; }
.bd-pin-l::before { left: calc(100% + var(--l) - .9cqw); }
.bd-pin-r::after { right: 100%; }
.bd-pin-r::before { right: calc(100% + var(--l) - .9cqw); }

.bd-lab { position: absolute; z-index: 2; margin: 0; font-weight: 500; line-height: 1.2; text-align: center; color: var(--ss-white); font-size: max(.625rem, 4.5872cqw); }
.bd-lab-top { inset: 0 0 auto 0; display: grid; place-items: center; height: 8.7%; background: #c8c8c8; color: var(--ss-text-2); }
.bd-lab-mid { inset: auto 0 auto 0; top: 49.7%; display: grid; place-items: center; height: 8.3%; background: #000; }
.bd-lab-note { inset: auto auto 2.2% 2.8%; font-size: max(.5rem, 1.8349cqw); font-weight: 400; color: #f7f7f7; text-align: left; }
.bd-lab-pill { padding: .4em 1.1em; border-radius: 62.4375rem; background: var(--bd-accent); font-size: max(.625rem, 3.2147cqw); }

.bd-prp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem 1.25rem 2rem; border-radius: 1.75rem; background: var(--ss-white); }
.bd-prp-fig { position: relative; container-type: inline-size; aspect-ratio: 654 / 458; --u: calc(100cqw / 654); }
.bd-prp-tube { position: absolute; left: calc(487 * var(--u)); top: calc(37 * var(--u)); width: calc(118 * var(--u)); }
.bd-prp-tube .img-ph, .bd-prp-tube img { border-radius: 0; }
.bd-prp-pill { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(34 * var(--u)); display: grid; place-items: center; border-radius: 62.4375rem; background: var(--c); color: var(--ss-white);
  font-size: max(.625rem, calc(19 * var(--u))); font-weight: 500; line-height: 1; white-space: nowrap; transform: translateY(-50%); }
.bd-prp-pill::after { content: ""; position: absolute; left: 100%; top: 50%; width: calc(var(--len) * var(--u)); border-top: 1px solid var(--c); }
.bd-prp-txt { align-self: center; }
.bd-prp-item + .bd-prp-item { margin-top: 1.5rem; }
.bd-prp-h { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.35; color: var(--ss-ink); }
.bd-prp-d { margin: .375rem 0 0; font-size: .9375rem; font-weight: 400; line-height: 1.55; color: var(--ss-weak); }
@media (min-width: 768px) {
  .bd-prp { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1.5rem 1.5rem 1.5rem 1rem; }
  .bd-prp-h { font-size: 1.125rem; } .bd-prp-d { font-size: .9375rem; }
}
@media (min-width: 992px) { .bd-prp { padding: 2rem 2rem 2rem 0; } .bd-prp-h { font-size: 1.25rem; } .bd-prp-d { font-size: 1.0625rem; } .bd-prp-item + .bd-prp-item { margin-top: 2rem; } }
@media (min-width: 1400px) { .bd-prp { padding: 2.3125rem 0 2.3125rem 0; } .bd-prp-txt { padding-left: 2.875rem; } .bd-prp-h { font-size: 1.3125rem; } .bd-prp-d { font-size: 1.25rem; line-height: 1.25; } .bd-prp-item + .bd-prp-item { margin-top: 2rem; } }

.bd-npair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.bd-ncard { position: relative; container-type: inline-size; --u: calc(100cqw / 626); margin: 0; overflow: hidden; border-radius: var(--sp-r); aspect-ratio: 626 / 388; background: #e7e7e7; }
.bd-ncard-white { background: var(--ss-white); border: 1px solid var(--ss-line); }
.bd-ncard-bar { position: absolute; inset: 0 0 auto 0; height: 15.2%; display: grid; place-items: center; margin: 0; background: #888; color: var(--ss-white); font-size: max(.75rem, calc(22 * var(--u))); font-weight: 500; line-height: 1; }
.bd-ncard-b .bd-ncard-bar { background: var(--bd-bar, var(--bd-accent)); }
.bd-ncard-lipo-b .bd-ncard-bar { background: #619d70; }
.bd-ncard-tool { position: absolute; left: 50%; bottom: 0; width: calc(var(--w) * var(--u)); transform: translateX(-50%); }
.bd-ncard-tool .img-ph, .bd-ncard-tool img { border-radius: 0; }
.bd-ncard-tool-abs { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); bottom: auto; transform: none; }
.bd-ncard-arc { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); border: max(1px, calc(2 * var(--u))) dashed var(--c, #888); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.bd-ncard-arc-solid { border-style: solid; border-width: max(2px, calc(5 * var(--u))); border-color: #5f9f72; border-radius: 62.4375rem 62.4375rem 0 0; }
@media (min-width: 768px) { .bd-npair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 992px) { .bd-npair { gap: 3.5rem; } }

.bd-layers { position: relative; aspect-ratio: 1310 / 567; overflow: hidden; border-radius: var(--sp-r-lg); background: #e7e7e7; }
.bd-layers-syr { position: absolute; left: 0; bottom: 0; width: 33.28%; }
.bd-layers-pic { position: absolute; right: 0; top: 0; width: 64.05%; height: 100%; }
.bd-layers-syr .img-ph, .bd-layers-syr img { border-radius: 0; }
.bd-layers-pic .img-ph, .bd-layers-pic img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; aspect-ratio: auto !important; }
@media (max-width: 575.98px) { .bd-layers { aspect-ratio: 4 / 3; } .bd-layers-pic { width: 70%; } .bd-layers-syr { width: 45%; } }

.bd-steps .sp-steps-item > .bd-steps-ph { position: relative; aspect-ratio: 307 / 267; overflow: hidden; border-radius: var(--sp-r); background: #f3f3f3; }
.bd-steps-ph .img-ph, .bd-steps-ph img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; aspect-ratio: auto !important; }
.bd-steps-ph-fit img, .bd-steps-ph-fit .img-ph { object-fit: contain; }

.bd-band .sp-h2.bd-cmp-h { margin-top: 4rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .bd-band .sp-h2.bd-cmp-h { margin-top: 5rem; margin-bottom: 2.5rem; } }
@media (min-width: 992px) { .bd-band .sp-h2.bd-cmp-h { margin-top: 8rem; margin-bottom: 4.5rem; } }

.bd-band .sp-h2.bd-h2-tight { margin-bottom: 2rem; }
@media (min-width: 768px) { .bd-band .sp-h2.bd-h2-tight { margin-bottom: 2.5rem; } }
@media (min-width: 992px) { .bd-band .sp-h2.bd-h2-tight { margin-bottom: 3rem; } }

.bd-pin-dark { background: #333; color: var(--ss-white); font-size: max(.625rem, 2.68cqw); }
.bd-pin-dark::before { background: #333; }
.bd-pin-dark::after { border-top-color: #333; }
.bd-pin-b::after { left: 50%; top: 100%; width: 0; height: var(--l); border-top: 0; border-left: max(1px, .23cqw) solid #333; }
.bd-pin-b::before { left: 50%; top: calc(100% + var(--l)); margin-left: -.9cqw; margin-top: -.9cqw; }

.bd-proc { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.bd-proc-box { padding: 1.5rem 1rem 2rem; border: 1px solid var(--ss-ink); background: var(--ss-white); }
.bd-proc-t { margin: 0 0 1.5rem; text-align: center; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--ss-ink); }
.bd-proc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; margin: 0; padding: 0; list-style: none; }
.bd-proc-item { text-align: center; }
.bd-proc-fig { width: 86%; margin-inline: auto; }
.bd-proc-fig .img-ph, .bd-proc-fig img { border-radius: 0; }
.bd-proc-no { margin: 1rem 0 0; font-size: .8125rem; font-weight: 700; line-height: 1.2; color: var(--bd-accent); }
.bd-proc-d { margin: .5rem 0 0; font-size: .875rem; font-weight: 500; line-height: 1.45; color: var(--ss-text); }
@media (min-width: 768px) {
  .bd-proc { gap: 2rem; } .bd-proc-box { padding: 2rem 2rem 2.5rem; } .bd-proc-t { margin-bottom: 2.5rem; font-size: 1.25rem; }
  .bd-proc-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1rem; } .bd-proc-no { margin-top: 1.5rem; } .bd-proc-d { font-size: .9375rem; }
}
@media (min-width: 992px) { .bd-proc { gap: 3rem; } .bd-proc-box { padding: 2.25rem 3rem 3.5rem; } .bd-proc-t { margin-bottom: 3.5rem; } .bd-proc-no { margin-top: 3.25rem; } .bd-proc-d { margin-top: 1.25rem; } }
@media (min-width: 1400px) { .bd-proc-box { padding-inline: 4.5rem; } .bd-proc-t { font-size: 1.4375rem; } }

.bd-quilt { position: relative; width: min(100%, 34.8125rem); margin: 2rem auto 0; container-type: inline-size; }
.bd-quilt .img-ph, .bd-quilt img { border-radius: var(--sp-r); }
.bd-quilt .bd-lab-pill { left: 50.3%; top: 67.6%; width: 27.1%; height: 9.1%; display: grid; place-items: center; padding: 0; font-size: max(.75rem, 5.386cqw); font-weight: 500; line-height: 1; }
.bd-ring { position: absolute; z-index: 2; left: 46.7%; top: 65.5%; width: 3.2%; aspect-ratio: 1; margin: -1.6% 0 0 -1.6%; border: max(1px, .35cqw) solid var(--bd-accent); border-radius: 50%; }
.bd-ring::after { content: ""; position: absolute; left: 80%; top: 80%; width: 450%; border-top: max(1px, .35cqw) solid var(--bd-accent); transform-origin: 0 0; transform: rotate(38deg); }
@media (min-width: 768px) { .bd-quilt { margin-top: 3.5rem; } }
@media (min-width: 992px) { .bd-quilt { margin-top: 5rem; } }

.bd-sut { display: grid; grid-template-columns: minmax(0, 1fr); margin: 2rem 0 0; padding: 0; list-style: none; }
.bd-sut-cell { padding-block: 1.5rem 2rem; text-align: center; border-bottom: 1px solid var(--ss-line); }
.bd-sut-cell:last-child { border-bottom: 0; }
.bd-sut-fig { position: relative; container-type: inline-size; aspect-ratio: 655 / 290; --u: calc(100cqw / 655); }
.bd-sut-fig > .bd-sut-img { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); }
.bd-sut-fig .img-ph, .bd-sut-fig img { border-radius: 0; }
.bd-sut-card { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); overflow: hidden; border-radius: calc(16 * var(--u)); background: var(--bg); }
.bd-sut-bar { position: absolute; inset: auto 0 0 0; display: grid; place-items: center; height: calc(40 * var(--u)); margin: 0; background: #333; color: var(--ss-white); font-size: max(.625rem, calc(15 * var(--u))); font-weight: 500; line-height: 1; }
.bd-sut-fig .bd-pin { left: calc(var(--px) * var(--u)); top: calc(var(--py) * var(--u)); transform: translateY(-50%); font-size: max(.625rem, calc(15 * var(--u))); }
.bd-sut-fig .bd-pin::after { width: calc(var(--len) * var(--u)); }
.bd-sut-fig .bd-pin-l::before { left: calc(100% + var(--len) * var(--u) - .45em); }
.bd-sut-fig .bd-pin-r::before { right: calc(100% + var(--len) * var(--u) - .45em); }
.bd-sut-fig .bd-pin::before { width: .9em; height: .9em; margin-top: -.45em; }
.bd-sut-fig .bd-pin-b { transform: translateX(-50%); }
.bd-sut-fig .bd-pin-b::after { width: 0; height: calc(var(--len) * var(--u)); }
.bd-sut-fig .bd-pin-b::before { top: calc(100% + var(--len) * var(--u)); margin-left: -.45em; }
.bd-sut-t { margin: 1rem 0 0; font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--ss-ink); }
.bd-sut-d { margin: .5rem 0 0; font-size: .9375rem; font-weight: 400; line-height: 1.5; color: var(--ss-muted); }
@media (min-width: 768px) {
  .bd-sut { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 3.5rem; }
  .bd-sut-cell { padding: 2rem 1rem 2.5rem; }
  .bd-sut-cell:nth-child(odd) { border-right: 1px solid var(--ss-line); }
  .bd-sut-cell:nth-child(n+3) { border-bottom: 0; }
  .bd-sut-cell:last-child { border-bottom: 0; }
  .bd-sut-t { font-size: 1.25rem; } .bd-sut-d { font-size: 1rem; }
}
@media (min-width: 992px) { .bd-sut { margin-top: 5rem; } .bd-sut-t { margin-top: 2.875rem; font-size: 1.375rem; } .bd-sut-d { margin-top: 1rem; font-size: 1.125rem; } }
@media (min-width: 1400px) { .bd-sut-t { font-size: 1.5rem; } .bd-sut-d { font-size: 1.25rem; line-height: 1.2; } }

.bd-flowcap { text-align: center; }
.bd-flowcap-no { display: block; margin-top: 1.5rem; font-size: .9375rem; font-weight: 700; line-height: 1.2; color: var(--bd-accent); }
.bd-flowcap-t { display: block; margin-top: 1rem; font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--ss-ink); }
.bd-flowcap-d { display: block; margin-top: .5rem; font-size: .9375rem; font-weight: 400; line-height: 1.5; color: var(--ss-muted); }
.bd-fig { position: relative; aspect-ratio: 408 / 286; overflow: hidden; border-radius: var(--sp-r); background: #f5f5f5; }
.bd-fig .img-ph, .bd-fig img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; border-radius: 0; }
.bd-fig-cover .img-ph, .bd-fig-cover img { inset: 0; height: 100%; object-fit: cover; aspect-ratio: auto !important; }
.sp-flow-chev .sp-flow-item + .sp-flow-item .sp-flow-fig::before { width: 1.25rem; height: 1.25rem; background: var(--ss-ink); -webkit-mask-image: url(../../../icons/ico-chevron-right.svg); mask-image: url(../../../icons/ico-chevron-right.svg); }
.sp-flow-chev .sp-flow-item .bd-flowcap { margin: 0; }
@media (min-width: 768px) { .bd-flowcap-no { margin-top: 1.75rem; font-size: 1rem; } .bd-flowcap-t { margin-top: 1.25rem; font-size: 1.25rem; } .bd-flowcap-d { font-size: 1rem; } .sp-flow-chev .sp-flow-item + .sp-flow-item .sp-flow-fig::before { width: 1.5rem; height: 1.5rem; } }
@media (min-width: 992px) { .sp-flow-chev { --flow-gap: 2.5rem; } .sp-flow-chev + .sp-flow-chev { margin-top: 6.5rem; } .bd-flowcap-no { margin-top: 2rem; } .bd-flowcap-t { margin-top: 1.75rem; font-size: 1.375rem; } .bd-flowcap-d { margin-top: 1rem; font-size: 1.125rem; } }
@media (min-width: 1400px) { .bd-flowcap-no { font-size: 1.125rem; } .bd-flowcap-t { font-size: 1.5rem; } .bd-flowcap-d { font-size: 1.25rem; line-height: 1.15; } }

.bd-prog { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; margin: 0; padding: 0; list-style: none; }
.bd-prog-item { text-align: center; }
.bd-prog-fig { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; aspect-ratio: 437 / 520; max-height: 22rem; margin-inline: auto; }
.bd-prog-fig > * { width: var(--w); }
.bd-prog-fig .img-ph, .bd-prog-fig img { border-radius: 0; }
.bd-prog-fig-logo { gap: 1.25%; }
.bd-prog-t { margin: 1.5rem 0 0; font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--ss-ink); }
.bd-prog-d { margin: .75rem 0 0; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--ss-muted); }
@media (min-width: 768px) { .bd-prog { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } .bd-prog-fig { max-height: none; } .bd-prog-t { font-size: 1.125rem; } .bd-prog-d { font-size: .9375rem; } }
@media (min-width: 992px) { .bd-prog { gap: 2rem; } .bd-prog-t { margin-top: 3rem; font-size: 1.375rem; } .bd-prog-d { font-size: 1.0625rem; } }
@media (min-width: 1400px) { .bd-prog-t { font-size: 1.5rem; } .bd-prog-d { font-size: 1.25rem; line-height: 1.25; } }

.sp-desc + .bd-proc, .sp-desc + .sp-flow, .sp-desc + .bd-sut { margin-top: 2rem; }
.sp-desc + .bd-quilt { margin-top: 2rem; }
@media (min-width: 768px) { .sp-desc + .bd-proc, .sp-desc + .sp-flow, .sp-desc + .bd-sut, .sp-desc + .bd-quilt { margin-top: 3.5rem; } }
@media (min-width: 992px) { .sp-desc + .bd-proc, .sp-desc + .sp-flow, .sp-desc + .bd-sut { margin-top: 4.5rem; } .sp-desc + .bd-quilt { margin-top: 6rem; } }

.bd-band-first { margin-top: var(--sp-sec-sm); }

.bd-kv-lipo { --sp-kv-bg: #f0f4ef; }
.bd-kv-slide { position: absolute; inset: 0; }
.bd-kv-slide[hidden] { display: none; }
.bd-kv-lipo .bd-kv-slide .sp-kv-img { position: absolute; }
@media (max-width: 767.98px) {
  .bd-kv-lipo { --sp-kv-h: min(calc(100vh - var(--ss-header-h) - var(--ss-bar-h) - var(--ss-consult-h)), 52.75rem); }
}
@supports (height: 100svh) { @media (max-width: 767.98px) { .bd-kv-lipo { --sp-kv-h: min(calc(100svh - var(--ss-header-h) - var(--ss-bar-h) - var(--ss-consult-h)), 52.75rem); } } }
@media (min-width: 768px) and (max-width: 991.98px) { .bd-kv-lipo .sp-kv-img { object-fit: contain; } }
@media (min-width: 992px) { .bd-kv-lipo .sp-kv-img { inset: 0 auto 0 50%; width: auto; transform: translateX(-50%); } .bd-kv-lipo .img-ph.sp-kv-img { aspect-ratio: 1104 / 932 !important; } }
.bd-kv-tabs { position: absolute; left: 0; right: 0; bottom: 2rem; z-index: 3; display: flex; justify-content: center; }
.bd-kv-tabs .ss-mtab { width: 100%; max-width: 21.5rem; margin-inline: auto; }
.bd-kv-tabs .ss-mtab-list { justify-content: center; gap: .625rem; }
.bd-kv-tab { display: grid; place-items: center; width: 100%; min-height: 2.75rem; padding: 0 1rem; border: 0; border-radius: 62.4375rem; background: rgb(153 153 153 / .92); color: var(--ss-white); font: 500 1.25rem/1 var(--ss-font); cursor: pointer; transition: background-color .2s; }
.bd-kv-tab:hover { background: rgb(120 120 120 / .95); }
.bd-kv-tab.is-active { background: #62d27e; }
@media (max-width: 767.98px) {
  :root .bd-kv-tabs .ss-mtab-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; margin: 0; padding: 0; overflow: visible; }
  :root .bd-kv-tabs .ss-mtab-list > li { flex: none; }
  :root .bd-kv-tabs .bd-kv-tab { width: 100%; }
  .bd-kv-tabs { bottom: 3rem; padding-inline: var(--ss-edge); }
  .bd-kv-tabs .ss-mtab { max-width: 22rem; }
}
@media (min-width: 768px) { .bd-kv-tabs { bottom: 3.5rem; } .bd-kv-tabs .ss-mtab { max-width: none; width: auto; } .bd-kv-tabs .ss-mtab-list { flex-wrap: nowrap; } .bd-kv-tab { width: 8rem; min-height: 2.75rem; } }
@media (min-width: 992px) { .bd-kv-tabs { bottom: 5.75rem; } }

.bd-vs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.bd-vs-col { display: flex; flex-direction: column; margin: 0; padding: 0; }
.bd-vs-h { display: grid; place-items: center; min-height: 3rem; margin: 0; background: #e7e7e7; color: var(--ss-text); font-size: 1.125rem; font-weight: 600; line-height: 1.2; }
.bd-vs-pic { overflow: hidden; }
.bd-vs-pic .img-ph, .bd-vs-pic img { border-radius: 0; }
.bd-vs-rows { margin: 0; padding: 0; list-style: none; }
.bd-vs-r { display: grid; place-items: center; min-height: 3.5rem; padding: .5rem .75rem; background: #e7e7e7; color: var(--ss-weak); text-align: center; font-size: .9375rem; font-weight: 400; line-height: 1.4; letter-spacing: -.02em; }
.bd-vs-r + .bd-vs-r { border-top: 1px solid rgb(0 0 0 / .08); }
.bd-vs-col-b { border: 1px solid var(--bd-accent); border-top: 0; }
.bd-vs-col-b .bd-vs-h { background: var(--bd-accent); color: var(--ss-white); margin-inline: -1px; }
.bd-vs-col-b .bd-vs-r { background: var(--bd-green-soft); color: var(--ss-ink); font-weight: 500; }
.bd-vs-col-b .bd-vs-r + .bd-vs-r { border-top-color: rgb(67 156 89 / .25); }
@media (min-width: 768px) {
  .bd-vs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .bd-vs-h { min-height: 3.5rem; font-size: 1.25rem; } .bd-vs-r { min-height: 3.75rem; font-size: 1rem; }
}
@media (min-width: 992px) { .bd-vs-h { min-height: 3.75rem; font-size: 1.375rem; } .bd-vs-r { min-height: 4.125rem; font-size: 1.125rem; } }
@media (min-width: 1400px) { .bd-vs-h { font-size: 1.5rem; } .bd-vs-r { min-height: 4.375rem; font-size: 1.25rem; } }

.bd-s1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.bd-eva { margin: 0; text-align: center; }
.bd-eva-card { position: relative; aspect-ratio: 626 / 373; overflow: hidden; border-radius: var(--sp-r); background: var(--ss-bg-soft); }
.bd-eva-card .bd-eva-pc { position: absolute; left: 20.1%; bottom: 0; width: 75.7%; }
.bd-eva-card .img-ph, .bd-eva-card img { border-radius: 0; }
.bd-eva-card .bd-eva-mo .img-ph, .bd-eva-card .bd-eva-mo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto !important; }
.bd-eva-t { margin: 1rem 0 0; font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--ss-ink); }
.bd-eva-d { margin: .5rem 0 0; font-size: .9375rem; font-weight: 400; line-height: 1.5; color: var(--ss-muted); }
.bd-circles { position: relative; container-type: inline-size; aspect-ratio: 626 / 373; overflow: hidden; border-radius: var(--sp-r); background: var(--ss-bg-soft); --u: calc(100cqw / 626); }
.bd-circles-c { position: absolute; top: calc(34 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(295 * var(--u)); aspect-ratio: 1; border-radius: 50%; color: var(--ss-white); text-align: center; }
.bd-circles-c-a { left: calc(41 * var(--u)); background: radial-gradient(circle at 18% 14%, rgb(255 255 255 / .6), rgb(255 255 255 / 0) 58%), #62ae76; }
.bd-circles-c-b { left: calc(301 * var(--u)); background: radial-gradient(circle at 82% 88%, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 58%), #5f9f85; opacity: .96; }
.bd-circles-t { margin: 0; font-size: max(.75rem, calc(24 * var(--u))); font-weight: 700; line-height: 1.3; }
.bd-circles-d { margin: calc(14 * var(--u)) 0 0; font-size: max(.625rem, calc(20 * var(--u))); font-weight: 400; line-height: 1.15; }
.bd-circles-mo { position: absolute; inset: 0; }
.bd-circles-mo .img-ph, .bd-circles-mo img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; aspect-ratio: auto !important; }
@media (min-width: 768px) { .bd-s1 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .bd-eva-t { font-size: 1.25rem; } .bd-eva-d { font-size: 1rem; } }
@media (min-width: 992px) { .bd-s1 { gap: 2.75rem; } .bd-eva-t { margin-top: 1.375rem; font-size: 1.375rem; } .bd-eva-d { margin-top: 1rem; font-size: 1.125rem; } }
@media (min-width: 1400px) { .bd-s1 { gap: 3.5rem; } .bd-eva-t { font-size: 1.5rem; } .bd-eva-d { font-size: 1.25rem; line-height: 1.15; } }

.bd-tube { position: relative; max-width: 49.3125rem; margin-inline: auto; }
.bd-tube-pills { position: relative; height: 2.5rem; margin-top: .75rem; }
.bd-tube-pill { position: absolute; top: 0; display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; padding: 0 1.375rem; border-radius: 62.4375rem; background: #d3d3d3; color: var(--ss-ink); font-size: 1.5rem; font-weight: 700; line-height: 1; white-space: nowrap; transform: translateX(-50%); }
.bd-tube-pill-b { background: var(--bd-accent); color: var(--ss-white); }
.bd-tube .img-ph, .bd-tube img { border-radius: 0; }
@media (max-width: 991.98px) { .bd-tube-pill { height: 2rem; padding: 0 1rem; font-size: 1.125rem; } .bd-tube-pills { height: 2rem; } }

.bd-ncard-mo { aspect-ratio: 358 / 242; }
.bd-ncard-mo > .img-ph, .bd-ncard-mo > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; aspect-ratio: auto !important; }
.bd-ncard-mo .bd-ncard-bar { z-index: 1; height: 15.2%; font-size: max(.75rem, 5.585cqw); }
.bd-ncard-mo { --u: calc(100cqw / 358); }
.bd-ncard-lipo-a .bd-ncard-bar { background: #888; }

@media (max-width: 767.98px) { .bd-info-lipo .sp-info-grid > :nth-child(2) { order: -1; } }

.bd-fit { aspect-ratio: var(--ar); }
.bd-fit > img, .bd-fit > .img-ph { width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto !important; border-radius: 0; }
.bd-prog-fig > .bd-fit { aspect-ratio: var(--ar); }
/* 1018 수정(W-13): 바디 */
.bd-lead { margin-top: .5rem; }
@media (max-width: 991.98px) { .bd-lead { line-height: 1.4; } }
@media (min-width: 768px) { .bd-cmp-warm .sp-cmp-row-head .sp-cmp-k { display: flex; } }
.bd-proc-no, .bd-flowcap-no { display: inline-block; padding: .25rem .75rem; border: 1px solid var(--bd-accent); border-radius: 62.4375rem; }
.sp-feat-pic > .bd-ba-img { inset: auto; left: 0; width: 100%; height: 41.4%; }
.sp-feat-pic > .bd-ba-top { top: 8.7%; }
.sp-feat-pic > .bd-ba-bot { top: 58%; }
/* 모바일 특징 탭 4장 비율 통일(5:4): 탭1·3(436x483)은 위아래, 탭2·4(866x492)는 양옆을 자름 */
@media (max-width: 767.98px) {
  .sp-feat-pic.bd-mo5 { aspect-ratio: 5 / 4 !important; overflow: hidden; }
  .bd-mo5 > .bd-lab-top { height: 12%; }
  .bd-mo5 > .bd-lab-mid { top: 50.2%; height: 11.5%; }
  .bd-mo5 > .bd-ba-top { top: 12%; height: 38.2%; }
  .bd-mo5 > .bd-ba-bot { top: 61.7%; height: 38.2%; }
  .bd-mo5 > .bd-lab-q { top: 76% !important; }
}
