/* 全局样式重置与基础设置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #131313;
    background-color: #f9fafb;
    line-height: 1.6;
}

/* 头部窄条样式 */
.header-narrow {
    background-color: rgba(211, 33, 31, 0.85); /* 添加透明度，从完全不透明的#d3211f改为85%透明度 */
    color: white;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: relative;
    z-index: 1000;
}

.header-narrow-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-logo {
    height: 30px;
    width: auto;
}

.header-narrow-text {
    font-size: 18px;
    font-weight: 700;
}

.header-narrow-right {
    display: flex;
    gap: 15px;
}

.header-btn {
    padding: 5px 15px;
    border: none;
    background-color: #d3211f;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.header-btn:hover {
    background-color: #b91c1c;
}

/* 头部背景图区域 */
.header-bg {
    height: 120px; /* 从180px减小至120px，为原始高度的三分之二 */
    background-image: linear-gradient(to right, #d43027, #d6d0c4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 100px;
    position: relative;
    overflow: hidden;
}

.header-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/itopimg.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.1;
}

.header-bg-left {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.header-title {
    font-size: 36px;
    font-weight: 700;
    color: white;
    margin-bottom: 0;
}

.header-url {
    font-size: 18px;
    color: white;
    font-weight: 500;
    align-self: flex-end;
    padding-top: 40px;
}

.header-bg-right {
    position: relative;
    z-index: 1;
}

.search-container {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 5px 10px;
    border-radius: 50px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.search-label {
    color: #6b7280;
    font-size: 14px;
    margin-right: 10px;
}

.search-input {
    border: none;
    outline: none;
    padding: 8px 12px;
    width: 200px;
    font-size: 14px;
}

.search-btn {
    background-color: #d3211f;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.search-btn:hover {
    background-color: #b91c1c;
}

.navbar {
    background-color: #d3211f;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 999;
    /* 确保导航栏高度固定 */
    height: 60px;
}

.navbar-container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    /* 导航容器高度与导航栏一致 */
    height: 100%;
}

.navbar-left {
    display: flex;
    align-items: center;
    /* 左侧区域高度与导航栏一致 */
    height: 100%;
    /* 占满导航栏宽度 */
    width: 100%;
}

.mall-icon-link {
    display: flex;
    align-items: center;
    margin-left: 0;
    color: white;
    transition: all 0.3s ease;
    /* 购物袋图标链接高度与导航栏一致 */
    height: 100%;
    padding: 0 10px;
    flex: 1;
    justify-content: center;
}

.mall-icon-link:hover {
    color: #f2e383;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mall-icon {
    height: 100%;
    max-height: 60px;
    width: auto;
    display: block;
    padding: 10px 0;
}

.navbar-menu {
    display: flex;
    list-style: none;
    gap: 0;
    /* 导航菜单高度与导航栏一致 */
    height: 100%;
    margin: 0;
    /* 平均分布导航项 */
    flex: 1;
    justify-content: space-around;
    margin-left: -50px
}

.navbar-item {
    position: relative;
    /* 导航项高度与导航栏一致 */
    height: 100%;
}

.navbar-link {
    display: flex;
    align-items: center;
    /* 导航链接高度与导航栏一致 */
    height: 100%;
    padding: 0 25px;
    color: white;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

/* 商城按钮独立样式 */
.mall-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    margin: 0;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* 商城图标样式，使其完全填充A标签区域并更醒目 */
.mall-icon {
    height: 50px;
    width: auto;
    display: block;
    margin: 0;
    padding: 0;
    transition: transform 0.3s ease;
}

/* 增强鼠标悬停效果，使其更显眼 */
.navbar-link:hover {
    /* 玻璃状效果 */
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* 下划线改为金黄色 */
    border-bottom-color: #f2e383;
    border-bottom-width: 3px;
    
    /* 确保悬停效果与导航栏同高 */
    height: 100%;
    
    /* 移除上浮动效，保持与导航栏同高 */
    transform: translateY(0);
    
    /* 保留文字阴影效果 */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 下拉菜单 */
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    background-color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 8px 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 999;
    padding: 0;
    margin: 0;
}

/* 职业化培训下拉菜单样式 - 与导航栏颜色一致 */
.navbar-item:nth-child(7) .dropdown {
    background-color: #d3211f !important;
    width: 100%;
    min-width: 100%;
    border-radius: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform-origin: top center;
    transform: scaleY(0.95);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    margin: 0;
    left: 0;
    right: 0;
}

.navbar-item:nth-child(7):hover .dropdown {
    transform: scaleY(1);
    opacity: 1;
}

.navbar-item:nth-child(7) .dropdown-link {
    color: white;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    text-align: center;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.navbar-item:nth-child(7) .dropdown-link:last-child {
    border-bottom: none;
}

.navbar-item:nth-child(7) .dropdown-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    transform: translateX(0);
    padding: 12px 15px;
}

/* 移动端下拉菜单显示样式 */
.dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navbar-item:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    list-style: none;
}

.dropdown-link {
    display: block;
    padding: 12px 20px;
    color: #4b5563;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.dropdown-link:hover {
    background-color: #f3f4f6;
    color: #d3211f;
}

/* 移动端菜单按钮 */
    .mobile-menu-btn {
        display: none;
        background: none;
        border: none;
        font-size: 24px;
        color: #ffffff;
        cursor: pointer;
    }

    /* 导航栏移动端折叠样式 */
    @media (max-width: 768px) {
        /* 确保导航容器的flex布局在移动端正常工作 */
        .navbar-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 0 20px;
        }
        
        /* 移动端菜单按钮 - 在移动端显示 */
        .mobile-menu-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-left: auto;
            order: 3;
        }
        
        .mobile-menu-btn span {
            font-size: 16px;
            font-weight: 700;
        }
        .navbar-menu {
                position: fixed;
                top: 0;
                right: -100%;
                width: 70%;
                height: 100vh;
                background-color: rgba(211, 33, 31, 1);
                /* 玻璃质感 */
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                flex-direction: column;
                align-items: stretch;
                box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
                transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 999;
                padding-top: 60px;
                /* 移动端不使用平均分布 */
                flex: none;
                justify-content: flex-start;
            }
            
            .navbar-menu.open {
                right: 0;
            }
        
        .navbar-item {
            width: 100%;
            text-align: left;
            position: relative;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            height: 50px;
            display: flex;
            align-items: center;
        }
        
        .navbar-link {
            padding: 15px 20px;
            width: 100%;
            text-align: left;
            justify-content: flex-start;
            height: 100%;
            display: flex;
            align-items: center;
            /* 确保文字横版显示 */
            writing-mode: horizontal-tb;
            text-orientation: mixed;
            white-space: nowrap;
        }
        
        /* 特别针对职业化培训菜单项的样式 */
        .navbar-item:nth-child(7) .navbar-link {
            writing-mode: horizontal-tb;
            text-orientation: mixed;
            white-space: nowrap;
        }
        
        .mobile-menu-btn {
            display: block;
        }
        
        /* 移动端下拉菜单样式 - 与导航栏背景色一致 */
        .dropdown {
            position: static;
            width: 100%;
            background-color: rgba(211, 33, 31, 1);
            box-shadow: none;
            border-radius: 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        
        .dropdown.show {
            max-height: 500px;
            display: block;
        }
        
        /* 特别针对职业化培训下拉菜单的样式 */
        .navbar-item:nth-child(7) .dropdown {
            background-color: rgba(211, 33, 31, 1);
            width: 100%;
        }
        
        .navbar-item:nth-child(7) .dropdown-link {
            display: block;
            width: 100%;
            box-sizing: border-box;
        }
        
        .dropdown-item {
            background-color: transparent;
        }
        
        .dropdown-link {
            color: white;
            padding: 12px 20px;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dropdown-link:hover {
            background-color: rgba(255, 255, 255, 0.15);
            color: white;
        }
        
        /* 移动端导航栏左侧区域不占满宽度 */
        .navbar-left {
            width: auto;
        }
        
        /* 移动端购物袋图标链接不参与平均分布 */
        .mall-icon-link {
            flex: none;
            justify-content: flex-start;
        }
}

/* 导航栏滚动效果样式 */
.navbar-scrolled {
    background-color: rgba(211, 33, 31, 0.95);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 确保在桌面端始终显示导航菜单 */
    @media (min-width: 993px) {
        .navbar-menu {
            position: static !important;
            flex-direction: row !important;
            max-height: none !important;
            overflow: visible !important;
            box-shadow: none !important;
            /* 桌面端使用平均分布 */
            flex: 1;
            justify-content: space-around;
            margin-left:-50px;
        }
        
        .navbar-link {
            width: auto !important;
            text-align: left !important;
        }
        
        /* 在桌面端隐藏移动端菜单按钮 */
        .mobile-menu-btn {
            display: none !important;
        }
        
        /* 桌面端导航栏左侧区域占满宽度 */
        .navbar-left {
            width: 100%;
        }
        
        /* 桌面端购物袋图标链接参与平均分布 */
        .mall-icon-link {
            flex: 1;
            justify-content: center;
        }
    }

/* 广告大图区域 */
.ad-banner {
    width: 100%;
    max-width: 1200px;
    height: 120px;
    margin: 8px auto;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    position: relative;
}

.ad-banner-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.ad-banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 36px;
    font-weight: 800;
    text-align: center;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    z-index: 10;
    transition: transform 0.3s ease;
    text-decoration: none;
}

.ad-banner-text:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

/* 内容区域 */
.content-container {
    max-width: 1200px;
    margin: 0 auto 10px;
    display: flex;
    gap: 20px;
    align-items: stretch;
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
}

/* 轮播图区域 */
.slider-section {
    width: 60%;
    min-width: 0;
    box-sizing: border-box;
}

/* 轮播图区域 - 保持与右侧时讯栏目高度一致 */
.slider-container {
    position: relative;
    height: 380px;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    margin-right: 5px;
}

.slider-wrapper {
    position: relative;
    height: 100%;
}

.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.slide-item.active {
    opacity: 1;
    z-index: 1;
}

.slide-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #f0f0f0;
}

