html,
body {
	position: relative;
	height: 100%;
	--color: #cc2535;
}

body {
	background: #eee;
	font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", 'harmony', "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
	font-size: 14px;
	color: #000;
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

a {
	color: #333;
	text-decoration: none;
}

i {
	font-family: 'elment';
	font-style: normal;
	padding-right: 5px;
}
@font-face {
	font-family: 'harmony';
	font-style: normal;
	font-display: swap;
	src: url('../fonts/Harmony.woff2') format('woff2');
}
@font-face {
	font-family: 'newfont';
	font-style: normal;
	font-display: swap;
	src: url('../fonts/font.woff') format('woff');
}

@font-face {
	font-family: 'elment';
	src: url('../fonts/element-icons.ttf') format("woff2"),
		url('../fonts/element-icons.woff') format("woff");
}

.el-icon-phone-outline:before {
	content: "\e6cb";
}

.el-icon-s-shop:before {
	content: "\e7b4";
}

.el-icon-camera-solid:before {
	content: "\e79b";
}

.el-icon-s-claim:before {
	content: "\e7ad";
}

.el-icon-s-flag:before {
	content: "\e7b0";
}

.el-icon-camera:before {
	content: "\e779";
}

.el-icon-school:before {
	content: "\e756";
}

.el-icon-notebook-1:before {
	content: "\e75a";
}

.el-icon-map-location:before {
	content: "\e704";
}

.el-icon-s-management:before {
	content: "\e7b6";
}

.el-icon-s-open:before {
	content: "\e7b5";
}

.el-icon-s-home:before {
	content: "\e7b9";
}

.el-icon-s-tools:before {
	content: "\e7ac";
}

.el-icon-location-information:before {
	content: "\e707";
}

.swiper {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#home {
	background-image: linear-gradient(90deg, #f5f5f5, var(--color));
}

.home-zg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(204, 37, 53, .1);
}

.head {
	position: absolute;
	top: 0;
	z-index: 9;
	display: flex;
	width: 100%;
	height: 80px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.logo {
	margin-left: 50px;
}

.logo img {
	display: block;
	height: 50px;
	margin-top: 15px;
}

.nav {
	flex: 1;
}

.nav ul {
	display: flex;
	justify-content: center;
	margin: 0;
}

.nav ul li {
	position: relative;
	font-size: 16px;
	position: relative;
	padding: 25px 30px;
	line-height: 30px;
	transition: all .5s;
	box-sizing: border-box;
	border-bottom: 1px solid transparent;
}

.nav-pup {
	display: none;
	position: absolute;
	top: 81px;
	left: 0;
	width: 220px;
	background-color: #fff;
	padding: 20px 0 15px 0;
}

.nav ul li:hover .nav-pup {
	display: block;
}

.nav ul li:hover {
	background-color: var(--color);
}

.nav ul li>a {
	color: #fff;
}

.nav-item {
	position: relative;
	margin: 0 20px;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 5px;
}

.nav-item a {
	display: flex;
	color: #333;
	line-height: 22px;
	padding: 12px 18px;
	font-size: 14px;
}

.nav-item i {
	position: absolute;
	right: 18px;
}

.nav-item span {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 0px;
	height: 60px;
	display: block;
	background-image: linear-gradient(90deg, var(--color), rgba(204, 37, 53, .8));
	transition: width .3s ease-in-out;
}

.nav-item:hover span {
	width: 100%;
}

.nav-item b {
	position: relative;
	z-index: 8;
	font-weight: normal;
	transition: color .2s ease-in-out;
}

.nav-item:hover b {
	color: #fff;
}

.nav .on {
	border-bottom: 1px solid var(--color);
}

.tel {
	display: flex;
	font-family: 'newfont';
	font-size: 18px;
	width: 160px;
	padding-right: 50px;
	line-height: 30px;
	padding-top: 25px;
	color: #fff;
	justify-content: flex-end;
}

.tel img {
	position: relative;
	top: 6px;
	display: inline-block;
	width: 18px;
	height: 18px;
	padding-right: 10px;
}

.banner {
	position: absolute;
	top: 50%;
	margin-top: -190px;
	width: 100%;
}

.banner h1 {
	margin: 0;
	font-size: 60px;
	letter-spacing: 5px;
	color: #fff;
}

.banner h2 {
	margin: 0;
	font-size: 18px;
	font-weight: normal;
	margin-top: 30px;
	margin-bottom: 100px;
	color: #bbb;
	letter-spacing: 5px;
}

.banner a {
	display: block;
	width: 250px;
	height: 60px;
	line-height: 60px;
	color: #fff;
	border-radius: 35px;
	font-size: 17px;
	margin: auto;
	background-image: linear-gradient(90deg, var(--color), rgba(204, 37, 53, .6));
}

.bottom {
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: rgba(204, 37, 53, .2);
}

.bottom-box {
	width: 1200px;
	margin: auto;
	display: flex;
	padding: 40px 0;
}

.bottom-box dl {
	display: flex;
	width: 23%;
	margin: 0 1%;
	border-right: 1px solid rgba(255, 255, 255, .1);
}

.bottom-box dl img {
	display: block;
	width: 60px;
	height: 60px;
}

.bottom-box dl dt {
	margin-right: 15px;
	font-size: 40px;
	color: #bbb;
	line-height: 60px;
}

.bottom-box dl dd {
	margin: 0;
}

.bottom dl h4 {
	font-weight: normal;
	margin: 0;
	font-size: 16px;
	line-height: 36px;
	height: 36px;
	color: #bbb;
	text-align: left;
}

.bottom dl h4 span {
	font-size: 30px;
	font-weight: 700;
	padding-right: 5px;
	font-family: 'newfont';
	color: var(--color);
}

.bottom dl h5 {
	font-weight: normal;
	margin: 0;
	font-size: 16px;
	color: #bbb;
	text-align: left;
}

#service {
	display: flex;
	background-image: url(../img/bg1.jpg);
	background-size: cover;
}

.sv-box {
	width: 1440px;
	margin: auto;
}

.service {
	background-image: url(../img/sv.jpg);
	background-size: cover;
	background-position: center;
}

.sv-box ul {
	display: flex;
	flex-wrap: wrap;
	width: 1400px;
	padding: 0;
}

.sv-box ul li {
	position: relative;
	top: 0;
	display: flex;
	width: 31.3%;
	margin: 1%;
	box-sizing: border-box;
	padding: 40px 30px;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,.1);
	transition: top .3s;
}

