.baichen-history-section {background:linear-gradient(140deg,#e07e2d 50%,#eb5c20 100%);background-image:url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/category/427473/3155/62a3785604ae4af58cbc702e99c5f18f/2992582e-c147-40fd-81c6-189d998ccdf9.jpg');color:#fff;padding:60px 0 0 0;min-height:500px;position:relative;overflow:hidden;background-size:cover;}
.baichen-history-section h2 {font-size:36px;color:#fff}
.baichen-history-title {margin-bottom:40px;}
.baichen-history-subtitle {margin-top:18px;font-size:20px;color:var(--text-color);font-weight:400;letter-spacing:1px;}
.baichen-history-timeline {position:relative;width:100%;margin:0 auto;height:400px;}
.baichen-history-curve {position:absolute;left:0;top:0;width:100%;height:340px;z-index:1;pointer-events:none;}
.baichen-history-points {position:absolute;left:0;top:0;width:100%;height:180px;z-index:2;}
.baichen-history-point {position:absolute;transform:translateX(-50%) translateY(-50%);text-align:center;color:#fff;transition:color 0.3s;}
.baichen-history-point .baichen-history-date {font-size:20px;margin-bottom:8px;color:#fff;opacity:0.5;/* transform:translateY(-45px);*/}
.baichen-history-point .baichen-history-name,.baichen-history-point .baichen-history-location {font-size:16px;font-weight:400;color:#fff;opacity:0.5;}
.baichen-history-point .baichen-history-name {transform:translateY(70px);}
.baichen-history-point .baichen-history-location {transform:translateY(24px);}
.baichen-history-point::before {content:'';display:block;margin:0 auto;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.2);border:4px solid rgba(255,255,255,0.23);transition:border-color 0.3s,box-shadow 0.3s;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;}
.baichen-history-point.active::before {background:#fff;}
/* 光圈效果 */
.baichen-history-point::after {content:'';position:absolute;left:50%;top:50%;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,0.2);transform:translate(-50%,-50%);z-index:1;transition:all 0.3s ease;}
/* spark 呼吸动画 */
.baichen-history-point.spark::after {animation:breathe 2s ease-in-out infinite;}
@keyframes breathe {
0%,100% {width:28px;height:28px;opacity:0.6;}
50% {width:40px;height:40px;opacity:0.3;}
}
.baichen-history-point.active::before {border-color:#fff;opacity:1;}
.baichen-history-point.active .baichen-history-location,.baichen-history-point.active .baichen-history-date,.baichen-history-point.active .baichen-history-name {opacity:1;width:180px;}

@media (max-width:1440px) {
    .baichen-history-point .baichen-history-name{
        font-size: 14px !important;
        width: 140px !important;
    }
}
@media (max-width:1280px) {
    .baichen-history-point .baichen-history-name{
        font-size: 12px !important;
        width: 120px !important;
    }
    .baichen-history-section{padding: 60px 35px 0;}

}

@media (max-width:991px) {
.baichen-history-section{padding:30px 0;}
.baichen-history-section h2{font-size:30px;text-align:center;}  
.baichen-history-curve{display: none;}  
.baichen-history-points{
  position:static;
  height:auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}  
  
.baichen-history-point .baichen-history-name,.baichen-history-point .baichen-history-location {font-size:14px;}
.baichen-history-curve,.baichen-history-timeline{height:auto;}
.baichen-history-timeline{padding: 0 15px;}
.baichen-history-point{position:relative;transform:none;left:auto !important;text-align:left;padding: 0 0 0 18px;width: 50%;}  
.baichen-history-point+.baichen-history-point{margin-top:15px}  
.baichen-history-point.active .baichen-history-location, .baichen-history-point.active .baichen-history-date, .baichen-history-point.active .baichen-history-name{width:auto;}  
.baichen-history-point .baichen-history-name{transform:none;}
.baichen-history-point .baichen-history-location{transform:none;}  
.baichen-history-point::after{display:none;}
.baichen-history-point::before{left:0;top:7px;transform:none;background:#fff;}

.baichen-history-point .baichen-history-date{opacity:1;}
.baichen-history-point .baichen-history-name, .baichen-history-point .baichen-history-location{opacity:1;}

.baichen-history-point.active .baichen-history-location, .baichen-history-point.active .baichen-history-date, .baichen-history-point.active .baichen-history-name {width: 250px !important;}

}

@media(max-width:768px){
  .baichen-history-point.active .baichen-history-location, .baichen-history-point.active .baichen-history-date, .baichen-history-point.active .baichen-history-name {width: auto !important;}
}

@media (max-width:576px) {
.baichen-history-point .baichen-history-name,.baichen-history-point .baichen-history-location {font-size:12px;}
.baichen-history-point .baichen-history-date{font-size:18px;}
.baichen-history-section h2{font-size:26px;}  
}

@media (max-width:480px) {
.baichen-history-section h2{font-size:24px;}  
}