.history_tab { margin:0 auto 60px; }
.history_tab .history_tab_in ul { display:flex; justify-content:center; }
.history_tab .history_tab_in ul li { width:auto; margin:2px; }
.history_tab .history_tab_in ul li a { display:block; min-width:180px; height:65px; line-height:63px; border-radius:65px; box-sizing:border-box; padding:0 20px; text-align:center; border:1px solid var(--border); font-size:1rem; font-family:var(--eng); color:var(--basic); transition:all .3s; }
.history_tab .history_tab_in ul li a:hover { color:var(--black); border-color:var(--black); }
.history_tab .history_tab_in ul li.hover a { background:var(--main) !important; border-color:var(--main) !important; color:var(--white) !important; }


/*********** List *************/
.history_list { display:flex; flex-direction:column; gap:180px; position:relative; padding:80px 0 0; }
.history_list .his_in { display:flex; align-items:flex-start; gap:140px; position:relative; z-index:2; }
.history_list .his_img { flex:1; min-width:0; display:flex; flex-direction:column; gap:25px; align-items:center; position:sticky; top:100px; }
.history_list .his-swiper { width:100%;  border-radius:var(--borderR30); overflow:hidden;}
.history_list .his-swiper .img { position:relative; aspect-ratio: 695/452; overflow: hidden; background: var(--grayBg);}
.history_list .his-swiper .img img { display:block; width:100%; height:100%; object-fit:cover; }
.history_list .his-swiper .cap { position:absolute; left:0; bottom:0; width:100%; padding:17px 24px; box-sizing:border-box; background:rgba(42,38,35,0.55); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); text-align:center; }
.history_list .his-ctrl { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; }
.history_list .his-ctrl .count { display:flex; align-items:center; justify-content:center; gap:6px; width:80px; height:38px; background:var(--grayBg); border-radius:var(--borderR100); box-sizing:border-box; }
.history_list .his-ctrl .count .cur { font-size:0.8889rem; line-height:175%; font-weight:800; color:var(--black); letter-spacing:0.06em; }
.history_list .his-ctrl .count .slash { font-size:0.6667rem; line-height:200%; opacity:0.5; }
.history_list .his-ctrl .count .total { font-size:0.8889rem; line-height:175%; opacity:0.5; }
.history_list .his-ctrl .arrow { display:flex; align-items:center; gap:4px; }
.history_list .his-ctrl .arrow button { display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:1px solid var(--border); border-radius:var(--borderR100); background:var(--white); cursor:pointer; box-sizing:border-box; flex-shrink:0; transition:all .3s; }
.history_list .his-ctrl .arrow button::before { font-family:var(--icon); font-size:22px; line-height:22px; color:var(--black); transition:color .3s; }
.history_list .his-ctrl .arrow button:hover { background:var(--main); border-color:var(--main); }
.history_list .his-ctrl .arrow button:hover::before { color:var(--white); }
.history_list .his-ctrl .prev::before { content:"\e314"; }
.history_list .his-ctrl .next::before { content:"\e315"; }
.history_list .his-ctrl .playpause::before { content:"\e034"; font-size:18px !important; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;}
.history_list .his-ctrl .playpause.paused::before { content:"\e037"; }
.history_list .his_txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:20px; }
.history_list .his_txt h4 { font-weight:800; color:var(--main); letter-spacing:0; }
.history_list .his_txt ul { display:flex; flex-direction:column; gap:8px; }
.history_list .his_txt ul li { display:flex; align-items:flex-start; }
.history_list .his_txt ul li b { width:105px; flex-shrink:0; font-weight:600; font-family:var(--eng); color:var(--black); }
.history_list .his_txt ul li span { flex:1; min-width:0; }
.history_list .progressbar { display:block; position:absolute; left:50%; top:0; width:27px; height:100%; margin-left:-13px; z-index:1; pointer-events:none; }
.history_list .progressbar::before { content:''; position:absolute; left:50%; top:0; width:1px; height:100%; margin-left:-0.5px; background:var(--border); }
.history_list .progressbar .progress { display:block; width:3px; height:0; background:var(--main); border-radius:3px; position:absolute; left:50%; top:0; margin-left:-1.5px; transition:height .35s linear; }
.history_list .progressbar .progress::before { content:''; position:absolute; left:50%; bottom:0; width:27px; height:27px; margin:0 0 -13.5px -13.5px; background:var(--main); opacity:0.2; border-radius:50%; }
.history_list .progressbar .progress::after { content:''; position:absolute; left:50%; bottom:0; width:9px; height:9px; margin:0 0 -4.5px -4.5px; background:var(--main); border-radius:50%; }


.his_table{display: flex; flex-direction: column; gap: 8px;}
.his_table dl{display: flex;}
.his_table dt{width: 90px;}
.his_table dd{flex: 1;}

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



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


/*********** List *************/
.history_list .his_in { gap:90px; }


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

/*********** List *************/
.history_list { gap:100px; padding:10px 0 0; }
.history_list .his_in { gap:30px; flex-wrap: wrap; box-sizing: border-box; padding: 0 0 0 50px;}
.history_list .his_img { top:auto; position: relative; flex: auto; width: 100%; }
.history_list .his_txt { gap:15px; flex: auto; width: 100%; }
.history_list .progressbar {margin-left:0; left: 0;}
.history_list .his_txt ul li b { width:90px;}


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

/*********** List *************/
.history_list { gap:60px; padding:0; }
.history_list .his_in { gap:20px; padding: 0 0 0 30px;}
.history_list .his_img { gap:15px;}
.history_list .his-swiper .cap {padding:10px 15px;}
.history_list .his-ctrl .count {width:60px; height:30px;}
.history_list .his-ctrl .arrow button { width:30px; height:30px; }
.history_list .his-ctrl .arrow button::before { font-size:18px; line-height:18px;  }
.history_list .his-ctrl .playpause::before { font-size:14px !important; }
.history_list .his_txt { gap:10px; }
.history_list .his_txt ul { gap:6px; }
.history_list .his_txt ul li b { width:85px;}
.history_list .progressbar { width:21px; margin-left:0; left: 0;}
.history_list .progressbar .progress { width:2px; margin-left:-1px; }
.history_list .progressbar .progress::before { width:21px; height:21px; margin:0 0 -11px -11px; }
.history_list .progressbar .progress::after { width:7px; height:7px; margin:0 0 -4px -4px;}





}