@charset "utf-8";
/* CSS Document */

.crumbs-bar{
  background:#fff;
  /*border-bottom:1px solid var(--gray);*/border-top: 1px solid var(--gray);
	padding: 0.8rem 1.3rem 0rem 1.3rem;
}
.crumbs-inner{
  width: 100%;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:300;
 
}
.crumbs-inner a{transition:color .2s;color:var(--text-t);}
.crumbs-inner a:hover{color:var(--primary)}
.crumbs-inner svg{width:7px;height:11px;flex-shrink:0;color:var(--text-t)}
.crumbs-inner .cur{
  color:var(--text-t);
  max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* ---------- Banner ---------- */
.banners{
  position:relative;overflow:hidden;
  min-height:430px;
  display:flex;align-items:center;
}
.banner-bg{
  position:absolute;inset:0;
  background-image:url("../images/SolutionList‌.webp");
  background-size:cover;background-position:center 40%;
	opacity:.84;
}

.banner-inner{
  position:relative;z-index:0;width:100%;
  margin: 0.8rem 1.3rem 0.8rem 1.3rem;
}

.banners h1{
  font-size:46px;font-weight:400;color:var(--dark);letter-spacing:2px;
  line-height:1.24;margin-bottom:14px;
}
.banners h1 em{font-style:normal;color:var(--dark)}

/* ---------- Filters ---------- */
.filters{
  background:#fff;
  position:sticky;
}
.filter-row{
  margin: 0.8rem 1.3rem 0.8rem 1.3rem;
  display:flex;align-items:flex-start;gap:18px;
}
/*.filter-label{
  flex-shrink:0;color:#606060;
  margin-right:0.36rem;margin-top:0.04rem;
  display:flex;align-items:center;gap:7px;
}*/
.filter-scroll{
  flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:10px;
  overflow-x:auto;scrollbar-width:none;
}
.filter-scroll::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;border:1px solid var(--gray);background:#fff;
  color:var(--text);
  padding:0.07rem 0.3rem;border-radius:var(--radius);transition:.2s;white-space:nowrap;
}
.chip:hover{border-color:var(--primary);color:var(--primary)}
.chip.on{
  background:var(--primary);border-color:var(--primary);color:#fff;font-weight:400;
}
.chip .cnt{font-size:12px;opacity:.7;margin-left:5px}
/* ---------- List ---------- */
.list_main{margin: 0.8rem 1.3rem 0.8rem 1.3rem;}
.list-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:22px;flex-wrap:wrap;
}
.list-head h2{
  font-weight:400;
  display:flex;align-items:center;gap:11px;
}
.list-head h2::before{
  content:"";width:5px;height:23px;background:var(--primary);
  border-radius:3px;display:block;
}
.list-head .total{font-size:13px;color:var(--gray)}
.list-head .total b{color:var(--primary);font-weight:600}

.grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0.4rem;
}
.card{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--gray-light);
  display:flex;flex-direction:column;
  transition:transform .28s,box-shadow .28s,border-color .28s;
  animation:rise .42s both;
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.card:hover{
  transform:translateY(-5px);border-color:var(--primary);
  box-shadow:0 14px 34px rgba(50,50,47,.11);
}
.card-media{
  position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--gray-light);/*border-radius:var(--radius);*/
}
.card-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .55s ease;
}
.card:hover .card-media img{transform:scale(1.06)}
.card-tag{
  position:absolute;top:12px;left:12px;
  background:var(--primary);color:#fff;font-size:11.5px;
  padding:4px 11px;border-radius:4px;letter-spacing:.5px;
  font-weight:400;
}
.card-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.card-date{
  display:flex;align-items:center;gap:7px;
  color:var(--text-light);margin-top:0.3rem;
  font-variant-numeric:tabular-nums;
}
.card-date img{width:0.2rem;height:0.2rem;flex-shrink:0}
.card h3{
  font-weight:300;line-height:1.3;height:2.6em;
  margin-bottom:10px; color: #606060;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  transition:color .2s;
}
.card p{
  font-size:13.2px;color:var(--ink-2);line-height:1.72;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;flex:1;
}
/*
.card-more{
  display:flex;align-items:center;gap:6px;color:var(--ink-2);
  font-size:12.5px;transition:color .2s;
}*/
.card:hover /*.card-more*/{color:var(--primary)}
.card:hover{transform:translateX(3px)}
/* ---------- Pagination ---------- */
.pager{
  display:flex;justify-content:center;align-items:center;
  gap:9px;margin-top:4.35vw;flex-wrap:wrap;
}
.pager a,.pager span{
  min-width:40px;height:40px;padding:0 0.28rem;
  border:1px solid var(--gray);background:#fff;color:var(--ink-2);
  border-radius:8px;font-size:13.5px;
  display:flex;align-items:center;justify-content:center;
  transition:.2s;
}
.pager a:hover{border-color:var(--primary);color:var(--primary)}
.pager .on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:500}
.pager .disabled{opacity:.4;pointer-events:none}
.pager .dots{border:none;background:none;color:var(--gray);min-width:22px;padding:0}
.pager li{ list-style:none; }