﻿.screen-1__shadow,
.screen-1__phone,
.screen-1__heading{
	transition: all 1s;
}

.screen-1__heading_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}

.screen-1__shadow_animate_done,
.screen-1__phone_animate_done,
.screen-1__heading_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%);
}
/*第二屏动画*/


.screen-2__subheading,
.screen-2__phone,
.screen-2__heading{
	transition: all 1s;
}


.screen-2__heading_animate_init{
	opacity: 0;
	transform: translate(0,-100%);
}

.screen-2__subheading_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}

.screen-2__phone_animate_init{
	opacity: 0;
	transform: translate(0,50%);
}

.screen-2__phone_animate_done,
.screen-2__subheading_animate_done,
.screen-2__heading_animate_done{
	opacity: 1;
	transform: translate(0,0);
}

.screen-2__point{
	transition: all 1s 1s;
}
.screen-2__point_done{
	opacity: 1;
	transform: translate(0,0);
}
.screen-2__point_i_1_animate_init{
	opacity: 0;
	transform: translate(-100%,0);
}
.screen-2__point_i_3_animate_init,
.screen-2__point_i_2_animate_init{
	opacity: 0;
	transform: translate(100%,0);
}

/*第三屏动画*/
.screen-3__features,
.screen-3__subheading,
.screen-3__phone,
.screen-3__heading{
	transition: all 1s;
}
.screen-3__phone_animate_done,
.screen-3__subheading_animate_done,
.screen-3__heading_animate_done{
	opacity: 1;
	transform: translate(0,0);
}


.screen-3__heading_animate_init{
	opacity: 0;
	transform: translate(0,-100%);
}
.screen-3__phone_animate_init,
.screen-3__subheading_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}
.screen-3__features_animate_init{
	opacity: 0;
	transform: scale(.5);
}
.screen-3__features_animate_done{
	opacity: 1;
	transform: scale(1);
}

.screen-3__features__item{
	transition: all .5s;
	cursor: pointer;
}
.screen-3__features__item:hover{
	transform: scale(1.1);
	border-color: #fff;
}
/*第四屏动画*/
.screen-4__subheading,
.screen-4__heading{
	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 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;
}

/*第5屏动画*/

.screen-5__bg,
.screen-5__subheading,
.screen-5__heading{
	transition: all 1s;
}
.screen-5__heading_animate_init{
	opacity: 0;
	transform: translate(0,-100%);
}
.screen-5__bg_animate_init,
.screen-5__subheading_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}




/*定义帧动画*/
@-webkit-keyframes bounce {
	0%,100% {
		transform: scale(0);
	}
	50% {
		transform: scale(1);
	}

}
/*使用帧动画*/
.screen-2__point:before,
.screen-2__point:after{
	content: ' ';
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	top: 1px;
	left: 0px;
	background-color: rgba(255,0,0,0.4);
	border-radius: 50%;
	-webkit-animation: bounce 2s infinite;
}

.screen-2__point:before{
  -webkit-animation: bounce 2s infinite 1s;
}
.screen-2__point_i_1:after,
.screen-2__point_i_1:before{
	left: 220px;
}

/*导航条样式变动*/
.header{
	transition: all 1s;
}
.header_status_black{
	background: rgba(0,0,0,.5);
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 3;

}
.header_status_black .header__nav-item,
.header_status_black .header__logo{
	color: #fff;
}
.header_status_black .header__nav-item_status_active{
	color: red;
}
.header_status_black .header__nav-item:hover{
	transition: all 1s;
	color: red;
}

.outline{
	
	transition: all 1s;
}

.outline_status_in{
	transform: translate(0,0);
	
}

.outline__item{
	transition: all 1s;
}
