.sub_tab02 li{
    background: none;
    color:#1F1F1F
}
.sub_tab02 li a, .sub_tab02 li span{
color:#1F1F1F
}
.flex-parent {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}

.input-flex-container {
display: flex;
justify-content: space-around;
align-items: center;
width: 80vw;
height: 100px;
max-width: 100%;
position: relative;
z-index: 0;
}

.input {
width: 25px;
height: 25px;
background-color: #258ed4;
position: relative;
border-radius: 50%;
}
.input:hover {
cursor: pointer;
}
.input::before, .input::after {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 50%;
transform: translateY(-50%);
background-color: #258ed4;
width: 4vw;
height: 5px;
max-width: 50px;
}
.input::before {
left: calc(-4vw + 12.5px);
}
.input::after {
right: calc(-4vw + 12.5px);
}
.input.active {
background-color: #258ed4;
}
.input.active::before {
background-color: #258ed4;
}
.input.active::after {
background-color: #AEB6BF;
}

.input.active span::after {
font-size: 15px;
}
.input.active ~ .input, .input.active ~ .input::before, .input.active ~ .input::after {
background-color: #AEB6BF;
}
.input span {
width: 1px;
height: 1px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: hidden;
}
.input span::before, .input span::after {
visibility: visible;
position: absolute;
left: 50%;
}
.input span::after {
content: attr(data-year);
top: 25px;
transform: translateX(-50%);
font-size: 14px;
}
.input span::before {
content: attr(data-info);
top: -77px;
width: 100px;
transform: translateX(-5px) rotateZ(-45deg);
font-size: 12px;
text-indent: -10px;
}

.description-flex-container {
/* z-index:9; */
/* overflow-y: scroll;
height: 500px; */
width: 80vw;
font-weight: 400;
/* font-size: 22px; */
margin-top: 100px;
max-width: 1000px;

}
.description-flex-container p {
margin-top: 0;
display: none;
}
.description-flex-container p.active {
display: block;
}

@media (min-width: 1250px) {
.input::before {
left: -48.5px
}

.input::after {
right: -49.5px;
}
}
@media (max-width: 850px) {
.input {
width: 17px;
height: 17px;
}
.input::before, .input::after {
height: 3px;
}
.input::before {
left: calc(-4vw + 8.5px);
}
.input::after {
right: calc(-4vw + 8.5px);
}
}
@media (max-width: 600px) {
.flex-parent {
justify-content: initial;
}

.input-flex-container {
flex-wrap: wrap;
justify-content: center;
width: 100%;
height: auto;
margin-top: 5vh;
}

.input {
width: 60px;
height: 60px;
margin: 0 10px 50px;
background-color: #AEB6BF;
}
.input::before, .input::after {
content: none;
}
.input span {
width: 100%;
height: 100%;
display: block;
}
.input span::before {
top: calc(100% + 5px);
transform: translateX(-50%);
text-indent: 0;
text-align: center;
}
.input span::after {
top: 50%;
transform: translate(-50%, -50%);
color: #ECF0F1;
}

.description-flex-container {
margin-top: 30px;

}
}
@media (max-width: 400px) {
body {
min-height: 950px;
}
}


#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
width: 12px;

}

#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color:  #555;
}