/* ==========================================================================
   1. 基础重置与全局样式 (Base & Reset)
   ========================================================================== */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    background-color: #000; 
    color: #fff; 
    font-family: "Microsoft YaHei", sans-serif; 
    overflow-x: hidden; 
}

a { 
    text-decoration: none; 
    color: #FFE39E; 
    transition: background 0.3s, color 0.3s; 
}

ul, li { 
    list-style: none; 
}

.container { 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 0 10px; 
}

/* ==========================================================================
   2. 头部导航 (Header)
   ========================================================================== */
.header { 
    background: #000; 
    padding: 15px 0; 
    border-bottom: 1px solid #111; 
}

.header-inner { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.logo { 
    font-size: 24px; 
    color: #FFE39E; 
    font-weight: bold; 
    font-style: normal;
    display: flex; 
    align-items: center; 
    letter-spacing: 1px; 
}

.nav-right { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
}

.link-text { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    color: #fff; 
    font-size: 16px; 
    transition: color 0.3s; 
}

.link-text img { 
    width: 22px; 
    height: 22px; 
}

.link-text:hover { 
    color: #FFE39E; 
}

.btn-home { 
    font-size: 16px; 
    border: 1px solid #FFE39E; 
    padding: 6px 18px; 
    border-radius: 3px; 
    color: #FFE39E; 
}

.btn-home:hover { 
    background: #FFE39E; 
    color: #000; 
}

/* ==========================================================================
   3. 首页轮播图 (Slider - 仅首页需要)
   ========================================================================== */
.slider-section { 
    width: 100%; 
    max-width: 1920px; 
    margin: 0 auto; 
    position: relative; 
    overflow: hidden; 
}

.slider-container { 
    display: flex; 
    width: 100%; 
    transition: transform 0.4s ease-in-out; 
}

.slide { 
    min-width: 100%; 
}

.slide img { 
    width: 100%; 
    height: auto; 
    display: block; 
    object-fit: cover; 
}

.slider-arrow { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 35px; 
    height: 35px; 
    background: rgba(0,0,0,0.6); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    color: #fff; 
    font-size: 20px; 
    user-select: none; 
    z-index: 10; 
    transition: background 0.3s; 
}

.slider-arrow:hover { 
    background: rgba(0,0,0,0.9); 
}

.arrow-left { left: 15px; }
.arrow-right { right: 15px; }

.pc-slider-wrapper { display: block; }
.mb-slider-wrapper { display: none; }

/* ==========================================================================
   4. 跑马灯公告 (Notice Marquee)
   ========================================================================== */
.notice-wrapper { 
    display: flex; 
    align-items: center; 
    padding: 12px 10px; 
    background: #000; 
    border-bottom: 1px solid #111; 
}

.notice-label { 
    font-size: 15px; 
    color: #fff; 
    font-weight: bold; 
    white-space: nowrap; 
    margin-right: 10px; 
    display: flex; 
    align-items: center; 
}

.notice-label span.line { 
    color: #FFE39E; 
    margin-left: 8px; 
    font-weight: normal; 
}

.marquee { 
    flex-grow: 1; 
    overflow: hidden; 
    white-space: nowrap; 
    position: relative; 
}

.marquee-content { 
    display: inline-block; 
    padding-left: 100%; 
    animation: marquee 15s linear infinite; 
    color: #FFE39E; 
    font-size: 14px; 
    cursor: pointer; 
}

@keyframes marquee { 
    0% { transform: translate(0); } 
    100% { transform: translate(-100%); } 
}

/* ==========================================================================
   5. 按钮与栏目网格 (Buttons & Grid)
   ========================================================================== */
.action-btn-wrapper { 
    margin: 15px auto 25px auto; 
    text-align: center; 
    max-width: 1000px; 
    padding: 0 10px; 
}

.btn-red { 
    display: block; 
    background-color: #df362a; 
    color: #fff !important; 
    font-size: 18px; 
    padding: 12px 0; 
    border-radius: 4px; 
    font-weight: normal; 
    transition: opacity 0.2s; 
    width: 100%; 
}

.btn-red:active { opacity: 0.8; }

.grid-section { 
    margin-bottom: 50px; 
}

.grid-section-title { 
    text-align: center; 
    color: #fff; 
    font-size: 18px; 
    margin-bottom: 15px; 
    font-weight: normal; 
}

.lanmu-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 12px; 
    padding: 0 10px; 
}

