html, body {
  margin: 0;
  padding: 0;
}

#media-animate-page {
  overflow: hidden;
  line-height: 0em;
}

#media-animate-page .slide1 {
  background: #dadada;
}

#media-animate-page .slide1 .overlay .balloon {
  position: absolute;
  top: 22.4vw;
  left: 17.5vw;
  width: 9vw;
  z-index: 2;
}

#media-animate-page .slide1 .overlay .airplane {
  position: absolute;
  top: 17.5vw;
  right: 22.0vw;
  width: 10vw;
  z-index: 2;
}

#media-animate-page .slide1 .overlay .earth {
  display: block;
  width: 100%;
  background: transparent url("images/earth.png") no-repeat;
  background-size: contain;
  height: 22vw;
  position: absolute;
  top: 0;
  z-index: 1;
  opacity: 0.5;
}

#media-animate-page .slide1 .overlay .bg-circle {
  /* text-align: center; */
  display: block;
  top: 7.5vw;
  left: 26.5vw;
  width: 43vw;
  height: 21vw;
  position: absolute;
  z-index: 3;
  background: transparent url(images/bg_circle.svg) no-repeat;
  background-size: contain;
}

#media-animate-page .slide1 .overlay .bg-circle .circle {
  position: absolute;
  width: 20vw;
  left: 12.8vw;
  top: 0.3vw;
  z-index: 3;
  -webkit-animation: spin-back 20s linear infinite;
  -moz-animation: spin-back 20s linear infinite;
  animation: spin-back 20s linear infinite;
}

#media-animate-page .slide1 .overlay .bg-circle .front {
  position: absolute;
  width: 20vw;
  left: 12.8vw;
  z-index: 4;
  top: 0.3vw;
  -webkit-animation: spin 20s linear infinite;
  -moz-animation: spin 20s linear infinite;
  animation: spin 20s linear infinite;
}

#media-animate-page .slide1 .overlay .bg-circle .dot_overlay {
  position: absolute;
  width: 20vw;
  left: 12.8vw;
  z-index: 5;
  top: 0.3vw;
}

#media-animate-page .slide1 .overlay .line1 {
  position: absolute;
  top: 9.3vw;
  left: 0;
  width: 9vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
  animation: open-left 1s;
  animation-fill-mode: forwards;
}

#media-animate-page .slide1 .overlay .line2 {
  position: absolute;
  top: 9.4vw;
  left: 0;
  width: 22.5vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
  animation: open-left 1s ease 0.5s 1 normal forwards;
}

#media-animate-page .slide1 .overlay .line3 {
  position: absolute;
  top: 19.8vw;
  right: 0;
  width: 21.4vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
  animation: open-left 1s ease 1s 1 normal forwards;
}

#media-animate-page .slide1 .overlay .line4 {
  position: absolute;
  top: 28.5vw;
  right: 0;
  width: 7.7vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
  animation: open-left 1s ease 1.5s 1 normal forwards;
}

#media-animate-page .slide1 .overlay .satellite {
  position: absolute;
  top: 39.3vw;
  left: 8vw;
  width: 11vw;
}

#media-animate-page .slide1 .overlay .astronaut {
  position: absolute;
  top: 36.8vw;
  right: 0;
  width: 15.2vw;
}

#media-animate-page .slide1 .overlay .student-group {
  position: relative;
}

#media-animate-page .slide1 .overlay .student-group .student {
  position: absolute;
  top: 38.3vw;
  left: 22.2vw;
  width: 54.9vw;
  z-index: 2;
}

#media-animate-page .slide1 .overlay .student-group .student-overlay {
  position: absolute;
  top: 38.3vw;
  left: 22.2vw;
  width: 54.9vw;
  z-index: 6;
}

#media-animate-page .slide1 .overlay .student-group .gear-black-left {
  position: absolute;
  top: 58.0vw;
  left: 33.2vw;
  width: 7.6vw;
  z-index: 3;
}

#media-animate-page .slide1 .overlay .student-group .gear-black-right {
  position: absolute;
  top: 58.0vw;
  left: 56.2vw;
  width: 7.6vw;
  z-index: 3;
}

