/*Content CSS*/
#history {overflow: hidden; position: relative; margin: 0 auto; padding: 0 0 90px;}
#history .sub_inner{width: 100%; max-width: 1500px; padding: 0 50px; margin: 0 auto;  background-color: #f7f7f7; border-radius: 20px;}

/* font-style */
.fs_40 {font-size: 40px; font-weight: 700; min-width: 110px; line-height: 1;}
.fs_23 {font-size: 23px; line-height: 1.65; font-weight: 700; color: #000;}
.fs_20 {font-size: 20px; line-height: 1.65; font-weight: 400; color: #333;}

/* .year_txt */
#history .year_txt {font-size: 18px; color: #e90818; font-weight: 500; margin-bottom: 7px;}

/* .history_wrap */
#history .history_wrap {position: relative; padding: 60px 143px 107px; z-index: 2; overflow: hidden;}

/* .progress_wrap */
#history .progress_wrap {position: absolute; top: 50%; transform: translateY(-50%); left: 345px; width: 2px; height: calc(100% - 140px); background-color: #ddd; z-index: -1;}
#history .progress_wrap span {width: 2px; background-color: #e90818; display: block; position: relative; left: 0; top: 0px;}

/* .flex_wrap */
#history .flex_wrap {display: flex; align-items: flex-start;}
#history .flex_wrap + .flex_wrap {margin-top: 36px;}

/* ..history .left */
#history .history .left {margin-right: 86px; display: flex; align-items: center; flex-shrink: 0;}
#history .history .left h4 {color: #000; margin-right: 77px; transition: .3s;}
#history .history .left h4 span {display: inline-block;}
#history .history .left .circle {position: relative; top: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background-color: rgb(153, 153, 153, .3); left: 3px;}
#history .history .left .circle::before {content: ''; display: block; width: 10px; height: 10px; border-radius: 50%; background-color: #999; }

/* .history .year */
#history .history .year {display: flex; margin-bottom: 75px;}
#history .history .year:last-child {margin-bottom: 0;}
#history .history .year h4 {min-width: 120px; margin-right: 58px; flex-shrink: 0;}
#history .history .year ul {position: relative; top: 48px;}
#history .history .year ul li {display: flex; margin-bottom: 15px;}
#history .history .year ul li:last-child {margin-bottom: 0;}
#history .history .year ul li span {min-width: 50px; display: block;margin-right: 40px; position: relative;}
#history .history .year ul li span::before {content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #999999; word-break: keep-all;
margin-right: 12px; transform: translateY(-100%);}

#history .history .year ul li > *:not(.span) {position: relative;}
#history .history .year ul li a {font-weight: 700; color: #000; transition: .3s;}

/* active */
#history .history.active .left h4{color: #000;}
#history .history.active .left .circle {background-color:rgba(233, 8, 24, 0.2);}
#history .history.active .left .circle::before{background-color: #e90818;}

/* .history .year */
#history .history .year ul li a:hover {color: #292862;}
#history .history .year ul li a:hover + i {color: #292862;}

/* .history .year */
#history .history .year ul li > *:not(.span) {white-space: nowrap;}

 /* right - margin-bottom  */
#history .history .year.y2020,
#history .history .year.y2021,
#history .history .year.y2028,
#history .history .year.y2029 {margin-bottom: 43px;}