:root {
    --mobile-track-width: 0;
}

.hidden{overflow: hidden;position: absolute;width: 0;height: 0;}

.hist_menu{padding-top: 30px;}
.hist_menu button{display: none;}
.hist_menu .hist-menu-list-box{display: flex; flex-wrap: wrap; width: 100%;position: relative;} 
.hist_menu .hist-menu-list::before{content:""; display: block; position: absolute; left: 0; top: 29px; width: 100%; height: 2px; background-color: #eaeaea;}
.hist_menu .hist-menu-list-box::before,
.hist_menu .hist-menu-list-box::after{content:""; display: block; position: absolute; width: 2px; height: 15px; top: -8px; background-color: #eaeaea;}
.hist_menu .hist-menu-list-box::before{left: 0; background-color: #002e6e;}
.hist_menu .hist-menu-list-box::after{right: 0;}
.hist_menu .hist-line{position: absolute; left: 0; top: 29px; background-color: #002e6e; height: 2px; width: 0; transition: width 1s;}
.hist_menu .hist-menu-list-boxs{flex-grow: 1; position: relative; transform: translateX(50%);}
.hist_menu .hist-menu-list-boxs::before{content:""; display: block; position: absolute; left: 50%; margin-left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background-color: #bbbbbb;}
.hist_menu .hist-menu-list-boxs:last-child::before{display: none;}
.hist_menu .hist-menu-list-boxs a{font-size: 18px; color: #8a8a8a; font-family: "HG Bold"; padding-top: 30px; display: block; text-align: center;}
.hist_menu .hist-menu-list-boxs a span{background-image: linear-gradient(#8a8a8a, #8a8a8a); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 1px; transition: background-size .5s;}
.hist_menu .hist-menu-list-boxs.on a span{background-image: linear-gradient(#1174ff, #1174ff); }
.hist_menu .hist-menu-list-boxs a:hover span{background-size: 100% 1px;}
.hist_menu .hist-menu-list-boxs.on::before{background-color: #1174ff;}
.hist_menu .hist-menu-list-boxs.on::after{content:""; display: block; position: absolute; left: 50%; margin-left: -20px; top: -29px; width: 40px; height: 20px; background: url(../images/active_icon.png);}
.hist_menu .hist-menu-list-boxs.on a{color: #1174ff; font-family: "HG Bold";}
.hist_inner{display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 150px; margin-bottom: 130px;}
.hist_inner .thumYear{width: 42.7%;}
.hist_inner .thumYear p{font-size: 15px; line-height: 22px; letter-spacing: .025em; margin-top: 15px; padding: 0 80px 0 56px;}
.hist_inner .hist_list{width: 57.3%; padding-left: 30px; position: relative;}
.hist_inner .hist_list::before{content:""; display: block; position: absolute; left: 5px; top: 30px; width: 1px; height: 100%; background-color: #d8d8d8;}
.hist_inner .hist_list .box{margin-bottom: 57px;}
.hist_inner .hist_list .box:last-child{margin-bottom: 0;}
.hist_inner .hist_list .year{position: relative; margin-bottom: 4px;}
.hist_inner .hist_list .year::before{content:""; display: block; position: absolute; left: -29px; top: 23px; width: 10px; height: 10px; background-color: #1174ff; border-radius: 50%;}
.hist_inner .hist_list .year h1{font-size: 30px; color: #1174ff; font-family: "SBA Bold";} 
.hist_inner .hist_list .box-content{display: flex; flex-wrap: wrap; margin-bottom: 8px;}
.hist_inner .hist_list .box-content:last-child{margin-bottom: 0;}
.hist_inner .hist_list .box-content h2{font-size: 16px; color: #0066b3; font-family: "SBA Medium"; width: 60px;}
.hist_inner .hist_list .box-content ul{width: calc(100% - 60px);}
.hist_inner .hist_list .box-content li{font-size: 16px; color: #444444; padding-left: 17px; background: url(../images/hist_arrow.png) no-repeat left top 12px; margin-bottom: 6px;}
.hist_inner .hist_list .box-content li:last-child{margin-bottom: 0;}
.hist_inner .hist_list .nodate{text-align: center; font-family: "HG Regular"; font-size: 16px; padding: 15px 0;}

@media screen and (max-width: 1200px) {
    .hist_inner{margin-bottom: 78px;}
    .hist_menu .hist-menu-list-boxs a{font-size: 16px;}
    .hist_inner .thumYear p{padding: 0 60px 0 40px;}
}

@media screen and (max-width: 768px) {
    .hist_inner{margin-bottom: 78px;}
    .hist_menu{padding-top: 0;}
    .hist_menu .hist-menu-list-box{border-top: 0; position: relative;}
    .hist_menu .hist-menu-list-box::before, .hist_menu .hist-menu-list-box::after{top: 25px;}
    .hist_menu .hist-menu-list::before{top: 32px;}
    .hist_menu .hist-line{top: 62px; display: none;}
    .hist_menu .hist-menu-list-boxs{transform: translateX(0);}
    .hist_menu .slick-list{padding-top: 30px;}
    .hist_menu .slick-slide:last-child{display: none; visibility: hidden;}
    .hist_menu .slick-track::before{content:""; display: block; position: absolute; left: 0; top: 2px; background-color: #002e6e; height: 2px; width: var(--mobile-track-width);}
    .hist_menu .hist-menu-list-boxs a::before{content:""; display: block; position: absolute; left: 50%; margin-left: -5px; top: -2px; width: 10px; height: 10px; border-radius: 50%; background-color: #bbbbbb;}
    .hist_menu .hist-menu-list-boxs.on a::before {background-color: #1174ff;}
    .hist_menu .hist-menu-list-boxs.on::after {content: "";display: block;position: absolute;left: 50%;margin-left: -20px;top: -29px;width: 40px;height: 20px;background: url(../images/active_icon.png);}
    .hist_menu .hist-menu-list-boxs.on a {color: #1174ff;font-family: "HG Bold";}
 
    .hist_inner{flex-direction: column; margin-top: 50px;}
    .hist_inner .thumYear{width: 100%; margin-bottom: 30px;}
    .hist_inner .hist_list{width: 100%;}
}