*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color:#666666;
  line-height:1.4;
  font-size:16px;/* no */
  background:#000;
  min-height:100vh;
}
a:link, a:visited, a:hover, a:active{
	color: #fff; text-decoration: none;
}
/* flex 布局 */
.flex{display:flex;flex-direction:row;}
.flex_row{display:flex;flex-direction:row!important;}
.flex_column{display:flex;flex-direction:column!important;}
.flex_wrap{flex-wrap:wrap;}
.row{display:flex;flex-direction:row;align-items:center;}
.row_center,.center{display:flex;flex-direction:row;align-items:center;justify-content:center;}
.row_between{display:flex;flex-direction:row;justify-content:space-between;}
.row_center_between{display:flex;flex-direction:row;justify-content:space-between;align-items:center;}
.col{display:flex;flex-direction:column;align-items:center;}
.col_center{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.in1line{text-overflow: ellipsis;white-space: nowrap;overflow: hidden}
.flex_1,.flex1{flex:1;}
.flex_2{flex:2;}
.cl_nine{color: #999}
i{font-style:normal;}
.ml_5{margin-left:5px;}
.ml_10{margin-left:10px;}
.ml_15{margin-left:15px;}
.ml_20{margin-left:20px;}
.mt_5{margin-top:5px;}
.mt_8{margin-top:8px;}
.mt_10{margin-top:10px;}
.mt_12{margin-top:12px;}
.mt_15{margin-top:15px;}
.mt_20{margin-top:20px;}
.p_10{padding: 10px}
.px_15{padding-left:15px;padding-right:15px;}
.py_10{padding-top:10px;padding-bottom:10px;}
.py_15{padding-top:15px;padding-bottom:15px;}
.pt_15{padding-top:15px;}
.pb_10{padding-bottom:10px;}
.cl_white{color:#fff;}
.cl_three{color:#333}
.cl_six{color:#666;}
.cl_yellow{color:#faff40;}
.cl_red{color:#ed424a;}
.bold{font-weight:bold}
.fs20{font-size:20px;}
.fs18{font-size:18px;}
.fs16{font-size:16px;}
.fs15{font-size:15px;}
.fs12{font-size:12px;}
.fs10{font-size:10px;}
.bg_white{background:#fff;}

.header{
	height: 80px;
	background: #000;
	/* position: sticky;
	top:0;
	z-index: 10 */
}
.header .inner{
	background: #000;
	padding-top:20px;
}

.content{
	margin:0 auto;
	max-width: 1920px;
	position: relative;
}
.content:after{
	content: '';
	position: absolute;
	background: url('../img/light_effect.png');
	height: 76px;
	bottom: -38px;
	left: 0;
	right: 0;
	z-index: 2;
}
.content.bg5:after{
	height: 0;
}
.content .inner{
	width: 1200px;
	margin:0 auto;
	height: 640px;
}

.content.bg1{
	background: url('../img/bg1.png') no-repeat center center;
}
.content.bg2{
	background: url('../img/bg2.png') no-repeat center center;
}
.content.bg3{
	background: url('../img/bg3.png') no-repeat center center;
}
.content.bg4{
	background: url('../img/bg4.png') no-repeat center center;
}
.content.bg5{
	background: url('../img/bg5.png') no-repeat center center;
}
.w1200{
	width: 1200px;
	margin: 0 auto;
}
.footer{
	max-width: 1920px;
	background: #1e1e1e;
	margin: 0 auto;
	padding: 40px 0;
}
.footer .inner{

}
.footer .inner .intr{
	width: 500px;
	margin-top: 20px;
}
.content .inner .device{
	width: 600px;
}
.play_btn{
	margin-top: 20px;
	cursor: pointer;
	display: inline-block;
	transition: scale .2s;
}
.play_btn img{
	width: 250px;
	height: 80px;
}
.play_btn:hover{
	scale: 1.1;
}
.content .inner .desc{
	margin-top: 10px;
	line-height: 24px;
	box-sizing: content-box;
	font-size: 18px;
	color: #fff;
	text-shadow:
			-1px -1px 2px #000,
			1px -1px 2px #000,
			-1px  1px 2px #000,
			1px  1px 2px #000;
}
@media screen and (max-width: 1200px){
	.w1200{width: 100%;}
	.content .inner{width: 100%;padding: 0 20px}
	.content .inner .device{width: 80%}
	.content .inner .icon{width: 80%;}
	.content .inner .desc{width: 100%;
		font-size: 14px;
		margin-top: 0;
		line-height: 18px;
	}
}
@media screen and (max-width: 756px){
	.content:after{
		display: none;
	}
	.play_btn{
		margin-top: 10px;
	}
	.play_btn img{
		width: 156px;
		height: 50px;
	}
	.header{
		height: 60px;
		background: #000;
		position: fixed;
		top:0;
		left: 0;
		right: 0;
		z-index: 10
	}
	.header .inner{
		padding-left: 16px;
		padding-top: 10px;
	}
	.content{
		height: 100vh;
		background-size: cover !important;
	}
	.content .inner{
		flex-direction: column !important;
		justify-content:center !important;
		height: 100vh;
		padding: 60px 20px 0;
	}
	.content .inner>.flex1{
		flex: none;
	}
	.content .inner{width: 400px;}
	.content .inner .device{width: 400px;}
	.content .inner .icon{width: 400px;}
	.content .inner .desc{
		width: 400px;

	}
	.footer .row_center_between{
		flex-direction: column;
		gap: 10px;
		justify-content:center;
	}
	.footer{
		padding: 20px 16px;
		font-size: 13px;
		line-height: 18px;
	}
	.footer .inner .intr{
		width: 100%;
	}
}
@media screen and (max-width: 400px){
	.content .inner{
		padding: 60px 16px 0;
	}
	.footer{
		padding-bottom: 60px;
	}
	.content .inner{width: 100%;}
	.content .inner .device{width: 70%;}
	.content .inner .icon{width: 70%;}
	.content .inner .desc{
		font-size: 13px;
		margin-top: 0;
		line-height: 16px;
		width: 100%;

	}
}