#event{
    position: relative;
    width: 100%;
    background-color: #FFF;
    max-width: var(--max-width);
    margin: 0 auto;
}
#event .swiper{
    padding-bottom: 2rem;
}
#event .event-wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 7.35rem 25rem;
}

.event-wrap p.event-header{
    font-family: var(--font-sans);
    color: #000;
    text-align: center;
    font-size: var(--font-size-36);
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -0.03125rem;
}
.event-wrap .event-list li {
    height: 15.6875rem;
    border-radius: 10px;
    padding: 1rem;
}
.event-wrap .event-list li span{
    position: relative;
    display: inline-block;
    border-radius: 61px;
    padding: .6rem 1rem;
    text-align: center;
    background: var(--primary-color);
    color: #FFF;
    font-size: var(--font-size-20);
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.03125rem;
}
.event-wrap .event-list li span.ready {
    background: #90b2ff;
    color: #FFF;
}
.event-wrap .event-list li span.end {
    background: #DEDEDE;
    color: #4f4f4f;
}

#event .swiper-pagination{
    bottom: 0rem!important;
}
#event .swiper-pagination-bullet-active{
    background-color: #999;
}
@media screen and (max-width: 767.9px) {
    #event .event-wrap{
        padding: 1.25rem 1rem;
    }
    .event-wrap p.event-header{
        font-size: var(--font-size-20);
    }
    .event-wrap .event-list li span {
        padding: .375rem .625rem;
        font-size: var(--font-size-14);
    }
}