.history-timeline{
    margin: 138px auto 100px;
    padding: 0 48px;
    max-width: 1296px;
    position: relative;
    > .swiper{
        overflow-x: clip;
        overflow-y: visible;
    }
}
@media screen and (width < 576px) {
    .history-timeline{
        margin: 138px auto 60px;
        padding: 0 24px;
    }
}
.history-timeline-item{
    >.content-container{
        width: 100%;
        position: absolute;
        top: 0;
        transform: translateY(-100%);
        >.en-h2{
            color: var(--color-gray-4);
            text-align: center;
            font-size: 32px;
            transform: scale(0.75);
            transform-origin: center bottom;
            transition: transform 1s, color 1s;
        }
        >.title{
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 1s;
            >div{
                overflow: hidden;
                >h4{
                    padding: 16px 14px 0;
                    text-align: center;
                    white-space: pre-line;
                }
            }
        }
        >svg{
            margin: 16px auto 28px;
        }
    }
    >.dot-container{
        position: relative;
        z-index: 1;
        margin-bottom: 40px;
        >.dot{
            border: 2px solid var(--color-primary-1);
            width: 12px;
            background-color: white;
            aspect-ratio: 1;
            border-radius: 50%;
            margin: 0 auto;
            transition: background-color 1s;
        }
        >.line{
            position: absolute;
            z-index: -1;
            inset: 5px 0;
            background-color: var(--color-gray-4);
        }
    }
    >.img{
        padding: 0 14px;
        aspect-ratio: 3 / 2;
        opacity: 0;
        transition: opacity 1s;
        >img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }


    &.swiper-slide-active{
        >.content-container{
            >.en-h2{
                transform: scale(1);
                color: var(--color-primary-1);
            }
            >.title{
                grid-template-rows: 1fr;
            }
        }
        >.dot-container > .dot{
            background-color: var(--color-primary-1);
        }
        >.img{
            opacity: 1;
        }
    }
}

@media screen and (width < 576px) {
    .history-timeline-item > .content-container > svg{
        margin: 16px auto;
    }
}

.history-timeline-prev,
.history-timeline-next{
    position: absolute;
    top: 0;
    transform: translateY(calc(-50% + 5px));
}

.history-timeline-prev{
    left: 0;
}
.history-timeline-next{
    right: 0;
}