/*

BEM 设计模式

模块（没有前缀，多个单词用 -  连接）
元素（元素在模块之后，可以有多个层级，以__连接）
修饰（某元素或）

 */

/*================================
  header部分
  ================================*/

.header{
	background-color:#f7f7f7;
}
.header__wrap{
	width:1200px;
	height:80px;
	margin:0 auto;
	position:relative;
}
.header__logo{
	width:150px;
	height:38px;
	line-height:38px;
	font-size:20px;
	color:#07111b;
	text-indent:50px;
	background:url(../img/logo.png) no-repeat left top;
	background-size:38px 38px;
	position:absolute;
	top:50%;
	margin-top:-19px;
	left:20px;
}
.header__nav{
	position:absolute;
	height:38px;
	width:550px;
	top:50%;
	margin-top:-19px;
	right:20px;
}
.header__nav-item{
	font-size:14px;
	color:#292f35;
	height:38px;
	line-height:38px;
	display:block;
	float:left;
	width:30px;
	padding-left:40px;
	text-align:center;
	position:relative;
}
/*.header__nav-item:hover{
	color:#f01400;
}*/
.header__nav-item_status_active{
	color:#f01400;
}
.header__nav-item_custom_button{
	background-color:#000;
	color:#f4f4f5;
	width:90px;
	text-align:center;
	border-radius:3px;
	-webkit-border-radius:3px;
	padding:0;
	margin-left:40px;
}
.header__nav-item_custom_button:hover{
	color:#f4f4f5;
}

/*================================
  第一屏
  ================================*/
.screen-1{
	height:800px;
	background:url(../img/bg-screen-1.png) no-repeat center;
	position:relative;
	overflow:hidden;
	background-size:cover;
}
.screen-1__heading{
	font-size:46px;
	color:#4d555d;
	text-align:center;
	padding-top:152px;
}
.screen-1__heading b{
	color:#f01400;
	font-weight:normal;
}
.screen-1__phone{
	width:1375px;
	height:305px;
	background:url(../img/screen-1-phone.png) no-repeat 0 0;
	position:absolute;
	left:50%;
	margin-left:-687px;
	bottom:180px;
	z-index:2;
}
.screen-1__shadow{
	width:1331px;
	height:491px;
	background:url(../img/screen-1-shadow.png) no-repeat 0 0;
	position:absolute;
	left:50%;
	margin-left:-665px;
	bottom:-80px;
	z-index:0;
}

/*================================
  第二屏
  ================================*/
.screen-2{
	height:800px;
	background-color:#fafafa;
	position:relative;
	overflow:hidden;
}
.screen-2__heading{
	font-size:46px;
	color:#f01400;
	text-align:center;
	padding-top:96px;
	line-height:46px;
}
.screen-2__subheading{
	font-size:14px;
	color:#2c3137;
	text-align:center;
	line-height:28px;
	padding-top:25px;
}
.screen-2__phone{
	width:928px;
	height:873px;
	background:url(../img/bg-screen-2.png) no-repeat 0 0;
	position:absolute;
	left:50%;
	margin-left:-464px;
	bottom:-345px;
}
.screen-2__point{
	width:108px;
	height:22px;
	padding-right:112px;
	font-size:22px;
	line-height:22px;
	color:#4d555d;
	background:url(../img/icon-point-right.png) no-repeat center right;
	position:absolute;
}
.screen-2__point_custom_right{
	padding:0 0 0 112px;
	background:url(../img/icon-point-left.png) no-repeat center left;
}
.screen-2__point_i_1{
	top:150px;
	left:-164px;
}
.screen-2__point_i_2{
	top:30px;
	right:130px;
}
.screen-2__point_i_3{
	top:330px;
	right:30px;
}

/*================================
  第三屏
  ================================*/
.screen-3{
	height:800px;
	background:url(../img/bg-screen-3-bg.png) no-repeat center;
	background-size:cover;
}
.screen-3__wrap{
	width:1200px;
	height:100%;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}
.screen-3__heading{
	font-size:46px;
	color:#fff;
	text-align:left;
	padding-top:94px;
	line-height:46px;
}
.screen-3__subheading{
	font-size:14px;
	color:#fff;
	text-align:left;
	line-height:28px;
	padding-top:25px;
}
.screen-3__phone{
	width:750px;
	height:873px;
	background:url(../img/bg-screen-3.png) no-repeat 0 0;
	position:absolute;
	right:0;
	top:195px;
}
.screen-3__features{
	position:absolute;
	top:395px;
	left:0px;
	width:320px;
	height:280px;
	margin-left:20px;
}
.screen-3__features__item{
	width:138px;
	height:118px;
	border:1px solid #cb7173;
	margin:0 20px 20px 0;
	float:left;
	border-radius:3px;
	-webkit-border-radius:3px;
	color:#fff;
	text-align:center;
}
.screen-3__features__item__number{
	height:36px;
	font-size:36px;
	line-height:36px;
	padding:28px 0 8px;
}
.screen-3__features__item__desc{
	height:14px;
	font-size:14px;
	line-height:14px;
}

