/* ==========================================================================
   广西医科大学附属医院 (英文版) 1:1 复刻 - 样式表
   文件：english.css
   单位说明：全面使用 rem 布局，换算比例为 1rem = 100px
   ========================================================================== */

/* =========================================
   1. 顶部辅助条 (Header Top)
   作用：位于页面最顶部的细长装饰条
   ========================================= */
        .headerTop {
            width: 100%;
            height: 0.08rem; /* 高度8px */
            background-color: #1a75ab; /* 主题蓝色背景 */
        }
        
/* =========================================
   2. 头部 Center 区域 (Header Center)
   作用：包含 Logo、右侧语言切换导航以及移动端汉堡菜单
   ========================================= */
        .headerCenter {
            padding: 0.25rem 0; /* 上下内边距25px */
            background-color: #fff; /* 纯白背景 */
        }
        
        /* 语言切换区域的 Flex 布局容器 */
        .headerCenter .tab {
            display: flex;
            height: 0.93rem; /* 配合 Logo 高度垂直居中 */
            align-items: center;
        }
        
        /* 语言导航列表容器 */
        .hTab {
            display: flex;
            align-items: center;
        }
        
        /* 语言导航项样式 */
        .hTab a {
            font-size: 0.14rem;
            color: #666; /* 默认灰色 */
            padding: 0 0.15rem;
            border-right: 1px solid #ddd; /* 项之间的分割线 */
            line-height: 1;
        }
        
        /* 移除最后一个导航项的右侧分割线 */
        .hTab a:last-child {
            border-right: none;
        }
        
        /* 语言导航项 - 当前激活状态 */
        .hTab a.active {
            color: #47acac; /* 主题青色 */
            font-weight: bold; /* 加粗显示 */
            border-right: none;
            padding-right: 0.1rem;
        }
        
        /* 语言导航项 - 鼠标悬浮状态 */
        .hTab a:hover {
            color: #47acac;
        }
        
        /* 搜索图标容器 (圆形线框) */
        .search-icon {
            display: inline-block;
            width: 0.18rem;
            height: 0.18rem;
            border: 2px solid #47acac;
            border-radius: 50%;
            position: relative;
            margin-left: 0.1rem;
        }
        
        /* 搜索图标的手柄 (利用伪元素旋转实现) */
        .search-icon::after {
            content: '';
            position: absolute;
            width: 0.08rem;
            height: 0.02rem;
            background-color: #ccc;
            bottom: -0.02rem;
            right: -0.04rem;
            transform: rotate(45deg); /* 旋转45度形成放大镜手柄 */
        }
        
        /* 移动端汉堡菜单按钮容器 */
        .navMenu {
            display: none; /* PC端默认隐藏 */
            width: 0.35rem;
            height: 0.25rem;
            position: absolute;
            right: 0.2rem;
            top: 50%;
            transform: translateY(-50%); /* 垂直居中 */
            cursor: pointer;
            flex-direction: column;
            justify-content: space-between;
        }
        
        /* 移动端汉堡菜单的三条横线 */
        .navMenu span {
            display: block;
            width: 100%;
            height: 0.03rem;
            background-color: #47acac;
            border-radius: 0.02rem;
        }

