/* h1 顶部导航 */
.navbar-toggler {
  border: 1px solid rgba(0, 0, 0, 0.5);
}
.navbar-toggler .icon-list {
  color: #243855;
}
/* h1 顶部导航 */

/* h1 海报 */
.service-banner {
  background: url(/zhinengruanjian/images/服务案例banner背景.png) no-repeat;
  background-size: cover;
  min-height: 600px;
  display: flex;
  align-items: center;
}
.service-banner-img {
  display: flex;
  justify-content: center;
  height: 100%;
  max-height: 28.125rem;
}
.service-banner-img img {
  width: 100%;
  object-fit: contain;
}
.service-banner-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1.25rem;
  font-size: 1.5rem;
  color: #5d6b81;
}
.service-banner-text h1 {
  font-size: 3.5rem;
  font-weight: bolder;
  color: #243855;
}
/* h1 海报 */

/* h1 精选案例 */
.selected-case-contont {
  position: relative;
  background: url(/zhinengruanjian/images/精选-克诺尔.png);
  background-size: cover;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  row-gap: 1.25rem;
  color: #fff;
  margin-top: -7%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  padding: 2.25rem;
}
.selected-case-top {
  display: flex;
  flex-direction: column;
  row-gap: 0.625rem;
  width: 80%;
  font-size: 0.875rem;
}
.selected-case-top p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selected-case-center {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
}
.selected-case-text {
  display: flex;
  flex-direction: column;
}
.selected-case-text p {
  font-size: 0.875rem;
}
.selected-case-btn {
  color: #fff;
  transition: all 0.3s ease-in-out;
  max-width: fit-content;
}
.selected-case-btn:hover {
  transform: translateY(5px);
}
/* h1 精选案例 */

/* h1 客户案例 */
/* tab标题 */
.case-tab-nav {
  display: flex;
  column-gap: 0.625rem;
  justify-content: space-around;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
}
.case-line {
  position: absolute;
  bottom: -1px;
  height: 0.1875rem;
  background: #00bf80;
  z-index: 1;
  transition: all 0.3s ease-in-out;
}
.case-tab-title {
  font-size: 1.125rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.case-tab-title:hover {
  color: #00bf80;
}
.case-tab-title.active {
  color: #00bf80;
}
/* tab标题 */

/* tab内容 */
.case-card-panel {
  display: none;
}
.case-card {
  border-radius: 0.625rem;
  background: #fff;
  box-shadow: 0 0 20px rgba(155, 149, 149, 0.1);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.case-card img {
  border-top-left-radius: 0.625rem;
  border-top-right-radius: 0.625rem;
}
.case-card-body {
  display: flex;
  flex-direction: column;
  row-gap: 1.25rem;
  min-height: 16.25rem;
}
.case-card-pro {
  display: flex;
  column-gap: 0.625rem;
  flex-wrap: wrap;
  row-gap: 0.625rem;
  font-size: 0.75rem;
}
.case-card-pro p {
  padding: 2px 12px;
  border-radius: 0.3125rem;
  font-size: 0.75rem;
}
.case-card-pro p.tag-mes {
  background: rgba(0, 191, 128, 0.1);
  border: 1px solid #00bf80;
  color: #00bf80;
}
.case-card-pro p.tag-plm {
  background: rgba(64, 158, 255, 0.1);
  border: 1px solid #409eff;
  color: #409eff;
}
.case-card-pro p.tag-wms {
  background: rgba(255, 159, 67, 0.1);
  border: 1px solid #ff9f43;
  color: #ff9f43;
}
.case-card-pro p.tag-dms {
  background: rgba(255, 107, 129, 0.1);
  border: 1px solid #ff6b81;
  color: #ff6b81;
}
.case-card-pro p.tag-logistics {
  background: rgba(147, 112, 219, 0.1);
  border: 1px solid #9370db;
  color: #9370db;
}
.case-card-pro p.tag-trace {
  background: rgba(128, 162, 167, 0.1);
  border: 1px solid #80a2a7;
  color: #80a2a7;
}
.case-card-pro p.tag-digital {
  background: rgba(197, 16, 91, 0.1);
  border: 1px solid #c5105b;
  color: #c5105b;
}
.case-card-text {
  display: flex;
  flex-direction: column;
  row-gap: 0.625rem;
  font-size: 0.875rem;
  color: #5d6b81;
  text-align: justify;
}
.case-card-text .case-card-title {
  color: #243855;
  font-weight: bolder;
  transition: all 0.3s ease-in-out;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.case-card-text div {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
  text-overflow: ellipsis;
}
.case-card:hover {
  transform: translateY(-5px);
}
.case-card:hover .case-card-title {
  color: #00bf80;
}
.case-text-red {
  color: red;
}
/* tab内容 */
/* h1 客户案例 */

/* h1 大于992 */
@media (min-width: 992px) {
  /* 顶部导航 */
  .nav-style {
    color: #243855;
  }
  /* 顶部导航 */
}
/* h1 大于992 */

/* h1 小于992 */
@media (max-width: 992px) {
  /* 海报 */
  .service-banner-img img {
    width: 60%;
  }
  .service-banner-text {
    font-size: 1.25rem;
  }
  .service-banner-text h1 {
    font-size: 2.625rem;
    font-weight: bolder;
    color: #243855;
  }
  /* 海报 */
  /* 精选案例 */
  .selected-case-contont {
    margin-top: 0;
  }
  .selected-case-top {
    width: 90%;
  }
  /* 精选案例 */

  /* 客户案例 */
  .case-tab-title {
    font-size: 1rem;
  }
  /* 客户案例 */
}
/* h1 小于992 */

/* h1 小于768 */
@media (max-width: 768px) {
  /* 海报 */
  .service-banner-img img {
    width: 75%;
  }
  .service-banner-text {
    font-size: 1rem;
  }
  .service-banner-text h1 {
    font-size: 2.25rem;
    font-weight: bolder;
    color: #243855;
  }
  /* 海报 */
  /* 客户案例 */
  .case-tab-title {
    font-size: 0.875rem;
  }
  /* 客户案例 */
}
/* h1 小于768 */