/* 虚拟主机页面专用 CSS — 2026-07-18 第 5 次重构
   按旧模板 webhosting.css 精确数值抄到 wb- 前缀类 */

/* ==================== Tab 标签区 ==================== */
#J_webhostingTab {
    margin: -32px auto 0; padding: 0; list-style: none;
    text-align: center; position: relative; z-index: 10;
    background: #fff;
    display: flex;
    width: 100%;
}
#J_webhostingTab > li { flex: 1; margin: 0; list-style: none; }
#J_webhostingTab .item {
    display: flex; align-items: center; justify-content: center;
    height: 64px; line-height: 64px;
    font-size: 16px; color: #000; background: #fff;
    text-decoration: none; position: relative;
    border-left: 1px solid #e5e5e5;
}
#J_webhostingTab > li:first-child .item { border-left: 0; }
#J_webhostingTab .active .item { color: #fff; background-color: #2087ed; }
#J_webhostingTab .item i {
    display: inline-block; width: 30px; height: 30px; margin-right: 8px;
    background-repeat: no-repeat; background-position: center; background-size: contain; vertical-align: middle;
}
#J_webhostingTab .item1 i { background-image: url(/images/2017/webhosting/webhosting-icon1.jpg); }
#J_webhostingTab .item2 i { background-image: url(/images/2017/webhosting/webhosting-icon2.jpg); }
#J_webhostingTab .item3 i { background-image: url(/images/2017/webhosting/webhosting-icon3.jpg); }
#J_webhostingTab .item4 i { background-image: url(/images/2017/webhosting/webhosting-icon4.jpg); }
#J_webhostingTab .item5 i { background-image: url(/images/2017/webhosting/webhosting-icon5.jpg); }
#J_webhostingTab .active .item1 i { background-image: url(/images/2017/webhosting/webhosting-icon1-hover.jpg); }
#J_webhostingTab .active .item2 i { background-image: url(/images/2017/webhosting/webhosting-icon2-hover.jpg); }
#J_webhostingTab .active .item3 i { background-image: url(/images/2017/webhosting/webhosting-icon3-hover.jpg); }
#J_webhostingTab .active .item4 i { background-image: url(/images/2017/webhosting/webhosting-icon4-hover.jpg); }
#J_webhostingTab .active .item5 i { background-image: url(/images/2017/webhosting/webhosting-icon5-hover.jpg); }

/* ⭐ 2026-07-18 老板反馈：Tab 标签文字（如 new/促销），背景色通过内联 style 动态设置 */
#J_webhostingTab .wb-tab-label { margin-right: 6px; }
#J_webhostingTab .wb-tab-new {
    display: inline-block;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    padding: 0 6px;
    border-radius: 3px;
    text-transform: lowercase;
    font-weight: 700;
    vertical-align: middle;
    transform: translateY(-2px);
}

