@charset "utf-8";

.body_index #n5022.modern-hero { --modern-hero-styles: 1; background: var(--modern-surface); border-bottom: 1px solid var(--modern-line); }
.body_index #n5022.modern-hero[hidden],
.body_index #n5022.modern-hero [hidden] { display: none !important; }
.body_index #n5022.modern-hero .floor_banner0 { max-width: 1520px; margin: 0 auto; }
.body_index #n5022.modern-hero .swiper-container { width: 100%; height: min(43.4691vw, 660.73px); overflow: hidden; background: var(--modern-surface); }
.body_index #n5022.modern-hero .banner0 { height: 100%; margin: 0; padding: 0; }
.body_index #n5022.modern-hero .swiper-slide { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.body_index #n5022.modern-hero .swiper-slide > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.body_index #n5022.modern-hero .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* A real first image remains visible while enhancement loads, or if it is absent. */
.body_index #n5022.modern-hero:not(.modern-hero-ready) .banner0 { transform: none !important; }
.body_index #n5022.modern-hero:not(.modern-hero-ready) .swiper-slide { display: none; float: none; }
.body_index #n5022.modern-hero:not(.modern-hero-ready) .swiper-slide:first-child { display: flex; }
.body_index #n5022.modern-hero .bannertext { width: calc(100% - 64px); max-width: 1240px; height: auto; max-height: calc(100% - 32px); margin: 0 auto; padding: 0; line-height: 1.6; transform: translateY(-50%); overflow: auto; overflow-wrap: anywhere; }
.body_index #n5022.modern-hero .bannertext .BannerName { font-size: clamp(18px, 2.4vw, 36px); line-height: 1.4; }
.body_index #n5022.modern-hero .bannertext .BannerDescription { margin-top: 8px; font-size: clamp(14px, 1.4vw, 20px); line-height: 1.6; }
.body_index #n5022.modern-hero .bannertext :is(.BannerName, .BannerDescription) { opacity: 1; transform: none; transition: none; }
.body_index #n5022.modern-hero :is(.modern-hero-image-loading, .modern-hero-image-failed) img { visibility: hidden; }
.body_index #n5022.modern-hero :is(.modern-hero-image-loading, .modern-hero-image-failed) .bannertext { display: none; }
.body_index #n5022.modern-hero .modern-hero-image-message { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; color: var(--modern-muted); font-size: 15px; text-align: center; pointer-events: none; }

/* Controls sit below the artwork, keeping embedded product text unobscured. */
.body_index #n5022.modern-hero .modern-hero-controls { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 4px 12px; background: #fff; }
.body_index #n5022.modern-hero .modern-hero-controls > button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--modern-muted); font-size: 24px; line-height: 1; cursor: pointer; }
.body_index #n5022.modern-hero .modern-hero-controls > .modern-hero-play { min-width: 44px; width: auto; padding: 0 8px; font-size: 12px; }
.body_index #n5022.modern-hero .modern-hero-count { flex: 0 0 auto; min-width: 44px; color: var(--modern-muted); font-size: 12px; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums; }
.body_index #n5022.modern-hero .modern-hero-pagination { position: static; display: flex; flex: 0 1 auto; align-items: center; justify-content: flex-start; gap: 4px; width: auto; max-width: 320px; height: 32px; margin: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.body_index #n5022.modern-hero .modern-hero-pagination::-webkit-scrollbar { display: none; }
.body_index #n5022.modern-hero .modern-hero-pagination .swiper-pagination-switch { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; transform: none; transition: none; }
.body_index #n5022.modern-hero .modern-hero-pagination .swiper-pagination-switch:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--modern-muted); opacity: .4; }
.body_index #n5022.modern-hero .modern-hero-pagination .swiper-active-switch:before { width: 18px; background: var(--modern-accent); opacity: 1; }
.body_index #n5022.modern-hero .modern-hero-pagination.banner_dotsquare .swiper-pagination-switch:before { width: 10px; height: 3px; border-radius: 0; }
.body_index #n5022.modern-hero .modern-hero-pagination.banner_dotsquare .swiper-active-switch:before { width: 22px; }
.body_index #n5022.modern-hero .modern-hero-controls button:hover { background: var(--modern-surface); color: var(--modern-ink); }
.body_index #n5022.modern-hero .modern-hero-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
@media screen and (max-width: 767px) {
    .body_index #n5022.modern-hero .modern-hero-pagination { display: none; }
    .body_index #n5022.modern-hero .modern-hero-controls { gap: 8px; min-height: 44px; }
    .body_index #n5022.modern-hero .modern-hero-controls > button { width: 36px; height: 36px; }
    .body_index #n5022.modern-hero .bannertext { width: calc(100% - 32px); max-height: calc(100% - 16px); }
}