/* ==========================================================================
   60 站点 · 首页与副页统一视觉优化（ui-polish.css）
   --------------------------------------------------------------------------
   设计目标：在不改动任何既有样式文件、不触碰任何页面结构的前提下，
   统一配色 / 间距 / 圆角 / 阴影 / 悬浮反馈，并补齐响应式细节。
   本文件始终最后加载，冲突时以本文件为准。
   ========================================================================== */

:root {
    --mc-primary: #093e82;          /* 品牌主色（深蓝） */
    --mc-primary-600: #0f4fa0;      /* 主色浅一档，用于 hover */
    --mc-accent: #e00000;           /* 品牌强调色（红） */
    --mc-ink: #16223a;              /* 标题色 */
    --mc-text: #333a48;             /* 正文色 */
    --mc-muted: #8a93a3;            /* 辅助文字 */
    --mc-line: #e8ecf2;             /* 分隔线 */
    --mc-soft: #f5f7fa;             /* 浅底 */
    --mc-radius: 14px;
    --mc-shadow-sm: 0 4px 14px rgba(16, 34, 66, .07);
    --mc-shadow: 0 10px 26px rgba(16, 34, 66, .10);
    --mc-shadow-lg: 0 18px 44px rgba(16, 34, 66, .16);
    --mc-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------
   1. 基础排版
   --------------------------------------------------------------- */
body {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    color: var(--mc-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    transition: color .3s var(--mc-ease), background-color .3s var(--mc-ease),
                border-color .3s var(--mc-ease), box-shadow .3s var(--mc-ease),
                transform .3s var(--mc-ease);
}

a:hover {
    color: var(--mc-accent);
}

img {
    border: 0;
}

html {
    scroll-behavior: smooth;
}

/* ---------------------------------------------------------------
   2. 首页 · Banner
   --------------------------------------------------------------- */
#Banner {
    position: relative;
}

#Banner .slick,
.slick {
    position: relative;
    overflow: hidden;
    background: #0f2440;
    box-shadow: 0 14px 34px rgba(15, 36, 64, .18);
}

.slick img,
.slick .div_bannerimg {
    display: block;
    width: 100%;
    height: 520px;
    object-fit: cover;
}

.slick-dots {
    bottom: 20px !important;
}

.slick-dots li button {
    height: 6px !important;
    width: 22px !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, .55) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
    transition: width .35s var(--mc-ease), background-color .35s var(--mc-ease);
}

.slick-dots .slick-active button {
    width: 46px !important;
    background: var(--mc-accent) !important;
}

/* ---------------------------------------------------------------
   3. 首页 · 区块容器与分区标题
   --------------------------------------------------------------- */
/* 提示：这里用 body 前缀提高特异性，确保覆盖 Themes/Default/main.css 中的同名规则 */
body .home-area2,
body .home-area3,
body .home-area4,
body .home-area5 {
    float: left;
    width: 100%;
    padding: 56px 0;
}

/* 关键修复：main.css 在 @media(min-width:768px) 给这些区块写死了固定高度
   （home-area3:500px / home-area5:500px / home-area4:400px）。
   固定高度 + 卡片化内容会把溢出内容挤出区块、被页脚背景盖住（表现为"新闻区空白"）。
   统一改为自适应高度，由内容撑开。 */
body .home-area3,
body .home-area5 {
    height: auto;
    min-height: 0;
}

body .home-area4 {
    height: auto;
    min-height: 400px;
}

body .home-area3 {
    background: var(--mc-soft);
}

body .home-area5 {
    background: #fff;
    /* 保险：页脚 #footer 自带 z-index:2，新闻区若溢出会被其深蓝背景盖住。
       这里让新闻区块建立更高层级，任何情况下内容都不会被页脚遮住。 */
    position: relative;
    z-index: 3;
}

.our-header {
    position: relative;
    margin-bottom: 34px;
    padding-top: 0;
}

