.main_box {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #F8FCFF;
    background-image: url("/templates/default/images/info/zuzhi_bg.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: scroll;
    position: relative;
    z-index: 10;
}

.group_top {
    width: 53vw;
    height: auto;
    margin: 4.58vw 0 0 0;
}

.text-group {
    width: auto;
    height: auto;
    margin-top: 0.16vw;
}

.text_10 {
    width: auto;
    height: auto;
    overflow-wrap: break-word;
    color: rgba(3, 52, 113, 1);
    font-size: 1.77vw;
    font-family: Noto Sans SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 1.77vw;
}

.text_11 {
    width: auto;
    height: auto;
    overflow-wrap: break-word;
    color: rgba(3, 52, 113, 1);
    font-size: 0.52vw;
    font-family: Bronova-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 0.52vw;
    margin: 0.36vw 0 0 1.28vw;
}

.line {
    width: 1px;
    line-height: 0.52vw;
    background: #173162;
    border-radius: 0px 0px 0px 0px;
    opacity: 0.2;
    height: 1.8vw;
}

.text-group_2 {
    width: auto;
    height: auto;
    margin-top: 0.16vw;
}

.text_12 {
    width: auto;
    height: auto;
    overflow-wrap: break-word;
    color: rgba(3, 52, 113, 0.3);
    font-size: 1.77vw;
    font-family: Noto Sans SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 1.77vw;
}

.text_13 {
    width: auto;
    height: auto;
    overflow-wrap: break-word;
    color: rgba(3, 52, 113, 0.3);
    font-size: 0.52vw;
    font-family: Bronova-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 0.52vw;
    margin: 0.36vw 0 0 1.3vw;
}

/* 大事记容器 */
.milestones-container {
    width: 83.96vw;
    height: auto;
    margin-top: 3.13vw;
    margin-bottom: 5.21vw;
    padding: 0 56px;
}

/* 轮播展示区域 */
.milestones-carousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.13vw 0;
    margin-bottom: 2.17vw;
}

.milestone-content {
    text-align: center;
    max-width: 52.08vw;
}

.milestone-year {
    font-size: 10.17vw;
    font-family: PPNeueMontreal-Medium;
    font-weight: 500;
    color: rgba(3,52,113,0.1);
    line-height: 1.2;
    margin-bottom: 1.56vw;
}

.milestone-description {
    font-size: 1vw;
    font-family: Noto Sans SC-Regular;
    color: #000000;
    line-height: 1.88vw;
    white-space: pre-wrap;
    text-align: left;
    height: 5.5vw;
    min-height: 5.5vw;
}

/* 轮播按钮 */
.milestone-prev,
.milestone-next {
    position: absolute;
    width: 3.13vw;
    height: 3.13vw;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #CBD8E8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: rgba(3, 52, 113, 0.6);
}

.milestone-prev:hover,
.milestone-next:hover {
    background: rgba(3, 52, 113, 1);
    color: #ffffff;
    transform: scale(1.1);
}

.milestone-prev {
    left: 0;
}

.milestone-next {
    right: 0;
}

/* 时间线容器 */
.timeline-container {
    position: relative;
    padding: 2.08vw 0;
}

.timeline-years {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* 时间线背景线（灰色完整线） */
.timeline-years::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0.25vw;
    height: 1px;
    background: rgba(3, 52, 113, 0.2);
    z-index: 0;
}

/* 通过计算移除首尾延伸部分 */
.timeline-years {
    padding: 0;
}

/* 精确控制线条的起始和结束位置 - 从第一个点中心到最后一个点中心 */
.timeline-years::before {
    left: calc((100% / 18));
    right: calc((100% / 18));
}

/* 时间线进度线（蓝色激活线） - 从第一个点中心开始 */
.timeline-years::after {
    content: '';
    position: absolute;
    left: calc(100% / 18);
    top: 0.25vw;
    height: 1px;
    background: rgba(3, 52, 113, 1);
    z-index: 1;
    transition: width 0.5s ease;
    width: calc(var(--timeline-progress, 0) * 1%);
}

.timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    flex: 1;
}

.timeline-dot {
    width: 0.47vw;
    height: 0.47vw;
    border-radius: 50%;
    background: #C7D3E2;
    margin-bottom: 0.52vw;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

.timeline-item.active .timeline-dot,
.timeline-item.passed .timeline-dot {
    border-color: rgba(3, 52, 113, 1);
    background: rgba(3, 52, 113, 1);
    width: 0.47vw;
    height: 0.47vw;
}

.timeline-item.active .timeline-dot {
    box-shadow: 0 0 0.83vw rgba(3, 52, 113, 0.4);
}

.timeline-label {
    font-size: 0.94vw;
    font-family: PPNeueMontreal-Medium;
    color: rgba(3, 52, 113, 0.5);
    transition: all 0.3s ease;
}

.timeline-item.active .timeline-label,
.timeline-item.passed .timeline-label {
    font-weight: 700;
    color: rgba(3, 52, 113, 1);
}

.timeline-item.active .timeline-label {
    font-size: 1.04vw;
}

.timeline-item:hover .timeline-dot {
    transform: scale(1.2);
}

.timeline-item:hover .timeline-label {
    color: rgba(3, 52, 113, 0.8);
}