.drag-wrapper {
  overflow-x: auto;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  /* iOS 惯性 */
  scrollbar-width: none;
  /* Firefox 隐藏滚动条 */
}

.drag-wrapper::-webkit-scrollbar {
  display: none;
}

/* Chrome/Safari 隐藏滚动条 */

/* 保证一行 */
#dragRow {
  display: inline-flex;
  /* 关键：让 row 宽度由内容撑开 */
  min-width: 100%;
  /* 至少占满父级 */
}

#dragRow {
  display: inline-flex;
  /* 关键：让 row 宽度由内容撑开 */
  min-width: 100%;
  /* 至少占满父级 */
}

.top-banner {
  max-height: 886px;
  min-height: 232px;
  margin-bottom: 105px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.banner p {
  margin: 32px 0;
}

.free-use-btn {
  min-width: 136px;
  min-height: 40px;
  font-size: 16.37px;
}

.top-banner .top-banner-img {
  min-width: 1920px;
  min-height: 886px;
  margin: 0 auto;
  background: url('../../../img/ad/wireframe/create-wireframe-header-banner-2.png')center no-repeat;
  background-size: 100%;
  position: relative;
}



.top-banner .pointer-container {
  display: inline-block;
  position: absolute;
}

.pointer-designer {
  top: 48%;
  left: 20%;
}

.pointer-front {
  bottom: 4%;
  right: 27%;
}

.pointer-operation {
  bottom: 38%;
  right: 6%;
}

.pointer-product {
  top: 9%;
  left: 39%;
}

@media (min-width: 1280px) {
  .pointer-designer {
    top: 50%;
    left: 24%;
  }

  .pointer-front {
    bottom: 14%;
    right: 45%;
  }

  .pointer-operation {
    bottom: 52%;
    right: 10%;
  }

  .pointer-product {
    top: 16%;
    left: 49%;
  }

  .pointer-designer-animation {
    offset-rotate: 0deg;
    offset-distance: 0px;
    animation-duration: 3.5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: none;
    animation-play-state: running;
  }

  .pointer-front-animation {
    offset-rotate: 0deg;
    offset-distance: 0px;
    animation-iteration-count: 1, infinite;
    animation-direction: alternate, alternate;
    animation-fill-mode: none, none;
    animation-delay: 0s, 2s;
    animation-play-state: running;
  }

  .pointer-operation-animation {
    offset-rotate: 0deg;
    offset-distance: 0px;
    animation-duration: 3.5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: none;
    animation-play-state: running;
  }

  .pointer-product-animation {
    offset-rotate: 0deg;
    offset-distance: 0px;
    animation-duration: 3.5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: none;
    animation-play-state: running;
  }

  .pointer-container.auto-float-animation-1 {
    offset-path: path("M 34 23 C 34 23 77 7 77 7 M 77 7 C 77 7 70 28 70 28");
    animation-name: pointer-float-1;
    animation-duration: 3.5s;
    animation-delay: 0s;
  }

  .pointer-container.auto-float-animation-2 {
    offset-path: path("M 57 47 C 105 36.8 152 92.2 217 13 M 217 13 C 225.8 36.2 246.2 -10.2 263 1 M 263 1 C 263 1 220 -12 220 -12 M 220 -12 C 220 -12 243 -52 243 -52");
    animation-name: pointer-float-2-1, pointer-float-2-2;
    animation-duration: 2s, 6s;
  }

  .pointer-container.auto-float-animation-3 {
    offset-path: path("M 35 24 C 16.9 52.7 20.1 -42.7 -66 -14 M -66 -14 C -66 -14 2 -99 2 -99 M 2 -99 C -39 -39 34 -29 -47 62");
    animation-name: pointer-float-3;
    animation-duration: 9s;
    animation-delay: 0s;
  }

  .pointer-container.auto-float-animation-4 {
    offset-path: path("M 54 46 C 34.4 68.1 7.6 22.9 -40 39 M -40 39 C -36 -5 -74 51 -72 19 M -72 19 C -72 19 -76 21 -56 -7");
    animation-name: pointer-float-4-1, pointer-float-4-2;
    animation-duration: 2s, 4s;
  }
}

@keyframes pointer-float-1 {
  0% {
    offset-distance: 0px;
    animation-timing-function: ease-in-out;
  }

  51% {
    offset-distance: 46px;
    animation-timing-function: ease-in-out;
  }

  100% {
    offset-distance: 68px;
  }
}

@keyframes pointer-float-2-1 {
  0% {
    opacity: 0;
    offset-distance: 0px;
    animation-timing-function: ease-in-out;
  }

  100% {
    opacity: 1;
    offset-distance: 176px;
  }
}

@keyframes pointer-float-2-2 {
  0% {
    opacity: 1;
    offset-distance: 176px;
    animation-timing-function: ease-in-out;
  }

  33% {
    opacity: 1;
    offset-distance: 232px;
    animation-timing-function: ease-in-out;
  }

  66% {
    opacity: 1;
    offset-distance: 277px;
    animation-timing-function: ease-in-out;
  }

  100% {
    opacity: 1;
    offset-distance: 323px;
  }
}

@keyframes pointer-float-3 {

  0%,
  22% {
    opacity: 1;
    offset-distance: 410px;
    animation-timing-function: ease-in-out;
  }

  55% {
    opacity: 1;
    offset-distance: 234px;
    animation-timing-function: ease-in-out;
  }

  66% {
    opacity: 1;
    offset-distance: 125px;
    animation-timing-function: ease-in-out;
  }

  100% {
    opacity: 1;
    offset-distance: 0px;
  }
}

@keyframes pointer-float-4-1 {
  0% {
    opacity: 0;
    offset-distance: 0px;
    animation-timing-function: ease-in-out;
  }

  100% {
    opacity: 1;
    offset-distance: 99px;
  }
}

@keyframes pointer-float-4-2 {
  0% {
    opacity: 1;
    offset-distance: 99px;
    animation-timing-function: ease-in-out;
  }

  50% {
    opacity: 1;
    offset-distance: 156px;
    animation-timing-function: ease-in-out;
  }

  100% {
    opacity: 1;
    offset-distance: 187px;
  }
}

/* pointer float animation */

.top-banner .pointer-container img {
  width: 140px;
  height: auto;
}

.top-banner .top-banner-img .scroll-svg {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%);
  cursor: pointer;
}

