/* 测试列表 ------------ start */
.test__list {
    width: 6.9rem;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 0.18rem;

    margin-top: 0.33rem;
}

.test__itemWrap {
    width: 3.36rem;
    height: 4.01rem;
    background: #ffffff;
    /* box-shadow: 0rem 2px 4px 6px rgba(109, 126, 161, 0.1); */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    border-radius: 0.08rem;
    overflow: hidden;

    display: flex;
    flex-direction: column;
}

.test__itemImg {
    width: 100%;
    height: 1.76rem;
    border-radius: 0.08rem 0.08rem 0rem 0rem;
    overflow: hidden;
}

.test__itemImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.test__itemInfo {
    flex: 1;
}

.test__itemTitle {
    font-weight: 400;
    font-size: 0.3rem;
    color: #333333;
    text-align: center;
    margin-top: 0.17rem;
    padding: 0 0.24rem;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.test__itemDesc {
    padding: 0 0.24rem;
    font-weight: 400;
    font-size: 0.22rem;
    color: #999999;
    text-align: center;
    margin-top: 0.08rem;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.test__itemTextWrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.23rem;
    /* margin-left: 0.14rem; */
    gap: 0.23rem;
}

.test__itemText {
    display: flex;
    justify-content: center;
    align-items: center;

    font-weight: 400;
    font-size: 0.22rem;
    color: #A73EFF;
    line-height: 0.09rem;

    width: 2.12rem;
    height: 0.39rem;
    border-radius: 0.1rem;
    border: 1px solid #C366FF;
    /* color: #666666; */
}

.test__itemBtn-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.14rem;
}

.test__itemBtn-2:hover .test__itemBtn-2-img {
    transform: translateX(10px);
}

.test__itemBtn-2-text {
    font-weight: bold;
    font-size: 0.26rem;
    color: #A73EFF;
    line-height: 0.14rem;
}

