.banner{
    width: 100%;

}
.banner img{
    width: 100%;
}
/*核心框架*/
.hexin{
    width: 100%;
   padding-top: 0.5rem;
  padding-bottom: 0.5rem;
    background: url(../../img/comprehensive/jv.png) no-repeat;
    background-size: 100% 100%;
}
.hexin_img{
    width: 35%;
 padding-top: 0.3rem;
    margin: auto;
}
.hexin_img img{
    width: 100%;
}

/**/
.index_con_zh{
  width: 100%;
  background-color: #fff;
  padding: 0.8rem 0 0 0;
}
.gh{
  width: 100%;
  padding-bottom: 1px;
  height: 2rem;
  background-image: url(../../img/pipegallery/gl.png);
   background-size: 100% 100%;
}
.gl{
    width: 100%;
    height: 100%;
    padding-top: 0.3rem;
    line-height: 0.5rem;
    font-size: 0.3rem;
    color: #fff;
    text-align: center;
}
.zh{
    width: 100%;
    /* margin: auto; */
    /* margin-bottom: 0.8rem; */
}
.zh_img{
  margin-top: 0.6rem;
  width: 100%;
}
.zucs{
  font-size: 0.4rem;
  text-align: center;
  color: #383838;
  padding-bottom: 0.2rem;
}
.cs{
      text-align: center;
    font-size: 0.2rem;
    color: #6e6b6b;
}

/*七搭八搭*/
.yhexin{
    width: 80%;
    background-color: #fff;
    padding-top: 0.9rem;
    height: 6rem;
    overflow-y: hidden;
    padding-bottom: 5.5rem;
    margin: auto;
    max-width: 1600px;
}
.qb{
       width: 37%;
    margin: auto;
    display: flex;
    height: 45px;
    justify-content: space-around;
    align-items: center;
    font-size: 30px;
    text-align: center;
    color: #333333;
    border-bottom: 2px solid #edecec;
}
.em{
    width: 100%;
    height: 100%;
}
#mb{
    width: 80%;
    margin: auto;
    padding-top: 0.7rem;
    padding-bottom: 2rem;

}
.em div{
     display: none;
}

.em .df{
    display: block;
}
#mb p{

    text-align: center;
    color: #6e6b6b;
}
#yy{
    width: 80%;
    margin: auto;
     margin-top: 0.7rem;

}
#yy p{
    font-family: PingFang-SC-Regular;
    text-align: center;
    color: #6e6b6b;
}
.dx{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dx li{
  width: 80px;
}
.dx li img{
    /* margin-top: 0.6rem; */
    width: 70%;
    margin-left: 10%;
}
.dx li p{
    text-align: center;
    margin-top: 0.3rem;
    font-family: PingFang-SC-Regular;
    font-size: 15px;
    font-weight: normal;
}
.activ{
    color: #165399;
    cursor: pointer;
    border-bottom: 3px solid #165399;
}
/*七大应用*/
/*  */
.xd{
  display: block;
  margin-bottom: 0 !important;
}
.xd:hover .qs{
  display: block !important;
  width: 80px;
  height: 80px;
  background: #165399;
  border-radius: 120px;
   padding-left: 0;
}
.qs{
display: none;

}
.qs img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
#q11{
    width: 80px;
  height: 80px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
}

