.ctn-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  z-index: 999999;
}
.pl {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--color-white);
}
.pl__inside {
  display: flex;
  justify-content: space-between;
  width: 120px;
  height: 120px;
}
.pl__a, .pl__b, .pl__c, .pl__d {
  width: 20px;
  height: 20px;
  animation: bounce3 2s ease-in-out infinite;
  transform-origin: 50% 0;
}
.pl__a {
  background: var(--color-green1);
}
.pl__b {
  background: var(--color-green2);
  animation-delay: 0.1s;
}
.pl__c {
  background: var(--color-green3);
  animation-delay: 0.2s;
}
.pl__d {
  background: var(--color-green4);
  animation-delay: 0.3s;
}
@keyframes bounce3 {
  from, 5%, 95%, to {
    transform: translateY(0) scaleY(1);
  }
  16.7% {
    transform: translateY(0) scaleY(8);
  }
  28.3%, 38.3% {
    transform: translateY(100px) scaleY(1);
  }
  50% {
    transform: translateY(2.625em) scaleY(4.5);
  }
  61.7%, 71.7% {
    transform: translateY(2.625em) scaleY(1);
  }
  83.3% {
    transform: translateY(0) scaleY(4.5);
  }
}