/***********************************************************************************
 *	+ PAGE WRAPPER
 ***********************************************************************************/
@font-face {
    font-family:MontReg;
    src: url('../../cnfont/SweiSpringSugarCJKtc-Regular.ttf');
}
@font-face {
    font-family:MontExtraLight;
    src: url('../../cnfont/SweiSpringSugarCJKtc-ExtraLight.ttf');
}
@font-face {
    font-family:MontLight;
    src: url('../../cnfont/SweiSpringSugarCJKtc-Light.ttf');
}
@font-face {
    font-family:MonMedium;
    src: url('../../cnfont/SweiSpringSugarCJKtc-Medium.ttf');
}
@font-face {
    font-family:Helvetica;
    src: url('../../enfont/Helvetica.ttc');
}
@font-face {
    font-family:AboretoReg;
    src: url('../../enfont/Aboreto-Regular.ttf');
}
@font-face {
    font-family:DinBlack;
    src: url('../fonts/DIN-Black.otf');
}
html,body { font-family:MontReg; font-size: 12px;
	color: 666; background-color: #fff;
	line-height: 25px; outline: none; font-weight: 300;
}

    .AboretoReg {
    	font-family: AboretoReg;
    	font-weight: 300;
    	font-size: 18px;
    }
 	:root { 
        --hcolor: #2a493f;
	}
 	#main-container {
		position: relative;
		background-color: #fff;
	}

	.container {
		width: 80%;
	}
	
	.boxed {
		background: url(../images/bg-pattern-1.png) repeat top left;
	}
	
	.boxed #main-container {
		margin: 0 auto;
		position: relative;
		max-width: 1200px;
		-webkit-box-shadow: 0px 0px 5px #000;
				box-shadow: 0px 0px 5px #000;
	}
	
	.spanopacity { opacity: 0; width: 50px; height: 50px; position: absolute; right: 0; top:0; z-index: 99999; pointer-events: none;  }

	.boxed .header-sticky {
		max-width: 1200px;
	}
	a.proLingQu { color: var(--hcolor); display: inline-block; padding:0 8px; border: var(--hcolor) solid 1px; }
	a.proLingQu:hover { color: #4c6c50; border: #4c6c50 solid 1px; }
	@media (min-width: 1400px) {
			
		.boxed #main-container,
		.boxed .header-sticky {
			max-width: 1350px;
		}
		
	}
 	.mt20 { padding-top: 20px; }
 	.mb30 { padding-bottom: 30px; }
 	.empty { margin: 20px; text-align: center; width: 100%; }
 	a.morepro { font-size: 14px; font-weight: bold; color: #000; }
 	a.morepro:hover { color: #4c6c50; }
/***********************************************************************************
 *	+ HEADER
 ***********************************************************************************/
	#header {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		padding-top: 60px;
		z-index: 9000;
		-webkit-transition: all 0.3s;
				transition: all 0.3s;
	}
	
	#header [class^="col-"] {
		position: static;
	}
	
	#header .container { position: relative; }
	.navContent { position: absolute; top: 60px; right: 0; width: 320px; min-height: 80px; background-color: #fff;
	box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1; }
	.navpad { padding: 10px; }
	#zldown { padding: 10px;  display: none;   }
	.navzlinfo { position: absolute; top: 60px; right:18%; width: 200px; min-height: 60px; background-color: #fff;
	box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1; }

	#navSearch { padding: 10px;  display: none;   }
	#navSearch input,
	#navUsers input,
	#navUsers button { width: 100%; margin-bottom: 10px; -webkit-appearance:none; }
	#navSearch span { position: absolute; right: 20px; top: 15px; font-size: 20px; cursor: pointer; }
	
	#navUsers { padding: 10px;   display: none; }
	#navUsers button { background-color: #333; border: none; color: #fff;   }
	#navUsers button:hover { background-color: var(--hcolor); }

	#navQrcode { padding: 10px;  display: none;  }
	#navQrcode li { text-align: center; width: 50%; display: flex; flex-direction: column; justify-content: space-between;  }
	#navQrcode li:first-child { margin-right: 30px; }
	#navQrcode li img { width: 100%; }

	.homeabout p { font-size: 14px; font-weight: 300; line-height: 36px; }

	.systempage { position: relative; width: 100%; }
	.systempage > img { z-index: -1; width: 100%; height: auto; }
	.systempage .systop1 { position: absolute; left: 10%; top: 28%; z-index: 1; }
	.systempage .systop1 .infomation { max-width: 560px; padding: 15px; }
	.systempage .systop2 { position: absolute; right: 10%; top: 36%; z-index: 1; }
	.systempage .systop2 .infomation { max-width: 560px; padding: 15px; }
	
	.systempage .systop1 .cntitle {
		font-family: MontReg;
		font-size: 28px;
		font-weight: 300;
		color: var(--hcolor);
		margin-bottom: 30px;
		margin-left: -15px;
		position: relative;
		display: inline-block;
	}
	.systempage .systop2 .cntitle {
		font-family: MontReg;
		font-size: 28px;
		font-weight: 300;
		color: var(--hcolor);
		margin-bottom: 4px;
		position: relative;
		display: inline-block;
	}
	.systempage .systop2 .entitle {
		font-family: AboretoReg;
		font-size: 16px;
		font-weight: 300;
		color: var(--hcolor);
		margin-bottom: 30px;
	}
	
	.systempage .cncontent p {
		font-size: 14px; color: var(--hcolor);
		font-weight: 300;
		line-height: 32px;
	}
	.systempage .cncontent p img { max-height: 18px;}

	/* designer */
	.systempage .systop3 { position: absolute; left: 15%; top: 76%; z-index: 1; }
	.systempage .systop3 .infomation { max-width: 400px; padding: 15px; }
	.systempage .systop3 .cntitle {
		font-family: MontReg;
		font-size: 26px;
		font-weight: 300;
		color: var(--hcolor);
		position: relative;
		display: inline-block;
	}
	
	.systempage .systop3 .entitle {
		font-family: AboretoReg;
		font-size: 16px;
		font-weight: 300;
		color: var(--hcolor);
		margin-bottom: 10px;
	}
	.systempage .cncontent2 p {
		font-size: 14px; color: var(--hcolor);
		font-weight: 300;
		line-height: 24px;
	}


	/* page3 城市地图上面的 */
	.systempage .systop4 { position: absolute; left: 15%; top:60px; z-index: 1; width: 70%; }
	.systempage .systop4 .infomation { width: 100%; padding: 15px; 
		display: flex;
		align-items: center; 
		justify-content: center; 
		flex-direction: column; }
	.systempage .systop4 .cntitle {
		font-family: MontReg;
		font-size: 26px;
		font-weight: 300;
		color: #fff;
		width: 100%;
		text-align: center;
		position: relative;
	}
	.systempage .systop4 .entitle {
		font-family: AboretoReg;
		font-size: 16px;
		font-weight: 300;
		color: #fff;
		margin-bottom: 30px;
		text-align: center;
	}
	.systempage .cncontent3 p {
		font-size: 14px; color: #fff;
		font-weight: 300;
		line-height: 24px;
		text-align: center;
	}

	
	/* page4 最上面 */
	.systempage #page4cate { position: absolute; left: calc(50% - 100px); top: 48%; z-index: 1; }
	.systempage .p4content { 
	    position: absolute; left: 10%; bottom: 3%; z-index: 1; 
		color: var(--hcolor); font-size: 14px; font-weight: 300; line-height: 24px;
		text-align: center; width: 80%;
	}
	.systempage .p4content img { 
		max-height: 20px;
	}
	.systempage #page4cate .infomation { max-width: 200px; padding: 15px; }
	.systempage #page4cate .cntitle {
		font-family: MontReg;
		font-size: 28px;
		font-weight: 300;
		color: var(--hcolor);
		margin-bottom: 0;
		margin-left: 0;
		width: 100%;
		position: relative;
		text-align: center;
	}
	.systempage #page4cate .entitle {
		font-family: AboretoReg;
		font-size: 16px;
		font-weight: 300;
		color: var(--hcolor);
		margin-bottom: 40px;
		text-align: center;
	}

	/* page4 合作商家 */
	.systempage .systop5 { position: absolute; right: 20%; width: 60%; top: 6%; z-index: 1; }
	.systempage .systop5 .infomation { width: 100%; padding: 15px; }
	.systempage .systop5 .cntitle {
		font-family: MontReg;
		font-size: 28px;
		font-weight: 300;
		color: var(--hcolor);
		margin-bottom: 0;
		margin-left: 0;
		width: 100%;
		position: relative;
		text-align: center;
	}
	.systempage .systop5 .entitle {
		font-family: AboretoReg;
		font-size: 16px;
		font-weight: 300;
		color: var(--hcolor);
		margin-bottom: 40px;
		text-align: center;
	}

	/* page4 合作商家 内容 */
	.systempage .systop5 .cncontent ul {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		gap: 20px;
		padding: 0;
		margin: 0;
		list-style: none;
	}
	.systempage .systop5 .cncontent li {
		background-color: #fff;
		border: 1px solid rgba(0, 0, 0, 0.5);
		padding: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 120px;
	}
	.systempage .systop5 .cncontent img {
		max-width: 100%;
		max-height: 120px;
		object-fit: contain;
	}

	/* page4 表单 响应式设计 */
	.systempage .systop6 { position: absolute; left: 12%; width: 76%; top: 6%; z-index: 1; }
	.systempage .systop6 .infomation { width: 100%; padding: 15px; }
	/* 免费获取体验套装及表单的样式在下面 */
	.systempage .systop6 .cncontent .free-trial-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 40px;
		padding: 40px 0;
	}

	.systempage .systop6 .cncontent .free-trial-text {
		flex: 1;
		color: #fff;
		text-align: left;
	}

	.systempage .systop6 .cncontent .free-trial-title,
	.systempage .systop6 .cncontent .free-trial-subtitle {
		font-family: MontReg;
		font-size: 36px;
		font-weight: 300;
		color: #fff;
		margin: 0;
		line-height: 1.2;
	}

	.systempage .systop6 .cncontent .free-trial-subtitle {
		margin-top: 10px;
	}

	.systempage .systop6 .cncontent .free-trial-form {
		flex: 1;
	}

	.systempage .systop6 .cncontent .form-row {
		display: flex;
		gap: 20px;
		flex-wrap: wrap;
	}

	.systempage .systop6 .cncontent .form-group {
		flex: 1;
		min-width: 200px;
	}

	.systempage .systop6 .cncontent .form-group.full-width {
		flex: 0 0 100%;
	}

	.systempage .systop6 .cncontent input[type="text"],
	.systempage .systop6 .cncontent input[type="email"],
	.systempage .systop6 .cncontent input[type="tel"] {
		width: 100%;
		padding: 6px 10px;
		border: 1px solid #ddd;
		font-size: 14px;
		box-sizing: border-box;
	}

	.systempage .systop6 .cncontent textarea {
		width: 100%;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 14px;
		resize: vertical;
		box-sizing: border-box;
	}

	.systempage .systop6 .cncontent .submit-btn {
		background-color: #1f3f35;
		color: #fff;
		border: none;
		padding: 3px 40px;
		font-size: 14px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.systempage .systop6 .cncontent .submit-btn:hover {
		background-color: var(--hcolor);
	}

	.systempage .systop7 { position: absolute; left: 22%; width: 56%; background-color: #1f3f35; top: -80px; z-index: 1; }
	.systempage .systop7 .infomation { width: 100%; padding:40px 15px; }
	.systempage .systop7 .cntitle {
		font-family: MontReg;
		font-size: 26px;
		font-weight: 300;
		color: #fff;
		margin-bottom: 0;
		margin-left: 0;
		width: 100%;
		position: relative;
		text-align: center;
	}
	.systempage .systop7 .entitle {
		font-family: AboretoReg;
		font-size: 16px;
		font-weight: 300;
		color: #fff;
		margin-bottom: 40px;
		text-align: center;
	}

	/* 联系我们内容 三列布局样式在这里 */
	.systempage .systop7 .cncontent {
		padding: 0 40px;
	}
	.systempage .systop7 .cncontent .contact-container {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding-bottom: 30px;
		gap: 30px;
		color: #fff;
	}

	.systempage .systop7 .cncontent .contact-column {
		flex: 1;
	}
	.systempage .systop7 .cncontent .contact-column2 {
		flex: 1.5;
	}

	/* 左侧：二维码和微信咨询 */
	.systempage .systop7 .cncontent .contact-left {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		margin-top: 10px; 
	}
 

	.systempage .systop7 .cncontent .qrcode img {
		width: 120px;
		height: 120px;
		border: 2px solid #fff;
	}

	.systempage .systop7 .cncontent .wechat-text {
		font-family: MontReg;
		font-size: 16px;
		color: #fff;
		margin-top: 10px;
	}

	/* 中间：地址、邮箱、网址 */
	.systempage .systop7 .cncontent .contact-center {
		text-align: left;
		 
	}

	.systempage .systop7 .cncontent .company-info p {
		margin: 8px 0;
		font-family: MontReg;
		font-size: 14px;
		color: #fff;
		line-height: 1.6;
	}

	.systempage .systop7 .cncontent .company-name {
		font-size: 16px !important;
	}

	/* 右侧：电话、传真、手机 */
	.systempage .systop7 .cncontent .contact-right {
		text-align: left;
	}

	.systempage .systop7 .cncontent .contact-info p {
		margin: 8px 0;
		font-family: MontReg;
		color: #fff;
		font-size: 14px;
		line-height: 1.6;
	}

	/* 联系我们响应式设计 */
	@media (max-width: 1024px) {
		.systempage .systop7 .cncontent .contact-container {
			gap: 30px;
			padding: 30px 0;
		}

		.systempage .systop7 .cncontent .qrcode img {
			width: 100px;
			height: 100px;
		}

		.systempage .systop7 .cncontent .wechat-text {
			font-size: 14px;
		}

		.systempage .systop7 .cncontent .company-info p,
		.systempage .systop7 .cncontent .contact-info p {
			font-size: 13px;
		}

		.systempage .systop7 .cncontent .company-name {
			font-size: 14px !important;
		}
	}

	@media (max-width: 768px) {
		.systempage .systop7 .cncontent .contact-container {
			flex-direction: column;
			gap: 30px;
			padding: 20px 0;
		}

		.systempage .systop7 .infomation { padding:20px 15px 0; }

		.systempage .systop7 .cncontent .contact-column {
			width: 100%;
		}

		.systempage .systop7 .cncontent .contact-center,
		.systempage .systop7 .cncontent .contact-right {
			text-align: center;
		}

		.systempage .systop7 .cncontent .qrcode img {
			width: 110px;
			height: 110px;
		}

		.systempage .systop7 .cncontent .wechat-text {
			font-size: 15px;
		}

		.systempage .systop7 .cncontent .company-info p,
		.systempage .systop7 .cncontent .contact-info p {
			font-size: 12px;
			margin: 6px 0;
		}

		.systempage .systop7 .cncontent .company-name {
			font-size: 13px !important;
			margin-bottom: 8px !important;
		}

		.systempage .systop7 .cncontent .contact-info p {
			margin: 8px 0;
		}
		
		.systempage .p4content { left: 5%; bottom: 2%;
    		font-size: 12px; line-height: 24px;
    		width: 90%;
    	}
    	.systempage .p4content img { 
    		max-height: 16px;
    	}
	}

	@media (max-width: 480px) {
		.systempage .systop7 .cncontent .contact-container {
			gap: 20px;
			padding: 15px 0;
		}

		.systempage .systop7 .cncontent .qrcode img {
			width: 90px;
			height: 90px;
		}

		.systempage .systop7 .cncontent .wechat-text {
			font-size: 13px;
		}

		.systempage .systop7 .cncontent .company-info p,		
		.systempage .systop7 .cncontent .contact-info p {
			font-size: 11px;
			line-height: 1.4;
		}

		.systempage .systop7 .cncontent .company-name {
			font-size: 12px !important;
		}
	}


	/* 免费获取体验套装响应式设计 */
	@media (max-width: 1024px) {
		.systempage .systop6 .cncontent .free-trial-container {
			flex-direction: column;
			gap: 30px;
			padding: 30px 0;
		}

		.systempage .systop6 .cncontent .free-trial-text {
			text-align: center;
		}

		.systempage .systop6 .cncontent .free-trial-title,
		.systempage .systop6 .cncontent .free-trial-subtitle {
			font-size: 32px;
		}

		.systempage .systop6 .cncontent .free-trial-form {
			width: 100%;
			padding: 25px;
		}

		.systempage .systop6 .cncontent .form-row {
			gap: 15px;
		}

		.systempage .systop6 .cncontent .form-group {
			min-width: 180px;
		}
	}

	@media (max-width: 768px) {
		.systempage .systop6 .cncontent .free-trial-container {
			gap: 10px;
			padding:0;
		}

		.systempage .systop6 .cncontent .free-trial-title,
		.systempage .systop6 .cncontent .free-trial-subtitle {
			font-size: 24px;
		}

		.systempage .systop6 .cncontent .free-trial-form {
			padding: 20px;
		}

		.systempage .systop6 .cncontent .form-row {
			flex-direction: column;
			gap: 6px;
			margin-bottom: 0;
		}

		.systempage .systop6 .cncontent .form-group {
			min-width: 100%;
		}

		.systempage .systop6 .cncontent input[type="text"],
		.systempage .systop6 .cncontent input[type="email"],
		.systempage .systop6 .cncontent input[type="tel"] {
			padding: 8px;
			font-size: 12px;
		}

		.systempage .systop6 .cncontent textarea {
			padding: 8px;
			font-size: 12px;
			min-height: 60px;
		}

		.systempage .systop6 .cncontent .submit-btn {
			width: 100%;
			padding: 10px;
			font-size: 12px;
		}
	}

	@media (max-width: 480px) {
		.systempage .systop6 .cncontent .free-trial-title,
		.systempage .systop6 .cncontent .free-trial-subtitle {
			font-size: 20px;
		}

		.systempage .systop6 .cncontent .free-trial-form {
			padding: 15px 15px 0;
		}

		.systempage .systop6 .cncontent input[type="text"],
		.systempage .systop6 .cncontent input[type="email"],
		.systempage .systop6 .cncontent input[type="tel"] {
			padding:5px 7px;
			font-size: 12px;
		}

		.systempage .systop6 .cncontent textarea {
			padding: 7px;
			font-size: 12px;
			min-height: 60px;
		}

		.systempage .systop6 .cncontent .submit-btn {
			padding: 9px;
			font-size: 12px;
		}
	}

	/* 响应式设计 */
	@media (max-width: 1440px) {
		.systempage .systop5 .cncontent ul {
			grid-template-columns: repeat(7, 1fr);
			gap: 18px;
		}
		.systempage .systop5 .cncontent li {
			min-height: 110px;
			padding: 18px;
		}
		.systempage .systop5 .cncontent img {
			max-height: 110px;
		}
	}

	@media (max-width: 1280px) {
		.systempage .systop5 .cncontent ul {
			grid-template-columns: repeat(6, 1fr);
			gap: 16px;
		}
		.systempage .systop5 .cncontent li {
			min-height: 100px;
			padding: 16px;
		}
		.systempage .systop5 .cncontent img {
			max-height: 105px;
		}
	}

	@media (max-width: 1024px) {
		.systempage .systop5 .cncontent ul {
			grid-template-columns: repeat(5, 1fr);
			gap: 14px;
		}
		.systempage .systop5 .cncontent li {
			min-height: 90px;
			padding: 14px;
		}
		.systempage .systop5 .cncontent img {
			max-height: 90px;
		}
	}

	@media (max-width: 900px) {
		.systempage .systop5 .cncontent ul {
			grid-template-columns: repeat(4, 1fr);
			gap: 12px;
		}
		.systempage .systop5 .cncontent li {
			min-height: 80px;
			padding: 12px;
		}
		.systempage .systop5 .cncontent img {
			max-height: 80px;
		}
	}

	@media (max-width: 768px) {
		.systempage .systop5 .cncontent ul {
			grid-template-columns: repeat(3, 1fr);
			gap: 10px;
		}
		.systempage .systop5 .cncontent li {
			min-height: 70px;
			padding: 10px;
		}
		.systempage .systop5 .cncontent img {
			max-height: 70px;	
		}
	}

	@media (max-width: 480px) {
		.systempage .systop5 .cncontent ul {
			grid-template-columns: repeat(2, 1fr);
			gap: 8px;
		}
		.systempage .systop5 .cncontent li {
			min-height: 60px;
			padding: 8px;
		}
		.systempage .systop5 .cncontent img {
			max-height: 70px;
		}
	}
	


	/* page3 城市地图 已移配 在这里生成对应的各城市css */
	.systempage .cncontent4 {
		display: flex;
		justify-content: space-between;
		color: #fff;
		width: 96%;
		margin-top: 90px;
	}
	.systempage .cncontent4 .cntitle {
		font-family: MontReg;
		font-size: 18px;
		font-weight: 300;
		color: #fff;
	}
	.systempage .cncontent4 .entitle {
		font-family: AboretoReg;
		font-size: 12px;
		margin-left: 32px;
		font-weight: 300;
		color: #fff;
	}
	.systempage .cncontent4 .left-addresses {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		width: 56%;
	}
	.systempage .cncontent4 .right-address {
		width: 30%;
		text-align: center;
	}
	.systempage .cncontent4 .icon {
		margin-right: 10px;
		margin-top: -8px;
		width: 20px;
		height: 20px;
	}
	.systempage .cncontent4 .icon1 { visibility: visible; }
	.systempage .cncontent4 .icon2 { visibility: hidden; }



	/* 响应式设计：1440px以下 */
	@media (max-width: 1440px) {
		.systempage .cncontent4 {
			width: 98%;
			margin-top: 60px;
		}
		.systempage .cncontent4 .left-addresses {
			width: 60%;
			gap: 18px;
		}
		.systempage .cncontent4 .right-address {
			width: 35%;
		}
		.systempage .cncontent4 .cntitle {
			font-size: 16px;
		}
		.systempage .cncontent4 .entitle {
			font-size: 10px;
			margin-left: 26px;
		}
		.systempage .cncontent4 .icon {
			width: 18px;
			height: 18px;
			margin-top: -6px;
		}
	}

	/* 响应式设计：1280px以下 */
	@media (max-width: 1280px) {
		.systempage .cncontent4 {
			margin-top: 50px;
		}
		.systempage .cncontent4 .left-addresses {
			width: 65%;
			gap: 15px;
		}
		.systempage .cncontent4 .right-address {
			width: 30%;
		}
		.systempage .cncontent4 .cntitle {
			font-size: 15px;
		}
		.systempage .cncontent4 .entitle {
			font-size: 9px;
			margin-left: 24px;
		}
		.systempage .cncontent4 .icon {
			width: 16px;
			height: 16px;
			margin-top: -5px;
		}
	}

	/* 响应式设计：1024px以下 */
	@media (max-width: 1024px) {
		.systempage .cncontent4 {
			margin-top: 40px;
		}
		.systempage .cncontent4 .left-addresses {
			width: 70%;
			gap: 12px;
		}
		.systempage .cncontent4 .right-address {
			width: 25%;
		}
		.systempage .cncontent4 .cntitle {
			font-size: 14px;
		}
		.systempage .cncontent4 .entitle {
			font-size: 8px;
			margin-left: 22px;
		}
		.systempage .cncontent4 .icon {
			width: 15px;
			height: 15px;
			margin-top: -4px;
		}
	}

	/* 响应式设计：900px以下 */
	@media (max-width: 900px) {
		.systempage .cncontent4 {
			flex-direction: column;
			align-items: center;
			margin-top: 30px;
		}
		.systempage .cncontent4 .left-addresses {
			width: 90%;
			grid-template-columns: 1fr 1fr;
			gap: 15px;
			margin-bottom: 25px;
		}
		.systempage .cncontent4 .right-address {
			width: 90%;
			text-align: center;
			border-top: 1px solid rgba(255, 255, 255, 0.2);
		}
		.systempage .cncontent4 .cntitle {
			font-size: 15px;
		}
		.systempage .cncontent4 .entitle {
			font-size: 9px;
			margin-left: 38px;
		}
	}

	/* 响应式设计：768px以下 */
	@media (max-width: 768px) {
		.systempage .cncontent4 {
			margin-top: 25px;
			padding: 0 15px;
		}
		.systempage .cncontent4 .left-addresses {
			width: 95%;
			grid-template-columns: 1fr;
			gap: 18px;
			margin-bottom: 20px;
		}
		.systempage .cncontent4 .right-address {
			border-top: none;
			width: 95%;
		}
		.systempage .cncontent4 .cntitle {
			font-size: 15px;
		}
		.systempage .cncontent4 .entitle {
			font-size: 9px;
			margin-left: 38px;
		}
		.systempage .cncontent4 .icon {
			width: 16px;
			height: 16px;
			margin-top: -5px;
			margin-right: 4px;
		}
		.systempage .cncontent4 .icon1 { visibility: hidden;}
		.systempage .cncontent4 .icon2 { visibility: visible; }
	}

	/* 响应式设计：480px以下 */
	@media (max-width: 480px) {
		.systempage .cncontent4 {
			width: 100%;
			margin-top: 15px;
		}
		.systempage .cncontent4 .left-addresses {
			width: 100%;
			gap: 15px;
			line-height: 1.5;
		}
		.systempage .cncontent4 .right-address {
			width: 100%;
			line-height: 1.5;
		}
		.systempage .cncontent4 .cntitle {
			font-size: 12px;
		}
		.systempage .cncontent4 .entitle {
			font-size: 8px;
			margin-left: 38px;
		}
		.systempage .cncontent4 .icon {
			width: 14px;
			height: 14px;
			margin-top: -5px;
		}
	}



	/* 中等屏幕 (768px - 991px) */
	@media (min-width: 768px) and (max-width: 991px) {
		.systempage .systop1 { left: 8%; top: 20%; }
		.systempage .systop2 { right: 8%; top: 30%; }
		.systempage .systop3 { left: 8%; top: 65%; }
		.systempage .systop4 { left: 8%; top: 3%; width: 84%; }
		.systempage .systop1 .infomation,
		.systempage .systop2 .infomation,
		.systempage .systop3 .infomation {
			max-width: 450px;
		}
		.systempage .systop1 .cntitle,
		.systempage .systop2 .cntitle,
		.systempage .systop3 .cntitle,
		.systempage .systop4 .cntitle {
			font-size: 22px; 
			margin-bottom: 20px;
			padding: 0 25px;
		}
		.systempage .cntitle::before,
		.systempage .cntitle::after {
			font-size: 16px;
		}
		.systempage .systop2 .entitle,
		.systempage .systop3 .entitle,
		.systempage .systop4 .entitle {
			font-size: 14px; 
			margin-bottom: 20px;
		}
		.systempage .cncontent p,
		.systempage .cncontent2 p,
		.systempage .cncontent3 p {
			font-size: 12px; 
			line-height: 28px; 
		}
		.systempage .cncontent p img { max-height: 16px; }
	}

	/* 小屏幕 (< 768px) */
	@media (max-width: 767px) {
    	.systempage .systop1,
    	.systempage .systop2,
    	.systempage .systop3,
    	.systempage .systop4,
    	.systempage #page4cate,
    	.systempage .systop5,
    	.systempage .systop6,
    	.systempage .systop7 {
    		position: absolute;
    		left: 0; 
    		right: 0; 
    		top: 35%;
    		margin: 20px auto;
    		width: 90%;
    	}
    	.systempage .systop1 .infomation,
    	.systempage .systop2 .infomation,
    	.systempage .systop3 .infomation,
    	.systempage .systop4 .infomation,
    	.systempage #page4cate .infomation,
    	.systempage .systop5 .infomation,
    	.systempage .systop6 .infomation,
    	.systempage .systop7 .infomation {
    		max-width: 100%;
    		margin: 0 auto;
    	}
		.systempage .systop5 .infomation{
			padding: 15px 0;
		}
    	.systempage #page4cate .infomation
    	{
			padding: 25px 0 0;
    	}
		.systempage .systop1 .cntitle,
		.systempage .systop4 .cntitle {
			font-size: 16px; 
			margin-left: 0;
			margin-bottom: 0;
			text-align: center;
			color: var(--hcolor);
		}
		
		.systempage .systop2 .cntitle {
			font-size: 16px; 
			margin-left: 0;
			margin-bottom: 0;
			text-align: center;
			width: 100%;
			color: var(--hcolor);
		}
		/* 修复systop3标题的左对齐问题 */
		.systempage .systop3 .cntitle {
			font-size: 16px; 
			margin-left: 0; 
			text-align: left;
			margin-bottom: 0;
		}
		.systempage .cntitle::before,
		.systempage .cntitle::after {
			font-size: 14px;
		}
		.systempage .systop2 .entitle,
		.systempage .systop4 .entitle {
			font-size: 12px; 
			text-align: center; 
			color: var(--hcolor);
			line-height: 1.4;
		}
		/* 修复systop3副标题的左对齐问题 */
		.systempage .systop3 .entitle {
			font-size: 12px; 
			text-align: left; 
			line-height: 1.4;
		}
		.systempage .cncontent p,
		.systempage .cncontent2 p {
			font-size: 11px; 
			line-height: 24px; 
			text-align: justify; 
		}
		/* 修复systop4内容的文字颜色问题 */
		.systempage .systop4 .cncontent3 {
			padding-top: 12px;
		}
		.systempage .systop4 .cncontent3 p {
			font-size: 11px; 
			line-height: 24px; 
			text-align: justify; 
			color: #fff;
			padding: 0 15px;
		}
		.systempage .cncontent p img { max-height: 14px; }
		/* 修复systop4地址的文字颜色问题 */
		.systempage .systop4 .cncontent4,
		.systempage .systop4 .cncontent4 .cntitle,
		.systempage .systop4 .cncontent4 .entitle {
			color: #fff;
		}
		
		/* 修复about页面各区块标题样式 */
		.systempage #page4cate .cntitle,
		.systempage .systop5 .cntitle,
		.systempage .systop6 .cntitle {
			font-size: 16px;
			margin-left: 0;
			margin-bottom: 0;
			text-align: center;
			color: var(--hcolor);
		}
		.systempage .systop7 .cntitle {
			font-size: 16px;
			margin-left: 0;
			margin-bottom: 0;
			text-align: center;
			color: #fff;
		}

		.systempage #page4cate .category { 
			max-width: 130px;
			margin: 50px auto 20px;
			padding: 0;
		}
		
		.systempage #page4cate .entitle,
		.systempage .systop5 .entitle,
		.systempage .systop6 .entitle,
		.systempage .systop7 .entitle {
			font-size: 12px;
			text-align: center;
			color: var(--hcolor);
			line-height: 1.4;
			
		}
		.systempage .systop7 .entitle {
			color: #fff;
		}
		.systempage #page4cate .entitle,
		.systempage .systop5 .entitle,
		.systempage .systop7 .entitle {
			margin-bottom: 15px;
		}
		/* 修复合作商家列表移动端布局 */
		.systempage .systop5 .cncontent ul {
			grid-template-columns: repeat(3, 1fr);
			gap: 10px;
		}
		
		.systempage .systop5 .cncontent li {
			min-height: 90px;
			padding: 10px;
		}
		
		/* 修复免费体验套装表单移动端布局 */
		.systempage .systop6 .cncontent .free-trial-container {
			flex-direction: column;
			gap: 5px;
		}
		
		.systempage .systop6 .cncontent .free-trial-text h2 {
			text-align: center;
			color: var(--hcolor);
		}
 
		
		.systempage .systop6 .cncontent .free-trial-form .form-row {
			flex-direction: column;
			gap: 5px;
		}
		
		.systempage .systop6 .cncontent .free-trial-form .form-group {
			width: 100%;
		}
		
		.systempage .systop6 .cncontent .free-trial-form input,
		.systempage .systop6 .cncontent .free-trial-form textarea {
			width: 100%;
			box-sizing: border-box;
		}
		
		/* 修复联系我们三列布局移动端响应式 */
		.systempage .systop7 .cncontent .contact-container {
			flex-direction: column;
			gap: 20px;
		}
		
		.systempage .systop7 .cncontent .contact-column,
		.systempage .systop7 .cncontent .contact-column2 {
			width: 100%;
			text-align: center;
		}
		
		.systempage .systop7 .cncontent .qrcode img {
			max-width: 150px;
		}

		.systempage #page4cate{
			top: 36%;
		}
		.systempage .systop1 {
			top: 9%;
		}
		.systempage .systop3 {
			top: 54%;
		}
		.systempage .systop4 {
			top: 0;
		}
		.systempage .systop4 .cntitle,
		.systempage .systop4 .entitle {
			color: #fff;
			padding: 0;
			margin: 0;
		}
		
		.systempage .systop5 {
			top: 0.5%;
		}
		.systempage .systop6 {
			top: 0;
		}
		.systempage .systop7 {
			top: -60px;
		}
		#p32content, #p32content p {
			line-height: 1.7;
		}
		.form-group {
			margin-bottom: 10px;
		}
	}
	@media (max-width: 400px) {
		.systempage #page4cate .infomation
    	{
			padding: 18px 0 0;
    	}
		.systempage #page4cate .category { 
			margin: 40px auto 20px;
			padding: 0;
		}
	}
 

	@media (min-width: 768px) and (max-width: 991px) {
		
		#header { position: fixed; background-color: rgba(0,0,0,.5); padding-top: 30px; }
		.homeabout p { font-size: 12px; font-weight: 300; line-height: 30px; }
		
	}
	
	@media (max-width: 767px) {
	
		#header { position: fixed; background-color: rgba(0,0,0,.5); padding-top: 10px; }
		.navContent { position: absolute; top: 329px; right: 0; width: 100%; }
		#navSearch input,
		#navUsers input,
		#navUsers button { width: 100%; border-radius: 0; margin-bottom: 10px; height: 45px; line-height: 45px; -webkit-appearance:none; }
		#navSearch span { right: 20px; top: 20px; font-size: 22px;  }
		.homeabout p { font-size: 12px; font-weight: 300; line-height: 30px; }
	}

	
 
 
