body {
  font: 16px/1.5 "Microsoft YaHei",Helvetica,STHeiti STXihei,Microsoft JhengHei,Arial;
}
.container {
  margin: 0 auto;
  max-width: 1200px;
  width: 1200px;
  height: auto;
  clear: both;
  overflow: hidden;
}
#section2 .container_2{position:absolute;bottom:0px;width:100%;}
@media (max-width: 1024px) {
  .container {
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    min-width: 100%;
  }
}


.active .contain,.slide .contain {
  display: block;
}

.slide {
  display: block;
  z-index: 2;
}
.swipe {
  display: block;
  z-index: 3;
  transition-duration: 0ms !important;
  -webkit-transition-duration: 0ms !important;
}
#section1 {
  background: #3f9dec;
}
.section{background-size: cover;}
#section2 {
height:600px;
  background-image: linear-gradient(to top, #4272ef, #2577fe);
}
#section3 {height:600px;
  background: url(../images/bg_03.jpg) repeat center 0;
}
#section4 {height:600px;
  background: url(../images/bg_04.jpg) repeat center 0;
}
#section5 {height:600px;
  background: url(../images/bg_05.jpg) repeat center 0;
}
#section6 {height:600px;
  background: url(../images/bg_06.jpg) repeat center 0;
}
#section7 {height:600px;
  background: url(../images/bg_07.jpg) repeat center 0;
}
/* 正品轮播导航 */
.fp-tooltip{
  color: #AAA;
}
#fp-nav span, .fp-slidesNav span{
  border-color: #AAA;
}
#fp-nav li .active span, .fp-slidesNav .active span{
  background: #AAA;
}
#section2 .wrap{max-height: 100%;overflow: hidden;}
.service-wear {
  padding: 0 26px;
  width: 100%;
  box-sizing: border-box;
margin:auto;
position:relative;
  bottom:0px;
  height: 550px;
}
.service-wear .service-sort {
  position: absolute;
  bottom: 0px;
  padding-top: 150px;
  width: 258px;
  overflow: hidden;
  bottom: -5px;
}
.service-sort.web {
  left: 26px;
  background: url(../images/in-web.png) no-repeat 100%;
  height: 294px;
}
.service-sort.web:hover {
  height: 332px;
  background-size: 100% 100%;
  z-index: 3;
  transition: all 0.2s ease-out;
}
.service-sort.msite {
  left: 258px;
  background: url(../images/in-msite.png) no-repeat 100%;
  height: 360px;
}
.service-sort.msite:hover {
  height: 398px;
  background-size: 100% 100%;
  z-index: 3;
  transition: all 0.2s ease-out;
}
.service-sort.wx {
  left: 490px;
  background: url(../images/in-wx.png) no-repeat 100%;
  height: 435px;
}
.service-sort.wx:hover {
  height: 473px;
  background-size: 100% 100%;
  z-index: 3;
  transition: all 0.2s ease-out;
}
.service-sort.mkt {
  left: 722px;
  background: url(../images/in-mkt.png) no-repeat 100%;
  height: 357px;
}
.service-sort.mkt:hover {
  height: 395px;
  background-size: 100% 100%;
  z-index: 3;
  transition: all 0.2s ease-out;
}
.service-sort.dom {
  left: 954px;
  background: url(../images/in-dom.png) no-repeat 100%;
  height: 316px;
}
.service-sort.dom:hover {
  height: 354px;
  background-size: 100% 100%;
  z-index: 3;
  transition: all 0.2s ease-out;
}
.service-sort .sort-name {
  text-align: center;
  color: #ffffff;
  font-size: 20px;
}
.service-sort .sort-name .icon-bg {
  width: 48px;
  height: 48px;
  border-radius: 88px;
  padding: 20px;
  background-color: #e7f8fd;
  text-align: center;
  margin: 20px 0;
  margin-left: 84px;
}
.service-sort .sort-name .caret-white {
  display: none;
}
.service-sort .service-des {
font-size:14px;
  padding: 20px 44px 80px 34px;
  text-align: left;
  color:#fff;
}



@media (max-width: 1024px) {
  .field-description {
    display: none;
  }
  .service-wear {
    padding: 40px 20px;
    padding-bottom: 70px;
    height: auto;
  }
  .service-wear .service-sort,
  .service-wear .service-sort:hover {
    width: 100%;
    display: block;
    position: static;
    background: none;
    box-sizing: border-box;
    height: auto;
    padding-top: 0px;
  }
  .service-wear .service-sort .sort-name,
  .service-wear .service-sort:hover .sort-name {
    padding: 20px 0;
    color: #ffffff;
    border-bottom: 1px #ffffff solid;
    position: relative;
    text-align: left;
  }
  .service-wear .service-sort .sort-name .icon-bg,
  .service-wear .service-sort:hover .sort-name .icon-bg {
    display: inline-block;
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    vertical-align: middle;
  }
  .service-wear .service-sort .sort-name .top,
  .service-wear .service-sort:hover .sort-name .top,
  .service-wear .service-sort .sort-name .bottom,
  .service-wear .service-sort:hover .sort-name .bottom {
    position: absolute;
    right: 25px;
    top: 30px;
    display: block;
    border-right: 8px solid transparent;
    border-top: 8px solid #ffffff;
    border-left: 8px solid transparent;
  }
  .service-wear .service-sort .sort-name .top,
  .service-wear .service-sort:hover .sort-name .top {
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ffffff;
    border-left: 8px solid transparent;
    border-top: 8px solid transparent;
  }
  .service-wear .service-sort .service-des,
  .service-wear .service-sort:hover .service-des {
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0;
    display: none;
  }
  .service-wear .service-sort .service-des.active,
  .service-wear .service-sort:hover .service-des.active {
    display: block;
  }
}    


