@charset "utf-8";
#mainImg h1, #mainImg .title, #mainImg .text, #mainImg .cosmos {
  position: absolute;
  opacity: 0;
}
#mainImg h1, #mainImg .title, #mainImg .text {
  z-index: 2;
}
#mainImg .cosmos {
  z-index: 1;
}
#mainImg .cosmos.star, #mainImg .cosmos.rotate {
  opacity: 1;
}
#mainImg .cosmos.rotate .in_cosmos {
  opacity: 0;
}
@media print, screen and (min-width: 751px) {
  #mainImg h1 {
    width: 492px;
    top: 65px;
    left: 246px;
  }
  #mainImg .title {
    width: 566px;
    top: 200px;
    left: 230px;
  }
  #mainImg .text {
    width: 347px;
    top: 363px;
    left: 339px;
  }
}
@media only screen and (max-width: 750.99px) {
  #mainImg h1 {
    width: calc(492 / 1026 * 92vw);
    top: calc(65 / 1026 * 92vw);
    left: calc(246 / 1026 * 92vw);
  }
  #mainImg .title {
    width: calc(566 / 1026 * 92vw);
    top: calc(200 / 1026 * 92vw);
    left: calc(230 / 1026 * 92vw);
  }
  #mainImg .text {
    width: calc(347 / 1026 * 92vw);
    top: calc(363 / 1026 * 92vw);
    left: calc(339 / 1026 * 92vw);
  }
}
/*
animation
*/
#mainImg .scIn.fadeIn {
  opacity: 0
}
#mainImg .scIn.fadeIn.move {
  opacity: 1;
  transition-duration: 2.2s;
  transition-property: opacity;
  transition-timing-function: ease;
}
#mainImg .scIn.fadeIn2 {
  opacity: 0
}
#mainImg .scIn.fadeIn2.move {
  opacity: 1;
  transition-duration: 1s;
  transition-property: opacity;
  transition-timing-function: ease;
}
/* star */
@media print, screen and (min-width: 751px) {
  #mainImg .star01 {
    width: 23px;
    top: 21px;
    left: 715px;
  }
  #mainImg .star02 {
    width: 28px;
    top: 208px;
    left: 25px;
  }
  #mainImg .star03 {
    width: 37px;
    top: 328px;
    left: 209px;
  }
  #mainImg .star04 {
    width: 54px;
    top: 257px;
    left: 806px;
  }
  #mainImg .star05 {
    width: 58px;
    top: 447px;
    left: 951px;
  }
  #mainImg .star04 img, #mainImg .star05 img {
    position: absolute;
    opacity: 0;
  }
}
@media only screen and (max-width: 750.99px) {
  #mainImg .star01 {
    width: calc(23 / 1026 * 92vw);
    top: calc(21 / 1026 * 92vw);
    left: calc(715 / 1026 * 92vw);
  }
  #mainImg .star02 {
    width: calc(28 / 1026 * 92vw);
    top: calc(208 / 1026 * 92vw);
    left: calc(25 / 1026 * 92vw);
  }
  #mainImg .star03 {
    width: calc(37 / 1026 * 92vw);
    top: calc(328 / 1026 * 92vw);
    left: calc(209 / 1026 * 92vw);
  }
  #mainImg .star04 {
    width: calc(54 / 1026 * 92vw);
    top: calc(257 / 1026 * 92vw);
    left: calc(806 / 1026 * 92vw);
  }
  #mainImg .star05 {
    width: calc(58 / 1026 * 92vw);
    top: calc(447 / 1026 * 92vw);
    left: calc(951 / 1026 * 92vw);
  }
  #mainImg .star04 img, #mainImg .star05 img {
    position: absolute;
    opacity: 0;
  }
}
/*
animation
*/
#mainImg .star01.move {
  animation: star01 1.2s ease-in;
  animation-fill-mode: forwards;
}
@keyframes star01 {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
#mainImg .star02.move {
  animation: star02 1.2s ease-in;
  animation-fill-mode: forwards;
}
@keyframes star02 {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.7);
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
#mainImg .star03.move {
  animation: star03 1.2s ease-in;
  animation-fill-mode: forwards;
}
@keyframes star03 {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.7);
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
#mainImg .star04.move {
  animation: star04 1s linear;
  animation-fill-mode: forwards;
}
@keyframes star04 {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
#mainImg .star05.move {
  animation: star05 1s linear;
  animation-fill-mode: forwards;
}
@keyframes star05 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
/* planet */
@media print, screen and (min-width: 751px) {
  #mainImg .planet01 {
    width: 291px;
    top: -88px;
    left: -76px;
  }
  #mainImg .planet02 {
    width: 71px;
    top: 13px;
    left: 307px;
  }
  #mainImg .planet03 {
    width: 413px;
    top: -182px;
    left: 708px;
  }
  #mainImg .planet04 {
    width: 312px;
    top: 312px;
    left: -131px;
  }
  #mainImg .planet05 {
    width: 272px;
    top: 390px;
    left: 95px;
  }
  #mainImg .planet06 {
    width: 62px;
    top: 185px;
    left: 908px;
  }
  #mainImg .planet07 {
    width: 213px;
    top: 250px;
    left: 830px;
  }
}
@media only screen and (max-width: 750.99px) {
  #mainImg .planet01 {
    width: calc(291 / 1026 * 92vw);
    top: calc(-88 / 1026 * 92vw);
    left: calc(-76 / 1026 * 92vw);
  }
  #mainImg .planet02 {
    width: calc(71 / 1026 * 92vw);
    top: calc(13 / 1026 * 92vw);
    left: calc(307 / 1026 * 92vw);
  }
  #mainImg .planet03 {
    width: calc(413 / 1026 * 92vw);
    top: calc(-182 / 1026 * 92vw);
    left: calc(708 / 1026 * 92vw);
  }
  #mainImg .planet04 {
    width: calc(312 / 1026 * 92vw);
    top: calc(312 / 1026 * 92vw);
    left: calc(-131 / 1026 * 92vw);
  }
  #mainImg .planet05 {
    width: calc(272 / 1026 * 92vw);
    top: calc(390 / 1026 * 92vw);
    left: calc(95 / 1026 * 92vw);
  }
  #mainImg .planet06 {
    width: calc(62 / 1026 * 92vw);
    top: calc(185 / 1026 * 92vw);
    left: calc(908 / 1026 * 92vw);
  }
  #mainImg .planet07 {
    width: calc(213 / 1026 * 92vw);
    top: calc(250 / 1026 * 92vw);
    left: calc(830 / 1026 * 92vw);
  }
}
/*
animation
*/
#mainImg .cosmos.planet01 {
  animation: planet01 11s infinite linear;
}
@keyframes planet01 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#mainImg .cosmos.planet02 {
  animation: planet02 1s ease;
  animation-fill-mode: forwards;
  animation-delay: 4s;
}
@keyframes planet02 {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
#mainImg .cosmos.planet03 {
  animation: planet03 15s infinite linear;
}
@keyframes planet03 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#mainImg .cosmos.planet04 {
  animation: planet04 8s infinite linear;
}
@keyframes planet04 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#mainImg .cosmos.planet05 {
  animation: planet05 9s infinite linear;
}
@keyframes planet05 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media print, screen and (min-width: 751px) {
  #mainImg .cosmos.planet06.move {
    animation: planet06_pc 4s ease;
    animation-fill-mode: forwards;
  }
}
@keyframes planet06_pc {
  0% {
    transform: translate(120px, -100px) scale(1.4);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(-240px, 300px) scale(0.8);
    opacity: 0;
  }
}
@media only screen and (max-width: 750.99px) {
  #mainImg .cosmos.planet06.move {
    animation: planet06_sp 4s ease;
    animation-fill-mode: forwards;
  }
}
@keyframes planet06_sp {
  0% {
    transform: translate(60px, -50px) scale(1.4);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(-120px, 150px) scale(0.8);
    opacity: 0;
  }
}
#mainImg .cosmos.planet07 {
  animation: planet07 1s ease;
  animation-fill-mode: forwards;
  animation-delay: 3s;
}
@keyframes planet07 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* 