.our-header h3.titles1 {
    margin: 0;
    padding-bottom: 4px;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.35;
    color: var(--mc-ink);
}

.our-header h3.titles1::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    border-radius: 2px;
    margin: 16px auto 0;
    background: linear-gradient(90deg, var(--mc-accent), var(--mc-primary));
}

/* ---------------------------------------------------------------
   4. 首页 · 产品卡片
   --------------------------------------------------------------- */
#Product .contain,
.c-img .contain {
    position: relative;
    background: #fff;
    border-radius: var(--mc-radius);
    overflow: hidden;
    box-shadow: var(--mc-shadow-sm);
    transition: transform .4s var(--mc-ease), box-shadow .4s var(--mc-ease);
}

#Product .contain:hover,
.c-img .contain:hover {
    transform: translateY(-8px);
    box-shadow: var(--mc-shadow-lg);
}

#Product .cargo-img,
.c-img .cargo-img {
    height: 208px;
    overflow: hidden;
    background: #eef1f6;
}

#Product .cargo-img img,
.c-img .cargo-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--mc-ease);
}

#Product .contain:hover .cargo-img img,
.c-img .contain:hover .cargo-img img {
    transform: scale(1.07);
}

#Product .textbox,
.c-img .textbox {
    padding: 0 18px;
}

#Product .textbox p,
.c-img .textbox p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--mc-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

#Product .contain h3,
.c-img .contain h3 {
    margin: 0;
    padding: 14px 18px 20px;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#Product .contain:hover h3,
.c-img .contain:hover h3 {
    color: var(--mc-accent);
}

/* ---------------------------------------------------------------
   5. 首页 · 业务列表（home-area2）
   --------------------------------------------------------------- */
.home-area2 .ser-box ul li {
    transition: transform .45s var(--mc-ease);
}

.home-area2 .ser-box ul li:hover {
    transform: translateY(-8px);
}

.home-area2 .ser-box ul li h2 {
    color: var(--mc-ink);
    letter-spacing: .5px;
}

.home-area2 .ser-box ul li p {
    color: #7b8493;
}

.home-area2 .server .cloud {
    opacity: .5;
    pointer-events: none;
}

/* ---------------------------------------------------------------
   6. 首页 · 资质/优势卡片（home-area3）
   --------------------------------------------------------------- */
.home-area3 .col-md-20 {
    padding: 0 10px;
    box-sizing: border-box;
}

.home-area3 .zhegnzhibox {
    background: #fff;
    border-radius: var(--mc-radius);
    padding: 26px 22px 20px;
    box-shadow: var(--mc-shadow-sm);
    transition: transform .4s var(--mc-ease), box-shadow .4s var(--mc-ease);
}

.home-area3 .zhegnzhibox:hover {
    transform: translateY(-8px);
    box-shadow: var(--mc-shadow-lg);
}

.home-area3 .zhegnzhiboxt {
    float: none;
    width: 100%;
    font-size: 46px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #396fff, var(--mc-primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home-area3 .zhegnzhibox .heading h3 {
    margin: 12px 0 12px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--mc-ink);
}

.home-area3 .zhegnzhiboxnr {
    float: none;
    width: 100%;
    font-size: 13px;
    line-height: 1.9;
    color: var(--mc-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* ---------------------------------------------------------------
   7. 首页 · 新闻列表（mc-news 全新自包含结构）
   --------------------------------------------------------------------------
   后端 CreateNewsss 已改为输出 .mc-news-* 结构（flex 网格 + 语义化卡片），
   不再使用旧的 newsright/newsLeft 浮动结构，因此不会命中任何历史样式，
   渲染结果完全由本节规则决定。
   注意：切勿对 #Newszui 设置 overflow:hidden——实测它会把该块级容器
   的宽度计算为 0（内容贴右缘、整块不可见），这是本轮"新闻区空白"的最终元凶。
   flex 布局高度由内容决定，也不需要 BFC 包裹。
   --------------------------------------------------------------- */
.mc-news {
    width: 100%;
}

/* 顶部通栏配图 */
.mc-news-banner {
    display: block;
    width: 100%;
    margin-bottom: 18px;
    border-radius: var(--mc-radius);
    overflow: hidden;
    box-shadow: var(--mc-shadow-sm);
    background: linear-gradient(120deg, #0f4fa0, #093e82);
}

.mc-news-banner img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
}

/* 新闻卡片网格（flex，两列，高度由内容决定） */
.mc-news-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.mc-news-card {
    display: flex;
    align-items: center;
    width: calc(50% - 16px);
    margin: 0 8px 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--mc-line);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(16, 34, 66, .04);
    box-sizing: border-box;
    transition: transform .35s var(--mc-ease), box-shadow .35s var(--mc-ease),
                border-color .35s var(--mc-ease);
}

.mc-news-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--mc-shadow);
}

