html, body{
    font: 14px/1.4 "Microsoft YaHei","Myriad Set Pro";
    background: #fff; color: #333;
    min-width: 1000px;
    -webkit-font-smoothing: antialiased;
}
body, h1, h2, h3, h4, h5, h6, p, dl, dd, form{ margin: 0;}
ul, ol{ 
    list-style-type: none;
    margin: 0; padding: 0;
}
div, p, ul, li, input, select, textarea, a, th, td{ box-sizing: border-box;}
button, input, select, textarea{ outline: none;}
button, textarea, input[type=button] ,input[type=text] ,input[type=password]{ -webkit-appearance: none;}
a{ 
    text-decoration: none; 
    color: #409eff;
    outline: none;
}
a:hover{ text-decoration: underline;}
dfn, em, i, th{ font-style: normal;}
img{ border: none;}
hr{  border: 1px dashed #e5e5e5; border-width: 0 0 1px 0;}
input[type=text]:focus{ border: 1px solid #ddd; }
input[readonly]{ cursor: default; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fff inset;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance: none !important; }
input[type="number"]{ -moz-appearance:textfield; }
select{ background: #fff; }
select:disabled{ color: #333; }

/*  */
.head-hr{ 
	height: 40px; line-height: 40px;
	background-color: #f6f6f6;
	border-bottom: 1px solid #eee;
}
.head-hr .head-hr-c{
	display: flex; align-items: center; justify-content: space-between;
	width: 1100px; height: 40px;
	margin: 0 auto; padding: 0 20px;
}
.head-hr div:first-child span{ color: #333;}
.head-hr div:first-child{ display: flex; align-items: center;}
.head-hr .ico-phone{
	display: inline-block;
	width: 23px; height: 23px;
	background: url(../images/ico-phone.png) no-repeat center / 50%;
	margin-right: 10px;
}
.head-hr .pro-link{ display: flex; align-items: center;}
.head-hr div:first-child .pro-link span{
	color: #ddd;
	margin: 0 15px;
}
.head{
	display: flex; align-items: center; justify-content: space-between;
	width: 1100px; height: 150px;
	margin: 0 auto;
}
.head .logo{
	width: 200px; height: 100px;
	background: url(../images/logo.png) no-repeat center / 100%;
}

.menu a{ 
	font-size: 18px; font-weight: bold;
	color: #333;
	padding: 10px 20px; margin-left: 20px;
	height: 40px;
	transition: .4s all linear;
	border-radius: 4px;
	position: relative;
}
.menu a:hover{
	text-decoration: none;
	background-color: #409eff; color: #fff;
}
.menu a span{
	display: inline-block;
	font-size: 12px; font-weight: normal;
	position: absolute; left: 0; bottom: -20px;
	width: 100%;
	text-align: center;
	color: #999;
}
.banner{ 
	display: block;
	height: 325px; min-width: 1100px;
	box-shadow: -2px -2px 5px #eee;
}
.banner img{ 
	width: 100%; height: 100%; 
	object-fit: cover;
	display: block;
}
.banner-hr{ 
	text-align: center;
	font-size: 30px; font-weight: bold;
	margin-bottom: 60px;
	height: 150px; line-height: 150px;
	background: url(../images/bg.png) no-repeat #f2f6fb center / 100%;
	color: #409eff;
}
.product, .cooperation .cont{
	width: 1100px;
	margin: 0 auto 40px auto;
}
.product h2, .technology h2, .cooperation h2, .about h2{
	text-align: center;
	font-size: 30px;
	margin-bottom: 40px;
}
.product h2 span, .cooperation h2 span, .about h2 span{
	display: block;
	font-size: 12px; font-weight: normal;
	text-align: center;
	color: #999;
}
.product .content{ display: flex; justify-content: space-between;}
.cooperation .cont p{
	font-size: 14px; font-weight: normal;
	color: #999;
}
.product .product-box{
	line-height: 200%;
	padding: 20px; margin-bottom: 30px;
	font-size: 16px; text-indent: 28px;
}
.product .box1{
	display: flex; flex-direction: column;
	margin-bottom: 30px;
	width: 240px ; height: 220px;
	border: 1px solid #409eff;
	background: url(../images/box-ico1.png) no-repeat center 50px / 30%;
	box-shadow: 2px 2px 5px #ddd;
	transition: .4s all linear;
}
.product .box2{ background: url(../images/box-ico2.png) no-repeat center 50px / 30%;}
.product .box3{ background: url(../images/box-ico3.png) no-repeat center 50px / 30%;}
.product .box4{ background: url(../images/box-ico4.png) no-repeat center 50px / 30%;}
.product .box1 .cont{ margin-top: 150px;}
.product .box1 .cont h3{ 
	margin-bottom: 10px;
	text-align: center;
	font-size: 18px;
}
.product .box1:hover{ background-color: #e4f5ff}

.technology{
	height: 650px; min-width: 1100px;
	position: relative;
}
.technology img{
	width: 100%; height: 100%; 
	object-fit: cover;
	display: block;
}
.technology .content{
	position: absolute; left: 0; top: 0;
	width: 100%; height: 650px;
	background: rgba(0, 0, 0, .6);
}
.technology h2, .about h2{
	text-align: center;
	font-size: 30px;
	margin: 70px 0 60px;
	color: #fff;
}
.technology h2 span, .about h2 span{
	display: block;
	font-size: 12px; font-weight: normal;
	text-align: center;
	color: #fff;
}
.technology .cont{
	width: 1100px;
	margin: 0 auto;
	color: #fff;
}
.technology .box2{
	display: flex;
	margin-bottom: 40px;
}
.technology .box2 ul{ list-style: disc inside;}
.technology .box2 li{ line-height: 250%;}
.technology .box2 + .box2 li{ line-height: 220%;}
.technology .left{
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	width: 150px; height: 150px;
	border: 2px solid #999;
	margin-right: 40px;
}
.technology .left b{ width: 100px; height: 100px;}
.technology .left span{ font-size: 18px;}
.ico-hardware{ background: url(../images/software.png) no-repeat center / 70%;}
.ico-software{ background: url(../images/hardware.png) no-repeat center / 70%;}
.cooperation{
	background: url(../images/icon-box-bg.jpg) no-repeat center / 200%;
	height: 400px;
	padding: 40px 0;
}
.cooperation h2{ margin-bottom: 40px;}
.cooperation .cont{ display: flex; flex-wrap: wrap;}
.cooperation .cont div{
	display: flex; flex-direction: column; justify-content: center;
	border: 1px solid #ddd; border-left: 2px solid #409eff;
	width: 180px; height: 60px;
	margin: 20px;
	text-align: center;
	box-shadow: 0 0 5px #ddd;
	font-weight: bold;
	background-color: #fff;
	transition: .4s all linear;
}
.cooperation .cont div:hover{
	color: #409eff;
	border: 1px solid #409eff;  border-left: 2px solid #409eff;
}
.about{ 
	position: relative;
	height: 480px; min-width: 1100px;
}
.about .content{
	position: absolute; left: 0; top: 0;
	width: 100%; height: 480px;
	background: rgba(0, 0, 0, .4);
}
.about .cont{
	width: 1100px; line-height: 150%;
	margin: 0 auto;
	color: #fff;
	font-size: 16px; text-indent: 32px;
}
.about img{
	width: 100%; height: 100%; 
	object-fit: cover;
	display: block;
}
.about .cont p{ 
	margin-top: 20px;
	text-indent: 0;
}
.app .ico-phone{ text-align: center;}
.app img{ margin: 0 auto;}
.foot{
	height: 60px;
	margin-bottom: 40px;
}
.foot .cont{
	height: 60px; width: 1100px;
	margin: 0 auto; padding: 20px 0;
	text-align: center;
}
.foot .cont p{ margin-top: 10px;}
.foot .cont p a{ margin: 0 10px;}
.help{
	padding: 20px;
	text-align: center;
	border-bottom: 1px solid #ddd;
}
.help h2{ 
	width: 1100px;
	margin:0 auto 40px; padding: 20px;
	background-color: #eee;
}
.help .help-cont{
	width: 1100px;
	margin: 0 auto;
	display: flex; flex-wrap: wrap; justify-content: space-between
}
.help .help-cont a{
	height: 200px; width: 300px;
	border: 1px solid #ddd;
	margin-bottom: 40px;
	box-shadow: 0 0 5px #ddd;
	position: relative;
}
.help .help-cont a video{
	position: absolute; left: 0; top: 0;
	width: 100%; height: 100%;
}
.help .help-cont a p{
	background: rgba(0, 0, 0, .4); color: #fff;
	height: 40px; line-height: 40px; width: 100%;
	position: absolute; left: 0; bottom: 0;
}

/* */
@media screen and (max-width: 450px) {
	html, body{ min-width: auto;}
	.head-hr div:first-child{ justify-content: center;}
	.head-hr div div:first-child{ display: none;}
	.head-hr .head-hr-c{ width: 100%;}
	.head{ 
		width: auto; height: auto;
		flex-direction: column;
	}
	.menu{
		width: 100%;
		flex-wrap: wrap;
	}
	.menu a{ 
		display: block;
		border-bottom: 1px solid #ddd;
		font-size: 16px;
		margin-left: 0;
		text-align: center;
	}
	.menu a span{ display: none;}
	.banner{ width: 100%; min-width: auto; height: 180px;}
	.banner-hr{ 
		height: 100px; line-height: 100px;
		font-size: 18px;
	}
	.product{ width: auto;}
	.product .content{ flex-direction: column; align-items: center;}
	.technology{ min-width: auto;}
	.technology .content{  overflow-y: auto;}
	.technology .cont{ width: auto;}
	.technology .box2{ flex-direction: column;}
	.technology .left{ margin: 0 auto;}
	.technology .box2 ul{ padding: 30px;}
	.cooperation{ 
		height: auto;
		background-position: top;
	}
	.cooperation .cont{ 
		width: auto;
		justify-content: space-around;
	}
	.cooperation .cont div{ width: 39%;}
	.about{ 
		min-width: auto; height: auto;
		overflow: hidden;
	}
	.about img{ width: auto;}
	.about .content{ height: 100%;}
	.about .cont{ 
		width: auto;
		padding: 20px;
	}
	.foot .cont{ width: auto; height: auto;}
	.foot .cont p a{ 
		display: block;
		line-height: 200%;
	}
	.help h2{ 
		width: auto;
		font-size: 16px;
	}
	.help .help-cont{ 
		width: auto;
		justify-content: space-around;
	}
}