.z_join{
  width:fit-content;
  margin:0 auto;
}

.join_li{
  width:243px;
  height:226px;
  background:rgba(255,255,255,0.75);
  box-shadow:0px 0px 40px rgba(0,0,0,0.06);
  border-radius:15px;
  position:relative;
  transition:all 0.2s ease-in-out;
  float:left;
  margin:10px 10px 10px 10px;
}
.sy_contac ul li{
  width:263px;
  height:246px;
  list-style-type:none;
  margin:0px 15px 0px 15px;
  float:left;
  border-radius:15px;
  position:relative;
}
.sy_contac .sy_contact_by01:before,.sy_contac .sy_contact_by01:after{
  content:'';
  z-index:-1;
  box-shadow:inset 0 0 0 0px #fff;
  animation:clipMm 12s linear infinite;
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  border-radius:15px;
}
.sy_contact_by01:after{
  animation-delay:-4s;
}
.li_tit{
  width:69px;
  height:69px;
  position:absolute;
  top:-35px;
  left:86px;
  z-index:66;
  overflow:hidden;
  transition:all 0.2s ease-in-out;
}
.li_tit .tit_img{
  width:280px;
  height:30px;
  position:absolute;
  top:0px;
  left:0px;
}
.li_tit .tit_imgh{
  width:280px;
  height:30px;
  position:absolute;
  top:0px;
  left:-280px;
  transition:all 0.2s ease-in-out;
}
.li_num{
  width:100%;
  height:154px;
  position:absolute;
  top:25px;
  left:0px;
  text-align:center;
  line-height:154px;
  overflow:hidden;
  transition:all 0.2s ease-in-out;
}
.li_num .num_img{
  width:100%;
  height:154px;
  position:absolute;
  top:0px;
  right:-322px;
  transition:all 0.2s ease-in-out;
}
.li_num .num_imgh{
  width:100%;
  height:154px;
  position:absolute;
  top:0px;
  left:0px;
  transition:all 0.2s ease-in-out;
}
.li_lin{
  width:100%;
  height:204px;
  position:absolute;
  top:11px;
  left:0px;
  text-align:center;
  overflow:hidden;
  transition:all 0.2s ease-in-out;
}
.li_lin .lin_img{
  width:220px;
  height:204px;
  position:absolute;
  top:0px;
  right:-322px;
  transition:all 0.2s ease-in-out;
}
.li_lin .lin_imgh{
  width:220px;
  height:204px;
  position:absolute;
  top:0px;
  left:-225px;
  transition:all 0.2s ease-in-out;
}
.li_txt{
  width:100%;
  height:40px;
  position:absolute;
  top:150px;
  left:0px;
  text-align:center;
  overflow:hidden;
  transition:all 0.2s ease-in-out;
}
.li_txt .txt_img{
  width:100%;
  height:40px;
  line-height:40px;
  position:absolute;
  top:0px;
  left:0px;
  color:#4d4b4b;
  font-size:14px;
  text-align:center;
}
.li_txt .txt_imgh{
  width:100%;
  height:40px;
  line-height:40px;
  position:absolute;
  top:0px;
  left:-322px;
  color:#ffffff;
  font-size:14px;
  text-align:center;
  transition:all 0.2s ease-in-out;
}
.li_more{
  width:100%;
  height:36px;
  position:absolute;
  top:188px;
  left:0px;
  text-align:center;
  overflow:hidden;
  transition:all 0.2s ease-in-out;
}
.li_more .more_1{
  width:80px;
  height:5px;
  position:absolute;
  transition:all 0.2s ease-in-out;
  top:0px;
  left:75px;
}
.li_more .more_1 .more_icon{
  position:absolute;
  top:5px;
  left:5px;
  opacity:1;
  transition:all 0.2s ease-in-out;
}
.li_more .more_2{
  width:80px;
  height:5px;
  position:absolute;
  transition:all 0.2s ease-in-out;
  top:0px;
  left:-100px;
}
.li_more .more_2 .more_icon{
  position:absolute;
  top:5px;
  left:5px;
  opacity:1;
  transition:all 0.2s ease-in-out;
}
.join_li:hover{
  background:#1cb09b;
  transition:all 0.2s ease-in-out;
}
.join_li:hover .tit_img{
  left:280px;
  transition:all 0.2s ease-in-out;
}
.join_li:hover .tit_imgh{
  left:0px;
  transition:all 0.2s ease-in-out;
}
.join_li:hover .num_img{
  left:0px;
  transition:all 0.2s ease-in-out;
}
.join_li:hover .num_imgh{
  left:-322px;
  transition:all 0.2s ease-in-out;
}
.join_li:hover .lin_img{
  left:0px;
  transition:all 0.2s ease-in-out;
}
.join_li:hover .lin_imgh{
  left:12px;
  transition:all 0.2s ease-in-out;
}
.join_li:hover .txt_img{
  left:322px;
  transition:all 0.2s ease-in-out;
}
.join_li:hover .txt_imgh{
  left:0px;
  transition:all 0.2s ease-in-out;
}
.join_li:hover .more_1{
  left:322px;
  transition:all 0.2s ease-in-out;
}
.join_li:hover .more_2{
  left:75px;
  transition:all 0.2s ease-in-out;
}
.li_lin{
  width:100%;
  height:204px;
  position:absolute;
  top:11px;
  left:0px;
  text-align:center;
  overflow:hidden;
  transition:all 0.2s ease-in-out;
}
.li_lin .lin_img{
  height:204px;
  position:absolute;
  top:0px;
  right:-322px;
  transition:all 0.2s ease-in-out;
}
.li_lin .lin_imgh{
  height:204px;
  position:absolute;
  top:0px;
  left:-225px;
  transition:all 0.2s ease-in-out;
}
.li_dh{
  width:100%;
  height:100px;
  position:absolute;
  top:70px;
  left:0px;
  text-align:center;
  overflow:hidden;
  transition:all 0.2s ease-in-out;
}
.li_dh .txt_img{
  width:100%;
  height:100px;
  line-height:23px;
  position:absolute;
  top:0px;
  left:0px;
  color:#3b3b3b;
  font-size:15px;
  text-align:center;
}
.li_dh .txt_imgh{
  width:100%;
  height:100px;
  line-height:23px;
  position:absolute;
  top:0px;
  left:-322px;
  color:#ffffff;
  font-size:15px;
  text-align:center;
  transition:all 0.2s ease-in-out;
}
.li_ly{
  width:100%;
  height:50px;
  position:absolute;
  top:140px;
  left:0px;
  text-align:center;
  overflow:hidden;
  transition:all 0.2s ease-in-out;
}
.li_ly .t_img{
  width:89px;
  height:32px;
  border-radius:35px;
  line-height:32px;
  position:absolute;
  top:0px;
  left:77px;
  color:#fff;
  background:#1cb09b;
  font-size:15px;
  text-align:center;
}
.li_ly .t_imgh{
  width:89px;
  height:32px;
  border-radius:35px;
  color:#1cb09b;
  background:#fff;
  line-height:32px;
  position:absolute;
  top:0px;
  left:-322px;
  font-size:15px;
  text-align:center;
  transition:all 0.2s ease-in-out;
}
.join_li:hover .t_img{
  left:322px;
  transition:all 0.2s ease-in-out;
}
.join_li:hover .t_imgh{
  left:77px;
  transition:all 0.2s ease-in-out;
}
.sy_contac111{
  display:none;
}
@media only screen and (max-width: 768px){
  
.sy_contac{display: none;}
.sy_contac111{display: block;background-color: rgba(255, 255, 255, 0.8); 
 width: 90%; 
  text-align: center;
    padding: 2rem 0;
  
  }
.txt_img{font-size: 20px;    line-height: 1.6;margin-bottom: 10px;color: #333;}
}