/*     1236465 : HTML 편집기      */
.sub_history * {
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    word-break: keep-all;
    line-height: 1.6em;
    box-sizing: border-box;
    color: #000;
}

.sub_history {
    position: relative;

}

.sub_history .inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.sub_history .year_warp {
    position: absolute;
    top: 0px;
    left: calc(100% - var(--max-wdith));
    z-index: 10;
    padding-left: 210px;
}

.sub_history .year {
    position: absolute;
    transition: .3s;
    font-weight: 800;
    font-size: 64px;
    opacity: 0;
    line-height: 1em;
    letter-spacing: -0.02em;
    width: 260px;
}

.sub_history .year:after {
    content: '';
    width: 80px;
    height: 1px;
    background: #cfcfcf;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.sub_history .year.active {

    transition: .3s;
    opacity: 1;
}



.sub_history .conts_area {
    position: relative;
    overflow: hidden;
}

.sub_history .conts_wrap {
    padding-left: 600px;
}

.sub_history .item {
    min-height: 20vh;
    font-size: 18px;
    position: relative;
}

.sub_history .item:after {
    content: '';
    position: absolute;
    font-size: 112px;
    line-height: 112px;
    letter-spacing: -0.06em;
    font-weight: 900;
    font-style: italic;
    opacity: .1;
    bottom: 0%;
    right: 2%;
    color: #898989;
}

.sub_history .it1:after {
    content: '2023'
}

.sub_history .it2:after {
    content: '2021'
}

.sub_history .it3:after {
    content: '2020'
}

.sub_history .it4:after {
    content: '2018'
}

.sub_history .it5:after {
    content: '2016'
}

.sub_history .it6:after {
    content: '2015'
}

.sub_history .it7:after {
    content: '2014'
}

.sub_history .it8:after {
    content: '2013'
}

.sub_history .it9:after {
    content: '2012'
}

.sub_history .it10:after {
    content: '2011'
}

.sub_history .it11:after {
    content: '2010'
}

.sub_history .it12:after {
    content: '2009'
}

.sub_history .it13:after {
    content: '2018'
}

.sub_history .it14:after {
    content: '2007'
}




.sub_history .item:not(:last-child) {
    border-bottom: 1px dashed #ddd;
    padding-bottom: 2em;
    margin-bottom: 2em
}

.sub_history .conts_wrap .item .box {
    position: relative;
    padding-left: 65px;
}

.sub_history .conts_wrap .item .box:not(:last-child) {
    margin-bottom: 30px;
}

.sub_history .conts_wrap .item .conts {
    white-space: pre-line;
    line-height: 2em
}

.sub_history .conts_wrap .item .date {
    position: absolute;
    font-weight: 700;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--scd-clr);
    color: #fff;
    border-radius: 4px;
    width: 2em;
    height: 2em;
}

.sub_history .conts_wrap .item:nth-of-type(even) .date {
    background: var(--prm-clr)
}


@media (max-width:1023px) {
    .sub_history .inner {padding: 0 15px;}

    .sub_history .conts_wrap {
        padding-left: 250px;
    }

    .sub_history .year_warp {
        padding: 0;
    }

    .sub_history .year {
        font-size: 44px;
        width: 220px;
    }

    .sub_history .item {
        font-size: 16px;
    }
}

@media (max-width:767px) {
    .sub_history .year {
        font-size: 32px;
        width: 52px;
        word-break: break-all;
        text-align: center;
    }

    .sub_history .year:after {
        display: none;
    }

    .sub_history .conts_wrap {
        padding-left: 80px;
    }

    .sub_history .item {
        min-height: 11vh;
    }

    .sub_history .item:after {
        font-size: 40px;
        line-height: 40px;
    }

    .sub_history .conts_wrap .item .box {
        padding-left: 46px;
    }
}