#q11 img{
 padding-top: 14px;
  /* padding-left: 5px; */
  margin: auto;
}
/* 1 */
.fg1{
  display: block;
}
.fg1:hover .qs1{
  display: block !important;
  width: 80px;
  height: 80px;
  background: #165399;
  border-radius: 120px;
}
.qs1{
display: none;

}
.qs1 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.q1{
    width: 80px;
  height: 80px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
}
.q1 img{
 padding-top: 13px;
  padding-left: 5px;
  margin: auto;
}
/*2  */
.fg2{
  display: block;
}
.fg2:hover .qs2{
  display: block !important;
  width: 80px;
  height: 80px;
  background: #165399;
  border-radius: 120px;
}
.qs2{
display: none;

}
.qs2 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.q2{
    width: 80px;
  height: 80px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
}
.q2 img{
 padding-top: 14px;
  padding-left: 4px;
  margin: auto;
}
/* 3 */
.fg3{
  display: block;
}
.fg3:hover .qs3{
  display: block !important;
  width: 80px;
  height: 80px;
  background: #165399;
  border-radius: 120px;
}
.qs3{
display: none;

}
.qs3 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.q3{
    width: 80px;
  height: 80px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
}
.q3 img{
 padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
/*4  */
.fg4{
  display: block;
}
.fg4:hover .qs4{
  display: block !important;
  width: 80px;
  height: 80px;
  background: #165399;
  border-radius: 120px;
}
.qs4{
display: none;

}
.qs4 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.q4{
    width: 80px;
  height: 80px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
}
.q4 img{
 padding-top: 13px;
  padding-left: 5px;
  margin: auto;
}
/* 5 */
.fg5{
  display: block;
}
.fg5:hover .qs5{
  display: block !important;
  width: 80px;
  height: 80px;
  background: #165399;
  border-radius: 120px;
}
.qs5{
display: none;

}
.qs5 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.q5{
    width: 80px;
  height: 80px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
}
.q5 img{
 padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
/* 6 */
.fg6{
  display: block;
}
.fg6:hover .qs6{
  display: block !important;
  width: 80px;
  height: 80px;
  background: #165399;
  border-radius: 120px;
}
.qs6{
display: none;

}
.qs6 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.q6{
    width: 80px;
  height: 80px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
}
.q6 img{
  padding-top: 13px;
  padding-left: 5px;
  margin: auto;
}
/*八大应用*/
/* #qm:hover #mb{
  display: block;
}

#ew:hover #yy{
  display: block;
} */
/*  */
.ds{
  display: block;
}
.ds:hover .fgd{
  display: block !important;
  width: 80px;
  height: 80px;
  background: #165399;
  border-radius: 120px;
}
.fgd{
display: none;

}
.fgd img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.x{
    width: 80px;
  height: 80px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
}
.x img{
 padding-top: 14px;
  padding-left: 7px;
  margin: auto;
}
/* 1 */
.ds1{
  display: block;
}
.ds1:hover .fgd1{
  display: block !important;
  width: 80px;
  height: 80px;
  background: #165399;
  border-radius: 120px;
}
.fgd1{
display: none;

}
.fgd1 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.x1{
    width: 80px;
  height: 80px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
}
.x1 img{
 padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
/*2  */
.ds2{
  display: block;
}
.ds2:hover .fgd2{
  display: block !important;
  width: 80px;
  height: 80px;
  background: #165399;
  border-radius: 120px;
}
.fgd2{
display: none;

}
.fgd2 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.x2{
    width: 80px;
  height: 80px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
}
.x2 img{
 padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
/* 3 */
.ds3{
  display: block;
}
.ds3:hover .fgd3{
  display: block !important;
  width: 80px;
  height: 80px;
  background: #165399;
  border-radius: 120px;
}
.fgd3{
display: none;

}
.fgd3 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.x3{
    width: 80px;
  height: 80px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
}
.x3 img{
 padding-top: 14px;
  padding-left: 7px;
  margin: auto;
}
/*4  */
.ds4{
  display: block;
}
.ds4:hover .fgd4{
  display: block !important;
  width: 80px;
  height: 80px;
 background: #165399;
  border-radius: 120px;
}
.fgd4{
display: none;

}
.fgd4 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.x4{
    width: 80px;
  height: 80px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
}
.x4 img{
 padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
/* 5 */
.ds5{
  display: block;
}
.ds5:hover .fgd5{
  display: block !important;
  width: 80px;
  height: 80px;
  background: #165399;
  border-radius: 120px;
}
.fgd5{
display: none;

}
.fgd5 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.x5{
    width: 80px;
  height: 80px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
}
.x5 img{
 padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
/* 6 */
.ds6{
  display: block;
}
.ds6:hover .fgd6{
  display: block !important;
  width: 80px;
  height: 80px;
  background: #165399;
  border-radius: 120px;
}
.fgd6{
display: none;

}
.fgd6 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.x6{
    width: 80px;
  height: 80px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
}
.x6 img{
  padding-top: 15px;
  padding-left: 6px;
  margin: auto;
}
/*  7*/
.ds7{
  display: block;
}
.ds7:hover .fgd7{
  display: block !important;
  width: 80px;
  height: 80px;
  background: #165399;
  border-radius: 120px;
}
.fgd7{
display: none;

}
.fgd7 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.x7{
    width: 80px;
  height: 80px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
}
.x7 img{
 padding-top: 13px;
  padding-left: 6px;
  margin: auto;
}

/*服务*/
.fuwu{
    width: 80%;
    max-width: 1500px;
     background: #f4f7fa;
    padding-top: 1.2rem;
    height: 7.5rem;
    overflow-y: hidden;
    padding-bottom: 6rem;
    margin: auto;
}
.fwzx{
   width: 100%;
     background: #f4f7fa;
     height: 6rem;
     
}
.fw{
       width: 90%;
    margin: auto;
    display: flex;
    height: 45px;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    text-align: center;
    color: #999999;
    /* border-bottom: 2px solid #edecec; */
}
.em1{
   width: 90%;
    margin: auto;
}
#mb1{
    width: 100%;
    margin: auto;
    padding-top: 0.7rem;
    padding-bottom: 2rem;

}
.em1 div{
     display: none;
}

.em1 .df{
    display: block;
}

#yy1{
    width: 100%;
    margin: auto;
     margin-top: 0.7rem;

}

.fbn1{
   font-family: PingFang-SC-Regular;
  text-align: left;
  font-size: 18px;
  color: #333333;
}

.dxw{
    width: 100%;
    display: flex;
    /* justify-content: space-between; */
   align-items: unset;
        margin-top: 0.5rem;
    
}
.dxw li{
  width: 80px;
  margin-right: 5%;
  text-align: center;
}
.dxw li img{
    /* margin-top: 0.6rem; */
    width: 70%;
    /* margin-left: 10%; */
}
.dxw li p{
    text-align: center;
    margin-top: 0.3rem;
    font-family: PingFang-SC-Regular;
    font-size: 15px;
    font-weight: normal;
    color: #666666;
}
.activ1{
    background-color: #165399 !important;
    cursor: pointer;
    color: #fff;
    /* border-bottom: 3px solid #165399; */
}
#fu_s{
  background-color: #fff;
  padding: 8px 40px;
  border: 1px solid #edecec;
}
.dxw li:last-child{
  margin-right: 0;
}
/*页脚*/
.footer{
  width: 100%;
  background-color: #000;
}
.footer_top{
  width: 60%;
  display: flex;
  margin: auto;
}
.sa{
  margin-top: 5%;
}
.footer_top_img{
   padding: 40px 0;
   margin-right: 15%;
}
.footer_right{
  width: 80%;
}
.sd1{
  color: #8b8b8b;
  width: 80%;
  padding: 10px 0;
  background-color: #adb2b42e;
  border-radius: 40px;
  margin-top: 4%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.footer_bottom{
    width: 100%;
    height: 0.5rem;
    background-color: #000;
    border-top: 0.5px solid #767373;
}
.fbn{
  font-size: 18px;
  color:#707070;
  font-family: PingFang-SC-Regular; 
  width: 50%; 
  margin: auto;
  padding: 0.7rem 0 0.1rem 0;
  text-align: center;
  line-height: 30px;
}
/*媒体查询*/
@media screen and (min-width:1600px){

.dxw li{
  width: 100px;
  margin-right: 6%;
}
}
@media screen and (min-width:1800px){

.fbn{
  width: 50% !important;
}
}
@media screen and (min-width:1200px){
.hexin_img{
  width: 35%;
}
.qb{
  width: 50%;
}
.fbn{
  width: 70%;
}
}
@media screen and (min-width:920px) and (max-width:1199px){
.hexin_img{
  width: 45%;
}
.fw{
  width: 100%;
}
#fu_s{
  padding: 8px 15px;
}
.em1{
  width: 100%;
}
.qb{
  width: 70%;
}
.fbn{
  width: 80%;
}
#mb{
  padding-top: 0;
  width: 98%;
}
#yy{
  width: 98%;
  margin-top: 0;
}
}
@media screen and (min-width:768px) and (max-width:919px){

.hexin_img{
  width: 50%;
}
.dxw li{
  margin-right: 0;
}
.fw{
  width: 100%;
}
#fu_s{
  padding: 8px 8px;
}
.em1{
  width: 100%;
}
.qb{
  width: 70%;
}
.fbn{
  width: 80%;
}
#mb{
  padding-top: 0;
  width: 98%;
}
#yy{
  width: 98%;
  margin-top: 0;
}
.x{
  width: 70px;
  height: 70px;
}
.x1{
  width: 70px;
  height: 70px;
}
.x2{
  width: 70px;
  height: 70px;
}
.x3{
  width: 70px;
  height: 70px;
}
.x4{
  width: 70px;
  height: 70px;
}
.x5{
  width: 70px;
  height: 70px;
}
.x6{
  width: 70px;
  height: 70px;
}
.x7{
  width: 70px;
  height: 70px;
}
}
@media screen and (min-width:714px) and (max-width:767px){

.zucs{
  font-size: 0.3rem !important;
}
.dxw li{
  margin-right: 0;
}
.fw{
  width: 100%;
}
#fu_s{
  padding: 8px 8px;
}
.em1{
  width: 100%;
}
.hexin_img{
  width: 60%;
}
.qb{
  width: 70%;
  font-size: 22px;
}
.fbn{
  width: 98%;
}
.yhexin{
  height: 8rem;
}
.dx{
  flex-wrap: wrap;
}
#mb{
  padding-top: 0;
  width: 98%;
  padding-bottom: 3rem;
}
#yy{
  width: 98%;
  margin-top: 0;
}

}
@media screen and (min-width:500px) and (max-width:713px){

.zucs{
  font-size: 0.3rem !important;
}
.dxw li{
  margin-right: 0;
}
.fw{
  width: 100%;
}
#fu_s{
  padding: 8px 8px;
}
.em1{
  width: 100%;
}
.hexin_img{
  width: 60%;
}
.qb{
  width: 70%;
  font-size: 22px;
}
.fbn{
  width: 98%;
}
.dx{
  flex-wrap: wrap;
}
#mb{
  padding-top: 0;
  width: 98%;
}
#yy{
  width: 98%;
  margin-top: 0;
}
.yhexin{
  height: 9rem;
}
}
@media screen and (min-width:421px) and (max-width:499px){
  .fbn{
    padding: 0.7rem 0 0.5rem 0;
  }
  .dxw li{
  margin-right: 0;
}
  .fw{
  width: 100%;
}
#fu_s{
  padding: 8px 5px;
}
.em1{
  width: 100%;
}
  .qb{
    height: 30px;
  }
