@charset "utf-8";
/*public*/
.title-index{
	margin-bottom: 20px;
}
.title-index .line{
	display: block;
	background: #666;
	height: 1px;
	width: 15px;
	margin-bottom: 5px;
}
.title-index .title-en{
	font-size: 14px;
	color: #666;
	line-height: 16px;
	text-transform: uppercase;
	margin-bottom: 5px;
}
.title-index .title-cn{
	font-size: 16px;
	color: #1a1a1a;
	font-weight: lighter;
	line-height: 18px;
}
.title-index .title-text{
	font-size: 14px;
	line-height: 18px;
	color: #8c8c8c;
	margin-top: 5px;
	font-weight: lighter;
}
.button-more{
	display: block;
	width: 120px;
	height: 40px;
	border: 1px solid #1a1a1a;
	margin-top: 20px;
	font-size: 14px;
	text-align: center;
	line-height: 40px;
	color: #1a1a1a;
	letter-spacing: 1px;
	overflow: hidden;
}
.button-more svg{
	display: none;
}
@media (min-width: 768px){
	.button-more{
		width: 140px;
		height: 46px;
		margin-top: 30px;
		line-height: 46px;
		position: relative;
		border: none;
		color: #1a1a1a;
	}
	.button-more svg {
		display: block;
		width: 100%;
		height: 46px;
		left: 0;
		position: absolute;
		top: 0;
	}
	.button-more rect {
		fill: none;
		stroke: #1a1a1a;
		stroke-width: 1;
		stroke-dasharray: 500, 0;
		-webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
		transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
	}
	.button-more:hover {
		color: #207c4f;
	}
	.button-more:hover rect {
		stroke: #207c4f;
		stroke-width: 3;
		stroke-dasharray: 30, 251;
		stroke-dashoffset: 40;
	}
}
@media (min-width: 992px){
	.title-index{
		margin-bottom: 30px;
	}
	.title-index .line{
		width: 20px;
		margin-bottom: 8px;
	}
	.title-index .title-en{
		margin-bottom: 10px;
	}
	.title-index .title-cn{
		font-size: 22px;
		line-height: 24px;
	}
	.title-index .title-text{
		margin-top: 10px;
	}
}
@media (min-width: 1200px){
	.title-index{
		margin-bottom: 40px;
	}
	.title-index .line{
		margin-bottom: 10px;
	}
	.title-index .title-en{
		margin-bottom: 15px;
	}
	.title-index .title-cn{
		font-size: 28px;
		line-height: 32px;
	}
	.title-index .title-text{
		margin-top: 15px;
	}
	.button-more{
		width: 160px;
		height: 50px;
		margin-top: 40px;
		line-height: 50px;
	}
	.button-more svg {
		height: 50px;
	}
	.button-more:hover rect {
		stroke-dasharray: 30, 285;
	}
}
@media (min-width: 1500px){
	.title-index{
		margin-bottom: 50px;
	}
	.title-index .title-en{
		margin-bottom: 20px;
	}
	.title-index .title-cn{
		font-size: 32px;
		line-height: 34px;
	}
	.title-index .title-text{
		margin-top: 20px;
	}
	.button-more{
		width: 180px;
		height: 56px;
		margin-top: 50px;
		line-height: 56px;
	}
	.button-more svg {
		height: 56px;
	}
	.button-more:hover rect {
		stroke-dasharray: 30, 321;
	}
}
/*banner*/
.banner {
	position: relative;
    overflow: hidden;
    width: 100%;
}
.banner img {
    display: block;
    width: 100%;
}
.banner .swiper-pagination-bullet {
	width: 35px;
	height: 3px;
	border-radius: 0;
    color: #000;
    opacity: 1; 
    background: #fff;
}

.banner .swiper-pagination-bullet-active {
    color: #fff;
    background: #abcb01;
}

.banner .swiper-container-horizontal>.swiper-pagination-bullets,
.banner .swiper-pagination-custom,
.banner .swiper-pagination-fraction {
    bottom: 10px;
}
.banner .next,
.banner .prev{
	display: none;
	background: rgba(0,0,0,0.5);
}
.banner .next,
.banner .prev{
	display: none;
	background: rgba(0,0,0,0.5);
}

.banner .next,
.banner .prev{
	position: absolute;
    top: 50%;
    width: 24px;
    height: 60px;
    margin-top: -30px;
    z-index: 10;
    cursor: pointer;
    line-height: 60px;
    text-align: center;
    overflow: hidden;
    -webkit-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
    transition: all ease-in-out 0.3s;
}
.banner .next{
	right: 0;
}
.banner .prev{
	left: 0;
}
.banner .next a,
.banner .prev a{
	font-size: 24px;
	color: #fff;
}
.banner .next:hover,
.banner .prev:hover{
	background: rgba(0,0,0,0.8);
}
.banner .next.swiper-button-disabled,
.banner .prev.swiper-button-disabled{
	background: rgba(0,0,0,0.2) !important;
}


