@charset "utf-8";
/*------------------------------------------------------------
	usecase
------------------------------------------------------------*/
.usecase_menu{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 60px 0;
    border-bottom: 1px solid #E8E8E8;
    padding-bottom: 30px;
}
.usecase_menu li{
    border: 1px solid #000;
    padding: 8px 30px;
    border-radius: 50px;
    cursor: pointer;
}
.usecase_menu li.active{
    background-color: #FFBC32;
    color: #fff;
    font-weight: bold;
    border: 0;
}
.usecase_menu_list ul{
    display: flex;
    gap:30px;
    flex-wrap: wrap;
    display: none;
}
.usecase_menu_list .active{
    display: flex;
}
.usecase_menu_list ul li{
    width: calc(25% - 30px);
    margin-bottom: 40px;
}
.usecase_photo img{
    width: 100%;
    max-height: 210px;
    object-fit: cover;
}
.usecase_category{
    background-color: #000;
    color: #fff;
    margin: 10px 0;
    padding: 5px 15px;
    max-width: max-content;
    font-size: 12px;
}
.usecase_title{
    font-weight: bold;
    margin-bottom: 5px;
}
.usecase_menu_list{
    margin-bottom: 80px;
}
.usecase_description{
    font-size: 12px;
    margin-top: 5px;
}
@media all and (max-width: 896px) {
    .usecase_menu_list ul li {
        width: calc(50% - 15px);
        margin-bottom: 20px;
    }
    .usecase_menu{
        overflow-x: scroll;
        flex-wrap: nowrap;
    }
    .usecase_menu li{
        flex-shrink: 0;
    }
    .usecase_photo img{
        max-height: 150px;
    }
}