#media-animate-page .slide1 .overlay .student-group .gear-grey-left {
  position: absolute;
  top: 55.8vw;
  left: 36.2vw;
  width: 6.6vw;
  z-index: 4;
}

#media-animate-page .slide1 .overlay .student-group .gear-grey-right {
  position: absolute;
  top: 55.8vw;
  left: 54.2vw;
  width: 6.6vw;
  z-index: 4;
}

#media-animate-page .slide1 .overlay .student-group .gear-overlay-left {
  position: absolute;
  top: 56vw;
  left: 29.9vw;
  width: 6.4vw;
  z-index: 5;
}

#media-animate-page .slide1 .overlay .student-group .gear-overlay-right {
  position: absolute;
  top: 56vw;
  left: 60.6vw;
  width: 6.4vw;
  z-index: 5;
}

#media-animate-page .slide2 {
  background: #636363;
}

#media-animate-page .slide2 .overlay .group-bird {
  position: relative;
  top: 15.9vw;
  left: 33.8vw;
  z-index: 2;
}

#media-animate-page .slide2 .overlay .group-bird img {
  position: absolute;
  opacity: 0;
}

#media-animate-page .slide2 .overlay .group-bird img.bird01 {
  width: 8vw;
  left: 16vw;
  top: 3vw;
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 1s;
  animation: fadeOut 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird01.active {
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation: fadeIn 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird02 {
  width: 4vw;
  left: 8vw;
  top: 7vw;
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 1s;
  animation: fadeOut 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird02.active {
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation: fadeIn 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird03 {
  width: 2vw;
  left: 1vw;
  top: 12vw;
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 1s;
  animation: fadeOut 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird03.active {
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation: fadeIn 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird04 {
  width: 3vw;
  left: 17vw;
  top: 13vw;
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 1s;
  animation: fadeOut 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird04.active {
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation: fadeIn 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird05 {
  width: 2vw;
  left: 8vw;
  top: 15vw;
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 1s;
  animation: fadeOut 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird05.active {
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation: fadeIn 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird06 {
  width: 1.5vw;
  left: 20vw;
  top: 18vw;
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 1s;
  animation: fadeOut 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird06.active {
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation: fadeIn 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird07 {
  width: 2vw;
  left: 14vw;
  top: 19vw;
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 1s;
  animation: fadeOut 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird07.active {
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation: fadeIn 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird08 {
  width: 2vw;
  left: 5vw;
  top: 21vw;
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 1s;
  animation: fadeOut 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird08.active {
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation: fadeIn 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird09 {
  width: 2vw;
  left: 10vw;
  top: 23.5vw;
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 1s;
  animation: fadeOut 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird09.active {
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation: fadeIn 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird10 {
  width: 5vw;
  left: 22vw;
  top: 23vw;
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 1s;
  animation: fadeOut 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird10.active {
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation: fadeIn 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird11 {
  width: 2.5vw;
  left: 18vw;
  top: 27vw;
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 1s;
  animation: fadeOut 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .group-bird img.bird11.active {
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation: fadeIn 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .rocket {
  position: absolute;
  left: 25.6vw;
  width: 6.5vw;
  z-index: 1;
  top: 12vw;
}

#media-animate-page .slide2 .overlay .balloon2 {
  position: absolute;
  right: 20.9vw;
  width: 8vw;
  z-index: 1;
  top: 18.4vw;
}

#media-animate-page .slide2 .overlay .line5 {
  position: absolute;
  top: 20.2vw;
  left: 0;
  width: 20.3vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
}

#media-animate-page .slide2 .overlay .line5.active {
  animation: open-left 1s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .line6 {
  position: absolute;
  top: 23.1vw;
  left: 3.4vw;
  width: 30.7vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
}

#media-animate-page .slide2 .overlay .line6.active {
  animation: open-left 1s ease 0.5s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .line7 {
  position: absolute;
  top: 53.3vw;
  right: 0;
  width: 22.6vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
}

#media-animate-page .slide2 .overlay .line7.active {
  animation: open-left 1s ease 1.0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .line8 {
  position: absolute;
  top: 61.8vw;
  right: 0;
  width: 9.0vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
}

#media-animate-page .slide2 .overlay .line8.active {
  animation: open-left 1s ease 1.5s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .four-cs {
  position: absolute;
  top: 46.5vw;
  left: 39.3vw;
  width: 22vw;
  z-index: 3;
}

#media-animate-page .slide2 .overlay .frame-s {
  position: absolute;
  top: 51.1vw;
  left: 55.3vw;
  width: 4.2vw;
  z-index: 3;
  transition: clip-path 1s;
  clip-path: polygon(0 0, 0 2%, 3% 11%, 0 14%, 8% 19%, 1% 20%, 0 19%, 3% 22%, 0 20%, 0 0);
}

#media-animate-page .slide2 .overlay .frame-s.active {
  animation: animate-s 0.2s ease 0s 1 normal forwards;
}

#media-animate-page .slide2 .overlay .spin-circle {
  position: relative;
  display: block;
  top: 47vw;
  left: 24vw;
  width: 14vw;
}

#media-animate-page .slide2 .overlay .spin-circle .circle {
  position: absolute;
  width: 12.3vw;
  left: 12.8vw;
  top: 0.3vw;
  z-index: 2;
  -webkit-animation: spin-back 20s linear infinite;
  -moz-animation: spin-back 20s linear infinite;
  animation: spin-back 20s linear infinite;
}

#media-animate-page .slide2 .overlay .spin-circle .front {
  position: absolute;
  width: 12.3vw;
  left: 12.8vw;
  z-index: 2;
  top: 0.3vw;
  -webkit-animation: spin 20s linear infinite;
  -moz-animation: spin 20s linear infinite;
  animation: spin 20s linear infinite;
}

#media-animate-page .slide2 .overlay .spin-circle .dot_overlay {
  position: absolute;
  width: 12.3vw;
  left: 12.8vw;
  z-index: 3;
  top: 0.3vw;
}

#media-animate-page .slide3 {
  background: #252525;
}

#media-animate-page .slide3 .overlay .list-4c {
  position: absolute;
  top: 10.4vw;
  left: 22vw;
  width: 52vw;
}

#media-animate-page .slide3 .overlay .bg-hand {
  display: block;
  position: relative;
  z-index: 2;
  top: 26vw;
  left: 26vw;
  width: 46vw;
  height: 61vw;
}

#media-animate-page .slide3 .overlay .bg-hand .hand {
  width: 44vw;
  left: 11.7vw;
  position: absolute;
  z-index: 3;
}

#media-animate-page .slide3 .overlay .bg-hand .overlay-hand {
  position: absolute;
  top: 11.5vw;
  left: 1.1vw;
  width: 44.1vw;
  z-index: 5;
}

#media-animate-page .slide3 .overlay .bg-hand .outer-hand {
  position: absolute;
  width: 26.7vw;
  top: 12.5vw;
  left: 9.7vw;
  z-index: 2;
  -webkit-animation: spin-back 40s linear infinite;
  -moz-animation: spin-back 40s linear infinite;
  animation: spin-back 40s linear infinite;
}

#media-animate-page .slide3 .overlay .bg-hand .footer-hand {
  position: absolute;
  height: 12vw;
  top: 38.5vw;
  left: 22.3vw;
  z-index: 1;
  transition: clip-path 1s;
  clip-path: polygon(0 0, 100% 0, 100% 1%, 0 1%);
}

#media-animate-page .slide3 .overlay .bg-hand .footer-hand.active {
  animation: open-up 0.5s ease 0s 1 normal forwards;
}

#media-animate-page .slide3 .overlay .bg-hand .text-hand {
  position: absolute;
  bottom: 1.1vw;
  width: 27vw;
  left: 10vw;
}

#media-animate-page .slide3 .overlay .bg-hand .line9 {
  position: absolute;
  bottom: 18vw;
  left: 0;
  width: 25.3vw;
}

#media-animate-page .slide3 .overlay .bg-hand .line10 {
  position: absolute;
  bottom: 18vw;
  left: 0;
  width: 25.3vw;
}

#media-animate-page .slide4 {
  background: #efefef;
}

#media-animate-page .slide4 .line11l {
  position: absolute;
  left: 3vw;
  top: -20vw;
  width: 21.3vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
}

