/* [2026-11-05] 「网站维护」栏目页（scode=117 / ?weihu/）专属样式
   仅由 template/dafeult/weihu.html 引入，不影响其他页面
   配色：科技蓝（安全/运维调性），CTA 用站点主题红 #e62022 */

/* ===== banner：深蓝科技渐变（覆盖 csa 默认色） ===== */
.wh-page.banner-csanim {background: #164e9e;}
.wh-page.banner-csanim .csa-bg {background: linear-gradient(115deg, #1b64c8 0%, #154a9e 40%, #103a84 72%, #0a2a63 100%);background-size: 220% 220%;}
.wh-page.banner-csanim .banner-sub-txt h1 {color: #fff;text-shadow: 0 6px 24px rgba(4,20,50,.5);}
.wh-page.banner-csanim .csa-div {background: rgba(255,255,255,.55);}
.wh-page.banner-csanim .csa-div i {background: #fff;}
.wh-page.banner-csanim .banner-sub-txt p {color: rgba(255,255,255,.9);text-shadow: none;}
.wh-page.banner-csanim .csa-watermark {color: rgba(255,255,255,.08);letter-spacing: 8px;}

/* ===== 版心（整页宽度 1600，与 dingzhi 页一致） ===== */
.wh-page .container {max-width: 1600px;}
.wh-body {padding: 54px 0 20px;background: #fff;}
.wh-body .container {max-width: 1600px;}
/* 主内容给左侧浮动导航让出空档（同 dingzhi 页布局） */
.wh-main {width: calc(100% - 248px);margin: 0 auto;}

/* ===== 左侧竖排锚点导航（样式与效果同 dingzhi 页 .dz-side：右对齐文字 + 圆点，高亮红 + 圆环） ===== */
.wh-side {position: fixed;top: 580px;left: max(16px, calc((100% - 1600px) / 2 - 224px));width: 208px;z-index: 90;}
.wh-side ul {list-style: none;margin: 0;padding: 0;}
.wh-side li a {display: flex;align-items: center;justify-content: flex-end;padding: 14px 22px 14px 10px;
    font-size: 15px;line-height: 1.4;color: #55606e;text-align: right;text-decoration: none;
    -webkit-transition: color .3s ease;transition: color .3s ease;}
.wh-side li a i {flex: 0 0 7px;width: 7px;height: 7px;margin-left: 10px;border-radius: 50%;background-color: #c2cbd8;
    -webkit-transition: all .3s ease;transition: all .3s ease;}
.wh-side li a:hover {color: #e62022;}
.wh-side li.active a {color: #e62022;font-weight: 700;}
.wh-side li.active a i {background-color: #e62022;box-shadow: 0 0 0 3.5px rgba(230,32,34,.16);}

/* ===== 模块标题 ===== */
.wh-head {text-align: center;margin-bottom: 38px;}
.wh-head h2 {margin: 0 0 10px;font-size: 32px;line-height: 1.35;font-weight: 700;color: #17233a;letter-spacing: 1px;}
.wh-head h2 em {font-style: normal;color: #1b64c8;}
.wh-head p {margin: 0;font-size: 15px;color: #8a90a0;}
.wh-intro {max-width: 900px;margin: 0 auto 46px;text-align: center;font-size: 15px;line-height: 1.9;color: #5b6373;}

/* ===== 三大部分（锚点分区块） ===== */
.wh-secitem {margin-top: 44px;}
.wh-secitem .wh-head {margin-bottom: 26px;text-align: left;}
.wh-head h2 em {font-style: normal;margin-right: 10px;}
.wh-head h2 em:before {content: "";display: none;}

/* ===== 服务卡片网格 ===== */
.wh-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 22px;}
.wh-card {position: relative;padding: 28px 26px 26px;background: #fff;border: 1px solid #eceff5;border-radius: 12px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
.wh-card:hover {transform: translateY(-6px);border-color: #d8e4f7;box-shadow: 0 14px 30px rgba(22,60,130,.10);}
.wh-num {display: inline-flex;align-items: center;justify-content: center;width: 42px;height: 42px;margin-bottom: 14px;
    border-radius: 10px;background: linear-gradient(150deg,#e8f1fe 0%,#d7e7fd 100%);
    font-size: 15px;font-weight: 700;color: #1b64c8;font-style: normal;letter-spacing: .5px;}
.wh-card h3 {margin: 0 0 10px;font-size: 18px;line-height: 1.4;font-weight: 700;color: #17233a;}
.wh-card h3 span {font-weight: 400;font-size: 13px;color: #a0a6b4;margin-left: 8px;letter-spacing: .5px;}
.wh-card p {margin: 0;font-size: 14px;line-height: 1.85;color: #5b6373;}

/* ===== 安全防护板块（深色区，作为第三部分嵌在主内容里） ===== */
.wh-sec {margin-top: 34px;padding: 46px 36px 50px;background: #0f1b30;border-radius: 16px;}
.wh-sec .wh-head {margin-bottom: 30px;}
.wh-sec .wh-head h2 {color: #fff;}
.wh-sec .wh-head h2 em {color: #5aa4ff;}
.wh-sec .wh-head p {color: rgba(255,255,255,.55);}
.wh-sec .wh-grid {gap: 20px;}
.wh-sec .wh-card {background: rgba(255,255,255,.04);border-color: rgba(255,255,255,.10);}
.wh-sec .wh-card:hover {background: rgba(255,255,255,.07);border-color: rgba(90,164,255,.45);box-shadow: 0 14px 30px rgba(0,10,30,.45);}
.wh-sec .wh-num {background: linear-gradient(150deg,#1d4f9e 0%,#153a78 100%);color: #9cc6ff;}
.wh-sec .wh-card h3 {color: #fff;}
.wh-sec .wh-card p {color: rgba(255,255,255,.66);}

/* WAF 大卡：整行通栏 + 攻击类型标签 */
.wh-card-wwide {grid-column: 1 / -1;padding: 32px 34px 30px;}
.wh-card-wwide .wh-num {margin-bottom: 12px;}
.wh-tags {display: flex;flex-wrap: wrap;gap: 10px;margin: 18px 0 0;padding: 0;list-style: none;}
.wh-tags li {padding: 7px 14px;border-radius: 6px;background: rgba(90,164,255,.12);border: 1px solid rgba(90,164,255,.28);
    font-size: 13px;line-height: 1.4;color: #a9cdff;}

/* ===== 可接手的网站类型 ===== */
.wh-types {display: flex;flex-wrap: wrap;justify-content: center;gap: 12px;margin: 0 0 44px;padding: 0;list-style: none;}
.wh-types li {padding: 9px 20px;border-radius: 22px;background: #f4f7fc;border: 1px solid #e4ebf6;
    font-size: 14px;line-height: 1.4;color: #46536a;transition: all .3s ease;}
.wh-types li:hover {background: #eaf1fd;border-color: #c9dcf8;color: #1b64c8;}

/* ===== 服务流程 ===== */
.wh-flow {margin-top: 56px;}
.wh-steps {display: grid;grid-template-columns: repeat(6, 1fr);gap: 14px;margin: 0;padding: 0;list-style: none;}
.wh-steps li {position: relative;padding: 22px 12px 20px;text-align: center;background: #f6f8fc;border-radius: 10px;}
.wh-steps li strong {display: block;margin-bottom: 8px;font-size: 20px;font-weight: 700;color: #1b64c8;font-style: normal;}
.wh-steps li span {font-size: 14px;color: #48505f;}
.wh-steps li:after {content: "";position: absolute;right: -10px;top: 50%;width: 6px;height: 6px;margin-top: -3px;
    border-top: 1px solid #c9d3e2;border-right: 1px solid #c9d2e0;transform: rotate(45deg);}
.wh-steps li:last-child:after {display: none;}

/* ===== 常见问题 ===== */
.wh-faq {display: grid;grid-template-columns: repeat(2, 1fr);gap: 18px;margin: 0;padding: 0;list-style: none;}
.wh-faq li {padding: 24px 26px;background: #f7f9fd;border-radius: 12px;border-left: 3px solid #cfe0f9;}
.wh-faq h3 {position: relative;margin: 0 0 10px;padding-left: 26px;font-size: 16px;line-height: 1.5;font-weight: 700;color: #17233a;}
.wh-faq h3:before {content: "Q";position: absolute;left: 0;top: 0;width: 18px;height: 18px;line-height: 18px;
    border-radius: 5px;background: #1b64c8;color: #fff;font-size: 12px;text-align: center;font-weight: 700;}
.wh-faq p {margin: 0;padding-left: 26px;font-size: 14px;line-height: 1.85;color: #5b6373;}

/* ===== 底部咨询条 ===== */
.wh-cta {display: flex;align-items: center;justify-content: space-between;gap: 24px;margin: 56px 0 60px;
    padding: 34px 40px;border-radius: 14px;background: linear-gradient(115deg,#12365f 0%,#0d2447 100%);}
.wh-cta-txt strong {display: block;margin-bottom: 8px;font-size: 24px;font-weight: 700;color: #fff;letter-spacing: .5px;}
.wh-cta-txt span {font-size: 14px;color: rgba(255,255,255,.62);}
.wh-cta-act {display: flex;align-items: center;gap: 16px;flex-shrink: 0;}
.wh-cta-tel {font-size: 24px;font-weight: 700;color: #fff;text-decoration: none;letter-spacing: 1px;}
.wh-cta-tel:hover {color: #ffd7d8;}
.wh-btn {display: inline-block;height: 46px;line-height: 46px;padding: 0 30px;border-radius: 23px;background: #e62022;
    font-size: 15px;color: #fff !important;text-decoration: none;transition: filter .3s ease, transform .3s ease;}
.wh-btn:hover {filter: brightness(1.08);transform: translateY(-1px);}

/* ===== 平板 ===== */
@media (max-width: 1100px){
    .wh-grid {grid-template-columns: repeat(2, 1fr);}
    .wh-steps {grid-template-columns: repeat(3, 1fr);}
    .wh-steps li:after {display: none;}
    .wh-faq {grid-template-columns: 1fr;}
    .wh-head h2 {font-size: 26px;}
    .wh-side {display: none;}
    .wh-main {width: 100%;}
}
/* ===== 手机 ===== */
@media (max-width: 767px){
    .wh-body {padding: 34px 0 10px;}
    .wh-head {margin-bottom: 24px;}
    .wh-head h2 {font-size: 21px;letter-spacing: 0;}
    .wh-head p {font-size: 13px;}
    .wh-intro {font-size: 13.5px;line-height: 1.85;margin-bottom: 22px;}
    .wh-types {gap: 8px;margin-bottom: 28px;}
    .wh-types li {padding: 7px 14px;font-size: 12.5px;}
    .wh-grid {grid-template-columns: 1fr;gap: 14px;}
    .wh-card {padding: 20px 18px 18px;border-radius: 10px;}
    .wh-card h3 {font-size: 16px;}
    .wh-card h3 span {display: none;}
    .wh-card p {font-size: 13.5px;line-height: 1.8;}
    .wh-num {width: 36px;height: 36px;margin-bottom: 10px;font-size: 13px;border-radius: 8px;}
    .wh-sec {margin-top: 34px;padding: 32px 0 36px;border-radius: 12px;}
    .wh-sec-in {padding: 0 16px;}
    .wh-card-wwide {padding: 22px 18px 20px;}
    .wh-tags {gap: 8px;margin-top: 14px;}
    .wh-tags li {padding: 6px 10px;font-size: 12px;}
    .wh-flow {margin-top: 34px;}
    .wh-steps {grid-template-columns: repeat(2, 1fr);gap: 10px;}
    .wh-steps li {padding: 16px 8px 14px;}
    .wh-steps li strong {font-size: 17px;}
    .wh-steps li span {font-size: 13px;}
    .wh-faq {gap: 12px;}
    .wh-faq li {padding: 18px 18px;border-radius: 10px;}
    .wh-faq h3 {font-size: 15px;padding-left: 24px;}
    .wh-faq p {padding-left: 24px;font-size: 13.5px;line-height: 1.8;}
    .wh-cta {flex-direction: column;align-items: flex-start;gap: 18px;margin: 34px 0 40px;padding: 24px 20px;border-radius: 12px;}
    .wh-cta-txt strong {font-size: 19px;}
    .wh-cta-txt span {display: block;line-height: 1.7;}
    .wh-cta-act {width: 100%;justify-content: space-between;gap: 10px;}
    .wh-cta-tel {font-size: 20px;}
    .wh-btn {height: 42px;line-height: 42px;padding: 0 22px;font-size: 14px;}
}