@charset "utf-8";
 

 /*内页共用样式*/
.m_mn{ width: 1200px; margin: 0 auto;}
.m_xn{ width: 1000px; margin: 0 auto; }
/*.m_ads{ height:460px; width:100%; min-width:1200px; overflow:hidden; z-index:-1; position: fixed; top:0; left:0;}*/
.m_ads{ height:380px; width:100%; min-width:1200px; overflow:hidden; z-index:-1; position: fixed; top:0; left:0;}
.m_ads.h_280{height: 280px;}
.m_ads.h_280 .text{ padding-top: 127px; }
.m_ads.h_300{height: 300px;}
.m_ads.h_300 .text{ padding-top: 147px; }
.m_ads.h_580{height: 580px;}
.m_ads.h_580 .text{ padding-top: 140px; }
.m_ads .text{ text-align: center; padding-top: 170px;}
.m_ads .text span{font-size: 40px; color: #ffffff; margin: 0 10px; text-transform: uppercase; -webkit-text-shadow:0px 0px 10px rgba(0,0,0,0.5); -moz-text-shadow:0px 0px 10px rgba(0,0,0,0.5);  text-shadow:0px 0px 10px rgba(0,0,0,0.5);   }
.m_ads .text .xt{ height: 1px; width: 145px; margin: 15px auto 0; border-bottom: 1px solid rgba(255,255,255,0.5);  }

/*.m_main{width:100%; min-width:1200px; background:#f5f5f5; margin:460px auto 0 auto; }*/
.m_main{width:100%; min-width:1200px; background:#f5f5f5; margin:380px auto 0 auto; }
.m_main1{width:100%; min-width:1200px; background:#ffffff; margin:300px auto 0 auto; }
.m_main2{width:100%; min-width:1200px; height: 520px;  margin:250px auto 0 auto; background: url(../images/case_top_bj.png) repeat-x left center; }
.m_main3{width:100%; min-width:1200px;  background:#ffffff;  overflow: hidden;  position: relative;  }
.m_main4{width:100%; min-width:1200px;  background:#f5f5f5;  margin:280px auto 0 auto;  position: relative;  }
.m_main5{width:100%; min-width:1200px; background:#ffffff; margin:0; }
.m_main6,.m_main7{width:100%; min-width:1200px;  color:#ffffff; margin:0;}

.m_subtopic{ height: 70px; width: 100%; border-bottom: 1px solid #E7E7E7; background-color: #ffffff;  }
.m_subtopic .subtopic_list{ font-size: 0; color: #666666; overflow: hidden; height: 70px;  text-align: center; }
.m_subtopic .subtopic_list li{display: inline-block; height: 70px; line-height: 70px; padding: 0 20px; background: url(../images/side_bjx.png) no-repeat right center; font-size: 18px; }
.m_subtopic .subtopic_list li:last-child{background: none;}
.m_subtopic .subtopic_list li a{display: block; padding: 0 20px; height: 70px; border-bottom: 2px solid #ffffff; }
.m_subtopic .subtopic_list li a.on::before{ width: 100%; }
.m_subtopic .subtopic_list li a:hover,.m_subtopic .subtopic_list li a.on{color: #3784D2;}
.m_subtopic .subtopic_list li a.hvr-underline-from-left:before{height: 2px; background: #3784D2; -webkit-transition-duration: .5s;  transition-duration: .5s;  }

.m_subtopic1{height: 60px; width: 100%; border-bottom: 1px solid #E7E7E7; background-color: #ffffff; }
.m_subtopic1 .subtopic_list{ font-size: 16px; color: #333333;  }
.m_subtopic1 .subtopic_list li{float: left; margin-right: 40px; height: 60px; line-height: 60px; }
.m_subtopic1 .subtopic_list li dl{ max-height: 60px; overflow: hidden; position: relative; z-index: 111; transition:max-height 0.5s ease-in-out; -webkit-transition:max-height 0.5s ease-in-out;  }
.m_subtopic1 .subtopic_list li dl:hover{ max-height: 300px; background-color: #ffffff; color: #333333;}
.m_subtopic1 .subtopic_list li dl dt{  background: url(../images/blog_ico1.png) no-repeat 50px center; padding-right: 20px; cursor: pointer; }
.m_subtopic1 .subtopic_list li dl dd{ height: 40px; line-height: 40px; padding: 0 10px;background-color: #ffffff;   }

.m_crm{ height: 50px; line-height: 50px; color: #888888; background: url(../images/news_ico2.png) no-repeat left 17px; text-indent: 25px;}
.m_crm1{ height: 50px; border-bottom: 1px solid #E7E7E7; line-height: 50px; color: #888888; }
.m_crm1.on{background-color: #ffffff; }
.m_crm1 .m_xn,.m_crm1 .m_mn{background: url(../images/news_ico2.png) no-repeat left 17px; text-indent: 25px;}
.m_crm a.on,.m_crm a:hover,.m_crm1 a.on,.m_crm1 a:hover{color: #666666;}

.share span{line-height: 20px !important; float: left; margin-right: 10px;}
.n_mn .m_text .article_tt{ color: #333333; font-size: 24px; font-weight: bold; margin-bottom: 18px; margin-top: -5px;  }
.n_mn .m_text .g_attr span{ display: inline-block;  margin-right: 25px; color: #888888;}
.n_mn .m_text .g_attr span.on a{display: inline-block; border: 1px solid #cccccc; margin-right: 5px; border-radius: 5px; font-size: 12px; width: 18px; height: 18px; line-height: 18px; text-align: center;}
.n_mn .m_text .g_attr span.on a:hover{ background-color: #2c88d8; color: #ffffff; border: 1px solid #2c88d8; }
.n_mn .m_text .g_attr span a:hover{color: #2c88d8;}
.n_mn .m_text .text{padding: 30px 0 ; font-size: 14px; color: #666666; line-height: 28px; overflow: hidden; }
.n_mn .m_text .text img{ max-width: 100%;}
.n_mn .m_aside{ padding: 25px 0 30px; line-height: 26px; overflow: hidden; border-top: 1px dotted #C7C7C7; color: #888888;}


 .swiper-container {width: 100%; height: 100%;}
   .swiper-banner .swiper-slide {text-align: center;font-size: 18px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background-repeat:no-repeat; background-position:center center; position: relative; overflow: hidden;}
   .swiper-banner .swiper-slide a { display:block; height:100%; width: 100%;}

.swiper-banner .swiper-slide .ads_left div,.swiper-banner .swiper-slide .ads_right div{position: absolute;}
.swiper-banner .swiper-slide .ads_left div img,.swiper-banner .swiper-slide .ads_right div img{max-height: 100%;}
.swiper-banner .swiper-slide .ads_left div:nth-child(1){  left: 165px; top: 210px; }
.swiper-banner .swiper-slide .ads_left div:nth-child(2){ left: -650px; top: -320px;  }
.swiper-banner .swiper-slide .ads_left div:nth-child(2) img{   -moz-animation:rotate 20s infinite linear;  -webkit-animation:rotate 20s infinite linear;  animation:rotate 20s infinite linear;  }
.swiper-banner .swiper-slide .ads_left div:nth-child(3){ left: 0px; top: 250px;}
.swiper-banner .swiper-slide .ads_left div:nth-child(4){ left: 145px; top: 210px;}
.swiper-banner .swiper-slide .ads_left div:nth-child(5){ left: 0px; top: 355px;}
.swiper-banner .swiper-slide .ads_left div:nth-child(6){ left: 0px; top: 510px;}
.swiper-banner .swiper-slide .ads_left div:nth-child(7){ left: 148px; top: 510px;}
.swiper-banner .swiper-slide .ads_left div:nth-child(8){ left: 295px; top: 510px;}
.swiper-banner .swiper-slide .ads_left div:nth-child(9){ left: 170px; top: 375px;}
.swiper-banner .swiper-slide .ads_right div:nth-child(1){left: 880px; top: 130px; }
.swiper-banner .swiper-slide .ads_right div:nth-child(2){left: 790px; top: 280px; }
.swiper-banner .swiper-slide .ads_right div:nth-child(3){left: 865px; top: 430px;}
.swiper-banner .swiper-slide .ads_right div:nth-child(4){left: 740px; top: 555px; }
@-moz-keyframes rotate{ 0%{  -moz-transform:rotate(0deg);  } 100%{  -moz-transform:rotate(360deg);  } }
@-webkit-keyframes rotate{ 0%{  -webkit-transform:rotate(0deg);  } 100%{  -webkit-transform:rotate(360deg);  } }
@keyframes rotate{ 0%{  transform:rotate(0deg);  } 100%{  transform:rotate(360deg);  } }



/*商城*/
.cont{ width:1210px; height:auto; margin:0 auto;}
.shop_banner{ width:100%; height:680px; min-width:1200px; margin:0 auto; overflow:hidden; background:url(../images/banner.jpg) no-repeat; background-position:center;}
.shop_user{ width:100%; height:auto; margin-top:80px;}
.shop_title{ width:100%; height:auto; text-align:center;}
.shop_title h3{ font-weight:normal; font-size:30px; color:#333333;}
.shop_title img{ margin-top:10px;}
.shop_title p{ font-size:16px; color:#666666; margin-top:5px;}
.user_list{ width:100%; height:auto; margin-top:54px;}
.user_list li{ width:592px; height:200px; float:left; margin-right:16px; margin-bottom:16px;}
.user_list li:nth-child(2n){ margin-right:0;}
.user_list li a{ display:block; width:100%; height:100%; background:url(../images/pic1.jpg) no-repeat; cursor:pointer;}
.user_list li:nth-child(2) a{ background:url(../images/pic2.jpg) no-repeat;}
.user_list li:nth-child(3) a{ background:url(../images/pic3.jpg) no-repeat;}
.user_list li:nth-child(4) a{ background:url(../images/pic4.jpg) no-repeat;}
.user_list li h3{ font-size:24px; color:#fafafa; font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:45px 215px 0 43px;-webkit-transition: all .4s;-moz-transition: all .4s;transition: all .4s;-ms-transition: all .4s;}
.user_list li p{ font-size:14px; color:#fafafa; line-height:24px;overflow:hidden; text-overflow:ellipsis; padding:10px 215px 0 43px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; height:48px;}
.user_list li span{-webkit-transition: all .4s;-moz-transition: all .4s;transition: all .4s;-ms-transition: all .4s; width:86px; height:30px; line-height:30px; border:1px solid #fff; font-size:14px; color:#fafafa; margin-left:43px; margin-top:15px; display:inline-block; text-align:center; opacity:0;}
.user_list li span.shop_shan{ margin-left:20px;}
.user_list li a:hover h3{ padding:35px 215px 0 43px;}
.user_list li a:hover span{ opacity:1;}


/*小程序*/
.header_hover .nav li a.axctive{background: url(../images/icon.png) 0 -70px no-repeat;}
.header_hover .nav li.next a.axctive{ color:#fff;background:url(../images/icon.png) 0 0 no-repeat;}
.header_hover .menu2 .menu_left{background: linear-gradient(to right, #676bed, #26d7d7);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -ms-background-clip: text;
    -o-background-clip: text;
    color: transparent;
    display: inline-block;}
.header_hover .nav li .menu2 .menu_list li a:after{background: -webkit-linear-gradient(left, #676bed , #26d7d7);
	background: -moz-linear-gradient(left, #676bed , #26d7d7);
	background: -o-linear-gradient(left, #676bed , #26d7d7);
	background: linear-gradient(left, #676bed , #26d7d7);
	FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#2d72ff,endColorStr=#d768ec);}
.chengxu_banner{ background:none; }
.chengxu_banner a{ display:block; width:100%; height:100%; overflow:hidden;background:url(../images/banner.jpg) no-repeat; background-size:cover; background-position:center;}
.chengxu_dao{ width:100%; height:auto; margin-top:50px;}
.dao_left{ float:left; width:294px; height:528px; overflow:hidden;}
.dao_left a{ display:block; width:100%; height:100%; overflow:hidden; position:relative;}
.dao_img{ width:100%; height:100%;background:url(../images/pic.jpg) no-repeat; position:absolute; left:0; top:0; z-index:1;    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;}
.dao_text{ width:100%; height:auto; padding:57px 30px; box-sizing:border-box; position:relative; z-index:2;}
.dao_text h3{ font-size:24px; color:#fff; font-weight:bold;}
.dao_text p{ font-size:16px; color:#fff; margin-top:3px;}
.dao_bg{ width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,01,0,0.5); opacity:0; z-index:3; overflow:hidden;transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;}
.pic-box{ display:table-cell; vertical-align:middle; text-align:center;}
.dao_bg .pic-box{ width:294px; height:528px; padding:57px 30px; box-sizing:border-box;}
.dao_bg h3{ font-size:26px; color:#fff; font-weight:bold;}
.dao_bg p{ color:#fff; margin-top:3px; font-size:16px;}
.dao_bg span{ display:block; width:134px; height:40px; border:1px solid #fff; line-height:40px; border-radius:20px; text-align:center; margin:0 auto; margin-top:20px; font-size:14px; color:#fff;}
.dao_bg span img{ margin-left:10px;}
.dao_left a:hover .dao_img{ transform:scale(1.05);}
.dao_left a:hover .dao_bg{ opacity:1;}
.dao_right{ float:right; height:528px; width:898px;}
.dao_top{ width:100%; height:340px;}
.dao_topl{ float:left; width:596px; height:340px;}
.dao_topl a{display:block; width:100%; height:100%; overflow:hidden; position:relative;}
.dao_topl .dao_text{padding-right:405px;}
.dao_topl .dao_img{background:url(../images/pic1.jpg) no-repeat;}
.dao_topl .dao_bg .pic-box{ width:596px; height:340px; padding:57px 30px; box-sizing:border-box;}
.dao_topl a:hover .dao_img{ transform:scale(1.05);}
.dao_topl a:hover .dao_bg{ opacity:1;}
.dao_topr{ width:294px; float:right;}
.dao_topr .dao_text{position:relative; padding:57px 30px;}
.dao_topr .dao_img{background:url(../images/pic2.jpg) no-repeat; }
.dao_topr .dao_bg .pic-box{ width:294px;}
.dao_bottom{ width:100%; height:180px; margin-top:8px;}
.dao_bottom li{ width:294px; height:180px; float:left; margin-right:8px;}
.dao_bottom li a{display:block; width:100%; height:100%; overflow:hidden; position:relative; }
.dao_bottom li a .dao_text{padding:30px;padding-right:20px;}
.dao_bottom li a .dao_img{background:url(../images/pic3.jpg) no-repeat; }
.dao_bottom li a .dao_text img{ margin-top:20px;}
.dao_bottom li:nth-child(2) .dao_img{ background:url(../images/pic4.jpg) no-repeat;}
.dao_bottom li:last-child .dao_img{ background:url(../images/pic5.jpg) no-repeat;}
.dao_bottom li:last-child{ margin-right:0;}
.dao_bottom li .dao_bg .pic-box{ width:294px; height:180px; padding:0;}
.dao_bottom li .dao_bg h3{ font-size:20px;}
.dao_bottom li .dao_bg span{ margin-top:15px;}
.dao_bottom li .dao_bg span img{ margin-top:0;}
.dao_bottom li a:hover .dao_img{ transform:scale(1.05);}
.dao_bottom li a:hover .dao_bg{ opacity:1;}

/*小程序核心优势*/
.hexin{ width:100%; height:auto; margin-top:70px;}
.hexin_con{ width:100%; height:auto; position:relative; background:url(../images/icon9.png) no-repeat center bottom; min-height:355px; margin-top:50px;}
.hexin_con li{ position:absolute;}
.hexin_con li.hexin_1{ left:0; top:123px;}
.hexin_img{ text-align:center; background:url(../images/icon5.png) no-repeat; width:48px; height:48px; line-height:48px; color:#fff; font-weight:bold; font-size:18px; float:left;}
.hexin_text{ float:left; margin-left:16px; background:#f6f6f6; padding:20px; box-sizing:border-box; font-size:16px; line-height:28px; position:relative; color:#333333;}
.hexin_bg{ width:0; height:0; position:absolute; left:-12px; top:16px; border-top:7px solid transparent; border-bottom:7px solid transparent; border-right:12px solid #f6f6f6;}
.hexin_con li.hexin_1 .hexin_text{ width:256px;}
.hexin_con li.hexin_2{ left:240px; top:0;}
.hexin_con li.hexin_2 .hexin_img{background:url(../images/icon6.png) no-repeat;}
.hexin_con li.hexin_2 .hexin_text{ width:247px;}
.hexin_con li.hexin_3{ left:649px; top:0;}
.hexin_con li.hexin_3 .hexin_img{background:url(../images/icon7.png) no-repeat;}
.hexin_con li.hexin_3 .hexin_text{ width:216px;}
.hexin_con li.hexin_4{ right:0; top:123px;}
.hexin_con li.hexin_4 .hexin_img{background:url(../images/icon8.png) no-repeat;}
.hexin_con li.hexin_4 .hexin_text{ width:185px;}

/*流量入口*/
.liuliang{ width:100%; height: auto; margin-top:70px; background:#f6f6f6; overflow:hidden; padding:77px 0; padding-bottom:30px;}
.liuliang_con{ width:100%; height:auto; margin-top:60px;}
.liuliang_con li{ width:150px; margin-right:112px; margin-bottom:50px;}
.liuliang_con .fang_pic{ margin:5px; box-shadow:0px 3px 7px rgba(20,20,20,0.05);}
.liuliang .fang_pic img{ display:block;}
.liuliang_con li p{ color:#666666;}
.liuliang_con li p:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #666666; transition: all 0.3s ease-out;}
.liuliang_con li:nth-child(6n){ margin-right:112px;}
.liuliang_con li:nth-child(5n){ margin-right:0;}
/*小程序模板展示*/
.moban{ width:100%; height:auto; margin-top:70px; background:url(../images/bg.jpg) no-repeat; background-size:cover; background-position:center; padding-top:73px; min-height:840px; box-sizing:border-box;}
.moban .solute_title h3 {
    color: #fff;
}
.moban .solute_title p {
    color: #fff;
}
.moban .cont{ width:1360px; height:auto; margin:0 auto}
.moban_con{ width:100%; height:552px; position:relative; margin-top:40px; padding-top:65px;}
.moban_con .swiper-container{ width:1200px; height:auto; margin-top:0;}
.moban_con .swiper-container:before, .moban_con .swiper-container:after{ background:none;}
.moban_con .swiper-slide{ width:242px; height:422px;}
.moban_con .swiper-slide div{ position:relative;}
.moban_con .swiper-slide div.moban_bg{ position:absolute; width:100%; height:100%; background:#fff; opacity:0.7;}
.moban_con .swiper-slide-active div.moban_bg{ opacity:0;}
.moban_con .swiper-prev,.moban_con .swiper-next{ width:48px; height:48px; margin-top:-24px; position:absolute; top:50%; cursor:pointer;}
.moban_con .swiper-prev{left:0; background:url(../images/icon20.png) no-repeat;}   
.moban_con .swiper-next{right:0;background:url(../images/icon21.png) no-repeat;} 
.moban_con .swiper-container:before,.moban_con .swiper-container:after{width:415px;height:405px;content:'';background-color: #f5f5f5;display:block;position:absolute;z-index: 9999;opacity: .5;top:0; display:none;}
.moban_con .swiper-container:before{left:0;}
.moban_con .swiper-container:after{right:0;}
.framing{width:271px;height:552px;position:absolute;background-image: url(../images/icon22.png); top:0;left: calc(50% - 135px);z-index:999;opacity:0;-moz-transition: all 0.1s ease;-o-transition: all 0.1s ease;-webkit-transition: all 0.1s ease;} 
.lookTemp{    position: absolute; left: calc(50% - 65px); background-color: #ff7200;color: #fff;padding: 0; width: 133px;line-height: 40px; border-radius: unset;display:none;} 

/*小程序解决方案*/
.jiejue{ width:100%; height:auto; margin-top:63px; padding-bottom:70px;}
.jiejue_con{ width:100%; height:auto; margin-top:40px;}
.jiejue_con li{ width:290px; height:380px; float:left; position:relative;    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.12s;border:1px solid #e5e5e5;box-sizing:border-box; margin-right:13px; }
.jiejue_con li a{ display:block; width:100%; height:100%; overflow:hidden;transition:none;}
.jiejue_con li:last-child{ margin-right:0;}
.jiejue_top{ width:100%; height:155px; background:url(../images/pic8.jpg) no-repeat; background-size:cover; background-position:center; padding-top:45px; font-size:24px; color:#fff; text-align:center; box-sizing:border-box;}
.jiejue_con li:nth-child(2) .jiejue_top{background:url(../images/pic9.jpg) no-repeat;}
.jiejue_con li:nth-child(3) .jiejue_top{background:url(../images/pic11.jpg) no-repeat;}
.jiejue_con li:nth-child(4) .jiejue_top{background:url(../images/pic10.jpg) no-repeat;}
.jiejue_c{ width:100%; height:auto;}
.jiejue_pic{ width:100%; height:auto; text-align:center;margin-top:-45px;}
.jiejue_list{ width:100%; height:auto;padding:0 20px; overflow:hidden; box-sizing:border-box;transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    position: absolute;
    z-index: 3;
    opacity: 1; left:0; top:220px;}
.jiejue_list span{ display:block; background:url(../images/icon29.png) no-repeat left center; padding-left:10px; font-size:14px; color:#666666; margin-right:25px; float:left; line-height:20px; margin-bottom:5px;}
.jiejue_list span:nth-child(3n){ margin-right:0;}
.jiejue_detail{ width:100%; height:auto; padding:0 28px; text-align:center; margin-top:30px; box-sizing:border-box; opacity:0; z-index:0; position:absolute; left:0;    transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1) 0s;}
.jiejue_detail p{ font-size:14px; color:#666666; line-height:24px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; height:72px;}
.jiejue_detail span{ display:block; width:105px; height:30px; line-height:30px; text-align:center; color:#fff; border-radius:15px; background:#26bbfb; font-size:14px; margin:0 auto; margin-top:20px;}
.jiejue_con li:hover{ box-shadow:0px 5px 24px rgba(38,187,251,0.48); border:1px solid #26bbfb;}
.jiejue_con li:nth-child(2):hover{ box-shadow:0px 5px 24px rgba(241,98,159,0.48); border:1px solid #f1629f;}
.jiejue_con li:nth-child(3):hover{ box-shadow:0px 5px 24px rgba(73,205,164,0.48); border:1px solid #49cda4;}
.jiejue_con li:nth-child(4):hover{ box-shadow:0px 5px 24px rgba(254,73,107,0.48); border:1px solid #fe496b;}
.jiejue_con li:hover .jiejue_list{ opacity:0; z-index:1;}
.jiejue_con li:hover .jiejue_detail{ opacity:1; z-index:3;}
.jiejue_con li:nth-child(2):hover .jiejue_detail span{ background:#f1629f;}
.jiejue_con li:nth-child(3):hover .jiejue_detail span{ background:#49cda4;}
.jiejue_con li:nth-child(4):hover .jiejue_detail span{ background:#fe496b;}

/*适用行业*/
.industry{ width:100%; height:auto; padding-top:70px; padding-bottom:70px; background:#f5f5f5; margin-top:70px;}
.indu_con{ width:100%; height:auto; text-align:center; margin-top:50px;}
/*小程序客户案例*/
.kehu{ width:100%; height:auto; margin-top:90px; padding:75px 0; background:#f6f6f6;}
.kehu_con{ width:100%; height:auto; margin-top:22px; overflow:hidden;}
.kehu_con li{ width:214px; height:251px; float:left; margin-right:32px; margin-top:32px; background:#fff;}
.kehu_con li:nth-child(5n){ margin-right:0;}
.kehu_pic{ width:100%; height:214px; position:relative; overflow:hidden;}
.kehu_pic img{ width:100%; height:100%; object-fit:cover;}
.kehu_bg{ width:100%; height:0; line-height:214px; text-align:center; background:rgba(0,0,0,0.5); position:absolute; left:0; top:0;    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out; overflow:hidden;}
.kehu_bg img{ width:auto; height:auto;}
.kehu_text{ text-align:center; height:37px; line-height:37px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; color:#666666; padding:0 10px;}
.kehu_con li:hover .kehu_bg{ height:214px;}