html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.iconfont {
  vertical-align: bottom;
}

body>#app {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(//cdn.zto56.com/vendors/assets/cloud.jpg) no-repeat center;
  background-size: cover;
}

body>#app>.cloud-1 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(//cdn.zto56.com/vendors/assets/cloud-1-1.png) repeat-x 0px 0px;
  background-size: cover;
  animation: cloud-1 6000s linear infinite;
}

@keyframes cloud-1 {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 4000% 0;
  }
}

body>#app>.cloud-2 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(//cdn.zto56.com/vendors/assets/cloud-2-1.png) repeat-x 0px 0px;
  background-size: cover;
  animation: cloud-2 8000s linear infinite;
}

@keyframes cloud-2 {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 30000% 0;
  }
}

body>#app>.logo {
  position: absolute;
  background: url(//cdn.zto56.com/vendors/assets/logo_mini.png) no-repeat center;
  width: 120px;
  height: 45px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}