.cms-page-banner {
    position: relative;

    width: 100%;
    height: 420px;

    margin: 0;

    overflow: hidden;

    background: #f7f2ee;
}

.cms-page-banner.layui-carousel {
    width: 100% !important;
}

.cms-page-banner [carousel-item],
.cms-page-banner [carousel-item] > div {
    height: 100% !important;
}

.cms-page-banner-item,
.cms-page-banner-link {
    display: block;

    width: 100%;
    height: 100%;
}

.cms-page-banner-item {
    overflow: hidden;

    background: #f7f2ee;
}

.cms-page-banner-link {
    text-decoration: none;
}

.cms-page-banner-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    user-select: none;

    -webkit-user-drag: none;
}

.cms-page-banner-placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: #9c8683;

    font-size: 13px;

    background: #f7f2ee;
}

/* 无 Banner 内页顶部留白 */
.cms-page-banner-spacer {
    width: 100%;
    height: 30px;

    background: transparent;
}

.cms-page-banner
.layui-carousel-ind {
    top: auto;

    bottom: 18px;
}

.cms-page-banner
.layui-carousel-ind ul {
    padding: 0;

    background: transparent;
}

.cms-page-banner
.layui-carousel-ind li {
    width: 18px;
    height: 3px;

    margin: 0 4px;

    border-radius: 1px;

    background:
        rgba(
            255,
            255,
            255,
            .5
        );

    transition:
        width .18s ease,
        background .18s ease;
}

.cms-page-banner
.layui-carousel-ind
li.layui-this {
    width: 30px;

    background: #ffffff;
}

.cms-page-banner
.layui-carousel-arrow {
    width: 42px;
    height: 42px;

    border-radius: 50%;

    background:
        rgba(
            15,
            23,
            42,
            .24
        );
}

@media screen and (max-width: 1400px) {

    .cms-page-banner {
        height: 390px;
    }

}

@media screen and (max-width: 1200px) {

    .cms-page-banner {
        height: 360px;
    }

}

@media screen and (max-width: 992px) {

    .cms-page-banner {
        height: 320px;
    }

    .cms-page-banner-spacer {
        height: 24px;
    }

}

@media screen and (max-width: 768px) {

    .cms-page-banner {
        height: 300px;
    }

    .cms-page-banner
    .layui-carousel-arrow {
        display: none;
    }

    .cms-page-banner
    .layui-carousel-ind {
        bottom: 14px;
    }

    .cms-page-banner
    .layui-carousel-ind li {
        width: 14px;

        margin: 0 3px;
    }

    .cms-page-banner
    .layui-carousel-ind
    li.layui-this {
        width: 24px;
    }

    .cms-page-banner-spacer {
        height: 20px;
    }

}

@media screen and (max-width: 480px) {

    .cms-page-banner {
        height: 300px;
    }

}