.product-box {}

.product-select {
    padding: 40px 0 50px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    border-bottom: 1px solid var(--color-red);
}

.product-selitem {
    width: calc(33% - 15px);
    border: 1px solid var(--color-red);
    transition: all .5s;
}

.product-selitem:hover {
    background-color:var( --color-pink);
}

.selitemshw {
    background-color:var( --color-pink);
}

.product-selitem a {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-red);
}

.product-selitle {
    display: flex;
    align-items: center;
    gap: 15px;
}

.product-selitle img {
    width: 50px;
    height: auto;
}

.product-selitle span {
    font-size: 20px;
}

.product-selbtn {
    transform: rotate(-90deg);
}

.product-selbtn i {
    font-size: 20px;
    font-weight: 600;
}





.product-cont {
    padding: 20px 0 40px;
}

.product-cntitem {
    padding: 20px 0;
}

.product-ctit-tit {
    font-size: 30px;
    color: var(--color-red);
    font-weight: 600;
}

.product-ctitul {
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.product-ctitul>li {
    width: calc(33% - 15px);
    padding: 25px;
    border: 1px solid var( --color-pink);
}

.product-ctitul>li:hover {
    border: 1px solid var(--color-red);
}

.product-ctitul>li:hover .ctitemul-btn a {
    background-color: var(--color-red);
    color:var( --color-pink);
}

.ctitemul-num {
    font-size: 48px;
    color: var(--color-red);
    font-weight: 600;
}

.ctitemul-img {
    text-align: center;
    padding: 50px 0;
}

.ctitemul-img img {
    width: 60%;
    height: auto;
}

.ctitemul-btn a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background-color:var( --color-pink);
    color: var(--color-red);
    font-size: 16px;
}






@media only screen and (max-width: 1540px) {

    .product-select {
        padding: 30px 0 40px;
        gap: 20px;
    }

    .product-selitem {
        width: calc(33% - 10px);
    }

    .product-selitem a {
        padding: 10px 15px;
    }

    .product-selitle img {
        width: 40px;
    }

    .product-selitle {
        gap: 10px;
    }

    .product-selitle span {
        font-size: 18px;
    }

    .product-selbtn i {
        font-size: 16px;
    }






    .product-cont {
        padding: 15px 0 35px;
    }

    .product-cntitem {
        padding: 15px 0;
    }

    .product-ctit-tit {
        font-size: 26px;
    }

    .product-ctitul {
        padding-top: 15px;
        gap: 20px;
    }

    .product-ctitul>li {
        width: calc(33% - 10px);
        padding: 20px;
    }

    .ctitemul-num {
        font-size: 40px;
    }

    .ctitemul-img {
        padding: 40px 0;
    }

    .ctitemul-btn a {
        padding: 10px;
        ;
        font-size: 14px;
    }

    .ctitemul-btn a i {
        font-size: 14px;
    }



}




@media only screen and (max-width: 1340px) {

    .product-select {
        padding: 20px 0 30px;
        gap: 12px;
    }

    .product-selitem {
        width: calc(33% - 6px);
    }

    .product-selitem a {
        padding: 8px 10px;
    }

    .product-selitle img {
        width: 30px;
    }

    .product-selitle span {
        font-size: 14px;
    }

    .product-selbtn i {
        font-size: 12px;
    }




    .product-cont {
        padding: 10px 0 30px;
    }

    .product-cntitem {
        padding: 10px 0;
    }

    .product-ctit-tit {
        font-size: 22px;
    }

    .product-ctitul {
        padding-top: 10px;
        gap: 16px;
    }

    .product-ctitul>li {
        width: calc(33% - 8px);
        padding: 15px;
    }

    .ctitemul-num {
        font-size: 34px;
    }

    .ctitemul-img {
        padding: 30px 0;
    }




}



@media only screen and (max-width: 768px) {

    .product-box {
        padding: 0 .1rem;
    }

    .product-selitem {
        width: calc(50% - .06rem);
    }

    .product-select {
        padding: .2rem 0 .3rem;
        gap: .12rem;
    }


    .product-ctitul {
        gap: .16rem;
    }

    .product-ctitul>li {
        width: calc(50% - .08rem);
        padding: .2rem;
    }

    .ctitemul-num {
        font-size: 28px;
    }

    .ctitemul-img {
        padding: .3rem 0;
    }


}