.top-banner-text {
  max-width: 741px;
  position: absolute;
  top: 30.47%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.title-linear-color {
  font-size: 68px;
  margin: 0 0px;
  background: linear-gradient(269.1deg, #32E2E2 0.22%, #0094FF 24.18%, #1B5BFF 50.74%, #EE43BE 74.18%, #FF6543 100.22%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  vertical-align: bottom;
  letter-spacing: 0;
}

.part {
  margin: 0 4px;
  background: #000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  vertical-align: bottom;
  letter-spacing: -0.015em;
}

@media (max-width: 1440px) {
  .top-banner .top-banner-img {
    min-width: 1440px;
    min-height: 664px;
  }

  .top-banner .top-banner-text .display-1 {
    font-size: 44px;
  }

  .title-linear-color {
    font-size: 48px;
  }

  .title-btn {
    margin-bottom: 3rem;
  }
}

@media (max-width: 992px) {
  .top-banner .top-banner-img {
    min-width: 992px;
    min-height: 457px;
  }

  .top-banner .top-banner-text .display-1 {
    font-size: 35px;
  }

  .title-linear-color {
    font-size: 39px;
  }

  .pointer-container {
    transform: scale(0.7);
  }

  .banner p {
    margin: 0;
  }

  .banner .btn-secondary {
    margin-top: 150px;
  }
}

@media (max-width: 767px) {
  .top-banner .top-banner-img {
    min-width: 767px;
    min-height: 353px;
  }

  .top-banner .top-banner-text .display-1 {
    font-size: 28px;
  }

  .title-linear-color {
    font-size: 32px;
  }

  .pointer-container {
    transform: scale(0.6);
  }

  .banner .btn-secondary {
    margin-top: 110px;
  }
}


@media (max-width: 576px) {

  .top-banner .top-banner-text .display-1 {
    font-size: 22px;
  }

  .title-linear-color {
    font-size: 26px;
  }

  .pointer-container {
    transform: scale(0.5);
  }

  .banner .btn-secondary {
    margin-top: 100px;
    font-size: 14.37px;
  }

  .btn.ad-btn.btn-type2 {
    font-size: 14.37px;
  }
}

@media (max-width: 375px) {
  .top-banner .top-banner-img {
    width: 100%;
    height: 100%;
  }
}