/* ============================================================
   1. 顶部顶栏（电话/邮箱/社交图标）
      默认显示；如需隐藏，取消下行注释。
   ============================================================ */
/*#sp-top-bar {*/
/*    display: none !important;*/
/*}*/

/* ============================================================
   2. 顶栏内部调整：电话号码左移（增加左内边距）
      - 让电话号码（位于 #sp-top1）向右偏移，视觉上“左移”是指从左侧边缘内缩
   ============================================================ */
#sp-top1 {
    padding-left: 10px !important;      /* 左侧留空，相当于右移，实际是让内容左移？ 
                                           这里“左移”理解为内容不要贴左边，内缩一些 */
}

/* ============================================================
   3. 主头部：上提并消除底部间隙
      - 减小上下内边距，使导航更紧凑
      - margin-bottom: 0 保证下方无多余空白
      - 白色背景，轻微阴影增加层次感
   ============================================================ */
#sp-header {
    padding: 5px 0 !important;          /* 上下内边距减小，导航上提 */
    margin-bottom: 0 !important;        /* 取消负值，让轮播自然紧贴底部 */
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* ============================================================
   4. Logo：右移（增加左外边距）并增加与菜单的间距
      - margin-left: 20px 让 Logo 向右偏移
      - margin-right: 60px 拉开与菜单的距离
   ============================================================ */
#sp-logo {
    margin-left: -60px !important;       /* 右移 */
    margin-right: 160px !important;      /* 与菜单间隔大点 */
    flex-shrink: 0;                    /* 防止被压缩 */
}

/* ============================================================
   5. 导航菜单容器：整体靠右
      - flex-end 使菜单和搜索框靠右排列
   ============================================================ */
#sp-menu .sp-megamenu-wrapper {
    justify-content: flex-end !important;
    width: 100%;
}

/* ============================================================
   6. 导航菜单（主菜单项）上下微调
      - 增加右边距，使其与搜索框保持合理距离
   ============================================================ */
#sp-menu .sp-megamenu-parent {
    margin-right: 30px !important;      /* 微调右侧间距 */
}

/* ============================================================
   7. 搜索框模块：右移（增加左外边距，将其推向右侧）
      - 与导航菜单之间的间距由上面的 margin-right 控制
      - 这里增加 margin-left 可使搜索框更靠右
   ============================================================ */
.header-modules .sp-module {
    margin-left: 20px !important;       /* 搜索框左外边距加大，视觉上右移 */
}

/* ============================================================
   8. 隐藏“Sign In”登录按钮
      - 根据需求隐藏，不占用空间
   ============================================================ */
.header-modules .sp-sign-in {
    display: none !important;
}

/* ============================================================
   9. 轮播全屏 + 无缝贴合导航
      - 使用 100vw + 负边距实现全屏
      - margin-top: 0 确保与头部无缝连接
      - 图片固定高度 500px，裁剪适配
   ============================================================ */
/*.mod_djimageslider {*/
/*    width: 100vw !important;*/
/*    margin-left: calc(-50vw + 50%) !important;*/
/*    margin-right: calc(-50vw + 50%) !important;*/
/*    margin-top: 0 !important;*/
/*    padding: 0 !important;*/
/*    overflow: hidden;*/
/*}*/

/* 轮播图片样式：占满容器，裁剪居中 */
/*.mod_djimageslider img {*/
/*    width: 100%;*/
/*    height: 500px;*/
/*    object-fit: cover;*/
/*}*/
/* DJ轮播连同外层父容器一起突破容器限制，实现真正全屏 */
/*DJ轮播真正全屏，避开父容器截断*/
======================================================
   10. 全局容器恢复常规宽度（仅限头部和底部）
        - 保持内容居中，不贴边
   ============================================================ */
.container {
    max-width: 1140px !important;       /* 默认宽度 */
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* ============================================================
   11. 主区域（轮播所在）的容器打破宽度限制，实现全屏
        - 同时清除顶部内边距，消除轮播上方可能出现的空白
   ============================================================ */
/*#sp-main-body .container {*/
/*    max-width: 100% !important;*/
/*    padding-left: 0 !important;*/
/*    padding-right: 0 !important;*/
/*    padding-top: 0 !important;*/
/*}*/

/* 额外重置主区域顶部内边距 */
#sp-main-body {
    padding-top: 0 !important;
}

/* ============================================================
   12. LOGO 与导航菜单文字垂直居中（同一水平线）
        - 强制 flex 容器垂直居中
        - 菜单项行高与 LOGO 高度（36px）匹配
   ============================================================ */
