@import url("base.css");
@import url("../font/iconfont.css");

main,
footer,
.module {
	display: flex;
	width: 100%;
	background: #fff;
	justify-content: center;
}
*, *:after, *:before { transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; }

/*----------header----------*/
.header { background: #fff; line-height: 90px; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; }
.header .wrap {position:relative; width: auto;margin:0 78px; padding: 0 0 0 35%;}
.logo { position: absolute; top: 0; left: 0; bottom: 0; width: 225px; text-align: center; padding-right: 40px; }
.logo img { vertical-align: middle; }
.menu ul{display:flex}
.menu ul li { flex:1; text-align: center; font-size: 16px; }
.menu { width: 90%; max-width: 950px; margin: 0 auto; }
.menu ul li a { display: inline-block; color: #fff; position: relative;font-size: 20px;	color: #333333; font-family: 'PingFang-SC-Medium';}
.menu ul li a:before { content: ''; display: block; position: absolute; width: 0; margin: 0 auto; left: 0; right: 0; top: 0; height: 4px; background: #0679df; }
.menu ul li.on a:before, .menu ul li a:hover:before { width: 100%;color: #0679df; }
.menu ul li.on a, .menu ul li a:hover { color: #0679df;font-family: 'PingFang-SC-Bold';}

@media (max-width: 1550px) {	
	.menu ul li a {font-size:14px;}
}
@media (max-width: 1000px) {	
	.header {padding:0;}
	.header .wrap {position: relative;width:100%;height:60px;}
	.header .menu {display: none;}
	.header #navToggle {
	    height: 30px;
	    display: block;
	    position: absolute;
	}
}
footer {width:100%;margin-top:50px;height: 70px;line-height: 70px;background-color: #f0f0f0;text-align:center;font-size: 16px;color: #a2a4a6;}

/*index-about*/

/*@media 1920px*/
.index-about {padding:70px 0;}
.index-about h2 {margin:0 90px;}
.about-content {padding-top:10%;margin:0 90px;}
.about-content .col-1 {width:883px;}
.about-content .col-2 {width:603px;}
.index-prodct .h2 {margin:80px 0 40px 0;}
.news {padding:25px 0;margin:25px 92px;}	
.service1 {padding:25px 0;margin:25px 92px;}	
.index-contact {padding:0 92px;}
.bread-crumb {margin:90px 92px 0 92px;}
.news-detail {margin:25px 92px;}
.coops  {margin:25px 92px;}
.products {margin:50px 92px;}
.products .our-team ul {margin:0 1%;padding-left:0}
.pro {display:flex;margin:50px 92px;justify-content: space-between;}
.pro .content {width:70%;}

.h2 {display:flex;width:100%;font-family: PingFang-SC-Medium;font-size: 46px;padding:28px 0;border-bottom:1px solid #f0f0f0;justify-content: center;}
	span.clip {
	    background: linear-gradient(to right, #099af7, #1cffd2);
	    -webkit-background-clip: text;
	    color: transparent;
	}
	
.about-content {display:flex; justify-content: space-between;}
	.col-1 h3 {font-size: 36px;font-family: PingFang-SC-Bold;}
	.col-1 .p {padding-right:159px;padding-top:78px;padding-bottom:37px;font-size: 20px;color: #333333;line-height: 28px;}
	.col-1 .btn {
		width: 178px;
		height: 54px;
		line-height: 54px;
		background-color: #0679df;
		border-radius: 27px;		
		text-align:center;
	}
	.col-1 .btn a {color: #ffffff;
		font-size: 24px;}
		
.index-prodct .h2 {border-color: #e5e5e5;}
	.product-list {display: flex;flex-direction: row;flex-wrap: wrap;}
	.product-list {padding-left:1%;}
	.product-list li {width:24%;margin:0 1% 1% 0;position:relative;}
	.product-list li img {width:100%;}
	.customer li {position:relative;}
	.product-list li .mark,.customer li .mark {display: none;position:absolute;top:0;z-index:3;height:100%;}
	.product-list li:hover .mark,.customer li:hover .mark {display: block;width:100%;
			background-image: linear-gradient(90deg, 
				#099af7 0%, 
				#1cffd2 100%), 
			linear-gradient(
				#126ace, 
				#126ace);
			background-blend-mode: normal, 
				normal;
	}
	.product-list li:hover img,.customer li:hover img {
		animation: changeBiger 2s linear forwards;
		animation-delay: 3s;
		-webkit-animation-delay: 3s;
		transform: scale(.9);
	}
	@keyframes changeBiger {
		0% {
			transform: scale(1);
		}
		100% {
			transform: scale(.9);
		}
	}
	.product-list li .border,.customer li .border {margin:5%;height:88%;border: solid 1px #ffffff;font-size: 28px;color: #ffffff;display: flex;align-items: center;justify-content: center;text-align: center;}
	
	.section3 {background-color: #f0f0f0;}
	.section5 {background-color: #f0f0f0;}
	.section4 {z-index:10;background-color: #fff;}
	.container_content {
	    position: relative;
	    top: 0;
	    transform: translateY(-0);
	}
	.content_wrapper {
	    width: 1200px;
		padding-top: 76px;
		position: relative;
		margin: 0 auto;
		
	}
	.clearfix {
	    zoom: 1;
	}
	.content_wrapper {
	    position: relative;
	    margin-right: 0;
	}
	.content_list {position:relative;display: flex;justify-content: space-around;}
	.content_list .item_block{
		    transition: all .36s ease;
		    width: calc(100% / 3 - 0px);
		margin-bottom: 20px;
		position: relative;
		box-shadow: 0 0 0 rgba(0, 0, 0, .15);
	    float: left;
	    margin-right: 0px;
	    padding: 0px 45px;
	    height: 600px;
	}
	.item_block .item_tags {
	    padding: 15px
	}
	
	.item_info .title {
	    transition: all .36s ease;
	    color: #333;
	   font-size: 26px;
	    line-height: 30px;
	}
	
	.item_info .subtitle {
	   width: 50px;
	   	height: 1px;
		margin-top:18px;
	   	background-color: #333333;
	   	opacity: 0.3;
	}
	.item_index {
	    display: none;
	}	
	.content_list .item_block {
	    float: left;
	    margin-right: 0px;
	    padding: 0px 45px;
	    height: 600px;
	}
		
	.clearfix:after {
	    clear: both;
	    display: block;
	    content: '';
	}
	.content_list .item_img {
	    float: none;
	    position: relative;
	    top: 410px;
	}
	
	.content_list .item_img img {
	    width: 307px;
	    transform: scale(1);
	}
	
	.content_list .item_block:hover .item_box .item_img img {
	    transform: scale(1);
	}
	
.content_list .item_img {
	    width: 307px;
	    transition: all 0.36s ease;
	}
	
	
	
.content_list .item_block:hover .item_img {
	    top: 16px;
	}
	
.content_list .item_block:hover .item_wrapper {
	    top: 65px;
	}
	
	.content_list .item_block .item_box .item_wrapper {
	    width: 70%;
	    padding: 0px;
	    margin: 27px 30px;
	    margin-top: 15px;
	}
	
	.content_list .item_wrapper {
	    transition: all 0.6s ease;
	    padding: 0px;
	    position: relative;
	    top: 20px;
	    top: -120px;
	}
	
	 .content_list .item_des .description {
	    height: 79px;
	    width: 308px;
		font-size:16px;
		padding-top:43px;
		line-height: 28px;
	}
	
	.content_wrapper {
	    padding-top: 120px;
	    width: 1170px;
	    margin: 0 auto;
	}
	
	.content_list .item_wrapper>.date_wrap {
	    font-size: 18px;
	}
	
.container_content .content_wrapper>.more {
	    display: none;
	}
.content_list .item_block::before {
    margin-left: -46px;
    transition: all 0.6s ease;
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 200vh;
    z-index: -1;
}

.content_list .item_block:hover::before {
    background-color:#ffffff;
}
.index-contact .contact {padding:99px 0 30px 0;    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.index-contact .contact dl {width:30%;padding-right:3.33%;}
.index-contact .contact dt {padding-bottom:40px;font-size: 26px;font-family: PingFang-SC-Bold;color: #333333;}
.index-contact .contact dd {font-size: 14px;line-height: 28px;color: #333333;}
.index-contact .contact dd .item  {display: flex;width:100%;text-align: left;}
.index-contact .contact dd .label {width:15%;}
.index-contact .contact dd .text {width:85%;}
.index-contact .contact dd .label i {color:#afc7dc;margin-right:12px;}
.index-contact  .form {height: 230px;background-color: #f0f0f0;display: flex;}
	.index-contact .form .input {width:30%;padding:9px 0 0 32px;display: flex;flex-flow:column;}
	.index-contact .form .input input {margin:23px 0 0 0;padding:0 3%;width:94%;height:40px;line-height:40px;background-color: #ffffff;}
	.index-contact .form .textarea {display: flex;flex-flow:column;padding:32px;width:70%;height: 166px;}
	.index-contact .form textarea{width:98%;height:98%;padding:1%;background-color: #ffffff;}
	.sub-btn {
		margin-top:30px;
		width: 110px;
		height: 34px;
		line-height: 34px;
		color: #ffffff;
		font-size: 16px;
		text-align: center;
		background-color: #0679df;
		border-radius: 17px;
	}
	.section6 {position: relative;}
	.section6 .footer {position:absolute;bottom:0;width:100%;height: 70px;line-height: 70px;background-color: #f0f0f0;text-align:center;font-size: 16px;color: #a2a4a6;}
	
	
	.about-amount {margin:170px 10% 0 10%;}
	.about-amount li {
	    width: 25%;
	    float: left;
	    text-align: center;
	    position: relative
	}
	
	.about-amount li:not(:last-child):after {
	    content: '';
	    position: absolute;
	    width: 1px;
	    height: 45px;
	    background-color: rgba(170, 170, 170, .2);
	    right: 0;
	    top: 50%;
	    -webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	    transform: translateY(-50%)
	}
	
	.about-amount li .title {
	    color: #999;
	    font-size: 13px;
	    line-height: 30px
	}
	
	.about-amount li p {
	    text-align: center;
	    font-size: 14px
	}
	
	.about-amount li p.number .counterDX {
	    font-size: 60px;
		font-family: PingFang-SC-Regular;
	    text-align: center;
	    margin-top: 15px;
	    line-height: 52px;
	    vertical-align: top
	}
	
	.about-amount li .title {
	    font-family: PingFang-SC-Regular;
	    font-size: 20px;
	    padding:25px 0;
	}
	
	.about-amount li p.number .unit {
	    position: relative;
	    top: 1px;
	    left: 3px;
	    font-size: 14px;
	    vertical-align: top
	}
	.history h3 {padding-top:0;}
	.our {padding:20px 10%;font-size: 20px;line-height: 28px;}
	.our img {float:left;margin-right:110px;}
	.our h3 {padding-bottom:48px;font-size: 32px;color: #333333;font-size: 32px;}
	.text-center {text-align: center;}
	
	.history {position: relative;}
	.history .footer {position:absolute;bottom:0;width:100%;height: 70px;line-height: 70px;background-color: #f0f0f0;text-align:center;font-size: 16px;color: #a2a4a6;}
	
	.our-team ul {margin:72px 10%;padding-left:2%;display: flex;justify-content: space-around;}
	.our-team li {width:23%;margin-right:2%;}
	.our-team li:hover {		
		background-image: linear-gradient(90deg, 
		#099af7 0%, 
		#1cffd2 100%), 
	linear-gradient(
		#23263d, 
		#23263d);
	background-blend-mode: normal, 
		normal;}
	.our-team li img {width:100%;}
	.our-team li h4	{margin:0 20px;font-size: 22px;padding:22px 0 11px 0;}
	.our-team li p	{margin:0 20px;padding-bottom:19px;font-size: 16px;}
	.our-team li:hover h4,.our-team li:hover p {color:#fff;}
	
	.bread-crumb {display: flex;align-items: center; justify-content: space-between; padding:50px 0 0 0;font-size: 14px;color: #666666;}
	
	.sidenav {display: flex;justify-content: flex-end;}
	.sidenav a {display:block;padding:8px 18px;margin-left:11px;text-align: center;}
	.sidenav a.on {background:#0679df;color:#fff;}
	
	/*新闻*/	
	.news li {display:block;padding:23px;margin-top:20px;background-color: #ffffff;
	box-shadow: 0px 3px 16px 0px #fff;}
	.news li:hover {box-shadow: 0px 3px 16px 0px #e8e8e8;}
	.news li dl {display: flex;}
	.news li dd.txt {margin:0 47px;	width:70%;}
	.news li h4 {
		padding:18px 0;
		font-size: 20px;
		font-weight: normal;
		font-stretch: normal;
		line-height: 28px;
		letter-spacing: 0px;
		color: #333333;
	}
	.news li .intro{
		font-size:15px;
		line-height: 28px;
		letter-spacing: 0px;
		color: #a2a4a6;
	}
	.pages {width:100%;margin:30px 0;}
	.pages ul {display: flex;width:100%;justify-content: center;}
	.pages li {padding:5px 10px;width:20px;margin:5px;text-align:center;background-color: #ffffff;border-radius: 4px;}
	.pages li.thisclass {background-color: #0679df;color:#fff;}
	.news li .time {padding:18px 0;min-width:120px;text-align:right;}
	.news li .time hr {width:50px;margin-top:70px; float:right;color: #a2a4a6;}
	.news li:hover h4 span,.news li:hover .time span {
	    background: linear-gradient(to right, #099af7, #1cffd2);
	    -webkit-background-clip: text;
	    color: transparent;
	}
	
	.news-detail { display: flex;justify-content: space-between; padding:25px 0;}
	.contain {width:66%;}
	.sidebar {width:30%;}
	.sidebar dt {height:80px;overflow: hidden;}
	
	.contain  h2 {
		font-family: PingFang-SC-Bold;
		font-size: 26px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 28px;
	letter-spacing: 0px;
	color: #333333;}
	.contain .time {font-size: 20px;color: #7e7e80;}
	.contain .content {font-size: 18px;line-height: 32px;color: #a2a4a6;}
	.contain .time {margin:30px 0;font-size: 20px;color: #7e7e80;}
	.sidebar dl {padding:15px;display: flex;}
	.sidebar dl:hover  {background-color: #f0f0f0;}
	.sidebar dt {display:block;width:120px;height:80px;margin-right:15px;overflow:hidden;}
	.sidebar dt img {height:100%;}
	.sidebar dd {width:75%;}
	.sidebar dd h4 {
		max-height:38px;
		margin-bottom:20px;
		font-size: 14px;color: #333333;line-height: 20px;
		text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
	}
	.sidebar dd p{color: #a2a4a6;}
	.sidebar dl:hover dd h4 {color: #0679df;}
	
	.service-nav {padding:50px 0 80px 0;}
	.service-nav ul {display: flex;justify-content: space-around;text-align: center;margin:0 8%;}
	.service-nav li {line-height: 50px;}
	
	
	.service1 h2 {
		font-family: PingFang-SC-Bold;
		font-size: 46px;
		font-weight: normal;
		font-stretch: normal;
		line-height: 28px;
		letter-spacing: 0px;
		color: #333333;
		text-align: center;
		margin-bottom:100px;
	}
	.service1 .content .img {float:right;margin-left:190px;}
	.coops ul {    display: flex;
    flex-direction: row;
    flex-wrap: wrap;}
	.coops ul li {
		width: 18%;
		margin:2% 1% 0 1%;
		box-sizing: border-box;
		padding: 10px 50px;
		cursor: pointer;
		background-color: #ffffff;	
		border: solid 1px #f0f0f0;border-radius: 4px;
	}
	.coops ul li  img {width:100%;}
	.products .our-team ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.products .our-team ul li {margin-bottom:30px;}
	
	/*商品多图放大镜*/
	#showbox { background:#eee;}
	#showbox span { background:url(../images/whitebg.png) repeat;}
	#showsum { left:25px; margin-top:10px;}
	#showsum span { border:1px solid #ddd;}
	#showsum span.sel { border:1px solid #f60;}
	
	.showpage { width:400px; position:relative;}
	.showpage a { display:block; width:15px; border:1px solid #ddd; height:60px; line-height:60px; background:#eee; text-align:center; font-size:18px; position:absolute; left:0; top:-62px; text-decoration:none; color:#999;}
	.showpage a#shownext { left:auto; right:0;}
	.showpage a:hover { background:#ccc; color:#777;}
	
.pimg {display:block;margin:0 auto;width:100%;padding:100px 0;display:flex;justify-content: space-around;}
.s4-left {width:45%;float:left;}
.s4-right {width:45%;float:right;padding-bottom:100px;}