/* 下降出现动画 */
@keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -5rem, 0);
    -ms-transform: translate3d(0, -5rem, 0);
    transform: translate3d(0, -5rem, 0);
    visibility: hidden;
    opacity: 0;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
    opacity: 1;
  }
}

/* 上升消失动画 */
@keyframes fadeOutUp {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, -5rem, 0);
    -ms-transform: translate3d(0, -5rem, 0);
    transform: translate3d(0, -5rem, 0);
    visibility: hidden;
    opacity: 0;
  }
}

/* 上升出现动画 */
@keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 5rem, 0);
    -ms-transform: translate3d(0, 5rem, 0);
    transform: translate3d(0, 5rem, 0);
    visibility: hidden;
    opacity: 0;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
    opacity: 1;
  }
}

/* 下降消失动画 */
@keyframes fadeOutDown {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 5rem, 0);
    -ms-transform: translate3d(0, 5rem, 0);
    transform: translate3d(0, 5rem, 0);
    visibility: hidden;
    opacity: 0;
  }
}

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(3rem);
    -ms-transform: translateY(3rem);
    transform: translateY(3rem);
  }

  40% {
    opacity: 1;
    -webkit-transform: translateY(-0.4rem);
    -ms-transform: translateY(-0.4rem);
    transform: translateY(-0.4rem);
  }

  70% {
    -webkit-transform: translateY(0.3rem);
    -ms-transform: translateY(0.3rem);
    transform: translateY(0.3rem);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-3rem);
    -ms-transform: translateY(-3rem);
    transform: translateY(-3rem);
  }

  40% {
    opacity: 1;
    -webkit-transform: translateY(0.3rem);
    -ms-transform: translateY(0.3rem);
    transform: translateY(0.3rem);
  }

  70% {
    -webkit-transform: translateY(-0.4rem);
    -ms-transform: translateY(-0.4rem);
    transform: translateY(-0.4rem);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}


/* 动画 */
.screen1.animate .screen1-title,
.screen1.animate .screen1-right img:nth-child(1),
.screen1.animate .screen1-right img:nth-child(2),
.screen1.animate .screen1-right img:nth-child(4),
.screen1.animate .screen1-right img:nth-child(6),
.screen1.animate .screen1-right img:nth-child(7),
.screen1.animate .screen1-right img:nth-child(8)
{    
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-name: slideInDown;
}

.screen1 .screen1-title,
.screen1 .screen1-right img:nth-child(1),
.screen1 .screen1-right img:nth-child(2),
.screen1 .screen1-right img:nth-child(4),
.screen1 .screen1-right img:nth-child(6),
.screen1 .screen1-right img:nth-child(7),
.screen1 .screen1-right img:nth-child(8){
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-name: fadeOutUp;
}

.screen1.animate .summary,
.screen1.animate .btn-group,
.screen1.animate .screen1-right img:nth-child(3),
.screen1.animate .screen1-right img:nth-child(5)  {
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-name: slideInUp;
}

.screen1 .summary,
.screen1 .btn-group,
.screen1 .screen1-right img:nth-child(3),
.screen1 .screen1-right img:nth-child(5)  {
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-name: fadeOutDown;
}


/* screen2动画 */

/* .screen2 .screen2-top,
.screen2 .screen2-sub-title,
.screen2 .screen2-sub-desc{
    visibility: hidden;
    opacity: 0;
} */

/* 从下进入本页 */
.screen2.animate .screen2-top,
.screen2.animate .screen2-sub-title,
.screen2.animate .screen2-sub-desc{
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-name: slideInUp;
}

.screen2.animate .screen-top-pic{
    animation-duration: .2s;
    animation-fill-mode: both;
    animation-name: slideInUp;
    animation-delay: .5s;
}

.screen2.animate .screen2-sub-title,
.screen2.animate .screen2-sub-desc{
    animation-delay: .4s;
}

.screen2.animate .screen2-item{
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-name: bounceInUp;
}

