.promo-slider {
    width: 100%;
    margin: 0 auto 20px auto
}

.promo-slider #ez-toc-container {
    display: none !important;
    visibility: hidden !important
}

.best-promo-item {
    width: 578px;
    height: 272px;
    border-radius: 12px;
    overflow: hidden;
    position: relative
}

.logo__promo-recommend-item,
.logo__promo-recommend-item>a {
    width: 100%;
    height: 100%;
    display: flex
}

.logo__promo-recommend-item>a img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

.button__promo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing: .25px;
    position: absolute;
    bottom: 24px;
    left: 36px;
    z-index: 5;
    padding: 14px 16px;
    color: var(--black);
    -webkit-text-decoration: none;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 0 1px 0 #b3b3b3, 0 2px 2px #0000004d, 0 3px 6px #00000080;
    transition: box-shadow var(--transition_main)
}

.button__promo-item:hover {
    box-shadow: 0 0 12px var(--white)
}

.button__promo-item>a {
    color: inherit !important;
    text-decoration: none
}

.promo-slider .swiper-button-next,
.promo-slider .swiper-button-prev {
    background: #000;
    width: 34px;
    height: 34px;
    border-radius: 50%
}

.promo-slider .swiper-button-prev,
.promo-slider .swiper-button-next {
    opacity: 0;
    transition: var(--transition_main)
}

.promo-slider:hover .swiper-button-prev,
.promo-slider:hover .swiper-button-next {
    opacity: 1
}

.promo-slider .swiper-button-prev:after,
.promo-slider .swiper-button-next:after {
    font-size: 12px;
    color: var(--text-default);
    transition: var(--transition_main)
}

.promo-slider .swiper-button-prev:hover:after,
.promo-slider .swiper-button-next:hover:after {
    font-size: 12px;
    color: var(--DBrandDefault)
}

.promo-slider .swiper-button-prev {
    left: -3px;
    right: auto
}

.promo-slider .swiper-button-next {
    right: -3px;
    left: auto
}

.promo-slider .best-promo-title {
    width: 100%;
    height: 70%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    padding: 24px 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    background: linear-gradient(180deg, rgb(0 0 0 / 57%) 0%, rgb(0 0 0 / 40%) 61%, rgba(0, 212, 255, 0) 100%)
}

.promo-slider .best-promo-title .title-best-promo {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 56px;
    line-height: 100%;
    letter-spacing: -.5px;
    color: var(--white);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    flex-shrink: 0
}

.promo-slider .best-promo-title .title-best-promo p {
    font-size: inherit
}

.promo-slider .best-promo-title .title-best-descript {
    font-size: 18px;
    color: var(--white);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    flex-shrink: 0
}

.swiper #ez-toc-container {
    display: none !important
}

@media only screen and (max-width:1520px) {
    .promo-slider {
        margin: 0vw auto 1.316vw auto
    }

    .best-promo-item {
        width: 38.026vw;
        height: 17.895vw;
        border-radius: .789vw
    }

    .button__promo-item {
        font-size: .921vw;
        line-height: 1.053vw;
        letter-spacing: .016vw;
        bottom: 1.579vw;
        left: 2.368vw;
        padding: .921vw 1.053vw;
        border-radius: .329vw;
        box-shadow: 0 .066vw 0 #b3b3b3, 0 .132vw .132vw #0000004d, 0 .197vw .395vw #00000080
    }

    .button__promo-item:hover {
        box-shadow: 0 0 .789vw var(--white)
    }

    .promo-slider .swiper-button-next,
    .promo-slider .swiper-button-prev {
        width: 2.368vw;
        height: 2.368vw
    }

    .promo-slider .swiper-button-prev:after,
    .promo-slider .swiper-button-next:after {
        font-size: .789vw
    }

    .promo-slider .swiper-button-prev:hover:after,
    .promo-slider .swiper-button-next:hover:after {
        font-size: .789vw
    }

    .promo-slider .best-promo-title {
        padding: 1.579vw 2.368vw;
        gap: .789vw
    }

    .promo-slider .best-promo-title .title-best-promo {
        font-size: 3.684vw;
        letter-spacing: -.033vw
    }

    .promo-slider .best-promo-title .title-best-descript {
        font-size: 1.184vw
    }
}

