/*898B8D*/
center {
	font-size: .16rem;
	margin-bottom: .8rem;
}
.top-banner {
	margin-top: 0;
	padding: 0 12.5%;
	box-sizing: border-box;
	height: 480px;
	background-color: rgba(0, 0, 0, .25);
	position: relative;
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.about-banner {
	background-image: url(../images/banner-about.jpg);
}
.news-banner {
	background-image: url(../images/banner-news.jpg);
}
.banner-product {
	background-image: url(../images/banner-product.jpg);
}
.banner-quality {
	background-image: url(../images/banner-quality.jpg);
}
.contact-banner {
	background-image: url(../images/banner-contact.jpg);
}
.top-banner .top-index {
	display: inline-block;
	position: absolute;
	top: 50%; right: 16%;
	text-align: left;
}
.top-banner .banner {
	top: 40%;
	position: relative;
	transform: translateY(-50%);
	text-align: center;
	color: var(--mainColor);
	color: var(--mainColor);
	text-shadow: 1px 1px #000;
	font-size: .45rem;
	letter-spacing: 1px;
/*	mix-blend-mode: overlay;*/
/*	filter: contrast(12);*/
	font-weight: bold;
}
/*面包屑*/
.nav {
	font-size: .14rem;
	text-align: center;
	height: .5rem;
	line-height: .5rem;
	color: #fff;
	background-color: var(--mainColor);
	position: relative;
	z-index: 1;
}
.nav > span {
	margin: 0 auto;
	width: 12.8rem;
	display: block;
	text-align: left;
}
.nav a {
	color: #fff;
}
.nav .iconfont {
	font-size: .14rem;
}
.main {
	width: 12.8rem;
	margin: 0 auto;
}
/*about*/
.introduction {
	margin-top: .6rem;
	display: flex;
	justify-content: space-between;
	width: 12.8rem;
	max-width: 100%;
}
.introduction .left {
	width: 52%;
	padding: 2% 6% 2% 0;
	box-sizing: border-box;
}
.introduction h3 {
	font-size: .36rem;
	font-weight: bold;
	text-transform: uppercase;
	position: relative;
	line-height: 1;
	color: var(--mainColor);
}
.introduction .subtitle {
	margin: .3rem 0;
	font-size: .2rem;
}
.introduction p {
	margin-bottom: .2rem;
	font-size: .16rem;
	color: #5a5a5a;
	line-height: 1.5;
}
.introduction .img {
	width: 43%;
}
.culture {
	padding: .5rem 0;
	margin-top: .67rem;
	width: 100%;
	font-size: 0;
}
.culture .content {
	width: 50%;
	display: inline-block;
}
.culture .title {
	margin-bottom: .5rem;
	font-size: .36rem;
	font-family: arial;
	text-transform: uppercase;
	color: var(--mainColor);
}
.culture p {
	margin: 0 auto;
	display: block;
	text-align: center;
	font-size: .16rem;
	max-width: 9rem;
}
.culture ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	box-sizing: border-box;
}
.culture ul li {
	padding: .1rem .5rem .1rem 0;
	box-sizing: border-box;
	width: 50%; height: 2rem;
	font-size: .16rem;
	position: relative;
}
.culture .culture-title {
	margin: .15rem 0;
	font-size: .2rem;
}
.icon {
	width: .3rem; height: .3rem;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}
.culture .img {
	width: 50%; height: 4.5rem;
	display: inline-block;
	background-color: #39c5bb;
	vertical-align: top;
}
.certificate {
	margin: 1rem 0;
	padding: .8rem 0;
	background-color: #f4f4f4;
}
.certificate .main {
	position: relative;	
}
.certificate p {
	margin: .2rem auto .34rem;
	font-size: .16rem;
	width: 9rem;
	text-align: center;
	display: block;
}
.certificate .title {
	font-size: .3rem;
	font-family: arial;
	text-transform: uppercase;
	text-align: center;
	width: 100%;
	color: var(--mainColor);
}
.certificate .iconfont {
	position: absolute;
	top: 50%; right: -4%;
	width: .4rem; height: 1rem;
	line-height: 1rem;
	text-align: center;
	background-color: var(--mainColor);
	color: #fff;
	font-size: .24rem;
	cursor: pointer;
	border: 2px solid transparent;
}
.certificate .icon-back {
	left: -4%;
}
.certificate .iconfont:hover {
	background-color: #3a68c3;
}
.certificate img {
	max-width: 100%;
}

