@media only screen and (min-width: 768px) {
  .sponly {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .pconly {
    display: none;
  }
}

body {
  background: radial-gradient(#fff, #00ba8c);
  background-attachment: fixed;
}

.top__content {
  position: relative;
}
@media only screen and (max-width: 767px) {
  .top__content {
    max-width: 353px;
    width: 100%;
    margin: 0 auto 50px;
  }
}
@media only screen and (min-width: 768px) {
  .top__content {
    position: relative;
    margin: 100px auto 0;
  }
  .top__content img {
    max-height: 90vw;
  }
}
.top__logo {
  z-index: 3;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .top__logo {
    top: 35px;
  }
}
@media only screen and (min-width: 768px) {
  .top__logo {
    top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .top__logo img {
    max-width: 80%;
  }
}
@media only screen and (min-width: 768px) {
  .top__logo img {
    max-width: 800px;
  }
}
.top__arch {
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .top__arch {
    top: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .top__arch img {
    max-width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .top__arch img {
    max-width: 900px;
  }
}
.top__blast {
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
}
.top__blast .eye {
  top: 0;
}
@media only screen and (max-width: 767px) {
  .top__blast {
    top: 55px;
  }
}
@media only screen and (min-width: 768px) {
  .top__blast {
    top: 150px;
  }
}
@media only screen and (max-width: 767px) {
  .top__blast img {
    max-width: 75%;
  }
}
@media only screen and (min-width: 768px) {
  .top__blast img {
    max-width: 600px;
  }
}
.top__eye {
  z-index: 50;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .top__eye {
    top: 170px;
  }
}
@media only screen and (min-width: 768px) {
  .top__eye {
    top: 410px;
  }
}
@media only screen and (max-width: 767px) {
  .top__eye img {
    max-width: 10%;
  }
}
@media only screen and (min-width: 768px) {
  .top__eye img {
    max-width: 75px;
  }
}
.top__words {
  z-index: 5;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .top__words {
    top: 200px;
  }
}
@media only screen and (min-width: 768px) {
  .top__words {
    top: 430px;
  }
}
@media only screen and (max-width: 767px) {
  .top__words img {
    max-width: 90%;
  }
}
@media only screen and (min-width: 768px) {
  .top__words img {
    max-width: 900px;
  }
}
.top__plaza {
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .top__plaza {
    top: 225px;
  }
}
@media only screen and (min-width: 768px) {
  .top__plaza {
    top: 500px;
  }
}
@media only screen and (max-width: 767px) {
  .top__plaza img {
    max-width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .top__plaza img {
    max-width: 900px;
  }
}

.cloud {
  position: relative;
  z-index: 1;
  margin-right: 70px;
}
@media only screen and (max-width: 767px) {
  .cloud {
    display: none;
  }
}
.cloud__left {
  position: absolute;
  top: 20%;
  left: 0;
  z-index: -1;
}
.cloud__right {
  position: absolute;
  top: 20%;
  right: -60px;
  z-index: -1;
}

.floating {
  animation-name: floating;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  margin-left: 30px;
}

.floatingb {
  animation-name: floating;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  margin-left: 30px;
}

@keyframes floating {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, 0px);
  }
}
.spin {
  animation-name: spin;
  animation-duration: 180s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}/*# sourceMappingURL=home.css.map */