body{margin: 0; padding: 0;background: #fff;font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft yahei", arial, "PingFangSC-Regular", sans-serif;}
*:before, *:after { box-sizing: border-box; }
ol, ul, li{list-style: none; padding: 0;margin: 0;}
em{font-style: normal;}

.gp-nav-box{position: fixed;width: 100%;height: 50px; top: 88px; overflow: hidden;z-index: 50;box-shadow: -3px 20px 30px rgb(0 0 0 / 3%);}
.gp-content{position: absolute; left: 0; right: 0; top: 138px; bottom: 0; margin: auto; overflow: hidden;}
.gp-bd .bd{ width: 960px; margin: auto;}
.gp-bd .bd .list{display: flex;flex-wrap: wrap; width: 100%;}
@media screen and (min-width:1500px) { .gp-bd .bd{ margin: auto; width: 1400px; } }
@media screen and (min-width:1900px) { .gp-bd .bd{  margin: auto; width: 1440px; } }
@media screen and (min-width:2480px) { .gp-bd .bd{ margin: auto; width: 1920px; } }
.gp-bd .ft .end{color: #aaa; font-size: 14px; text-align: center;margin: 80px 0;}


a{
	border-width:0px;
	text-decoration:none;
	color:#999;
}
.abs{
	position:absolute;
}
.outbox{
	overflow:hidden;
}
a img {
  border: medium none;
}
a.imghover{
	display:block;
	float:left;
}
a.imghover{
	display:block;
	float:left;
}
a.imghover img{
	display:none;
}
a.imghover:hover img{
	display:block;
}
.rq_rel {position: relative;}
.abs {position: absolute;z-index: 9;}
a.imghover {display: block;float: left;}
a.imghover img {display: none;}
a.imghover:hover img {display: block;}
/* CSS 页头 */
#topbar {
	width:100%;
	height:32px;
	background-color:#f8f8f8;
	border-bottom:1px solid #f0f0f0;
}
.lykd{
    margin: 0 auto;
    width: 1280px;
}
.tb_l {
  float: left;
  color: #777;
}
.tb_l a{
  margin-right:10px;
  margin-left:5px;
  line-height:32px;
  font-size:13px;font-family:"微软雅黑";color: #777;
}
.tb_l a:hover{
  color: #00a2ca;
}
.tb_l .login-btn {
  border: medium none;
  color: #999;
  font-size: 12px;
  height: 26px;
  line-height: 26px;
  margin-top: 0;
  font-family:"微软雅黑";
  text-decoration: none;
  width: auto;
}
.tb_l a.login_qq {
  background: url("../images/qq.ico") no-repeat scroll 2px 50% rgba(0, 0, 0, 0);
  padding: 0 10px 0 20px;
}
.tb_l a.login_wb {
  background: url("../images/wb.ico") no-repeat scroll 2px 50% rgba(0, 0, 0, 0);
  padding: 0 10px 0 20px;
}
.tb_r {
  float: right;
}
.tb_r a{
  margin-left:10px;
  line-height:32px;
  font-size:13px;font-family:"微软雅黑";color:#333;
}
.tb_r a:hover{
  color:#00a2ca;
}
#content {
    background: none repeat scroll 0 0 #f3f3f3;
    overflow: hidden;
}
.hd {
	height:100px;
    padding: 15px 0 15px;
    background-color:#FFF;
      z-index: 999;
}
.logo {
    float: left;
}
.wang {
    float: right;
	padding-top:20px;
}
.wang .abs{
    left: 0px; top: 0px; width: 120px; height: 50px; border:1px solid #f5f5f5; z-index: 99;
}
.wang a:hover.rq_jpb{
    border-bottom-color:#00a8ff;
}
.gjlb {width: 119px; margin-left: 0px; background-color: #fff;border:1px solid #eee;border-top:none;border-bottom:none;display: none;margin: 51px 0 0 0;}
.gjlb a{width: 119px; height: 40px; font:500 12px/40px 微软雅黑; display:block; text-align:center; border-bottom:1px solid #eee;}
.gjlb a:hover{border-color:#00a8ff;}
.gjlb2 {display: none;margin: 51px 0 0 0;font-size:12px;}
.wxPop:hover .gjlb,.pcPop:hover .gjlb,.wwPop:hover .gjlb2 {
  display: block;
}

.box .title{line-height: 40px; margin-left: 10px; margin-right: 10px; margin-bottom: 10px;}
.box .hl{font-size: 20px; color: #454545;}
.box .hr{float: right; background: #fff; margin-right: 20px; width: 160px; text-align: center; border-radius: 20px; cursor: pointer; box-shadow: -3px 20px 30px rgb(0 0 0 / 5%);}
.box .hr:hover{background: #8aa4ff; color: #fff;}
.box .ht-2{ font-size: 16px; color: #999; margin-left: 10px; cursor: pointer; }
.box .main-bd{max-width: 2120px; margin: 0 auto;}

.box .list .pic .gz{position: absolute; display: none; justify-content: center; align-items: center; left: 0; bottom: 0;width: 100%; height: 80px; background: rgba(0,0,0,0); background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.4)); text-align: center; }
.box .list .pic .gz span{display: inline-block; height: 40px; width: 150px; line-height: 40px; text-align: center; border-radius: 20px; font-size: 18px; font-weight: bold; background: #0bc58f; color: #fff; }
.box .list .pic video{ position: absolute; width: 280px; height: 400px; top: 0; display: none; }
.box .list .pic:hover .gz{display: flex;z-index: 10;}

/**
* 新增案例筛选样式
*/
.categ{ position: relative; width: calc(100% - 30px);  margin:0 auto; }
.categ .catbox{ background: #fbfbfb; z-index: 10; }
.categ .catbox,.categ .catbox-hide{ padding:30px 20px 20px 20px; border:1px solid #eee; margin-bottom: 20px; box-sizing: border-box; border-radius:20px; }
.categ .gbox{ display: flex; gap: 10px; margin-bottom: 10px; }
.categ .gbox .h{ flex-shrink:0; flex-grow:0; font-weight: bold; padding: 4px 0;}
.categ .gbox .g{ display: flex; gap: 5px; flex-wrap: wrap; color: #666; }
.categ .gbox .g .li{padding: 4px 10px; border-radius: 5px; cursor: pointer;position: relative;display: flex;align-items: center;}
.categ .gbox .g .li:hover{ background: #e5f0ff; color: #3c90ff; }
.categ .gbox .g .li img{max-height: 16px; display: block;}
.categ .gbox .g .select,.categ .gbox .g .select:hover{background: #e5f0ff; color: #3c90ff; font-weight: bold; }
.categ .gbox .g .hot,.categ .gbox .g .new{ padding-right: 28px;}
.categ .gbox .hot::after{ content: "HOT"; }
.categ .gbox .new::after{ content: "NEW"; }
.categ .gbox .hot::after,.categ .gbox .new::after{ position: absolute;right: 0; top: 0; font-size: 8px; background: linear-gradient(to right, rgb(255 80 135), rgb(255 129 0)); color: #fff; padding: 0 3px; height: 12px; border-radius: 5px; line-height: 12px;}
.categ .gbox .new::after{ background: linear-gradient(to right, rgb(133 213 41), rgb(16 187 47));}
.bd .code .not-code{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 800px; font-size: 20px; background: #fff; border-radius: 10px;}
.bd .code .not-code em{font-size: 12px; color: #999; margin-top: 10px;}
.bd .code .categ-sticky{ position: fixed; top: 88px; }