body {
  margin: 0;
  padding: 0;
}

#app {
  width: 100%;
  height: 100vh;
  background-image: url("../icons/appimg/appBg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}

#app .img-box {
  width: 50%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: absolute;
  top: 0;
  left: 50%;
  animation: dropAnimation 1.5s ease-in-out forwards;
}

#app .img-box .img-logo {
  width: 100%;
  height: 100px;
  background-image: url("../icons/appimg/appLogo.png");
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center;
}

#app .img-box .img-cont {
  width: 100%;
  height: 50px;
  background-image: url("../icons/appimg/appCont.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

#app .loading-box {
  position: relative;
  top: 60%;
  color: #dddddd;
  font-weight: bolder;
  font-size: 14px;
  display: flex;
  justify-content: center;
  gap: 5px;
}

#app .loading-box .loading {
  width: 20px;
  white-space: nowrap;
}

@keyframes dropAnimation {
  0% {
    top: -180px;
    transform: translateX(-50%);
  }
  100% {
    top: 40%;
    transform: translate(-50%, -50%);
  }
}