.list>* {
    margin-top: 50px;
}

/* 弹幕显示区域 */
.barrage-box {
    position: relative;
    height: 150px;
    /* overflow: hidden; */
    overflow-x: hidden; /* 水平方向隐藏 */
    overflow-y: visible;
    /* margin-top: 50px; */
}

/* 每条弹幕样式 */
.dm {
    position: absolute;
    white-space: nowrap;
    font-size: 20px;
    animation: move 9s linear forwards;
    border-radius: 20px 20px 6px 20px;     /* 你指定的不规则圆角 */
    border: 3px solid transparent;         /* 用透明边框占位 */
    background:
        linear-gradient(#fff,#fff) padding-box,        /* 内容区背景（黑） */
        linear-gradient(270deg, #FFD77A 0%, #1A7E84 100%) border-box; /* 渐变边框 */
    padding: 12px 36px;
}

@keyframes move {
    from {
        left: 100%;
    }

    to {
        left: -500px;
    }
}

@media (max-width: 768px) {
    .list>* {
        padding: 0 5%;
        margin-top: 20px;
    }
    .dm {
        font-size: 16px;
        padding: 7px 12px;
        animation: move 4s linear forwards;
    }

    @keyframes move {
    from {
            left: 100%;
        }

        to {
            left: -300px;
        }
    }
}