.showinfo { padding: 30px 0 0 50px; }
 .showinfo .link { display: flex; margin-top:20px; }
 .showinfo .link a { display: flex; color: #555; padding: 3px 15px; border: #666 solid 1px;margin-right: 15px;  }
 .showinfo .link a:hover { background-color: var(--hcolor); border: var(--hcolor) solid 1px; color: #fff;
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2); }

.detail h2 { margin-left:90px; font-size: 22px; line-height: 20px; font-weight: 400; position: relative;}
.detail .entitle { margin-left:90px; font-size: 18px; color: #999; font-weight: 200; font-family:Courier New; margin-top: 15px; }
.detail-text { padding: 10px 0; text-align: center; margin-left: 90px; }
.detail-text img { max-width: 100%; }
.detail h2 span { position: absolute; left: -90px; top:0;
  	width: 75px; height: 5px; border-radius: 3px; background-color: #000; display: inline-block;
}
.detail p { margin:5px 0; }

.college-list { padding-bottom: 40px; min-height: 400px; }
	.cglist  { 
		display: flex; padding:20px 25px; flex-direction: row; align-items: stretch; margin-bottom: 20px; box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.1);
	}
	.cglist:hover  {
		box-shadow: 0 5px 40px 0 rgba(38, 119, 74, 0.3);
	}
	.cglist .download  { 
		margin-left: 20px; display: flex; align-items: center; 
	}
	.cglist .download span { font-size: 28px; }
	.cglist .thumb  { 
		max-width: 260px; margin-right: 25px;
	}
	.cglist ._thumb  { 
		width: 120px; margin-right: 25px;
	}
	.cglist .thumb img,
	.cglist ._thumb img{
		-webkit-transition: all .3s;
				transition: all .3s;
		width: 100%;
	}
	.cglist:hover .thumb img,
	.cglist:hover ._thumb img {
		-webkit-transform: scale(1.1);
	    transform: scale(1.1);
	}
	.cglist .cgContent { line-height: 21px; }
	.cglist .cgContent h5 { display: flex; justify-content: space-between; }
	.cglist .cgContent h5 span { font-size: 12px; color: #999; }
	.cglist .cgContent p { margin: 5px 0 10px ; }
	.cglist .cgContent ul { display: flex; margin: 0; padding: 0;   }
	.cglist .cgContent li { display: flex;   }
	.cglist .cgContent li { margin-right: 15px;  }
	.cglist .cgContent li:nth-child(2) i { font-size: 14px;  }
	.cglist .cgContent li i { margin-right: 5px; }

	.cglist:hover .cgContent h5 a,
	.cglist:hover .cgContent p,
	.cglist:hover .download span { color: var(--hcolor); }
	
/***********************************************************************************
 *	- LOGO
 ***********************************************************************************/

	#logo {
		max-width: 100%;
		margin-top: 5px;
		padding: 15px 0;
		-webkit-transition: all .3s linear;
				transition: all .3s linear;
	}
	
	#logo img {
		display: inline-block; height: 35px;
	}
	
	@media (min-width: 768px) and (max-width: 991px) {
		
		#logo { margin-top: 0; }
		
	}
	
	@media (max-width: 767px) {
		
		#logo { 
			margin-top: 5px;
			padding: 5px 0 25px;
		}
		#logo img {
			display: inline-block; height: 30px;
		}
		
	}

	#linemenu { margin: 0; padding: 0; position: fixed; right: 20px; bottom: 45%; list-style-type: none; z-index: 70;}
	#linemenu li {  margin-bottom: 5px; }
	#linemenu li a { width: 10px; height: 10px; display: inline-block; border-radius: 50%; background-color: #fff; text-decoration: none;}
	#linemenu .active a { color: #e0ae82; height: 26px; border-radius: 5px; background-color: #e0ae82;}
	.section { text-align: center;  color: #fff;}

/***********************************************************************************
 *	- MENU
 ***********************************************************************************/
 	
 	.menu,
	.menu ul {
		padding: 0; position: relative; z-index: 9999;
		margin: 0; 
		list-style: none; 
	}
	.menu .micon { font-size: 13px; }
	.menu {
		margin-top:18px; 
		float: right;
		width: 100%; max-width: 100%;
		display: flex; justify-content: space-between; align-items: center;
	}
	.menu li.dropdown ul li a.flex-between { display: flex; justify-content: space-between; align-items: center; }
	.menu li.dropdown ul li i { font-size: 12px; }

	.menu > li { 
		float: left;
	}
	.menu li a {
		display: inline-block;
		color: #2a493f;
		font-size: 16px;
		font-weight: 400;
		text-decoration: none;
	}
	
	.menu li a:hover,
	.menu li.active > a { border-bottom: 2px solid #2a493f; }
	
	.menu > li > a {
		position: relative;
		padding: 3px 0;
		text-transform: uppercase;
	}
	.menu > li:first-child > a { margin-left: 0;}
	.menu > li:last-child > a { margin-right: 0; }
	.menu > li:first-child > ul { margin-left: -15px; min-width: 58px;}
	.menu > li:nth-child(3) > ul { margin-left: -5px; min-width: 70px;}
	.menu > li:nth-child(4) > ul { margin-left: -12px; min-width: 88px;}
	.menu > li:last-child > ul { margin-left: -46px; min-width: 170px;}
	.menu li.dropdown ul {
		position: absolute;
		top: 80%;
		display: none;
		z-index: 9999;
		width: 100%; padding: 10px 0;
		text-align: center;
	}
	.menu li.dropdown ul ul {
		top: -1px;
		left: 50%;
	}
	
	.menu li.dropdown:hover > ul { display: block; }
	.menu li.dropdown ul li a {
		font-size: 14px;
		display: inline-block;
		margin: 5px 0; 
		color: #2a493f;
	}

	.menu li.dropdown ul li a:hover {
		 border-bottom: 1px solid #2a493f;
	}
	
	.menu li.megamenu .megamenu-container {
		position: absolute;
		top: 90%;
		left: 0;
		display: none;
		z-index: 2000;
		width: 100%;
		border: 1px solid #fff;
		background-color: #fff;
		box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.2);
	}
	
	.megamenu-container .section {
		float: left;
		width: 25%;
		padding: 20px 20px 40px;
	}
	.megamenu-container .section h5 a {
		 color: #02773a; font-size: 16px;
	}
	
	.megamenu-container.col-2 .section { 
		width: 50%; 
	}
	
	.megamenu-container.col-3 .section { 
		width: 33.33333333%; 
	}
	
	.megamenu-container.col-4 .section { 
		width: 25%; 
	}
	
	.megamenu-container.col-5 .section { 
		width: 20%; 
	}
	
	.megamenu-container .section > ul { margin:0 -20px -20px; }
	
	.megamenu-container .section > ul li a {
		border-bottom: 1px solid #fff;
		border-right: 1px solid #fff;
		padding: 3px 20px;
	}
	
	.megamenu-container .section > ul li:last-child a { border-bottom: none; }
	
	.menu li.megamenu:hover > .megamenu-container { display: block; }
	
	.sf-arrows .sf-with-ul:after {
		position: absolute;
		top: 50%;
		right: -20px;
		width: 0;
		height: 0;
		margin-top: 28px;
		content: "";
		border: 5px solid transparent;
		border-top-color: #000;
		display: none;
	}
		
	.sf-arrows > li:hover > .sf-with-ul:after { border-top-color: #999; }
		
	.sf-arrows ul .sf-with-ul:after {
		display: block;
		margin-top: -5px;
		margin-right: 35px;
		border-color: transparent;
		border-left-color: #000;
	}
	
	.sf-arrows ul li:hover > .sf-with-ul:after { border-left-color: #999; }
	
	@media (min-width: 768px) and (max-width: 991px) {
	
		.menu { display: none; }
		.piconright4 { display: none; }
		
	}
	
	@media (max-width: 767px) {
	
		.menu,.micon { display: none; }
		 
		.piconright4 { display: none; }
		.showinfo { padding: 30px 10px 0 10px; }
		.showinfo .link a {  padding: 5px 20px;  }
		.detail h2 { margin-left:15px; }
		.detail .entitle { margin-left:15px; }
		.detail h2 span { position: absolute; left: -35px; top:0;
		  	width: 30px; height: 4px; border-radius: 2px; display: none;
		}
		.detail-text { padding: 10px 15px 10px 0; text-align: center; margin-left: 15px; }
		
	}


	

	
/***********************************************************************************
 *	- MOBILE MENU
 ***********************************************************************************/	
	
	#mobile-menu-button {
		float: right;
		display: none;
		background-color: rgba(0,0,0,.5); 
		color: #fff;
		line-height: 24px;
		margin-top: 15px;
		padding:5px 5px 1px;
		text-decoration: none;
	}
	#mobile-menu-button i { font-size: 24px; }
	
	#mobile-menu,
	#mobile-menu ul {
		list-style: none;
		display: none;
		margin: 0;
	}
	
	#mobile-menu { 
		background-color: rgba(0,0,0,.5); width: 100%;
		position: fixed;  top: 76px; z-index: 9999;
	}
	
	#mobile-menu li a {
		display: block;
		border-top: 1px solid rgba(0,0,0,.05);
		color: #fff;
		padding: 8px 20px;
		text-decoration: none;
	}
	
	#mobile-menu > li > a {
		font-weight: 700;
		font-size: 14px;
		text-transform: uppercase;
	}
	
	#mobile-menu ul a {
		padding-left: 40px;
	}
	
	#mobile-menu ul ul a {
		padding-left: 60px;
		font-size: 12px;
	}
	
	#mobile-menu .megamenu-container {
	 	border-top: 1px solid #fff; 
		display: none;
		margin-left: 0;
	}
	
	#mobile-menu .megamenu-container .section {
		float: none;
		width: 100%;
		margin-bottom: -1px;
		padding: 0 20px 20px;
	}
	
	#mobile-menu .megamenu-container .section ul {
		display: block;
		margin: 0 -25px -20px;
		border-bottom: 1px solid #fff;
	}
	
	#mobile-menu .megamenu-container .section ul a {
	 	border-top: none; 
		padding-left: 40px;
	}
	#mobile-menu li.dropdown > a,
	#mobile-menu li.megamenu > a { 
		position: relative;
	}
	
	#mobile-menu li.dropdown > a:after,
	#mobile-menu li.megamenu > a:after {
		position: absolute;
		top: 50%;
		right: 20px;
		width: 0;
		height: 0;
		margin-top: -2px;
		content: "";
		border: 5px solid transparent;
		border-top-color: #fff;
	}
	
	#mobile-menu li.dropdown > a.open:after,
	#mobile-menu li.megamenu > a.open:after {
		border-top-color: transparent;
		border-bottom-color: #fff; 
	}
	
	@media (min-width: 768px) and (max-width: 991px) {
		
		#mobile-menu-button {
			position: absolute;
			display: block;
			top: 0;
			right: 10px;
		}
		
	}
	
	@media (max-width: 767px) {

		#mobile-menu-button {
			position: absolute;
			top: 0;
			right: 15px;
			display: block;
		}
		 
		#mobile-menu li a {
			 font-size: 14px;
		}
		
	}
	