/* 幻灯片图片链接样式 */
.slide-img-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* 幻灯片标题链接样式 */
.slide-title-link {
    text-decoration: none;
    color: white;
    display: inline-block;
    transition: transform 0.3s ease;
}

.slide-title-link:hover {
    transform: scale(1.05);
}

.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    padding: 30px;
    color: white;
}

.slide-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

.slide-description {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 15px;
}

.slide-link {
    display: inline-block;
    padding: 8px 20px;
    background-color: #d3211f;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.slide-link:hover {
    background-color: #b91c1c;
}

/* 轮播图控制按钮 */
.slider-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0;
    z-index: 2;
    width: 100%;
}

.slider-control-btn {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    color: #d3211f;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.slider-control-btn.prev {
    margin-left: 15px;
}

.slider-control-btn.next {
    margin-right: 15px;
}

.slider-control-btn:hover {
    background-color: white;
    color: #b91c1c;
}

/* 轮播图指示器 */
.slider-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
}

.slider-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-indicator.active {
    background-color: white;
    width: 30px;
    border-radius: 6px;
}

/* 时讯栏目区域 - 保持与左侧幻灯片高度一致 */
.training-section {
    width: 40%;
    background-color: white;
    padding: 25px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    height: 380px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    margin-left: 5px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e5e7eb;
}

.section-title {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    color: #d3211f;
}

.section-icon {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    color: #d3211f;
}

.section-more {
    color: #6b7280;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.section-more:hover {
    color: #d3211f;
}

