.loading-index-warps .loading{
  background: rgba(255,255,255,0.9);
  position: fixed;
  top: -10%;
  bottom: 0;
  left: -100px;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index:9;
}
.loading-index-warps  .load {
  font-size:45px;
  display: flex;
  align-items: center;
  margin: auto;
  display: flex;
  align-items: center;
  justify-items: center;
}
.loading-index-warps  .load section{
  margin: 0px 0px 0 80px;
}
.loading-index-warps  .load i{
  height:16px;
  width:16px;
  border-radius:100%;
  background:#1296db;
  display:block;
  animation:spin 2s ease infinite;
}
.loading-index-warps  .load i:before, &:after{
  content:'';
  display:block;
  position:absolute;
  height:inherit;
  width:inherit;
  background:inherit;
  border-radius:inherit;
  animation:spin 2s ease infinite;
}
.loading-index-warps  .load i:before{
  left:-20px;
}
.loading-index-warps  .load i:after{
  left:20px;  
}

@keyframes spin{
  0%{
    top:0;
    transform:rotate(0deg);
  }
  50%{
    top:-20px;
    transform:rotate(-180deg);
  }
  100%{
    top:0;
    transform:rotate(-360deg);
  }
}
@-webkit-keyframes loading {
  0%, 100% {
    -webkit-transform: scale(1) rotateZ(0deg);
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
  }

  26% {
    -webkit-transform: scale(1.1) rotateZ(12deg);
    transform: scale(1.1) rotateZ(12deg);
    opacity: .2;
  }

  76% {
    -webkit-transform: scale(0.8) rotateZ(-8deg);
    transform: scale(0.8) rotateZ(-8deg);
    opacity: .6;
  }
}
@keyframes loading {
  0%, 100% {
    -moz-transform: scale(1) rotateZ(0deg);
    -ms-transform: scale(1) rotateZ(0deg);
    -webkit-transform: scale(1) rotateZ(0deg);
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
  }

  26% {
    -moz-transform: scale(1.1) rotateZ(12deg);
    -ms-transform: scale(1.1) rotateZ(12deg);
    -webkit-transform: scale(1.1) rotateZ(12deg);
    transform: scale(1.1) rotateZ(12deg);
    opacity: .2;
  }

  76% {
    -moz-transform: scale(0.8) rotateZ(-8deg);
    -ms-transform: scale(0.8) rotateZ(-8deg);
    -webkit-transform: scale(0.8) rotateZ(-8deg);
    transform: scale(0.8) rotateZ(-8deg);
    opacity: .6;
  }
}
.loading-index-warps .load span{
  margin-right: 5px;
  font-size: 45px !important;
  font-family: PingFangSC-Semibold;
}
.loading-index-warps .load .span {
  -webkit-animation: loading 1s linear infinite -0.8s;
  animation: loading 1s linear infinite -0.8s;
}

.loading-index-warps .load .span1 {
  -webkit-animation: loading 1s linear infinite -0.8s;
  animation: loading 1s linear infinite -0.8s;
  color:#0D78D3
;
}
.loading-index-warps .load .span2 {
  -webkit-animation: loading 1s linear infinite -0.5s;
  animation: loading 1s linear infinite -0.5s;
  color:#3FA3DE;
}
.loading-index-warps .load .span3 {
  -webkit-animation: loading 1s linear infinite -0.2s;
  animation: loading 1s linear infinite -0.2s;
  color:#7CBEC9;
}
.loading-index-warps .load .span4 {
  -webkit-animation: loading 1s linear infinite -1.1s;
  animation: loading 1s linear infinite -1.1s;
  color:#E5EFA3;
}
.loading-index-warps .background{
  width: 200px;
}
.loading-index-warps .background span {
  width: 30px;
  height: 30px;
  border-radius: 50px;
  backface-visibility: hidden;
  position: absolute;
  animation-name: move;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 0.8);
  animation-iteration-count: infinite;
  animation-duration: 3s;
  top: calc(50% - 25px);
  left: 50%;
  transform-origin: -25px center;
}
.loading-index-warps .background span:nth-child(1) {
  background: #C5F0A4;
  animation-delay: -0.5s;
  opacity: 0;
}
.loading-index-warps .background span:nth-child(2) {
  background: #C5F0A4;
  animation-delay: -1s;
  opacity: 0;
}
.loading-index-warps .background span:nth-child(3) {
  background: #C5F0A4;
  animation-delay: -1.5s;
  opacity: 0;
}
.loading-index-warps .background span:nth-child(4) {
  background: #226B80;
  animation-delay: -2s;
  opacity: 0;
}
.loading-index-warps .background span:nth-child(5) {
  background: #226B80;
  animation-delay: -2.5s;
  opacity: 0;
}
.loading-index-warps .background span:nth-child(6) {
  background: #C5F0A4;
  animation-delay: -3s;
  opacity: 0;
}
@keyframes move {
  0% {
    transform: scale(1) rotate(0deg) translate3d(0, 0, 1px);
  }
  30% {
    opacity: 1;
  }
  100% {
    z-index: 10;
    transform: scale(0) rotate(360deg) translate3d(0, 0, 1px);
  }
}