/* 日期块 */
.mc-news-date {
    flex-shrink: 0;
    min-width: 76px;
    padding-right: 18px;
    text-align: center;
    border-right: 1px solid var(--mc-line);
}

.mc-news-date strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mc-primary);
}

.mc-news-date span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--mc-muted);
}

/* 标题 + 摘要 */
.mc-news-body {
    flex: 1;
    min-width: 0;
    padding-left: 20px;
}

.mc-news-body h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--mc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .3s var(--mc-ease);
}

.mc-news-card:hover h3 {
    color: var(--mc-accent);
}

.mc-news-desc,
.mc-news-desc p {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--mc-muted);
}

.mc-news-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ---------------------------------------------------------------
   8. 首页 · 关于区块（home-area4，深色背景图，文字为白）
   --------------------------------------------------------------- */
.home-area4 .about_box {
    background: transparent;
}

.home-area4 .heading44 > h3 {
    font-size: 26px;
    letter-spacing: 1px;
}

.home-area4 .heading44 > h3 hr {
    border: 0;
    border-top: 3px solid var(--mc-accent);
    width: 72px;
    margin: 16px 0 0;
}

.home-area4 .divaboutp4,
.home-area4 .divaboutp4 p {
    font-size: 14px;
    line-height: 2;
    color: rgba(255, 255, 255, .88);
}

/* ---------------------------------------------------------------
   9. 副页 · 面包屑 / 侧栏 / 内容区
   --------------------------------------------------------------- */
/* 用 body 前缀提高特异性：Themes/Default/main.css 在本文件之后加载，
   会把 .divneirong 的 padding-bottom 压回 20px，导致副页底部留白与首页区块不一致。
   这里统一为与首页区块相同的 56px 收尾。 */
body .divneirong {
    background: var(--mc-soft);
    padding: 26px 0 56px;
}

/* 去掉 css/main.css 中全局 .container{padding-top:57px} 在副页顶部多出的空白 */
.divneirong .container {
    padding-top: 0;
}

/* 侧栏下方空的"联系我们"占位块：后台未配置时不占位，避免底部多出一段空隙 */
body .divneirong .row > .col-md-3 > .row > div:empty {
    display: none;
}

/* 顶部横幅（若后台配置） */
.divbanner img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    margin-bottom: 20px;
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow-sm);
}

/* 面包屑（body 前缀：Themes/Default/main.css 在本文件之后加载，
   其 .title8{width:1101px;height:30px} 会覆盖这里的自适应设置，
   导致面包屑变成一条又窄又扁的细条） */
body .title8 {
    display: block;
    float: none;
    clear: both;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 18px;
    padding: 13px 20px !important;
    line-height: 1.6;
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--mc-shadow-sm);
    box-sizing: border-box;
}

/* 面包屑内容 span 被主题样式浮动，导致 .title8 高度塌陷（实测仅剩 26px 行高）。
   body 前缀压过主题浮动，并给容器补清除浮动双保险。 */
body .title8 span.more {
    float: none;
    display: inline-block;
    height: auto;
    line-height: 1.6;
    font-size: 13px;
    color: var(--mc-muted);
}

