@charset "UTF-8";

.start_ship {
  width: 100%;
  height: 100%;
  /*position: fixed;*/
  left: 0;
  right: 0;
  margin: 0 auto;
}
.start_ship li {
  float: left;
  list-style: none;
}
.start_ship li img {
  max-width: 100%;
}
.start_ship li:nth-child(1) {
  position: absolute;
  width: 8%;
  max-width: 200px;
  top: 100%;
  right: 35%;
  -webkit-animation-name: car_left;
  -webkit-animation-duration: 1.6s;
  -webkit-animation-delay: 3s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  animation-name: car_left;
  animation-duration: 1.6s;
  animation-delay: 3s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@-webkit-keyframes car_left {
  from {top: 100%;}
  to {top: -100vh;}
}
@keyframes car_left {
  from {top: 100%;}
  to {top: -100vh;}
}

.start_ship li:nth-child(2) {
  position: absolute;
  width: 9%;
  max-width: 200px;
  top: 100%;
  left: 35%;
  -webkit-animation-name: ship_mid;
  -webkit-animation-duration: 1.4s;
  -webkit-animation-delay: 3s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  animation-name: ship_mid;
  animation-duration: 1.4s;
  animation-delay: 3s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
@-webkit-keyframes ship_mid {
  from {top: 100%;}
  to {top: -120vh;}
}
@keyframes ship_mid {
  from {top: 100%;}
  to {top: -120vh;}
}

.start_ship li:nth-child(3) {
  position: absolute;
  width: 7%;
  max-width: 200px;
  top: 100%;
  right: 18%;
  -webkit-animation-name: ship_last1;
  -webkit-animation-duration: 1.9s;
  -webkit-animation-delay: 3s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  animation-name: ship_last1;
  animation-duration: 1.9s;
  animation-delay: 3s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
@-webkit-keyframes ship_last1 {
  from {top: 100%;}
  to {top: -100vh;}
}
@keyframes ship_last1 {
  from {top: 100%;}
  to {top: -100vh;}
}
.start_ship li:nth-child(4) {
  position: absolute;
  max-width: 200px;
  width: 6%;
  top: 100%;
  left: 18%;
  -webkit-animation-name: ship_last2;
  -webkit-animation-duration: 3.8s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 3s;
  -webkit-animation-timing-function: linear;
  animation-name: ship_last2;
  animation-duration: 3.8s;
  animation-fill-mode: forwards;
  animation-delay: 3s;
  animation-timing-function: linear;
  z-index: 99;
}
@-webkit-keyframes ship_last2 {
  from {top: 100%;}
  to {top: -100vh;}
}
@keyframes ship_last2 {
  from {top: 100%;}
  to {top: -100vh;}
}