/*======================
	screen-1动画样式
  ======================*/
.screen-1__heading,
.screen-1__phone,
.screen-1__shadow{
	-webkit-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s;
}
.screen-1__heading_animate_init,
.screen-1__shadow_animate_init{
	opacity:0;
	-webkit-transform:translate(0,100%);
	    -ms-transform:translate(0,100%);
	        transform:translate(0,100%);
}
.screen-1__phone_animate_init{
	opacity:0;
	-webkit-transform:translate(0,-100%);
	    -ms-transform:translate(0,-100%);
	        transform:translate(0,-100%);
}
.screen-1__heading_animate_done,
.screen-1__phone_animate_done,
.screen-1__shadow_animate_done{
	opacity:1;
	-webkit-transform:translate(0,0);
	    -ms-transform:translate(0,0);
	        transform:translate(0,0);
}

/*======================
	screen-2动画样式
  ======================*/
.screen-2__heading,
.screen-2__phone,
.screen-2__subheading{
	-webkit-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s;
}
.screen-2__point{
	-webkit-transition:all 1s 1s;
	-o-transition:all 1s 1s;
	transition:all 1s 1s;
}
.screen-2__heading_animate_init{
	opacity:0;
	-webkit-transform:translate(0,-100%);
	    -ms-transform:translate(0,-100%);
	        transform:translate(0,-100%);
}
.screen-2__subheading_animate_init{
	opacity:0;
	-webkit-transform:translate(0,100%);
	    -ms-transform:translate(0,100%);
	        transform:translate(0,100%);
}
.screen-2__phone_animate_init{
	opacity:0;
	-webkit-transform:translate(0,50%);
	    -ms-transform:translate(0,50%);
	        transform:translate(0,50%);
}
.screen-2__point_i_1_animate_init{
	opacity:0;
	-webkit-transform:translate(-100%,0);
	    -ms-transform:translate(-100%,0);
	        transform:translate(-100%,0);
}
.screen-2__point_i_2_animate_init,
.screen-2__point_i_3_animate_init{
	opacity:0;
	-webkit-transform:translate(100%,0);
	    -ms-transform:translate(100%,0);
	        transform:translate(100%,0);
}
.screen-2__heading_animate_done,
.screen-2__subheading_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;
	-webkit-transform:translate(0,0);
	    -ms-transform:translate(0,0);
	        transform:translate(0,0);
}

/*======================
	screen-3动画样式
  ======================*/
.screen-3__heading,
.screen-3__subheading,
.screen-3__phone,
.screen-3__features{
	-webkit-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s;
}
.screen-3__features_animate_init{
	opacity:0;
	-webkit-transform:scale(.5);
	    -ms-transform:scale(.5);
	        transform:scale(.5);
}
.screen-3__features_animate_done{
	opacity:1;
	-webkit-transform:scale(1);
	    -ms-transform:scale(1);
	        transform:scale(1);
}
.screen-3__heading_animate_init{
	opacity:0;
	-webkit-transform:translate(0,-100%);
	    -ms-transform:translate(0,-100%);
	        transform:translate(0,-100%);
}
.screen-3__subheading_animate_init{
	opacity:0;
	-webkit-transform:translate(0,100%);
	    -ms-transform:translate(0,100%);
	        transform:translate(0,100%);
}
.screen-3__phone_animate_init{
	opacity:0;
	-webkit-transform:translate(0,50%);
	    -ms-transform:translate(0,50%);
	        transform:translate(0,50%);
}
.screen-3__heading_animate_done,
.screen-3__subheading_animate_done,
.screen-3__phone_animate_done{
	opacity:1;
	-webkit-transform:translate(0,0);
	    -ms-transform:translate(0,0);
	        transform:translate(0,0);
}
.screen-3__features__item{
	-webkit-transition:all .5s;
	-o-transition:all .5s;
	transition:all .5s;
	cursor:pointer;
}
.screen-3__features__item:hover{
	-webkit-transform:scale(1.1);
	    -ms-transform:scale(1.1);
	        transform:scale(1.1);
	border-color:#fff;
}

/*======================
	screen-4动画样式
  ======================*/
