/* 桌面端正常显示 */
.yid {
  width: 100%;
  border-collapse: collapse;
}

/* 移动端转为卡片 768px */
/* 
 * 核心目标：
 * 当屏幕宽度小于或等于 600px 时，将 .yid 类选择的表格转化为卡片式布局。
 * 这种转换方式能提升在小屏设备上的可读性和用户体验。
 */
@media screen and (max-width: 600px) {
  .yid thead {
    display: none; /* 隐藏原生表头 */
  }

  /* 2. 设置表格行的卡片样式基础：每一行作为独立的卡片容器 */
  .yid tr {
    display: block; /* 块级显示，使每行独立成为卡片容器 */
    margin-bottom: 12px; /* 卡片之间的垂直间距 */
    border: 1px solid #ddd; /* 卡片边框 */
    border-radius: 8px; /* 卡片圆角，提升美观度 */
    padding: 10px; /* 卡片内边距，增加内部空间 */
    box-sizing: border-box; /* 保证 padding 和 border 不增加元素的总宽高 */
  }

  /* 3. 设置表格单元格为块级模式：实现标签与内容垂直排列，适配纯块级布局 */
  .yid td {
    display: block; /* 块级显示，每个单元格独立占一行 */
    padding: 8px 0; /* 单元格上下内边距，增强内容与边框的间距 */
    border-bottom: 1px dashed #eee; /* 单元格之间的虚线分隔，区分不同数据项 */
    box-sizing: border-box; /* 确保 padding 和 border 纳入元素尺寸计算 */
    margin-bottom: 4px; /* 单元格之间的垂直间距，避免内容拥挤 */
    
    /* 修复 <br> 换行失效的问题 */
    /* white-space: pre-line; 保留换行符（<br>生效）、保留手动空格，不合并空白 */
    overflow-wrap: break-word; /* 内容过长时自动换行，避免溢出（覆盖 word-wrap，兼容性更好） */
    
    /* 块级模式下，伪元素自动与内容垂直排列，无需 Flex 相关属性 */
  }

  /* 4. 清除每个卡片内最后一个单元格的下边框：避免卡片底部出现多余虚线 */
  .yid td:last-child {
    border-bottom: none;
    margin-bottom: 0; /* 移除最后一个单元格的底部间距，避免卡片底部留白 */
  }

  /* 5. 使用伪元素 ::before 替代表头：通过 biaotou 属性显示表头信息 */
  /* 
   * 原理：在块级单元格中，伪元素作为标签在内容前垂直排列，通过样式区分标签与内容
   * 实现要求：HTML 中的 td 标签需设置 biaotou 属性，值为对应表头名称，例如：<td biaotou="姓名">张三</td>
   */
  .yid td::before {
    content: attr(biaotou); /* 获取 biaotou 属性值作为表头内容*/
    display: block; /* 块级显示，使标签单独成行，与内容垂直排列 */
    font-weight: bold; /* 标签文字加粗，凸显表头 */
    color: #666; /* 标签颜色略浅，与内容区分 */
    font-size: 14px; /* 统一标签字号，增强视觉一致性 */
    margin-bottom: 4px; /* 标签与内容之间的间距 */
    overflow-wrap: break-word; /* 标签过长时自动换行，避免溢出 */
    word-break: break-all; /* 强制换行，适配中文和长字符串，提升兼容性 */
  }

  /* 6. 处理没有 biaotou 属性的单元格：避免伪元素无内容导致额外空行 */
  .yid td:not([biaotou])::before {
    content: ""; /* 无 biaotou 时，伪元素内容为空，不显示多余标签行 */
  }

  /* 7. 优化表格整体容器：确保卡片在小屏幕上适配且边缘有间距 */
  .yid {
    width: 100%; /* 表格宽度占满父容器 */
    padding: 0 12px; /* 整体内边距，避免卡片紧贴屏幕边缘，留出安全间距 */
    box-sizing: border-box; /* 保证内边距不增加表格总宽度 */
  }

  /* 8. 可选：内容溢出处理（按需开启） */
  /* 若需要防止单元格内容溢出，可取消下方注释，开启多行文本截断 */
  /*
  .yid td {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制最多显示2行 */
    /* -webkit-box-orient: vertical; /* 垂直排列文本，配合 -webkit-line-clamp 生效 */
  /*  }
  */
}