#sp-header .row.align-items-center {
    align-items: center !important;
}

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    line-height: 36px !important;      /* 与 LOGO 高度匹配 */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================================
   13. 隐藏多余的“Main Menu”模块（桌面端）
        - 仅隐藏直接子元素，不影响搜索/登录模块
   ============================================================ */
#sp-menu .sp-column > .sp-module {
    display: none !important;
}


/* ============================================================
        - 主体
   ============================================================ */
/*sp-main-body {*/
/*  padding-left:24px !important;*/
/*  padding-right:24px !important;*/
/*}*/
/*.container,*/
/*.container-fluid {*/
/*  max-width:1200px !important;*/
/*  margin: 0 auto !important;*/
/*  width: 100%;*/
/*}*/
/* 解决页脚长文本撑破页面 */
/*#sp-footer p,*/
/*.sp-module-content p {*/
/*  word‑break: break‑all !important;*/
/*}*/

/* 1. 缩小主体字体 */
/*body { font-size: 14px !important; }*/

/* 2. 主体左右留白 */
/*#sp-main-body .container { max-width: 1200px !important; }*/

/* 3. 强制页头页尾全宽 */
/*#sp-header .container, #sp-footer .container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }*/

/* 4. 新增：滚动大图全宽 */
/*#sp-hero .container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }*/
/* 1. 缩小主体字体 */
/* 1. 主体字体大小调整 */
/* 1. 调整主体字体大小 */
/* 1. 调整主体字体大小 */
/* 1. 修复100vw带来的水平滚动条问题（必须加） */
/* 1. 防止水平滚动条 */
body {
    overflow-x: hidden !important;
    font-size: 14px !important;   /* 已存在，保留 */
}

/* 2. 针对首页（轮播所在页），清除包含轮播的 .container 的内边距和宽度限制 */
/*    这样轮播的父容器本身变成全宽，且无内边距 */
body.home #sp-main-body .container {
    max-width: 100% !important;          /* 取消宽度限制 */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 3. 轮播自身全屏（您已有的代码，保留） */
.mod_djimageslider {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding: 0 !important;
    margin-top: 0 !important;
    overflow: hidden;
}
.mod_djimageslider img {
    width: 100%;
    height: 500px;            /* 或任意高度 */
    object-fit: cover;
}

/* 4. 主体内容（About Us 等）恢复居中且左右留白 */
/*    只针对文章详情区域，不影响轮播 */
body.home .article-details {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* 5. 如果您希望非首页也保持主体居中留白（但轮播通常只在首页） */
/*    可以保留您之前的 body:not(.home) #sp-component 规则 */
body:not(.home) #sp-component {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}
body.home #sp-component {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.home .sp-module-content-top {
    max-width:100% !important;
    padding:0 !important;
    margin:0 !important;
}
body.home .sp-module-content-top .container {
    max-width:100% !important;
    padding:0 !important;
}
body.home .position-content-top {
    margin-bottom:0 !important;
}
.no-padding {
  padding:0 !important;
  margin:0 !important;
}
.no-padding .dj-image-slider {
  padding:0 !important;
}
.home-banner img {
    width:100% !important;
    height:360px !important;
    object-fit: cover !important;
}

/*    面包屑上下间距 */
.mod-breadcrumbs {
    margin-top: 20px !important;
}
/*    导航栏背景色及文字颜色 */

#sp-header {
    background-color: #406b94 !important;
}

#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li.sp-active > a {
    color: #ffffff !important;
}

#sp-header .sp-megamenu-parent > li > a:hover {
    color: #bdd7ee !important;
}


/* ============================================================
   顶部栏最终版：语言切换在电话左侧 + 水平排列 + 垂直居中
   ============================================================ */

/* 1. 左右两列统一为 Flex 容器，强制水平不换行 */
#sp-top-bar .sp-column,
#sp-top1 .sp-column,
#sp-top2 .sp-column {
    display: flex !important;
    flex-wrap: nowrap !important;      /* 强制一行 */
    align-items: center !important;    /* 垂直居中 */
    gap: 0 16px !important;            /* 水平间距（可调） */
}

/* 2. 左列内容靠左，右列内容靠右 */
#sp-top1 .sp-column {
    justify-content: flex-start !important;
}
#sp-top2 .sp-column {
    justify-content: flex-end !important;
}

/* 3. 将语言切换模块放到最前面（电话左侧） */
#sp-top2 .sp-column .sp-module:last-child {
    order: -1 !important;
}