#media-animate-page .slide4 .line11l.active {
  animation: open-left 1s ease 0.5s 1 normal forwards;
}

#media-animate-page .slide4 .line12l {
  position: absolute;
  left: 0;
  top: -24.3vw;
  width: 25.3vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
}

#media-animate-page .slide4 .line12l.active {
  animation: open-left 1s ease 0.0s 1 normal forwards;
}

#media-animate-page .slide4 .line11r {
  position: absolute;
  bottom: 52.7vw;
  right: -9vw;
  width: 38.3vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
}

#media-animate-page .slide4 .line11r.active {
  animation: open-left 1s ease 1.5s 1 normal forwards;
}

#media-animate-page .slide4 .line12r {
  position: absolute;
  bottom: 58vw;
  right: -6px;
  width: 20.3vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
}

#media-animate-page .slide4 .line12r.active {
  animation: open-left 1s ease 2.0s 1 normal forwards;
}

#media-animate-page .slide4 .astronaut2 {
  position: absolute;
  left: 0;
  top: 26.3vw;
  width: 20.5vw;
}

#media-animate-page .slide4 .rocket2 {
  position: absolute;
  right: 21vw;
  top: 32.7vw;
  width: 8vw;
}

#media-animate-page .slide4 .circle1 {
  position: absolute;
  display: block;
  width: 14.2vw;
  height: 14.2vw;
  bottom: 4.7vw;
  left: 7.6vw;
  z-index: 3;
}