.proud-icon {
  width: 48px;
  height: 48px;
  display: block;
  background-size: 48px 48px;
}
.proud-icon.web {
  background-image: url(../images/ser_web.png);
}
.proud-icon.msite {
  background-image: url(../images/ser_msite.png);
}
.proud-icon.wx {
  background-image: url(../images/ser_wx.png);
}
.proud-icon.mkt {
  background-image: url(../images/ser_mkt.png);
}
.proud-icon.dom {
  background-image: url(../images/ser_dom.png);
}
.section-head {position: relative;padding-top:150px;}
.section-head h2{text-align: center;}
.section-head h3{font-size:26px;padding-left:47.2%;}
.section-title{position: relative;display: inline-block;font-size:78px;line-height: 1;height:78px;}
.section-title .p1{position: absolute;top:0;left:10px;top:-30px;text-align: left;color:#fff;font-size:20px;font-weight: normal;letter-spacing: 20px;}
.font-white .p1{color:#fff}
.section-title .p2{position: absolute;top:-8px;left:360px;text-align: left;width:360px;color:#3f9dec;font-size:14px;font-weight: normal;letter-spacing: 10px;}
.font-blue{color:#007be3}
.font-white{color:#fff;}
.font-yellow{color:#ff0}
.font-black{color:#000}




.section-head {position: relative;padding-top:115px;}
.section-head h2{text-align: center;}
.section-head h3{font-size:20px;}
.section-title{position: relative;display: inline-block;font-size:50px;line-height: 1;height:50px;color:#fff;}
.section-title .p1{position: absolute;top:0;left:10px;top:-24px;text-align: left;font-size:16px;font-weight: normal;letter-spacing: 20px;color:#fff;}
.font-white .p1{color:#fff}
.section-title .p2{position: absolute;top:-8px;left:320px;text-align: left;width:320px;color:#3f9dec;font-size:12px;font-weight: normal;letter-spacing: 10px;}
.font-blue{color:#007be3}
.font-white{color:#fff;}
.font-yellow{color:#ff0}
.font-black{color:#000}

  .quan_gd2{ display:none;  }
  .quan_gd{ display:block !important; position:relative; z-index:3; top:75px; height:40%;}
  .quan{ display:block; width:25%; position: relative; float:left; height: auto; overflow:hidden; padding-bottom:1em;}
  .quan_jsk{ display:block; width:25%; position: relative; float:left; height: auto;  padding-bottom:1em;}
  .gd_x{ background:url(../images/gd_x.png) center center repeat-x; width:0; height:1px; display:block; position:relative; top:50%;}
  .gd_gdq{ display:block; position:relative; z-index:1; width:100%; height:100%;}
  .quan_js{ position:relative;  width:78%; top:0.8em; height:60%; padding-left:3%; padding-top:0.9em; border-left:1px solid #676767;}
  .quan_js1{ font-size:16px; color:#f0bf5f; line-height:1.6em; padding-bottom:0.2em;}
  .quan_js2{ font-size:14px; color:#FFF; line-height:1.5em;}

  /**横排动作*/
  #section3.active .gd_x{ 
    -webkit-transition:0.3s linear;
    -moz-transition: 0.3s linear;
    -ms-transition:0.3s linear;
    -o-transition:0.3s linear;
    transition:0.3s linear;}
  #section3.active .gd_x1 {	-webkit-transition-delay:1.0s; 	-moz-transition-delay:1.0s; 	-o-transition-delay:1.0s; 	-ms-transition-delay:1.0s; 	transition-delay:1.0s;}
  #section3.active .gd_x2 {	-webkit-transition-delay:1.3s; 	-moz-transition-delay:1.3s; 	-o-transition-delay:1.3s; 	-ms-transition-delay:1.3s; 	transition-delay:1.3s;}
  #section3.active .gd_x3 {	-webkit-transition-delay:1.8s; 	-moz-transition-delay:1.8s; 	-o-transition-delay:1.8s; 	-ms-transition-delay:1.8s; 	transition-delay:1.8s;}
  #section3.active .gd_x4 {	-webkit-transition-delay:2.1s; 	-moz-transition-delay:2.1s; 	-o-transition-delay:2.1s; 	-ms-transition-delay:2.1s; 	transition-delay:2.1s;}
  #section3.active .gd_x5 {	-webkit-transition-delay:2.4s; 	-moz-transition-delay:2.4s; 	-o-transition-delay:2.4s; 	-ms-transition-delay:2.4s; 	transition-delay:2.4s;}
  #section3.active .gd_x6 {	-webkit-transition-delay:2.7s; 	-moz-transition-delay:2.7s; 	-o-transition-delay:2.7s; 	-ms-transition-delay:2.7s; 	transition-delay:2.7s;}
  #section3.active .gd_x7 {	-webkit-transition-delay:3s; 	-moz-transition-delay:3s; 	-o-transition-delay:3s; 	-ms-transition-delay:3s; 	transition-delay:3s;}
  #section3.active .gd_x8 {	-webkit-transition-delay:3.3s; 	-moz-transition-delay:3.3s; 	-o-transition-delay:3.3s; 	-ms-transition-delay:3.3s; 	transition-delay:3.3s;}
  #section3.active .gd_x1, #section3.active .gd_x2 , #section3.active .gd_x3 , #section3.active .gd_x4 , #section3.active .gd_x5, #section3.active .gd_x6 , #section3.active .gd_x7 , #section3.active .gd_x8{ width:100%;}
  .gd1,  .gd2,  .gd3,  .gd4{ display:block; position:relative;}
  .gd1{left:100px;}  .gd2{left:350px;}  .gd3{left:600px;}  .gd4{left:850px;}
  #section3.active  .gd1, #section3.active  .gd2, #section3.active  .gd3 , #section3.active  .gd4{ 
    -webkit-transition:1.5s cubic-bezier(1, .57, .48, 1.45) ;
    -moz-transition:1.5s cubic-bezier(1, .57, .48, 1.45) ;
    -ms-transition:1.5s cubic-bezier(1, .57, .48, 1.45) ;
    -o-transition:1.5s cubic-bezier(1, .57, .48, 1.45) ;
    transition:1.5s cubic-bezier(1, .57, .48, 1.45) ; left:0;
  }
  #section3.active .gd1, #section3.active .gd2, #section3.active .gd3, #section3.active .gd4{ left:0;}

  #section3 .quan_js41, #section3 .quan_js42, #section3 .quan_js43 ,#section3 .quan_js44{ top:0% !important; opacity:0; -moz-opacity:0;  -ms-opacity:0;  -o-opacity:0; -webkit-opacity:0;   filter: alpha(opacity=0);}
  #section3.active .quan_js41, #section3.active .quan_js42, #section3.active .quan_js43 ,#section3.active  .quan_js44{
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -ms-transition:0.5s;
    transition:0.5s;}
  #section3.active .quan_js41{	-webkit-transition-delay:1.0s; 	-moz-transition-delay:1.0s; 	-o-transition-delay:1.0s; 	-ms-transition-delay:1.0s; 	transition-delay:1.0s;}
  #section3.active .quan_js42{	-webkit-transition-delay:1.5s; 	-moz-transition-delay:1.5s; 	-o-transition-delay:1.5s; 	-ms-transition-delay:1.5s; 	transition-delay:1.5s;}
  #section3.active .quan_js43{	-webkit-transition-delay:2.0s; 	-moz-transition-delay:2.0s; 	-o-transition-delay:2.0s; 	-ms-transition-delay:2.0s; 	transition-delay:2.0s;}
  #section3.active .quan_js44{	-webkit-transition-delay:2.5s; 	-moz-transition-delay:2.5s; 	-o-transition-delay:2.5s; 	-ms-transition-delay:2.5s; 	transition-delay:2.5s;}
  #section3.active .quan_js41, #section3.active .quan_js42, #section3.active .quan_js43 ,#section3.active  .quan_js44{ top:0.8em; opacity:1; -moz-opacity:1;  -ms-opacity:1;  -o-opacity:1; -webkit-opacity:1;   filter: alpha(opacity=100);}














@media screen and (max-width: 1440px){
.section-head {position: relative;padding-top:115px;}
.section-head h2{text-align: center;}
.section-head h3{font-size:20px;}
.section-title{position: relative;display: inline-block;font-size:50px;line-height: 1;height:50px;color:#fff;}
.section-title .p1{position: absolute;top:0;left:10px;top:-24px;text-align: left;font-size:16px;font-weight: normal;letter-spacing: 20px;color:#fff;}
.font-white .p1{color:#fff}
.section-title .p2{position: absolute;top:-8px;left:320px;text-align: left;width:320px;color:#3f9dec;font-size:12px;font-weight: normal;letter-spacing: 10px;}
.font-blue{color:#007be3}
.font-white{color:#fff;}
.font-yellow{color:#ff0}
.font-black{color:#000}
}

/*增值服务*/
@media screen and (min-width: 1280px){
  .quan_gd2{ display:none;  }
  .quan_gd{ display:block !important; position:relative; z-index:3; top:75px; height:40%;}
  .quan{ display:block; width:25%; position: relative; float:left; height: auto; overflow:hidden; padding-bottom:1em;}
  .quan_jsk{ display:block; width:25%; position: relative; float:left; height: auto;  padding-bottom:1em;}
  .gd_x{ background:url(../images/gd_x.png) center center repeat-x; width:0; height:1px; display:block; position:relative; top:50%;}
  .gd_gdq{ display:block; position:relative; z-index:1; width:100%; height:100%;}
  .quan_js{ position:relative;  width:78%; top:0.8em; height:60%; padding-left:3%; padding-top:0.9em; border-left:1px solid #676767;}
  .quan_js1{ font-size:16px; color:#f0bf5f; line-height:1.6em; padding-bottom:0.2em;}
  .quan_js2{ font-size:14px; color:#FFF; line-height:1.5em;}

  /**横排动作*/
  #section3.active .gd_x{ 
    -webkit-transition:0.3s linear;
    -moz-transition: 0.3s linear;
    -ms-transition:0.3s linear;
    -o-transition:0.3s linear;
    transition:0.3s linear;}
  #section3.active .gd_x1 {	-webkit-transition-delay:1.0s; 	-moz-transition-delay:1.0s; 	-o-transition-delay:1.0s; 	-ms-transition-delay:1.0s; 	transition-delay:1.0s;}
  #section3.active .gd_x2 {	-webkit-transition-delay:1.3s; 	-moz-transition-delay:1.3s; 	-o-transition-delay:1.3s; 	-ms-transition-delay:1.3s; 	transition-delay:1.3s;}
  #section3.active .gd_x3 {	-webkit-transition-delay:1.8s; 	-moz-transition-delay:1.8s; 	-o-transition-delay:1.8s; 	-ms-transition-delay:1.8s; 	transition-delay:1.8s;}
  #section3.active .gd_x4 {	-webkit-transition-delay:2.1s; 	-moz-transition-delay:2.1s; 	-o-transition-delay:2.1s; 	-ms-transition-delay:2.1s; 	transition-delay:2.1s;}
  #section3.active .gd_x5 {	-webkit-transition-delay:2.4s; 	-moz-transition-delay:2.4s; 	-o-transition-delay:2.4s; 	-ms-transition-delay:2.4s; 	transition-delay:2.4s;}
  #section3.active .gd_x6 {	-webkit-transition-delay:2.7s; 	-moz-transition-delay:2.7s; 	-o-transition-delay:2.7s; 	-ms-transition-delay:2.7s; 	transition-delay:2.7s;}
  #section3.active .gd_x7 {	-webkit-transition-delay:3s; 	-moz-transition-delay:3s; 	-o-transition-delay:3s; 	-ms-transition-delay:3s; 	transition-delay:3s;}
  #section3.active .gd_x8 {	-webkit-transition-delay:3.3s; 	-moz-transition-delay:3.3s; 	-o-transition-delay:3.3s; 	-ms-transition-delay:3.3s; 	transition-delay:3.3s;}
  #section3.active .gd_x1, #section3.active .gd_x2 , #section3.active .gd_x3 , #section3.active .gd_x4 , #section3.active .gd_x5, #section3.active .gd_x6 , #section3.active .gd_x7 , #section3.active .gd_x8{ width:100%;}
  .gd1,  .gd2,  .gd3,  .gd4{ display:block; position:relative;}
  .gd1{left:100px;}  .gd2{left:350px;}  .gd3{left:600px;}  .gd4{left:850px;}
  #section3.active  .gd1, #section3.active  .gd2, #section3.active  .gd3 , #section3.active  .gd4{ 
    -webkit-transition:1.5s cubic-bezier(1, .57, .48, 1.45) ;
    -moz-transition:1.5s cubic-bezier(1, .57, .48, 1.45) ;
    -ms-transition:1.5s cubic-bezier(1, .57, .48, 1.45) ;
    -o-transition:1.5s cubic-bezier(1, .57, .48, 1.45) ;
    transition:1.5s cubic-bezier(1, .57, .48, 1.45) ; left:0;
  }
  #section3.active .gd1, #section3.active .gd2, #section3.active .gd3, #section3.active .gd4{ left:0;}

  #section3 .quan_js41, #section3 .quan_js42, #section3 .quan_js43 ,#section3 .quan_js44{ top:0% !important; opacity:0; -moz-opacity:0;  -ms-opacity:0;  -o-opacity:0; -webkit-opacity:0;   filter: alpha(opacity=0);}
  #section3.active .quan_js41, #section3.active .quan_js42, #section3.active .quan_js43 ,#section3.active  .quan_js44{
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -ms-transition:0.5s;
    transition:0.5s;}
  #section3.active .quan_js41{	-webkit-transition-delay:1.0s; 	-moz-transition-delay:1.0s; 	-o-transition-delay:1.0s; 	-ms-transition-delay:1.0s; 	transition-delay:1.0s;}
  #section3.active .quan_js42{	-webkit-transition-delay:1.5s; 	-moz-transition-delay:1.5s; 	-o-transition-delay:1.5s; 	-ms-transition-delay:1.5s; 	transition-delay:1.5s;}
  #section3.active .quan_js43{	-webkit-transition-delay:2.0s; 	-moz-transition-delay:2.0s; 	-o-transition-delay:2.0s; 	-ms-transition-delay:2.0s; 	transition-delay:2.0s;}
  #section3.active .quan_js44{	-webkit-transition-delay:2.5s; 	-moz-transition-delay:2.5s; 	-o-transition-delay:2.5s; 	-ms-transition-delay:2.5s; 	transition-delay:2.5s;}
  #section3.active .quan_js41, #section3.active .quan_js42, #section3.active .quan_js43 ,#section3.active  .quan_js44{ top:0.8em; opacity:1; -moz-opacity:1;  -ms-opacity:1;  -o-opacity:1; -webkit-opacity:1;   filter: alpha(opacity=100);}
}
@media screen and (max-width: 1280px) and (min-width: 100px){

  .quan_gd{ display: none; }
  .quan_gd2{ display:block !important ; position:relative; z-index:3; top:40%; height:66%;}
  .quan2{  width:44%; margin:0 3%; height: auto; margin-bottom:2em; display: block;  _position:relative; overflow:hidden;}
  .gd21, .gd23{ float:left;}  .gd22, .gd24{ float: right;}
  .quan2 .gd_gdq{ display:block; position:relative; z-index:1; float:left; width:28% !important; margin-right:4.5%;background:url(../images/gd_qu.png) center center no-repeat; background-size: 100% 100%;}
  .quan2 .gd_gdq img{ width:100% !important;}
  .quan2 .quan_js{ display:block; position: absolute; float:left; width:68.4%; height:auto; top:50% !important; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); padding-left:0; border-left:none;}
  .quan2 .quan_js1{ font-size:16px; color:#f0bf5f; line-height:1.6em; padding-bottom:0.2em;}
  .quan2 .quan_js2{ font-size:14px; color:#FFF; line-height:1.5em;}

  /**两排动作*/
  .gd21,  .gd22,  .gd23,  .gd24{ display:block; position:relative;}
  .gd21{left:-350px;}  .gd22{right:-350px;}  .gd23{left:-600px;}  .gd24{right:-600px;}
  #section3.active  .gd21, #section3.active  .gd22, #section3.active  .gd23 , #section3.active  .gd24{ 
    -webkit-transition:2s cubic-bezier(1, .57, .48, 1.45) ;
    -moz-transition:2s cubic-bezier(1, .57, .48, 1.45) ;
    -ms-transition:2s cubic-bezier(1, .57, .48, 1.45) ;
    -o-transition:2s cubic-bezier(1, .57, .48, 1.45) ;
    transition:2s cubic-bezier(1, .57, .48, 1.45) ; 
  }
  #section3.active .gd21,  #section3.active .gd23 { left:0;}
  #section3.active .gd22,  #section3.active .gd24{ right:0;}

  #section3 .quan_js41, #section3 .quan_js42, #section3 .quan_js43 ,#section3 .quan_js44{ left:80%!important; opacity:0; -moz-opacity:0;  -ms-opacity:0;  -o-opacity:0; -webkit-opacity:0;   filter: alpha(opacity=0);}
  #section3.active .quan_js41, #section3.active .quan_js42, #section3.active .quan_js43 ,#section3.active  .quan_js44{
    -webkit-transition:1.0s  cubic-bezier(.86, 0, .07, 1);
    -moz-transition:1.0s  cubic-bezier(.86, 0, .07, 1);
    -o-transition:1.0s  cubic-bezier(.86, 0, .07, 1);
    -ms-transition:1.0s  cubic-bezier(.86, 0, .07, 1);
    transition:1.0s  cubic-bezier(.86, 0, .07, 1);}

  #section3.active .quan_js41{	-webkit-transition-delay:1s; 	-moz-transition-delay:1s;  -o-transition-delay:1s;  -ms-transition-delay:1s; 	transition-delay:1s;}
  #section3.active .quan_js42{	-webkit-transition-delay:1.5s; 	-moz-transition-delay:1.5s; 	-o-transition-delay:1.5s; 	-ms-transition-delay:1.5s; 	transition-delay:1.5s;}
  #section3.active .quan_js43{	-webkit-transition-delay:2.0s; 	-moz-transition-delay:2.0s; 	-o-transition-delay:2.0s; 	-ms-transition-delay:2.0s; 	transition-delay:2.0s;}
  #section3.active .quan_js44{	-webkit-transition-delay:2.5s; 	-moz-transition-delay:2.5s; 	-o-transition-delay:2.5s; 	-ms-transition-delay:2.5s; 	transition-delay:2.5s;}
  #section3.active .quan_js41, #section3.active .quan_js42, #section3.active .quan_js43 ,#section3.active  .quan_js44{ left:32.5%!important;  opacity:1; -moz-opacity:1;  -ms-opacity:1;  -o-opacity:1; -webkit-opacity:1;   filter: alpha(opacity=100);}
}

/* 案例 */
#section4 .photo_03{ overflow:hidden; display:block;}
#section4 .case-title{ display:block; position:relative; text-align:center;padding-top:120px;}
#section4 .case-title a{ font-size:16px; line-height:37px; width:116px; height:38px; margin:0 5px; display:inline-block; color:#bbbbbb;}
#section4 .case-title a.alnn{ font-size:16px; line-height:37px; display:inline-block; color:#fbfbfb; background:url(../images/al_natbg.png) center center no-repeat;text-transform:Capitalize;}
#section4{ padding:0;}
#section4 .photo_03{top:62px; position:relative; }
#section4 .case{ display:block; position:relative;}

#section4 .al_mo{ position:absolute; z-index:2; bottom:8.333%; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0);  -ms-transform: translate3d(-50%, 0, 0);
}
#section4 .al_mo2{ text-align:center;}

#section4 .al_mo{animation:al_mo 0.5s linear 0s alternate both;
                 -webkit-animation:al_mo 0.5s linear 0s alternate both;
                 -moz-animation:al_mo 0.5s linear 0s alternate both;
                 -o-animation:al_mo 0.5s linear 0s alternate both; }
@keyframes al_mo
{0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:8.333%;}}
@-webkit-keyframes al_mo
{0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:8.333%;}}
@-moz-keyframes al_mo
{0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:8.333%;}}
@-o-keyframes al_mo
{0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:8.333%;}}

/**不同屏幕分辨率更多的位置 样式 begin**/
@media only screen and (max-width:100px) {
  @keyframes al_mo
  {0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:4.333%;}}
  @-webkit-keyframes al_mo
  {0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:4.333%;}}
  @-moz-keyframes al_mo
  {0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:4.333%;}}
  @-o-keyframes al_mo
  {0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:4.333%;}}
}
@media only screen and (min-width:768px) {
  @keyframes al_mo
  {0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:4.333%;}}
  @-webkit-keyframes al_mo
  {0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:4.333%;}}
  @-moz-keyframes al_mo
  {0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:4.333%;}}
  @-o-keyframes al_mo
  {0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:4.333%;}}
}
@media only screen and (min-width:1279px) {
  @keyframes al_mo
  {0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:6.333%;}}
  @-webkit-keyframes al_mo
  {0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:6.333%;}}
  @-moz-keyframes al_mo
  {0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:6.333%;}}
  @-o-keyframes al_mo
  {0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:6.333%;}}
}
@media only screen and (min-width:1920px) {
  @keyframes al_mo
  {0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:8.333%;}}
  @-webkit-keyframes al_mo
  {0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:8.333%;}}
  @-moz-keyframes al_mo
  {0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:8.333%;}}
  @-o-keyframes al_mo
  {0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; bottom:-135px;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:8.333%;}}
}

