@charset "utf-8";
html{color:#000;background:#FFF; }
body { color:#666;font:12px/1.231 "Microsoft Yahei";} /*缃戠珯瀛椾綋棰滆壊*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit; }
input,button,textarea,select{*font-size:100%;}
input,select{vertical-align:middle;}
i,em{ font-style:normal;}
select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;}
table{font-size:inherit;font:100%; border-collapse:collapse;}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
/*title*/
h1 { font-size:32px;}
h2 { font-size:26px;}
h3 { font-size:20px;}
h4 { font-size:14px;}
h5 { font-size:12px;}
h6 { font-size:10px;}
.mt10{ margin-top:10px;}
a { color:#666; text-decoration:none;} /*for ie f6n.net*/
a:focus{outline:0;} /*for ff f6n.net*/
.vam { vertical-align:middle;}
.clear{ clear:both; height:0; line-height:0; font-size:0;}
.clearfix:after{ content:""; clear:both; height:0; visibility:hidden; display:block;}
.clearfix{*zoom:1}
p{ word-spacing:-1.5px;}
.tr { text-align:right;}
.tl { text-align:left;}
.center { text-align:center;}
.fl { float:left;}
.fr { float:right;}
.pa{ position:absolute;}
.pr{ position:relative}
/* -- 璐墿杞﹀閮ㄦ鏋 -- */
.cart_header , .cart_content , .cart_footer { width:760px; margin:0 auto;}
/* -- 椤甸潰鏁翠綋甯冨眬 -- */
.header , .content , .footer { width:1200px; margin:0 auto; }
.h_nav li a:-webkit-any-link{ display:block;}
/* -- 浠ヤ笂閮ㄥ垎浠ュ墠resetcommon -- */
/* -- 棣栭〉鏍峰紡寮€濮 -- */
.clearfix{*zoom:1}
i,em{ font-style:normal;}
body{min-width: 1200px;max-width: 1920px;margin: 0 auto;overflow-x: hidden; width: 100%; background:#f3f3f0;}
.bantest {position: relative;width: 100%;overflow: hidden;}
.banner{ width:100%; position:relative;}
.banner .slick-dotted.slick-slider{ margin:0;}
.banner img{ display:block; width:100%;}
.banner .slick-arrow {position: absolute;font-size: 0;top: 50%;z-index: 9; width:73px; height: 73px; margin-top: -73px;border: 0; outline: none;overflow:hidden;}
.banner .slick-prev {left: 10%; display: none; background:url(../images/ban_prev.png) no-repeat;}
.banner .slick-next {right: 10%; display: none;background:url(../images/ban_next.png) no-repeat;}
.slick-dots { position: absolute;left: 50%; font-size:0; bottom: 8%;width: 300px;text-align: center;margin-left: -175px;z-index: 11;}
.slick-dots li {display: inline-block;margin: 0 8px; }
.slick-dots li button {display: block;background:#00a6eb;width: 17px;height: 17px;border-radius: 17px;border:0; box-shadow:0; -webkit-transition: .5s;-moz-transition: .5s;transition: .5s;}
.slick-dots .slick-active button {background:#00a6eb;border:0; width:32px;}
.tit{ font:46px "Microsoft YaHei UI"; text-align:center; color:#333333; height:126px;}
.tit a{ color:#333;}
.tit em{ display:block; font-size:24px; padding:9px 0 0;font-weight:normal; color:#6a6a69; }
.guide{ height:573px; overflow:hidden; background:url(../images/guide_bg.jpg) no-repeat center top; padding-top:80px;}
.guide dt img{ display:block;width:1107px; height:351px;}
.guide dd h3{ font:28px "Microsoft YaHei UI"; color:#00a6eb; text-align:center;}
.guide dd h3 em{ display:block; font:46px "Microsoft YaHei UI"; color:#fff; margin:12px 0 32px;}
.guide dd p{font:18px "Microsoft YaHei UI"; line-height:32px; color:#fff; text-align:center;}
.guide dt{ margin-top:170px; height:155px;}
.guide dt p{ width:25%; float:left; text-align:center; font:20px "Microsoft YaHei UI"; color:#fff;}
.guide dt p span{ display:block; font:66px Arial, Helvetica, sans-serif;}
.guide dt p em{ display:inline-block; width:23px; height:23px; font:14px "Microsoft YaHei UI"; line-height:23px; background:#00a6eb; color:#fff; border-radius:25px;}
.pro{ margin:75px 0 80px;}
.pro .content{ width:1400px; margin:0 auto;}
.pro dl{ width:32.7%; float:left; margin-right:0.92%; background:#fff;}
.pro dt{ overflow:hidden;}
.pro dt img{ display:block; width:100%;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.pro dd{ padding:30px 4%;}
.pro dd h4 a{ display:block; font:24px "Microsoft YaHei UI"; font-weight:bold; color:#333;}
.pro dd p{ font:18px "Microsoft YaHei UI"; line-height:28px; height:84px; overflow:hidden; margin:16px 0;}
.pro dd span a{ display:block; width:110px; height:40px; background:#00a6eb; font:16px "Microsoft YaHei UI"; text-align:center; line-height:40px; color:#fff;}
.pro dl:last-child{ margin-right:0;}
.pro dl:hover dt img{-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-transform:scale(1.1,1.1);}
.pro dl:hover dd h4 a{ font-weight:bold; color:#00a6eb;}
.super1{ position:relative; height:692px;}
.super1:before{ content:""; position:absolute; top:92px; left:0; width:100%; height:1px; background:#d4d4d3;}
.supert{ height:92px; width:1400px; margin:0 auto;}
.supert li{ width:25%; float:left; height:82px; padding-top:10px;}
.supert li em{ display:block; font:30px Arial, Helvetica, sans-serif; color:#c7c7c7; margin:12px 2% 0 0; float:left;}
.supert li span{ display:block; font:28px "Microsoft YaHei UI"; color:#333; padding-top:6px; float:left;}
.supert li span i{ display:block; font:12px "Microsoft YaHei UI"; color:#bdbdbd; text-transform:uppercase;}
.supert .cur em,.supert li:hover em,.supert .cur span i,.supert li:hover span i,.supert .cur span,.supert li:hover span{ color:#00a6eb;}
.supert .cur span,.supert li:hover span{ font-weight:bold;}
.super2{ width:1400px; margin:0 auto;}
.super2 dt{ width:50%; float:right;}
.super2 dt img{ display:block; width:100%;}
.super2 dd{ width:49.285%; float:left;}
.super2 dd h4{ font:36px "Microsoft YaHei UI"; color:#333; padding-top:90px;}
.super2 dd p{ font:18px "Microsoft YaHei UI"; line-height:32px; color:#666666; margin:14px 0 25px;}
.super2 dd span a{ display:block; width:133px; height:36px; background:#00a6eb; font:14px "Microsoft YaHei UI"; line-height:36px; color:#fff; position:relative; text-align:center;}
.super2 dd span a:before{ content:"";position:absolute; top:14px; left:100px; width:0; height:0; border-left:5px solid #fff; border-top:5px solid rgba(0,0,0,0);border-bottom:5px solid rgba(0,0,0,0);}
.super2 dd h5{ margin-top:90px;}
.super2 dd h5 img{ display:block; width:48.9855%; float:left;}
.super2 dd h5 img:last-child{ float:right;}
.case{ height:880px; padding-top:85px; overflow:hidden;}
.case .content{ width:1400px; margin:0 auto;}
.caset{ width:17.12%; float:left; background:#fff; overflow:hidden;}
.caset h3,.caset h5{ height:92px; border-bottom:1px solid #dcdcdc; font:20px "Microsoft YaHei UI"; text-align:center; line-height:92px; color:#333;}
.caset h3 a,.caset h5 a{ display:block; color:#333;}
.caset .cur a,.caset li:hover a,.caset h5 a:hover{ color:#fff; background:#00a6eb;-webkit-transition:all 0.7s;
transition:all 0.7s;transition-property:background;
-moz-transition-property: background; /* Firefox 4 */
-webkit-transition-property:background; /* Safari 脙楼芒鈧劉脜鈥 Chrome */
-o-transition-property:background;}
.case1{ width:82.85%; float:left; overflow:hidden; }
.case1 dl{ position:relative;}
.case1 dt{ position:relative;height:653px; overflow:hidden;}
.case1 dt img{ display:block; width:100%;}
.case1 dd{ width:100%; background:rgba(0,0,0,0.7); position:absolute; bottom:0; padding:25px 4%; box-sizing:border-box;}
.case1 dd h4 a{ display:block; font:24px "Microsoft YaHei UI"; font-weight:bold; color:#fff;}
.case1 dd p{ font:18px "Microsoft YaHei UI"; color:#fff; padding-top:8px;}
.case1 dd p a{ color:#00a6eb;}
.case1 dd h4 a:hover{ color:#00a6eb;}
.case1 dt:before{content: '';
cursor: pointer;
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
transform: skewx(-25deg);}
.case1 dt:hover:before{
left: 100%;
-moz-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
.shil{ height:845px; overflow:hidden;}
.shil .content{ width:1400px; margin:0 auto;}
.shilt{ width:29.285%; float:left;}
.shilt h3{ width:48.88%; float:left; position:relative; overflow:hidden; margin-bottom:8px;}
.shilt h3:nth-child(2n){ float:right;}
.shilt h3 img{ display:block; width:100%;}
.shilt h3 em{ display:block; width:100%; height:48px;position:absolute; bottom:0; left:0; -webkit-transition: height .5s cubic-bezier(0.52, 1.64, 0.37, 0.66); -webkit-transition: height .5s cubic-bezier(0.52, 1.64, 0.37, 0.66); font:18px "Microsoft YaHei UI"; text-align:center; line-height:48px; color:#fff;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,000000+100&0+0,1+100 */
background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.shilt h3 a:hover em,.shilt .cur em{ background:rgba(0,166,235,0.7); height:100%; font-weight:bold; padding-top:28%; box-sizing:border-box;}
.shil1{ width:70.2%; float:right; overflow:hidden;}
.shil1 dl{ background:#fff; position:relative;}
.shil1 dt{ width:984px; height:470px; overflow:hidden;}
.shil1 dt img{ display:block;width:100%; height:auto;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.shil1 dd{ padding:40px; height:74px; position:relative;}
.shil1 dd h3 a{ display:block; font:24px "Microsoft YaHei UI"; font-weight:bold; color:#333;}
.shil1 dd p{ font:18px "Microsoft YaHei UI"; line-height:24px; color:#666; padding-top:6px; width:80%;}
.shil1 dd span a{ display:block; position:absolute;top:70px; right:40px; width:140px; height:35px; background:#00a6eb; font:14px "Microsoft YaHei UI"; text-align:center; line-height:35px; color:#fff;white-space: nowrap;}
.shil1 dl:hover dt img{-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-transform:scale(1.1,1.1);}
.honor{ background:url(../images/honor_bg.jpg) no-repeat center top; padding-top:100px; height:800px; overflow:hidden;}
.honor .tit a,.honor .tit em{ color:#fff;}
.honor .content{ width:1400px; margin:0 auto;}
.honor1{ position:relative; margin-top:80px; height:295px;}
.honor2{ overflow:hidden;}
.honor1 li{ width:24%; height:275px; float:left; background:url(../images/honor_bg.png) no-repeat center top; background-size:100% auto; margin-right:17px;}
.honor1 li a{ display:block; width:100%; height:260px;}
.honor1 li img{ display:block; width:100%; height:100%; padding:17px; box-sizing:border-box;}
.honor_l{ width:23px; height:39px; background:url(../images/honor_l.png) no-repeat; position:absolute; top:36%; left:-60px;}
.honor_r{ width:23px; height:39px; background:url(../images/honor_r.png) no-repeat; position:absolute; top:36%; right:-60px;}
.renz{ height:140px; background:#f3f3f0; position:relative;}
.renz1{ overflow:hidden; height:140px; margin-bottom:30px;}
.renz li{ float:left; width:13.93%; margin:14px 2.3% 0 0;}
.renz li img{ display:block; width:100%;}
.renz_arr{ height:13px; text-align:center;}
.renz_arr a{ display:inline-block; width:13px; height:13px; border-radius:13px; background:rgba(255,255,255,0.2); margin:0 5px;}
.renz_arr a:hover{background:rgba(255,255,255,1);}
.news{ height:985px; padding-top:75px; overflow:hidden;}
.news .content{ width:1400px; margin:0 auto;}
.newst{ height:44px; margin-bottom:30px; text-align:center;}
.newst a{ display:inline-block; width:175px; height:44px; background:#b7b7b7; font:20px "Microsoft YaHei UI"; text-align:center; line-height:44px; color:#fff; margin:0 6px;}
.newst a:hover,.newst .cur{ background:#00a6eb;}
.news1{ height:480px;}
.news1 dl{ width:48.2857%; background:#fff; float:left; overflow:hidden;}
.news1 dt{ width:100%; height:auto; overflow:hidden;}
.news1 dt img{ display:block;width:100%; height:auto;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.news1 .dd02{ padding:20px 24px 25px;}
.news1 .dd02 h3 a{ display:block; font:20px "Microsoft YaHei UI"; color:#333; font-weight:bold;}
.news1 .dd02 p{ font:18px "Microsoft YaHei UI"; line-height:28px; color:#666; margin:8px 0;}
.news1 .dd02 p a{ color:#00a6eb;}
.news1 .dd02 em{ display:block; font:14px "Microsoft YaHei UI"; font-weight:bold; color:#333;}
.news1 dl:hover dt img{-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-transform:scale(1.1,1.1);}
.news1 dd:hover h3 a,.news1 .dd01 a:hover,.news1 li:hover span{ color:#00a6eb;}
.news1 .dd01{ padding:0 24px; height:67px; border-top:1px solid #d5d5d5; font:18px "Microsoft YaHei UI"; line-height:67px; color:#333;}
.news1 .dd01 a{ color:#333;}
.news1 .dd01 em{font:14px "Microsoft YaHei UI"; font-weight:bold; float:right; line-height:67px;}
.news1 ul{ width:50%; float:right;}
.news1 li{ width:48.2857%; float:left; height:326px; background:#fff; margin-bottom:23px;}
.news1 li img{ display:block; width:100%;}
.news1 li span{ display:block; font:18px "Microsoft YaHei UI"; padding:18px; line-height:28px; color:#333;}
.news1 li em{ display:block;font:14px "Microsoft YaHei UI"; font-weight:bold; color:#333; padding-left:18px;}
.news1 li:nth-child(2n){ float:right;}
.about{ position:relative;}
.about dl{ position:relative;}
.about dt img{ display;block; width:100%;}
.about dd{ width:1200px; font:18px "Microsoft YaHei UI"; line-height:34px; color:#2f2f2f; position:absolute; top:40px; left:50%; margin-left:-600px; text-align:center;}
.about dd a{ color:#00a6eb;}
.pic{ height:400px;overflow:hidden; margin-top:38px;}
.pic .content{ width:1400px; margin:0 auto;}
.pict{width:640px; height:54px; margin:0 auto 35px; border:1px solid #bfbfbf; border-right:0;}
.pict h3{ width:33.33%; float:left; font:20px "Microsoft YaHei UI"; color:#333; text-align:center; line-height:54px; border-right:1px solid #bfbfbf; box-sizing:border-box;}
.pict h3 a{ display:block; color:#222;}
.pict .cur a{ background:#00a6eb; color:#fff;}
.pic1{ overflow:hidden;}
.pic2{ height:250px; position:relative;}
.pic3{ overflow:hidden;}
.pic1 li{ width:23.9285%; float:left; height:248px; margin-right:20px; overflow:hidden; position:relative;border:1px solid #eee; box-sizing:border-box;}
.pic1 li img{ display:block; width:100%;height:248px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.pic1 li a:hover img{-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-transform:scale(1.1,1.1);}
.pic1 li em{display:block;position: absolute;
bottom: 0;
height: 0;
width: 100%;
text-align: center;
font: 18px "Microsoft YaHei UI";
color: #fff;
background: rgba(0,166,235,0.9); line-height: 248px;
-webkit-transition: height .5s cubic-bezier(0.52, 1.64, 0.37, 0.66);
-webkit-transition: height .5s cubic-bezier(0.52, 1.64, 0.37, 0.66);}
.pic1 li a:hover em{ height:100%;}
.link{width:1400px; margin: 0 auto; position: relative; z-index:12;}
.link .content{position: absolute; top: -70px;left: 0; width:536px; height:70px;font:16px "Microsoft YaHei";color:#7e7e7e; line-height:70px;}
.link a{ display: inline-block;padding:0 17px; font:16px "Microsoft YaHei"; color:#7e7e7e;line-height:70px; height:70px; position:relative;}
.link a:hover{font-weight:bold; text-decoration:underline; color:#00a6eb;}
.link a:last-child{ padding-right:0;}
@media (min-width: 1200px) and (max-width: 1680px) {
.pro .content,.supert,.super2,.case .content,.shil .content,.honor .content,.news .content,.pic .content,.link{ width:1200px;}
.super1{ height:608px;}
.super2 dd h4{ padding-top:30px;}
.super2 dd h5{ margin-top:60px;}
.caset h3, .caset h5{ height:79px; line-height:79px;}
.case{ height:780px;}
.case1 dt{ height:559px;}
.shil{ height:760px;}
.shil1 dl{ height:539px;}
.shil1 dd{ position:absolute; bottom:0; left:0; width:100%; box-sizing:border-box; padding:20px; height:106px; background:#fff;}
.shil1 dd span a{ top:50px; width:70px;}
.honor1 li img{ height:auto; padding:15px;}
.news{ height:910px;}
.news1 li{ height:299px;}
}
@keyframes living {
0%{
transform: scale(1);
/* opacity: 1; */margin-top: 6px;
}
50%{
transform: scale(1);
/* opacity: 0.7; */margin-top:0px;
}
100%{
transform: scale(1);
/* opacity: 1; */margin-top: 6px;
}
}
@keyframes living1 {
0%{
transform: scale(1);
/* opacity: 1; */margin-top: 0;
}
50%{
transform: scale(1);
/* opacity: 0.7; */margin-top: 0;
}
100%{
transform: scale(1);
/* opacity: 1; */margin-top: 0;
}
}
@-webkit-keyframes spin{
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*animation*/
@-webkit-keyframes hvr-buzz-out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}
100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}
@keyframes hvr-buzz-out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}
100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}