:root {
    /* 轮播的个数 */
    --c--: 5;
    /* 单个轮播元素的高度 */
    --h--: 30;
    /* 单次动画时长 */
    --speed--: 1.5s;
    /* 图片轮播的个数 */
    --ic--: 5;
    /* 单个图片元素的宽度 */
    --iw--: 450;
    /* 单次图片轮播动画时长 */
    --iSpeed--: 2s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    height: 100%;
}

.flex-center {
    display: flex;
    height: 100%;
    justify-content: center;
    flex-direction: column;
}

.cl-title {
    color: #f0600d;
    text-align: center;
    margin: 15px;
}

/* 文字轮播 */
.cl-container {
    width: fit-content;
    height: calc(var(--h--) * 1px);
    overflow: hidden;
    text-align: center;
    margin: auto;
}

.cl-text {
    display: flex;
    flex-direction: column;
    animation: verMove calc(var(--speed--) * var(--c--)) steps(var(--c--)) infinite;
}

.cl-text-item {
    width: 100%;
    height: 30px;
    font: 18px "幼圆", "楷体";
    color: rgba(0, 0, 0, .85);
    animation: itemVerMove calc(var(--speed--)) infinite;
}

@keyframes verMove {
    0% {
        transform: translate(0);
    }

    100% {
        transform: translate(0, calc(var(--c--) * var(--h--) * -1px));
    }
}

@keyframes itemVerMove {
    0% {
        transform: translate(0);
    }

    80%,
    100% {
        transform: translate(0, calc(var(--h--) * -1px));
    }
}
/* 图片轮播 */

.cl-image-container {
    width: calc(var(--iw--) * 1px);
    height: 300px;
    margin: auto;
    overflow: hidden;
    border: 1px solid #f56e30;
    background-color: #cf3405;
    border-radius: 4px;
}

.cl-image {
    display: flex;
    flex-wrap: nowrap;
    width: calc(var(--iw--) * 1px);
}
.cl-image-item {
    white-space: nowrap;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    animation: horMove calc(var(--iSpeed--) * var(--ic--)) steps(var(--ic--)) infinite;
}
.cl-image-item-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    animation: horItemMove calc(var(--iSpeed--)) infinite;
}

@keyframes horMove {
    0% {
        transform: translate(0,0);
    }

    100% {
        transform: translate(calc(var(--ic--) * var(--iw--) * -1px),0);
    }
}

@keyframes horItemMove {
    0% {
        transform: translate(0);
    }

    80%,
    100% {
        transform: translate(calc(var(--iw--) * -1px),0);
    }
}