* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'PingFang SC', sans-serif;
}

.main-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* 时间轴容器 */
.timeline-wrap {
    position: fixed;
    width: 150px;
    margin-right: 2rem;
    top: 55%;
    /*bottom: 20px;*/
    bottom: calc(150px + 20px); /* 底部模块高度 + 安全间距 */
    overflow-y: auto; /*增加滚动条*/
    /* 兼容 Firefox */
    scrollbar-width: none;
    /* 兼容 IE/Edge */
    -ms-overflow-style: none;
}

/* 美化滚动条 */
.timeline-wrap::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge */
    width: 4px;
}
.timeline-wrap::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}

/* 时间轴单项 */
.timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

/* 年份文本 */
.year {
    width: 110px;
    text-align: right;
    color: #666;
    font-size: 20px;
    transition: color 0.3s ease;
}

/* 时间轴节点 */
.timeline-dot {
    width: 12px;
    height: 12px;
    background: #e0e0e0;
    border-radius: 50%;
    margin: 0 15px;
    transition: all 0.3s ease;
}

/* 激活状态 */
.timeline-item.active .year {
    color: #004ca5;
}

.timeline-item.active .timeline-dot {
    background: #004ca5;
    transform: scale(1.2);
}

/* 右侧内容区域 */
.right-content {
    flex: 1;
    overflow-y: auto;
    min-height: 400px;
}

/* 内容列表 */
.content-list {
    margin-top: 20px;
    padding-left: 30px;
}

.content-item {
    font-size: 20px;
    margin-bottom: 1rem;
    line-height: 1.6;
    color: #333;
}

.content-item::before {
    content: "•";
    color: #004ca5;
    margin-right: 8px;
}
.content-item-imgs{
    /*width: 250px;*/
    /*height: 200px;*/
}
.content-item-date{
    font-family: 'Segoe UI', Arial, sans-serif; /* 现代字体 */
    font-size: 1.5rem;
    color: #004ca5;            /* 深蓝色 */
    letter-spacing: 1px;        /* 字母间距 */
    margin: 20px 0;
    padding-bottom: 10px;
    /*border-bottom: 2px solid #004ca5; !* 底部装饰线 *!*/
    font-weight: bold;

}
.content-item-name{
    font-family: 'Segoe UI', Arial, sans-serif; /* 现代字体 */
    font-size: 1.5rem;
    color: #004ca5;            /* 深蓝色 */
    letter-spacing: 1px;        /* 字母间距 */
    margin: 20px 0;
    padding-bottom: 10px;
    /*border-bottom: 2px solid #004ca5; !* 底部装饰线 *!*/
    font-weight: bold;
    margin-left: 20px;
}
.image-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;         /* 允许换行 */
    gap: 30px;              /* 图片间距 */
    /*max-width: 1200px;      !* 控制每行数量 *!*/
    margin: 20px 20px;
}

.image-box{
    width: 500px;           /* 固定宽度 */
    height: 370px;          /* 固定高度 */
    border-radius: 8px;     /* 圆角效果 */
    overflow: hidden;       /* 隐藏溢出部分 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 阴影效果 */
}

.content-item-content {
    font-family: '宋体', sans-serif;;
    font-size: 1.2rem;
    color: #939393;
    line-height: 1.6;
    max-width: 640px;
    font-weight: 300;
    padding-left: 15px;
}
.content-item-url{
    padding: 7px 0 0 15px;
    color: #346ce3;
}
.contentListDiv{
    background: #ffffff;
    border-radius: 12px;           /* 圆角半径 */
    box-shadow: 0 7px 15px rgba(0,0,0,0.1); /* 柔和阴影 */
    padding: 24px;
    margin: 16px;
    transition: transform 0.3s ease; /* 悬停动画 */
    margin-left: 180px;
}
.contentListDiv:hover {
    transform: translateY(-5px);   /* 悬停浮动效果 */
    box-shadow: 0 10px 15px rgba(0,0,0,0.2); /* 加深阴影 */
}