/* ==========================================================================
   site-layout.css
   全站前台排版统一优化层（增量覆盖，最后加载）
   --------------------------------------------------------------------------
   加载位置：各 Main.master 的 </body> 之前
   作用：修复页头 / 页脚排版 Bug、统一栅格与间距、移动端自适应、视觉细节现代化
   原则：不修改原始样式文件（main.css / bootstrap.css / test/style.css），仅做覆盖；
         保留原有品牌配色（蓝 #0093dd / 红 #d22f26）
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 全局基础
   -------------------------------------------------------------------------- */
body {
    font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 兜底：避免固定宽度元素在窄屏顶出横向滚动条 */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* 窄屏时 Banner 不再强制最小宽度（原 min-width:800px 会把手机屏幕撑破） */
.div_banner,
.div_bannerimg,
.div_bannerimg a img {
    min-width: 0;
}
.div_banner_cent {
    width: 100%;
    max-width: 1366px;
}

/* --------------------------------------------------------------------------
   1. 通用内容容器
   原 .content 固定 1200px，窄屏溢出 → 改为「最大 1200px + 自适应」
   -------------------------------------------------------------------------- */
.content {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.contentc {
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.content3 {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* 与子页面 Bootstrap 栅格对齐（原 1170px 比 1200px 容器窄 30px，会与页头错位）。

   注意 bootstrap.css 里 .container 被写死成 width:1200px（Bootstrap 原本那套
   750/970/1170 的媒体查询被整段删掉了），所以任何窄于 1200px 的视口都在拿一块
   1200px 的画布排版。这本身只是横向溢出，但栏目页的 Banner（#AD.div_bannerimg）
   是 float:left 且宽度等于视口 —— 浮动会侵入容器的排版上下文，把 .title2
   （overflow:hidden，自成 BFC）和产品卡片（float:left）整体向右推一个
   浮动宽度的距离，正好推出可视区；只有 clear:both 的分页和下方未被浮动波及的
   侧栏还留在视野里。表现就是「窗口一缩小，栏目内容整个不见了」。

   这里把宽度改成响应式：≥1200px 仍是 1200px（宽屏观感完全不变），
   窄屏则跟随视口收缩 —— 浮动体与容器等宽后无法并排，内容自然落到浮动下方。 */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   2. 页头（logo / 主导航 / 客服热线）
   Bug 修复：
     原布局 .logo(320) + .nav_53(700) + .divtoptel(150 + 40 内边距) = 1210px，
     已超出 .content 的 1200px 容器 → 客服热线被挤到第二行；
     .div_top 固定高 100px 却容纳 110px 高的导航 → 与 Banner 重叠。
   方案：页头改为 flex 三段式布局，高度自适应并保持 100px 视觉高度。
   -------------------------------------------------------------------------- */
.div_top {
    height: auto;
    min-height: 100px;
    background: #fff;
    position: relative;
    z-index: 1000;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.div_top > .content {
    min-height: 100px;
    padding: 8px 15px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

/* logo */
.div_top .logo {
    float: none;
    width: auto;
    height: auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
.div_top .logo a,
.div_top .divlogo {
    display: block;
    width: auto;
    height: auto;
}
.div_top .logo img {
    float: none;
    display: block;
    height: 80px;
    width: auto;
    max-height: 84px;
}

/* 主导航 */
.div_top .nav_53 {
    float: none;
    width: auto;
    height: auto;
    min-width: 0;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
}
.div_top .navmain {
    width: 100%;
}
.div_top .menglui {
    float: none;
    width: 100%;
    height: auto;
}
.div_top #nav_all {
    float: none;
    display: block;
    width: 100%;
    height: auto;
}
.div_top .nav_navbar {
    float: none;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    padding-left: 0;
    margin: 0;
}
.div_top .nav_navbar > li {
    float: none;
    height: auto;
    line-height: normal;
    position: relative;
}
.div_top .nav_navbar > li > a {
    display: block;
    width: auto;
    height: auto;
    padding: 10px 16px;
    font-size: 15px;
    line-height: 1.4;
    color: #444;
    border-radius: 4px;
    white-space: nowrap;
}
.div_top .nav_navbar > li > a:hover,
.div_top .nav_navbar > li > a:focus {
    height: auto;
    color: #fff;
    background: #d22f26;
    border-radius: 4px;
}

/* 二级下拉菜单：卡片式 + 桌面端悬停展开
   （原样式 width:100% 且依赖的 $("div.h_nav") 选择器早已失效，菜单无法正常显示） */
.div_top #nav_all li > ul {
    display: none;
    position: absolute;
    left: auto;
    right: 0;
    top: 100%;
    width: auto;
    min-width: 168px;
    padding: 6px 0;
    margin: 0;
    background: #fff;
    border-top: 2px solid #d22f26;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
    overflow: visible;
    z-index: 9999;
}
.div_top #nav_all li > ul > li {
    float: none;
    display: block;
    width: auto;
    height: auto;
    line-height: normal;
    text-align: left;
}
.div_top #nav_all li > ul > li > a,
.div_top #nav_all .menulia {
    display: block;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.4;
    color: #555;
    white-space: nowrap;
}
.div_top #nav_all li > ul > li > a:hover,
.div_top #nav_all .menulia:hover {
    color: #d22f26;
    background: #f7f7f7;
}
@media (min-width: 992px) {
    .div_top #nav_all li:hover > ul {
        display: block;
    }
}

/* 客服热线 */
.div_top .divtoptel {
    float: none;
    width: auto;
    margin: 0 0 0 16px;
    padding: 8px 18px;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    color: #fff;
    background: #0093dd;
    border-radius: 22px;
    box-shadow: 0 2px 6px rgba(0, 147, 221, .25);
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
.div_top .divtoptel span {
    font-size: 16px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   3. 页脚
   Bug 修复：
     ① <p class="pLeft"> 内嵌 <ul> 属非法嵌套，浏览器会强制闭合 <p> 打乱结构；
     ② 页脚缺少居中容器（BottomNav1.ascx 中 class=" " 为空），内容无法与页头对齐。
   -------------------------------------------------------------------------- */
#footer {
    float: none;
    width: 100%;
    padding: 20px 0 22px;
    background: #22262e;
    clear: both;
}
#footer .footBox,
#footer .footerBox {
    float: none;
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
    padding: 0 15px;
}
#footer .div_cyight {
    width: 100%;
    text-align: center;
}
#footer ul.footerNav {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding: 0 0 14px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
#footer ul.footerNav li {
    display: inline-block;
    margin: 0 12px;
    line-height: 24px;
    color: #c8ccd4;
}
#footer ul.footerNav a {
    font-size: 13px;
    color: #c8ccd4;
}
#footer ul.footerNav a:hover {
    color: #fff;
}
#footer .cpyright {
    width: 100%;
    text-align: center;
    font-size: 12px;
    line-height: 1.9;
    color: #9aa0aa;
}
#footer .div_cyight_a {
    color: #9aa0aa;
}

/* --------------------------------------------------------------------------
   4. 栏目子页：标题条 / 侧栏 / 列表 / 卡片 / 分页 —— 视觉升级
   -------------------------------------------------------------------------- */

