@charset "UTF-8";
.history {
    &>.bg {
        top: 34%;
    }
    .container {
        padding-bottom: 0;
    }
    &__swiper {
        width: 100%;
    }
    &__timeline {
        position: relative;
        width: 100%;
        margin-bottom: 1.8em;
        &__mainline {
            width: 100%;
            height: 0.1em;
            background-color: rgba($blue, 0.3);
            position: absolute;
            top: 5em;
            left: 0;
        }
        &__box {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 23em;
            margin-left: 10em;
            // border: 1px solid orange;
        }
        &__item {
            position: relative;
            top: 4.8em;
            width: 13.5em;
            padding-right: 4em;
            // transition: width 0.5s;
            &-2013, &-2020 {
                .history__timeline__year {
                    h3 {
                        text-align: center;
                    }
                }
            }
        }
        &__dot {
            position: relative;
            width: 0.5em;
            height: 0.5em;
            border-radius: 50%;
            background-color: $blue;
        }
        &__branchline {
            opacity: 0;
            visibility: hidden;
            position: relative;
            left: 0.23em;
            width: 0.1em;
            height: 0;
            background-color: rgba($blue, 0.3);
            margin-bottom: 1em;
        }
        &__year {
            width: 7em;
            position: absolute;
            top: -2.5em;
            left: -3.3em;
            cursor: pointer;
            h3 {
                text-align: center;
                font-size: 1.7em;
                font-weight: 400;
                margin: 0;
                color: $blue;
                span {
                    font-size: 0.85em;
                }
            }
        }
        &__desc {
            opacity: 0;
            visibility: hidden;
            p {
                color: $gray;
                font-size: 1em;
                line-height: 1.5;
                span {
                    font-size: 0.7em;
                }
            }
            font-weight: 300;
        }
        .swiper-wrapper {
            align-items: stretch;
        }
        .swiper-slide{
            width: fit-content;
            &:first-child {
                .history {
                    &__timeline {
                        &__item {
                            width: 22em;
                            top: 0;
                        }
                        &__dot {
                            background-color: $red;
                        }
                        &__year {
                            width: 9.5em;
                            top: -1.5em;
                            left: 1.1em;
                        
                            h3 {
                                font-size: 2.4em;
                            }
                        }
                        &__branchline {
                            opacity: 1;
                            visibility: visible;
                            height: 7.5em;
                        }
                        &__desc {
                            opacity: 1;
                            visibility: visible;
                        }
                    }
                }
            }
        }
        .swiper-slide-active {
            .history {
                &__timeline {
                    &__item {
                        &-2013, &-2020 {
                            .history__timeline__year {
                                h3 {
                                    text-align: left;
                                }
                            }
                        }
                    }
                    &__dot {
                        background-color: $red;
                    }
 
                }
            }
            
        }
        .swiper-button-next, .swiper-button-prev {
            top: 23%;
        }
        .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
            left: 4em;
        }
        .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
            right: 4em;
        }
    }
    
}

@media screen and (max-width: 992px) {
    .history {
        &>.bg {
            top: 54%;
        }
        .copywriting {
            margin-bottom: 8.5em;
            padding: 0 0 2.5em;
        }
        &__timeline {
            &__mainline {
                top: 8.5em;
            }
            &__box {
                width: 100%;
                height: 54em;
                margin-left: 0;
            }
            &__item {
                top: 8.09em;
                padding-right: 0;
            }
            &__year {
                width: 9em;
                left: -3.8em;
                top: 14em;
                h3 {
                    font-size: 2.1em;
                }
            }
            &__dot {
                width: 0.9em;
                height: 0.9em;
            }
            &__branchline {
                left: 0.25em;
            }
            &__desc {
                p {
                    font-size: 2.1em;
                    font-weight: 400;
                }
            }
            .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
                left: 1em;
            }
            .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
                right: 1em;
            }
            .swiper-button-next, .swiper-button-prev {
                top: 16%;
            }
            .swiper-slide:first-child {
                .history {
                    &__timeline {
                        &__item {
                            width: 32em;
                        }
                        &__branchline {
                            height: 11.5em;
                        }
                        &__year  {
                            width: 13.5em;
                            left: 2em;
                            h3 {
                                font-size: 3.4em;
                            }
                        }
                    }
                }
            }
            .swiper-slide-active {
                .history {
                    &__timeline {
                        &__item {
                            width: 32em;
                        }
                        &__branchline {
                            height: 11.5em;
                        }
                        &__year  {
                            width: 13.5em;
                            left: 2em;
                            h3 {
                                font-size: 3.4em;
                            }
                        }
                    }
                }
            }
        }
    }
}