.video-page{
    padding: 2.7rem;
    display: flex;
    gap: 1.7rem;
    .content{
      flex: 1;
      video{
        width: 100%;
        background-color: #000000;
        border-radius: 1.292rem;
      }
      .text{
        padding: 1rem 0;
        font-family: Gilroy-Bold;
        font-size: 1rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 1.25rem;
        letter-spacing: 0rem;
        color: #313131;
      }
      .actor{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .avatar{
          display: flex;
          align-items: center;
          img{
            width: 2.833rem;
            height: 2.833rem;
            border-radius: 50%;
            margin-right: .5rem;
            background-color: #434343;
          }
          h3{
            font-family: Gilroy-Bold;
            font-size: 1.25rem;
            font-weight: normal;
            font-stretch: normal;
            line-height: 1.25rem;
            letter-spacing: 0rem;
            color: #204f5e;
          }
          span{
            font-family: Gilroy-Medium;
            font-size: 0.75rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rem;
            color: #84abb8;
          }
        }
      }
      .editor{
        font-family: Gilroy-Medium;
        font-size: 0.917rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 2.083rem;
        letter-spacing: 0rem;
        color: #204f5e;
        .iconfont::before{
          margin: 0 .3rem;
          display: inline-block;
          width: 2.083rem;
          height: 2.083rem;
          text-align: center;
          line-height:2.083rem;
          border-radius: 50%;
          font-size: 1.2rem;
          background-color: #def5f5;
          
        }
        .iconfont:hover{
          cursor: pointer;
          opacity: 0.9;
        }
      }
      .Comments{
        h4{
          margin: 2rem 0;
          font-family: Gilroy-Bold;
          font-size: 1rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: 1.667rem;
          letter-spacing: 0rem;
          color: #204f5e;
        }
        .person{
          width: 2.833rem;
          height: 2.833rem;
          border-radius: 50%;
          background-color: #434343;
        }
        .comment{
          padding: 1rem 0;
        }
        .input{
          display: flex;
          align-items: center;
          gap: 1rem;
          input{
            flex: 1;
            font-family: Gilroy-Regular;
            font-size: 0.75rem;
            font-weight: normal;
            font-stretch: normal;
            line-height: 1.667rem;
            letter-spacing: 0rem;
            color: #204f5e;
            border-bottom: 3px solid #225160;
          }
        }
        .btn{
          display: flex;
          align-items: center;
          justify-content: end;
          gap: 1rem;
          margin-top: 1rem;
          button{
            height: 1.875rem;
            padding: 0 1rem;
            border-radius: 1rem;
            background-color: #def5f5;
            font-family: Gilroy-Bold;
            font-size: 0.833rem;
            &:last-child{
              color: #fff;
              background-color: #225160;
            }
            &:hover{
              opacity: .8;
            }
          }
        }
        .comment-ul{
          .item{
            display: flex;
            align-items: start;
            gap: 0.8rem;
            padding: .6rem 0;
            >div{
              flex: 1;
            }
            h5{
              padding: 0.5rem 0;
              font-family: Gilroy-Bold;
              font-size: 0.833rem;
              font-weight: normal;
              font-stretch: normal;
              line-height: 1.667rem;
              letter-spacing: 0rem;
              color: #204f5e;
              span{
                padding-left: 1rem;
                font-family: Gilroy-Regular;
                font-size: 0.833rem;
                font-weight: normal;
                letter-spacing: 0rem;
                color: #204f5e;
              }
            }
            p{
              white-space: pre-line;
              font-family: Gilroy-Regular;
              font-size: 0.75rem;
              font-weight: normal;
              font-stretch: normal;
              line-height: 0.917rem;
              letter-spacing: 0rem;
              color: #313131;
            }
            .editors{
              padding: .5rem 0;
              span{
                font-family: Gilroy-Regular;
                font-size: 0.75rem;
                font-weight: normal;
                font-stretch: normal;
                line-height: 0.917rem;
                letter-spacing: 0rem;
                color: #313131;
                a{
                  font-size: 1rem;
                  font-weight: 600;
                  padding: 0 0.4rem;
                }
              }
              button{
                padding:  0 1rem;
                font-family: Gilroy-Bold;
                font-size: 0.75rem;
                font-weight: normal;
                font-stretch: normal;
                line-height: 0.917rem;
                letter-spacing: 0rem;
                color: #313131;
              }
            }
            .xia{
              &::before{
                font-weight: 600;
              }
              font-family: Gilroy-Bold;
              font-size: 0.75rem;
              font-weight: normal;
              font-stretch: normal;
              line-height: 0.917rem;
              letter-spacing: 0rem;
            }
          }
        }
      }
    }
    .flow-nav{
      width: 17.125rem;
     .item{
      break-inside: avoid-column;
      .imgbox{
        overflow: hidden;
        position: relative;
        img{
          width: 100%;
        }
        .iconfont{
          font-size: 1rem;
          position: absolute;
          top: 10px;
          right: 10px;
          display: block;
          width: 1.75rem;
	        height: 1.75rem;
          text-align: center;
          line-height:1.75rem;
          border-radius: 50%;
          background-color: #fff;
        }
      }
      .desc{
        display: flex;
        align-items: flex-start;
        padding: 0.7rem 0;
        gap: 0.5rem;
        img{
          width: 1.75rem;
	        height: 1.75rem;
          border-radius: 50%;
          background-color: #204f5e;
        }
        h3{
          font-family: Gilroy-Bold;
          font-size: 0.915rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: 1rem;
          letter-spacing: 0rem;
          color: #204f5e;
        }
        h5{
          font-family: Gilroy-Medium;
          font-size: 0.763rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: 1rem;
          padding: 0.4rem 0;
          letter-spacing: 0rem;
          color: #204f5e;
        }
        span{
          display: block;
          font-family: Gilroy-Medium;
          font-size: 0.61rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: 0.67rem;
          letter-spacing: 0rem;
          color: #84abb8;
        }
      }
     }
   }
  }
  
@media (max-width: 1024px) {
  .flow-nav{
    display: none;
  }
}
@media (max-width: 640px){
  .video-page{
    margin-top: 110px;
    padding: 1rem;
    .content .actor{
      flex-direction: column;
      align-items: start;
      gap: 1rem;
      .avatar{
        line-height: 0;
      }
      .editor{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}