/* ============================================================
   haocrm.cn 2026 Q3 改版 v2 增量样式
   作用：原站 header/页面结构完全保留，仅新增：
   1. AI营销 / 鹏为思想 下拉菜单
   2. 销售易风格页脚（原页脚保留）
   3. 帮助类栏目独立渐变广告条
   4. 客户案例图标第二行
   ============================================================ */

/* ---------- 1. 主导航下拉菜单（复刻原版 resetcommon.css，仅补下拉） ---------- */
/* 原版：
   .main_menu{white-space:nowrap;font-size:16px;height:66px;}
   .main_menu li{float:left;position:relative;background:url(Img/Common/h_lin.jpg) no-repeat right 24px;}
   .main_menu li a{color:#fff;display:inline-block;font-size:16px;line-height:66px;padding:0 29px;}
   .main_menu li.cur a,.main_menu li a:hover{text-decoration:none;z-index:1;background:#db2129;}
   .main_menu li.nob{background:none;}
   因新增 AI营销 / 鹏为思想下拉，padding 由 29px 微调为 22px 保证 11 项不换行，
   字体大小保持源版 16px。
*/
.main_menu{
    white-space:nowrap !important;
    font-size:16px !important;
    height:66px !important;
}
.main_menu > ul{list-style:none;margin:0;padding:0;}
.main_menu > ul > li{
    float:left !important;
    position:relative;
    background:url(/Skins/Default/Img/Common/h_lin.jpg) no-repeat right 24px;
}
.main_menu > ul > li.nob{background:none !important;}
.main_menu > ul > li > a{
    color:#fff !important;
    display:inline-block !important;
    font-size:16px !important;
    line-height:66px !important;
    padding:0 22px !important;
}
.main_menu > ul > li.cur > a,
.main_menu > ul > li > a:hover{
    text-decoration:none !important;
    z-index:1 !important;
    background:#db2129 !important;
}

/* 下拉菜单：不破坏原版一级菜单 */
.main_menu li.has-dropdown{position:relative;z-index:1000;}
.main_menu li.has-dropdown > a{padding-right:34px !important;}
.main_menu .dropdown{
    display:none;
    position:absolute;
    top:66px;
    left:0;
    min-width:180px;
    background:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.15);
    border-radius:0 0 4px 4px;
    overflow:hidden;
    list-style:none;
    margin:0;
    padding:0;
}
.main_menu .dropdown li{
    float:none !important;
    display:block;
    background:none !important;
    border-bottom:1px solid #f0f0f0;
    position:static;
}
.main_menu .dropdown li:last-child{border-bottom:none;}
.main_menu .dropdown li a{
    display:block;
    line-height:44px;
    padding:0 20px !important;
    color:#333 !important;
    font-size:15px !important;
    background:none !important;
    white-space:nowrap;
}
.main_menu .dropdown li a:hover{
    background:#f5f7fa !important;
    color:#0066cc !important;
    text-decoration:none;
}
.main_menu li.has-dropdown:hover > .dropdown{display:block;}

