/*config*/ 
.l-relative{position:relative;}
.l-overflow{overflow:hidden;}
 
.about-c{padding:110px 0 0 410px;}
.about-c>.cont{position:absolute; left:6.770833333333333vw; top:160px;}
.about-c>.cont .since{color:#ffffff; opacity:.3; margin-top:240px;}
.history-item li{position:absolute; left:60px; top:30px; width: 75px; z-index:10; cursor:pointer; text-align: right;}
.history-item li:before,.history-item li:after{content:''; display:block; width:8px; height:8px; border-radius:50%; background:#fff; position:absolute; left:0; top:50%; margin-top:-5px; z-index:1;transition:cubic-bezier(0.215,.61,.355,1) .45s;}
.history-item li:after{z-index:-1; background:rgba(255,255,255,.3); transform:scale(2);}
.history-item li:nth-child(2n){top: 141px;left: 38px; text-align: left;}
.history-item li:nth-child(2n):before,.history-item li:nth-child(2n):after{left:auto; right:0;}
.history-item li:nth-child(3){top: 208px;left: 207px;}
.history-item li:nth-child(4){top: 354px;left: 182px;}
.history-item li:nth-child(5){top: 414px;left: 317px;}
.history-item li:nth-child(6){top: 470px;left: 248px;}
.history-item li:nth-child(7){top: 490px;left: 371px;}
.history-item li:nth-child(8){top: 544px;left: 380px;}
.history-item li.on:before{background:#F8AD00; transform:scale(1.5);}
.history-item li.on:after{transform:scale(2.5);}
.history-banner{position:absolute; left:220px; top:0; height:116px;}
.history-banner .cont{display:flex; align-items:center; position:relative; padding-left:10.5rem;}
.history-banner .cont .text{background:#fff; padding:20px; height: 6.875rem; min-width:500px; max-width:700px; font-size: 16px; color: #333333; line-height: 26px; display: flex; align-items: center;}
.history-banner .cont .ccont{margin-top:8px;}
.history-banner .cont>span{ height:100%; position:absolute; left:0; top:0; width:10.5rem; font-size: 32px; text-align:center; display:flex; align-items:center; justify-content:center; background:url(../images/history_time.png) left center no-repeat; }
 
.history-btn{margin-top:90px;}
.history-btn>a{display:flex; align-items:center; justify-content:center; float:left; width:100px; height:100px; border-radius:50%; background:#fff; font-size:24px; margin-left:30px;}
.history-btn>a:hover{background:#333; color:#fff;}
.history-btn>a:first-child{margin-left:0;}
 .swiper-cube-shadow,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right{display:none !important;}
.history-banner{transition:cubic-bezier(0.215,.61,.355,1) .45s;}
.His2 .history-banner{transform:translate(0, 40px);}
.His3 .history-banner{transform:translate(100px, 130px);}
.His4 .history-banner{transform: translate(120px, 242px);}
.His5 .history-banner{transform: translate(200px, 344px);}
.His6 .history-banner{transform: translate(219px, 384px);}
.His7 .history-banner{transform: translate(260px, 445px);}
.His8 .history-banner{transform: translate(320px, 450px);}
.history-targed{position:fixed; left:0; top:0; width:100%; height:100%; z-index:4;pointer-events: none;}
.Run .history-targed{pointer-events:inherit;}
.lh-history .img1{position:absolute; left:0; top:0;clip: rect(0,575px,50px,0);transition:cubic-bezier(0.215,.61,.355,1) .45s;}
.His2 .lh-history .img1{clip: rect(0,575px,155px,0);}
.His3 .lh-history .img1{clip: rect(0,575px,219px,0);}
.His4 .lh-history .img1{clip: rect(0,575px,362px,0);}
.His5 .lh-history .img1{clip: rect(0,575px,430px,0);}
.His6 .lh-history .img1{clip: rect(0,575px,503px,0);}
.His7 .lh-history .img1{clip: rect(0,575px,506px,0);}
.His8 .lh-history .img1{clip: rect(0,575px,557px,0);}
.history-banner .bd{transition-duration:0s!important;}
span.din{ font-size: 20px;font-family: BarlowCondensed-SemiBold;}
@media (max-width: 1440px){
    .history-banner .cont .text{ min-width: auto; width: 28rem;}
    .n_history .left{ margin-right: 0;}
    .His6 .history-banner {
        transform: translate(152px, 459px);
    }
}
@media (max-width: 1280px){
    .history-banner .cont .text{ min-width: auto; width: 23rem;}
 
}
@media (max-width: 1024px){
    .n_history .left { 
        position: absolute;
    }
    .n_history .right { transform: scale(.9);
        padding-left: 8rem;
    }
    .history-banner .cont .text{ font-size: 16px;}
}
@media (max-width: 768px){
    .history-banner {  left: 182px; z-index: 99;}
    .His2 .history-banner {
        transform: translate(0, 62px);
    }
    .His3 .history-banner {
        transform: translate(34px, 246px);
    }
    .His4 .history-banner {
        transform: translate(28px, 388px);
    }
    .His5 .history-banner {
        transform: translate(0px, 469px);
    }
    .His6 .history-banner {
        transform: translate(0px, 539px);
    }
}

@media (max-width: 480px){
    .n_history .right { transform: scale(1); flex-shrink: 0;
        padding-left: 0;
    }
    .lh-history{ transform: scale(.45);}
    .history-banner {  left: -10rem; top: calc(100% - 10rem); z-index: 99; transform: scale(1.5) !important;} 
    span.din{ font-size: 1.3rem;}
    .n_history {height: 40rem;}
}