@charset "utf-8";



.mfBusiness20260722 { 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; }



.mfBusinessInner { max-width: calc(1400px * var(--gw-transform-scale, 1)); margin: 0px auto; padding: 0 calc(20px * var(--gw-transform-scale, 1)); }



.mfSectionHead { text-align: center; margin-bottom: calc(60px * var(--gw-transform-scale, 1)); }



.mfSectionHead h2 { font-size: calc(48px * var(--gw-transform-scale, 1)); font-weight: 700; color: rgb(26, 26, 46); margin: 0 0 calc(20px * var(--gw-transform-scale, 1)); }



.mfSectionHead p { font-size: calc(18px * var(--gw-transform-scale, 1)); color: rgb(96, 107, 124); line-height: 1.7; max-width: calc(900px * var(--gw-transform-scale, 1)); margin: 0px auto; }



.mfCardWrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(32px * var(--gw-transform-scale, 1)); }



.mfServiceCard { border: 1px solid rgb(228, 235, 245); border-radius: calc(16px * var(--gw-transform-scale, 1)); padding: calc(48px * var(--gw-transform-scale, 1)) calc(32px * var(--gw-transform-scale, 1)); text-align: center; position: relative; transition: 0.3s; cursor: pointer; background: rgb(255, 255, 255); }



.mfServiceCard:hover { transform: translateY(calc(-8px * var(--gw-transform-scale, 1))); box-shadow: 0 calc(12px * var(--gw-transform-scale, 1)) calc(40px * var(--gw-transform-scale, 1)) rgba(45, 141, 240, 0.12); border-color: rgb(198, 224, 255); }



.mfServiceCard:hover .mfCardIcon { transform: scale(1.08); }



.mfCardIcon { width: calc(80px * var(--gw-transform-scale, 1)); height: calc(80px * var(--gw-transform-scale, 1)); background-color: rgb(45, 141, 240); border-radius: calc(16px * var(--gw-transform-scale, 1)); display: flex; align-items: center; justify-content: center; margin: 0 auto calc(28px * var(--gw-transform-scale, 1)); transition: transform 0.3s; }



.mfCardIcon svg { width: calc(36px * var(--gw-transform-scale, 1)); height: calc(36px * var(--gw-transform-scale, 1)); fill: rgb(255, 255, 255); }



.mfServiceCard h3 { font-size: calc(26px * var(--gw-transform-scale, 1)); font-weight: 600; color: rgb(26, 26, 46); margin: 0 0 calc(16px * var(--gw-transform-scale, 1)); transition: color 0.3s; }



.mfServiceCard:hover h3 { color: rgb(45, 141, 240); }



.mfServiceCard p { font-size: calc(16px * var(--gw-transform-scale, 1)); color: rgb(96, 107, 124); line-height: 1.75; margin: 0px; }



@media (max-width: calc(992px * var(--gw-transform-scale, 1))) {

  .mfCardWrap { grid-template-columns: repeat(2, 1fr); }

  .mfSectionHead h2 { font-size: calc(36px * var(--gw-transform-scale, 1)); }

  .mfServiceCard:hover { transform: translateY(0px); }

}



@media (max-width: calc(576px * var(--gw-transform-scale, 1))) {

  .mfCardWrap { grid-template-columns: 1fr; }

  .mfSectionHead h2 { font-size: calc(32px * var(--gw-transform-scale, 1)); }

}