@charset "utf-8";
/* CSS Document */
*,*:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body{ margin:0px; padding:0px; font-size:12px;font-family:"微软雅黑","黑体";color:#898989;line-height:1; background:#FFF;}
ul,li,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,ol,form,input{ margin:0px; padding:0px;}
input,textarea { font-family: "微软雅黑"; border: none; outline: none; background: none; }
ul,li{ list-style:none}
img{border:0px; padding:0px; display: block;}
a{ color:#5c5c5c; text-decoration:none}

h2,h3,h4,strong { font-weight: normal; }
em,i { font-style: normal; }
.w1400{ width: 1400px; margin: 0 auto;}
.w1200{ width: 1200px; margin: 0 auto;}
.top{ width: 100%; height: 80px; background: #4d4d4d;}
.topBox{ height: 80px; }
.top .logo{ float: left; height: 80px; line-height: 80px;}
.top .logo img{ display: inline-block; vertical-align: middle;}
.top .language{ float: right;}
.top .language select{ outline: none; height: 80px; border:0; background: none; color: #fff;}
.top .language select:hover{ color: #000;}
.top .nav{ float: right; margin-right: 48px;}
.top .nav ul{ float: right;}
.top .nav ul li{ float: left; margin-left: 42px; position: relative; line-height: 80px;}
.top .nav ul li a.enter{ font-size: 16px; color: #fff; transition: 0.5s;}
.top .nav ul li:after{ display: block; position: absolute; content: ''; left: 50%; transform: translateX(-50%); top: 64px; width: 0; height: 2px; display: block; background: #fff; transition: 0.5s;}
.top .nav ul li:hover:after{ width: 16px;}
.top .nav ul li:hover dl{ display: block;}
.top .nav ul li dl{ display: none; width: 140px; position: absolute; top: 75px; background: #4d4d4d; z-index: 99; padding: 15px 0; left: 50%; transform: translateX(-50%); border-bottom:10px; border-radius:10px ;}
.top .nav ul li dl dd{ width: 100%; height: 40px; line-height: 40px; color: #333; text-align: center;}
.top .nav ul li dl dd a{ font-size: 14px; color: #fff;}
.top .nav ul li dl dd:hover{ background: #fff;}
.top .nav ul li dl dd:hover a{ color: #333;}

.top.index .nav ul li dl{ background: #fff;}
.top.index .nav ul li dl dd:hover{ background: #333;}
.top.index  .nav ul li dl dd:hover a{ color: #fff;}
.banner{ width: 100%; position:relative;}
.banner img{ display: block; width: 100%; height: auto;}
.banner .swiper-container{ width: 100%; overflow: hidden;}
.banner .swiper-pagination{ position: absolute; bottom: -26px; width: 100%; height: 3px;}
.banner .swiper-pagination span{ width: 3px; height: 3px; margin: 0 3px; border-radius:2px; transition: 0.5s;}
.banner .swiper-button-next{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: url(../images/arrow_05.png) center center no-repeat rgba(0,0,0,0.7);  width: 40px; height: 50px;}
.banner .swiper-button-prev{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: url(../images/arrow_03.png) center center no-repeat rgba(0,0,0,0.7); width: 40px; height: 50px;}
.banner .swiper-pagination span.swiper-pagination-bullet-active{ width: 18px;}
.aboutContainer{ width: 100%;}
.aboutContainer .title{ position: relative; padding: 100px 0 100px 15px; box-sizing: border-box;}
.aboutContainer .title span{ display: block; position: absolute; left: 0; height: calc(100% - 205px); top: 50%; transform: translateY(-50%); width: 6px; background: #7841e5;}
.aboutContainer .title h2{ font-size: 32px; font-weight: bold; line-height: 32px; color: #000;}
.aboutContainer .title p{ font-size: 10px; color: #333;}
.aboutContainer .layer1{ position: relative; width: 100%; padding: 75px 0;}
.aboutContainer .layer1 .bg{background: #f7f7f7; width: 64%; height: 100%; position: absolute; left: 0; top: 0;}
.aboutContainer .layer1Box{ position: relative; z-index: 2; overflow: hidden;}
.aboutContainer .layer1Box .icon{ float: right; width: 640px;}
.aboutContainer .layer1Box .text{ top: 0; width: calc(100% - 640px); float: left; position: relative; height: 100%; position: absolute; left: 0;}
.aboutContainer .layer1Box .icon img{ width: 100%; height: auto;}
.aboutContainer .layer1Box .text .nr{ position: absolute; width: 100%; padding-right: 39px; top: 50%; transform: translateY(-50%); box-sizing: border-box; left: 0;}
.aboutContainer .layer1Box .text h2{ font-size: 22px; color: #333; margin-bottom: 20px;}
.aboutContainer .layer1Box .text h2 span{ color: #7841e5; display: inline-block; margin-right: 10px;}
.aboutContainer .layer1Box .text p{ font-size: 16px; color: #333; line-height: 30px;}
.aboutContainer .layer1.Rt{ margin: 0; padding: 0 0 75px 0;}
.aboutContainer .layer1.Rt .icon{ float: left; width: 750px;}
.aboutContainer .layer1.Rt .text{ right: 0; left: auto; width: calc(100% - 750px); background: #f7f7f7; padding: 0;}
.aboutContainer .layer1.Rt .text .nr{ padding: 0 46px;}
.aboutContainer .layer1.Rt .text h3{ font-size: 28px; color: #000; line-height: 40px;}

.footer{ background: #4d4d4d;}
.footer .footerTop{ padding: 85px 0 35px 0; border-bottom: 1px solid #a0a0a0; position: relative;}
.footer .footerTop img{ position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.footer .footerTop p{ width: 240px; float: left; font-size: 20px; color: #fff;}
.footer .footerBottom{ overflow: hidden; padding-top: 35px;}
.footer .footerBottom ul{ width: 240px; float: left;}
.footer .footerBottom ul li{ margin-bottom: 25px;}
.footer .footerBottom ul li a{ font-size: 15px; color: #fff; font-weight: 100;}
.footer .footerBottom .text{ float: left;}
.footer .footerBottom .text p{font-size: 15px; color: #fff; font-weight: 100; margin-bottom: 25px;}
.footer .footerBottom .code{ width: 80px; float: right;}
.footer .footerBottom .code p{ text-align: center; padding-top: 10px; color: #fff; font-size: 12px; color: #fff;}
.footer .footerBottom .code img{ display: block; width: 100%; height: auto;}

.footer .copyRight{ width: 100%; height: 80px; line-height: 80px; text-align: right; font-size: 12px; color: #fff;}

.AppTop{ display: none;}
.sideBar{ display: none;}

.aboutContainer.cantact .layer1Box .text p{ line-height: 24px; font-size: 14px;}
.map{ margin-top: 65px; background: url(../images/cantact_09.jpg) center center no-repeat; height: 500px;}
.map .mapBox{ overflow: hidden;}
.map .mapBox h2{ line-height: 165px; font-size: 26px; color: #333;}
.map .mapBox p{ font-size: 16px; color: #333; line-height: 26px;}
.map .mapBox .code{ margin-top: 25px;}
.map .mapBox .code span{ display: block; line-height: 45px; color: #333;}

.aboutContainer .layer2{ margin: 65px 0; width: 100%; background: url(../images/about2_08.jpg) center center no-repeat; height: 365px; position: relative;}
.aboutContainer .layer2 .text{ width: 750px; height: 250px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: #ebf2fc; padding-left: 80px; box-sizing: border-box;}
.aboutContainer .layer2 .text h2{ padding-top: 90px; position: relative; font-size: 22px; color: #333; margin-bottom: 25px;}
.aboutContainer .layer2 .text p{ font-size: 16px; color: #333;}
.aboutContainer .layer2 .text h2 span{ color: #7841e5; font-weight: bold; display: block; position: absolute; left: -16px; line-height: 22px;}
.aboutContainer .layer3{ width: 100%; padding: 90px 0; background: #f7f7f7;}
.aboutContainer .layer3 .layer3Box{ padding-left: 100px; box-sizing: border-box;}
.aboutContainer .layer3 .bt{ font-size: 22px; color: #333; width: 100%; height: 48px; line-height: 48px;}
.aboutContainer .layer3 .bt span{ display: inline-block; margin-right: 10px; font-weight: bold; color: #7841e5;}
.aboutContainer .layer3 ul{ overflow: hidden;}
.aboutContainer .layer3 ul li{float: left; width: 23%; margin-right: 2%;}
.aboutContainer .layer3 ul li:last-child{ margin-right: 0;}
.aboutContainer .layer3 ul li h2{ height: 54px; line-height: 54px; font-size: 18px; color: #333;}
.aboutContainer .layer3 ul li p{ padding-bottom: 35px; font-size: 16px; color: #333;line-height: normal;}
.aboutContainer .layer4 ul li{ overflow: hidden;}
.aboutContainer .layer4 ul li .icon{ float: left; width: 50%; height: 300px;}
.aboutContainer .layer4 ul li .icon img{ display: block; width: 100%; height: 100%;}
.aboutContainer .layer4 ul li .text{ width: 50%; float: left; height: 300px; padding: 8px 24px 0 40px; box-sizing: border-box; height: 300px; background: #f7f7f7;}
.aboutContainer .layer4 ul li .text h2{ font-size: 20px; color: #333; height: 50px; line-height: 50px;}
.aboutContainer .layer4 ul li .text h2 span{ font-weight: bold; display: inline-block; margin-right: 10px; color: #7841e5;}
.aboutContainer .layer4 ul li .text p{ width: 100%; font-size: 16px; color: #333; line-height: 26px;}
.aboutContainer .layer4 ul li:nth-child(2n) .icon{ float: right;}
.aboutContainer .layer4 ul li:nth-child(2n) .text{ float: left;}

.aboutContainer .new ul{ overflow: hidden;}
.aboutContainer .new ul li{ margin-bottom: 35px; width: 32%; float: left; margin-right: 2%; overflow: hidden; border-radius:12px ;}
.aboutContainer .new ul li:nth-child(3n){ margin-right: 0;}
.aboutContainer .new ul li .icon{ width: 100%; height: 285px;}
.aboutContainer .new ul li .icon img{ display: block; width: 100%; height: 100%;}
.aboutContainer .new ul li .text{ transition: 0.5s; background: #f0f0f0; height: 285px; width: 100%; padding: 35px 20px 0 20px; box-sizing: border-box; position: relative;}
.aboutContainer .new ul li .text h2{ font-size: 24px; line-height: 32px; color: #454545; margin-bottom: 30px;}
.aboutContainer .new ul li .text p{line-height: 26px; font-size: 16px; color: #414141; margin-bottom: 40px; height: 78px; overflow: hidden;}
.aboutContainer .new ul li .text span{ font-size: 12px; color: #414141; position: absolute; bottom: 45px}
.aboutContainer .new ul li:hover .text{ background: #f8f5fe;}
.aboutContainer .new ul li:hover .text h2{ color: #7841e5;}
.aboutContainer .new ul li:hover .text p{ color: #333;}
.pageMain{ width: 100%; text-align: center; margin: 30px 0 60px 0;}
.pageMain dd{ display: inline-block; margin: 0 4px; width: 22px; height: 22px; border: 1px solid #b8b8b8;}
.pageMain dd a{ display: block; width: 100%; height: 100%; line-height: 20px; font-size: 12px; color: #b8b8b8;}
.pageMain dd.on{ border: 1px solid #7841e5;}
.pageMain dd.on a{ background: #7841e5; color: #fff;}
.Health{ padding-bottom: 100px; border-top:1px solid #dcdcdc ; overflow: hidden;}
.HealthBox{ width: 100%; padding: 40px 0; border-bottom: 1px solid #dcdcdc;} 
.HealthBox h2{ padding: 0 0 30px 0; font-size: 24px; color: #7841e5;}
.HealthBox p{ color: #1a1a1a; font-size: 16px; color: #1a1a1a; line-height: 30px;}
.aboutContainer.qa .layer1{ margin-bottom: 64px;}
.aboutContainer.qa .layer1:nth-child(2n) .icon{ width: 640px; float: left;}
.aboutContainer.qa .layer1:nth-child(2n) .text{ padding: 0 0 0 100px; left: auto; right: 0;}
.aboutContainer.qa .layer1:nth-child(2n) .text .nr{ padding: 0 0 0 100px;}
.aboutContainer.qa .layer1:nth-child(2n) .bg{ right: 0; left: auto;}

.Quality{ margin-bottom: 95px; width: 100%; background: #f7f7f7; padding-bottom: 60px;}
.Quality .bt{ text-align: center; height: 140px; line-height: 140px; font-size: 24px; color: #333;}
.Quality .bt span{ font-weight: bold; color: #7841e5;}
.Quality ul{ text-align: center;}
.Quality ul li{ display: inline-block; margin: 0 40px;}
.Quality ul li img{ display: block; margin: 0 auto;}
.Quality ul li p{ text-align: center; font-size: 16px; color: #333; padding-top: 18px;}

.top.index{ z-index: 99; background: none; position: absolute; top: 0; left: 0;}
.top.index .nav ul li a{ color: #333;}
.top.index .nav ul li:after{ background: #7841e5;} 
.top.index .language select{ color: #333;}
.banner.index .swiper-pagination{ bottom: 30px;}

.indexContainer{ width: 100%; padding-top: 100px;}
.indexContainer ul li{ margin-bottom: 38px; position: relative;}
.indexContainer ul li img{ display: block; width: 100%; height: auto;}
.indexContainer ul li .nr{ width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding: 0 120px; box-sizing: border-box;}
.indexContainer ul li .nr h2{ font-size: 30px; font-weight: bold; color: #fff; margin-bottom: 15px;}
.indexContainer ul li .nr p{ color: #fff; font-size: 18px; padding-bottom: 100px;}
.indexContainer ul li .nr a{ border-radius:6px ; display: block; width: 126px; height: 38px; border: 1px solid #fff; text-align: center; line-height: 36px; color: #fff; font-size: 16px;}

.product{ padding-bottom: 100px;}
.product .icon{ width: 100%; position: relative;}
.product .icon .swiper-container{ width: 100%;}
.product .icon img{ display: block; width: 100%; height: auto;}
.product .icon .swiper-button-next{ margin: 0; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: url(../images/arrow_05.png) center center no-repeat rgba(0,0,0,0.7);  width: 40px; height: 50px;}
.product .icon .swiper-button-prev{ margin: 0; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background: url(../images/arrow_03.png) center center no-repeat rgba(0,0,0,0.7); width: 40px; height: 50px;}
.product .text{ margin-top: 65px; width: 100%; background: #f7f7f7; height: 295px; padding: 70px 120px 0 120px; box-sizing: border-box; }
.product .text h2{ height: 24px; margin-bottom: 20px; line-height: 24px; font-size: 24px; color: #333}
.product .text h2 span{ font-weight: bold; margin-right: 10px; display: inline-block; color: #7841e5;}
.product .text p{ font-size: 16px; color: #333; line-height: 30px;}

.details{ width: 1000px; margin: 0 auto; padding: 50px 0;}
.details .nr{ width: 100%; background: #f7f7f7; padding: 0 100px 45px 100px; box-sizing: border-box;}
.details .nr .bt h2{ text-align: center; line-height: 150px; font-size: 28px; color: #333;}
.details .nr .bt p{ padding-bottom: 45px; text-align: center; font-size: 16px; color: #333;}
.details .NrBox{ width: 100%;}
.details .NrBox p{ padding-bottom: 35px; line-height: 26px; font-size: 16px; color: #333;}
.details .NrBox img{ display: block; width: 100%; height: auto; margin-bottom: 35px; }
.details .NrBox ul{ height: 50px; border-top:1px solid #b3b3b3 ; border-bottom:1px solid #b3b3b3 ; overflow: hidden;}
.details .NrBox ul li{ float: left; width: 50%; line-height: 50px;}
.details .NrBox ul li a{ font-size: 16px; color: #333;}
.details .NrBox ul li:last-child{ text-align: right;}





@media (max-width:1000px) {
	body{ padding-top: 80px;}
	.w1200{ width: 100%;}
	.w1400{ width: 100%;}
	.top{ display: none;}
	.AppTop{ box-shadow: 0 0 10px rgba(0,0,0,0.1); display: block; z-index: 99; background: #333; width: 100%; height: 80px; position: fixed; top: 0; left: 0;}
	.AppTop .logo{ padding-left: 20px; height: 80px; line-height: 80px;}
	.AppTop .logo img{ display: inline-block; vertical-align: middle; height: 40%; width: auto;}
	.sideClick{ position: absolute; width: 28px; height: 22px; right: 15px; top: 50%; transform: translateY(-50%);}
	.sideClick span{ width: 100%; height: 3px; border-radius:2px; background: #fff; transition: 0.5s; position: absolute;}
	.sideClick span:nth-child(1){ top: 0;}
	.sideClick span:nth-child(2){ top: 50%; transform: translateY(-50%);}
	.sideClick span:nth-child(3){ bottom: 0;}
	.sideClick.on span:nth-child(1){ top: 50%; transform: translateY(-50%) rotate(45deg);}
	.sideClick.on span:nth-child(2){ width: 0;}
	.sideClick.on span:nth-child(3){  top: 50%; transform: translateY(-50%) rotate(-45deg);}
	.sideBar{ display: block; left: -100%; transition: 0.5s; z-index: 100; width: 70%; height: 100vh; box-shadow: 0 0 10px rgba(0,0,0,0.1); position: fixed; top: 0; background: #333;}
	.sideBar .logo{ padding: 40px 0;}
	.sideBar .logo img{ width: 60%; height: auto; display: block; margin: 0 auto;}
	.sideBar ul{ width: 60%; margin: 0 auto;}
	.sideBar ul li{ line-height: 32px; font-size: 14px;}
	.sideBar ul li a{ color: #fff;}
	.serach ul li .code{ width: 40%; height: auto;}
	.serach ul li .code img{ display: block;}
	
	.sideBar ul li dl{ display: none;}
	.sideBar ul li:hover dl{ display: block;}
	.sideBar ul li dl dd{ text-indent: 25px;}
	.aboutContainer{ padding: 0 15px; box-sizing: border-box;}
	.aboutContainer .title{ margin: 30px auto; padding: 0 0 0 30px;}
	.aboutContainer .title span{ height: 100%;}
	.aboutContainer .layer1Box .icon{ width: 100%;}
	.aboutContainer .layer1{ padding: 0;}
	.aboutContainer .layer1Box .icon img{ width: 100%; height: auto;}
	.aboutContainer .layer1Box .text{ position: relative; left: auto; top: auto; width: 100%; transform: none;}
	.aboutContainer .layer1Box .text .nr{ padding: 0; position: relative; left: auto; top: auto; transform: none; padding-top: 30px;}
	.aboutContainer .layer1.Rt .icon{ width: 100%; height: auto;}
	.aboutContainer .layer1.Rt .icon img{ display: block; width: 100%; height: auto;}
	.aboutContainer .layer1.Rt .text{ position: relative; width: 100%; height: auto;}
	.aboutContainer .layer1.Rt .text h3{ font-size: 16px; padding: 30px 0;}
	.footer .footerTop{ width: 100%; padding:20px 0;}
	.footer .footerTop p{ display: none;}
	.footer .footerTop img{ display: block; margin: 0 auto; position: relative; left: auto; top: auto; transform: none;}
	.footer .footerBottom ul{ display: none;}
	.footer .footerBottom .text{ display: none;}
	.footer .footerBottom .code{ float: inherit; margin: 0 auto;}
	.footer .copyRight{ text-align: center;}
	.map .mapBox{ padding: 0 15px; box-sizing: border-box;}
	.aboutContainer .layer2 .text{ width: 100%;}
	.aboutContainer .layer3{ padding: 30px 0;}
	.aboutContainer .layer3 .layer3Box{ padding: 0;}
	.aboutContainer .layer3 ul li{ width: 100%; margin: 0 0 20px 0;}
	.aboutContainer .layer4 ul li .icon{ width: 100%; height: auto;}
	.aboutContainer .layer4 ul li .icon img{ display: block; width: 100%; height: auto;}
	.aboutContainer .layer4 ul li .text{ width: 100%; padding: 30px; box-sizing: border-box;}
	
	.banner .swiper-button-next{ display: none;}
	.banner .swiper-button-prev{ display: none}
	.banner .swiper-pagination{ bottom: 15px;}
	.aboutContainer .new ul li{ width: 100%; height: auto; margin: 0 0 15px 0;}
	.aboutContainer.qa .layer1:nth-child(2n) .text{ width: 100%; padding: 0;}
	.aboutContainer.qa .layer1:nth-child(2n) .text .nr{ width: 100%; padding: 0;}
	.Quality ul li{ width: 100%; margin: 0 0 25px 0;}
	.aboutContainer.qa .layer1:nth-child(2n) .icon{ width: 100%; margin-bottom: 25px;}
	.aboutContainer.qa .layer1 .bg{ width: 100%;}
	.indexContainer ul li{ overflow: hidden; height: 200px;}
	.indexContainer ul li img{ height: 100%; width: auto;}
	.indexContainer ul li .nr{ padding: 0 20px;}
	.indexContainer ul li .nr p{ padding-bottom: 20px;}
	.indexContainer{ padding: 20px 0;}
	.indexContainer ul li .nr h2{ font-size: 22px;}
	.indexContainer ul li .nr p{ font-size: 14px;}
	.indexContainer ul li .nr a{ width: 100px; height: 28px; font-size: 12px; line-height: 28px;}
	.product .text{ padding:30px 20px; margin-top: 20px; height: auto;}
	.details{ width: 100%; padding: 0;}
	.details .nr{ padding: 0 15px 30px 15px;}
	.details .nr .bt h2{ font-size: 24px; line-height: 32px; padding: 20px 0;}
	.details .NrBox ul{ height: auto;}
	.details .NrBox ul li{ width: 100%;}
	.details .NrBox ul li:last-child{ text-align: left;}
	
}


 .loading,
 .loading > div {
	 position: relative;
	 box-sizing: border-box;
 }

.loading {
	display: none;
	font-size: 0;
	color: #000;
}

.loading.la-dark {
	color: #333;
}

.loading > div {
	display: inline-block;
	float: none;
	background-color: currentColor;
	border: 0 solid currentColor;
}

.loading {
	width: 54px;
	height: 18px;
	margin-left: 47.9%;
	margin-top: -65px;
	margin-bottom: 34px;
}

.loading > div:nth-child(1) {
	animation-delay: -200ms;
}

.loading > div:nth-child(2) {
	animation-delay: -100ms;
}

.loading > div:nth-child(3) {
	animation-delay: 0ms;
}

.loading > div {
	width: 10px;
	height: 10px;
	margin: 4px;
	border-radius: 100%;
	animation: ball-pulse 1s ease infinite;
}

.loading.la-sm {
	width: 26px;
	height: 8px;
}

.loading.la-sm > div {
	width: 4px;
	height: 4px;
	margin: 2px;
}

.loading.la-2x {
	width: 108px;
	height: 36px;
}

.loading.la-2x > div {
	width: 20px;
	height: 20px;
	margin: 8px;
}

.loading.la-3x {
	width: 162px;
	height: 54px;
}

.loading.la-3x > div {
	width: 30px;
	height: 30px;
	margin: 12px;
}

@keyframes ball-pulse {
	0%,
	60%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	30% {
		opacity: 0.1;
		transform: scale(0.01);
	}
}


.no-more{
	display: none;
	font-size: 0.9rem;
	margin-left: 47.9%;
	margin-top: -65px;
	margin-bottom: 34px;
}
.load-more{
	display: block;
	font-size: 0.9rem;
	margin-left: 47.9%;
	margin-top: -65px;
	margin-bottom: 34px;
}