.hours-table {
    padding-top: 80px;
    padding-bottom: 80px;

    >div {
        background-color: var(--color-secondary-1);
        border-radius: 20px;
    }
}

.hours-table-swiper-change-page {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 16px 60px;
}
.hours-table-swiper-pagination > .swiper-wrapper{
    >.swiper-slide{
        max-width: fit-content;
        &::before{
            content: "";
            position: absolute;
            top: calc(50% - 2px);
            right: -26px;
            display: block;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: var(--color-gray-2);
            opacity: 0.4;
        }
        >button {
            font-weight: 500;
            opacity: 0.4;
            transition: opacity 0.3s, color 0.3s;
        }
        &:hover,
        &.swiper-slide-thumb-active {
            >button {
                opacity: 1;
                color: var(--color-primary-2);
            }
        }
        &:last-child{
            margin-right: 0 !important;
            &::before{
                content: none;
            }
        }
    }
}

.hours-table-swiper-prev,
.hours-table-swiper-next {
    >svg {
        color: var(--color-gray-4);
        transition: color 0.3s;
    }

    &:hover>svg {
        color: var(--color-primary-2);
    }
}

.hours-table-swiper-item {
    padding: 40px 102px;
    >h4 {
        text-align: center;
        margin-bottom: 40px;
    }

}

.hours-table-swiper-table {
    overflow: auto;
    margin-bottom: 40px;
}

.hours-table-swiper-info{
    display: flex;
    gap: 24px;
    >h4{
        padding: 0 24px;
        border-left: 2px solid var(--color-primary-2);
        align-self: flex-start;
    }
    >ul{
        flex-grow: 1;
    }
    >a{
        align-self: center;
    }
}

@media screen and (width < 1248px) {
    .hours-table-swiper-item {
        padding: 40px 60px;
    }
}

@media screen and (width < 1024px) {
    .hours-table-swiper-info{
        flex-wrap: wrap;
        >h4{
            width: 100%;
        }
        >ul{
            width: 75%;
        }
        >a{
            align-self: end;
        }
    }
}

@media screen and (width < 768px) {
    .hours-table-swiper-change-page {
        padding: 24px;
    }
    .hours-table-swiper-item {
        padding: 30px 24px;
    }
    .hours-table-swiper-info{
        flex-direction: column;
        gap: 12px;
        >h4{
            padding: 0 12px;
        }
        >ul{
            width: 100%;
        }
        >a{
            align-self: center;
        }
    }
}

@media screen and (width < 576px) {
    .hours-table-swiper-pagination > .swiper-wrapper > .swiper-slide::before{
        right: -22px;
    }
    .hours-table {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}