.home-hero {
    height: 160vw;
  position: relative;
}

.home-hero .nav{
  position: absolute;
  bottom: 40px;
}

.hero-deco {
  position: absolute;
}

.hero-deco img {
  max-width: 100%;
}

.hero-deco.-item-pic-01 {
  width: 53.48%;
  top: 12.27%;
  right: 1.86%;
}
.hero-deco.-item-pic-02 {
  width: 37.9%;
  top: 16.59%;
  left: 2.79%;
}
.hero-deco.-item-pic-03 {
  width: 22.32%;
  top: 44.9%;
  left: 3.39%;
}
.hero-deco.-item-pic-04 {
  width: 36.51%;
  top: 47.59%;
  left: 28.41%;
}
.hero-deco.-item-pic-05 {
  width: 26.51%;
  top: 45.18%;
  right: 2.97%;
}
.hero-deco.-item-01 {
  width: 14.65%;
  top: 3.783%;
  right: 31.86%;
}
.hero-deco.-item-02 {
  width: 11.86%;
  top: 3.783%;
  left: -3.72%;
}
.hero-deco.-item-03 {
  width: 11.86%;
  top: 45.18%;
  left: 28.88%;
}
.hero-deco.-item-04 {
  width: 11.16%;
  top: 50%;
  left: 26.55%;
}
.hero-deco.-item-05 {
  width: 14.65%;
  top: 58.21%;
  left: -4.327%;
  z-index: -1;
}
.hero-deco.-item-06 {
  width: 8.37%;
  top: 57.75%;
  right: 23.2%;
}
.hero-deco.-item-07 {
  width: 8.13%;
  top: 75.72%;
  left: 2.55%;
}
.hero-deco.-item-08 {
  width: 20.46%;
  top: 74.27%;
  right: -7.44%;
}


.hero-deco-sub {
  position: absolute;
  background-color: #d75a00;
}
.hero-deco-sub.-item-01-01 {
  width: 7px;
  height: 7px;
  top: 10px;
  right: -20px;
}
.hero-deco-sub.-item-01-02 {
  width: 5px;
  height: 5px;
  top: 25px;
  left: -8px;
}
.hero-deco-sub.-item-01-03 {
  width: 5px;
  height: 5px;
  top: 31px;
  left: -17px;
}
.hero-deco-sub.-item-03-01 {
  width: 7px;
  height: 7px;
  top: 15px;
  right: -20px;
}
.hero-deco-sub.-item-03-02 {
  width: 5px;
  height: 5px;
  top: 23px;
  right: -12px;
}
.hero-deco-sub.-item-05-01 {
  width: 5px;
  height: 5px;
  top: -5px;
  right: -5px;
}
.hero-deco-sub.-item-06-01 {
  width: 7px;
  height: 7px;
  top: -8px;
  left: -10px;
}
.hero-deco-sub.-item-06-02 {
  width: 12px;
  height: 12px;
  top: 5px;
  right: -95px;
}
.hero-deco-sub.-item-06-03 {
  width: 8px;
  height: 8px;
  top: 30px;
  right: -60px;
}
.hero-deco-sub.-item-06-04 {
  width: 4px;
  height: 4px;
  top: 70px;
  right: -10px;
}
.hero-deco-sub.-item-06-05 {
  width: 3px;
  height: 3px;
  top: 72px;
  right: -3px;
}
.hero-deco-sub.-item-07-01 {
  width: 7px;
  height: 7px;
  top: -25px;
  right: -7px;
}
.hero-deco-sub.-item-08-01 {
  width: 7px;
  height: 7px;
  bottom: 5px;
  left: 23px;
}
.hero-deco-sub.-item-08-02 {
  width: 7px;
  height: 7px;
  bottom: 2px;
  left: 8px;
}
.hero-deco-sub.-item-08-03 {
  width: 5px;
  height: 5px;
  bottom: -7px;
  left: 17px;
}

.hero-logo {
  width: 40.69%;
  position: absolute;
  top:71.56%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.hero-btn{
    bottom: 5%;
    left: 5%;
    position: absolute;
    width: 90%;
}
.hero-logo > img {
  opacity: 0;
}

@-webkit-keyframes vertical {
  0% {
    -webkit-transform: translate(0, 0px);
    transform: translate(0, 0px);
  }
  100% {
    -webkit-transform: translate(0, 7px);
    transform: translate(0, 7px);
  }
}

@keyframes vertical {
  0% {
    -webkit-transform: translate(0, 0px);
    transform: translate(0, 0px);
  }
  100% {
    -webkit-transform: translate(0, 7px);
    transform: translate(0, 7px);
  }
}
@-webkit-keyframes horizontal {
  0% {
    -webkit-transform: translate(0, 0px);
    transform: translate(0, 0px);
  }
  100% {
    -webkit-transform: translate(4px, 0);
    transform: translate(4px, 0);
  }
}
@keyframes horizontal {
  0% {
    -webkit-transform: translate(0, 0px);
    transform: translate(0, 0px);
  }
  100% {
    -webkit-transform: translate(4px, 0);
    transform: translate(4px, 0);
  }
}
@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(1.25, 1.25);
    transform: scale(1.25, 1.25);
  }
}
@keyframes scale {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(1.25, 1.25);
    transform: scale(1.25, 1.25);
  }
}
@-webkit-keyframes fade {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fade {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.animation {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
.animation.-anm-vertical {
  -webkit-animation-name: vertical;
  animation-name: vertical;
}
.animation.-anm-horizontal {
  -webkit-animation-name: horizontal;
  animation-name: horizontal;
}
.animation.-anm-scale {
  -webkit-animation-name: scale;
  animation-name: scale;
}
.animation.-anm-fade {
  -webkit-animation-name: fade;
  animation-name: fade;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.animation.-delay-01 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.animation.-delay-02 {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.animation.-duration-01 {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
.animation.-duration-02 {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
}