@charset "utf-8";
/* CSS Document */
/*common*/
.mb10 { margin-bottom:10px;}
.ml10 { margin-left:10px;}
.bg { background:#FFF;}
/*banner样式*/
.banner { width:100%; margin:auto;height:600px;}
#full-screen-slider { width:100%; height:600px; float:right; position:relative;}
#slides { display:block; width:100%; height:600px; list-style:none; padding:0; margin:0; position:relative;}
#slides li { display:block; width:100%; height:100%; list-style:none; padding:0; margin:0; position:absolute;}
#slides li a { display:block; width:100%; height:100%; text-indent:-999px;}
#pagination { display:block; list-style:none; position:absolute; left:48%; width:120px; top:560px; z-index:9900;  padding:5px 0px 5px 0; margin-left:0px !important;}
#pagination li { display:block; list-style:none; width:16px; height:16px; float:left; margin-left:15px; border-radius:10px; background:#0644ab;}
#pagination li a { display:block; width:100%; height:100%; padding:0; margin:0;  text-indent:-9999px;}
#pagination li.current { background:#fac311;}

/*搜索*/
.s_bg{overflow: hidden;}
.search{ width:1200px; margin:0 auto; font-weight:bold;}
.search p{ float:left;font-size: 15px; color:#333; width:825px; height:56px; line-height:61px; overflow:hidden;}
.search p a{font-size: 15px; color:#333; padding:0 10px 0 0; font-weight:normal;}
.search p a:hover{color: #0f5aad;}
.search .ser_inp{ background:url(../images/s_inp.gif) no-repeat; font-weight:normal;width:293px; height:36px; border:none; padding:0 0 0 60px; float:left; font-family:"Microsoft YaHei";font-size: 14px; color:#666; line-height:36px; outline:none;margin-top: 13px;}
.search .ser_so{cursor: pointer; float:left; background:url(../images/s_so.gif) no-repeat; border:none; width:81px; height:48px;margin-top: 13px;}
input::-webkit-input-placeholder {color: #666;}



/*分*/
.research_main{ margin-top:50px;}

.FrontSpecifies_show01-d3_c1 .htmledit {
	overflow: visible;
	word-wrap: normal;
	text-decoration: none;
	border-top: medium none;
	height: auto;
	border-right: medium none;
	width: auto;
	vertical-align: baseline;
	background: none transparent scroll repeat 0 0;
	white-space: normal;
	word-spacing: normal;
	border-collapse: separate;
	border-bottom: medium none;
	text-transform: none;
	word-break: normal;
	float: none;
	color: #000;
	text-align: left;
	font: 14px 微软雅黑;
	clear: none;
	border-left: medium none;
	text-justify: auto;
	margin: auto;
	z-index: auto;
	display: inline;
	letter-spacing: normal;
	list-style: disc none outside;
	visibility: inherit;
	text-indent: 0;
	font-stretch: normal
}
.FrontSpecifies_show01-d3_c1 .htmledit UL {
	height: auto;
	width: 100%;
	background: none transparent scroll repeat 0 0;
	float: none;
	padding-left: 0;
	display: inline-block;
	margin-left: 140px
}
.FrontSpecifies_show01-d3_c1 .htmledit UL LI {
	list-style-type: none;
	background: none transparent scroll repeat 0 0;
	list-style-image: none;
	line-height: normal
}
.FrontSpecifies_show01-d3_c1 .htmledit OL {
	height: auto;
	width: auto;
	background: none transparent scroll repeat 0 0;
	float: none;
	padding-left: 25px;
	display: inline-block
}
.FrontSpecifies_show01-d3_c1 .htmledit OL LI {
	height: auto;
	width: auto;
	background: none transparent scroll repeat 0 0;
	float: none;
	text-align: left;
	list-style: decimal none outside;
	line-height: normal
}
/*产品中心*/
.pro { padding-top: 60px; height:990px; /*background:#F4F4F4; */}
.pro h2 { margin-bottom: 31px; }
.pro_nav { width: 226px;  background: #fff url(../images/pro_nav.png) no-repeat center top; }
.pro_nav h3 { height: 78px; font-size: 24px; color: #fff; font-weight: bold; text-align: center; line-height: 100%; padding-top: 23px; box-sizing: border-box; }
.pro_nav h3 span { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.3); padding-top: 7px; font-weight: normal; text-transform: uppercase; line-height: 100%; }
.pro_nav ul { margin: 0 2px; }
.pro_nav ul li { position: relative; }
.pro_nav ul li a { display: block; padding-left: 62px; font-size: 16px; color: #666; line-height: 56px; }
.pro_nav ul li:before { content: ""; width: 4px; height: 4px; border: 1px solid #5f5f5f; border-style: solid solid none none; position: absolute; top: 50%; left: 37.5px; margin-top: -2.3px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.pro_nav ul li:after { position: absolute; content: ""; width: 195px; height: 1px; background: #EAEAEA; left: 15px; bottom: 0; }
.pro_nav ul li.cur { margin-top: -1px; border-bottom: 1px solid #fff; }
.pro_nav ul li.cur a { background: url(../images/pro_hover.jpg) no-repeat center; color: #fff; }
.pro_nav ul li.cur:after { display: none; }
.pro_nav ul li.cur:before { border-color: #fff; }
.pro_nav .contact { font-size: 15px; color: #333; line-height:28px; padding-left: 56px; background: url(../images/pro_tel.png) no-repeat 19px 24px; margin-top: 16px; margin-bottom:16px; }
.pro_nav .contact em { display: block; font-size: 20px; color: #156BF8; font-weight: bold; line-height: 100%; }
.pro_nav .product { margin-top: 32px; }
.pro_nav .product img { width: 222px; margin-left: 2px; margin-bottom: 4px; }
.pro_nav .product span { display: block; font-size: 14px; line-height: 20px; padding-left: 28px; color: #333; }
.pro_con { width: 960px; height: 429px; }
.pro_con dt { width: 613px; height: 429px; float: left; overflow: hidden; border: 1px solid #D9D9D9; box-sizing: border-box; }
.pro_con dt img { width: 613px; height: 429px; }
.pro_con dd { float: right; background: #156BF8; box-sizing: border-box; width: 347px; height: 429px; padding: 57px 25px 0 20px; }
.pro_con dd h4 a { display: block; font-size: 18px; color: #fff; line-height: 100%; text-align: center; position: relative; padding-bottom: 22px; font-weight: normal; }
.pro_con dd h4 a:after { position: absolute; width: 33px; height: 2px; content: ""; bottom: 0; left: 50%; margin-left: -16px; background: #fff; }
.pro_con dd p { color: #fff; line-height: 24px; padding: 24px 0 32px; }
.pro_con dd ul { margin-left: 40px; overflow: hidden; margin-bottom: 41px; }
.pro_con dd li { width: 104px; height: 33px; border: 1px dotted white; border-radius: 16px; float: left; margin-right: 16px; margin-bottom: 16px; box-sizing: border-box; line-height: 31px; text-align: center; color: #fff; }
.pro_con dd span { display: block; margin-left: 32px; }
.pro_con dd span a { width: 110px; height: 34px; background: #fff; display: block; color: #156BF8; text-align: center; line-height: 34px; margin-right: 20px; float: left; }
.pro_con dd span a:last-child { background: #fff url(../images/pro_i.png) no-repeat 82px center; text-indent: 22px; text-align: left; }
.products { clear: both; position: relative; width:960px; float:right; }
.products h3 a { display: block; font-size: 18px; color: #156BF8; line-height: 100%; padding-top: 33px; padding-bottom: 24px; }
.products h3 a span { display: block; float: right; font-size: 14px; text-transform: uppercase; }
.products .switch { width: 23px; height: 40px; opacity: 0.38; padding: 21px; position: absolute; top:171px; transition: .3s; }
.products .prev { left: -61px; }
.products .next { right: -61px; }
.products .switch:hover { opacity: 1; }
.pro_list { width: 1201px; overflow: hidden; }
.pro_list li { width: 305px; height:281px; border: 1px solid #CECECE; float: left; margin-right: 20px; overflow: hidden; background: #fff; position: relative; transition: .3s; }
.pro_list li img { width:305px; height:214px; }
.pro_list li span { font-size:17px; text-align: center; color: #666; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; position: absolute; bottom: 0; line-height: 68px; width: 100%; padding: 0 20px; box-sizing: border-box; }
.pro_list li:hover { border-color: #156BF8; }
.pro_list li:hover span { color: #156BF8; }
/*广告*/
.rent { height: 236px; background: url(../images/rent_bg.jpg) no-repeat center top; }
.rent h2 { text-align: left; padding-top:40px; background: none; text-shadow:2px 2px 0 rgba(1,16,56,1);}
.rent h2 a { text-align: left; color: #fff; font-size:37px; line-height: 100%; }
.rent h2 i { display: block; line-height: 100%; font-size: 34px; padding-bottom:19px; }
.rent h2 em { font-size: 40px; color: #FE7D00; }
.rent h2 span { font-size: 28px; color: #fff; display: block; line-height: 100%; padding-top: 15px; }
/*案例*/
.case{ margin-top:50px;}
.case h2{ margin-bottom:20px;}
.cases { position: relative;width: 472px; height: 453px; overflow: hidden; float:right;}
.case_nav { position: absolute; right: 0; bottom: 0; width: 492px; padding-top: 2px; }
.case_nav li { width: 143px; height: 66px; border: 1px solid #DCDCDC; box-sizing: border-box; font-size: 16px; line-height: 62px; float: left; margin-left: 21px; margin-top: 22px; text-indent:47px; background: url(../images/ci1.png) no-repeat 10px 17px; }
.case_nav li a { color: #666; display: block; }
.case_nav li.cur { background-position-y: -44px; background-color: #156BF8; border-color: #156BF8; }
.case_nav li.cur a { color: #fff; }
.case_nav li:nth-child(2) { background-image: url(../images/ci2.png); }
.case_nav li:nth-child(5) { background-image: url(../images/ci3.png); }
.case_nav li:nth-child(4) { background-image: url(../images/ci4.png); }
.case_nav li:nth-child(3) { background-image: url(../images/ci5.png); }
.case_nav li:nth-child(6) { background-image: url(../images/ci6.png); }
.case_video{ width: 700px; height: 453px; float: left; }
.case_con li { width: 472px; height: 277px; position: relative; float: right; }
.case_con li img { position: absolute; width: 472px; height: 277px; }
.case_con li a { display: block; width: 472px; height: 277px; position: absolute; box-sizing: border-box; padding: 35px 88px 0 79px; background: rgba(22, 108, 248, 0.9); text-align: center; }
.case_con li a h4 { font-size: 24px; color: #fff; font-weight: bold; line-height: 100%; position: relative; padding-bottom: 20px; }
.case_con li a h4:after { position: absolute; content: ""; width: 60px; height: 1px; background: #fff; left: 50%; margin-left: -30px; bottom: 0; }
.case_con li a p { font-size: 16px; line-height: 30px; color:#f2f0f0; margin-top: 13px; }
.yp { padding-bottom:60px;clear:both;}
.yp h3 a { display: block; font-size: 24px; color: #333; line-height: 100%; padding-top: 38px; padding-bottom:30px; }
.yp ul { overflow: hidden; }
.yp li { width: 221px; margin-right: 23px; float: left; margin-bottom: 15px; overflow: hidden; }
.yp li a { display: block; line-height: 0; }
.yp li img { width: 221px; height: 166px; }
.yp li span { display: block; font-size: 16px; color: #666; text-align: center; line-height: 36px; overflow: hidden; position: relative; z-index: 2; background: #fff; }
.yp li:hover span { color: #156BF8; }

/*优势*/
/* adv */
.adv{width: 100%;background: url(../images/ys_bg.jpg) no-repeat center;height: 664px;}
.adv .container{position: relative;height: 664px;}
.adv .mainCon{padding-top: 58px;}
.adv .mainCon .conBox{height: 451px;width: 100%;overflow: hidden;position: relative;}
.adv .mainCon .conBox dt{width: 600px;height: 451px;float: left;}
.adv .mainCon .conBox dt img{display: block;width: 600px;height: 451px;}
.adv .mainCon .conBox dd{width: 600px;float: right;}
.adv .mainCon .conBox dd .top{height: 123px;padding-left: 90px;position: relative;}
.adv .mainCon .conBox dd .top p{font-size:18px;color:#333;}
.adv .mainCon .conBox dd .top p span{font-size:50px;color: #156bf8; font-weight:bold;letter-spacing: 2px;}
.adv .mainCon .conBox dd .top h5{font-size:26px;color: #333;font-weight: bold;}
.adv .mainCon .conBox dd .top h5 span{font-weight: bold;color: #FE7200;}
.adv .mainCon .conBox dd .top em{font-size: 12px;color:#5d5d5d;display: block;margin-top: 4px;    text-transform: capitalize;}
.adv .mainCon .conBox dd .top i{display: block;width: 77px;height: 1px;background:#156bf8;position: absolute;left: 0;top: 58px;}
.adv .mainCon .conBox dd .intro{width: 535px;height: 290px;padding:38px 0 0 60px;background: #fff;}
.adv .mainCon .conBox dd .intro .adv-icon{display: block;width: 52px;height: 41px;margin-bottom: 12px;}
.adv .mainCon .conBox dd .intro h3{font-size:37px;color: #353434;}
.adv .mainCon .conBox dd .intro p{color:#8f8f8f;  font: 10px Arial, Helvetica, sans-serif; letter-spacing: 1px; padding-top:7px; text-transform: uppercase;}
.adv .mainCon .conBox dd .intro i{display: block;width: 72px;height: 2px;background: #FE7200;margin-top: 14px;}
.adv .mainCon .conBox dd .intro ul{margin-top: 18px;}
.adv .mainCon .conBox dd .intro li{padding-left: 10px;background: url(../images/adv_dian.png) no-repeat left center;font-size:17px;color:#434343;margin-bottom: 14px;}

.adv .mainCon .menu{width: 100%;position: absolute;left: 0;bottom: 0;}
.adv .mainCon .menu li{float: left;width: 298px;margin-right: 1px;height: 96px;background: #156BF8;text-align: center;font-size: 26px;color: #fff;position: relative;line-height: 96px;font-weight: normal;}
.adv .mainCon .menu li span{display: inline-block;*display: inline-block;width: 35px;height: 29px;overflow:hidden;position: relative;margin-right: 18px;top: 7px;}
.adv .mainCon .menu li span img{display: block;width:35px;height:58px;position: relative;}
.adv .mainCon .menu li em{position: relative;top: 0;}
.adv .mainCon .menu li.cur{background: #FE7200;color: #fff;font-weight: bold;}
.adv .mainCon .menu li.cur span img{/*top: -29px;*/}
.adv .mainCon .menu li i{display: block;height: 11px;background: #FE7200;position: absolute;left: 0;top: 11px;width: 100%;}
.adv .mainCon .menu li p{height: 11px;position: absolute;left: 0;top: -11px;width: 100%;overflow: hidden;}

.container{margin-left:auto; margin-right:auto; width:1200px;}
/*flow*/
.flow {padding: 60px 0;background: url(../images/do.jpg) center;}
.flow ul li {float: left;width: 400px;height: 198px;position: relative;overflow: hidden;}
.flow ul li i {display: block;position: absolute;width: 43px;height: 43px;left: 50%;margin-left: -35px;top: 47px;transition: all 0.5s;}
.flow ul li i img {display: block;margin: 0 auto;width: 43px;height: 43px;}
.flow ul li p.p1 {text-align: center;position: absolute;top: 106px;width: 399px;font-size: 10px;color: #666666;transition: all 0.5s;}
.flow ul li p.p1 span {display: block;font-size: 16px;color: #000000;}
.flow ul li p.p2 {width: 170px;height: 37px;background: #fff;position: absolute;left: 50%;margin-left: -85px;border-radius: 27px;top: 200px;transition: all 0.5s;background: url(../images/flow_zx.png) no-repeat 25px center #156BF8;}
.flow ul li p.p2 a {display: block;height: 37px;line-height: 37px;text-indent: 60px;color: #fff;}
.flow ul li:hover {background: #fff;box-shadow: 0 0 18px 6px #e8e8e8;}
.flow ul li:hover i {top: -100px;}
.flow ul li:hover .p1 {top: 60px;color: #0c50bf;}
.flow ul li:hover .p1 span {color: #0c50bf;}
.flow ul li:hover p.p2 {top: 115px;}

/*简介*/
.adv2{width: 100%;height: 160px;padding-top:30px;background:url(../images/ads.jpg) center;}
.adv2 li{float: left;width: 300px;position: relative;text-align: center;}
.adv2 li p span{font-size: 72px;color: #fff;font-weight: bold;margin-right: 6px;}
.adv2 li p{font-size: 16px;color: #fff;}
.adv2 li em{display: block;font-size: 14px;color: #fff;}


.about .con1 dt p > a > i{color: #156bf8;font-style: normal;font-size: 15px; margin-left:10px;line-height: 36px;width: 100%;position: relative;z-index: 3;transition: 0.3s all ease;}
/* about */
.about{width: 100%;}
.about .con1{width: 100%;}
.about .con1 .container{padding-top: 49px;height: 318px;position: relative;}
.about .con1 dt{padding-top: 24px;width: 502px;margin-left: 66px;}
.about .con1 dt img{display: block;}
.about .con1 dt h3{font-size: 24px;color: #171717;margin-top: 8px;}
.about .con1 dt h3 a{color: #171717;}
.about .con1 dt p{line-height: 29px;margin-top: 50px;font-size: 16px;color: #666666;}
.about .con1 dd{position: absolute;right: 0;top: 49px;}
.about .con1 dd img{display: block;width: 538px;height: 472px;}
.about .con2{height: 367px; padding-top: 109px;background:#F2F2F2;}
.about .con2 .menu{width: 100%;}
.about .con2 .menu li{float: left;width: 135px;height: 45px;background: url(../images/aboutBg01.png) no-repeat center top;font-size: 18px;color: #fff;margin-right:14px;height: 45px;line-height: 45px;text-align: center;}
.about .con2 .menu li a{text-decoration: none;color: #fff;display: block;}
.about .con2 .menu li:first-child{margin-left: 66px;}
.about .con2 .menu li.cur{background-position: center bottom;color: #000000;}
.about .con2 .menu li.cur a{color: #fff;}
.about .con2 .mainCon{margin-top: 50px;position: relative;}
.about .con2 .mainCon i.aboutBtn{position: absolute;top: 66px;width: 25px;height: 47px;cursor: pointer;}
.about .con2 .mainCon i.prev{background: url(../images/aboutBtn01.png) no-repeat center top;left: 0;}
.about .con2 .mainCon i.next{background: url(../images/aboutBtn02.png) no-repeat center top;right: 0;}
.about .con2 .mainCon i.aboutBtn:hover{background-position: center bottom;}
.about .con2 .mainCon .conBox{width: 1068px;margin: 0 auto;height:205px;position: relative;overflow: hidden;}
.about .con2 .mainCon .box{width: 1068px;margin: 0 auto;position: relative;height:205px;overflow: hidden;}
.about .con2 .mainCon .box ul{width: 106%;position: absolute;left: 0;top: 0;}
.about .con2 .mainCon .box li{float: left;width: 237px;height:197px;overflow: hidden;border: 4px solid #fff;margin-right:29px;}
.about .con2 .mainCon .box li img{display: block;width: 237px;height: 197px;transition: all 1s ease-out;}
.about .con2 .mainCon .box li:hover img{transform: scale(1.2);}

#about4{width: 1068px;margin: 0 auto;position: relative;height:205px;overflow: hidden;}
#about4 ul{width: 106%;position: absolute;left: 0;top: 0;}
#about4 li{float: left;width:145px;height:197px;overflow: hidden;border: 4px solid #fff;margin-right:29px;}
#about4 li img{display: block;width:145px;height: 197px;transition: all 1s ease-out;}
#about4 li:hover img{transform: scale(1.2);}


/*广告条*/
.ban01{ background:url(../images/ban01.gif) no-repeat center 0;height: 191px;overflow: hidden;color: #fff;line-height: 40px;text-align: center;}
.ban01 p{font-size: 24px;padding: 15px 0 0;}
.ban01 p b{font-size: 32px;}
.ban01 span{display: block;font-size: 20px;}
.ban01 span b{font-size: 28px;}
.ban01 em{display: block;font-size: 24px; font-family: Helvetica, sans-serif;font-style: italic;}
.ban01 i{display: block;width: 46px;height: 46px;margin:0 auto;
  animation: msClock 1s linear infinite;
  animation: msClock 1s linear infinite;}

@keyframes msClock {
  0%,90%,100% {
    transform: rotate(0) scale(1);
  }
  20%,40% {
    transform: rotate(-15deg) scale(1);
  }
  30%,50% {
  transform: rotate(15deg) scale(1);
  }
}

/*新闻中心*/
.news{ padding:40px 0 0 0;}
.news_t{height: 60px; background:url(../images/news_line01.gif) repeat-x 0 59px; padding:0 0 0 350px; margin-bottom:30px;}
.news_t ul li{float: left; padding:0 50px 0 0;}
.news_t ul li a{font-size: 22px;color: #272727;display: block;height: 60px;line-height: 60px;float: left;}
.news_t ul li a:hover,.news_t ul li.on a{color: #156BF8; background:url(../images/news_line02.gif) repeat-x 0 58px;}
.news_t ul li em{display: block;float: left;width: 28px;height: 22px;overflow: hidden; margin:21px 5px 0 0;}
.news_t ul li em img{width: 28px;height: 44px;}
.news_t ul li a:hover em img,.news_t ul li.on a em img{ margin-top:-22px;}
.news_top{width: 1200px;height: 218px;background: #156BF8;}
.news_top dl dt{width: 408px;height: 218px;float: left;overflow: hidden;line-height: 0;}
.news_top dl dt img{width: 408px;height: 218px;}
.news_top dl dd{width: 650px;float: left; padding:30px 0 0 65px;}
.news_top dl dd h5{height: 50px;line-height: 50px;overflow: hidden; border-bottom:#fff 1px dotted;}
.news_top dl dd h5 a{font-size: 16px;color: #fff;display: block;float: left;width: 550px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.news_top dl dd h5 i{font-size: 14px;color: #fff;font-weight: normal; font-family:Arial, Helvetica, sans-serif;display: block;float: right;width: 100px; text-align:right;}
.news_top .news_desc01{font-size: 14px;color: #fff;height: 50px;line-height: 25px;overflow: hidden; padding:10px 0 0;}
.news_top dl dd span{display: block;width: 90px; padding:15px 0 0;}
.news_top dl dd span a{display: block;font-size: 12px;color: #fff;width: 88px;height: 24px;text-align: center;line-height: 24px;overflow: hidden; border:#fff 1px solid;border-radius:20px;}
.news_top dl dd span a:hover{animation:shake 1s linear;-webkit-animation:shake 1s linear;}
.news_top em{display: block;width: 65px;position: absolute;top: -3px;right: -3px;}
.news_top em img{width: 65px;height: 65px;}

.news_l,.news_r{width: 550px; padding:25px 0 0;}
.news_l dl{width: 550px; border-bottom:#dcdcdc 1px dashed; padding:15px 0 0;height:119px;}
.news_l dl dt{height: 30px;line-height: 30px;overflow: hidden;font-size: 15px;}
.news_l dl dt a{font-size: 16px;color: #333; font-weight:bold;}
.news_l dl dt a:hover,.news_r ul li a:hover{color: #156BF8;}
.news_l dl dd{width: 550px;}
.news_l .news_desc02{font-size: 14px;color: #666;height: 50px;line-height: 25px;overflow: hidden;}
.news_l dl dd span{display: block;font-size: 15px;color: #a3a3a3; padding:5px 0 0;}

.news_r ul li{width: 550px;height: 44px;line-height: 44px; border-bottom:#dcdcdc 1px dashed;overflow: hidden;}
.news_r ul li a{font-size: 15px;color: #333;display: block;float: left; background:url(../images/news_ico03.gif) no-repeat 3px 22px; padding:0 0 0 25px;width: 400px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.news_r ul li span{font-size: 14px;color: #333;display: block;float: right;width: 80px; text-align:right;}
.news_qie .nobor{ border:none;}

/**/

@-webkit-keyframes shake{
  from,to{-webkit-transform:translate3d(0, 0, 0);}
  20%,60%{-webkit-transform:translate3d(-10px, 0, 0);}
  40%,80%{-webkit-transform:translate3d(10px, 0, 0);}
}

@keyframes shake {
  from,to{transform:translate3d(0, 0, 0);}
  20%,60%{transform:translate3d(-10px, 0, 0);}
  40%,80%{transform:translate3d(10px, 0, 0);}
}

.barcode li { background:#fff; width: 261px;margin-bottom:60px; border: 2px solid #fff; box-sizing: border-box; float: left; margin-right: 51px;  text-align: center; height:79px; line-height:79px;  position:relative; font-size: 22px; color: #333; font-weight: bold; overflow:hidden; }
.barcode li:after { content:""; background:#156BF8; width:0; height:79px; position:absolute; left:0; top:0;}
.barcode li:hover:after { content:""; background:#156BF8; width:261px; height:79px;transition: all 0.5s;}
.barcode li:hover a { display:block; color:#fff; z-index:1; position:absolute; height:79px; line-height:79px; left:50%; margin-left:-25%;}
.barcode li a{ font-size: 22px; color: #333; }
.barcode li span { display: block; font-size: 16px; line-height: 24px; padding-top: 12px; color: #666; }
.barcode li i { display: block; }
.barcode li:last-child { margin-right: 0; }
/*.barcode li:hover { border: 2px solid #156BF8; background:#156BF8; color:#fff;   transition: 0.3s all ease; }
.barcode li:hover a{color:#fff;}*/


.abox {background: #EAEAEA; overflow:hidden; }