/* category  */
.category-list-wrap{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px;}
.category-list-wrap li { position: relative; box-shadow: 0px 4px 12px 0px #00000024; background-color: var(--color-white); overflow: hidden; border-radius: 8px; border: solid 1px var(--light-gray); padding: 20px; transition: all 0.35s ease-in-out;}
.category-list-wrap li .cat-img { width: 55px; height: 55px; position: relative; margin-bottom: 10px;}
.category-list-wrap li .cat-img img { position: relative; z-index: 1;}
.category-list-wrap li a{ font-size: var(--font-20); font-weight: 600; line-height: 27px; color: var(--h-color); margin-bottom: 4px; display: block;}
.category-list-wrap li .cat-img:before { content: ""; position: absolute; height: 35px; width: 35px; background: #FCE3CF; border-radius: 50%; right: -4px; bottom: 4px; transition: auto; transition: all 0.35s ease-in-out;}
.category-list-wrap li .totalpro{ color: var(--typo-primary); font-size: var(--font-xs); font-weight: 600; line-height: normal;}
.category-list-wrap li:hover{ background-color: #FEF1E8; border-color: #FCE3CF;}
.category-list-wrap li:hover .cat-img:before { background: var(--color-primary);}


@media(max-width:1200px){
    .category-list-wrap { grid-template-columns: 1fr 1fr 1fr; gap: 24px;}    

}
@media(max-width:1024px){
    .category-list-wrap li a{
        font-size: var(--font-regular);
    }
}

@media(max-width:580px){
    .category-list-wrap {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .category-list-wrap li {
        box-shadow: 0px 4px 12px 0px #0000000a;
        padding: 15px;
    }
    .category-list-wrap li .cat-img {
        width: 45px;
        height: 45px;
    }
    .category-list-wrap li a {
        font-size: var(--font-small);
        font-weight: 700;
        line-height: normal;
    }
    /*  */
}  
@media(max-width:480px){
    .category-list-wrap {
        gap: 10px;
    }
}