@charset "utf-8";

/* ============================================================
   首页 4 大类产品固定展示样式 (800x800 正方形图片自适应高画幅)
   ============================================================ */

/* 1. 外层容器：纯净白底，上下呼吸感间距 */
.custom-ab-cat {
  margin: 0 !important;
  padding: 40px 0 45px 0 !important;
  background-color: #ffffff !important;
  border-bottom: none !important;
}

/* 2. 四列等宽横排算法 (每列 23.5% + 右间距 1.5% = 100%) */
.custom-ab-cat ul {
  width: 102% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  list-style: none !important;
}

.custom-ab-cat li, 
.custom-ab-cat li.cur {
  width: 23.5% !important;
  float: left !important;
  margin-right: 1.5% !important;
  margin-bottom: 0 !important;
  opacity: 1 !important;
  transition: transform 0.3s ease !important;
}

/* 3. 企业白底画框大卡片 */
.custom-ab-cat li a {
  display: block !important;
  padding-bottom: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
}

.custom-ab-cat li:hover a {
  transform: translateY(-5px);
  border-color: #e2e8f0 !important; /* 彻底去掉红边，保持自然柔和的浅灰边框 */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
}

/* 4. 800x800 高度画心：调整为 1:1（100%）正方形，图片完整呈现不切头切尾 */
.custom-ab-cat .cat-thumb-box {
  width: 100%;
  padding-top: 100% !important; /* 核心拉高：从 75% 调至 100%，完美承载正方形 800*800 */
  background-size: cover;         /* 如果图片四周白底较多，也可换成 contain */
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  transition: transform 0.5s ease;
}

.custom-ab-cat li:hover .cat-thumb-box {
  transform: scale(1.04);
}

/* 5. 底部文字栏 */
.custom-ab-cat .cat-text-box {
  padding: 16px 10px !important;
  background: #ffffff !important;
  text-align: center !important;
}

.custom-ab-cat li h2,
.custom-ab-cat li.cur h2 {
  position: static !important;
  transform: none !important;
  background: transparent !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 0 6px 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  line-height: 1.4em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: color 0.3s ease !important;
}

.custom-ab-cat li:hover h2,
.custom-ab-cat li a:hover h2 {
  color: #0f172a !important;
}

.custom-ab-cat .cat-more-btn {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  transition: color 0.3s ease !important;
}

.custom-ab-cat li:hover .cat-more-btn,
.custom-ab-cat li a:hover .cat-more-btn {
  color: #475569 !important;
}

/* ============================================================
   移动端与平板响应式
   ============================================================ */
/* 平板端（≤1024px）：保持 2 列并排 */
@media only screen and (max-width: 1024px) {
  .custom-ab-cat {
    padding: 30px 0 20px 0 !important;
  }
  .custom-ab-cat li, 
  .custom-ab-cat li.cur {
    width: 48.5% !important;
    margin-right: 1.5% !important;
    margin-bottom: 16px !important;
  }
}

/* 手机端（≤640px）：2 列平铺，自适应正方形展示 */
@media only screen and (max-width: 640px) {
  .custom-ab-cat {
    padding: 20px 0 10px 0 !important;
  }
  .custom-ab-cat li, 
  .custom-ab-cat li.cur {
    width: 48.5% !important;
    margin-right: 1.5% !important;
    margin-bottom: 12px !important;
  }
  .custom-ab-cat .cat-thumb-box {
    padding-top: 100% !important; /* 手机端同样保持 1:1 正方画幅 */
  }
  .custom-ab-cat .cat-text-box {
    padding: 10px 6px !important;
  }
  .custom-ab-cat li h2 {
    font-size: 13px !important;
  }
  .custom-ab-cat .cat-more-btn {
    font-size: 10px !important;
  }
}