/***********************************************************************************
 *	- SEARCH
 ***********************************************************************************/		
	.menu li.search { display: flex; justify-content: flex-start; align-items: center; }
	
	.menu li.search a {
		margin:0 6px;
	}
	.menu li.search a i { 
		font-size: 18px;
		font-weight: 700;
	}
	.menu li a.cart {
		margin:0 6px 0; position: relative;
	}
	.menu li a.cart span { font-size: 10px; position: absolute; right: -8px; top:12px; background-color: #f00; color: #fff; border-radius: 50%; display: block; width: 18px; height: 18px; line-height: 18px; text-align: center; }
	.menu li.search a.wxqrcode {
		margin:1px 6px 0;
	}
	.menu li.search a.wxqrcode i { 
		font-size: 14px;
		font-weight: 700;
	}

	.menu li.search a.language {
		margin:1px 0 0 8px;
	}
	.menu li.search a img { 
		 width: 22px;margin: 0;
	}

	@media (min-width: 768px) and (max-width: 991px) {
		
		 
		
	}
	
	@media (max-width: 767px) {
	
		 #mobile-menu li.search { display: flex; justify-content: space-between; align-items: center; }
		 #mobile-menu li.search a { display: inline-block; border-top: none; }
		 #mobile-menu li.search a img { 
			 width: 22px;
		}
		 #mobile-menu li a.cart {
			 position: relative;
		}
		#mobile-menu li a.cart span { font-size: 10px; position: absolute; right:0; top:0; background-color: #f00; color: #fff; border-radius: 50%; display: block; width: 18px; height: 18px; line-height: 18px; text-align: center; }
		#mobile-menu li.search a i { 
			font-size: 22px;
			font-weight: 700;
		}
		#mobile-menu li.search a img { 
			 width: 24px; 
		}
		
	}

 
