body {
  overflow: hidden;
}
.loading {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    background-color: #efefef;
    position: absolute;
    top: -0px;
    z-index: 999;
    /* opacity: 0.7; */
  }
  
  
  
  .loading-hide {
    opacity: 0;
    transition: 0.3s linear;
  }
  
  .loading img {
    width: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .loading img:nth-child(1) {
    animation: loading 1s infinite alternate ease-in;
    z-index: 10;
  }
  .loading img:nth-child(2) {
    animation: loading-2 1s infinite alternate-reverse;
    filter: grayscale(1);
    opacity: 15%;
  }
  
  @keyframes loading {
    0% {
      transform: translate(-50%, -50%) scale(1.2);
    }
  
    100% {
      transform: translate(-50%, -50%) scale(1);
    }
  }
  
  @keyframes loading-2 {
    0% {
      transform: translate(-50%, -50%) scale(1.2);
      opacity: 15%;
    }
  
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0;
    }
  }