/* 初始位置 */
.screen-1__heading{
	transition: all 1s;
	
}
/* 向上,init */
.screen-1__heading_animate_init{
	opacity: 0;
	transform: translate(0, 100%);
}
/* 向下done */
.screen-1__heading_animate_done{
	transform: translate(0, 0);
	opacity: 1;
}

/* 初始位置 */
.screen-1__phone{
	transition: all 1s;
	
}
/* 向上,init */
.screen-1__phone_animate_init{
	opacity: 0;
	transform: translate(0, -100%);
}
/* 向下done */
.screen-1__phone_animate_done{
	transform: translate(0, 0);
	opacity: 1;
}

/* 初始位置 */
.screen-1__shadow{
	transition: all 1s;
	
}
/* 向上,init */
.screen-1__shadow_animate_init{
	opacity: 0;
	transform: translate(0, 100%);
}
/* 向下done */
.screen-1__shadow_animate_done{
	transform: translate(0, 0);
	opacity: 1;
}

/* 第二屏幕动画 */
/* 初始位置 */
.screen-2__heading{
	transition: all 1s;
	
}
/* 向上,init */
.screen-2__heading_animate_init{
	opacity: 0;
	transform: translate(0, -100%);
}
/* 向下done */
.screen-2__heading_animate_done{
	transform: translate(0, 0);
	opacity: 1;
}

/* 初始位置 */
.screen-2__phone{
	transition: all 1s;
	
}
/* 向上,init */
.screen-2__phone_animate_init{
	opacity: 0;
	transform: translate(0, 50%);
}
/* 向下done */
.screen-2__phone_animate_done{
	transform: translate(0, 0);
	opacity: 1;
}

/* 初始位置 */
.screen-2__subheading{
	transition: all 1s;
	
}
/* 向上,init */
.screen-2__subheading_animate_init{
	opacity: 0;
	transform: translate(0, 100%);
}
/* 向下done */
.screen-2__subheading_animate_done{
	transform: translate(0, 0);
	opacity: 1;
}



/* 第三屏幕动画 */

.screen-3__heading,
.screen-3__phone,
.screen-3__subheading{
	transition: all 1s;
}
.screen-2__heading_animate_done,
.screen-2__phone_animate_done,
.screen-2__subheading_animate_done{
	transform: translate(0, 0);
	opacity: 1;
}

.screen-3__heading_animate_init{
	opacity: 0;
	transform: translate(0, -100%);
}
.screen-3__subheading_animate_init{
	opacity: 0;
	transform: translate(0, 100%);
}
.screen-3__phone_animate_init{
	opacity: 0;
	transform: translate(100%, 0);
}

/* 四个小盒子,缩放效果*/
.screen-3__features{
	transition: all 1s;
}
.screen-3__features_animate_init{
	transform: scale(.5);
	opacity: 0;
}
.screen-3__features_animate_done{
	transform: scale(1);
	opacity: 1;
}

/* 鼠标效果 */

.screen-3__features__item{
	transition: all .5s;
}
.screen-3__features__item:hover{
	transform:scale(1.1);
	border-color: #fff;
}



/* 第四屏幕动画 */
.screen-4__heading,
.screen-4__subheading{
	transition: all 1s;
}
.screen-4__heading_animate_init{
	opacity: 0;
	transform: translate(0, -100%);
}
.screen-4__subheading_animate_init{
	opacity: 0;
	transform: translate(0, 100%);
}
.screen-4__type__item_i_1{
	transition: all 1s .5s;
}
.screen-4__type__item_i_2{
	transition: all 1s 0.75s;
}
.screen-4__type__item_i_3{
	transition: all 1s 1s;
}
.screen-4__type__item_i_4{
	transition: all 1s 1.5s;
}

.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__bg,
.screen-5__subheading{
	transition: all 1s;
}
.screen-5__heading_animate_done,
.screen-5__bg_animate_done,
.screen-5__subheading_animate_done{
	transform: translate(0, 0);
	opacity: 1;
}

.screen-5__heading_animate_init{
	opacity: 0;
	transform: translate(0, -100%);
}
.screen-5__subheading_animate_init{
	opacity: 0;
	transform: translate(0, 100%);
}
.screen-5__bg_animate_init{
	opacity: 0;
	transform: translate(100%, 0);
}

/* 定义帧动画 */

/* 导航条的样式scroll up ,_status_black*/
.header{
	transition: all 1s;
}
.header_status_black{
	background-color: rgba(0,0,0,.5);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
}
.header_status_black .header__nav-item,
.header_status_black .header__logo{
	color: #fff;
}


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