/***********************************************************************************
 *	- STICKY
 ***********************************************************************************/
 	.proheaderbg { background-color: rgba(0,0,0,.4); }
 	.header-pagenav {
		position: fixed;
		top: 55px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 100%;
		z-index: 2000;
		border-bottom: #fff solid 1px;
		background-color: #fff;
		box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.2);
	}

	#header-sticky [class^="col-"] {
		position: static;
	}
	
	#header-sticky .container {
		position: relative;
	}

	#header-sticky {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 100%;
		padding-top: 0;
		z-index: 80000;
		background-color: rgba(42,73,63,.88);
	}
	
	.header-sticky #logo {
		margin-top: 0;
		padding: 15px 0;
		position: relative;
		z-index: 80001;
		-webkit-transition: all .8s linear;
				transition: all .8s linear;
	}
	
	.header-sticky .menu { 
		margin-top: 5px;
		color: #fff;
		-webkit-transition: all .3s linear;
				transition: all .3s linear;
	}
	
	#header-sticky .menu > li > a {
		padding:3px 0;
		color: #fff;
		-webkit-transition: all .3s linear;
				transition: all .3s linear;
	}

	#header-sticky .menu li a:hover,
	#header-sticky .menu li.active > a {
		border-bottom: 2px solid #fff;
	}

	#header-sticky .menu li.dropdown ul li a:hover {
		 border-bottom: 1px solid #fff;
	}

	#header-sticky .menu a {
		color: #fff;
	}
	
	/* PC端鼠标悬停一级菜单时为header-sticky添加padding-bottom */
 
	
	@media (min-width: 768px) and (max-width: 991px) {
		
		#header-sticky { visibility: hidden; }
		
	}
	
	@media (max-width: 767px) {
		
		#header-sticky { visibility: hidden; }
		
	}