.training-list {
    list-style: none;
    max-height: calc(380px - 100px);
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* 限制时讯栏目只显示4条新闻 */
.training-list .training-item:nth-child(n+5) {
    display: none;
}

.training-item {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f3f4f6;
}

.training-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.training-item-header {
    margin-bottom: 5px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.training-content-wrapper {
    position: relative;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.training-link-wrapper {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

.training-link-wrapper:hover {
    transform: translateX(0);
    color: #d3211f;
}

.training-date {
    background-color: #fee2e2;
    color: #d3211f;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    display: inline-block;
    position: static;
    margin-top: 7px; /* 约半行高度，与标题错开 */
    flex-shrink: 0;
    align-self: flex-start;
}

.training-title {
    font-size: 14px;
    font-weight: 500;
    color: #131313;
    margin: 0;
    flex: 1;
    line-height: 1.4;
    padding-right: 10px; /* 与时间标签保持间距 */
}

.training-description {
    display: none;
}

.training-link {
    display: inline-block;
    padding: 6px 16px;
    background-color: #d3211f;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-size: 12px;
    transition: background-color 0.3s ease;
}

.training-link:hover {
    background-color: #b91c1c;
}

/* 图书推荐区域样式 */
.books-section {
    background-color: #f9f9f9;
    padding: 12px 0;
}

.books-container {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    gap: 20px;
}

/* 移动端图书推荐区域布局优化 */
@media (max-width: 768px) {
    .books-section {
        padding: 20px 0;
    }
    
    .books-container {
        width: 100%;
        flex-direction: column;
        padding: 0 15px;
        gap: 30px;
    }
}

/* 重点图书推荐样式 */
.featured-books {
    width: calc(100% - 380px);
    background-color: #fff;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 20px;
}

/* 移动端重点图书推荐样式优化 */
@media (max-width: 768px) {
    .featured-books {
        width: 100%;
        padding: 15px;
    }
    
    .books-grid {
        gap: 20px;
    }
    
    .books-row {
        flex-direction: column;
        gap: 20px;
    }
}

.featured-books .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding: 12px 15px;
    background-color: #d3211f;
    border-radius: 0;
}

.featured-books .section-title {
    font-size: 20px;
    font-weight: bold;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.featured-books .section-icon {
    color: white;
    font-size: 22px;
}

.featured-books .section-more {
    color: white;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background-color: rgba(255,255,255,0.2);
    border-radius: 0;
    transition: background-color 0.3s ease;
}

.featured-books .section-more:hover {
    background-color: rgba(255,255,255,0.3);
    text-decoration: none;
}

/* 全部图书栏目样式 - 与重点图书推荐保持一致 */
.all-books .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 12px 15px;
    background-color: #d3211f;
    border-radius: 0;
}

.all-books .section-title {
    font-size: 20px;
    font-weight: bold;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.all-books .section-icon {
    color: white;
    font-size: 22px;
}

.all-books .section-more {
    color: white;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background-color: rgba(255,255,255,0.2);
    border-radius: 0;
    transition: background-color 0.3s ease;
}

.all-books .section-more:hover {
    background-color: rgba(255,255,255,0.3);
    text-decoration: none;
}

/* 响应式样式 - 1200px */
@media (max-width: 1200px) {
    .navbar-container,
    .content-container,
    .books-container {
        max-width: 95%;
    }
    
    .header-bg {
        padding: 0 50px;
    }
}

/* 响应式样式 - 992px */
@media (max-width: 992px) {
    .header-bg {
        padding: 0 30px;
    }
    
    /* 保持幻灯片与时讯栏目高度一致 */
    .slider-container {
        height: 500px;
    }
    
    .training-section {
        height: 500px;
    }
    
    .training-list {
        max-height: calc(500px - 100px);
    }
    
    /* 在992px断点下仍然只显示4条新闻 */
    .training-list .training-item:nth-child(n+5) {
        display: none;
    }
    
    .books-container {
        flex-direction: column;
        align-items: center;
    }
    
    .featured-books {
        width: 100%;
    }
}

/* 响应式样式 - 768px */
@media (max-width: 768px) {
    .header-bg {
        padding: 0 20px;
        flex-direction: column;
        height: auto;
        padding: 30px 20px;
        text-align: center;
        gap: 20px;
    }
    
    .header-bg-left {
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.header-title {
    font-size: 28px;
    margin-bottom: 5px;
}

.header-url {
    font-size: 16px;
    align-self: center;
}
    
    .header-bg-right {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    /* 培训课程移动端垂直排列 */
    .training-courses-content {
        flex-direction: column;
        gap: 20px;
    }
    
    .video-section {
        max-width: none;
    }
    
    .search-container {
        max-width: 320px;
        width: 100%;
        padding: 5px 10px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        /* 固定高度，防止异常增加 */
        height: 40px;
        /* 确保内容不会溢出 */
        overflow: hidden;
    }
    
    .search-label {
        display: none;
    }
    
    .search-input {
        width: auto;
        flex: 1;
        margin-bottom: 0;
        margin-right: 10px;
        /* 确保高度一致 */
        height: 30px;
        line-height: 14px;
        /* 防止内容溢出 */
        box-sizing: border-box;
    }
    
    .search-btn {
        margin-top: 0;
        width: auto;
        /* 确保高度一致 */
        height: 30px;
        line-height: 14px;
        /* 防止文字换行 */
        white-space: nowrap;
    }
    
    .ad-banner {
        margin: 20px auto;
    }
    
    .ad-banner-img {
        height: 150px;
    }
    
    .ad-banner-text {
        font-size: 32px;
        font-weight: 800;
        text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8);
    }
    
    .content-container {
        flex-direction: column;
    }
    
    .slider-section,
    .training-section {
        width: 100%;
    }
    
    .slider-container {
        height: 350px;
    }
    
    .training-section {
        height: 350px;
        margin-top: 20px;
    }
    
    .training-list {
        max-height: none;
    }
    
    .training-item-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .training-date {
        margin-left: 0;
        margin-top: 5px;
    }
    
    .training-title {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
    
    .slide-caption {
        padding: 20px;
    }
    
    .slide-title {
        font-size: 20px;
    }
    
    .slide-description {
        font-size: 14px;
    }
    
    /* 重点图书推荐移动端样式 */
    .books-row {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .book-item {
        width: calc(50% - 7.5px);
        flex: none;
        text-align: center;
    }
    
    .book-cover {
        display: flex;
        justify-content: center;
    }
    
    .book-img {
        max-width: 100%;
        height: auto;
        max-height: 220px;
        margin: 0 auto;
    }
}

/* 响应式样式 - 576px */
    @media (max-width: 576px) {
        .header-narrow {
            flex-direction: column;
            height: auto;
            padding: 10px;
            gap: 10px;
        }
        
        /* 培训课程移动端垂直排列 */
        .training-courses-content {
            flex-direction: column;
            gap: 15px;
        }
        
        .video-section {
            max-width: none;
        }
        
        .header-narrow-left {
            width: 100%;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        
        .header-narrow-right {
            width: 100%;
            justify-content: center;
        }
        
        .header-bg {
            height: 180px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        
        .header-bg-left {
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        
        .header-title {
            font-size: 24px;
            margin-bottom: 3px;
        }
        
        .header-url {
            font-size: 14px;
            align-self: center;
        }
        
        .search-container {
            max-width: 280px;
            width: 100%;
            padding: 4px 8px;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            /* 固定高度，防止异常增加 */
            height: 36px;
            /* 确保内容不会溢出 */
            overflow: hidden;
        }
        
        .search-input {
            font-size: 13px;
            padding: 6px 10px;
            flex: 1;
            min-width: 0;
            box-sizing: border-box;
            /* 确保高度一致 */
            height: 28px;
            line-height: 13px;
        }
        
        .search-btn {
            font-size: 13px;
            padding: 6px 12px;
            margin-top: 0;
            margin-left: 5px;
            /* 确保高度一致 */
            height: 28px;
            line-height: 13px;
            /* 防止文字换行 */
            white-space: nowrap;
        }
        
        /* 重点图书推荐移动端576px样式 */
        .books-grid {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        
        .books-row {
            width: 100%;
            justify-content: center;
        }
        
        .book-item {
            text-align: center;
        }
        
        .book-cover {
            display: flex;
            justify-content: center;
        }
        
        .book-img {
            margin: 0 auto;
        }
    }
    
    /* 移动端小屏幕样式 */
    @media (max-width: 576px) {
        
        .search-input {
            font-size: 13px;
            padding: 6px 10px;
            flex: 1;
            min-width: 0;
            box-sizing: border-box;
        }
        
        .search-btn {
            font-size: 13px;
            padding: 6px 12px;
            margin-top: 0;
            margin-left: 5px;
        }
        
        .ad-banner-img {
            height: 150px;
        }
        
        .slider-container {
            height: 300px;
        }
        
        .training-section {
            height: auto;
            padding-bottom: 20px;
        }
        
        .training-list {
            max-height: none;
        }
        
        .slide-caption {
            padding: 20px;
        }
        
        .slide-title {
            font-size: 18px;
        }
        
        /* 重点图书推荐移动端样式 */
        .books-row {
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .book-item {
            width: calc(50% - 7.5px);
            flex: none;
        }
        
        .book-img {
            max-width: 100%;
            height: auto;
            max-height: 220px;
        }
    }
    
    /* 极小屏幕样式 */
    @media (max-width: 480px) {
        .search-container {
            max-width: 240px;
            width: 100%;
            padding: 3px 6px;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            /* 固定高度，防止异常增加 */
            height: 32px;
            /* 确保内容不会溢出 */
            overflow: hidden;
        }
        
        .search-input {
            font-size: 12px;
            padding: 5px 8px;
            flex: 1;
            min-width: 0;
            box-sizing: border-box;
            /* 确保高度一致 */
            height: 26px;
            line-height: 12px;
            /* 缩小占位符文字 */
        }
        
        .search-input::placeholder {
            font-size: 11px;
        }
        
        .search-btn {
            font-size: 12px;
            padding: 5px 10px;
            margin-top: 0;
            margin-left: 5px;
            /* 确保高度一致 */
            height: 26px;
            line-height: 12px;
            /* 防止文字换行 */
            white-space: nowrap;
            /* 只保留图标，隐藏文字 */
            text-indent: -9999px;
            overflow: hidden;
            width: 26px;
            padding: 0;
            border-radius: 50%;
        }
        
        .search-btn i {
            text-indent: 0;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }

/* 全部图书区域样式 */
.all-books-section {
    background-color: #fff;
    padding: 10px 0;
}

.all-books-container {
    width: 1200px;
    margin: 0 auto;
}

.all-books {
    border: 1px solid #e5e7eb;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.all-books-content {
    display: flex;
}

/* 三栏布局 */
.book-categories {
    flex: 1;
    border-right: 1px solid #e5e7eb;
    padding: 15px;
}

.book-slider {
    flex: 2;
    border-right: 1px solid #e5e7eb;
    padding: 15px;
}

.recommended-books {
    flex: 3;
    padding: 15px;
    padding-top: 10px; /* 增加顶部内边距，为category-header腾出空间 */
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中内容 */
}

/* 分类样式 */
.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #e5e7eb;
}

.category-label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.new-tag {
    background-color:#d3211f;
    color:white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    animation: blink 1.5s infinite;
    text-decoration: none;
    display: inline-block;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.category-list {
    list-style: none;
}

.category-item {
    margin-bottom: 10px;
    position: relative;
}

.category-link {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.category-link:hover {
    background-color: #f3f4f6;
    color: #d3211f;
}

.category-icon {
    margin-right: 8px;
    color: #d3211f;
    font-size: 16px;
}

/* 二级分类样式 */
.sub-categories {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: 360px;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.parent-category:hover .sub-categories {
    display: block;
}

.sub-category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 15px;
}

.sub-category-link {
    padding: 8px 12px;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-align: center;
}

.sub-category-link:hover {
    background-color: #f3f4f6;
    color: #d3211f;
}

/* 图书幻灯片样式 - 放大尺寸 */
.book-slider {
    position: relative;
    height: 600px;
    display: flex;
    flex-direction: column;
}

.book-slider .slider-wrapper {
    overflow: visible;
    position: relative;
    height: 500px;
    background-color: white;
    border-radius: 4px;
    flex: 1;
}

.book-slider .slide-item {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.5s ease;
    text-align: center;
    padding: 20px;
    overflow: hidden; /* 改为hidden，防止内容溢出 */
    display: flex; /* 添加flex布局 */
    flex-direction: column; /* 垂直排列 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
}

.book-slider .slide-item.active {
    opacity: 1;
    z-index: 2;
}

.book-slider .slide-item .slider-book-desc {
    opacity: 1 !important;
    visibility: visible !important;
    position: relative;
    z-index: 10;
}

.book-slider .book-slide {
    /* 确保图书幻灯片有独立的样式 */
    display: block !important;
    position: absolute !important;
}

.slider-book-img {
    max-width: 320px;
    max-height: 350px;
    object-fit: cover;
    margin: 0 auto;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* 幻灯片控制按钮样式 */
.book-slider .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #333;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.book-slider .slider-btn:hover {
    background-color: #d3211f;
    color: white;
}

.book-slider .prev-btn {
    left: 10px;
}

.book-slider .next-btn {
    right: 10px;
}

/* 幻灯片指示器样式 - 已隐藏 */
.book-slider .book-slider-indicators {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    display: none; /* 隐藏指示器 */
    justify-content: center;
    gap: 8px;
    z-index: 10;
}

.book-slider .book-slider-indicators .book-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    display: none; /* 隐藏单个指示器 */
}

.book-slider .book-slider-indicators .book-indicator.active {
    background-color: #d3211f;
    transform: scale(1.2);
    display: none; /* 隐藏活动状态指示器 */
}

/* 小封面展示区域样式 - 与大图成为整体 */
.small-covers-container {
    display: flex;
    justify-content: space-between;
    padding: 15px 10px;
    background-color: #f9fafb; /* 与上方幻灯片背景色一致 */
    gap: 10px;
}

.small-cover-item {
    flex: 1;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.small-cover-item.active {
    border-color: #d3211f;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.small-cover-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.small-cover-img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
}

.slider-book-title {
    margin-top: 15px;
    font-size: 16px;
    color: #333;
}

.slider-book-desc {
    margin-top: 12px;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    max-width: 340px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 12px;
    background-color: #f9fafb;
    border-radius: 4px;
    border-left: 3px solid #d3211f;
    display: block !important;
    position: relative;
    z-index: 10;
}

/* 轮播图图书链接样式 */
.slider-book-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.slider-book-link:hover {
    transform: translateY(-3px);
}

.slider-book-link:hover .slider-book-img {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.slider-book-link:hover .slider-book-title {
    color: #d3211f;
}

/* 修改为更具体的选择器，避免与头部轮播图控制按钮冲突 */
.book-slider-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.slider-btn {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #666;
}

.slider-btn:hover {
    background-color: #d3211f;
    color: white;
    border-color: #d3211f;
}

/* 推荐图书样式 */
.recommended-books-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 15px; /* 增加行间距，第一个值是行间距，第二个是列间距 */
    align-items: center; /* 垂直居中对齐网格项 */
    margin-top: 20px; /* 增加顶部外边距，使内容整体下移 */
}

/* 畅销图书标签样式 */
.book-tag {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    padding: 5px 15px;
    background-color: #d3211f;
    color: white;
    font-size: 12px;
    font-weight: 500;
    border-radius: 0;
    transform: none;
    transition: all 0.3s ease;
    z-index: 2;
}

.recommended-book-link:hover .book-tag {
    background-color: #b91c1c;
}

/* 标题下划线悬停效果 */
.book-title {
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
}

.book-title::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #d3211f;
    transition: width 0.3s ease, left 0.3s ease;
}

.recommended-book-link:hover .book-title::after {
    width: 100%;
    left: 0;
}

.recommended-book-link:hover .book-title {
    color: #d3211f;
}

.recommended-book-item {
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* 垂直居中内容 */
}

/* 推荐图书封面高亮样式 - 改为更平滑的效果 */
.recommended-book-item.active .book-cover {
    transform: scale(1.05); /* 轻微放大效果 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); /* 增强阴影效果 */
}

/* 推荐图书标题下划线效果 */
.recommended-book-item.active .book-title::after {
    width: 100%;
    left: 0;
}

.recommended-book-item.active .book-title {
    color: #d3211f;
}

.recommended-book-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.recommended-book-link:hover {
    transform: translateY(-5px);
}

/* 响应式设计 - 培训课程区域 */
@media (max-width: 1200px) {
    .training-courses-container {
        width: 90%;
    }
    
    .series-training-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .training-courses-content {
        flex-direction: column;
        gap: 20px;
    }
    
    .series-training-section,
    .latest-training-news-section {
        flex: none;
        width: 100%;
    }
    
    .series-training-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .series-training-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .series-training-img {
        height: 140px;
    }
    
    .subsection-title {
        font-size: 18px;
    }
    
    .series-training-title {
        background-color: #d3211f !important;
        color: #fff !important;
    }
    
    .latest-news-title {
        background-color: transparent !important;
        color: #333 !important;
    }
    
    .news-title {
        font-size: 15px;
    }
    
    .news-description {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }
}

@media (max-width: 576px) {
    .series-training-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .series-training-section,
    .latest-training-news-section {
        padding: 15px;
    }
    
    .series-training-img {
        height: 120px;
    }
    
    .subsection-title {
        font-size: 16px;
        margin-bottom: 15px;
    }
    
    .series-training-title {
        background-color: #d3211f !important;
        color: #fff !important;
    }
    
    .latest-news-title {
        background-color: transparent !important;
        color: #333 !important;
    }
    
    .training-news-item {
        padding: 12px;
    }
    
    .news-title {
        font-size: 14px;
    }
    
    .news-description {
        font-size: 12px;
        -webkit-line-clamp: 2;
    }
    
    .news-time {
        font-size: 12px;
    }
}
@media (max-width: 1200px) {
    .all-books-container {
        width: 100%;
        padding: 0 20px;
    }
    
    .recommended-books-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .slider-book-desc {
        max-width: 300px;
        padding: 6px 10px;
        font-size: 13px;
    }
}

@media (max-width: 992px) {
    .all-books-content {
        flex-direction: column;
    }
    
    .book-categories {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .book-slider {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        height: auto;
        min-height: 400px;
    }
    
    .recommended-books {
        background-color: #fafafa;
    }
    
    .category-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    
    .category-item {
        margin-bottom: 0;
    }
    
    .parent-category:hover .sub-categories {
        display: none;
    }
    
    .sub-categories {
        position: static;
        width: 100%;
        margin-top: 10px;
    }
    
    .recommended-books-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .slider-book-desc {
        max-width: 260px;
        padding: 5px 8px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .all-books-content {
        flex-direction: column;
    }
    
    .book-categories {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .book-slider {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        height: auto;
        min-height: 350px;
    }
    
    .recommended-books {
        background-color: #fafafa;
    }
    
    .category-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .recommended-books-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .slider-book-img {
        max-width: 170px;
        height: 200px;
    }
    
    .book-img {
        max-width: 120px;
        height: 160px;
    }
    
    .recommended-books .book-cover .recommended-book-img {
        max-width: 90px !important;
        height: 120px !important;
        object-fit: cover;
    }
    
    .recommended-books .book-cover .special-book-img {
        max-width: 90px !important;
        height: 120px !important;
        object-fit: cover;
    }
}

@media (max-width: 576px) {
    .all-books-content {
        flex-direction: column;
    }
    
    .book-categories {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .book-slider {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        height: 450px; /* 增加高度以容纳所有内容 */
        min-height: 450px;
    }
    
    .recommended-books {
        background-color: #fafafa;
    }
    
    .category-list {
        grid-template-columns: 1fr;
    }
    
    .recommended-books-grid {
        grid-template-columns: 1fr;
    }
    
    .book-slider .slider-wrapper {
        height: 350px; /* 增加幻灯片容器高度 */
        overflow: hidden; /* 确保内容不溢出 */
    }
    
    .book-slider .slide-item {
        padding: 15px; /* 减少内边距 */
        overflow: hidden; /* 确保内容不溢出 */
        display: flex; /* 保持flex布局 */
        flex-direction: column; /* 垂直排列 */
        justify-content: center; /* 垂直居中 */
        align-items: center; /* 水平居中 */
    }
    
    .slider-book-img {
        max-width: 120px; /* 减小图片尺寸 */
        height: 160px;
    }
    
    .slider-book-title {
        font-size: 14px; /* 减小标题字体 */
        margin-top: 8px; /* 减少上边距 */
        margin-bottom: 4px; /* 减少下边距 */
    }
    
    .slider-book-desc {
        max-width: 200px; /* 减小简介宽度 */
        padding: 3px 6px; /* 减少内边距 */
        font-size: 11px;
        line-height: 1.4; /* 减小行高 */
        display: block;
        margin-top: 5px; /* 减少上边距 */
        max-height: 60px; /* 限制最大高度 */
        overflow: hidden; /* 确保内容不溢出 */
        text-overflow: ellipsis; /* 添加省略号 */
        display: -webkit-box;
        -webkit-line-clamp: 3; /* 限制显示行数 */
        -webkit-box-orient: vertical;
    }
    
    .book-img {
        max-width: 100px;
        height: 140px;
    }
    
    .recommended-books .book-cover .recommended-book-img {
        max-width: 75px !important;
        height: 100px !important;
        object-fit: cover;
    }
    
    .recommended-books .book-cover .special-book-img {
        max-width: 75px !important;
        height: 100px !important;
        object-fit: cover;
    }
}
    /* background-color: #f9fafb;
    margin: 30px 0;
    padding: 30px 0; 
}*/

.book-container {
    width: 1200px;
    margin: 0 auto;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 0px;
    border-bottom: 2px solid #e5e7eb;
}

.section-title {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    color: #d3211f;
}

.section-icon {
    width: 28px;
    height: 28px;
    margin-right: 10px;
}

.section-more {
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
}

.section-more:hover {
    color: #d3211f;
}

.section-more i {
    margin-left: 5px;
}

.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 25px;
}

.book-item {
    text-align: center;
    transition: all 0.3s ease;
}

.book-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.book-link:hover {
    transform: translateY(-5px);
}

.book-cover {
    margin-bottom: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0; /* 添加上下内边距，使封面上下有空间 */
}

.book-link:hover .book-cover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.book-cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(211, 33, 31, 0.1), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.book-link:hover .book-cover::after {
    opacity: 1;
}

.book-img {
    width: 100%;
    max-width: 200px;
    height: 180px;
    display: block;
    margin: 0 auto;
    object-fit: cover;
    transition: transform 0.3s ease;
    align-self: center; /* 确保图片垂直居中 */
}

/* 畅销图书封面图片样式 - 保持高度不变，调整宽度 */
.recommended-books .book-cover .recommended-book-img {
    width: auto !important;
    max-width: 140px !important;
    height: 180px !important;
    display: block;
    margin: 0 auto;
    object-fit: cover;
    transition: transform 0.3s ease;
    align-self: center; /* 确保图片垂直居中 */
}

/* 特殊图书封面图片样式 - 确保与其他图书封面一致 */
.recommended-books .book-cover .special-book-img {
    width: auto !important;
    max-width: 140px !important;
    height: 180px !important;
    display: block;
    margin: 0 auto;
    object-fit: cover;
    transition: transform 0.3s ease;
    align-self: center; /* 确保图片垂直居中 */
}

.book-link:hover .book-img {
    transform: scale(1.03);
}

.book-title {
    font-size: 15px;
    margin: 0;
    padding: 8px 10px;
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    text-align: center; /* 确保标题文本居中 */
}

.book-link:hover .book-title {
    color: #d3211f;
    border-bottom-color: #d3211f;
}

/* 重点图书推荐网格布局 */
.books-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.books-row {
    display: flex;
    gap: 25px;
}

.book-item {
    flex: 1;
    text-align: center;
    position: relative;
}

/* 系列图书幻灯片样式 */
.books-slider-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

.books-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.books-slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 200%;
}

.books-slide {
    width: 50%;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.books-slide.active {
    opacity: 1;
}

/* 幻灯控制按钮 */
.books-slider-controls {
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    transform: translateY(-35%);
    display: flex;
    justify-content: space-between;
    padding: 0 0px;
    pointer-events: none;
    z-index: 10;
}

.books-slider-btn {
    width: 40px;
    height: 40px;
    background-color: rgba(211, 33, 31, 0.8);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    pointer-events: all;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.books-slider-btn:hover {
    background-color: rgba(211, 33, 31, 1);
    transform: scale(1.1);
}

.books-slider-btn.prev {
    margin-left: 5px;
}

.books-slider-btn.next {
    margin-right: 5px;
}

/* 幻灯指示器 */
.books-slider-indicators {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: none; /* 隐藏指示器 */
    gap: 8px;
    z-index: 10;
}

.books-slider-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(211, 33, 31, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: none; /* 隐藏单个指示器 */
}

.books-slider-indicator.active {
    background-color: #d3211f;
    width: 24px;
    border-radius: 5px;
    display: none; /* 隐藏活动状态的指示器 */
}

/* 响应式样式 - 幻灯片 */
@media (max-width: 992px) {
    .books-slider-container {
        padding: 0 20px;
        margin-bottom: 30px;
    }
    
    .books-slider-controls {
        padding: 0 5px;
    }
    
    .books-slider-btn {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    .books-slide .books-row {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .books-slider-indicators {
        bottom: -15px;
    }
    
    .books-slider-indicator {
        width: 8px;
        height: 8px;
        display: none; /* 隐藏响应式状态下的指示器 */
    }
    
    .books-slider-indicator.active {
        width: 20px;
        display: none; /* 隐藏响应式状态下活动状态的指示器 */
    }
    
    .books-slide .books-row {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .books-slide .book-item {
        width: calc(50% - 7.5px);
        flex: none;
    }
}

@media (max-width: 576px) {
    .books-slider-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    
    .books-slider-controls {
        padding: 0 2px;
    }
    
    .books-slider-indicators {
        bottom: -10px;
    }
}

/* 培训课程样式 */
.training-courses-section {
    background-color: white;
    padding: 30px 0;
}

.training-courses-container {
    width: 1200px;
    margin: 0 auto;
}

.training-courses-content {
    display: flex;
    gap: 30px;
    margin-top: 25px;
    align-items: stretch;
}

/* 左侧系列培训栏目 - 宽度占比8 */
.series-training-section {
    flex: 8;
    background-color: #fff;
    border-radius: 0;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
}

.subsection-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px 0;
    position: relative;
    padding: 10px 15px;
    background-color: transparent;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.subsection-title i {
    margin-right: 10px;
    font-size: 18px;
}

.subsection-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: #d3211f;
}

/* 系列培训标题样式 - 红色背景 */
.series-training-title {
    background-color: #d3211f !important;
    color: #fff !important;
}

/* 最新培训资讯标题样式 - 透明背景 */
.latest-news-title {
    background-color: transparent !important;
    color: #d3211f !important;
}

.latest-news-title i {
    color: #d3211f;
}

.series-training-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.series-training-item {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.series-training-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.series-training-link {
    display: block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.series-training-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.series-training-link:hover .series-training-img {
    transform: scale(1.05);
}

/* 右侧最新培训资讯栏目 - 宽度占比4 */
.latest-training-news-section {
    flex: 4;
    background-color: #fff;
    border-radius: 0;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
}

.subsection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.more-link {
    color: #d3211f;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.more-link::after {
    content: '→';
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.more-link:hover {
    color: #b91c1c;
}

.more-link:hover::after {
    transform: translateX(3px);
}

.training-news-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.training-news-item {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 4px 15px;
    border: 1px solid #f1f1f1;
    border-radius: 0;
    transition: all 0.3s ease;
    background-color: #fafafa;
}

.training-news-item:hover {
    background-color: #fff5f5;
    border-color: #d3211f;
    transform: translateX(5px);
}

.news-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.news-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.training-news-item:hover .news-title {
    color: #d3211f;
}

.news-time {
    font-size: 13px;
    color: #9ca3af;
    margin-top: 3px;
    display: flex;
    align-items: center;
}

.news-time::before {
    content: '📅';
    margin-right: 5px;
}

/* 左侧视频区域 - 参考中国科学杂志社videoBox样式 */
.video-section {
    flex: 1;
    max-width: 600px;
}

.video-wrapper {
    background-color: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.video-wrapper:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.video-thumbnail {
    position: relative;
    overflow: hidden;
    background-color: #000;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

/* 视频占位区域样式 */
.video-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

/* 视频容器样式 */
.video-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000;
}

/* 视频海报样式 */
.video-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 视频播放按钮样式 */
.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(211, 33, 31, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}


.video-play-btn:hover {
    background-color: rgba(211, 33, 31, 1);
    transform: translate(-50%, -50%) scale(1.1);
}

.video-info {
    padding: 20px;
}

.video-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.video-wrapper:hover .video-title {
    color: #d3211f;
}

.video-meta {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: #6b7280;
}

.video-duration, .video-date {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 右侧课程列表 */
.courses-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.course-item {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.course-item:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    transform: translateX(5px);
}

.course-link {
    display: flex;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.course-img-container {
    flex: 0 0 180px;
    position: relative;
    overflow: hidden;
    height: 120px;
}

.course-img {
    width: 100%;
    height: 100%;
    min-height: 100px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.course-link:hover .course-img {
    transform: scale(1.05);
}

.course-duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 0;
}

.course-info {
    flex: 1;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.course-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 5px 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.course-link:hover .course-title {
    color: #d3211f;
}

.course-description {
    display: none; /* 隐藏课程简介 */
}

.course-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.course-date {
    color: #6b7280;
}

.course-level {
    background-color: #fee2e2;
    color: #d3211f;
    padding: 3px 10px;
    border-radius: 0;
    font-weight: 500;
}

/* 视频播放器样式 */
.video-container {
    position: relative;
    width: 100%;
    background-color: #000;
}

.custom-video-player {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 250px;
    max-height: 300px;
    background-color: #000;
}

/* 封面播放按钮样式 */
.cover-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: rgba(211, 33, 31, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.cover-play-btn i {
    color: white;
    font-size: 40px;
    margin-left: 5px;
    transition: all 0.3s ease;
}

.cover-play-btn:hover {
    background-color: rgba(211, 33, 31, 1);
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.7);
}

.cover-play-btn.playing {
    opacity: 0.8;
}

.video-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 封面播放按钮样式 */
.cover-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: rgba(211, 33, 31, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.cover-play-btn i {
    color: white;
    font-size: 40px;
    margin-left: 5px;
    transition: all 0.3s ease;
}

.cover-play-btn:hover {
    background-color: rgba(211, 33, 31, 1);
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.7);
}

.cover-play-btn.playing {
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

/* 鼠标悬停在播放器上时，始终显示封面按钮（除非正在播放） */
.custom-video-player:hover .cover-play-btn {
    opacity: 1 !important;
    visibility: visible !important;
}

.video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 20;
}

.custom-video-player:hover .video-controls {
    opacity: 1;
}

.control-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.control-btn:hover {
    background-color: rgba(211, 33, 31, 0.8);
}

.progress-container {
    flex: 1;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar {
    width: 100%;
    height: 100%;
    position: relative;
}

.progress-filled {
    width: 0%;
    height: 100%;
    background-color: #d3211f;
    transition: width 0.1s linear;
}

.time-display {
    font-size: 14px;
    min-width: 100px;
}

.volume-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.volume-slider-container {
    width: 80px;
}

.volume-slider {
    width: 100%;
    height: 5px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.3);
    outline: none;
    border-radius: 3px;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #d3211f;
    cursor: pointer;
    border-radius: 50%;
}

.volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #d3211f;
    cursor: pointer;
    border-radius: 50%;
    border: none;
}

.speed-container {
    position: relative;
}

.speed-select {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 14px;
    cursor: pointer;
}

.speed-select:focus {
    outline: none;
    border-color: #d3211f;
}

/* 悬浮侧边栏样式 */
.floating-sidebar {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sidebar-item {
    position: relative;
}

.sidebar-icon {
    width: 50px;
    height: 50px;
    background-color: #fff;
    border: 1px solid #d3211f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d3211f;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 自定义侧边栏图标样式 */
.sidebar-custom-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.sidebar-icon:hover {
    background-color: #d3211f;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(211, 33, 31, 0.3);
}

.sidebar-qrcode {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    padding: 15px;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    border: 1px solid #e5e7eb;
}

.sidebar-item:hover .sidebar-qrcode {
    opacity: 1;
    visibility: visible;
    right: 65px;
}

.sidebar-qrcode::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent white;
}

.qrcode-img {
    width: 120px;
    height: 120px;
    margin-bottom: 8px;
}

.qrcode-text {
    margin: 0;
    font-size: 14px;
    color: #333;
    text-align: center;
    font-weight: 500;
}

.sidebar-top-btn {
    width: 50px;
    height: 50px;
    background-color: #fff;
    border: 1px solid #d3211f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d3211f;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sidebar-top-btn:hover {
    background-color: #d3211f;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(211, 33, 31, 0.3);
}

/* 响应式设计 */
@media (max-width: 992px) {
    .floating-sidebar {
        right: 10px;
    }
    
    .sidebar-icon,
    .sidebar-top-btn {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .floating-sidebar {
        display: none;
    }
}

/* 特色服务链接样式 */
.featured-links-section {
    background-color: #fff;
    margin: 30px 0;
    padding: 40px 0;
}

.featured-links-container {
    width: 1200px;
    margin: 0 auto;
}

.featured-links-grid {
    display: flex;
    justify-content: space-between;
    gap: 25px;
}

.featured-link-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px;
    border: 2px solid #e5e7eb;
    border-radius: 0;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.featured-link-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: #d3211f;
    transition: all 0.3s ease;
}

.featured-link-item:hover {
    border-color: #d3211f;
    box-shadow: 0 10px 30px rgba(211, 33, 31, 0.1);
    transform: translateY(-5px);
}

.featured-link-item:hover::before {
    width: 100%;
    opacity: 0.1;
}

.featured-link-image {
    position: relative;
    width: 100%;
    height: 120px;
    margin-bottom: 15px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.featured-link-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.featured-link-item .hover-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.featured-link-item:hover .hover-img {
    opacity: 1;
}

.featured-link-item:hover .default-img {
    opacity: 0;
}

.learn-more-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #fceadc;
    color: #333;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.featured-link-item:hover .learn-more-btn {
    opacity: 1;
}

.featured-link-content {
    flex: 1;
    z-index: 1;
    text-align: center;
}

.featured-link-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
    transition: color 0.3s ease;
}

.featured-link-item:hover .featured-link-title {
    color: #d3211f;
}

.featured-link-description {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    transition: color 0.3s ease;
}

.featured-link-item:hover .featured-link-description {
    color: #333;
}

/* 数字出版栏目样式 */
.digital-publishing-section {
    background-color: #fff;
    margin: 30px 0;
    padding: 40px 0;
}

.digital-publishing-container {
    width: 1200px;
    margin: 0 auto;
}

.section-title {
    font-size: 28px;
    font-weight: 600;
    color: #d3211f;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-title i {
    margin-right: 10px;
    font-size: 24px;
    color: #d3211f;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #d3211f;
}

.digital-publishing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.digital-publishing-item {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.digital-publishing-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.img-container {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 创建一个正方形容器 */
    overflow: hidden;
}

.digital-publishing-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，覆盖整个容器 */
    display: block;
}

/* 图片1和图片3的悬停切换效果 */
.default-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: transform 0.5s ease;
    object-fit: cover;
}

.hover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: translateY(100%);
    transition: transform 0.5s ease;
    object-fit: cover;
}

.digital-publishing-item:hover .default-img {
    transform: translateY(-100%);
}

.digital-publishing-item:hover .hover-img {
    transform: translateY(0);
}

/* 图片2和图片4的悬停效果和了解更多链接 */
.digital-publishing-item:nth-child(2):hover .digital-publishing-img,
.digital-publishing-item:nth-child(4):hover .digital-publishing-img {
    filter: brightness(0.95);
    transform: scale(1.02);
}

.learn-more-link {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: #fceadc;
    color: #d3211f;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 3;
}

.digital-publishing-item:nth-child(2):hover .learn-more-link,
.digital-publishing-item:nth-child(4):hover .learn-more-link {
    opacity: 1;
    transform: translateY(0);
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .featured-links-container {
        width: 90%;
    }
    
    .featured-links-grid {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .featured-link-item {
        flex: 0 0 calc(33.333% - 10px);
    }
    
    .digital-publishing-container {
        width: 90%;
    }
    
    .digital-publishing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .featured-link-item {
        flex: 0 0 100%;
        padding: 20px;
    }
    
    .featured-link-image {
        height: 100px;
    }
    
    .featured-link-title {
        font-size: 16px;
    }
    
    .featured-link-description {
        font-size: 13px;
    }
    
    .digital-publishing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .section-title {
        font-size: 24px;
    }
}

@media (max-width: 576px) {
    .digital-publishing-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* 期刊及连续出版物样式 */
.journals-section {
    background-color: #fff5f5;
    padding: 30px 0;
}

.journals-container {
    width: 1200px;
    margin: 0 auto;
}

.journals-grid {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.journal-item {
    flex: 1;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    min-width: 0;
}

.journal-link {
    display: block;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.journal-link:hover {
    transform: translateY(-8px);
}

.journal-cover {
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    background-color: #f9f9f9;
    border-radius: 0;
    width: 100%;
    aspect-ratio: 242 / 316; /* 保持原有比例 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 防止布局抖动 */
    contain: layout;
    backface-visibility: hidden;
}

/* 图片加载占位符 */
.journal-cover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    z-index: 1;
}

.journal-cover.loaded::before {
    display: none;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.journal-link:hover .journal-cover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.journal-cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(211, 33, 31, 0.15), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.journal-link:hover .journal-cover::after {
    opacity: 1;
}

.journal-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
    /* 防止布局抖动 */
    will-change: transform;
}

/* 默认图片和二维码图片样式 */
.journal-cover .journal-img.qrcode-img {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: top 0.5s ease;
    z-index: 2;
}

.journal-cover .journal-img.default-img {
    position: relative;
    z-index: 1;
}

/* 鼠标悬停在阅读按钮上时的效果 */
.journal-item.qrcode-hover .journal-cover .journal-img.qrcode-img {
    top: 0;
}

.journal-item.qrcode-hover .journal-cover .journal-img.default-img {
    transform: scale(1.05);
    filter: blur(3px);
}

.journal-link:hover .journal-img {
    transform: scale(1.05);
}

.journal-overlay {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
}

.journal-tag {
    display: inline-block;
    padding: 5px 15px;
    background-color: #d3211f;
    color: white;
    font-size: 12px;
    font-weight: 500;
    border-radius: 0;
    transform: rotate(45deg);
    transition: all 0.3s ease;
}

.journal-link:hover .journal-tag {
    background-color: #b91c1c;
}

/* 期刊按钮样式 */
.journal-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 15px;
}

.journal-btn {
    display: inline-block;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 80px;
    position: relative;
    overflow: hidden;
}

.journal-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.journal-btn:hover::before {
    left: 100%;
}

.order-btn {
    background-color: #d3211f;
    color: white;
    border: 1px solid #d3211f;
}

.order-btn:hover {
    background-color: #b91c1c;
    border-color: #b91c1c;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(211, 33, 31, 0.3);
}

.read-btn {
    background-color: white;
    color: #d3211f;
    border: 1px solid #d3211f;
}

.read-btn:hover {
    background-color: #d3211f;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(211, 33, 31, 0.3);
}

.journal-title {
    font-size: 16px;
    margin: 0;
    padding: 10px 0;
    color: #333;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.journal-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: #d3211f;
    transition: width 0.3s ease;
}

.journal-link:hover .journal-title {
    color: #d3211f;
}

.journal-link:hover .journal-title::after {
    width: 100px;
}

/* 新书上架样式 */
.new-books {
    width: 380px;
    background-color: #fff;
    border-radius: 0;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.new-books-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.new-book-item {
    margin-bottom: 18px;
}

.new-book-item:last-child {
    margin-bottom: 0;
}

.new-book-link {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    text-decoration: none;
    color: #333;
    padding: 12px;
    border-radius: 0;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.new-book-link:hover {
    background-color: #fee2e2;
    border-left-color: #d3211f;
    transform: translateX(2px);
}

.new-book-img {
    width: 80px;
    height: 120px;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.new-book-link:hover .new-book-img {
    transform: scale(1.05);
}

.new-book-info {
    flex: 1;
}

.new-book-title {
    font-size: 15px;
    margin: 0 0 8px 0;
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease;
}

.new-book-link:hover .new-book-title {
    color: #d3211f;
}

/* 新书作者信息样式 */
.new-book-author {
    font-size: 13px;
    color: #6b7280;
    margin: 3px 0 8px 0;
    line-height: 1.4;
}

.new-book-date {
    font-size: 12px;
    color: #666;
    margin: 0;
    padding: 3px 8px;
    background-color: #f5f5f5;
    display: inline-block;
    border-radius: 0;
}

/* 移动端新书上架样式优化 */
@media (max-width: 768px) {
    .new-books {
        width: 100%;
        padding: 15px;
    }
    
    .new-book-item {
        margin-bottom: 25px;
    }
    
    .new-book-link {
        gap: 20px;
        padding: 15px;
    }
    
    /* 按照屏幕尺寸同等放大封面图 */
    .new-book-img {
        width: 120px;
        height: 180px;
    }
    
    /* 放大图书名称和信息 */
    .new-book-title {
        font-size: 18px;
        margin-bottom: 10px;
    }
    
    .new-book-author {
        font-size: 16px;
        margin-bottom: 10px;
    }
    
    .new-book-date {
        font-size: 14px;
        padding: 5px 12px;
    }
}

/* 专题宣传区域样式 */
.thematic-section {
    padding: 2px 0;
}

.thematic-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.thematic-items {
    display: flex;
    gap: 15px;
    flex-wrap: nowrap;
    width: 100%;
}

.thematic-item {
    flex: 1;
    height: 150px;
    min-width: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.thematic-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.thematic-link {
    display: block;
    width: 100%;
    height: 100%;
}

.thematic-img-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.thematic-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.thematic-item:hover .thematic-img {
    transform: scale(1.1);
}

.thematic-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    transition: background-color 0.3s ease;
}

.thematic-item:hover .thematic-overlay {
    background: linear-gradient(to top, rgba(211, 33, 31, 0.8), rgba(211, 33, 31, 0.2));
}

.thematic-title {
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
    display: block;
}

.thematic-item:hover .thematic-title {
    transform: translateY(-3px);
}

/* 响应式布局 - 专题宣传区域 */
@media (max-width: 1200px) {
    .thematic-items {
        justify-content: center;
        gap: 10px;
    }
}

/* 平板设备响应式 - 保持一行显示 */
@media (max-width: 992px) {
    .thematic-items {
        justify-content: center;
    }
}

/* 手机设备响应式 - 垂直排列 */
@media (max-width: 768px) {
    .thematic-items {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .thematic-item {
        width: 100%;
        max-width: 400px;
        height: 150px; /* 固定高度 */
        flex: 0 0 auto;
    }
    
    /* 期刊及连续出版物响应式 - 移动端垂直排列 */
    .journals-grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .journal-item {
        width: 100%;
        max-width: 280px;
        flex: 0 0 auto;
    }
    
    .journal-img {
        max-width: none;
        height: auto;
        aspect-ratio: 242 / 316;
    }
    
    /* 移动端期刊按钮样式 */
    .journal-actions {
        justify-content: center;
        margin-top: 8px;
        margin-bottom: 12px;
    }
    
    .journal-btn {
        padding: 6px 15px;
        font-size: 12px;
        min-width: 70px;
    }
}

/* 小屏幕手机响应式 */
@media (max-width: 576px) {
    .thematic-item {
        height: 150px; /* 保持固定高度 */
        width: 100%;
        max-width: none;
    }
    
    /* 小屏幕期刊按钮样式 */
    .journal-actions {
        justify-content: center;
        margin-top: 6px;
        margin-bottom: 10px;
        gap: 6px;
    }
    
    .journal-btn {
        padding: 5px 12px;
        font-size: 11px;
        min-width: 65px;
    }
}

/* 页脚样式 */
.footer {
    background-color: #d3211f;
    color: white;
    padding: 30px 0 20px;
}

/* 期刊订阅页面样式 - 参考读者杂志订阅页面 */
.subscription-page {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* 大背景图区域 */
.subscription-bg {
    position: relative;
    height: 400px;
    background-image: url('https://picsum.photos/id/24/1920/400');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subscription-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.subscription-bg-content {
    position: relative;
    text-align: center;
    color: white;
    z-index: 1;
}

.subscription-bg-title {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.subscription-bg-subtitle {
    font-size: 24px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 订阅内容容器 */
.subscription-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

/* 左侧杂志切换区域 */
.subscription-left {
    width: 65%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 杂志封面切换区域 */
.magazine-cover-section {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.cover-section-header {
    margin-bottom: 25px;
}

.cover-section-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

/* 杂志封面选择器 */
.magazine-selector {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.magazine-option {
    flex: 1;
    min-width: 120px;
    height: 60px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    font-size: 16px;
    font-weight: 500;
    color: #666;
}

.magazine-option:hover {
    border-color: #d3211f;
    color: #d3211f;
}

.magazine-option.active {
    border-color: #d3211f;
    background-color: #d3211f;
    color: white;
}

/* 主封面展示 */
.main-cover-display {
    display: flex;
    gap: 30px;
    align-items: center;
}

.cover-image-container {
    width: 300px;
    height: 400px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.cover-image-container:hover .cover-image {
    transform: scale(1.05);
}

/* 杂志详情区域 */
.magazine-details {
    flex: 1;
}

.magazine-detail-title {
    font-size: 30px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.magazine-detail-price {
    font-size: 36px;
    font-weight: bold;
    color: #d3211f;
    margin-bottom: 20px;
}

.magazine-detail-price small {
    font-size: 18px;
    font-weight: normal;
    color: #666;
}

.magazine-detail-info {
    margin-bottom: 30px;
}

.detail-row {
    display: flex;
    margin-bottom: 15px;
    font-size: 16px;
    color: #666;
}

.detail-label {
    width: 100px;
    font-weight: 500;
    color: #333;
}

.detail-value {
    flex: 1;
}

/* 订阅按钮 */
.subscribe-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.subscribe-btn {
    padding: 15px 40px;
    background-color: #d3211f;
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.subscribe-btn:hover {
    background-color: #b91c1c;
    color: white;
}

.subscribe-note {
    font-size: 14px;
    color: #999;
}

/* 内容介绍区域 */
.content-intro {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.intro-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    border-bottom: 2px solid #d3211f;
    padding-bottom: 10px;
}

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

/* 右侧小程序二维码区域 */
.subscription-right {
    width: 30%;
}

.wechat-qrcode-section {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.qrcode-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.qrcode-container {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
    padding: 10px;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.qrcode-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qrcode-text {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
}

.qrcode-note {
    font-size: 14px;
    color: #999;
}

/* 官方订购方式 */
.official-methods {
    margin-top: 30px;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.methods-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

.methods-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.method-item {
    text-align: center;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.method-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.method-icon {
    font-size: 32px;
    color: #d3211f;
    margin-bottom: 10px;
}

.method-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

/* 联系信息 */
.contact-section {
    margin-top: 30px;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.contact-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

.contact-info {
    font-size: 14px;
    color: #666;
    text-align: center;
    line-height: 1.6;
}

.contact-info p {
    margin-bottom: 8px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .subscription-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .subscription-left,
    .subscription-right {
        width: 100%;
    }
    
    .main-cover-display {
        flex-direction: column;
        text-align: center;
    }
    
    .cover-image-container {
        width: 250px;
        height: 350px;
    }
    
    .subscribe-actions {
        justify-content: center;
    }
    
    .methods-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .subscription-bg {
        height: 350px;
    }
    
    .subscription-bg-title {
        font-size: 40px;
    }
    
    .subscription-bg-subtitle {
        font-size: 20px;
    }
    
    .magazine-option {
        min-width: 100px;
        font-size: 14px;
    }
    
    .methods-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .subscription-bg {
        height: 300px;
    }
    
    .subscription-bg-title {
        font-size: 32px;
    }
    
    .subscription-bg-subtitle {
        font-size: 18px;
    }
    
    .subscription-container {
        padding: 30px 15px;
    }
    
    .magazine-cover-section,
    .content-intro,
    .wechat-qrcode-section,
    .official-methods,
    .contact-section {
        padding: 20px;
    }
    
    .cover-image-container {
        width: 200px;
        height: 280px;
    }
    
    .magazine-detail-title {
        font-size: 24px;
    }
    
    .magazine-detail-price {
        font-size: 30px;
    }
    
    .detail-row {
        flex-direction: column;
        gap: 5px;
    }
    
    .detail-label {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .subscription-bg {
        height: 250px;
    }
    
    .subscription-bg-title {
        font-size: 28px;
    }
    
    .subscription-bg-subtitle {
        font-size: 16px;
    }
    
    .magazine-selector {
        flex-direction: column;
    }
    
    .magazine-option {
        width: 100%;
    }
    
    .cover-image-container {
        width: 180px;
        height: 250px;
    }
    
    .subscribe-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .subscribe-btn {
        width: 100%;
    }
}

.subscription-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.subscription-header {
    text-align: center;
    margin-bottom: 50px;
}

.subscription-title {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.subscription-subtitle {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
}

.subscription-magazines {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 60px;
}

.magazine-item {
    width: calc(20% - 24px);
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.magazine-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.magazine-cover {
    height: 280px;
    overflow: hidden;
    position: relative;
}

.magazine-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.magazine-item:hover .magazine-img {
    transform: scale(1.05);
}

.magazine-info {
    padding: 20px;
    text-align: center;
}

.magazine-name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.magazine-price {
    font-size: 24px;
    font-weight: bold;
    color: #d3211f;
    margin-bottom: 15px;
}

.magazine-price small {
    font-size: 16px;
    font-weight: normal;
    color: #666;
}

.subscription-btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: #d3211f;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.subscription-btn:hover {
    background-color: #b91c1c;
    color: white;
}

.subscription-details {
    background-color: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 60px;
}

.details-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    border-bottom: 2px solid #d3211f;
    padding-bottom: 10px;
}

.details-content {
    font-size: 16px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 30px;
}

.details-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.details-list li {
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
    font-size: 16px;
    color: #666;
}

.details-list li:before {
    content: "•";
    color: #d3211f;
    font-size: 20px;
    position: absolute;
    left: 0;
    top: -2px;
}

.order-methods {
    margin-top: 40px;
}

.methods-title {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin-bottom: 25px;
}

.methods-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.method-item {
    width: calc(25% - 15px);
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s ease;
}

.method-item:hover {
    transform: translateY(-5px);
}

.method-icon {
    font-size: 40px;
    color: #d3211f;
    margin-bottom: 15px;
}

.method-name {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
}

.method-btn {
    display: inline-block;
    padding: 8px 20px;
    background-color: #d3211f;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.method-btn:hover {
    background-color: #b91c1c;
    color: white;
}

.contact-info {
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
}

.contact-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.contact-text {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
}

.contact-text strong {
    color: #333;
}

.license-info {
    text-align: center;
    font-size: 14px;
    color: #999;
    margin-top: 30px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .subscription-magazines {
        gap: 20px;
    }
    
    .magazine-item {
        width: calc(25% - 15px);
    }
}

@media (max-width: 992px) {
    .subscription-title {
        font-size: 30px;
    }
    
    .magazine-item {
        width: calc(33.333% - 13.333px);
    }
    
    .methods-grid {
        gap: 15px;
    }
    
    .method-item {
        width: calc(33.333% - 10px);
    }
}

@media (max-width: 768px) {
    .subscription-page {
        padding: 30px 0;
    }
    
    .subscription-header {
        margin-bottom: 30px;
    }
    
    .subscription-title {
        font-size: 24px;
    }
    
    .subscription-subtitle {
        font-size: 16px;
    }
    
    .subscription-magazines {
        gap: 15px;
        margin-bottom: 40px;
    }
    
    .magazine-item {
        width: calc(50% - 7.5px);
    }
    
    .magazine-cover {
        height: 220px;
    }
    
    .subscription-details {
        padding: 25px;
        margin-bottom: 40px;
    }
    
    .details-title {
        font-size: 20px;
    }
    
    .details-content,
    .details-list li {
        font-size: 15px;
    }
    
    .methods-grid {
        gap: 10px;
    }
    
    .method-item {
        width: calc(50% - 5px);
        padding: 15px;
    }
    
    .method-icon {
        font-size: 30px;
    }
}

@media (max-width: 576px) {
    .magazine-item {
        width: 100%;
    }
    
    .magazine-cover {
        height: 200px;
    }
    
    .methods-grid {
        flex-direction: column;
    }
    
    .method-item {
        width: 100%;
    }
    
    .contact-text {
        font-size: 14px;
    }
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: -25px;
}

.footer-middle {
    margin-bottom: 20px;
}

.footer-info {
    text-align: center;
}

.footer-info p {
    margin-bottom: 8px;
    line-height: 1.1;
    color: #fee2e2;
}

.footer-certificates {
    margin-bottom: 15px;
    text-align: center;
}

.certificate-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.certificate-link {
    display: flex;
    align-items: center;
    color: #fee2e2;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 5px 10px;
    border-radius: 4px;
}

.certificate-link:hover {
    color: #f2e383;
    background-color: rgba(255, 255, 255, 0.1);
}

.certificate-link i {
    margin-right: 8px;
    font-size: 16px;
}

.certificate-link span {
    font-size: 14px;
}

.footer-column h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-column h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: #f2e383;
}

.footer-links {
    list-style: none;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-links li {
    margin-bottom: 0;
}

.footer-links a {
    color: #fee2e2;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 3px 8px;
    border-radius: 3px;
}

.footer-links a:hover {
    color: #f2e383;
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.footer-bottom {
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    color: #fee2e2;
}

/* 友情链接下拉框样式 */
.friend-links-dropdown {
    margin-top: 10px;
}

.friend-links-select {
    width: 100%;
    padding: 10px 15px;
    background-color: #d3211f;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.friend-links-select:hover {
    background-color: #b91c1c;
}

.friend-links-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(211, 33, 31, 0.5);
}

.friend-links-select option {
    background-color: #d3211f;
    color: #ffffff;
    padding: 8px;
}

.friend-links-select option:hover {
    background-color: #ffffff;
    color: #d3211f;
}

/* 期刊及连续出版物响应式样式 */
@media (max-width: 1200px) {
    .journals-container {
        width: 100%;
        padding: 0 15px;
    }
    
    .journals-grid {
        gap: 15px;
    }
    
    .journal-item {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 992px) {
    .journals-grid {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }
    
    .journal-item {
        flex: 0 0 calc(50% - 10px);
        max-width: 300px;
    }
    
    .journal-cover {
        aspect-ratio: 242 / 316;
    }
    
    .journal-title {
        font-size: 15px;
    }
    
    .journal-btn {
        padding: 7px 18px;
        font-size: 13px;
    }
}

/* 通用响应式设计 */
@media (max-width: 1200px) {
    .navbar-container {
        padding: 0 15px;
    }
    
    .ad-banner-img {
        height: 150px;
    }
    
    .header-bg {
        padding: 0 50px;
    }
    
    /* 培训课程响应式 */
    .training-courses-container {
        width: 100%;
        padding: 0 15px;
    }
    
    .training-courses-content {
        flex-direction: column;
        gap: 20px;
    }
    
    .video-section {
        max-width: none;
    }
}

/* 期刊及连续出版物移动端响应式样式 */
@media (max-width: 768px) {
    .journals-grid {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }
    
    .journal-item {
        width: 100%;
        max-width: 280px;
        flex: 0 0 auto;
    }
    
    .journal-cover {
        aspect-ratio: 242 / 316;
        max-width: 220px;
        margin: 0 auto;
    }
    
    .journal-title {
        font-size: 14px;
        padding: 8px 0;
    }
    
    .journal-actions {
        margin-top: 8px;
        margin-bottom: 12px;
    }
    
    .journal-btn {
        padding: 6px 15px;
        font-size: 12px;
        min-width: 70px;
    }
}

@media (max-width: 576px) {
    .journal-item {
        max-width: 240px;
    }
    
    .journal-cover {
        max-width: 190px;
    }
    
    .journal-title {
        font-size: 13px;
        padding: 6px 0;
    }
    
    .journal-actions {
        gap: 6px;
        margin-top: 6px;
        margin-bottom: 10px;
    }
    
    .journal-btn {
        padding: 5px 12px;
        font-size: 11px;
        min-width: 65px;
    }
}

/* 针对中等屏幕尺寸的导航栏字体大小调整 */
@media (min-width: 769px) and (max-width: 992px) {
    .navbar-link {
        font-size: 14px !important;
        padding: 0 18px !important;
    }
}