.components-rejoining-animation {
    background-color: var(--mud-palette-background);
    width: 100px;
    height: 50px;
    border: none;
    border-radius: 50px 50px 0 0;
    -webkit-mask: repeating-radial-gradient(farthest-side at bottom, #0000 0, #000 0px 12%, #0000 calc(12% + 1px) 20%);
    background: radial-gradient(farthest-side at bottom, var(--mud-palette-primary) 0 95%, #0000 0) bottom/0% 0% no-repeat #ddd;
    animation: components-rejoining-animation 2s infinite steps(6);
}

@keyframes components-rejoining-animation {
    100% {
        background-size: 120% 120%;
    }
}

.jumpdiv {
    display: flex;
    margin: 10px;
    position: relative;
    -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, 0.2))
}

    .jumpdiv span {
        font-family: " Roboto", sans-serif;
        position: relative;
        display: inline-block;
        animation: animate 1.6s ease-in-out infinite;
        animation-delay: calc(.12s*var(--i))
    }

@keyframes animate {
    0% {
        transform: translateY(0px)
    }

    20% {
        transform: translateY(-6px)
    }

    40%, 100% {
        transform: translateY(0px)
    }
}

.notice {
    width: 100%;
    height: 40px;
    border: none;
    margin: 100px auto;
    overflow: hidden;
}

.notice__inner {
    animation: roll 24s linear infinite;
    margin-top: 0
}

.notice__item {
    /* 火狐 */
    -moz-user-select: none;
    /* Safari 和 欧朋 */
    -webkit-user-select: none;
    /* IE10+ and Edge */
    -ms-user-select: none;
    /* Standard syntax 标准语法(谷歌) */
    user-select: none;
    text-align: center;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes roll {
    0% {
        margin-top: 40px;
    }
    4% {
        margin-top: 0px;
    }
    12% {
        margin-top: 0px;
    }
    16% {
        margin-top: -40px;
    }
    24% {
        margin-top: -40px;
    }
    28% {
        margin-top: -80px;
    }
    36% {
        margin-top: -80px;
    }
    40% {
        margin-top: -120px;
    }
    48% {
        margin-top: -120px;
    }
    52% {
        margin-top: -160px;
    }
    60% {
        margin-top: -160px;
    }
    64% {
        margin-top: -200px;
    }
    72% {
        margin-top: -200px;
    }
    76% {
        margin-top: -240px;
    }
    84% {
        margin-top: -240px;
    }
    88% {
        margin-top: -280px;
    }
    96% {
        margin-top: -280px;
    }
    100% {
        margin-top: -320px;
    }
}
/* 隐藏滚动条的同时仍能滚动 */
.scroll-container {
    height: 100%;
    overflow: auto; /* 启用滚动功能 */
    -ms-overflow-style: none; /* 适用于 Internet Explorer 和旧版 Edge */
    scrollbar-width: none; /* 适用于 Firefox */
}
    /* Webkit 浏览器 */
    .scroll-container::-webkit-scrollbar {
        display: none; /* 隐藏滚动条 */
    }