body .title8::after {
    content: "";
    display: block;
    clear: both;
}

.title8 span.more a {
    color: var(--mc-muted);
}

.title8 span.more a:hover {
    color: var(--mc-accent);
}

.title8 span.more a:last-child {
    color: var(--mc-primary);
    font-weight: 600;
}

/* 侧栏分类 */
.product_1n {
    float: none;
    width: 100%;
    margin-bottom: 20px;
    padding: 10px;
    background: #fff;
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow-sm);
    box-sizing: border-box;
    overflow: hidden;
}

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

body .product_1n ul li {
    margin: 0 0 2px;
    padding: 0 !important;
    line-height: 1.4;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
}

/* 关键：箭头小图 arrow2.gif 是 li 的直接子元素（在 a 之前），
   旧规则 .product_1n ul li a img 匹配不到它，图片以行内元素渲染，
   每个列表项因此多出一行高度（实测 li 高 77px，其中图片行约 17px）。 */
body .product_1n ul li img {
    display: none !important;
}

.product_1n ul li a {
    display: block;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    color: #3c4455;
    border-left: 3px solid transparent;
}

.product_1n ul li a img {
    display: none;
}

.product_1n ul li a::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 10px;
    vertical-align: middle;
    border-radius: 50%;
    background: #c3cad6;
    transition: background-color .3s var(--mc-ease);
}

.product_1n ul li a:hover {
    background: var(--mc-soft);
    color: var(--mc-primary);
    border-left-color: var(--mc-accent);
}

.product_1n ul li a:hover::before {
    background: var(--mc-accent);
}

.product_1n ul li a.hover_1 {
    background: var(--mc-primary);
    color: #fff;
    border-left-color: var(--mc-accent);
}

.product_1n ul li a.hover_1::before {
    background: #fff;
}

/* 内容区卡片 */
.product_3 {
    margin-bottom: 24px;
    padding: 26px 30px 34px;
    background: #fff;
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow-sm);
    box-sizing: border-box;
}

/* 内容标题栏：不再让 a 的红色下划线去"压"容器底线——
   主题 CSS 对 .divtitlename a 有额外的 padding/margin，导致 a 高出容器、
   红线与灰线错位分离（截图中的双线）。改为容器单线 + 标题文字主色，彻底消除错位。 */
body .divtitlename {
    float: none;
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 20px;
    padding: 0 0 12px;
    border-bottom: 2px solid var(--mc-line);
    box-sizing: border-box;
}

body .divtitlename a {
    display: inline-block;
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--mc-ink);
    border-bottom: none;
    text-decoration: none;
    transition: color .3s var(--mc-ease);
}

body .divtitlename a::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 18px;
    margin-right: 10px;
    vertical-align: -2px;
    border-radius: 2px;
    background: var(--mc-accent);
}

body .divtitlename a:hover {
    color: var(--mc-primary);
}

.product_3 p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 2;
    color: #4a5364;
}

.product_3 h1,
.product_3 h2,
.product_3 h3,
.product_3 h4 {
    color: var(--mc-ink);
    line-height: 1.5;
}

.product_3 img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 14px auto;
    border-radius: 10px;
}

.product_3 table {
    width: 100% !important;
    border-collapse: collapse;
    margin: 16px 0;
}

.product_3 table th,
.product_3 table td {
    padding: 10px 12px;
    border: 1px solid var(--mc-line);
    line-height: 1.7;
}

.product_3 a {
    color: var(--mc-primary-600);
}

.product_3 a:hover {
    color: var(--mc-accent);
}

/* ---------------------------------------------------------------
   10. 页脚
   --------------------------------------------------------------- */
#footer {
    padding-top: 52px;
}

/* 标题：居中 + 居中装饰短线 */
#footer .foo-one h3 {
    margin: 0 auto 30px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
}

#footer .foo-one h3::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin: 12px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--mc-accent), var(--mc-primary));
}

