/* ========== 全局重置与响应式根字体 ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}
@media screen and (max-width: 750px) {
    html {
        font-size: 13.333vw;
    }
}

/* ========== Body：全屏铺满，两侧留白背景色 ========== */
body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    margin-bottom: 1.3rem;
    background-color: #f0f2f5;
}

/* ========== 主容器：内容居中 + 最大宽度 + 背景图跟随居中 ========== */
body #pages-container {
    margin: 0 auto;
    background: url(../images/i_head.jpg) no-repeat top center;
    background-size: 100% 30%;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1.5rem;
    touch-action: pan-y;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
	max-width: 960px;   /* 原为 1200px，改为你想要的宽度 */
}

body #wrapper {
    padding-bottom: 0;
}

body .pagetitle {
    height: 6vh;
    width: 100%;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    line-height: 6vh;
}

body .border-top {
    border-top: 0 solid #F8FAFC;
    border-width: 0.21333333rem;
}

body .padding-bottom {
    padding-bottom: 0.26666667rem;
}

/* ========== Swiper 轮播（卡片式居中露出效果） ========== */
/* 轮播容器允许露出超出部分 */
body .swiper-container {
    width: 100%;
    overflow: visible !important;   /* 关键：允许前后 slide 显示在容器外 */
}

body .banner {
    padding: 0.21333333rem 0;
    box-sizing: border-box;
    width: 100%;
    overflow: visible;              /* 确保不裁剪 */
}

/* 每个 slide 的固定宽度（主图占容器宽度的 80%，左右各留 10% 给前后图） */
.swiper-container-banner .swiper-slide {
    width: 80% !important;          /* 当前 slide 宽度为容器的 80% */
    transition: all 0.3s ease;
}

/* 当前激活的 slide 稍微放大，更突出 */
.swiper-container-banner .swiper-slide-active {
    transform: scale(1.02);
}

/* 所有轮播图片样式 */
.swiper-container-banner .swiper-slide img,
body .banner .banner-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.32rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 前后图片半透明 + 缩小，增强层次感 */
.swiper-container-banner .swiper-slide-prev img,
.swiper-container-banner .swiper-slide-next img {
    opacity: 0.6;
    transform: scale(0.92);
}

/* 分页点样式 */
body .banner .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    opacity: 0.4;
    background-color: #fff;
    width: 0.16rem;
    height: 0.16rem;
    margin: 0 0.08rem;
}
body .banner .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active {
    opacity: 1;
}

@keyframes bannerHeight {
    from { opacity: 0.9; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes showLiveTopEntrance {
    from { top: 0rem; }
    to   { top: 2.66666667rem; }
}

/* ========== 公用标题模块 ========== */
body .project,
body .course,
body .downcenter {
    width: 90%;
    height: auto;
    margin: 0.5rem auto;
    line-height: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
body .project .pro-title,
body .course .pro-title,
body .downcenter .pro-title {
    float: none;
    font-size: 18px;
    background: url(../images/title-bg.jpg) no-repeat left bottom;
    background-size: 100% auto;
    font-weight: 600;
    padding-bottom: 0.1rem;
}
body .project .pro-more,
body .course .pro-more,
body .downcenter .pro-more {
    float: none;
    background: url(../images/more.jpg) no-repeat right center;
    background-size: 0.6rem auto;
    width: auto;
    padding-right: 0.8rem;
    font-weight: 600;
    font-size: 0.4rem;
}
body .project .pro-more a,
body .course .pro-more a,
body .downcenter .pro-more a {
    text-decoration: none;
    color: #2B333B;
}

/* ========== 列表区域 ========== */
/* 一级图标区 */
body .listone {
    width: 100%;
    min-height: 3.2rem;
    max-width: 100%;
}
body .listone ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: 10rem;
    margin: 0 auto;
    list-style: none;
}
body .listone ul li {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    margin: 0 0.2rem 0.2rem 0;
    text-align: center;
    font-family: "PingFang SC","微软雅黑","Microsoft YaHei",Helvetica,"Helvetica Neue",Tahoma,Arial,sans-serif;
    font-size: 0.4rem;
    list-style: none;
}
body .listone ul li img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 二级（推荐项目）- 使用 Grid */
body .listtwo {
    width: 100%;
    max-width: 100%;
    min-height: 25vh;
    background: #fff;
}
body .listtwo ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
    width: 94%;
    margin: 0 auto;
    list-style: none;
}
body .listtwo ul li {
    list-style: none;
    background-color: transparent;
    border: 0;
    border-radius: 0.3rem;
}
body .listtwo ul li img {
    width: 100%;
    height: auto;
    border-radius: 0.3rem;
    display: block;
}

/* 三级（课程列表）- Grid 布局，不折行 */
body .listthree {
    width: 100%;
    max-width: 100%;
    clear: both;
}
body .listthree ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
    width: 94%;
    margin: 0 auto;
    list-style: none;
}
body .listthree ul li {
    list-style: none;
}
body .listthree ul li img {
    width: 100%;
    height: auto;
    border-radius: 0.3rem;
    display: block;
}

/* 四级（资讯/下载单列） */
body .listfour {
    width: 100%;
    max-width: 100%;
    background: #f3f3f37a;
}
body .listfour ul {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 94%;
    margin: 0 auto;
    list-style: none;
}
body .listfour ul li {
    list-style: none;
    width: 100%;
    height: auto;
    font-size: 16px;
    box-shadow: -4px 4px 8px #9090904f;
    border: 1.2px solid #dedede;
    border-radius: 10px;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: normal;
    min-height: 80px;
}
body .listfour ul a {
    text-decoration: none;
    color: #2B333B;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
body .listfour ul li img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    margin: 0.5rem 0;
    object-fit: cover;
}

/* ========== 响应式断点 ========== */
@media screen and (min-width: 768px) {
    body .listtwo ul {
        grid-template-columns: repeat(3, 1fr);
    }
    /* 课程列表平板仍为2列 */
    body .listthree ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    body .listtwo ul {
        grid-template-columns: repeat(4, 1fr);
    }
    body .listthree ul {
        grid-template-columns: repeat(4, 1fr); /* PC端4列 */
    }
    body .listone ul li {
        width: 2.2rem;
        height: 2.2rem;
    }
    body .pagetitle {
        font-size: 24px;
    }
}

@media screen and (min-width: 1400px) {
    body #pages-container {
        max-width: 960px;
    }
}

/* 移动端滚动平滑 */
body #pages-container {
    -webkit-overflow-scrolling: touch;
}

/* PC 端降低幻灯高度 */
@media screen and (min-width: 1024px) {
    .swiper-container-banner .swiper-slide img {
        max-height: 280px;   /* 调整为您想要的高度 */
        width: auto;         /* 宽度自适应，保持比例 */
        margin: 0 auto;
    }
    /* 同时调整 slide 内部容器，让图片居中 */
    .swiper-container-banner .swiper-slide {
        display: flex;
        justify-content: center;
    }
}