
.event .s2 .inner .top{justify-content: flex-end;}
.event .s2 .inner .top {border-bottom: none;}

.event .list{display: flex;flex-wrap: wrap;gap: 50px 25px;}
.event .list a{width: calc((100% - (25px * 2)) / 3);}
.event .list .imgBx{
    position: relative;width: 100%;
}
.event .list .imgBx::before{
    content: '';
    display: block;
   padding-bottom: calc(300 / 410 * 100%);
}
.event .list .imgBx img{
    position: absolute;
    top: 0;left: 0;
    width: 100%;height: 100%;
    object-fit: cover;
    border-radius: 25px;
}
.event .list .txtBx{}
.event .list .txtBx .tag{
    max-width: 70px;
    width: 100%;
    letter-spacing: -0.045em;
    text-align: center;
    border-radius: 16px;
    font-size: 14px;font-weight: 500;
    margin-top: calc(20 / 14 * 1em);
}
.event .list .txtBx .tag{
    background-color: #0076ff;color: #ffffff;
}

.event .list .txtBx .tag span{
    padding: .5em 0;box-sizing: border-box;display: block;
}
.event .list .txtBx .tit{
    font-size: 24px;color: #000;font-weight: 600;
    line-height: calc(36 / 24 * 1em);
    margin-top: calc(20 / 24 * 1em);
    margin-bottom: calc(25 / 24 * 1em);
}
.event .list .txtBx .tit p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    letter-spacing: -0.045em;
}
.event .list .txtBx .dateBx{
    display: flex;align-items: center;gap: 8px;
}
.event .list .txtBx .dateBx em{font-size: 18px;color: #555555;}
.event .list .txtBx .dateBx em i{}
.event .list .txtBx .dateBx span{
    font-size: 18px;font-weight: 400;color: #555555; letter-spacing: -0.045em;
}

.event .list .endevent .txtBx .tag{
    background-color: #555555; color: rgba(255, 255, 255, 0.5);
}
.event .list .endevent .imgBx{
    filter: saturate(0);
}



@media screen and (max-width: 1680px) {
    .event .list .txtBx .tit{
        font-size: clamp(22px, 22 / 1440 * 100vw, 24px);
    }
}
@media screen and (max-width: 1440px) {
    .event .list .txtBx .tit{
        font-size: clamp(20px, 20 / 1280 * 100vw, 22px);
    }
}
@media screen and (max-width: 1280px) {}
@media screen and (max-width: 1024px) {
    .event .list a {width: calc((100% - (25px * 1)) / 2);}
}
@media screen and (max-width: 820px) {
    .event .list .txtBx .tit{
        font-size: clamp(16px, 16 / 500 * 100vw, 20px);
    }
    .event .list .txtBx .dateBx span{font-size: clamp(16px, 16 / 500 * 100vw, 18px);}
    .event .list .txtBx .dateBx em{font-size: clamp(16px, 16 / 500 * 100vw, 18px);}
}
@media screen and (max-width: 500px) {
    .event .list a {width: 100%;}
    .event .list .txtBx .dateBx em{font-size: clamp(14px, 14 / 280 * 100vw, 16px);}
    .event .list .txtBx .dateBx span{font-size: clamp(14px, 14 / 280 * 100vw, 16px);}
}
@media screen and (max-width: 360px) {
    .event .list .txtBx .tit{
        font-size: clamp(16px, 16 / 280 * 100vw, 18px);
    }

}