@charset "utf-8";

.sub_history {}

.tabbox {width:1600px;margin:0 auto;background-image: url(/img/page/history/bg.jpg);height: 380px;border-radius: 2rem;padding-top: 7rem;background-repeat: no-repeat;background-position: center;}
.tabbox strong {font-size:40px;color:#fff;text-align:center;padding-bottom: 1rem;display: block;}
.tabbox p {text-align:center;opacity:.7;font-weight:400;font-size: 18px;word-break: keep-all;}
.historytab_inner {margin-top:6rem}
.historytab {border-top: 4px solid rgb(255 255 255 / 20%);margin-top: 4rem;width: 100%;}
.historytab ul {display:flex;width: var(--width-size);margin: 0 auto;gap: 0 2rem;justify-content: center;margin-top: 1rem;}
.historytab li {opacity: .6;}
.historytab li a {color:#fff;font-size: 22px;}
.historytab li.on {opacity:1}

.section_box {position: relative;/* padding: 6rem 0 80px; */margin: 0 auto;width: var(--width-size);}
.history_bg {position:relative}
.history_bg:before {content:"";position: absolute;width:100%;height: 100%;background-color:#f8f8f8;z-index: -1;top: 100px;}
.conts_wrap {display:flex;width: 100%;}
.conts_wrap h4 {color:#fff;font-size:60px;width: 40%;}
.history_tit {
    color: var(--color-main);
    font-size: 50px;
    letter-spacing: 0;
}
.history_list {width: 60%;padding-top: 10px;}
.history_list > li {
    position: relative;
    /* padding: 2rem 0; */
    }
.history_list > li:first-child {padding-top:0}

.history_list li dl {
    position: relative;
    display: flex;
    justify-content: space-between;
}
.history_list li dt {font-size: 40px;font-weight:600;color: #fff;position: relative;width: 20%;padding: 3rem 0;}
.history_list li:first-of-type dt {color: var(--color-main);padding-top: 0;}
.history_list li dd {width: 75%;padding: 3rem 0;}
.history_list li:first-of-type dd {padding-top:0;}
.history_list li dt:before {content:"";position:absolute;height:100%;width:1px;background-color: #4a4a4a;right:0;margin-right: 9px;top:0;margin-top:20px}
.history_list li dt:after {content:"";position:absolute;width: 20px;height: 20px;background-color: #fff;border-radius:50%;right: 0;0:AUTO 100PX;/* margin-left: -2rem; */border: 6px solid rgb(46 46 46 / 70%);top: 0;margin-top: 66px;}
.history_list li:first-of-type dt:before {margin-top: 2rem;}
.history_list li:first-of-type dt:after {background-color: var(--color-main);/* margin-top: 1.5rem; */margin-top: 18px;}
.history_list .history_conts {padding-top: 6px;}
.history_conts li {
    position: relative;
    line-height: 26px;
    color: #fff;
    margin: .5rem 0;
    font-weight: 300;
    opacity: .8;
    word-break: keep-all;
}
.history_conts li span {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: #222;
}


/* PC */ 
@media only screen and (min-width:1025px) and (max-width: 1600px)  {
  .tabbox {width:96%}
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
    .tabbox {width: 94%;height: auto;padding: 3rem 0;}
    .historytab {margin-top:2rem}
    .conts_wrap h4 {width:30%;font-size: 50px;}
    .history_list {width:70%}
    .history_list li dt {font-size:30px;width: 22%;padding: 1.5rem 0;}
    .history_list li dt:after {
    margin-top: 36px;
}
    .history_list li:first-of-type dt:after {
    margin-top: 14px;
}
    .history_list li dd {margin-top: -6px;width: 72%;padding: 1.5rem 0;}
    .history_list li:first-of-type dd {margin-top:-3px}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    .tabbox {}
	.tabbox strong {font-size: clamp(1.5rem, 6vw, 2rem);padding: 0 3%;padding-bottom: 1rem;}
    .tabbox p {font-size: clamp(1rem, 4.5vw, 1.2rem);padding: 0 3%;}
    .conts_wrap {flex-wrap:wrap}
    .conts_wrap h4 {width:100%;font-size: clamp(1.5rem, 8vw, 1.8rem);}
    .historytab_inner {margin-top:3rem}
    .history_list {width:100%;padding-top: 2rem;}
    .history_list li dt {width:30%; font-size:24px}
    .history_list li dd {width:65%}
}