.zucs{
  font-size: 0.25rem !important;
}

.hexin_img{
  width: 60%;
}
.qb{
  width: 70%;
  font-size: 20px;
}
.fbn{
  width: 98%;
  font-size: 16px;
}
.dx{
  flex-wrap: wrap;
}
#mb{
  padding-top: 0;
  width: 98%;
}
#yy{
  width: 98%;
  margin-top: 0;
}
.yhexin{
  height: 9rem;
}

}
@media screen and (min-width:320px) and (max-width:420px){
  .fbn{
    padding: 0.4rem 0 0.5rem 0;
  }
  .dxw li{
  margin-right: 0;
}
  .qb{
    height: 30px;
  }
.zucs{
  font-size: 0.25rem !important;
}
.fwzx{
height: 8rem;
}
.fuwu{
  width: 90%;
  padding-top: 1rem;
  
}
.fw{
  width: 100%;
}
#fu_s{
  padding: 8px 4px;
}
.dxw{
  align-items: unset;
  display: block;
}
.dxw li{
  float: left;
  margin-bottom: 0.3rem;
}
.dxw li p{
  margin-top: 0.2rem;
}
.em1{
  width: 100%;
}
.zh{
      width: 100%;
    /* margin-bottom: 0.2rem; */
}
.hexin_img{
     width: 100%;
    padding: 0 0.3rem;
}
.index_con_zh{
  padding: 0;
  margin-bottom: 0.8rem !important;
}
.qb{
  width: 80%;
  font-size: 20px;
}
.fbn{
  width: 98%;
  font-size: 16px;
}
.dx{
    float: left;
    display: initial;
}
.dx li p{
  margin-top: 0.07rem;
  font-size: 16px;
}
.dx li{
  margin-bottom: 0.2rem !important;
  float: left;
}
#mb{
  padding-top: 0;
  width: 98%;
  height: 100%;
}
#yy{
  width: 98%;
  margin-top: 0;
}
.yhexin{
  height: 7.5rem;
  width: 100%;
  padding: 0.6rem 0.3rem;
}
/*七大应用*/
/*  */
.xd{
  display: block;
  margin-bottom: 0 !important;
}
.xd:hover .qs{
  display: block !important;
  width: 70px;
  height: 70px;
  background: #165399;
  border-radius: 120px;
   padding-left: 0;
   margin: auto;
}
.qs{
display: none;

}
.qs img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
#q11{
    width: 70px;
  height: 70px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
  margin: auto;
}