/********about start********/
.about{
	overflow: hidden;
}
.about-profile{
	background: #f5f5f5;
	padding: 30px 15px;
}
.about-profile .text p{
	font-size: 14px;
	color: #8c8c8c;
	line-height: 24px;
	margin-top: 15px;
}
.about-num{
	background: url('../images/nc/about-bg.jpg') center center no-repeat;
	background-size: cover;
	padding: 30px 0;
	width: 100%;
	height: auto;
	text-align: center;
}
.about-num .item{
	width: 50%;
	float: left;
}
.about-num .item.mb{
	margin-bottom: 20px;
}
.about-num .item p.cn{
	font-size: 16px;
	color: #fff;
	line-height: 20px;
}
.about-num .item .num{
	margin-top: 10px;
	color: #fff;
	line-height: 40px;
}
.about-num .item span.n{
	font-size: 40px;
	font-family: Avant;
}
.about-num .item span.p{
	font-size: 24px;
}
@media (min-width: 768px){
	.about{
		display: table;
		width: 100%;
	}
	.about-profile{
		vertical-align: top;
		width: 50%;
		display: table-cell;
		padding: 40px 25px 50px 25px;
	}
	.about-num{
		vertical-align: middle;
		display: table-cell;
		width: 50%;
	}
	.about-num .item{
		width: 50%;
		float: left;
	}
}
@media (min-width: 992px){
	.about-wrap{
		width: 400px;
		margin: 0 auto;
		padding: 15.8% 0;
	}
	.about-num{
		padding: 0;
		text-align: left;
		padding-left: 9.75%;
	}
	.about-num .item{
		width: 45%;
	}
	.about-num .item.mb{
		margin-bottom: 15.8%;
	}
	.about-num .item p.cn{
		font-size: 1.25vw;
		color: #fff;
		line-height: 1.2;
	}
	.about-num .item .num{
		margin-top: 20px;
		color: #fff;
		line-height: 1;
	}
	.about-num .item span.n{
		font-size: 4.5vw;
		font-family: Avant;
	}
	.about-num .item span.p{
		font-size: 2vw;
	}
}
@media (min-width: 1200px){
	.about-wrap{
		width: 450px;
		margin: 0 auto;
	}
}
@media (min-width: 1500px){
	.about-wrap{
		width: 450px;
		margin: 0;
		position: relative;
		left: 17%;
	}
}
/********about end********/