#media-animate-page .slide4 .circle2 {
  position: absolute;
  display: block;
  width: 6.4vw;
  height: 6.4vw;
  bottom: 8.7vw;
  right: 22.2vw;
  z-index: 3;
}

#media-animate-page .slide4 .text2 {
  width: 28.2vw;
  position: absolute;
  bottom: 17.5vw;
  left: 35.2vw;
}

#media-animate-page .slide4 .line13 {
  position: absolute;
  top: 49.7vw;
  left: 0;
  width: 31.3vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
}

#media-animate-page .slide4 .line13.active {
  animation: open-left 1s ease 0.0s 1 normal forwards;
}

#media-animate-page .slide4 .line14 {
  position: absolute;
  top: 56.7vw;
  left: 6.7vw;
  width: 21.3vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
}

#media-animate-page .slide4 .line14.active {
  animation: open-left 1s ease 0.5s 1 normal forwards;
}

#media-animate-page .slide4 .line15 {
  position: absolute;
  bottom: -0.1vw;
  right: -9vw;
  width: 38.3vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
}

#media-animate-page .slide4 .line15.active {
  animation: open-left 1s ease 1.5s 1 normal forwards;
}

#media-animate-page .slide4 .line16 {
  position: absolute;
  bottom: 5.2vw;
  right: -6px;
  width: 20.3vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
}

#media-animate-page .slide4 .line16.active {
  animation: open-left 1s ease 2.0s 1 normal forwards;
}

#media-animate-page .slide5 {
  background: #b7b7b7;
}

#media-animate-page .slide5 .overlay .line17 {
  position: absolute;
  top: 53.2vw;
  left: 0;
  width: 25.3vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
}

#media-animate-page .slide5 .overlay .line17.active {
  animation: open-left 1s ease 0.0s 1 normal forwards;
}

#media-animate-page .slide5 .overlay .line18 {
  position: absolute;
  top: 57.3vw;
  left: 2.6vw;
  width: 22.8vw;
  z-index: 1;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
}

#media-animate-page .slide5 .overlay .line18.active {
  animation: open-left 1s ease 0.5s 1 normal forwards;
}