#q11 img{
 padding-top: 14px;
  /* padding-left: 5px; */
  margin: auto;
}
/* 1 */
.fg1{
  display: block;
}
.fg1:hover .qs1{
  display: block !important;
  width: 70px;
  height:70px;
  background: #165399;
  border-radius: 120px;
  margin: auto;
}
.qs1{
display: none;

}
.qs1 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.q1{
    width: 70px;
  height: 70px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
  margin: auto;
}
.q1 img{
 padding-top: 13px;
  padding-left: 5px;
  margin: auto;
}
/*2  */
.fg2{
  display: block;
}
.fg2:hover .qs2{
  display: block !important;
  width: 70px;
  height: 70px;
  background: #165399;
  border-radius: 120px;
  margin: auto;
}
.qs2{
display: none;

}
.qs2 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.q2{
    width: 70px;
  height: 70px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
   margin: auto;
}
.q2 img{
 padding-top: 14px;
  padding-left: 4px;
  margin: auto;
}
/* 3 */
.fg3{
  display: block;
}
.fg3:hover .qs3{
  display: block !important;
  width: 70px;
  height: 70px;
  background: #165399;
  border-radius: 120px;
   margin: auto;
}
.qs3{
display: none;

}
.qs3 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.q3{
    width: 70px;
  height: 70px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
   margin: auto;
}
.q3 img{
 padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
/*4  */
.fg4{
  display: block;
}
.fg4:hover .qs4{
  display: block !important;
  width: 70px;
  height: 70px;
  background: #165399;
  border-radius: 120px;
   margin: auto;
}
.qs4{
display: none;

}
.qs4 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.q4{
    width: 70px;
  height: 70px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
   margin: auto;
}
.q4 img{
 padding-top: 13px;
  padding-left: 5px;
  margin: auto;
}
/* 5 */
.fg5{
  display: block;
}
.fg5:hover .qs5{
  display: block !important;
  width: 70px;
  height: 70px;
  background: #165399;
  border-radius: 120px;
   margin: auto;
}
.qs5{
display: none;

}
.qs5 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.q5{
    width: 70px;
  height: 70px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
   margin: auto;
}
.q5 img{
 padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
/* 6 */
.fg6{
  display: block;
}
.fg6:hover .qs6{
  display: block !important;
  width: 70px;
  height: 70px;
  background: #165399;
  border-radius: 120px;
   margin: auto;
}
.qs6{
display: none;

}
.qs6 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.q6{
    width: 70px;
  height: 70px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
   margin: auto;
}
.q6 img{
  padding-top: 13px;
  padding-left: 5px;
  margin: auto;
}
/*八大应用*/
/* #qm:hover #mb{
  display: block;
}

#ew:hover #yy{
  display: block;
} */
/*  */
.ds{
  display: block;
}
.ds:hover .fgd{
  display: block !important;
  width: 70px;
  height: 70px;
  background: #165399;
  border-radius: 120px;
   margin: auto;
}
.fgd{
display: none;

}
.fgd img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.x{
    width: 70px;
  height: 70px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
   margin: auto;
}
.x img{
 padding-top: 14px;
  padding-left: 7px;
  margin: auto;
}
/* 1 */
.ds1{
  display: block;
}
.ds1:hover .fgd1{
  display: block !important;
  width: 70px;
  height: 70px;
  background: #165399;
  border-radius: 120px;
   margin: auto;
}
.fgd1{
display: none;

}
.fgd1 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.x1{
    width: 70px;
  height: 70px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
   margin: auto;
}
.x1 img{
 padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
/*2  */
.ds2{
  display: block;
}
.ds2:hover .fgd2{
  display: block !important;
  width: 70px;
  height: 70px;
  background: #165399;
  border-radius: 120px;
   margin: auto;
}
.fgd2{
display: none;

}
.fgd2 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.x2{
    width: 70px;
  height: 70px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
   margin: auto;
}
.x2 img{
 padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
/* 3 */
.ds3{
  display: block;
}
.ds3:hover .fgd3{
  display: block !important;
  width: 70px;
  height: 70px;
  background: #165399;
  border-radius: 120px;
   margin: auto;
}
.fgd3{
display: none;

}
.fgd3 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.x3{
    width: 70px;
  height: 70px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
   margin: auto;
}
.x3 img{
 padding-top: 14px;
  padding-left: 7px;
  margin: auto;
}
/*4  */
.ds4{
  display: block;
}
.ds4:hover .fgd4{
  display: block !important;
  width: 70px;
  height: 70px;
 background: #165399;
  border-radius: 120px;
   margin: auto;
}
.fgd4{
display: none;

}
.fgd4 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.x4{
    width: 70px;
  height: 70px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
  margin: auto;
}
.x4 img{
 padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
/* 5 */
.ds5{
  display: block;
}
.ds5:hover .fgd5{
  display: block !important;
  width: 70px;
  height: 70px;
  background: #165399;
  border-radius: 120px;
  margin: auto;
}
.fgd5{
display: none;

}
.fgd5 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.x5{
    width: 70px;
  height: 70px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
  margin: auto;
}
.x5 img{
 padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
/* 6 */
.ds6{
  display: block;
}
.ds6:hover .fgd6{
  display: block !important;
  width: 70px;
  height: 70px;
  background: #165399;
  border-radius: 120px;
  margin: auto;
}
.fgd6{
display: none;

}
.fgd6 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.x6{
    width: 70px;
  height: 70px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
  margin: auto;
}
.x6 img{
  padding-top: 15px;
  padding-left: 6px;
  margin: auto;
}
/*  7*/
.ds7{
  display: block;
}
.ds7:hover .fgd7{
  display: block !important;
  width: 70px;
  height: 70px;
  background: #165399;
  border-radius: 120px;
  margin: auto;
}
.fgd7{
display: none;

}
.fgd7 img{
padding-top: 14px;
  padding-left: 5px;
  margin: auto;
}
.x7{
    width: 70px;
  height: 70px;
  border:1px solid #dbd7d7a8;
  border-radius: 120px;
  margin: auto;
}
.x7 img{
 padding-top: 13px;
  padding-left: 6px;
  margin: auto;
}
}