@charset "utf-8";

body,
div,
h1,
h2,
h3,
h4,
h5,
html,
i,
iframe,
li,
p,
span,
ul {
    margin: 0;
    padding: 0
}

a,
a:active,
a:hover,
a:visited {
    text-decoration: none
}

li,
ol,
ul {
    list-style: none
}

img {
    border: 0;
    font-size: 0;
    -webkit-user-select: none;
    vertical-align: middle
}

a,
img {
    -webkit-user-drag: none
}

body {
    word-wrap: break-word;
    font-family: system-ui, Microsoft YaHei, 微软雅黑, Open Sans, calibri, Roboto, verdana, PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    user-select: none
}

*,
:after,
:before {
    box-sizing: border-box
}

::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important
}

::-webkit-resizer,
::-webkit-scrollbar {
    background: transparent
}

::-webkit-scrollbar-corner {
    background: transparent
}

::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: hsla(0, 0%, 100%, .5) !important
}

::-webkit-scrollbar-thumb:hover {
    background-color: hsla(0, 0%, 100%, .8) !important
}

@font-face {
    font-family: mfgeheinumber;
    src: url(../mfgeheinumber.b7de58c6.ttf)
}

html {
    font-size: 5.20833vw
}

body {
    min-width: 1200px;
    --design-width: 1920;
    --font-family-num: "mfgeheinumber";
    background: #070809;
    overflow-x: hidden;
    overflow-y: scroll
}

.topic-poster-list {
    --animation-duration: 18s;
    --animation-per-delay: 1.125s
}

.topic-poster-list .topic-poster-item--1 {
    animation: cardLeaveLeftTop var(--animation-duration) linear infinite
}

.topic-poster-list .topic-poster-item--2 {
    animation: cardLeaveRightTop var(--animation-duration) linear infinite;
    animation-delay: calc(var(--animation-per-delay)*1)
}

.topic-poster-list .topic-poster-item--3 {
    animation: cardLeaveLeftBottom var(--animation-duration) linear infinite;
    animation-delay: calc(var(--animation-per-delay)*2)
}

.topic-poster-list .topic-poster-item--4 {
    animation: cardLeaveRightBottom2 var(--animation-duration) linear infinite;
    animation-delay: calc(var(--animation-per-delay)*3)
}

.topic-poster-list .topic-poster-item--5 {
    animation: cardLeaveLeftTop var(--animation-duration) linear infinite;
    animation-delay: calc(var(--animation-per-delay)*4)
}

.topic-poster-list .topic-poster-item--6 {
    animation: cardLeaveRightTop var(--animation-duration) linear infinite;
    animation-delay: calc(var(--animation-per-delay)*5)
}

.topic-poster-list .topic-poster-item--7 {
    animation: cardLeaveLeftBottom var(--animation-duration) linear infinite;
    animation-delay: calc(var(--animation-per-delay)*6)
}

.topic-poster-list .topic-poster-item--8 {
    animation: cardLeaveLeftTop2 var(--animation-duration) linear infinite;
    animation-delay: calc(var(--animation-per-delay)*7)
}

.topic-poster-list .topic-poster-item--9 {
    animation: cardLeaveRightBottom var(--animation-duration) linear infinite;
    animation-delay: calc(var(--animation-per-delay)*8)
}

.topic-poster-list .topic-poster-item--10 {
    animation: cardLeaveLeftBottom var(--animation-duration) linear infinite;
    animation-delay: calc(var(--animation-per-delay)*9)
}

.topic-poster-list .topic-poster-item--11 {
    animation: cardLeaveRightTop var(--animation-duration) linear infinite;
    animation-delay: calc(var(--animation-per-delay)*10)
}

.topic-poster-list .topic-poster-item--12 {
    animation: cardLeaveLeftTop var(--animation-duration) linear infinite;
    animation-delay: calc(var(--animation-per-delay)*11)
}

.topic-poster-list .topic-poster-item--13 {
    animation: cardLeaveLeftBottom var(--animation-duration) linear infinite;
    animation-delay: calc(var(--animation-per-delay)*12)
}

.topic-poster-list .topic-poster-item--14 {
    animation: cardLeaveRightBottom var(--animation-duration) linear infinite;
    animation-delay: calc(var(--animation-per-delay)*13)
}

.topic-poster-list .topic-poster-item--15 {
    animation: cardLeaveRightTop2 var(--animation-duration) linear infinite;
    animation-delay: calc(var(--animation-per-delay)*14)
}

.topic-poster-list .topic-poster-item--16 {
    animation: cardLeaveRightBottom2 var(--animation-duration) linear infinite;
    animation-delay: calc(var(--animation-per-delay)*15)
}

