@charset "utf-8";

.art-his-wrap {
    display: flex;
    margin-top: var(--sub_pd);
}
.his-tab {width: 20%;}
.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}
.art-his-contents{width: 80%;padding-left: 2rem;}
.his-list {
    display: flex;
    flex-wrap: wrap;
    /* gap: 2rem 0; */
}
.his-list .year {
    width: 15%;
    padding-left: 3rem;
    color: var(--color-main);
    font-size: 26px;
    font-weight: 600;
    position: relative;
    padding-bottom: 2rem;
}

.his-list .year:last-of-type {
    padding-bottom: 0
}

.his-list .year:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--color-main);
    border-radius: 50%;
    border: 5px solid rgb(255 255 255 / 80%);
    left: 0;
    top: 0;
    margin-top: 8px;
}

.his-list .year:after {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: rgb(213 220 237);
    left: 0;
    margin-left: 10px;
    z-index: -1
}

.his-list ul {
    width: 85%;
    padding-bottom: 2rem;
}


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

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
    .art-his-wrap {flex-wrap:wrap}
    .his-tab {width:100%; margin-bottom:3rem}
    .his-tab ul {display:flex; gap:1rem}
    .his-tab ul li {}
    .his-tab ul li  + li {margin-top:0}
    .art-his-contents {width:100%;padding-left:0}
    .his-list .year {width:20%}
    .his-list dl {width:80%}
    .his-list dl dt {width:15%}
    .his-list dl dd {width:85%}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) {
    .his-list .year {
        padding-left: 1.5rem;
        font-size: 22px;
        width: 25%;
    }

    .his-list .year:before {
        width: 18px;
        height: 18px;
        margin-top: 6px;
    }

    .his-list ul {
        width: 75%;
        padding-left: 1rem;
    }

    .his-list ul li+li {
        margin-top: 5px
    }
}