@charset "utf-8";
html{ font-size:100px;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
/* ===== 竖排标题（如"水电材料""土建材料"）统一参数：改这一处，所有卡片标题一起缩放 ===== */
:root{
  --bt-fs:.21rem;   /* 标题字体大小，改这里所有卡片一起变大变小 */
  --bt-py:.01rem;    /* 标题文字上下距离（padding） */
  --bt-px:0;          /* 标题文字左右距离（padding） */
  --bt-ls:.02rem;          /* 标题字和字之间的间距（竖排时为上下字距），可微调 */
}
body,ol,ul,h1,h2,h3,h4,h5,h6,p,dd{margin:0;padding:0}
*{-webkit-text-size-adjust:none}
body{font-family:'Helvetica','PingFang SC','Arial','\5FAE\8F6F\96C5\9ED1';width:7.5rem;margin:0 auto;font-size:0px;overflow-x:hidden;color:#000;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
a{text-decoration:none;cursor:pointer;outline-width:0px}
a:hover{text-decoration:none;outline:0}
em,b,i,code,strong{font-style:normal}
ol,ul,li{list-style:none}
input,textarea,select,button,label{font-family:inherit;font-size:inherit;*font-size:100%;border:0;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
:focus{outline:none;-webkit-tap-highlight-color:transparent}
img{border:0;vertical-align:top;max-width:100%}
.clearfix:after { /*在类名为“clearfix”的元素内最后面加入内容； */
    content: ".";     /*内容为“.”就是一个英文的句号而已。也可以不写。*/
    display: block;   /*加入的这个元素转换为块级元素。*/
    clear: both;     /*清除左右两边浮动。*/
    visibility: hidden;      /*可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间，只是看不到而已；*/
    height: 0;     /*高度为0；*/
    font-size:0;    /*字体大小为0；*/
}


	
	
	
.pr {position:relative;}
.pa {position:absolute;}
.text-center {text-align:center;}
.img-fluild {width:100%;display:block;margin-left:auto;margin-right:auto;margin-bottom:.1rem;box-sizing:border-box;}
.wrap-body{ width:7.5rem;border:2px solid #000;overflow:hidden;box-sizing:border-box;border-radius:5px;background: #ffffff;}
.wrap-left{ margin-left:-50%}

/* 头部 */
.header{ width:7.5rem;background:#990707;display:flex;justify-content:space-between;align-content:center;}
.header img{display:block;width:1.15rem; margin:0.22rem 0 0 0.1rem;}
.index-header {width:6rem;}
.index-header h1 {font-size:.6rem;color:#fde063;}
.index-header h6 {font-size:.2rem;color:#fff;}

.index-box {width:7.45rem;}
.index-box h5 {height:30px;line-height:.4rem;font-size:.2rem;color:#000;text-align:center;}
.index-box h8  {height:.4rem;line-height:.4rem;margin:.1rem 0;font-size:.4rem;color:#000;text-align:center;}

.index-box h6 {height:.4rem;line-height:.4rem;margin:.1rem 0;font-size:.2rem;color:#fff369;text-align:center;}
.index-con {width:7.45rem;height:1rem;display:flex;flex-flow:row nowrap;margin-bottom:8px;}
.number {width:.38rem;height:1rem;line-height:1rem;text-align:center;font-size:.3rem;color:#ffff00;background-image:url(../images/bt.png);background-size:.38rem 1rem;}
.index-con1 {width:7.07rem;height:.98rem;border:.02rem solid #990707;display:flex;flex-flow:row nowrap;}
.index-con1 .bt {width:.48rem;height:.98rem;background:#990707;font-size:var(--bt-fs);color:#fbff00;line-height:1;letter-spacing:var(--bt-ls);writing-mode:vertical-rl;text-orientation:upright;display:flex;align-items:center;justify-content:center;padding:var(--bt-py) var(--bt-px);box-sizing:border-box;}
.index-con1 .nr {width:1.7rem;box-sizing:border-box;padding:0 0px;border-right:1px solid #990707;position:relative;background: #fff;}
.index-con1 .btn {display:block;width:50px;height:15px;line-height:15px;text-align:center;font-size:10px;color:#fff;background-image: linear-gradient(#00aefa, #0087f2);border-radius:5px;right:.05rem;bottom:-10px;position:absolute;}

.index-con1 .btn2 {display:block;width:30px;height:15px;line-height:15px;text-align:center;font-size:10px;color:#fff;background-image: linear-gradient(#00aefa, #0087f2);border-radius:5px;right:.65rem;bottom:-10px;position:absolute;}

.index-con1 .btn3 {display:block;width:30px;height:15px;line-height:15px;text-align:center;font-size:10px;color:#fff;background-image: linear-gradient(#00aefa, #0087f2);border-radius:5px;right:.05rem;bottom:-10px;position:absolute;}


.index-con1 .nr h3 {width:100%;line-height:.48rem;font-size:.3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;text-align:center;    font-weight: bold;}
.index-con1 .tbimg {width:100%;max-height:.48rem;display:block;margin-left:auto;margin-right:auto;}
.index-con1 .tb3img {width:100%;display:block;margin-left:auto;margin-right:auto;}
.index-con1 .nr p {line-height:.17rem;font-size:.14rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;  font-weight: bold; }
.index-con1 .nr p em {font-style:normal;}
.index-con1 .nr:last-child {border-right:none;}
@media (max-width:428px){
	.index-con1 .nr {padding:0;}
	.index-con1 .nr p span {display:none;}
	.index-con1 .nr p {font-size:.12rem;}
	/* .index-con1 .nr .btn {font-size:.08rem;} */
}
.index-con1 .nr-2 {box-sizing:border-box;padding:0 5px;border-right:1px solid #000;position:relative;}
.index-con1 .nr-3 {width:3.15rem;box-sizing:border-box;padding:0 5px;border-right:1px solid #000;position:relative;float:right;}
.index-con1 .nr-2 img {max-width:100%;max-height:.98rem;display:block;margin-left:auto;margin-right:auto;}
.index-con1 .nr-3 img {max-width:100%;max-height:.98rem;display:block;margin-left:auto;margin-right:auto;}
.index-con1 .nr-2:last-child {border-right:none;}

.index-con1 .nr-1 {width:100%;box-sizing:border-box;position:relative;}
.index-con1 .nr-1 img {max-width:100%;max-height:.98rem;display:block;margin-left:auto;margin-right:auto;}



/* 脚部 */
.footer{width:7.5rem;height:1.1rem;line-height:1.1rem;text-align:center;background:#990707;box-sizing:border-box;border:1px solid #000;margin-top:15px;}
.footer p {font-size:.3rem;color:#fee064;}


/* ============ 电脑端（≥1025px）：仅把手机端“一行一个卡片”改为“两个并排”，卡片高度/图片/按钮全部保持手机端原样 ============ */
/* 手机(<750)等比缩放、平板(750-1024)锁750居中，均沿用上方原样式，不受影响 */
@media (min-width:1025px){
  body{width:100%;max-width:1300px;}
  .wrap-body{width:100%;}
  .header{width:100%;}
  .header img{width:115px;margin:22px 0 0 10px;}
  .index-header{width:calc(100% - 140px);}
  .index-header h1{font-size:60px;}
  .index-header h6{font-size:20px;}
  /* 主体两列并排；行间距18px，给底部按钮（手机端溢出卡片10px）留空间 */
  .index-box{width:100%;display:flex;flex-wrap:wrap;gap:18px 10px;}
  .index-box > h5{flex:0 0 100%;width:100%;}
  .index-box > div:not(.index-con):not(.jieshuoshuai-wrapper){flex:0 1 100%;width:100%;box-sizing:border-box;min-width:0;}
  /* 卡片：每行2个，高度保持手机端原样100px（1rem），不改内部 */
  .index-box > .index-con{flex:0 0 calc(50% - 5px);width:auto;height:100px;margin:0;}
  /* 序号：保持手机端原样（bt.png 38×100正好1:1，无需拉伸），数字行高居中 */
  .number{flex:0 0 33px;width:38px;height:101px;line-height:100px;}
  .index-con1{flex:1 1 auto;width:auto;height:98px;}
  .index-con1 .bt{flex:0 0 48px;width:48px;height:98px;}
  /* 内容格：仅宽度方向弹性收缩以并排，高度、图片、按钮全部保持手机端原样 */
  .index-con1 .nr{flex:1 1 0;width:auto;}
}

/* ============ 电脑端（≥1600px）左侧竖行目录：贴紧主体左边缘，点击平滑跳转、目标卡片高亮闪烁；窄屏不显示 ============ */
.side-toc{display:none;}  /* 默认隐藏，仅宽屏显示 */
@media (min-width:1600px){
  /* 主体保持1300居中、宽度不变；目录贴紧主体左边缘 */
  body{max-width:1300px;}
  .wrap-body{width:100%;margin:0;}
  /* 右侧客服按钮列贴屏幕右边（沿用基础 right:5px，此处不覆盖） */
  .side-toc{
    position:fixed;left:calc(50% - 780px);top:50%;transform:translateY(-50%);
    width:124px;max-height:92vh;z-index:70;
    display:flex;flex-direction:column;
    background:#fff;border:2px solid #990707;border-radius:8px;
    box-shadow:0 6px 18px rgba(0,0,0,.22);overflow:hidden;
  }
  .side-toc-head{
    flex:0 0 auto;background:#990707;color:#ffe063;
    font-size:14px;letter-spacing:1px;text-align:center;padding:9px 4px;
  }
  .side-toc-list{flex:1 1 auto;overflow-y:auto;}
  .side-toc-btn{
    display:flex;align-items:center;gap:6px;width:100%;
    padding:1px 8px;border:0;border-bottom:1px solid #f2dcdc;
    background:#fff;cursor:pointer;text-align:left;
  }
  .side-toc-btn .stb-n{
    display:inline-flex;align-items:center;justify-content:center;
    width:19px;height:19px;flex:0 0 19px;border-radius:50%;
    background:#990707;color:#ffff00;font-size:11px;
  }
  .side-toc-btn .stb-t{font-size:12px;color:#333;line-height:1.1;}
  .side-toc-btn:hover{background:#fdecec;}
  .side-toc-btn:hover .stb-t{color:#990707;}
  /* 目标卡片：绿色描边高亮闪烁 */
  .index-con.toc-flash > .number,
  .index-con.toc-flash > .index-con1{animation:tocflash 1.8s ease;}
  @keyframes tocflash{
    0%,100%{box-shadow:none;}
    15%,60%{box-shadow:0 0 0 4px rgba(199,21,133,.95),0 0 22px rgba(199,21,133,.75);}
  }
}