.contents{
    padding: 4rem 0 75px;
}

.contents .row.r1{
    grid-gap: 2rem 0;
}

.contents .text{
    margin-top: 2rem;
}

.contents .categories{
    display: grid;
    display: -webkit-grid;
    grid-gap: 5px;
    width: 223px;
    max-width: 100%;
}

.contents .categories .top{
    cursor: pointer;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    grid-gap: 1rem;
    color: var(--footer2);
    font-size: 16px;
    background: #F2F2F2;
    padding: 3px 8px 3px 12px;
}

.contents .categories .top::after{
    content: url('data:image/svg+xml;utf8,<svg width="18" height="8" viewBox="0 0 18 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H17C17.5523 2 18 1.55228 18 1C18 0.447715 17.5523 0 17 0Z" fill="rgb(112, 112, 112)"/><path d="M15 3H3C2.44772 3 2 3.44772 2 4C2 4.55228 2.44772 5 3 5H15C15.5523 5 16 4.55228 16 4C16 3.44772 15.5523 3 15 3Z" fill="rgb(112, 112, 112)"/><path d="M12 6H6C5.44772 6 5 6.44772 5 7C5 7.55228 5.44772 8 6 8H12C12.5523 8 13 7.55228 13 7C13 6.44772 12.5523 6 12 6Z" fill="rgb(112, 112, 112)"/></svg>');
}

.contents .categories .menu,
.contents .categories .menu .options>*,
.contents .categories .menu .tags>*{
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.contents .categories .menu{
    border: 1px solid transparent;
    overflow: hidden;
}

.contents .categories .menu .options{
    display: grid;
    display: -webkit-grid;
    grid-gap: 8px;
}

.contents .categories .menu .options>*{
    color: #A1A1A1;
    font-size: 13px;
}

.contents .categories .menu .options>*:hover{
    color: var(--footer2);
}

.contents .categories .menu .tags,
.contents .categories .menu .tags>*:not(:last-child){
    display: flex;
    display: -webkit-flex;
    align-items: center;
    grid-gap: 12px;
}

.contents .categories .menu .tags{
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    margin-top: 21px;
}

.contents .categories .menu .tags>*{
    color: var(--footer2);
    font-size: 8px;
}

.contents .categories .menu .tags>*:not(:last-child)::after{
    content: '|';
}

.contents .categories .menu .tags>*:hover{
    color: var(--main);
}

.contents .categories .menu.active{
    border-color: #F2F2F2;
    padding: 8px 12px;
}

.contents .row.r2{
    grid-gap: 13px 0;
    margin-top: 4rem;
}

.contents .row.r2>*{
    padding: 0 7px;
}

.contents .box{
    display: flex;
    display: -webkit-flex;
    align-items: stretch;
    background: #F2F2F2;
}

.contents .box img{
    width: 211px;
    aspect-ratio: 1/.69668;
    object-fit: cover;
    -o-object-fit: cover;
}

.contents .box .w-100{
    padding: 14px 2rem;
}

.contents .box .title{
    display: -webkit-box;
    display: -moz-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    overflow: hidden;
}

.contents .box .text{
    display: -webkit-box;
    display: -moz-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    overflow: hidden;
}

.contents .box .title{
    color: var(--footer2);
    font-weight: 700;
}

.contents .box .text{
    color: var(--footer2);
    font-size: 14px;
    line-height: 1.14285;
    margin-top: 5px;
}

.contents .box .sm{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    grid-gap: 12px;
    color: var(--main);
    font-size: 15px;
    font-weight: 700;
    margin-top: 1rem;
}

.contents .box .sm::after{
    content: url('data:image/svg+xml;utf8,<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.256 12.512C9.71109 12.512 12.512 9.71109 12.512 6.256C12.512 2.80091 9.71109 0 6.256 0C2.80091 0 0 2.80091 0 6.256C0 9.71109 2.80091 12.512 6.256 12.512Z" fill="rgb(167, 135, 76)"/><path d="M5.34483 9.3598C5.50334 9.35784 5.6548 9.29395 5.76682 9.18179L8.35682 6.58979C8.41468 6.53185 8.46025 6.46283 8.49082 6.38686C8.5214 6.3109 8.53636 6.22955 8.53477 6.14768C8.53318 6.06581 8.51507 5.9851 8.48158 5.91038C8.44808 5.83566 8.39988 5.76845 8.33982 5.71279L5.7508 3.3128C5.63177 3.20607 5.47554 3.15043 5.31584 3.15789C5.15613 3.16535 5.00579 3.23531 4.89723 3.35267C4.78866 3.47003 4.7306 3.62538 4.73557 3.78518C4.74055 3.94498 4.80815 4.09642 4.92381 4.2068L7.04881 6.17379L4.9058 8.31779C4.82033 8.40349 4.76235 8.51272 4.73924 8.63154C4.71612 8.75035 4.72893 8.87337 4.77604 8.98487C4.82315 9.09637 4.90243 9.1913 5.00373 9.25755C5.10504 9.32379 5.22379 9.35834 5.34483 9.35679" fill="white"/></svg>');
    height: 14px;
}

@media(max-width:992px){
    .contents{
        padding: 2rem 0;
    }
    .contents .row.r2{
        margin-top: 2rem;
    }
}

@media(max-width:768px){
    .contents .categories{
        width: 100%;
    }
}

@media(max-width:575px){
    .contents .box{
        display: grid;
        display: -webkit-grid;
    }
    .contents .box img{
        width: 100%;
    }
    .contents .box .w-100{
        padding: 1rem;
    }
}