@charset "utf-8";
/* CSS sxf 2013 */
*{margin:0;padding:0;list-style-type:none;}
body{ font-family:"SF Pro SC","SF Pro Display","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif, "微软雅黑"; color:#333; font-size:12px; background:#fff; overflow-x: hidden}
a,img{border:0;}
a { text-decoration:none;color:#666}
a:hover{ text-decoration:underline;color:#f3a011}
a:focus{ outline:none}
a i{ display:none; cursor:pointer}
.fl{ float:left;*display:inline}
.fr{ float:right;*display:inline}
img{display:block}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.cb { clear:both;}
.pr{ position:relative} 
.pa{ position:absolute}
.cg { color:#8dc014;}
.ovh{ overflow:hidden;*zoom:1}
em,i{ font-style:normal}
h1,h2,h3,h4,h5,h6{ font-weight:normal}
.t-o{
white-space:nowrap !important;  /*强制文字不换行(标准浏览器)*/
white-space:normal;  /*溢出的时候文字换行，并配合上面的固定高度，对文字进行裁切*/
text-overflow:ellipsis;  /*截断文字，显示省略号(...)*/
-o-text-overflow:ellipsis;  /*Opera的专用截断文字的属性*/
}
/*header0*/
.logo a{ display:block; overflow:hidden; float:left}
.header{clear:both; position:absolute;top:0;left:0;width:100%;}
.header-inline{width:1244px; margin:auto;}
.logo{ float:left; height:110px; position: relative;z-index: 2}
.logo a{ background:url(../images/logo.png) no-repeat; width:165px; height:51px;margin-top: 24px; text-indent:-9999px}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.nav a:hover{ text-decoration:none}
.nav{ position:relative; z-index:2;float:right; margin-top: 26px;}
.nav .nLi{ float:left;  position:relative; z-index:99 }

.nav .nLi.hover h5 a,.nav .nLi:hover h5 a{ color:#fff; text-align:center}
.nav .line{ width: 30px;height: 4px;background:#ffb400; display:block; margin:auto; margin-top: 8px; display:none}
.nav .nLi:hover .line,.nav .nLi.hover .line{ display:block}
.nav h5{ float:left; line-height:33px;  }
.nav h5 a{ display:block; margin: 0 20px; font-size: 14px;color:#fff; font-family:"微软雅黑"}
.nav .nLi:hover  .sub{ display:block;}
.nav .sub{  left:0px; top:27px;  position:absolute;display:none;padding-top:30px; padding-bottom:10px;  width: 108px;}
.nav .sub a{ display:block;color:#fff; text-align:center; font-size:14px;padding:5px 0}
.nav .sub a:hover{ text-decoration:underline}
/*banner*/
.indexbanner{width:100%; height:500px; background:#333}
.indexbanner.indxbj{ background:url(../images/index-bj.jpg) no-repeat top center;}
.indexbanner.planbj{ background:url(../images/plan-bj.jpg) no-repeat top center;}
.indexbanner.planbj2{ background:url(../images/plan-bj2.jpg) no-repeat top center;}
.indexbanner.kjbj{ background:url(../images/kj-bj.jpg) no-repeat top center;}
.indexbanner.mcnbj{background: url(../images/msn-bj.jpg) no-repeat top center;}
.indexbanner.business-bj{background:url(../images/business-bj.jpg) no-repeat top center;}
.indexbanner.business-bj{background:url(../images/business-bj.jpg) no-repeat top center;}
.indexbanner.service-bj{background:url(../images/service-bj.jpg) no-repeat top center;}
.indexbanner-ceneter .h1s {
    color: #fff;
    font-size: 40px;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 163px;
}
.indexbanner-ceneter .h2s {
    color: #fff;
    font-size: 40px;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 222px;
}
.indexbanner-ceneter .h3s {
    color: #fff;
    font-size: 20px;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 299px;
}
.indexbanner-ceneter .plan1s {
    color: #fff;
    font-size: 40px;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 214px;
}
.indexbanner-ceneter .plan2s {
    color: #fff;
    font-size: 40px;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 300px;
}

/*index-jsfont*/
.w1246{width:1246px; margin:auto}
.index-jsfont{ text-align:center;color:#333;font-size:34px; padding:66px 0;}
.service-box{ text-align:center;width:962px; margin:auto}
.service-lis{width:469px;height:308px; position: relative; display:inline-block; margin-bottom:10px;margin-left:10px;}
.service-img{width:469px;height:308px;}
.service-text{font-size:22px;color:#fff; position:absolute; width:100%;bottom:36px;left:0; text-indent:40px; text-align:left}
/*service-nr-box*/
.service-nr-box{ text-align:center; padding-bottom:100px}
.service-nr-box dl{display:inline-block;width:308px;}
.service-nr-box dt{ display:block; clear:both;width:80px;height:71; margin:auto }
.service-nr-box dt img{ display:block; clear:both;width:80px;height:71; margin:auto }
.service-nr-box dd{ display:block; clear:both}
.service-nr-box dd h2{color:#333; font-size:24px; text-align:center; padding-top:10px}
.service-nr-box ul.lb{ padding-top:30px}	
.service-nr-box li{color:#666; clear:both; display:block; padding-bottom:15px; font-size:18px; text-align:center}	
/*foot*/
.fot_copy{ width:100%; background:#333; padding:10px 0; clear:both; overflow:hidden}
.link_pr{  color:#9f9f9f; overflow:hidden ;clear:both; text-align:center;}
.link_pr a{color:#ccc}
.fot_copy .copyright{ padding-top:10px; text-align:center; margin:auto; clear:both; overflow:hidden;color:#ccc; display:block; text-align:center; }
 .copyright a{color:#ccc;}
/*project-box*/
.project-box{ text-align:center}
.project-left{ display:inline-block; margin-right:200px;}
.project-right{ display:inline-block}
.project-head{ margin-bottom:40px}
.project-head .img{ display:inline-block; margin-top:-6px;vertical-align:middle;margin-right:10px;width:86px}
.project-head .texts{font-size:30px;color:#383838; display:inline-block; vertical-align:middle; }
.project-lis{font-size:38px;color:#383838;width:130px; height:405px;border-radius:6px; border:#ffb400 4px solid ; text-align:center; display:block;  display:block}
.project-lis em{ margin:auto; display:block;width:60px}
.pjt-left{ margin:auto;width:390px;height:402px;}
/*pjt-code-box*/
.pjt-code-box{ background:url(../images/paln-code-bj.jpg) no-repeat top center; height:625px; margin-top:150px;}
.pjt-code{width:600px; text-align:center}
.pjt-code .texts{font-size:30px;color:#333; text-align:center; padding:100px 0 50px 0;}
.pjt-code .code-img{ margin:auto}
.pjt-code .s-texts{font-size:18px; text-align:center;margin-top:20px;color:#666}

/**/
.rw-box{ text-align:center}
.rw-list.m1{margin-right:34px}
.rw-list{background:#f6f6f6;width: 412px;display:inline-block;vertical-align:text-top;}
.rw-list.height2{height:74h0px}
.rw-head{padding-top: 36px;}
.rw-head .texts{font-size: 30px;color:#333;margin:auto;text-align:center;margin-bottom:-25px;display:block;overflow:hidden;font-weight: bold;}
.rw-head .yellowline{background:#f7e7c0;height:36px;border-radius:36px;width: 226px;margin:auto;display:block;overflow:hidden;}
.rw-ul{padding-left:60px;padding-top: 39px;}
.rw-ul li{display:block;clear:both;overflow:hidden;margin-bottom: 22px;}
.rw-ul li .img{width: 50px;height: 39px;float:left;}
.rw-ul li .texts{float:left;font-size: 20px;color:#666;padding-left: 9px;line-height: 39px;text-align:left;}
.rw-ul li .texts.m1{/* margin-top:-10px */}

/*kjbar*/
.kjbarbox{text-align:center;margin-bottom: 80px;}
.kjbar{width: 294px;height: 617px;position:relative;display:inline-block;}
.kjbar.bk1{background:url(../images/kj-bar1.jpg) no-repeat top center;margin-right:30px;}
.kjbar.bk2{ background:url(../images/kj-bar2.jpg) no-repeat top center;margin-right:30px}
.kjbar.bk3{ background:url(../images/kj-bar3.jpg) no-repeat top center;}
.kjbar .kj-code{width: 120px;height: 120px;position:absolute;bottom: 46px;left:50%;margin-left: -60px;}

/*mcnbox*/
.mcnbox{ text-align:center}
.mcnbox dl{ display:inline-block;margin-right:120px}
.mcnbox dl.mr0{ margin:0}
.mcnbox dt{clear:both}
.mcnbox dt img{margin:auto;width: 86px;}
.mcnbox dd{color:#666666;font-size: 28px;text-align:center;clear:both;padding-top:30px;}

/*hero-box*/
.hero-box{ text-align:center;}
.hero-box.marginstyle{ margin:50px 0 100px 0}
.hero-box dl{display:inline-block;margin-right: 63px;width:302px;}
.hero-box dl.mr0{ margin:0}
.hero-box dt{clear:both}
.hero-box dt img{margin:auto;width: 260px;}
.hero-box dd{color:#fff;background:#ffb400;font-size: 20px;text-align:center;clear:both;width:302px;height: 68px;line-height: 68px;}
.hero-box dd span{font-size: 18px;line-height: 24px;padding-top: 12px;display:block;}

/*business-dxqd*/
.business-dxqd{margin:auto;margin-bottom:120px;width: 801px;}
.bus-jsfont{text-align:center;color:#383838;font-size: 34px;padding:60px 0;}
.qundao{background:#f6f6f6;padding-bottom:100px;/* max-width:1440px; */margin:auto;}
.qundao h4{text-align:center;color:#383838;font-size: 34px;padding:60px 0;}
.business-ppqd{margin:auto;width: 800px;}
/*products*/
.products{ text-align:center; width:1300px; margin:auto}
.products.mbototm{ margin-bottom:70px}
.products .imgmask dt.margin2{margin:0;padding-top: 120px;}
.products .imgbox{width:410px;height:328px; display:inline-block; position:relative;}
.products .imgmask{position:absolute;width:410px;height:328px;z-index:2;background:#ffb400;display:none;background: rgba(255, 180, 0, 0.7);}
/*.products .imgmask.green{ background:#4caf50}
.products .imgmask.red { background:#ff5722}
.products .imgmask.zhi { background:#9c27b0}*/
.products .imgmask.gray { background:rgb(88 222 93 / 80%)}

.products .imgbox:hover .imgmask{ display:block}
.products .imgbox:hover .stext{ display:none}
.products .imgbox:hover  .smallimg{ opacity:.3}
.products .imgmask dl{ padding-left:50px; text-align:left}
.products .imgmask dt{font-size: 46px;color:#fff;padding:40px 0 0 0;font-weight: bold;}
.products .imgmask dd{ padding-top:20px}
.products .texts{font-size: 24px;padding-bottom:20px;color:#fff;clear:both;display:block;overflow:hidden;}
.products .stext{position:absolute;bottom:30px;left:30px;color:#fff;font-size: 34px;z-index:1;}
.products .smallimg{width:410px;height:328px;}


/**/
.w1024{width:1024px; margin:0 auto;font-size:14px;}
/*2016-3-11*/
.mb10{ margin-bottom:10px;}.mr40{ margin-right:50px;}.mt10{ margin-top:10px;}.mt60{ margin:50px 0 0 30px;}
.f18{font-size:18px;}

.countus-banner{background:url(../images/countus-banner.jpg) no-repeat top center;width:100%;height:500px; display:block;}
.w1024{width:1024px; margin:0 auto;font-size:14px;}
.copamy{padding-bottom:70px;}
.title2{text-align:center; background:url(../images/line.png) no-repeat left center;}
.white{padding:10px 20px;width:260px; margin:0 auto;text-align:center}
.title2 h3{font-size:40px;color:#3a3a3a; font-weight:normal;}
.title2 p{color:#b9b9b9; font-size:14px; line-height:14px; text-align:center}
.info{ margin:40px 0 40px 30px;}
.w620{width:620px;color:#333;}
.www .font{color:#727272; line-height:30px; text-indent:2em;font-size:14px; marign-top:10px;}
.gerycolor{color:#727272;font-size:14px; line-height:30px;}
.greybj{ background:url(../images/grey.jpg) no-repeat top center; width:100%; height:545px;padding:30px 0 0 0;}
.www .img{ margin:0px 70px 0 30px;padding:0; background:#fff;}


.fc dl{width:272px;float:left; margin:10px 40px 0 10px;}
.fc dl dt{ margin:0 0 20px 100px;}
.fc dl dd{ text-indent:2em;color:#727272;font-size:14px; line-height:24px;}

.bc dl{width:216px;float:left; margin:10px 20px 0 10px;}
.bc dl dt{width:216px;border:1px solid #e4e5e5;padding:1px;height:243px;background:#fff; display:block;}
.bc dl dd{color:#727272;font-size:14px; line-height:24px;}
.tc{text-align:center;font-weight:bold;}

.picscoller {position:relative; height:265px;}
.picscoller  .bd{ z-index:1 ; margin:auto;width:980px; height:265px;}
.picscoller  .bd ul{ overflow:hidden; zoom:1;overflow:hidden;}
.picscoller li{}
.picscoller .next{position:absolute; right:-10px;font-size:30px;top:90px;}
.picscoller .next:hover,.picscoller .prev:hover{color:#F00;}
.picscoller .prev{position:absolute; left:-10px;font-size:30px;top:90px;}

.w620 p{ font-size:14px;}
.w1024{font-size:14px;}
.fl-nr{ position:absolute;left:56px;top:10px;width:500px}
.fl-nr .v1{font-size:16px;color:#333;  padding-bottom:25px}

/* h5style */
.h5style,.service-lis,.products .imgbox,.mcnbox dl,.hero-box dl,.bc dl,.fc dl,.service-nr-box dt {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.h5style:hover, .h5style:focus, .h5style:active {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}

.service-lis:hover, .service-lis:focus, .service-lis:active {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}
.products .imgbox:hover, .products .imgbox:focus, .products .imgbox:active {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}
.mcnbox dl:hover, .mcnbox dl:focus, .mcnbox dl:active {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}
.hero-box dl:hover, .hero-box dl:focus, .hero-box dl:active {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}
.bc dl:hover, .bc dl:focus, .bc dl:active {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}
.fc dl:hover, .fc dl:focus, .fc dl:active {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}
.service-nr-box dt:hover, .service-nr-box dt:focus, .service-nr-box dt:active {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}



/* 延迟定义动画 */
.animation{
animation-name: myAnimation;
animation-duration: 1s;
animation-delay:0.5s;  /* 延迟时间为1秒 */
}
/* 定义动画关键帧 */
@keyframes myAnimation{
from{opacity:0;}
to{opacity:1;}
}