/* 清掉历史 float（浮动的 flex 容器会收缩到内容宽，导致卡片挤在左侧），
   并兜底显示当前页脚块（模板 JS 会给 .w 留下内联 display:none，
   部分环境（如旧内核）JS 中断时页脚会整体消失，!important 覆盖内联样式救回） */
#footer .footer .w.now {
    display: block !important;
}

/* 二维码 + 联系信息横向排布 */
#footer .foo-box {
    display: flex;
    float: none;
    align-items: center;
    gap: 36px;
}

#footer .foo-two {
    flex-shrink: 0;
    margin: 0;
}

#footer .foo-two img {
    display: block;
    max-width: 128px;
    padding: 8px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

/* 联系信息：横向等分卡片 */
#footer .footworight {
    flex: 1;
    min-width: 0;
    display: flex;
    float: none;
    align-items: stretch;
    gap: 18px;
}

#footer .fooflex {
    flex: 1;
    margin: 0;
    padding: 20px 24px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    transition: background .3s var(--mc-ease), transform .3s var(--mc-ease);
}

#footer .fooflex:hover {
    background: rgba(255, 255, 255, .09);
    transform: translateY(-3px);
}

#footer .fooflex > div,
#footer .fooflex > div span {
    font-size: 13px;
    line-height: 2.3;
    color: rgba(255, 255, 255, .78);
}

#footer .fooflex > div span {
    display: inline-block;
}

/* 版权行 */
#footer .footercopy-text {
    margin-top: 30px;
    padding: 16px 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

#footer .divcopyright,
#footer .divcopyright p {
    display: block;
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .55);
    text-align: center;
}

/* ---------------------------------------------------------------
   11. 响应式
   --------------------------------------------------------------- */
@media (max-width: 1200px) {
    .slick img,
    .slick .div_bannerimg {
        height: 420px;
    }
}

@media (max-width: 991px) {
    body .home-area2,
    body .home-area3,
    body .home-area4,
    body .home-area5 {
        padding: 38px 0;
    }

    .our-header h3.titles1 {
        font-size: 24px;
    }

    .home-area3 .col-md-20 {
        width: 50%;
        float: left;
        margin-bottom: 16px;
    }

    /* 副页：小屏下侧栏与内容纵向堆叠，收起栅格负边距避免卡片贴边 */
    .divneirong .row {
        margin-left: 0;
        margin-right: 0;
    }

    .divneirong .row > .col-md-3,
    .divneirong .row > .col-md-9 {
        float: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .divneirong .row > .col-md-3 {
        margin-bottom: 18px;
    }

    #Newszui .mc-news-card {
        width: calc(100% - 16px);
    }

    #Newszui .mc-news-banner img {
        height: 190px;
    }

    /* 页脚：小屏纵向堆叠 */
    #footer .foo-box {
        flex-direction: column;
        align-items: center;
        gap: 22px;
    }

    #footer .footworight {
        flex-direction: column;
        width: 100%;
    }

    .product_3 {
        padding: 20px 18px 26px;
    }
}

@media (max-width: 766px) {
    .slick img,
    .slick .div_bannerimg {
        height: 220px;
    }

    body .home-area2,
    body .home-area3,
    body .home-area4,
    body .home-area5 {
        padding: 28px 0;
    }

    .our-header h3.titles1 {
        font-size: 21px;
        letter-spacing: 1px;
    }

    .home-area3 .col-md-20 {
        width: 100%;
    }

    #Product .cargo-img,
    .c-img .cargo-img {
        height: 168px;
    }

    #Newszui .mc-news-card {
        padding: 14px 16px;
    }

    #Newszui .mc-news-date {
        min-width: 62px;
        padding-right: 10px;
    }

    #Newszui .mc-news-body {
        padding-left: 12px;
    }

    #Newszui .mc-news-body h3 {
        font-size: 15px;
    }

    .divtitlename a {
        font-size: 17px;
    }

    #footer .foo-one h3 {
        margin-bottom: 12px;
    }
}