@charset "utf-8";



.yfAbout20260723 { --theme-main: var(--gw-theme-color, #2D8DF0); --text-primary: #1a1a1a; --text-secondary: #666666; --text-muted: #999999; --bg-card: #ffffff; --border-light: #f0f0f0; --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06); --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.1); width: 100%; background: rgb(248, 250, 252); padding: calc(80px * var(--gw-transform-scale, 1)) 0; }



.yfAbout20260723 .yf-about-inner { max-width: calc(1200px * var(--gw-transform-scale, 1)); margin: 0px auto; padding: 0 calc(24px * var(--gw-transform-scale, 1)); display: flex; align-items: stretch; gap: calc(60px * var(--gw-transform-scale, 1)); }



.yfAbout20260723 .yf-about-left { flex: 0 0 calc(560px * var(--gw-transform-scale, 1)); position: relative; }



.yfAbout20260723 .yf-about-image-wrap { position: relative; border-radius: calc(16px * var(--gw-transform-scale, 1)); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow 0.4s; }



.yfAbout20260723 .yf-about-image-wrap:hover { box-shadow: var(--shadow-hover); }



.yfAbout20260723 .yf-about-image-wrap img { width: 100%; height: calc(400px * var(--gw-transform-scale, 1)); object-fit: cover; display: block; transition: transform 0.6s; }



.yfAbout20260723 .yf-about-image-wrap:hover img { transform: scale(1.03); }



.yfAbout20260723 .yf-about-stats { position: absolute; bottom: calc(-40px * var(--gw-transform-scale, 1)); left: 50%; transform: translateX(-50%); display: flex; background: var(--bg-card); border-radius: calc(12px * var(--gw-transform-scale, 1)); box-shadow: var(--shadow-card); overflow: hidden; min-width: calc(500px * var(--gw-transform-scale, 1)); z-index: 2; }



.yfAbout20260723 .yf-stat-item { flex: 1 1 0%; text-align: center; padding: calc(24px * var(--gw-transform-scale, 1)) calc(20px * var(--gw-transform-scale, 1)); position: relative; }



.yfAbout20260723 .yf-stat-item:not(:last-child)::after { content: ""; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); width: 1px; height: calc(40px * var(--gw-transform-scale, 1)); background: var(--border-light); }



.yfAbout20260723 .yf-stat-num { font-size: calc(32px * var(--gw-transform-scale, 1)); font-weight: 700; color: var(--theme-main); line-height: 1.2; margin-bottom: calc(6px * var(--gw-transform-scale, 1)); }



.yfAbout20260723 .yf-stat-label { font-size: calc(14px * var(--gw-transform-scale, 1)); color: var(--text-muted); line-height: 1.4; }



.yfAbout20260723 .yf-about-right { flex: 1 1 0%; display: flex; flex-direction: column; justify-content: center; padding-bottom: calc(40px * var(--gw-transform-scale, 1)); }



.yfAbout20260723 .yf-about-tag { display: inline-flex; align-items: center; gap: calc(6px * var(--gw-transform-scale, 1)); background: rgba(45, 141, 240, 0.1); color: var(--theme-main); font-size: calc(14px * var(--gw-transform-scale, 1)); font-weight: 500; padding: calc(6px * var(--gw-transform-scale, 1)) calc(16px * var(--gw-transform-scale, 1)); border-radius: calc(20px * var(--gw-transform-scale, 1)); margin-bottom: calc(20px * var(--gw-transform-scale, 1)); width: fit-content; }



.yfAbout20260723 .yf-about-tag::before { content: ""; width: calc(6px * var(--gw-transform-scale, 1)); height: calc(6px * var(--gw-transform-scale, 1)); background: var(--theme-main); border-radius: 50%; }



.yfAbout20260723 .yf-about-title { font-size: calc(36px * var(--gw-transform-scale, 1)); font-weight: 700; color: var(--text-primary); line-height: 1.3; margin-bottom: calc(24px * var(--gw-transform-scale, 1)); }



.yfAbout20260723 .yf-about-desc { font-size: calc(15px * var(--gw-transform-scale, 1)); color: var(--text-secondary); line-height: 1.8; margin-bottom: calc(32px * var(--gw-transform-scale, 1)); }



.yfAbout20260723 .yf-about-features { display: grid; grid-template-columns: 1fr 1fr; gap: calc(16px * var(--gw-transform-scale, 1)) calc(32px * var(--gw-transform-scale, 1)); }



.yfAbout20260723 .yf-feature-item { display: flex; align-items: center; gap: calc(10px * var(--gw-transform-scale, 1)); font-size: calc(15px * var(--gw-transform-scale, 1)); color: var(--text-primary); font-weight: 500; }



.yfAbout20260723 .yf-feature-item .yf-feature-icon { flex-shrink: 0; width: calc(20px * var(--gw-transform-scale, 1)); height: calc(20px * var(--gw-transform-scale, 1)); color: var(--theme-main); }



.yfAbout20260723 .yf-feature-item .yf-feature-icon svg { width: 100%; height: 100%; }



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

  .yfAbout20260723 .yf-about-inner { flex-direction: column; gap: calc(60px * var(--gw-transform-scale, 1)); }

  .yfAbout20260723 .yf-about-left { flex: 0 0 auto; width: 100%; max-width: calc(560px * var(--gw-transform-scale, 1)); margin: 0px auto; }

  .yfAbout20260723 .yf-about-stats { position: relative; bottom: auto; left: auto; transform: none; margin-top: calc(20px * var(--gw-transform-scale, 1)); min-width: auto; width: 100%; }

  .yfAbout20260723 .yf-about-right { padding-bottom: 0px; }

}



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

  .yfAbout20260723 { padding: calc(48px * var(--gw-transform-scale, 1)) 0; }

  .yfAbout20260723 .yf-about-inner { padding: 0 calc(16px * var(--gw-transform-scale, 1)); }

  .yfAbout20260723 .yf-about-image-wrap img { height: calc(260px * var(--gw-transform-scale, 1)); }

  .yfAbout20260723 .yf-stat-item { padding: calc(16px * var(--gw-transform-scale, 1)) calc(10px * var(--gw-transform-scale, 1)); }

  .yfAbout20260723 .yf-stat-num { font-size: calc(24px * var(--gw-transform-scale, 1)); }

  .yfAbout20260723 .yf-stat-label { font-size: calc(12px * var(--gw-transform-scale, 1)); }

  .yfAbout20260723 .yf-about-title { font-size: calc(26px * var(--gw-transform-scale, 1)); }

  .yfAbout20260723 .yf-about-desc { font-size: calc(14px * var(--gw-transform-scale, 1)); }

  .yfAbout20260723 .yf-about-features { grid-template-columns: 1fr; gap: calc(14px * var(--gw-transform-scale, 1)); }

}