.Time-Line {
  position: relative;
  padding: 0 25px;
  height: 100%;
  width: 100%;
    background-image: linear-gradient(var(--color-sixth), var(--color-sixth));
    background-repeat: no-repeat;
    background-size: 90% 5px;
    background-position: center 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
/* Time-Line - Background-Image(style) */
.Time-Line::before { 
  content: '';
  display: inline-block;
  position: absolute;
  left: 0;
    
  width: 6%;
  height: 5px;
  top: 32px;

    background-image: repeating-linear-gradient(
  to right,
  var(--color-sixth),
  var(--color-sixth) 10px,
  transparent 10px,
  transparent 20px);

    background-repeat: no-repeat;
    background-size: 90% 5px;
    background-position: left;
}
.Time-Line::after { 
  content: '';
  display: inline-block;
  position: absolute;
  right: 0;

  width: 6%;
  height: 5px;
  top: 32px;

    background-image: repeating-linear-gradient(
  to left,
  var(--color-sixth),
  var(--color-sixth) 10px,
  transparent 10px,
  transparent 20px);

    background-repeat: no-repeat;
    background-size: 90% 5px;
    background-position: right;
}
@media screen and (max-width: 680px) {
  .Time-Line {
    padding: 0 10px;
  }
}
@media screen and (max-width: 350px) {
  .Time-Line {
    padding: 0 5px;
  }
}



/* Time-Line(dashed -right -left) / Border(style)
.Time-Line::before {
  content: " ";
  width: 5%;
  height: 0;
  position: absolute;
  box-sizing: border-box;
  border: 2.59px dashed black;
  top: 7px;
}
.Time-Line::after {
  content: " ";
  width: 5%;
  height: 0;
  position: absolute;
  box-sizing: border-box;
  border: 2.59px dashed black;
  top: 7px;
  right: 0;
}
*/