/* 4. 联系方式列表和社交图标列表转为水平 Flex */
.social-icons,
.sp-contact-info {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 5. 列表项强制行内显示 */
.social-icons li,
.sp-contact-info li {
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
    margin: 0 !important;
}

/* 6. 语言切换模块本身及内部所有元素垂直居中 */
#sp-top2 .sp-module,
.top-lang,
.top-lang a,
.top-lang span {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;       /* 统一行高 */
    font-size: 14px !important;        /* 与电话号码一致 */
}

/* 7. 去掉 <p> 标签的多余边距（语言模块中的 p） */
#mod-custom131 p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* 8. 所有顶部栏文字统一字体大小和行高（可选） */
#sp-top-bar .sp-column * {
    font-size: 14px !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
}


/* ===== 首页大图全屏（无留白）— 加强版 ===== */
body.home #section-id-e0808ddc-3891-440c-9f9b-8cb71b33f8bc .sppb-row-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 同时去掉 section 自身的内边距 */
body.home #section-id-e0808ddc-3891-440c-9f9b-8cb71b33f8bc {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 图片容器也不留白 */
body.home #section-id-e0808ddc-3891-440c-9f9b-8cb71b33f8bc .sppb-addon-single-image-container {
    padding: 0 !important;
}

/* 图片自适应铺满 */
body.home #section-id-e0808ddc-3891-440c-9f9b-8cb71b33f8bc img {
    width: 100% !important;
    height: 360px !important;      /* 与你截图高度一致，可自行调整 */
    object-fit: cover !important;
}

#section-id-e0808ddc-3891-440c-9f9b-8cb71b33f8bc .sppb-addon-single-image-container img {
    border-top-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    /* 保留之前的阴影 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}

/*    链接字体颜色     */
/* 默认黑色 */
.sppb-addon-text a, .sppb-addon-image a {
    color: #000000 !important;
    text-decoration: none; /* 默认无下划线 */
}

/* 鼠标悬停蓝色 */
.sppb-addon-text a:hover, .sppb-addon-image a:hover {
    color: #007bff !important; 
}


/* 强制外层背景全宽纯黑，消除两侧白边 */
#sp-section-12 {
    width: 100vw !important;
    max-width: 100vw !important;
    background-color: #171717 !important; 
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* 限制内容宽度为1200px（与下方页脚对齐），但消除容器的默认白底 */
#sp-section-12 > .container {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    background-color: transparent !important; 
}

/* 去除内部模块可能自带的多余上下边距和默认背景 */
#sp-section-12 .row,
#sp-section-12 .container-inner,
#sp-section-12 .sp-module {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: transparent !important;
}

/* 覆盖源码中用来包裹四个产品的 #sp-footer2，强制透明无边框 */
#sp-section-12 #sp-footer2 {
    background-color: transparent !important;
    border: none !important;
}

/* 字体强制纯白，并调小做分段 */
#sp-section-12 h4,
#sp-section-12 p,
#sp-section-12 a {
    color: #ffffff !important;
}

#sp-section-12 h4 {
    font-size: 12px !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
}

#sp-section-12 p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
}
/* 手机端适配顶部栏 */
@media (max-width: 768px) {
    /* 解除强制不换行，允许内容折行 */
    #sp-top-bar .sp-column,
    #sp-top1 .sp-column,
    #sp-top2 .sp-column {
        flex-wrap: wrap !important;
        justify-content: center !important; /* 居中显示 */
        gap: 0 10px !important;
    }

    /* 让上下两栏占满整个宽度，不再挤压 */
    #sp-top1, #sp-top2 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* 【强烈推荐】手机上直接隐藏所有社交图标，因为太占地方了 */
    .social-icons {
        display: none !important;
    }

    /* 如果你不想隐藏社交图标，只想强制换行，可以注释掉上面两行 */

    /* 联系方式排版紧凑一些，防止溢出 */
    .sp-contact-info {
        gap: 0 10px !important;
        font-size: 12px !important; /* 字体调小，放下更多内容 */
    }

    /* 语言切换放下面一点 */
    #sp-top2 .sp-module {
        margin-top: 5px !important;
    }
}


@media (max-width: 768px) {
    #sp-section-13 div[style*="display: flex"] {
        flex-wrap: wrap !important;
        gap: 15px !important;
    }
    #sp-section-13 div[style*="flex: 1"] {
        flex: 0 0 45% !important;
        max-width: 45% !important;
    }
}

/* 为区块添加线稿背景 */


body.itemid-101 #sp-main-body,
body.itemid-104 #sp-main-body,
body.itemid-107 #sp-main-body {
    background-image: url('/images/logo/shanghai.png'); /* 替换为你的图片路径 */
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    
/*      联系我们页面          */
.contact-position {
    display: none !important;
}


