@font-face {
  font-family: AlibabaPuHuiTiRHeavy;
  src: url(../../font/Alibaba-PuHuiTi-Heavy.otf);
}

.commonFlexConfig {
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner {
  position: relative;
  background-image: url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*KL9wS54k2U8AAAAAAAAAAAAADmJ7AQ/original);
  background-repeat: no-repeat;
  background-size: cover;

  .leftBackground,
  .rightBackground {
    width: 765px;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;

    > img {
      position: absolute;
    }
  }

  .leftBackground {
    left: 0;
    top: 75px;
    background-image: url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*B4UvSKE2hfEAAAAAAAAAAAAADmJ7AQ/original);
    background-position-x: -48px;

    &::before,
    &::after {
      content: '';
      background-image: url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*pD8oT49V-bcAAAAAAAAAAAAADmJ7AQ/original);
      background-size: contain;
      position: absolute;
      height: 40px;
      width: 40px;
      left: 35px;
      top: 300px;
    }

    &::before {
      height: 32px;
      width: 32px;
      left: 220px;
      top: 345px;
    }

    .waffle {
      height: 254.3px;
      transform: rotate(3deg);
      left: -20px;
    }

    .bug {
      height: 160px;
      transform: rotate(-7deg);
      left: 279px;
      top: 214px;
    }
  }

  .rightBackground {
    top: 90px;
    right: 0;
    background-position-x: 66px;
    background-image: url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*DR_FR7Q721sAAAAAAAAAAAAADmJ7AQ/original);

    .chips {
      height: 263.3px;
      transform: rotate(8deg);
      right: 140px;
      top: 140px;
    }

    .cookie {
      height: 117.1px;
      right: 10px;
      top: 40px;
    }

    &::before,
    &::after {
      content: '';
      background-image: url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*pD8oT49V-bcAAAAAAAAAAAAADmJ7AQ/original);
      background-size: contain;
      position: absolute;
      height: 21px;
      width: 21px;
      right: 310px;
      opacity: 0.67;
      top: 310px;
    }

    &::before {
      height: 31px;
      width: 31px;
      right: 55px;
      top: 335px;
    }
  }

  .header {
    height: 670px;
    position: relative;
    font-family: PingFangSC;
  }

  .top {
    z-index: 10;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-family: AlibabaPuHuiTiR;
  }

  .mainTitle {
    font-size: 64px;
    color: #000;
    text-align: center;
    margin-top: 138px;
    font-family: AlibabaPuHuiTiRHeavy;

    > span {
      color: #691eff;
    }
  }

  .subTitle {
    color: #424e66;
    text-align: center;
    font-size: 18px;
    margin-top: 8px;
  }

  .bgVideo {
    position: absolute;
    top: 0px;
    right: 0px;
    min-width: 100%;
    z-index: -999;
  }

  .buttons {
    &:extend(.commonFlexConfig);
    z-index: 11;
    position: absolute;
    top: 350px;
    width: 100%;

    > div,
    > a {
      &:extend(.commonFlexConfig);
      height: 54px;
      width: 166px;
      border-radius: 12px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 8px 28px 0 #f2f2f2;
      margin: 0 11.5px;

      > img {
        margin-right: 6px;
      }
    }

    .start {
      font-size: 18px;
      background-color: #691eff;
      color: #ffffff;

      .startIcon {
        width: 20px;
        height: 20px;
        margin-right: 6px;
        background-image: url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*lo_5RYdqKLsAAAAAAAAAAAAADmJ7AQ/original),
          url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*UcuoSovQjxAAAAAAAAAAAAAADmJ7AQ/original),
          url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*3VvbT7spBhIAAAAAAAAAAAAADmJ7AQ/original),
          url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PI67SoRSfgsAAAAAAAAAAAAADmJ7AQ/original),
          url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*sP-zRZweTJcAAAAAAAAAAAAADmJ7AQ/original),
          url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*SFfnTachgWgAAAAAAAAAAAAADmJ7AQ/original);
        background-repeat: no-repeat;
        background-position-y: 0, 20px, 40px, 60px, 80px, 100px;
      }

      &:hover {
        opacity: 0.8;

        .startIcon {
          animation: hoverIcon 5s;
        }
      }
    }

    .design {
      font-size: 18px;
      background-color: #ffffff;
      border: 1px solid #e8e8e8;

      &:hover {
        color: #691eff;
      }
    }
  }

  .bottom {
    &:extend(.commonFlexConfig);
    z-index: 10;
    width: 100%;
    position: absolute;
    top: 506px;

    .message {
      &:extend(.commonFlexConfig);
      min-height: 114px;
      height: 140px;
      width: calc((100vw - 360px - 26px) / 3);
      min-width: 338px;
      max-width: 551px;
      background-color: #ffffff;
      border: 1px solid #e5e8ef;
      transition: all 0.2s;
      padding: 16px;
      box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.05);
      border-radius: 16px;
      margin: 0 13px;
      flex-direction: column;

      .messageTitle {
        font-weight: 500;
        font-size: 18px;
        color: #1d2129;
        margin-bottom: 8px;
        text-align: center;
        position: relative;

        > img {
          width: 24px;
          height: 24px;
          position: relative;
          top: -2px;
        }
      }

      .messageSubTitle {
        font-size: 14px;
        color: #86909c;
        text-align: center;
      }

      &:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);

        .messageTitle {
          color: rgba(105, 30, 255, 1);
        }
      }
    }
  }
}

@keyframes hoverIcon {
  0% {
    background-position-y: 0px, 20px, 40px, 60px, 80px, 100px;
  }

  16.6% {
    background-position-y: -20px, 0px, 20px, 40px, 60px, 80px;
  }

  33.3% {
    background-position-y: -40px, -20px, 0px, 20px, 40px, 60px;
  }

  50% {
    background-position-y: -60px, -40px, -20px, 0px, 20px, 40px;
  }

  66.6% {
    background-position-y: -80px, -60px, -40px, -20px, 0px, 20px;
  }

  83.3% {
    background-position-y: -100px, -80px, -60px, -40px, -20px, 0px;
  }

  100% {
    background-position-y: -100px, -80px, -60px, -40px, -20px, 0px;
  }
}
