#motto {
    width: 100%;
    height: 300px;
    position: absolute;
    top: 50px;
    z-index: 10; /* 确保它在其他元素之上 */
    pointer-events: none; /* 不接收鼠标事件 */
}

.scroll-container {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.scroll-text {
    position: absolute;
    width: fit-content;
    white-space: nowrap;
    opacity: 0; /* 初始时隐藏 */
    transition: opacity 0.5s; /* 设置透明度变化的过渡效果 */
}

#st1 {
    top: 65px;
    animation: scrollLeft 25s linear infinite;
    animation-delay: 0s; /* 不延迟 */
}
@media (max-width: 768px) {
    #st1 {
        top: 10px;
        animation: scrollLeft 20s linear infinite;
    }
}
#st2 {
    top: 60px;
    animation: scrollLeft 20s linear infinite;
    animation-delay: 5s; /* 延迟5秒 */
}

#st3 {
    top: 100px;
    animation: scrollLeft 20s linear infinite;
    animation-delay: 10s; /* 延迟10秒 */
}

#st4 {
    top: 20px;
    animation: scrollLeft 20s linear infinite;
    animation-delay: 15s; /* 延迟15秒 */
}

@keyframes scrollLeft {
    from {
        left: 100%;
        opacity: 1; /* 开始时显示 */
    }
    to {
        left: -100%;
        opacity: 1; /* 滚动过程中保持显示 */
    }
}