@charset "UTF-8";
.category_ul{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 6px;
    grid-row-gap: 10px;
}
.category_ul .category_li{
    border-radius: 0;
    padding: 0;
    filter: drop-shadow(0px 6px 0px #ffca01);
    border: 2px solid #67137F;
    transition: .3s;
}

.category_ul .category_li.product_none_category{
    background-color: #616161;
    filter: drop-shadow(0px 7px 0px #444);
    pointer-events: none;
    border: 2px solid #616161;
}
.category_li a{
    color: #fff;
    text-align: center;
    padding: .2em .8em;
    font-size: 1.2em;
    font-weight: 700;
    transition: .3s;
}
.category_ul .category_active{
    filter: drop-shadow(0px 0px 0px #ffca01);
    transform: translateY(6px);
}
.category_ul .category_active a{
    color: #67137F;
    background-color: #fff9dd;
}
.category_li:nth-of-type(1) { grid-area: 1 / 1 / 2 / 2; }
.category_li:nth-of-type(2) { grid-area: 1 / 2 / 2 / 3; }
.category_li:nth-of-type(3) { grid-area: 1 / 3 / 2 / 4; }
.category_li:nth-of-type(4) { grid-area: 1 / 4 / 2 / 5; }
.search_btn button{
    max-width: 300px;
}


@media (min-width: 1366px) {
    .category_li:hover{
        filter: drop-shadow(0px 0px 0px #ffca01);
        transform: translateY(6px);
    }
    .category_li:hover a{
        color: #67137F;
        background-color: #fff9dd;
    }
}