/* =========================================
   3. 英文版主导航栏 (Main Navigation)
   作用：页面的核心栏目导航，包含悬浮下划线动效
   ========================================= */
        .en-nav {
            background-color: #fff;
            width: 100%;
            border-bottom: 1px solid #eee; /* 底部浅灰边框 */
        }
        
        /* 导航栏 Flex 容器 */
        .en-nav .navBar {
            display: flex;
            justify-content: space-between; /* 两端对齐，自动分配间距 */
            width: 100%;
        }
        
        /* 导航栏 `li` 容器 */
        .en-nav .navBar > li {
            flex: none; /* 取消均分宽度，依靠内边距自适应 */
            padding: 0 0.25rem;
            text-align: center;
        }
        
        /* 导航栏链接文字样式 */
        .en-nav .navBar > li > a {
            display: inline-block;
            width: auto;
            font-size: 0.16rem;
            color: #333333; /* 默认深黑色 */
            padding: 0.18rem 0;
            font-weight: 500;
            position: relative;
        }
        
        /* 取消鼠标悬浮时的背景变化 */
        .en-nav .navBar > li:hover,
        .en-nav .navBar > li.active {
            background: transparent;
        }

        /* 鼠标悬浮和激活状态时文字变为主题色 */
        .en-nav .navBar > li:hover > a,
        .en-nav .navBar > li.active > a {
            color: #47acac;
        }

        /* 导航下划线动效 - 默认隐藏 (opacity: 0) */
        .en-nav .navBar > li > a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0.03rem; /* 下划线粗细 */
            background-color: #47acac; /* 主题青色 */
            opacity: 0;
            transition: opacity 0.3s; /* 渐变过渡效果 */
        }

        /* 鼠标悬浮和激活状态时显示下划线 */
        .en-nav .navBar > li:hover > a::after,
        .en-nav .navBar > li.active > a::after {
            opacity: 1;
        }

        /* -------------------------------------
           响应式调整 (导航区域)
           ------------------------------------- */
        /* 平板端微调间距 */
        @media screen and (max-width: 992px) {
            .hTab a { padding: 0 0.1rem; }
            .en-nav .navBar > li { padding: 0 0.15rem; }
            .en-nav .navBar > li > a { font-size: 0.15rem; }
        }

        /* 移动端 (手机) 适配 */
        @media screen and (max-width: 750px) {
            .headerCenter .tab { display: none; } /* 隐藏右侧语言切换 */
            .navMenu { display: flex; } /* 显示汉堡菜单 */
            .en-nav { display: none; } /* 默认隐藏主导航，点击菜单后通过JS添加show类显示 */
            
            /* 点击展开后的下拉导航样式 */
            .en-nav.show {
                display: block;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                z-index: 999;
            }
            .en-nav .navBar { flex-direction: column; } /* 纵向排列 */
            .en-nav .navBar > li { width: 100%; border-bottom: 1px solid #eee; padding: 0; }
            .en-nav .navBar > li > a { justify-content: flex-start; padding: 0.15rem 0.2rem; text-align: left; color: #333; }
            
            /* 移动端轮播图高度适配 */
            .banner-swiper .swiper-slide img {
                height: 3rem !important; /* 降低高度以适应手机屏幕 */
            }
            
            /* 移动端简介模块适配：改为上下排列 */
            .englishOne-wrapper {
                flex-direction: column;
            }
            .eOne-left, .eOne-right {
                width: 100%;
                float: none;
            }
            .eOne-left {
                margin-bottom: 0.3rem;
                padding-right: 0;
            }
            .eOne-right video {
                height: 3rem; /* 降低视频高度 */
            }

            /* 移动端合作平台模块适配：每行占满100%单列显示 */
            .platform-list li {
                width: 100% !important;
                margin-bottom: 0.15rem;
            }
        }
        
/* =========================================
   4. 轮播图模块 (Banner)
   基于 Swiper.js 的样式定制
   ========================================= */
        .banner {
            width: 100%;
        }
        .banner-swiper {
            width: 100%;
        }
        
        /* 自定义分页器位置 */
        .banner-pagination {
            position: absolute;
            bottom: 0.2rem;
            left: 0;
            width: 100%;
            text-align: center;
            z-index: 10;
        }
        
        /* 默认分页器圆点样式 */
        .banner-pagination .swiper-pagination-bullet {
            width: 0.12rem;
            height: 0.12rem;
            display: inline-block;
            border-radius: 50%;
            background: #fff;
            opacity: 0.5; /* 半透明 */
            margin: 0 0.05rem;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        /* 当前高亮的分页器样式 (药丸形) */
        .banner-pagination .swiper-pagination-bullet-active {
            opacity: 1;
            background: #47acac; /* 主题色高亮 */
            width: 0.3rem; /* 拉长变成药丸形状 */
            border-radius: 0.06rem;
        }

/* =========================================
   5. 医院简介模块 (About Section - .englishOne)
   作用：左侧简介文案，右侧医院宣传视频
   ========================================= */
        .englishOne {
            width: 100%;
            padding: 0.8rem 0;
            background-color: #f9f9f9; /* 浅灰色背景 */
        }
        
        /* 左侧文案区 */
        .eOne-left {
            width: 50%;
            padding-right: 0.5rem; /* 右侧留白防止与视频贴紧 */
        }
        
        /* 大标题 */
        .eOne-left h3 {
            font-size: 0.24rem;
            color: #333333;
            line-height: 1.4;
            margin-bottom: 0.25rem;
            font-weight: 600;
        }
        
        /* 简介段落 */
        .eOne-left p {
            font-size: 0.15rem;
            color: #666;
            line-height: 1.8;
            margin-bottom: 0.35rem;
            text-align: justify; /* 两端对齐，英文排版更美观 */
        }
        
        /* READ MORE 按钮基础样式 */
        .btn-readmore {
            display: inline-block;
            padding: 0.12rem 0.35rem;
            border: 1px solid #333;
            color: #333;
            font-size: 0.14rem;
            transition: all 0.3s ease;
        }
        
        /* READ MORE 按钮鼠标悬浮效果 (绿底白字) */
        .btn-readmore:hover {
            background-color: #47acac;
            border-color: #47acac;
            color: #fff;
        }
        
        /* 右侧视频区 */
        .eOne-right {
            width: 48%;
        }
        
        .eOne-right video {
            width: 100%;
            height: 3.6rem;
            background-color: #000;
            display: block;
            object-fit: cover; /* 保证视频/海报不拉伸变形 */
        }

/* =========================================
   6. 合作平台模块 (Platforms - .englishPlatform)
   作用：6个合作平台的网格展示
   ========================================= */
        .englishPlatform {
            width: 100%;
            padding: 0.8rem 0;
            background-color: #fff; /* 纯白底色 */
            text-align: center; /* 标题居中 */
        }

        /* 主标题样式 */
        .enTitle h3 {
            font-size: 0.32rem;
            color: #333;
            font-weight: 600;
            margin-bottom: 0.5rem;
            position: relative;
            display: inline-block;
        }

        /* 平台列表网格容器 */
        .platform-list {
            margin-top: 0.3rem;
            gap: 0.2rem; /* 使用 flex gap 替代 margin 控制间距，更现代 */
        }

        /* 平台单个卡片样式 */
        .platform-list li {
            width: calc((100% - 0.4rem) / 3); /* 动态计算：每行3个，减去2个0.2rem的gap宽度 */
            background-color: #fff;
            padding: 0.4rem 0.2rem;
            margin-bottom: 0.2rem;
            transition: all 0.3s ease; /* 平滑过渡所有属性 */
            cursor: pointer;
            border-bottom: 0.04rem solid #0b6dad; /* 底部默认蓝色边框 */
            box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* 默认阴影 */
            transform: translateY(-5px); /* 默认微弱上浮状态 */
        }

        /* 卡片内链接区域占满整个卡片 */
        .platform-list li a {
            display: block;
            width: 100%;
            height: 100%;
        }

        /* 卡片标题样式 */
        .platform-list li h3 {
            font-size: 0.18rem;
            color: #0b6dad; /* 默认蓝色字体 */
            font-weight: 500;
            line-height: 1.5;
            transition: color 0.3s;
            font-weight: bold;
        }

        /* 鼠标悬浮时，标题颜色变为青色主题色 */
        .platform-list li:hover h3 {
            color: #47acac;
        }

/* =========================================
   7. 特色业务展示区 (Features - .englishTwo)
   作用：四行左图右文/左文右图的交错排版
   ========================================= */
        .englishTwo {
            width: 100%;
            overflow: hidden;
        }
        
        /* 每一行的 Flex 容器 */
        .englishTwo .row {
            display: flex;
            width: 100%;
        }
        
        /* 交错布局关键类：反转 Flex 主轴方向实现左文右图 */
        .englishTwo .row.row-reverse {
            flex-direction: row-reverse;
        }
        
        /* 图片区域 */
        .englishTwo .img-box {
            width: 50%;
            height: 6rem; /* 占位高度，可根据实际图片比例调整 */
            overflow: hidden;
        }
        
        /* 确保图片填充且不拉伸 */
        .englishTwo .img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        /* 文字区域容器 */
        .englishTwo .text-box {
            width: 50%;
            display: flex;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            padding: 0.5rem;
            box-sizing: border-box;
            background-color: #4d90cb; /* 默认蓝色背景 */
        }
        
        /* 深色背景行的特殊处理 */
        .englishTwo .row.dark-bg .text-box {
            background-color: #333; /* 切换为深灰色背景 */
            color: #fff;
        }
        
        /* 内部文字约束宽度 */
        .englishTwo .content {
            max-width: 5rem;
            text-align: left;
        }
        
        /* 业务模块大标题 */
        .englishTwo .content h3 {
            font-size: 0.58rem;
            font-weight: 600;
            margin-bottom: 0.2rem;
            color: #FFFFFF;
            text-transform: uppercase; /* 强制大写字母 */
        }
        
        .englishTwo .row.dark-bg .content h3 {
            color: #fff;
        }
        
        /* 业务模块说明段落 */
        .englishTwo .content p {
            font-size: 0.16rem;
            line-height: 1.8;
            color: #FFFFFF;
            margin-bottom: 0.4rem;
        }
        
        .englishTwo .row.dark-bg .content p {
            color: #ccc;
        }
        
        /* 业务模块 READ MORE 按钮 */
        .englishTwo .read-more {
            display: inline-block;
            padding: 0.1rem 0.3rem;
            border: 1px solid #d9d9d9;
            color: #FFFFFF;
            font-size: 0.14rem;
            transition: all 0.3s;
        }
        
        /* 悬浮动效 */
        .englishTwo .read-more:hover {
            background-color: #47acac;
            color: #fff;
        }
        
        /* 深色背景下的按钮处理 */
        .englishTwo .row.dark-bg .read-more {
            border-color: #fff;
            color: #fff;
        }
        
        .englishTwo .row.dark-bg .read-more:hover {
            background-color: #fff;
            color: #333;
        }

        /* -------------------------------------
           响应式调整 (特色业务区)
           ------------------------------------- */
        @media screen and (max-width: 750px) {
            /* 手机端强制改为上下堆叠布局 */
            .englishTwo .row {
                flex-direction: column !important;
            }
            /* 图文各占满100%宽度 */
            .englishTwo .img-box, .englishTwo .text-box {
                width: 100%;
            }
            .englishTwo .img-box {
                height: 3rem; /* 降低图片高度 */
            }
            .englishTwo .text-box {
                padding: 0.4rem 0.2rem;
            }
        }

/* =========================================
   8. 新闻动态区 (News - .englishThree)
   采用时间轴布局
   ========================================= */
        .englishThree {
            padding: 0.6rem 0;
            background-color: #fff;
        }
        
        /* 顶部 Header：包含大标题 */
        .englishThree .news-header {
            margin-bottom: 0.4rem;
            display: flex;
            justify-content: space-between;
            align-items: flex-end; /* 底部对齐 */
        }
        
        /* "NEWS" 主标题 */
        .englishThree .news-header h2 {
            font-size: 0.4rem;
            color: #333;
            font-weight: bold;
            line-height: 1;
        }
        
        /* (可选的) READ MORE 链接 */
        .englishThree .read-more-link {
            font-size: 0.16rem;
            color: #666;
            transition: color 0.3s;
            margin-bottom: 0.05rem;
        }
        
        .englishThree .read-more-link:hover {
            color: #47acac;
        }
        
        /* 新闻内容主体 Flex 容器 */
        .englishThree .news-content {
            display: flex;
            justify-content: space-between;
            gap: 0.5rem;
        }
        
        /* 左侧时间轴新闻列表区 */
        .englishThree .news-left {
            width: 55%;
        }
        
        /* 时间轴列表容器 */
        .englishThree .news-list {
            position: relative;
            padding-left: 0;
            margin-top: 0.2rem;
        }
        
        /* 绘制时间轴的主干垂直黑线 */
        .englishThree .news-list::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: -0.5rem; /* 向下延伸一点 */
            width: 2px;
            background-color: #000;
        }
        
        /* 单个新闻项（包含相对定位以便放置黑点） */
        .englishThree .news-list li {
            position: relative;
            padding-left: 1.6rem; /* 为日期留出空间 */
            margin-bottom: 0.5rem;
        }
        
        .englishThree .news-list li:last-child {
            margin-bottom: 0;
        }
        
        /* 绘制时间轴上的节点小黑点 */
        .englishThree .news-list li::before {
            content: '';
            position: absolute;
            left: -3px; /* 居中对齐垂直线 */
            top: 0.38rem; /* 对齐水平横线的高度 */
            width: 8px;
            height: 8px;
            background-color: #000;
            border-radius: 50%;
            z-index: 2;
        }
        
        /* 新闻日期样式 */
        .englishThree .news-list .date {
            position: absolute;
            left: 0.2rem;
            top: 0.15rem;
            width: 1.2rem;
            font-size: 0.18rem;
            font-weight: bold;
            color: #333;
        }
        
        /* 日期下方向右延伸的水平灰色细线 */
        .englishThree .news-list .date::after {
            content: '';
            position: absolute;
            left: -0.2rem;
            bottom: -0.1rem;
            width: 1.4rem;
            height: 1px;
            background-color: #999;
        }
        
        /* 新闻标题与摘要容器 */
        .englishThree .news-list .info {
            width: 100%;
        }
        
        /* 新闻标题：支持最多显示2行，超出省略 */
        .englishThree .news-list .info h4 {
            font-size: 0.22rem;
            color: #333;
            font-weight: 500;
            line-height: 1.4;
            margin-bottom: 0.1rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            transition: color 0.3s;
        }
        
        .englishThree .news-list .info h4 a {
            color: inherit;
        }
        
        /* 悬浮时标题变为主题色 */
        .englishThree .news-list li:hover .info h4 {
            color: #47acac;
        }
        
        /* 新闻摘要：最多显示2行，超出省略 */
        .englishThree .news-list .info p {
            font-size: 0.15rem;
            color: #999;
            line-height: 1.6;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        
        /* 右侧新闻配图区 */
        .englishThree .news-right {
            width: 40%;
        }
        
        /* 图片容器限制溢出 */
        .englishThree .news-right .img-box {
            width: 100%;
            height: 3.8rem;
            overflow: hidden;
            position: relative;
        }
        
        .englishThree .news-right .img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s; /* 图片放大动画时间 */
        }
        
        /* 鼠标悬浮时图片缓慢放大 */
        .englishThree .news-right:hover .img-box img {
            transform: scale(1.05);
        }
        
        /* 图片底部的半透明标题遮罩层 */
        .englishThree .news-right .img-title {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            padding: 0.15rem;
            box-sizing: border-box;
            font-size: 0.16rem;
            white-space: nowrap; /* 不换行 */
            overflow: hidden;
            text-overflow: ellipsis; /* 超出显示省略号 */
        }

        /* -------------------------------------
           响应式调整 (新闻动态区)
           ------------------------------------- */
        @media screen and (max-width: 750px) {
            /* 手机端：图片在上，时间轴在下 */
            .englishThree .news-content {
                flex-direction: column-reverse;
            }
            .englishThree .news-left, .englishThree .news-right {
                width: 100%;
            }
            .englishThree .news-right .img-box {
                height: 2.5rem;
                margin-bottom: 0.3rem;
            }
            /* 时间轴左侧留白缩小 */
            .englishThree .news-list {
                padding-left: 0.1rem;
            }
        }

/* =========================================
   9. 页脚区 (Footer)
   分为上下两块
   ========================================= */
        /* 第一段：联系地址与邮箱 (深灰色背景) */
        .footerOne {
            background-color: #313131;
            padding: 0.5rem 0;
            color: #fff;
            width: 100%;
        }
        
        .footerOne .w13 {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .footerOne .f-left p {
            font-size: 0.16rem;
            line-height: 2;
            margin-bottom: 0.1rem;
        }
        
        .footerOne .f-left p span {
            font-weight: bold;
            margin-right: 0.1rem;
        }
        
        /* 第二段：版权与备案信息 (深灰色背景) */
        .footerTwo {
            background-color: #313131;
            padding: 0.2rem 0;
            text-align: center;
            color: #ccc;
            font-size: 0.14rem;
        }
        
        .footerTwo p {
            line-height: 1.8;
        }
        
        /* -------------------------------------
           响应式调整 (页脚)
           ------------------------------------- */
        @media screen and (max-width: 750px) {
            .footerOne .w13 {
                flex-direction: column; /* 垂直排列 */
                text-align: center; /* 文本居中 */
            }
            /* 移动端适当放大字号提升可读性 */
            .footerOne .f-left p {
                font-size: 0.24rem;
            }
            .footerTwo p {
                font-size: 0.2rem;
            }
        }

/* =========================================
   10. 悬浮组件 (iFix)
   返回顶部按钮
   ========================================= */
        .iFix {
            position: fixed;
            right: 0.2rem; /* 靠右距离 */
            bottom: 10%; /* 靠下距离 */
            z-index: 99;
            display: none; /* 默认隐藏，由JS控制滚动后显示 */
        }
        
        .iFix .ReturnTop {
            width: 0.5rem;
            height: 0.5rem;
            background-color: #313131; /* 深灰底色 */
            color: #fff;
            text-align: center;
            line-height: 0.5rem;
            cursor: pointer;
            border-radius: 0.05rem; /* 微圆角 */
            box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* 悬浮阴影 */
            transition: all 0.3s;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        
        /* 悬浮变色为主题青色 */
        .iFix .ReturnTop:hover {
            background-color: #2b6a6a;
        }
        
        /* 使用伪元素添加向上的箭头符号 */
        .iFix .ReturnTop::before {
            content: "↑";
            font-size: 0.24rem;
            font-weight: bold;
        }

/* =========================================
   11. 面包屑与新闻列表区 (Breadcrumb & News List)
   1:1 复刻 news.html
   ========================================= */
        /* 面包屑导航 */
        .commonUl {
            box-sizing: border-box;
            width: 100%;
            height: 0.53rem;
            background-color: #4d90cb; /* 如果不在banner里，给个主题背景色过渡，原站是绝对定位在图片上，这里我们可以独立出来或保持一致 */
            background: rgba(0,0,0,0.1); /* 半透明适配轮播图背景 */
            position: absolute; /* 贴在 Banner 底部 */
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10;
        }
        
        /* 针对现有的轮播图容器做定位适配 */
        .banner.po_re {
            position: relative;
        }

        .commonUl p {
            box-sizing: border-box;
            font-size: 0.14rem;
            color: #ffffff;
            line-height: 0.53rem;
        }

        .commonUl p a {
            color: #ffffff;
            display: inline-block;
            margin: 0 0.05rem;
        }

        /* 新闻列表容器 */
        .news {
            width: 100%;
            height: auto;
            padding: 0.5rem 0; 
            box-sizing: border-box;
            background: #FFFFFF;
        }

        .news .newsList {
            box-sizing: border-box;
            width: 100%;
            padding: 0.1rem 0 0.05rem 0;
        }

        .news .newsList li {
            width: 100%;
            height: auto;
            box-sizing: border-box;
            position: relative;
            padding-bottom: 0.15rem;
            margin-bottom: 0.15rem;
            border-bottom: 1px solid #e5e5e5;
        }

        .news .newsList li a {
            display: block;
            width: 100%;
            height: 100%;
            overflow: hidden; 
            box-sizing: border-box;
        }

        .news .newsList li .nImg {
            float: left;
            width: 2.4rem;
            height: 1.6rem;
            overflow: hidden;
        }

        .news .newsList li .nImg img {
            width: 100%;
            height: auto;
            min-height: 100%;
            display: block;
            margin: 0 auto;
            transition: all 0.4s ease-in-out 0s;
        }

        .news .newsList li .nTxt {
            float: right;
            width: calc(100% - 2.7rem); /* 剩余宽度减去间距 */
            box-sizing: border-box;
            text-align: justify;
            word-break: break-all;
        }

        .news .newsList li .nTxt h3 {
            font-size: 0.22rem;
            color: #333333;
            font-weight: normal;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            transition: color 0.3s;
        }

        .news .newsList li .nTxt p {
            font-size: 0.16rem;
            color: #666666;
            margin-top: 0.15rem;
            line-height: 1.6;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .news .newsList li .nTxt span {
            font-size: 0.14rem;
            color: #999999;
            display: block;
            margin-top: 0.25rem;
        }

        /* 鼠标悬浮特效 */
        .news ul li:hover img {
            transform: scale(1.1);
        }

        .news ul li:hover .nTxt h3 {
            color: #0b6dad; /* 主题蓝 */
        }

        /* 分页器 */
        .newsPage {
            width: 100%; 
            box-sizing: border-box;
            text-align: center;
            padding: 0.25rem 0;
        }

        .newsPage .newsPageContent a {
            font-size: 0.14rem;
            color: #666666;
            box-sizing: border-box;
            border-radius: 3px;
            display: inline-block;
            padding: 0.08rem 0.17rem;
            background: #eeeeee;
            margin: 0 0.02rem;
            transition: all 0.3s;
        }

        .newsPage .newsPageContent span {
            font-size: 0.14rem;
            color: #666666;
            box-sizing: border-box;
            border-radius: 3px;
            display: inline-block;
            padding: 0.08rem 0.15rem;
            background: #eeeeee;
        }

        .newsPage .newsPageContent a.active,
        .newsPage .newsPageContent a:hover {
            color: #FFFFFF;
            background: #37bdc5; /* 主题青色 */
        }


        .showMain {
        width: 100%;
        box-sizing: border-box;
        padding: 0.5rem 0;
        }

        .container {
        width: 12rem;
        margin: 0 auto;
        }
        .showTitle {
        box-sizing: border-box;
        border-bottom: 1px solid #dbdee4;
        }
        .showTitle h3 {
        font-size: 0.32rem;
        color: #333;
        }
        .showTitle .showInfo {
        box-sizing: border-box;
        height: 0.31rem;
        margin-top: 0.3rem;
        }

        .showTitle .showInfo p {
        display: block;
        float: left;
        line-height: 0.24rem;
        font-size: 0.14rem;
        color: #999999;
        }
        .showTitle .showInfo .showShare {
        float: right;
        box-sizing: border-box;
        }
        .showTitle .showInfo .showShare span {
        float: left;
        display: block;
        font-size: 0.14rem;
        line-height: 0.24rem;
        color: #999999;
        box-sizing: border-box;
        }

        .showTitle .showInfo .showShare .share {
        float: left;
        box-sizing: border-box;
        }
        .social-share {
        font-family: "socialshare" !important;
        font-size: 0.16rem;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.002rem;
        -moz-osx-font-smoothing: grayscale;
         }

         .showTitle .showInfo .showShare .share a.share-wx {
        background: url(https://www.gxmuyfy.cn/english/images/shareWechat.png) left no-repeat;
        }

        .showTitle .showInfo .showShare .share a.share-tsina {
        background: url(https://www.gxmuyfy.cn/english/images/shareWeibo.png) left no-repeat;
        }

        .showTitle .showInfo .showShare .share a.share-qzone {
    background: url(https://www.gxmuyfy.cn/english/images/shareQzone.png) left no-repeat;
        }
    .showTitle .showInfo .showShare .share a {
    display: inline-block;
    width: 0.24rem;
    font-size: 0.14rem;
    color: #666666;
    height: 0.24rem;
    line-height: 0.24rem;
    margin: 0 0 0.06rem;
    box-sizing: border-box;
    padding-left: 0.3rem;
}

.social-share .icon-wechat {
    position: relative;
    color: #7bc549;
    border-color: #7bc549;
}
.social-share a {
    position: relative;
    text-decoration: none;
    margin: 0.04rem;
    display: inline-block;
    outline: none;
}


.social-share .icon-wechat .wechat-qrcode {
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: hidden;
    position: absolute;
    z-index: 9;
    top: -2.05rem;
    left: -0.84rem;
    width: 2rem;
    height: 1.92rem;
    color: #666;
    font-size: 0.12rem;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 0.02rem 0.1rem #aaa;
    transition: all 200ms;
    -webkit-tansition: all 350ms;
    -moz-transition: all 350ms;
}


        .showContent {
        box-sizing: border-box;
        width: 100%;
        text-align: justify;
        padding: 0.35rem 0;
        word-break: break-all;
        overflow: hidden;
        }

        .showContent p {
        font-size: 0.2rem;
        color: #333333;
        line-height: 0.35rem !important;
        }

    .aboutFour {
    width: 100%;
    height: 5.8rem;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 1rem;
    position: relative;
    background: url(https://www.gxmuyfy.cn/english/images/map-img2.jpg) center no-repeat;
    background-size: cover;
}

.aboutFour .aboutMap {
    width: 100%;
    height: 100%;
}


.aboutFour .aboutContent {
    width: 12rem;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 9;
    overflow: hidden;
}

.aboutFour .aboutContent .aboutT {
    width: 4.7rem;
    height: 5.8rem;
    float: right;
    padding: 0.35rem;
    box-sizing: border-box;
    background: url(https://www.gxmuyfy.cn/english/images/aboutMap.png) center no-repeat;
    background-size: cover;
}

.aboutFour .aboutContent .aboutT h3 {
    font-size: 0.42rem;
    color: #FFFFFF;
    font-weight: normal;
    font-family: "Arial";
    margin-top: 0.2rem;
}


.aboutFour .aboutContent .aboutT p.c-1 {
    background: url(https://www.gxmuyfy.cn/english/images/c-1.png) 0 0.08rem no-repeat;
}
.aboutFour .aboutContent .aboutT p {
    font-size: 0.22rem;
    color: #FFFFFF;
    font-family: "Arial";
    margin-top: 0.2rem;
    box-sizing: border-box;
    padding-left: 0.3rem;
}

.aboutFour .aboutContent .aboutT p span {
    display: block;
    font-size: 0.18rem;
    margin-top: 0.05rem;
}

.aboutFour .aboutContent .aboutT p.c-2 {
    background: url(https://www.gxmuyfy.cn/english/images/c-2.png) 0 0.08rem no-repeat;
}

.aboutFour .aboutContent .aboutT p.c-3 {
    background: url(../images/c-3.png) 0 0.08rem no-repeat;
}


        /* -------------------------------------
           响应式调整 (新闻列表区)
           ------------------------------------- */
        @media screen and (max-width: 750px) {
            .commonUl {
                height: 0.4rem;
            }
            .commonUl p {
                line-height: 0.4rem;
                font-size: 0.12rem;
            }
            .news {
                padding: 0.3rem 0;
            }
            .news ul li .nImg {
                width: 35%;
                height: auto;
            }
            .news ul li .nTxt {
                width: 60%;
            }
            .news ul li .nTxt h3 {
                font-size: 0.16rem;
                white-space: normal;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .news ul li .nTxt p {
                display: none; /* 移动端隐藏摘要节省空间 */
            }
            .news ul li .nTxt span {
                margin-top: 0.1rem;
                font-size: 0.12rem;
            }
            .newsPage .newsPageContent a {
                padding: 0.05rem 0.1rem;
                font-size: 0.12rem;
            }
        }