@charset "utf-8";
/* =========================================================
   비용 안내 (process/fee.html) — fee.css
   로드 순서: style.css → sub.css → fee.css
   ========================================================= */
.svi { display: block; flex: none; fill: none; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.fe { padding: 120px 0 110px; }
.fe-head { text-align: center; }
.fe-head > p:last-child { margin-top: 20px; font-size: 17px; line-height: 1.85; color: var(--sub); }

/* 인증심사비 · 제품시험비 */
.fe-cards { margin-top: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.fe-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 44px 44px 40px; border: 1px solid #DCE3EE; border-radius: 22px; background: #fff; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.fe-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); }
.fe-card:hover { transform: translateY(-4px); border-color: #C9D6EA; box-shadow: 0 18px 40px rgba(16, 38, 76, .08); }
.fe-card:hover::before { transform: scaleX(1); }
.fe-card__head { display: flex; align-items: center; gap: 20px; }
.fe-card__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: #EEF3FC; }
.fe-card__ico .svi { width: 46px; height: 46px; stroke-width: 2.7; }
.fe-card__title { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--navy); }
.fe-card__desc { margin-top: 20px; font-size: 16px; line-height: 1.8; color: var(--body); }
.fe-card__box { margin-top: 22px; padding: 24px 26px; border-radius: 16px; background: #F4F6FA; }
.fe-card__box > strong { display: block; font-size: 15px; font-weight: 800; color: var(--navy); }
.fe-card__list { margin-top: 14px; display: grid; gap: 9px; }
.fe-card__list li { position: relative; padding-left: 26px; font-size: 15.5px; font-weight: 600; line-height: 1.55; color: var(--ink-2); }
.fe-card__list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #2454C6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.fe-card__notes { margin-top: 18px; display: grid; gap: 6px; }
.fe-card__notes li { position: relative; padding-left: 14px; font-size: 14px; line-height: 1.7; color: var(--sub); }
.fe-card__notes li::before { content: ""; position: absolute; left: 0; top: .75em; width: 4px; height: 4px; border-radius: 50%; background: #8FA6D6; }

/* 추가 비용 */
.fe-extra { margin-top: 24px; display: flex; align-items: center; gap: 24px; padding: 30px 40px; border: 1px solid #C9D6EA; border-radius: 22px; background: linear-gradient(135deg, #fff 0%, #F4F7FD 100%); }
.fe-extra__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 1px solid #DCE3EE; }
.fe-extra__ico .svi { width: 40px; height: 40px; stroke-width: 2.8; }
.fe-extra__title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.fe-extra p { margin-top: 6px; font-size: 16px; line-height: 1.75; color: var(--body); }

/* 비용 안내 절차 */
.fe-flow { padding: 100px 0 130px; background: #F4F6FA; }
.fe-flow__title { text-align: center; font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.fe-steps { margin-top: 40px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.fe-steps li { --c: #3D8BFF; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; padding: 18px 12px; border-radius: 20px; background: var(--c); color: #fff; text-align: center; box-shadow: 0 14px 28px rgba(16, 38, 76, .12); }
.fe-steps li:nth-child(2) { --c: #2F72E8; }
.fe-steps li:nth-child(3) { --c: #2454C6; }
.fe-steps li:nth-child(4) { --c: #1A3F9E; }
.fe-steps li:nth-child(5) { --c: #0B2E6E; }
.fe-steps span { font-size: 12px; font-weight: 800; letter-spacing: .1em; opacity: .7; }
.fe-steps strong { font-size: 18px; font-weight: 800; letter-spacing: -.02em; word-break: keep-all; }
.fe-steps li + li::before { content: ""; position: absolute; left: -26px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 4l6 6-6 6' fill='none' stroke='%232454C6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.fe-note { margin-top: 28px; text-align: center; font-size: 14px; color: var(--muted); }

/* 행동유도버튼 */
.fe-cta { margin-top: 48px; text-align: center; }
.fe-cta__btn { display: inline-flex; align-items: center; gap: 12px; height: 68px; padding: 0 40px; border-radius: 999px; background: linear-gradient(100deg, #00316B, #2454C6); color: #fff; font-size: 19px; font-weight: 800; box-shadow: 0 14px 30px rgba(36, 84, 198, .28); transition: box-shadow .25s; }
.fe-cta__btn .ico { width: 24px; height: 24px; }
.fe-cta__arrow { width: 20px !important; height: 20px !important; transition: transform .25s; }
.fe-cta__btn:hover { box-shadow: 0 18px 36px rgba(36, 84, 198, .38); }
.fe-cta__btn:hover .fe-cta__arrow { transform: translateX(4px); }

@media (max-width: 1180px) {
  .fe-steps { gap: 24px; }
  .fe-steps li + li::before { left: -22px; }
  .fe-steps strong { font-size: 16px; }
}

@media (max-width: 1024px) {
  .fe { padding: 88px 0 88px; }
  .fe-cards { grid-template-columns: 1fr; }
  .fe-flow { padding: 80px 0 96px; }
  .fe-steps { grid-template-columns: 1fr; gap: 26px; max-width: 480px; margin-left: auto; margin-right: auto; }
  .fe-steps li { flex-direction: row; gap: 16px; min-height: 64px; }
  .fe-steps li + li::before { left: 50%; top: -23px; margin: 0 0 0 -10px; transform: rotate(90deg); }
}

@media (max-width: 768px) {
  .fe { padding: 64px 0 64px; }
  .fe-head { text-align: left; }
  .fe-head > p:last-child { font-size: 15px; }
  .fe-cards { margin-top: 36px; gap: 14px; }
  .fe-card { padding: 26px 20px; border-radius: 18px; }
  .fe-card__head { gap: 14px; }
  .fe-card__ico { width: 56px; height: 56px; }
  .fe-card__ico .svi { width: 32px; height: 32px; stroke-width: 3; }
  .fe-card__title { font-size: 21px; }
  .fe-card__desc { margin-top: 14px; font-size: 14px; }
  .fe-card__box { padding: 18px; }
  .fe-card__box > strong { font-size: 14px; }
  .fe-card__list li { font-size: 14px; }
  .fe-card__notes li { font-size: 13px; }
  .fe-extra { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 20px; border-radius: 18px; }
  .fe-extra__ico { width: 54px; height: 54px; }
  .fe-extra__ico .svi { width: 30px; height: 30px; }
  .fe-extra__title { font-size: 17px; }
  .fe-extra p { font-size: 14px; }
  .fe-flow { padding: 64px 0 72px; }
  .fe-flow__title { text-align: left; font-size: 22px; }
  .fe-steps { margin-top: 24px; }
  .fe-steps strong { font-size: 15px; }
  .fe-note { text-align: left; font-size: 13px; }
  .fe-cta { margin-top: 32px; }
  .fe-cta__btn { width: 100%; justify-content: center; height: 58px; padding: 0 20px; font-size: 16px; }
}