rocket

*/
@media print, screen and (min-width: 751px) {
  #mainImg .rocket {
    width: 203px;
    top: 151px;
    left: 6px;
  }
}
@media only screen and (max-width: 750.99px) {
  #mainImg .rocket {
    width: calc(203 / 1026 * 92vw);
    top: calc(151 / 1026 * 92vw);
    left: calc(6 / 1026 * 92vw);
  }
}
/*
animation
*/
@media print, screen and (min-width: 751px) {
  #mainImg .cosmos.rocket.move {
    animation: rocket_pc 3.4s ease;
    animation-fill-mode: forwards;
  }
}
@keyframes rocket_pc {
  0% {
    transform: translate(-250px, 500px) rotate(-50deg) scale(1.4);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(160px, -400px) rotate(20deg) scale(0.6);
    opacity: 0;
  }
}
@media only screen and (max-width: 750.99px) {
  #mainImg .cosmos.rocket.move {
    animation: rocket_sp 3.8s ease;
    animation-fill-mode: forwards;
  }
}
@keyframes rocket_sp {
  0% {
    transform: translate(-175px, 250px) rotate(-25deg) scale(1.4);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(80px, -200px) rotate(10deg) scale(0.6);
    opacity: 0;
  }
}
/* 

rhino

*/
@media print, screen and (min-width: 751px) {
  #mainImg .rhino {
    width: 340px;
    top: 290px;
    left: 683px;
  }
}
@media only screen and (max-width: 750.99px) {
  #mainImg .rhino {
    width: calc(340 / 1026 * 92vw);
    top: calc(290 / 1026 * 92vw);
    left: calc(683 / 1026 * 92vw);
  }
}
/*
animation
*/
@media print, screen and (min-width: 751px) {
  #mainImg .cosmos.rhino {
    animation: rhino_pc 1s ease;
    animation-fill-mode: forwards;
    animation-delay: 5.2s;
  }
}
@keyframes rhino_pc {
  0% {
    transform: translate(120px, 150px) scale(0.7);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}
@media only screen and (max-width: 750.99px) {
  #mainImg .cosmos.rhino {
    animation: rhino_sp 1s ease;
    animation-fill-mode: forwards;
    animation-delay: 5.2s;
  }
}
@keyframes rhino_sp {
  0% {
    transform: translate(60px, 75px) scale(0.7);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}
/* */
.scIn.move.delay200 {
  transition-delay: 200ms !important
}
.scIn.move.delay300 {
  transition-delay: 300ms !important
}
.scIn.move.delay400 {
  transition-delay: 400ms !important
}
.scIn.move.delay500 {
  transition-delay: 500ms !important
}
.scIn.move.delay600 {
  transition-delay: 600ms !important
}
.scIn.move.delay700 {
  transition-delay: 700ms !important
}
.scIn.move.delay800 {
  transition-delay: 800ms !important
}
.scIn.move.delay900 {
  transition-delay: 900ms !important
}
.scIn.move.delay1000 {
  transition-delay: 1000ms !important
}
.scIn.move.delay1100 {
  transition-delay: 1100ms !important
}
.scIn.move.delay1200 {
  transition-delay: 1200ms !important
}
.scIn.move.delay1300 {
  transition-delay: 1300ms !important
}
.scIn.move.delay1400 {
  transition-delay: 1400ms !important
}
.scIn.move.delay1500 {
  transition-delay: 1500ms !important
}
.scIn.move.delay1600 {
  transition-delay: 1600ms !important
}
.scIn.move.delay1700 {
  transition-delay: 1700ms !important
}
.scIn.move.delay1800 {
  transition-delay: 1800ms !important
}
.scIn.move.delay1900 {
  transition-delay: 1900ms !important
}
.scIn.move.delay2000 {
  transition-delay: 2000ms !important
}
.scIn.move.delay2100 {
  transition-delay: 2100ms !important
}
.scIn.move.delay2200 {
  transition-delay: 2200ms !important
}
.scIn.move.delay2300 {
  transition-delay: 2300ms !important
}
.scIn.move.delay2400 {
  transition-delay: 2400ms !important
}
.scIn.move.delay2500 {
  transition-delay: 2500ms !important
}
.scIn.move.delay2600 {
  transition-delay: 2600ms !important
}
.scIn.move.delay2700 {
  transition-delay: 2700ms !important
}
.scIn.move.delay2800 {
  transition-delay: 2800ms !important
}
.scIn.move.delay2900 {
  transition-delay: 2900ms !important
}
.scIn.move.delay3000 {
  transition-delay: 3000ms !important
}
.scIn.move.delay3100 {
  transition-delay: 3100ms !important
}
.scIn.move.delay3200 {
  transition-delay: 3200ms !important
}
.scIn.move.delay3300 {
  transition-delay: 3300ms !important
}
.scIn.move.delay3400 {
  transition-delay: 3400ms !important
}
.scIn.move.delay3500 {
  transition-delay: 3500ms !important
}
.scIn.move.delay3600 {
  transition-delay: 3600ms !important
}
.scIn.move.delay3700 {
  transition-delay: 3700ms !important
}
.scIn.move.delay3800 {
  transition-delay: 3800ms !important
}
.scIn.move.delay3900 {
  transition-delay: 3900ms !important
}
.scIn.move.delay4000 {
  transition-delay: 4000ms !important
}
.scIn.move.delay4100 {
  transition-delay: 4100ms !important
}
.scIn.move.delay4200 {
  transition-delay: 4200ms !important
}
.scIn.move.delay4300 {
  transition-delay: 4300ms !important
}
.scIn.move.delay4400 {
  transition-delay: 4400ms !important
}
.scIn.move.delay4500 {
  transition-delay: 4500ms !important
}
.scIn.move.delay4600 {
  transition-delay: 4600ms !important
}
.scIn.move.delay4700 {
  transition-delay: 4700ms !important
}
.scIn.move.delay4800 {
  transition-delay: 4800ms !important
}
}