/**
 * Responsive homepage slider layout.
 *
 * Loaded after the legacy responsive stylesheet so the slider does not rely
 * on fixed heights or negative offsets at individual breakpoints.
 */
.banner .carousel-inner,
.banner .carousel-item {
    height: auto !important;
}

.banner .carousel-item {
    position: relative;
}

.banner .ban_img {
    display: block;
    width: 100vw !important;
    max-width: 100%;
    height: auto !important;
}

.banner .banner_text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1.5rem;
    pointer-events: none;
}

.banner .carousel-caption {
    position: static !important;
    top: auto !important;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(52rem, calc(100% - 3rem)) !important;
    margin: 0;
    padding: 1.5rem;
    color: #fff;
    text-align: left;
    background: rgba(0, 3, 27, 0.92);
    pointer-events: auto;
}

.banner .banner_next_prev {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    left: auto;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    width: auto;
    max-width: none;
    padding: 0;
}

.banner .carousel-control-prev,
.banner .carousel-control-pause,
.banner .carousel-control-next {
    position: static !important;
    inset: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.125rem;
    height: 3.125rem;
    margin: 0 0 0 0.5rem;
    opacity: 1;
}

@media only screen and (max-width: 767px) {
    .banner .banner_text {
        position: relative;
        display: block;
        padding: 0;
    }

    .banner .carousel-caption {
        width: 100% !important;
        padding: 1.5rem 1.5rem 6rem !important;
    }

    .banner .banner_news_title {
        font-size: 1.563rem !important;
        line-height: 2.125rem !important;
    }

    .banner .banner_news_disc {
        margin-bottom: 1.5rem;
    }

    .banner .banner_next_prev {
        right: 1.5rem !important;
        bottom: 1.5rem !important;
        left: auto !important;
    }
}
