@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

.timeline::after { display: none; }

.list-box { 
display:grid; grid-template-columns:1fr 2fr; width: 100%; font-size: min(3.14vw,14px); font-family: 'Noto Sans KR', sans-serif; padding: 2em 1em 4em; 
gap:2em;
}

.list-box .left .text1 { font-size: 1.6em; color: #000; font-weight: bold; padding-bottom: 0.4em; text-transform: uppercase; margin: 0; font-family: inherit; }
.list-box .left .text2 { font-size: 3.2em; color: var(--main-color); font-weight: bold; padding:0.2em 0 0.5em; text-transform: uppercase; margin: 0; font-family: inherit; }
.list-box .left .text3 { font-size: 1.1em; color: #000; font-weight: 500; margin: 0; font-family: inherit; padding-top: 0.3em; line-height: 1.6em; }
.list-box .left .img1 { margin: 2em 0 0; }

.list-box .right { display:grid; align-content:start; }
.list-box .right .title_year { margin: 0 0 1.3em; font-size: 2.4em; font-weight: bold; font-family: inherit; }
.list-box .right .title_year .stringV1 { margin: 0 0.2em; }
.list-box .right .title_year .text_small { font-size: 0.75em; }

.list-box .right .itemBox { 
--icon-size:20px;
display:grid; gap:2em; position: relative; margin: 0; padding-left: 1em;
}
.list-box .right .itemBox:after { 
content: ''; position: absolute; left: calc(var(--icon-size) - (var(--icon-size) / 2) - 0.5px + 1em); top: 0; 
width: 1px; height: 100%; background: #ddd;
}
.list-box .right .itemBox > li { display:flex; position: relative; z-index: 1; gap:1em; line-height: 1.6; }
.list-box .right .itemBox > li .iconV1 { 
width: var(--icon-size); height: var(--icon-size); background: var(--main-color); border-radius:50%; position: relative; 
}
.list-box .right .itemBox > li .iconV1:after {
content: ''; position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); 
width: calc(var(--icon-size) - (var(--icon-size) / 2)); height: calc(var(--icon-size) - (var(--icon-size) / 2)); 
background: #fff; border-radius:50%;
}
.list-box .right .itemBox > li .text_year { margin: 0; font-weight: bold; font-family: inherit; font-size: 1.3em; }
.list-box .right .itemBox > li .textBox { flex:1; transform:translateY(-0.25em); padding-left: 1em; font-size: 1.1em; }

/* �ִϸ��̼� */
.list-box .right .itemBox[data-scroll] > li { opacity: 0; transition:0.8s; transform:translateX(-1em); }
.list-box .right .itemBox[data-scroll='in'] > li { opacity: 1; transform:translateX(0); }
.list-box .right .itemBox[data-scroll='out'] > li { opacity: 0; transform:translateX(-1em); }

@media (max-width:768px) {
	.list-box { grid-template-columns:1fr; gap:2em; max-width: 400px; padding:1em 0 3em; margin: 0 auto; }
	.list-box .left .text3 br { display: none; }
	.list-box .left .img { display: none; }
	.list-box .right .itemBox { --icon-size:16px; }
}