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

/* ---- 顶部导航 ---- */
.xrnav { background:#fff; border-bottom:1px solid #eef0f4; position:sticky; top:0; z-index:20; }
.xrnav_in { width:1100px; margin:0 auto; height:64px; display:flex; align-items:center; }
.xrnav_logo { display:flex; align-items:center; font-size:19px; font-weight:bold; color:#2b3347; }
.xrnav_logo img { height:32px; border-radius:7px; margin-right:9px; }
.xrnav_ul { margin-left:44px; display:flex; align-items:center; gap:30px; }
.xrnav_ul a { font-size:15px; color:#55596b; }
.xrnav_ul a:hover { color:#FF597F; }
.xrnav_ul a._on { color:#FF597F; font-weight:bold; }
.xrnav_btn { margin-left:auto; background:linear-gradient(90deg,#FF597F,#ff7d9b); color:#fff; font-size:14px; padding:9px 22px; border-radius:22px; }
.xrnav_btn:hover { color:#fff; opacity:.9; }

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

/* ---- 列表页页头 ---- */
.hp_hero { background:linear-gradient(135deg,#c1ddff 0%,#eaf2ff 55%,#ffe9ef 100%); padding:46px 0 40px; }
.hp_hero_in { width:1100px; margin:0 auto; }
.hp_hero h1 { font-size:32px; font-weight:bold; color:#2b3347; margin-bottom:12px; }
.hp_hero p { font-size:15px; color:#5d6273; line-height:1.8; max-width:760px; }
.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(43,51,71,.10); }
.hp_search input { flex:1; border:0; outline:none; height:50px; padding:0 22px; font-size:14px; font-family:inherit; color:#2f2f30; background:transparent; }
.hp_search span { width:86px; height:50px; line-height:50px; text-align:center; background:linear-gradient(90deg,#FF597F,#ff7d9b); color:#fff; font-size:15px; cursor:pointer; }

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

/* ---- 分组标题 ---- */
.hp_gtitle { font-size:20px; font-weight:bold; color:#2b3347; margin:28px 0 14px; padding-left:12px; border-left:4px solid #FF597F; }
.hp_gtitle small { font-size:13px; font-weight:normal; color:#a8acba; margin-left:10px; }
/* ---- 问答折叠卡 ---- */
.hp_card { border:1px solid #eef0f4; border-radius:12px; margin-bottom:11px; background:#fff; overflow:hidden; transition:box-shadow .2s,border-color .2s; }
.hp_card:hover { box-shadow:0 4px 18px rgba(43,51,71,.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:#2b3347; position:relative; cursor:pointer; font-family:inherit; line-height:1.6; }
.hp_q:hover { color:#FF597F; }
.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:#FF597F; }
.hp_card._open .hp_q:after { transform:translateY(-30%) rotate(-135deg); border-color:#FF597F; }
.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_a p { margin:13px 0 0; }

/* 列表页元信息：发布时间 / 访问量 */
.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:#FF597F; font-size:13px; font-weight:600; }
.hp_more:hover { color:#e8446b; text-decoration:underline; }
.hp_more:after { content:" ›"; font-size:15px; }
.hp_kw { font-size:12px; color:#bfc3ce; margin-top:9px; }
.hp_empty { display:none; padding:44px 0; text-align:center; color:#9a9ead; }

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

/* ===== 文章页 ===== */
.art_hero { background:#2b3347; color:#fff; padding:34px 0 30px; }
.art_hero_in { width:1100px; margin:0 auto; }
.art_hero .kicker { display:inline-block; font-size:12px; background:rgba(255,255,255,.14); 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:#9aa0b1; }
.art_hero .meta .sp { display:inline-block; width:1px; height:11px; background:#5b6274; margin:0 12px; vertical-align:middle; }
.art_hero .crumbs { width:auto; color:#8d93a4; padding:0 0 6px; }
.art_hero .crumbs a { color:#8d93a4; }
.art_hero .crumbs a:hover { color:#fff; }
.art_hero .crumbs .cur { color:#8d93a4; }

.art_main { width:1100px; 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 #eef0f4; border-radius:14px; padding:34px 42px 30px; }
.art_side { width:260px; flex-shrink:0; }
.art_side_box { background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:17px 19px; margin-bottom:16px; }
.art_side_box .t { font-size:15px; font-weight:bold; color:#2b3347; margin-bottom:11px; padding-left:10px; border-left:3px solid #FF597F; }
.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:#FF597F; }
.art_toc._sticky { position:sticky; top:80px; }

/* 正文排版 */
.art_lead { font-size:15px; color:#4a4f60; line-height:2; background:#f8f9fc; border-left:3px solid #FF597F; border-radius:0 8px 8px 0; padding:15px 19px; margin-bottom:26px; }
.art_card h2 { font-size:20px; color:#22283a; margin:34px 0 12px; padding-bottom:10px; border-bottom:1px solid #f2f4f8; }
.art_card h3 { font-size:16px; color:#2b3347; 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:#22283a; }
.art_card code { background:#f4f6f9; border-radius:4px; padding:2px 6px; font-family:Consolas,Monaco,monospace; font-size:13px; color:#d6336c; word-break:break-all; }
.art_card a.inl { color:#FF597F; }
.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:#2b3347; font-weight:600; }
.art_tb tr:hover td { background:#fafbfd; }

/* 图 */
.art_fig { margin:24px 0; text-align:center; }
.art_fig img { border:1px solid #eef0f4; 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_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._w { background:#fff8ef; border:1px solid #f7e2c3; color:#8a6023; }
.art_tip._ok { background:#f1faf3; border:1px solid #cfebd6; color:#2f6b41; }
.art_tip._r { background:#fff5f7; border:1px solid #ffd6e0; color:#a33f5c; }

/* 步骤 */
.art_step { counter-reset:st; margin:18px 0; }
.art_step_i { position:relative; padding:0 0 17px 44px; border-left:2px solid #eef0f4; margin-left:13px; }
.art_step_i:last-child { border-left-color:transparent; padding-bottom:0; }
.art_step_i:before { counter-increment:st; content:counter(st); position:absolute; left:-14px; top:0; width:26px; height:26px; border-radius:50%; background:#FF597F; color:#fff; font-size:13px; text-align:center; line-height:26px; }
.art_step_i .h { font-size:15px; font-weight:600; color:#2b3347; margin:2px 0 4px; }
.art_step_i p { margin:4px 0; font-size:14px; }

/* 底部 */
.art_foot { margin-top:38px; padding-top:22px; border-top:1px solid #f2f4f8; }
.art_foot .t { font-size:15px; font-weight:bold; color:#2b3347; margin-bottom:12px; }
.art_rel { display:inline-block; font-size:13px; color:#4a4f60; background:#f7f9fc; border:1px solid #e9ecf2; border-radius:18px; padding:7px 16px; margin:0 8px 9px 0; }
.art_rel:hover { color:#FF597F; border-color:#ffc2d1; background:#fff6f8; }
.art_back { display:inline-block; margin-top:20px; font-size:14px; color:#FF597F; }
.art_back:hover { text-decoration:underline; }
.art_src { margin-top:26px; font-size:12px; color:#b0b4c1; line-height:1.95; }

/* ---- 页脚 ---- */
.cmfoot { background:#2b3347; color:#8a8f9c; padding:34px 20px 40px; margin-top:44px; text-align:center; }
.cmfoot_ul2 { display:flex; justify-content:center; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.cmfoot_li2 { font-size:12px; padding:0 9px; border-left:1px solid #4a5164; line-height:12px; }
.cmfoot_li2:first-child { border-left:0; }
.cmfoot_a3 { color:#b1b3b9; font-size:12px; }
.cmfoot_a3:hover { color:#fff; }
.cmfoot p { font-size:12px; line-height:2.1; }

@media screen and (max-width:1140px) {
  .xrnav_in, .hp_hero_in, .hp_wrap, .crumbs, .art_hero_in, .art_main { width:auto; padding-left:18px; padding-right:18px; }
  .art_main { flex-direction:column; }
  .art_side { width:100%; }
  .art_card { padding:24px 20px 26px; }
  .xrnav_ul { gap:18px; margin-left:20px; }
  .art_toc._sticky { position:static; }
}