@font-face {
    font-family: 'FZLTXHJW';
    src: url('../fonts/FZLTXHJW.eot?v=4.2.0');
    src: url('../fonts/FZLTXHJW.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/FZLTXHJW.woff?v=4.2.0') format('woff'), url('../fonts/FZLTXHJW.ttf?v=4.2.0') format('truetype'), url('../fonts/FZLTXHJW.svg?v=4.2.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'open_san_light';
    src: url('../fonts/opensans-light.eot');
    src: url('../fonts/opensans-light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-light.woff2') format('woff2'),
         url('../fonts/opensans-light.woff') format('woff'),
         url('../fonts/opensans-light.ttf') format('truetype'),
         url('../fonts/opensans-light.svg#open_sans_light') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'helveticalt25ultralight';
    src: url('../fonts/helveticalt25ultralight.eot');
    src: url('../fonts/helveticalt25ultralight.eot') format('embedded-opentype'),
         url('../fonts/helveticalt25ultralight.woff2') format('woff2'),
         url('../fonts/helveticalt25ultralight.woff') format('woff'),
         url('../fonts/helveticalt25ultralight.ttf') format('truetype'),
         url('../fonts/helveticalt25ultralight.svg#helveticalt25ultralight') format('svg');
}
html,body{
	width: 100%;
	height: 100%;
}
*{
  -webkit-font-smoothing:antialiased;
}
::selection{
  color: #fff;
  background: #ffe400;
}
body{font-family: 'FZLTXHJW','Microsoft YaHei','SimHei','open_san_light';font-size: 16px;color: #777;line-height: 1.875;padding-top: 80px;background: #fff;min-width: 1200px;}
.fl{float: left;}
.fr{float: right;}
.pa{position: absolute;}
.pr{position: relative;}
.fixed{position: fixed;width: 100%;top: 0;}
.container{width: 1200px !important;}
a:hover,a:active,a:visited{
	text-decoration: none;
}
/*.lazyload{background: url(../img/loading.gif) no-repeat center center;}*/
.more{color: #007eff;font-size: 13.5pt;}
#site-work .more{color: #007eff;padding-top: 70px;display: inline-block;}
.disabled{background-color: #ddd!important;pointer-events:none;}
/*-------*/
.icon{
	width: 30px;
	height: 26px;
	display: inline-block;
}
.block-show{display: block !important;}
.margin-center{
	margin-left: auto;
	margin-right: auto;
}
.icon-service{
	background: url(../img/icon_service.png) no-repeat center top;
}
.icon-image{
	background: url(../img/icon_image.png) no-repeat center top;
}
.icon-people{
	background: url(../img/icon_people.png) no-repeat center top;
}
.icon-contact{
	background: url(../img/icon_contact.png) no-repeat center top;
}

/*transition*/
.site-header .icon,.site-header .col-md-2 a:hover .icon,
.site-header .col-md-2 a:hover b,
.site-header  b,
.site-header,
.site-header.fixed-top,
.compare-with-other .pragress span.active:hover,
.compare-with-other .pragress span.active,
#site-work li h3:after,
#site-work li:hover h3:after,
.map-address,.map-address:hover,
#backtop .fa,#backtop:hover .fa,
.more,.more:hover,
#site-work li img,
#site-work li img:hover,
#menu li{
	-webkit-transition:.3s;
	   -moz-transition:.3s;
	    -ms-transition:.3s;
	     -o-transition:.3s;
	        transition:.3s;
}
#banner .next,#banner .prev,
#banner .next:hover,#banner .prev:hover{
  -webkit-transition:0.15s;
     -moz-transition:0.15s;
      -ms-transition:0.15s;
       -o-transition:0.15s;
          transition:0.15s;
}
/*animation*/
@-webkit-keyframes origLogo {
    0%{
      background-position: 0 0;
    }
    100% {
        background-position:-2231px 0px;
    }
}
@-moz-keyframes origLogo {
    0%{
      background-position: 0 0;
    }
    100% {
        background-position:-2231px 0px;
    }
}
@-ms-keyframes origLogo {
    0%{
      background-position: 0 0;
    }
    100% {
        background-position:-2231px 0px;
    }
}
@keyframes origLogo {
    0%{
      background-position: 0 0;
    }
    100% {
        background-position:-2231px 0px;
    }
}
@-webkit-keyframes morph {
  0% {
    -webkit-transform: scale(0);
   
  }

  40% {
    -webkit-transform: scale(1,1.2);
  
  }

  60% {
    -webkit-transform: scale(1.2,1);
  
  }

  80% {
    -webkit-transform: scale(0.9);
  
  }

  100% {
    -webkit-transform: scale(1);
   
  }
}

@-ms-keyframes morph {
  0% {
    
    -ms-transform: scale(0);
   
  }

  40% {
    
    -ms-transform: scale(1,1.2);
   
  }

  60% {
  
    -ms-transform: scale(1.2,1);
  
  }

  80% {
    
    -ms-transform: scale(0.9);
   
  }

  100% {
   
    -ms-transform: scale(1);
  
  }
}
@-moz-keyframes morph {
  0% {

    -moz-transform: scale(0);

  }

  40% {
   
    -moz-transform: scale(1,1.2);

  }

  60% {
   
    -moz-transform: scale(1.2,1);
   
  }

  80% {
   
    -moz-transform: scale(0.9);
   
  }

  100% {
  
    -moz-transform: scale(1);
  
  }
}

@keyframes morph {
  0% {
    transform: scale(0)
  }

  40% {
    transform: scale(1,1.2)
  }

  60% {
    transform: scale(1.2,1)
  }

  80% {
    transform: scale(0.9)
  }

  100% {
    transform: scale(1)
  }
}

@-webkit-keyframes fadeInUp {
  0% {
    -webkit-transform: translateY(20px);
    filter: alpha(Opacity=0);
    opacity: 0
  }

  100% {
    -webkit-transform: translateY(0px);
    filter: alpha(Opacity=100);
    opacity: 1
  }
}

@-moz-keyframes fadeInUp {
  0% {
    -moz-transform: translateY(20px);
    filter: alpha(Opacity=0);
    opacity: 0
  }

  100% {
    -moz-transform: translateY(0px);
    filter: alpha(Opacity=100);
    opacity: 1
  }
}
@-ms-keyframes fadeInUp {
  0% {
    -ms-transform: translateY(20px);
    filter: alpha(Opacity=0);
    opacity: 0
  }

  100% {
    -ms-transform: translateY(0px);
    filter: alpha(Opacity=100);
    opacity: 1
  }
}

@keyframes fadeInUp {
  0% {
    transform: translateY(20px);
    filter: alpha(Opacity=0);
    opacity: 0
  }

  100% {
    transform: translateY(0px);
    filter: alpha(Opacity=100);
    opacity: 1
  }
}

@-webkit-keyframes moveFromBottom {
  from { -webkit-transform: translateY(100%); opacity: 0;}
}
@-moz-keyframes moveFromBottom {
  from { -moz-transform: translateY(100%);opacity: 0; }
}
@keyframes moveFromBottom {
  from { transform: translateY(100%); opacity: 0;}
}

/**/
.site-header{
	background: #ffe400;
	height: 80px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
  line-height: 1;
	z-index: 9999;
}
#menu{
	margin-bottom: 0;
}
#menu li{padding:17px 0;}
#menu li.active{background-color: #ffd200;}
.site-header .icon{
	margin-right: auto;
	margin-left: auto;
	display: block;
}
.icon-logo{
/*  background-size: 2231px 54px;
  background-position: -1940px 0px;
  width: 97px;
  height: 54px;
 background-image: url("../img/orig_animation.png");
  -webkit-animation:origLogo 1s steps(23) backwards;
  -moz-animation:origLogo 1s steps(23) backwards;
  -ms-animation:origLogo 1s steps(23) backwards;
  animation:origLogo 1s steps(23) backwards;*/
  width: 111px;
  height: 31px;
  background-size: 111px 31px;
  background: url(../img/logo.png) no-repeat center top;
  /*background-image: -webkit-image-set(url(../img/logo.png) 1x,url(../img/logo@2x.png) 2x);*/
}
/*.site-header.fixed-top .menu-logo:hover .icon{
   -webkit-animation:origLogo 1s steps(23) backwards;
  -moz-animation:origLogo 1s steps(23) backwards;
  -ms-animation:origLogo 1s steps(23) backwards;
  animation:origLogo 1s steps(23) backwards;
}*/
.site-header .img-icon{
	border-right: 1px solid #e5cd00;
	padding-bottom: 8px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.site-header .img-icon.none{
  border-right: none;
}
.site-header a{
	color: #5f4706;
	text-decoration: none;
	font-size: 9pt;
	text-align: center;
	display: block;
}

.site-header .menu-service  .img-icon,.site-header .menu-contact  .img-icon{
	border-left: 1px solid #e5cd00;

}
.site-header .menu-logo .img-icon{
	padding-bottom: 0;
	margin-top: 5px;
	border-right: none;
}
.site-header.fixed-top .menu-logo .img-icon{
  margin-top: -3px;
}
.site-header .menu-logo a{
	font-family: 'open_san_light';
  letter-spacing: -1px;
}
.site-header span{
	display: block;
}
.site-header.fixed-top{
	height: 46px;
	/*padding-top: 10px;
	padding-bottom: 10px;
*/}
.site-header.fixed-top .img-icon{
	padding-bottom: 0;
}
.site-header.fixed-top #menu li{
  padding:8px 0 0;
}
.site-header.fixed-top .menu-logo .icon{
	-webkit-transform:scale(0.6);
	   -moz-transform:scale(0.6);
	    -ms-transform:scale(0.6);
	     -o-transform:scale(0.6);
	        transform:scale(0.6);
}
.site-header .col-md-2 a:hover .icon,.site-header.fixed-top .icon,.site-header.fixed-top .menu-logo b{
	-webkit-transform: scale(0);
	   -moz-transform: scale(0);
	    -ms-transform: scale(0);
	     -o-transform: scale(0);
	        transform: scale(0);

}
.site-header.fixed-top b{
	-webkit-transform: translateY(-20px);
	   -moz-transform: translateY(-20px);
	    -ms-transform: translateY(-20px);
	     -o-transform: translateY(-20px);
	        transform: translateY(-20px);
}
.site-header .col-md-2 a:hover b{
	-webkit-transform: translateY(-24px);
	   -moz-transform: translateY(-24px);
	    -ms-transform: translateY(-24px);
	     -o-transform: translateY(-24px);
	        transform: translateY(-24px);
}

/*---- banner  -----*/
#banner{
	height: 680px;
	padding-bottom: 50px;
	width: 100%;
  overflow: hidden;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	background:#F5f5f5;
}
.banner-container{
	top: 0;
	right: 0;
	bottom: 50px;
	left: 0;
}
.swiper-container{height: 680px;}
.swiper-slide{float: left;height: 680px;}
.swiper-slide .slide-items{height: 680px;cursor: pointer;display: block;}
.swiper-slide img{display: block;margin-right: auto;margin-left: auto;}
.slide-sf{
  background: #3e6574 url(../img/slides/sfb2c.jpg) no-repeat center center;
}
.slide-huion{
  background:#f2f4f6 url(../img/slide_huion_bg.jpg) repeat-x left bottom;
}
.slide-huion{
  background:#f2f4f6 url(../img/slides/huion.jpg) no-repeat center center;

}
.slide-dx{
  background: #e2e1e9 url(../img/slides/dx.jpg) no-repeat center center;
}
.slide-bf{
  background: #e5dcc9 url(../img/slides/baofeng.jpg) no-repeat center center;
}
.slidesjs-navigation{
	position: absolute;
	width: 60px;
	height: 60px;
	background: #385b68;
	background: rgba(0,0,0,0.1);
	font-size: 18pt;
	color: #fff;
	text-align: center;
	line-height: 60px;
	bottom:0;
	z-index: 999;
	cursor: pointer;
  text-decoration: none;
}
.slidesjs-play,.slidesjs-stop{
  display: none !important;
}
.slidesjs-navigation:hover{
  background-color: #ffe400;
}
.slidesjs-navigation:hover,.slidesjs-navigation:visited,.slidesjs-navigation:focus,.slidesjs-navigation:active{
  color: #fff;
  text-decoration: none;
}
.slidesjs-next{
	right: 0;
}
.slidesjs-pagination{
	position: absolute;
	bottom: -46px;
	left: 50%;
	margin-left: -60px;
  list-style: none;
  z-index: 999;
}
.slidesjs-pagination li{
  float: left;
  margin-left: 10px;
}
.slidesjs-pagination a{
	width: 8px;
	height: 8px;
	background: #ccc;
	border-radius: 50%;
	display: inline-block;
	cursor: pointer;
  text-indent: 999em;
  overflow: hidden;
}
.slidesjs-pagination li:first-child{
	margin-left: 0;
}
.slidesjs-pagination a.active{
	background: #ffc600;
}
.slidesjs-previouss{
	left: 0;
}

