/* 全局样式重置与基础设置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
img {
    border: 0 none;
    max-width: 100%;
    height: auto;
}
html, body {
    width: 100%;
    overflow-x: hidden; /* 禁止横向滚动 */
}
.main {
    width: 100%;
    height: auto;
    margin: 0 auto;
    background: url(images/ffbg.png) center top;
    background-size: cover;
    /* 将mainbox的margin-top转移到main上，作为顶部负间距 */
    margin-top: -1.875rem; /* 原mainbox的margin-top值 */
    /* 自适应时取消main的margin-top（可根据需求调整断点，这里以480px为例，也可添加其他断点） */
    @media (max-width: 480px) {
        margin-top: 0; /* 移动端取消负间距 */
    }
    /* 可选：若需要在平板等断点也取消，可添加如下规则 */
    /*
    @media (max-width: 768px) {
        margin-top: 0;
    }
    */
/*    padding: 0 0.5rem; /* 移动端添加左右内边距，防止内容贴边 */*/
}

.mainbox {
    max-width: 75rem; /* 1200px */
    width: 100%; /* 适配小屏，宽度100% */
    height: auto;
    padding: 5.125rem 3.25rem; /* 50px 20px */
    margin: 0 auto;
    background-color: #fff;
    box-shadow: -0.625rem 0 1.25rem -0.5rem rgba(0, 0, 0, 0.5),
                0.625rem 0 1.25rem -0.5rem rgba(0, 0, 0, 0.5);
    border-radius: 0.5rem; /* 8px */
    /* 取消mainbox的margin-top，转移到main上 */
    /* margin-top: -1.875rem; /* 移除该属性 */
    position: relative;
    z-index: 10;
    /* 移动端内边距适配 */
    @media (max-width: 480px) {
        padding: 2rem 1rem; /* 减少移动端内边距 */
    }
}

.itemlogo {
    width: 100%;
    height: auto;
    margin: 0 auto 1.875rem; /* 30px */
    border-bottom: 2px solid #004986; /* 父容器的下划线 */
    text-align: center;
    padding-bottom: 0; /* 移除底部内边距，避免影响绝对定位 */
    position: relative; /* 作为 .logotil 绝对定位的参照 */
}

.itemlogo .logotil {
    width: auto;
    height: auto;
    margin: 0; /* 移除默认外边距 */
    font-family: FZZY;
    color: #004986;
    border-bottom: 4px solid #004986; /* 文字的下划线 */
    display: inline-block;
    padding-bottom: 0.3125rem; /* 文字与下划线的间距 */
    /* PC端居中定位 */
    position: absolute;
    bottom: -2px; /* 向上移动 2px，与父容器的 border-bottom 重合 */
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    font-size: 1.75rem; /* 28px */
    color: #004986;
    /* 移动端字体适配 */
    @media (max-width: 480px) {
        font-size: 1.25rem; /* 20px */
        padding-bottom: 0.25rem;
    }
}

.logotil a{
    color: #004986;
}

.jd {
    width: 100%;
    height: auto;
    margin: 0 auto 3.125rem; /* 50px */
    display: flex;
    flex-wrap: wrap;
    gap: 2.25rem; /* 20px */
    margin-bottom: 7rem;
    /* 移动端适配 */
    @media (max-width: 480px) {
        gap: 2rem;
        margin-bottom: 3rem;
    }
}

.jdl {
    width: 100%;
    max-width: 31.25rem; /* 500px */
    height: 100%;
    max-height: 25rem;
    position: relative;
    /* 移动端宽度100% */
    @media (max-width: 480px) {
        max-width: 100%;
    }
}

.jdr {
    width: 100%;
    max-width: 34.5rem; 
    height: auto;
    /* 移动端隐藏 */
    @media (max-width: 480px) {
        display: none;
    }
}
.jdrwap {
    display: none;
    width: 100%;
    max-width: 31.25rem; /* 500px */
    height: auto;
    margin: 0 auto;
    /* 移动端显示 */
    @media (max-width: 480px) {
        display: block;
        max-width: 100%;
    }
}

.jdltil {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 2rem; /* 15px */
    display: flex;
    align-items: center;
    /* 移动端适配 */
    @media (max-width: 480px) {
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px dashed #888;
    }
}

.jdtbd {
    font-size: 1.125rem; /* 18px */
    font-weight: 800;
    line-height: 1.5;
    color: #555555;
    /* 移动端字体适配 */
    @media (max-width: 480px) {
        font-size: 1.125rem;
        font-weight: 400;
    }
}

.jdtbx {
    line-height: 1.5;
    color: #555555;
    font-size: 1rem; /* 16px */
    /* 移动端字体适配 */
    @media (max-width: 480px) {
        font-size: 0.875rem;
    }
}

