/*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: 90px; 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:nth-child(9){top: 590px;left: 490px;}
.history-item li:nth-child(10){top: 630px;left: 420px;}
.history-item li:nth-child(11){top: 680px;left: 490px;}
.history-item li:nth-child(12){top: 720px;left: 380px;}
.history-item li:nth-child(13){top: 760px;left: 420px;}
.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: 398px;}
.history-banner .cont{display:flex; position:relative; padding-left:10.5rem;}
.history-banner .cont .develop_zi{ background-color: #ffffff; min-width: 502px; max-width: 700px;}
.history-banner .cont .text{ height: 110px; padding:20px; 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:110px; 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;transform:translate(200px, 150px);}
/* .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);}
.His9 .lh-history .img1{clip: rect(0,575px,600px,0);}
.His10 .lh-history .img1{clip: rect(0,575px,640px,0);}
.His11 .lh-history .img1{clip: rect(0,575px,680px,0);}
.His12 .lh-history .img1{clip: rect(0,575px,740px,0);}
.His13 .lh-history .img1{clip: rect(0,575px,780px,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);
    }
    .history-banner{ left: 110px;}
}
@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);
    }
    .n_history {
        height: auto;
        padding: 8vw 0;
    }
    .history-banner {
        height: auto;
    }
    .history-banner .swiper-slide {
        height: 100% !important;
    }
    .n_history .right {
        transform: scale(1);
        padding-left: 0;
    }
    .history-banner .cont>span {
        height: 12.8vw;
        line-height: 12.8vw;
        position: static;
        width:auto;
        font-size: 8.5vw;
        background: none;
        justify-content: flex-start;
    }
    .history-banner .cont {
        padding-left: 0;
        flex-direction: column;
    }
    .history-banner .cont .text {
        height: 14.6vw;
        width: 100%;
        font-size: 5.3vw;
        line-height: 6.6vw;
        color: #ffffff;
        padding: 0;
    }
    .history-banner .cont .develop_zi {
        min-width: 100%;
        background-color: transparent;
    }
    .n_history .left {
        position: static;
    }
}