@media only screen and (max-width:1120px) {
    .promo-slider {
        margin: 0vw auto 1.953vw auto
    }

    .best-promo-item {
        width: 56.445vw;
        height: 23.563vw;
        border-radius: 1.171vw
    }

    .button__promo-item {
        font-size: 1.563vw;
        line-height: 1.563vw;
        letter-spacing: .024vw;
        bottom: 2.344vw;
        left: 3.516vw;
        padding: 1.367vw 1.563vw;
        border-radius: .488vw;
        box-shadow: 0 .098vw 0 #b3b3b3, 0 .196vw .196vw #0000004d, 0 .292vw .586vw #00000080
    }

    .button__promo-item:hover {
        box-shadow: 0 0 1.171vw var(--white)
    }

    .promo-slider .swiper-button-next,
    .promo-slider .swiper-button-prev {
        width: 3.516vw;
        height: 3.516vw
    }

    .promo-slider .swiper-button-prev:after,
    .promo-slider .swiper-button-next:after,
    .promo-slider .swiper-button-prev:hover:after,
    .promo-slider .swiper-button-next:hover:after {
        font-size: 1.172vw
    }

    .promo-slider .best-promo-title {
        padding: 2.344vw 3.516vw;
        gap: 1.171vw;
        background: linear-gradient(180deg, rgb(0 0 0 / 64%) 0%, rgb(0 0 0 / 46%) 61%, rgb(0 212 255 / 0%) 100%)
    }

    .promo-slider .best-promo-title .title-best-promo {
        font-size: 4.468vw;
        letter-spacing: -.049vw
    }

    .promo-slider .best-promo-title .title-best-descript {
        font-size: 1.758vw
    }
}

@media only screen and (max-width:900px) {
    .promo-slider {
        margin: 0vw auto 2.604vw auto
    }

    .best-promo-item {
        width: 75.26vw;
        height: 41.021vw;
        border-radius: 1.561vw
    }

    .button__promo-item {
        font-size: 2.084vw;
        line-height: 2.084vw;
        letter-spacing: .032vw;
        bottom: 3.125vw;
        left: 2.084vw;
        padding: 1.823vw 2.084vw;
        border-radius: .651vw;
        box-shadow: 0 .131vw 0 #b3b3b3, 0 .261vw .261vw #0000004d, 0 .389vw .781vw #00000080
    }

    .button__promo-item:hover {
        box-shadow: 0 0 1.561vw var(--white)
    }

    .promo-slider .swiper-button-next,
    .promo-slider .swiper-button-prev {
        display: none
    }

    .promo-slider .best-promo-title {
        padding: 3.125vw 2.084vw;
        gap: 1.561vw
    }

    .promo-slider .best-promo-title .title-best-promo {
        font-size: 4.957vw;
        letter-spacing: -.065vw
    }

    .promo-slider .best-promo-title .title-best-descript {
        font-size: 2.044vw
    }
}

@media only screen and (max-width:500px) {
    .promo-slider {
        margin: 0vw auto 5.333vw auto
    }

    .best-promo-item {
        width: 100%;
        height: 56.342vw;
        border-radius: 3.197vw
    }

    .button__promo-item {
        font-size: 4.268vw;
        line-height: 4.268vw;
        letter-spacing: .066vw;
        bottom: 6.4vw;
        left: 4.268vw;
        padding: 3.734vw 4.268vw;
        border-radius: 1.333vw;
        box-shadow: 0 .268vw 0 #b3b3b3, 0 .534vw .534vw #0000004d, 0 .797vw 1.599vw #00000080
    }

    .button__promo-item:hover {
        box-shadow: 0 0 3.197vw var(--white)
    }

    .promo-slider .best-promo-title {
        padding: 6.4vw 4.268vw;
        gap: 3.197vw
    }

    .promo-slider .best-promo-title .title-best-promo {
        font-size: 9.352vw;
        letter-spacing: -.133vw
    }

    .promo-slider .best-promo-title .title-best-descript {
        font-size: 4.186vw
    }
}