/* ---------- 2. 销售易风格新页脚 ---------- */
.f_bj_new,
.f_bj_new *{
    box-sizing:border-box;
}
.f_bj_new{
    width:100%;
    min-width:1200px;
    background:#0d2137;
    color:#cbd5e1;
    font-size:14px;
    padding:50px 0 0;
    clear:both;
    overflow:hidden;
}
.f_bj_new .f_new_inner{
    width:1200px;
    margin:0 auto;
    overflow:hidden;
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
}
.f_bj_new .f_new_col{
    flex:1 1 0;
    min-width:0;
    padding-right:30px;
}
.f_bj_new .f_new_col.f_new_col_qr{
    flex:1.2 1 0;
    padding-right:0;
}
.f_bj_new .f_new_col h4{
    color:#fff;
    font-size:16px;
    margin:0 0 20px;
    font-weight:normal;
}
.f_bj_new .f_new_col ul{
    list-style:none;
    margin:0;
    padding:0;
}
.f_bj_new .f_new_col li{
    line-height:30px;
}
.f_bj_new .f_new_col a{
    color:#94a3b8;
    text-decoration:none;
}
.f_bj_new .f_new_col a:hover{color:#fff;}
.f_bj_new .f_qr_list{
    display:flex;
    gap:12px;
}
.f_bj_new .f_qr_item{
    text-align:center;
}
.f_bj_new .f_qr_item img{
    width:90px;
    height:90px;
    display:block;
    margin:0 auto;
    background:#fff;
    padding:4px;
    border-radius:4px;
}
.f_bj_new .f_qr_item p{
    margin:8px 0 0;
    font-size:12px;
    color:#94a3b8;
    line-height:1.5;
}
.f_bj_new .f_tags{
    clear:both;
    border-top:1px solid #1e3a5f;
    border-bottom:1px solid #1e3a5f;
    padding:18px 0;
    margin-top:30px;
}
.f_bj_new .f_tags .f_new_inner{
    display:block;
}
.f_bj_new .f_tags dl{
    margin:0 0 12px;
    overflow:hidden;
}
.f_bj_new .f_tags dl:last-child{margin-bottom:0;}
.f_bj_new .f_tags dt{
    float:left;
    width:70px;
    color:#fff;
    font-weight:normal;
}
.f_bj_new .f_tags dd{
    margin-left:70px;
}
.f_bj_new .f_tags dd a{
    display:inline-block;
    color:#94a3b8;
    margin-right:18px;
    line-height:26px;
    text-decoration:none;
}
.f_bj_new .f_tags dd a:hover{color:#fff;}
.f_bj_new .f_copy{
    background:#071524;
    padding:20px 0;
    margin-top:0;
    text-align:center;
    color:#64748b;
    font-size:13px;
    line-height:1.8;
}
.f_bj_new .f_copy a{color:#94a3b8;text-decoration:none;}
.f_bj_new .f_copy a:hover{color:#fff;}

/* ---------- 3. 帮助类栏目广告条：恢复后台 banner 背景图 ---------- */
.topadcs .fullad{
    display:block;
    width:100%;
    height:350px;
    background-repeat:no-repeat;
    background-position:center top;
}

/* ---------- 5. 客户案例图标：两排共14个，左右两端对齐 + 上下列垂直对齐 ---------- */
.case .cs_tp{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    width:1002px;
    margin:0 auto 18px;
    padding:0;
    list-style:none;
}
.case .cs_tp + .cs_tp{margin-top:12px;}
.case .cs_tp li{
    float:none;
    width:143px;
    height:110px;
    margin:0;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    vertical-align:top;
}
.case .cs_tp li a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    text-decoration:none;
}
.case .cs_tp li img{
    width:58px;
    height:58px;
    display:block;
    margin:0 auto;
    object-fit:contain;
}
.case .cs_tp li span{
    display:block;
    text-align:center;
    height:24px;
    line-height:24px;
    overflow:hidden;
    margin-top:10px;
    color:#333;
    font-size:14px;
}
.case .cs_tp.fn.clearfix:after{
    content:"";
    display:table;
    clear:both;
}

/* 客户案例下方行业链接：恢复源版箭头 bullet + 多行排版 */
.case .cs_bt{
    list-style:none;
    margin:25px auto 30px;
    padding:18px 0;
    border-top:1px solid #e8e8e8;
    border-bottom:1px solid #e8e8e8;
    overflow:hidden;
    width:1002px;
}
.case .cs_bt li{
    float:left;
    width:14.28%;
    height:34px;
    line-height:34px;
    overflow:hidden;
    padding-left:16px;
    background:url(/Skins/Default/Img/pro/c9.gif) left center no-repeat;
    font-size:14px;
    display:inline;
    margin:0;
    box-sizing:border-box;
}
.case .cs_bt li a{
    display:block;
    color:#333;
    text-decoration:none;
}
.case .cs_bt li a:hover{color:#db2129;}

/* 合作客户 logo 墙：tab 切换 + 紧凑排列 + 切换动效 */
.coop_clients{
    width:1200px;
    margin:0 auto 60px;
    padding:0 15px;
    box-sizing:border-box;
}
.coop_tabs{
    text-align:center;
    padding-top:50px;
    margin-bottom:30px;
}
.coop_tabs .coop_tab{
    display:inline-block;
    padding:14px 40px;
    margin:0 10px;
    border:1px solid #2563eb;
    border-radius:30px;
    color:#2563eb;
    text-decoration:none;
    font-size:16px;
    transition:all .25s ease;
    background:#fff;
}
.coop_tabs .coop_tab:hover{
    background:#eff6ff;
    color:#2563eb;
}
.coop_tabs .coop_tab.active{
    background:#2563eb;
    color:#fff;
    box-shadow:0 6px 16px rgba(37,99,235,.35);
}
.coop_panel{display:none;}
.coop_panel.active{display:block; animation:coopPanelIn .45s ease both;}
@keyframes coopPanelIn{
    from { opacity:0; transform:translateY(25px); }
    to { opacity:1; transform:translateY(0); }
}
.coop_clients .hznr{
    width:1002px;
    margin:0 auto;
    overflow:hidden;
}
.coop_clients .hz_list_dl{
    float:left;
    width:313px;
    margin-right:30px;
    margin-bottom:12px;
    padding-bottom:0;
    opacity:0;
    transform:translateY(15px);
}
.coop_panel.active .hz_list_dl{
    animation:coopLogoIn .4s ease forwards;
}
.coop_panel.active .hz_list_dl:nth-child(1){animation-delay:.03s;}
.coop_panel.active .hz_list_dl:nth-child(2){animation-delay:.06s;}
.coop_panel.active .hz_list_dl:nth-child(3){animation-delay:.09s;}
.coop_panel.active .hz_list_dl:nth-child(4){animation-delay:.12s;}
.coop_panel.active .hz_list_dl:nth-child(5){animation-delay:.15s;}
.coop_panel.active .hz_list_dl:nth-child(6){animation-delay:.18s;}
.coop_panel.active .hz_list_dl:nth-child(7){animation-delay:.21s;}
.coop_panel.active .hz_list_dl:nth-child(8){animation-delay:.24s;}
.coop_panel.active .hz_list_dl:nth-child(9){animation-delay:.27s;}
.coop_panel.active .hz_list_dl:nth-child(10){animation-delay:.30s;}
.coop_panel.active .hz_list_dl:nth-child(11){animation-delay:.33s;}
.coop_panel.active .hz_list_dl:nth-child(12){animation-delay:.36s;}
@keyframes coopLogoIn{
    from { opacity:0; transform:translateY(15px); }
    to { opacity:1; transform:translateY(0); }
}
.coop_clients .hz_list_dl_0{margin-right:0;}
.coop_clients .hz_list_dl dt a{
    display:block;
    border:1px solid #e8e8e8;
    padding:5px;
    background:#fff;
}
.coop_clients .hz_list_dl img{
    width:100%;
    height:64px;
    display:block;
    object-fit:contain;
}

/* 首页“鹏为思想”四个二级入口：纵向列表 */
.pw_thought{
    width:100%;
    min-width:1200px;
    padding:60px 0;
    background:#f5f5f5;
    clear:both;
}
.pw_thought .content{
    width:1200px;
    margin:0 auto;
    overflow:hidden;
}
.pw_thought h2{
    text-align:center;
    font-size:30px;
    color:#333;
    font-weight:normal;
    margin-bottom:40px;
}
.pw_thought h2 i{
    display:block;
    font-size:14px;
    color:#999;
    font-style:normal;
    margin-top:10px;
}
.pw_thought_list{
    list-style:none;
    width:1002px;
    margin:0 auto;
    padding:0;
}
.pw_thought_list li{
    margin-bottom:16px;
    background:#fff;
    border:1px solid #e8e8e8;
    transition:all .25s ease;
}
.pw_thought_list li:last-child{margin-bottom:0;}
.pw_thought_list li:hover{
    border-color:#db2129;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    transform:translateX(6px);
}
.pw_thought_list li a{
    display:block;
    padding:22px 30px;
    color:#333;
    font-size:18px;
    text-decoration:none;
    background:url(/Skins/Default/Img/pro/c9.gif) 12px center no-repeat;
    padding-left:34px;
}
.pw_thought_list li a:hover{color:#db2129;}

/* 合作客户页（hzkh）分组 logo 墙：恢复源版风格 */
.rczp_dvhz .rczp_yc{width:1002px;float:left;}
.rczp_dvhz .clm_hztit{
    display:block;
    text-align:center;
    font-size:26px;
    line-height:60px;
    color:#db2129;
    font-weight:normal;
    padding-bottom:30px;
    margin:0;
}
.rczp_dvhz .hznr{padding-bottom:30px;overflow:hidden;}
.rczp_dvhz .hz_list_dl{
    float:left;
    width:313px;
    margin-right:30px;
    display:inline;
    padding-bottom:10px;
}
.rczp_dvhz .hz_list_dl_0{margin-right:0;}
.rczp_dvhz .hz_list_dl dt a{
    display:block;
    border:1px solid #e8e8e8;
    padding:5px;
    background:#fff;
}
.rczp_dvhz .hz_list_dl img{
    width:100%;
    height:64px;
    display:block;
    object-fit:contain;
}
.rczp_dvhz .hz_list_dl dd h4{
    display:block;
    text-align:center;
    font-size:16px;
    line-height:36px;
    margin:0;
    padding:0;
}
.rczp_dvhz .hz_list_dl dd h4 a{color:#333;text-decoration:none;}


/* ============================================================
   热门关键词条（SEO 关键词组件）—— 源站 .search_dv 1:1 复刻
   数值严格取自 www.haocrm.cn/Skins/default/resetcommon.css
   ============================================================ */
.search_dv { background:#eee; height:80px; border-bottom:1px solid #eeeeee; margin-bottom:30px; }
.search_dv .content { width:1200px; margin:0 auto; }
.ssec1 { height:80px; line-height:80px; font-size:14px; color:#666666; float:left; width:720px; }
.ssec1 a { color:#666666; padding:0 6px; text-decoration:none; }
.ssec1 a:hover { color:#db2129; }
.ssec2 { float:right; padding-top:20px; }
.ssec2 input:focus { outline:none; }
.kseh1 { width:253px; background:#fff url(/Skins/Default/Img/pro/ss1.png) no-repeat; padding-left:22px; height:43px; line-height:43px; color:#999999; font-size:14px; border:0; outline:none; vertical-align:top; }
.kseh2 { background:#1a56db url(/Skins/Default/Img/pro/ss2.png) no-repeat center; width:50px; height:43px; border:0; cursor:pointer; vertical-align:top; }

/* ---------- 首页热门关键词条：居中窄条，位于 .crmq 标题上方，与源站样式一致 ---------- */
.search_dv-home { background:transparent; height:auto; border-bottom:0; margin-bottom:12px; }
.search_dv-home .content { width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:46px; padding:0 18px; border:1px solid #e0e0e0; background:#f9f9f9; border-radius:4px; box-sizing:border-box; }
.search_dv-home .ssec1 { height:46px; line-height:46px; width:auto; float:none; flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; color:#666; }
.search_dv-home .ssec1 .kw-label { color:#333; font-weight:600; margin-right:4px; }
.search_dv-home .ssec1 a { color:#666; padding:0 8px; }
.search_dv-home .ssec1 a:hover { color:#db2129; }
.search_dv-home .ssec2 { float:none; padding:0; display:flex; align-items:center; }
.search_dv-home .kseh1 { width:160px; height:30px; line-height:30px; background:#fff url(/Skins/Default/Img/pro/ss1.png) no-repeat 6px center; padding-left:24px; color:#999; font-size:13px; border:1px solid #ddd; border-right:0; border-radius:3px 0 0 3px; outline:none; vertical-align:top; }
.search_dv-home .kseh2 { width:36px; height:32px; background:#db2129 url(/Skins/Default/Img/pro/ss2.png) no-repeat center; border:0; border-radius:0 3px 3px 0; cursor:pointer; vertical-align:top; }

@media (max-width:1200px){
    .search_dv .content { width:100%; padding:0 15px; box-sizing:border-box; }
    .search_dv-home .content { width:100%; height:auto; flex-wrap:wrap; padding:10px 15px; }
    .search_dv-home .ssec1 { width:100%; height:auto; line-height:32px; white-space:normal; }
    .ssec1 { width:auto; float:none; height:auto; line-height:44px; overflow:hidden; }
    .ssec2 { float:none; padding-top:0; padding-bottom:14px; }
    .search_dv-home .ssec2 { width:100%; padding-top:8px; justify-content:flex-end; }
}

/* ============================================================
   AI 营销专区 —— 布局参照 shuangxisoft.cn/ai/tools/
   ============================================================ */
/* ★ 第 44 版（No.204）：胶囊搬走之后这块只剩 h1 + 导语，
   原来给胶囊让位的下留白（26px padding-bottom + 26px 段落 margin）
   会把正文白压下去一大截 —— 运营要求「整体上提」，两处一起收。 */
/* ★ 第 45 版（No.204）：这一层白底 hero 的样式规则**整族删除**。
   原来它承载的 h1 + 导语已经搬进页顶广告位（`.topadcs .ad-hero`），
   页面上再没有任何元素命中这里；运营原话「椭圆所在区域位置就不要了
   （删除），整体上提」。这条注记本身不写类名字面量，免得以后有人按
   类名在样式表里搜、把注记当成"规则还在"。 */
/* ★ 第 44 版（2026-09-23 · 测试反馈 No.204）：
   这一族「白底灰字」的胶囊规则**已删除** —— 那排胶囊第 40 版（No.185）就搬进
   了页顶广告位，白底那一套在这里已经没有任何元素命中；运营原话「现在就是要
   处理它，删样」。这里只留一条注记说明去哪儿了，不写字面量，免得以后有人
   按类名在样式表里搜、把这条注记当成"样式还在"。 */

/* ============================================================================
   第 45 版（2026-09-23 · 测试反馈 No.204）—— 广告位里的 HTML 文字层 + 胶囊配色
   ----------------------------------------------------------------------------
   运营要求四条：① 7 枚胶囊在广告位（第 40 版已搬）；② **配色优化**；
   ③ 红框位置（原图上画死的大字）改由 HTML 渲染，点不同胶囊跟着变；
   ④ 下方那块椭圆圈住的白底 hero 删除、整体上提。

   这一层的位置是**量出来的**：SVG 底图 1920x350，原来那三行字在
   x=372、基线 y=196 / 240 / 278，左侧还有一根 8x126 的橙色竖条
   （`<rect x="360" y="112" width="8" height="126" rx="4" fill="url(#acc)">`，
   `#acc` = #f59e0b → #f97316 的金橙渐变）。

   ★★ 第 47 版（2026-09-23 · 测试反馈 No.231）把这段几何**改回原值**。
      运营原话：「PC端AI营销 / 广告中文字整体靠左，位置在上1个版本那个位置；
                同时保留金色的竖线，看上去高档。」

      第 45 版这一层有两处没量准（同一句注释里写着"压在内容栏最左边"，
      实际两项都不是）：
        ① `padding-left:calc((100% - 1200px)/2 + 130px)` —— 130px 是凭空加的
           偏移，文字被推到内容栏左沿右侧 130px 处（底图原值是 12px）；
        ② `.ad-hero` **没有**覆盖 `text-align`，而它的祖先 `.topadcs` 写的
           是 `text-align:center` ⇒ 三行字实际是**居中**排的，与"压在最左边"
           正好相反。这也是运营说"文字整体靠左"的直接原因 ——
           1920 屏下这三行字的视觉中心在 1110px 左右，而原图在 660px 附近。
       本版两条一起改：`text-align:left` + 偏移 12px ⇒ 标题左沿落在
       x=372，与第 45 版之前底图上那三行字**同一个位置**。
      ★ 那根金色竖条用 `::before` 画在标题左沿往左 12px 处（= 内容栏左沿
        x=360），8x126 + 4px 圆角 + 金橙渐变，与底图原来那根逐项一致。
        为什么不再塞回 SVG：底图像素是死的，而 `background-size:cover` 在
        窄屏上会把图**居中裁切**（1440 屏时图向左溢出 240px），图里的竖条
        会跟着漂、HTML 文字却不漂 ⇒ 越窄越错位。放在 HTML 里则与文字恒定
        保持 4px 间距。这也是第 45 版把三行字从图里搬出来的同一条理由。

   ★ 为什么要删 SVG 里那三行字：底图上的字是像素级固定的，HTML 文字压上去
     会重影；而"动态变化"本身就要求它不是图的一部分。删掉之后底图仍是完整的
     渐变 + 点阵装饰（矢量，放大不糊）。
   ★ 右侧那枚白色小胶囊（"智能获客 · 营销增长引擎"）留在 SVG 里不动 ——
     运营没要求改它，它是品牌标识，且与左侧文字不重叠。
   ============================================================================ */
.topadcs .ad-hero {
    position: absolute; left: 0; right: 0; top: 0; bottom: 22px;
    display: flex; flex-direction: column; justify-content: center;
    box-sizing: border-box;
    padding: 0 190px 56px calc((100% - 1200px) / 2 + 12px);
    text-align: left;
    pointer-events: none;
}
/* ★ 第 47 版（No.231）：「金色的竖线」。几何与底图原来那根一一对应 ——
   标题左沿 = 内容栏左沿 + 12px，竖条从标题左沿再往左 12px 起（= 内容栏左沿，
   1920 屏下正是 x=360），宽 8、高 126、圆角 4、金橙渐变；
   文字左沿到竖条右沿正好 4px（12 - 8 = 4），与底图上的间距相同。
   `margin-top:-63px` 是高度的负一半 ⇒ 竖条与标题行垂直居中。
   窄屏（媒体查询里 24px 内距）时竖条落在 12px 处，间距仍是 4px。 */
.topadcs .ad-hero-t::before {
    content: ""; position: absolute; left: -12px; top: 50%;
    width: 8px; height: 126px; margin-top: -63px; border-radius: 4px;
    background: linear-gradient(180deg, #f59e0b 0%, #f97316 100%);
}
.topadcs .ad-hero-t {
    position: relative;
    margin: 0 0 10px; font-size: 44px; line-height: 1.15; font-weight: 700;
    color: #fff; letter-spacing: 2px; text-shadow: 0 2px 12px rgba(3,12,30,.35);
}
.topadcs .ad-hero-p {
    margin: 0 0 8px; max-width: 720px; font-size: 16px; line-height: 1.6;
    color: #c9dcff; letter-spacing: 1px;
}
.topadcs .ad-hero-note {
    margin: 0; font-size: 14px; line-height: 1.5; color: #8fb4e8; letter-spacing: 1px;
}
@media screen and (max-width:1280px){
    .topadcs .ad-hero { padding: 0 24px 44px 24px; }
    .topadcs .ad-hero-t { font-size: 30px; margin-bottom: 6px; }
    .topadcs .ad-hero-p { font-size: 14px; }
    .topadcs .ad-hero-note { font-size: 12px; }
}

.ai-page { background:#f8fafc; padding:38px 0 60px; }
.ai-page .container { width:1200px; margin:0 auto; }
.ai-page .list-h2 { font-size:24px; color:#0f172a; font-weight:600; margin:0 0 26px; padding-left:12px; border-left:4px solid #1a56db; }
.ai-page .list-h2 small { font-size:13px; color:#94a3b8; font-weight:normal; margin-left:12px; }

.ai-rank { margin-bottom:34px; }
.ai-rank-head { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; }
.ai-rank-head h2 { font-size:19px; color:#0f172a; font-weight:600; margin:0; }
.ai-rank-sub { font-size:13px; color:#94a3b8; }

.ai-grid-4 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ai-feat-card { display:block; background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:22px; text-decoration:none; transition:all .22s; }
.ai-feat-card:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(15,23,42,.10); border-color:#bfdbfe; }
.ai-feat-card .ai-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.ai-feat-card .ai-ico { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:17px; font-weight:600; flex:0 0 44px; overflow:hidden; }
.ai-feat-card .ai-ico img { width:100%; height:100%; object-fit:contain; }
.ai-feat-card h3 { font-size:17px; color:#0f172a; margin:0; font-weight:600; }
.ai-feat-card p { font-size:14px; color:#64748b; line-height:1.8; margin:0; }
.ai-feat-card .ai-tag-row { margin-top:14px; }
.ai-feat-card .ai-tag-row span { display:inline-block; padding:2px 10px; border-radius:10px; background:#fef3c7; color:#b45309; font-size:12px; }

.ai-ranks-wrap { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.ai-rank-grid { display:flex; flex-direction:column; gap:12px; }
.ai-tool-card { display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:16px 18px; text-decoration:none; transition:all .2s; }
.ai-tool-card:hover { border-color:#bfdbfe; box-shadow:0 6px 16px rgba(15,23,42,.08); }
.ai-tool-card .at-rank { font-size:20px; font-weight:700; color:#cbd5e1; width:34px; flex:0 0 34px; font-family:Impact,Arial,sans-serif; }
.ai-tool-card.rank-1 .at-rank { color:#dc2626; }
.ai-tool-card.rank-2 .at-rank { color:#ea580c; }
.ai-tool-card.rank-3 .at-rank { color:#d97706; }
.ai-tool-card .at-ico { width:40px; height:40px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; font-weight:600; flex:0 0 40px; }
.ai-tool-card .at-info { flex:1 1 auto; min-width:0; }
.ai-tool-card .at-name { font-size:15px; color:#0f172a; margin:0 0 4px; font-weight:600; }
.ai-tool-card .at-desc { font-size:13px; color:#64748b; line-height:1.6; margin:0; }
.ai-tool-card .at-arrow { color:#cbd5e1; font-size:17px; flex:0 0 auto; }
.ai-tool-card:hover .at-arrow { color:#1a56db; }

.tone-0 { background:linear-gradient(135deg,#2563eb,#1e40af); }
.tone-1 { background:linear-gradient(135deg,#7c3aed,#5b21b6); }
.tone-2 { background:linear-gradient(135deg,#0891b2,#0e7490); }
.tone-3 { background:linear-gradient(135deg,#ea580c,#c2410c); }
.tone-4 { background:linear-gradient(135deg,#16a34a,#15803d); }
.tone-5 { background:linear-gradient(135deg,#db2777,#be185d); }

@media (max-width:1200px){
    .ai-page .container { width:100%; padding:0 15px; box-sizing:border-box; }
    .ai-grid-4 { grid-template-columns:1fr 1fr; }
    .ai-ranks-wrap { grid-template-columns:1fr; }
}
@media (max-width:760px){
    .ai-grid-4 { grid-template-columns:1fr; }
}

/* 内页通栏广告位兜底：与源站 .topadcs a.fullad 一致，固定 350px 高 */
.topadcs { width:100%; overflow:hidden; text-align:center; margin:0 auto; }
.topadcs a.fullad { display:block; margin:0 auto; height:350px; background-size:cover; background-position:center top; }

/* ============================================================================
   第 40 版（2026-09-23 · 测试反馈 No.185）：AI营销页的 7 枚入口搬进广告位
   ----------------------------------------------------------------------------
   运营原话：
     「把AI营销总览、AI获客方案、AI工作手机、AI销售辅助、AI视频案例、
       AI漫剧制作、AI分析报表 7个胶囊按钮移去广告位，配色给优化。
       处理方案参照 https://www.shuangxisoft.cn/ai/    手机端实现了，但pc端没有实现」

   改前：这排 `.quick-tabs` 在下面那块**白底**的 `.ai-hero` 里（灰底深灰字），
         与页顶 350px 的深蓝广告图互不相干。

   三条要点（都不是随手写的）：
     ① `.topadcs` 加 `position:relative` 当定位上下文 —— 原来它只有
        `overflow:hidden`，没有定位祖先的话 `.ad-tabs` 的绝对定位会一路
        往上找到 `.ai-hero` / body 去，跑到页面别的角落。
     ② `.ad-tabs` 整层 `pointer-events:none`，只有每枚胶囊自己
        `pointer-events:auto`。这样 `<a class="fullad">` 那层**仍然是
        "整张广告图可点"**（改版前就是这个行为），点胶囊之间的空白处
        落到的还是广告图的链接，不会平白多出一块"点了没反应"的死区。
     ③ 配色：深蓝广告图上必须「半透明白底 + 白字」，选中态**反色**成
        纯白底 + 品牌蓝字 —— 与手机端 No.181 的既有做法一致
        （见 templates/cms/mobile/_m26_head.html 的 G9 段）。
        ★ 刻意**不复用**白底那一套配色（灰底深灰字）：那是白底上的配色，
          搬到深蓝图上就看不清了。
        ★ 第 44 版（No.204）补完：白底那一族规则**已经整族删除**（见上面
          `.ai-hero` 段末尾的注记）—— 运营原话「现在就是要处理它，删样」。
          本段这套是唯一在用的，两条并存的时代结束了。
     ④ 位置"贴底居中"是量出来的：那张 1920x350 的图上，左侧「AI 营销」
        标题到 y≈284、右侧那枚小胶囊在 x1520~1770 且到 y≈304 ——
        底部中间那一条（y≈290~330、x≈480~1440）是空白的。
   ============================================================================ */
.topadcs { position:relative; }
.topadcs .ad-tabs { position:absolute; left:0; right:0; bottom:22px;
    display:flex; justify-content:center; pointer-events:none; }
.topadcs .ad-tabs .quick-tabs { display:flex; flex-wrap:wrap;
    justify-content:center; gap:10px; padding:0 20px; max-width:1200px; }
.topadcs .ad-tabs .quick-tabs a { pointer-events:auto; display:inline-block;
    padding:9px 22px; border-radius:22px; background:rgba(255,255,255,.16);
    color:#fff; font-size:15px; text-decoration:none; transition:all .2s;
    border:1px solid rgba(127,182,240,.55); }
.topadcs .ad-tabs .quick-tabs a:hover { background:rgba(255,255,255,.30);
    color:#fff; }
.topadcs .ad-tabs .quick-tabs a.active { background:#fff; color:#1a56db;
    font-weight:600; border-color:#fff; }
@media screen and (max-width:1280px){
    .topadcs .ad-tabs { bottom:14px; }
    .topadcs .ad-tabs .quick-tabs { gap:8px; }
    .topadcs .ad-tabs .quick-tabs a { padding:7px 14px; font-size:13px; }
}
/* ★ 第 45 版（No.204）第 ② 条「配色给优化」：照 shuangxisoft.cn/ai/tools/ 的
   胶囊配色 —— 未选中＝半透明白底 + 白字 + **淡金描边**；选中＝纯白底 + 品牌蓝字
   + 金描边 + 加粗。金色（#fbbf24）那一点点描边就是"优化"的关键：深蓝图上一排
   纯白/半白胶囊会连成一条灰白带，加一道暖色边之后每一枚都各自立得住。 */
.topadcs .ad-tabs .quick-tabs a {
    border: 1px solid rgba(251,191,36,.55);
}
.topadcs .ad-tabs .quick-tabs a:hover {
    background: rgba(255,255,255,.30); color: #fff;
    border-color: #fbbf24;
}
.topadcs .ad-tabs .quick-tabs a.active {
    background: #fff; color: #1a56db; font-weight: 700;
    border-color: #fbbf24; box-shadow: 0 2px 10px rgba(3,12,30,.25);
}

/* ============================================================
   鹏为资讯 / 新闻列表 v2 —— 图片饱满、标题加深、圆角蓝色动态
   ============================================================ */
.news-list-v2 { padding:0; }
.news-list-v2 .dl_2s {
    position:relative;
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#ffffff;
    padding:18px;
    margin-bottom:18px;
    transition:all .25s ease;
    overflow:hidden;
    box-sizing:border-box;
}
.news-list-v2 .dl_2s:last-child { margin-bottom:0; }
.news-list-v2 .dl_2s:hover {
    border-color:#3b82f6;
    box-shadow:0 6px 20px rgba(59,130,246,.12);
    transform:translateY(-3px);
}
.news-list-v2 .dl_2s dt {
    width:220px;
    height:150px;
    overflow:hidden;
    border-radius:8px;
    float:left;
    margin-right:20px;
    margin-bottom:18px;
    background:#f3f4f6;
}
.news-list-v2 .dl_2s dt a { display:block; width:100%; height:100%; }
.news-list-v2 .dl_2s dt img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s ease;
}
.news-list-v2 .dl_2s:hover dt img { transform:scale(1.04); }

.news-list-v2 .dl_2s dd { overflow:hidden; }
.news-list-v2 .dl_2s dd h4 {
    font-size:18px;
    font-weight:600;
    line-height:1.5;
    margin:0 0 10px;
}
.news-list-v2 .dl_2s dd h4 a {
    color:#1a1a1a;
    text-decoration:none;
    transition:color .2s;
}
.news-list-v2 .dl_2s dd h4 a:hover { color:#2563eb; }
.news-list-v2 .dl_2s dd p {
    color:#555555;
    font-size:14px;
    line-height:1.85;
    margin:0 0 16px;
    text-align:justify;
}
.news-list-v2 .dl_2s dd em { font-style:normal; }
.news-list-v2 .dl_2s dd em a {
    display:inline-block;
    padding:8px 22px;
    border-radius:20px;
    background:linear-gradient(135deg,#1a56db,#2563eb);
    color:#ffffff;
    font-size:13px;
    text-decoration:none;
    box-shadow:0 4px 12px rgba(37,99,235,.25);
    transition:all .25s ease;
}
.news-list-v2 .dl_2s dd em a:hover {
    background:linear-gradient(135deg,#1e4ed8,#1d4ed8);
    box-shadow:0 6px 16px rgba(37,99,235,.40);
    transform:translateY(-2px);
}