html,body,p,a{
    padding: 0;
    margin:0;
    box-sizing: border-box;
}
*{
    box-sizing: border-box;
}
a{
    text-decoration: none;
}
.headBox{
    width: 100%;
    height: 240px;
}
.headBox img{
    width: 100%;
    height: 240px;
    object-fit: cover;
}
.pc-header .searchBox{
    position: absolute;
    right: 42px;
    top:160px;
    width: 360px;
    height: 52px;
    background: rgba(0,0,0,0.1);
    border-radius: 6px;
    border: 1px solid #FFFFFF;
    padding:0 20px;
    font-size: 18px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
.mobile-searchBox{
    width: 20px;
    border: none;
    position: absolute;
    right: 56px;
    top: 15px;
    padding: 10px;
    box-sizing: content-box;
}
.searchBox img{
    width: 24px;
    height: 24px;
}
.navBox{
    height: 76px;
    width: 100%;
    padding:0 42px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: url('../image/navBg.png') no-repeat left top;
    background-size: 100% 100%;
    position: relative;
}
.navBox .navItem{
    font-weight: bold;
    font-size: 22px;
    color: #FFFFFF;
    line-height: 76px;
    flex-grow: 1;
    text-align: center;
    cursor: pointer;
    position: relative;
}
.navBox .navItem:hover{
    font-weight: 800;
    color: #EAC299;
}
.arrowImg{
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url('../image/select1.png') no-repeat left top;
    background-size: 100% 100%;
}
.navBox .navItem:hover .arrowImg{
    background: url('../image/select2.png') no-repeat left top;
    background-size: 100% 100%;
    transform: rotate(180deg);
    transform-origin: 50% 60%; /* 或者使用 50% 50%，这是默认值 */
}
.navItem:hover .menuList{
    display: flex;
}
.navBox .navLine{
    display: inline-block;
    width: 2px;
    height: 24px;
    background: #FFE4AF;
    opacity: 0.5;
}
.navBox .navActive{
    font-weight: 800;
    color: #EAC299;
    
}
.navBox a{
    color:#fff;
}
.menuList{
    position: absolute;
    width: 100%;
    
    flex-direction: column;
    background: #FFFFFF;
    box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1);
    border-radius: 0px 0px 6px 6px;
    border: 1px solid #EEEEEE;
    z-index: 9;
    display: none;
}
.menuList .menuItem{
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    color: #333333;
    text-align: center;
}
.menuList .menuItem:hover{
    background: #F6F7F9;
    color: #A42227;
}
.menuList .menuItem.menuItemActive{
    background: #F6F7F9;
    color: #A42227;
}

.footBox{
    width: 100%;
    height: 196px;
    padding:40px 42px 0 42px;
    background: url('../image/footerBg.png') no-repeat left top;
    background-size: 100% 100%;
}
.footBox p{
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    line-height: 22px;
    margin-bottom: 8px;
}

/* =========================================================
   移动端全局适配样式 (追加在 common.css 底部)
========================================================= */
/* --- 基础显隐控制 --- */
.mobile-header, .mobile-layout, .mobile-footer {
    display: none;
}

