@charset "utf-8";
/* ==========================================================================
   ui-enhance.css —— 前台界面美化增强（纯叠加样式，不改任何 HTML / 后台代码）
   加载顺序：放在 main.css / bootstrap.css 之后，用于覆盖与补足。
   配色沿用站点既有品牌色：主蓝 #006cb7、点缀绿 #7CBB00、页脚深蓝 #001f3e。
   为保证老浏览器兼容，未使用 CSS 变量，全部写字面值。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 基础排版：字体、行高、字号节奏
   -------------------------------------------------------------------------- */
body {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.75;
    color: #374151;
    background-color: #f5f7fa;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.4;
}

a {
    color: #006cb7;
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

a:hover,
a:focus {
    color: #0d84d8;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

/* 统一圆角与过渡，避免各处生硬切边 */
img,
.btn,
.form-control,
.pager a {
    transition: all .25s ease;
}

/* --------------------------------------------------------------------------
   2. 布局：修复 .containert（模板笔误，原生 CSS 里没有任何定义，
      导致副页内容区没有最大宽度与左右留白，直接铺满整屏）
   -------------------------------------------------------------------------- */
.containert {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    max-width: 1200px;
    width: 100%;
}

.divneirong {
    padding-top: 24px;
    padding-bottom: 48px;
}

/* 让列表/详情内容区有统一的浅色卡片底 */
.product_1,
.product_2,
.product_3,
.product {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    padding: 20px 24px;
}

.box-margin-top {
    margin-top: 16px;
}

/* --------------------------------------------------------------------------
   3. 顶部区：Logo + 导航
   -------------------------------------------------------------------------- */
.header {
    background: #0b1220;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
    position: relative;
    z-index: 20;
}

#hdc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
    padding-top: 6px;
    padding-bottom: 6px;
}

.logo {
    padding: 10px 0;
    display: flex;
    align-items: center;
}

/* 模板里 logo 容器写成了 col-md-88（无效类），这里显式给宽度 */
.col-md-88 {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    max-width: 260px;
}

.logo img,
.logo a img {
    max-height: 52px;
    width: auto;
    display: block;
}

.logo a {
    display: inline-block;
    line-height: 0;
}

/* 导航容器：模板 col-md-88 无效导致导航换行占满整行，这里让它靠右自适应。
   注意必须精确指向 TopNav 生成的 <div id="Nav" runat="server">，不能写成 #hdc > div，
   否则会把 .logo 也一起推到右边。
   Web.Config 是 clientIDMode="AutoID"，服务端控件渲染出来是 ctl00_TopNav_Nav，
   所以这里用属性后缀匹配而不是 #Nav。 */
#hdc > [id$="Nav"] {
    margin-left: auto;
}

.navbar {
    border: 0;
    background: transparent;
    min-height: 44px;
}

.navbar-default {
    border: 0;
    background: transparent;
    box-shadow: none;
}

#nav.navbar-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#nav.navbar-nav > li {
    position: relative;
}

#nav.navbar-nav > li > a {
    display: block;
    padding: 12px 16px;
    font-size: 15px;
    color: #e5e7eb;
    letter-spacing: .3px;
    border-radius: 6px;
    white-space: nowrap;
}

#nav.navbar-nav > li > a:hover,
#nav.navbar-nav > li > a:focus {
    color: #fff;
    background: rgba(255, 255, 255, .10);
}

/* 当前页高亮：底部渐变指示条 */
#nav.navbar-nav > li > a:active,
#nav.navbar-nav > li.active > a {
    color: #fff;
    background: rgba(0, 108, 183, .55);
}

/* 二级菜单 */
#nav.navbar-nav li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 168px;
    padding: 6px 0;
    margin: 0;
    list-style: none;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
    z-index: 1000;
}

#nav.navbar-nav li:hover > ul {
    display: block;
}

#nav.navbar-nav li ul li a {
    display: block;
    padding: 8px 18px;
    color: #374151;
    font-size: 14px;
    white-space: nowrap;
}

#nav.navbar-nav li ul li a:hover {
    color: #006cb7;
    background: #f0f6fc;
}

.navbar-brand.visible-xs {
    color: #fff;
    font-size: 16px;
}

