/*********** List *************/
.history_list{width:100%; margin: 60px 0 0; padding: 0 0 0 100px; box-sizing:border-box; position: relative;}
.history_list .his_in{display:flex; align-items:flex-start; gap:60px; width:100%; padding-bottom:100px; border-bottom:1px solid var(--border); box-sizing:border-box;}
.history_list .his_in + .his_in{padding-top:100px;}
.history_list .his_in:last-of-type{border-bottom:0;}
.history_list .his_year{flex-shrink:0; font-family:var(--eng); font-weight:700; color:var(--main); line-height:126.32%; letter-spacing:var(--letter-spacing-none); white-space:nowrap;}
.history_list .his_txt{flex:1; min-width:0;}
.history_list .his_txt ul{display:flex; flex-direction:column; gap:5px; width:100%;}
.history_list .his_txt ul li{display:flex; gap:30px; width:100%;}
.history_list .his_txt ul li b{flex:0 0 80px; width:80px; font-weight:600; color:var(--black); letter-spacing:var(--letter-spacing-body); line-height:166.67%;}
.history_list .his_txt ul li span{flex:1; min-width:0; color:var(--basic); letter-spacing:var(--letter-spacing-body); line-height:166.67%; word-break:keep-all;}
.history_list .progressbar{position:absolute; left:0; top:0; width:2px; height:100%; background:linear-gradient(180deg, var(--border) 0%, var(--border) 85%, rgba(221,221,221,0) 100%); border-radius:2px; overflow:visible;}
.history_list .progressbar .progress{display:block; width:100%; height:0; position:absolute; top:0; left:0; background:linear-gradient(180deg, var(--main) 0%, #0056a8 100%); border-radius:2px; transition:height 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change:height;}
.history_list .progressbar .progress .dot{display:block; width:16px; height:16px; border-radius:50%; position:absolute; left:50%; bottom:0; transform:translate(-50%, 50%);}
.history_list .progressbar .progress .dot::before{content:''; display:block; width:100%; height:100%; border-radius:50%; background:rgba(0,70,142,0.35); position:absolute; left:0; top:0; z-index:1; transform-origin:center center; animation:historyDots 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;}
.history_list .progressbar .progress .dot::after{content:''; display:block; width:100%; height:100%; border-radius:50%; box-sizing:border-box; background:var(--white); border:4px solid var(--main); position:absolute; left:0; top:0; z-index:2; box-shadow:0 2px 8px rgba(0,70,142,0.18); transition:box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);}
.history_list .progressbar .progress.is-moving .dot::after{transform:scale(1.06); box-shadow:0 4px 12px rgba(0,70,142,0.28);}

@keyframes historyDots {
    0%{opacity:0.55; transform:scale(1);}
    65%{opacity:0.12; transform:scale(3.2);}
    100%{opacity:0; transform:scale(4.2);}
}



/*********** View *************/
.his_table{display:flex; flex-wrap:wrap;}
.his_table dt{font-size:1rem; width:100px; font-weight:600; color:var(--black); padding:3px 0;}
.his_table dd{font-size:1rem; width:calc(100% - 100px); padding:3px 0;}


/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){

/*********** List *************/
.history_list{padding: 0 0 0 50px;}


}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){

/*********** List *************/
.history_list{margin: 40px 0 0;}
.history_list .his_in{gap:30px; padding-bottom: 80px;}
.history_list .his_in + .his_in{padding-top:80px;}
.history_list .his_in{padding-top:80px;}
.history_list .his_txt ul li{gap:10px;}


}
/*******************************************************************************
    @media  ~980px
*******************************************************************************/
@media all and (max-width:980px){


/*********** List *************/
.history_list{margin: 0; padding: 0 0 0 30px;}
.history_list .his_in{padding-bottom: 50px; padding-top:50px;}
.history_list .his_in + .his_in{padding-top:50px;}


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/*********** List *************/
.history_list{padding: 0 0 0 20px;}
.history_list .his_in{gap:10px; padding-bottom: 30px; padding-top:30px; flex-direction: column;}
.history_list .his_in + .his_in{padding-top:30px;}
.history_list .his_txt{}
.history_list .his_txt ul li b{flex:0 0 60px; width:60px;}
.history_list .progressbar{width:1px;}
.history_list .progressbar .progress .dot{width:12px; height:12px;}
.history_list .progressbar .progress .dot::after{border-width: 3px;}



}