.screen-4__heading,
.screen-4__subheading{
	-webkit-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s;
}
.screen-4__heading_animate_init{
	opacity:0;
	-webkit-transform:translate(0,-100%);
	    -ms-transform:translate(0,-100%);
	        transform:translate(0,-100%);
}
.screen-4__subheading_animate_init{
	opacity:0;
	-webkit-transform:translate(0,100%);
	    -ms-transform:translate(0,100%);
	        transform:translate(0,100%);
}
.screen-4__heading_animate_done,
.screen-4__subheading_animate_done{
	opacity:1;
	-webkit-transform:translate(0,0);
	    -ms-transform:translate(0,0);
	        transform:translate(0,0);
}
.screen-4__type__item_i_1{
	-webkit-transition:all 1s .5s;
	-o-transition:all 1s .5s;
	transition:all 1s .5s;
}
.screen-4__type__item_i_2{
	-webkit-transition:all 1s 1s;
	-o-transition:all 1s 1s;
	transition:all 1s 1s;
}
.screen-4__type__item_i_3{
	-webkit-transition:all 1s 1.5s;
	-o-transition:all 1s 1.5s;
	transition:all 1s 1.5s;
}
.screen-4__type__item_i_4{
	-webkit-transition:all 1s 2s;
	-o-transition:all 1s 2s;
	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;
	-webkit-transform:rotate(45deg);
	    -ms-transform:rotate(45deg);
	        transform:rotate(45deg);
}
.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;
	-webkit-transform:rotate(0deg);
	    -ms-transform:rotate(0deg);
	        transform:rotate(0deg)
}

/*======================
	screen-5动画样式
  ======================*/
.screen-5__heading,
.screen-5__subheading,
.screen-5__bg{
	-webkit-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s;
}
.screen-5__heading_animate_init{
	opacity:0;
	-webkit-transform:translate(0,-100%);
	    -ms-transform:translate(0,-100%);
	        transform:translate(0,-100%);
}
.screen-5__subheading_animate_init,
.screen-5__bg_animate_init{
	opacity:0;
	-webkit-transform:translate(0,100%);
	    -ms-transform:translate(0,100%);
	        transform:translate(0,100%);
}
.screen-5__heading_animate_done,
.screen-5__subheading_animate_done,
.screen-5__bg_animate_done{
	opacity:1;
	-webkit-transform:translate(0,0);
	    -ms-transform:translate(0,0);
	        transform:translate(0,0);
}

/*======================
	定义帧动画
  ======================*/
@-webkit-keyframes bounce{
	0%,100%{
		-webkit-transform:scale(0);
		        transform:scale(0);
	}
	50%{
		-webkit-transform:scale(1);
		        transform:scale(1);
	}
}
@keyframes bounce{
	0%,100%{
		-webkit-transform:scale(0);
		        transform:scale(0);
	}
	50%{
		-webkit-transform:scale(1);
		        transform:scale(1);
	}
}

/*======================
	使用帧动画
  ======================*/
.screen-2__point:before,
.screen-2__point:after{
	content:" ";
	display:block;
	width:20px;
	height:20px;
	border-radius:50%;
	-webkit-border-radius:50%;
	background-color:rgba(255,0,0,.4);
	position:absolute;
	left:0;
	top:50%;
	margin-top:-10px;
	animation:bounce 2s infinite;
	-webkit-animation:bounce 2s infinite;
}
.screen-2__point:after{
	animation:bounce 2s infinite 1s;
	-webkit-animation:bounce 2s infinite 1s;
}
.screen-2__point_i_1:after,
.screen-2__point_i_1:before{
	left:200px;
}

/*======================
	导航条 status black 样式
  ======================*/
.header{
	-webkit-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s;
}
.header_status_black{
	background-color:rgba(0,0,0,.5);
	position:fixed;
	left:0;
	right:0;
	z-index:5;
}
.header_status_black .header__logo,
.header_status_black .header__nav-item{
	color:#fff;
}
.header_status_black .header__nav-item_status_active
{
	color:red;
}

/*======================
	大纲 status_in 样式
  ======================*/
.outline{
	-webkit-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s;
	-webkit-transform:translate(100%,0);
	    -ms-transform:translate(100%,0);
	        transform:translate(100%,0);
	opacity:0;
}
.outline_status_in{
	opacity:1;
	-webkit-transform:translate(0,0);
	    -ms-transform:translate(0,0);
	        transform:translate(0,0);
}