.lanmu-grid a { 
    background: #181818; 
    border: 1px solid #303030; 
    border-radius: 4px; 
    padding: 14px 0; 
    text-align: center; 
    font-size: 16px; 
    color: #FFE39E; 
    display: block; 
}

.lanmu-grid a:hover { 
    background: #222; 
    border-color: #FFE39E; 
    color: #fff; 
}

/* ==========================================================================
   6. 子页面内容区域 (Sub-pages Content)
   ========================================================================== */
.content-section { 
    max-width: 1000px; 
    margin: 0 auto 40px auto; 
    padding: 20px; 
    background: #101010; 
    border: 1px solid #303030; 
    border-radius: 4px; 
}

.content-title { 
    font-size: 20px; 
    color: #FFE39E; 
    text-align: center; 
    margin-bottom: 20px; 
    padding-bottom: 15px; 
    border-bottom: 1px solid #303030; 
    font-weight: normal; 
}

.content-body { 
    color: #ddd; 
    font-size: 16px; 
    line-height: 1.8; 
}

.content-body p { margin-bottom: 12px; }

.content-body a.text-link { 
    color: #df362a; 
    text-decoration: underline; 
}

.content-body a.text-link:hover { 
    color: #FFE39E; 
}

/* 子页面表格样式 */
.table-container { 
    overflow-x: auto; 
    margin-top: 15px; 
}

.data-table { 
    width: 100%; 
    border-collapse: collapse; 
    min-width: 600px; 
}

.data-table th, .data-table td { 
    border: 1px solid #303030; 
    padding: 15px; 
    text-align: left; 
}

.data-table th { 
    background: #1a1a1a; 
    color: #FFE39E; 
    font-weight: normal; 
    font-size: 18px; 
}

.data-table td { 
    background: #181818; 
}

.highlight-text { 
    color: #df362a; 
    font-weight: bold; 
}

/* ==========================================================================
   7. 弹窗样式 (Popup & Overlay)
   ========================================================================== */
.popup-overlay { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.7); 
    display: none; 
    z-index: 999; 
}

.popup { 
    position: fixed; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    width: 90%; 
    max-width: 450px; 
    background: #181818; 
    border-radius: 8px; 
    padding: 20px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.8); 
    display: none; 
    z-index: 1000; 
    border: 1px solid #4d4c49; 
}

.popup-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid #4d4c49; 
    padding-bottom: 10px; 
    margin-bottom: 15px; 
}

.popup-header h3 { 
    font-size: 16px; 
    color: #fff; 
    font-weight: normal; 
}

.close-btn { 
    color: #FFE39E; 
    font-size: 26px; 
    cursor: pointer; 
    line-height: 1; 
}

.popup-title { 
    text-align: center; 
    font-size: 16px; 
    color: #fff; 
    margin-bottom: 15px; 
    font-weight: normal;
}

.popup-content { 
    color: #ddd; 
    font-size: 14px; 
    line-height: 1.8; 
    max-height: 250px; 
    overflow-y: auto; 
    margin-bottom: 20px; 
}

.popup-content span { color: #fff; }

.popup-nav { 
    display: flex; 
    justify-content: space-between; 
}

.popup-nav button { 
    background-color: #df362a; 
    color: white; 
    border: none; 
    padding: 8px 15px; 
    border-radius: 3px; 
    cursor: pointer; 
    font-size: 14px; 
}

/* ==========================================================================
   8. 底部样式 (Footer)
   ========================================================================== */
.footer { 
    text-align: center; 
    margin-top: 50px; 
    padding-bottom: 30px; 
    border-top: 1px solid #111; 
    padding-top: 30px; 
}

.footer .text2 { 
    color: #888; 
    font-size: 13px; 
    line-height: 24px; 
}

/* ==========================================================================
   9. 响应式布局 (Media Queries)
   ========================================================================== */
@media (max-width: 767px) {
    .link-text { display: none; }
    .pc-slider-wrapper { display: none; }
    .mb-slider-wrapper { display: block; }
}

@media (min-width: 768px) {
    .btn-home { display: none; }
    .lanmu-grid { grid-template-columns: repeat(6, 1fr); gap: 15px; }
    .btn-red { max-width: 400px; margin: 0 auto; }
    .notice-wrapper, .action-btn-wrapper, .grid-section { 
        max-width: 1000px; 
        margin-left: auto; 
        margin-right: auto; 
    }
}