@charset "utf-8";
/* ===== 2345看图王 常见问题（列表页 + 文章页共用） ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; font-size:14px; color:#2f333d; background:#fff; }
a { text-decoration:none; color:#2f333d; }
ul, li { list-style:none; }
img { border:0; vertical-align:middle; max-width:100%; }

/* ---- 顶部导航 ---- */
.pnav { background:#fff; border-bottom:1px solid #eef0f5; position:sticky; top:0; z-index:30; }
.pnav_in { width:1180px; margin:0 auto; height:62px; display:flex; align-items:center; }
.pnav_logo img { height:32px; width:167px; }
.pnav_ul { margin-left:24px; display:flex; align-items:center; gap:19px; font-size:13px; white-space:nowrap; }
.pnav_ul a { color:#55596b; }
.pnav_ul a:hover { color:#7a6bff; }
.pnav_ul a._on { color:#7a6bff; font-weight:bold; }
.pnav_btn { margin-left:auto; background:linear-gradient(90deg,rgba(122,107,255,.95),rgba(49,196,255,.9)); color:#fff; font-size:14px; padding:9px 22px; border-radius:999px; box-shadow:0 8px 24px rgba(64,118,255,.3); }
.pnav_btn:hover { color:#fff; filter:brightness(1.06); }

/* ---- 面包屑 ---- */
.crumbs { font-size:13px; width:1180px; padding:14px 0 2px; margin:0 auto; color:#9a9ead; }
.crumbs a { color:#9a9ead; }
.crumbs a:hover { color:#7a6bff; }
.crumbs .sep { padding:0 7px; color:#d0d3dc; }
.crumbs .cur { color:#6f7484; }

/* ---- 列表页页头 ---- */
.hp_hero { background:#e0edfc url(https://pic.2345.cc/_nuxt/img/top.99d72ac.png) top/1920px auto no-repeat; padding:44px 0 40px; }
.hp_hero_in { width:1180px; margin:0 auto; }
.hp_hero h1 { font-size:34px; font-weight:bold; color:#2f333d; margin-bottom:12px; }
.hp_hero p { font-size:15px; color:#5d6273; line-height:1.85; max-width:800px; }
.hp_search { margin-top:24px; display:flex; width:580px; max-width:100%; background:#fff; border-radius:26px; overflow:hidden; box-shadow:0 6px 20px rgba(53,75,120,.12); }
.hp_search input { flex:1; border:0; outline:none; height:50px; padding:0 22px; font-size:14px; font-family:inherit; color:#2f333d; background:transparent; }
.hp_search span { width:86px; height:50px; line-height:50px; text-align:center; background:linear-gradient(90deg,#7a6bff,#31c4ff); color:#fff; font-size:15px; cursor:pointer; }

/* ---- 分类胶囊 ---- */
.hp_wrap { width:1180px; margin:0 auto; }
.hp_pills { padding:26px 0 4px; }
.hp_pill { display:inline-block; font-size:13px; color:#55596b; border:1px solid #e7e7ef; border-radius:20px; padding:7px 18px; margin:0 9px 10px 0; background:#fff; }
.hp_pill:hover { color:#7a6bff; border-color:#c9c2ff; background:#f6f5ff; }

/* ---- 分组标题 ---- */
.hp_gtitle { font-size:20px; font-weight:bold; color:#2f333d; margin:28px 0 14px; padding-left:12px; border-left:4px solid #7a6bff; }
.hp_gtitle small { font-size:13px; font-weight:normal; color:#a8acba; margin-left:10px; }

/* ---- 问答折叠卡 ---- */
.hp_card { border:1px solid #edf0f5; border-radius:12px; margin-bottom:11px; background:#fff; overflow:hidden; transition:box-shadow .2s,border-color .2s; }
.hp_card:hover { box-shadow:0 5px 18px rgba(53,75,120,.08); border-color:#e2e6ee; }
.hp_q { width:100%; text-align:left; background:none; border:0; padding:17px 52px 17px 20px; font-size:15px; font-weight:600; color:#1f2633; position:relative; cursor:pointer; font-family:inherit; line-height:1.6; }
.hp_q:hover { color:#7a6bff; }
.hp_q:after { content:""; position:absolute; right:23px; top:50%; width:8px; height:8px; border-right:2px solid #b0b4c1; border-bottom:2px solid #b0b4c1; transform:translateY(-70%) rotate(45deg); transition:transform .25s; }
.hp_card._open .hp_q { color:#7a6bff; }
.hp_card._open .hp_q:after { transform:translateY(-30%) rotate(-135deg); border-color:#7a6bff; }
.hp_a { display:none; padding:0 20px 17px; font-size:14px; color:#5d6273; line-height:1.9; border-top:1px solid #f4f6f9; }
.hp_card._open .hp_a { display:block; }

/* 摘要 + 缩略图两栏 */
.hp_abox { display:flex; gap:20px; align-items:flex-start; margin-top:13px; }
.hp_atext { flex:1; min-width:0; }
.hp_atext p { margin:0; }
.hp_athumb { flex:0 0 208px; width:208px; display:block; text-align:center; }
.hp_athumb img { width:100%; height:118px; object-fit:cover; border:1px solid #edf0f5; border-radius:9px; background:#fafbfd; }
.hp_athumb span { display:block; font-size:12px; color:#a8acba; margin-top:7px; line-height:1.6; }
.hp_athumb:hover img { border-color:#c9c2ff; }
.hp_athumb:hover span { color:#7a6bff; }

/* 列表页元信息：发布时间 / 访问量 */
.hp_meta { display:block; font-size:12px; color:#a8acba; margin-top:12px; }
.hp_meta .sp { display:inline-block; width:1px; height:10px; background:#dcdfe7; margin:0 10px; vertical-align:middle; }
.hp_more { display:inline-block; margin-top:11px; color:#7a6bff; font-size:13px; font-weight:600; }
.hp_more:hover { color:#5a49f5; text-decoration:underline; }
.hp_more:after { content:" ›"; font-size:15px; }
.hp_kw { font-size:12px; color:#bfc3ce; margin-top:11px; }
.hp_empty { display:none; padding:44px 0; text-align:center; color:#9a9ead; }

.hp_note { background:#f8f9fc; border:1px solid #edf0f5; border-radius:12px; padding:18px 20px; margin:30px 0 44px; font-size:13px; color:#6f7484; line-height:1.95; }
.hp_note b { color:#2f333d; }

/* ===== 文章页 ===== */
.art_hero { background:linear-gradient(120deg,#2b2f6b 0%,#3c4a9e 55%,#2f6ea8 100%); color:#fff; padding:34px 0 30px; }
.art_hero_in { width:1180px; margin:0 auto; }
.art_hero .kicker { display:inline-block; font-size:12px; background:hsla(0,0%,100%,.16); border-radius:12px; padding:4px 13px; margin-bottom:13px; }
.art_hero h1 { font-size:27px; line-height:1.5; font-weight:bold; }
.art_hero .meta { margin-top:15px; font-size:13px; color:#b7bde0; }
.art_hero .meta .sp { display:inline-block; width:1px; height:11px; background:#6f77ab; margin:0 12px; vertical-align:middle; }
.art_hero .crumbs { width:auto; color:#a6accf; padding:0 0 6px; }
.art_hero .crumbs a { color:#a6accf; }
.art_hero .crumbs a:hover { color:#fff; }
.art_hero .crumbs .cur { color:#a6accf; }
.art_hero .crumbs .sep { color:#7b82ad; }

.art_main { width:1180px; margin:0 auto; padding:26px 0 10px; display:flex; gap:26px; align-items:flex-start; }
.art_card { flex:1; min-width:0; background:#fff; border:1px solid #edf0f5; border-radius:14px; padding:34px 42px 30px; }
.art_side { width:264px; flex-shrink:0; }
.art_side_box { background:#fff; border:1px solid #edf0f5; border-radius:14px; padding:17px 19px; margin-bottom:16px; }
.art_side_box .t { font-size:15px; font-weight:bold; color:#2f333d; margin-bottom:11px; padding-left:10px; border-left:3px solid #7a6bff; }
.art_side_box a { display:block; font-size:13px; color:#5d6273; line-height:1.6; padding:8px 0; border-bottom:1px dashed #f0f2f6; }
.art_side_box a:last-child { border-bottom:0; }
.art_side_box a:hover { color:#7a6bff; }
.art_toc._sticky { position:sticky; top:78px; }

/* 正文排版 */
.art_lead { font-size:15px; color:#4a4f60; line-height:2; background:#f7f8fd; border-left:3px solid #7a6bff; border-radius:0 8px 8px 0; padding:15px 19px; margin-bottom:26px; }
.art_card h2 { font-size:20px; color:#1f2633; margin:34px 0 12px; padding-bottom:10px; border-bottom:1px solid #f2f4f8; }
.art_card h3 { font-size:16px; color:#2f333d; margin:22px 0 8px; }
.art_card p { font-size:15px; color:#4a4f60; line-height:2; margin:12px 0; }
.art_card ul, .art_card ol { margin:12px 0 12px 6px; }
.art_card li { font-size:15px; color:#4a4f60; line-height:1.95; margin:7px 0 7px 20px; list-style:disc; }
.art_card ol li { list-style:decimal; }
.art_card strong { color:#1f2633; }
.art_card code { background:#f4f6f9; border-radius:4px; padding:2px 6px; font-family:Consolas,Monaco,monospace; font-size:13px; color:#6f4ae0; word-break:break-all; }
.art_card a.inl { color:#7a6bff; }
.art_card a.inl:hover { text-decoration:underline; }

/* 表格 */
.art_tb { width:100%; border-collapse:collapse; margin:16px 0; font-size:14px; }
.art_tb th, .art_tb td { border:1px solid #e9ecf2; padding:11px 13px; text-align:left; line-height:1.75; color:#4a4f60; vertical-align:top; }
.art_tb th { background:#f7f9fc; color:#2f333d; font-weight:600; }
.art_tb tr:hover td { background:#fafbfd; }

/* 图 */
.art_fig { margin:24px 0; text-align:center; }
.art_fig img { border:1px solid #edf0f5; border-radius:10px; background:#fafbfd; padding:10px; }
.art_fig figcaption { font-size:13px; color:#a8acba; margin-top:10px; line-height:1.7; }
.art_fig svg { max-width:100%; height:auto; }
.art_figrow { display:flex; gap:16px; margin:24px 0; }
.art_figrow figure { flex:1; margin:0; text-align:center; }
.art_figrow img { width:100%; border:1px solid #edf0f5; border-radius:10px; background:#fafbfd; }
.art_figrow figcaption { font-size:12px; color:#a8acba; margin-top:8px; line-height:1.6; }

/* 提示块 */
.art_tip { border-radius:10px; padding:15px 19px; margin:18px 0; font-size:14px; line-height:1.95; }
.art_tip b { display:block; margin-bottom:4px; }
.art_tip._i { background:#f0f6ff; border:1px solid #d6e6fb; color:#3a5c86; }
.art_tip._ok { background:#f1fbf5; border:1px solid #d3f0de; color:#2f6b47; }
.art_tip._w { background:#fff8ed; border:1px solid #fbe6c8; color:#8a5f22; }
.art_tip._n { background:#fdf3f5; border:1px solid #f8dbe2; color:#8c3a4e; }
.art_tip a { color:inherit; text-decoration:underline; }

/* 步骤条 */
.art_step { counter-reset:st; margin:18px 0; }
.art_step > div { position:relative; padding:12px 16px 12px 52px; border:1px solid #edf0f5; border-radius:10px; margin-bottom:10px; font-size:14px; color:#4a4f60; line-height:1.9; background:#fff; }
.art_step > div:before { counter-increment:st; content:counter(st); position:absolute; left:15px; top:13px; width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#7a6bff,#31c4ff); color:#fff; font-size:13px; font-weight:bold; text-align:center; line-height:24px; }
.art_step b { color:#1f2633; }

/* 文末 */
.art_foot { margin-top:36px; border-top:1px solid #f2f4f8; padding-top:20px; }
.art_foot .t { font-size:16px; font-weight:bold; color:#2f333d; margin-bottom:12px; }
.art_rel { display:inline-block; font-size:13px; color:#55596b; background:#f7f8fd; border:1px solid #eceafe; border-radius:18px; padding:7px 15px; margin:0 9px 9px 0; }
.art_rel:hover { color:#7a6bff; border-color:#c9c2ff; }
.art_back { display:inline-block; margin-top:18px; font-size:14px; color:#7a6bff; }
.art_back:hover { text-decoration:underline; }
.art_src { margin-top:20px; padding-top:15px; border-top:1px dashed #eef0f5; font-size:12px; color:#a8acba; line-height:1.9; }

/* ===== 页脚 ===== */
.cmfoot { margin-top:40px; background:#f7f8fa; border-top:1px solid #eef0f5; padding:26px 0 30px; text-align:center; }
.cmfoot_ul2 { margin-bottom:12px; }
.cmfoot_ul2 li { display:inline-block; margin:0 12px; }
.cmfoot_ul2 a { font-size:13px; color:#6f7484; }
.cmfoot_ul2 a:hover { color:#7a6bff; }
.cmfoot p { font-size:12px; color:#a0a4ad; line-height:2; }

@media (max-width:1220px) {
  .pnav_in, .crumbs, .hp_hero_in, .hp_wrap, .art_hero_in, .art_main { width:100%; padding-left:16px; padding-right:16px; }
  .art_main { flex-direction:column; }
  .art_side { width:100%; }
  .art_card { padding:22px 18px; }
  .hp_abox { flex-direction:column; }
  .hp_athumb { width:100%; flex-basis:auto; }
}