@import '~antd/es/style/themes/default.less';

@keyframes wave-animation {
  0% {
    transform: rotateZ(2deg);
  }
  100% {
    transform: rotateZ(-2deg);
  }
}

@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes cursor-blink {
  50% {
    border-color: transparent;
  }
}

.home-page-container {
  width: 100%;
  height: 100%;
  pointer-events: all !important;
}

.home-page {
  width: 100%;
  height: 100%;
  overflow: hidden auto;
  &-chart {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    & > div {
      display: flex;
      width: 100%;
      &:nth-of-type(1) {
        height: 60%;
        & > div {
          width: 25%;
          & > li {
            width: 100%;
            height: 50%;
          }
        }
        & > li {
          width: 50%;
        }
      }
      &:nth-of-type(2) {
        height: 10%;
        justify-content: space-between;
        padding: 0 2vw;
      }
      &:nth-of-type(3) {
        height: 30%;
        & > li {
          width: 25%;
        }
      }
    }
    & li {
      background-repeat: no-repeat;
      background-size: auto;
      background-position: center center;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.25vw;
      box-sizing: content-box;
      @media only screen and (max-width: 768px) {
        & li {
          font-size: 3.5vw;
        }
      }
    }
  }
  &-chart-prev {
    & ul li {
      position: absolute;
      &:nth-of-type(1) {
        left: 4vw;
        width: 18.5vw;
        height: 22vw;
      }
      &:nth-of-type(2) {
        left: 26.5vw;
        width: 37vw;
        height: 44vw;
      }
      &:nth-of-type(3) {
        left: 67.5vw;
        width: 18.5vw;
        height: 22vw;
      }
    }
  }
  &-chart-line-two {
    margin-top: 27vw;
    width: 100%;
    height: 22vw;
    & ul li {
      position: absolute;
      &:nth-of-type(1) {
        left: 4vw;
        width: 18.5vw;
        height: 22vw;
      }
      &:nth-of-type(2) {
        left: 67.5vw;
        width: 18.5vw;
        height: 22vw;
      }
    }
  }
  &-icon {
    margin-top: 49vw;
    width: 100%;
    height: 4vw;
    position: absolute;
    top: 0;
    & ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0;
    }
    & ul li {
      flex: 1;
      height: 4vw;
      text-align: center;
      font-size: 3.5vw;
    }
  }
  &-chart-line-three {
    margin-top: 53vw;
    width: 100%;
    height: 22vw;
    & ul li {
      position: absolute;
      &:nth-of-type(1) {
        left: 4vw;
        width: 18.5vw;
        height: 22vw;
      }
      &:nth-of-type(2) {
        left: 26.5vw;
        width: 16.5vw;
        height: 22vw;
      }
      &:nth-of-type(3) {
        left: 46vw;
        width: 16.5vw;
        height: 22vw;
      }
      &:nth-of-type(4) {
        left: 67.5vw;
        width: 18.5vw;
        height: 22vw;
      }
    }
  }
  &-background {
    display: none;
    & div {
      width: 130vw;
      height: 130vh;
      left: -10vw;
      top: -10vh;
      position: absolute;
    }
  }
  &-border {
    width: 100%;
    height: 100%;
    & > div {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 1;
      border: 3px solid;
      border-image: linear-gradient(
          #4ea397,
          #22c3aa,
          #7bd9a5,
          #d0648a,
          #f58db2,
          #f2b3c9
        )
        1 3;
    }
  }
}
