.history-items {
    border: 1px solid var(--gray4);
    border-radius: 1.5rem;
    text-align: right;
    padding: 24px 12px 12px;
}
.history-items img {
    border-radius: 20px;
    width: 100%;
}
.history-body {
    padding-inline: 12px;
    margin-bottom: clamp(8px, 2vw, 28px);
}
.history-body .s-title {
    font-size: 1rem;
    color: var(--color2);
    margin-bottom: 4px;
}
.history-body .date-item {
    margin-bottom: clamp(24px, 2vw, 32px);
    display: block;
    font-size: clamp(24px, 2vw, 30px);
    color: var(--color1);
    font-family: var(--Bold);
    position: relative;
}
.history-body .date-item:before {
    content: "";
    width: 24px;
    height: 0px;
    position: absolute;
    bottom: 0;
    background: var(--color1);
    border-radius: 100px;
    border: 2px solid;
}
.history-body p {
    font-size: 14px;
}
.section-history .swiper-button-next {
    right: calc(100% - 1.5rem);
}
.section-history .swiper-button-prev {
    left: calc(100% - 1.5rem);
}
@media screen and (min-width: 992px) {
    .section-service .sw.position-relative {
        width: calc(100% - 2rem);
        margin-right: 1rem;
    }
}
@media only screen and (max-width: 768px) {
    .history-body {
        padding-inline: 0;
    }

    .sw--service {
        padding-bottom: 56px !important;
    }
    .section-history .swiper-button-prev {
        left: calc(50% + .25rem);
    }
    .section-history .swiper-button-next {
        right: calc(50% + .25rem);
    }
    .section-history .swiper-button-next,
    .section-history .swiper-button-prev {
        bottom: -15px !important;
        top: auto !important;
    }
}