/* 4.1 标题条：原为多张图片拼接（高 30px 偏矮），改为渐变底色 + 左标题 + 右面包屑 */
.title2 {
    position: relative;
    height: 44px;
    line-height: 44px;
    padding: 0 16px;
    border: none;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    background: #24509a;
    background-image: -webkit-linear-gradient(left, #24509a 0%, #3576cf 100%);
    background-image: linear-gradient(to right, #24509a 0%, #3576cf 100%);
}
.title2 span.titlename {
    position: relative;
    float: left;
    display: block;
    width: auto;
    height: 44px;
    line-height: 44px;
    padding: 0 0 0 14px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    background: none;
    background-image: none;
}
/* 标题左侧竖条装饰 */
.title2 span.titlename:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 16px;
    margin-top: -8px;
    background: #ffd24d;
    border-radius: 2px;
}
.title2 span.more {
    float: right;
    display: block;
    height: 44px;
    line-height: 44px;
    padding: 0;
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    background: none;
    background-image: none;
}
.title2 span.more a {
    margin: 0;
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
}
.title2 span.more a:hover {
    color: #fff;
    text-decoration: underline;
}

/* 4.2 侧栏分类列表：白底卡片 + 圆点标记 + 选中高亮 */
.product_1.category {
    min-height: 180px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 10px rgba(36, 80, 154, .06);
}
.product_1.category > ul {
    margin: 0;
    padding: 0;
}
.product_1.category > ul > li {
    position: relative;
    margin: 0;
    padding: 0;
    border-bottom: 1px dashed #edf1f6;
}
.product_1.category > ul > li:last-child {
    border-bottom: none;
}
/* 隐藏原有小箭头图片，改用 CSS 圆点 */
.product_1.category > ul > li > img {
    display: none;
}
.product_1.category > ul > li > a {
    position: relative;
    display: block;
    padding: 10px 14px 10px 30px;
    color: #555;
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-transition: background-color .2s ease, color .2s ease;
    transition: background-color .2s ease, color .2s ease;
}
.product_1.category > ul > li > a:before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2px;
    background: #c2cbd8;
    border-radius: 50%;
    -webkit-transition: background-color .2s ease;
    transition: background-color .2s ease;
}
.product_1.category > ul > li > a:hover,
.product_1.category > ul > li > a.hover_1 {
    background: #24509a;
    color: #fff;
}
.product_1.category > ul > li > a:hover:before,
.product_1.category > ul > li > a.hover_1:before {
    background: #ffd24d;
}
.product_1.category > ul > li.child {
    padding-left: 0;
}
.product_1.category > ul > li.child > a {
    padding-left: 46px;
    color: #777;
    font-size: 13px;
}

/* 4.3 文章 / 资讯列表：整行 hover + 图标圆点 + 右侧日期 */
.product_1.product_3,
.product_3 {
    padding: 0 0 8px;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 10px rgba(36, 80, 154, .06);
}
/* 招聘等页面用的是 .product_4，内容是表格，内边距交给单元格控制 */
.product_4 {
    padding: 0 0 8px;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 10px rgba(36, 80, 154, .06);
}

/* 4.4 招聘列表表格
   模板里写的是 <table class="divtable table-hover">，但 .divtable 在
   main.css / bootstrap.css / test/style.css 中都没有任何定义，
   表格一直按浏览器默认样式渲染，所以表头和内容挤成一团。
   服务端每个 <td> 都输出了 data-title，顺手把窄屏折叠成卡片。 */
#job-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}
#job-table th,
#job-table td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#job-table thead th {
    color: #24509a;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    background: #f4f8fd;
    border-bottom: 1px solid #e3e8ef;
    white-space: nowrap;
}
#job-table tbody td {
    color: #555;
    font-size: 14px;
    line-height: 1.6;
    border-bottom: 1px dashed #e9edf2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
#job-table tbody tr {
    -webkit-transition: background-color .2s ease;
    transition: background-color .2s ease;
}
#job-table tbody tr:hover {
    background: #f7fafd;
}
#job-table tbody tr:last-child td {
    border-bottom: none;
}
/* 固定列宽：职位 / 人数 / 地点 / 操作 / 占位
   不固定的话空单元格会被压成 0 宽，「人数」列直接消失 */
#job-table th:nth-child(1),
#job-table td:nth-child(1) {
    width: 34%;
}
#job-table th:nth-child(2),
#job-table td:nth-child(2) {
    width: 12%;
}
#job-table th:nth-child(3),
#job-table td:nth-child(3) {
    width: 18%;
}
#job-table th:nth-child(4),
#job-table td:nth-child(4) {
    width: 24%;
}
#job-table th:nth-child(5),
#job-table td:nth-child(5) {
    width: 12%;
}
/* 「查看详细」：从裸链接改成按钮，行内更易点 */
#job-table .btn-link {
    display: inline-block;
    padding: 3px 10px;
    color: #2f7de1;
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    background: #f7fbff;
    border: 1px solid #cfe0f7;
    border-radius: 3px;
    -webkit-transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
#job-table .btn-link:hover {
    color: #fff;
    background: #2f7de1;
    border-color: #2f7de1;
    text-decoration: none;
}
/* 表格与分页之间的收尾分隔线。
   原 .bottom_border 是 height:1px + margin-top:-20px，靠负边距硬凑位置，
   这里改成零高度纯边框，位置由文档流决定 */
.product_4 .bottom_border {
    height: 0;
    margin: 0;
    border-top: 1px solid #e3e8ef;
}
/* 窄屏：表头收起，每行折叠为一张卡片，用 data-title 当作字段名 */
@media (max-width: 767px) {
    #job-table,
    #job-table tbody,
    #job-table tr,
    #job-table td {
        display: block;
        width: auto;
    }
    #job-table thead {
        display: none;
    }
    #job-table tbody tr {
        padding: 8px 12px;
        border-bottom: 1px dashed #e9edf2;
    }
    #job-table tbody td {
        position: relative;
        padding: 4px 0 4px 84px;
        text-align: left;
        border-bottom: none;
    }
    #job-table tbody td:before {
        position: absolute;
        left: 0;
        top: 4px;
        width: 76px;
        color: #8b97a8;
        font-size: 13px;
        content: attr(data-title);
    }
}
/* 关键：<ul> 并不直属 .product_3 —— 服务端在中间套了一层 <div id="Article">。
   原先写成 > ul 导致整段列表样式全部落空，必须改用后代选择器 */
.product_1.product_3 ul > li,
.product_3 ul > li {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin: 0;
    padding: 11px 16px;
    border-bottom: 1px dashed #e9edf2;
    -webkit-transition: background-color .2s ease;
    transition: background-color .2s ease;
}
.product_1.product_3 ul > li:last-child {
    border-bottom: none;
}
.product_1.product_3 ul > li:hover {
    background: #f7fafd;
}
.product_1.product_3 ul > li > .atilcleli {
    position: relative;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.product_1.product_3 ul > li > .atilcleli > img {
    display: none;
}
.product_1.product_3 ul > li > .atilcleli:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2px;
    background: #c2cbd8;
    border-radius: 50%;
    -webkit-transition: background-color .2s ease;
    transition: background-color .2s ease;
}
.product_1.product_3 ul > li:hover > .atilcleli:before {
    background: #24509a;
}
.product_1.product_3 ul > li > .atilcleli > a {
    padding-left: 0;
    color: #444;
    font-size: 14px;
    line-height: 1.6;
}
.product_1.product_3 ul > li > .atilcleli > a:hover {
    color: #0093dd;
}
.product_1.product_3 ul > li > .date {
    float: none;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 14px;
    color: #9aa4b2;
    font-size: 12px;
}

