@charset "utf-8";
/* ==========================================================================
   成功案例 case.css
   ========================================================================== */

/* 筛选标签 start */
.mt-filter { display: flex; display: -webkit-flex; gap: 12px; flex-wrap: wrap; -webkit-flex-wrap: wrap; padding: 40px 0 8px;}
.mt-filter a { display: block; padding: 8px 22px; border-radius: 100px; background: #F0F4FA; font-size: 14px; color: #3A4A66; transition: all .3s; -webkit-transition: all .3s;}
.mt-filter a:hover { background: #DDE9FF; color: #1E6FFF;}
.mt-filter a.active { background: #1E6FFF; color: #fff;}
/* 筛选标签 end */

/* 案例网格 start */
.mt-case-grid { display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; gap: 24px; padding: 24px 0 0;}
.mt-case-card { width: calc((100% - 24px) / 2); background: #fff; border: 1px solid #E4EAF3; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(11,37,80,.08); -webkit-box-shadow: 0 8px 24px rgba(11,37,80,.08); transition: transform .4s, box-shadow .4s; -webkit-transition: transform .4s, box-shadow .4s;}
.mt-case-card:hover { transform: translateY(-6px); -webkit-transform: translateY(-6px); box-shadow: 0 16px 36px rgba(11,37,80,.16); -webkit-box-shadow: 0 16px 36px rgba(11,37,80,.16);}
.mt-case-card .mt-case-card-img { position: relative; height: 300px; overflow: hidden;}
.mt-case-card .mt-case-card-img img { width: 100%; height: 100%; object-fit: cover; -o-object-fit: cover; transition: transform .6s; -webkit-transition: transform .6s;}
.mt-case-card:hover .mt-case-card-img img { transform: scale(1.06); -webkit-transform: scale(1.06);}
.mt-case-card .mt-case-card-con { padding: 16px 20px 22px;}
.mt-case-card .mt-case-card-tag { font-size: 12px; font-weight: 700; color: #1E6FFF;}
.mt-case-card h3 { font-size: 17px; color: #16233F; margin-top: 8px;}
.mt-case-card p { font-size: 13px; color: #5C6B85; line-height: 22px; margin-top: 8px;}
/* 案例网格 end */

/* 案例列表 start */
.mt-case-rows { padding: 24px 0 56px;}
.mt-case-row { display: flex; display: -webkit-flex; align-items: center; gap: 24px; padding: 18px 24px; background: #F7FAFE; border-radius: 12px; margin-bottom: 16px; transition: background .3s, transform .3s; -webkit-transition: background .3s, transform .3s;}
.mt-case-row:hover { background: #EAF2FF; transform: translateX(6px); -webkit-transform: translateX(6px);}
.mt-case-row .mt-case-row-date { width: 80px; flex-shrink: 0; font-size: 13px; color: #8B99B3;}
.mt-case-row .mt-case-row-con { flex: 1; min-width: 0;}
.mt-case-row .mt-case-row-con h3 { font-size: 16px; color: #16233F; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
.mt-case-row .mt-case-row-con p { font-size: 12px; color: #5C6B85; margin-top: 4px;}
.mt-case-row i { display: block; width: 18px; height: 18px; flex-shrink: 0;}
/* 案例列表 end */

/* 响应式 start */
@media (max-width:1080px) {
  .mt-filter { padding: 24px 0 8px;}
  .mt-case-card .mt-case-card-img { height: 240px;}
}
@media (max-width:767px) {
  .mt-case-card { width: 100%;}
  .mt-case-card .mt-case-card-img { height: 200px;}
  .mt-case-row { flex-wrap: wrap; -webkit-flex-wrap: wrap; gap: 10px;}
  .mt-case-row .mt-case-row-date { width: 100%;}
  .mt-case-rows { padding: 16px 0 32px;}
}
/* 响应式 end */