/***********************************************************************************
 *	+ PAGE CONTENT
 ***********************************************************************************/
	
	#page-content {   }

/***********************************************************************************
 *	- PAGE HEADER
 ***********************************************************************************/
 	.mt100 { margin-top: 70px; }
  	.swiper {
        width: 100%;
        height: 100%; overflow: hidden;
      }
 	.swiper-products {
      width: 100%;
      height: 100%;
    }
    .swiper-products .swiper-wrapper { width: 100%; display: flex; height: 100%; }
    .swiper-products .swiper-slide {
      text-align: center;
      background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size:cover;
      background-repeat: no-repeat;
	  background-position: top center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center; height: 100%;
    }
    .swiper-products .swiper-slide img { width: 100%; }


 	.indexbg1 { background-image: url(../../imgs/banner1.jpg); }
 	.swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-container .swiper-slide {
		position: relative;
		text-align: center;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size:cover;
		background-repeat: no-repeat;
		background-position: top center;
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		width: 100%;
		height: 100%;
		flex-direction: column;
    }
    .swiper-container .swiper-slide p {
		position: relative;
		z-index: 9100;
		font-size: 28px;
		line-height: 36px;
		font-weight: 200;
		color: #fff;
		margin-bottom: 20px;
	}
	.swiper-container .swiper-slide p.en {
		font-size: 20px;
		font-weight: 200;
	}
	.swiper-container .swiper-slide .lesont { 
		position: absolute;
		bottom: 30px;
		z-index: 9100;
		font-size: 14px;
		line-height: 36px;
		font-weight: 200;
		color: #9fa09a;
		letter-spacing: 15px;
		margin-bottom: 30px;
		 
	} 

 
	 
	#page-header { 
		position: relative;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top center;
		display: flex; justify-content: flex-start; align-items: flex-start;
		height: 880px;
		overflow: hidden;
	}
	
	#page-header h2 {
		color: #fff;
		text-transform: uppercase;
	}

	@media (min-height:1080px) and (max-height: 1440px) {
		#page-header { 
			height: 1240px;
		}
	}
	
	@media (min-width: 768px) and (max-width: 991px) {

		#page-header { height: 100vh;}
	}
	
	@media (max-width: 767px) {
		
		#page-header { height: 100vh;  }

		.swiper-container .swiper-slide p {
			font-size: 16px;
			line-height: 24px;
			margin-bottom: 10px;
		}
		.swiper-container .swiper-slide p.en {
			font-size: 14px;
			font-weight: 200;
		}
		.swiper-container .swiper-slide .lesont { 
			bottom: 16px;
			font-size: 12px;
			letter-spacing: 15px;
			margin-bottom: 0;
		}

		#scroll-up {
			bottom: 40px;
			right: 10px;
			height: 35px;
			width: 35px;
			font-size: 15px;
			line-height: 35px;
		}
		.header-pagenav {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 100%;
			z-index: 2000;
			border-bottom: #fff solid 1px;
			background-color: #fff;
			box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.2);
		}
		
	}
 	 

/***********************************************************************************
 *	+ PAGES
 ***********************************************************************************/

/***********************************************************************************
 *	- ABOUT
 ***********************************************************************************/
 	.aboutBG { background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size:cover;
      background-repeat: no-repeat;
	  background-position: top center; color: #fff; height:100%; 
	  display: flex;
	  align-items: center;
	  background-image: url(../../img25/page2.jpg); min-height: 100vh;
	}
	
	.about-me {
		margin:30px 0; padding: 0;
		text-align: left;
		max-width: 400px;
	}
	.about-me p { font-size: 14px; line-height: 30px; margin-bottom: 0; color: var(--hcolor);  }
 
 	.aboutBG h3.cntitle,
 	.solution h3.cntitle {
		font-family: MontReg; text-align: left;
		 font-size: 30px; font-weight: 400; color: var(--hcolor); margin-bottom: 3px;
	}
	.aboutBG h3.entitle,
	.solution h3.entitle{ text-align: left;
		font-family: AboretoReg; font-size: 16px; color: var(--hcolor);
	}
	.aboutBG p img,
	.solution p img { max-height: 18px; margin-right: 3px; }

	.areapro { display: flex; flex-wrap: wrap; }

