@charset "utf-8";



.yfBanner20260724 { --banner-height: calc(500 * var(--gw-transform-scale, 1)); --overlay-color: rgba(0, 0, 0, 0.25); --title-color: #ffffff; --subtitle-color: rgba(255, 255, 255, 0.9); --btn-bg: var(--gw-theme-color, #2D8DF0); --btn-color: #ffffff; --pagination-color: rgba(255, 255, 255, 0.4); --pagination-active: #ffffff; --nav-btn-bg: rgba(255, 255, 255, 0.15); --nav-btn-hover: rgba(255, 255, 255, 0.35); width: 100%; position: relative; overflow: hidden; }



.yfBanner20260724 .yf-banner-swiper { width: 100%; height: var(--banner-height); }



.yfBanner20260724 .yf-banner-swiper .swiper-slide { position: relative; overflow: hidden; }



.yfBanner20260724 .yf-banner-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }



.yfBanner20260724 .yf-slide-overlay { position: absolute; inset: 0px; background: var(--overlay-color); z-index: 1; }



.yfBanner20260724 .yf-slide-content { position: absolute; inset: 0px; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 calc(24 * var(--gw-transform-scale, 1)); opacity: 0; pointer-events: none; transition: opacity 0.3s; }



.yfBanner20260724 .swiper-slide-active .yf-slide-content { opacity: 1; pointer-events: auto; }



.yfBanner20260724 .yf-slide-title { font-size: calc(48 * var(--gw-transform-scale, 1)); font-weight: 700; color: var(--title-color); line-height: 1.2; margin-bottom: calc(16 * var(--gw-transform-scale, 1)); text-shadow: 0 calc(2 * var(--gw-transform-scale, 1)) calc(12 * var(--gw-transform-scale, 1)) rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(calc(30 * var(--gw-transform-scale, 1))); }



.yfBanner20260724 .yf-slide-subtitle { font-size: calc(20 * var(--gw-transform-scale, 1)); color: var(--subtitle-color); line-height: 1.6; max-width: calc(700 * var(--gw-transform-scale, 1)); margin-bottom: calc(32 * var(--gw-transform-scale, 1)); text-shadow: 0 calc(1 * var(--gw-transform-scale, 1)) calc(8 * var(--gw-transform-scale, 1)) rgba(0, 0, 0, 0.2); opacity: 0; transform: translateY(calc(20 * var(--gw-transform-scale, 1))); }



.yfBanner20260724 .yf-slide-btn { display: inline-flex; align-items: center; gap: calc(8 * var(--gw-transform-scale, 1)); padding: calc(14 * var(--gw-transform-scale, 1)) calc(40 * var(--gw-transform-scale, 1)); background: var(--btn-bg); color: var(--btn-color); font-size: calc(16 * var(--gw-transform-scale, 1)); font-weight: 600; border: none; border-radius: calc(999 * var(--gw-transform-scale, 1)); cursor: pointer; text-decoration: none; transition: 0.3s; opacity: 0; transform: translateY(calc(20 * var(--gw-transform-scale, 1))); }



.yfBanner20260724 .yf-slide-btn:hover { transform: translateY(calc(-2 * var(--gw-transform-scale, 1))); box-shadow: 0 calc(8 * var(--gw-transform-scale, 1)) calc(24 * var(--gw-transform-scale, 1)) rgba(45, 141, 240, 0.4); }



.yfBanner20260724 .yf-slide-btn svg { width: calc(16 * var(--gw-transform-scale, 1)); height: calc(16 * var(--gw-transform-scale, 1)); }



.yfBanner20260724 .swiper-slide-active .yf-slide-title { animation: 0.8s ease 0.2s 1 normal forwards running yfFadeUp20260724; }



.yfBanner20260724 .swiper-slide-active .yf-slide-subtitle { animation: 0.8s ease 0.4s 1 normal forwards running yfFadeUp20260724; }



.yfBanner20260724 .swiper-slide-active .yf-slide-btn { animation: 0.8s ease 0.6s 1 normal forwards running yfFadeUp20260724; }



@keyframes yfFadeUp20260724 { 

  100% { opacity: 1; transform: translateY(0px); }

}



.yfBanner20260724 .swiper-pagination-bullet { width: calc(40 * var(--gw-transform-scale, 1)); height: calc(4 * var(--gw-transform-scale, 1)); border-radius: calc(2 * var(--gw-transform-scale, 1)); background: var(--pagination-color); opacity: 1; transition: 0.3s; }



.yfBanner20260724 .swiper-pagination-bullet-active { background: var(--pagination-active); width: calc(60 * var(--gw-transform-scale, 1)); }



.yfBanner20260724 .swiper-button-next, .yfBanner20260724 .swiper-button-prev { width: calc(48 * var(--gw-transform-scale, 1)); height: calc(48 * var(--gw-transform-scale, 1)); background: var(--nav-btn-bg); border-radius: 50%; backdrop-filter: blur(8px); transition: 0.3s; }



.yfBanner20260724 .swiper-button-next:hover, .yfBanner20260724 .swiper-button-prev:hover { background: var(--nav-btn-hover); }



.yfBanner20260724 .swiper-button-next::after, .yfBanner20260724 .swiper-button-prev::after { font-size: calc(18 * var(--gw-transform-scale, 1)); color: rgb(255, 255, 255); font-weight: 700; }



@media (max-width: 1024px) {

  .yfBanner20260724 { --banner-height: calc(400 * var(--gw-transform-scale, 1)); }

  .yfBanner20260724 .yf-slide-title { font-size: calc(36 * var(--gw-transform-scale, 1)); }

  .yfBanner20260724 .yf-slide-subtitle { font-size: calc(16 * var(--gw-transform-scale, 1)); }

}



@media (max-width: 576px) {

  .yfBanner20260724 { --banner-height: calc(280 * var(--gw-transform-scale, 1)); }

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

  .yfBanner20260724 .yf-slide-subtitle { font-size: calc(14 * var(--gw-transform-scale, 1)); margin-bottom: calc(20 * var(--gw-transform-scale, 1)); }

  .yfBanner20260724 .yf-slide-btn { padding: calc(10 * var(--gw-transform-scale, 1)) calc(28 * var(--gw-transform-scale, 1)); font-size: calc(14 * var(--gw-transform-scale, 1)); }

  .yfBanner20260724 .swiper-button-next, .yfBanner20260724 .swiper-button-prev { display: none; }

}