.case-title-part {
  align-items: center;
  justify-content: space-between;
  padding-bottom: .5rem;
  border-bottom: .01rem solid #eee;
}

.case-title {
  max-width: 5rem;
  width: 100%;
  margin-right: .8rem;
}

.case-text p {
  font-size: .2rem;
  margin-bottom: .3rem;
}

.case-text p:last-child {
  margin-bottom: 0;
}


.case-cata-lists-div {
  margin: .6rem 0 .7rem;
}

.case-seletor {
  flex-shrink: 0;
  font-family: 'Hind-Bold';
  margin-right: 4.16665vw;
}

.case-cata-lists ul {
  flex-wrap: wrap;
}

.case-cata-lists ul li {
  padding: 0 .3rem;
  color: #666;
  margin-bottom: .1rem;
}

.case-cata-lists ul li:first-child {
  padding-left: 0;
  padding-right: .4rem;
}

.case-cata-lists ul li.active {
  padding: 0 .2rem;
  font-family: 'Hind-Medium';
  background: #d3e8ed;
}

.case-cata-lists ul li a:hover {
  color: #666;
}

.case-lists {
  padding-bottom: 0.01rem;
}

.case-lists .row {
  margin: 0 -0.2rem;
}

.case-lists .row>div {
  padding: 0 .2rem;
  margin-bottom: .4rem;
}

.case-item {
  width: 100%;
  height: 100%;
}

.case-img {
  position: relative;
  width: 100%;
  display: block;
  overflow: hidden;
  border-radius: .1rem;
  margin-bottom: .3rem;
}

.case-img img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: .1rem;
  transition: all 0.4s;
}

.case-item .case-img::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  opacity: 0;
  background: #0b272e20;
  transition: all 0.4s;
}

.case-desc {
  padding: 0 .2rem;
}

.case-desc h3 {
  position: relative;
/*  font-size: 20px; */
text-align: center;
  font-family: 'Hind-Medium';
  margin-bottom: 10px;
  -webkit-line-clamp: 2;
}

.case-desc .case-publish,
.case-desc .case-publish .flex {
  align-items: center;
  color: #666;
}

.case-desc .case-publish .flex {
  margin-right: .3rem;
}

.case-desc .case-publish .flex:last-child {
  margin-right: 0;
}

.case-desc .case-publish .flex img {
  margin-right: .1rem;
}

.case-item:hover .case-img img {
  transform: scale(1.1);
  transition: all 0.4s;
}

.case-item:hover .case-img::after {
  opacity: 1;
}

.case-item .case-desc h3::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  width: 0;
  height: 1px;
  background: #009979;
  display: none;
}

.case-item:hover .case-desc h3 a {
  text-decoration: none;
  text-decoration-color: #009979;
  transition: all 0.4s;

}




/* related products */
.related-products {
  padding: .8rem 0;
  background: #edf1f2;
}


.related-products h2 {
  position: relative;
  padding-left: .3rem;
  margin-bottom: .3rem;
  font-size: 32px;
  color: #2d2d2d;
  font-family: 'Hind-Medium';
}

.related-products h2::before {
  position: absolute;
  left: 0;
  top: 0;
  width: .1rem;
  height: .5rem;
  content: '';
  background: #009979;
}

.related-pro-item {
  position: relative;
  background: #fff;
}

.related-pro-img {
  padding: .4rem .2rem;
}

.related-pro-img img {
  max-width: 260px;
  width: 100%;
  margin: auto;
  transition: all 0.4s;
}

.related-pro-title {
  height: 60px;
  padding: 0 .2rem;
  line-height: 60px;
  border-top: 1px solid #eee;
}


.normal-item,
.mask-item a {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.mask-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: .6rem .3rem 0;
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: all 0.4s;
  background: #00997990;
}

.mask-item h4 {
  font-size: .2rem;
  font-family: 'Hind-Bold';
  margin-bottom: .3rem;
}

.mask-item .view-details {
  position: absolute;
  bottom: .6rem;
  left: 50%;
  width: 1.8rem;
  height: .48rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  border: .01rem solid #fff;
}

.related-pro-item a:hover {
  color: #fff;
}

.related-pro-item:hover .mask-item {
  opacity: 1;
  transition: all 0.4s;
}


@media (max-width:1023px) {

  .case-title-part,
  .case-cata-lists-div {
    flex-direction: column;
  }

  .case-text p {
    font-size: 16px;
  }

  .case-desc h3 {
    font-size: 18px;
  }

  .case-title {
    max-width: 100%;
    margin-right: 0;
    margin-bottom: .3rem;
  }

  .case-seletor {
    margin-right: 0;
    margin-bottom: .3rem;
  }

  .case-cata-lists-div {
    margin: .5rem 0 .6rem;
  }

  .case-lists {
    padding-bottom: .7rem;
  }

  .related-products {
    padding: .6rem 0;
  }
}

@media (max-width: 767px) {
  .case-title-part {
    padding-bottom: .4rem;
  }

  .case-lists .row {
    margin: 0 -0.15rem;
  }

  .case-lists .row>div {
    padding: 0 .15rem;
  }

  .case-lists {
    padding-bottom: .4rem;
  }


  .related-products {
    padding: .4rem 0;
  }

  .case-text p {
    font-size: .32rem;
  }

  .related-products h2 {
    font-size: 24px;
  }
  
  
  .youshishuzi {
    display: none;
  }
  
  
}