/* 第一屏 */
.screen-1__heading,
.screen-1__phone,
.screen-1__shadow {
  transition: all 1s;
}
.screen-1__heading_animate_init {
  opacity: 0;
  transform: translate(0, 100%);
}
.screen-1__heading_animate_done,
.screen-1__phone_animate_done {
  opacity: 1;
  transform: translate(0, 0);
}
.screen-1__phone_animate_init {
  opacity: 0;
  transform: translate(0, -100%);
}
.screen-1__shadow_animate_init {
  opacity: 0;
  transform: translate(0, 100%) scale(1.5);
}
.screen-1__shadow_animate_done {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* 第二屏 */
.screen-2__heading,
.screen-2__sub-heading,
.screen-2__phone {
  transition: all 1s;
}
.screen-2__point_i_1,
.screen-2__point_i_2,
.screen-2__point_i_3 {
  transition: all 1s 1s;
}
.screen-2__heading_animate_init {
  opacity: 0;
  transform: translate(0, -100%);
}
.screen-2__sub-heading_animate_init,
.screen-2__phone_animate_init {
  opacity: 0;
  transform: translate(0, 100%);
}
.screen-2__point_i_1_animate_init {
  opacity: 0;
  transform: translate(-100%, 0);
}
.screen-2__point_i_2_animate_init,
.screen-2__point_i_3_animate_init {
  opacity: 0;
  transform: translate(100%, 0);
}
.screen-2__heading_animate_done,
.screen-2__sub-heading_animate_done,
.screen-2__phone_animate_done,
.screen-2__point_i_1_animate_done,
.screen-2__point_i_2_animate_done,
.screen-2__point_i_3_animate_done {
  opacity: 1;
  transform: translate(0, 0);
}

/* 第三屏 */
.screen-3__heading,
.screen-3__sub-heading,
.screen-3__phone,
.screen-3__features {
  transition: all 1s;
}
.screen-3__heading_animate_init {
  opacity: 0;
  transform: translate(0, -100%);
}
.screen-3__sub-heading_animate_init,
.screen-3__phone_animate_init {
  opacity: 0;
  transform: translate(0, 100%);
}
.screen-3__heading_animate_done,
.screen-3__sub-heading_animate_done,
.screen-3__phone_animate_done {
  opacity: 1;
  transform: translate(0, 0);
}
.screen-3__features_animate_init {
  opacity: 0;
  transform: scale(0.5);
}
.screen-3__features_animate_done {
  opacity: 1;
  transform: scale(1);
}
.screen-3__features__item {
  transition: all 0.5s;
}
.screen-3__features__item:hover {
  transform: scale(1.05);
  border-color: #fff;
}

/* 第四屏 */
.screen-4__heading,
.screen-4__sub-heading {
  transition: all 1s;
}
.screen-4__heading_animate_init {
  opacity: 0;
  transform: translate(0, -100%);
}
.screen-4__sub-heading_animate_init {
  opacity: 0;
  transform: translate(0, 100%);
}
.screen-3__heading_animate_done,
.screen-3__sub-heading_animate_done {
  opacity: 1;
  transform: translate(0, 0);
}
.screen-4__type__item_i_1 {
  transition: all 1s 0.5s;
}
.screen-4__type__item_i_2 {
  transition: all 1s 1s;
}
.screen-4__type__item_i_3 {
  transition: all 1s 1.5s;
}
.screen-4__type__item_i_4 {
  transition: all 1s 2s;
}
.screen-4__type__item_i_1_animate_init,
.screen-4__type__item_i_2_animate_init,
.screen-4__type__item_i_3_animate_init,
.screen-4__type__item_i_4_animate_init {
  opacity: 0;
}
.screen-4__type__item_i_1_animate_done,
.screen-4__type__item_i_2_animate_done,
.screen-4__type__item_i_3_animate_done,
.screen-4__type__item_i_4_animate_done {
  opacity: 1;
}

/* 第五屏 */
.screen-5__heading,
.screen-5__sub-heading,
.screen-5__bg {
  transition: all 1s;
}
.screen-5__heading_animate_init {
  opacity: 0;
  transform: translate(0, -100%);
}
.screen-5__sub-heading_animate_init,
.screen-5__bg_animate_init {
  opacity: 0;
  transform: translate(0, 100%);
}

/* 定义帧动画 */
@keyframes bonus {
  0%,
  100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}
.screen-2__point::before,
.screen-2__point::after {
  content: " ";
  width: 20px;
  height: 20px;
  display: block;
  background: rgba(255, 0, 0, 0.4);
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 0px;
  animation: bonus 2s infinite;
}
.screen-2__point::after {
  animation: bonus 2s infinite 1s;
}
.screen-2__point_i_1::before,
.screen-2__point_i_1::after {
  left: 200px;
}

/* 导航条 _status_black 样式 */
.header {
  transition: all 1s;
}
.header_status_black {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
}
.header_status_black .header__logo,
.header_status_black .header__nav-item {
  color: #fff;
}
.header_status_black .header__nav-item_status_active,
.header_status_black .header__nav-item:hover {
  color: #f01400;
}
.header_status_black + .screen-1 {
  margin-top: 80px;
}

/* 大纲 _status_in 样式 */
.outline {
  transition: all 1s;
  transform: translate(100%, 0);
  opacity: 0;
}
.outline_status_in {
  opacity: 1;
  transform: translate(0, 0);
}