@keyframes cardLeaveLeftTop {
    0% {
        transform: scale(.8)
    }

    10% {
        opacity: 1
    }

    58% {
        transform: translate3d(-12rem, -2rem, 0) scale(2.3);
        opacity: .2
    }

    to {
        transform: translate3d(-12rem, -2rem, 0) scale(2.3);
        opacity: 0
    }
}

@keyframes cardLeaveLeftTop2 {
    0% {
        transform: scale(.8)
    }

    10% {
        opacity: 1
    }

    58% {
        transform: translate3d(-12rem, -4rem, 0) scale(2.3);
        opacity: .2
    }

    to {
        transform: translate3d(-12rem, -4rem, 0) scale(2.3);
        opacity: 0
    }
}

@keyframes cardLeaveRightTop {
    0% {
        transform: scale(.8);
        opacity: 0
    }

    10% {
        opacity: 1
    }

    58% {
        transform: translate3d(12rem, -3rem, 0) scale(2.3);
        opacity: .2
    }

    to {
        transform: translate3d(12rem, -3rem, 0) scale(2.3);
        opacity: 0
    }
}

@keyframes cardLeaveRightTop2 {
    0% {
        transform: scale(.8);
        opacity: 0
    }

    10% {
        opacity: 1
    }

    58% {
        transform: translate3d(14rem, -4rem, 0) scale(3);
        opacity: .2
    }

    to {
        transform: translate3d(14rem, -4rem, 0) scale(3);
        opacity: 0
    }
}

@keyframes cardLeaveLeftBottom {
    0% {
        transform: scale(.8);
        opacity: 0
    }

    10% {
        opacity: 1
    }

    58% {
        transform: translate3d(-12rem, 8rem, 0) scale(2.3);
        opacity: .2
    }

    to {
        transform: translate3d(-12rem, 8rem, 0) scale(2.3);
        opacity: 0
    }
}

@keyframes cardLeaveRightBottom {
    0% {
        transform: scale(.8);
        opacity: 0
    }

    10% {
        opacity: 1
    }

    58% {
        transform: translate3d(12rem, 6rem, 0) scale(2.3);
        opacity: .4
    }

    to {
        transform: translate3d(12rem, 6rem, 0) scale(2.3);
        opacity: 0
    }
}

@keyframes cardLeaveRightBottom2 {
    0% {
        transform: scale(.8);
        opacity: 0
    }

    10% {
        opacity: 1
    }

    80% {
        transform: translate3d(8rem, 12rem, 0) scale(3);
        opacity: .4
    }

    to {
        transform: translate3d(8rem, 12rem, 0) scale(3);
        opacity: 0
    }
}

.topic-poster-list {
    position: absolute;
    width: 100vw;
    aspect-ratio: 1920/1080;
    transform: translateY(-2vh)
}

.topic-poster-item {
    width: 3.8rem;
    aspect-ratio: 380/500;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    overflow: hidden;
    opacity: 0;
    transition: opacity .2s ease-in-out, all .3s ease-in-out;
    animation-iteration-count: infinite
}

.topic-poster-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0
}

.topic-poster-item--1 {
    width: 2rem;
    top: 2.6rem;
    left: 6rem
}

.topic-poster-item--2 {
    width: 1.8rem;
    top: 1.69rem;
    right: 6.8rem
}

.topic-poster-item--3 {
    width: 1.8rem;
    bottom: 2.6rem;
    left: 6.6rem
}

.topic-poster-item--4 {
    width: 1.76rem;
    bottom: 3.4rem;
    right: 8rem
}

.topic-poster-item--5 {
    width: 1.62rem;
    top: 3.4rem;
    left: 6rem
}

.topic-poster-item--6 {
    width: 1.82rem;
    top: 2.95rem;
    right: 7.6rem
}

.topic-poster-item--7 {
    width: 2.28rem;
    bottom: 2.16rem;
    left: 7rem
}

.topic-poster-item--8 {
    width: 1.6rem;
    top: 2.16rem;
    left: 7.8rem
}

.topic-poster-item--9 {
    width: 2.43rem;
    bottom: 3rem;
    right: 7rem
}

.topic-poster-item--10 {
    width: 2rem;
    bottom: 2.97rem;
    left: 6.8rem
}

.topic-poster-item--11 {
    width: 1.8rem;
    top: 2.4rem;
    right: 6rem
}

.topic-poster-item--12 {
    width: 1.6rem;
    top: 1.97rem;
    left: 6.2rem
}

.topic-poster-item--13 {
    width: 2.2rem;
    bottom: 3rem;
    left: 6.8rem
}

.topic-poster-item--14 {
    width: 1.84rem;
    bottom: 3.6rem;
    right: 6.4rem
}

.topic-poster-item--15 {
    width: 2.2rem;
    top: 2rem;
    right: 6rem
}

.topic-poster-item--16 {
    width: 1.6rem;
    bottom: 2rem;
    right: 8rem
}

#app {
    z-index: 5
}