#media-animate-page .slide5 .overlay .triangle-left {
  width: 14vw;
  position: absolute;
  top: 47.2vw;
  left: 4.4vw;
}

#media-animate-page .slide5 .overlay .triangle-right {
  width: 14vw;
  position: absolute;
  top: 47vw;
  right: 5.3vw;
}

#media-animate-page .slide5 .overlay .bird2 {
  width: 23.4vw;
  position: absolute;
  top: 36.7vw;
  right: 11.0vw;
}

#media-animate-page .slide5 .overlay .cloud {
  display: block;
  width: 120%;
  margin-top: 0vw;
  height: 62vw;
  margin-left: -9vw;
  background: url(images/cloud.png) no-repeat;
  background-size: contain;
  background-position-x: -10vw;
}

#media-animate-page .slide5 .overlay .text5 {
  width: 30.3vw;
  position: absolute;
  bottom: 39.5vw;
  left: 34.2vw;
  z-index: 3;
}

#media-animate-page .slide5 .overlay .text6 {
  width: 32.3vw;
  position: absolute;
  bottom: 7.2vw;
  left: 33.1vw;
  z-index: 3;
}

#media-animate-page .slide6 {
  background: #9c9c9c;
}

#media-animate-page .slide6 .header .bg {
  position: absolute;
  top: 6.2vw;
  width: 57.4vw;
  left: 20.2vw;
  z-index: 3;
}

#media-animate-page .slide6 .header .astronaut {
  position: absolute;
  top: -7.8vw;
  width: 34.4vw;
  left: 31.8vw;
  z-index: 5;
}

#media-animate-page .slide6 .header .line19 {
  position: absolute;
  bottom: 59.7vw;
  right: -16.7vw;
  width: 38.3vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
}

#media-animate-page .slide6 .header .line19.active {
  animation: open-left 1s ease 1.5s 1 normal forwards;
}

#media-animate-page .slide6 .header .line20 {
  position: absolute;
  bottom: 69.5vw;
  right: -7px;
  width: 12.3vw;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
}

#media-animate-page .slide6 .header .line20.active {
  animation: open-left 1s ease 2.0s 1 normal forwards;
}

#media-animate-page .slide6 .circle-template.circle1 {
  position: absolute;
  display: block;
  width: 13.5vw;
  height: 13.5vw;
  top: 9.4vw;
  left: 24.2vw;
  z-index: 3;
}

#media-animate-page .slide6 .circle-template.circle2 {
  position: absolute;
  display: block;
  width: 5.6vw;
  height: 5.6vw;
  top: 4.4vw;
  right: 32.8vw;
  z-index: 1;
}

#media-animate-page .slide6 .circle-template.circle3 {
  position: absolute;
  display: block;
  width: 4.6vw;
  height: 4.6vw;
  top: 18.1vw;
  right: 26.5vw;
  z-index: 1;
}

#media-animate-page .slide6 .circle-template.circle4 {
  position: absolute;
  display: block;
  width: 6.5vw;
  height: 6.5vw;
  bottom: 19.9vw;
  left: 29.2vw;
  z-index: 1;
}

#media-animate-page .slide6 .circle-template.circle5 {
  position: absolute;
  display: block;
  width: 14.3vw;
  height: 14.3vw;
  bottom: 13.9vw;
  right: 24.0vw;
  z-index: 1;
}

#media-animate-page .slide6 .text3 {
  width: 32vw;
  position: absolute;
  bottom: 71vw;
  left: 33.2vw;
  z-index: 3;
}

#media-animate-page .slide6 .text4 {
  width: 32.9vw;
  position: absolute;
  top: 44.0vw;
  left: 32.6vw;
  z-index: 3;
}

#media-animate-page .slide6 .cloud2 {
  position: absolute;
  top: 0;
  display: block;
  width: 130%;
  margin-top: 0vw;
  margin-left: -12vw;
  height: 101vw;
  background: url(images/cloud2.png) no-repeat;
  background-size: cover;
  background-position-x: -17vw;
  z-index: 2;
}

