html {
    font-size: 14px;
    margin: 0px;
    background: url(/img/index_bg.gif) repeat-x top left;
    font: 13px Verdana,Arial,Tahoma,"Microsoft YaHei","微软雅黑","Microsoft JhengHei","宋体";
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/*
============================================================
  PIXEL-PERFECT HEADER REPLICA
============================================================
*/

/* --- 0. 全局样式，消除间隙，应用背景 --- */
/* --- 0. 全局样式 --- */
/* --- 0. 全局样式 --- */
body {
    margin: 0;
    padding: 0;
    background-color: #f0f2f5;
}

/* --- 1. 全局父容器，建立定位上下文 --- */
.site-wrapper {
    position: relative; /* 关键！为绝对定位的子元素提供基准 */
}

/* --- 2. 顶部横幅样式 (绝对定位) --- */
.top-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0; /* 确保它在最底层 */
    /* --- 您的核心要求 --- */
    height: 188px; /* 精确设置高度为 188px */
    /* 
      --- 在这里填充您的图片链接 ---
      将下面的 'YOUR_IMAGE_URL_HERE.jpg' 替换为您的图片实际路径,
      例如: url('/images/yuanbao.png')
    */
    background-image: url('/images/banner.png');
    background-repeat: repeat-x; /* 水平平铺 */
    background-position: top center; /* 从顶部居中开始平铺 */
}

/* --- 3. 居中内容容器样式 --- */
.page-container {
    max-width: 992px;
    margin: 0 auto;
    background-color: transparent; /* 背景透明，以便能看到下方的横幅 */
    position: relative;
    /* z-index: 1; /* 确保它在横幅之上 */
    z-index: auto;
    padding-top: 0px; /* 给内容区顶部留出一点空间, 防止紧贴浏览器边缘 */
}

/* --- 4. 为内容区的子元素设置白色背景 --- */
.site-header,
.main-content-area {
    background-color: #fff;
    padding: 1rem 1rem 2rem; /* 将 padding-top 从 2rem 减小到 1rem */
}

.site-header {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}


/* --- 5. 顶层品牌栏和导航栏样式 --- */
/* (以下是您之前确认过的头部样式，保持不变) */
.top-bar {
    background-color: transparent; /* 因为背景由site-header提供 */
    border-bottom: 1px solid #ddd;
}

    .top-bar .logo-placeholder,
    .top-bar .top-bar-right {
        flex-basis: 150px;
        flex-shrink: 0;
    }

.brand-centered {
    padding: 1rem 0;
}

.top-bar-brand {
    font-family: 'SimSun', '宋体', serif;
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

.top-bar-domain {
    font-size: 0.9rem;
    color: #999;
    font-family: 'Arial', sans-serif;
    letter-spacing: 1px;
}

.main-navbar {
    background: linear-gradient(to right, #d32f2f, #b71c1c);
    padding: 0;
}

    .main-navbar .nav-link {
        color: rgba(255, 255, 255, 0.85);
        font-weight: bold;
        font-family: 'SimSun', '宋体', serif;
        font-size: 1rem;
        padding: 0.5rem 1.25rem;
        border-right: 1px solid #a00;
        border-left: 1px solid #e00;
    }

        .main-navbar .nav-link:hover,
        .main-navbar .nav-link.active {
            background-color: #a00;
        }

    /* --- 4. 立体感汉堡菜单按钮 --- */
    .main-navbar .navbar-toggler {
        padding: 8px 10px;
        margin: 8px 0;
        background: linear-gradient(#e00, #c00);
        border: 1px solid #a00;
        border-radius: 4px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
        display: flex; /* 使用flex布局来创建三条横线 */
        flex-direction: column;
        justify-content: space-around;
        width: 38px;
        height: 34px;
    }

    /* 移除Bootstrap默认图标 */
    .main-navbar .navbar-toggler-icon {
        display: none;
    }

    /* 用CSS创建三条横线 */
    .main-navbar .navbar-toggler::before,
    .main-navbar .navbar-toggler::after,
    .main-navbar .navbar-toggler span {
        content: '';
        display: block;
        height: 3px;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    }

    .main-navbar .navbar-toggler span {
        /* 中间的横线，需要一个临时的元素，所以我们用一个空的span来做 */
        /* 在HTML的toggler按钮里加一个空的<span></span> */
        /* 为了简化，我们直接用伪元素来做第三条线 */
    }

    .main-navbar .navbar-toggler::after {
        /* 这是第三条线 */
    }


/* --- 5. 主内容区样式 --- */
.main-content-area {
    padding: 1.5rem;
    border: 1px solid #ddd;
    border-top: none;
    padding: 1rem 1rem 2rem; /* 将 padding-top 从 2rem 减小到 1rem */
}

.nav {
    height: 30px;
    width: 960px;
    background: url(/img/nav_bg.gif) repeat-x;
    background-color: #c33;
    overflow: hidden;
}

/* --- 关键修改：为新的Logo图片添加样式 --- */
.brand-logo-img {
    max-width: 100%; /* 确保图片在小屏幕上能自适应缩小，不会溢出 */
    height: auto; /* 保持图片的宽高比 */
    vertical-align: middle; /* 解决图片底部可能出现的微小空隙 */
}

/* --- 4. 核心修复：添加移动端媒体查询以强制居中 --- */
@media (max-width: 767.98px) {
    /* 在手机屏幕上 */

    /* a. 隐藏左右两边的占位符，它们在移动端不需要 */
    .top-bar .logo-placeholder,
    .top-bar .top-bar-right {
        display: none;
    }

    /* b. 让容器内的内容(也就是我们的Logo)真正居中 */
    .top-bar .container {
        justify-content: center !important;
    }

    /* c. 可以为移动端的Logo设置一个更合适的尺寸 */
    .brand-logo-img {
        max-width: 280px; /* 例如，在手机上最大宽度为280px */
    }
}