@charset "UTF-8";

/*----------------------------------------*/
/*  Technical Support (技术支持 / 技术文档)
/*----------------------------------------*/
.techPageKv {
  background-image: url(../images/techlistpage_kv.jpg);
}

.techPageKv .txt-con {
  width: 640px;
  margin-top: -12%;
}

.techPageKv .txt-con p {
  color: #ffffff;
  font-size: 15px;
  line-height: 1.8;
}

.techlistWrap {
  background: #f7f7f7;
  padding: 60px 0 200px;
}

.techlistWrap .container {
  max-width: 78%;
}

/*分类筛选*/
.techFilter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.techFilter a {
  height: 46px;
  line-height: 46px;
  padding: 0 26px;
  border-radius: 37px;
  background: #fff;
  color: #666;
  font-size: 18px;
  transition: all 0.3s;
}

.techFilter a:hover,
.techFilter a.on {
  color: #fff;
  background: linear-gradient(93.37deg, #00c6f1 2.92%, #113184 92.55%);
}

.techlistWrap .listCon {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.techlistWrap .listCon li {
  background: #fff;
  border-radius: 16px;
  padding: 30px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  transition: all 0.4s;
}

.techlistWrap .listCon li .info {
  flex: 1;
  min-width: 0;
}

.techlistWrap .listCon li .info h3 {
  font-size: 18px;
  line-height: 28px;
  font-weight: bold;
  color: #15284B;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  display: flex;
  gap: 12px;
  align-items: center;
}

/*----------------------------------------*/
/*  文档格式图标（列表卡片缩略图）
/*  取代原先后端缩略图 litpic：按文档格式取 static/images/member/ 下对应的 SVG。
/*  取值来自后台「文件格式」单选（表 ey_field_custom_param，channel_id=4），
/*  实际选项是 PDF / Doc / PPT / Excel / Zip —— 是显示名直接当值，首字母大写，
/*  所以模板里已 strtolower，这里用小写类名匹配。
/*  注意 Excel 对应的是 xls_ico.svg（不是 excel_ico.svg），这是唯一一个名字对不上的。
/*  另外兼容 docx / xlsx / pptx 这类带 x 的扩展名写法，以防将来选项被改。
/*  未匹配到的格式落到 .docIco 的兜底图标，不会出现裂图。
/*----------------------------------------*/
.techlistWrap .listCon li .info h3 .docIco {
  flex: none;
  display: block;
  width: 40px;
  height: 40px;
  background: url(../images/download_icon.svg) center center no-repeat;
  background-size: contain;
}

.techlistWrap .listCon li .info h3 .docIco.pdf {
  background-image: url(../images/member/pdf_ico.svg);
}

.techlistWrap .listCon li .info h3 .docIco.doc,
.techlistWrap .listCon li .info h3 .docIco.docx {
  background-image: url(../images/member/doc_ico.svg);
}

.techlistWrap .listCon li .info h3 .docIco.ppt,
.techlistWrap .listCon li .info h3 .docIco.pptx {
  background-image: url(../images/member/ppt_ico.svg);
}

.techlistWrap .listCon li .info h3 .docIco.xls,
.techlistWrap .listCon li .info h3 .docIco.xlsx,
.techlistWrap .listCon li .info h3 .docIco.excel {
  background-image: url(../images/member/xls_ico.svg);
}

.techlistWrap .listCon li .info h3 .docIco.zip {
  background-image: url(../images/member/zip_ico.svg);
}

.techlistWrap .listCon li .info p {
  font-size: 16px;
  line-height: 1.4;
  color: #666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 14px;
}

.techlistWrap .listCon li .info .meta {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  color: #999;
}

.techlistWrap .listCon li .info .meta .dlTag {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  color: #1B55EC;
  background: #eef2fb;
}

.techlistWrap .listCon li .dlBox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.techlistWrap .listCon li .dlBox .fa-download {
  background: url(../images/download_icon.svg) center center no-repeat;
  width: 20px;
  height: 20px;
  display: block;
  background-size: contain;
  content: '';
  font-size: 0;
}

.techlistWrap .listCon li .dlBox .dlBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 26px;
  border-radius: 4px;
  color: #fff;
  font-size: 15px;
  background: linear-gradient(76.24deg, #072250 0%, #000000 100%);
}

.techlistWrap .listCon li .dlBox .dlBtn:hover {
  opacity: 0.9;
}

.techlistWrap .listCon li .dlBox .viewBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 26px;
  color: #fff;
  font-size: 15px;
  background: linear-gradient(76.24deg, #072250 0%, #000000 100%);
  border-radius: 4px;
  font-weight: 400;
  transition: all 0.3s;
}

.techlistWrap .listCon li .dlBox .viewBtn:hover {
  background: #eef2fb;
  color: #1B55EC;
}

.techlistWrap .listCon li .dlBox .dlSize {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}

.techlistWrap .listCon li:hover {
  box-shadow: 0 12px 32px rgba(0, 71, 193, 0.12);
  transform: translateY(-3px);
}

@media only screen and (max-width: 1024px) {
  .techPageKv .txt-con {
    width: 90%;
    margin-top: 30%;
  }

  .techlistWrap .container {
    max-width: 90%;
  }

  .techlistWrap .listCon li {
    padding: 24px;
  }
}

@media only screen and (max-width: 640px) {
  .techPageKv {
    height: 360px;
  }

  .techlistWrap .listCon li {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .techlistWrap .listCon li .dlBox {
    width: 100%;
    justify-content: flex-start;
  }

  .techlistWrap .listCon li .dlBox .viewBtn,
  .techlistWrap .listCon li .dlBox .dlBtn {
    flex: 1;
  }
}

/*----------------------------------------*/
/*  Tech Doc Detail (文档详情)
/*----------------------------------------*/
.techlistWrap .listCon li .info h3 a {
  color: inherit;
}

.techlistWrap .listCon li .info h3 a:hover {
  color: #1B55EC;
}

.techDocHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.techDocHead .fa-download {
  background: url(../images/download_icon.svg) center center no-repeat;
  width: 20px;
  height: 20px;
  display: block;
  background-size: contain;
  content: '';
  font-size: 0;
}

.techDocHead h4 {
  flex: 1;
  font-size: 32px;
  line-height: 46px;
  font-weight: bold;
}

/* 文档详情页「格式：pdf · 792 B」里的格式名，{eyou:field} 标签不支持修饰器，用 CSS 转大写 */
.newsTitle .date .docFmt {
  text-transform: uppercase;
}

.techDocDlBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 30px;
  border-radius: 37px;
  color: #fff;
  font-size: 15px;
  white-space: nowrap;
  background: linear-gradient(93.37deg, #00c6f1 2.92%, #113184 92.55%);
}

.techDocDlBtn:hover {
  color: #fff;
  opacity: 0.9;
}

.techDocView img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width: 1024px) {
  .techDocHead {
    flex-direction: column;
  }

  .techDocHead h4 {
    font-size: 24px;
    line-height: 34px;
  }

  .techDocHead .techDocDlBtn {
    width: 100%;
  }
}