.btn:hover {background-color: white;color: #1cb841;} .btn {all: revert;background-color: #0e90d2; border: 2px solid #0e90d2; border-radius: 8px; color: white; padding: 5px 15px; text-align: center; text-decoration: none; display: inline-block;  margin: 4px 2px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; cursor: pointer;font-weight: 400;}
.btn_m,.btn_s,.btn_m_br,.btn_s_br,.pagination li{all: revert;outline-style: none;vertical-align:middle;line-height: 1; border:1px solid #0e90d2;text-decoration: none;border-radius: 6px;display: inline-block;}
.btn_m,.btn_m_br{padding:4px 8px; margin:1px;border-radius: 6px; }
.btn_s,.btn_s_br,.pagination li{padding: 2px 3px; margin:0.5px 1px;border-radius: 4px; }
.btn_m_br,.btn_s_br,.pagination {border-radius: 2px!important;}
.btn_m:hover,.btn_s:hover,.btn_m_br:hover,.btn_s_br:hover {background-color: white;color: #1cb841;} 
.btn1:hover {color: #1cb841;} .btn1 {background-color: #1cb841;border-color:#1cb841;color: white;}
.btn2:hover {color: #0e90d2;} .btn2 {background-color: #ca3c3c;border-color:#ca3c3c;color: white;}
.btn3:hover {color: #df7514;} .btn3{background-color: #df7514;border-color:#df7514;color: white;}
.btn4:hover {color: #42b8dd;} .btn4 {background-color: #42b8dd;border-color:#42b8dd;color: white;}
.btn5:hover {color: #17a2b8;} .btn5 {background-color: #17a2b8;border-color:#17a2b8;color: white;}
.btn6:hover {color: dimgray;} .btn6,.pagination {background-color:#e6e6e6;border: 1px solid #e7e7e7;color:black;box-shadow: inset 0 0 0 1px #00000026, inset 0 0 6px #0003;}
.btn7:hover {color: #555555;} .btn7 {background-color: #555555;border-color:#555555;color: white;}
.btn0 {background-color: white;border-color: #0e90d2; color: #0e90d2;}
.btn11{background-color: white;border-color:#1cb841; color: #1cb841;}.btn11:hover {color: dimgray;} 
.btn12{background-color: white;border-color:#ca3c3c; color: #ca3c3c;}
.btn13{background-color: white;border-color:#df7514; color: #df7514;}
.btn14{background-color: white;border-color:#42b8dd; color: #42b8dd;}
.btn15{background-color: white;border-color:#17a2b8; color: #17a2b8;}
.btn16{background-color: white;border-color:#555555; color: dimgray;}
.btn17{background-color: white;border-color:#555555; color: black;}
.f-s-11{font-size: 11px;}
.f-s70{font-size: 70%;}
.f-s85{font-size: 85%;}
.w-100{width: 100%;}
.w30px{width:30px}
.w40px{width:40px}
.w50px{width:50px}
.w100px{width:100px}
.w200px{width:200px}
.t-a-c{text-align: center;}
.t-a-l{text-align: left;}
.t-a-r{text-align: right;}
.ft-l{float: left;}
.ft-r{float: right;}
/*
配色： 背景色   #F5F5DC (米黄) #F5F5F0~#FAF9DE （米黄 浅灰）浅米黄（ #FAF4E3 ）  #FAF9F6 (暖白)   #E8E4D9 (羊皮纸)
配色： 正文   #333333   #2C2C2C  #374151 
配色： 强调色   #8B4513 (棕)   #2E5090 (低饱和蓝)
主标题：#1A1A1A（近黑）或 #2D2A26（深棕灰），庄重且不突兀
次标题：#4A4540（暖灰棕），与正文形成自然过渡
链接 高亮：#6B4C35（赭石棕）或 #2E5090（低饱和蓝），避免高饱和色在暖底上"跳出来"
引用 注释：#6B7280（中性灰），明确区分于正文但不抢注意力
正文
#333333
#2C2C2C 炭灰  10.5:1  首选。比纯黑柔和，长时间阅读不刺眼 安全、舒适、万能
#374151 蓝灰  8.9:1   带冷调的深灰，增加现代感，适合技术文档
#3E3A36 暖褐灰 8.2:1   与暖白底同色系融合度最高，最具"纸书感" 正文（纸书感） #3E3A36 暖调融合度最佳
#4B5563 中灰  6.4:1   适合次要正文 长文，视觉压力最低
#78716C 弱而不失可读  辅助文字
#FAF4E3背景的斑马行#F6F0DE L=92.5% 中间过渡  新增 #F2ECDA; #F0EBD8 L=91%  稍微深一点  #EBE4D0;  L=87%  明显深一档 
 */
.ge-hang tbody tr:nth-of-type(odd) {   background-color: rgb(191 191 191 / 4%);/*隔行加深*/}
.jsd tbody tr:nth-of-type(odd) {   background-color:  rgb(191 191 191 / 4%);/*隔行加深*/}
.jsd li:nth-child(even) {background-color: rgb(191 191 191 / 5%);/* 偶数行加深 */}
.jsd li { padding:5pt;border-bottom: 1px solid #cfaa94;list-style: none;}
.jsd td {padding:5pt;border:.3pt solid windowtext;border-color:#cfaa94;/*jsd默认*/}
.jsd,.pricing-table-list {background-color: #FAF9F6;color: #2C2C2C}
.jsd dd {color: #df7514}
.jsd-c td{padding:5pt;text-align:center;border:.3pt solid windowtext;border-color:#cfaa94;/*jsd居中*/}
.td1c td:first-of-type { text-align: center;vertical-align: top; /*首个td居中*/}
.jsd1c td:first-of-type { text-align: center;vertical-align: top;min-width: 9ch;color:#a15f3b;font-weight:300; /*首个td居中*/}
.padding02 {padding: 0.2em 0.5em;}
.padding02 li {padding: 0.2em 0.5em!important;}
.main2list{height: 280px;clip-path:inset(0);overflow: hidden;}
.yincang2fly {all: revert;position: absolute;top: 10px;z-index: -90;width: 10px;height: 1px;clip-path: inset(0);box-sizing: border-box;word-break: break-word;overflow-wrap: break-word;overflow: hidden;}
.tsbhidden {display: none !important;width: 1px;}
.pagination{/*翻页*/list-style-type: none;}.pagination li{float: left;}
.lujing{background-color: #e9ecef;width: 100%;padding: 5px 10px;margin:5px}
.home-menu { background: #2d3e50; }
.home-menu .pure-menu-heading {color: white;font-weight: 400;font-size: 120%;}
.home-menu .logo {
    height: 49.91px;float: left;
    cursor: pointer;
    display: inline-block;
    line-height: normal;
    vertical-align: middle;
    white-space: nowrap;
    -webkit-user-drag: none;
    box-sizing: border-box;
    user-select: none;
    border: #0000;
    border-radius: 2px;
    color: #000c;
    font-size: 100%;
    padding: .5em 3em;}
.pricing-table-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.pricing-table-list li {
    padding: .1em 0;
    border-bottom: 1px solid #e7e7e7;
}