/*-------*/
#content{
	z-index: 999;
	background: #f5f5f5;
}
#site-service{
	padding-top: 30px;
	padding-bottom: 75px;
	background: url(../img/shadow.png) no-repeat center 580px;
	padding-bottom: 150px;
}
#site-service.active{
	padding-top: 75px;
}
.page-title{
	font-weight: normal;
	color: #333;
	margin-bottom: 30px;
	 filter: alpha(Opacity=0);
    opacity: 0;
}
.active .page-title{
	filter: alpha(Opacity=100);
    opacity: 1;
     -webkit-animation: fadeInUp 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -webkit-animation-delay:.2s;	
    -moz-animation: fadeInUp 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -moz-animation-delay:.2s;	
    -ms-animation: fadeInUp 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -ms-animation-delay:.2s;	
    animation: fadeInUp 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    animation-delay:.2s;	
}
#content p{
	filter: alpha(Opacity=0);
    opacity: 0;
}
#content .active p{
	filter: alpha(Opacity=100);
    opacity: 1;
     -webkit-animation: fadeInUp 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -webkit-animation-delay:.4s;	
    -moz-animation: fadeInUp 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -moz-animation-delay:.4s;	
    -ms-animation: fadeInUp 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -ms-animation-delay:.4s;	
    animation: fadeInUp 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    animation-delay:.4s;
}
.row.small-padding{
	margin-left: -5px;
	margin-right: -5px;
}
.row.small-padding >div{
	padding-left: 5px;
	padding-right: 5px;
}
.compare-with-other{
	margin-top: 80px;
}
.compare-with-other .company-name{
	border-radius: 20px;
	background: #8adaff;
	font-size: 10.5pt;
	width: 80px;
	line-height: 1.5;
	display: inline-block;
	text-align: center;
	padding-top: 2px;
	padding-bottom: 2px;
	font-weight: bold;
}
.compare-with-other .other-company .company-name{
	color: #0d89c2;
}
.compare-with-other .pragress{
	height: 2px;background: #ccc;
	width: 100%;
	position: relative;
	margin-top: 15px;
	left: -30px;
	padding-right: 30px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.compare-with-other .pragress:after{
	position: absolute;
	content: '';
	display: block;
	top: -2px;
	z-index: 9;
	height: 6px;
	right: 0;
}
.compare-with-other .other-company .pragress:after{
		background: #8adaff;
		width: 20%;
}
.compare-with-other .our-company .pragress:after{
	width: 86%;
	background: #ffe400;
}
.compare-with-other .pragress span{
	position: absolute;
	display: block;
	z-index: 99;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ddd;
	top: -9px;
}
.compare-with-other .our-company .company-name{
	background: #ffe400;
	color: #ae760b;

}
.compare-with-other .pragress span.active{
	width: 36px;
	height: 36px;
	top: -18px;
	color: #fff;
	text-align: center;
	line-height: 36px;
	background: #8adaff;
	margin-left: -9px;
	-webkit-transform: scale(0);
	   -moz-transform: scale(0);
	    -ms-transform: scale(0);
	     -o-transform: scale(0);
	        transform: scale(0);
}
.compare-with-other .pragress span.active:hover{
	  -webkit-animation: morph .3s ease-out;
	  -webkit-animation-fill-mode: forwards;
	  animation: morph .3s ease-out;
	  animation-fill-mode: forwards
}
.compare-with-other .our-company span.active{
	background: #ffe400;
}
.compare-with-other .pragress-name{
	margin-bottom: 60px;
	margin-top: 60px;
	position: relative;
}
.compare-with-other .pragress-name span{
	display:block;
	width: 100px;
	position: absolute;
	font-size: 10.5pt;
	color: #777;
	top: -13px;
}
.compare-with-other .pragress-name span:first-child{
	left: -60px;
}
.compare-with-other .pragress-name span:nth-child(2){
	left: 60px;
}
.compare-with-other .pragress-name span:nth-child(3){
	left: 170px;
}
.compare-with-other .pragress-name span:nth-child(4){
	left: 260px;
}
.compare-with-other .pragress-name span:nth-child(5){
	left: 370px;
}
.compare-with-other .pragress-name span:nth-child(6){
	left: 480px;
}
.compare-with-other .pragress-name span:last-child{
	right: -50px;
}
.compare-with-other .pragress span:first-child{
	left: -9px;
}
.compare-with-other .pragress span:nth-child(2){
	left: 100px;
}
.compare-with-other .pragress span:nth-child(3){
	left: 210px;
}
.compare-with-other .pragress span:nth-child(4){
	left: 310px;
}
.compare-with-other .pragress span:nth-child(5){
	left: 410px;
}
.compare-with-other .pragress span:nth-child(6){
	left: 530px;
}
.compare-with-other .pragress span:last-child{
	right: -9px;
}


.active .compare-with-other .our-company .pragress  span:nth-child(2),.active .compare-with-other .other-company .pragress  span:nth-child(6),.active .logo-group img:nth-child(1){
 -webkit-animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -webkit-animation-delay:.2s;	
    -moz-animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -moz-animation-delay:.2s;	
    -ms-animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -ms-animation-delay:.2s;	
    animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    animation-delay:.2s;	
}
.active .compare-with-other .our-company .pragress  span:nth-child(3),.active .compare-with-other .other-company .pragress  span:last-child,.active .logo-group img:nth-child(2){
  -webkit-animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -webkit-animation-delay:.3s;	
    -moz-animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -moz-animation-delay:.3s;	
    -ms-animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -ms-animation-delay:.3s;	
    animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    animation-delay:.3s;	
}
.active .compare-with-other .our-company .pragress  span:nth-child(4),.active .logo-group img:nth-child(3){
  -webkit-animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -webkit-animation-delay:.4s;	
    -moz-animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -moz-animation-delay:.4s;	
    -ms-animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -ms-animation-delay:.4s;	
    animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    animation-delay:.4s;	
}
.active .compare-with-other .our-company .pragress  span:nth-child(5),.active .logo-group img:nth-child(4){
  -webkit-animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -webkit-animation-delay:.5s;	
    -moz-animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -moz-animation-delay:.5s;	
    -ms-animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -ms-animation-delay:.5s;	
    animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    animation-delay:.5s;	
}
.active .compare-with-other .our-company .pragress  span:nth-child(6),.active .logo-group img:nth-child(5){
  -webkit-animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -webkit-animation-delay:.6s;	
    -moz-animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -moz-animation-delay:.6s;	
    -ms-animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -ms-animation-delay:.6s;	
    animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    animation-delay:.6s;	
}
.active .compare-with-other .our-company .pragress  span:last-child,.active .logo-group img:nth-child(6){
  -webkit-animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -webkit-animation-delay:.7s;	
    -moz-animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -moz-animation-delay:.7s;	
    -ms-animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -ms-animation-delay:.7s;	
    animation: morph 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    animation-delay:.7s;	
}
/*-------*/
#site-work{
	background: #fff;
	padding-top: 90px;
	padding-bottom: 95px;
	font-size: 10.5pt;
	color: #777;
}
#site-work .container{
	padding-left: 0;
	padding-right: 0;
	overflow: hidden;
}
#site-work .carousel{
	padding-left: 10px;
}
#site-work li span{
	display: block;
	overflow: hidden;
	width: 380px;
	height: 280px;
}
#site-work li img{
	width: 380px;
	float: none !important;
	display: block;
}
#site-work li img:hover{
	-webkit-transform: scale(1.1);
	   -moz-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	     -o-transform: scale(1.1);
	        transform: scale(1.1);
}
#site-work li{
	width: 380px;
	padding-right: 20px;
	min-height: 475px;
	float: left;

	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
 #site-work.active li:nth-child(1){
	-webkit-animation: moveFromBottom 0.7s 0.25s both;
  
    -moz-animation: moveFromBottom 0.7s 0.25s both;
    
    -ms-animation: moveFromBottom 0.7s 0.25s both;
  
    animation: moveFromBottom 0.7s 0.25s both;
  
}
 #site-work.active li:nth-child(2){
	-webkit-animation: moveFromBottom 0.9s 0.25s both;
    -moz-animation: moveFromBottom 0.9s 0.25s both;
    -ms-animation: moveFromBottom 0.9s 0.25s both;
   
    animation: moveFromBottom 0.9s 0.25s both;
  
}
 #site-work.active li:nth-child(3){
	-webkit-animation: moveFromBottom 1.2s 0.25s both;
    
    -moz-animation: moveFromBottom 1.2s 0.25s both;
    
    -ms-animation: moveFromBottom 1.2s 0.25s both;
   
    animation: moveFromBottom 1.2s 0.25s both;
  
}
#site-work li:nth-child(3n){
	padding-right: 0;
}
#site-work a{
	color: #777;
}
#site-work a:hover{
	text-decoration: none;
}
#site-work h3{
	margin-top: 30px;
	padding-top: 35px;
	color: #333;
	padding-bottom: 10px;
	position: relative;
}
#site-work h3:after{
	position: absolute;
	left: 0;
	top: 0;
	content: '';
	height: 5px;
	width: 10%;
	background: #ffe400;
}
#site-work li:hover h3:after{
	width: 100%;
}
/*-----*/
#site-client{
	padding-top: 100px;
	padding-bottom: 126px;
	background: #f5f5f5;
}
.logo-group{
	margin-top: 70px;
}
.active .logo-group img{
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1);
}
.logo-group img{
	display: inline-block;
	margin-left: 40px;
	margin-top: 30px;
	margin-bottom: 30px;
	-webkit-transform: scale(0);
	   -moz-transform: scale(0);
	    -ms-transform: scale(0);
	     -o-transform: scale(0);
	        transform: scale(0);
}

