section.main{
    padding-top: calc(120 * var(--rpx-50));
    padding-bottom: calc(170 * var(--rpx-50));
}

.page-header .left{
    background: linear-gradient(to right top, var(--theme-beige), #33355a, var(--theme-navy));
}

.category-list{
    display: flex;
    justify-content: center;
}

.category-list .category{
    padding: calc(30 * var(--rpx)) calc(40 * var(--rpx-50)) calc(40 * var(--rpx));
    border-radius: calc(8 * var(--rpx));
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.category-list .category:hover{
    background-color: #fafbfd;
}

.category-list .category .icon{
    width: calc(40rem / 16);
    height: calc(40rem / 16);
    object-fit: contain;
}

.category-list .category .name{
    position: relative;
    font-weight: lighter;
    margin-top: calc(12 * var(--rpx));
    color: var(--theme-navy);
}

.category-list .category .name::after{
    content: "";
    position: absolute;
    bottom: calc(-8 * var(--rpx));
    left: 0;
    width: 100%;
    height: calc(2 * var(--rpx));
    background-color: var(--theme-beige);
    border-radius: calc(2 * var(--rpx));
    opacity: 0;
    transform: translateY(calc(-8 * var(--rpx))) scaleX(0);
}

.category-list .category.active .name{
    color: var(--theme-beige);
    font-weight: bold;
}

.category-list .category.active .name::after{
    transform: none;
}

.item-list{
    --column: 2;
    margin-top: calc(36 * var(--rpx-50));
}

.result-item{
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
}

.result-item>*{
    width: 50%;
    flex: 0 0 auto;
}

.result-item .cover{
    aspect-ratio: 380/460;
}

.result-item .cover img{
    display: block;
    width: 100%;
    height: auto;
}

.result-item .info{
    background-color: #f5f7fc;
    padding: calc(32 * var(--rpx)) calc(36 * var(--rpx));

    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.result-item .name{
    font-size: calc(28 * var(--rpx));
    font-weight: bold;
    color: var(--theme-navy);
    flex: 0 0 auto;
}

.result-item .desc{
    margin-top: calc(24 * var(--rpx));
    flex: 1 1 auto;
    margin-bottom: calc(30 * var(--rpx));
    overflow: hidden;

    display: -webkit-box;
    -webkit-line-clamp: 6;
    max-height: calc(180em / 18);
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media (max-width: 1280px) {
    .result-item .desc{
        -webkit-line-clamp: 5;
        max-height: calc(150em / 18);
    }
}

.result-item.theme-beige .info{
    background-color: #fcf9f4;
}

.result-item.theme-beige .name{
    color: var(--theme-beige);
}

.result-item .tag-text{
    margin-bottom: 0;
    justify-self: flex-end;
    font-weight: lighter;
    margin-top: auto;
}

.main .btn-ctn{
    display: flex;
    justify-content: center;
    margin-top: calc(90 * var(--rpx-50));
}

@media (max-width: 750px) {
    .category-list{
        overflow: auto;
    }

    .category-list .category{
        padding: calc(20 * var(--rpx));
    }

    section.main{
        padding-top: calc(60 * var(--rpx));
        padding-bottom: calc(80 * var(--rpx));
    }

    .item-list{
    }
    .flex-box .flex-item{
        display: flex;
        flex-direction: column;
    }

    .result-item .info{
        padding: calc(15 * var(--rpx));
    }

    .result-item>*{
        width: 100%;
    }
    .result-item .tag-text{
        font-size: calc(14rem / 16);
    }
}