/********product start********/
.product{
	background: #fff;
	padding: 30px 15px;
}
.product .title-index{
	text-align: right;
}
.product-wrap .button-more{
	margin-top: 5px;
}
.product-wrap ul{
	overflow: hidden;
}
.product-wrap ul li{
	width: 100%;
	float: left;
	margin-bottom: 20px;
}
.product-wrap li a{
	display: block;
	position: relative;
	overflow: hidden;
}
.product-wrap li img{
	display: block;
	width: 100%;
}
.product-wrap li .text{
	position: absolute;
	left: 30px;
	top: 30px;
}
.product-wrap li .text p{
	font-size: 14px;
	font-weight: bold;
	line-height: 18px;
	padding-bottom: 5px;
	color: #333;
	letter-spacing: 1px;
}
.product-wrap li .text span{
	width: 20px;
	height: 1px;
	display: block;
	background: #ccc;
}
.product .blank{
	display: none;
}
@media (min-width: 480px){
	.product .title-index{
		width: 450px;
	}
	.product-wrap ul{
		margin-left: -7px;
		margin-right: -8px;
	}
	.product-wrap ul li{
		padding-left: 7px;
		padding-right: 8px;
		width: 50%;
		float: left;
		margin-bottom: 15px;
	}
	.product-wrap li .text{
		position: absolute;
		left: 20px;
		top: 20px;
	}
}
@media (min-width: 768px){
	.product{
		padding: 40px 15px;
	}
	.product-wrap{
		padding: 15px;
	}
	.product-wrap .button-more{
		margin-top: 0;
	}
	.product-wrap ul{
		margin-left: -15px;
		margin-right: -15px;
	}
	.product-wrap ul li{
		padding: 0 15px;
		margin-bottom: 30px;
	}
}
@media (min-width: 992px){
	.product{
		padding: 60px 15px;
	}
	.product-wrap ul li{
		width: 33.3333%;
	}
	.product-wrap ul li img{
		transition: all ease-in-out 0.3s;
	}
	.product-wrap ul a:hover img{
		transform: scale(1.1);
	}
}
@media (min-width: 1200px){
	.product{
		position: relative;
		padding-top: 7.3%;
		padding-bottom: 7.3%;
	}
	.product-wrap .button-more{
		margin-top: 20px;
	}
	.product .title-index{
		margin-right: 9%;
	}
	.product .blank{
		display: block;
		background: #1a1a1a;
		width: 24.2%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
	.product .blank img{
		display: block;
		width: 14%;
		position: absolute;
		left: 15%;
		bottom: 0;
		padding-bottom: calc(29.9% + 100px);
	}
	.product-wrap{
		margin-right: 9%;
		float: right;
		width: 74%;
		padding: 0;
		position: relative;
		z-index: 124;
	}
	.product-wrap li .text p{
		font-size: 18px;
		line-height: 22px;
		padding-bottom: 8px;
	}
	.product-wrap li .text span{
		width: 25px;
	}

	
}
@media (min-width: 1500px){
	.product-wrap li .text p{
		font-size: 20px;
		line-height: 24px;
		padding-bottom: 10px;
	}
}
/********product end********/


/********purpose start********/
.purpose .pic{
	display: block;
}
.purpose .pic img{
	display: block;
	width: 100%;
}
.purpose .text-wrap{
	background: #f5f5f5;
	padding: 30px 15px;
}
.purpose .text-wrap ul{
	display: block;
}
.purpose .text-wrap li{
	margin-bottom: 20px;
	overflow: hidden;
	position: relative;
}
.purpose .text-wrap img{
	position: absolute;
	left: 0;
	top: 2px;
	width: 16px;
}
.purpose .text-wrap .text{
	width: 100%;
	float: right;
	padding-left: 30px;
}
.purpose .text-wrap .text .box{
	width: 100%;
	border-bottom: 1px solid #dcdcdc;
}
.purpose .text-wrap .title{
	font-size: 18px;
	font-weight: lighter;
	color: #1a1a1a;
	line-height: 20px;
}
.purpose .text-wrap .content{
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 14px;
	color: #999;
	line-height: 24px;
}
@media (min-width: 768px){
	.purpose{
		display: table;		
	}
	.purpose .pic{
		display: table-cell;
		width: 50%;
		background: url('../images/nc/quality.jpg') center center no-repeat;
		background-size: cover;
	}
	.purpose .pic img{
		display: none;
	}
	.purpose .text-wrap{
		display: table-cell;
		background: #f5f5f5;
		padding: 40px 30px;
	}
	.purpose .text-wrap li{
		margin-bottom: 25px;
	}
	.purpose .text-wrap img{
		top: 2px;
		width: 16px;
	}
	.purpose .text-wrap .text{
		padding-left: 30px;
	}
	.purpose .text-wrap .title{
		font-size: 18px;
		line-height: 20px;
	}
	.purpose .text-wrap .content{
		padding-top: 20px;
		padding-bottom: 20px;
	}
}
@media (min-width: 992px){
	.purpose .text-wrap{
		padding: 5.2% 9.1% 5.2% 7.8%;
	}
	.purpose .text-wrap li{
		margin-bottom: 25px;
	}
	.purpose .text-wrap img{
		width: 18px;
	}
	.purpose .text-wrap .text{
		padding-left: 34px;
	}
	.purpose .text-wrap .title{
		font-size: 20px;
		line-height: 22px;
	}
	.purpose .text-wrap .content{
		padding-top: 20px;
		padding-bottom: 20px;
	}
}
@media (min-width: 1200px){
	.purpose .text-wrap li{
		margin-bottom: 40px;
	}
	.purpose .text-wrap img{
		width: 20px;
	}
	.purpose .text-wrap .text{
		padding-left: 40px;
	}
	.purpose .text-wrap .title{
		font-size: 22px;
		line-height: 24px;
	}
	.purpose .text-wrap .content{
		padding-top: 25px;
		padding-bottom: 40px;
	}
}
@media (min-width: 1500px){
	.purpose .text-wrap li{
		margin-bottom: 55px;
	}
	.purpose .text-wrap img{
		width: 22px;
	}
	.purpose .text-wrap .title{
		font-size: 24px;
		line-height: 26px;
	}
	.purpose .text-wrap .content{
		padding-bottom: 55px;
	}
}
/********purpose end********/



/********news start********/
.news{
	background: #fff;
	padding: 30px 15px;
}
.news ul{
	border-top: 1px solid #e6e6e6;
}
.news li{
	position: relative;
	border-bottom: 1px solid #e6e6e6;
}
.news li a{
	display: block;
	padding: 15px 0;
}
.news-title{
	font-size: 14px;
	line-height: 24px;
	margin-bottom: 5px;
	color: #333;
	font-weight: lighter;
}
.news-time{
	font-size: 12px;
	color: #999;
	font-weight: lighter;
	line-height: 14px;
}
.news-content{
	margin-top: 8px;
	font-size: 14px;
	line-height: 24px;
	color: #999;
	font-weight: lighter;
}
.news .fa{
	display: none;
}
@media (min-width: 768px){
	.news{
		width: 750px;
		margin: 0 auto;
		padding: 40px 15px;
	}
}
@media (min-width: 992px){
	.news{
		width: 970px;
		padding: 5.2% 15px;
	}
	.news li a{
		padding: 25px 15px;
		overflow: hidden;
		display: table;
		position: relative;
		transition: all  ease-in-out 0.3s;
	}
	.news .left{
		display: table-cell;
		width: 250px;
		position: relative;
	}

	.news .right{
		padding-left: 100px;
		padding-right: 120px;
		width: 690px;
		display: table-cell;
	}
	.news-title{
		font-size: 16px;
		height: 72px;
		overflow: hidden;
		margin-bottom: 0;
	}
	.news-time{
		position: absolute;
		bottom: 0;
	}
	.news-content{
		margin-top: 0;
		height: 96px;
		overflow: hidden;
	}
	.news .fa{
		display: block;
		width: 20px;
		height: 20px;
		line-height: 20px;
		font-size: 20px;
		color: #333;
		position: absolute;
		right: 15px;
		top: 25px;
	}
	.news li a:hover{
		transform: skewX(15deg);
	}
	.news li a:hover .news-title,
	.news li a:hover .news-content,
	.news li a:hover .news-time
	.news li a:hover .fa{
		color: #1f7c4e;
	}
}
@media (min-width: 1300px){
	.news{
		width: 1230px;
	}
	.news li a{
		padding: 40px 15px;
	}
	.news .left{
		display: table-cell;
		width: 280px;
		position: relative;
	}

	.news .right{
		padding-left: 160px;
		padding-right: 180px;
		width: 920px;
	}
	.news-title{
		font-size: 18px;
	}	
	.news .fa{
		right: 15px;
		top: 40px;
	}
}
/********news end********/


/********contact start********/
.contact{
	display: none;
}
@media (min-width: 768px){
	.contact{
		width: 100%;
		border-top: 4px solid #0f0f0f;
		display: table;
	}
	.contact-info{
		padding: 4.6% 0;
		display: table-cell;
		width: 50%;
		background: #f9f9f9;
		text-align: center;
	}
	.contact-info .info{
		font-size: 0;
		display: inline-block;
	}
	.contact-info .text{
		border-bottom: 1px solid #c7c7c7;
	}
	.contact-info h1{
		text-align: left;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
	}
	.contact-info p{
		text-align: left;
		margin-bottom: 5px;
		font-size: 16px;
		color: #666666;
		line-height: 20px;
		font-weight: lighter;
	}
	.message-button{
		display: block;
		background: #ececec;
		width: 100%;
		height: 50px;
		margin-top: 30px;
		padding: 0 15px;
		transition: all ease-in-out 0.3s;
	}
	.message-button:hover{
		background: #d9d9d9;
	}
	.message-button p{
		font-size: 14px;
		line-height: 50px;
		color: #666;
		float: left;
	}
	.message-button span{
		display: block;
		width: 16px;
		height: 50px;
		line-height: 50px;
		color: #333;
		float: right;
		font-size: 16px;
	}
	#map{
		display: table-cell;
		width: 50%;
	}
	#map .anchorBL{
		display: none;
	}
}
@media (min-width: 992px){
	.contact-info h1{
		text-align: left;
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
		letter-spacing: 1px;
	}
	.contact-info p{
		text-align: left;
		margin-bottom: 10px;
		font-size: 16px;
		color: #666666;
		line-height: 24px;
		font-weight: lighter;
	}
	.message-button{
		background: #ececec;
		width: 100%;
		height: 50px;
		margin-top: 30px;
		padding: 0 15px;
	}
	.message-button p{
		font-size: 14px;
		line-height: 50px;
		color: #666;
		float: left;
	}
	.message-button span{
		display: block;
		width: 16px;
		height: 50px;
		line-height: 50px;
		color: #333;
		float: right;
		font-size: 16px;
	}
	#map{
		display: table-cell;
		width: 50%;
	}
}
/********contact end********/