#media-animate-page .slide6 .line21 {
  position: absolute;
  top: 51.8vw;
  left: 7.5vw;
  width: 22.3vw;
  z-index: 3;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
}

#media-animate-page .slide6 .line21.active {
  animation: open-left 1s ease 0s 1 normal forwards;
}

#media-animate-page .slide6 .line22 {
  position: absolute;
  bottom: 31.1vw;
  left: 13.5vw;
  width: 22.3vw;
  z-index: 3;
  transition: clip-path 1s;
  clip-path: circle(0.1% at 0 0);
}

#media-animate-page .slide6 .line22.active {
  animation: open-left 1s ease 0.5s 1 normal forwards;
}

#media-animate-page .slide6 .rocket3 {
  position: absolute;
  left: 3.1vw;
  top: 50vw;
  width: 25vw;
  z-index: 4;
}

#media-animate-page .slide6 .astronaut3 {
  position: absolute;
  right: 0;
  top: 70vw;
  width: 18vw;
}

#media-animate-page .slide6 .satellite2 {
  position: absolute;
  right: 32.3vw;
  top: 70vw;
  width: 11vw;
  z-index: 3;
}

#media-animate-page .slide1 .bg,
#media-animate-page .slide2 .bg,
#media-animate-page .slide3 .bg,
#media-animate-page .slide4 .bg,
#media-animate-page .slide5 .bg,
#media-animate-page .slide6 .bg {
  width: 100%;
}

.slide1,
.slide2,
.slide3,
.slide4,
.slide5,
.slide6 {
  position: relative;
}

.slide1 .overlay,
.slide2 .overlay,
.slide3 .overlay,
.slide4 .overlay,
.slide5 .overlay,
.slide6 .overlay {
  position: absolute;
  width: 100%;
  top: 0;
}

.inner-hand {
  position: absolute;
  width: 26.7vw;
  top: 12.5vw;
  left: 9.6vw;
  z-index: 1;
  -webkit-animation: spin 40s linear infinite;
  -moz-animation: spin 40s linear infinite;
  animation: spin 40s linear infinite;
}

.circle-template .inner-hand {
  width: auto;
  top: 0;
  left: 0;
  -webkit-animation: spin 20s linear infinite;
  -moz-animation: spin 20s linear infinite;
  animation: spin 20s linear infinite;
}

.circle-template .outer-hand {
  width: auto;
  top: 0;
  left: 0;
  -webkit-animation: spin-back 20s linear infinite;
  -moz-animation: spin-back 20s linear infinite;
  animation: spin-back 20s linear infinite;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin-back {
  100% {
    -moz-transform: rotate(-360deg);
  }
}

@-webkit-keyframes spin-back {
  100% {
    -webkit-transform: rotate(-360deg);
  }
}

@keyframes spin-back {
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@keyframes open-left {
  0% {
    clip-path: circle(0.1% at 0 0);
  }
  100% {
    clip-path: circle(141.4% at 0 0);
  }
}

@keyframes open-up {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 1%, 0 1%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes animate-s {
  0% {
    clip-path: polygon(0 0, 0 2%, 3% 11%, 0 14%, 8% 19%, 1% 20%, 0 19%, 3% 22%, 0 20%, 0 0);
  }
  20% {
    clip-path: polygon(25% 0, 46% 0, 58% 7%, 61% 20%, 48% 24%, 39% 24%, 30% 23%, 17% 22%, 0 22%, 0 0);
  }
  40% {
    clip-path: polygon(55% 0, 100% 0, 100% 15%, 100% 26%, 79% 34%, 56% 28%, 39% 23%, 22% 21%, 0 22%, 0 0);
  }
  60% {
    clip-path: polygon(100% 0, 100% 34%, 100% 53%, 100% 62%, 78% 69%, 55% 66%, 56% 55%, 55% 24%, 0 22%, 0 0);
  }
  100% {
    clip-path: polygon(100% 0, 100% 34%, 100% 71%, 100% 100%, 0 100%, 0 75%, 57% 73%, 57% 33%, 0 32%, 0 0);
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}