/* 1. 在 Contact Form 标题上方生成一条立体感横线 */
.contact h3 {
    position: relative;
    padding-top: 32px;          /* 为横线留出空间 */
    margin-top: 30px;           /* 标题与上方内容的间距 */
    margin-bottom: 30px;        /* 标题与表单的间距 */
}

.contact h3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;                 /* 横线宽度为 80%，左右各留 10% 空间，居中对齐 */
    width: 80%;
    height: 4px;
    /* 立体感渐变：两端透明 → 深色 → 透明，加微光晕 */
    background: linear-gradient(to right, transparent, #555, #222, #555, transparent);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* 2. 表单整体下移，上下都有间隔 */
.contact-form {
    margin-top: 30px;          /* 表单与标题之间的额外间距（与上面 margin-bottom 叠加） */
    margin-bottom: 50px;       /* 表单底部的间隔 */
}
/* 首页新闻列表：默认黑色，悬停变蓝 */
.latestnews a,
.latestnews a:link,
.latestnews a:visited {
    color: #000000 !important;
    text-decoration: none; /* 可选，保留或删除 */
}
.latestnews a:hover,
.latestnews a:focus,
.latestnews a:active {
    color: #0066cc !important; /* 可替换为 #0478DE 等蓝色 */
    text-decoration: none;     /* 悬停时也可加下划线，如需删除这行 */
}

/* 日期文字保持黑色（可选） */
.latestnews span {
    color: #000000 !important;
}

.latestnews {
    list-style-type: disc;
    padding-left: 20px; /* 调整缩进 */
}
.latestnews li {
    list-style-type: disc;
    display: list-item; /* 确保以列表项显示 */
}

/* 1. 增加新闻列表项之间的间距（每条新闻标题） */
.latestnews li {
    margin-bottom: 20px;   /* 原默认可能为 5px 或 10px，现改为 20px，可自行调整 */
}

/* 2. 增加“View More News”与上方新闻列表的间距 */
#sppb-addon-f29bc794-272b-45ae-b800-11c5b10a9350 {
    margin-top: 30px;      /* 增加顶部外边距，使它与最后一条新闻隔开更远 */
}
.latestnews li a span {
    margin-left: 20px;   /* 标题与时间之间间距或者使用padding-left，但margin更合适 */
}
/*     文字LOGO        */
#sp-header .row.align-items-center {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}
/* Logo那一列，干掉col‑auto自动扩张，限制最大宽度 */
#sp-header #sp-logo.col-auto {
    flex: 0 0 230px !important;
    max-width:230px !important;
    width:230px !important;
}
#sp-header #sp-menu.col-auto.flex-auto {
    flex:1 1 auto !important;
    max-width:100% !important;
}
#sp-header .logo-image {
    height:36px !important;
    max-height:36px !important;
    width:auto !important;
    max-width:220px !important;
    margin:0 !important;
    padding:0 !important;
}


/* 1. 强制整个区域背景变纯黑，文字变白 */
#sp-section-12 {
    background-color: #000000 !important;
    color: #ffffff !important;
    
    /* 关键：强制全屏宽度，去除左右留白 */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. 强行打破内部的容器限制（彻底去除左右留白） */
#sp-section-12 .container,
#sp-section-12 .container-inner,
#sp-section-12 .row,
#sp-section-12 .col-lg-12,
#sp-section-12 .sp-column,
#sp-section-12 .sp-module-content,
#sp-section-12 .mod-custom {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 3. 强制内部标题、段落、链接全部变成白色，防止有残留的蓝色或灰色背景 */
#sp-section-12 h1, #sp-section-12 h2, #sp-section-12 h3,
#sp-section-12 h4, #sp-section-12 h5, #sp-section-12 h6,
#sp-section-12 p, #sp-section-12 li, #sp-section-12 a,
#sp-section-12 span {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* 侧边分类菜单：默认折叠子分类 */
.mod-articlescategories .child-categories {
    display: none;
    margin-left: 12px;
}

/* 当前激活的父分类：自动展开子菜单 */
.mod-articlescategories .active > .child-categories {
    display: block;
}

/* 给有子菜单的父分类后面加 + 号（通过伪元素） */
.mod-articlescategories li.parent > a::after {
    content: " +";
    font-size: 14px;
    color: #999;
    margin-left: 4px;
}

/* 当前激活的父分类，+ 号变 − 号 */
.mod-articlescategories li.parent.active > a::after {
    content: " −";
}

/* 可点击的父分类链接：鼠标样式改为手型 */
.mod-articlescategories li.parent > a {
    cursor: pointer;
}