@charset "utf-8";
/* CSS Document */
/* news-list.css 新闻中心页面私有样式 */
.news-main{
    background-color: #fafafa;
}
/* 首屏banner 高度690px，header浮动在banner上面 */
.news-banner{
    width:100%;
    height:690px;
    background:url("../img/xwbanner.jpg") center center no-repeat;
    background-size:cover;
    position:relative;
}
.news-banner .banner-inner{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
}
.news-banner .banner-title{
    color:#ffffff;
    font-size:40px;
    font-weight:bold;
    padding-left:calc((100% - 1200px)/2);
}
/* 焦点切换区块，距离页面顶部525px，悬浮叠在banner之上 */
.news-focus-wrap{
    position:relative;
    top:-165px;
    z-index:2;
}
.news-focus-inner{
    background:#fff;
    padding:0;
    border-radius:12px 12px 0 0; /* 左上角、右上角圆角 */
    overflow:hidden;
}
/*轮播容器与item切换*/
.focus-swiper{
    position:relative;
}
.focus-item{
    display:none;
    padding:40px;
}
.focus-item.active{
    display:block;
}
.focus-row{
    display:flex;
    align-items:flex-start;
    gap:70px;
}
.focus-left{
    width:720px;
    flex-shrink:0;
}
.focus-left img{
    width:720px;
    height:340px;
    border-radius:12px;
    object-fit:cover;
    display:block;
}
.focus-right{
    flex:1;
    padding-top:50px;
}
.focus-date{
    font-size:16px;
    color:#519b28;
    margin-bottom:45px;
}
.focus-title{
    font-size:20px;
    color:#222;
    font-weight:bold;
    margin-bottom:100px;
}
.focus-more{
    font-size:16px;
    color:#888888;
    text-decoration:none;
}
.focus-more:link{

    color:#888888;
}
/* 指示器改为线条长条，不是圆点 */
.focus-btns{
    display:flex;
    justify-content:center;
    gap:12px;
    margin:0 0 35px;
}
.focus-dot{
    width:36px;
    height:4px;
    border-radius:2px;
    border:none;
    background:#cccccc;
    cursor:pointer;
    transition:0.25s;
}
.focus-dot.active{
    background:#3486ec;
    width:48px;
}

/* 新闻子菜单 间隔55px；胶囊按钮tab样式，整体居中 */
.news-subnav-wrap{
    margin-top:-70px;
}
.news-subnav{
    display:flex;
    gap:20px;
    justify-content:center;
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
}
.subnav-item{
    flex:1;
    text-align:center;
    font-size:18px;
    color:#666;
    text-decoration:none;
    padding:12px 10px;
    border-radius:999px;
    position:relative;
    transition:0.25s all;
}
.subnav-item::after{
    display:none !important;
}
/* active使用渐变背景 #71cc55 → #3484f7 */
.subnav-item.active{
    background:linear-gradient(90deg,#74cd57,#357ffc);
    color:#ffffff;
}
.subnav-item:hover:not(.active){
    color:#3486ec;
}

/*新闻列表 间隔55px；一行3列，列间隔15px，行间隔55px */
.news-list-wrap{
    margin-top:55px;
}
.news-grid{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap:15px;
    row-gap:55px;
}
.news-card{
    background:#ffffff;
    border-radius:12px;
    overflow:hidden;
    position:relative;
    transition: box-shadow 0.3s ease;
}
.news-card:hover{
    box-shadow:0 8px 24px rgba(0,0,0,0.12);
}
.news-card .card-img img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}
.news-card .card-body{
    padding:0 20px 24px;
}
/*===== 卡片内部间距严格按设计稿 =====*/
.news-card .card-title{
    font-size:18px;
    color:#222;
    font-weight:500;
    line-height:1.5;
    margin:30px 0 55px 0; /*图片下边距30px，标题下边距55px*/
}
.news-card .card-date{
    font-size:14px;
    color:#999;
    margin-bottom:30px; /*日期下边距30px*/
}
.news-card .card-desc{
    font-size:16px;
    color:#5d5d5d;
    line-height:1.6;
    margin-bottom:55px; /*简介下边距55px*/
}
/*标签行：标签文字 + hover显示圆形箭头按钮 */
.news-card .card-tag-row{
    position:relative;
    display:flex;
    align-items:center;
}
.news-card .card-tag-row a{
   color:#fff;
}
.news-card .card-tag{
    font-size:16px;
    color:#505050;
}
/*圆形箭头按钮：相对于tag-row定位，右侧垂直居中，默认透明；hover卡片才显示 */
.card-circle-arrow{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    width:46px;
    height:46px;
    border-radius:50%;
    background:linear-gradient(90deg,#71ca5c,#3486ec);
    color:#fff;
    text-align:center;
    line-height:46px;
    font-size:20px;
    text-decoration:none;
    opacity:0;
    transition:opacity 0.3s ease;
}
.news-card:hover .card-circle-arrow{
    opacity:1;
}

/*========== 分页（按照9.png设计效果） ==========*/
.news-pagination{
    margin-top:60px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
}
.pagination-wrap .page-item{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:8px;
    background:#ffffff;
    color:#333333;
    text-decoration:none;
    border:1px solid #e2e2e2;
    font-size:16px;
    transition:all 0.25s ease;
}
/* 当前激活页码：渐变背景，和网站统一渐变 */
.pagination-wrap .page-item.active{
    background:linear-gradient(90deg,#3486ec,#3486ec);
    color:#ffffff;
    border-color:transparent;
}
/* hover未激活项 */
.pagination-wrap .page-item:hover:not(.active){
    border-color:#3486ec;
    color:#3486ec;
}

/*简单移动端基础适配，可根据common.css再微调*/
@media(max-width:1200px){
    .focus-item{
        padding:24px;
    }
    .focus-row{
        flex-direction:column;
    }
    .focus-left{
        width:100%;
    }
    .focus-left img{
        width:100%;
        height:auto;
    }
    .news-grid{
        grid-template-columns:1fr 1fr;
    }
}
@media(max-width:768px){
    .news-grid{
        grid-template-columns:1fr;
    }
    .news-banner .banner-title{
        padding-left:20px;
        font-size:30px;
    }
    .news-subnav{
        max-width:100%;
        gap:4px;
    }
    .subnav-item{
        font-size:14px;
        padding:10px 4px;
    }
    /*移动端分页缩小尺寸 */
    .pagination-wrap .page-item{
        width:36px;
        height:36px;
        font-size:14px;
    }
    .news-pagination{
        gap:6px;
    }
}