:root{--primary-blue:#075a9d;--text-dark:#333333;--text-gray:#666666;--line-gray:#e0e0e0;--dot-gray:#a6a6a6;--bg-color:#f7f8fa}
.timeline-header{width:100%;padding:30px 15px 0;text-align:center}
.main-title{margin:0 0 10px;color:var(--text-dark);font-size:clamp(28px,4vw,44px);line-height:1.2;font-weight:700}
.gradient-line{width:70px;height:8px;margin:15px auto 22px;padding:0;border:0;border-radius:10px;background:linear-gradient(90deg,#ffdc73 0%,#00c6ff 50%,#ff007f 100%)}
.sub-title{margin:0 0 8px;color:var(--text-dark);font-size:clamp(14px,2vw,18px);line-height:1.5;font-weight:600}
.intro-text{width:100%;max-width:1300px;margin:0 auto;color:var(--text-gray);font-size:clamp(13px,1.5vw,16px);line-height:1.55}
.intro-text p{margin:0}
.timeline-slider-container{position:relative;width:100%;max-width:1570px;min-height:535px;overflow:hidden}
.timeline-slider-container .swiper-wrapper{width:100%}
.timeline-slider-container .swiper-slide{width:100%;height:auto}
.slide-layout{display:flex;flex-direction:column;width:100%;min-height:535px}
.content-area{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:flex-end;width:100%;padding:0 30px 58px;text-align:center}
.event-title{max-width:1400px;margin:0 0 15px;color:var(--primary-blue);font-size:clamp(24px,3vw,38px);line-height:1.25;font-weight:700}
.event-desc{width:100%;max-width:1350px;color:var(--text-gray);font-size:clamp(13px,1.5vw,16px);line-height:1.6}
.event-desc p{margin:0;overflow:hidden;white-space:wrap;text-overflow:ellipsis;-webkit-line-clamp:4;display:-webkit-box;-webkit-box-orient:vertical}
.year-area{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding-top:25px}
.huge-year{margin:0;color:#cbddec;font-size:clamp(70px,12vw,160px);line-height:.9;font-weight:900;letter-spacing:-3px;white-space:nowrap;user-select:none}
.global-timeline-ui{position:absolute;top:51%;left:5.45%;width:89.1%;height:1px;background:var(--line-gray);z-index:50}
.timeline-active-line{position:absolute;top:0;left:0;width:0;height:1px;background:#075a9d;transform-origin:left center;transform:scaleX(0);opacity:0;z-index:51;pointer-events:none}
.timeline-active-line.play{opacity:1;animation:middle 6s linear forwards}
@keyframes middle{0%{transform:scaleX(0)}
100%{transform:scaleX(1)}
}.timeline-dots{position:absolute;top:50%;left:0;width:100%;height:1px;display:flex;align-items:center;justify-content:space-between;transform:translateY(-50%);z-index:52}
.dot-item{position:relative;width:6px;height:6px;flex:0 0 6px;padding:0;margin:0;border-radius:50%;background-color:var(--dot-gray);cursor:pointer;transition:background-color .25s ease}
.dot-item::before{content:'';position:absolute;top:-18px;left:-18px;right:-18px;bottom:-18px}
.dot-item.active{background-color:var(--primary-blue)}
@media screen and (max-width:1024px){.timeline-header{padding-top:25px}
.timeline-slider-container{min-height:480px;margin-top:60px}
.slide-layout{min-height:480px}
.content-area{padding:0 25px 50px}
.event-title{font-size:32px}
.event-desc{max-width:900px;font-size:15px}
.year-area{padding-top:25px}
.huge-year{font-size:115px}
.global-timeline-ui{left:5%;width:90%;top:51%}
}@media screen and (max-width:768px){.timeline-header{padding:25px 15px 0}
.main-title{font-size:32px}
.gradient-line{width:60px;height:6px;margin:12px auto 18px}
.sub-title{font-size:15px}
.intro-text{font-size:13px;line-height:1.7}
.timeline-slider-container{min-height:450px;margin-top:50px}
.slide-layout{min-height:450px}
.content-area{padding:0 20px 42px}
.event-title{font-size:26px;line-height:1.35;margin-bottom:13px}
.event-desc{font-size:13px;line-height:1.7}
.year-area{padding-top:20px}
.huge-year{font-size:85px;letter-spacing:-2px}
.global-timeline-ui{left:5%;width:90%;top:58%}
.dot-item{width:6px;height:6px;flex-basis:6px}
}@media screen and (max-width:480px){.timeline-header{padding:22px 12px 0}
.main-title{font-size:28px}
.gradient-line{width:55px;height:5px;margin:10px auto 15px}
.sub-title{font-size:14px}
.intro-text{font-size:12px}
.timeline-slider-container{min-height:410px;margin-top:40px}
.slide-layout{min-height:410px}
.content-area{padding:0 15px 35px}
.event-title{font-size:21px}
.event-desc{font-size:12px;line-height:1.7}
.year-area{padding-top:20px}
.huge-year{font-size:62px;letter-spacing:-1px}
.global-timeline-ui{left:7%;width:86%;top:62%}
.dot-item{width:5px;height:5px;flex-basis:5px}
}