.history_box {
    width: 100%;
    padding-top: calc(21px + 5rem);
    padding-bottom: calc(30px + 10rem);
}

/* 自定义整个滚动条 */
::-webkit-scrollbar {
    width: 2px;
    /* 设置滚动条的宽度 */
    background-color: #ffffff;
    /* 滚动条的背景色 */
}

/* 自定义滚动条轨道 */
::-webkit-scrollbar-track {
    background: #ffffff;
    /* 轨道的背景色 */
    /* 轨道的圆角 */
}

/* 自定义滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
    background-color: #ffffff;
    /* 滑块的背景色 */

}



.time_line_box {

    width: 100%;
    margin: auto;
    position: relative;
    margin-top: calc(1px + 1rem);

}


.time_line_container {
    max-width: 1480px;
    width: 85%;
    margin: auto;
    overflow-x: scroll;



}

.time_line {
    width: max-content;
    overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;


}

.time_item {
    width: 20%;
    height: calc(100px + 8rem);
    position: relative;

}

.time_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.time_item:nth-child(even) {
    margin-bottom: calc(58px + 8rem);

}

.time_item:nth-child(odd) {
    margin-top: calc(142px + 8rem);
}

.time_item:nth-child(odd) img {
    transform: scaleY(-1)
}

.time_item .p1 {
    font-family: DINPro_Bold;
    font-weight: bold;
    font-size: calc(10px + 1.5rem);
    color: #98B8AC;
    line-height: 1;
    padding-left: calc(3px + 1.5rem);
    margin-top: calc(13px + 3rem);
}

.time_item:nth-child(odd) .p1 {
    margin-top: calc(1px + 6rem);
}

.time_item .p2 {
    font-family: Century Gothic;
    font-weight: bold;
    font-size: calc(8px + 0.5rem);
    color: #86868B;
    line-height: calc(10px + 1rem);
    margin-top: calc(1px + 1rem);
    padding-left: calc(1px + 1.5rem);

}

.time_line_box .line {
    width: 100%;
    height: calc(4px + 0.5rem);
    background: url(../images/line.png);
    background-size: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

.time_item_text {
    position: absolute;
    top: 0;
}

.time_prev {
    width: calc(10px + 2rem);
    height: calc(10px + 2rem);
    cursor: pointer;
    position: absolute;
    left: calc(20px + 5rem);
    top: calc(1px + 0.5rem);
    bottom: 0;
    margin: auto;
    z-index: 10;
}

.time_prev img {
    width: 100%;
    height: 100%;
    display: none;
}

.time_prev img:nth-of-type(1) {
    display: block;
}

.tiem_next {
    width: calc(10px + 2rem);
    height: calc(10px + 2rem);
    cursor: pointer;
    position: absolute;
    right: calc(20px + 5rem);
    top: calc(1px + 0.5rem);
    bottom: 0;
    margin: auto;
    z-index: 10;
}

.tiem_next img {
    width: 100%;
    height: 100%;
    display: none;
}

.tiem_next img:nth-of-type(2) {
    display: block;
}

@media (max-width: 1100px) {
    .time_item .p2 {
        font-size: calc(10px + 1rem);
        line-height: 1.5;
    }

    .time_item .p1 {
        font-size: calc(14px + 1rem);
        line-height: 1.5;
    }

    .time_prev {
        display: none;
    }

    .tiem_next {
        display: none;
    }

    .time_item:nth-child(even) {
        margin-bottom: calc(58px + 34rem);
    }

    .time_item img {
        opacity: 0;
    }
}