.zhst-image__video-view {
  position: relative;
  overflow: hidden;
  background-color: #333;

  // &-flv {
  //     width: 85%;
  // }
  &-screenshot {
    position: absolute;
    z-index: 10;
  }

  &-crop-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  &-align {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
  }

  &-opt {
    position: absolute;
    z-index: 99;
    bottom: 0;
    display: flex;
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    align-items: center;
    padding: 0 12px 0 24px;
    background-color: rgb(0 0 0 / 80%);
    line-height: 32px;

    &>div:first-child {
      display: flex;
      align-items: center;
      margin-right: 12px;
    }

    &>div:last-child {
      display: flex;
      align-items: center;
      margin-left: 12px;
    }

    &-range {
      display: flex;
      height: 32px;
      flex: 1;
      align-items: center;
      line-height: 32px;
      text-align: center;

      &>div:first-child {
        flex: 1;
      }

      &>div:last-child {
        width: 100px;
        margin-left: 8px;
        color: #fff;
      }
    }
  }
}