#progress {
  position: fixed;
  z-index: 9999;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  background: #ec4899;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
#progress .loading {
   position: absolute;
   top: 10%;
   left: 14%;
   width: calc(7.5 * var(--remBasicSize));
   height: calc(8.75 * var(--remBasicSize));
    width: 40vw;
    margin: 0 auto;
}
@media screen and (max-width: 750px) {
  #progress .loading {
    top: 30%;
    left: 4%;
    width: calc(12.5 * var(--remBasicSize));
    height: calc(14.375 * var(--remBasicSize));
  }
}
#progress .loading .progress-bar2 {
  position: absolute;
  left: 40%;
  /* transform: translateX(50%); */
  bottom: -500px;
  display: block;
  width: 100%;
  border-top: 2px solid #f472b3;
}
#progress .loading .progress-bar {
  position: absolute;
  left: 40%;
  bottom: -500px;
  width: 0%;
  border-top: 2px solid #ffffff;
}
#progress .loading .progress-text {
  position: absolute;
  /* width: 80%; */
  width: calc(7.5 * var(--remBasicSize));
}
@media screen and (max-width: 750px) {
  #progress .loading .progress-text {
    width: calc(10.375 * var(--remBasicSize));
  }
  #progress .loading .progress-bar2 {
  position: absolute;
  left: 115%;
  /* transform: translateX(-50%); */
  bottom: -20vw;
  display: block;
  width: 100%;
  border-top: 2px solid #f472b3;
    }
#progress .loading .progress-bar {
  position: absolute;
  left: 115%;
  bottom: -20vw;
  width: 0%;
  border-top: 2px solid #ffffff;
}
}
#progress .loading .progress-text img {
    width: 1300px;
    aspect-ratio: 16/9;
    left: -10vw;
    /* width: calc(7.5 * var(--remBasicSize)); */
   /* height: calc(7.6875 * var(--remBasicSize)); */
}
@media screen and (min-width: 1700px) {
  #progress .loading .progress-text img {
            width: 1300px;
            aspect-ratio: 16/9;
            left: 0;
  }
}
@media screen and (max-width: 1300px) {
     #progress .loading .progress-text img {
            width: 1000px;
            aspect-ratio: 16/9;
            left: -5vw;
  }
}
@media screen and (max-width: 1000px) {
     #progress .loading .progress-text img {
            width: 800px;
            aspect-ratio: 16/9;
            left: -8vw;
  }
}
@media screen and (max-width: 850px) {
     #progress .loading .progress-text img {
            width: 600px;
            aspect-ratio: 16/9;
            left: -3vw;
  }
}


@media screen and (max-width: 750px) {
  #progress .loading .progress-text img {
    width: 95vw;
    /* width: calc(12.5 * var(--remBasicSize));
    height: calc(12.8125 * var(--remBasicSize)); */
  }
}

.small {
  animation: small 2s forwards;
}
@keyframes small {
  from {
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    transform: translate(-50%, -50%) scale(0);
    transform: scale(0);
  }
}