@charset "utf-8";

.history-wrap {}
.history-wrap > ul {}
.history-wrap > ul > li {display: flex;}
.history-wrap > ul > li .history-year {font-size: 3.75em; font-weight: 800; width: 150px; margin-right: 140px; position: relative;}
.history-wrap > ul > li .history-cont {display: flex; align-items: center; padding-top: 20px;}
.history-wrap > ul > li:first-child .history-cont:nth-child(1) {padding-top: 0; margin-top: 20px;}

.history-wrap > ul > li .history-cont {padding-bottom: 80px; position: relative;}
.history-wrap > ul > li .history-cont:last-child {padding-bottom: 170px;}
.history-wrap > ul > li:last-child .history-cont:last-child {padding-bottom: 0;}
.history-wrap > ul > li .history-cont.flex-a-fs {align-items: flex-start;}
.history-wrap > ul > li .history-cont .history-month {font-size: 1.5em; font-weight: 700; width: 52px; position: relative; margin-left: 130px;}
.history-wrap > ul > li .history-cont::before {content: ''; position: absolute; left: -8px; top: 30px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #0B85EF; background: #fff; z-index: 1;}
.history-wrap > ul > li .history-cont::after {content: ''; position: absolute; left: -2px; top: 30px; width: 2px; height: 100%; background: #E4E4E4;}
.history-wrap > ul > li:last-child .history-cont:last-child:after {content: unset;}

.history-wrap > ul > li.c-navy .history-cont::before {border: 2px solid #133C7E;}
.history-wrap > ul > li.c-purple .history-cont::before {border: 2px solid #5F5D9E;}
.history-wrap > ul > li.c-blue2 .history-cont::before {border: 2px solid #458DC8;}
.history-wrap > ul > li.c-green .history-cont::before {border: 2px solid #AEBF51;}

.history-wrap > ul > li .history-cont .history-txt {font-size: 1.25em; line-height: 1.6; margin-left: 65px;}
.history-wrap > ul > li .history-cont .history-txt p + p {margin-top: 25px;}
.history-wrap > ul > li .history-cont .bold {font-weight: 800;}

.history-wrap .blue {color: var(--color-blue);}
.history-wrap .blue2 {color: #458DC8;}
.history-wrap .navy {color: #133C7E;}
.history-wrap .purple {color: #5F5D9E;}
.history-wrap .green {color: #AEBF51;}

.history-wrap > ul > li .history-year::before {content: ''; position: absolute; right: -140px; top: 30px; width: 2px; height: 0; background: var(--color-blue); z-index: 1;}
.history-wrap > ul > li:nth-child(3) .history-year::before {background: #133C7E;}
.history-wrap > ul > li:nth-child(4) .history-year::before {background: #5F5D9E;}
.history-wrap > ul > li:nth-child(5) .history-year::before {background: #458DC8;}
.history-wrap > ul > li:nth-child(6) .history-year::before {background: #AEBF51;}

/*line animation*/
@keyframes lineVertical {
    0% {
        height: 0;
    }

    100% {
        height: 100%;
    }
}

@keyframes lineVertical2 {
    0% {
        height: 0;
    }

    100% {
        height: calc(100% - 40px);
    }
}

.history-wrap > ul > li .history-year.line::before {
    animation-name: lineVertical;
    animation-duration: 1s;
    animation-delay: 0.6s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    background-origin: content-box;
}
.history-wrap > ul > li .history-year.line-delay::before {
    animation-name: lineVertical;
    animation-duration: 1s;
    animation-delay: 1.6s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    background-origin: content-box;
}
.history-wrap > ul > li:last-child .history-year.line::before {
    animation-name: lineVertical2;
    animation-duration: 0.7s;
    animation-delay: 0.6s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    background-origin: content-box;
}

@media (max-width: 1280px) {
    .history-wrap > ul > li .history-year {font-size: 2.25em; width: 100px; margin-right: 16px; flex: none;}
    .history-wrap > ul > li .history-cont {padding: 8px 0 40px; flex-direction: column; align-items: baseline;}
    .history-wrap > ul > li .history-cont::before {top: 15px;}
    .history-wrap > ul > li .history-cont::after {top: 15px;}
    .history-wrap > ul > li .history-cont:last-child {padding-bottom: 60px;}
    .history-wrap > ul > li .history-cont .history-month {font-size: 1.375em; margin-left: 24px;}
    .history-wrap > ul > li .history-cont .history-txt {font-size: 1.125em; margin: 10px 0 0 24px;}
    .history-wrap > ul > li .history-cont .history-txt p + p {margin-top: 8px;}

    @keyframes lineVertical2 {
        0% {
            height: 0;
        }
    
        100% {
            height: calc(100% - 74px);
        }
    }
    .history-wrap > ul > li .history-year::before {top: 28px; right: -16px;}
}

@media (max-width: 768px) {
    .history-wrap > ul > li .history-year {font-size: 1.75em; width: 80px;}
    .history-wrap > ul > li .history-cont {padding: 6px 0 30px;}
    .history-wrap > ul > li .history-cont::before {top: 12px; left: -7px; width: 12px; height: 12px;}
    .history-wrap > ul > li .history-cont::after {top: 12px;}
    .history-wrap > ul > li .history-cont:last-child {padding-bottom: 50px;}
    .history-wrap > ul > li .history-cont .history-month {font-size: 1.125em; margin-left: 22px;}
    .history-wrap > ul > li .history-cont .history-txt {font-size: 1em; margin: 10px 0 0 22px;}

    @keyframes lineVertical2 {
        0% {
            height: 0;
        }
    
        100% {
            height: calc(100% - 70px);
        }
    }
    .history-wrap > ul > li .history-year::before {top: 24px;}
}