/* ==================== Tab 标题区 ==================== */
/* ⭐ 2026-07-18 老板反馈：标题缺蓝色波浪线装饰，按旧模板 webhosting.css:107-144 抄 */
.wb-title-box { padding-top: 20px; padding-bottom: 20px; text-align: center; }
.wb-title-box h3 { font-size: 24px; color: #444; font-weight: 400; }
.wb-title-line { margin: 10px auto 0; width: 94px; border-bottom: 2px solid #777; }
.wb-title-wavy {
    width: 47px; background: #F1F4F4;
    margin: -12px auto 0; position: relative; z-index: 10;
}
.wb-title-wavy i {
    display: inline-block; width: 37px; height: 6px;
    background: url(/images/webhosting/triangle2.jpg) repeat-x;
}
.wb-title-box p { padding-top: 4px; font-size: 16px; color: #8b8b8b; }

/* ==================== 产品网格 ==================== */
.wb-products { padding-top: 20px; }
.wb-product-row { font-size: 0; text-align: center; }
.wb-product-row::after { content: ""; display: table; clear: both; }
/* ⭐ 2026-07-18 老板反馈：旧平台鼠标 hover 卡片有上移 + 红色阴影光晕效果 */
.wb-product-row > .wb-col {
    transition: transform .3s ease, box-shadow .3s ease;
}
.wb-product-row > .wb-col:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px #9dbef1;
    z-index: 2; position: relative;
}
.wb-product-row > .wb-col:hover .wb-btn-buy {
    background: #0eb7fd;
}
/* ⭐ 用 inline-block 布局：3 个 wb-col 各 380px + margin-right 22px = 1190px 完美占满 */
/* (旧模板是 float + middle-column padding 0 34px，但那样卡片会贴在一起，参考图实际有间距) */
.wb-product-row > .wb-col {
    display: inline-block; vertical-align: top;
    width: 380px; margin-right: 22px;
    box-sizing: border-box;
    padding: 40px 0 34px;
    position: relative; background: #fff;
    text-align: center;
}
.wb-product-row > .wb-col:last-child { margin-right: 0; }
/* ⭐ 兼容旧模板的 middle-column 标记（让模板里加的 wb-col-mid 类名不影响布局） */
.wb-product-row > .wb-col-mid { padding-left: 0; padding-right: 0; }

/* ⭐ 旧模板 .column-title — 精确抄 */
.wb-col-title {
    margin: 0 30px; padding-bottom: 12px;
    border-bottom: 1px solid #e1e1e1;
    line-height: 1.1; font-size: 26px; color: #444;
    text-align: center; position: relative;
}

/* ⭐ 旧模板 .price — 精确抄 */
.wb-col-price {
    position: relative; padding-top: 12px;
    font-size: 14px; color: #666;
    text-align: center; line-height: 1.1;
}
.wb-col-price .wb-num { font-size: 24px; color: #ff8500; }
.wb-col-price .wb-yuan { color: #ff8500; }

/* 热销角标：旧模板用 hot-flag.jpg，改用 CSS 三角 */
.wb-hot {
    position: absolute; right: 0; top: 0;
    width: 0; height: 0;
    border-style: solid; border-width: 0 71px 59px 0;
    border-color: transparent #f53f3f transparent transparent;
    z-index: 1;  /* ⭐ 2026-07-18 修复：z-index 调小，让 wb-hot-text 显示在三角之上 */
}
.wb-hot-text {
    position: absolute; right: 5px; top: 7px;
    color: #fff; font-size: 16px;
    /* ⭐ 2026-07-27 用户要求：去掉文字旋转 45° */
    z-index: 2;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

/* ⭐ 新品角标 — 绿色三角 */
.wb-new {
    position: absolute; right: 0; top: 0;
    width: 0; height: 0;
    border-style: solid; border-width: 0 71px 59px 0;
    border-color: transparent #55d564 transparent transparent;  /* 2026-07-18 改色 #39b54a → #55d564 */
    z-index: 1;
}
.wb-new-text {
    position: absolute; right: 4px; top: 8px;
    color: #fff; font-size: 16px;
    font-weight: 700;
    /* ⭐ 2026-07-27：去掉文字旋转 45° */
    z-index: 2;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

/* ⭐ 旧模板 .webhosting-info — 精确抄 */
.wb-col-specs {
    padding: 26px 10px 20px; margin: 0;
    position: relative;
    display: table; width: 100%; table-layout: fixed;
}
.wb-col-specs > li {
    display: table-cell; text-align: center;
    font-size: 12px; color: #202020;
    list-style: none; padding: 0;
}
.wb-col-specs > li + li { border-left: 1px solid #e7e7e7; }
.wb-col-specs .wb-spec-num {
    display: block; font-size: 16px; color: #565656; font-weight: 700; padding-bottom: 4px;
}
.wb-col-specs .wb-spec-label { display: block; font-size: 12px; color: #707070; }

/* ⭐ 旧模板 .column-config — 精确抄 */
.wb-col-kv {
    padding: 0 30px 0 90px; text-align: left; margin: 0;
}
.wb-col-kv dt {
    float: left; clear: left;
    width: 70px; padding-top: 18px; box-sizing: border-box;
    font-weight: 700; font-size: 14px; color: #2f2f2f;
}
.wb-col-kv dd {
    padding: 18px 0 0 70px; font-size: 14px; color: #4b4b4b; margin: 0;
}
.wb-col-kv dd a { color: #1061ac; font-weight: 700; font-size: 14px; text-decoration: none; }
.wb-col-kv dd a:hover { color: #ff7200; text-decoration: underline; }

/* 买X年送X年横幅 — 按用户要求 */
.wb-col-promo { padding: 0; }
.wb-col-promo .wb-promo-text {
    display: inline-block; margin-top: 20px;
    font-size: 14px; font-weight: 700; color: #ff5c35;
    border: 1px solid #ff5c35; border-radius: 20px 0;
    padding: 0 20px; line-height: normal;
}

/* ⭐ 旧模板 .column-btn — 精确抄 */
.wb-col-buy { padding-top: 24px; text-align: center; }
.wb-col-buy .wb-btn-buy {
    display: inline-block; width: 220px; height: 46px; line-height: 46px;
    background: #2086ee; color: #fff; font-size: 16px;
    text-decoration: none; text-align: center;
}

/* ⭐ 2026-07-18 老板反馈：查看更多居中、字体颜色 #0b6eca、字体小一点 */
.wb-col-more { padding: 14px 0 0; text-align: center; }
.wb-col-more a {
    color: #0b6eca; font-size: 12px;
    text-decoration: none;
}
.wb-col-more a:hover { text-decoration: underline; }

.wb-no-products { text-align: center; color: #999; padding: 80px 0; font-size: 16px; }

/* ==================== 底部"为什么选择我们" ==================== */
.in_nr5_fr { width: 100%; background-color: #fff; padding-bottom: 20px; }
.in_nr5 { width: 1200px; margin: 0px auto; }
.in_nr4_t { width: 100%; overflow: hidden; text-align: center; padding-bottom: 40px; }
.in_nr4_t p.p1 { line-height: 40px; font-size: 28px; color: #333; margin-top: 40px; }
.in_nr5_c ul { list-style: none; padding: 0; margin: 0; }
.in_nr5_c ul li { float: left; text-align: center; width: 33.3333%; margin-bottom: 35px; }
.in_nr5_c ul li .spr-img { width: 86px; height: 78px; margin: 0 auto; }
.in_nr5_c ul li .spr-img span {
    width: 59px; height: 77px; margin: 0.5px 0 0 13.5px;
    display: block; float: left;
    background: url(/css/02index-spri.png) no-repeat;
    background-position: 0 -1667px;
}
.in_nr5_c ul li.li-t .spr-img span { width: 79px; height: 69px; margin: 4.5px 0 0 3.5px; background-position: 0 -1820px; }
.in_nr5_c ul li.li-s .spr-img span { width: 75px; height: 76px; margin: 1px 0 0 5.5px; background-position: 0 -1744px; }
.in_nr5_c ul li.li-f .spr-img span { width: 82px; height: 78px; margin: 0 0 0 2px; background-position: 0 -1964px; }
.in_nr5_c ul li.li-w .spr-img span { width: 80px; height: 75px; margin: 1.5px 0 0 3px; background-position: 0 -1889px; }
.in_nr5_c ul li.li-l .spr-img span { width: 86px; height: 76px; margin: 1px 0 0 0; background-position: 0 -2042px; }
.in_nr5_c ul li h4 { color: #333; font-size: 18px; line-height: 18px; padding: 28px 0 12px 0; font-weight: 400; }
.in_nr5_c ul li p { line-height: 22px; font-size: 12px; color: #666; }
.wb-clear { clear: both; }
/* ==================== ⭐ 2026-07-18 复刻旧平台 5 板块（建站流程/产品概述/选择理由/产品优势/常见问题） ==================== */
.wb-info-tab { background: #fff; margin-top: 20px; }
.wb-info-tab-nav { border-bottom: 1px solid #e5e5e5; }
.wb-info-tab-nav ul { display: flex; width: 1190px; margin: 0 auto; }
.wb-info-tab-nav li { flex: 1; text-align: center; line-height: 50px; height: 50px; cursor: pointer; color: #333; font-size: 16px; border-bottom: 2px solid transparent; transition: all .25s; }
.wb-info-tab-nav li:hover { color: #2087ed; }
.wb-info-tab-nav li.active { color: #2087ed; border-bottom-color: #2087ed; font-weight: 700; }
.wb-info-tab-content > .wb-info-tab-pane { display: none; padding: 40px 0; }
.wb-info-tab-content > .wb-info-tab-pane.active { display: block; }
.horizontal-center { width: 1190px; margin: 0 auto; }

/* --- 建站流程 --- */
.wb-flow-title {
    margin-bottom: 30px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 8px;
    background: url(/images/webhosting/flow/advantage-icon.jpg) no-repeat -178px -162px;
    font-size: 20px;
    color: #3b3b3b;
}
.wb-flow-timeline { padding: 20px 0 40px; }
.wb-flow-timeline ul { display: flex; justify-content: space-between; align-items: center; position: relative; }
.wb-flow-timeline ul:before { content: ''; position: absolute; top: 20px; left: 30px; right: 30px; height: 1px; background: #2087ed; }
.wb-flow-timeline li { position: relative; z-index: 1; text-align: center; }
/* ⭐ 2026-07-18 老板反馈：菱形（rotate 45deg）保留，但数字保持正（用 ::before 旋转背景） */
.wb-flow-num {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    z-index: 2;
    line-height: 1;
}
.wb-flow-num::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #2087ed;
    transform: rotate(45deg);
    z-index: -1;
}
.wb-flow-num:after { content: ''; display: inline-block; transform: rotate(-45deg); }
.wb-flow-timeline li p { margin-top: 10px; font-size: 14px; color: #333; }
.wb-flow-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wb-flow-card { position: relative; background: #fff; border: 1px solid #f0f0f0; padding: 20px 24px 24px; border-radius: 4px; transition: all .25s; overflow: hidden; text-decoration: none; }
.wb-flow-card:hover { box-shadow: 0 4px 16px rgba(32,135,237,0.18); transform: translateY(-2px); border-color: #2087ed; }
/* ⭐ 2026-07-18 老板反馈：建站流程 6 卡片小图标（用 siteFlow-icon.png sprite，从旧系统精确值） */
.wb-flow-icon { display: inline-block; width: 24px; height: 24px; margin-right: 10px; vertical-align: middle; margin-top: -2px; background: url(/images/webhosting/flow/siteFlow-icon.png) no-repeat 0 0; }
.wb-flow-icon-1 { background-position: -50px 0; }
.wb-flow-icon-2 { background-position: -84px 1px; }
.wb-flow-icon-3 { background-position: -116px 0; }
.wb-flow-icon-4 { background-position: -150px 1px; }
.wb-flow-icon-5 { background-position: -180px 0; }
.wb-flow-icon-6 { background-position: -211px 3px; }
.wb-flow-card h4 { display: inline-block; color: #333; font-size: 18px; margin-bottom: 8px; font-weight: 700; vertical-align: middle; }
.wb-flow-card p { color: #888; font-size: 13px; line-height: 22px; }
.wb-flow-btn { display: inline-block; margin-top: 14px; padding: 4px 16px; border: 1px solid #2087ed; color: #2087ed; font-size: 13px; border-radius: 3px; }
.wb-flow-card em { position: absolute; right: 20px; bottom: 10px; font-size: 60px; color: #f5f8fc; font-weight: 700; font-style: italic; line-height: 1; }
.wb-flow-card:hover em { color: #e0f0ff; }

/* --- 产品概述 --- */
.wb-flow-title { /* 复用建站流程的标题样式（含下划线） */ }
/* ⭐ 2026-07-19 老板反馈：产品概述 4 大图标（用 advantage-icon.jpg sprite，从旧系统精确值 1:1 还原） */
.wb-overview-icon { width: 100%; max-width: 200px; height: 130px; margin: 0 auto; background: url(/images/webhosting/flow/advantage-icon.jpg) no-repeat; }
.wb-overview-icon-1 { background-position: -160px 0; }      /* 基于云计算 */
.wb-overview-icon-2 { background-position: -416px 0; }     /* 高速CDN */
.wb-overview-icon-3 { background-position: -666px 0; }     /* 安全云平台 */
.wb-overview-icon-4 { background-position: -908px 0; }     /* 操作易用 */
.wb-overview-top ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; }
.wb-overview-top li { text-align: center; }
.wb-overview-top li p { font-size: 18px; font-weight: 700; color: #2087ed; margin: 14px 0 8px; }
.wb-overview-top li span { color: #888; font-size: 13px; line-height: 22px; }
.wb-overview-support h4 { font-size: 18px; color: #333; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid #e5e5e5; }
.wb-overview-support > ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px; }
.wb-overview-support > ul li { display: flex; align-items: center; background: #f8fbff; padding: 18px; border-radius: 6px; }
/* ⭐ 2026-07-19 应用支持 2 大圆形图标（advantage-icon.jpg sprite） */
.wb-zhichi-icon {
    width: 126px;
    height: 126px;
    flex-shrink: 0;
    margin-right: 20px;
    background: url(/images/webhosting/flow/advantage-icon.jpg) no-repeat;
}
.wb-zhichi-icon-1 { background-position: -178px -282px; }  /* 百度云加速 */
.wb-zhichi-icon-2 { background-position: -382px -282px; }  /* 360攻击防护 */
.wb-overview-support h5 { color: #2087ed; font-size: 18px; margin-bottom: 6px; }
.wb-overview-support p { color: #888; font-size: 13px; }
.wb-overview-support-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px; }
.wb-support-item { display: flex; align-items: flex-start; }
/* ⭐ 2026-07-19 应用支持 4 小图标（advantage-icon.jpg sprite） */
.wb-support-icon {
    width: 70px;
    height: 64px;
    margin-right: 20px;
    flex-shrink: 0;
    background: url(/images/webhosting/flow/advantage-icon.jpg) no-repeat;
}
.wb-support-icon-1 { background-position: -166px -484px; }  /* 网站提速 */
.wb-support-icon-2 { background-position: -312px -484px; }  /* 网站防火墙 */
.wb-support-icon-3 { background-position: -452px -476px; }  /* 抗攻击 */
.wb-support-icon-4 { background-position: -600px -480px; }  /* 高防DNS */
.wb-support-item h5 { color: #2087ed; font-size: 15px; margin-bottom: 6px; }
.wb-support-item p { color: #888; font-size: 13px; line-height: 22px; }
.wb-overview-cms h4 { color: #2087ed; font-size: 18px; margin: 30px 0 20px; padding-left: 10px; border-left: 4px solid #2087ed; }
.wb-overview-cms ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.wb-overview-cms li { background: #f8fbff; border: 1px solid #e0eef9; padding: 10px; text-align: center; border-radius: 4px; transition: all .25s; }
.wb-overview-cms li:hover { border-color: #2087ed; box-shadow: 0 4px 12px rgba(32,135,237,0.18); }
.wb-overview-cms li img { width: 100%; max-width: 100%; }

/* --- 选择理由（⭐ 2026-07-19 老板反馈：CSS 样式数值 1:1 复刻旧平台 .webhosting-goumai） --- */
.wb-buy {
    padding-top: 24px;
    padding-bottom: 60px;
}
.wb-buy .wb-buy-top {
    height: 703px;
    background: url(/images/webhosting/buy/webhosting-img1.jpg) no-repeat left top;
    position: relative;
}
.wb-buy .wb-buy-bottom {
    height: 867px;
    background: url(/images/webhosting/buy/webhosting-img2.jpg) no-repeat left top;
    position: relative;
}
/* ⭐ 2026-07-19 文字浮层（图片含 2 段视觉布局，文字在空白区：1/3 文右，2/4 文左） */
.wb-buy-section { position: absolute; width: 45%; box-sizing: border-box; padding: 30px 0; }
.wb-buy-section-1 { right: 0px; top: 50px; }
.wb-buy-section-2 { left: 0; top: 370px; }
.wb-buy-section-3 { right: 0; top: 50px; }
.wb-buy-section-4 { left: 0; top: 460px; }
.wb-buy-h3 { color: #333; font-size: 18px; font-weight: 700; line-height: 1.5; margin-bottom: 16px; }
.wb-buy-bullets { list-style: none; padding: 0; margin: 0; }
.wb-buy-bullets li { position: relative; padding-left: 18px; color: #666; font-size: 14px; line-height: 28px; }
.wb-buy-bullets li::before { content: ''; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; background: #ffbc5f; border-radius: 50%; }

/* --- 产品优势 --- */
.wb-advantage ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 60px; }
/* ⭐ 2026-07-19 老板反馈：标题和描述需上下堆叠（不是横向并排），改用 grid 布局 */
/* 用 grid 替代 flex：图片在 col 1，标题+描述都在 col 2 但不同 row（自然垂直堆叠） */
.wb-advantage li { display: grid; grid-template-columns: 100px 1fr; grid-template-rows: auto auto; align-items: start; column-gap: 20px; }
.wb-advantage-img { grid-column: 1; grid-row: 1 / 3; align-self: start; }
/* ⭐ 2026-07-18 老板反馈：产品优势 6 大图标（用 advantage-icon.jpg sprite，从旧系统精确值） */
.wb-advantage-img { display: block; width: 100px; height: 104px; flex-shrink: 0; margin-right: 0; background: url(/images/webhosting/flow/advantage-icon.jpg) no-repeat center center; }
.wb-advantage-img-1 { background-position: 0 0; }
.wb-advantage-img-2 { background-position: 0 -182px; }
.wb-advantage-img-3 { background-position: 0 -366px; }
.wb-advantage-img-4 { background-position: 0 -548px; }
.wb-advantage-img-5 { background-position: 0 -732px; }
.wb-advantage-img-6 { background-position: 0 -914px; }
.wb-advantage-title { color: #484848; font-size: 18px; font-weight: 700; margin-bottom: 4px; white-space: nowrap; grid-column: 2; grid-row: 1; }
.wb-advantage p:not(.wb-advantage-title) { color: #888; font-size: 13px; line-height: 22px; grid-column: 2; grid-row: 2; }

/* --- 常见问题 --- */
.wb-faq-list { display: flex; flex-direction: column; padding: 14px 0; border-bottom: 1px dashed #e5e5e5; }
.wb-faq-list dt { color: #2087ed; font-size: 15px; line-height: 28px; }
.wb-faq-q { display: inline-block; margin-right: 8px; font-weight: 700; }
.wb-faq-list dd { display: flex; padding-top: 6px; }
.wb-faq-a { color: #2087ed; font-size: 15px; font-weight: 700; margin-right: 8px; line-height: 24px; }
.wb-faq-list dd p { color: #666; font-size: 13px; line-height: 24px; flex: 1; }
.wb-link { color: #2087ed; }
.wb-faq-btn { display: block; width: 200px; margin: 30px auto 0; line-height: 40px; text-align: center; border: 1px solid #2087ed; color: #2087ed; border-radius: 4px; text-decoration: none; }
.wb-faq-btn:hover { background: #2087ed; color: #fff; }

/* ⭐ 2026-07-23：优惠文案行（inline-flex 收缩为内容宽度，父 text-align:center 居中）
   linux_host 页面只引用本文件，所以样式必须加在这里（之前在 webhosting.css 加的没生效） */
.webhosting-title {
    padding-top: 0;
}
.web-promo-line {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 16px;
    line-height: 1.6;
    color: #ff0000;
}
.web-promo-line .promo-gift-icon {
    flex-shrink: 0;
    display: inline-block;
}
.web-promo-line .promo-text {
    color: #ff0000;
}