/*================================
  第四屏
  ================================*/
.screen-4{
	height:800px;
	background-color:#fff;
}
.screen-4__wrap{
	width:1200px;
	height:100%;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}
.screen-4__heading{
	font-size:46px;
	color:#f01400;
	text-align:center;
	padding-top:135px;
	line-height:46px;
}
.screen-4__subheading{
	font-size:14px;
	color:#464a4f;
	text-align:center;
	line-height:28px;
	padding-top:29px;
}
.screen-4__type{
	width:1260px;
	height:270px;
	position:absolute;
	top:304px;
	margin-left:25px;
}
.screen-4__type__item{
	width:220px;
	margin-right:90px;
	height:270px;
	float:left;
	position:relative;
	text-align:center;
	background-size:cover;
}
.screen-4__type__item__color{
	width:100%;
	height:14px;
	line-height:14px;
	font-size:14px;
	color:#2c3238;
	position:absolute;
	bottom:-44px;
}
.screen-4__type__item__storage{
	width:100%;
	height:12px;
	line-height:12px;
	font-size:12px;
	color:#a4a9ae;
	position:absolute;
	bottom:-66px;
}
.screen-4__type__item_i_1{
	background:url(../img/phone-1.png) no-repeat center top;
}
.screen-4__type__item_i_2{
	background:url(../img/phone-2.png) no-repeat center top;
}
.screen-4__type__item_i_3{
	background:url(../img/phone-3.png) no-repeat center top;
}
.screen-4__type__item_i_4{
	background:url(../img/phone-4.png) no-repeat center top;
}

/*================================
  第五屏
  ================================*/
.screen-5{
	height:800px;
	position:relative;
	overflow:hidden;
	background-color:#d9dde1;
}
.screen-5__bg{
	width:1920px;
	height:572px;
	background:url(../img/bg-screen-5.png) no-repeat center bottom;
	position:absolute;
	left:50%;
	margin-left:-960px;
	bottom:-145px;
	background-size:cover;
}
.screen-5__heading{
	font-size:46px;
	line-height:46px;
	color:#f01400;
	text-align:center;
	padding-top:130px;
}
.screen-5__subheading{
	font-size:14px;
	color:#2c3137;
	text-align:center;
	padding-top:35px;
}

/*================================
  购买
  ================================*/
 .screen-buy{
  	height:380px;
  	background:#2b333b url(../img/bg-screen-buy.png) no-repeat center top;
  	position:relative;
 }
 .screen-buy__button{
 	width:240px;
 	height:80px;
 	color:#fff;
 	background-color:#f01414;
 	text-align:center;
 	line-height:80px;
 	font-size:24px;
 	position:absolute;
 	margin:auto;
 	left:0;
 	top:0;
 	bottom:0;
 	right:0;
 	border-radius:3px;
 	-webkit-border-radius:3px;
 	-webkit-transition:all .5s;
 	-o-transition:all .5s;
 	transition:all .5s;
 }
.screen-buy__button:hover{
	-webkit-box-shadow:0px 0px 10px rgba(255,255,255,1);
	        box-shadow:0px 0px 10px rgba(255,255,255,1);
}

/*================================
  footer
  ================================*/
.footer{
	height:80px;
	line-height:80px;
	font-size:12px;
	text-align:center;
	color:#fff;
	background-color:#07111b;
	background-size:cover;
}

/*================================
  outline
  ================================*/
.outline{
	position:fixed;
	padding:5px 10px;
	bottom:120px;
	right:0;
	z-index:10;
	background-color:#fff;
	-webkit-box-shadow:0 4px 12px rgba(0,0,0,.5);
	        box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.outline__item{
	display:block;
	width:40px;
	height:30px;
	line-height:30px;
	text-align:center;
	padding:5px 0;
	background-color:#fff;
	margin-top:5px;
	border-top:1px solid #eee;
	color:#93999f;
}
.outline__item:first-child{
	border-top:none;
}
.outline__item_status_active{
	color:#f01400;
}

/*导航条滑动效果*/
.header__nav-tip{
	position:absolute;
	width:30px;
	height:2px;
	background-color:#f00;
	bottom:0;
	left:0;
	margin-left:40px;
	-webkit-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s;
}