.bg-intro .opacity-1 {
  opacity: 0.1;
}

.bg-intro,
.bg-intro svg {
  transform: translate3d(0, 0, 0);
}

.bg-intro .orbit {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
}
.bg-intro .svg-ser {
  stroke: #0b2d48;
}

.bg-intro .circle {
  fill: #fff;
  stroke: #fff;
  stroke-width: 1;
}

.bg-intro .circle-strok {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.bg-intro .dot,
.bg-intro .shape-color {
  fill: #fff;
}

.bg-intro .line {
  fill: #fff;
  stroke: #fff;
  stroke-width: 2;
}

.bg-intro .opacity-5 {
  opacity: 0.5;
}

.bg-intro .opacity-4 {
  opacity: 0.4;
}

.bg-intro .opacity-3 {
  opacity: 0.32;
}

.bg-intro .opacity-2 {
  opacity: 0.18;
}

.bg-intro .opacity-1 {
  opacity: 0.1;
}

.bg-intro .futuramo {
  transform: rotate(-40deg);
  transform-origin: 750px 730px;
}

.bg-intro .clock {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.bg-intro .center-self {
  transform-origin: center center;
}

.bg-intro .center {
  transform-origin: 740px 750px;
}

@supports (transform-box: fill-box) {
  .center-self,
  .scale-in {
    transform-box: fill-box;
  }
  .center {
    transform-box: view-box;
  }
}

.bg-intro .orbit {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
}
.bg-intro .svg-ser {
  stroke: #0b2d48;
}

.bg-intro .scale-in {
  transform: scale(0);
  animation-fill-mode: both;
  animation-name: scale;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0, 0.65, 0.18, 0.99);
}

.bg-intro .rotate {
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.bg-intro .reverse {
  animation-direction: reverse;
}

.bg-intro .alternate-reverse {
  animation-direction: alternate-reverse;
}

.bg-intro .speed-1 {
  animation-duration: 32s;
}

.bg-intro .speed-2 {
  animation-duration: 64s;
}

.bg-intro .speed-3 {
  animation-duration: 96s;
}

.bg-intro .speed-4 {
  animation-duration: 128s;
}

.bg-intro .speed-5 {
  animation-duration: 160s;
}

.bg-intro .speed-6 {
  animation-duration: 192s;
}

.bg-intro .speed-7 {
  animation-duration: 224s;
}

.bg-intro .speed-8 {
  animation-duration: 256s;
}

.bg-intro .speed-9 {
  animation-duration: 288s;
}

.bg-intro .speed-10 {
  animation-duration: 320s;
}

.bg-intro .speed-11 {
  animation-duration: 352s;
}

.bg-intro .speed-12 {
  animation-duration: 384s;
}

.bg-intro .speed-13 {
  animation-duration: 416s;
}

.bg-intro .speed-14 {
  animation-duration: 448s;
}

.bg-intro .speed-15 {
  animation-duration: 480s;
}

.bg-intro .speed-16 {
  animation-duration: 512s;
}

.bg-intro .speed-17 {
  animation-duration: 544s;
}

.bg-intro .speed-18 {
  animation-duration: 576s;
}

.bg-intro .speed-19 {
  animation-duration: 608s;
}

.bg-intro .speed-20 {
  animation-duration: 640s;
}

.bg-intro .speed-21 {
  animation-duration: 672s;
}

.bg-intro .speed-22 {
  animation-duration: 704s;
}

.bg-intro .speed-23 {
  animation-duration: 736s;
}

.bg-intro .speed-24 {
  animation-duration: 768s;
}

.bg-intro .speed-25 {
  animation-duration: 800s;
}

.bg-intro .delay-1 {
  animation-delay: 0.1s;
}

.bg-intro .delay-2 {
  animation-delay: 0.2s;
}

.bg-intro .delay-3 {
  animation-delay: 0.3s;
}

.bg-intro .delay-4 {
  animation-delay: 0.4s;
}

.bg-intro .delay-5 {
  animation-delay: 0.5s;
}

.bg-intro .delay-6 {
  animation-delay: 0.6s;
}

.bg-intro .delay-7 {
  animation-delay: 0.7s;
}

.bg-intro .delay-8 {
  animation-delay: 0.8s;
}

@keyframes rotate {
  0% {
    transform: rotateZ(0);
    -webkit-transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
  }
}

.rotate {
  animation-name: rotate;
}

@keyframes scale {
  0% {
    transform: scale(0) rotate(270deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}

.indexbanner .bg-intro {
  position: absolute;
  right: -330px;
  top: -210px;
  width: 1500px;
}

@media (min-width: 2300px) {
  .indexbanner .bg-intro {
    width: 2100px;
    height: 2100px;
    right: -538px;
    top: -328px;
  }
}

@media (max-width: 1899px) {
  .indexbanner .bg-intro {
    right: -520px;
    top: -300px;
    width: 1700px;
  }
}

@media (max-width: 1599px) {
  .indexbanner {
    background-size: auto 1500px, cover;
  }
  .indexbanner .bg-intro {
    right: -410px;
    top: -350px;
    width: 1240px;
  }
}

@media (max-width: 1199px) {
  .indexbanner .bg-intro {
    right: -360px;
    top: -370px;
    width: 1000px;
  }
}

@media (max-width: 991px) {
  .indexbanner {
    min-height: auto;
  }
  .indexbanner .bg-intro {
    right: -350px;
    top: -450px;
    width: 1060px;
  }
  .indexbanner .content-box {
    margin-top: 500px;
  }
  .indexbanner .scroll-indicator {
    display: none;
  }
}

@media (max-width: 767px) {
  .indexbanner .bg-intro {
    /* right: -140px;
        top: -562px;
        width: 110% */
    width: 250%;
    top: 50%;
    right: unset;
    left: 50%;
    transform: translate3d(-50%, -55%, 0);
  }
}

@media (max-width: 640px) {
  /* .indexbanner .bg-intro {
    right: -140px;
          top: -562px;
          width: 110%
    width: 130%;
    top: -522px;
    right: -15%;
  } */
}