.sports-banner { background: #000; }
.sports-banner .swiper-slide { height: clamp(480px, 36.46vw, 700px); background: #000; }
.sports-banner .swiper-slide .clip-banner-c { display: block; position: relative; height: 100%; }
.sports-banner .swiper-slide .clip-banner-c > .img.ratio16x9 {
    position: absolute; display: block; left: 22%; right: 0; top: 0; bottom: 0;
    width: 78%; height: 100%; overflow: hidden;
}
.sports-banner .clip-banner-c > .img > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    object-position: center;
}
.sports-banner .swiper-slide .clip-banner-c > .img:before {
    content: ''; margin: 0; position: absolute; inset: 0; width: 100%; z-index: 1;
    background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.45) 12%, rgba(0,0,0,.08) 32%, rgba(0,0,0,.25) 100%);
    pointer-events: none;
}
.sports-banner .swiper-slide .clip-banner-c > .img:after { content: none; }
.sports-banner .swiper-slide .clip-banner-c .info {
    top: 50%; left: 4.17%; transform: translateY(-50%); width: 30%; max-width: 580px;
    display: block; z-index: 2;
}
.sports-banner .swiper-slide .clip-banner-c .info > h3,
.sports-banner .swiper-slide .clip-banner-c .info > h4 {
    color: #fff; font-size: clamp(20px, 1.45vw, 28px); font-weight: 700; line-height: 1.35;
    text-transform: none; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
}
.sports-banner .swiper-slide .clip-banner-c .info > h4 { font-size: 18px; }
.sports-banner .swiper-slide .clip-banner-c .info > .desc {
    color: #ddd; font-size: 16px; line-height: 1.5; max-height: 120px;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.sports-banner-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 16px; }
.sports-banner .sports-banner-actions > .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: 190px; max-width: 100%; height: 48px; box-sizing: border-box;
    padding: 0 12px; margin: 0; line-height: 1; border-radius: 4px;
}
.sports-banner .sports-banner-actions .clip-btn-2 {
    background: rgba(255,255,255,.85); border: 0; border-radius: 4px;
    color: #171717; font-weight: 700;
}
.sports-banner .sports-banner-actions .clip-btn-2:hover { background: #fff; }
.sports-banner .sports-banner-actions > .btn { gap: 10px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.sports-banner .banner-action-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sports-banner .banner-action-icon {
    display: inline-block; flex: 0 0 32px; width: 32px; height: 32px;
    background-position: center; background-size: contain; background-repeat: no-repeat;
}
.sports-banner .banner-play-icon { background-image: url('../img/icon/icon-play.png'); }
.sports-banner .banner-list-icon { background-image: url('../img/icon/icon-add.png'); }
.sports-banner .sports-banner-actions .favorite_btn {
    background: transparent; border: 1px solid #888; color: #fff;
    transition: background-color .15s, border-color .15s;
}
.sports-banner .sports-banner-actions .favorite_btn.clip-icon-check {
    background: #ff5b00; border-color: #ff5b00;
}
.sports-banner .favorite_btn.clip-icon-check .banner-list-icon { background-image: url('../img/icon/icon-v.png'); }
.sports-banner .sports-banner-actions .favorite_btn:hover,
.sports-banner .sports-banner-actions .favorite_btn:focus-visible {
    background: #888; border-color: #888;
}
.sports-banner .sports-banner-actions .favorite_btn:before,
.sports-banner .sports-banner-actions .favorite_btn:after { content: none; }
.sports-banner .sports-banner-actions .favorite_btn.clip-icon-check:hover,
.sports-banner .sports-banner-actions .favorite_btn.clip-icon-check:focus-visible {
    background: #e95200; border-color: #e95200;
}
.sports-banner .swiper-pagination {
    left: auto; right: 12%; bottom: 54px; width: auto; padding: 0;
    display: flex; align-items: center; gap: 10px;
}
.sports-banner .swiper-pagination .swiper-pagination-bullet {
    width: 8px; height: 8px; margin: 0; border: 0; border-radius: 8px;
    background: #fff; opacity: .4;
}
.sports-banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 16px; border: 0; background: #fff; opacity: 1;
}
.sports-banner .swiper-button-prev, .sports-banner .swiper-button-next {
    top: auto; bottom: 40px; margin: 0; width: 40px; height: 40px;
    border: 2px solid #fff; border-radius: 50%; background: transparent; z-index: 12;
}
.sports-banner .swiper-button-prev { left: auto; right: calc(4.17% + 48px); }
.sports-banner .swiper-button-next { right: 4.17%; }
.sports-banner .swiper-button-prev:after, .sports-banner .swiper-button-next:after {
    content: ''; position: absolute; width: 12px; height: 12px; top: 12px;
    border-top: 2px solid #fff; border-right: 2px solid #fff;
}
.sports-banner .swiper-button-next:after { transform: rotate(45deg); left: 10px; }
.sports-banner .swiper-button-prev:after { transform: rotate(-135deg); left: 14px; }
@media (max-width: 767px) {
    .sports-banner .swiper-slide { height: 560px; }
    .sports-banner .swiper-slide .clip-banner-c > .img.ratio16x9 { left: 0; width: 100%; }
    .sports-banner .swiper-slide .clip-banner-c > .img:before { background: linear-gradient(0deg, #000 0%, rgba(0,0,0,.8) 35%, rgba(0,0,0,.15) 100%); }
    .sports-banner .swiper-slide .clip-banner-c .info { top: auto; bottom: 100px; transform: none; width: 90%; max-width: none; left: 5%; }
    .sports-banner .swiper-slide .clip-banner-c .info > .desc { -webkit-line-clamp: 3; max-height: 72px; }
    .sports-banner .swiper-pagination { left: 5%; right: auto; max-width: 60%; flex-wrap: wrap; }
}