src/components/home/HCard/styles.module.scss

.leftBox {
  position: absolute;
  left: -100px;
  bottom: -100px;
  width: 200px;
  height: 200px;
  border-radius: 30% 70% 0% 33% / 64% 70% 0% 36%;
  background-color: #ef9364;
  animation: 5s infinite light linear;
  box-shadow: 90px 90px 90px 90px #ef9364, 90px -90px 190px 90px #ef9364,
    -90px 90px 90px 190px #ef9364, -90px -90px 90px 100px #ef9364;
}

.rightBox {
  @keyframes light {
    0% {
      transform: translate(0) scale(1);
    }

    33% {
      transform: translate(30px, -20px) scale(1);
    }

    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }

    to {
      transform: translate(0, 0) scale(1);
    }
  }
  @keyframes light2 {
    0% {
      transform: translate(0) scale(1);
    }

    33% {
      transform: translate(-20px, 20px) scale(1.1);
    }

    66% {
      transform: translate(20px, -20px) scale(0.9);
    }

    to {
      transform: translate(0, 0) scale(1);
    }
  }
  position: absolute;
  right: -120px;
  top: -150px;
  width: 200px;
  height: 200px;
  background-color: #8b7bcf;
  border-radius: 30% 70% 67% 13% / 44% 30% 70% 66%;
  animation: 5s infinite light2 linear;
  box-shadow: 90px 90px 90px 90px #8b7bcf, 90px -90px 90px 190px #8b7bcf,
    -90px 90px 90px 90px #8b7bcf, -90px -90px 90px 190px #8b7bcf;
}

.bannerContainer {
  position: relative;
  overflow: hidden;
  height: 867px;
  margin-top: -98px;
  background-color: black;
  position: relative;
  background-image: url("/img/rectangle.png");
  background-size: 66.6px;
  color: #fff;
 
  .bottomTips {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    .tipsContent {
      background: linear-gradient(90deg, #000000 0%, #292929 35.48%);
      height: 37px;
      text-align: center;
      line-height: 37px;
      font-size: 14px;
      .text {
        .blogTextIcon {
          margin-right: 10px;
          position: relative;
          top: 5px;
        }
      }
    }
  }

  .content {
    max-width: var(--global-main-width);
    margin: 0 auto;
    width: 100%;
    position: relative;
    display: flex;
    position: relative;
    .left {
      position: relative;
      z-index: 2;
      width: 100%;
      
      .centerContent {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 400px;
      }

      .textWrap {
        text-align: center;
        padding-top: 240px;
        h1 {
          font-size: 55px;
          font-weight: bold;
          color: #fff;
          margin: 0;
          line-height: 1.2;

          @media screen and (max-width: 768px) {
            font-size: 32px;
          }
        }

        .description {
          max-width: 900px;
          margin: 20px auto 0;
          font-size: 16px;
          line-height: 1.6;
          color: #fff;
          opacity: 0.9;
          
          @media screen and (max-width: 768px) {
            font-size: 14px;
            padding: 0 20px;
            margin-top: 15px;
          }
        }
      }

      .btnWrap {
        margin-top: 31px;
        font-size: 14px;
        color: #fff;
        display: flex;
        justify-content: center;
        gap: 20px;
        span {
          border-radius: 36px;
          padding: 10px;
          height: 44px;
          line-height: 24px;
          font-weight: 700;
          color: #fff;
          cursor: pointer;

          &.more, &.hub {
            background-color: var(--home-btn-bg);
          }
        }
        a {
          text-decoration: none;
        }
      }
    }
    .right {
      .loopRun {
        @keyframes jump {
          0% {
            transform: translate(-50%, -50%) scale(1);
          }
          40% {
            transform: translate(-50%, -60%) scale(1);
          }
          80% {
            transform: translate(-50%, -40%) scale(1);
          }
          100% {
            transform: translate(-50%, -50%) scale(1);
          }
        }

        @keyframes animX {
          0% {
            left: -4%;
          }

          100% {
            left: 96%;
          }
        }

        @keyframes animY {
          0% {
            top: -4%;
          }

          100% {
            top: 96%;
          }
        }
        @keyframes scale {
          0% {
            transform: scale(0.5);
          }

          50% {
            transform: scale(1);
          }

          100% {
            transform: scale(0.5);
          }
        }

        width: 400px;
        height: 300px;
        position: absolute;
        border-radius: 50%;
        top: 200px;
        right: 100px;
        .circle {
          border-radius: 50%;
          position: absolute;
          text-align: center;
          z-index: 2;
          color: #fff;
          &.circle1 {
            width: 94px;
            height: 94px;
            background: linear-gradient(180deg, #dbfdff 0%, #52d1d9 100%);
            line-height: 94px;
            animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -3.1s infinite alternate,
              animY 6s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
              scale 12s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
          }
          &.circle3 {
            width: 88px;
            height: 88px;
            background: linear-gradient(180deg, #ffca80 0%, #f18433 100%);

            line-height: 88px;
            animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -7.8s infinite alternate,
              animY 6s cubic-bezier(0.36, 0, 0.64, 1) -4.8s infinite alternate,
              scale 12s cubic-bezier(0.36, 0, 0.64, 1) -4.8s infinite alternate;
          }
          &.circle5 {
            width: 80px;
            height: 80px;
            background: linear-gradient(180deg, #dfd8ff 0%, #8c7cd0 100%);
            line-height: 80px;
            animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -12.6s infinite alternate,
              animY 6s cubic-bezier(0.36, 0, 0.64, 1) -9.6s infinite alternate,
              scale 12s cubic-bezier(0.36, 0, 0.64, 1) -9.6s infinite alternate;
          }
        }

        .centerCircle {
          width: 185px;
          height: 185px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          z-index: 3;
          animation: jump 10s ease infinite alternate;
        }
      }
    }
    .bline {
      width: 1323px;
      height: 399px;
      position: absolute;
      top: 257px;
      right: -160px;
      background-image: url("/img/home/hcard/bline.png");
      z-index: 1;
    }
  }
}

@media screen and (max-width: 1024px) {
  .leftBox {
    left: -150px;
    bottom: -150px;
    width: 80px;
    height: 80px;
    box-shadow: 90px -90px 120px 90px #ef9364, -90px 90px 120px 90px #ef9364;
  }
  .rightBox {
    right: -120px;
    top: -150px;
    width: 80px;
    height: 80px;
    background-color: #8b7bcf;
    border-radius: 30% 70% 67% 13% / 44% 30% 70% 66%;
    animation: 5s infinite light2 linear;
    box-shadow: -90px 90px 90px 90px #8b7bcf, -90px -90px 90px 190px #8b7bcf;
  }
  .bannerContainer {
    min-width: 100vw;
    height: auto;
    padding-bottom: 170px;
    .content {
      .left {
        .highText, .btnWrap {
          margin-left: 0;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .bannerContainer {
    .content {
      .left {
        .highText, .btnWrap {
          margin-left: 0;
        }
      }
    }
    .bline {
      width: 100% !important;
      right: 0 !important;
    }
  }
}