@charset "utf-8";

.mfAdvantage20260722 { width: 100%; padding: calc(80px * var(--gw-transform-scale, 1)) 0; box-sizing: border-box; background-color: rgb(248, 251, 255); font-family: system-ui, -apple-system, sans-serif; }

.mfAdvInner { max-width: calc(1400px * var(--gw-transform-scale, 1)); margin: 0px auto; padding: 0 calc(20px * var(--gw-transform-scale, 1)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(64px * var(--gw-transform-scale, 1)); align-items: center; }

.mfImgWrap { position: relative; }

.mfMainImg { width: 100%; border-radius: calc(24px * var(--gw-transform-scale, 1)); overflow: hidden; box-shadow: 0 calc(12px * var(--gw-transform-scale, 1)) calc(36px * var(--gw-transform-scale, 1)) rgba(20, 60, 120, 0.06); }

.mfMainImg img { width: 100%; display: block; }

.mfYearBadge { position: absolute; right: 0px; bottom: calc(-16px * var(--gw-transform-scale, 1)); background-color: rgb(45, 141, 240); color: rgb(255, 255, 255); padding: calc(24px * var(--gw-transform-scale, 1)) calc(26px * var(--gw-transform-scale, 1)); border-radius: calc(16px * var(--gw-transform-scale, 1)); box-shadow: 0 calc(6px * var(--gw-transform-scale, 1)) calc(18px * var(--gw-transform-scale, 1)) rgba(45, 141, 240, 0.22); }

.mfBadgeNum { font-size: calc(52px * var(--gw-transform-scale, 1)); font-weight: 700; line-height: 1; text-align: center; }

.mfBadgeText { font-size: calc(18px * var(--gw-transform-scale, 1)); margin-top: calc(8px * var(--gw-transform-scale, 1)); text-align: center; }

.mfTextWrap .top-tag { display: inline-block; background-color: rgba(45, 141, 240, 0.1); color: rgb(45, 141, 240); font-size: calc(16px * var(--gw-transform-scale, 1)); padding: calc(8px * var(--gw-transform-scale, 1)) calc(22px * var(--gw-transform-scale, 1)); border-radius: 999px; margin-bottom: calc(20px * var(--gw-transform-scale, 1)); }

.mfTextWrap h2 { font-size: calc(44px * var(--gw-transform-scale, 1)); font-weight: 700; color: rgb(26, 26, 46); line-height: 1.22; margin: 0 0 calc(22px * var(--gw-transform-scale, 1)); }

.mfTextDesc { font-size: calc(17px * var(--gw-transform-scale, 1)); color: rgb(84, 89, 104); line-height: 1.82; margin-bottom: calc(36px * var(--gw-transform-scale, 1)); }

.mfFeatureList { display: flex; flex-direction: column; gap: calc(24px * var(--gw-transform-scale, 1)); margin-bottom: calc(40px * var(--gw-transform-scale, 1)); }

.mfFeatureItem { display: flex; gap: calc(16px * var(--gw-transform-scale, 1)); align-items: flex-start; }

.mfFeatureIcon { width: calc(44px * var(--gw-transform-scale, 1)); height: calc(44px * var(--gw-transform-scale, 1)); flex-shrink: 0; background-color: rgba(45, 141, 240, 0.1); border-radius: calc(12px * var(--gw-transform-scale, 1)); display: flex; align-items: center; justify-content: center; color: rgb(45, 141, 240); }

.mfFeatureIcon svg { width: calc(22px * var(--gw-transform-scale, 1)); height: calc(22px * var(--gw-transform-scale, 1)); fill: currentcolor; }

.mfFeatureContent h4 { font-size: calc(20px * var(--gw-transform-scale, 1)); font-weight: 600; color: rgb(26, 26, 46); margin: 0 0 calc(6px * var(--gw-transform-scale, 1)); }

.mfFeatureContent p { font-size: calc(16px * var(--gw-transform-scale, 1)); color: rgb(96, 107, 124); margin: 0px; line-height: 1.65; }

.mfBottomBar { display: flex; align-items: center; gap: calc(24px * var(--gw-transform-scale, 1)); }

.mfBtn { display: inline-flex; align-items: center; gap: calc(8px * var(--gw-transform-scale, 1)); padding: calc(16px * var(--gw-transform-scale, 1)) calc(40px * var(--gw-transform-scale, 1)); background-color: rgb(45, 141, 240); color: rgb(255, 255, 255); font-size: calc(18px * var(--gw-transform-scale, 1)); font-weight: 500; border-radius: 999px; text-decoration: none; box-shadow: 0 calc(6px * var(--gw-transform-scale, 1)) calc(22px * var(--gw-transform-scale, 1)) rgba(45, 141, 240, 0.2); transition: 0.3s; }

.mfBtn:hover { background-color: rgb(26, 125, 224); transform: translateY(calc(-3px * var(--gw-transform-scale, 1))); }

.mfTelInfo { font-size: calc(18px * var(--gw-transform-scale, 1)); color: rgb(26, 26, 46); line-height: 1.5; }

.mfTelInfo small { display: block; font-size: calc(15px * var(--gw-transform-scale, 1)); color: rgb(96, 107, 124); }

@media (max-width: calc(992px * var(--gw-transform-scale, 1))) {
  .mfAdvInner { grid-template-columns: 1fr; gap: calc(48px * var(--gw-transform-scale, 1)); }
  .mfTextWrap h2 { font-size: calc(32px * var(--gw-transform-scale, 1)); }
  .mfYearBadge { position: relative; right: auto; bottom: auto; display: table; margin: calc(16px * var(--gw-transform-scale, 1)) auto 0; }
  .mfBottomBar { flex-wrap: wrap; }
}