@media screen and (max-width: 768px) {
    /* 隐藏所有 PC 元素 */
    .pc-header, .pc-layout, .pc-footer {
        display: none !important;
    }
    /* 显示移动端元素 */
    .mobile-header, .mobile-layout, .mobile-footer {
        display: block;
    }

    /* 基础重置 */
    body {
        background: #f4f5f7 !important;
        padding: 0;
        margin: 0;
    }

    img, video, iframe {
        max-width: 100% !important;
        height: auto;
    }

    /* ====== 1. 移动端公共 Header & Footer ====== */
    .mobile-header {
        background: #A42227;
        position: relative;
    }

    .m-top-bar {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 20px;
        padding: 15px 20px;
        color: #fff;
    }

    .m-logo {
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 2px;
    }

    .m-menu-toggle {
        font-size: 24px;
        cursor: pointer;
    }

    .m-nav-list {
        background: #fff;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 999;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .m-nav-item {
        display: flex;
        justify-content: space-between;
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        color: #333;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }

    .m-sub-nav {
        background: #fafafa;
    }

        .m-sub-nav a {
            display: block;
            padding: 12px 20px 12px 40px;
            border-bottom: 1px dashed #eee;
            color: #666;
            text-decoration: none;
            font-size: 14px;
        }

    .m-arrow {
        font-size: 12px;
        color: #999;
    }

    .mobile-footer {
        background: #333;
        color: #ccc;
        padding: 20px 15px;
        text-align: center;
        font-size: 12px;
        line-height: 1.8;
    }

    /* ====== 2. 移动端公共 Layout ====== */
    .mobile-layout {
        padding: 15px;
        min-height: calc(100vh - 120px);
    }

    /* 公共栏目标题 */
    .m-column-title {
        font-size: 20px;
        font-weight: bold;
        color: #333;
        margin-bottom: 15px;
        padding-left: 10px;
        border-left: 4px solid #A42227;
        line-height: 1;
    }

    /* 公共容器 */
    .m-card {
        background: #fff;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* ====== 3. 移动端纯文本列表 (listText) ====== */
    .m-text-item {
        display: flex;
        flex-direction: column;
        padding: 12px 0;
        border-bottom: 1px dashed #eee;
        text-decoration: none;
    }

        .m-text-item:last-child {
            border-bottom: none;
        }

    .m-text-title {
        font-size: 16px;
        color: #333;
        line-height: 1.5;
        margin-bottom: 6px;
    }

    .m-text-time {
        font-size: 12px;
        color: #999;
        text-align: right;
    }

    /* ====== 4. 移动端图文列表 (listTextImg & character) ====== */
    .m-imgtext-item {
        display: flex;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
        text-decoration: none;
    }

        .m-imgtext-item:last-child {
            border-bottom: none;
        }

    .m-imgtext-cover {
        width: 110px;
        height: 80px;
        object-fit: cover;
        border-radius: 6px;
        flex-shrink: 0;
        margin-right: 15px;
    }

    .m-imgtext-info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
    }

    .m-imgtext-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .m-imgtext-desc {
        font-size: 13px;
        color: #666;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.5;
        margin-top: 5px;
    }

    .m-imgtext-time {
        font-size: 12px;
        color: #999;
        margin-top: 5px;
    }

    /* ====== 5. 移动端图片网格列表 (listImgs) ====== */
    .m-grid-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .m-grid-item {
        width: 48%;
        margin-bottom: 15px;
        position: relative;
        border-radius: 6px;
        overflow: hidden;
        text-decoration: none;
    }

    .m-grid-cover {
        width: 100%;
        height: 110px;
        object-fit: cover;
        display: block;
    }

    .m-grid-title {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(0,0,0,0.6);
        color: #fff;
        font-size: 13px;
        padding: 6px 10px;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }

    /* ====== 6. 移动端详情页 (artDetail) ====== */
    .m-detail-crumb {
        font-size: 14px;
        color: #666;
        margin-bottom: 15px;
    }

        .m-detail-crumb a {
            color: #666;
            text-decoration: none;
        }

        .m-detail-crumb img {
            width: 12px;
            margin: 0 5px;
        }

    .m-detail-title {
        font-size: 22px;
        font-weight: bold;
        color: #333;
        line-height: 1.4;
        margin-bottom: 10px;
        text-align: center;
    }

    .m-detail-subtitle {
        font-size: 16px;
        color: #666;
        text-align: center;
        margin-bottom: 10px;
    }

    .m-detail-info {
        font-size: 12px;
        color: #999;
        text-align: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }

    .m-detail-content {
        font-size: 16px;
        color: #444;
        line-height: 1.8;
        text-align: justify;
    }

        .m-detail-content img {
            border-radius: 4px;
            margin: 10px 0;
        }

        .m-detail-content video {
            width: 100% !important;
            aspect-ratio: 16/9;
            border-radius: 6px;
            margin: 10px 0;
        }

    /* ====== 7. 移动端概览特殊页 (gailan) ====== */
    .m-gailan-banner {
        width: 100%;
        border-radius: 8px;
        margin-bottom: 15px;
    }

    .m-gailan-tabs {
        display: flex;
        border-bottom: 1px solid #eee;
        margin-bottom: 15px;
    }

    .m-gailan-tab {
        flex: 1;
        text-align: center;
        padding: 12px 0;
        font-size: 15px;
        color: #666;
        font-weight: bold;
    }

    .m-gailan-tab-active {
        color: #A42227;
        border-bottom: 2px solid #A42227;
    }

    .m-gailan-arts {
        display: none;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .m-gailan-arts-active {
        display: flex;
    }

    .m-gailan-art-btn {
        width: 31%;
        background: #f5f5f5;
        color: #333;
        font-size: 14px;
        text-align: center;
        padding: 10px 0;
        border-radius: 4px;
        margin-bottom: 10px;
        text-decoration: none;
    }

    .m-gailan-art-btn-active {
        background: #A42227;
        color: #fff;
    }

    /* ====== 8. 公共分页 ====== */
    .m-pagination {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 20px;
    }

    .m-page-btn {
        display: inline-block;
        padding: 6px 12px;
        margin: 0 4px 8px;
        background: #fff;
        color: #333;
        border: 1px solid #ddd;
        border-radius: 4px;
        text-decoration: none;
        font-size: 14px;
    }

    .m-page-active {
        background: #A42227;
        color: #fff;
        border-color: #A42227;
    }

    /* ====== 滑动导航栏 ====== */
    .m-scroll-nav-wrapper {
        background: #D32126; /* 导航底色，参考图中深红 */
        width: 100%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .m-scroll-nav {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }

        .m-scroll-nav::-webkit-scrollbar {
            display: none; /* Chrome/Safari 隐藏滚动条 */
        }

    .m-scroll-item {
        padding: 12px 18px;
        color: #fff;
        font-size: 16px;
        text-decoration: none;
        position: relative;
        cursor: pointer;
    }

    .m-dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        border-radius: 0 0 4px 4px;
        z-index: 1000;
        min-width: 120px;
    }

        .m-dropdown-menu a {
            display: block;
            padding: 12px 15px;
            color: #333;
            font-size: 14px;
            border-bottom: 1px solid #f0f0f0;
            text-decoration: none;
        }

            .m-dropdown-menu a:last-child {
                border-bottom: none;
            }

    /* ====== 重构栏目标题 (带有背景和红线) ====== */
    .m-title {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 15px;
        padding-bottom: 0;
        /* 覆盖原有的左侧加粗竖线设置 */
        border-left: none;
        padding-left: 0;
        /* 取消直接在父容器上画底边框 */
        /* border-bottom: 2px solid #D32126; */
    }

        /* 使用 ::after 独立绘制底部的红线 */
        .m-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 6px;
            right: 0;
            height: 2px;
            background-color: #D32126;
            z-index: 1; /* 层级低于标题文字，确保被标题背景压住 */
        }

    .m-title-text {
        background: url('/image/columnTitleBg.png') no-repeat left bottom;
        background-size: 100% 100%;
        padding: 6px 30px 6px 15px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        position: relative;
        /* bottom: -2px; 如果你发现红线和图有缝隙，可以适当加这句把背景图往下压一点点 */
        z-index: 2; /* 层级设为2，盖住底部的红线 */
    }

    .m-more {
        font-size: 13px;
        color: #999;
        font-weight: normal;
        text-decoration: none;
        margin-bottom: 5px;
        position: relative;
        z-index: 2;
    }
}