.yingfang-our-history {
    padding: 70px 0;
    background: #FFF9F9;
}
.yingfang-our-history .history-title{
    color: #333;
    text-align: center;
    font-family: var(--title-font-family);
    font-size: var(--font-48);
    font-style: normal;
    font-weight: 700;
    line-height: 1.25; /* 125% */
}
.history-content{
    display: flex;
    gap: 100px;
    margin-top: 50px;
}
.history-content .history-left{
    width: 640px;
    aspect-ratio: 642/458;
    border-radius: 15px;
    overflow: hidden;
}
.history-left .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-content .history-right{
    flex: 1;
    min-width: 0;
    position: relative;
}
.history-right .swiper{
    width: 100%;
    overflow: hidden;
}
.history-right .swiper-slide{
    width: 100%;
    overflow: hidden;
}
.history-right .swiper-slide .history-text-title{
    color: var(--color-primary);
    font-family: var(--title-font-family);
    font-size: var(--font-48);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.history-right .swiper-slide .history-text-desc{
    color: #000;
    font-family: var(--font-family);
    font-size: var(--font-20);
    font-style: normal;
    font-weight: 400;
    line-height: 1.75; /* 175% */
    margin-top: 40px;
    word-wrap: break-word;
    white-space: normal;
}

.history-right .history-button{
    margin-top: 70px;
    display: flex;
    gap: 90px;
    position: relative;
}
.history-button .history-button-prev,
.history-button .history-button-next{
    width: 44px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    cursor: pointer;
    z-index: 9;
}
.history-button .history-button-prev:hover,
.history-button .history-button-next:hover{
    background: #FFDFDD;
    border: 2px solid #FFDFDD;
    transition: all 0.5s;
}
.history-year-wrap{
    position: absolute;
    bottom: -30px;
    right: 70px;
}
.history-year-wrap .history-year-item{
    display: none;
    color: var(--color-primary);
    text-align: center;
    font-family: var(--title-font-family);
    font-size: 125px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    opacity: 0.1;
}
.history-year-wrap .history-year-item.active{
    display: block;
}

.history-timeline{
    margin-top: 75px;
    position: relative;
}
.history-timeline .history-timeline-line{
    width: 100%;
    border-bottom: 1px dashed var(--color-primary);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.history-timeline .history-timeline-wrap{
    display: grid;
    grid-template-columns: repeat(8,auto);
    gap: 30px;
    height: 150px;
    justify-content: space-between;
    width: 100%;
    overflow: scroll;
}
.history-timeline .history-timeline-wrap::-webkit-scrollbar{
    display: none;
}
.history-timeline-wrap .history-timeline-item{
    max-width: 70px;
    color: #333;
    font-family: var(--font-family);
    font-size: var(--font-32);
    font-style: normal;
    font-weight: 400;
    line-height: 1.25;
    position: relative;
    display: flex;
}
.history-timeline-wrap .history-timeline-item::after{
    content: '';
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #FFE8E6;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.history-timeline-wrap .history-timeline-item.active::after{
    background: var(--color-primary);
}
.history-timeline-wrap .history-timeline-item:nth-of-type(odd){
    align-items: flex-end;
}


@media screen and (max-width: 1500px) {
    .history-content{
        gap: 50px;
    }
    .history-content .history-left{
        width: 45%;
    }
    .history-right .history-button{
        gap: 30px;
    }
    .history-year-wrap .history-year-item{
        font-size: 100px;
    }
}
@media screen and (max-width: 1200px) {
    .history-right .swiper-slide .history-text-desc,
    .history-right .history-button{
        margin-top: 20px;
    }
    .history-year-wrap{
        right: 10px;
    }
}
@media screen and (max-width: 992px) {
    .yingfang-our-history{
        padding: 50px 0;
    }
    .history-content{
        flex-direction: column;
        gap: 30px;
    }
    .history-content .history-left{
        width: 100%;
    }
    .history-year-wrap{
        bottom: -50px;
    }
}
@media screen and (max-width: 768px) {
    .yingfang-our-history{
        padding: 30px 0;
    }
    .history-content{
        margin-top: 30px;
    }
    .history-year-wrap .history-year-item{
        font-size: 70px;
    }
    .history-year-wrap{
        bottom: -10px;
    }
    .history-button .history-button-prev,
    .history-button .history-button-next{
        width: 35px;
    }
    .history-timeline{
        margin-top: 40px;
    }
}