@charset "utf-8";



.mfAccordCase20260731 { width: 100%; padding: calc(80px * var(--gw-transform-scale, 1)) 0; box-sizing: border-box; background-color: rgb(255, 255, 255); font-family: system-ui, -apple-system, sans-serif; }



.mfAccordInner { 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(50px * var(--gw-transform-scale, 1)); }



.mfSectionHead .top-tag { display: inline-block; background-color: rgba(45, 141, 240, 0.1); color: rgb(45, 141, 240); font-size: calc(14px * var(--gw-transform-scale, 1)); padding: calc(6px * var(--gw-transform-scale, 1)) calc(18px * var(--gw-transform-scale, 1)); border-radius: 999px; margin-bottom: calc(12px * 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(12px * var(--gw-transform-scale, 1)); }



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



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



.mfAccordItem { display: flex; flex-direction: column; }



.mfAccordCard { position: relative; border-radius: calc(16px * var(--gw-transform-scale, 1)); overflow: hidden; aspect-ratio: 1 / 1; cursor: pointer; }



.mfAccordCard img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }



.mfAccordCard:hover img { transform: scale(1.06); }



.mfAccordOverlay { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: linear-gradient(rgba(45, 141, 240, 0.88) 0%, rgba(45, 141, 240, 0.92) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }



.mfAccordCard:hover .mfAccordOverlay { opacity: 1; }



.mfAccordOverlay h3 { font-size: calc(24px * var(--gw-transform-scale, 1)); font-weight: 700; color: rgb(255, 255, 255); margin: 0 0 calc(8px * var(--gw-transform-scale, 1)); }



.mfAccordOverlay p { font-size: calc(16px * var(--gw-transform-scale, 1)); color: rgba(255, 255, 255, 0.85); margin: 0 0 calc(24px * var(--gw-transform-scale, 1)); }



.mfAccordBtn { display: inline-flex; align-items: center; gap: calc(6px * var(--gw-transform-scale, 1)); padding: calc(12px * var(--gw-transform-scale, 1)) calc(28px * var(--gw-transform-scale, 1)); background-color: rgb(255, 255, 255); color: rgb(45, 141, 240); border-radius: 999px; font-size: calc(16px * var(--gw-transform-scale, 1)); font-weight: 600; text-decoration: none; transition: 0.3s; white-space: nowrap; line-height: 1; border: none; outline: none; cursor: pointer; box-sizing: border-box; }



.mfAccordBtn:hover { background-color: rgb(240, 247, 255); transform: translateY(calc(-2px * var(--gw-transform-scale, 1))); }



.mfAccordBtn svg { width: calc(18px * var(--gw-transform-scale, 1)); height: calc(18px * var(--gw-transform-scale, 1)); flex-shrink: 0; display: block; }



.mfAccordTextWrap { max-height: 0px; overflow: hidden; transition: max-height 0.4s; padding: 0 calc(8px * var(--gw-transform-scale, 1)); }



.mfAccordItem:hover .mfAccordTextWrap { max-height: calc(320px * var(--gw-transform-scale, 1)); padding-top: calc(16px * var(--gw-transform-scale, 1)); }



.mfAccordText { color: rgb(68, 74, 88); font-size: calc(14px * var(--gw-transform-scale, 1)); line-height: 1.7; }



.mfCaseBottomBtn { text-align: center; margin-top: calc(48px * var(--gw-transform-scale, 1)); }



.mfMoreBtn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(8px * var(--gw-transform-scale, 1)); padding: calc(12px * var(--gw-transform-scale, 1)) calc(28px * var(--gw-transform-scale, 1)); background-color: rgb(45, 141, 240); color: rgb(255, 255, 255); border-radius: calc(999px * var(--gw-transform-scale, 1)); font-size: calc(15px * var(--gw-transform-scale, 1)); font-weight: 600; text-decoration: none; transition: 0.3s; white-space: nowrap; line-height: 1; border: none; outline: none; cursor: pointer; box-sizing: border-box; appearance: none; overflow: hidden; }



.mfMoreBtn:hover { background-color: rgb(26, 125, 224); transform: translateY(calc(-2px * var(--gw-transform-scale, 1))); box-shadow: 0 calc(6px * var(--gw-transform-scale, 1)) calc(20px * var(--gw-transform-scale, 1)) rgba(45, 141, 240, 0.3); }



.mfMoreBtn:active { transform: translateY(0px); box-shadow: 0 calc(2px * var(--gw-transform-scale, 1)) calc(8px * var(--gw-transform-scale, 1)) rgba(45, 141, 240, 0.25); }



.mfMoreBtn svg { width: calc(18px * var(--gw-transform-scale, 1)); height: calc(18px * var(--gw-transform-scale, 1)); flex-shrink: 0; display: block; fill: currentcolor; }



@media (max-width: 992px) {

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

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

}



@media (max-width: 576px) {

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

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

  .mfAccordTextWrap { max-height: none; padding-top: calc(12px * var(--gw-transform-scale, 1)); }

  .mfAccordText { font-size: calc(13px * var(--gw-transform-scale, 1)); }

  .mfAccordOverlay { opacity: 0; pointer-events: none; }

  .mfAccordCard.is-active .mfAccordOverlay { opacity: 1; pointer-events: auto; }

  .mfMoreBtn { width: 100%; max-width: calc(320px * var(--gw-transform-scale, 1)); padding: calc(14px * var(--gw-transform-scale, 1)) calc(24px * var(--gw-transform-scale, 1)); }

}