.test__itemBtn-2-img {
    width: 0.71rem;
    height: 0.23rem;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* color_cheng  color_hong  color_lan  color_qin  color_zi */
/* 紫色 */
.color_zi .test__container-bg {
    background-image: url('/styles/images/index/bg-zi.png');
    background-repeat: no-repeat;
    background-size: cover;

}

.color_zi .test__itemText {
    border-color: #C366FF;
    color: #A73EFF;
}

.color_zi .test__itemDesc span {
    color: #A73EFF;
}

.color_zi .test__itemBtn-2-text {
    color: #A73EFF;
}

.color_zi .test__itemBtn-2-img {
    background-image: url('/styles/images/index/right-zi.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.color_zi .test__ranking .verticalBar {
    background: #AC3AF3;
}

.color_zi .test__more {
    color: #fff;
    background: rgba(153, 44, 245, 0.46);
    border-radius: 0.2rem;
    border: 0.01px solid #FFFFFF;
}

.color_zi .test__more:hover {
    color: #fff;
    background: rgba(153, 44, 245, 1);
    border-radius: 0.2rem;
    border: 0.01px solid #FFFFFF;
}



/* 橙色 */
.color_cheng .test__container-bg {
    background-image: url('/styles/images/index/bg-cheng.png');
    background-repeat: no-repeat;
    background-size: cover;

}

.color_cheng .test__itemText {
    border-color: #FFA52E;
    color: #FF9B30;
}

.color_cheng .test__itemDesc span {
    color: #FF9B30;
}

.color_cheng .test__itemBtn-2-text {
    color: #FF7200;
}

.color_cheng .test__itemBtn-2-img {
    background-image: url('/styles/images/index/right-cheng.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.color_cheng .test__ranking .verticalBar {
    background: #FF9A35;
}

.color_cheng .test__more {
    color: #fff;
    background: rgba(255, 168, 61, 0.46);
    border-radius: 0.2rem;
    border: 0.01px solid #FFFFFF;
}

.color_cheng .test__more:hover {
    color: #fff;
    background: rgba(255, 168, 61, 1);
    border-radius: 0.2rem;
    border: 0.01px solid #FFFFFF;
}




/* 红色 */
.color_hong .test__container-bg {
    background-image: url('/styles/images/index/bg-hong.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.color_hong .test__itemText {
    border-color: #FF7460;
    color: #FE5145;
}

.color_hong .test__itemDesc span {
    color: #FE5145;
}

.color_hong .test__itemBtn-2-text {
    color: #FF4C4A;
}

.color_hong .test__itemBtn-2-img {
    background-image: url('/styles/images/index/right-hong.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.color_hong .test__ranking .verticalBar {
    background: #FF341E;
}

.color_hong .test__more {
    color: #fff;
    background: rgba(255, 114, 96, 0.46);
    border-radius: 0.2rem;
    border: 0.01px solid #FFFFFF;
}

.color_hong .test__more:hover {
    color: #fff;
    background: rgba(255, 114, 96, 1);
    border-radius: 0.2rem;
    border: 0.01px solid #FFFFFF;
}



/* 蓝色 */
.color_lan .test__container-bg {
    background-image: url('/styles/images/index/bg-lan.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.color_lan .test__itemText {
    color: #258AFF;
    border-color: #32ABFF;
}

.color_lan .test__itemDesc span {
    color: #258AFF;
}

.color_lan .test__itemBtn-2-text {
    color: #32ABFF;
}

.color_lan .test__itemBtn-2-img {
    background-image: url('/styles/images/index/right-lan.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.color_lan .test__ranking .verticalBar {
    background: #1472FF;
}

.color_lan .test__more {
    background: rgba(2, 104, 239, 0.46);
    border-radius: 0.2rem;
    border: 0.01px solid #FFFFFF;
    color: #FFFFFF;
}

.color_lan .test__more:hover {
    background: rgba(2, 104, 239, 1);
    border-radius: 0.2rem;
    border: 0.01px solid #FFFFFF;
    color: #FFFFFF;
}




/* 青色 */
.color_qin .test__container-bg {
    background-image: url('/styles/images/index/bg-qin.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.color_qin .test__itemText {
    border-color: #99E0F8;
    color: #00B2EE;
}

.color_qin .test__itemDesc span {
    color: #00B2EE;
}

.color_qin .test__itemBtn-2-text {
    color: #00B2EE;
}

.color_qin .test__itemBtn-2-img {
    background-image: url('/styles/images/index/right-qin.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.color_qin .test__ranking .verticalBar {
    background: #2AD5FF;
}

.color_qin .test__more {
    background: rgba(0, 178, 238, 0.46);
    border-radius: 0.2rem;
    border: 0.01px solid #FFFFFF;
    color: #FFFFFF;
}

.color_qin .test__more:hover {
    background: rgba(0, 178, 238, 1);
    border-radius: 0.2rem;
    border: 0.01px solid #FFFFFF;
    color: #FFFFFF;
}


/* PC 端样式（>750px 时） */
@media screen and (min-width: 750px) {
    .test__list {
        width: 100%;
        margin-top: 0.3rem;
        gap: 0.2rem;
    }

    .test__itemWrap {
        width: 3.6rem;
        height: 3.28rem;
    }

    .test__itemImg {
        height: 1.9rem;
    }

    .test__itemTitle {
        font-weight: 400;
        font-size: 0.18rem;
        color: #333333;
        padding: 0;
        text-align: left;

        margin-top: 0.24rem;
        margin-left: 0.28rem;
    }

    .test__itemDesc {
        padding: 0;
        margin-left: 0.28rem;
        margin-right: 0.28rem;
        font-weight: 400;
        font-size: 0.14rem;
        color: #999999;
        text-align: left;
    }

    .test__itemTextWrap {
        flex-direction: row;
        justify-content: space-between;
        margin-top: 0.2rem;
        margin-left: 0.28rem;
        margin-right: 0.28rem;
        gap: 0.19rem;
    }

    .test__itemText {
        width: 1.18rem;
        height: 0.23rem;
        border-radius: 0.1rem;
        border: 0.01px solid #C366FF;
        font-weight: 400;
        font-size: 0.12rem;
        color: #A73EFF;
    }

    .test__itemBtn-2-text {
        font-weight: bold;
        font-size: 0.18rem;
        color: #A73EFF;
    }

    .test__itemBtn-2-img {
        width: 0.46rem;
        height: 0.16rem;
    }

    .test__itemBtn {
        top: auto;
    }

    .test__itemBtn svg {
        display: none;
    }

    .test__itemBtn .btn {
        display: block;
        font-weight: 400;
        font-size: 0.16rem;
        color: #ffffff;
        background-color: #1472ff;
        padding: 0.06rem 0.1rem;
        border-radius: 0.04rem;
    }
}

/* 测试列表 ------------ end */




/* page style ----------------- start */
.recommend__container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__title {
    /* position: absolute; */
    margin-top: 0.43rem;
    margin-left: 0.49rem;

    display: flex;
    font-weight: bold;
    font-size: 0.48rem;
    color: #2e2a67;
}

.hero__description {
    margin-top: 0.23rem;
    margin-left: 0.49rem;
    width: 3.7rem;
    height: 0.8rem;
    font-weight: 400;
    font-size: 0.18rem;
    color: #7569a4;
}

/* PC 端样式（>750px 时） */
@media screen and (min-width: 750px) {

    .hero__title {
        margin-left: 3.89rem;
        margin-top: 0.67rem;
    }

    .hero__description {
        margin-left: 3.89rem;
        width: 6.07rem;
        height: 0.49rem;
        font-size: 0.18rem;
    }
}

.empty__container {
    background-color: #ffffff;
    margin-top: 0.32rem;
    width: 100%;
    min-height: 4.5rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.47rem;
}

.empty__icon {
    width: 1.97rem;
    height: 1.36rem;
}

.empty__text {
    font-weight: 500;
    font-size: 0.32rem;
    color: #666666;
}

/* page style ----------------- end */