@charset "utf-8";

.header11{ position: fixed; left: 0; top: 0; z-index: 99; width: 100%; border-bottom: 1px solid #fff; border-bottom: 1px solid rgba(255,255,255,0.3); transition: 0.5s;}
.header11.scoll,.header11.innerheader11{ background-color: #fff; border-bottom: 1px solid #EAEAEA;}
.header11.scoll .logo11 img.logo11-show,.header11.innerheader11 .logo11 img.logo11-show{ opacity: 0; visibility: hidden;}
.header11.scoll .logo11 img.logo11-hide,.header11.innerheader11 .logo11 img.logo11-hide{ opacity: 1; visibility: visible;}
.header11.scoll .header11-navs li a,.header11.innerheader11 .header11-navs li a{ color: #333333;}
.header11.scoll .header11-en,.header11.innerheader11 .header11-en{ border-color: #fff;}
.header11.scoll .header11-en a,.header11.innerheader11 .header11-en a{ color: #999999;}
.header11.scoll .header11-en a i,.header11.innerheader11 .header11-en a i{ border-top-color: #224DC4;}

.logo11{ float: left; margin-left: 10%; margin-top: 35px; position: relative; display: block; width: 147px;}
.logo11 img{ display: block; width: 100%; height: auto; transition: 0.4s;}
.logo11 img.logo11-hide{ position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden;}
.header11-content{ float: right; margin-bottom: -1px;}
.header11-navs{ float: left;}
.header11-navs li{ float: left; position: relative; padding-left: 57px;}
.header11-navs li:first-child{ padding-left: 0;}
.header11-navs li a{ position: relative; display: block; height: 100px; line-height: 100px; color: #fff; font-size: 16px;}
.header11-navs li a:before{ content: ""; position: absolute; right: 0; bottom: 0; width: 0; transition: 0.43s; height: 10px; background-color: #015198;}
.header11-navs li a:after{ content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid #015198; position: absolute; left: 50%; margin-left: -4px; bottom: 7px; transition: 0.35s; opacity: 0; visibility: hidden;}
.header11-navs li:hover a:before,.header11-navs li.active a:before,.header11-navs li.on a:before{ width: 100%; right: auto; left: 0;}

.header11-navs li:hover a:after,.header11-navs li.active a:after,.header11-navs li.on a:after{ opacity: 1; visibility: visible; bottom: 10px;}
.header11-en{ float: left; margin-left: 50px; border-left: 1px solid rgba(255,255,255,0.3); border-right: 1px solid rgba(255,255,255,0.3);}
.header11-en a{ display: block; text-align: center; width: 99px; color: #FFFFFF; font-size: 16px; line-height: 100px; font-family: "DINCond-Medium"; font-weight: lighter; text-transform: uppercase;}
.header11-en a i{ margin-left: 4px; display: inline-block; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 6px solid #fff; transition: 0.35s;}
.header11-en a:hover{ color: #015198;}
.header11-en a:hover i{ border-top-color: #015198;}
.header11-tel{ float: left; padding-left: 36px; width: 210px; margin-top: 33px;}
.header11-tel i{ line-height: 1; margin-right: 5px; display: block; float: left; color: #015198; font-size: 33px; font-style: normal;}
.header11-tel p{ float: left; line-height: 33px; color: #4497e5; font-size: 30px; font-family: "DINCond-Medium"; height: 33px;}
.header11-navs-down{ width: 100%; position: absolute; left: 0; top: 100%; background-color: #fff; overflow: hidden; height: 0;}
.navs-down-item{ display: none; overflow: hidden;}
.navs-down-warp{ position: relative;}
.navs-down-imgs{ position: relative; float: left; width: 757px; width: calc(100% - 1162px); position: absolute; left:0; top:0; height: 100%; background-size: cover; min-height: 268px;}
.navs-down-title{ position: absolute; right: 66px; top: 50%; margin-top: -51px; text-align: right;}
.navs-down-title small{ display: block; margin-bottom: 8px; display: block; line-height: 1; color: #fff; font-size: 70px; font-family: "DINCond-Bold_1";}
.navs-down-title span{ display: block; text-align: right; color: #fff; font-size: 24px; font-weight: bold; line-height: 1;}
.navs-down-info{width: 1162px;float: right;border-bottom: 1px solid #EAEAEA;}
.navs-list-item{ padding: 41px 57px 32px;}
.navs-list-item li{ width: 22%; float: left; margin-right: 4%; margin-bottom: 20px;}
.navs-list-item li:nth-child(4n+4){ margin-right: 0;}
.navs-list-item li figure{ display: block; line-height: 1; overflow: hidden;}
.navs-list-item li figure img{ display: block; width: 100%; height: auto; transition: 0.5s;}
.navs-list-item li span{ margin-top: 23px; display: block; line-height: 1; color: #333333; font-size: 14px; transition: 0.4s;}
.navs-list-item li:hover figure img{ transform: scale(1.1);}
.navs-list-item li:hover span{ color: #015198;}

.menubtn{transition: 0.4s; display: none; position:relative; z-index: 20; float: right; width: 70px; height: 70px; background-color: #015198; text-align: center;}
.menubtn span{ display:block; width:30px; height:3px; background:#fff; margin:auto; margin-top:35px; position:relative; vertical-align: middle; -webkit-transition-duration: .3s,.3s; -moz-transition-duration: .3s,.3s; -ms-transition-duration: .3s,.3s; -o-transition-duration: .3s,.3s; transition-duration: .3s,.3s;-webkit-transition-delay: .3s,0s; -moz-transition-delay: .3s,0s; -ms-transition-delay: .3s,0s; -o-transition-delay: .3s,0s; transition-delay: .3s,0s;}
.menubtn span:after,
.menubtn span:before { content: ""; position: absolute; display: inline-block; width: 100%; height: 3px; left: 0;
 background-color: #fff; -webkit-transition-duration: .3s,.3s; -moz-transition-duration: .3s,.3s; -ms-transition-duration: .3s,.3s;-o-transition-duration: .3s,.3s; transition-duration: .3s,.3s;-webkit-transition-delay: .3s,0s;-moz-transition-delay: .3s,0s;-ms-transition-delay: .3s,0s;-o-transition-delay: .3s,0s; transition-delay: .3s,0s}
.menubtn span:before {top: -9px;-webkit-transition-property: top,transform;-moz-transition-property: top,transform;-ms-transition-property: top,transform;-o-transition-property: top,transform;transition-property: top,transform;}
.menubtn span:after {bottom: -9px;-webkit-transition-property: bottom,transform;-moz-transition-property: bottom,transform;-ms-transition-property: bottom,transform;-o-transition-property: bottom,transform;
transition-property: bottom,transform;}
.menubtn.active span {background-color: transparent;-webkit-transition-delay: 0s,0s;-moz-transition-delay: 0s,0s;-ms-transition-delay: 0s,0s;-o-transition-delay: 0s,0s;transition-delay: 0s,0s}
.menubtn.active span:after,.menubtn.active span:before {-webkit-transition-delay: 0s,.3s;-moz-transition-delay: 0s,.3s; -ms-transition-delay: 0s,.3s; -o-transition-delay: 0s,.3s; transition-delay: 0s,.3s}
.menubtn.active span:before {top: 0px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg)}
.menubtn.active span:after {bottom:0px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
.navigation{ width: 100%; height: 100%; position: fixed; left: 100%; top: 0; background: #3370c1 url(../images/navsbg.png) right bottom no-repeat; overflow-y: auto; box-sizing: border-box; padding-bottom: 30px; z-index: 3; transition: 0.7s cubic-bezier(0.7, 0, 0.3, 1);}
.navigation.show{ left: 0;}
.navigation:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(to right,rgba(24,51,126,0.6) 0%,rgba(0,141,65,0.6) 100%); z-index: -1;}
.navigates{ margin-left: 11.4%; margin-top: 100px;}
.navigates >li{ margin-bottom: 20px;}
.navigates >li >a{ display: inline-block; color: #fff; font-size: 20px; font-weight: bold;}
.leval-menu{ display: none;}
.leval-menu li{ float: left; margin-right: 20px;}
.leval-menu li a{ display: inline-block; color: #fff; font-size: 16px;}


.slick-list { overflow: hidden; width: 100%; height: 100%; }
.slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; }
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both;}
.banner11{ position: relative; z-index: 2; overflow: hidden; height: 100vh;}
.banner11-tab{ position: relative; z-index: 2;}
.banner11-item{ float: left; position: relative;}
.banner11-item figure{ display: block; overflow: hidden;}
.banner11-item figure img{ display: block; position: relative; transform: scale(1.1); width: 100%; height: auto;}
.banner11-text{ position: absolute; left: 9.6875vw; bottom: 144px; z-index: 5;}
.bhide{ overflow: hidden;}
.banner11-text small{ display: block; line-height: 1; color: #fff; font-size: 16px; font-family: "DINCond-Bold_1"; opacity: 0; visibility: hidden; transform: translateY(100%); }
.banner11-text strong{ display: block; line-height: 1; color: #FFFFFF; text-transform:uppercase;font-family: "DINCond-Bold_1"; font-weight: normal; margin-bottom: 28px; margin-top: 5px; font-size: 70px; opacity: 0; visibility: hidden; transform: translateY(100%); }
.banner11-text p{ color: #fff; font-size: 24px; font-weight: bold; line-height: 1; opacity: 0; visibility: hidden; transform: translateY(100%);}
.banner11-item.slick-current figure img{ transform: scale(1); transition: transform 3700ms ease-in-out;}
.banner11-item.slick-current .banner11-text small,.banner11-item.slick-current .banner11-text strong,.banner11-item.slick-current .banner11-text p{ opacity: 1; visibility: visible; transform: translateY(0px); transition: 0.5s 0.12s;}
.banner11-item.slick-current .banner11-text strong{ transition-delay: 0.4s;}
.banner11-item.slick-current .banner11-text p{ transition-delay: 0.72s;}
.banner11-btns{ position: absolute; left: 9.6875vw; bottom: 5px; z-index: 10;}
.common-btn span,.equipment-list .slick-arrow{ margin-right: 1px; float: left; display: block; width: 50px; height: 50px; text-align: center; line-height: 50px; cursor: pointer; color: #fff; font-size: 16px; transition: 0.4s; background-color: #b7b7b9;}
.equipment-list .slick-arrow{ border: none; cursor: pointer; text-indent: 99999px; position: absolute; top: -130px; right: 0;}
.equipment-list .slick-arrow.slick-prev{ right: 51px;}
.equipment-list .slick-arrow.slick-prev{ background:#9c9c9c url(../images/prev.png) center no-repeat;}
.equipment-list .slick-arrow.slick-next{ background:#9c9c9c url(../images/next.png) center no-repeat;}
.common-btn span:hover,.equipment-list .slick-arrow:hover{ background-color: #9c9c9c;}
.common-btn span.prev:hover{ text-indent: -4px;}
.common-btn span.next:hover{ text-indent: 4px;}

.banner11-load{ width: 100%; height: 5px; background-color: #3e93e4; position: absolute; left: 0; bottom: 0; z-index: 10;}
.banner11-load span{ display: block; width: 20%; height: 100%; background-color: #015198;}

.graphene{ position: relative; z-index: 3;}
.graphene .graphene-wrap{
	background: url("../images/af.png") #f7f7f7 91% bottom no-repeat;
}
.graphene:before{ content: ""; width: 50%; position: absolute; top: 0; right: 0; bottom: 0; background-color: #fff; z-index: -1;}
.graphene-content{ position: relative; width: 50%; float: right;}
.graphene-content .dynamic-more{ width: 67px; height: 67px; right: 150px; top: 112px; z-index: 6; background-color: #EAEAEA;}
.graphene-content .dynamic-more i:before,.graphene-content .dynamic-more i:after{ background-color: #CCCCCC;}
.graphene-content .dynamic-more:hover{ background-color: #015198; border-color: #015198;}
.graphene-content .dynamic-more:hover i{ transform: rotate(180deg);}
.graphene-wr{ padding: 9.537vh 6.7708vw 0;}
.common-title small{ margin-bottom: 8px; display: block; line-height: 1; color: #015198; font-size: 60px; font-family: "DINCond-Bold_1";}
.common-title strong{ display: block; line-height: 1; color: #333333; font-size: 24px; line-height: 1.2;}
.common-title p{ margin-top: 26px; color: #777777; font-size: 16px; text-align: justify; width: 552px; max-width: 100%; height: 139px; overflow: hidden;}
.graphene-img{ margin-top: 64px;}
.graphene-text{ float: left;}
.graphene-images{ float: left; width: 278px;}
.graphene-images img{ display: block; width: 100%; height: auto;}
.graphene-images img.mb{ display: none;}
.graphene-text{ float: left; position: relative; margin-top: 40px;}
.graphene-item{ margin-left: -7px;}
.graphene-item span{ position: relative; display: block; padding-left: 73px; line-height: 1; color: #999999; font-size: 10px;}
.graphene-item span:before{ content: ""; width: 67px; height: 1px; background-color: #CCCCCC; position: absolute; left: 0; top: 50%;}
.graphene-1{ margin-bottom: 15px;}
.graphene-2{ margin-bottom: 4px;}
.graphene-3{ margin-bottom: 8px;}
.graphene-4{ margin-left: -14px; margin-bottom: 7px;}
.graphene-4 span{ padding-left: 82px;}
.graphene-4 span:before{ width: 75px;}
.graphene-5{ margin-bottom: 3px;}
.graphene-6{ margin-left: 0;}
.graphene-6 span{ padding-left: 66px;}
.graphene-6 span:before{ width: 60px;}

.graphene-tab{ float: left; width: 50%;}
.graphene-info{ float: left; width: 100%; opacity: 1 !important; -webkit-animation: hide 0.6s forwards ease-in-out; animation: hide 0.6s forwards ease-in-out; -moz-animation: hide 0.6s forwards ease-in-out; -o-animation: hide 0.6s forwards ease-in-out; z-index: 3 !important;}
.graphene-info-hidde{ width: 100%; overflow: hidden; animation: none; -webkit-animation: none; -moz-animation: none; -o-animation: none;}
.graphene-info.slick-current{ z-index: 4 !important; animation: none; -webkit-animation: none; -moz-animation: none; -o-animation: none;}
.graphene-info.slick-current .graphene-info-hidde{ -webkit-animation: increaseHeight 0.6s forwards ease-in-out; animation: increaseHeight 0.6s forwards ease-in-out; -moz-animation: increaseHeight 0.6s forwards ease-in-out; -o-animation: increaseHeight 0.6s forwards ease-in-out;}

@-webkit-keyframes decreaseHeight {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		width: 0;
	}
}

@keyframes decreaseHeight {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		width: 0;
	}
}

@-webkit-keyframes show {
	0% {
		opacity: 0;
	}
	1%,100% {
		opacity: 1;
	}
}

@keyframes show {
	0% {
		opacity: 0;
	}
	1%,100% {
		opacity: 1;
	}
}

@-webkit-keyframes hide {
	0%,99% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes hide {
	0%,99% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes increaseHeight {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

@keyframes increaseHeight {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

.graphene-info figure{ width: 100%; width: 50vw; height: 575px; background-position: center; background-size: cover;}
.graphene-list{ padding: 77px 0; text-align: center; font-size: 0;}
.graphene-list li{ display: inline-block; margin-left: 150px; margin-left: 11vw; text-align: center; cursor: pointer;}
.graphene-list li:first-child{ margin-left: 0;}
.graphene-list li i{ display: block; text-align: center; line-height: 1; color: #CCCCCC; font-size: 49px; font-style: normal; transition: 0.36s;}
.graphene-list li .icon{
	width: 48px;
	height: 44px;
	margin: 0 auto;
	transition: 0.36s;
	-webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); -webkit-animation: gelatine 0.5s 1; animation: gelatine 0.5s 1;
}
.graphene-list li .icon1{
	width:41px;
	background: url("../images/icon1.png") 0 -44px no-repeat;
}
.graphene-list li:hover .icon1{
	background: url("../images/icon1.png") 0 0px no-repeat;
}
.graphene-list li .icon2{
	width:42px;
	background: url("../images/icon2.png") 0 -44px no-repeat;
}
.graphene-list li:hover .icon2{
	background: url("../images/icon2.png") 0 0px no-repeat;
}
.graphene-list li .icon3{
	width:52px;
	background: url("../images/icon3.png") 0 -44px no-repeat;
}
.graphene-list li:hover .icon3{
	background: url("../images/icon3.png") 0 0px no-repeat;
}
.graphene-list li .icon4{
	width:44px;	
	background: url("../images/icon4.png") 0 -44px no-repeat;
}
.graphene-list li:hover .icon4{
	background: url("../images/icon4.png") 0 0px no-repeat;
}
.graphene-list li .icon5{
	width:43px;		
	background: url("../images/icon5.png") 0 -44px no-repeat;
}
.graphene-list li:hover .icon5{
	background: url("../images/icon5.png") 0 0px no-repeat;
}
.graphene-list li .icon6{
	width: 38px;
	background: url("../images/icon6.png") 0 -44px no-repeat;
}
.graphene-list li:hover .icon6{
	background: url("../images/icon6.png") 0 0px no-repeat;
}



.graphene-list li span{ margin-top: 14px; display: block; text-align: center; color: #999999; font-size: 16px; line-height: 1.2; transition: 0.36s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.graphene-list li:hover i,.graphene-list li.active i{ color: #015198; -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); -webkit-animation: gelatine 0.5s 1; animation: gelatine 0.5s 1;}
.graphene-list li:hover span{ color: #015198;}
.graphene-list li span{

}
@keyframes gelatine {
  from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }

  25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }

  50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }

  75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }

  from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }

  25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }

  50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }

  75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
}

@-webkit-keyframes gelatine {
  from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }

  25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }

  50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }

  75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }

  from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }

  25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }

  50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }

  75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
}

.technology{ background-color: #FAFAFA;}
.technology{ position: relative;}
.technoloy-video{ position: relative; float: right; width: 50%; height: 575px;}
.vidoes{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover;}
.video-btns{ width: 65px; height: 65px; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-left: -28px; margin-top: -28px; cursor: pointer; z-index: 3;}
.video-btns:before{ content: ""; width: 65px; height: 65px; position: absolute; left: 0; top: 0; border: 50%; background: #fff; background: rgba(255, 255, 255, 0.3); z-index: -1; border-radius: 50%; transition: 0.2s;}
.video-btns span{ display: block; width: 49px; height: 49px; border-radius: 50%;  background-color: #224DC4; margin-left: 8px; margin-top: 8px;}
.video-btns i{ position: absolute; left: 50%; top: 50%; margin-left: -5px; margin-top: -6px; display: block; width: 10px; height: 12px; background: url(../images/arrow.png) center no-repeat;}
.video-btns.play i{ background: url(../images/play.png) center no-repeat;}
.video-btns:hover:before{ width: 71px; height: 71px; left: -3px; top: -3px;}

.technoloy-content{ width: 50%;}
.technoloy-wrap{ padding: 100px 9.6875vw 0;}
.technoloy-data{ margin-top: 62px; overflow: hidden;}
.technoloy-data-item{ float: left; margin-right: 40px;}
.technoloy-data-item:last-child{ margin-right: 0;}
.technoloy-data-item span{ display: block; line-height: 1.2; color: #333; margin-bottom: 10px;
	font-size: 14px;}
.technoloy-data-item p{ color: #777777; font-size: 12px; line-height: 1;}
.technoloy-data-item p b{ display: inline-block; margin-right: 5px; color: #015198; font-size: 40px; font-family: "DINPro-Light"; font-weight: normal;}
.technoloy-more{ padding-top: 112px;}
.technoloy-more a{ display: block; width: 67px; height: 67px; background-color: #EAEAEA; position: relative; transition: 0.4s;}
.technoloy-more a i{ display: block; width: 14px; height: 14px; position: absolute; left: 50%; top: 50%; margin-left: -7px; margin-top: -7px; transition: 0.35s;}
.technoloy-more a i:before{ content: ""; width: 100%; height: 2px; background-color: #CCCCCC; position: absolute; left: 0; top: 50%; margin-top: -1px; border-radius: 2px; transition: 0.35s;}
.technoloy-more a i:after{ content: ""; width: 2px; height: 100%; background-color: #CCCCCC; position: absolute; left: 50%; margin-left: -1px; top: 0px; border-radius: 2px; transition: 0.35s;}
.technoloy-more a:hover{ background-color: #015198;}
.technoloy-more a:hover i{ transform: rotate(180deg);}
.technoloy-more a:hover i:before,.technoloy-more a:hover i:after{ background-color: #fff;}

.equipment{ padding: 100px 9.6875vw 85px;background: #f7f7f7}
.equipment-top{ margin-bottom: 50px;}
.equipment-top .common-title{ float: left;}
.equipment-top .common-btn{ float: right; margin-top: 50px;}
.equipment-bo{ position: relative;}

.equipment-list.show{ opacity: 1; visibility: visible; position: relative;}
.equipment-list{ opacity: 0; visibility: hidden; position: absolute; top: 0; left: -10px; right: -10px; z-index: 2;}
.equipment-item{ width: 25%; float: left;}
.equipment-item figure{ margin: 0 10px;}
.equipem-hidden{ display: block; display: block; line-height: 1; overflow: hidden; background: none;}
.equipem-hidden img{ display: block; width: 100%; height: auto; transition: 0.6s;}
.equipment-item span{ margin-top: 15px; display: block; line-height: 1; color: #777777; font-size: 14px; transition: 0.4s;}
.equipment-item figure:hover .equipem-hidden img{ transform: scale(1.06);}
.equipment-item figure:hover span{ color: #015198;}
.equipentsbtn span{ width: auto; padding: 0 20px;}
.equipentsbtn span.active{ background-color: #015198;}
.equipment-list .slick-dots,.product-list .slick-dots{ width: 100%; margin-top: 30px; z-index: 10; line-height: 1; text-align: center;}
.equipment-list .slick-dots li,.product-list .slick-dots li{ display: inline-block; margin-left: 16px;}
.equipment-list .slick-dots li:first-child,.product-list .slick-dots li:first-child{ margin-left: 0;}
.equipment-list .slick-dots li button,.product-list .slick-dots li button{ padding: 0; border: none; width: 12px; height: 12px; border-radius: 50%; text-indent: 88888px; overflow: hidden; background-color: #224DC4; transition: 0.4s; cursor: pointer; outline: none;}
.equipment-list .slick-dots li.slick-active button,.product-list .slick-dots li.slick-active button{ background-color: #015198;}
.equitebtns b{ cursor: pointer; transition: 0.4s;}
.equitebtns b:hover,.equitebtns b.active{ color: #015198;}

.product-black{ padding: 82px 9.6875vw 124px; background-color: #fff;}
.product-list{ padding-left: -1px; margin-left: -1px;}
.product-item{ width: 25%; float: left; background-color: #fff;}
.product-item a{ display: block; border: 1px solid #EAEAEA; padding-bottom: 30px; position: relative; overflow: hidden; background-color: #fff;}
.product-wrap{ position: relative; top: 0; transition: 0.5s;}
.product-wrap figure{position: relative;margin-bottom: 6px;display: block;padding-bottom: 80%;overflow: hidden;text-align: center;line-height: 1;}
.product-wrap figure img{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 90%; transition: 0.6s;}
.product-content{ text-align: center;}
.product-content strong{ margin-bottom: 10px; display: block; line-height: 1; color: #333333; font-size: 18px; font-weight: normal;}
.product-content p{width: 80%;text-align: center;line-height: 1.3;color: #999999;overflow: hidden;height: 30px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin: auto;word-spacing: normal;}
.productmore{ position: absolute; left: 50%; margin-left: -33px; bottom: 0; display: block; width: 67px; height: 67px; background-color: #015198; transition: 0.4s; opacity: 0; visibility: hidden; transition: 0.45s;}
.productmore i{ display: block; width: 14px; height: 14px; position: absolute; left: 50%; top: 50%; margin-left: -7px; margin-top: -7px; transition: 0.35s;}
.productmore i:before{ content: ""; width: 100%; height: 2px; background-color: #fff; position: absolute; left: 0; top: 50%; margin-top: -1px; border-radius: 2px; transition: 0.35s;}
.productmore i:after{ content: ""; width: 2px; height: 100%; background-color: #fff; position: absolute; left: 50%; margin-left: -1px; top: 0px; border-radius: 2px; transition: 0.35s;}
.productmore:hover i{ transform: rotate(360deg);}
.product-item a:hover figure img{ transform: scale(0.9);}
.product-item a:hover .product-wrap{top: -40px;}
.product-item a:hover .productmore{ opacity: 1; visibility: visible; transition-delay: 0.2s;}
.product-item a:hover .productmore i{ transform: rotate(180deg); transition-delay: 0.2s;}
.core-technology{ position: relative; padding-bottom: 49.47%; background-attachment: fixed; background-position: center; background-size: cover;}
.core-technology-content{ position: absolute; left: 9.6354vw; top: 50%; margin-top: -178px;}
.core-technology-content .common-title small{ color: #015198;}
.core-technology-content .common-title strong{ color: #fff;}
.core-technology-content .common-title p{ color: #fff;}

.core-more{ position: relative; margin-top: 92px; display: block; width: 65px; height: 65px; border: 1px solid #EAEAEA; transition: 0.4s;}
.core-more i{ display: block; width: 14px; height: 14px; position: absolute; left: 50%; top: 50%; margin-left: -7px; margin-top: -7px; transition: 0.35s;}
.core-more i:before{ content: ""; width: 100%; height: 2px; background-color: #CCCCCC; position: absolute; left: 0; top: 50%; margin-top: -1px; border-radius: 2px; transition: 0.35s;}
.core-more i:after{ content: ""; width: 2px; height: 100%; background-color: #CCCCCC; position: absolute; left: 50%; margin-left: -1px; top: 0px; border-radius: 2px; transition: 0.35s;}
.core-more:hover{ border-color: #015198; background-color: #015198;}
.core-more:hover i{ transform: rotate(180deg);}
.core-more:hover i:before,.core-more:hover i:after{ background-color: #fff;}

.core-technology-list{ width: 960px; position: absolute; right: 0; top: 0; height: 100%; display: flex; display: -webkit-flex; font-size: 0;}
.core-items{ width: 33.3333%; height: 100%; display: inline-block; position: relative; background-color: rgba(0,0,0,0.18); z-index: 3;}
.core-items:before{ content: ""; width: 100%; height: 0; position: absolute; left: 0; bottom: 0; background-color: rgba(0, 141, 65, 0.59); z-index: -1; transition: 0.6s cubic-bezier(0.7, 0, 0.3, 1);}
.core-items:hover:before{ height: 100%;}
.core-items:hover .core-item-content figure img{ transform: scale(1.06);}
.core-item-content{ position: absolute; left: 45px; right: 45px; top: 50%; margin-top: -188px;}
.core-item-content figure{ display: block; line-height: 1; overflow: hidden;}
.core-item-content figure img{ display: block; width: 100%; height: auto; transition: 0.6s;}
.core-item-text{ margin-top: 32px;}
.core-item-text strong{ margin-bottom: 18px; display: block; line-height: 1.2; color: #fff; font-size: 20px; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.core-item-text p{ color: #fff; font-size: 14px; overflow: hidden; text-align: justify; height: 100px;}
.core-item-text span{ margin-top: 32px; display: inline-block; color: #fff; font-size: 14px; font-family: "DINCond-Medium";}

.customer{ padding: 88px 9.6875vw 100px;}
.common-title1{ text-align: center;}
.cases{ margin-top: 62px;}
.case-info{ width: 24.83%; float: left; position: relative; margin-left: 0.22666%; margin-bottom: 4px;}
.case-info a{ display: block;}
.case-info:first-child{ margin-left: 0; margin-bottom: 0;}
.case-common{ position: relative;}
.case-common figure{ display: block; line-height: 1; overflow: hidden;}
.case-common figure img{ display: block; width: 100%; height: auto; transition: 0.68s;}
.case-titles{ position: absolute; left: 0; bottom: 0; width: 100%; padding: 51px 0 14px; background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); transition: 0.5s;}
.case-titles span{ display: block; line-height: 1; padding: 0 22px; color: #fff; font-size: 16px;} 
.case-info:first-child .case-titles{ padding: 152px 0 14px; background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.59) 100%);}
.case-mark{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.case-mark:before{ content: ""; width: 100%; height: 0; position: absolute; left: 0; top: 0; background-color: rgba(36, 35, 35, 0.59); transition: 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.case-mark:after{ position: absolute; right: 0; bottom: 0; content: ""; width: 0; height: 5px; background-color: #015198; transition: 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.case-mark span{ width: 100%; text-align: center; position: absolute; left: 0; top: 50%; margin-top: -8px; color: #fff; font-size: 16px; line-height: 1; opacity: 0; visibility: hidden; transition: 0.4s;}
.case-mark span i{ position: relative; top: 1px; margin-left: 7.5px; display: inline-block; width: 14px; height: 14px;} 
.case-mark span i:before{ content: ""; width: 100%; height: 1px; background-color: #fff; position: absolute; left: 0; top: 6px; transform: translateX(15px); opacity: 0; visibility: hidden; transition: 0.38s;}
.case-mark span i:after{ content: ""; width: 1px; height: 100%; background-color: #fff; position: absolute; left: 7px; top: 0; transform: translateY(15px); opacity: 0; visibility: hidden; transition: 0.38s;}
.case-common:hover figure img{ transform: scale(1.05); -webkit-transform: scale(1.05);}
.case-common:hover .case-mark:before{ height: 100%;}
.case-common:hover .case-mark:after{ width: 100%; right: auto; left: 0;}
.case-common:hover .case-titles{ opacity: 0; visibility: hidden;}
.case-common:hover .case-mark span{ opacity: 1; visibility: visible; transition-delay: 0.25s;}
.case-common:hover .case-mark span i{ opacity: 1; visibility: visible; transition-delay: 0.25s;}
.case-common:hover .case-mark span i:before,.case-common:hover .case-mark span i:after{ opacity: 1; visibility: visible; transform: translate(0px); transition-delay: 0.25s;}
.case-list{ width: 75.17%; float: left;}
.case-list li{ float: left; width: 33.33333%;}
.case-list li a{ display: block; margin-left: 4px; margin-bottom: 4px; position: relative;}
.case-info.case-last a{ display: block; padding-bottom: 61.2%; background-color: #224DC4;}
.case-info.case-last .case-common{ position: absolute; width: 100%; height: 100%;}
.case-info.case-last .case-mark:before{ display: none;}
.case-info.case-last .case-mark span{ opacity: 1; visibility: visible;}
.case-info.case-last .case-mark span i{ opacity: 1; visibility: visible;}
.case-info.case-last .case-mark span i:before,.case-info.case-last .case-mark span i:after{ opacity: 1; visibility: visible; transform: translate(0px);}

.dynamics{ padding: 61px 9.6875vw 100px;}
.dynamics-main{ margin-top: 62px;}
.dynamic-infos{ width: 31.61%; position: relative; float: left;}
.dynamic-infos .dynamic-img{ position: relative; display: block; line-height: 1; overflow: hidden; padding-bottom: 300px;}
.dynamic-infos .dynamic-img figure{ display: block; background-position: center; background-size: cover; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.65s;}
.dynamics-text{ position: relative; padding: 24px 29px 26px; border: 1px solid #F1F1F1;}
.dynamics-text strong{ margin-bottom: 9px; display: block; line-height: 1.2; color: #333333; font-size: 20px; font-weight: normal; transition: 0.38s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.dynamics-text p{ height: 50px; overflow: hidden; color: #666666; font-size: 14px; width: 345px; max-width: 80%; }
.dynamic-more{ display: block; width: 48px; height: 48px; border: 1px solid #EAEAEA; position: absolute; right: -1px; bottom: -1px; transition: 0.4s;}
.dynamic-more i{ width: 19px; height: 19px; position: absolute; left: 50%; top: 50%; margin-left: -9px; margin-top: -9px; transition: 0.35s;}
.dynamic-more i:before{ position: absolute; left: 0; top: 9px; content: ""; width: 100%; height: 1px; background-color: #EAEAEA; transition: 0.32s;}
.dynamic-more i:after{ position: absolute; left: 9px; top: 0; content: ""; width: 1px; height: 100%; background-color: #EAEAEA; transition: 0.32s;}
.dynamic-infos a:hover .dynamic-img figure{ transform: scale(1.05);}
.dynamic-infos a:hover .dynamics-text strong{ color: #015198;}
.dynamic-infos a:hover .dynamics-text .dynamic-more{ background-color: #015198; border: #015198;}
.dynamic-infos a:hover .dynamics-text .dynamic-more i{ transform: rotate(180deg);}
.dynamic-infos a:hover .dynamics-text .dynamic-more i:before,.dynamic-infos a:hover .dynamics-text .dynamic-more i:after{ background-color: #fff;}

.dynamics-list{ margin-left: 2.58%; width: 31.61%; float: left;}
.dynamics-item{ position: relative; border: 1px solid #F1F1F1; padding: 35px 34px 22px;}
.dynamics-item:first-child{ margin-bottom: 29px;}
.dynamics-item a{ display: block;}
.dynamics-item strong{  margin-bottom: 9px; display: block; line-height: 1.2; color: #333333; font-size: 20px; font-weight: normal; transition: 0.38s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.dynamics-item p{ height: 50px; overflow: hidden; color: #666666; font-size: 14px; width: 345px; max-width: 80%;}
.dynamics-item time{ margin-top: 47px; display: block; line-height: 1; color: #999999; font-size: 14px;} 
.dynamics-item a:hover strong{ color: #015198;}
.dynamics-item a:hover .dynamic-more{ background-color: #015198; border: #015198;}
.dynamics-item a:hover .dynamic-more i{ transform: rotate(180deg);}
.dynamics-item a:hover .dynamic-more i:before,.dynamics-item a:hover .dynamic-more i:after{ background-color: #fff;}
.problem{ width: 31.61%; float: right; box-sizing: border-box; background-color: #FAFAFA;}
.problem-wrap{ border: 1px solid #F1F1F1; padding: 35px 14% 40px 42px;}
.problem-tt{ position: relative; display: block; color: #224DC4; font-size: 20px; font-weight: bold; line-height: 1; padding-left: 14px;}
.problem-tt:before{ content: ""; width: 5px; height: 20px; background-color: #015198; position: absolute; left: 0; top: 50%; margin-top: -10px;}
.problem-list{ margin-top: 28px;}
.problem-list li{ margin-bottom: 19px;}
.problem-list li:last-child{ margin-bottom: 0;}
.problem-list li time{ display: block; line-height: 22px; width: 57px; float: left; color: #999999; font-size: 14px;}
.problem-list li span{ display: block; margin-left: 57px; color: #666666; font-size: 16px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.35s;}
.problem-list li a:hover span{ color: #015198;}
.dynamics-more{ margin-top: 64px; text-align: center;}
.dynamics-more a{ display: block; width: 140px; height: 46px; text-align: center; line-height: 46px; margin: auto; color: #fff; font-size: 14px; background-color: #015198;}
.dynamics-more a:hover{ background-color: #01447f;}

.service-process{ padding: 87px 9.6875vw 72px; background-color: #FAFAFA;}
.services-list{ margin-left: -102px; margin-top: 60px; margin-right: -102px;}
.services-item{ position: relative; width: 16.6666%; float: left; text-align: center;}
.services-item img{ display: block; margin: auto; height: 47px; width: auto; transition: 0.35s;}
.services-item span{ display: block; margin-top: 18.5px; text-align: center; line-height: 1; color: #333333; font-size: 20px;} 
.services-item i{ position: absolute; right: -7px; top: 15px; display: block; line-height: 1; color: #CCCCCC; font-size: 24px;} 
.services-item:last-child i{ display: none;}
.services-item:hover img{ transform: translateY(-5px);}
.serves-btn{ text-align: center; margin-top: 58px;}
.serves-btn p{ text-align: center; line-height: 1; color: #333333; font-size: 14px;}
.serves-btn p b{ color: #015198;}
.service-address{ margin-top: 8px; text-align: center;}
.service-address i{ display: inline-block; color: #224DC4;; font-size: 16px; font-style: normal; position: relative; top: 2px;} 
.service-address p{ margin-left: 4.5px; display: inline-block; color: #224DC4; font-size: 12px; line-height: 16px; border-bottom: 1px solid #224DC4;}
.serves-btn .service-href{ margin: auto; margin-top: 26px; display: block; width: 140px; height: 46px; line-height: 46px; text-align: center; background-color: #015198; color: #fff; font-size: 14px;}
.serves-btn .service-href:hover{ background-color: #02642F;}

.message11{ width: 50%; float: left; position: relative; background-color: #015198;}
.message11-m{ position: absolute; right: -30px; top: 0; height: 100%;}
.message11-m img{ display: block; height: 100%; width: auto;}
.message11-wrap{ padding: 75px 21.87% 78px 9.6875vw;}
.message11-title{ margin-bottom: 45px;}
.message11-title strong{ margin-bottom: 13px; display: block; line-height: 1; color: #fff; font-size: 24px;}
.message11-title p{ color: #b8c5d9; font-size: 14px; line-height: 1.5;}
.message11-row{ margin-bottom: 17.5px;}
.message11-row .text,.message11-textarea .metext{ float: left; padding: 0; border: none; outline: none; width: 32%; margin-left: 2%; padding-bottom: 11px; line-height: 18px; color: #b8c5d9; font-size: 14px; height: 18px; background: none; border-bottom: 1px solid #b8c5d9;}
.message11-row input::-webkit-input-placeholder{ color: #fff;}
.message11-row input:focus::-webkit-input-placeholder{ opacity: 0;}
.message11-row .text:first-child{ margin-left: 0;}
.message11-textarea .metext{ width: 100%; margin-left: 0; height: 36px; resize: none; font-family: "微软雅黑"; float: none;}
.message11-textarea .metext::-webkit-input-placeholder{ color: #fff;}
.message11-textarea .metext:focus::-webkit-input-placeholder{ opacity: 0;}
.message11-sub{ margin-top: 28px;}
.message11-sub #submit{ border: 1px solid #b8c5d9; outline: none; cursor: pointer; display: block; width: 140px; height: 46px; text-align: center; line-height: 46px; color: #fff; font-size: 14px; background-color: #015198; transition: 0.4s;}
.message11-sub #submit:hover{ background-color: #015198;}
.cooperative{ width: 50%; float: left;}
.cooperative-img{ position: relative; padding-bottom: 300px; background-size: cover; background-position: center;}
.cooperaive-tt{ position: absolute; left: 6.6667vw; top: 50%; margin-top: -47px;}
.cooperaive-tt small{ margin-bottom: 10px; display: block; line-height: 1; color: #fff; font-size: 60px; font-family: "DINCond-Bold_1";} 
.cooperaive-tt strong{ display: block; line-height: 1; color: #fff; font-size: 24px; font-weight: bold;}
.cooperate-address{ position: relative; background-color: #333; padding: 46px 0 44.5px; border-bottom: 1px solid #4d4d4d;}
.cooperative-wrap{ text-align: center;}
.cooperaive-item{ display: inline-block; margin-left: 14.9%; text-align: left; font-size: 0;}
.cooperaive-item:first-child{ margin-left: 0;}
.cooperaive-item span{ margin-bottom: 10px; display: block; line-height: 1; color: #fff; font-size: 12px; text-transform: uppercase;}
.cooperaive-item span i{ margin-right: 5px; display: inline-block; color: #fff; font-size: 12px;}
.cooperaive-item p{ color: #b3b3b3; font-size: 12px; line-height: 1.4;}
.scolltop{ width: 50px; height: 50px; position: absolute; right: 0; bottom: 0; z-index: 5; background-color: #015198; cursor: pointer;}
.scolltop span{ display: block; width: 100%; text-align: center; line-height: 1; color: #fff; font-size: 14px; position: absolute; left: 0; top: 50%; margin-top: -7px; transform: rotate(180deg); transition: 0.35s;}
.scolltop:hover{ background-color: #01447f;}
.scolltop:hover span{ transform: translateY(-4px) rotate(180deg);}
.sub-page .page {
	text-align: center;
	margin-top: 50px
}

.sub-page .page .pagination li {
	float: none;
	display: inline-block
}

.sub-page .page .pagination li a {
	margin: 0 5px;
	/* padding: 6px 15px; */
	color: #000;
	font-size: 16px;
	border-radius: 5px
}

.sub-page .page .pagination li.active a {
	color: #fff;
	background-color: #0054A9;
	border-color: #0054A9
}

.sub-page .page-content p > img, .sub-page .page-content p > span > img {
	max-width: 100%
}

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
	z-index: 3;
	color: #fff;
	background-color: #0054A9;
	border-color: #0054A9;
	cursor: default;
}
.breadcrumb > li, .pagination {
	display: inline-block;
}
.pagination > li > a, .pagination > li > span {
	position: relative;
	float: left;
	padding: 6px 12px;
	line-height: 1.42857;
	text-decoration: none;
	color: #0054A9;
	background-color: #fff;
	border: 1px solid #ddd;
	margin-left: -1px;
	margin: 0 5px;
	padding: 6px 15px;
	color: #0054A9;
	font-size: 16px;
	border-radius: 5px
}
.footer11{ background-color: #333333;}
.footer11-top{ border-bottom: 1px solid #4d4d4d;}
.footer11-navs{ width: 77%; float: left; }
.footer11-nav-wrap{ padding: 65.5px 20px 62px 9.6875vw; }
.footer11-nav-item{ display: block; float: left; width: 12.5%;}
.footer11-nav-item dt{ display: block; margin-bottom: 20px;}
.footer11-nav-item dt a{ display: inline-block; color: #FFFFFF; font-size: 16px; line-height: 1.2; font-weight: normal;}
.footer11-nav-item dd{ display: block;}
.footer11-nav-item dd p{ margin-bottom: 12px;}
.footer11-nav-item dd p:last-child{ margin-bottom: 0;}
.footer11-nav-item dd p a{ display: inline-block; color: #b2b2b2; font-size: 14px; line-height: 1.2;}
.footer11-nav-item dd p a:hover{ color: #fff;}
.service-tel{ float: left; width: 25%; box-sizing: border-box; border-right:1px solid	#4d4d4d;}
.service-tel-wrap{ padding: 70px 0 87px 34%; text-align: left;}
.service-tel-wrap strong{ display: block; color: #FFFFFF; font-size: 30px; font-family: "DINCond-Medium"; font-weight: normal; line-height: 33px;}
.service-tel-wrap strong i{ display: inline-block; margin-right: 8.5px; font-size: 33px; line-height: 1;}
.service-tel-wrap p{ color: #b2b2b2; font-size: 14px; margin-top: 11px; margin-bottom: 27px; line-height: 1.2;}
.service-tel-wrap a{ margin-top: 26px; display: block; width: 140px; height: 46px; line-height: 46px; text-align: center; background-color: #015198; color: #fff; font-size: 14px;}
.service-tel-wrap a:hover{ background-color: #01447f;}
.footer11-eq{ padding-top: 65.5px; text-align: center; width: 22.9%; float: left;
	padding-bottom: 65.5px;border-left: 1px solid #4d4d4d;}
.footer11-eq img{ width: 134px; height: auto; border: 10px solid #fff; margin: auto;}
.footer11-eq p{ text-align: center; line-height: 1; color: #fff; font-size: 14px; margin-top: 12px;}
.footer11-bottom{ padding: 28.5px 9.6875vw;}
.footer11-bottom p{ float: left; color: #b3b3b3; font-size: 14px; line-height: 1.3;}
.footer11-bottom p a{ margin-right: 24px;}
.footer11-bottom a{ display: inline-block; color: #b3b3b3; font-size: 14px; line-height: 1.3;}
.footer11-bottom .network{ float: right;}
.footer11-bottom a:hover{ color: #fff;}

.graphene-tab.article-block,.technoloy-video.article-block{ opacity: 0; visibility: hidden; transform: translateX(-200px); transition: 1s ease-in-out;}
.technoloy-video.article-block{ transform: translateX(200px);}
.graphene-tab.articleShow,.technoloy-video.articleShow{ opacity: 1; visibility: visible; transform: translateX(0px);}
.common-hide{ overflow: hidden;}
.common-title.article-block small,.common-title.article-block strong,.common-title.article-block p{ transform: translateY(100%); -webkit-transform: translateY(100%); visibility: hidden; transition: 0.6s 0.2s;} 
.common-title.article-block strong{ transition-delay: 0.4s;}
.common-title.article-block p{ transition-delay: 0.6s;}
.common-title.articleShow small,.common-title.articleShow strong,.common-title.articleShow p{ transform: translateY(0); -webkit-transform: translateY(0); visibility: visible;}
.graphene-img.article-block .graphene-images{ opacity: 0; visibility: hidden; transform: translateY(80px); transition: 0.66s 0.1s;}
.graphene-img.articleShow .graphene-images{ opacity: 1; visibility: visible; transform: translateX(0px);}
.graphene-text.article-block .graphene-item{ opacity: 0; visibility: hidden; transform: translateX(60px); transition: 0.5s 0.35s;}
.graphene-text.articleShow .graphene-item{ opacity: 1; visibility: visible; transform: translateX(0px);}
.graphene-text.article-block .graphene-item.graphene-2{ transition-delay: 0.5s;}
.graphene-text.article-block .graphene-item.graphene-3{ transition-delay: 0.65s;}
.graphene-text.article-block .graphene-item.graphene-4{ transition-delay: 0.8s;}
.graphene-text.article-block .graphene-item.graphene-5{ transition-delay: 0.95s;}
.graphene-text.article-block .graphene-item.graphene-6{ transition-delay: 1.1s;}
.graphene-list.article-block li{ opacity: 0; visibility: hidden; transform: translateY(60px); transition: 0.6s 0.15s;}
.graphene-list.articleShow li{ opacity: 1; visibility: visible; transform: translateY(0);}
.graphene-list.article-block li:nth-child(2){ transition-delay: 0.3s;}
.graphene-list.article-block li:nth-child(3){ transition-delay: 0.45s;}
.graphene-list.article-block li:nth-child(4){ transition-delay: 0.6s;}
.graphene-list.article-block li:nth-child(5){ transition-delay: 0.75s;}
.graphene-list.article-block li:nth-child(6){ transition-delay: 0.9s;}
.common-btn.article-block{ opacity: 0; visibility: hidden; transform: translateY(60px); transition: 0.65s 0.3s;}
.common-btn.articleShow{ opacity: 1; visibility: visible; transform: translateY(0px);}
.equipment-bo.article-block,.product-list.article-block,.dynamics-more.article-block,.serves-btn.article-block,.promisebox.article-block li{ opacity: 0; visibility: hidden; transform: translateY(80px); transition: 0.78s 0.3s;}
.equipment-bo.articleShow,.product-list.articleShow,.dynamics-more.articleShow,.serves-btn.articleShow,.promisebox.articleShow li{ opacity: 1; visibility: visible; transform: translateY(0px);}
.core-more.article-block{ opacity: 0; visibility: hidden; transform: translateY(56px);}
.core-more.articleShow{ opacity: 1; visibility: visible; transform: translateY(0px);}

.core-technology-list.article-block .core-items{ opacity: 0; visibility: hidden; transform: translateX(100px); transition: 0.8s 0.1s;}
.core-technology-list.articleShow .core-items{ opacity: 1; visibility: visible; transform: translateX(0px);}
.core-technology-list.article-block .core-items:nth-child(2),.promisebox.article-block li:nth-child(2){ transition-delay: 0.4s;}
.core-technology-list.article-block .core-items:nth-child(3),.promisebox.article-block li:nth-child(3){ transition-delay: 0.7s;}
.promisebox.article-block li:nth-child(4){ transition-delay: 1s;}

.cases.article-block .case-info,.dynamic-infos.article-block,.dynamics-item.article-block,.problem.article-block,.services-list.article-block .services-item{ transform: translateX(100px); opacity: 0; visibility: hidden; transition: 0.6s;}
.dynamics-item.article-block{ transition-delay: 0.25s;}
.cases.articleShow .case-info,.dynamic-infos.articleShow,.dynamics-item.articleShow,.problem.articleShow,.services-list.articleShow .services-item{ transform: translateX(0px); opacity: 1; visibility: visible;}
.cases.article-block .case-info:nth-child(2),.services-list.article-block .services-item:nth-child(2){ transition-delay: 0.25s;}
.cases.article-block .case-info:nth-child(3),.dynamics-item:nth-child(2).article-block,.services-list.article-block .services-item:nth-child(3){ transition-delay: 0.5s;}
.cases.article-block .case-info:nth-child(4),.problem.article-block,.services-list.article-block .services-item:nth-child(4){ transition-delay: 0.75s;}
.cases.article-block .case-info:nth-child(5),.services-list.article-block .services-item:nth-child(5){ transition-delay: 1s;}
.cases.article-block .case-info:nth-child(6),.services-list.article-block .services-item:nth-child(6){ transition-delay: 1.25s;}
.cases.article-block .case-info:nth-child(7){ transition-delay: 1.5s;}

.message11.article-block,.cooperative.article-block{ transform: translateX(-150px); opacity: 0; visibility: hidden; transition: 0.78s;}
.cooperative.article-block{ transform: translateX(150px);}
.message11.articleShow,.cooperative.articleShow{ transform: translateX(0px); opacity: 1; visibility: visible; transition: 0.78s;}
.dynamic-info li.article-block,.product-display li.article-block,.fuse-left.article-block figure,.sale-services-wrap.article-block,.promises-text.article-block,.promise-item.article-block{ opacity: 0; visibility: hidden; transform: translateY(80px); transition: 0.7s;}
.dynamic-info li.articleShow,.product-display li.articleShow,.fuse-left.articleShow figure,.sale-services-wrap.articleShow,.promises-text.articleShow,.promise-item.articleShow{ opacity: 1; visibility: visible; transform: translateY(0px);}
.promise-item.article-block:nth-child(2){ transition-delay: 0.3s;}

.pbanner11{ position: relative; margin-top: 100px;}
.pbanner11 figure{ display: block; line-height: 1; overflow: hidden;}
.pbanner11 figure img{ display: block; width: 100%; height: auto;}
.ptext{ position: absolute; left: 50%; margin-left: -600px; top: 50%; margin-top: -56px;}
.phide{ overflow: hidden;}
.ptext small{ display: block; line-height: 1.2; color: #fff; font-size: 70px; font-family: "DINCond-Bold_1";}
.ptext strong{ margin-top: 18px; display: block; line-height: 1; color: #fff; font-size: 24px; font-weight: bold;}
.ptext.article-block small,.ptext.article-block strong{ transform: translateY(100%); visibility: hidden; transition: 0.6s;}
.ptext.article-block strong{ transition-delay: 0.25s;}
.ptext.articleShow small,.ptext.articleShow strong{ transform: translateY(0px); visibility: visible;}
.sale-service-img.article-block{ opacity: 0; visibility: hidden; transform: translateX(-100px); transition: 0.68s;}
.sale-service-img.articleShow{ opacity: 1; visibility: visible; transform: translateX(0px);}

.posite-box{ background-color: #FAFAFA;}
.posite-wrap a,.posite-wrap b{ display: block; float: left; color: #999999; font-size: 14px; height: 40px; overflow: hidden; line-height: 40px;}
.posite-wrap b{ color: #CCCCCC; font-size: 16px; font-weight: normal; margin: 0 14px;}
.posite-wrap a i{ display: inline-block; color: #333333; font-size: 15px; font-style: normal; margin-right: 15px;}
.posite-wrap a:hover{ color: #015198;}
.menu-wrap{ padding: 50px 0 47px; text-align: center;}
.menu-list{ display: inline-block; margin: auto; font-size: 0;}
.menu-list li{ position: relative; float: left; margin-left: 20px;margin-top: 20px; perspective: 500px;}
.menu-list li:before{ content: ""; width: 100%; height: 100%; background-color: #015198; position: absolute; left: 0; top: 0; transform-origin: center top; transform: rotateX(-70deg); opacity: 0; visibility: hidden; transition: 0.45s;}
/* .menu-list li:first-child{ margin-left: 0;} */
.menu-list li a{ position: relative; z-index: 2; display: block; min-width: 180px;padding:0 10px; height: 58px; line-height: 58px; text-align: center; border: 1px solid #EAEAEA; color: #333333; font-size: 16px;}
.menu-list li:hover:before,.menu-list li.active:before{ transform: rotateX(0deg); opacity: 1; visibility: visible;}
.menu-list li:hover a,.menu-list li.active a{ color: #fff;}
.introduct-img img{ display: block; width: 100%; height: auto;}
.olefin-technologys{ padding-bottom: 100px; background: url(../images/abouttu.png) right bottom no-repeat;}
.olefin-wrap{ position: relative; width: 788px; padding-right: 85px; padding-top: 50px; margin-top: -97px; z-index: 3;}
.olefin-wrap:before{ content: ""; width: 100%; height: 150px; background-color: #fff; position: absolute; left: 0; top: 0; z-index: -1;} 
.introduct-text{ margin-top: 35px;}
.introduct-content{ margin-bottom: 42px;}
.introduct-content p{ margin-bottom: 15px; color: #666666; font-size: 14px; text-align: justify;}
.about-data{ margin-top: 0;}
.about-data .technoloy-data-item{ margin-right: 100px;}
.about-data .technoloy-data-item p b{ color: #015198;}
.history{ padding: 90px 0 180px; background-position: center; background-attachment: fixed; background-size: cover;}
.history-wrap{ position: relative; margin-top: 76px;}
.history-wrap:before{ position: absolute; left: 0; top: 52px; content: ""; width: 100%; height: 1px; background-color: #fff; }
.history-tab{ position: relative;}
.history-btn{ width: 50px; height: 50px; position: absolute; top: 28px; cursor: pointer; text-align: center; line-height: 50px; background-color: #224DC4; color: #fff; font-size: 18px; z-index: 10; transition: 0.4s;}
.history-btn.prev{ left: -110px;}
.history-btn.prev:hover{ background-color: #015198; text-indent: -3px;}
.history-btn.next{ right: -110px;}
.history-btn.next:hover{ background-color: #015198; text-indent: 3px;}
.history-swiper{ margin-left: -13px; margin-right: -13px;}
.history-item{ width: 25%; float: left;}
.history-margin{ margin: 0 13px;}
.history-time{ position: relative; display: block; color: #fff; font-size: 24px; font-weight: bold; line-height: 1; padding-bottom: 30px; margin-bottom: 23px;}
.history-time:before{ content: ""; width: 15px; height: 15px; border-radius: 50%; background-color: #fff; position: absolute; left: 0; bottom: 0px;} 
.history-time b{ position: relative; top: 3px; margin-right: 7px; font-size: 30px; line-height: 1; display: inline-block; font-family: "DINCond-Medium"; font-weight: normal;}
.history-text{ position: relative; z-index: 5; padding: 22px 23px 30px; background-color: #fff; border-radius: 0 20px 20px 20px; box-shadow: 0 3px 6px rgba(0,0,0,0.16); transition: 0.56s;}
.history-text:before{ content: ""; width: 0; height: 100%; position: absolute; right: 0; top: 0; border-radius: 0 20px 20px 20px; background-color: #015198; z-index: -1; transition: 0.68s;}
.history-text span{ margin-bottom: 10px; display: block; line-height: 1.1; color: #224DC4; font-size: 18px; font-weight: bold; transition: 0.4s;}
.history-text p{ color: #666666; font-size: 14px; line-height: 1.5; text-align: justify; transition: 0.4s;}
.history-margin:hover .history-text:before{ width: 100%; right: auto; left: 0;}
.history-margin:hover .history-text span{ color: #fff;}
.history-margin:hover .history-text p{ color: #fff;}
.history-btn.slick-disabled{ opacity: 0.5;}

.company-photo{ padding:66px 0 37px;}
.company-top{ margin-bottom: 19px;}
.company-top .product-btns{ margin-top: 0;}
.company-top .common-title{ margin-top: 10px;}
.company-box{ margin-left: -11px; margin-right: -11px;}
.company-item{ width: 50%; float: left;}
.company-item-wrap{ margin: 0 11px;}
.company-item-wrap figure{ display: block; line-height: 1;  overflow: hidden;}
.company-item-wrap figure img{ display: block; width: 100%; height: auto; transition: 0.65s;}
.company-item-wrap:hover figure img{ transform: scale(1.05);}
.company-item-wrap:hover .company-downs{ background-color: #224DC4; border-color: #224DC4;}
.company-item-wrap:hover .company-downs strong,.company-item-wrap:hover .company-downs strong b{ color: #fff;}
.company-item-wrap:hover .company-downs p{ color: #fff;}
.company-item-wrap:hover .company-downs span{ color: #fff;}

.company-downs{ padding: 20px 21px 18px; border: 1px solid #EAEAEA; background-color: #fff; transition: 0.5s;}
.company-downs strong{ display: block; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: normal; font-size: 20px; color: #333333; margin-bottom: 6px; transition: 0.35s;}
.company-downs strong b{ display: inline-block; color: #999999; font-size: 14px; font-weight: normal; margin-left: 12px; transition: 0.35s;}
.company-downs p{ color: #666666; font-size: 14px; line-height: 1.5; margin-bottom: 24px; transition: 0.35s; height: 42px; overflow: hidden;}
.company-downs span{ display: inline-block; color: #999999; line-height: 1; transition: 0.35s;}

.culture-box{ padding-top: 53px;}
.culture{ position: relative; margin-top: 40px; padding: 75px 48px 80px; background-position: center; background-size: cover;}
.culture-img{ width: 376px; position: absolute; right: 68px; bottom: 0;}
.culture-top{ margin-bottom: 48px; position: relative;}
.culture-top strong{ margin-bottom: 14px; display: block; line-height: 1.2; color: #fff; font-size: 20px;}
.culture-top p{ color: #fff; font-size: 14px; width: 505px; max-width: 100%;}
.culture-list{ position: relative; width: 830px; padding: 30.5px 20px 34px; max-width: 100%; background: rgba(255,255,255,0.9); box-sizing: border-box;}
.culture-item{ position: relative; float: left; width: 25%;}
.culture-item:before{ content: ""; width: 1px; height: 70px; background-color: #EAEAEA; position: absolute; right: 0; top: 0;}
.culture-item:last-child:before{ display: none;}
.culture-wrap{ padding: 0 29px; text-align: center;}
.culture-wrap strong{ margin-bottom: 8px; display: block; color: #333333; font-size: 17px; line-height: 1.2;}
.culture-wrap p{ color: #666666; font-size: 14px;}
.vision{ padding: 88px 0 60px;}
.vision-title{ display: block; line-height: 1.1; color: #333333; font-size: 20px; margin-bottom: 21px;}
.culture-li{ margin-left: -16.5px; margin-right: -16.5px;}
.culture-li li{ width: 33.3333%; float: left; margin-bottom: 30px;}
.culture-wrapper{ margin: 0 16.5px;}
.culture-wrapper figure{ display: block; line-height: 1; overflow: hidden;}
.culture-wrapper figure img{ display: block; width: 100%; height: auto; transition: 0.65s;}
.culture-downs{ position: relative; margin-top: 20px; padding-left: 55px;}
.culture-downs img{ display: block; max-height: 37px; position: absolute; left: 0; top: 0;}
.culture-downs p{ width: 240px; max-width: 100%; color: #333333; font-size: 14px;}
.culture-wrapper:hover figure img{ transform: scale(1.06);}

.honorary{ padding: 52px 0 65px;}
.honorary .common-title p{ width: 833px; font-size: 16px;}
.honorary-list{ margin-left: -10px; margin-top: 52px; margin-right: -10px;}
.honorary-info li{ width: 33%; float: left; margin-bottom: 20px;}
.honorary-info li figure{ position: relative; display: block; margin: 0 10px; background: url(../images/honorbg.jpg) center no-repeat; background-size: cover; height: 340px; text-align: center;}
.research-list .company-item-wrap{ cursor: pointer;}
.honors-href{ display: block; width: 100%; height: 100%;border: 1px solid #ddd;}
.honorary-info{ padding-bottom: 24px;}
.honorary-info li figure img{ display: block; max-width: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-width: 80%; 
/* max-height: 80%; */
}
.honorary-info li figure span{ position: absolute; right: 32px; bottom: 32px; display: block; width: 51px; height: 51px; border-radius: 50%; text-align: center; line-height: 51px; background-color: #015198; color: #fff; font-size: 15px;}
.honorary-info li .honor-load{ position: absolute; right: 32px; bottom: 100px; display: block; width: 51px; height: 51px; border-radius: 50%; text-align: center; line-height: 51px; background-color: #224DC4; color: #fff; font-size: 15px; }
.honorary-info li figure .hide{ opacity: 0; visibility: hidden; transform: translateX(30px); transition: 0.4s;}
.honorary-info li figure .honor-load:hover{ background-color: #015198;}
.honorary-info li figure:hover .honors-href{ background: rgba(0,0,0,0.5);}
.honorary-info li figure:hover .hide{ opacity: 1; visibility: visible; transform: translateX(0px);}
.honorary-info li figure:hover a .hide{ transition-delay: 0.2s;}
.loadmore{ text-align: center;}
.loadmore a{ display: block; width: 140px; height: 46px; line-height: 46px; text-align: center; margin: auto; background-color: #015198; color: #fff; font-size: 14px;}
.loadmore a:hover{ background-color: #02642F;}
.research{ padding-top: 0; padding-bottom: 90px;}
.popup{ position: fixed; left: 0; top: 0; overflow: hidden; width: 100%; height: 100%; z-index: 9999; opacity: 0; visibility: hidden; transition: 0.8s;}
.popup-bg{ width: 100%; height: 100%; background-color: #C6C6C6; background: rgba(198, 198, 198, 0.89); position: absolute; left: 0; top: 0;}
.popup-texts{ width: 700px; position: absolute; left: 50%; top: 50%; margin-left: -350px; margin-top: -169px; background-color: #fff; transform: translateX(150px); opacity: 0; visibility: hidden; transition: 0.65s 0.1s;}
.popup.show{ opacity: 1; visibility: visible;}
.popup.show .popup-texts{ opacity: 1; visibility: visible; transform: translateX(0px);}

.popup-wrap{ padding: 38px 85px 44px 31px;}
.popup-wrap figure{ display: block; width: 31.42%; float: left; line-height: 1; overflow: hidden;}
.popup-wrap figure img{ display: block; width: 100%; height: auto; line-height: 1;}
.popup-info{ padding-top: 26px;}
.popup-info strong{ margin-bottom: 16px; display: block; line-height: 1; color: #015198; font-size: 20px; font-weight: normal;}
.popup-info p{ margin-bottom: 10px; color: #333333; font-size: 14px;}
.popup-info p span{ color: #999999;}
.popup-info a{ display: inline-block; margin-top: 26px; line-height: 1; color: #999999; font-size: 14px; font-family: "DINCond-Light";}
.popup-info a:hover{ color: #015198;}
.popup-close{ position: absolute; right: 18px; top: 14px; line-height: 1; color: #CCCCCC; font-size: 22px; transition: 0.4s; cursor: pointer;}
.popup-close:hover{ transform: rotate(180deg);}
.popup-btn{ width: 50px; height: 50px; text-align: center; line-height: 50px; position: absolute; top: 50%; margin-top: -25px; z-index: 10; background-color: #224DC4; color: #fff; font-size: 16px; transition: 0.4s; cursor: pointer;}
.popup-btn.prev{ left: -25px;}
.popup-btn.next{ right: -25px;}
.popup-btn.prev:hover{ background-color: #015198; text-indent: -3px;}
.popup-btn.next:hover{ background-color: #015198; text-indent: 3px;}
.pswp2 .pswp__counter{ display: none !important;}

.electrothermal{ padding-bottom: 84px;}
.slurry{ margin-top: 54px; margin-bottom: 44px;}
.slurry-title{ text-align: center; height: 60px; line-height: 60px; color: #fff; font-size: 24px; font-weight: bold; background-color: #224DC4;} 
.slurry-wrap{ padding: 48px 48px 0;}
.slurry-item{ border: 1px solid #F1F1F1; margin-bottom: 10px; background-color: #FAFAFA;}
.slurry-show{ position: relative; cursor: pointer;}
.slurry-show span{ display: block; float: left; line-height: 60px; color: #333333; font-size: 16px; padding-left: 48px; transition: 0.4s;}
.slurry-show b{ display: block; float: right; width: 60px; height: 60px; text-align: center; line-height: 60px; color: #fff; font-size: 15px; background-color: #DEDEDE; transition: 0.4s;}
.slurry-show b i{ transition: 0.35s; display: block;}
.slurry-show:hover b,.slurry-show.active b{ background-color: #015198;}
.slurry-show.active b i{ transform: rotate(180deg);}
.slurry-show.active span{ opacity: 0; visibility: hidden;}
.slurry-show:hover span{ color: #015198;}
.slurry-item:first-child .slurry-hide{ display: block;}

.slurry-hide{ display: none;}
.slurry-content{ padding-bottom: 43px; border-bottom: 1px solid rgba(204,204,204,0.3);}
.slurry-img{ width: 40.27%; float: left; line-height: 1; overflow: hidden;}
.slurry-img img{ display: block; width: 100%; height: auto;}
.slurry-text{ width: 55.35%; float: right;}
.slurry-text strong{ margin-bottom: 10px; display: block; line-height: 1; color: #333333; font-size: 18px; font-weight: bold;}
.slurry-text p{ color: #666666; font-size: 14px; text-align: justify;}
.specificate{ margin-top: 34.5px;}
.specificate-tt{ width: 847px; max-width: 100%; text-align: center; display: block; line-height: 1; color: #333333; font-size: 18px;}
.specificate-table{ margin-top: 19px; width: 100%; border-collapse:collapse;}
.specificate-table thead tr th{ text-align: center; height: 40px; line-height: 1.2; background-color: #ECECEC; color: #333333; font-size: 14px; font-weight: bold; border-right: 2px solid #fff;}
.specificate-table thead tr th:last-child{ border-right: none;}
.specificate-table tbody tr td{ width: 33.3333%; line-height: 1.2; height: 40px; border: 1px solid #EAEAEA; background-color: #FFFFFF; color: #333333; font-size: 14px; text-align: center;}
.method{ margin-top: 33.5px;}
.method-text{ margin-top: 28px; width: 847px; max-width: 100%;}
.method-text strong{ display: block; color: #333333; font-size: 14px;}
.method-text p{ color: #666666; font-size: 14px;}
.equipment-list{ margin-top: 56px; margin-bottom: 43px;}
.equipment-list .company-item{ margin-bottom: 21px;}
.equipment-list .company-item figure{ margin: 0 10px;}
.equipment-list .company-item figure img{ width: 100%; height: auto; transition: 0.5s;}
.equipment-list .company-item figure a{ display: block; padding-bottom: 59.66%; height: 0; overflow: hidden;}
.equipment-list .company-item figure:hover a img{ transform: scale(1.05);}
.equipment-list .company-item span{ display: block; margin-top: 13px; color: #777777; font-size: 14px; line-height: 1;}
.pages{ text-align: center; font-size: 0;}
.pages a{ display: inline-block; margin-left: 25px; width: 48px; height: 48px; text-align: center; line-height: 48px; color: #A4A4A4; font-size: 14px; font-family: "arial"; border: 1px solid #F2F2F2;} 
.pages a:first-child{ margin-left: 0;}
.pages a:first-child,.pages a:last-child{ width: 98px;}
.pages a:hover,.pages a.active{ border-color: #015198; background-color: #015198; color: #fff;}

.product-wraps{ float: right; width: 820px; padding: 50px 48px 0 80px;}
.product-top{ background-position: 0 0; margin-left: -140px;}
.product-wraps .common-title p{ width: 100%;}
.comfortable{ margin-top: 52px; margin-left: -52px; margin-right: -52px;}
.comfortable-item{ width: 33.333%; float: left;}
.comfortable-text{ margin: 0 52px; text-align: center;}
.comfortable-text figure{ display: block; line-height: 1;}
.comfortable-text figure img{ display: block; width: 100%; height: auto; transition: 0.4s;}
.comfortable-text:hover figure img{ transform: translateY(-6px);}
.comfortbale-wrap{ margin-top: 23.5px;}
.comfortbale-wrap strong{ margin-bottom: 10px; display: block; text-align: center; color: #333333; font-size: 17px;}
.comfortbale-wrap p{ color: #666666; font-size: 14px;}

.advantage{ padding: 86px 0 110px; background-color: #FAFAFA;}
.advantage-tt{ margin-bottom: 26px; display: block; text-align: center; color: #333333; font-size: 20px; line-height: 1.2;}
.advantage-hidden{ border-bottom: 5px solid #224DC4;}
.advantage-table{ width: 100%; border-collapse:collapse;}
.advantage-table thead tr th{ text-align: center; height: 40px; line-height: 1.2; background-color: #ECECEC; color: #333333; font-size: 12px; font-weight: bold; border-right: 2px solid #fff;}
.advantage-table thead tr th.span1{ width: 4.41%;}
.advantage-table thead tr th.span2{ width: 12.08%;}
.advantage-table thead tr th.span3{ width: 20.83%;}
.advantage-table thead tr th.span4{ width: 20.83%;}
.advantage-table thead tr th.span5{ width: 20.83%;}
.advantage-table thead tr th.span6{ width: 20.83%;}

.advantage-table tbody tr td{ line-height: 1.5; border: 1px solid #EAEAEA; background-color: #FFFFFF; color: #333333; font-size: 14px; text-align: center; padding: 18px 20px; box-sizing: border-box;}
.advantage-table tbody tr td p{ text-align: left;}
.promore{ margin-top: 16px;}
.common-title span{ display: block; line-height: 2; color: #777777; font-size: 14px; font-weight: bold;}
.fuse-box{ position: relative;}
.fuse{ padding: 23px 0 138px; background-color: #FAFAFA;}
.fuse-box:before{ content: ""; position: absolute; left: 0; top: 0; height: 100%; background-color: #FAFAFA; width: calc(( 100% - 1200px) /2);}
.fuse-left{ width: 362px; float: left;}
.fuse-left figure{ display: block; line-height: 1; margin-bottom: 12px;}
.fuse-left figure img{ display: block; width: 100%; height: auto;}
.consultate{ transition: 0.4s; background: #FFFFFF; width: 67px;}
.consultate a{ display: block; text-align: center; padding-top: 46px; height: 21px; line-height: 1; color: #777777; font-size: 12px; background: url(../images/weix.png) center 7px no-repeat;}
.consultate a:hover{ background-position: center 4px;}
.fuse-content{ margin-left: 418px; padding-top: 57px; padding-right: 64px;}
.fuse-top{ margin-bottom: 32px;}
.fuse-top strong{ margin-bottom: 12px; display: block; line-height: 1; color: #333333; font-size: 24px;}
.fuse-top span{ display: block; line-height: 1.2; color: #224DC4; font-size: 24px; font-weight: bold;}
.fuse-down span{ display: block; color: #015198; font-size: 16px; margin-bottom: 7px; font-weight: bold;}
.fuse-down p{ color: #777777; font-size: 14px; font-weight: bold; line-height: 2;} 
.graphenes-box{ position: relative; margin-top: -76px; background-color: #fff;}
.graphenes-img{ width: 255px; float: left; line-height: 1; overflow: hidden;}
.graphenes-info{ float: left; opacity: 1 !important; -webkit-animation: hide 0.4s forwards ease-in-out; animation: hide 0.4s forwards ease-in-out; -moz-animation: hide 0.4s forwards ease-in-out; -o-animation: hide 0.4s forwards ease-in-out; z-index: 3 !important;}
.graphenes-info figure{ width: 100%; overflow: hidden; animation: none; -webkit-animation: none; -moz-animation: none; -o-animation: none;}
.graphenes-info.slick-current{ z-index: 4 !important; animation: none; -webkit-animation: none; -moz-animation: none; -o-animation: none;}
.graphenes-info.slick-current figure{ -webkit-animation: increaseHeight 0.4s forwards ease-in-out; animation: increaseHeight 0.4s forwards ease-in-out; -moz-animation: increaseHeight 0.4s forwards ease-in-out; -o-animation: increaseHeight 0.4s forwards ease-in-out;}


.graphenes-img img{ display: block; width: 255px; height: auto;}
.graphenes-list{ margin-left: 255px; height: 100%; border: 1px solid #EAEAEA;}
.graphenes-item{ width: 16.66666%; float: left; text-align: center; padding: 28px 0 0;}
.graphenes-item i{ display: block; text-align: center; line-height: 1; color: #CCCCCC; font-size: 42px; font-style: normal; transition: 0.36s;}
.graphenes-item p{ text-align: center; margin-top: 9px; color: #999999; font-size: 14px; line-height: 1.6; transition: 0.36s;}
.graphenes-item:hover i,.graphenes-item.active i{ color: #015198; animation: gelatine 0.5s 1;;}
.graphenes-item:hover p,.graphenes-item.active p{ color: #015198;}

.product-view{ padding: 126px 0 90px; color: #666666; font-size: 14px;}
.product-view img{ max-width: 100%; width: auto; height: auto;}
.health-list{ margin-top: 50px; width: 690px; max-width: 100%;}
.health-list li{ min-width: 126px; float: left; margin-right: 40px; margin-bottom: 39px; text-align: center;}
.health-list li img{ display: block; height: 62px; width: auto; margin: auto; transition: 0.4s;}
.health-list li span{ margin-top: 18px; display: block; text-align: center; line-height: 1; color: #777777; font-size: 14px;}
.health-list li:hover img{ transform: translateY(-4px);}
.health-text{ margin-top: 60px; color: #666666; font-size: 14px;}
.health-text img{ max-width: 100%; width: auto; height: auto;}

.principle{ margin-left: 127px; background-color: #fff; position: relative; margin-top: -248px;}
.principle-img{ margin-top: -45px; float: left; width: 227px;}
.principle-img img{ width: 100%; height: auto;}
.pronciple-wrap{ padding-top: 60px; padding-right: 130px; margin-left: 298px;}
.pronciple-wrap .common-title p{ height: auto; width: 100%;}
.pronciple-list{ margin-top: 52px;}
.pronciple-list li{ text-align: center; float: left; margin-right: 80px;}
.pronciple-list li:last-child{ margin-right: 0;}
.pronciple-list li b{ position: relative; text-align: center; display: block; width: 63px; height: 59px;}
.pronciple-list li b img{ display: block; max-width: 100%; max-height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transition: 0.36s;}
.pronciple-list li p{ margin-top: 22px; color: #777777; font-size: 14px; line-height: 1;}
.pronciple-list li:hover b img{ transform: translateY(-5px);}
.conservation{ margin-top: 70px; padding-bottom: 88px;}
.conservate-tt{ display: block; text-align: center; line-height: 1.2; color: #333333; font-size: 24px;}
.conservate-list{ margin-top: 38px; border: 1px solid #EAEAEA;}
.conservate-list li{ width: 20%; float: left;}
.conservate-wrap{ padding: 22px 30px 28px; box-sizing: border-box; min-height: 230px; border-left: 1px solid #EAEAEA;}
.conservate-list li:first-child .conservate-wrap{ border-left: none;}
.conservate-wrap strong{ margin-bottom: 10px; display: block; text-align: center; color:#224DC4; font-size: 16px; line-height: 1.2;}
.conservate-wrap p{ color: #777777; font-size: 14px; text-align: justify;}

.principle-tress{ padding-bottom: 137px;}
.principle-down .priciple-tt{ position: relative; display: block; width: 896px; margin: auto; background-color: #fff; margin-top: -65px; color: #333333; font-size: 24px; text-align: center; line-height: 90px;}
.principle-step{ margin-top: 14px;}
.principle-it{ width: 30%; float: left; margin-right: 5%;}
.principle-it:last-child{ margin-right: 0;}
.principle-it figure{ display: block; line-height: 1; float: left; width: 85px;}
.principle-it figure img{ display: block; width: 100%; height: auto; transition: 0.4s;}
.principle-text{ margin-left: 105px; margin-top: -8px; padding-right: 14px;}
.principle-text strong{ margin-bottom: 3px; display: block; line-height: 1; color: #224DC4; font-size: 30px; font-family: "DINCond-Bold_1"; font-weight: normal;}
.principle-text p{ color: #777777; font-size: 14px;}
.principle-it:hover figure img{ transform: translateY(-4px);}

.product-display{ margin-left: -15px; margin-right: -15px;}
.product-display li{ float: left; width: 33.3333%; margin-bottom: 39.5px;}
.product-display li a{ display: block; margin: 0 15px;}
.product-display li figure{ display: block; border: 1px solid #EAEAEA; padding-bottom: 100%; height: 0; overflow: hidden;}
.product-display li figure img{ display: block; width: 100%; height: auto; transition: 0.5s;}
.prodisplays{ position: relative; z-index: 3; padding: 22px 0 28.5px; text-align: center;}
.prodisplays:before{ position: absolute; left: 0; bottom: 0; z-index: -1; content: ""; width: 100%; height: 0; background-color: #015198; transition: 0.4s;}
.prodisplays strong{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; display: block; line-height: 1.2; color: #333333; font-size: 20px; font-weight: normal; transition: 0.35s;}
.prodisplays p{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; padding: 0 10px; line-height: 1.2; color: #999999; font-size: 15px; transition: 0.35s;}
.product-display li a:hover figure img{ transform: scale(1.05);}
.product-display li a:hover .prodisplays:before{ height: 100%; bottom: auto; top: 0;}
.product-display li a:hover .prodisplays strong,.product-display li a:hover .prodisplays p{ color: #fff;}
.product-display-box{ padding-bottom: 69px;}
.product-display-box .product-display{ padding-bottom: 29px;}
.product-detial{ position: relative; border-top: 1px solid #EAEAEA; margin-top: 100px; padding-bottom: 69px;}
.product-detail-content{ width: 67.3%; float: left;}
.product-detail-wrap{ width: 73.64%; margin-left: 20.9%;}
.product-tit{ padding: 82.5px 0 31px; text-align: center; color: #333333; font-size: 30px; line-height: 1.2;}
.proitem{ float: left;}
.proitem img{ display: block; width: 100%; height: auto;}
.products-swiper{ position: relative;}
.products-swiper .history-btn{ top: 50%; margin-top: -25px;}
.products-swiper .history-btn.prev{ left: 0;}
.products-swiper .history-btn.next{ right: 0;}
.product-min{ margin-top: 15px; margin-left: -5px; padding-right: 56px;}
.products-min-item{ float: left; width: 16.6666%;}
.products-min-item figure{ position: relative; cursor: pointer; margin: 0 5px; display: block;}
.products-min-item figure:before{ position: absolute; left: 0; top: 0; border: 1px solid #015198; box-sizing: border-box; content: ""; width: 100%; height: 100%; z-index: 3; opacity: 0; visibility: hidden; transform: scale(0.5s); transition: 0.4s;}
.products-min-item figure img{ display: block; width: 100%; height: auto;}
.products-min-item.active figure:before{ opacity: 1; visibility: visible; transform: scale(1);}

.describe{ margin-top: 42px;}
.descibe-conetnt{ margin-top: 20px;}
.describe-item{ margin-bottom: 27px;}
.describe-title{ padding-bottom: 16px; border-bottom: 1px solid #EAEAEA; color: #333333; font-size: 16px; line-height: 1.2;}
.descibe-item{ display: block; margin-bottom: 18px;}
.descibe-item dt{ margin-bottom: 5px; display: block; color: #333333; font-size: 14px;}
.descibe-item dd{ display: block; color: #888888; font-size: 14px; line-height: 1.2;}
.descibe-info .descibe-item{ width: 25%; float: left;}
.desribe-con{ color: #888888; font-size: 14px;}
.desribe-con img{ max-width: 100%; width: auto; height: auto;}
.recommend-box{ height: 100%; width: 32.7%; float: right; background: #FAFAFA;}
.recommend-box .scolltop{ right: auto; bottom: 98px;}
.recommend-wrap{ padding-left: 84px;}
.recommend-wrap .posite-wrap{ padding-left: 65px; border-bottom: 1px solid #EAEAEA;}
.recommend-content{ margin-top: 88.5px; margin-left: 66px; width: 302px; max-width: 90%;}
.recommend-product{ margin-bottom: 52px;}
.recommend-tt{ float: left; display: block; line-height: 1.2; color: #333333; font-size: 20px; font-weight: normal;}
.recommend-product-list li{ border-bottom: 1px solid #EAEAEA;}
.recommend-product-list li a{ display: block; padding-left: 14px; height: 49px; line-height: 49px; color: #333333; font-size: 16px;}
.recommend-product-list li a:hover,.recommend-product-list li.active a{ background-color: #015198; color: #fff;}
.news-tops{ border-bottom: 1px solid #EAEAEA; padding-bottom: 16px;}
.news-tops .more{ position: relative; margin-top: 5px; display: block; width: 10px; height: 10px; float: right;}
.news-tops .more:before{ content: ""; width: 100%; height: 2px; background-color: #CCCCCC; border-radius: 2px; position: absolute; left: 0; top: 50%; margin-top: -1px; transition: 0.35s;}
.news-tops .more:after{ content: ""; width: 2px; height: 100%; background-color: #CCCCCC; border-radius: 2px; position: absolute; left: 50%; margin-left: -1px; top: 0; transition: 0.35s;}
.news-tops .more:hover{ transform: rotate(180deg);}
.news-tops .more:hover:before,.news-tops .more:hover:after{ background-color: #015198;}

.recommend-news{ padding-bottom: 30px}
.recommend-news-list{ margin-top: 24.5px;}
.recommend-news-list li{ padding-left: 16px; position: relative; margin-bottom: 20px;}
.recommend-news-list li:before{ content: ""; width: 5px; height: 5px; background-color: #224DC4; position: absolute; left: 0; top: 10px; border-radius: 50%;}
.recommend-news-list li span{ display: block; color: #666666; font-size: 16px; margin-bottom: 20px; transition: 0.35s;}
.recommend-news-list li time{ display: block; color:#999999; font-size: 12px; line-height: 1;}
.recommend-news-list li a:hover span{ color: #015198;}
.product-recommend-tab{ position: relative; border: 1px solid #EAEAEA; margin-top: -1px; padding-bottom: 39px;}
.recommend-items{ float: left;}
.recommend-items figure{ display: block; overflow: hidden;}
.recommend-items figure img{ display: block; width: 100%; height: auto; transition: 0.58s;}
.recommend-items .prodisplays{ border-bottom: none;}
.recommend-items a:hover figure img{ transform: scale(1.06);}
.recommend-items a:hover .prodisplays strong{ color: #015198;}
.product-recommend-tab .slick-dots{ position: absolute; width: 100%; text-align: center; left: 0; bottom: 28px; z-index: 10; line-height: 0;}
.product-recommend-tab .slick-dots li{ display: inline-block; margin-left: 13px; }
.product-recommend-tab .slick-dots li button{ padding: 0; border: none; margin: 0; outline: none; width: 8px; height: 8px; text-indent: 99999px; overflow: hidden; transition: 0.35s; background-color: #224DC4; border-radius: 50%;}
.product-recommend-tab .slick-dots li.slick-active button{ background-color: #015198;}
.global-tel{ margin-top: 37px; background-color: #224DC4; padding: 17px 0 17px 58px;}
.global-tel i{ line-height: 1; display: block; float: left; color: #fff; font-size: 42px; font-style: normal; margin-top: 4px;}
.gloabl-main{ float: left; margin-left: 12px;}
.gloabl-main span{ display: block; color: #fff; font-size: 12px;}
.gloabl-main p{ margin-top: -4px; color: #fff; line-height: 1; font-size: 30px; font-family: "DINCond-Medium";}

.case-boxs{ padding-bottom: 49px;}
.cases-list{ margin-left: -15px; margin-right: -15px; margin-bottom: 24px;}
.cases-list li{ width: 33.333%; float: left; margin-bottom: 28px;}
.cases-list li a{ display: block; margin: 0 15px;}
.cases-list li a figure{ display: block; line-height: 1; overflow: hidden; padding-bottom: 61%; height: 0;}
.cases-list li a figure img{ display: block; width: 100%; height: auto; transition: 0.5s;}
.case-texts{ border: 1px solid #EAEAEA; padding: 24px 60px 14px 21px; position: relative;}
.case-texts strong{margin-bottom: 10px;display: block;line-height: 1.2;color: #015198;font-size: 20px;font-weight: normal;transition: 0.38s;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.case-texts p{ color: #999999; font-size: 14px; line-height: 1.2; height: 32px;}
.case-texts p span{ display: inline-block; color: #333333; margin-right: 12px;}
.case-texts b{ position: absolute; right: -1px; top: 50%; margin-top: -25px; display: block; width: 50px; height: 50px; background-color: #EAEAEA; transition: 0.4s;}
.case-texts b i{ display: block; width: 18px; height: 18px; position: absolute; left: 50%; top: 50%; margin-left: -9px; margin-top: -9px; transition: 0.36s;}
.case-texts i:before{ content: ""; width: 100%;  height: 1px; background-color: #fff; position: absolute; left: 0; top: 9px;}
.case-texts i:after{ content: ""; width: 1px;  height: 100%; background-color: #fff; position: absolute; left: 9px; top: 0;}
.cases-list li a:hover figure img{ transform: scale(1.05);}
.cases-list li a:hover .case-texts strong{ color: #015198;}
.cases-list li a:hover .case-texts b{ background-color: #015198;}
.cases-list li a:hover .case-texts b i{ transform: rotate(180deg);}

.case-tops{ padding: 60.5px 0 24.5px; border-bottom: 1px solid #EAEAEA;}
.case-tt{ float: left; width: 88%;}
.case-tt strong{ margin-bottom: 15px; display: block; line-height: 1.2; color: #333333; font-size: 24px; font-weight: normal;} 
.case-tt time{ display: block; line-height: 1; color: #888888; font-size: 14px; font-family: "Helvetica";}
.case-more{ float: right;}
.case-more a.bshare-more{ display: block !important; color: #CCCCCC !important; font-size: 18px; line-height: 1; padding-left: 0 !important; background: none !important;}
.case-more a.bshare-more:hover{ color: #015198 !important;}
.case-views{ padding: 32px 0 35px; border-bottom: 1px solid #CCCCCC; color: #888888; font-size: 16px;}
.case-views img{ width: auto !important; max-width: 100%; height: auto !important;} 
.pageNext{ padding-top: 24.5px;}
.pageNext .common-btn{ float: left;}
.backlists{ float: right;}
.backlists a{ display: block; width: 120px; height: 50px; line-height: 50px; color: #fff; font-size: 14px; text-align: center; background-color: #015198; transition: 0.4s;}
.backlists a:hover{ background-color: #03437c;}

.dynamic-info{ padding-bottom: 35px;}
.dynamic-info li{ margin-bottom: 20px; padding: 22px 18px; border: 1px solid #b4b2b2;}
.dynamic-info li figure{ margin-right: 23px; display: block; line-height: 1; overflow: hidden; float: left; width: 222px;}
.dynamic-info li figure img{ display: block; width: 100%; height: auto; transition: 0.5s;}
.dynamics-content{ padding-top: 4px;}
.dynamics-content time{ margin-bottom: 10px; display: block; line-height: 1; color: #888888; font-size: 12px; font-family: "Helvetica";}
.dynamics-content strong{ margin-bottom: 5px; display: block; line-height: 1.2; color: #333333; font-size: 18px; font-weight: normal; transition: 0.35s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.dynamics-content p{ color: #999999; font-size: 14px; max-height: 66px;overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;}
.dynamics-content span{ display: inline-block; line-height: 1; color: #ADADAD;}
.dynamic-info li a:hover figure img{ transform: scale(1.05);}
.dynamic-info li a:hover .dynamics-content strong{ color: #015198;}
.dymanic-time{ float: left; width: 79px; background-color: #FAFAFA; padding-top: 8px; padding-bottom: 9px; transition: 0.4s;}
.dymanic-time b{ margin-bottom: 6px; display: block; text-align: center; line-height: 1; color: #CCCCCC; font-size: 50px; font-family: "DINPro-Light"; transition: 0.4s;}
.dymanic-time time{ text-align: center; display: block; line-height: 1; color: #CCCCCC; font-family: "DINPro-Light"; transition: 0.4s;}
.dynamics-content1{ margin-left: 116px;}
.dynamic-info li a:hover .dymanic-time{ background-color: #015198;}
.dynamic-info li a:hover .dymanic-time b,.dynamic-info li a:hover .dymanic-time time{ color: #fff;}
.service-after{ margin-top: 70px;}
.dynamic-lists{ padding-bottom: 52px;}
.scle-services{ position: relative; z-index: 3; margin-bottom: 66px;}
.scle-services:before{ content: ""; width: calc(1200px + (100% -1200px)/2); height: 271px; background-color: #FAFAFA; position: absolute; right: 0; bottom: 0; z-index: -1;}
.sale-service-img{ width: 36.6666%; position: absolute; left: 15px; bottom: 0; z-index: 3;}
.sale-service-img img{ display: block; width: 100%; height: auto;}
.sale-service-content{ position: relative; width: 70%; float: right; margin-top: -186px;}
.sale-services-wrap{ position: relative; z-index: 3; padding: 54px 11.78% 53px;}
.sale-services-wrap:before{ content: ""; width: 100%; height: 200px; background-color: #fff; position: absolute; left: 0; top: 0; z-index: -1;}
.sale-service-list{ margin-top: 36px;}
.service-titles{ display: block; color: #333333; font-size: 24px; line-height: 1.4;}
.sale-service-item:first-child{ margin-bottom: 106px;}
.sale-service-item h3{ color: #015198; font-size: 16px; margin-bottom: 18px;}
.sale-service-item p{ color: #666666; font-size: 14px;}
.sale-service-item span{ display: block; color: #999999; font-size: 14px; line-height: 1.2; margin-top: 16px;}
.promise-img{ position: relative; overflow: hidden;}
.promise-img img{ display: block; width: 100%; height: auto;}
.promises-text{ width: 50%; background-color: #fff; position: absolute; left: 0; bottom: 0;}
.promise-wrap{ padding: 57px 36px 42px;}
.promise-wrap strong{ margin-bottom: 10px; display: block; line-height: 1.6; color: #015198; font-size: 16px;}
.promise-wrap p{ color: #666666; font-size: 14px;}
.promise-item{ width: 50%; float: left; padding: 28px 0 30px; position: relative; box-sizing: border-box; border: 1px solid #FAFAFA; transition: 0.35s; background-color: #FAFAFA;}
.promise-item b{ display: block; float: left; padding-left: 36px; margin-top: 14px; line-height: 1; width: 57px; color: #224DC4; font-size: 43px; font-weight: normal; transition: 0.36s;}
.promise-con{ margin-right: 55px;}
.promise-con strong{ display: block; margin-bottom: 6px; color: #666666; font-size: 14px; line-height: 1.2; font-weight: normal;}
.promise-con p{ color: #999999; font-size: 14px; line-height: 1.8;}
.promise-item:last-child{ border: 1px solid #EAEAEA;}
.promise-item:last-child b{ color: #015198;}
.promisebox{ margin-left: -6px; padding-bottom: 52px; margin-right: -6px; margin-top: 52px;}
.promisebox li{ width: 25%; float: left; margin-bottom: 20px;}
.promisebox li figure{ display: block; line-height: 1; overflow: hidden; margin: 0 6px;}
.promisebox li figure img{ display: block; line-height: 1; width: 100%; height: auto; transition: 0.56s;} 
.promisebox li span{ margin-top: 18px; display: block; text-align: center; line-height: 1; color: #666666; font-size: 16px;}
.promisebox li:hover figure img{ transform: scale(1.06);}
.promisebox li:hover span{ color: #015198;}
.contacts{ padding: 70px 0 36px;}
.map{ height: 462px;}
.anchorBL{ display: none !important;}
.contact-addressd{ z-index: 6; position: relative; margin-top: -57px; background-color: #fff;}
.contact-list{ margin-right: 115px; display: flex; display: -webkit-flex; border: 1px solid #EAEAEA; background-color: #015198; padding: 27px 0;}
.contact-item{position: relative;padding: 0 104px;float: left;}
.contact-item:before{ content: ""; width: 1px; height: 76px; background-color: #EAEAEA; position: absolute; right: 0; top: 50%; margin-top: -38px;}
.contact-item:first-child{ padding-left: 54px;}
.contact-item b{ display: block; float: left; line-height: 1; color: #fff; font-size: 32px; font-weight: normal;}
.contact-content{ float: left; margin-left: 11.5px;}
.contact-content span{ display: block; line-height: 1; color: #fff; font-size: 12px; font-family: "Helvetica"; font-style: italic; margin-bottom: 5px;}
.contact-content p{ color: #fff; font-size: 12px;}
.contact-content strong{ display: block; line-height: 1.4; color: #fff; font-size: 14px; font-weight: normal; width: 170px;}
.contact-item:last-child{ padding-right: 0;}
.contact-item:last-child:before{ display: none;}
.contact-eq{ width: 113px; height: 113px; position: absolute; border: 1px solid #EAEAEA; right: 0; top: 0; background-color: #fff;}
.contact-eq img{ display: block; width: 104px; height: auto; position: absolute; left: 50%; top: 50%; margin-left: -52px; margin-top: -52px;}
.line-message11{ position: relative; border: 1px solid #EAEAEA; margin-top: 36px; padding: 75px 95px 78px;}
.message11-top{ margin-bottom: 45px;}
.message11-top strong{ display: block; line-height: 1.2; color: #333333; font-size: 24px; margin-bottom: 12px;}
.message11-top p{ color: #666666; font-size: 14px;}

.contacts .line-message11{ text-align: center;}
.message11-input1 .message11-row .text,.message11-input1 .message11-textarea .metext{ color: #999999; border-bottom: 1px solid #CCCCCC;}
.message11-input1 .message11-row input::-webkit-input-placeholder,.message11-input1 .message11-textarea .metext::-webkit-input-placeholder{ color: #999;}
.contacts .message11-sub{ text-align: center;}
.contacts .message11-sub input{ margin: auto;}

.offer-btn{ position: fixed; right: 0; bottom: 144px; background-color: #015198; z-index: 20; transition: 0.4s;}
.offer-btn span{ cursor: pointer; display: block; padding-top: 54px; height: 26px; line-height: 1; text-align: center; width: 80px; background: url(../images/price.png) center 16px no-repeat; color: #FFFFFF; font-size: 14px;} 
.offer-btn:hover{ background-color: #02642F;}
.offer-box{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 100; background-color: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: 0.68s;}
.offers{ width: 400px; background-color: #fff; position: absolute; left: 50%; margin-left: -200px; top: 50%; margin-top: -175px; z-index: 10; opacity: 0; visibility: hidden; transform: translateX(100px); transition: 0.65s;}
.offer-box.show{ opacity: 1; visibility: visible;}
.offer-box.show .offers{ opacity: 1; visibility: visible; transform: translateX(0px);}

.footer11-close{ position: absolute; right: 10px; top: 10px; line-height: 1; color: #CCCCCC; font-size: 18px; font-weight: bold; transition: 0.4s; cursor: pointer;}
.footer11-close:hover{ transform: rotate(180deg);}
.offer-text{ padding: 37px 40px 34px;}
.offer-text strong{ margin-bottom: 30px; display: block; text-align: center; line-height: 1; color: #333333; font-size: 24px;}
.offer-text strong small{ margin-left: 5px; display: inline-block; color: #224DC4; font-size: 26px; font-family: "DINCond-Bold_1";}
.offer-text .text{ margin-bottom: 13px; box-sizing: border-box; padding-left: 15px; width: 100%; height: 46px; line-height: 46px; color: #999999; font-size: 14px; border: 1px solid #EAEAEA;}
.offer-text .text:focus::placeholder{ opacity: 0; visibility: hidden;}
.offer-text .sub{ width: 100%; border: none; margin: 0; height: 46px; line-height: 46px; color: #fff; font-size: 14px; background-color: #015198; cursor: pointer; transition: 0.4s;}
.offer-text .sub:hover{ background-color: #02642F;}
.BMap_bubble_title{ color: #015198 !important; font-size: 15px !important;}


.trend-title{ position: relative; width: 1075px; margin: auto; max-width: 100%; margin-top: -96px; background-color: #fff; line-height: 1; color: #333333; font-size: 24px; padding: 59px 0 86px; text-align: center; font-weight: bold;}
.trend-list{ padding-bottom: 70px; border-bottom: 1px solid #EAEAEA;}
.trend-item{ text-align: center; width: 29.5%; float: left; margin-right: 5.75%;}
.trend-item:last-child{ margin-right: 0;}
.trend-item b{ margin: auto; display: block; width: 80px; height: 80px; line-height: 80px; border-radius: 50%; background-color: #224DC4; color: #fff; font-size: 30px; font-family: "DINCond-Bold_1";}
.trend-item strong{ margin-top: 20px; margin-bottom: 15px; display: block; line-height: 1; color: #333333; font-size: 24px; font-weight: bold;}
.trend-item span{ margin-bottom: 18px; display: block; line-height: 1.2; color: #015198; font-size: 16px; font-weight: bold;}
.trend-item p{ color: #666666; font-size: 14px;}
.operates{ margin-bottom: 50px;}
.operate-tt{ display: block; padding: 55px 0 35px; color: #333333; font-size: 24px; line-height: 1; font-weight: bold; text-align: center;}
.operates-list{ padding: 48px 58px 37px; background-color: #FAFAFA;}
.operate-item{ position: relative; float: left; margin-left: 101px; text-align: center; padding-bottom: 20px; cursor: pointer;}
.operate-item:before{ content: ""; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 7px solid #fff; position: absolute; left: 50%; margin-left: -6px; bottom: 0; opacity: 0; visibility: hidden;}
.operate-item:first-child{ margin-left: 0;}
.operate-item i{ margin-bottom: 16px; display: block; text-align: center; line-height: 1; color: #C1C1C1; font-size: 30px; font-style: normal; transition: 0.35s;}
.operate-item span{ display: block; line-height: 1; color: #333333; font-size: 16px; font-weight: bold; transition: 0.35s;}
.operate-text{ position: relative;}
.operate-info{ position: absolute; width: 100%; box-sizing: border-box; left: 0; top: 0; padding: 20px 30px; background-color: #FFFFFF; opacity: 0; visibility: hidden; transform: translateY(30px);}
.operate-info p{ color: #666666; font-size: 14px; line-height: 1.5;}
.operate-item.active:before{ opacity: 1; visibility: visible;}
.operate-item.active i,.operate-item.active span{ color: #015198;}
.operate-info.active{ opacity: 1; visibility: visible; transform: translateY(0); transition: 0.45s; position: relative;}

.advantages{ padding-bottom: 86px; border-bottom: 1px solid #EAEAEA;}
.advantage-tts{ padding-bottom: 56px;}
.advantage-list{ padding: 0 53px;}
.advantage-item{ width: 20%; float: left; text-align: center;}
.advantage-item b{ position: relative; z-index: 3; margin: auto; display: block; width: 117px; height: 117px; text-align: center; line-height: 117px; background-color: #FAFAFA; color: #000000; font-size: 62px; font-weight: normal; border-radius: 50%; transition: 0.38s;}
.advantage-item b:before{ content: ""; width: 100%; height: 100%; border-radius: 50%; position: absolute; left: 0; top: 0; z-index: -1; background-color: #015198; opacity: 0; visibility: hidden; transform: rotateY(180deg); transition: 0.4s;}
.advantage-item p{ text-align: center; line-height: 1; color: #333333; font-size: 14px; margin-top: 16px; transition: 0.35s;}
.advantage-item:hover b{ color: #fff;}
.advantage-item:hover b:before{ opacity: 1; visibility: visible; transform: rotateY(0deg);}
.advantage-item:hover p{ color: #015198;}
.process-box{ padding: 33px 0 30px; background-color: #224DC4; text-align: center;}
.processd{ padding-bottom: 72px;}
.process-box span{ display: inline-block; color: #fff; font-size: 18px; font-weight: normal; line-height: 1.2;}
.process-box b{ display: inline-block; color: #fff; font-size: 18px; margin: 0 45px; font-weight: normal;}
.trend-list.article-block .trend-item{ opacity: 0; visibility: hidden; transform: translateY(80px); transition: 0.68s;}
.trend-list.articleShow .trend-item{ opacity: 1; visibility: visible; transform: translateY(0px);}
.trend-list.article-block .trend-item:nth-child(2){ transition-delay: 0.2s;}
.trend-list.article-block .trend-item:nth-child(3){ transition-delay: 0.4s;}

.operates.article-block,.trend.article-block,.processd.article-block{ opacity: 0; visibility: hidden; transform: translateY(80px); transition: 0.7s;}
.operates.articleShow,.trend.articleShow,.processd.articleShow{ opacity: 1; visibility: visible; transform: translateY(0px);}
.equipment-list2{ position:relative; opacity: 1; visibility:visible;}
.productimg{ margin-top: 36px;}
.productimg img {
	max-width: 100%;
	height: auto;
}
.network2{
	margin:55px 0;
}
.inner p img{
	max-width: 100%;
}