.jdlabs {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 1.25rem; /* 20px */
    /* 移动端适配 */
    @media (max-width: 480px) {
        margin-bottom: 1rem;
    }
}

.jdlabs a {
    font-size: 1rem; /* 16px */
    line-height: 1.5;
    color: #555555;
    /* 移动端字体适配 */
    @media (max-width: 480px) {
        font-size: 0.875rem;
    }
}

.jdlli {
    width: 100%;
    margin-bottom: 2rem; /* 10px */
    /* 移动端适配 */
    @media (max-width: 480px) {
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px dashed #888;
    }
}

.jdlli a {
    font-size: 1.125rem; /* 16px */
    line-height: 1.5;
    color: #555555;
    /* 移动端字体适配 */
    @media (max-width: 480px) {
        font-size: 1.125rem;
    }
}

.jdl .more {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 1.25rem; /* 20px */
    text-align: right;
    /* 移动端隐藏 */
    @media (max-width: 480px) {
        display: none;
    }
}

.jdl .more a {
    font-size: 1rem; /* 16px */
    line-height: 1.5;
    color: #555555;
    display: inline-block;
    padding: 0.3125rem 0.9375rem; /* 5px 15px */
    border: 1px solid #ddd;
    border-radius: 1.25rem; /* 20px */
}

.xfz{
    width: 100%;
    height: 20rem; /* 调整高度适配图文内容 */
    margin: 0 auto;
    overflow: hidden;
    position: relative; /* 为swiper导航按钮定位提供参照 */
    /* 移动端高度适配 */
    @media (max-width: 992px) {
        height: 18rem;
    }
    @media (max-width: 768px) {
        height: 18rem;
    }
    @media (max-width: 480px) {
        height: 18rem;
    }
}

/* ========== Swiper核心样式 ========== */
.swiper-container {
    width: 100%;
    height: 100%;
}

/* 幻灯片容器：可点击区域 */
.swiper-slide {
    text-align: left;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border-radius: 0.5rem; /* 圆角优化 */
    transition: all 0.3s ease; /* 过渡动画 */
    cursor: pointer; /* 鼠标指针提示可点击 */
    height: 100%;
    /* 移动端内边距适配 */
    @media (max-width: 992px) {
        padding: 0.8rem;
    }
    @media (max-width: 480px) {
        padding: 0.6rem;
    }
}

/* 鼠标悬停效果 */
.swiper-slide:hover {
    transform: scale(1.02);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

/* 幻灯片图片样式 */
.swiper-slide-img {
    width: 100%;
    height: 10rem; /* 固定图片高度 */
    object-fit: cover;
    margin-bottom: 1rem;
    /* 移动端高度适配 */
    @media (max-width: 480px) {
        height: 10rem;
        margin-bottom: 0.5rem;
    }
}

/* 幻灯片标题样式 */
.swiper-slide-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* 移动端字体适配 */
    @media (max-width: 992px) {
        font-size: 1.125rem;
    }
    @media (max-width: 480px) {
        font-size: 1.125rem;
        margin-bottom: 0.3rem;
    }
}

/* 幻灯片摘要样式 */
.swiper-slide-desc {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* 移动端字体适配 */
    @media (max-width: 992px) {
        font-size: 0.8125rem;
    }
    @media (max-width: 480px) {
        font-size: 0.75rem;
    }
}

/* 分页器样式 */
.swiper-pagination {
    position: absolute;
    bottom: 0.5rem !important; /* 调整分页器位置 */
    left: 0;
    width: 100%;
}

.swiper-pagination-bullet {
    width: 0.75rem;
    height: 0.75rem;
    background: #ddd;
    opacity: 1;
    margin: 0 0.3rem !important; /* 分页器圆点间距 */
    /* 移动端大小适配 */
    @media (max-width: 992px) {
        width: 0.625rem;
        height: 0.625rem;
    }
}

.swiper-pagination-bullet-active {
    background: #004986; /* 激活态颜色与主题一致 */
    width: 1.5rem;
    border-radius: 0.375rem; /* 激活态变为椭圆 */
    transition: all 0.3s ease;
    /* 移动端大小适配 */
    @media (max-width: 992px) {
        width: 1.25rem;
    }
}

/* 导航按钮样式 */
.swiper-button-prev,
.swiper-button-next {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
    color: #004986 !important;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    /* 移动端大小适配 */
    @media (max-width: 992px) {
        width: 2rem;
        height: 2rem;
    }
    /* 移动端隐藏 */
    @media (max-width: 768px) {
        display: none !important;
    }
}

/* 导航按钮图标调整 */
.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 1rem !important;
    font-weight: bold;
    /* 移动端字体适配 */
    @media (max-width: 992px) {
        font-size: 0.875rem !important;
    }
}

/* 鼠标悬停导航按钮 */
.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: #004986;
    color: #fff !important;
}

