@charset "utf-8";

.subtab {margin: 2rem 0 3rem;}
.subtab ul {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #ddd;
    gap: 0 .5rem;
}
.subtab ul li {border: 1px solid #ddd;border-bottom: unset;border-radius: 0.5rem 0.5rem 0 0;}
.subtab ul li:last-child {}
.subtab ul li a {padding: 1rem 2rem;font-size: 20px;display: block;}
.subtab ul li.on {background-color:var(--color-main);border-color: var(--color-main);}
.subtab ul li.on a {color:#fff;}

.history_wrap {margin-bottom:10%}
.year_group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.his_year {width: 20%;padding-top: 1rem;}
.his_year strong {
    font-size: 40px;
    color: var(--color-main);
    position: relative;
    display: inline-flex;
    align-items: center;
}
.his_year strong:after {
    content:"";
    background-color: var(--color-main);
    border: 5px solid #E8F4E6;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-left: 2rem;
}
.his_year strong:before {
    content:"";
    position:absolute;
    background-color:#ddd;
    width:100%;
    height:1px;
    left: 100%;
    top: 50%;
    transform: translate(0%, -50%);
    z-index: -1;
}
.his_box {
    padding: 1rem;
    /* border: 1px solid #ddd; */
    border-radius: .5rem;
    width: 80%;
    background-color: #f8f8f8;
}
.mon_group {
    margin: 2rem 0;
}
.mon_group .month {
    color: var(--color-main);
    font-size: 22px;
    font-weight: 500;
    padding-bottom: .5rem;
    padding-left: .5rem;
}
.his_list {
    padding: 1rem;
    background-color: var(--color-bg-gray);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.his_list li {
    display: flex;
    /* margin: .8rem 0; */
    /* gap: 1rem 0; */
}
.his_list li span {
    width: 6%;
    display: block;
    font-weight: 500;
    color: #000;
    font-weight: 700;
}
.his_list .list_txt {
    width: 88%;
}
.his_list li p {
    word-break: keep-all;
    padding: .3rem 0;
}
.his_list li p:first-child {padding-top:0}
/* PC */ 
@media only screen and (min-width:1280px) and (max-width: 1600px)  {
    .his_list li span {width:11%}
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
    .list_full {
    display: flex;
    flex-wrap: wrap;
}
    .his_box {/* padding:1rem; */width: 100%;}
    .mon_group {margin: 1.5rem 0;}
    .mon_group:first-child {margin-top:1rem}
    .year_group {
    display: flex;
    flex-wrap: wrap;
}
    .his_year {width: 100%;margin-bottom: 1rem;}
    .his_year strong {
    display: inline-flex;
    flex-direction: row-reverse;
    font-size: 30px;
}
    .his_year strong:before {display:none}
    .his_year strong:after {margin-left: 0;margin-right: 1rem;}
    .his_list {padding: 0;}
    .his_list li span {width: 11%;}
    .his_list .list_txt {width:80%}
    
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    p, span {font-size:4.5vw}
    .subtab ul li a {padding:.5rem;font-size: 18px;}
    .his_year strong {font-size:8vw}
    .mon_group .month {font-size:6vw}
    .his_list li {
    flex-wrap: wrap;
}
    .his_list li span, .his_list .list_txt {width:100%}
    .his_list li span {padding-bottom:.5rem}
}