@charset "utf-8";



.yfAbout20260630 { width: 100%; padding: 80px 0px; box-sizing: border-box; background-color: rgb(248, 251, 255); font-family: system-ui, -apple-system, sans-serif; }



.yfAboutInner { max-width: 1400px; margin: 0px auto; padding: 0px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }



.yfImageWrap { position: relative; }



.yfMainImg { width: 100%; border-radius: 24px; overflow: hidden; box-shadow: rgba(20, 60, 120, 0.06) 0px 12px 36px; }



.yfMainImg img { width: 100%; display: block; }



.yfYearBadge { position: absolute; left: -16px; top: 40px; background-color: rgb(45, 141, 240); color: rgb(255, 255, 255); padding: 24px 22px; border-radius: 16px; box-shadow: rgba(45, 141, 240, 0.22) 0px 6px 18px; }



.yfBadgeNum { font-size: 52px; font-weight: 700; line-height: 1; }



.yfBadgeText { font-size: 18px; margin-top: 8px; }



.yfSubImg { position: absolute; right: 0px; bottom: -36px; width: 42%; border: 6px solid rgb(255, 255, 255); border-radius: 20px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 30px; }



.yfSubImg img { width: 100%; display: block; }



.yfTextWrap .tag-label { display: inline-block; background-color: rgba(45, 141, 240, 0.1); color: rgb(45, 141, 240); font-size: 16px; padding: 8px 22px; border-radius: 999px; margin-bottom: 24px; }



.yfTextWrap h2 { font-size: 48px; font-weight: 700; color: rgb(26, 26, 46); line-height: 1.22; margin: 0px 0px 26px; }



.yfTextWrap h2 .blue-word { color: rgb(45, 141, 240); }



.yfTextDesc { font-size: 17px; color: rgb(84, 89, 104); line-height: 1.82; margin-bottom: 36px; }



.yfFeatureGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; margin-bottom: 44px; }



.yfFeatureItem { display: flex; align-items: center; gap: 10px; font-size: 16px; color: rgb(44, 44, 60); }



.check-circle { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgb(198, 224, 255); color: rgb(45, 141, 240); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }



.yfBtn { display: inline-flex; align-items: center; gap: 8px; padding: 18px 44px; background-color: rgb(45, 141, 240); color: rgb(255, 255, 255); font-size: 18px; font-weight: 500; border-radius: 999px; text-decoration: none; box-shadow: rgba(45, 141, 240, 0.2) 0px 6px 22px; transition: 0.3s; }



.yfBtn:hover { background-color: rgb(26, 125, 224); transform: translateY(-3px); }



@media (max-width: 992px) {

  .yfAboutInner { grid-template-columns: 1fr; gap: 50px; }

  .yfTextWrap h2 { font-size: 34px; }

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

  .yfYearBadge { position: relative; left: 0px; display: inline-block; margin-bottom: 16px; }

  .yfSubImg { position: relative; bottom: 0px; right: 0px; width: 100%; margin-top: 20px; }

}