.mainMiddle {
    align-items: center;
}

/* 让内部块在小屏自动缩放，不使用固定宽度 */
.mainMiddle > div {
    display: flex;
    width: 65rem; /* PC 大屏最大宽度 */
    max-width: 100%;
    margin: 1rem auto;
    padding: 0 1rem; /* 手机左右留白 */
    box-sizing: border-box;
}

.banner img {
    border-radius: 1rem;
    width: 100%;
}

#feature, #products {
    display: flex;
    flex-direction: column;
}

    #feature h4, #products h4 {
        text-align: center;
        font-size: 2rem;
        margin: 2rem 0;
        color: black;
    }

.cardBox {
    display: flex;
    flex-wrap: wrap;
}

    .cardBox .card {
        width: 12rem;
        margin: 0.5rem;
        padding: 2rem 1.5rem;
        border: none;
        border-radius: 1rem;
        color: #666666;
        flex: 1 1 calc(20% - 1rem); /* 默认五列布局 */
        box-sizing: border-box;
        background: #fff;
    }

        .cardBox .card h5 {
            text-align: center;
            margin: 1rem auto;
            font-weight: 500;
        }

        .cardBox .card .imgBox {
            width: 3rem;
            height: 3rem;
            background-color: #cf8c30;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1rem;
            border-radius: 0.5rem;
            align-self: center;
        }

#products {
    display: flex;
    flex-direction: column;
}

.cardBox .bigCard {
    width: 20.6rem;
    margin: 0.5rem;
    padding: 2rem 1.5rem;
    border: none;
    border-radius: 1rem;
    color: #666666;
    display: flex;
    flex-direction: column;
    flex: 1 1 calc(33.333% - 1rem); /* 默认三列 */
    box-sizing: border-box;
}

.cardBox div {
    display: flex;
}

.cardBox .column {
    display: flex;
    flex-direction: column;
}

.cardBox .bigCard {
    background-color: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    font-size: 1rem;
}

    .cardBox .bigCard > div {
        margin: 0.5rem auto;
    }

    .cardBox .bigCard .list {
        display: flex;
        flex-direction: column;
    }

    .cardBox .bigCard .title {
        align-items: center;
    }

        .cardBox .bigCard .title img {
            margin-right: 1rem;
            width: 2rem;
        }

        .cardBox .bigCard .title h5 {
            margin: 0;
            color: black;
            font-size: 1.5rem;
        }

    .cardBox .bigCard .price {
        color: #cf8c31;
        font-size: 4rem;
        font-weight: 400;
        font-family: fantasy;
        align-items: baseline;
    }

        .cardBox .bigCard .price span:first-child {
            font-size: 2rem;
        }

    .cardBox .bigCard .split {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        color: #999999;
    }

        .cardBox .bigCard .split .horizontalLine {
            width: 70%;
            height: 1px;
            background-color: gray;
            margin: 0 auto;
        }

    .cardBox .bigCard .list {
        width: 100%;
    }

        .cardBox .bigCard .list > div {
            display: flex;
            justify-content: space-between;
            /* align-items: center; */
            color: #333333;
            font-weight: 500;
            margin: 0.2rem auto;
            width: 100%;
        }
        .cardBox .bigCard .list > div:first-child {
            align-items: flex-start;
        }
        .cardBox .bigCard .list > div:last-child {
            text-align: flex-end;
        }

        .cardBox .bigCard .list .valueBox {
            width: 10rem;
            justify-content: flex-end;
        }

            .cardBox .bigCard .list .valueBox div:first-child {
                color: #cf8c31;
                font-weight: 600;
                justify-content: flex-end;
                margin-right: 0.5rem;
            }

    /*cardBox的active样式【*/
    .cardBox .bigCard.active {
        background: linear-gradient(to bottom,#fbca8b,#d89845);
        color: white;
        transform: scale(107%);
        transition: transform 0.5s;
    }

        .cardBox .bigCard.active .title h5 {
            color: white;
        }

        .cardBox .bigCard.active .price {
            color: white;
        }

        .cardBox .bigCard.active .split {
            color: white;
        }

            .cardBox .bigCard.active .split .horizontalLine {
                background-color: gray;
            }

        .cardBox .bigCard.active .list div {
            color: white;
        }

        .cardBox .bigCard.active .list .valueBox div:first-child {
            color: white;
        }
/*cardBox的active样式】*/

.cardBox .btnBox {
    width: 100%;
}

.btn-outline-warning, .btn-warning {
    padding: 0.8rem;
    font-weight: 600;
    font-size: 1.2rem;
}

/* ------------------ 响应式适配 ------------------ */
/* 宽度 <= 1400px：稍微放宽列宽 */
@media (max-width: 1400px) {
    .cardBox .card { flex: 1 1 calc(33.333% - 1rem); }
    .cardBox .bigCard { flex: 1 1 calc(33.333% - 1rem); }
}

/* 宽度 <= 1100px：两列 */
@media (max-width: 1100px) {
    .cardBox .card { flex: 1 1 calc(50% - 1rem); }
    .cardBox .bigCard { flex: 1 1 calc(50% - 1rem); }
    .cardBox .bigCard .price { font-size: 3.2rem; }
}

/* 宽度 <= 768px：单列或紧凑布局 */
@media (max-width: 768px) {
    .mainMiddle > div { padding: 0 0.8rem; }
    #feature h4, #products h4 { font-size: 1.6rem; margin: 1.5rem 0; }
    .cardBox .card { flex: 1 1 100%; width: 100%; padding: 1.2rem 1rem; }
    .cardBox .bigCard { flex: 1 1 100%; width: 100%; padding: 1.5rem 1rem; }
    .cardBox .bigCard .price { font-size: 2.8rem; }
    .cardBox .bigCard .title h5 { font-size: 1.2rem; }
    .cardBox .bigCard .list div { font-size: 0.9rem; }
    .cardBox .bigCard.active { transform: scale(102%); }
}

/* 超小屏（例如 360-400 宽）进一步压缩字号与留白 */
@media (max-width: 420px) {
    .cardBox .bigCard { padding: 1.2rem 0.8rem; }
    .cardBox .bigCard .price { font-size: 2.4rem; }
    .btn-outline-warning, .btn-warning { font-size: 1rem; padding: 0.6rem; }
}

/* 避免横向滚动 */
html, body { overflow-x: hidden; }

/* 触摸优化（可选） */
@media (hover: none) and (pointer: coarse) {
    .cardBox .bigCard, .cardBox .card { transition: none; }
}

/* ------------------ 结束 ------------------ */