@charset "utf-8";

.history ul { position: relative; }
.history ul::after { position: absolute; top: 0; left: 130px; width: 2px; height: 100%; background: var(--sub-01); display: block; content: ""; }
.history ul > li { display: flex; border-bottom: 1px dashed var(--border-color); }
.history ul > li .year { flex-shrink: 0; position: relative; width: 130px; line-height: 80px; font-size: 36px; font-weight: 700; color: var(--sub-01); }
.history ul > li:nth-child(2n) > .year { color: var(--gray-55); }
.history ul > li .year::after { position: absolute; z-index: 1; top: 36px; right: -8px; width: 14px; height: 14px; 
    background: #fff; border: 3px solid var(--sub-01); border-radius: 50%; display: block; content: "";  }
.history ul > li .con_wrap { padding: 25px 40px; }
.history ul > li .con { margin: 5px 0; display: flex; justify-content: flex-start; align-items: flex-start; }
.history ul > li .con > .date { flex-shrink: 0; min-width: 46px; font-size: 17px; font-weight: 700; color: var(--sub-01); }
.history ul > li .con > p { position: relative; margin-left: 30px; padding-left: 14px; font-size: 17px; font-weight: 400; color: var(--gray-55); }
.history ul > li .con > p::before { position: absolute; top: 10px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--sub-01); display: block; content: ""; }


/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    .history ul::after { left: 85px; }
    .history ul > li .year { width: 85px; line-height: 70px; font-size: 26px; }
    .history ul > li .year::after { top: 30px; right: -7px; width: 12px; height: 12px; }
    .history ul > li .con_wrap { padding: 20px 30px; }
    .history ul > li .con > .date { font-size: 15px; }
    .history ul > li .con > p { margin-left: 20px; padding-left: 10px; font-size: 15px; }
    .history ul > li .con > p::before { top: 9px; width: 3px; height: 3px; }
}

/* 767px or less */
@media all and (max-width : 767px){
    .history ul::after { left: 55px; }
    .history ul > li .year { width: 55px; line-height: 47px; font-size: 18px; }
    .history ul > li .year::after { top: 19px; right: -6px; width: 10px; height: 10px; border: 2px solid var(--sub-01);   }
    .history ul > li .con_wrap { padding: 10px 20px; }
    .history ul > li .con { display: block; margin: 5px 0; }
    .history ul > li .con > .date { min-width: 46px; font-size: 14px; }
    .history ul > li .con > p { margin-left: 10px; font-size: 14px; }
}