.history-con { position: relative; } 
/* 가운데 바 */
.history-percent-bar { position: absolute; left: 39rem; border-radius: 2px; margin-left: -0.2rem; width:4px; height: 100%; background: #eee; } 
.history-percent-bar .percent-bar-child { position: absolute; content: ""; width: 100%; height: 0; background-color: var(--color-point); z-index: 1; border-radius:2px 2px 0 0; } 
.percent-bar-child .point { display: flex; align-items: center; justify-content: center; position: absolute; bottom: -3rem; left: 50%; content: ""; z-index: 10; width: 4.4rem; height: 4.4rem; border-radius: 50%; background-color: var(--color-point); box-shadow: 0.5rem 0.5rem 2.5rem #09738554; transform: translate(-50%, 0); } 
.percent-bar-child .point i { font-size: 2.2rem; color: #fff; } 
/* 연혁 영역 */
.history-year-group-box { position: relative; display: flex; padding-bottom: 15rem; --month-wi:4rem; } 
.history-year-group-box:last-of-type { padding-bottom: 0; } 
/* 왼쪽 연대 */
.history-year-group-box .history-year-group-tit-box { width: 43rem; padding-right: 11rem; box-sizing: border-box; } 
.history-year-group-box .history-year-group-tit { position: relative; top: -3rem; font-size: 8rem; font-weight: 700; letter-spacing: -0.025em; color: var(--color-txt);; line-height: 1.1; transition: all 0.3s; } 
.history-year-group-box.active .history-year-group-tit { color: var(--color-point); } 
/* 오른쪽 연도+내용 */
.history-summary { display: inline-flex; padding: 1rem 3rem; align-items: center; margin-bottom: 2rem; border-radius: 10rem; background: var(--color-point, #222E80); color: #fff; font-size: var(--font-22); font-weight: 700; } 
.history-year-group-box .history-year-list-box { width: calc(100% - 43rem); padding: 0 0 0 11rem; box-sizing: border-box; } 
.history-year-group-box .history-year-item { display: flex; margin-bottom: 5rem; } 
.history-year-group-box .history-year-item:last-of-type { margin-bottom: 0; } 
.history-year-group-box .history-year-item .history-year { display: block; width: 11.5rem; } 
.history-year-group-box .history-year-item .history-year strong { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; color: #222222; line-height: 1.2; } 
.history-year-group-box .history-year-item .history-month-item { margin-bottom: 5rem; } 
.history-year-group-box .history-year-item .history-month-item:last-child { margin-bottom: 0; } 
.history-year-group-box .history-year-item .history-month-item .history-month { width: 11rem; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.025em; color: #000; padding-right: 0.5rem; box-sizing: border-box; } 
.history-year-group-box .history-year-item .history-month-item .history-detail-txt-con { width: 100%; } 
.history-year-group-box .history-year-item .history-month-item .history-detail-txt { display: flex;} 
.history-year-group-box .history-year-item .history-month-item .history-detail-txt .txt { width: calc(100% - var(--month-wi)); margin-top: -0.2rem; font-size: 2rem; font-weight: 500; line-height: 1.5; } 
.history-year-group-box .history-year-item .history-month-item .history-detail-txt .txt p + p {margin-top: .5rem;}
.history-year-group-box .history-year-item .history-month-item .history-detail-txt .month { display: inline-block; width: var(--month-wi); color: #000; font-size: 2rem; font-weight: 600; line-height: 1.3; } 
.history-year-group-box .history-year-item .history-month-item .history-detail-txt + .history-detail-txt { margin-top: 2rem; } 
/* active */
.history-year-group-box.active .history-year-group-tit { top: -5rem; font-size: 10rem; color: var(--color-point); } 

@media all and (min-width:801px) {.history-year-group-box.reverse { flex-direction: row-reverse; } 
.history-year-group-box.reverse .history-year-group-tit-box { padding-right: 0; padding-left: 11rem; text-align: left; } 
.history-year-group-box.reverse .history-year-list-box { padding: 0 11rem 0 0; } 
.history-year-group-box.reverse .history-year-item { justify-content: flex-end; } 
.history-year-group-box.reverse .history-year-item .history-year,
.history-year-group-box.reverse .history-year-item .history-month-box,
.history-year-group-box.reverse .history-year-item .history-month-item .history-detail-txt { text-align: right; } 
.history-year-group-box.reverse .history-year-item .history-month-item { flex-direction: row-reverse; } 
.history-year-group-box.reverse .history-year-item .history-month-item .history-month { text-align: right; padding-right: 0; padding-left: 0.5rem; } 
 }
@media all and (max-width:800px) {.history-page { padding-bottom: 9rem; } 
.history-con { margin-top: 8rem; } 
.history-percent-bar { left: 3.5rem; } 
.history-year-group-box { position: relative; flex-wrap: wrap; padding: 4rem 0 10rem 8rem; } 
.history-year-group-box .history-year-group-tit-box { text-align: left; width: 100%; padding-right: 0; } 
.history-year-group-box .history-year-group-tit { position: absolute; font-size: 5rem; } 
.history-year-group-box .history-year-list-box { width: 100%; padding: 2rem 0 0 0; } 
.history-year-group-box .history-year-item .history-year { width: 11rem; } 
.history-year-group-box .history-year-item .history-month-box { width: calc(100% - 11rem); } 

/* active */
.history-year-group-box.active .history-year-group-tit { top: -5rem; font-size: 7rem; } 
 }
@media all and (max-width:640px) {.history-year-group-box .history-year-item { flex-wrap: wrap; margin-bottom: 4rem; } 
.history-year-group-box .history-year-item .history-year { width: 100%; margin-bottom: 1rem; } 
.history-year-group-box .history-year-item .history-month-box { width: 100%; } 
 }