.logo-group img:first-child{
	margin-left: 0;
}

/**/
#site-about{
	height: 325px;
	padding-top: 275px;
	background: #f5f5f5 url('../img/map.jpg') no-repeat center bottom;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.site-footer{
	font-size: 9pt;
	font-weight: bold;
	line-height: 50px;
	font-family: 'Gotham',"Helvetica Neue", Helvetica, Arial, sans-serif;

}
#site-about a{
	color: #260e00;
}
#site-about .contact-method{
	font-family: 'helveticalt25ultralight',Helvetica, Arial, sans-serif;
	font-size: 48pt;
	font-weight: bold;
	color: #fff;
	margin-bottom: 130px;
}

#site-about .contact-method a{
	color: #fff;
}
#site-about .contact-method a:hover{
	text-decoration: none;
	padding-bottom: 15px;
	border-bottom: 1px dashed #fff;
}
.site-footer address{
	font-family: 'Gotham',"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	line-height: 50px;
	color: #260e00;
}

#backtop{
	width: 104px;
	height: 24px;
	background: url(../img/backtop.png) no-repeat center 2px;

	left: 50%;
	top: -24px;
	z-index: 999;
	margin-left: -52px;
	text-align: center;
	color: #fff;
	font-size: 18pt;
}
#backtop a{
	color: #fff;
	display: block;
	padding-right: 12px;
  padding-top: 5px;
}


