.main{
  --header-height: 68px;
  --header-height-down: -68px;
  --action-bar-height: 88px;
  width: calc(100% - 385px);
  background-color: var(--live-backound-color);
  color: var(--live-color);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-bar-height));
  overflow: hidden;
  position: relative;
  .video{
    width: 100%;
    max-height: calc(100vh - var(--header-bar-height) - var(--action-bar-height));
    flex: 1;
    background-color: var(--video-backound-color);
    position: relative;
    video{
      width: 100%;
      height: 100%;
    }
  }
  .headerSection {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    .headerAnimation {
      transform: translateY(0);
    }
    .headerContent{
      opacity: 0;
      animation-name: header-down;
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
      animation-delay: 0.1s;
    }
  }

  .header-top {
    opacity: 0;
    animation-name: header-up;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-delay: 0.1s;
  }
  @keyframes header-up {
    0% {
      transform: translateY(0);
      opacity: 0;
    }
    100% {
      transform: translateY(var(--header-height-down));
      opacity: 1;
    }
  }
  @keyframes header-down {
    0% {
      transform: translateY(var(--header-height-down));
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
}