.section-slideshow .slideshow {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.section-slideshow .page-width {
    padding-inline: 0;
    padding-bottom: 20px;
}

.section-slideshow .slideshow .banner {
    margin-inline-end: 0;
    max-inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.section-slideshow .slideshow-controller {
    block-size: 100%;
    padding: var(--page-padding)
}

.section-slideshow .slideshow-controller .slideshow-content {
    padding: 0 !important
}

.section-slideshow .slideshow-controller .slideshow-content .slideshow-words .slideshow-word .banner__box {
    max-inline-size: -moz-fit-content;
    max-inline-size: fit-content;
    min-inline-size: auto
}

.section-slideshow .slideshow-controller .slideshow-nav {
    inline-size: 100%;
    inset-block-end: 0;
    inset-inline-start: 0;
    padding: var(--page-padding);
    position: absolute
}

.section-slideshow .slideshow-controller .slideshow-nav .slideshow-dots {
    padding-block: 20px;
    padding-inline: var(--page-padding)
}

.section-slideshow[allow-transparent-header] .slideshow-controller {
    block-size: calc(100% - var(--header-height, 0px))
}

/* 优化：确保过渡动画使用不触发布局偏移的属性 */
.slideshow-nav-timer-bar-container .slideshow-nav-timer-bar-item {
    align-items: center;
    background: none;
    block-size: 24px;
    border: none;
    cursor: pointer;
    display: flex;
    flex: none;
    gap: 1rem;
    opacity: .6;
    padding: 0;
    text-align: start;
    transition: opacity .3s ease
}

.slideshow-nav-timer-bar-container .slideshow-nav-timer-bar-progress-fill {
    background-color: #fff;
    block-size: 0;
    display: block !important;
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    position: absolute;
    transition: transform .1s linear
}

@media (max-width: 767px) {
    .section-slideshow .slideshow-controller {
        padding: 10vw
    }

    .section-slideshow .slideshow-controller .slideshow-nav {
        padding: 0
    }
    
    /* 优化：移动端调整过渡属性 */
    .slideshow-nav-timer-bar-container .slideshow-nav-timer-bar-progress-fill {
        block-size: 100%;
        inline-size: 0;
        inset-block-start: 0;
        inset-inline-start: 0;
        transition: transform .1s linear
    }
}

@media screen and (min-width: 1536px) {
    .section-slideshow .slideshow-controller .slideshow-nav {
        padding-block-end: var(--grid-gap)
    }
}

.slideshow-nav-timer-bar-container {
    z-index: 10
}

.slideshow-nav-timer-bar-container .slideshow-nav-timer-bar-content {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    gap: 1.5rem
}

@media (max-width: 767px) {
    .slideshow-nav-timer-bar-container .slideshow-nav-timer-bar-content {
        justify-content: center;
        margin-block-end: 8vw;
        margin-inline-start: 0
    }
}

.slideshow-nav-timer-bar-container .slideshow-nav-timer-bar-labels {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: space-between
}

@media (max-width: 767px) {
    .slideshow-nav-timer-bar-container .slideshow-nav-timer-bar-labels {
        flex-direction: row;
        gap: .5rem
    }
}

.slideshow-nav-timer-bar-container .slideshow-nav-timer-bar-item:hover,
.slideshow-nav-timer-bar-container .slideshow-nav-timer-bar-item[aria-current=true] {
    opacity: 1
}

.slideshow-nav-timer-bar-container .slideshow-nav-timer-bar-progress-single {
    background-color: hsla(0, 0%, 100%, .3);
    border-radius: 2px;
    inline-size: 2px;
    position: relative
}

@media (max-width: 767px) {
    .slideshow-nav-timer-bar-container .slideshow-nav-timer-bar-progress-single {
        block-size: 2px;
        inline-size: 100%;
        inset-block-start: 0;
        position: absolute
    }
}

@media (max-width: 767px) {
    .slideshow-nav-timer-bar-container .slideshow-nav-timer-bar-progress-fill {
        block-size: 100%;
        inline-size: 0;
        inset-block-start: 0 !important;
        inset-inline-start: 0;
        transition: transform .1s linear
    }
}

.slideshow-nav-timer-bar-container .slideshow-nav-timer-bar-progress-multiple {
    background-color: hsla(0, 0%, 100%, .3);
    block-size: 24px;
    border-radius: 2px;
    flex-shrink: 0;
    inline-size: 2px;
    margin-inline-end: 10px;
    overflow: hidden;
    position: relative
}

@media (max-width: 767px) {
    .slideshow-nav-timer-bar-container .slideshow-nav-timer-bar-progress-multiple {
        block-size: 3px;
        inline-size: 100%;
        margin-inline-end: 0
    }
}

.slideshow-nav-timer-bar-container .slideshow-nav-timer-bar-progress-multiple .slideshow-nav-timer-bar-progress-fill {
    block-size: 0;
    inline-size: 100%;
    inset-block-end: auto;
    inset-block-start: 0;
    transition: transform .1s linear
}

@media (max-width: 767px) {
    .slideshow-nav-timer-bar-container .slideshow-nav-timer-bar-progress-multiple .slideshow-nav-timer-bar-progress-fill {
        block-size: 100%;
        inline-size: 0;
        inset-block-end: auto;
        inset-block-start: 0;
        inset-inline-start: 0;
        transition: transform .1s linear
    }
}

.slideshow-nav-timer-bar-container[data-style=multiple] .slideshow-nav-timer-bar-label {
    display: block
}

@media (max-width: 767px) {
    .slideshow-nav-timer-bar-container[data-style=multiple] .slideshow-nav-timer-bar-label {
        display: none
    }
}

.slideshow-nav-timer-bar-container[data-style=multiple] .slideshow-nav-timer-bar-item {
    inline-size: 10vw;
    opacity: .5
}

.slideshow-nav-timer-bar-container[data-style=multiple] .slideshow-nav-timer-bar-item .slideshow-nav-timer-bar-progress-multiple {
    opacity: 0;
    transition: opacity .3s ease
}

@media (max-width: 767px) {
    .slideshow-nav-timer-bar-container[data-style=multiple] .slideshow-nav-timer-bar-item .slideshow-nav-timer-bar-progress-multiple {
        opacity: 1
    }
}

.slideshow-nav-timer-bar-container[data-style=multiple] .slideshow-nav-timer-bar-item[aria-current=true],
.slideshow-nav-timer-bar-container[data-style=multiple] .slideshow-nav-timer-bar-item[aria-current=true] .slideshow-nav-timer-bar-progress-multiple {
    opacity: 1
}

@media (max-width: 767px) {
    .slideshow-nav-timer-bar-container[data-style=single] .slideshow-nav-timer-bar-content {
        inline-size: -moz-fit-content;
        inline-size: fit-content;
        margin-inline-end: auto;
        margin-inline-start: auto;
        padding-block-start: 10px;
        position: relative
    }

    .slideshow-nav-timer-bar-container[data-style=single] .slideshow-nav-timer-bar-labels {
        inline-size: auto
    }
}

.slideshow-nav-timer-bar-container[data-style=single] .slideshow-nav-timer-bar-label {
    display: block
}

@media (max-width: 767px) {
    .slideshow-nav-timer-bar-container[data-style=single] .slideshow-nav-timer-bar-label {
        display: none
    }

    .slideshow-nav-timer-bar-container[data-style=single] .slideshow-nav-timer-bar-item {
        flex: none;
        inline-size: 10vw
    }
}

.slideshow-nav-timer-bar-container .slideshow-nav-timer-bar-label {
    color: #fff;
    font-size: 14px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    transition: font-weight .3s;
    white-space: nowrap
}

.align-content-start {
    align-content: start
}

.align-content-center {
    align-content: center
}

.align-content-end {
    align-content: end
}

.justify-content-start {
    justify-content: start
}

.justify-content-center {
    justify-content: center
}

.justify-content-end {
    justify-content: end
}

.my-top_left {
    align-items: flex-start;
    justify-content: flex-start
}

.my-top_center {
    align-items: flex-start;
    justify-content: center
}

.my-top_right {
    align-items: flex-start;
    justify-content: flex-end
}

.my-middle_left {
    align-items: center;
    justify-content: flex-start
}

.my-middle_center {
    align-items: center;
    justify-content: center
}

.my-middle_right {
    align-items: center;
    justify-content: flex-end
}

.my-bottom_left {
    align-items: flex-end;
    justify-content: flex-start
}

.my-bottom_center {
    align-items: flex-end;
    justify-content: center
}

.my-bottom_right {
    align-items: flex-end;
    justify-content: flex-end
}

.my-top_left-text_left {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: start
}

.my-top_center-text_center {
    align-items: flex-start;
    justify-content: center;
    text-align: center
}

.my-top_right-text_right {
    align-items: flex-start;
    justify-content: flex-end;
    text-align: end
}

.my-middle_left-text_left {
    align-items: center;
    justify-content: flex-start;
    text-align: start
}

.my-middle_center-text_center {
    align-items: center;
    justify-content: center;
    text-align: center
}

.my-middle_right-text_right {
    align-items: center;
    justify-content: flex-end;
    text-align: end
}

.my-bottom_left-text_left {
    align-items: flex-end;
    justify-content: flex-start;
    text-align: start
}

.my-bottom_center-text_center {
    align-items: flex-end;
    justify-content: center;
    text-align: center
}

.my-bottom_right-text_right {
    align-items: flex-end;
    justify-content: flex-end;
    text-align: end
}

@media (min-width: 768px) {
    .md\:align-self-start {
        align-self: start
    }

    .md\:align-self-center {
        align-self: center
    }

    .md\:align-self-end {
        align-self: end
    }

    .md\:justify-self-start {
        justify-self: start
    }

    .md\:justify-self-center {
        justify-self: center
    }

    .md\:justify-self-end {
        justify-self: end
    }

    .md\:align-content-start {
        align-content: start
    }

    .md\:align-content-center {
        align-content: center
    }

    .md\:align-content-end {
        align-content: end
    }

    .md\:justify-content-start {
        justify-content: start
    }

    .md\:justify-content-center {
        justify-content: center
    }

    .md\:justify-content-end {
        justify-content: end
    }

    .md\:my-top_left {
        align-items: flex-start;
        justify-content: flex-start
    }

    .md\:my-top_center {
        align-items: flex-start;
        justify-content: center
    }

    .md\:my-top_right {
        align-items: flex-start;
        justify-content: flex-end
    }

    .md\:my-middle_left {
        align-items: center;
        justify-content: flex-start
    }

    .md\:my-middle_center {
        align-items: center;
        justify-content: center
    }

    .md\:my-middle_right {
        align-items: center;
        justify-content: flex-end
    }

    .md\:my-bottom_left {
        align-items: flex-end;
        justify-content: flex-start
    }

    .md\:my-bottom_center {
        align-items: flex-end;
        justify-content: center
    }

    .md\:my-bottom_right {
        align-items: flex-end;
        justify-content: flex-end
    }

    .md\:my-top_left-text_left {
        align-items: flex-start;
        justify-content: flex-start;
        text-align: start
    }

    .md\:my-top_center-text_center {
        align-items: flex-start;
        justify-content: center;
        text-align: center
    }

    .md\:my-top_right-text_right {
        align-items: flex-start;
        justify-content: flex-end;
        text-align: end
    }

    .md\:my-middle_left-text_left {
        align-items: center;
        justify-content: flex-start;
        text-align: start
    }

    .md\:my-middle_center-text_center {
        align-items: center;
        justify-content: center;
        text-align: center
    }

    .md\:my-middle_right-text_right {
        align-items: center;
        justify-content: flex-end;
        text-align: end
    }

    .md\:my-bottom_left-text_left {
        align-items: flex-end;
        justify-content: flex-start;
        text-align: start
    }

    .md\:my-bottom_center-text_center {
        align-items: flex-end;
        justify-content: center;
        text-align: center
    }

    .md\:my-bottom_right-text_right {
        align-items: flex-end;
        justify-content: flex-end;
        text-align: end
    }
}

.text-left {
    text-align: start
}

.text-center {
    text-align: center
}

.text-right {
    text-align: end
}

@media (min-width: 768px) {
    .md\:text-left {
        text-align: start
    }

    .md\:text-center {
        text-align: center
    }

    .md\:text-right {
        text-align: end
    }
}