/* 마우스포인터 */
html * {
  cursor: url(./loadingAssets/cursor.png) 16 16, auto !important;
}

/* 로딩컨테이너 */
#baseLoadingWrap {
  background: #000;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 로고연출 */
#logoWrap {
  position: relative;
  width: 305px;
  height: 33px;
  background: url(./loadingAssets/logo_s.png) no-repeat center center;
  background-size: 305px 33px;
}

.hide1,
.hide2,
.hide3,
.hide4,
.hide5 {
  position: absolute;
  background: #000;
}

.hide1 {
  right: 3px;
  bottom: -1px;
  width: 303px;
  height: 4px;
  animation: widthZeroAnimation 0.3s linear forwards;
}

.hide2 {
  right: -1px;
  top: -1px;
  width: 5px;
  height: 35px;
  animation: heightZoroAnimation 0.1s linear 0.3s forwards;
}

.hide3 {
  left: 284px;
  top: -1px;
  width: 19px;
  height: 5px;
  animation: widthZeroAnimation 0.15s linear 0.4s forwards;
}

.hide4 {
  left: 284px;
  bottom: 10px;
  width: 5px;
  height: 23px;
  animation: heightZoroAnimation 0.15s linear 0.55s forwards;
}

.hide5 {
  right: 2px;
  top: 19px;
  width: 16px;
  height: 5px;
  animation: widthZeroAnimation 0.15s linear 0.7s forwards;
}

/* 개 스프라이트이미지 */
#dogSpriteWrap {
  position: relative;
  margin: auto;
  width: 144px;
  height: 80px;
}

.animationScaleWrap {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0% 0%;
  transform: scale(0.3); /* 144 / 480 */
}

.dogAnimation {
  width: 480px;
  height: 270px;
  background: url(./loadingAssets/dog_sprite.png) no-repeat 0 0;
  background-size: 11520px 270px;
  animation: dogAnimation 1s steps(24) infinite;
}

/* 로딩게이지 */
#loadingGauge {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 4px;
  background: #ffbd00;
}

@keyframes widthZeroAnimation {
  100% {
    width: 0;
  }
}

@keyframes heightZoroAnimation {
  100% {
    height: 0;
  }
}

@keyframes dogAnimation {
  100% {
    background-position-x: -11520px;
  }
}

/* 태블릿 */
@media screen and (min-width: 768px) {
  /* 센터정렬 */
  #centerWrap {
    margin-top: 75px;
  }

  /* 로고연출 */
  #logoWrap {
    width: 753px;
    height: 82px;
    background: url(./loadingAssets/logo_t.png) no-repeat center center;
    background-size: 753px 82px;
  }

  .hide1 {
    right: 7px;
    bottom: -1px;
    width: 748px;
    height: 8px;
  }

  .hide2 {
    right: -1px;
    top: -1px;
    width: 9px;
    height: 84px;
  }

  .hide3 {
    left: 710px;
    top: -1px;
    width: 38px;
    height: 9px;
  }

  .hide4 {
    left: 701px;
    bottom: 26px;
    width: 10px;
    height: 57px;
  }

  .hide5 {
    right: 6px;
    top: 48px;
    width: 38px;
    height: 9px;
  }

  /* 개 스프라이트이미지 */
  #dogSpriteWrap {
    width: 269px;
    height: 151px;
  }

  .animationScaleWrap {
    transform: scale(0.56); /* 269 / 480 */
  }
}

/* PC */
@media screen and (min-width: 1280px) {
  /* 센터정렬 */
  #centerWrap {
    margin-top: 103px;
  }

  /* 로고연출 */
  #logoWrap {
    width: 1185px;
    height: 129px;
    background: url(./loadingAssets/logo.png) no-repeat center center;
    background-size: 1185px 129px;
  }

  .hide1 {
    right: 9px;
    bottom: -1px;
    width: 748px;
    height: 14px;
  }

  .hide2 {
    right: -1px;
    top: -1px;
    width: 11px;
    height: 131px;
  }

  .hide3 {
    left: 1116px;
    top: -1px;
    width: 71px;
    height: 12px;
  }

  .hide4 {
    left: 1104px;
    bottom: 41px;
    width: 13px;
    height: 89px;
  }

  .hide5 {
    right: 9px;
    top: 74px;
    width: 60px;
    height: 14px;
  }

  /* 개 스프라이트이미지 */
  #dogSpriteWrap {
    width: 367px;
    height: 206px;
  }

  .animationScaleWrap {
    transform: scale(0.76); /* 367 / 480 */
  }
}