.section.active .title {
  opacity:1;
  top:120px;
  -webkit-transition:500ms ease-out 500ms;
  -moz-transition:500ms ease-out 500ms;
  -o-transition:500ms ease-out 500ms;
  -ms-transition:500ms ease-out 500ms;
  transition:500ms ease-out 500ms
}
@media screen and (max-height:699px) and (min-height:640px) {
  .section .title {
    top:140px
  }
  .section.active .title {
    top:80px
  }

}
@media screen and (max-height:639px) and (min-height:590px) {
  .section .title {
    bottom:140px
  }
  .section.active .title {
    bottom:60px
  }
}
@media screen and (max-height:590px) {
  .section .title {
    top:140px
  }
  .section.active .title {
    top:80px
  }
}
@media screen and (max-width:1200px) {
  #section4 .icon_03_02 p {
    padding-right:5px
  }
  .section .title {
    padding:0 10px
  }

}

.tabPanel ul{ }
.tabPanel ul li{font-size:16px; line-height:37px; width:130px; height:38px; margin:0 5px; display:inline-block; color:#fff;text-transform:Capitalize; cursor:pointer;border-radius: 20px;}
.tabPanel .on{ font-size:16px; line-height:37px; display:inline-block; color:#fbfbfb; border:1px solid #ff0;}
.panes{ position:relative; width:100%;}
.pane{ display:none; position:relative; width:100%;} 
.pane, .panes{animation:pane 0.5s linear 0s alternate both;
              -webkit-animation:pane 0.5s linear 0s alternate both;
              -moz-animation:pane 0.5s linear 0s alternate both;
              -o-animation:pane 0.5s linear 0s alternate both; }
@keyframes pane
{0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; left:30%;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; left:0%;}}
@-webkit-keyframes pane
{0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; left:30%;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; left:0%;}}
@-moz-keyframes pane
{0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; left:30%;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; left:0%;}}
@-o-keyframes pane
{0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; left:30%;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; left:0%;}}



