@charset "utf-8";

.history_wrap {display: flex;position: relative;}
.his_tab {width: 20%;position:sticky;top: 180px;left:0;height:auto;align-self: flex-start;}
.his_tab ul {}
.his_tab ul li {font-size:22px;width: 70%;text-align: center;}
.his_tab ul li + li {margin-top:2rem}
.his_tab ul li a {padding:1rem 3rem;display:inline-block;border-radius:2rem;background-color: #f7f7f7;width: 100%;}
.his_tab ul li.on a {background-color:var(--color-main); color:#fff}
.his_conts {width:80%}
.his_list {}
.his_list .year {font-size:30px;color:var(--color-main);font-weight: 700;border-bottom: 2px solid var(--color-main);padding-bottom: 1rem;margin-top: 3rem;}
.his_list .year:first-child {margin-top:0}
.his_list dl {margin-top:1rem; display:flex}
.his_list dl dt {width:20%;color: #666;}
.his_list dl dd {width:80%}

/* PC */ 
@media only screen and (min-width:1280px) and (max-width: 1600px)  {
  
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
    .history_wrap {flex-wrap:wrap}
    .his_tab {width:100%;top: 120px;padding: 1rem 0;background-color: #fff;}
    .his_tab ul {display:flex}
    .his_tab ul li {width:100%;font-size: 18px;}
    .his_tab ul li + li {margin-top:0; margin-left:1rem}
    .his_tab ul li a {padding:1rem}
    .his_conts {width:100%; margin-top:2rem}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    .his_tab ul li {}
    .his_tab ul li + li {margin:0}
    .his_tab ul li a {padding:.5rem 0}
    .his_list dl {flex-wrap:wrap}
    .his_list dl dt {font-size:16px; width:100%; margin-bottom:5px}
    .his_list dl dd {width:100%}
}