@charset "utf-8";

.history {
    width: 77%;
}
.history ul li {
    display: flex;
    padding: .5em 0;
    align-items: baseline;
}
.history ul li .year {
    width: 10%;
    font-family: 'NanumSquareRound';
    font-weight: 600;
}
.history ul li .text {width:75%}
.history .point {
    color: var(--color-main);
    font-weight: 600;
    margin-bottom: 0.5em;
}
.history_flex {
    display: flex;
    justify-content: space-between;
}
.history_l{
    width: 20%;
}
.history_l .fixbox{
    display: flex;
    flex-direction: column;
    border-radius: 30px;
}
.history_l .fixbox h4 {
    font-size: 2em;
    font-family: 'Nanum Gothic';
    font-weight: 900;
    margin-top: .5em;
}
.history_r{
    width: 49%;
}
.history_r ul {position: relative;}

.history_r ul li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    position: relative;
}
.history_r .year {
	width:16%;
	font-family: 'NanumSquareRound';
	font-weight: 600;
	position: relative;
}
.history_r .year:before, .history_r li h4:before {content:""; position:absolute;background-color: #eeeeee;width: 9px;height: 9px;border-radius: 100%;left: -30px;top: 5px;display: block;}
.history_r .text {
    width: 84%;
    line-height: 1.8em;
    margin-bottom: 1.5em;
    position: relative;
}
.history_r li:before{content:""; position:absolute;width: 1px;height: 100%;background-color: #eeeeee;left: -26px;top: 20px;display: block;}
.history_r ul li:last-child::before{display:none;}
.history h4{
    font-size: var(--sub-h4-size);
    font-family: 'Nanum Gothic';
}
.history_r h4{
    color: var(--color-main);
    margin-bottom: 1.6em;
}
.history_r li h4:before {background-color:var(--color-main);top: 20px;}

/* PC (해상도 ~ 1024px)*/ 
@media only screen and (max-width: 1440px)  {
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/ 
@media all and (min-width:768px) and (max-width:1023px) {
}

/* 모바일 가로, 모바일 세로 (해상도 ~ 767px)*/ 
@media all and (max-width:767px) {
	.history_flex {flex-wrap:wrap}
	.history_l, .history {width:100%}
	.history ul li .year {width:25%}
}