.screen2.animate .screen2-item-pic1{
    animation-delay: .45s;
}

.screen2.animate .screen2-item-pic2{
    animation-delay: .5s;
}

.screen2.animate .screen2-item-pic3{
    animation-delay: .55s;
}

/* 向上离开 */
.screen2.animate-up .screen2-top,
.screen2.animate-up .screen2-sub-title,
.screen2.animate-up .screen2-sub-desc,
.screen2.animate-up .screen-top-pic{
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-name: fadeOutUp;
}

.screen2.animate-up .screen2-item-pic1{
    animation-delay: .0s;
}

.screen2.animate-up .screen2-item-pic2{
    animation-delay: .2s;
}

.screen2.animate-up .screen2-item-pic3{
    animation-delay: .4s;
}

/* 向下离开 */
.screen2.animate-down .screen2-top,
.screen2.animate-down .screen2-sub-title,
.screen2.animate-down .screen2-sub-desc{
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-name: fadeOutDown;
}

.screen2.animate-down .screen-top-pic{
    animation-duration: .2s;
    animation-fill-mode: both;
    animation-name: fadeOutDown;
    animation-delay: .5s;
}

.screen2.animate-down .screen2-sub-title,
.screen2.animate-down .screen2-sub-desc{
    animation-delay: .4s;
}

.screen2.animate-down .screen2-item{
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-name: fadeOutDown;
}

.screen2.animate-down .screen2-item-pic1{
    animation-delay: .45s;
}

.screen2.animate-down .screen2-item-pic2{
    animation-delay: .5s;
}

.screen2.animate-down .screen2-item-pic3{
    animation-delay: .55s;
}


/* screen3动画 */

/* .screen3 .screen3-top,
.screen3 .screen3-sub-title,
.screen3 .screen3-sub-desc{
    visibility: hidden;
    opacity: 0;
} */

/* 从下进入 */
.screen3.animate .screen3-top,
.screen3.animate .screen3-sub-title,
.screen3.animate .screen3-sub-desc{
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-name: slideInUp;

}

.screen3.animate .screen-top-pic{
    animation-duration: .2s;
    animation-fill-mode: both;
    animation-name: slideInUp;
    animation-delay: .5s;
}

.screen3.animate .screen3-sub-title,
.screen3.animate .screen3-sub-desc{
    animation-delay: .4s;
}

.screen3.animate .screen3-item-pic{
    animation-duration: .5s;
    animation-delay: .4s;
    animation-fill-mode: both;
    animation-name: bounceInUp;
    /* animation-name: slideInUp; */
}

.screen3.animate .screen3-item{
  animation-duration: .5s;
  animation-fill-mode: both;
  animation-name: bounceInUp;
}

.screen3.animate .screen3-item-pic1{
  animation-delay: .45s;
}

.screen3.animate .screen3-item-pic2{
  animation-delay: .5s;
}

/* 向上消失 */
.screen3.animate-up .screen3-top,
.screen3.animate-up .screen3-sub-title,
.screen3.animate-up .screen3-sub-desc,
.screen3.animate-up .screen-top-pic{
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-name: fadeOutUp;
    animation-delay: 0s;
}

.screen3.animate-up .screen3-item-pic{
    animation-delay: .3s;
}

/* 向下消失 */
.screen3.animate-down .screen3-top,
.screen3.animate-down .screen3-sub-title,
.screen3.animate-down .screen3-sub-desc{
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-name: slideInDwon;

}

.screen3.animate-down .screen-top-pic{
    animation-duration: .15s;
    animation-fill-mode: both;
    animation-name: slideInDwon;
    animation-delay: .3s;
}

.screen3.animate-down .screen3-top{
    animation-delay: -.3s;
}

.screen3.animate-down .screen3-sub-title,
.screen3.animate-down .screen3-sub-desc{
    animation-delay: .4s;
}

.screen3.animate-down .screen3-item-pic{
    animation-duration: .5s;
    animation-delay: .4s;
    animation-fill-mode: both;
    animation-name: bounceInDown;
}