.sv-box ul li:hover{
	top: -3px;
}
.sv-box ul li:hover h4{
	color: var(--color);
}

.sv-info {
	flex: 1;
	width: 0;
	margin-left: 20px;
}

.sv-info h4 {
	margin: 0;
	font-size: 22px;
	text-align: left;
}

.sv-info h5 {
	margin: 0;
	font-size: 13px;
	text-align: left;
	color: #bbb;
	font-weight: normal;
	padding-top: 5px;
	line-height: 20px;
	height: 20px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.sv-x {
	width: 20px;
	height: 1px;
	background-color: #bbb;
	margin-top: 20px;
}

.sv-info p {
	margin: 0;
	font-size: 12px;
	color: #999;
	height: 60px;
	line-height: 20px;
	overflow: hidden;
	margin-top: 20px;
	text-align: justify;
}

.sv-pic {
	width: 120px;
	height: 155px;
	overflow: hidden;
	border-radius: 4px;
}

.sv-pic img {
	display: block;
	width: 120px;
}

.sv-name {
	font-size: 30px;
	color: #333;
	padding-bottom: 60px;
}

.sv-name span {
	color: #666;
	font-size: 14px;
}

#case{
	display: flex;
	background-image: url(../img/bg2.jpg);
	background-size: cover;
	.background-image: linear-gradient(90deg, #f5f5f5, var(--color));
}

.news {
	background-color: #f1efec;
	background-size: cover;
	background-position: center;
}

.news-box ul {
	display: flex;
	padding: 0;
}

.news-box ul li {
	width: 380px;
	height: 520px;
	margin: 20px;
	padding: 30px;
	box-sizing: border-box;
	background-color: #fff;
	text-align: left;
}

.news-box ul li:hover {
	background-color: var(--color);
}

.news-box ul li:hover .news-time,
.news-box ul li:hover .news-des {
	color: #ddd;
}

.news-box ul li:hover .news-title,
.news-box ul li:hover .news-a {
	color: #fff;
}

.news-box ul li:hover .news-d,
.news-box ul li:hover .news-x {
	background-color: #fff;
}

.news-box ul li:hover .news-r {
	border-color: #fff;
}

.news-img {
	width: 100%;
	height: 170px;
	background-color: #ddd;
}

.news-des {
	font-size: 13px;
	color: #999;
	line-height: 20px;
	height: 40px;
	overflow: hidden;
	margin-top: 20px;
	margin-bottom: 20px;
}

.news-btn {
	display: flex;
}

.news-t {
	width: 120px;
	height: 35px;
	text-align: center;
	line-height: 35px;
	font-size: 12px;
	color: #bbb;
	background-color: #edf2f8;
	margin-right: 10px;
}

.news-time {
	font-size: 14px;
	color: #666;
}

.news-title {
	font-size: 17px;
	line-height: 25px;
	height: 50px;
	overflow: hidden;
	margin: 20px 0;
	color: #121212;
}

.news-btns {
	display: flex;
	border-top: 1px solid #d8d8d8;
	margin-top: 20px;
	padding-top: 20px;
}

.news-q {}

.news-a {
	flex: 1;
	line-height: 20px;
	font-size: 14px;
	color: #666;
}

.news-r {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid #666;
	float: right;
}

.news-d {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: #666;
	margin: auto;
	position: relative;
	top: 8px;
}

.news-x {
	position: relative;
	top: 11px;
	right: 10px;
	width: 60px;
	height: 1px;
	background-color: #666;
}

.news-more {
	position: relative;
	top: 50px;
	border: 1px solid #fff;
	font-size: 16px;
	padding: 15px 40px;
	background-color: #fff;
	border-radius: 25px;
	color: #999;
}
.news-more:hover{
	color: #fff;
	background-color: var(--color);
	border-color: var(--color);
}
#news {
	display: flex;
	background-image: url(../img/bg3.jpg);
	background-size: cover;
	.background-image: linear-gradient(90deg, #f5f5f5, var(--color));
}

.case-box{
	width: 1400px;
	height: 600px;
}

.case-top{
	display: flex;
	width: 100%;
	height: 420px;
	background-color: #fff;
}
.case-l{
	width: 50%;
	padding: 40px 20px 40px 40px;
	box-sizing: border-box;
}
.case-l h4{
	font-weight: normal;
	font-size: 14px;
	text-align: left;
	margin: 20px 0;
	color: #666;
}
.case-l h3{
	font-size: 25px;
	font-weight: normal;
	text-align: justify;
	line-height: 40px;
	height: 80px;
	margin: 25px 0;
}
.case-l a{
	float: left;
	font-size: 14px;
	background-color: #eee;
	padding: 8px 25px;
	border-radius: 20px;
	
}
.case-l a:hover{
	background-color: var(--color);
	color: #fff;
}
.case-l p{
	font-size: 16px;
	text-align: left;
	line-height: 30px;
	color: #666;
	margin: 0 0 40px 0;
}
.case-r{
	width: 50%;
	padding: 40px 40px 40px 20px;
	box-sizing: border-box;
}
.case-bottom{
	display: flex;
	width: 100%;
	height:180px ;
}
.case-bottom dl{
	display: flex;
	width: 33.4%;
	margin: 0;
	padding: 30px;
	box-sizing: border-box;
	border-top: 2px solid #eff2f9;
	background-color: #fff;
	border-right: 2px solid #eff2f9;
}
.case-bottom dl:first-child{
	display: none;
}
.case-bottom dl:last-child{
	border-right: 0;
}
.case-bottom dl dt{
	width: 50%;
	background-color: #ddd;
}
.case-bottom dl dd{
	width: 50%;
	margin: 15px 20px;
}
.case-bottom dl dd h4{
	font-weight: normal;
	font-size: 14px;
	text-align: left;
	color: #666;
	margin: 0;
	line-height: 20px;
}
.case-bottom dl dd h3{
	font-weight: normal;
	font-size: 14px;
	text-align: left;
	margin: 0;
	line-height: 30px;
	height: 60px;
	overflow: hidden;
	padding-top: 10px;
}
.map{
	display: flex;
	width: 100%;
	height: 100%;
}
.map-l{
	position: relative;
	width: 60%;
	height: 100%;
}
.map-r{
	width: 40%;
	height: 100%;
	user-select: none;
}
.map-cont{
	position: absolute;
	width: 100%;
	padding-left: 20%;
	top: 50%;
	margin-top: -300px;
	box-sizing: border-box;
}

.cont-l {
	width: 100%;
	padding:0;
	text-align: left;
	box-sizing: border-box;
}

.cont-m {
	width: 26%;
	padding: 30px 0;
}
.swiper-pagination-bullet-active{
	background-color: var(--color) !important;
}
.cont-r {
	display: flex;
	background-color: #cc2535;
	color: #fff;
	padding-left: 40px;
	height: 180px;
	margin-top: 40px;
}

.cont-name1 {
	font-size: 17px;
	color: rgba(255, 255, 255, .7);
	padding-bottom: 20px;
	text-align: left;
	margin-top: 40px;
}
.cont-wx{
	position: relative;
	top: -40px;
	display: flex;
	margin-right: 50px;
}
.cont-wx dl{
	width: 150px;
	margin: 0;
	padding: 0;
	margin: 20px;
}
.cont-wx dl dt{
	width: 150px;
	height: 150px;
	background-color: #f5f5f5;
}
.cont-wx dl dd{
	font-size: 14px;
	margin: 0;
	line-height: 40px;
}

.cont-x {
	width: 10px;
	height: 1px;
	background-color: rgba(255, 255, 255, .7);
	margin: 40px 0;
}

.cont-xs {
	width: 10px;
	height: 1px;
	background-color: rgba(0, 0, 0, .7);
	margin: 40px 0;
}

.cont-tel {
	font-size: 30px;
	line-height: 30px;
	font-family: 'newfont';
}

.cont-tel span {
	font-size: 14px;
	color: rgba(255, 255, 255, .7);
}

.cont-name {
	color: #cc2535;
	font-size: 28px;
	font-weight: bold;
}

.cont-sm {
	color: #bbb;
	font-size: 15px;
	padding-top: 5px;
}
.cont-lx{
	display: flex;
	flex-wrap: wrap;
}
.cont-lx dl {
	width: 50%;
	display: flex;
	font-size: 17px;
	margin: 15px 0;
	line-height: 24px;
}

.cont-lx dl dt {
	color: #999;
}

.cont-lx dl dd {
	margin-left: 10px;
	color: #666;
	font-family: 'newfont';
}

.cont-name2 {
	font-size: 17px;
	color: #666;
	padding-top: 20px;
}

.cont-code dl {
	display: flex;
}

.cont-code dl dt {
	width: 150px;
	height: 150px;
	background-color: #f5f5f5;
}
.cont-code dl dt img{
	display: block;
	width: 150px;
}

.cont-code dl dd {
	line-height: 150px;
	font-size: 14px;
	color: #666;
	margin-left: 20px;
}