#workbox {
  position: relative;
  width: 100%;
  height: 100%;
}
#workbox .workshow {
  float: left;
  display: block; overflow:hidden;
  width: 20%; position:relative;
  cursor: pointer;

}

#workbox .workshow:before{
  box-sizing: border-box;
  position: absolute;
  /*background: url(../images/view.png) no-repeat center;*/
  content: '';
  right: 30px;
  left: 30px;
  top:30px;
  bottom: 150px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  z-index: 4;
}
#workbox .workshow:hover:before{
  opacity: 1; top:0;
  -webkit-transform: scale(1);
  transform: scale(1);
}
#workbox .opacity1 {
  opacity: 1;
}

.workshow a {
  display: block;
  background: #fff; overflow:hidden;
  text-decoration: none;
}
.workimg {
  display: block;
  margin: 0;
  width: 100%;
  transition: -webkit-transform 0.3s linear;
  transition: -moz-transform 0.3s linear;
  transition: transform 0.3s linear;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.workinfo {
  color: #fff;
  transition: background-color 0.5s, color 0.5s, bottom 0.5s;
  -webkit-transition: background-color 0.5s, color 0.5s, bottom 0.5s;
  position: absolute; width:100%; bottom:-70px; overflow:hidden;
  z-index: 3;
}
.workinfo h2 {
  text-transform: uppercase;/*样式全大写的*/
  font-weight: 400; padding:16px 20px; 
  font-size: 14px; line-height:24px;
}
/*.work_img {display: block;}*/
.work-imgbox{
  overflow: hidden;
  box-sizing:border-box;
  height:0;
  padding-bottom:65.88541%;
}
#workbox .workshow:hover .workinfo{
  background-image: none; bottom:0;
  background-color: #000;
  color: #d5d5d5;
}
#workbox .workshow .work-imgbox:before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  z-index: 3;
  background: rgba(0,0,0,0.7);
  opacity: 0; top:-100%;
  transition: opacity 0.35s;
  -webkit-transition: opacity 0.35s;
}
#workbox .workshow:hover .work-imgbox:before{
  opacity: 1;  top:0;
}
#workbox .workshow:hover .workimg{
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transform: scale(1.1);
}