/* ========== other区域样式（深度自适应优化） ========== */
.other {
    width: 100%;
    height: auto;
    margin: 3rem 0;
    display: flex; /* 改为flex布局实现左右分栏 */
    gap: 2rem; /* 左右栏间距 */
    /* 针对iPhone 12/16 Pro (390px/430px) 断点优化 */
    @media (max-width: 430px) {
        margin: 2rem 0;
        gap: 1.5rem;
    }
    /* 针对iPhone 16 Pro Max (480px) 断点优化 */
    @media (max-width: 480px) {
        flex-direction: column; /* 改为上下布局 */
        margin: 1.5rem 0;
        gap: 1.5rem;
    }
    /* 小屏手机（360px以下） */
    @media (max-width: 360px) {
        gap: 1rem;
        margin: 1rem 0;
    }
}

/* 左侧四个卡片的容器 */
.other-left {
    flex: 3; /* 左侧占比3份 */
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 左侧2列布局 */
    gap: 2rem;
    /* 针对iPhone 12/16 Pro (390px/430px) 优化 */
    @media (max-width: 430px) {
        gap: 1.5rem;
    }
    /* 针对iPhone 16 Pro Max (480px) 优化 */
    @media (max-width: 480px) {
        grid-template-columns: 1fr; /* 改为1列 */
        gap: 1.5rem;
    }
    /* 小屏手机（360px以下） */
    @media (max-width: 360px) {
        gap: 1rem;
    }
}

/* 右侧杂志专区的容器 */
.other-right {
    flex: 1; /* 右侧占比1份 */
    display: flex;
    align-items: stretch; /* 让卡片高度与左侧一致 */
    /* 针对iPhone 16 Pro Max (480px) 优化 */
    @media (max-width: 480px) {
        width: 100%;
        margin-top: 0; /* 取消上下布局的间距 */
    }
}

.other-card {
    background: #fff;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
    height: 100%;
    /* 移动端阴影优化 */
    @media (max-width: 480px) {
        box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1);
    }
}

/* 卡片头部：移除固定高度，改用比例高度 */
.other-card-header {
    position: relative;
    width: 100%;
    /* 改用padding-top实现16:9的比例高度，适配不同屏幕 */
    padding-top: 32%; /* 替代原固定8rem高度，更适配移动端 */
    height: 0;
    overflow: hidden;
    /* 移动端比例优化 */
    @media (max-width: 430px) {
        padding-top: 30%;
    }
}

.other-card-header img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    object-fit: cover;
}

.other-card-title {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    /* 移动端字体与内边距优化 */
    @media (max-width: 430px) {
        font-size: 1rem;
        padding: 0.3rem 0.8rem;
    }
    @media (max-width: 360px) {
        font-size: 0.875rem;
        padding: 0.2rem 0.6rem;
    }
}

/* 卡片列表：添加溢出滚动，确保内容完整 */
.other-card-list {
    padding: 1rem;
    /* 移动端内边距优化 */
    @media (max-width: 430px) {
        padding: 0.8rem;
    }
    @media (max-width: 360px) {
        padding: 0.6rem;
    }
    /* 限制最大高度，超出滚动（必要时） */
    max-height: 18rem;
    overflow-y: auto;
    /* 隐藏滚动条（美观） */
    scrollbar-width: none; /* Firefox */
    &::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
}

.other-card-list li {
    list-style: none;
    margin-bottom: 0.75rem;
    line-height: 1.5;
    /* 移动端间距优化 */
    @media (max-width: 430px) {
        margin-bottom: 0.5rem;
        line-height: 1.4;
    }
}

.other-card-list li a {
    color: #555;
    font-size: 1.125rem;
    transition: color 0.2s;
    /* 移动端字体优化 */
    @media (max-width: 430px) {
        font-size: 1.125rem;
    }
    @media (max-width: 360px) {
        font-size: 1.125rem;
    }
    /* 文字换行优化 */
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.other-card-list li a:hover {
    color: #004986;
}

/* 杂志专区卡片样式（深度优化） */
.magazine-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    text-align: center;
    background: #fff;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
    height: 70%;
    /* 移动端优化 */
    @media (max-width: 430px) {
        padding: 0.8rem;
        box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1);
    }
    @media (max-width: 360px) {
        padding: 0.6rem;
    }
}

.magazine-card img {
    width: 80%;
    margin-bottom: 1rem;
    /* 移动端比例优化 */
    @media (max-width: 430px) {
        width: 70%;
        margin-bottom: 0.8rem;
    }
    @media (max-width: 360px) {
        width: 60%;
        margin-bottom: 0.5rem;
    }
}

.magazine-card .other-card-title {
    position: static; /* 取消绝对定位，改为静态 */
    background: #004986;
    width: 100%;
    text-align: center;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    /* 移动端优化 */
    @media (max-width: 430px) {
        padding: 0.3rem 0;
        margin-bottom: 0.8rem;
        font-size: 1rem;
    }
    @media (max-width: 360px) {
        font-size: 0.875rem;
    }
}

