/* 调整.main容器的大小 */
  .timeline_container {
    width: 1500px;
    height: 840px;
    display: flex;
    position: relative;
    background: rgba(243, 242, 242, 0.2); /*半透明背景 */
    overflow: hidden;
    margin: 80px auto; /* 垂直和水平居中 */
}

.iconfont {
    width: 80px;
    height: 80px;
    position: absolute;
    left: 27%;
    z-index: 999;
    font: 900 80px '';
    color: #fff;
}

#prev-btn {
    top: 5%;
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    color: #bfbfbf;
    transition: all 0.5s ease; /* 添加过渡动画 */
}

#prev-btn:hover {
    transform: scale(1.2); /* 放大并上浮 */
    color: #244fb8;
}

#next-btn:hover {
    transform: scale(1.2); /* 放大并上浮 */
    color: #244fb8;
}

#next-btn {
    bottom: 5%;
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    color: #bfbfbf;
    transition: all 0.5s ease; /* 添加过渡动画 */
}

#event-content {
    width: 43%;
    height: 100%;
    position: absolute;
    left: 8%;
    overflow: hidden;
    /* background-color: #244fb8; */
}

.event-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #999898;
    transition: transform .8s ease-in-out;
    transform: translateY(0);
}

.event-time {
    font-size: 40px;
    font-weight: 700;
}

.event-title {
    font-size: 40px;
    font-weight: 500;
    padding-bottom: 10px;
    border-bottom: 1px solid #bfbfbf;
    margin-bottom: 10px;
    text-align: justify;
}

.event-passage p {
    font-size: 21px;
    font-weight: 500;
    text-align: justify;
    text-indent: 2em; /* 首行缩进2em，可以根据需要调整 */
}

#timeline-circle {
    height: 125%;
    aspect-ratio: 1 / 1;
    position: absolute;
    right: -28%;
    top: -16%;
    border-radius: 50%;
    background-color: white;
    border: #244fb8 30px solid;
}

@media(max-width:1000px) {
    #timeline-circle {
        right: -90%;
    }
}

#circle-table {
    width: 96%;
    height: 96%;
    border-radius: 50%;
    position: absolute;
    top: 2%;
    left: 2%;
    transition: transform .8s ease-in-out;
    transform: rotate(0);
}

.invisible-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform-origin: 50% 50%;
    position: absolute;
}

.circle-thick {
    width: 6%;
    height: 6px;
    background-color: #bfbfbf;
    position: absolute;
    top: calc(50% - 3px);
    left: 0px;
}

.circle-thick span {
    font-size: 35px;
    position: absolute;
    left: 140%;
    top: calc(50% - 30px);
    color: #bfbfbf;
}

.circle-scale {
    width: 4%;
    height: 2px;
    background-color: #bfbfbf;
    position: absolute;
    top: calc(50% - .5px);
    left: 0px;
}

/* 新增样式 */
.circle-thick span, .circle-thick {
    transition: all 0.5s ease; /* 添加过渡动画 */
}

.circle-thick span.active-year {
    font-size: 50px !important;
    color: #244fb8 !important;
    font-weight: bolder;
}

.circle-thick.active-thick {
    width: 9% !important;
    height: 8px !important;
    background-color: #244fb8 !important;
}

.event-time {
    display: none;
}