.commonNav .list {
	display: flex;
	justify-content: center;
	padding: .66rem 0;
}
.commonNav .list li {
	margin: .1rem .1rem;
	width: auto;
	padding: 0 .16rem;
	line-height: .4rem;
	border-radius: .06rem;
	text-align: center;
	font-size: .14rem;
	font-weight: bold;
	border: 2px solid;
	cursor: pointer;
	color: #5a5a5a;
	text-transform: uppercase;
}
.commonNav .list li:hover,
.commonNav .list li.cur {
	color: #fff;
	background-color: var(--mainColor);
}
.commonNav .list li:hover a,
.commonNav .list li.cur a {
	/*color: var(--mainColor);*/
	color: #fff;
}

.newsList {
	margin: 0 50px;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.newsList li {
	width: 32%;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
	margin: .15rem 0;
	position: relative;
}
.newsList .img {
	width: 100%; height: 100%;
	overflow: hidden;
	position: relative;
}
.newsList .img img {
	width: 100%;
	position: relative;
	object-fit: contain;
	opacity: .9;
}
.newsList .news-name {
	margin: .12rem 0;
	font-size: .2rem;
	font-weight: bold;
	display: inline-block;
	color: #333;
	display: block;
	width: 100%; height: .6rem;
	height: .36rem;
	line-height: .36rem;
	overflow: hidden;
	box-sizing: border-box;
	transition: all 0.3s ease-in-out;
}
.newsList .transition {
	padding: .25rem .25rem .35rem;
	box-sizing: border-box;
	width: 100%; height: 2.4rem;
	border: 1px solid #ddd;
	transition: border-color .2s ease-in-out;
}
.newsList li:hover .transition {
	border-color: #5a5a5a;
}
.newsList dd {
	color: #333;
}
.newsList .date {
	margin-bottom: .15rem;
	font-size: .14rem;
	color: #333;
}
.newsList .date::before {
	content: '';
	position: absolute;
	top: -.26rem; left: 0;
	width: .8rem; height: 1px;
	border-top: 2px solid var(--mainColor);
}
.newsList .news-description {
	font-size: .14rem;
}
.newsList .more {
	font-size: .14rem;
	font-weight: bold;
	position: absolute;
	right: 35px; bottom: 15px;
}
.newsList .transition:hover .news-name dt {
	text-decoration: underline;
}
.newsList .transition:hover .justNews {
	border-color: #555;
}
.newsList a {
	display: block;
}
.newsList .transition::after {
	content: "";
	width: 100%;
	height: .6rem;
	background: rgba(0,0,0,.7);
	z-index: -1;
	transition: all 0.3s ease-in-out;
}
.page_zt {
	width: 100%;
	text-align: center;
	font-size: .16rem;
	margin-bottom: .4rem;
}
.ym2, .ym {
	margin: 0 8px;
	width: .3rem; height: .3rem;
	background-color: #fff;
	color: var(--mainColor);
	display: inline-block;
	line-height: .26rem;
	text-align: center;
	font-weight: bold;
	border: 2px solid var(--mainColor);
	box-sizing: border-box;
	font-size: .16rem;
}
.ym2 {
	background-color: var(--mainColor);
	color: #fff;
}
.ym:hover {
	background-color: var(--mainColor);
	color: #fff;
}
table .ym2 {
	color: #333;
}
.newsview {
	margin: 0 50px;
	padding-bottom: 100px;
}
.newsview .main {
	width: 1100px;
}
.newsview .newsview-title {
	font-size: .3rem;
	text-align: center;
	margin-top: .2rem;
	display: inline-block;
	width: 100%;
	text-align: center;
}
.newsview .xinxi {
	font-size: .14rem;
	text-align: center;
	margin: .2rem 0;
}
.newsview .ms {
	font-size: 16px;
	line-height: 1.5;
}
.newsview .ms p {
	margin-bottom: 15px;
	display: block;
	line-height: 1.5;
}
.newsview .back {
	font-size: .14rem;
	width: 1.26rem;
	height: .42rem;
	line-height: .42rem;
	text-align: center;
	display: block;
	border: 2px solid transparent;
	color: #fff;
	background-color: var(--mainColor);
	transition: all .3s ease-in-out;
}
.newsview .back:hover {
	border-color: #333;
}

/*products*/
.product-series .list {
	padding: .4rem 0;
	flex-wrap: wrap;
	justify-content: space-between;
}
.product-series .list li {
	font-size: .14rem;
	font-weight: normal;
	width: 14%;
}
.product-series .list li a {
	display: inline-block;
	width: 100%; height: 100%;
	text-transform: capitalize;
}
.product-list ul {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.product-list ul li {
	margin-bottom: .45rem;
	width: 19%;
	transition: all .3s ease-in-out;
	position: relative;
	border: 2px solid var(--mainColor);
	background-color: var(--mainColor);
}
.product-list ul li:hover {
	box-shadow: 0 .04rem .2rem 0px #999;
	transform: translateY(-.06rem);
}
.product-list ul li img {
	width: 100%;
	object-fit: cover;
	object-position: center;
	box-sizing: border-box;
}
.product-list .product-name {
	padding: .12rem .16rem;
	box-sizing: border-box;
	width: 100%;
	font-size: .16rem;
	font-weight: bold;
	background-color: var(--mainColor);
	color: #fff;
	transition: all .3s ease-in-out;
}
.product-list .page,
.product-list .page_r {
	font-size: 0;
}

/*一排一排*/

.product-list .product-view {
	background-color: transparent;
	width: 100%; height: 100%;
	display: flex;
	justify-content: center;
	align-items: stretch;
	border: 1px solid #ccc;
}
.product-list .product-view:hover {
	box-shadow: 0 .04rem .2rem 0px #ddd;
	transform: translateY(-.03rem);
}
.product-view .left {
	width: 40%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fafafa;
	border-right: 1px solid #ddd;
}
.product-view .left img {
	max-width: 80%;
	max-height: 3.6rem;
	mix-blend-mode: darken;
}
.product-view .right {
	padding: 2%;
	box-sizing: border-box;
	width: 60%;
	font-size: .16rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: relative;
	flex-flow: column;
}
.product-view .full-screen {
	width: 100%; height: 100%;
}
.product-view .name {
	font-size: .2rem;
	font-weight: bold;
	width: 100%;
	color: var(--mainColor);
}
.product-view .table {
  margin: .2rem auto;
  width: 100%;
  max-width: 100%;
  margin-bottom: .2rem;
  border: 1px solid #ddd;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: .14rem;
}
.product-view .table-bordered>tbody>tr>td, .product-view .table-bordered>tbody>tr>th {
  border: 1px solid #ddd;
}
.product-view th {
	padding: .08rem;
	font-size: .16rem;
	color: #fff;
	text-align: center;
	background-color: var(--mainColor);
}
.en .product-view th {
	font-size: .15rem;
	font-weight: normal;
}
.product-view td {
	vertical-align: middle;
	padding: .1rem .08rem;
	font-size: .16rem;
    line-height: 1.43;
    border-top: 1px solid #ddd;
    text-align: center;
}
.product-view td:first-of-type {
	width: 1.32rem;
}
.product-description {
	margin-top: .1rem;
}
.product-view.tiny {
	width: 10.8rem;
}
.product-view.tiny .left {
	width: 35%;
}
.product-view.tiny .left img {
	max-width: 63%;
}
.product-view.tiny .right {
	width: 65%;
	display: block;
	line-height: 2;
}
.product-view.tiny .right .name,
.product-view.tiny .right .index {
	font-size: .16rem;
	color: #333;
	font-weight: normal;
}
.product-view.tiny .right b {
	font-size: .18rem;
	color: var(--mainColor);
	width: 1.2rem;
	display: inline-block;
}
/*adv*/
.adv .title {
	margin-bottom: .6rem;
	text-align: center;
}
.adv .title .txt {
	margin: .4rem 0 .2rem;
	font-size: .3rem;
	text-align: center;
}
.adv .title p {
	margin: 0 auto;
	font-size: .16rem;
	text-align: center;
	max-width: 10rem;
}
.adv.ch .title p {
	max-width: 6rem;
}
.adv .adv-info {
	margin-bottom: .3rem;
	width: 100%;
}
.adv .adv-info {
	margin-bottom: .6rem;
	display: flex;
	justify-content: center;
}
.adv .adv-info .swiper-container {
	width: 49%;
	box-sizing: border-box;
	border: 1px solid #000;
}
.adv .material img  {
	width: 100%; height: 3rem;
	object-fit: cover;
	object-position: center;
}
.adv .tech img {
	width: 5.12rem; height: 2.46rem;
	object-fit: cover;
	object-position: center;
}
.adv .adv-info .text {
	min-height: 2.2rem;
	padding: .3rem 0 .3rem .76rem;
	box-sizing: border-box;
	width: 55%;
	font-size: .16rem;
}
.adv .adv-info .text .text-title {
	margin: .1rem 0 .2rem;
	font-size: .2rem;
	position: relative;
	font-weight: bold;
	color: var(--mainColor);
}
.adv .adv-info .text p {
	line-height: 1.8;
	color: #5a5a5a;
	max-width: 90%;
}
.adv .adv-info:nth-of-type(3) .text {
	padding: .3rem .76rem .3rem 0;
	text-align: right;
}
.material .icon-back,
.material .icon-next {
	width: .38rem; height: .77rem;
	line-height: .77rem;
	text-align: center;
	background-color: rgba(100, 100, 100, .85);
	position: absolute;
	right: .1rem; top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	color: #fff;
	font-size: .22rem;
}
.adv .adv-info span.swiper-pagination-bullet {
	margin: 0 .06rem;
	width: .15rem; height: .15rem;
}
.material .icon-back {
	left: .1rem;
}
.material .swiper-pagination {
	margin-bottom: 0;
}
.swiper-pagination-bullet-active {
	background: var(--mainColor);
}
/*contact*/
.contact-wrap {
	margin: .6rem 0;
	text-align: center;
}
.contact-wrap .main {
	display: inline-block;
}
.contact-wrap .left {
	width: 45%; height: 6rem;
	float: left;
	text-align: left;
	opacity: 0;
	z-index: 1;
}
.contact-wrap .right {
	position: relative;
	opacity: 0;
	width: 50%; height: 5rem;
	float: right;
}
.contact-wrap .right h3 {
	margin-bottom: .2rem;
	width: 100%;
	text-align: left;
	font-size: .36rem;
	text-transform: uppercase;
	font-family: arial;
}
.contact-wrap .contact-info {
	display: inline-block;
	font-size: 0;
}
.contact-wrap .contact-info li {
	float: left;
	width: 100%;
	position: relative;
	color: #333;
	text-align: left;
}
.contact-wrap .contact-info span {
	line-height: .4rem;
	font-size: .14rem;
}
.contact-wrap form {
	margin-top: .2rem;
	width: 100%;
	font-size: 0;
}
.contact-wrap form input {
	margin: .06rem 0;
	padding: .1rem;
	box-sizing: border-box;
	width: 49%; height: .5rem;
	line-height: .3rem;
	font-size: .16rem;
	border-bottom: 1px solid #333;
	font-family: Microsoft Yahei, Arial, Helvetica, sans-serif;
}
.contact-wrap form input:first-of-type {
	margin-right: 2%;
}
.contact-wrap form .mail {
	width: 100%;
}
.contact-wrap form textarea {
	margin: .1rem 0 .2rem;
	padding: .1rem;
	box-sizing: border-box;
	font-size: .16rem;
	width: 100%;
	font-family: Microsoft Yahei, Arial, Helvetica, sans-serif;
}
.contact-wrap form button {
	float: left;
	width: 1.33rem; height: .4rem;
	line-height: .4rem;
	text-align: center;
	background-color: #fff;
	color: var(--mainColor);
	border: 1px solid;
}
.contact-wrap form button:hover {
	background-color: var(--mainColor);
	color: #fff;
}