.magazine-card p {
    color: #555;
    font-size: 0.9375rem;
    line-height: 1.5;
    /* 移动端优化 */
    @media (max-width: 430px) {
        font-size: 0.8125rem;
        line-height: 1.4;
        padding: 0 0.5rem;
    }
    @media (max-width: 360px) {
        font-size: 0.75rem;
    }
    /* 文字换行 */
    word-break: break-word;
}

.magazine-card-btn {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: #004986;
    color: #fff;
    border-radius: 0.25rem;
    text-decoration: none;
    margin-top: auto; /* 按钮靠下 */
    /* 移动端优化 */
    @media (max-width: 430px) {
        padding: 0.4rem 1.2rem;
        font-size: 0.8125rem;
    }
    @media (max-width: 360px) {
        padding: 0.3rem 1rem;
        font-size: 0.75rem;
    }
    /* 防止按钮溢出 */
    width: 80%;
    text-align: center;
}

/* 响应式：中屏（992px以下，平板） */
@media (max-width: 62rem) { /* 992px */
    .main{
        margin-top: 0rem;
    }
    .xfz {
        height: 18rem; /* 调整高度 */
    }
    .swiper-slide {
        padding: 0.8rem;
    }
    .swiper-slide-title {
        font-size: 1rem;
    }
    .swiper-slide-desc {
        font-size: 0.8125rem;
    }
    /* 导航按钮缩小 */
    .swiper-button-prev,
    .swiper-button-next {
        width: 2rem;
        height: 2rem;
    }
    .swiper-button-prev::after,
    .swiper-button-next::after {
        font-size: 0.875rem !important;
    }
    /* 分页器圆点缩小 */
    .swiper-pagination-bullet {
        width: 0.625rem;
        height: 0.625rem;
    }
    .swiper-pagination-bullet-active {
        width: 1.25rem;
    }
    .jd{
        gap: 2rem;
        margin-bottom: 3rem;
    }
    .jdtbd{
        font-weight: 400;
    }
    .jdrwap{
        display: block;
    }
    .jdr{
        display: none;
    }
    .jdltil{
        border-bottom: 1px dashed #888888;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
    }
    .jdlli{
        border-bottom: 1px dashed #888888;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
    }
    .more{
        display: none;
    }
    .mainbox {
        padding: 2.5rem 0.9375rem; /* 40px 15px */
        /* 移除mainbox的margin-top，已转移到main */
        /* margin-top: -1.25rem; /* 移除该属性 */
    }
    .itemlogo .logotil {
        font-size: 1.5rem; /* 24px */
    }
}

/* 响应式：小屏（768px以下，手机横屏） */
@media (max-width: 48rem) { /* 768px */    
    /* 手机端：所有logotil靠左对齐 */
    .itemlogo .logotil {
        left: 0; /* 取消居中，靠左 */
        transform: none; /* 清除平移 */
        padding-left: 0.5rem; /* 可选：添加左内边距，避免贴边 */
    }
    .xfz {
        height: 16rem; /* 进一步调整高度 */
    }
    /* 小屏隐藏导航按钮，只保留分页器 */
    .swiper-button-prev,
    .swiper-button-next {
        display: none !important;
    }
}

/* 响应式：超小屏（480px以下，手机竖屏） */
@media (max-width: 30rem) { /* 480px */
    .itemlogo .logotil {
        font-size: 1.4286rem; /* ~20px */
    }
    .xfz {
        height: 18rem; /* 最终调整高度 */
    }
    .swiper-slide-title {
        font-size: 0.9375rem;
    }
}
    .other{
        margin-bottom: 4rem;
    }
    .wapffzzlogo{
      display: none; 
    }
    .wapffzz {
      display: none; 
      width: 100%;
      max-width: 100%;
      padding: 0 10px;
      box-sizing: border-box;
      overflow: hidden;
    }

    .wapffzz .img-item {
      display: block;
      width: 12.5rem;    /* 基准宽度 */
      height: 17.5rem;   /* 基准高度 */
      max-width: 100%;
      aspect-ratio: 5/7; /* 固定宽高比 5:7 */
      overflow: hidden;
    }

    .wapffzz .img-item img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* 保持比例，裁剪超出部分 */
      object-position: center;
      display: block;
    }

    /* ===== 3. 自适应断点（示例：≤768px 触发） ===== */
    @media (max-width: 768px) {
        .other-right {
            display: none !important; 
        }
        .wapffzzlogo{
            display: block; 
        }
        .wapffzz {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 5px;
        }
        .wapffzz .img-item {
            flex: 1;
            width: auto;
            height: auto;
        }
    }