#site-about-sub{
	height: 65px;
	padding-top:20px;
	background: #ffe500;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

#site-about-sub a{
	color: #260e00;
}
#site-about-sub .contact-method{
	font-family: 'helveticalt25ultralight',Helvetica, Arial, sans-serif;
	font-size: 48pt;
	font-weight: bold;
	color: #fff;
	margin-bottom: 130px;
}

#site-about-sub .contact-method a{
	color: #fff;
}
#site-about-sub .contact-method a:hover{
	text-decoration: none;
	padding-bottom: 15px;
	border-bottom: 1px dashed #fff;
}
#backtop-sub{
	width: 104px;
	height: 24px;
	background: url(../img/backtop-sub.png) no-repeat center 2px;

	left: 50%;
	top: -24px;
	z-index: 999;
	margin-left: -52px;
	text-align: center;
	color: #fff;
	font-size: 18pt;
}
#backtop-sub a{
	color: #fff;
	display: block;
	padding-right: 12px;
  padding-top: 5px;
}

.map-address{
	left: 50%;
	top: 117px;
	background: #fff;
	width: 380px;
	line-height: 72px;
	font-size: 13.5pt;
	color: #3f2400;
	text-align: center;
	border-radius: 10px;
	margin-left: -190px;
	z-index: 10;
}
.map-address a{
	display: block;
	position: relative;
	z-index: 88;
	text-decoration: none;
	color: #3f2400;
}
.map-address:hover,#backtop:hover .fa,.more:hover{
	-webkit-transform: translateY(-5px);
	   -moz-transform: translateY(-5px);
	    -ms-transform: translateY(-5px);
	     -o-transform: translateY(-5px);
	        transform: translateY(-5px);
}
.map-address:before{
	display: block;
	content: '';
	position: absolute;
	left: 50%;
	top: 46px;
	background: #fff;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	z-index: 0;
	margin-left: -22px;
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}
#locationAddress{
	width: 50px;
	height: 50px;
	background-color: transparent;
	position: absolute;
	left: 50%;
	margin-left: -25px;
	top: 210px;
}
/*客户案列*/
#work{
  background-color: #eeeeee;
}
#work .container{
  padding: 40px 0 90px ;
}
#work a{
  display: block;
  overflow: hidden;
  float: left;
  width: 400px;
  height: 400px;
  background: url(../img/loading.gif) no-repeat center center;
}
#work a:first-child{
  margin-top: 0;
}
.no-margin-left{
  margin-left: 0 !important;
}
#work .double-size{
  height: 820px;
  overflow: hidden;
  margin-left: 20px;
}
#work .double-size a{
  float: none;
  margin-left: 0;
}
#work a.double{
  height: 820px;
}
#work img{
  display: block;
}
#work img:hover{
  -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
       -o-transform: scale(1.1);
          transform: scale(1.1);
}
#work img:hover,#work img{
            -webkit-transition:.25s;
             -moz-transition:.25s;
              -ms-transition:.25s;
               -o-transition:.25s;
                  transition:.25s;

}
#work .list{
  width: 100%;
}

