@charset "utf-8";
/* ==========================================================================
   产品中心 products.css
   ========================================================================== */

/* mt-prolist 主体 start */
.mt-prolist { padding: 48px 0 72px;}
.mt-prolist-container { display: flex; display: -webkit-flex; gap: 40px;}
/* mt-prolist 主体 end */

/* 左侧边栏 start */
.mt-pro-side { width: 250px; flex-shrink: 0;}
.mt-cat-box { padding: 24px; background: #F7FAFE; border: 1px solid #E4EAF3; border-radius: 12px;}
.mt-cat-box h3 { font-size: 16px; color: #0B2550;}
.mt-cat-box ul { margin-top: 10px;}
.mt-cat-box ul li a { display: block; font-size: 14px; color: #3A4A66; line-height: 34px; padding-left: 14px; border-left: 3px solid transparent; transition: all .3s; -webkit-transition: all .3s;}
.mt-cat-box ul li a:hover { color: #1E6FFF; background: #EEF4FF;}
.mt-cat-box ul li.active a { color: #1E6FFF; font-weight: 700; border-left-color: #1E6FFF; background: #EEF4FF;}
.mt-help-card { margin-top: 16px; padding: 20px; background: #EAF2FF; border-radius: 12px;}
.mt-help-card h3 { font-size: 14px; color: #0B2550;}
.mt-help-card p { font-size: 12px; color: #1E6FFF; line-height: 22px; margin-top: 8px;}
.mt-help-card b { font-size: 16px; color: #1E6FFF;}
/* 左侧边栏 end */

/* 右侧列表 start */
.mt-pro-main { flex: 1; min-width: 0;}
.mt-pro-bar { display: flex; display: -webkit-flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid #E4EAF3;}
.mt-pro-bar span { font-size: 14px; color: #5C6B85;}
.mt-pro-bar .mt-pro-sort { font-size: 14px; color: #3A4A66; cursor: pointer;}
.mt-pro-grid { display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; gap: 20px; margin-top: 24px;}
.mt-pro-card { width: calc((100% - 40px) / 3); background: #fff; border: 1px solid #E4EAF3; border-radius: 12px; overflow: hidden; transition: transform .4s, box-shadow .4s; -webkit-transition: transform .4s, box-shadow .4s;}
.mt-pro-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-pro-card .mt-pro-card-img { position: relative; height: 210px; overflow: hidden; background: #F0F4FA;}
.mt-pro-card .mt-pro-card-img img { width: 100%; height: 100%; object-fit: cover; -o-object-fit: cover; transition: transform .6s; -webkit-transition: transform .6s;}
.mt-pro-card:hover .mt-pro-card-img img { transform: scale(1.06); -webkit-transform: scale(1.06);}
.mt-pro-card .mt-pro-card-con { padding: 14px 16px 18px;}
.mt-pro-card h3 { font-size: 15px; color: #16233F;}
.mt-pro-card p { font-size: 12px; color: #5C6B85; margin-top: 6px;}
/* 右侧列表 end */

/* 响应式 start */
@media (max-width:1280px) {
  .mt-pro-card { width: calc((100% - 20px) / 2);}
}
@media (max-width:1080px) {
  .mt-prolist-container { flex-direction: column; -webkit-flex-direction: column;}
  .mt-pro-side { width: 100%;}
  .mt-cat-box ul { display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; gap: 8px;}
  .mt-cat-box ul li a { padding: 6px 14px; border: 1px solid #E4EAF3; border-left: 3px solid transparent; border-radius: 6px; background: #fff;}
  .mt-cat-box ul li.active a { border-left-color: #1E6FFF;}
  .mt-help-card { margin-top: 12px;}
}
@media (max-width:767px) {
  .mt-prolist { padding: 28px 0 40px;}
  .mt-pro-card { width: 100%;}
  .mt-pro-card .mt-pro-card-img { height: 200px;}
}
/* 响应式 end */