/* 4.4 产品 / 相册卡片：圆角 + 阴影 + 悬停上浮 */
.img-wrap {
    margin-bottom: 26px;
}
.img-wrap > a {
    display: inline-block;
    overflow: hidden;
    border-radius: 4px;
    line-height: 0;
}
.img-wrap img {
    max-width: 100%;
    border: none;
    border-radius: 4px;
    background: #f2f5f9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    -webkit-transition: box-shadow .3s ease, -webkit-transform .3s ease;
    transition: box-shadow .3s ease, transform .3s ease;
}
.img-wrap:hover img {
    border: none;
    opacity: 1;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
}
.img-wrap p {
    margin: 12px 0 0;
    line-height: 1.5;
}
.img-wrap p a {
    color: #444;
    font-size: 14px;
}
.img-wrap p a:hover {
    color: #0093dd;
    text-decoration: none;
}

/* 4.4.1 产品列表网格（.product_3 里的 .row）
   服务端输出的卡片是 <div class="col-md-4 col-xs-6 img-wrap text-center">，
   这里有三处互相牵连的问题：
     · 本项目 bootstrap.css 被手工改过：.row 的负边距是 ±5px（标准 ±15px）、
       列的内边距也是 5px，两者正好相抵 —— 产品图紧贴卡片左右边框；
       而且 .col-md-4 被写成 width:25%（标准 33.33%），
       所以 ≥992px 时是一行四个，而不是想要的一行三个；
     · <img> 上写死了 style="width:260px;height:138px"，又和 .img-wrap img 的
       max-width:100% 冲突 —— 视口 992~1199px 时列宽只有 222px，
       宽度被压小、高度仍是 138px，产品图被纵向压扁；
     · Default.aspx 的 #Product 漏了 .row 类（Category / Search 都有），
       同一套网格在三个页面上的留白因此不一致，也没有 clearfix。
   注意选择器一律不用 #Product：这几个 div 都带 runat="server"，
   渲染后的 id 未必还叫 Product —— 写成 #Product 的规则会整段落空
   （上一版就是这么失效的）。
   统一成「卡片留白 + 一行三个 + 图片按列宽等比缩放」。 */
.product_3 > .row {
    padding: 16px 15px 0;
}
/* 一行三个：用 33.3333% 压回被改成 25% 的 .col-md-4。
   只覆盖产品卡片，不去改 bootstrap.css —— 站内 Recruit/Detail.aspx.cs
   也用了 col-md-4，全局改动会波及到那里。
   窄屏（<768px）保留 col-xs-6 的一行两个，手机上再挤三个就看不清了。 */