#work-tips{
  padding: 45px 0;
  background-color: #fff;
  color: #333;
}
  .pop {
      border: 0 none;
      bottom: 0;
      left: 0;
      margin: 0;
      position: fixed;
      right: 0;
      top: 0;
      display: none;
      z-index: 99999;
    }
    .popup-inner-wrap {
      border: 0 none;
      bottom: 0;
      left: 0;
      margin: 0;
      position: fixed;
      overflow-y: scroll;
      right: 0;
      top: 0;
      z-index: 99999;
    }

     .pop-container {
      margin: 30px auto;
      width: 1110px;
      background-color: #fff;
    }
    .popClose {
      position: fixed;
      left: 50%;
      top: 0;
      margin-left: 500px;
      z-index: 99;
      width: 40px;
      height: 40px;
      background: #ffffff url(../img/pop_close.png) no-repeat center 12px;
      cursor: pointer;
      border-radius: 0 0 5px 5px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
      z-index: 99999;
    }
    #shadow {
      position: fixed !important;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: #ffe400;
      opacity: 0.9;
      filter: alpha(opacity: 90 );
    }

  #popShow .popup-inner-wrap{
    position: static;
  }
  .popup-inner-wrap h3{
	color: #333;
	font-size:30px;
    font-family: 'Microsoft YaHei';
	margin-top:30px;
  }  
  .popup-inner-wrap .decription{
	color: #333;
	padding-top: 25px;
	margin-bottom:10px;
    font-size: 14px;
    font-family: 'Microsoft YaHei';
	position: relative;
  }  
  .popup-inner-wrap .decription:after{
	position: absolute;
	left: 0;
	top: 0;
	content: '';
	height: 5px;
	width: 10%;
	background: #ffe400;
	transition: width 0.5s;
  }
  .popup-inner-wrap .works-titles:hover .decription:after{
	width: 100%;
	transition: width 0.5s;
}
  .popup-inner-wrap .crumbs{
    color: #999;
    line-height: 24px;
    font-family: 'Helvetica Regular',Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding-bottom: 12px;
  }
  .popup-inner-wrap .link{
    font-size: 14px;
    line-height: 30px;
    font-family: 'Microsoft YaHei';
  }
  .popup-inner-wrap .link a{
	float:left;
    padding: 10px 20px;
	margin-right:5px;
	background:#eee;
	width:170px;
	text-align:center;
    color: #555;
    display: inline-block;
	transition:background 0.8s;
  }
  .popup-inner-wrap .link a:hover{
	float:left;
    padding: 10px 20px;
	margin-right:5px;
	background:#ffe600;
	width:170px;
	text-align:center;
    color: #4a3202;
    display: inline-block;
	transition:background 0.8s;
  }
  .popup-inner-wrap .link a:last-child{margin-right:0px;}
  
  
  .popup-inner-wrap .works-show img{
    margin-bottom: 40px;
  }
  .popup-inner-wrap .works-show .inter-bank{
    margin-top: -30px;
    margin-bottom: -70px;
    position: relative;
    z-index: 99;
  }
    .popup-inner-wrap .works-container{
    margin-top: -30px;
      width: 1110px;
      background-color: #fff;
	  

   }
   .popup-inner-wrap .works-show{
	   width:665px;
	   float:left;
	   margin-top:60px;
   }
   .popup-inner-wrap .works-titles{
	   float:left;
	   width:350px;
	   margin:30px 95px 40px 0px;
   }
  .popOptions a{
    display: block;
    width: 50px;
    height: 50px;
    background-color: #333333;
    font-size: 14px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    z-index: 999999;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
  }
