@charset "utf-8";

body .historyWrap {display: grid; grid-template-columns: 20vw auto;}
body .historyWrap .yearTitle {position: relative; font-size: var(--fs50); color: #000; font-weight: 700; border-left: 6px solid #ededed; line-height: 1; padding: 0 0 150px 70px;}
body .historyWrap .yearTitle::before {position: absolute; left: 16px; top: 13px; content: ""; width: 0; height: 0; border-style: solid; border-width: 9px 0px 9px 12px; border-color: transparent transparent transparent var(--base1);}
.historyWrap .yearTitle span {color: var(--base1);}

body .historyWrap .monthBlock {display: flex; gap: 20px;}
body .historyWrap .monthBlock+.monthBlock {margin-top: 50px;}
body .historyWrap .monthBlock .month {position: relative; color: #000; font-weight: 700; line-height: 1; padding-left: 20px; margin-top: 3px;}
body .historyWrap .monthBlock .month::before {position: absolute; left: 0; top: 5px; width: 6px; height: 6px; border-radius: 100px; background: #d9d9d9; content: "";}
body .historyWrap .monthBlock .conIn .title {font-size: var(--fs24); color: var(--base1); margin-bottom: 20px; line-height: 1.2;}
body .historyWrap .monthBlock .desc {font-weight: 300; color: #333; line-height: 180%;}
body .historyWrap .monthBlock .desc li {position: relative; padding-left: 15px;}
body .historyWrap .monthBlock .desc li::before {position: absolute; left: 0; top: 11px; content: ""; width: 6px; height: 6px; border-radius: 100px; background: #d9d9d9;}



/* ************************ 태블릿 이하(~1249) ************************ */
@media screen and (max-width: 1249px) {

	
	body .historyWrap {grid-template-columns: 270px auto;}
	body .historyWrap .yearTitle {padding-left:50px}

}



/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 991px) {
	
	

}

/* ************************ 모바일 이하(~767) ************************ */
@media screen and (max-width: 767px) { 

	
	body .historyWrap {display:block;}
	body .historyWrap .monthBlock+.monthBlock {margin-top:15px;}
	body .historyWrap .monthBlock .conIn .title {font-size:20px; margin-bottom:10px;}
	
	body .historyWrap .yearTitle {font-size:35px; border-left:0; padding-left:35px; padding-bottom:30px;}
	body .historyWrap .yearTitle::before {left:0; top:10px;}
	
	

}

/* ************************ 모바일 이하(~500) ************************ */
@media screen and (max-width: 500px) { 

    body .historyWrap .monthBlock .conIn .title {font-size: 18px;}
    body .historyWrap .monthBlock .month {padding-left: 15px;}
    body .historyWrap .monthBlock .desc li {line-height: 1.3;}

    body .historyWrap .monthBlock {flex-direction: column;}

}