/* 顶部是深色底，Bootstrap 默认的灰色汉堡按钮几乎看不见，这里改成白色高对比 */
.navbar-default .navbar-toggle {
    border-color: rgba(255, 255, 255, .35);
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: rgba(255, 255, 255, .12);
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

/* --------------------------------------------------------------------------
   4. 横幅 Banner
   -------------------------------------------------------------------------- */
.divbannerimg {
    overflow: hidden;
    border-radius: 0 0 10px 10px;
}

.divbannerimg img {
    display: block;
    width: 100%;
}

/* #AD / #Banner 是服务端控件，同样带前缀，用后缀匹配 */
[id$="AD"],
[id$="Banner"] {
    line-height: 0;
}

/* --------------------------------------------------------------------------
   5. 区块大标题：统一成「标题 + 短横线」的现代样式
   -------------------------------------------------------------------------- */
.ThisCompanyName-section-top,
.ThisCompanyName-section-top2 {
    position: relative;
    height: auto;
    line-height: 1.4;
    padding: 36px 0 12px;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #1f2937;
}

.ThisCompanyName-section-top2 {
    color: #fff;
}

.ThisCompanyName-bottom-border {
    width: 56px;
    height: 3px;
    margin: 10px auto 24px;
    background: #006cb7;
    border-radius: 3px;
    background-image: none;
}

@media (max-width: 767px) {
    .ThisCompanyName-section-top,
    .ThisCompanyName-section-top2 {
        font-size: 22px;
        padding: 24px 0 8px;
    }
}

/* 副页栏目标题 */
.divtitlename {
    height: auto;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

.divtitlename a,
.divtitlename p {
    padding: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #006cb7;
    border-bottom: 2px solid #006cb7;
    display: inline-block;
}

.title8,
.title18 {
    height: auto;
    min-height: 34px;
    margin-top: 0;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.title8 span.more,
.title18 span.more {
    float: right;
    height: auto;
    line-height: 1.75;
}

/* --------------------------------------------------------------------------
   6. 列表：新闻 / 产品 / 下载 / 招聘
   -------------------------------------------------------------------------- */
.product_3 ul,
.product_1 ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.product_3 ul li,
.product_1 ul li {
    padding: 10px 4px;
    border-bottom: 1px solid #f0f2f5;
}

.product_3 ul li:last-child,
.product_1 ul li:last-child {
    border-bottom: 0;
}

.product_3 ul li:hover,
.product_1 ul li:hover {
    background: #f8fafc;
    border-radius: 6px;
}

/* 列表里的日期右对齐且不抢眼 */
.product_3 .date,
.product_1 .date,
.date {
    color: #9ca3af;
    font-size: 13px;
}

.pull-right {
    float: right;
}

/* 列表项标题悬停轻微右移，增强可点击感 */
.product_3 ul li a,
.product_1 ul li a {
    display: inline-block;
}

.product_3 ul li:hover a,
.product_1 ul li:hover a {
    transform: translateX(2px);
}

/* 相册缩略图卡片 */
.img-wrap {
    margin-bottom: 18px;
}

.img-wrap img {
    border: 0;
    border-radius: 8px;
    background: #f3f4f6;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}

.img-wrap:hover img {
    border: 0;
    box-shadow: 0 8px 22px rgba(0, 108, 183, .22);
    transform: translateY(-3px);
}

.img-wrap a {
    display: block;
    overflow: hidden;
    border-radius: 8px;
}

/* --------------------------------------------------------------------------
   7. 价格试算 / 会员登录等卡片
   -------------------------------------------------------------------------- */
.pricing-table {
    margin-bottom: 20px;
}

.pricing-table .inner-box {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    transition: box-shadow .25s ease, transform .25s ease;
}

.pricing-table .inner-box:hover {
    box-shadow: 0 10px 28px rgba(16, 24, 40, .12);
    transform: translateY(-2px);
}

.pricing-table .table-header {
    padding: 14px 18px;
    background: linear-gradient(180deg, #0d84d8 0%, #006cb7 100%);
}

.pricing-table .table-header h3,
.pricing-table .table-header .price {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}

.pricing-table .table-contents,
.pricing-table .divtable-content {
    padding: 18px;
}

.pricing-table .table-footer {
    padding: 0 18px 18px;
}

/* --------------------------------------------------------------------------
   8. 按钮
   -------------------------------------------------------------------------- */
.theme-btn,
.btn-style-three,
.rounded-btn,
.trackingbting {
    display: inline-block;
    padding: 9px 26px;
    font-size: 15px;
    color: #fff;
    text-align: center;
    border: 0;
    border-radius: 24px;
    background: #006cb7;
    background-image: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 108, 183, .28);
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.theme-btn:hover,
.btn-style-three:hover,
.rounded-btn:hover,
.trackingbting:hover {
    color: #fff;
    background-color: #0d84d8;
    box-shadow: 0 6px 16px rgba(0, 108, 183, .34);
    transform: translateY(-1px);
}

.theme-btn:active,
.btn-style-three:active,
.rounded-btn:active,
.trackingbting:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 108, 183, .28);
}

/* --------------------------------------------------------------------------
   9. 表单控件
   -------------------------------------------------------------------------- */
.form-control,
.inputlogin,
.trackingcontrol {
    display: block;
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
    background-color: #fff;
    border: 1px solid #d7dce3;
    border-radius: 6px;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus,
.inputlogin:focus,
.trackingcontrol:focus {
    border-color: #006cb7;
    box-shadow: 0 0 0 3px rgba(0, 108, 183, .14);
    outline: 0;
}

.trackingcontrol {
    min-height: 120px;
    border-radius: 8px;
    resize: vertical;
}

.control-label {
    font-weight: 500;
    color: #4b5563;
}

/* --------------------------------------------------------------------------
   10. 分页（AspNetPager）
   -------------------------------------------------------------------------- */
.pager {
    height: auto;
    line-height: normal;
    margin: 22px 0 6px;
    padding: 0;
    font-family: inherit;
    clear: both;
}

.pager a,
.pager span,
.pager font {
    display: inline-block;
    min-width: 32px;
    margin: 0 3px;
    padding: 6px 12px;
    font-size: 14px;
    color: #4b5563;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e0e4ea;
    border-radius: 18px;
    transition: all .2s ease;
}

.pager a:hover {
    color: #fff;
    background: #006cb7;
    border-color: #006cb7;
}

/* 当前页：AspNetPager 对当前页码加粗，据此判定，避免误伤「上一页/下一页」等普通项 */
.pager span[style*="bold"],
.pager font[style*="bold"],
.pager .current {
    color: #fff;
    background: #006cb7;
    border-color: #006cb7;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   11. 详情页正文
   -------------------------------------------------------------------------- */
.first-line-indent {
    text-indent: 2em;
    line-height: 1.9;
    color: #4b5563;
}

.dashed-line {
    border-bottom: 1px dashed #e5e7eb;
    margin: 14px 0;
}

.comment_reply {
    color: #006cb7;
    background: #f0f6fc;
    border-left: 3px solid #006cb7;
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
}

.capability-region {
    display: block;
}

/* 招聘列表表格 */
table {
    border-collapse: collapse;
}

table td,
table th {
    padding: 8px 10px;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   12. 首页 tab 卡片（公司动态 / 公司公告 / 行业动态）
   —— 原样式的问题：
      1) .share .tab > div 写死 width:25%，但只有三个标签，右侧永远空出一格；
      2) 列表用 1px dashed #ddd 虚线分隔，行高只有 25px，六行挤在一起；
      3) 每行左侧是 article_arrow.gif（9px 位图），与文字基线错位、放大后发虚；
      4) 日期是 .date.pull-right 右浮动，行高由内容撑开，和标题不在同一水平线；
      5) 「更多」是 ul 里的一个 span（结构不合法），同时 float:right 与 width:100%，
         被压成底部中间很小的一行，既不像按钮也不像链接。
   -------------------------------------------------------------------------- */

/* 卡片外框 */
.share {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
}

/* 标签栏：三个标签平分，激活项用品牌色下划线压住分隔线 */
.share .tab {
    display: -webkit-flex;
    display: flex;
    border-bottom: 1px solid #eef1f5;
    background: #fbfcfd;
}

.share .tab > div {
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    width: auto;
    margin-bottom: -1px;
    padding: 14px 8px;
    text-align: center;
    line-height: 1.5;
    font-size: 15px;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    -webkit-transition: color .2s ease, background-color .2s ease, border-color .2s ease;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
    white-space: nowrap;
    overflow: visible;
}

.share .tab > div:hover {
    color: #006cb7;
    background: #f4f9fd;
}

.share .tab > div.active {
    color: #006cb7;
    font-weight: 600;
    background: #fff;
    border-bottom-color: #006cb7;
}

/* 卡片主体：左右内边距归零，让每一行的悬停底色能铺满整行 */
.share .card {
    padding: 0;
}

/* ---------------- 新闻列表 ---------------- */
.share .product_33 {
    border-top: 0;
}

.share .product_33 ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 行：flex 布局，标题吃掉剩余宽度、日期固定右侧，两者垂直居中。
   注意 text-align 必须显式写 left：外层 .section / .ThisCompanyName-what
   设了 text-align:center，会一路继承到 a 上，把标题推到整行中间。 */
.share .product_33 ul li {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin: 0;
    padding: 0;
    min-height: 48px;
    border-bottom: 1px solid #f2f5f9;
    line-height: 1.6;
    text-align: left;
    -webkit-transition: background-color .2s ease;
    transition: background-color .2s ease;
}

.share .product_33 ul li:first-child {
    margin-top: 0;
}

.share .product_33 ul li:last-of-type {
    border-bottom: 0;
}

.share .product_33 ul li:hover {
    background: #f6fafd;
}

/* 左侧文字区：占满剩余宽度，超长标题单行省略 */
.share .product_33 ul li > span:first-child {
    position: relative;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    padding: 13px 10px 13px 34px;
    overflow: hidden;
}

/* 隐藏 9px 位图箭头 */
.share .product_33 ul li > span:first-child > img {
    display: none;
}

/* 改用 CSS 绘制的细箭头，不模糊，且能随悬停变色 */
.share .product_33 ul li > span:first-child::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -3px;
    border-right: 1.5px solid #c8d0da;
    border-bottom: 1.5px solid #c8d0da;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: border-color .2s ease;
    transition: border-color .2s ease;
}

