@charset "utf-8";
.history .year {display:flex;}
.history .year+.year .left {padding-top:60px;}
.history .year .left {width:500px; margin-right:75px;}
.history .year .month {width:calc(100% - 575px);}
.history .year h3 {font-size:40px; font-weight:700; color:#000; text-align:right;}

.history .month {padding-top:40px; border-left:2px solid #e5e5e5;}
.history .year+.year .month {padding-top:100px;} 
.history .year:last-of-type .month {padding-bottom:50px;}
.history .month h3 {display:none;}
.history .month .detail {display:grid; position:relative; grid-template-columns:120px auto;}
.history .month .detail:before, .history .month .detail:after {content:""; display:block; position:absolute;}
.history .month .detail:before {width:12px; height:12px; background:#bababa; left:-7px; top:12px; border-radius:50%; z-index:3;}
.history .month .detail:first-of-type:before {background:#fff;}
.history .month .detail:first-of-type:after {width:20px; height:20px; background:#bababa; border-radius:50%; z-index:2; top:8px; left:-11px;}
.history .month .detail>p {font-weight:700; font-size:22px; position:relative; padding:0 30px 0 37px; width:50px;}
.history .month .detail>p:after {content:""; display:block; width:8px; height:12px; background:url(/images/intro/month-arrow.svg) no-repeat center / contain; position:absolute; top:12px; right:0;}
.history .month .detail>ul>li {position:relative; padding:2px 0 0 10px;}
.history .month .detail>ul>li+li {padding-top:10px;}
.history .month .detail+.detail {margin-top:30px;}
.history .month .detail>p:before {content:""; display:block; width:23px; height:2px; background:#e5e5e5; position:absolute; left:0; top:17px;}
.history .month .detail:first-of-type>p:before {width:230px; left:-207px;}

.history .year:first-of-type .left {padding-bottom:360px; position:relative;}
.history .year:first-of-type .left:before {content:""; display:block; width:100%; height:260px; position:absolute; bottom:0; left:0; background:url(/images/intro/historyBg.jpg) no-repeat left bottom / contain; border-radius:20px;}
.history .year:first-of-type h3 span {color:var(--base3);}
.history .year:first-of-type .month .detail>p:before {background:var(--base3);}
.history .year:first-of-type .month .detail:first-of-type:before {background:#fff;}
.history .year:first-of-type .month .detail:first-of-type:after {background:var(--base3);}
.history .year:first-of-type .month .detail>p {color:var(--base3);}
.history .year:first-of-type .month .detail:before {background:var(--base3);}
.history .year:first-of-type .month .detail>p:after {background:url(/images/intro/month-arrow_green.svg) no-repeat center / contain;}

/* ************************ 태블릿 (~1249) ************************ */
@media screen and (max-width:1249px) {
.history .year .left {width:350px; margin-right:50px;}
.history .year .month {width:calc(100% - 400px);}
.history .year:first-of-type .left {padding-bottom:280px;}
.history .year:first-of-type .left:before {height:181px;}
.history .month .detail+.detail {margin-top:30px;}
.history .year+.year .left {padding-top:50px;}
}

/* ************************ 태블릿 (~991) ************************ */
@media screen and (max-width:991px) {
.history .year .left {display:none;}
.history .month h3 {display:block; text-align:left; padding-left:35px; font-size:30px; margin-bottom:20px;}
.history .year .month {width:100%;}
.history .month {padding-top:10px;}
.history .month .detail {grid-template-columns:110px auto;}
.history .month .detail>p {font-size:20px; padding:0 30px 0 37px; width:55px;}
.history .month .detail>p:before {top:15px;}
.history .month .detail:first-of-type:after {top:6px;}
.history .month .detail:before {top:10px;}
.history .month .detail>ul>li {font-size:18px; padding:3px 0 0 10px;}
.history .month .detail>p:after {top:10px; right:11px;}
.history .month .detail+.detail {margin-top:20px;}
.history .year+.year .month {padding-top:60px;}

}


/* ************************ 모바일 (~767) ************************ */
@media screen and (max-width:767px) { 
.history .month h3 {font-size:26px; margin-bottom:15px;}
.history .year+.year .month {padding-top:50px;}
.history .month .detail>ul>li {font-size:17px; padding-left:37px;}
.history .month .detail>p {font-size:19px; width:50px;}
.history .month .detail>p:before {top:14px;}
.history .month .detail:before {top:9px;}
.history .month .detail:first-of-type:after {top:5px;}
.history .month .detail {grid-template-columns:1fr;}
.history .year:last-of-type .month {padding-bottom:35px;}
.history .year+.year .month {padding-top:40px;}
.history .month .detail+.detail {margin-top:15px;}
}