/* ==========================================================================
   21ic 文章页响应式覆盖样式 (responsive.css v3)
   原则：桌面端(>1024px)完全保持原站样式，本文件在桌面下不做任何改动；
   所有响应式规则只在媒体查询内生效，避免破坏原 content-box + 浮动两栏。
   ========================================================================== */

/* ==========================================================================
   左栏推广区（项目外包块 + 下载链接）：PC端还原原站样式，移动端隐藏。
   原站这些区块由 /api/promotion、/api/dl 异步注入；本地已静态还原。
   ========================================================================== */

/* 项目外包推广块（取自原站 post_ad.css，用 .promote-block 作用域，避免污染全局 li） */
.promote-block { width: 840px; float: left; }
.promote-block .bubble_promote_holder {
  float: left; height: 120px; overflow: hidden;
  padding: 10px 20px 0 270px; position: relative; list-style: none; margin: 0;
}
.promote-block .bubble_promote_holder a:hover { text-decoration: none; }
.project_promote a:hover { color: #ff5400; }
.promote-block .bubble_promote_holder li {
  float: left; width: 250px; line-height: 22px;
  font-family: "微软雅黑", "Microsoft YaHei", sans-serif;
  font-size: 13px; border-right: 1px dashed #CDCDCD;
  padding: 0 10px; list-style: none;
  /* 重置原站 .left_textad li 泄露下来的箭头背景/固定高度/左缩进 */
  height: auto; margin-left: 0; background: none;
}
.promote-block .bubble_promote_holder li.promote_img {
  height: 100px; width: 220px; position: absolute; left: 20px; margin-top: 12px;
  border: none; padding: 0;
}
.promote-block .bubble_promote_holder li.promote_img img { width: 220px; }
.promote-block .bubble_promote_holder li.promote_logoinfo {
  width: 100% !important; margin-right: 0; border: none; padding: 0 10px;
}
.promote-block .bubble_promote_holder .promote_logoinfo img { float: left; height: 30px; }
.promote-block .promote_projectinfo img { margin-right: 2px; }
.promote-block .promote_logoinfo span { line-height: 18px; float: left; font-size: 14px; }
.promote-block .promote_projectinfo span strong { color: #ff5400; }
.promote-block .promote_name {
  font-size: 14px; display: block; float: left; line-height: 22px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 250px;
  color: #333;
}
.promote-block .promote_name span { color: #ff5400; }
.promote-block .promote_info1 { color: #666; float: left; font-size: 12px; }
.promote-block .promote_info1 strong { color: #ff5400; }
.promote-block .promote_info2 { color: #666; float: right; font-size: 12px; }

/* 桌面端：原导航保持不动；浮动导航默认隐藏（仅手机断点内显示） */
#mnav-fab,
#mnav-drawer {
  display: none;
}

/* ==========================================================================
   断点一：平板 / 窄桌面（≤1024px）
   两栏保留但改百分比；固定宽度块改流式；仅限此断点改盒模型
   ========================================================================== */
@media (max-width: 1024px) {
  /* 只在响应式断点内启用 border-box，桌面保持原 content-box */
  .wrap,
  .wrap *,
  .wrap *::before,
  .wrap *::after {
    box-sizing: border-box;
  }
  .wrap img,
  .wrap video,
  .wrap iframe,
  .wrap embed,
  .wrap object {
    max-width: 100%;
  }

  /* 外层容器流式化 */
  .wrap,
  .content2016_main {
    width: 100%;
    max-width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
  }

  /* 顶部通栏广告 */
  .topbanner {
    width: 100%;
  }
  .topbanner > ul {
    width: auto;
  }
  .topbanner .topad_right {
    display: none;
  }

  /* 左右两栏：百分比，继续并排 */
  .content-channel2019-left {
    width: 66%;
  }
  .content-channel2019-right {
    width: 32%;
    margin-left: 2%;
  }

  /* 正文内层固定宽度块 -> 流式 */
  .content-channel2019-left .page-header,
  .content-channel2019-left .introduction,
  .content-channel2019-left .newstext,
  .content-channel2019-left .statement,
  .content-channel2019-left .left_textad,
  .content-channel2019-left .left_read,
  .content-channel2019-left .left_read .read_top,
  .content-channel2019-left .left_read .left_readlist1,
  .content-channel2019-left .left_read .left_readlist2,
  .content-channel2019-left .praise2017,
  .content-channel2019-left .comments2017,
  .content-channel2019-left .comments_list,
  .content-channel2019-left .comments_list .tab,
  .content-channel2019-left .article_group_right {
    width: 100%;
    max-width: 100%;
    float: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* 分享按钮去 720px 硬定位 */
  .content-channel2019-left .page-header .bdsharebuttonbox {
    margin-left: 0;
    position: static;
  }

  /* 延伸阅读列表项自适应 */
  .content-channel2019-left .left_read .readlist {
    width: 100%;
  }
  .content-channel2019-left .readlist span.pic,
  .content-channel2019-left .left_readlist2 .readlist span.no1,
  .content-channel2019-left .left_readlist2 .readlist span.no2,
  .content-channel2019-left .left_readlist2 .readlist span.no3,
  .content-channel2019-left .readlist span.keywords,
  .content-channel2019-left .left_textad li {
    float: none;
    width: auto;
    margin-left: 0;
  }
  .content-channel2019-left .readlist span.pic img,
  .content-channel2019-left .readlist span img {
    max-width: 230px;
    height: auto;
  }

  /* 评论区 */
  .content-channel2019-left .comments2017 .comments_cont,
  .content-channel2019-left .comments2017 .comments_cont textarea {
    width: 100%;
    float: none;
  }

  /* 侧栏：所有固定 340px 块容器 + 内层 310px 列表全部流式、去浮动，竖向堆叠 */
  .content-channel2019-right,
  .content-channel2019-right .righr_list,
  .content-channel2019-right .righr_ad,
  .content-channel2019-right .intel_list,
  .content-channel2019-right .intel_top,
  .content-channel2019-right .right_cont1,
  .content-channel2019-right .right_cont2,
  .content-channel2019-right .right_cont3,
  .content-channel2019-right .right_cont4,
  .content-channel2019-right .right_textad,
  .content-channel2019-right #float {
    width: 100%;
    max-width: 100%;
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
  .content-channel2019-right .righr_list .right_cont1 ul,
  .content-channel2019-right .righr_list .right_cont2 ul,
  .content-channel2019-right .righr_list .right_cont3 ul,
  .content-channel2019-right .righr_list .right_cont4 ul,
  .content-channel2019-right .righr_list .jszz,
  .content-channel2019-right .righr_list .keywords,
  .content-channel2019-right .intel_list ul {
    width: auto;
    max-width: 100%;
    float: none;
  }
  .content-channel2019-right .righr_list .righr_listtop h3,
  .content-channel2019-right .righr_list .righr_listtop h2 {
    float: none;
    display: inline-block;
  }

  /* 页脚 */
  .footer .footer_cont,
  .footer .footer_cont .footer_search {
    width: 100%;
  }
}

/* ==========================================================================
   断点二：手机（≤640px）—— 单栏；右侧信息块全宽下沉、垂直堆叠，绝不并排
   ========================================================================== */
@media (max-width: 640px) {
  /* 根因：原站 body 强制 min-width:1200px，手机上必然可右拖；放开并禁横向滚动 */
  html,
  body {
    min-width: 0 !important;
    width: 100%;
    overflow-x: hidden;
  }
  .wrap {
    padding-left: 10px;
    padding-right: 10px;
    max-width: 100%;
  }

  /* 顶部 468px 通栏广告 iframe：隐藏，杜绝横向滚动 */
  .topbanner {
    display: none;
  }

  /* 手机端隐藏广告/推广区：项目外包块、下载链接、右栏广告位（PC端仍正常显示） */
  .left_textad,
  .promote-block,
  .dl_newtidetail,
  .dl_newtidetail2,
  .right_textad {
    display: none !important;
  }

  /* 手机端：整个顶部头部整块隐藏（外包广告横幅 + 21ic logo + 蓝色横幅广告 + 桌面导航）。
     导航改由右下角浮动汉堡承担；.main_nav 仍在 DOM 中，mnav.js 可正常读取。
     面包屑 #content_position 在 #header 之外，不受影响。 */
  #header {
    display: none !important;
  }
  .logo {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0;
  }
  .logo .logoleft {
    float: none !important;
    width: auto !important;
  }
  .logo .bigbanner,
  .logo .bigbanner .news_ad1,
  .logo .bigbanner .news_ad2,
  .logo .logoright {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
  }
  .logo .bigbanner,
  .logo .bigbanner .news_ad2 {
    display: none; /* 手机隐藏顶部大幅广告，避免占位过宽 */
  }

  /* 手机端：隐藏原桌面导航，改用浮动汉堡 + 滑出抽屉（见 mnav-*） */
  .main_nav {
    display: none !important;
  }

  /* 浮动汉堡按钮（固定悬浮在右下角，始终可点） */
  #mnav-fab {
    display: flex !important;
    position: fixed;
    right: 16px;
    bottom: 20px;
    width: 52px;
    height: 52px;
    z-index: 99998;
    border: 0;
    border-radius: 50%;
    background: #c70101;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 0;
  }
  #mnav-fab span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  #mnav-fab.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  #mnav-fab.active span:nth-child(2) {
    opacity: 0;
  }
  #mnav-fab.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* 抽屉容器 */
  #mnav-drawer {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 99999;
    visibility: hidden;
    pointer-events: none;
  }
  #mnav-drawer .mnav-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  #mnav-drawer .mnav-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 320px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 14px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #mnav-drawer .mnav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #c70101;
    color: #fff;
    font-size: 17px;
  }
  #mnav-drawer .mnav-close {
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
  }
  #mnav-drawer .mnav-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    padding: 6px 0;
  }
  #mnav-drawer .mnav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 16px;
  }
  #mnav-drawer .mnav-label {
    color: #222;
    flex: 1;
  }
  #mnav-drawer .mnav-arrow {
    color: #999;
    font-size: 22px;
    line-height: 1;
    transition: transform 0.2s ease;
    padding: 0 4px;
  }
  #mnav-drawer .mnav-item.open > .mnav-row .mnav-arrow {
    transform: rotate(90deg);
  }
  #mnav-drawer .mnav-sub {
    display: none;
    background: #f7f7f7;
    padding: 4px 0;
  }
  #mnav-drawer .mnav-item.open .mnav-sub {
    display: block;
  }
  #mnav-drawer .mnav-sub a {
    display: block;
    padding: 10px 18px 10px 30px;
    font-size: 14px;
    color: #555;
    border-bottom: 1px solid #eee;
  }
  /* 打开态 */
  #mnav-drawer.open {
    visibility: visible;
    pointer-events: auto;
  }
  #mnav-drawer.open .mnav-mask {
    opacity: 1;
  }
  #mnav-drawer.open .mnav-panel {
    transform: translateX(0);
  }
  body.mnav-open {
    overflow: hidden;
  }

  /* 主内容区：块级单列 */
  .content2016_main {
    display: block;
    width: 100%;
    float: none;
  }

  /* 左栏（正文）全宽 */
  .content-channel2019-left {
    width: 100%;
    float: none;
    display: block;
    margin: 0;
  }

  /* 右侧信息块：全宽、下沉、块级；内部子项也全部垂直堆叠 */
  .content-channel2019-right {
    width: 100%;
    max-width: 100%;
    float: none;
    display: block;
    margin: 20px 0 0 0;
  }
  /* 块容器：用与原站同级/更高特异性显式覆盖，保证竖排（> * 特异性不够会输） */
  .content-channel2019-right > *,
  .content-channel2019-right .righr_list,
  .content-channel2019-right .righr_ad,
  .content-channel2019-right .intel_list,
  .content-channel2019-right .intel_top,
  .content-channel2019-right .right_cont1,
  .content-channel2019-right .right_cont2,
  .content-channel2019-right .right_cont3,
  .content-channel2019-right .right_cont4,
  .content-channel2019-right .right_textad,
  .content-channel2019-right .viewBbs_list,
  .content-channel2019-right .changshang_item,
  .content-channel2019-right .htmlflageclass,
  .content-channel2019-right #float {
    width: 100%;
    max-width: 100%;
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
  /* 内层固定 310px 的列表/标签块，也改为自适应、去浮动 */
  .content-channel2019-right .righr_list .right_cont1 ul,
  .content-channel2019-right .righr_list .right_cont2 ul,
  .content-channel2019-right .righr_list .right_cont3 ul,
  .content-channel2019-right .righr_list .right_cont4 ul,
  .content-channel2019-right .righr_list .jszz,
  .content-channel2019-right .righr_list .keywords,
  .content-channel2019-right .intel_list ul {
    width: auto;
    max-width: 100%;
    float: none;
  }
  .content-channel2019-right .righr_list .righr_listtop h3,
  .content-channel2019-right .righr_list .righr_listtop h2 {
    float: none;
    display: inline-block;
  }
  .content-channel2019-right img,
  .content-channel2019-right iframe {
    max-width: 100%;
    height: auto;
  }

  /* 左栏内部：所有固定宽度浮动块流式堆叠 */
  .content-channel2019-left .page-header,
  .content-channel2019-left .introduction,
  .content-channel2019-left .newstext,
  .content-channel2019-left .statement,
  .content-channel2019-left .page-footer,
  .content-channel2019-left .left_textad,
  .content-channel2019-left .dl_newtidetail,
  .content-channel2019-left .left_read,
  .content-channel2019-left .praise2017,
  .content-channel2019-left .comments2017,
  .content-channel2019-left .comments_list,
  .content-channel2019-left .article_group_right {
    width: 100%;
    max-width: 100%;
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
  .content-channel2019-left .left_read .read_top,
  .content-channel2019-left .left_read .left_readlist1,
  .content-channel2019-left .left_read .left_readlist2,
  .content-channel2019-left .left_read .readlist,
  .content-channel2019-left .comments_list .tab {
    width: 100%;
    max-width: 100%;
    float: none;
  }

  /* 正文媒体不超宽 */
  .content-channel2019-left .newstext img,
  .content-channel2019-left .newstext iframe,
  .content-channel2019-left .newstext video,
  .content-channel2019-left img,
  .content-channel2019-left iframe {
    max-width: 100%;
    height: auto;
  }

  /* 内边距收窄 */
  .content-channel2019-left .page-header {
    padding: 12px 14px;
  }
  .content-channel2019-left .introduction,
  .content-channel2019-left .newstext {
    padding: 10px 14px;
  }
  /* 本站声明：左栏内全宽块、正常横排、字号/行距清晰 */
  .content-channel2019-left .statement {
    width: 100%;
    max-width: 100%;
    float: none;
    clear: both;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 22px;
    color: #888;
    word-break: break-all;
  }

  /* 延伸阅读缩略图竖排 */
  .content-channel2019-left .readlist span.pic,
  .content-channel2019-left .left_readlist1 .readlist span.pic,
  .content-channel2019-left .left_readlist2 .readlist span.no1,
  .content-channel2019-left .left_readlist2 .readlist span.no2,
  .content-channel2019-left .left_readlist2 .readlist span.no3,
  .content-channel2019-left .readlist span.keywords,
  .content-channel2019-left .left_textad li {
    float: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-left: 0;
    padding-left: 20px;
  }
  .content-channel2019-left .readlist span.pic img,
  .content-channel2019-left .readlist span img,
  .content-channel2019-left .left_readlist2 .readlist img {
    width: auto;
    max-width: 260px;
    height: auto;
  }

  /* 排版 */
  .content-channel2019-left .page-header h1 {
    font-size: 21px;
    line-height: 32px;
  }
  .content-channel2019-left .page-header .page-info {
    height: auto;
    line-height: 26px;
  }
  .content-channel2019-left .page-header .page-info div.keywords {
    width: auto;
    height: auto;
    overflow: visible;
  }
  .content-channel2019-left .newstext {
    font-size: 15px;
    line-height: 28px;
  }
  .content-channel2019-left .introduction {
    font-size: 14px;
    line-height: 26px;
  }

  /* 点赞/评论 */
  .content-channel2019-left .praise2017 .praiser {
    width: 100%;
    padding: 0 10px;
  }
  .content-channel2019-left .comments2017 .comments_cont,
  .content-channel2019-left .comments2017 .comments_cont textarea,
  .content-channel2019-left .comments2017 .comments_img {
    width: 100%;
    float: none;
  }

  /* 页脚 */
  .footer .footer_cont,
  .footer .footer_cont .footer_search {
    width: 100%;
    height: auto;
    padding: 0 12px;
  }
  /* 页脚：容器 920px + 5 个浮动 dl 固定宽度横排 -> 改网格换行，适应屏宽 */
  .footer .footer_cont {
    overflow: hidden;
  }
  .footer .footer_cont .footer_search,
  .footer .footer_cont .footer_code,
  .footer .footer_cont .footer_downmenu {
    float: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    position: static;
  }
  .footer .footer_cont .footer_downmenu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    padding: 10px;
  }
  .footer .footer_cont .footer_downmenu dl,
  .footer .footer_cont .footer_downmenu dl.reading,
  .footer .footer_cont .footer_downmenu dl.top_list_2row,
  .footer .footer_cont .footer_downmenu dl.top_list_right,
  .footer .footer_cont .footer_downmenu dl.hudong,
  .footer .footer_cont .footer_downmenu dl.resource,
  .footer .footer_cont .footer_downmenu dl.company {
    float: none;
    display: block;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0 8px 8px 0;
    border-right: 0;
  }
  .footer .footer_cont .footer_downmenu dl dd,
  .footer .footer_cont .footer_downmenu dl dd.long,
  .footer .footer_cont .footer_downmenu dl.top_list_right dd,
  .footer .footer_cont .footer_downmenu dl.company dd {
    width: auto;
    max-width: 100%;
    float: none;
  }
  .footer .footer_cont .footer_code ul {
    width: 50%;
  }
  .footer .footer_copyright {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ---------- 超小屏（≤360px）字号微调 ---------- */
@media (max-width: 360px) {
  .content-channel2019-left .page-header h1 {
    font-size: 19px;
    line-height: 29px;
  }
  .content-channel2019-left .newstext {
    font-size: 14px;
    line-height: 26px;
  }
}