.share .product_33 ul li:hover > span:first-child::before {
    border-color: #006cb7;
}

.share .product_33 ul li a {
    display: block;
    padding: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #3f4a57;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
}

.share .product_33 ul li:hover a {
    color: #006cb7;
}

/* 日期：取消右浮动交给 flex 对齐；等宽数字，切换标签时不会左右跳动 */
.share .product_33 ul li > .date {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    float: none;
    padding: 13px 18px 13px 10px;
    font-size: 12px;
    line-height: 1.6;
    color: #a3adb9;
    font-variant-numeric: tabular-nums;
    letter-spacing: .2px;
}

/* 「更多」：从 ul 里那个缩在底部的小 span，改成通栏的卡片底部链接条 */
.share .product_33 ul > .title22_more {
    display: block;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border-top: 1px solid #f2f5f9;
    line-height: 1;
    text-align: center;
}

.share .product_33 ul > .title22_more a {
    display: block;
    padding: 14px 0;
    font-size: 13px;
    color: #8b97a4;
    text-decoration: none;
    -webkit-transition: color .2s ease, background-color .2s ease;
    transition: color .2s ease, background-color .2s ease;
}

.share .product_33 ul > .title22_more a:hover {
    color: #006cb7;
    background: #f6fafd;
}

/* 右侧小箭头 */
.share .product_33 ul > .title22_more a::after {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-left: 7px;
    margin-bottom: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   13. 页脚（含悬停交互）
   —— main.css 里 .footdiv_menulis_d ul li a:hover 把下划线写死了，
      所以这里的覆盖统一加 .footers 前缀提高权重，否则 text-decoration 改不掉。
   -------------------------------------------------------------------------- */
.footers {
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .06) inset;
}

.footdiv_menulis {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    max-width: 1200px;
}

/* 栏目标题 + 下方品牌色短横线 */
.footdiv_menulis_d_h3,
.footerweixin_h3 {
    position: relative;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    -webkit-transition: color .25s ease;
    transition: color .25s ease;
}

.footdiv_menulis_d_h3 {
    margin-bottom: 14px;
    padding-bottom: 8px;
}

/* 扫码列原本没有下划线，与其他三列不齐；这里补上但压缩下边距，
   保证二维码不会因此被往下挤（.footerweixin 本身是固定 180px 高）。 */
.footerweixin_h3 {
    margin-bottom: 8px;
}

.footdiv_menulis_d_h3::after,
.footerweixin_h3::after {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    margin: 8px auto 0;
    background: #006cb7;
    border-radius: 2px;
    -webkit-transition: width .3s cubic-bezier(.22, .61, .36, 1), background-color .25s ease;
    transition: width .3s cubic-bezier(.22, .61, .36, 1), background-color .25s ease;
}

/* 鼠标进入整列时，标题下的短横线延展一点，作为「当前列」的轻微反馈 */
.footdiv_menulis_d:hover .footdiv_menulis_d_h3::after,
.footerweixin:hover .footerweixin_h3::after {
    width: 44px;
    background: #0d84d8;
}

/* 「帮助中心」这一列的标题本身是 <a>，补上链接态的反馈 */
.footers a.footdiv_menulis_d_h3 {
    text-decoration: none;
}

.footers a.footdiv_menulis_d_h3:hover {
    color: #0d84d8;
}

/* 链接：main.css 里 a 带 height:210px（行内元素不生效，但改成 inline-block 后会撑开版面），
   这里统一压回 auto，并用 padding 之外的 ::after 画一条从左向右扫出的下划线。 */
.footers .footdiv_menulis_d li a {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    line-height: 30px;
    color: #9aa7b4;
    text-decoration: none;
    -webkit-transition: color .25s ease;
    transition: color .25s ease;
}

.footers .footdiv_menulis_d li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 0;
    height: 1px;
    background: #4fa8e8;
    -webkit-transition: width .3s cubic-bezier(.22, .61, .36, 1);
    transition: width .3s cubic-bezier(.22, .61, .36, 1);
}

.footers .footdiv_menulis_d li a:hover,
.footers .footdiv_menulis_d li a:focus {
    color: #fff;
    text-decoration: none;
}

.footers .footdiv_menulis_d li a:hover::after,
.footers .footdiv_menulis_d li a:focus::after {
    width: 100%;
}

/* 当前所在栏目（代码会给 <a> 加 .hover_1）：文字直接高亮并常驻下划线 */
.footers .footdiv_menulis_d li a.hover_1 {
    color: #fff;
}

