@charset "utf-8";
/* CSS Document */
/* 命名空间：所有样式包裹在 .timeline-wrap 下，不污染外部页面 */
.timeline-wrap *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  	font-family: "DM Sans", Inter, Roboto, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  	font-weight: 400;
 	letter-spacing: 0.01em;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
.timeline-wrap{
    background: #fff;
    padding: clamp(30px,5vw,80px) clamp(20px,8vw,120px);
    display: flex;
    gap: clamp(20px,4vw,60px);
    align-items:flex-start;
    overflow-x: hidden;
    max-width: 1200px;
    margin: 0 auto;
}
/* ========== 竖排标题 ========== */
.timeline-wrap .vertical-title{
    font-size: clamp(40px,8vw,100px);
    color:#bbbbbb;
    letter-spacing: 4px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    flex-shrink:0;
}
/* 时间线容器 */
.timeline-wrap .timeline-container{
    position: relative;
    flex:1;
    min-width:0;
}
/* 中间蓝色竖主线 */
.timeline-wrap .timeline-line{
    width:3px;
    background-color:#003399;
    height: 100%;
    position:absolute;
    left:200px;
    top:0;
    z-index:1;
}
/* 单个时间节点 */
.timeline-wrap .timeline-item{
    position:relative;
    display:flex;
    align-items:center;
    min-width:0;
}
/* 蓝色圆点 */
.timeline-wrap .dot{
    width:18px;
    height:18px;
    border-radius:50%;
    background:#003399;
    z-index:2;
    position:absolute;
    left:193px;
}
/* 年份文字（蓝色） */
.timeline-wrap .year{
    font-size: clamp(20px,3vw,32px);
    color:#003399;
    white-space: nowrap;
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
/* 年份下划线，宽度贴合文字，不长出去 */
.timeline-wrap .year::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background-color:#003399;
    transition: width 0.9s ease;
}
.timeline-wrap .year.show{
    opacity: 1;
    transform: translateY(0);
}
.timeline-wrap .year.show::after{
    width: 100%;
}
/* 地点文字（红色）统一字号 */
.timeline-wrap .place{
    font-size: clamp(15px,3vw,25px);
    color:#dd2222;
    overflow-wrap:normal;
    word-break:normal;
    hyphens: none;
}
/* 多行文本模块，和place字号保持一致 */
.timeline-wrap .us-block{
    font-size: clamp(15px,3vw,25px);
    line-height:1.6;
}
.timeline-wrap .blue-word{
    color:#003399;
}
.timeline-wrap .red-word{
    color:#dd2222;
}
/* 左侧文本 */
.timeline-wrap .text-left{
    text-align:right;
    width:200px;
    padding-right: 70px;
    flex-shrink:0;
}
/* 右侧文本容器 */
.timeline-wrap .text-right{
    padding-left: 70px;
    min-width:0;
}

/* ===== 桌面端：标题与主体拉大间距 ===== */
@media (min-width:768px){
    .timeline-wrap{
        gap: clamp(60px,6vw,120px);
    }
    .timeline-wrap .timeline-line{
        left:200px;
    }
    .timeline-wrap .dot{
        left:193px;
    }
}

/* 移动端适配 768px以下 */
@media (max-width:767px){
    .timeline-wrap .timeline-line{
        left:80px;
    }
    .timeline-wrap .dot{
        left:73px;
    }
    .timeline-wrap .text-left{
        width:80px;
        padding-right:35px;
    }
    .timeline-wrap .text-right{
        padding-left:35px;
    }
}