/***********************************************************************************
 *	- SERVICES
 ***********************************************************************************/
 
	
 	 
 	.clist:hover h3 { background-color: #e0ae82; }
 	.clist:hover h6,
 	.clist:hover a { color: #fff; }
 	.clist:hover .cateimg img {
	  -webkit-transform: scale(1.1); 

	  transform: scale(1.1);
	}
	.clist { width: 24%; margin-right: 1%;   }
	.clist:last-child { margin-right: 0; }
	.clist .cateimg {
	  overflow: hidden;
	  position: relative; 

	}
	.clist .cateimg a {
	  display: block;
	}
	.clist .cateimg a img {
	  width: 100%; border:0; 
	  -webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s;
	}

.kc-goods-other ul{
    display: flex;
    flex-wrap: wrap;
}
.kc-goods-other ul li{
    margin-right: 2%; overflow: hidden;
    width: 23%;
    box-sizing: border-box;
}
.kc-goods-other ul li img{
    width: 100%;
    height: 100%; -webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s;
}
.kc-goods-other ul li:hover img{
    -webkit-transform: scale(1.1); 
	transform: scale(1.1);
}

.kc-goods-Instructions ul{
    display: flex;
    flex-wrap: wrap;
}
.kc-goods-Instructions ul li{
    border: 2px solid #eee;
    margin-right: 1%;
    margin-bottom: 30px;
    width: 24%;
    box-sizing: border-box;
}
.kc-goods-Instructions ul li:hover{
    border: 2px solid var(--hcolor);
}
.kc-goods-Instructions ul li i{
    margin-left: 5px; font-size: 14px;
}
.kc-goods-Instructions ul li img:hover{
    opacity: .8;
}
.kc-goods-Instructions ul li img{
    width: 100%;
    height: 300px;
}
.kc-goods-Instructions ul li div{
    line-height: 40px;
    text-align: center;
    width: 100%;
    background: var(--hcolor);
    color: #fff;
    border: 0;
}

.kc-goods-video ul{
    display: flex;
    flex-wrap: wrap;
}
.kc-goods-video ul li{
    border: 2px solid #eee;
    margin-right: 1%;
    width: 32%;
    box-sizing: border-box;
}
.kc-goods-video ul li:hover{
    border: 2px solid var(--hcolor);
}
.kc-goods-video ul li i{
    margin-left: 5px; font-size: 14px;
}




/***********************************************************************************
 *	- caselist
 ***********************************************************************************/
 	.clists { margin:50px 0; display: flex; justify-content: flex-start; flex-wrap: wrap; }
	.showCasemargin { margin:0 15px; }
 	.caseList { display: flex; justify-content: flex-start; flex-wrap: wrap;  }
	.caseList li { width: 23%; margin-bottom: 30px; margin-right: 30px;
	  overflow: hidden;
	  position: relative;
	}
	.caseList li:nth-child(4n) { margin-right: 0; }
	.caseList li h3 { position: absolute; left: 0; bottom: -10px; width: 100%; height: 40px; background-color: rgba(0,0,0,.5);
	   display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 300; 
	   -webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s;
	}
	.caseList li h3 *,
	.caseList li h3 a:hover { color: #fff; }
	.caseList li a img { width: 100%; height: 100%; -webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s;  }
	.caseList li:hover a img {
	  -webkit-transform: scale(1.1);
	  transform: scale(1.1);
	}

	.newsList { display: flex; flex-wrap: wrap; }
	.newsList li { width: 23%; margin-bottom: 30px; margin-right: 20px; overflow: hidden; position: relative; }
	.newsList li:nth-child(4n) { margin-right: 0; }
	.newsList li .newsText { position: absolute; left: 0; top:0; width: 100%; height: 100%; background-color: rgba(0,0,0,.2);
	   color: #fff; display: flex; flex-wrap: wrap; cursor: pointer;
	   -webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s;
	}
	.newsList li:hover .newsText { background-color: rgba(0,0,0,.6); }
	.newsList li .newsText .hits-time { align-self: flex-start;  }
	.newsList li .newsText .time { margin: 10px 25px 0; display: flex;   }
	.newsList li .newsText .hits-time .title { padding: 10px 25px 0; font-size: 16px; display: none;  }
	.newsList li .newsText .hits-time .newsinfo { padding: 10px 25px; font-size: 12px; display: none;  }
	.newsList li:hover .newsText .hits-time .title,
	.newsList li:hover .newsText .hits-time .newsinfo { display: block;  }
	.newsList li:hover .newsText .hits-time .title a,
	.newsList li .newsText .hits-title .title a { color: #fff; }

	.newsList li .newsText .hits-title { align-self: flex-end; width: 100%;  }
	.newsList li .newsText .hits-title .title { padding: 10px 25px; font-size: 16px;  }
	.newsList li:hover .newsText .hits-title .title { display: none;  }
				 .newsText .hits-title .newsinfo { padding: 10px 25px; font-size: 12px;  }
				 .newsText .hits-title .newsmore { border-top: rgba(255,255,255,.2) solid 1px; padding: 10px 25px 0; display: flex; justify-content: space-between; }
				
				 .newsText .time span,
				 .newsText .newsmore p span { margin-top: 1px; margin-right: 2px; }
				 .newsText .newsmore p a,
				 .newsText .newsmore p  { display: flex; color: #fff; }
	 
	.newsList li a img { width: 100%; height: 100%; -webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s;  }
	.newsList li:hover a img {
	  -webkit-transform: scale(1.1);
	  transform: scale(1.1);
	}

	
 


/***********************************************************************************
 *	- solution
 ***********************************************************************************/
 	.solution {  background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size:cover;
      background-repeat: no-repeat;
	  background-position: top center;
	  background-image: url(../../img25/page3.jpg);
	  display: flex;
	  align-items: center;
	  min-height: 100vh;
	 }
	#page2cate { max-width: 200px; margin: 0 auto;  }
	.category-item {
		position: relative;
		display: inline-block;
		margin: 10px 0;
		padding: 0 20px;
		font-size: 16px;
		line-height: 1.5;
		color: var(--hcolor);
	}

	.category-item::before,
	.category-item::after {
		content: '';
		position: absolute;
		top: 50%;
		width: 4px;
		height: 4px;
		background-color: var(--hcolor);
		transform: translateY(-50%) rotate(45deg);
	}

	.category-item::before {
		left: 0;
	}

	.category-item::after {
		right: 0;
	}

	.category {
		text-align: center;
		margin-top: 20px;
		display: flex;
		flex-direction: column;
	}

	.category .category-item {
		display: block;
	}

	/* 中等屏幕 (768px - 991px) */
	@media (min-width: 768px) and (max-width: 991px) {
		#page2cate { max-width: 160px; }
		.category-item {
			font-size: 14px;
			padding: 0 15px;
		}
		.category-item::before,
		.category-item::after {
			width: 3px;
			height: 3px;
		}
	}

	/* 小屏幕 (< 768px) */
	@media (max-width: 767px) {
		#page2cate { max-width: 140px; }
		#businessscope .category { }
		.category-item {
			font-size: 12px;
			padding: 0 12px;
			margin: 8px 0;
		}
		.category-item::before,
		.category-item::after {
			width: 3px;
			height: 3px;
		}
	}

	#businessscope { width: 140px; float: right; text-align: center; margin-right: 18%;  }
	#businessscope h3 {  text-align: center; }
 	.solution-list { padding: 50px 0 0; text-align: center; }
 	.solution-list:first-child h3 { font-family: MontReg; font-weight:bold;  }
 	.solution-list h3 { padding: 0; font-weight: 400; margin: 0 0 5px; font-size: 28px; color: #fff;  }
 	.solution-list h6 { font-family: MontLight; color: #fff; }
 	.solution-list:hover h3,
 	.solution-list:hover h6,
 	.solution-list:hover i { color:#e0ae82; }
 	.solution-list:first-child i {
 		font-size: 50px;
 	}
	.solution-list i {
		display: inline-block;
		margin-bottom: 30px;
		font-size: 60px;
		color: #fff;
		-webkit-transition: all .3s;
				transition: all .3s;
	}
	.solution-list:hover i {
		-webkit-transform: scale(1.1);
			-ms-transform: scale(1.1);
				transform: scale(1.1);
	}

	 
/***********************************************************************************
 *	- custom
 ***********************************************************************************/
 	 

/***********************************************************************************
 *	- news
 ***********************************************************************************/
 	.news { margin-top:-25px; margin-bottom: 50px; }
	.newstitle span { font-size: 30px; color: #000; margin-left: -15px; }
	.newstitle2 span { font-size: 30px; color: #000; margin-left: 0; }
	.newstitle3 { display: flex; justify-content: space-between; margin-bottom: 5px; }
	.newstitle3 span { font-size: 20px; color: #000; margin-left: 0; }
	.newstitle3 a { border:#eee solid 1px; display: flex; padding:0 10px; }
	.newstitle3 a:hover { border:var(--hcolor) solid 1px; color: var(--hcolor); }
	.newslist { margin: 20px 10px 0 -15px; }
	.newslist2 { margin: 20px 10px 0 0; }
	.news dl dt {  display: flex; justify-content: space-between; }
	.news dl dt a {font-weight: 400; font-size: 14px; color: #000; }
	.news dl dt span { font-size: 12px; font-weight: 200; color: #999; }
	.news dl dd { padding:5px 0 20px; color: #999; border-bottom: #eee solid 1px; margin-bottom: 10px;
	-webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s; }
	.news dl:hover dd { border-bottom:var(--hcolor) solid 1px; color: #333; }
	.news dl:hover dt a,
	.news dl:hover dt span,
	.news dl:hover dd a { color: var(--hcolor); }
 
/***********************************************************************************
 *	+ FOOTER
 ***********************************************************************************/
 
 	#footer {
		padding-bottom: 20px;
		background-color: #1f3f35;
		color: #e2e2e2;
		font-size: 12px;
	}
	 

	#footer a:hover { color: #ccc; }
	#footer .wechat img {max-height: 80px;}
	#footer .footlogo img {max-height: 50px; margin-top: 15px; }
	#footer .fcenter { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
	 
	#footer .copyright { font-size: 12px; padding-top: 40px; font-family: MontReg; color: #979a94;  }
 
 
@media (max-width: 767px) {
		#footer {
			font-size: 12px;
		}
		#footer .flogo { flex-direction: column-reverse; }
		#footer .qrcode img { max-height: 100px; margin-left: 10px; margin-bottom: 10px; }
		#footer .footlogo img {max-height: 30px; margin-bottom: 5px; }
		#footer .copyright { font-size: 12px; padding-top: 15px; display: block;  }
		#footer .copyright p { padding: 0; margin: 0;  }
		 
		.container { width: 96%;  }
 		.aboutBG { background-image: url(../../imgs/mbrand2.jpg);}
 		.solution { background-image: url(../../imgs/mproduct.jpg);  }

 		.flexbetween { display: flex; justify-content: space-between; }
 		.about-me {
			margin:20px 60px 0 0; padding: 0;
			text-align: left;
		}
		.about-me p { font-size: 12px; line-height: 21px; text-align: left; margin:5px 0;  }

 		.aboutBG h3.cntitle {
			 font-size: 28px; line-height: 1; font-weight: 400; 
			 color: var(--hcolor); 
			 margin:-242px 0 10px; padding:0;
		}
	 	.solution h3.cntitle {
			 font-size: 28px; line-height: 1; font-weight: 400; 
			 color: var(--hcolor); 
			 margin:-50px 0 10px; padding:0; 
		}
		.aboutBG h3.entitle,
		.solution h3.entitle{
			 font-weight: bold; line-height: 1; font-family: AboretoReg; font-size: 16px; 
			 color: var(--hcolor);
			 padding:0;
		}
		.aboutBG p img,
		.solution p img { max-height: 12px; margin-top: 0; }

		#businessscope { width: 140px; 
			margin: 0 auto; float: none; 
			text-align: center; 
		}
		 
		.clist { width: 48%; margin-bottom: 20px; }
		.clist:nth-child(2),
		.clist:last-child { margin-right: 0; }
 
 		.solution-list { padding: 20px 0 0; width: 50%; }
 		.solution-list p { padding: 5px 15px; line-height: 20px; }
 		.solution-list h3 { font-size: 18px;  }
 		.solution-list h6 { font-size: 12px; }
 		.solution-list:first-child i {
	 		font-size:40px;
	 	}
		.solution-list i {
			display: inline-block;
			margin-bottom: 30px;
			font-size:48px;
			color: #fff;
			-webkit-transition: all .3s;
					transition: all .3s;
		}
 		#fnav li { width: 20%;  }
 		#footer .ficon-nav a {  width: 18%; }

		.news { margin-top:0; margin-bottom: 30px; }
		.newstitle span { font-size: 22px; margin-left:0; }
		.newstitle2 span { font-size: 22px; margin-left: 0; }
		.newslist { margin: 20px 10px 0 0; }
		.newslist2 { margin: 20px 10px 0 0; }

		.caseList,.newsList { margin-top: 20px; justify-content: space-between; }
		.shownewspage h3 { font-size: 16px; margin-top: 10px; }
		.caseList li { width: 48%; margin-bottom: 15px; margin-right: 0;
		  overflow: hidden;
		  position: relative;
		}
		.caseList li:nth-child(2n) { margin-right: 0; }

		.kc-goods-other ul{
	    	justify-content: space-between;
		}
		.kc-goods-other ul li{ 
			margin-right: 0;
	    	width: 48%;
		}
		.kc-goods-Instructions ul{
		    justify-content: space-between;
		}
		.kc-goods-Instructions ul li{
		    margin-right: 0;
		    margin-bottom: 20px;
		    width: 48%;
		}
		.kc-goods-Instructions ul li img{
		    height: 200px;
		}
		.kc-goods-video ul{
		    justify-content: space-between;
		}
		.kc-goods-video ul li{
		    margin-right: 0;
		    width: 48%;
		}

		.newsList {  justify-content: space-between; }
		.newsList li { width:48%; margin-bottom: 15px; margin-right: 0; }
		.newsList li:nth-child(2n) { margin-right: 0; }
		.newsList li .newsText .time { margin: 10px 10px 0; display: flex;   }
		.newsList li .newsText .hits-time .title { padding: 10px 10px 0; font-size: 14px; display: none;  }
		.newsList li .newsText .hits-time .newsinfo { padding: 10px; font-size: 12px; display: none;  }
		.newsList li:hover .newsText .hits-time .title,
		.newsList li:hover .newsText .hits-time .newsinfo { display: none;  }
 

		.newsList li .newsText .hits-title { align-self: flex-end; width: 100%;  }
		.newsList li .newsText .hits-title .title { padding: 8px 10px; font-size: 12px; line-height: 20px;  }
		.newsList li:hover .newsText .hits-title .title { display: block;  }
					       .newsText .hits-title .newsmore { padding: 5px 10px 0; height: 36px;}
					
		 
}
/***********************************************************************************
 *	- ABOUT
 ***********************************************************************************/

 	#class-header { 
		position: relative;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top center;
		height:320px; display: flex; justify-content: flex-start; align-items: flex-start;
	}
	.header1 { 
		background-image: url(../../images/aboutbg.jpg);
	}
	.header2 { 
		background-image: url(../../images/solution/solutionbg.jpg);
	}

	
	#class-header h1 {
		color: #fff; font-weight: bold; font-family: DinBlack;
		text-transform: uppercase; font-size: 52px; margin-top: 15px;
	}
	#class-header h2{ width: 100%;
		color: #fff; font-size: 46px; font-family:MontLight; font-weight: 400;
		text-transform: uppercase;
	}
	.classbg { 
		background-color: rgba(0,0,0,.3); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
		flex-direction: column;
	}
	.quicknav { padding: 15px 0; }
	.quicknav span { font-size: 12px; }

	 
/***********************************************************************************
 *	- class about
 ***********************************************************************************/
 
	.flex-center { display: flex; justify-content: center; align-items: center; }
	/* BLOG POST COMMENT FORM */
	.class-about {  }
	.brandList { display: flex; justify-content: space-between; }

	.brandList .brandText { min-height: 200px; width: 50%; display: flex; flex-direction: column; justify-content: center;  align-content: center; align-items: left;  }
	.brandList .brandText p { margin-bottom: 0; margin-left: 25%; }
	.brandList .brandText h4 { color: #4c6c50; font-size: 20px; font-weight: 300; margin-left: 25%; }

	.brandList .serviceText { min-height: 200px; width: 50%; display: flex; flex-direction: column; justify-content: center;  align-content: center; align-items: left; background-color: #f9f9f9;  }
	.brandList .serviceText p { margin-bottom: 0; margin-left: 22%; font-size: 14px; }
	.brandList .serviceText h4 { color: #000; font-size: 20px; font-weight: bold; margin-left: 22%; }

	.brandList .brandPic { overflow: hidden; width: 50%; }
 
	.brandPic img,
	.categoryList .categoryPic img {
		-webkit-transition: all .3s;
				transition: all .3s;
	}
	.brandPic:hover img,
	.categoryList .categoryPic:hover img {
		-webkit-transform: scale(1.1);
	    transform: scale(1.1);
	}
	.maps { margin-top: -80px; position: relative; z-index: 1; }
	.contactus { 
		background-color: #4c6c50; position: relative; z-index: 2;
		  padding: 80px 100px 40px; color: #fff; font-size: 14px;
		display: flex; justify-content: space-between;
	}
	.contactus .lxleft { 
		width: 60%;
	}
	.contactus .lxleft dt { margin-bottom: 5px; font-weight: 400; }
	.contactus .lxleft dd { margin-bottom: 25px; }
	.contactus .lxleft dd:last-child span { display: inline-block; margin-top: 120px; width: 80px; height: 2px; background-color: #fff;  }
	.contactus .lxright { 
		width: 30%;
	}
	.contactus .lxright dt { margin-bottom: 5px; font-weight: 400; }
	.contactus .lxright dd { margin-bottom: 25px; font-size: 18px;  }
	.contactus .lxright dd:last-child img { max-height: 50px; margin-top: 70px; }

	.categoryList { display: flex; justify-content: space-between; }
	.categoryList .categoryText { min-height: 200px; width: 45%; display: flex; flex-direction: column; justify-content: center;  align-content: center; align-items: left;  }
	.categoryList .categoryText p { margin-bottom: 0; font-size: 14px; font-size: 200; margin-left: 20%; }
	.categoryList .categoryText h4 { color: #4c6c50; margin-left: 20%; font-size: 28px; font-weight: 300; margin-bottom: 10px;  }
	.categoryList .categoryText a.more { background-color: var(--hcolor); margin-top: 10px; margin-left: 20%; width: 120px; display: flex; justify-content: center; color: #fff; height: 30px; line-height: 30px; border-radius:15px;  }
	.categoryList .categoryText a:hover { background-color:#4c6c50; }
	.categoryList .categoryText a.more i { font-size: 12px; }
	.categoryList .categoryPic { overflow: hidden; width: 55%; }

	.categorybg { background-color: #f9f8f8; margin-top: 50px; padding: 30px 0; }
	.categorybg2 { background-color: #fff; margin-top: 50px; }
	dl.catename dt { 
		text-align: center; font-size: 28px; font-weight: 300; color: #000; margin-bottom: 10px;
	}
	dl.catename dt a { 
		color: #000;
	}
	dl.catename dt a:hover { 
		color: #4c6c50;
	}
	dl.catename dd { 
		text-align: center; font-size: 12px; color: #777; line-height: 23px;
	}

	.cateList { display: flex; flex-wrap: wrap; }
	.cateList li { width: 23%; margin-bottom: 30px; margin-right: 30px;
	  overflow: hidden; background-color: #fff; display: flex; justify-content: center; align-self: stretch; align-content: center; flex-wrap: wrap;
	}
	.cateList li:nth-child(4n) { margin-right: 0; }
	.cateList li h3 { width: 100%; height: 40px;  line-height: 40px;
	    font-size: 14px; text-align: center;
 
	}
	.cateList li > div { overflow: hidden; }
	.cateList li a img { width: 100%; height: 100%; -webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s;  }
	.cateList li:hover a img {
	  -webkit-transform: scale(1.1);
	  transform: scale(1.1);
	}

	.cate-cenger-hover li:hover { 
		box-shadow: 0 0 10px #eee;
	}
	.cate-gray-hover li:hover { 
		box-shadow: 0 0 10px #ccc;
	}


	.proContent { display: flex; justify-content: space-between; width: 100%; margin-bottom: 40px; }
	.prosBanner img { width: 100%; }
	.proContent #prosLists { 
		width: calc(100% - 260px); margin-bottom: 70px;
	}

	ul.cateProlist { display: inline-flex; flex-wrap: wrap;}
	ul.cateProlist li { width:210px; margin-top: 10px; margin-right: 13px;
	  overflow: hidden; background-color: #fff; display: flex; justify-content: center; align-self: stretch; align-content: center; flex-wrap: wrap;
	}
	ul.cateProlist li:nth-child(4n) { margin-right: 0; }
	ul.cateProlist li h3 { width: 100%; height: 40px;  line-height: 40px;
	    font-size: 14px; text-align: center;
 
	}
	ul.cateProlist li a { overflow: hidden; }
	ul.cateProlist li a img { width: 100%; height: 100%; -webkit-transition: all ease-in-out 0.3s;
	  transition: all ease-in-out 0.3s;  }
	ul.cateProlist li:hover img {
	  -webkit-transform: scale(1.1);
	  transform: scale(1.1);
	}

	/* 顶部产品导航 */
	#pcProCategory,
	#pcBrand {
		position: absolute; display: none;
		top: 58px; left: 0;
		z-index: 9999;
		width: 100%; padding: 20px 0;
		border: 1px solid #fff;
		background-color: #fff;
		box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.2);
	}
	ul#topnavProList { margin-left: 15px; width: 100%; justify-content: center; }
	ul#topnavProList li { width: 18%; margin-right: 2%;  }
	ul#topnavProList li:nth-child(5n) { margin-right: 0;  }

	ul#topnavBrandList { margin-left: 15px; width: 100%; justify-content: center; }
	ul#topnavBrandList li { width: 18%; margin-right: 2%;  }
	ul#topnavBrandList li:nth-child(5n) { margin-right: 0;  }

	.inquire { margin: 30px 100px 100px; text-align: center;  display: flex; justify-content: center; align-content: center; }
	.infos { margin: 100px 30px 0; font-size: 14px; line-height: 25px; text-align: left; }
	.infos p { text-indent: 2em; line-height: 30px; }
	.inquire form { display: inline-flex; }
	.inquire input[type="text"] { height: 40px; border: #dedede solid 1px; border-radius: 3px; width: 280px; line-height: 30px; padding: 5px; color: #666; margin-right: 5px; }
	.inquire .submit-btn { background: #e0ae82; border-radius: 3px; border: 0; padding: 7px 15px; font-size: 14px; color: #fff;  }
	.inquire .submit-btn span { font-size: 16px; }
	
/* 顶部产品导航 */


/* 产品详情的 产品列表*/
	ul.OtherProlist li { width:23%; margin-top: 10px; margin-right: 2%; }

@media (max-width: 767px) {
	#class-header { 
	 	background-position: center center;
		height:300px;
	}
	#class-header h1 {
		font-size: 36px; margin-bottom: 0;
	}
	#class-header h2 {
		margin: 0 22%; font-size: 30px;
	}
	.about2 { margin: 30px 0 0; }
	.class-about { padding:0; }
	.class-about h3 { margin: 20px 0 10px;font-size: 28px; }
	 
	.categoryList { flex-wrap: wrap; }
 	.categoryList .categoryPic { width: 100%; margin-bottom: 10px; }
	.categoryList .categoryText {  width: 100%; }
	.categoryList .categoryText p {  font-size: 12px; margin-left:0; }
	.categoryList .categoryText h4 { color: #4c6c50; margin-left:0; font-size: 22px; font-weight: 300; margin-bottom: 10px;  }
	.categoryList .categoryText a.more { margin-left: 0;}
	dl.catename dt { font-size: 22px; }
	dl.catename dd { padding: 0 25px; }
	.cateList { display: flex; flex-wrap: wrap; margin: 0 15px; }
	.cateList li { width: 46%; margin-bottom: 20px; margin-right: 15px;
	  overflow: hidden; background-color: #fff; display: flex; justify-content: center; align-self: stretch; align-content: center; flex-wrap: wrap;
	}
	.cateList li:nth-child(2n) { margin-right: 0; }

	.categorybg {  margin-top: 30px; padding: 20px 0; }
	.categorybg2 { margin-top: 30px; }

	.proContent { flex-wrap: wrap; width: 100%; }
	.proContent #prosLists { 
		width: 100%; margin-bottom: 20px;
	}

	ul.cateProlist { display: inline-flex; justify-content: space-between; flex-wrap: wrap;}
	ul.cateProlist li { width:48%; margin-top: 10px;
	  overflow: hidden; background-color: #fff; display: flex; justify-content: center; align-self: stretch; align-content: center; flex-wrap: wrap;
	}
	ul.cateProlist li:nth-child(2n) { margin-right: 0; }

	.brandList { justify-content: space-between; flex-direction: column; margin: 0 -15px; }

	.brandList .brandText { min-height: 100px; width: 100%; margin-bottom: 20px; text-align: center;  }
	.brandList .brandText p { margin-bottom: 0; margin-left: 5%; }
	.brandList .brandText h4 {  font-size: 20px; font-weight: 300; margin-left: 0; margin-top: 15px; }

	.brandList .serviceText { min-height: 200px; width: 100%; text-align: center; background-color: #f9f9f9;  }
	.brandList:nth-child(2) { flex-direction: column-reverse; }
	.brandList .serviceText p { margin-bottom: 0; margin-left: 0; font-size: 14px; }
	.brandList .serviceText h4 {  font-size: 20px; margin-left:0; }

	.brandList .brandPic { width: 100%; }

	.contactus { padding: 20px;  flex-direction: column; }
	.contactus dl { margin: 0; padding: 0; }
	.contactus .lxleft {  width: 100%; }
	.contactus .lxleft dt { margin-bottom: 5px; font-weight: 400; }
	.contactus .lxleft dd { margin-bottom: 15px; font-size: 12px; }
	.contactus .lxleft dd:last-child span,
	.contactus .lxleft dd:last-child { display: none; }
	.contactus .lxright {  width: 100%; }
	.contactus .lxright dt { margin-bottom: 5px; font-weight: 400; }
	.contactus .lxright dd { margin-bottom: 15px; font-size: 14px;  }
	.contactus .lxright dd:last-child img { display: none; }

	.maps { margin-top: 0; position: relative; z-index: 1; }`	 

	.inquire { margin: 30px 0 20px; text-align: center;  display: flex; justify-content: center; align-content: center; }
    .infos { margin: 30px 0; font-size: 12px; line-height: 21px; text-align: left; }
    .infos p { text-indent: 2em; }

    .inquire form { display: inline-flex;   }
    .inquire input[type="text"] { height: 36px; border: #dedede solid 1px; border-radius: 3px; width:160px; line-height: 30px; padding: 5px; color: #666; margin-right: 5px; }
    .inquire .submit-btn { width: 80px;  border-radius: 3px; border: 0; padding: 5px 10px; font-size: 12px; color: #fff;  }
    .inquire .submit-btn span { font-size: 14px; }

	.imgov { overflow: hidden; }
}

@media (max-width: 415px) {
	
}

@media (max-width: 320px) {
	 ul.cateProlist li { width:47%; margin-top: 10px;}
}

 
	.pagestyle ul { 
		display: flex; justify-content: center; align-items: center; margin-bottom: 50px;
	}
	.pagestyle li { width: 28px; height: 28px; margin: 2px; line-height: 26px; border: #eee solid 1px; text-align: center; }
	.pagestyle li.active,
	.pagestyle li:hover { background-color: var(--hcolor); color: #fff; cursor: pointer; border: var(--hcolor) solid 1px; }
/***********************************************************************************
 *	- college
 ***********************************************************************************/ 
 	.page-postion { margin-top:20px; }
 	.page-postion i { font-size: 10px; }
 	.pageNav { 
		display: flex; justify-content: center; align-items: center; margin:20px 0 40px; border-bottom: #dedede solid 1px; height:40px;
	}
	.pageNav li { text-align: center; height:40px; line-height: 40px; padding: 0 40px; background-color: #333; }
	.pageNav li a { color: #fff; cursor: pointer; }
	.pageNav li.active,
	.pageNav li:hover { background-color: var(--hcolor);color: #fff; cursor: pointer; }

 
	
/***********************************************************************************
 *	- shownews
 ***********************************************************************************/ 
 	.shownewspage h3 { font-weight: 400; }
 	.newscontent { padding-bottom: 50px; }
 	.news-icon { display: flex; color: #999; margin: 5px 0 10px; }
 	.news-icon span { display: flex; font-size: 10px; margin-right: 20px; font-weight: 200; color: #999; }


 	.showsolution1 { display: flex; justify-content: flex-start; align-items: stretch; }
 	.solution-text { padding-bottom: 20px; }
 	.showsolution1 h3 { position: relative; padding-left: 50px; font-weight: 400; min-width: 260px; }
 	.showsolution1 h3:before {
		content:"";
		color: #333; background-color: #333;
		position: absolute; top: 14px; left: 0; width: 40px; height: 4px; border-radius: 2px; 
		 
	}

	.solution-prolist { display: flex; flex-direction: column; margin: 25px 0 10px; }
	.solution-prolist .thumb {width: 100%;  }
	.solution-prolist .thumb img { width: 100%; }
	.solution-prolist .protext { padding: 10px 0 15px; font-size: 14px; }
	.solution-prolist .protext h3 { margin-bottom: 15px; }
	.solution-prolist .protext p { margin-bottom: 15px; line-height: 21px; }
	.solution-prolist .protext .lines { width: 40px; height: 4px; border-radius: 2px; background-color: #333; }
	.solution-prolist .protext .desctitle { font-size: 14px; color: #333; }
	.solution-prolist .protext .link { display: flex; margin-top:20px; }
	.solution-prolist .protext .link a { display: flex;  }
	.solution-prolist .protext .link a { display: flex; color: #555; padding: 3px 15px; border: #666 solid 1px;  }
	.solution-prolist .protext .link a { margin-right: 15px;  }
	.solution-prolist .protext .link a:hover { background-color: var(--hcolor); border: var(--hcolor) solid 1px; color: #fff;
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2); }


	.solution-prolist:hover { box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.1); }

	 
	.lxewm { display: flex; width: 18%; text-align: center; justify-content: center; align-content: center; flex-direction: column; margin-top: 15px; }
	.lxewm img { max-width: 180px; }
	.lxewm p { text-align: center; }

	.feedback { width: 80%;}
	 
	.feedback-form ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: center; }
	.feedback-form ul li { width: 50%; margin-bottom: 15px; }
	.feedback-form ul li:last-child { width: 100%; }
	.feedback-form h4 { font-size: 18px; margin-bottom: 15px; }
	.feedback-form h4 span { font-size: 16px; }
	.feedback-form .input { border:#dedede solid 1px; -webkit-appearance:none; padding: 7px; height: 36px; width: 90%; border-radius: 2px; }
	.feedback-form .textarea { width: 95%; border-radius: 2px; -webkit-appearance:none; }
	.feedback-form  .feed-submit { margin:0 0 15px; display: flex; align-content: center; }
	.feedback-form  .feed-submit .submit-btn { background: #dca47a; border-radius: 2px; border: none; padding: 3px 20px; font-size: 12px; color: #fff; display: flex; align-items: center; justify-content: center; }
	.feedback-form  .feed-submit .submit-btn:hover { background: var(--hcolor); }
	.feed-submit .feed-msg { margin:5px 0 0 20px; display: none; font-size: 14px; color: #ff0000; }
	.feed-submit .feed-msg.green { color: #4ca913 }
	.feed-submit .submit-btn span,.feed-submit .feed-msg span { font-size: 16px; }
	 
	.feedflex { display: flex; margin: 40px; }
	.inquire { padding: 20px; }
	.inform { justify-content: center; align-items: center;
	}
	.inform .input { width: 230px; border-radius: 2px; -webkit-appearance:none;
	}
	.inform button { 
		background-color: #333; border-radius: 2px; display: flex; align-items: center; justify-content: center; color: #fff; border: 0; margin-left: 10px; height: 36px; padding: 0 25px;
	}
	.inform button:hover {
		background-color: var(--hcolor);
	}

	
	#p41img, #p42img, #p43img, #p44img, #p31img, #p32img, #p21img, #p22img { display: block; }
	#p41mimg, #p42mimg, #p43mimg, #p44mimg, #p31mimg, #p32mimg, #p21mimg, #p22mimg { display: none; }
 

	 
@media (max-width: 767px) {
	.white { color: #fff; }
	#p41img, #p42img, #p43img, #p44img, #p31img, #p32img, #p21img, #p22img { display: none; }
	#p41mimg, #p42mimg, #p43mimg, #p44mimg, #p31mimg, #p32mimg, #p21mimg, #p22mimg { display: block; }
	

	.pageNav { 
		 margin:0;  padding-bottom: 0; justify-content: space-around; align-items: stretch;
	}
	.pageNav li { width: 100%; height: 45px; padding: 0; line-height: 45px; font-size: 14px; }
	.showsolution1 { display: flex; flex-direction: column; padding:15px; }
	.showsolution1 h3 { padding-left: 30px; font-weight: 400; font-size: 20px;}
 	.showsolution1 h3:before { width: 20px; }

 	.solution-prolist { flex-direction: column; margin: 15px; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1); }
	.solution-prolist .protext { padding-top: 15px;  }
	.solution-prolist .protext h3 { margin-bottom: 10px; font-size: 20px; }
	.solution-prolist .protext p { margin-bottom: 10px; line-height: 20px; font-size: 12px; }
	.solution-prolist .protext .desctitle { font-size: 14px; color: #333; }
	.solution-prolist .protext .link { margin-top:20px; padding-bottom: 10px; }

	.newstitle3,
	ul.college-rlist,
	ul.college-btmlist { margin-left:-15px; margin-right:-15px; }
	ul.college-btmlist li { width: 100%; }
	ul.college-rlist li { padding: 8px 0; }
	ul.college-rlist li a { font-size: 14px; }

	.cglist  { 
		 padding:15px; margin-bottom: 15px; background-color: #f4f4f4;
	}
	.cglist .download  { 
		margin-left: 20px; display: flex; align-items: center; 
	}
	.cglist .download span { font-size: 28px; }
	.cglist .thumb  { 
		max-width: 260px; flex: 2; margin-right: 15px; overflow: hidden; display: none;
	}
	 
	.cglist .cgContent { line-height: 21px; flex: 3; }
	.cglist .cgContent h5 {flex-wrap: wrap; }
	 
 	.p50 { padding:25px; }
	.subcompany { 
		margin: -15px;
	}

	.feedflex { padding: 15px; margin:20px; flex-direction: column; }
	.feedback { width: 100%; margin-right: 0; }
	.cline { width: 100%; border-left: none; text-align: center; }
 
	.feedback-form ul li { width: 100%; margin-bottom: 15px; }
 
	.feedback-form .input { width: 100%; height: 45px; line-height: 45px; font-size: 14px;  }
	.feedback-form .textarea { width: 100%;  height: 70px; font-size: 14px;  }
 
	.feedback-form  .feed-submit .submit-btn { width: 100%; height: 45px; font-size: 14px;}
	.inform .input { height: 45px; line-height: 45px; font-size: 14px; }
	.inform button {  height: 45px; line-height: 45px; font-size: 14px; }
 
 	.page-postion { margin:10px; }

 	.lxewm { width: 100%; display: flex; justify-content: center; align-content: center; }
	.lxewm img { max-width: 180px; margin: 0 auto; }
	.lxewm p { text-align: center; }

    .systempage .systop1 h3 {
			width: 100%;
	}
	 
}

@media (max-width: 414px) {
	.feedflex { padding: 15px; flex-direction: column; }
	 .solution-prolist .protext .link a { padding: 3px 10px; }
}
@media (max-width: 320px) {
	 .solution-prolist .protext .link a { padding: 3px 5px; margin-right: 10px; }
}

/* Systempage mobile responsive styles */
@media (max-width: 767px) {
	.systempage .cncontent4 {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
	}
	.systempage .cncontent4 .left-addresses {
		width: 100%;
		grid-template-columns: 1fr;
		gap: 10px;
		margin-bottom: 15px;
		text-align: left;
	}
	.systempage .cncontent4 .right-address {
		width: 100%;
		text-align: left;
	}
	.systempage .cncontent4 .left-addresses .cntitle,
	.systempage .cncontent4 .right-address .cntitle {
		font-size: 12px;
	}
	.systempage .cncontent4 .left-addresses .entitle,
	.systempage .cncontent4 .right-address .entitle {
		font-size: 10px;
		margin-left: 22px;
	}
	 
}