@charset "utf-8";

.his_tit {
    margin-bottom: var(--sub_pd_half);
}
.his_tit h4 {
    color: var(--color-main);
    font-weight: 700;
    margin-bottom: 1rem;
}
.his_tit p {font-size: 20px;}
.tab_inner {}
.history_wrap {position:relative}
.history_wrap:before {content:"";position:absolute;display:block;width:1px;height: 83%;background-color:#ddd;left: 27.5rem;top: 2rem;z-index: -1;}

.history_list {/* display: flex; *//* flex-wrap: wrap; */position: relative;display: block;padding: 1rem 0;}
.history_list .year {width: 27rem;font-size: 38px;color: var(--color-main);font-weight: 700;text-align: center;position: relative;line-height: 1.5;display: inline-block;position: absolute;top: 0;left: 0;margin-top: 1rem;}
.history_list .year:after {content:"";position:absolute;display:block;width: 10px;height: 10px;background-color: var(--color-main);border-radius:50%;top: 20px;right: -12px;outline: 6px solid #ffeee1;}
.history_list .detail {/* width: 70%; */line-height: 1.5;position: relative;padding: 1rem 0;padding-left: 30rem;display: block;}
.history_list .detail + .detail {padding-top: 0;}
.history_list .detail dl {display:flex}
.history_list .detail dl + dl {padding-top: 1.5rem;}
.history_list .detail dt {width: 5%;}
.tab_inner .history_list:first-of-type .detail::before {margin-top:2rem}

/* PC */ 
@media only screen and (min-width:1280px) and (max-width: 1400px)  {
  
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
    .history_list .year {width: 12rem;}
    .history_list .year:after {/* right: 0; */}
    .history_list .detail {padding-left: 15rem;}
    .history_wrap:before {left: 12.5rem;}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    .history_wrap:before {left:5.5rem}
    .history_list .year {width: 5rem;font-size: 24px;}
    .history_list .detail {padding: .5rem 0;padding-left: 7rem;}
    .history_list .year:after {top: 13px;}
    .history_list .detail dl {flex-wrap:wrap}
    .history_list .detail dt {font-size: clamp(.85rem, 4.2vw, .9rem);width:12%}
    .history_list .detail dd {font-size: clamp(.85rem, 4.2vw, .9rem);}
}