.row .video_list,
.row .progress_line,
.row .prog_text_line
{
  display:Flex;

}

.row {
  margin-bottom:100px;
}

.row .video_list {
  width:100%;
  justify-content: space-between;
  margin:30px auto;
  gap:1%;
}

.row .video_list .video_box{
  flex:1;
  height:250px;
  overflow:hidden;
  border-radius: 12px;
  filter:grayScale(1);
  transition:all 0.5s ease;
}
.row .video_list .video_box.active{
  filter:grayScale(0);
  transform:scale(1.05);;
}


.row .video_list .video_box video{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.05);
}
.row .progress_line{
  justify-content : space-between;
  height:2px;
  background-color: #ddd;
  width:80%;
  margin:20px auto;
  position:relative;
}

.row .progress_line span{
  --pointer : 0;
  
  width:20px;
  height:20px;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  left:calc(var(--pointer) * 25%);
  background-color:#ddd;
  border-radius:50%;
  transition:all 0.5s ease;
}
.row .progress_line span.active{
  background-color: #0055b3;
}

.row .prog_text_line{
  position:relative;
  height:2px;
  width:80%;
  margin: 30px auto 20px;
  justify-content: space-between;

}

/* .row .progress_text */

.row .progress_line span:nth-child(2){
  --pointer : 1;
}
.row .progress_line span:nth-child(3){
  --pointer : 2;
}
.row .progress_line span:nth-child(4){
  --pointer : 3;
}
.row .progress_line span:nth-child(5){
  --pointer : 4;
}


.row .prog_text_line .progress_text{
  --pointer:0;
  position:absolute;
  top: 100%;
  left:calc(var(--pointer) * 25%);
  transform: translateX(-50%);
  text-align: center;
  width: max-content;
  opacity:0.5;
  transition:all 0.5s ease;
}
.row .prog_text_line .progress_text .prog_title{
  font-size:22px;
  font-weight:700;
}
.row .prog_text_line .progress_text .prog_desc{
  font-size:17px;
}
.row .prog_text_line .progress_text.active{
  opacity:1;
}



.row .prog_text_line .progress_text:nth-child(2){
  --pointer:1;
}
.row .prog_text_line .progress_text:nth-child(3){
  --pointer:2;
}
.row .prog_text_line .progress_text:nth-child(4){
  --pointer:3;
}
.row .prog_text_line .progress_text:nth-child(5){
  --pointer:4;
}