@media (min-width: 768px) {
    .product_3 > .row > .img-wrap {
        width: 33.33333333%;
    }
}
.product_3 > .row .img-wrap img {
    display: block;
    width: 100%;
    height: auto;
}
/* 标题限一行：产品名长短不一的时候卡片高度才齐整 */
.product_3 > .row .img-wrap p {
    margin: 10px 0 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.product_3 > .row .img-wrap p a {
    color: #333;
    font-size: 14px;
    line-height: 1.6;
}
/* 卡片本身已带 .img-wrap 的 26px 下外边距，分页不用再拉开那么远 */
.product_3 > .row + .pager {
    margin-top: 4px;
}

/* 4.5 分页：轻量胶囊按钮 */
.pager {
    margin: 22px 0 6px;
    letter-spacing: 0;
    font-family: inherit;
}
.pager a,
.pager span.Pager,
.pager span.btnLink,
.pageContent .pager a,
.pageContent .pager span {
    display: inline-block;
    min-width: 34px;
    margin: 0 3px;
    padding: 6px 8px;
    color: #555;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
    background: #fff;
    border: 1px solid #e0e5ec;
    border-radius: 4px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
.pager a:hover,
.pageContent .pager a:hover,
.pager .Pager a:hover {
    color: #fff;
    background: #24509a;
    border-color: #24509a;
    text-decoration: none;
}
.pager .focus span,
.pager span.focus,
.pageContent .pager .focus span {
    color: #fff;
    background: #24509a;
    border-color: #24509a;
}
/* main.css 里有一条 .pager .Pager{ width:100% !important }。
   AspNetPager 输出的按钮本身就带 .Pager 这个类，我们给它加了 display:inline-block 后
   宽度就真的按 100% 生效了 —— 当前页会被撑成整行宽的蓝色横条，
   首页/上一页被挤到上面、下一页/尾页被挤到下面（就是那种断裂排版）。
   必须用同等 !important 且靠后加载才能压回去。 */
.pager .Pager {
    width: auto !important;
    margin-top: 0;
}
/* 当前页数字：main.css 用 .pager .Pager span span 染成 #4FACE9，这里统一到品牌蓝 */
.pager .Pager span span {
    padding: 4px 8px;
    color: #fff;
    background: #24509a;
}

/* 4.6 内容区底部留白，避免紧贴页脚 */
.container {
    padding-bottom: 26px;
}

/* --------------------------------------------------------------------------
   5. 表单控件：聚焦反馈统一
   -------------------------------------------------------------------------- */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #0093dd;
    box-shadow: 0 0 0 2px rgba(0, 147, 221, .15);
}
.input_t,
.input_tp,
.input_tt,
.Button_cha,
.Button_cha1,
.btn1,
.btn6 {
    transition: background-color .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.input_t:hover,
.input_tp:hover,
.input_tt:hover,
.Button_cha:hover,
.Button_cha1:hover {
    opacity: .92;
    box-shadow: 0 3px 10px rgba(54, 154, 210, .35);
}

/* 5.1 首页三栏提交按钮：配色对齐页头「客服热线」
   main.css 第 808~810 行给 .input_t / .input_tp / .input_tt 写的是 #369ad2，
   而页头「客服热线」.divtoptel 是 #0093dd，两个蓝摆在同一屏里明显不是一个色。
   这里只改颜色，宽高 / 内外边距 / 浮动等布局属性一律不碰。
   边框与文字阴影原为 #136ac1 / #1a64bf（是配 #369ad2 的深蓝），
   底色换成亮蓝后留着会显脏，故同步改为 #0093dd 的同色系深色。 */
.input_t,
.input_tp,
.input_tt {
    background-color: #0093dd;
    border-color: #007cba;
    text-shadow: 0 1px 0 #0074af;
}
/* hover 阴影原本写死成 rgba(54,154,210,.35)，正是旧底色 #369ad2 的透明度版，
   这里对齐品牌色。上面那条规则里的 opacity:.92 不受影响，保持原样。 */
.input_t:hover,
.input_tp:hover,
.input_tt:hover {
    box-shadow: 0 3px 10px rgba(0, 147, 221, .35);
}

/* --------------------------------------------------------------------------
   6. 响应式适配
   -------------------------------------------------------------------------- */

/* 平板：页头分两行 —— 第一行 logo + 客服热线，第二行导航 */
@media (max-width: 991px) {
    .div_top {
        min-height: 0;
    }
    .div_top > .content {
        min-height: 0;
        padding: 12px 15px 6px;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .div_top .logo img {
        height: 58px;
        max-height: 62px;
    }
    .div_top .nav_53 {
        -webkit-flex: 0 0 100%;
        flex: 0 0 100%;
        -webkit-order: 3;
        order: 3;
        margin-top: 8px;
        padding-top: 4px;
        border-top: 1px solid #eee;
    }
    .div_top .nav_navbar {
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }
    .div_top .nav_navbar > li > a {
        padding: 9px 12px;
        font-size: 14px;
    }
}

/* 手机：隐藏客服热线，导航横向滑动，二级菜单收起 */
@media (max-width: 767px) {
    .div_top .divtoptel {
        display: none;
    }
    .div_top .nav_navbar {
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }
    .div_top .nav_navbar > li > a {
        padding: 9px 10px;
        font-size: 13px;
    }
    /* 触屏无 hover，收起二级菜单避免溢出屏幕 */
    .div_top #nav_all li > ul {
        display: none !important;
    }

    /* 固定宽度模块在手机端改为自适应 */
    .div_pn,
    .parter_li,
    .div_pn_tc,
    .div_ddggcemt,
    .footdiv_menulis,
    .dic_centent,
    .index_cjwt,
    .index_cjwt1,
    .div_pn_t {
        width: 100%;
        max-width: 100%;
    }
    .div_pn,
    .div_pn_t {
        height: auto;
        min-height: 0;
    }

    #footer ul.footerNav li {
        margin: 0 8px;
        line-height: 26px;
    }
}

/* 小屏手机 */
@media (max-width: 480px) {
    .div_top .logo img {
        height: 48px;
        max-height: 52px;
    }
    .div_top .nav_navbar > li > a {
        padding: 8px 9px;
    }
}

/* --------------------------------------------------------------------------
   7. 首页：Banner / 登录·价格·查询 三栏 / 合作伙伴
   -------------------------------------------------------------------------- */

/* 7.0 首页 Banner 轮播
   banner.css 给 .slick 和 .slick img 都写死了 height:420px：
     · <img> 被强行拉到 420px，不是这个比例的图会被纵向拉伸变形；
     · 手机端同样占 420px，几乎吃掉一整屏；
     · .slick-slider 自带 margin-bottom:30px，与下方三栏之间多出一截空白。
   这里只做覆盖，不改 banner.css 原件。
   高度保留固定值（而不是 auto）：轮播初始化前几张图是竖排堆叠的，
   没有固定高度 + overflow:hidden 会先闪一下全部大图。 */
.slick {
    height: 420px;
    margin-bottom: 0;
}
.slick img {
    display: block;
    width: 100%;
    height: 420px;
    /* 按原比例裁切填满，避免拉伸变形（旧内核不支持时退回原有表现） */
    object-fit: cover;
}
/* 左右箭头：原先是 55×80 的纯黑半透明方块，过于笨重，
   改成克制的圆角按钮，悬停才转为品牌蓝 */
.slick-prev,
.slick-next {
    width: 42px;
    height: 60px;
    margin-top: -30px;
    background-color: rgba(0, 0, 0, .18);
    border-radius: 4px;
    opacity: .6;
    -webkit-transition: opacity .25s ease, background-color .25s ease;
    transition: opacity .25s ease, background-color .25s ease;
}
.slick-prev:hover,
.slick-next:hover {
    background-color: rgba(36, 80, 154, .8);
    opacity: 1;
}
.slick-prev:before,
.slick-next:before {
    color: #fff;
    font: 30px/60px "Microsoft YaHei", Arial, sans-serif;
}
/* 指示点：从右下角挪到底部居中（常规轮播位置），
   加半透明白边，浅色图上也能看清 */
.slick-dots {
    right: 0;
    left: 0;
    bottom: 12px;
    width: auto;
    text-align: center;
}
.slick-dots li button {
    border: 1px solid rgba(255, 255, 255, .85);
    background-color: rgba(255, 255, 255, .45);
}
.slick-dots .slick-active button {
    background-color: #24509a;
    border-color: #fff;
}
/* 窄屏逐级降高度，避免 Banner 吃掉整屏 */
@media (max-width: 991px) {
    .slick,
    .slick img {
        height: 320px;
    }
}
@media (max-width: 767px) {
    .slick,
    .slick img {
        height: 200px;
    }
    /* 触屏以滑动为主，左右箭头既挡内容又不好点 */
    .slick-prev,
    .slick-next {
        display: none;
    }
    .slick-dots {
        bottom: 8px;
    }
}
@media (max-width: 480px) {
    .slick,
    .slick img {
        height: 160px;
    }
}

/* 7.1 三栏区域
   原 .divdlogin 固定 200px 高，内部三栏全是浮动元素（不撑开父级），
   窄屏一旦换行就会溢出并与下方"合作伙伴"重叠 → 改为自适应高度 + clearfix。
   clearfix 比 overflow:hidden 安全，不会裁切内部的绝对定位元素。 */
.divdlogin {
    height: auto;
    padding: 30px 0 24px;
    background: #f3f5f8;
    border-top: 1px solid #e9edf2;
    border-bottom: 1px solid #e9edf2;
}
.divdlogin > .content {
    min-height: 0;
}
.divdlogin > .content:after {
    content: "";
    display: table;
    clear: both;
}

/* 7.2 三栏：统一盒模型与浅色分隔线 */
.divdlogin .div_loggin,
.divdlogin .div_price,
.divdlogin .div_track {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: auto;
    min-height: 150px;
    padding-right: 18px;
    border-right: 1px solid #e6ebf2;
}
.divdlogin .div_track {
    padding-right: 0;
    border-right: none;
}

/* 7.3 图标块圆角，观感更柔和 */
.divdlogin .div_dimgs {
    border-radius: 8px;
}

/* 7.3.1 首页新闻中心（.divnews）
   这一块此前没有任何样式：.divnews / .title22 / .titlename / .product_33 /
   .title22_more 全站查无规则，等于纯浏览器默认渲染 —— 栏目名是黑色普通文字、
   列表带默认圆点和 40px 缩进、日期被 pull-right 甩到栏目中间。

   另有三个结构性缺陷（都会让整块"糊在一起"）：
     1) 标题块 .pn_hd 只命中 main.css 的版本，不是 7.4 里修合作伙伴时那套：
        写死 width:1000px + height:45px，而内部 h2 和 .div_pn_a 都是
        float:left + width:100% —— 45px 装不下"20px 标题 + 30px 副标题"，
        溢出后直接压到下面的新闻列表上；1000px 也和全站 1200px 栅格对不齐。
     2) 两栏的包裹层 <div class=""> 漏了 .row，两个 col-sm-6 浮动无人包住，
        父级高度塌陷成 0 → 紧随其后的"合作伙伴"整块压到新闻列表上
        （这正是截图里两者重叠的原因）。
     3) 栏目 2（#News2）当前没有文章，是个空的 col-sm-6，白占右半行。

   下面按全站既有语言重排：蓝色标题条 + 白色卡片 + 虚线分隔，两块并排；
   某栏目为空时自动让另一栏占满整行。
   注意作用域一律收在 .divnews 内 —— footerjbyw.aspx.cs 里还有一份
   生成同样 class 的 CreateNews1，不限定会把那个页面一起改掉。 */
.divnews {
    /* .divdlogin（首页三栏）是 float:left，且它后面没有任何清除，
       浮动盒会一直延伸进本节（实测：三栏 y=520..768，而本节也从 y=520 开始，
       两者重叠 248px）。不写 clear 的话，本节标题的行盒会被这个浮动整个
       往下挤到浮动底部 —— 实测 h2 高 252px、文字却贴在盒子最下面，
       上方空出 221px；同时本节新加的白色背景会反过来盖住三栏的下半部分。
       clear 之后本节从三栏下方正常开始，两个问题一起消失。 */
    clear: both;
    padding: 26px 0 30px;
    background: #fff;
    border-top: 1px solid #eef2f7;
}
/* .content 自身没有内边距，窄屏下卡片会贴住屏幕边缘 */
.divnews > .content {
    padding-left: 15px;
    padding-right: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* 标题块：与 7.4 合作伙伴区同样处理 —— 取消固定宽高与浮动，交回文档流 */
.divnews .pn_hd {
    float: none;
    width: 100%;
    height: auto;
    margin-bottom: 18px;
    text-align: center;
}
.divnews .pn_hd h2 {
    float: none;
    width: 100%;
    color: #24509a;
    font-size: 22px;
    line-height: 1.4;
    letter-spacing: 1px;
}
.divnews .div_pn_a {
    float: none;
    width: 100%;
    height: auto;
    margin-top: 6px;
    color: #9aa4b2;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 1px;
}

/* 两栏：改用 flex。既自动包住子项（高度不再塌陷、不再压住合作伙伴），
   又能在某栏 :empty 时让它退出占位、另一栏 flex-grow 吃满整行。
   子项上的 col-* 是浮动，而 float 对 flex 项无效，不用额外去抢。 */
.divnews .ss-container > div {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 24px;
}
.divnews .ss-container > div > .col-sm-6 {
    float: none;
    width: auto;
    max-width: 100%;
    min-height: 0;
    margin-top: 0;
    padding: 0;
    -webkit-flex: 1 1 320px;
    flex: 1 1 320px;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 6px;
    overflow: hidden;
}
/* 该栏目暂无文章时不占位。这里不能用 id：这些 div 带 runat="server"，
   渲染出的 id 不保证还叫 News1/News2（产品页的 #Product 就变成了
   ctl00_cphMain_Product），一律走结构选择器。 */
.divnews .ss-container > div > .col-sm-6:empty {
    display: none;
}

/* 栏目名 */
.divnews .title22 {
    height: 42px;
    padding: 0 16px;
    line-height: 42px;
    background: #f2f6fc;
    border-bottom: 1px solid #e6ebf2;
    border-left: 3px solid #24509a;
    color: #24509a;
    font-size: 16px;
    font-weight: 600;
}

/* 列表：去掉默认圆点与 40px 缩进，标题靠左、日期靠右、长标题省略 */
.divnews .product_33 ul {
    margin: 0;
    padding: 8px 16px 4px;
    list-style: none;
}
.divnews .product_33 ul li {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px dashed #eaeff5;
    line-height: 1.6;
}
.divnews .product_33 ul li > span:first-child {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0; /* 没有它 text-overflow 不生效 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 箭头图原来带行内 style="margin-top:-5px"，这里归一 */
.divnews .product_33 ul li img {
    margin: 0 6px 0 0;
    vertical-align: middle;
}
.divnews .product_33 ul li a {
    color: #333;
    font-size: 14px;
}
.divnews .product_33 ul li a:hover {
    color: #0093dd;
    text-decoration: none;
}
/* .date 带 bootstrap 的 pull-right（float:right !important）。
   li 已是 flex 容器，float 对 flex 项无效，所以不需要 !important 去抢。 */
.divnews .product_33 .date {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 12px;
    color: #9aa4b2;
    font-size: 13px;
}

/* "更多"：默认文字是隐藏的（lblMore 的 Visible=False），
   有内容时作为卡片右下角入口 */
.divnews .title22_more {
    display: block;
    padding: 0 16px 14px;
    text-align: right;
    font-size: 13px;
}
.divnews .title22_more a {
    color: #8a95a5;
}
.divnews .title22_more a:hover {
    color: #0093dd;
    text-decoration: none;
}

@media (max-width: 767px) {
    .divnews .title22 {
        height: 38px;
        line-height: 38px;
        font-size: 15px;
    }
    .divnews .product_33 ul {
        padding: 6px 12px 2px;
    }
    .divnews .product_33 .date {
        margin-left: 8px;
        font-size: 12px;
    }
    .divnews .title22_more {
        padding: 0 12px 12px;
    }
}

/* 7.4 合作伙伴区域
   原来几处固定尺寸叠在一起，导致整块区域与全站 1200px 栅格错位：
     · .div_pn 是 width:1200px + padding:0 15px，content-box 下实际宽 1230px，
       比全站其它容器宽 30px，两侧各凸出 15px；
     · .pn_hd 固定 1000px，里面 h2 / .div_pn_a 都是 float + width:100%，
       两个浮动子元素撑不开 45px 的固定高度 → 父级高度塌陷、既不占位也不撑高；
     · iframe.parter_li 是 float:left + width:1200px，在容器里靠左，
       而且没有写 height，只能吃浏览器默认的 150px；
       浮动元素又不会被 .div_pnfiv 包住（该容器已改成 height:auto），
       于是它溢出到区块外，压到下方页脚上。
   下面统一改为「满宽 + 盒模型 + 居中」，定位交回正常文档流。 */
.div_pnfiv {
    float: none;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 26px 0 30px;
    background: #fff;
    border-top: 1px solid #eef2f7;
}
.div_pn {
    width: 100%;
    max-width: 1200px;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    padding: 0 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* 标题块取消浮动，改由文档流撑高，挡住下方 iframe */
.div_pn .pn_hd {
    float: none;
    width: 100%;
    height: auto;
    margin-bottom: 18px;
    text-align: center;
}
.div_pn .pn_hd h2 {
    float: none;
    width: 100%;
    color: #24509a;
    font-size: 22px;
    line-height: 1.4;
    letter-spacing: 1px;
}
/* 副标题不再各自占一行浮动高度，改为紧随标题的块级文本 */
.div_pn .div_pn_a {
    float: none;
    width: 100%;
    height: auto;
    margin-top: 6px;
    color: #9aa4b2;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 1px;
}
/* 合作伙伴轮播条
   --------------
   首页这条 logo 是内联的，不是 iframe（markup 里早已没有 .parter_li，
   原来那段 iframe 样式已成死代码）。实测原状：
     · 轮播压根没初始化 —— #example 上没有任何 slick/bxCarousel 类；
     · .content_pn / .bx_container / #example 高度全是 0（li 浮动导致父级塌陷）；
     · 10 个 logo 各约 160px 横排共 1600px，容器只有 1000px，
       后面 4 个溢出到区块外，既不裁也不滚。
   滚动改为纯 CSS 无缝方案（理由见 Default.aspx 里的注释），不引入任何插件，
   样式一律收在 .partner-track 作用域内，不碰 Banner 的 fade 轮播。 */
.div_pn .in_partner,
.div_pn .content_pn,
.div_pn .bx_wrap,
.div_pn .bx_container {
    float: none;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.div_pn .content_pn {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0;
}
/* .bx_wrap 兼作滚动视口：轨道比它宽，多出来的部分在这里被裁掉 */
.div_pn .bx_wrap {
    overflow: hidden;
}
.div_pn .bx_container {
    overflow: visible;
}

/* 无缝滚动：JS 会把整份 logo 克隆一遍接在后面，于是轨道宽 = 两份内容宽，
   动画平移到 -50% 时正好接回起点，循环处没有接缝。
   flex 让所有 logo 排在同一行且不换行；宽度由内容自己撑开，
   所以视口怎么变都成立 —— 不需要按断点重算「显示几个」。 */
.partner-track {
    display: -webkit-flex;
    display: flex;
    width: -webkit-max-content;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
}
.partner-track.partner-marquee {
    -webkit-animation: partner-marquee 30s linear infinite;
    animation: partner-marquee 30s linear infinite;
    will-change: transform;
}
/* 鼠标放上去暂停，方便点开某个 logo */
.partner-track.partner-marquee:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
@-webkit-keyframes partner-marquee {
    from { -webkit-transform: translateX(0); }
    to   { -webkit-transform: translateX(-50%); }
}
@keyframes partner-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* logo 卡片：白底描边，悬停描边加深并轻微抬起 */
.partner-track li {
    margin: 0;
    padding: 0 8px;
    list-style: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.partner-track li a {
    display: block;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 6px;
    text-align: center;
    -webkit-transition: border-color .25s ease, box-shadow .25s ease;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.partner-track li a:hover {
    border-color: #b9cfea;
    box-shadow: 0 3px 10px rgba(36, 80, 154, .12);
}
/* logo 一律按图片原色显示。
   这里原先加了 filter: grayscale(100%) 配 opacity: .72 做「灰度、悬停还原彩色」，
   但合作方 logo 的辨识度主要就靠它自己的品牌色（中国邮政的绿、FedEx 的紫橙、
   DHL 的黄红…），压成灰之后反而认不出是哪一家，故去掉滤镜与透明度。
   悬停反馈保留在外层卡片上：见上面的 .partner-track li a:hover 描边与投影。 */
.partner_img {
    display: block;
    width: 120px;
    height: 50px;
    margin: 0 auto;
    border: 0;
}

@media (max-width: 767px) {
    .partner_img {
        width: 96px;
        height: 42px;
    }
    .partner-track li a {
        padding: 6px 8px;
    }
}

/* --------------------------------------------------------------------------
   7.6 价格查询的「地区」下拉（Chosen 插件）
   Themes/Default/chosencountry.css 是 Chosen 的原生皮肤，放进首页这一列里
   显得又扁又挤，具体是：
     · 收起框与展开列表同宽（都只有 160px），国家名被截成「US 美国 UNITE...」，
       列表里更长的名字（如 BRITISH INDIAN OCEAN TERRITORY）同样放不下；
     · 列表项 min-height:30px 再加 5px 上下内边距，content-box 下实际 40px 一行，
       二百多个国家要滚很久，一屏只看得见五六行；
     · 全站没有 chosen-sprite.png，也没有引入 Chosen 的默认皮肤，
       而箭头和搜索放大镜都靠那张精灵图的 background-position 来画 ——
       缺图后右侧是空白、搜索框是个空盒子，观感像坏掉；
     · 选中项用 #ff5c00 橙色高亮，与全站品牌蓝完全不搭。
   下面统一成与同列 .inputlogin / .weight 一致的观感，改动限定在 .div_price 内。
   -------------------------------------------------------------------------- */

/* 收起状态：与同列输入框同高、同边框 */
.div_price .chosen-container {
    font-size: 14px;
    vertical-align: middle;
}
.div_price .chosen-container-single .chosen-single {
    height: 30px;
    padding: 0 0 0 10px;
    line-height: 28px;
    color: #555;
    background: #fff;
    border: 1px solid #d5dbe3;
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.div_price .chosen-container-single .chosen-single span {
    margin-right: 24px;
    color: #555;
}
.div_price .chosen-container-single .chosen-single div {
    width: 26px;
    height: 28px;
}
/* 缺图导致右侧没有箭头，这里用纯 CSS 画一个 */
.div_price .chosen-container-single .chosen-single div b {
    background: none;
}
.div_price .chosen-container-single .chosen-single div b:before {
    position: absolute;
    top: 12px;
    right: 8px;
    width: 0;
    height: 0;
    border-top: 5px solid #8b97a8;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: "";
}

/* 展开状态：原样式会挂上蓝色描边和 0 0 5px 的黑色投影，这里收敛一些 */
.div_price .chosen-container-active .chosen-single,
.div_price .chosen-container-active.chosen-with-drop .chosen-single {
    background: #fff;
    border: 1px solid #9dbfe8;
    -webkit-box-shadow: none;
    box-shadow: none;
}
/* 只放宽下拉列表、不动收起框：收起框加宽会顶到左侧的「地区：」标签换行。
   列表加宽后长国家名才读得全 */
.div_price .chosen-container .chosen-drop {
    min-width: 280px;
    border: 1px solid #d5dbe3;
    border-top: 0;
    border-radius: 0 0 3px 3px;
    -webkit-box-shadow: 0 8px 18px rgba(36, 80, 154, .14);
    box-shadow: 0 8px 18px rgba(36, 80, 154, .14);
}

/* 搜索框：补上被缺图吃掉的观感 */
.div_price .chosen-container-single .chosen-search {
    padding: 8px 8px 4px;
}
.div_price .chosen-container-single .chosen-search input[type="text"] {
    height: 28px;
    padding: 4px 8px;
    color: #555;
    background: #fff;
    border: 1px solid #d5dbe3;
    border-radius: 3px;
}
.div_price .chosen-container-single .chosen-search input[type="text"]:focus {
    border-color: #9dbfe8;
    outline: 0;
    -webkit-box-shadow: 0 0 0 2px rgba(47, 125, 225, .12);
    box-shadow: 0 0 0 2px rgba(47, 125, 225, .12);
}

/* 选项列表：行高收紧后每行约 34px（原 40px），把列表高度从 240px 收到 200px，
   展开时压在下方合作伙伴区上的面积小一些，可见条数基本不变。
   另外去掉原样式那 4px 的错位内边距 */
.div_price .chosen-container .chosen-results {
    margin: 0;
    padding: 4px 0 6px;
    max-height: 200px;
}
.div_price .chosen-container .chosen-results li {
    min-height: 0;
    padding: 7px 12px;
    color: #555;
    font-size: 13px;
    line-height: 1.5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* 分组标题（常用地区 / 所有地区）：浅底 + 小号字，两个分组一眼能分开 */
.div_price .chosen-container .chosen-results li.group-result {
    padding: 6px 12px;
    color: #8b97a8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    background: #f5f7fa;
}
.div_price .chosen-container .chosen-results li.active-result:hover {
    color: #24509a;
    background: #f0f5fc;
}
/* 高亮项：替换原来的橙色 #ff5c00 */
.div_price .chosen-container .chosen-results li.highlighted {
    color: #fff;
    background: #2f7de1;
}
.div_price .chosen-container .chosen-results li em {
    color: inherit;
    font-style: normal;
    font-weight: 700;
    text-decoration: none;
}

/* 「重量」输入框与「地区」下拉同处一列，边框一并统一，
   顺带用 border-box 把宽度卡在 160px，两行右边缘对齐 */
.div_price .weight {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 30px;
    padding: 0 8px;
    color: #555;
    border: 1px solid #d5dbe3;
    border-radius: 3px;
}
.div_price .weight:focus {
    border-color: #9dbfe8;
    outline: 0;
    -webkit-box-shadow: 0 0 0 2px rgba(47, 125, 225, .12);
    box-shadow: 0 0 0 2px rgba(47, 125, 225, .12);
}

/* 7.5 首页响应式：三栏由并排 → 两栏 → 单栏
   断点从 991px 提到 1140px。原因：每栏内部要「图标 140px + 表单」并排，
   跟踪栏的表单里还并着 17TRACK 徽标，三栏并排时每栏实际需要约 370px，
   即内容区 1110px。原来 991~1130px 是一段空档 —— 既没切到两栏、栏内又
   放不下，于是整块错位（详见 7.7 的说明）。提到 1140px 后这一段落在两栏，
   每栏 550px 以上，图标和表单从容并排。 */
@media (max-width: 1140px) {
    .divdlogin .div_loggin,
    .divdlogin .div_price {
        width: 50%;
    }
    .divdlogin .div_price {
        padding-right: 0;
        border-right: none;
    }
    .divdlogin .div_track {
        width: 100%;
        margin-top: 18px;
        padding-top: 18px;
        padding-right: 0;
        border-right: none;
        border-top: 1px dashed #dfe6ef;
        /* 独占一行时把「图标 + 表单」整组居中，否则右侧会空出一大片 */
        -webkit-justify-content: center;
        justify-content: center;
    }
}
@media (max-width: 767px) {
    .divdlogin .div_loggin,
    .divdlogin .div_price,
    .divdlogin .div_track {
        float: none;
        width: 100%;
        margin-top: 0;
        padding-top: 0;
        padding-right: 0;
        border-right: none;
        border-top: none;
    }
    .divdlogin .div_loggin,
    .divdlogin .div_price {
        margin-bottom: 18px;
        padding-bottom: 18px;
        border-bottom: 1px dashed #dfe6ef;
    }
    .div_pn .pn_hd h2 {
        font-size: 19px;
    }
}
@media (max-width: 480px) {
    /* 7.6 里给下拉列表加的 280px 最小宽度在窄屏会顶出屏幕，
       收到 240px：长国家名仍读得全，又不会横向溢出。
       （这里原有给 ul 写死 160px、给输入框写死 128px 的规则，
        已由 7.7 的流体宽度接管，故一并移除。） */
    .div_price .chosen-container .chosen-drop {
        min-width: 240px;
    }
}

/* --------------------------------------------------------------------------
   7.7 三栏内部排版（.div_loggin / .div_price / .div_track）
   --------------------------------------------------------------------------
   main.css 把每栏内部写成了两个「固定宽度的浮动块」：
       .div_dimgs   { width:140px; height:140px; float:left; }         ← 图标
       .div_loggin ul { width:220px; float:left; margin:20px 0 0 10px; }
       .div_loggin ul li { width:220px; float:left; }
       .inputlogin  { width:160px; }   .weight { width:160px; }
       .track_tex1  { width:160px; float:left; }
       .div_17img   { position:absolute; margin-left:162px; }          ← 用绝对定位
                                                                         硬怼到输入框右侧
   图标与表单并排至少要 140 + 10 + 220 = 370px，跟踪栏还要再多出徽标那部分
   （徽标是绝对定位、靠溢出栏外来摆放的）。而每栏宽度是 33.33%：
       视口 1400 → 每栏 400px，勉强并排（实测徽标已越出栏右缘 20px）；
       视口 1080 → 每栏 351px，差 19px 放不下 → 表单整块掉到图标下方，
                    栏高从 172px 涨到 332px，图标右侧空出一大片。
   这就是「窗口一缩小排版就不好看」的成因。
   下面把栏内改成 flex：图标固定宽度，表单吃掉剩余宽度并允许收缩，控件宽度全部
   改为流体（桌面尺寸不变，空间不足时才收缩），于是「图标 + 表单」能一直并排；
   真窄到放不下时，表单整行落到图标下方并占满栏宽，而不是像原来那样只占左半截。
   顺带把 .div_17img 的绝对定位整个去掉 —— 它靠 margin-left:162px 硬算偏移，
   输入框宽度一变就对不上，改回普通流后由 flex 排布。 */
.divdlogin .div_loggin,
.divdlogin .div_price,
.divdlogin .div_track {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
/* 图标尺寸不变，只是不再浮动（flex 子项里 float 本就无效，显式清掉避免歧义） */
.divdlogin .div_dimgs {
    float: none;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
/* 表单容器：吃掉图标右侧的剩余宽度，并允许收缩。
   上限 320px —— 跟踪栏独占一行时，不至于把输入框拉成一条超长的横条 */
.divdlogin .div_loggin ul,
.divdlogin .div_price ul,
.divdlogin .div_track ul {
    float: none;
    width: auto;
    max-width: 320px;
    -webkit-flex: 1 1 180px;
    flex: 1 1 180px;
    min-width: 0;
    margin: 20px 0 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* 每项自成一行；标签与控件用 flex 排，控件吃掉剩余宽度、空间不足时收缩 */
.divdlogin .div_loggin ul li,
.divdlogin .div_price ul li {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    float: none;
    width: auto;
    height: auto;
    min-height: 0;
    margin-bottom: 10px;
}
/* 跟踪栏这一项里是「输入框 + 徽标」两个并排元素，按顶边对齐。
   这里刻意不加 flex-wrap：徽标是固定宽的，空间不够时应该让输入框收缩，
   而不是把徽标挤到下一行去（试过 wrap，1400px 下徽标就掉到输入框下面了）。 */
.divdlogin .div_track ul li {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    float: none;
    width: auto;
    height: auto;
    min-height: 0;
    margin-bottom: 10px;
}

/* 输入框：桌面上限仍是 160px，空间不足时跟着栏宽收缩
   （原来是写死的 160px，栏一窄就直接溢出） */
.divdlogin .inputlogin,
.divdlogin .weight {
    width: auto;
    max-width: 160px;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* Chosen 会给 .chosen-container 写死行内 width，这里也要允许它收缩 */
.divdlogin .div_price .chosen-container {
    max-width: 160px;
    min-width: 0;
}

/* 跟踪栏：输入框与 17TRACK 徽标并排，徽标回到普通流 */
.divdlogin .track_tex1 {
    float: none;
    width: auto;
    max-width: 160px;
    height: 82px;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.divdlogin .div_17img {
    position: static;
    float: none;
    margin: 0 0 0 8px;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
.divdlogin .div_17img1 {
    height: 82px;
    width: auto;
    max-width: 100%;
}

/* 提交按钮那一行：.div_input 原来写死 310px 并居中，改为跟随表单宽度左对齐，
   与它上方的输入框左边对齐（与另两栏按钮的观感一致） */
.divdlogin .div_input {
    width: auto;
    max-width: 100%;
    text-align: left;
}
.divdlogin .input_t,
.divdlogin .input_tp,
.divdlogin .input_tt {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   8. 首页浮动公告弹窗（.float_layer / #miaov_float_layer）
   Bug 修复：
     这一块此前没有任何样式 —— 全站 CSS 里 .float_layer / .content2 / .wrap2
     一条规则都没有命中，等于裸奔：
       · 右上角两个按钮是空的 <a>，无尺寸无背景，完全看不见，自然点不动；
       · 标题栏 h6 按浏览器默认渲染，自带上下 margin，把标题栏撑得很怪；
       · 内容里的 ul 带默认圆点和 40px 缩进。
     最要命的是 .content2 缺 overflow:hidden —— JS 的最小化动画做的事是把
     .content2 的 height 从当前值动到 0，没有裁切的话内容照样完整露在外面，
     「收起」等于没反应。这是收缩做不出来的真正原因。
     下面按参考图的观感补全：深蓝标题栏 + 白底内容区 + 蓝渐变的最小化/关闭按钮。
     收起展开的交互仍由 Default.aspx 里的 TanChuang() 驱动，逐帧动画在
     js/move.js 的 startMove()，样式只负责让按钮看得见、让内容裁得掉。
   -------------------------------------------------------------------------- */
.float_layer {
    /* JS 会覆盖 position/left/top/display，这里是无脚本时的兜底 */
    position: fixed;
    display: none;
    /* 弹窗外框尺寸 320 × 260：宽固定 320，窄屏再被下面的 max-width 收；
       高由「上下边框各 1px + 标题栏 34px + .wrap2 的 max-height」凑成 260。 */
    width: 320px;
    max-width: calc(100% - 24px);
    background: #fff;
    border: 1px solid #d6dfeb;
    border-radius: 6px;
    box-shadow: 0 12px 32px rgba(19, 42, 84, .16);
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
    /* 圆角要靠裁切才成立，否则标题栏那层深蓝底会从四个角溢出来 */
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* JS 的 repositionFixed() 把 left/top 算成「贴着视口右下角」，
       而 left 定位的是 margin 边、margin-right 会被忽略掉，所以 margin 调不动。
       用 translate 往内挪 12px，四周才有呼吸空间（不改 JS）。 */
    -webkit-transform: translate(-12px, -12px);
    transform: translate(-12px, -12px);
}

/* 标题栏：品牌深蓝 + 白字，右侧给两个按钮留出 92px。
   原来是 #1a1a9e 配 #e60000 红字，深蓝底压着暗红字 —— 两个颜色都落在暗部，
   对比度约 1.8:1（正文建议至少 4.5:1），字几乎糊在底色里。
   换成 7.4 合作伙伴区同一支品牌深蓝，标题走白字。 */
.float_layer h6 {
    position: relative;
    height: 34px;
    margin: 0;
    padding: 0 92px 0 16px;
    background: #2e5fae;
    background: -webkit-linear-gradient(#2e5fae, #24509a);
    background: linear-gradient(#2e5fae, #24509a);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 34px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.float_layer h6 b {
    color: #fff;
    font-weight: 700;
}

/* 右上角两个按钮：半透明白的「玻璃」态。
   原来是 #a8d2f8→#3a7fd5→#2158a8 的三段强渐变，三个蓝阶叠在深蓝标题栏上，
   层次反而显脏，按钮的视觉重量比标题还重。改成白描边 + 低透明白底，
   悬停再提亮一档，层级就落回标题栏之下了。 */
.float_layer h6 a {
    position: absolute;
    top: 6px;
    display: block;
    height: 22px;
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 3px;
    background: rgba(255, 255, 255, .16);
    cursor: pointer;
    -webkit-transition: background-color .2s ease, border-color .2s ease;
    transition: background-color .2s ease, border-color .2s ease;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.float_layer h6 a:hover {
    background: rgba(255, 255, 255, .34);
    border-color: #fff;
}
/* 最小化按钮在左、关闭在右。展开态是 .min（点它收起），
   收起后 TanChuang() 把它切成 .max（点它展开），样式保持一致。 */
.float_layer h6 a.min,
.float_layer h6 a.max {
    right: 44px;
    width: 46px;
}
.float_layer h6 a.close {
    right: 8px;
    width: 30px;
}

/* 最小化 / 展开图标：白色横条 */
.float_layer h6 a.min:after,
.float_layer h6 a.max:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 3px;
    margin: -2px 0 0 -8px;
    background: #fff;
}
/* 关闭图标：白色 × */
.float_layer h6 a.close:after {
    content: "\00d7";
    display: block;
    color: #fff;
    font: 700 18px/20px Arial, Helvetica, sans-serif;
    text-align: center;
}

/* 内容区：overflow:hidden 是收缩能生效的关键，动画改的就是它的 height */
.float_layer .content2 {
    overflow: hidden;
    background: #fff;
}
.float_layer .wrap2 {
    min-height: 40px;
    /* 弹窗总高 = 上下边框各 1px + 标题栏 34px + 这里的内容区。
       按 320 × 260 的外框：260 - 1 - 34 - 1 = 224px。 */
    max-height: 224px;
    padding: 16px 20px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    /* 原来这里是 #c00 —— 而公告标题 / 正文 / 日期三个子元素都没有自己的
       颜色，全把这条继承了下去，于是整个弹窗内容通体是红的。
       正文改用中性深灰，红色只留给真正需要强调的地方。 */
    color: #555;
    font-size: 14px;
    line-height: 1.75;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* 内容长起来时给一条细滚动条，别用系统默认那条灰色粗的 */
.float_layer .wrap2::-webkit-scrollbar {
    width: 8px;
}
.float_layer .wrap2::-webkit-scrollbar-track {
    background: #f4f7fb;
}
.float_layer .wrap2::-webkit-scrollbar-thumb {
    background: #ccd6e4;
    border-radius: 4px;
}
.float_layer .wrap2::-webkit-scrollbar-thumb:hover {
    background: #aebbcd;
}
.float_layer .wrap2 ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 公告里的图片 / 表格不撑破弹窗 */
.float_layer .wrap2 img {
    max-width: 100%;
    height: auto;
}
.float_layer .wrap2 table {
    width: 100%;
}

/* 公告条目：标题 / 正文 / 日期。这三个类名来自 CreateNews1 的输出，
   此前一条规则都没有，于是标题和正文同为 14px 一样大、日期还左对齐
   （类名明明叫 date_right1，实测却贴在内容区左边）。
   这里把层次拉开：标题大一号、深蓝加粗；正文两端对齐；日期右对齐并弱化。 */
.float_layer .wrap2 .divgonggaotitlename1 {
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e4eaf3;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}
.float_layer .wrap2 .divgonggaotitlename1 a {
    color: #24509a;
    text-decoration: none;
}
.float_layer .wrap2 .divgonggaotitlename1 a:hover {
    color: #0093dd;
}
.float_layer .wrap2 .gonggaotext1 {
    color: #555;
    line-height: 1.8;
    /* 中文正文两端对齐，右侧边缘才齐整 */
    text-align: justify;
}
.float_layer .wrap2 .gonggaotext1 a {
    color: #555;
    text-decoration: none;
}
.float_layer .wrap2 .gonggaotext1 a:hover {
    color: #0093dd;
}
/* date_right1 是个 inline 的 <span>，text-align 对 inline 元素不起作用，
   必须先转成块级才能真正靠右 */
.float_layer .wrap2 .date_right1 {
    display: block;
    margin-top: 12px;
    text-align: right;
    color: #9aa4b2;
    font-size: 12px;
}

/* 断点跟着固定宽走：弹窗已缩到 320px，若沿用 560px 断点，视口 560px 时
   这条 calc(100% - 20px) 会算出 540px —— 反而比固定宽还宽，越窄越宽。
   现在是 340px（320 的固定宽 + 左右各 10px 留白），两档刚好衔接。 */
@media (max-width: 340px) {
    .float_layer {
        width: calc(100% - 20px);
        -webkit-transform: translate(-8px, -8px);
        transform: translate(-8px, -8px);
    }
    .float_layer h6 {
        height: 32px;
        padding-right: 88px;
        font-size: 14px;
        line-height: 32px;
    }
    .float_layer h6 a {
        top: 5px;
    }
    .float_layer h6 a.min,
    .float_layer h6 a.max {
        right: 42px;
        width: 42px;
    }
    .float_layer .wrap2 {
        /* 窄屏标题栏收到 32px，外框高度同样保持 260px：260 - 1 - 32 - 1 = 226px */
        max-height: 226px;
        padding: 12px 14px 14px;
        font-size: 13px;
    }
    .float_layer .wrap2 .divgonggaotitlename1 {
        margin-bottom: 6px;
        padding-bottom: 8px;
        font-size: 15px;
    }
    .float_layer .wrap2 .date_right1 {
        margin-top: 10px;
    }
}