body{ margin:0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif ;
    text-align: center;background-color: #f5f5f5;min-width: 1200px;}
a { text-decoration: none}
li{ list-style: none}
ul {list-style-type: disc;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-block-start: 0px;
    margin-block-end: 0px;
    padding-inline-start: 0}

p,h2,h3 { display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px}
hr { display: block;
    unicode-bidi: isolate;
    margin-block-start: 0 ;
    margin-block-end: 0 ;
    margin-inline-start: auto;
    margin-inline-end: auto;
    overflow: hidden;
    border-style: inset;
    border-width: 0.5px}
.fl{float: left;}
.fr{float: right;}
.c{width: 1200px; margin: 0 auto;}
.clearfix::after{
	content:"";
	display:table;
	clear:both;}
/*首页开始*/
/*菜单栏*/
.container,ul{ display: inline-block}
.container{ width: 100%;
    margin: 0 auto;
     line-height: 90px; background-color: rgba(255,255,255,0.8);
	 max-width: 1920px;}
.container  a{
        float: left;
        margin-left:40px;
		height: 90px;}
		.container  a img{vertical-align: middle;}
 .container ul{ width:920px;
    float: right;
    line-height: 90px}
 .container ul li{ width:130px;
    overflow:hidden;
    float: left}
 .container ul li a{ font-size: 16px;
    color: #333}

/*banner*/
.swiper { z-index: -1;
    position: relative;
    margin: -90px auto 0;
    width: 100%;
    height: 720px;
    text-align: center;
    font-family: Arial;
    color: #FFF;
    overflow: hidden}

 /*自动播放*/
 .swiper .swiper-wrapper { margin-left: -1920px;
    animation: swiperAnim 9s infinite;
    padding: 0;
    width: 9600px;
    height: 100%}
 .swiper li { float: left;
    width: 1920px;
    list-style: none;
    line-height: 600px;
    font-size: 100px;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center}

 /*动画*/
 @keyframes swiperAnim {
    0% { margin-left: -1920px}
    28.5% { margin-left: -1920px}
    33.3% { margin-left: -3840px}
    62% { margin-left: -3840px}
    66.7% { margin-left: -5760px}
    95.2% { margin-left: -5760px}
    100% { margin-left: -7680px}
 }

.w100{ width: 100%;}
.bj_b{background-color:#1c499e;}
.bj_w{background-color:#fff;}
/*面包屑*/
.banner{margin: 0 auto;
    height: 150px;
    width: 62.5%;
    margin-top: -70px}
.banner .banner-img1,.banner .banner-img2,.banner .banner-img3,.banner .banner-img4{ display: inline-block;
    width: 25%;
    height: 150px;
    float: left;
	margin-top: 15px;}

.banner .banner-img1 img,.banner .banner-img2 img,.banner .banner-img3 img,.banner .banner-img4 img{ margin-top: 30px;
    float: left;
    margin-left: 20px}
.banner h2{  font-size: 16px;
    margin-left: 80px;
    margin-top: 20px;
    text-align: left;}

.banner .banner-img1 h2,.banner .banner-img2 h2,.banner .banner-img3 h2,.banner .banner-img4 h2{ color: #fffefe}
.banner p{ width: 180px;
    font-size: 12px;
    padding-top: 20px;
    margin-left: 80px;
    line-height: 24px}

.banner .banner-img1 p,.banner .banner-img2 p,.banner .banner-img3 p,.banner .banner-img4 p{ color: #9fb5df}

/*产品*/
.product{
    margin: 0 auto;
    padding-top: 40px}
.product .bttitle,.solution .bttitle,.distrit .bttitle,.certification .bttitle{ height: 40px;
    line-height: 40px;
    padding-bottom: 20px;
    padding-top: 20px}
.product .bttitle h2,.solution .bttitle h2,.distrit .bttitle h2,.certification .bttitle h2{ color: #374567;
    font-size: 24px;
  }
.product .bttitle p,.solution .bttitle p,.distrit .bttitle p,.certification .bttitle p{ color: #7a8ba6;
    font-size: 18px;
    line-height: 24px;
	vertical-align: middle;
  }
  .product .bttitle p img,.solution .bttitle p img,.distrit .bttitle p img,.certification .bttitle p img{ line-height: 24px; vertical-align: middle;}
  .product .bttitle p i,.solution .bttitle p i,.distrit .bttitle p i,.certification .bttitle p i{margin:0 5px}
   .product .bttitle p span,.solution .bttitle p span,.distrit .bttitle p span,.certification .bttitle p span{width: 100px; display: inline-block;border-top:1px solid #ccc; margin-top: -5px;height:4px}
/* .product ul{ width: 1200px;
    padding: 0px;
    margin: 0 auto}
.product ul  li{ height: 160px;
    width: 236px;
    float: left;
    border: #bdc3d7 1px solid}
.product ul  .qborder{ margin-left: -1px}
.product ul .qborder-top{ margin-top: -1px}
.product ul img{ height: 68px;
    display:block;
    margin: 30px auto 10px}
.product ul p{ color: #374567;
        font-size: 16px}   */


/*解决方案*/
.solution{ background: url(../img/solution_bj.jpg) right top no-repeat #fff; width: 100%; height: 600px;}
.cont_tabs{ width: 303px;}
.cont{ margin-top: 60px; overflow: hidden;}
.cont_cont{ width:calc(100% - 383px) ;}
.cont_tabs li{line-height:40px;font-size: 18px; font-weight: bold;padding: 20px; text-align: left; background-color: #f5f7ff; cursor: pointer;width: 303px;}
.list_01{ background:url(../img/icon_15.png) no-repeat 250px center ;}
.list_02{ background:url(../img/icon_17.png) no-repeat 250px center ;opacity: 0.5;}
.list_03{ background:url(../img/icon_19.png) no-repeat 250px center ;opacity: 0.5;}
.list_04{ background:url(../img/icon_20.png) no-repeat 250px center ;opacity: 0.5;}
.yin{ color: #1c499e; font-size: 24px;padding: 40px 10px;font-weight: normal;}
.yin_b{ font-size: 16px; text-align: left; margin-top: 20px; line-height: 26px; margin-bottom: 10px;}
.yin_list {display: flex;flex-wrap: wrap;width: 100%;justify-content: space-between;}
.yin_list span{ display: inline-block;border: 1px solid #1c499e; color:#1c499e ;margin-top: 10px;padding: 5px 20px; border-radius: 4px; line-height: 30px; vertical-align: middle;font-size: 18px;}
.yin_list span img{line-height: 40px; vertical-align: middle;}
/*客户分布区域*/
.distrit{
    background:url(../img/kh_bj_12.jpg) no-repeat top center;
    width: 100%;
	height: 788px;
	}
.kh_logo{ display: flex; flex-wrap: wrap; margin-top: 40px;}
.kh_logo li{ width: 280px; margin-top: 20px;}

/*资质认证*/
.certification{
    width:1200px;
    margin: 0 auto;
	}
.certification ul{ padding: 0;
    margin-top: 40px}
.certification ul li{ float: left;
    width: 20%}

/*版权*/
.certifi{ width: 100%;
    background-color: #081633}
.copyright{ height: 300px;
    width: 1200px;
    margin: 0 auto}
.copyright-left{ width: 30%;
    text-align: left;
    float: left}
.copyright-left h2{ color: #ffffff;
    font-size: 18px;
    padding-top: 50px}
.copyright-left p{ color: #7a8ba6;
    font-size: 14px;
    line-height: 24px; margin-left:25px;}
.copyright-left img{
    display: block;margin-bottom: 20px;}
.copyright-left span{ color: #374567;
    font-size: 12px;
    padding-top: 20px;
    text-align: left;
    display: block; margin-left:25px;}
.copyright-right{float: right;
    width:60%;
    margin-top: 60px;
    }
.copyright-right ul{
    float: left;
   width: 33.3%; text-align: left;}
.copyright-right ul li h3{ color: #ffffff;
    font-size: 16px;
    padding-bottom: 20px }
.copyright-right ul li a{ color: #7a8ba6;
    font-size: 14px;
    height: 30px;
    line-height: 30px}
.copyright-cpywf{ margin-top: 20px;
    padding-right: 100px}
	.about_cont{  text-align: left; text-indent: 2em; margin-top: 40px;}
	.about_cont p{ line-height: 30px;font-size: 16px;}
/*首页结束*/

/*通用开始*/
.qpw50 {width: 50%;}
.qpw70 {width: 70%;}
.bannerH {height: 300px;}
.qp-h2 {color: #28375C;padding: 40px 0;}
.whiteH2 {color: #fff;}
.current{color: #085694!important;font-weight: bold;}
/*通用结束*/
/*合作开始*/
.cooperation{width: 100%;}
.cooperation .cbanner {background:url(../img/hz_01.png) no-repeat center;width: 100%;transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out;background-size: 120%;position: relative;}
.cooperation .cbanner:hover {background-size: 100%;}
.cbanner-title {padding: 90px 0 50px 0;color: #fff;}
.cbanner-button {border: 1px solid #FFF;padding: 10px 50px;border-radius: 20px;font-size: large;width: 100px;}
.cbanner-button a {color: #FFF;}
.cbanner-button:hover {background-color: #4cc9f0;-webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
    -moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);border: 0;cursor: pointer;}
.ctype {display: flex;}
.ctype-item {text-align: left;background-color: #ffffff;width: 300px;}
.ctype-item img {transition: all 1s ease 0s;}
.item-img {overflow: hidden;width: 300px;height: 240px;}
.ctype-item:hover img {transform: scale(1.2);}
.ctype-item h3 {padding: 10px 0 0 10px;}
.ctype-item p {padding: 15px 10px;box-sizing: border-box;color: #737373;font-size: 14px;line-height: 1.5;}
.csystem {position: relative;width: 100%;overflow: hidden;}
.csystem img {width: 100%;height: 100%;transition: all 1s ease 0s;}
.csystem:hover img{transform: scale(1.1);}
.csystem-content img{margin-top: -74px;}
.capply-content {display: flex;justify-content: center;align-items: center;width: 960px;height:470px;flex-direction: row;margin-top: -150px;background-color: #c3c3c3;}
.capply-img {width: 380px;height: 470px;overflow: hidden;}
.capply-img img {width: 380px;transition: all 1s ease 0s;}
.capply-img:hover img{transform: scale(1.2);}
/*.capply-content img {width: 40%;}*/
.capply-detail {width: calc(100% - 380px);height: 100%;display: flex;justify-content: space-around;flex-direction: column;padding: 5%;box-sizing: border-box;text-align: left;background-color: #fff;}
.capply-detail span {width: 80px;display: inline-block;text-align: right;margin-right: 8px;}
.capply-detail span:before {content: '*';color: #c7000b;padding-right: 3px;box-sizing: border-box;}
.capply-detail input,select {flex: 1;border: none;border-bottom: 1px solid #ccc;padding: 10px 5px;width: 363px;margin-bottom: 4px;outline: none;font-size: 16px;}
.capply-detail select {margin-left: -3px;color: grey;}
.capply-button {cursor: pointer;background-color: #3460F2;color: #FFFFFF;height: 40px;box-sizing: border-box;border-radius: 50px!important;text-align: center;margin-top: 10px;width: 380px;margin-left: 84px;}
.cfoot h2 {color: #535353;padding-top: 30px;}
.cfoot p {color: #244F78;font-size: 40px;font-weight: 500;padding: 0 0 15px 0;}
/*合作结束*/

/*产品开始*/
.qp-product{width: 100%;}
.qp-product .pbanner {width: 100%;transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out;background-size: 120%;}
/*.qp-product .pbanner:hover {background-size: 100%;}*/
.qp-product-jg img {width: 80%;}
.pbanner-title {padding-top: 90px;color: #fff;}
.pbanner-txt {padding-top: 20px;color: #fff;width: 40%;}
.qp-product-value {width: 100%;background-color: #fff;padding: 0 0 40px 0;}
.qp-product-func {width: 100%;background-color: #f5f5f5;padding: 0 0 40px 0;}
.qp-product .pfunc {display: flex;justify-content: center;align-items: stretch;flex-wrap: wrap;}
.pfunc .pfunc-item {width: 32%;display: flex;flex-direction: row;align-items:center;background-color: #fff;text-align: left;padding: 20px;box-sizing: border-box;margin-bottom: 20px;}
.pfunc .pfunc-item:hover {transform: translateY(-2px);box-shadow: 0 0 15px rgba(0,0,0,0.3);}
.pfunc-item img {padding: 8px;width: 60px;height: 60px;}
.pfunc-item p {margin-top: 3px;}
.qp-product .adv {display: flex;flex-direction: row;justify-content: center;align-items: center;flex-wrap: wrap;background-color: #fff;}
.adv .adv-item {width: 25%;padding: 28px 0;box-sizing: border-box;}
.adv-item-p {width: 70%;}
.adv-item img {padding: 8px;}
.adv-item:hover img {transform: rotateY(360deg);transition: all 2s ease 0s;}
.qp-product .case {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;background-color: #fff;}
.case .case-item {width:33.33%;position: relative;overflow: hidden;height: 250px;margin: 5px 0;}
.case-item img {width: 100%;transition: all 1s ease 0s;}
.case-item p {background-color: rgba(0,0,0,0.5);color: #fff;position: absolute;bottom: 0;height: 48px;line-height: 48px;width: 100%;}
.case-item:hover img {transform: scale(1.2);cursor: pointer;}
.case-item:hover p {height: 68px;line-height: 68px;font-size: 18px;cursor: pointer;}

/*产品结束*/

/*方案开始*/
.qp-scheme{width: 100%;}
.qp-scheme .sbanner {width: 100%;transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out;background-size: 120%;}
/*.qp-scheme .sbanner:hover {background-size: 100%;}*/
.sbanner-title {padding-top: 90px;color: #fff;}
.sbanner-txt {padding-top: 20px;color: #fff;width: 40%;}
.qp-scheme .qp-scheme-value {width: 100%;background-color: #fff;}
.qp-scheme-value .scase {display: flex;justify-content: center;flex-wrap: wrap;}
.scase .case-item {width:33.33%;position: relative;overflow: hidden;height: 250px;margin: 5px 0;}
.scheme-good {background: url(../img/fa_07.jpg) no-repeat top center;width: 100%;height: 643px;}
.scheme-good .good-list {display: flex;justify-content: center;align-items: stretch;flex-wrap: wrap;margin-top: 90px;}
.good-list .good-list-item {width: 23%;background-color: #fff;margin-top: 20px;padding: 20px 0;}
.good-list .good-list-item:hover {background-color: #4B6EDB;color: #fff;}
.good-list-item .sche-benefit-p{width: 70%;padding: 8px 0;}
.scheme-show {background-color: #f5f5f5;}
.scheme-show .show-func {display: flex;flex-direction: row;}
.show-func .show-func-left {display: flex;flex-direction: column;align-items: center;width: 50%;}
.show-func .show-func-right {width: 50%;}
.show-func .show-func-right img{border-radius: 15px;max-width: 700px;height: 525px;padding: 0 20px;box-sizing: border-box;width: 100%;}
.func-item {display: flex;flex-direction: row;flex: 1;align-items: center;justify-content: flex-start;padding: 0 20px;width: 100%;box-sizing: border-box;}
.func-item img {height: 100%;padding: 40px 20px;box-sizing: border-box;}
.func-item h3 {text-align: left;}
.func-item p {text-align: left;font-size: 14px;color: #333333;margin-top: 12px;}
.func-item span {position: absolute;width: 55px;height: 2px;background-color: #0F5F91;left: 100px;}
.func-item div {position: relative;margin: 0;}
.func-item:hover {border: 1px solid #476A99;border-radius: 15px;box-shadow: 0 0px 10px 1px rgba(2, 49, 49, 0.2);background-color: #fff;}
.pad-100 {padding-left: 100px;}
.bg-img1,.bg-img2,.bg-img3 {}
.bg-img1 {background: url(../img/fa_icon_11.png) no-repeat 20px center;}
.bg-img2 {background: url(../img/fa_icon_22.png) no-repeat 20px center;}
.bg-img3 {background: url(../img/fa_icon_33.png) no-repeat 20px center;}
.selected {background: url(../img/fa_icon_01.png) no-repeat 20px center;}
.bg-img1:hover {background: #fff url(../img/fa_icon_01.png) no-repeat 20px center;}
.bg-img2:hover {background: #fff url(../img/fa_icon_02.png) no-repeat 20px center;}
.bg-img3:hover {background: #fff url(../img/fa_icon_03.png) no-repeat 20px center;}
.scheme-case {background: url(../img/fa_17.jpg) no-repeat top center;width: 100%;height: 1003px;margin-top: 100px;}
.scheme-case .case-content h4 {text-align: left;color: #344264;margin-bottom: 8px;margin-top: 20px;}
.scheme-case .case-content h2 {margin-top: 80px;text-align: left;color: #344264;}
.scheme-case .case-content p {text-align: left;font-size: 20px;margin: 20px 0;}
.case-content span {position: absolute;width: 64px;height: 2px;background-color: #0F5F91;left: 15%;}
.case-content ul {text-align: left;}
.case-content ul li {padding: 6px 0;}
.content-list {display: flex;flex-wrap: wrap;justify-content: flex-start;margin-top: 120px;background-color: rgba(243,243,243,0.6);width: 80%;padding: 20px 40px;border-radius: 15px;margin-left: 0px;}
.content-item {border: 1px solid #9E9E9E;padding: 10px 20px;width: 33%;box-sizing: border-box;border-radius: 10px;margin-top: 10px;}
.content-item b {color: #00001C;font-size: 18px;}
.content-item:hover {background-color: #666;color: #fff;}
.content-item:hover b {color: #fff;font-size: 18px;}
/*方案结束*/

/*客户开始*/
.qp-customer{width: 100%;}
.qp-customer .cubanner {background:url(../img/kh_01.jpg) no-repeat center;width: 100%;transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out;background-size: 120%;}
.qp-customer .cubanner:hover {background-size: 100%;}
.cubanner-title {padding-top: 90px;color: #fff;}
.cubanner-txt {padding-top: 20px;color: #fff;}
.customer-list {display: flex;justify-content: center;align-items: center;flex-direction: column;margin-bottom: 30px;}
.customer-list-item {display: flex;background-color: #fff;margin-top: 30px;align-items: center;padding: 2%;}
.customer-list-item img {height: 100%;transition: all 1s ease 0s;}
.customer-list-item:hover img{transform: scale(1.2);}
.customer-item-tip {background-color: #F5F5F5;width: 240px;padding: 16px 8px;border-radius: 10px;text-align: center;margin-bottom: 10px;color: #28489D;}
.customer-item-left {overflow: hidden;}
.customer-item-right {width: 76%;display: flex;flex-direction: column;}
.customer-item-title {text-align: left;font-size: 1.5em;font-weight: bold;padding: 10px 0;}
.customer-item-txt {text-align: left;line-height: 1.5;color: #999;padding-bottom: 10px;}
.btn-group {margin: 20px 0;}
.btn-rect {border: 1px solid #111;min-width: 170px;height: 40px;line-height: 38px;padding: 6px 50px;}
.btn-rect:hover {background-color: #c7000b;border: none;color: #fff;cursor: pointer;}
/*客户结束*/

/*新闻开始*/
.qp-news{width: 100%;}
.qp-news .nbanner {background:url(../img/news.jpg) no-repeat center;width: 100%;transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out;background-size: 120%;}
.qp-news .nbanner:hover {background-size: 100%;}
.nbanner-title {padding-top: 90px;text-align: center;color: #fff;}
.nbanner-txt {padding-top: 20px;color: #fff;}
/*.nbanner span {width: 50px;background-color: #fff;height: 3px;position: absolute;top: 176px;text-align: center;color: #fff;left: 23%;}*/
.news-list {display: flex;justify-content: center;align-items: center;flex-direction: column;margin-bottom: 30px;}
.news-list-item {display: flex;background-color: #fff;margin-top: 30px;align-items: center;width:100%;}
.news-list-item img {height: 250px;padding: 10px;transition: all 1s ease 0s;}
/*.news-list-item img:hover {transform: scale(1.2);}*/
.news-item-tip {background-color: #F5F5F5;width: 68px;padding: 6px 16px;text-align: left;margin-bottom: 10px;color: #666;margin-top: 24px;}
.news-item-left {margin: 0;width: 400px;height: 270px;}
.news-item-left img {width: 380px;height: 250px;}
.news-item-right {display: flex;flex-direction: column;align-self: start;padding: 2px 10px;margin: 0;}
.news-item-title {text-align: left;font-size: 1.5em;font-weight: bold;padding: 10px 0;margin-top: 20px;}
.news-item-txt {text-align: left;line-height: 1.5;color: #999;padding-bottom: 10px;}
.news-item-date {text-align: left;color: #999;margin-bottom: 20px;}
.qp-news-detail {padding: 40px 15%;background-color: #fff;box-sizing: border-box;}
.zp_list {line-height: 30px;width: 80%;}
.zp_item {margin: 20px 0;border: 1px solid #f1f1f1;background: #fff;padding: 0 28px;}
.zp_list .zp_item .item-hd {padding: 28px 23px 28px 0;background: url(../images/zt_i4.png) no-repeat right center;cursor: pointer;display: flex;align-items: center;}
.zp_list .zp_item.on .item-hd {background: url(../images/zt_i5.png) no-repeat right center;}
.item-hd-tit {font-size: 20px;text-align: left!important;margin-left: 0;}
.item-hd-info {margin-right: 0;text-align: right;}
.item-hd-info span{font-size: 16px;color: #9e9e9e;margin-right: 15px;height: 24px;line-height: 24px;padding-left: 28px;}
.info-s1 {background: url(../images/zt_i2.png) no-repeat 0 center;}
.info-s2 {background: url(../images/zt_i3.png) no-repeat 0 center;}
/*.qp-news-detail p{text-indent: 2em;}*/
/*.qp-news-detail img{height: 100%;margin: 50px 0;}*/
.news-detail-content {line-height: 30px;}
.news-p-c {text-align: center;padding: 15px 0;}
.news-p-l {text-align: left;}
.news-line {display: inline-block;height: 1px;background-color: #999;width: 100%;}
/*新闻结束*/

/*关于开始*/
.qp-about {width: 100%;}
.qp-about .abanner {background:url(../img/about_01.jpg) no-repeat center;width: 100%;transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out;background-size: 120%;}
.qp-about .abanner:hover {background-size: 100%;}
.abanner-title {padding-top: 90px;color: #fff;}
.abanner-txt {padding-top: 20px;color: #fff;}
.compony-info {display: flex;flex-direction: row;align-items: center;justify-content: center;}
.compony-info .info-text {width: 600px;text-align: left;font-size: 16px;}
.compony-info-first {width: 1200px;white-space: nowrap;position: relative;}
.compony-info-text {position: absolute;width: 600px;white-space: initial;left: 68px;top: 88px;}
.info-img1 {width: 705px;}
.info-img2 {width: 490px;}
.qp-about .about-history {width: 100%;}
.about-saber-img {width: 60%;padding-bottom: 3%;}
/*关于结束*/

.recruit {width: 100%;}
.recruit .rbanner {background:url(../img/zp.jpg) no-repeat center;width: 100%;transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out;background-size: 120%;}
.recruit .rbanner:hover {background-size: 100%;}
.rbanner-title {padding-top: 90px;color: #fff;}
.rbanner-txt {padding-top: 20px;color: #fff;}

.m{margin: 26px;}
.tab{width: 200px;margin: 0 auto;border: 1px solid #ddd;height: 40px;text-align: center;line-height: 40px;background: #fff;border-radius: 10px;overflow: hidden;}
.tab li{float: left;width: 100px;position: relative;overflow: hidden;}
.tab li:before, .tab li:after, .tab li a{-webkit-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}
.tab li:before, .tab li:after{content:"";display: block;}
.tab li:not(:first-child):after{background: #ddd;height: 20px;width: 1px;left: 0;top: 10px;position: absolute;}
.tab li a{display: block;position: relative;z-index: 2;color: #000;font-size: 14px;}
.tab li:before{width: 0;height: 0;top: 50%;left: 50%;z-index: 1;position: absolute;}
.tab li:hover a{color: #fff;}
.tab li:hover:before{box-shadow: 0 0 0 100px #118CEE;}
.tab li:hover + li:after, .tab li:hover:after{height: 0;top: 20px;}
.tab .active {color: #fff;background-color: #118CEE;}