:root {
  --font-size: 100px; //  6.9444444444vw;
}
body,
html {
  margin: 0;
  height: 8000px;
  overflow-x: hidden;
}
.height-gap {
  height: 600px;
}
.main {
  perspective: 800px;
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
  height: 100vh;
  min-height: 932px;
  width: 100%;
  font-size: var(--font-size);
  // min-height: 18.64em;
  background-color: #040506;
  .dd-icon {
    // transform: translate(1px, 100px) scale(0.6);
    // opacity: 0.7;
    opacity: 0.5;
    transform: translate3d(0, 111px, -440px) scale(0.5);
    background-image: linear-gradient(
      159deg,
      #00b6ff,
      #007fff 67%,
      #0065ff 97%
    );
    border-radius: 0.3797em;
    box-shadow: 0 0 0.39em 0 rgba(0, 79, 255, 0.3),
      0.26em 0.26em 0.77em 0 rgba(0, 79, 255, 0.3);
    height: 1.8em;
    left: 50%;
    margin-left: -0.9em;
    margin-top: -0.9em;
    top: 50%;
    width: 1.8em;
    z-index: 10;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .dd-text {
    opacity: 0.644;
    transform: translate3d(0, 44px, -350px) scale(0.644);
    top: calc(50% + 215px);
    color: #fff;
    display: flex;
    height: 0.52em;
    justify-content: center;
    left: 0;
    line-height: 0.52em;
    width: 100%;
    z-index: 10;
    img {
      height: 100%;
    }
  }
  .square,
  .dd-icon,
  .dd-text {
    position: absolute;
    transform-origin: 50% 50%;
    font-size: var(--font-size);
  }
  .square {
    border-radius: 10px;
  }
  .square-0 {
    opacity: 0.4;
    transform: translate3d(0, 0, -111px);
    border-radius: 0.3333em;
    height: 1.6em;
    left: calc(50% - 7.56em);
    top: calc(50% - 4.21em);
    width: 1.6em;
    background-image: linear-gradient(-33deg, #8f35ff, rgba(143, 53, 255, 0)),
      radial-gradient(
        circle at 62% -28%,
        rgba(0, 45, 156, 0.75) 0,
        #002d9c 68%,
        rgba(0, 45, 156, 0) 111%
      ),
      linear-gradient(
        116deg,
        rgba(0, 137, 255, 0.2) 1%,
        rgba(0, 186, 255, 0.04) 38%,
        rgba(68, 149, 255, 0.08) 68%,
        rgba(3, 79, 255, 0.16) 88%
      );
  }
  .square-1 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.5;
    background-image: linear-gradient(
        133deg,
        rgba(255, 186, 0, 0),
        rgba(255, 207, 0, 0.6) 68%
      ),
      linear-gradient(170deg, #ffc400, #ff9200),
      linear-gradient(170deg, #ffc400, #ff9200);
    border-radius: 0.1667em;
    height: 0.8em;
    left: calc(50% - 4.87em);
    top: calc(50% - 1.92em);
    width: 0.8em;
  }
  .square-2 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.411;
    background-color: #cc7201;
    border-radius: 0.2em;
    height: 0.96em;
    left: calc(50% - 6.24em);
    top: calc(50% - 1.41em);
    transform-origin: 50% 50%;
    width: 0.96em;
  }
  .square-3 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.233;
    background-image: linear-gradient(170deg, #3e9eff, #0062ff);
    border-radius: 0.0833em;
    height: 0.4em;
    left: calc(50% - 3.16em);
    top: calc(50% - 0.67em);
    transform-origin: 50% 50%;
    width: 0.4em;
  }
  .square-4 {
    // background-image: linear-gradient(220deg,#e58dff,#8f35ff 67%,rgba(143,53,255,0)),radial-gradient(circle at 1.2222% -87%,rgba(0,45,156,.75) 0,#002d9c 171%,rgba(0,45,156,0) 278%),linear-gradient(137deg,rgba(0,137,255,.3),rgba(3,79,255,.24));
    // height: 0.46em;
    // left: calc(50% - 2.59em);
    // top: calc(50% - 0.28em);
    // width: 0.46em;
  }
  .square-5 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.233;
    background-image: linear-gradient(46deg, #ff5f00, #ff8d16);
    bottom: calc(50% - 1.75em);
    height: 0.72em;
    left: calc(50% - 5.79em);
    width: 0.72em;
  }
  .square-6 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.233;
    background-image: -webkit-linear-gradient(
        230deg,
        #e58dff,
        #8f35ff 67%,
        rgba(143, 53, 255, 0)
      ),
      -webkit-radial-gradient(1.2222% -87%, circle, rgba(0, 45, 156, 0.75) 0, #002d9c
            171%, rgba(0, 45, 156, 0) 278%),
      -webkit-linear-gradient(313deg, rgba(0, 137, 255, 0.3), rgba(3, 79, 255, 0.24));
    background-image: -moz-linear-gradient(
        230deg,
        #e58dff 0,
        #8f35ff 67%,
        rgba(143, 53, 255, 0) 100%
      ),
      -moz-radial-gradient(1.2222% -87%, circle, rgba(0, 45, 156, 0.75) 0, #002d9c
            171%, rgba(0, 45, 156, 0) 278%),
      -moz-linear-gradient(313deg, rgba(0, 137, 255, 0.3) 0, rgba(
              3,
              79,
              255,
              0.24
            )
            100%);
    background-image: linear-gradient(
        220deg,
        #e58dff,
        #8f35ff 67%,
        rgba(143, 53, 255, 0)
      ),
      radial-gradient(
        circle at 1.2222% -87%,
        rgba(0, 45, 156, 0.75) 0,
        #002d9c 171%,
        rgba(0, 45, 156, 0) 278%
      ),
      linear-gradient(137deg, rgba(0, 137, 255, 0.3), rgba(3, 79, 255, 0.24));
    position: absolute;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    background-color: #040506;
    border-radius: 0.3333em;
    bottom: -webkit-calc(50% - 4.12em);
    bottom: -moz-calc(50% - 4.12em);
    bottom: calc(50% - 4.12em);
    height: 1.6em;
    left: -webkit-calc(50% - 7.01em);
    left: -moz-calc(50% - 7.01em);
    left: calc(50% - 7.01em);
    width: 1.6em;
  }
  .square-7 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.233;
    background-image: -webkit-linear-gradient(
        230deg,
        #e58dff,
        #8f35ff 67%,
        rgba(143, 53, 255, 0)
      ),
      -webkit-radial-gradient(1.2222% -87%, circle, rgba(0, 45, 156, 0.75) 0, #002d9c
            171%, rgba(0, 45, 156, 0) 278%),
      -webkit-linear-gradient(313deg, rgba(0, 137, 255, 0.3), rgba(3, 79, 255, 0.24));
    background-image: -moz-linear-gradient(
        230deg,
        #e58dff 0,
        #8f35ff 67%,
        rgba(143, 53, 255, 0) 100%
      ),
      -moz-radial-gradient(1.2222% -87%, circle, rgba(0, 45, 156, 0.75) 0, #002d9c
            171%, rgba(0, 45, 156, 0) 278%),
      -moz-linear-gradient(313deg, rgba(0, 137, 255, 0.3) 0, rgba(
              3,
              79,
              255,
              0.24
            )
            100%);
    background-image: linear-gradient(
        220deg,
        #e58dff,
        #8f35ff 67%,
        rgba(143, 53, 255, 0)
      ),
      radial-gradient(
        circle at 1.2222% -87%,
        rgba(0, 45, 156, 0.75) 0,
        #002d9c 171%,
        rgba(0, 45, 156, 0) 278%
      ),
      linear-gradient(137deg, rgba(0, 137, 255, 0.3), rgba(3, 79, 255, 0.24));
    position: absolute;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    border-radius: 0.05em;
    height: 0.24em;
    left: -webkit-calc(50% - 2.43em);
    left: -moz-calc(50% - 2.43em);
    left: calc(50% - 2.43em);
    top: -webkit-calc(50% - 0.03em);
    top: -moz-calc(50% - 0.03em);
    top: calc(50% - 0.03em);
    width: 0.24em;
  }
  .square-9 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.198;
    background-image: -webkit-linear-gradient(
        117deg,
        rgba(143, 53, 255, 0.8) 11%,
        rgba(143, 53, 255, 0)
      ),
      -webkit-radial-gradient(62% -28%, circle, rgba(0, 45, 156, 0.75) 0, #002d9c
            68%, rgba(0, 45, 156, 0) 111%);
    background-image: -moz-linear-gradient(
        117deg,
        rgba(143, 53, 255, 0.8) 11%,
        rgba(143, 53, 255, 0) 100%
      ),
      -moz-radial-gradient(62% -28%, circle, rgba(0, 45, 156, 0.75) 0, #002d9c
            68%, rgba(0, 45, 156, 0) 111%);
    background-image: linear-gradient(
        -27deg,
        rgba(143, 53, 255, 0.8) 11%,
        rgba(143, 53, 255, 0)
      ),
      radial-gradient(
        circle at 62% -28%,
        rgba(0, 45, 156, 0.75) 0,
        #002d9c 68%,
        rgba(0, 45, 156, 0) 111%
      );
    border-radius: 0.2em;
    height: 0.96em;
    left: -webkit-calc(50% - 1.54em);
    left: -moz-calc(50% - 1.54em);
    left: calc(50% - 1.54em);
    position: absolute;
    top: -webkit-calc(50% - 4.73em);
    top: -moz-calc(50% - 4.73em);
    top: calc(50% - 4.73em);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    width: 0.96em;
  }
  .square-8 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.5;
    background-color: #ffa800;
    border-radius: 0.0958em;
    bottom: -webkit-calc(50% - 0.98em);
    bottom: -moz-calc(50% - 0.98em);
    bottom: calc(50% - 0.98em);
    height: 0.46em;
    left: -webkit-calc(50% - 3.62em);
    left: -moz-calc(50% - 3.62em);
    left: calc(50% - 3.62em);
    position: absolute;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    width: 0.46em;
  }
  .square-10 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.18;
    background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#004fff),
      color-stop(70%, rgba(0, 45, 156, 0))
    );
    background-image: -webkit-linear-gradient(
      top,
      #004fff,
      rgba(0, 45, 156, 0) 70%
    );
    background-image: -moz-linear-gradient(
      top,
      #004fff 0,
      rgba(0, 45, 156, 0) 70%
    );
    background-image: linear-gradient(180deg, #004fff, rgba(0, 45, 156, 0) 70%);
    border-radius: 0.2em;
    bottom: -webkit-calc(50% - 4.98em);
    bottom: -moz-calc(50% - 4.98em);
    bottom: calc(50% - 4.98em);
    height: 0.96em;
    left: -webkit-calc(50% - 1.65em);
    left: -moz-calc(50% - 1.65em);
    left: calc(50% - 1.65em);
    position: absolute;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    width: 0.96em;
  }
  .square-11 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.18;
    background-image: -webkit-radial-gradient(
      top,
      rgba(0, 45, 156, 0.75) 0,
      #002d9c 92%,
      rgba(0, 45, 156, 0) 166%
    );
    background-image: -moz-radial-gradient(
      top,
      rgba(0, 45, 156, 0.75) 0,
      #002d9c 92%,
      rgba(0, 45, 156, 0) 166%
    );
    background-image: radial-gradient(
      180deg,
      rgba(0, 45, 156, 0.75) 0,
      #002d9c 92%,
      rgba(0, 45, 156, 0) 166%
    );
    border-radius: 0.0833em;
    bottom: -webkit-calc(50% - 3.52em);
    bottom: -moz-calc(50% - 3.52em);
    bottom: calc(50% - 3.52em);
    height: 0.4em;
    left: -webkit-calc(50% - 0.26em);
    left: -moz-calc(50% - 0.26em);
    left: calc(50% - 0.26em);
    width: 0.4em;
  }
  .square-12 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.198;
    background-image: -webkit-radial-gradient(
        top,
        rgba(0, 45, 156, 0.75) 0,
        #002d9c 92%,
        rgba(0, 45, 156, 0) 166%
      ),
      -webkit-linear-gradient(334deg, rgba(0, 137, 255, 0.2) 1%, rgba(
              0,
              186,
              255,
              0.04
            )
            38%, rgba(68, 149, 255, 0.08) 68%, rgba(3, 79, 255, 0.16) 88%);
    background-image: -moz-radial-gradient(
        top,
        rgba(0, 45, 156, 0.75) 0,
        #002d9c 92%,
        rgba(0, 45, 156, 0) 166%
      ),
      -moz-linear-gradient(334deg, rgba(0, 137, 255, 0.2) 1%, rgba(
              0,
              186,
              255,
              0.04
            )
            38%, rgba(68, 149, 255, 0.08) 68%, rgba(3, 79, 255, 0.16) 88%);
    background-image: radial-gradient(
        180deg,
        rgba(0, 45, 156, 0.75) 0,
        #002d9c 92%,
        rgba(0, 45, 156, 0) 166%
      ),
      linear-gradient(
        116deg,
        rgba(0, 137, 255, 0.2) 1%,
        rgba(0, 186, 255, 0.04) 38%,
        rgba(68, 149, 255, 0.08) 68%,
        rgba(3, 79, 255, 0.16) 88%
      );
    border-radius: 13.33px;
    height: 64px;
    opacity: 0.45;
    right: -webkit-calc(50% - 1.02em);
    right: -moz-calc(50% - 1.02em);
    right: calc(50% - 1.02em);
    top: -webkit-calc(50% - 3.95em);
    top: -moz-calc(50% - 3.95em);
    top: calc(50% - 3.95em);
    width: 64px;
  }
  .square-13 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.198;
    background-image: -webkit-linear-gradient(303deg, #004fff, #002d9c 82%),
      -webkit-linear-gradient(297deg, #007fff 5%, #0063ff 95%);
    background-image: -moz-linear-gradient(303deg, #004fff 0, #002d9c 82%),
      -moz-linear-gradient(297deg, #007fff 5%, #0063ff 95%);
    background-image: linear-gradient(147deg, #004fff, #002d9c 82%),
      linear-gradient(153deg, #007fff 5%, #0063ff 95%);
    border-radius: 0.05em;
    height: 0.24em;
    opacity: 0.3;
    position: absolute;
    right: -webkit-calc(50% - 0.38em);
    right: -moz-calc(50% - 0.38em);
    right: calc(50% - 0.38em);
    top: -webkit-calc(50% - 2.06em);
    top: -moz-calc(50% - 2.06em);
    top: calc(50% - 2.06em);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    width: 0.24em;
  }
  .square-14 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.5;
    background-image: -webkit-linear-gradient(
        51deg,
        rgba(0, 79, 255, 0),
        #004fff 72%
      ),
      -webkit-linear-gradient(297deg, #007fff 5%, #0063ff 95%);
    background-image: -moz-linear-gradient(
        51deg,
        rgba(0, 79, 255, 0) 0,
        #004fff 72%
      ),
      -moz-linear-gradient(297deg, #007fff 5%, #0063ff 95%);
    background-image: linear-gradient(39deg, rgba(0, 79, 255, 0), #004fff 72%),
      linear-gradient(153deg, #007fff 5%, #0063ff 95%);
    border-radius: 0.2708em;
    height: 1.3em;
    position: absolute;
    right: -webkit-calc(50% - 7.04em);
    right: -moz-calc(50% - 7.04em);
    right: calc(50% - 7.04em);
    top: -webkit-calc(50% - 3.63em);
    top: -moz-calc(50% - 3.63em);
    top: calc(50% - 3.63em);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    width: 1.3em;
  }
  .square-15 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.5;
    background-image: -webkit-linear-gradient(322deg, #00ebb6, #00ba46 69%);
    background-image: -moz-linear-gradient(322deg, #00ebb6 0, #00ba46 69%);
    background-image: linear-gradient(128deg, #00ebb6, #00ba46 69%);
    border-radius: 0.1333em;
    height: 0.64em;
    right: -webkit-calc(50% - 5.05em);
    right: -moz-calc(50% - 5.05em);
    right: calc(50% - 5.05em);
    top: -webkit-calc(50% - 2.26em);
    top: -moz-calc(50% - 2.26em);
    top: calc(50% - 2.26em);
    width: 0.64em;
  }
  .square-16 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.12;
    background-color: #040506;
    position: absolute;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    background-image: -webkit-linear-gradient(
      280deg,
      #ffc400,
      rgba(255, 207, 0, 0.6)
    );
    background-image: -moz-linear-gradient(
      280deg,
      #ffc400,
      rgba(255, 207, 0, 0.6)
    );
    background-image: linear-gradient(170deg, #ffc400, rgba(255, 207, 0, 0.6));
    border-radius: 0.05em;
    height: 0.24em;
    opacity: 0.2;
    right: -webkit-calc(50% - 2.18em);
    right: -moz-calc(50% - 2.18em);
    right: calc(50% - 2.18em);
    top: -webkit-calc(50% - 0.52em);
    top: -moz-calc(50% - 0.52em);
    top: calc(50% - 0.52em);
    width: 0.24em;
  }
  .square-17 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.5;
    background-image: -webkit-linear-gradient(280deg, #00b6ff, #007fff);
    background-image: -moz-linear-gradient(280deg, #00b6ff, #007fff);
    background-image: linear-gradient(170deg, #00b6ff, #007fff);
    border-radius: 0.05em;
    bottom: -webkit-calc(50% - 0.49em);
    bottom: -moz-calc(50% - 0.49em);
    bottom: calc(50% - 0.49em);
    height: 0.24em;
    right: -webkit-calc(50% - 3em);
    right: -moz-calc(50% - 3em);
    right: calc(50% - 3em);
    width: 0.24em;
  }
  .square-18 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.5;
    background-image: -webkit-linear-gradient(302deg, #76d2ff, #09baff 99%);
    background-image: -moz-linear-gradient(302deg, #76d2ff 0, #09baff 99%);
    background-image: linear-gradient(148deg, #76d2ff, #09baff 99%);
    border-radius: 0.1333em;
    bottom: -webkit-calc(50% - 1.7em);
    bottom: -moz-calc(50% - 1.7em);
    bottom: calc(50% - 1.7em);
    height: 0.64em;
    right: -webkit-calc(50% - 4.53em);
    right: -moz-calc(50% - 4.53em);
    right: calc(50% - 4.53em);
    width: 0.64em;
  }
  .square-19 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.5;
    background-image: -webkit-linear-gradient(314deg, #3e9eff 19%, #0062ff);
    background-image: -moz-linear-gradient(314deg, #3e9eff 19%, #0062ff 100%);
    background-image: linear-gradient(136deg, #3e9eff 19%, #0062ff);
    border-radius: 0.2em;
    bottom: -webkit-calc(50% - 1.33em);
    bottom: -moz-calc(50% - 1.33em);
    bottom: calc(50% - 1.33em);
    height: 0.96em;
    position: absolute;
    right: -webkit-calc(50% - 6.57em);
    right: -moz-calc(50% - 6.57em);
    right: calc(50% - 6.57em);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    width: 0.96em;
  }
  .square-20 {
    transform: translate3d(1e-5px, 1e-5px, -111px);
    opacity: 0.5;
    background-image: -webkit-linear-gradient(
        303deg,
        rgba(0, 79, 255, 0.6),
        rgba(0, 45, 156, 0.6) 82%
      ),
      -webkit-linear-gradient(297deg, #007fff 5%, #0063ff 95%);
    background-image: -moz-linear-gradient(
        303deg,
        rgba(0, 79, 255, 0.6) 0,
        rgba(0, 45, 156, 0.6) 82%
      ),
      -moz-linear-gradient(297deg, #007fff 5%, #0063ff 95%);
    background-image: linear-gradient(
        147deg,
        rgba(0, 79, 255, 0.6),
        rgba(0, 45, 156, 0.6) 82%
      ),
      linear-gradient(153deg, #007fff 5%, #0063ff 95%);
    border-radius: 0.3333em;
    bottom: -webkit-calc(50% - 3.45em);
    bottom: -moz-calc(50% - 3.45em);
    bottom: calc(50% - 3.45em);
    height: 1.6em;
    opacity: 0.5;
    position: absolute;
    right: -webkit-calc(50% - 8em);
    right: -moz-calc(50% - 8em);
    right: calc(50% - 8em);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    width: 1.6em;
  }
  .square-21 {
    background-image: -webkit-linear-gradient(
      92deg,
      rgba(0, 45, 156, 0.75),
      #002d9c
    );
    background-image: -moz-linear-gradient(
      92deg,
      rgba(0, 45, 156, 0.75),
      #002d9c
    );
    background-image: linear-gradient(-2deg, rgba(0, 45, 156, 0.75), #002d9c);
    border-radius: 0.2em;
    bottom: -webkit-calc(50% - 5.32em);
    bottom: -moz-calc(50% - 5.32em);
    bottom: calc(50% - 5.32em);
    height: 0.96em;
    opacity: 0.2;
    position: absolute;
    right: -webkit-calc(50% - 2.13em);
    right: -moz-calc(50% - 2.13em);
    right: calc(50% - 2.13em);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    width: 0.96em;
  }
}

.app-list {
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
  height: 5.6em;
  left: 50%;
  line-height: 0;
  max-width: 1200px;
  padding: 0.83em 0.43em;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -0.89em);
  transform-origin: 50% 50%;
  width: 12em;
  z-index: 10;
  box-sizing: border-box;
  .app-list-bg {
    background-color: rgba(23,26,29,.9);
    border-radius: 0.16em;
    height: 100%;
    left: 0;
    max-width: 1200px;
    position: absolute;
    top: 0;
    width: 100%;
  }
  .app-list-item {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-weight: 500;
    justify-content: flex-start;
    width: 14.28571%;
    .ali-top {
      margin-bottom: 0.32em;
      img {
        border-radius: 0.1667em;
        height: 0.8em;
        width: 0.8em;
      }
    }
    .ali-bottom {
      font-size: .2em;
      line-height: 1;
      color: white;
    }
  }
  .app-1 {
    transform: translate3d(477px, 115px, 10px) scale(0.1);
    opacity: 0.1;
  }
  .app-2 {
    transform: translate3d(318px, 115px, 10px) scale(0);
    opacity: 0;
  }
  .app-3 {
    transform: translate3d(159px, 115px, 10px) scale(0);
    opacity: 0;
  }
  .app-4 {
    transform: translate3d(0px, 115px, 10px) scale(0);
    opacity: 0;
  }
  .app-5 {
    transform: translate3d(-159px, 115px, 10px) scale(0);
    opacity: 0;
  }
  .app-6 {
    transform: translate3d(-318px, 115px, 10px) scale(0);
    opacity: 0;
  }
  .app-7 {
    transform: translate3d(-477px, 115px, 10px) scale(0);
    opacity: 0;
  }
  .app-8 {
    transform: translate3d(477px, -115px, 10px) scale(0);
    opacity: 0;
  }
  .app-9 {
    transform: translate3d(318px, -115px, 10px) scale(0);
    opacity: 0;
  }
  .app-10 {
    transform: translate3d(159px, -115px, 10px) scale(0);
    opacity: 0;
  }
  .app-11 {
    transform: translate3d(0px, -115px, 10px) scale(0);
    opacity: 0;
  }
  .app-12 {
    transform: translate3d(-159px, -115px, 10px) scale(0);
    opacity: 0;
  }
  .app-13 {
    transform: translate3d(-318px, -115px, 10px) scale(0);
    opacity: 0;
  }
  .app-14 {
    transform: translate3d(-477px, -115px, 10px) scale(0);
    opacity: 0;
  }
}