.popOptions .fa{
  color: #fff;
  font-size: 18px;
}
.popOptions #popNext{
  left: 0;
}
.popOptions #popPrev{
  right: 0;
}
@media (max-height: 680px){
	#banner .next, #banner .prev{
		bottom: 122px;
	}
}

@media (-webkit-min-device-pixel-ratio: 2) , (min-resolution: 144dpi) {
  .icon-logo{
        background: url(../img/logo@2x.png) no-repeat center top;
        background-size: 111px 31px;
  }
  .icon-service{
  background: url(../img/icon_service@2x.png) no-repeat center top;
  background-size: 30px 26px;
}
.icon-image{
  background: url(../img/icon_image@2x.png) no-repeat center top;
  background-size: 30px 26px;
}
.icon-people{
  background: url(../img/icon_people@2x.png) no-repeat center top;
  background-size: 30px 26px;
}
.icon-contact{
  background: url(../img/icon_contact@2x.png) no-repeat center top;
  background-size: 30px 26px;
}
#site-about{
  background: #f5f5f5 url(../img/map@2x.jpg) no-repeat center bottom;
}
.slide-sf{background: #3e6574 url(../img/slides/sfb2c@2x.jpg) no-repeat center center;
  background-size: 1920px 680px;
}
.slide-huion{
  background:#f2f4f6 url(../img/slide_huion_bg@2x.jpg) repeat-x left bottom;
  background-size: 1920px 680px;
}
.slide-huion{
  background:url(../img/slides/huion@2x.jpg) no-repeat center center;
  background-size: 1920px 680px;

}
.slide-bf{
  background: #e5dcc9 url(../img/slides/baofeng@2x.jpg) no-repeat center center;
    background-size: 1920px 680px;
}
.slide-dx{
  background: #e2e1e9 url(../img/slides/dx@2x.jpg) no-repeat center center;
  background-size: 1920px 680px;
}
}