@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";

.container {
  display: flex;
  align-items: center;
  margin: 66px;

  .darkGradient {
    .position(@position: absolute, @top: 0, @right: 0, @bottom:0 ,@left: 0);
    z-index: -1;
    .flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start);
    background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.1) 20%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0.1) 80%,
      rgba(0, 0, 0, 0.8) 100%
    );
    content: "";
    transition: opacity 0.5s ease-in-out;
  }

  .back {
    .size(@w: 60px, @h: 60px);
    background-size: 60px 60px;
    background-repeat: no-repeat;
    background-image: url("../../../../assets/images/btn/btn-60-wh-back-nor@3x.png");
    transition: opacity 0.5s ease-in-out;

    &:focus {
      background-image: url("../../../../assets/images/btn/btn-60-wh-back-foc@3x.png");
    }
  }

  .title {
    width: 1736px;
    padding-left: 30px;
    color: @BG_COLOR_05;
    font-family: @baseFont;
    font-size: 44px;
    line-height: normal;
    .elip(@clamp:1);

    .marquee {
      width: 100%;
      transition: opacity 0.5s ease-in-out;
    }
  }

  .up {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    .size(@w: 144px, @h: 48px);
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("../../../../assets/images/btn/btn-wh-arrow-top-nor.svg");
    transition: opacity 0.5s ease-in-out;

    &:focus {
      background-color: @PRIMARY_COLOR_RED;
      border-radius: 0 0 4px 4px;
    }
  }

  .down {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    .size(@w: 144px, @h: 48px);
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("../../../../assets/images/btn/btn-wh-arrow-down-nor.svg");
    transition: opacity 0.5s ease-in-out;

    &:focus {
      background-color: @PRIMARY_COLOR_RED;
      border-radius: 4px 4px 0 0;
    }
  }

  .arrow {
    .position(@position: absolute, @top: 50%);
    z-index: 1;
    .size(@w: 48px, @h: 144px);
    transform: translateY(-50%);

    &.close {
      right: 600px;
      background-image: url(../../../../assets/images/btn/btn-toclose-nor.svg);
      background-position: center;
      border-radius: 4px 0 0 4px;

      &:focus {
        background-image: url(../../../../assets/images/btn/btn-toclose-foc.svg);
        background-position: center;
      }
    }

    &.open {
      right: 0;
      background-image: url(../../../../assets/images/btn/btn-toopen-nor.svg);
      background-position: center;
      border-radius: 4px 0 0 4px;

      &:focus {
        background-image: url(../../../../assets/images/btn/btn-toopen-foc.svg);
        background-position: center;
      }
    }
  }

  .redution {
    .position(@position: absolute, @right: 60px, @bottom: 114px);
    .size(@w: 78px, @h: 78px);
    background-size: 78px 78px;
    background-repeat: no-repeat;
    background-image: url("../../../../assets/images/btn/btn-video-min-nor@3x.png");
    transition: opacity 0.5s ease-in-out;

    &:focus {
      .size(@w:78px, @h:78px);
      background-color: rgba(199, 8, 80, 0.5);
      border-radius: 50%;
    }
  }

  .show {
    opacity: 1;
  }

  .hidden {
    opacity: 0;
  }
}
