.main-bg {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
}

.main-body {
    width: 100%;

    .top-banner {
        width: 100%;
        height: 3.6rem;
        background: url(../img/banner.png) no-repeat center 100%/ 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;

        span {
            color: #fff;
            font-size: 0.46rem;
            margin-bottom: 0.24rem;
            display: block;
            font-weight: bold;
            text-transform: uppercase;
        }

        p {
            color: #fff;
            font-size: 0.24rem;
            text-transform: uppercase;
        }
    }

    .body-list {
        width: 100%;
        padding: 0.3rem;
        margin-bottom: 0.3rem;

        ul {
            width: 100%;
            display: grid;
            /* 4 列，每列等宽（repeat(4, 1fr) 表示 4 列，每列占 1 份） */
            grid-template-columns: repeat(3, 1fr);
            justify-items: center;
            /* 单元格内元素靠左 */
        }

        li {
            width: 2.1rem;
            height: 2.5rem;
            margin-bottom: 0.3rem;
            text-align: center;

            img {
                width: 2.1rem;
                height: 2.1rem;
                background-color: #fff;
                border: 1px solid #eee;
                border-radius: 50%;
            }

            p {
                font-size: 0.24rem;
                color: #000;
                line-height: 0.3rem;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}
.top-list-placeholder{
    width: 100%;
    height: 0.8rem !important;
}