@charset "utf-8";

.sub_con{}
.history{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* padding: 8% 14%; */
}
.history .sub_tab {
    width: 15%;
}
.history .sub_tab ul {
}
.history .sub_tab ul li {
    font-size: 1.1em;
    border: 1px solid var(--color-main);
    border-radius: 3em;
    margin-bottom: 1em;
    text-align: center;
}
.history .sub_tab ul li a {display:block;width:100%;height:100%;padding: 1em;}
.history .sub_tab ul li.on {background-color:var(--color-main); }
.history .sub_tab ul li.on a {color:#fff;}
.history_inner {
    /* padding: 2% 13% 6%; */
    display: flex;
    flex-direction: column;
    width: 85%;
}
.history_list_wrap {padding-bottom: 6%;}
.history_list_wrap .history_list {
    width: 80%;
    float: right;
    position: relative;
}
.history_list_wrap .history_list h4 {
    position: absolute;
    left: -35%;
    font-size: var(--font-size40);
    text-align: right;
    color: var(--color-main);
    top: -19px;
}
.history_list_wrap .history_detail {padding-left: 10%; position:relative}
.history_list_wrap .history_list:before {content:"";position:absolute;width:1px;height: 86%;background-color:#ddd;left: 0;top: 0;margin-top: 10px;}
.history_list_wrap .history_detail:after {content:"";background-color: var(--color-main);width: 8px;height: 8px;position:absolute;border-radius:50%;top: 0;left: -4px;margin-top: 9px;}

.history_detail .history_item {
    font-size: 20px;
    padding-left: 14rem;
    position: relative;
    margin-bottom: 3rem;
}
.history_detail .history_item strong {position:absolute;top: 0;font-size: 22px;line-height: 1.3;/* letter-spacing: -0.025em; */font-weight: 600;color:#000;left: 0;}
.history_detail .history_item span {position:relative;display:block;font-size: 1em;line-height: 1.3;letter-spacing:-0.065em;color: #444;word-break: keep-all;}

/* 연혁 왼쪽 */
.history_list_wrap.left .history_list {
    float: left;
    text-align: right;
}.history_list_wrap.left .history_detail {padding-left: 0;padding-right: 10%;}
.history_list_wrap.left .history_list h4 {left: unset;right: -49%;}
.history_list_wrap.left .history_item {padding-right: 7.5rem;padding-left: 0;}
.history_list_wrap.left .history_item strong {
    right: 0;
}
.history_list_wrap.left .history_list:before {
    left: unset;
    right: 0;}
.history_list_wrap.left .history_list:after {
    left: unset;
    right: -4px;}



/* PC */ 
@media only screen and (min-width:1025px) and (max-width: 1500px)  {
}
/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
    .history {flex-wrap: wrap;}
    .history .sub_tab {width:25%}
    .history_inner {width:75%}
    .history_list_wrap .history_list {width:90%}
    .history_list_wrap .history_detail {padding-left:2rem}
    .history_detail .history_item {padding-left: 23%;}
    .history_detail .history_item strong {font-size:20px}
    .history_detail .history_item span {font-size:17px}
}
/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media screen and (max-width:767px) {
    .history .sub_tab {width:100%; margin-bottom:2rem}
    .history .sub_tab ul {display:flex; gap:1rem}
    .history .sub_tab ul li {width:200px}
    .history_inner {width:100%}
    .history_list_wrap .history_list {width:100%}
    .history_detail .history_item {padding-left:100px}
    .history_detail .history_item strong {font-size:18px}
    .history_detail .history_item span {font-size:16px}
    .history_list_wrap .history_detail:after {}
    
    
}