.workshow .woim1{ position:absolute; left:-68px; top:36%; margin-top:-34px; z-index:4;}
.workshow .woim2{ position:absolute; right:-34px; top:36%; margin-top:-16px; z-index:4;}
.workshow .woim1, .workshow .woim2{
  -webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
  -moz-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
  -o-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}
.workshow:hover .woim1{left:50%; margin-left:-34px;}
.workshow:hover .woim2{right:50%; margin-right:-17px;}
/*优势*/
.advantage-con{position: relative;height:490px;padding-top:30px;}
.photo-list{padding:0 10px;overflow: hidden;}
.photo-list li{float:left;position: relative; background: #505050;padding:10px;border-radius: 90px;width:150px;height:150px;}
.photo-list li.li1{margin-right:90px;}
.photo-list li.li2{margin-right:106px;}
.photo-list li.li3{margin-right:180px;}
.photo-list li img{position:absolute;z-index: 3;left:10px;right:10px; width:150px;height:150px;border-radius: 80px;display: block;}
.advantage-line{
  position: absolute;z-index: 2;left:160px;top:80px;width:0;height:216px;background: url(../images/adt_line.png) 0 0 no-repeat;
  -webkit-transition: all 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
  -moz-transition: all 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
  -o-transition: all 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
  transition: all 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}
.active .advantage-line{width:992px;}
.tongji-list li{margin-top:40px;}
.tongji-list li{float: left;position: relative;margin-right:60px;}
.tongji-list li p{color:#fff;text-align:center;margin-top:10px;font-size:20px;}
.tongji-list li span{font:120px/187px Impact;padding:0 40px;hegiht:187px;color:#fff;fonb-weight:bold;background: #d00027;border-radius: 8px;display:block;text-align:center;}
.tongji-list li.li_last{margin-right: 0;}
.tongji-list li span:after {
  display: block;
  content: " ";
  position: absolute;
  left:0;
  top: 50%;
  margin-top: -2px;
  background: #d00027;
  width: 100%;
  height: 4px;
  z-index: 999;
}

/*---资讯---*/

.news{width:100%; padding-bottom:50px;}

.newstitle{width:100%;}
.newstitle h3{line-height:36px;text-align:center;font-size:32px;color:#007bc4; padding:60px 0px 15px;}
.newstitle h3 a{ color:#007bc4;}
.newstitle h3 a:hover{ color:#007bc4;}
.newstitle p{background:#d7d4d4; height:1px; overflow:hidden;line-height:0px;}
.newstitle p span{ margin:0px auto; display:block; height:1px; overflow:hidden; width:86px; background:#19a6db;line-height:1px;}
.newstitle em{ display:block; text-align:center; font-size:14px; color:#999999; padding-top:10px;}

.commonclass{width:90%; margin:0px auto; text-align:center; font-size:14px; padding:40px 0px; position:relative;}
.commonclass span a{width:136px;height:28px; background:#dfdfdf; color:#000;display:inline-block;line-height:28px; margin:0 10px;border-radius:20px;} 
.commonclass span a:hover{}
.commonclass span a.cur{ background:#4eaeff;color:#FFF;}

.newsbox{ width:100%; display:none;}

.newslistbox{width:1180px;margin:0px auto;overflow:hidden; position:relative;}
.newslistbox ul{ margin:0px; padding:0px; width:9999px; position:relative;}
.newslistbox ul li{ float:left; width:1180px; overflow:hidden; position:relative;}

.newslis{width:1220px;}
.newslis dl{float:left;width:530px;padding-right:80px; padding-bottom:25px; min-height:94px; height:auto !important; height:94px;}
.newslis dl dt{ float:left; background:#4eaeff; width:94px; height:94px; text-align:center; font-size:14px; color:#FFF;border-radius:50px;}
.newslis dl dt span{ display:block; padding-top:8px; line-height:50px; font-size:48px;}
.newslis dl dd{ float:right; width:410px;}
.newslis dl dd h3{ font-size:16px; overflow:hidden; height:24px; padding-top:10px;}
.newslis dl dd h3 a{ color:#000}
.newslis dl dd h3 a:hover{ color:#e60012}
.newslis dl dd p{ color:#666; font-size:14px;padding-top:5px;}

.indexnewsdot{ text-align:center;}
.indexnewsdot a{display:inline-block; width:10px; height:10px; overflow:hidden; line-height:111px; margin:0px 3px; background: #ddd;border-radius: 5px;}
.indexnewsdot a.cur{background:#007be3;}

/*联系我们*/
.maxb90{max-width:90%;margin:0 auto}
.abouttxt{padding:64px 0;text-align:center}
.title-big{font-size:36px;line-height:80px;}
.title-small{line-height:24px;font-weight:normal;font-size:16px}
.title-small .red{font-size:18px}
.aboutlist{width:85%;clear:both;margin:0 auto;padding-bottom:40px}
.contactdiv{max-width:1200px;margin:0 auto;width:95%}
.call-us{padding-bottom:42px;text-align:center;display:none}
.call-us a{display:inline-block;font-size:28px;color:#666;line-height:80px;border:double 4px #ddd;padding:0 42px;background:#eee}
.call-us a i{font-style:normal;color:#D2072F;font-size:32px;font-family:Arial}
.feedback-index{width:42%;float:left}
.feedback-index form .fb-rows{margin-top:3px;line-height:normal}
.feedback-index form .fb-rows:first-child{margin-top:0;}
.feedback-index form .fb-ipt,.feedback-index form .fb-txa{overflow:auto;margin:0;width:94%;border:none;outline:none;padding:0 3%;background:#fff;color:#333333;height:42px;height:42px\9;font-size:14px;vertical-align:middle;display:block;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;font-family:"微软雅黑"}
.feedback-index form .fb-txa{height:105px;padding:12px 3%;resize:none;line-height:18px;-webkit-overflow-scrolling:touch}
.feedback-index form .fb-txa:focus,.feedback-index form .fb-ipt:focus{-webkit-animation:ipt-focus 0.4s both;animation:ipt-focus 0.4s both;-moz-animation:ipt-focus 0.4s both}
.feedback-index form input:-webkit-autofill,.feedback-index form textarea:-webkit-autofill,.feedback-index form select:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #d3d3d3 inset}
@keyframes ipt-focus{0{transform:scale(1,1);animation-timing-function:ease-out}
                     25%{transform:scale(0.95,0.95);animation-timing-function:ease-out}
                     50%{transform:scale(0.95,0);animation-timing-function:ease-out}
                     75%{transform:scale(0.95,0.95);animation-timing-function:ease-out;color:#000}
                     100%{transform:scale(1,1);animation-timing-function:ease-out;color:#000}
}
@-webkit-keyframes ipt-focus{0%{-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
                             25%{-webkit-transform:scale(0.95,0.95);transform:scale(0.95,0.95);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
                             50%{-webkit-transform:scale(0.95,0);transform:scale(0.95,0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
                             75%{-webkit-transform:scale(0.95,0.95);transform:scale(0.95,0.95);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;color:#000}
                             100%{-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;color:#000}
}
@keyframes ipt-focus{0{-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
                     25%{-webkit-transform:scale(0.95,0.95);transform:scale(0.95,0.95);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
                     50%{-webkit-transform:scale(0.95,0);transform:scale(0.95,0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
                     75%{-webkit-transform:scale(0.95,0.95);transform:scale(0.95,0.95);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;color:#000}
                     100%{-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;color:#000}
}
.feedback-index form .fb-btn{-webkit-appearance:none;width:100%;height:42px;text-align:center;line-height:42px;color:#fff;font-size:14px;border:none;background:#016cc5;cursor:pointer;display:block !important}
.contact-index{float:right;width:52%;font-size:14px;}
.contact-index .ctc-rows{height:42px;line-height:42px;color:#fff;padding-left:44px;background-repeat:no-repeat;background-position:left center;overflow:hidden}
.contact-index .ct-addr{background-image:url(../images/contact1.png)}
.contact-index .ct-phone{background-image:url(../images/contact2.png)}
.contact-index .ct-fax{background-image:url(../images/contact3.png)}
.contact-index .ct-mail{background-image:url(../images/contact4.png)}
.contact-index .ct-job{background-image:url(../images/contact5.png)}
.contact-index .ct-subway{background-image:url(../images/contact6.png)}
.contact-index .ct-taxi{background-image:url(../images/contact7.png)}

/*1280*/
@media only screen and (max-width:1258px){
  .abouttxt{padding:50px 0}
  .title-big{font-size:38px;line-height:74px}
  .feedback-index{width:40%}
  .contact-index{width:56%}
}
@media only screen and (max-width:1180px){
  .feedback-index{width:35%}
  .contact-index{width:61%}
}
@media only screen and (max-width:1002px){
  .abouttxt{padding:30px 0}
  .feedback-index{width:70%;float:none;margin:0 auto 30px;background:#fff}
  .contact-index{width:70%;float:none;margin:0 auto}
}
@media only screen and (max-width:880px){
  .feedback-index{width:82%}
  .contact-index{width:82%}
}
@media only screen and (max-width:760px){
  .abouttxt{padding:22px 0}
  .title-big{font-size:30px;line-height:64px}
  .call-us{dispaly:block}
  .contact-index{width:90%;font-size:12px}
}

/*640*/@media only screen and (max-width:640px){
  .abouttxt{padding:20px 0}
  .title-big{font-size:28px;line-height:61px}
  .contact-index .ct-subway{line-height:21px}
}
/*460*/@media only screen and (max-width:460px){
  .abouttxt{padding:18px 0}
  .title-big{font-size:25px;line-height:58px}
  .canbig{padding-bottom:20px}
  .contact-index .ct-addr{line-height:21px}
  .contact-index .ct-taxi{line-height:21px}
}
@media only screen and (max-width:339px){.contact-index .ct-subway {line-height:14px}}



/*banner*/
.banner { width:100%;  position:relative;background:#000;}
.banner_a { width:100%;  overflow:hidden; position:relative;}
.banner_a .hd { width:100%; height:20px; text-align:center; overflow:hidden; position:absolute; left:0; bottom:10px; z-index:300;}
.banner_a .hd ul { display:inline-block;}
.banner_a .hd ul li { width:40px; height:6px; float:left; margin-left:2px; margin-right:2px; background:#ea0d16; cursor:pointer;}
.banner_a .hd ul li.on { background:#ee9f1a;}
.banner_a .banner_img { position:relative; width:100%; z-index:0;}
.banner_a .banner_img li { width:100%; }
/* 下面是前/后按钮代码，如果不需要删除即可 */
.banner_a .prev,
.banner_a .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(../images/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5;}
.banner_a .next{ left:auto; right:3%; background-position:8px 5px;}
.banner_a .prev:hover,
.banner_a .next:hover{ filter:alpha(opacity=100);opacity:1;}
.banner_a .prevStop{ display:none;}
.banner_a .nextStop{ display:none;}

/* pro */