@charset "utf-8";
/* =========================================================
   인증 효과 (benefit.html) — benefit.css
   로드 순서: style.css → sub.css → benefit.css
   ========================================================= */
.svi { display: block; flex: none; fill: none; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* ---------- 1. 인증 효과 4가지 : 4단 카드 ---------- */
.bf-main { padding: 120px 0 140px; }
.bf-head { text-align: center; }
.bf-head > p:last-child { margin-top: 20px; font-size: 17px; line-height: 1.85; color: var(--sub); }

.bf-cards { margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.bf-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 28px 44px; background: #fff; border: 1px solid #DCE3EE; border-radius: 22px; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.bf-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #2454C6, #6A9BFF); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.bf-card:hover { transform: translateY(-4px); border-color: #C9D6EA; box-shadow: 0 18px 40px rgba(16, 38, 76, .08); }
.bf-card:hover::before { transform: scaleX(1); }
.bf-card__no { position: absolute; left: 24px; top: 22px; font-size: 14px; font-weight: 800; letter-spacing: .1em; color: #8FA6D6; }
.bf-card__ico { display: inline-flex; align-items: center; justify-content: center; width: 104px; height: 104px; border-radius: 50%; background: #EEF3FC; transition: background .3s; }
.bf-card:hover .bf-card__ico { background: #E3ECFB; }
.bf-card__ico .svi { width: 60px; height: 60px; stroke-width: 2.4; }
.bf-card__title { margin-top: 28px; font-size: 21px; font-weight: 800; letter-spacing: -.03em; color: var(--navy); word-break: keep-all; }
.bf-card__desc { margin-top: 14px; font-size: 15px; line-height: 1.8; color: var(--sub); word-break: keep-all; }

/* ---------- 2. 검증된 품질을 기업의 경쟁력으로 : 서브비주얼 톤 그라데이션 밴드 ---------- */
.bf-value { position: relative; overflow: hidden; padding: 110px 0; color: #fff; background: linear-gradient(100deg, #021B3D 0%, #00316B 46%, #01406F 76%, #015257 100%); }
.bf-value::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 100% 56px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 56px 100%;
  -webkit-mask: linear-gradient(90deg, transparent 10%, #000 70%); mask: linear-gradient(90deg, transparent 10%, #000 70%); }
.bf-value::after { content: ""; position: absolute; right: -140px; top: 50%; width: 620px; height: 620px; margin-top: -310px; border-radius: 50%; pointer-events: none; background: repeating-radial-gradient(circle, transparent 0 43px, rgba(255,255,255,.1) 43px 44px);
  -webkit-mask: radial-gradient(circle, #000 22%, transparent 68%); mask: radial-gradient(circle, #000 22%, transparent 68%); }
.bf-value__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 440px; gap: 64px; align-items: center; }
.bf-value__title { font-size: 44px; font-weight: 800; line-height: 1.3; letter-spacing: -.04em; }
.bf-value__text p { margin-top: 18px; font-size: 17px; line-height: 1.85; color: #C9D6EA; }
.bf-value__text p + p { margin-top: 10px; }
.bf-value__title + p { margin-top: 28px; }
.bf-value__pair { display: grid; gap: 14px; }
.bf-value__pair li { display: flex; align-items: center; gap: 18px; padding: 24px 28px; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; background: rgba(255,255,255,.06); backdrop-filter: blur(4px); }
.bf-value__pair span { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--navy); font-size: 16px; font-weight: 800; }
.bf-value__pair strong { font-size: 19px; font-weight: 700; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1280px) {
  .bf-card { padding: 44px 20px 40px; }
}

@media (max-width: 1024px) {
  .bf-main { padding: 88px 0 96px; }
  .bf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-value { padding: 88px 0; }
  .bf-value__inner { grid-template-columns: 1fr; gap: 36px; }
  .bf-value__title { font-size: 36px; }
}

@media (max-width: 768px) {
  .bf-main { padding: 64px 0 72px; }
  .bf-head { text-align: left; }
  .bf-head > p:last-child { font-size: 15px; }
  .bf-cards { margin-top: 36px; grid-template-columns: 1fr; gap: 12px; }
  .bf-card { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; column-gap: 18px; padding: 26px 22px; border-radius: 18px; }
  .bf-card__no { position: static; order: -1; width: 100%; margin-bottom: 8px; font-size: 13px; }
  .bf-card__ico { width: 64px; height: 64px; }
  .bf-card__ico .svi { width: 38px; height: 38px; stroke-width: 2.8; }
  .bf-card__title { flex: 1; margin-top: 0; font-size: 19px; }
  .bf-card__desc { width: 100%; margin-top: 14px; font-size: 14px; }
  .bf-value { padding: 64px 0; }
  .bf-value::after { width: 360px; height: 360px; margin-top: -180px; right: -160px; }
  .bf-value__title { font-size: 28px; }
  .bf-value__text p { font-size: 15px; }
  .bf-value__pair li { padding: 18px; gap: 14px; border-radius: 14px; }
  .bf-value__pair span { width: 46px; height: 46px; font-size: 14px; }
  .bf-value__pair strong { font-size: 16px; }
}