.footers .footdiv_menulis_d li a.hover_1::after {
    width: 100%;
    background: #006cb7;
}

/* 二维码：悬停上浮 + 光晕，提示「可扫」 */
.footerweixin img {
    border-radius: 8px;
    background: #fff;
    padding: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    -webkit-transition: -webkit-transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}

.footerweixin:hover img {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .38), 0 0 0 3px rgba(13, 132, 216, .35);
}

/* 版权栏 */
.footerCopyRight {
    padding: 22px 0 14px;
    font-size: 13px;
    color: #8b97a4;
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin-top: 18px;
}

.footerCopyRight a {
    color: #9aa7b4;
    text-decoration: none;
    -webkit-transition: color .25s ease;
    transition: color .25s ease;
}

.footerCopyRight a:hover {
    color: #fff;
}

/* 键盘用户：焦点可见 */
.footers a:focus {
    outline: 2px solid rgba(79, 168, 232, .65);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   14. 副页侧栏：新闻分类 / 联系我们
   —— 原样式是「.title18 蓝条 + 每项一个独立白块」：项与项之间留 5px 空隙、
      蓝条顶部压着 2px 的 #CCC 灰边、标题没有左内边距紧贴边缘被裁掉，
      整体像几块拼贴。这里收成一张完整的圆角卡片。
      作用域限定在 .divneirong 内，页脚里同名的 #CategoryDiv / .product_1n 不受影响。
   -------------------------------------------------------------------------- */

/* 卡片外框：抵消栅格 15px 内边距，改用外边距对齐，这样左右边缘与右侧正文卡片齐平 */
.divneirong [id$="CategoryDiv"],
.divneirong [id$="Contact"] {
    width: auto;
    float: none;
    margin: 16px 15px 0;
    padding: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
}

/* 兜底：这一层不依赖上面的容器选择器。只要样式表被加载，
   「蓝条比列表宽」「蓝条顶部压灰边」这两个核心问题就一定会被修掉。
   成因是原样式 .title18 是 width:100%，而 .product_1n 是 float:left 收缩包裹，
   两者宽度天然不一致，看起来就是标题条悬在列表外面一截。 */
.divneirong .title18 {
    width: 100%;
    height: auto;
    padding: 13px 16px;
    border-top: 0;
    background-image: -webkit-linear-gradient(top, #0d84d8 0%, #006cb7 100%);
    background-image: linear-gradient(180deg, #0d84d8 0%, #006cb7 100%);
}

.divneirong .product_1n {
    float: none;
    width: 100%;
}

/* 卡片表头：去掉灰边线与背景图，统一成品牌蓝渐变 */
.divneirong [id$="CategoryDiv"] .title18,
.divneirong [id$="Contact"] .title2 {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 13px 16px;
    border-top: 0;
    background-image: -webkit-linear-gradient(top, #0d84d8 0%, #006cb7 100%);
    background-image: linear-gradient(180deg, #0d84d8 0%, #006cb7 100%);
    overflow: hidden;
}

.divneirong [id$="CategoryDiv"] .title18 span.titlename,
.divneirong [id$="Contact"] .title2 span.titlename {
    position: static;
    display: block;
    float: none;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .5px;
    color: #fff;
    text-align: left;
}

/* 分类卡右侧那个空的「更多」占位链接直接隐藏 */
.divneirong [id$="CategoryDiv"] .title18 span.more {
    display: none;
}

/* 联系我们卡片的「更多」保留，改成白色小字 */
.divneirong [id$="Contact"] .title2 span.more {
    float: right;
    height: auto;
    line-height: 22px;
    background: none;
}

.divneirong [id$="Contact"] .title2 span.more a {
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
}

.divneirong [id$="Contact"] .title2 span.more a:hover {
    color: #fff;
}

/* 列表：去掉项间空隙，改为细线分隔 */
.divneirong [id$="CategoryDiv"] .product_1n,
.divneirong [id$="CategoryDiv"] .product_1.category {
    float: none;
    width: 100%;
    min-height: 0;
    padding: 6px 0;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
}

.divneirong [id$="CategoryDiv"] .product_1n ul,
.divneirong [id$="CategoryDiv"] .product_1.category ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.divneirong [id$="CategoryDiv"] .product_1n ul li,
.divneirong [id$="CategoryDiv"] .product_1.category ul li {
    margin: 0;
    padding: 0;
    background: transparent;
    border-bottom: 1px solid #f1f4f8;
    list-style: none;
    transition: background-color .2s ease;
}

.divneirong [id$="CategoryDiv"] .product_1n ul li:last-child,
.divneirong [id$="CategoryDiv"] .product_1.category ul li:last-child {
    border-bottom: 0;
}

/* 原来的 arrow2.gif 是 16px 位图小箭头，拥挤且发虚，改由 CSS 绘制细箭头 */
.divneirong [id$="CategoryDiv"] .product_1n ul li > img,
.divneirong [id$="CategoryDiv"] .product_1.category ul li > img {
    display: none;
}

.divneirong [id$="CategoryDiv"] .product_1n ul li > a,
.divneirong [id$="CategoryDiv"] .product_1.category ul li > a {
    position: relative;
    display: block;
    padding: 11px 16px 11px 30px;
    font-size: 14px;
    line-height: 1.5;
    color: #4b5563;
}

/* 箭头 */
.divneirong [id$="CategoryDiv"] .product_1n ul li > a::before,
.divneirong [id$="CategoryDiv"] .product_1.category ul li > a::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -3.5px;
    border-right: 1.5px solid #c2cad4;
    border-bottom: 1.5px solid #c2cad4;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: border-color .2s ease;
    transition: border-color .2s ease;
}

/* 悬停 */
.divneirong [id$="CategoryDiv"] .product_1n ul li:hover,
.divneirong [id$="CategoryDiv"] .product_1.category ul li:hover {
    background: #f2f7fc;
}

.divneirong [id$="CategoryDiv"] .product_1n ul li:hover > a,
.divneirong [id$="CategoryDiv"] .product_1.category ul li:hover > a {
    color: #006cb7;
}

.divneirong [id$="CategoryDiv"] .product_1n ul li:hover > a::before,
.divneirong [id$="CategoryDiv"] .product_1.category ul li:hover > a::before {
    border-color: #006cb7;
}

/* 当前栏目：.hover_1 由代码添加到 <a> 上，配左侧品牌色竖条 */
.divneirong [id$="CategoryDiv"] .product_1n ul li > a.hover_1,
.divneirong [id$="CategoryDiv"] .product_1.category ul li > a.hover_1 {
    color: #006cb7;
    font-weight: 600;
    background: #f2f7fc;
}

.divneirong [id$="CategoryDiv"] .product_1n ul li > a.hover_1::before,
.divneirong [id$="CategoryDiv"] .product_1.category ul li > a.hover_1::before {
    border-color: #006cb7;
}

.divneirong [id$="CategoryDiv"] .product_1n ul li > a.hover_1::after,
.divneirong [id$="CategoryDiv"] .product_1.category ul li > a.hover_1::after {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: #006cb7;
    border-radius: 0 3px 3px 0;
}

/* 二级栏目缩进 */
.divneirong [id$="CategoryDiv"] .product_1n ul li.child > a,
.divneirong [id$="CategoryDiv"] .product_1.category ul li.child > a {
    padding-left: 44px;
    font-size: 13px;
}

.divneirong [id$="CategoryDiv"] .product_1n ul li.child > a::before,
.divneirong [id$="CategoryDiv"] .product_1.category ul li.child > a::before {
    left: 30px;
}

/* 联系我们卡片正文：原 .product_3 带 min-height:380px，侧栏里会撑出大片空白 */
.divneirong [id$="Contact"] .product_3 {
    min-height: 0;
    padding: 16px;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
}

.divneirong [id$="Contact"] .product_3 address {
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    color: #4b5563;
}

/* --------------------------------------------------------------------------
   15. 产品卡片（首页「推荐产品」与产品频道共用 .ds_ul 组件）
   —— 原样式几个明显问题：
      1) .img_none 固定 height:183px + width:100%，不同比例的图被硬拉变形；
      2) .ds_hover 固定 40px、字号 18px、居中，长产品名顶到两侧直接切掉；
      3) .img_nonete 同时吃到 float:right 和 margin:14px auto，「+」角标位置歪斜贴边；
      4) 悬停时整块浮层刷成红色 #d5091b，而 .ds_hoverh3 又被设成 #F00 —— 红字压红底，
         产品名几乎看不见；
      5) 卡片没有圆角与层次，和站点其它卡片风格不统一。
   -------------------------------------------------------------------------- */

/* 卡片外框：圆角 + 悬停上浮 */
.ds_ul li > a {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    -webkit-transition: box-shadow .3s ease, -webkit-transform .3s cubic-bezier(.22, .61, .36, 1);
    transition: box-shadow .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.ds_ul li > a:hover {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    box-shadow: 0 14px 26px rgba(16, 24, 40, .14);
}

/* 图片区：固定高度 + 等比裁切，彻底消除拉伸变形 */
.ds_ul li .ds_img {
    height: 190px;
    border-radius: 10px;
    background: #eef1f5;
}

.ds_ul .img_none {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: -webkit-transform .45s cubic-bezier(.22, .61, .36, 1);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.ds_ul li > a:hover .img_none {
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
}

/* 底部标题条：左对齐 + 单行省略，右侧给「+」角标留出固定位置 */
.ds_ul li .ds_img .ds_hover {
    height: 42px;
    line-height: 42px;
    padding: 0 44px 0 14px;
    text-align: left;
    font-family: inherit;
    font-size: 15px;
    /* main.css 的 .ds_hover 用了 background:...!important，这里必须同样提权才盖得住 */
    background-color: rgba(0, 0, 0, .55) !important;
    -webkit-transition: height .3s ease, background-color .3s ease;
    transition: height .3s ease, background-color .3s ease;
}

.ds_ul li .ds_img .ds_hoverh3 {
    float: none;
    width: auto;
    line-height: 42px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 「+」角标：绝对定位到标题条右侧垂直居中，脱离 float 与居中 margin 的相互拉扯 */
.ds_ul li .ds_img .ds_hover .img_nonete {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0;
    padding: 0;
    float: none;
    display: block;
    opacity: .9;
    -webkit-transition: opacity .3s ease, top .3s ease, -webkit-transform .3s ease;
    transition: opacity .3s ease, top .3s ease, transform .3s ease;
}

/* 悬停：浮层展开露出产品简介（保留原有信息展示），底色由刺眼的红改为品牌蓝 */
.ds_ul li .ds_img:hover .ds_hover {
    height: 100%;
    padding: 14px 16px;
    line-height: 1.6;
    font-size: 15px;
    background-color: rgba(0, 108, 183, .93) !important;
}

.ds_ul li .ds_img:hover .ds_hoverh3 {
    float: none;
    width: auto;
    margin: 0 0 6px;
    padding: 0 30px 0 0;
    line-height: 1.45;
    font-size: 15px;
    color: #fff;
    overflow: hidden;
    white-space: normal;
    text-overflow: clip;
}

.ds_ul li .ds_img:hover .ds_hoverimg {
    padding: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
    color: rgba(255, 255, 255, .92);
    max-height: 92px;
    overflow: hidden;
}

.ds_ul li .ds_img:hover .img_nonete {
    top: 14px;
    margin-top: 0;
    opacity: 1;
    -webkit-transform: scale(1.12);
    transform: scale(1.12);
}

/* --------------------------------------------------------------------------
   15.1 首页「热门地区」卡片（.region-grid，由 CreateProduct2 生成）
   —— 竖版卡片，自上而下三段：
      ① 国旗区：固定高度、contain 收纳在卡片内（旧版图被 margin-top:-20px
         顶出卡片上沿，就是截图里「国旗压住卡片头」的原因，这里彻底禁止）；
      ② 名称行：地区名靠左、价格靠右，虚线与简介分隔；
      ③ 简介行：单行居中。
      任何一环缺失都不会开天窗：
      1) 国旗缺失或加载失败时，用地区名首字占位（.region-flag.no-img）；
      2) 后台没填价格就不渲染价格，名称行只剩名称；
      3) 简介为空就不渲染简介行，卡片高度自适应。
   -------------------------------------------------------------------------- */

.region-grid {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

/* 三列等宽（calc 均分间隙），小于 768px 两列 */
.region-card {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: -webkit-calc((100% - 32px) / 3);
    width: calc((100% - 32px) / 3);
    margin: 0 16px 18px 0;
    min-width: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 0;
    background: #fff;
    border: 1px solid #e8edf3;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    -webkit-transition: box-shadow .25s ease, -webkit-transform .25s ease, border-color .25s ease;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

/* 每行第三张去掉右边距，保证三列真正对齐 */
.region-card:nth-child(3n) {
    margin-right: 0;
}

.region-card:hover {
    border-color: #bcd2ee;
    box-shadow: 0 12px 24px rgba(16, 24, 40, .11);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    text-decoration: none;
}

/* ① 国旗区：固定高度 + contain，图永远完整落在卡片内部，不再溢出 */
.region-flag {
    position: relative;
    display: block;
    width: 100%;
    height: 110px;
    padding: 14px 18px 8px;
    background: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.region-flag img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

/* 占位字符：无图 / 图片加载失败时显示在国旗区中央 */
.region-flag::after {
    content: attr(data-char);
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #b6c2d1;
}

.region-flag.no-img::after {
    display: -webkit-flex;
    display: flex;
}

/* ② 名称行：地区名靠左、价格靠右 */
.region-head {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0 14px;
    padding: 8px 0 9px;
    border-bottom: 1px dashed #e6ebf2;
}

.region-name {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 价格：纯文字样式（截图样式），后台没填时整块不渲染 */
.region-price {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #e5484d;
    white-space: nowrap;
}

/* ③ 简介行：浅灰底色条贴在卡片底部，单行居中，超出省略 */
.region-body {
    display: block;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}

.region-desc {
    display: block;
    margin: 0;
    padding: 9px 12px 10px;
    background: #f8fafc;
    border-top: 1px solid #f1f4f8;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    color: #6b7280;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 简介是富文本（SanitizeHtml 后仍可能带 p/span 等标签）：
   内层标签全部拍平成行内并继承外观——否则内层块级标签会各自占一行、
   把 padding/margin 带进来，文字就被挤出卡片底边（上一版正是这个原因），
   拍平后省略号也只在外层 .region-desc 一处生效。 */
.region-desc p,
.region-desc div,
.region-desc span,
.region-desc strong,
.region-desc b,
.region-desc em,
.region-desc i,
.region-desc u,
.region-desc font {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    white-space: inherit;
}

/* ---------------- 区块外壳（.divprics） ----------------
   main.css：.divprics{ float:left; width:100%; padding:50px; height:100% }
   1) 四周 50px 的内边距把整块内容从页面栅格上又推进去一圈，
      和上下其它区块左边缘对不齐，是「排版不协调」的直接来源；
   2) bootstrap 在 @media (min-width:1366px) 把 .container 定宽 1366px，
      再叠加这 50px 之后整页出现横向滚动条（实测 scrollWidth 1416 / viewport 1366）；
   3) 两个栅格列是 .container 的直接子级（模板没写 .row），全是浮动且未清除，
      卡片列比表单列高时会把下一区块顶上来。
   ------------------------------------------------------ */
.divprics {
    padding: 40px 0;
}

.divprics > .container::after {
    content: "";
    display: block;
    clear: both;
}

/* 手机：两列。
   注意断点取 767 而不是 991——平板区间已经没有侧栏占位，
   卡片能拿到整宽，三列比两列更匀称。 */
@media (max-width: 767px) {
    .region-card {
        width: -webkit-calc((100% - 16px) / 2);
        width: calc((100% - 16px) / 2);
        margin-right: 16px;
    }

    /* 两列布局时改为「偶数张去掉右边距」，保持左右对齐 */
    .region-card:nth-child(3n) {
        margin-right: 16px;
    }

    .region-card:nth-child(2n) {
        margin-right: 0;
    }
}

/* 平板 / 手机：外壳与两列改为纵向堆叠。
   col-sm-6 在 768~991px 会把卡片列压到 ~158px，六张卡片挤成很窄的一列，
   所以整块改为「标题 → 热门地区卡片 → 价格试算表单」从上往下排。 */
@media (max-width: 991px) {
    .divprics {
        padding: 26px 0;
    }

    .divprics > .container {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    /* 卡片列在上 */
    .divprics > .container > .col-md-8 {
        -webkit-order: 1;
        order: 1;
        float: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    /* 价格试算表单在下 */
    .divprics > .container > .col-md-4 {
        -webkit-order: 2;
        order: 2;
        float: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-top: 20px;
    }

    /* 表单卡片自身宽度比整行窄，堆叠后贴在左侧会显得偏，
       统一居中摆放（宽度够时这条不起作用）。 */
    .divprics > .container > .col-md-4 .pricing-table {
        margin-left: auto;
        margin-right: auto;
    }
}

/* 手机：收窄国旗区与字号，保证「地区名 + 价格」同排不折行 */
@media (max-width: 767px) {
    .region-flag {
        height: 92px;
        padding: 12px 14px 6px;
    }

    .region-flag::after {
        font-size: 20px;
    }

    .region-head {
        margin: 0 12px;
        padding: 7px 0 8px;
    }

    .region-name {
        font-size: 15px;
    }

    .region-price {
        margin-left: 8px;
        font-size: 13px;
    }

    .region-desc {
        padding: 8px 10px 9px;
        font-size: 12px;
        line-height: 18px;
    }
}

/* 小屏：仍保持两列（竖版卡片很窄也放得下），再收一档字号 */
@media (max-width: 479px) {
    .region-card {
        width: -webkit-calc((100% - 12px) / 2);
        width: calc((100% - 12px) / 2);
        margin-right: 12px;
    }

    .region-card:nth-child(2n) {
        margin-right: 0;
    }

    .region-card:nth-child(3n) {
        margin-right: 12px;
    }

    .region-flag {
        height: 74px;
        padding: 10px 12px 5px;
    }

    .region-name {
        font-size: 14px;
    }

    .region-price {
        font-size: 12px;
    }

    .region-desc {
        padding: 7px 10px 8px;
        font-size: 12px;
        line-height: 17px;
    }
}

/* --------------------------------------------------------------------------
   16. 响应式：平板（≤991px）/ 手机（≤767px）/ 小屏（≤479px）
   —— 模板只写了 col-md-* / col-sm-*，没有 col-xs-*，所以 <992px 时栅格整体失效，
      会暴露出三个结构性问题：
      1) 副页侧栏在 DOM 里排在正文前面（母版里的 col-md-pull-999 是无效类，桌面端
         靠「碰巧」显示成左右分栏），栅格一旦失效，侧栏会整块堆到正文上方，
         手机上必须先滚过「新闻分类 / 联系我们」才能看到内容；
      2) 页脚四列是固定 190px + 二维码列 160px + 30px 外边距，合计约 950px，
         在 768~960px 之间会溢出容器；
      3) 产品网格的断点是 700px，700~991px 仍是三列，平板上卡片被压得过窄。
   -------------------------------------------------------------------------- */

/* ======================= 平板 + 手机：≤991px ======================= */
@media (max-width: 991px) {
    /* 这个模板重写过 .container / .containert：只有 margin:auto，没有左右内边距，
       而 .row 仍带 -15px 负边距、栅格列仍带 15px 内边距。
       ≤767px 时栅格列完全不生效，负边距却还在，导致所有内容直接贴到屏幕边缘。
       这里给容器补回内边距：
         768~991px —— 列内边距抵消后净剩 14px；
         ≤767px   —— 再把 .row 负边距归零（见下方），同样净剩 14px，全站留白统一。 */
    .container,
    .containert {
        max-width: 100%;
        padding-left: 14px;
        padding-right: 14px;
    }

    /* 1) 副页：用 flex 的 order 把侧栏挪到正文下方。
          只改渲染顺序，不动 HTML，也不影响桌面端左右分栏。
          各母版的内容容器写法不统一，三种都要覆盖：
            .divneirong > .row                 —— Albums / Comments / Downloads / Recruit
            .divneirong > .containert > .row   —— Articles
            .divneirong > .container > .row    —— Products / Content / SiteMap
          这里刻意不用后代选择器 .divneirong .row：正文里的表单（Comments/Post、
          Recruit/Post 的 col-sm-* 行）也会被命中，768~991px 会误伤成上下堆叠。 */
    .divneirong > .row,
    .divneirong > .containert > .row,
    .divneirong > .container > .row {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        margin-left: 0;
        margin-right: 0;
    }

    .divneirong > .row > [class*="col-md-9"],
    .divneirong > .containert > .row > [class*="col-md-9"],
    .divneirong > .container > .row > [class*="col-md-9"] {
        -webkit-order: 1;
        order: 1;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .divneirong > .row > [class*="col-md-3"],
    .divneirong > .containert > .row > [class*="col-md-3"],
    .divneirong > .container > .row > [class*="col-md-3"] {
        -webkit-order: 2;
        order: 2;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    /* 侧栏卡片改成满宽后，去掉原来用于对齐栅格内边距的左右外边距 */
    .divneirong [id$="CategoryDiv"],
    .divneirong [id$="Contact"] {
        margin: 16px 0 0;
    }

    /* 2) 页脚：固定像素宽改成弹性换列，避免在 768~960px 之间溢出容器 */
    .footdiv_menulis {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    /* 直接子元素作为弹性项（含 #News1 / #News3 / #Productc 这几个服务端容器） */
    .footdiv_menulis > div {
        -webkit-flex: 1 1 200px;
        flex: 1 1 200px;
        padding: 5px 12px;
    }

    /* 解掉 main.css 的 190px / 160px 固定宽和 210px 固定高。
       这里必须写成后代选择器：#News1 内部还会再套一层 .footdiv_menulis_d，
       只写直接子元素选择器会漏掉它，手机上照样会溢出。 */
    .footdiv_menulis .footdiv_menulis_d,
    .footdiv_menulis .footerweixin {
        width: auto;
        height: auto;
        margin-left: 0;
    }

    .footdiv_menulis_d_h3,
    .footerweixin_h3 {
        width: 100%;
    }

    .footerweixin img {
        float: none;
        width: 130px;
        height: 130px;
        margin: 0 auto;
        display: block;
    }

    .footerCopyRight {
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
    }

    /* 3) 导航：768~991px 之间 Bootstrap 会把导航展开成横排，
          这里允许换行并略微收紧内边距，避免撑破顶栏 */
    #nav.navbar-nav {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    #nav.navbar-nav > li > a {
        padding: 10px 12px;
        font-size: 14px;
    }

    .col-md-88 {
        max-width: 100%;
    }

    .product_1,
    .product_2,
    .product_3 {
        padding: 16px;
    }
}

/* 产品网格：原 700px 之上是三列，平板上过窄，改成两列。
   必须限定下限，否则会盖掉 main.css 在 ≤700px 的单列规则。 */
@media (min-width: 700px) and (max-width: 991px) {
    .ds_ul li {
        width: 50%;
    }
}

/* =========================== 手机：≤767px =========================== */
@media (max-width: 767px) {
    body {
        font-size: 15px;
    }

    .divneirong {
        padding-top: 16px;
        padding-bottom: 32px;
    }

    /* 顶栏：给右侧汉堡按钮留出同排空间（LOGO 容器是 flex 项，不限宽会把它挤到下一行） */
    .col-md-88 {
        max-width: 68%;
    }

    .logo img,
    .logo a img {
        max-height: 40px;
    }

    .product_1,
    .product_2,
    .product_3 {
        border-radius: 6px;
        padding: 14px;
    }

    /* 产品卡：收窄 li 的内边距让图片尽量宽。
       这里不写 width——≤700px 由 main.css 给单列，700~767px 由上面的规则给两列，
       如果在这里写死 100%，700~767px 会退回单列，图片被拉成很扁的横条。 */
    .ds_ul li {
        padding: 12px 8px;
    }

    .ds_ul li .ds_img {
        height: 200px;
    }

    .ds_ul li .ds_img .ds_hover {
        padding: 0 40px 0 12px;
        font-size: 14px;
    }

    /* 首页新闻卡片：收窄行内边距，把宽度让给标题，日期不再挤压标题 */
    .share .tab > div {
        padding: 12px 4px;
        font-size: 14px;
    }

    .share .product_33 ul li {
        min-height: 46px;
    }

    .share .product_33 ul li > span:first-child {
        padding: 12px 8px 12px 28px;
    }

    .share .product_33 ul li > span:first-child::before {
        left: 15px;
    }

    .share .product_33 ul li a {
        font-size: 13px;
    }

    .share .product_33 ul li > .date {
        padding: 12px 14px 12px 6px;
        font-size: 11px;
    }

    /* 正文里的宽表格 / 大图不允许把页面撑出横向滚动条 */
    .divneirong .product_1 img,
    .divneirong .product_3 img {
        max-width: 100%;
    }

    .product_1 table,
    .product_3 table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .theme-btn,
    .btn-style-three,
    .rounded-btn,
    .trackingbting {
        width: 100%;
        padding: 11px 16px;
    }

    /* 页脚：手机上收成两列 */
    .footdiv_menulis > div {
        -webkit-flex: 1 1 150px;
        flex: 1 1 150px;
    }

    /* 栅格列在 <768px 全部失效，.row 的 -15px 负边距会让内容冲出容器，
       归零后由上面 .container 的 14px 内边距统一控制留白。 */
    .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* ================= 手机端顶栏与汉堡菜单 ================= */

    /* LOGO 与汉堡按钮同排：LOGO 可压缩，导航区靠右 */
    #hdc {
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .col-md-88 {
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 68%;
    }

    .logo img,
    .logo a img {
        max-width: 100%;
        height: auto;
        max-height: 40px;
    }

    /* main.css 在 ≤767px 给 .navbar-header 刷了 background:#39F，
       展开菜单时会在顶栏里露出一整块高饱和蓝底，清掉。 */
    .navbar-header {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        float: none;
        padding: 0;
        background: transparent;
    }

    /* 顶栏只保留 LOGO + 汉堡。
       TopNav 生成的 .navbar-brand.visible-xs 是 Bootstrap 的「首页」文字按钮，
       它会和汉堡挤在同一侧；改成把列表里的 #shouye 放出来当第一项（它带 hidden-xs，
       在 <768px 被 display:none !important 隐藏了），顶栏就干净了。 */
    .navbar-brand.visible-xs {
        display: none !important;
    }

    #nav.navbar-nav > li > a#shouye {
        display: block !important;
    }

    /* .navbar 自带 position:relative，会让下方的浮层以它（宽度只有按钮那么大）为定位基准，
       压成右侧一条窄条。这里改回 static，浮层改为相对整条 .header 定位。 */
    .navbar {
        position: static;
        float: none;
        width: auto;
    }

    /* 汉堡按钮：main.css 给的是 background:#000 + border-color:#000，
       压在 #0b1220 的深色顶栏上等于「黑底黑按钮」，几乎看不见。整体重做。 */
    .navbar-default .navbar-toggle {
        display: block;
        float: none;
        position: relative;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 12px;
        background: rgba(255, 255, 255, .08);
        -webkit-transition: background-color .2s ease, border-color .2s ease;
        transition: background-color .2s ease, border-color .2s ease;
    }

    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
        border-color: rgba(255, 255, 255, .45);
        background: rgba(255, 255, 255, .16);
    }

    /* 三根横条改绝对定位，便于展开时收成 X */
    .navbar-default .navbar-toggle .icon-bar {
        position: absolute;
        left: 50%;
        width: 20px;
        height: 2px;
        margin: 0 0 0 -10px;
        border-radius: 2px;
        background-color: #fff;
        -webkit-transition: top .3s cubic-bezier(.22, .61, .36, 1), -webkit-transform .3s cubic-bezier(.22, .61, .36, 1), opacity .2s ease;
        transition: top .3s cubic-bezier(.22, .61, .36, 1), transform .3s cubic-bezier(.22, .61, .36, 1), opacity .2s ease;
    }

    .navbar-default .navbar-toggle .icon-bar:nth-child(2) {
        top: 16px;
    }

    .navbar-default .navbar-toggle .icon-bar:nth-child(3) {
        top: 21px;
    }

    .navbar-default .navbar-toggle .icon-bar:nth-child(4) {
        top: 26px;
    }

    /* 展开态：Bootstrap 会摘掉 .collapsed，上下两根交叉成 X，中间淡出 */
    .navbar-default .navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {
        top: 21px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .navbar-default .navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) {
        opacity: 0;
    }

    .navbar-default .navbar-toggle:not(.collapsed) .icon-bar:nth-child(4) {
        top: 21px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    /* 展开的菜单：整条落在顶栏下方。父级 .header 是 position:relative，
       所以 left/right:0 相对整条顶栏，做成白色圆角浮层而不是挤在右侧一小块。 */
    .navbar-collapse.navwrap {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 60;
        margin: 0;
        padding: 8px 14px 14px;
        border: 0;
        background: #fff;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 18px 36px rgba(6, 12, 24, .28);
    }

    /* 面板是白底，配色要从桌面端的「深底浅字」换成「浅底深字」 */
    #nav.navbar-nav {
        display: block;
        float: none;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #nav.navbar-nav > li {
        float: none;
        display: block;
        border-bottom: 1px solid #f1f4f8;
    }

    #nav.navbar-nav > li:last-child {
        border-bottom: 0;
    }

    #nav.navbar-nav > li > a {
        padding: 13px 6px;
        font-size: 15px;
        color: #24303f;
        border-radius: 8px;
        white-space: normal;
        text-align: left;
    }

    #nav.navbar-nav > li > a:hover,
    #nav.navbar-nav > li > a:focus {
        color: #006cb7;
        background: #f4f9fd;
    }

    #nav.navbar-nav > li > a:active,
    #nav.navbar-nav > li.active > a {
        color: #006cb7;
        background: #eaf4fc;
    }

    /* 二级菜单：手机没有 hover，常驻展开；缩进 + 左侧竖线体现层级 */
    #nav.navbar-nav li ul {
        display: block;
        position: static;
        float: none;
        min-width: 0;
        margin: 0 0 8px;
        padding: 2px 0 2px 12px;
        border-left: 2px solid #e6eef6;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    /* main.css 的 #nav li ul li 带 dashed 虚线、#nav li ul li a 带 text-align:center，
       在这块白底面板里就是「居中 + 虚线」，必须显式覆盖掉。 */
    #nav.navbar-nav li ul li {
        border-bottom: 0;
    }

    #nav.navbar-nav li ul li a {
        padding: 9px 10px;
        font-size: 14px;
        color: #5b6777;
        border-radius: 6px;
        white-space: normal;
        text-align: left;
    }

    #nav.navbar-nav li ul li a:hover {
        color: #006cb7;
        background: #f4f9fd;
    }
}

/* =========================== 小屏：≤479px =========================== */
@media (max-width: 479px) {
    .ThisCompanyName-section-top,
    .ThisCompanyName-section-top2 {
        font-size: 19px;
        padding: 20px 0 6px;
    }

    .product_1,
    .product_2,
    .product_3 {
        padding: 12px;
    }

    .ds_ul li .ds_img {
        height: 180px;
    }
}

/* 尊重系统的「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation-duration: .01ms !important;
    }
}