* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft Yahei", sans-serif;
        }
        body {
            background-color: #fff;
            color: #333;
        }
        /* 总容器 1200px居中 */
        /* 资讯列表外层容器：垂直流式布局，不能用flex！ */
.article-container{
    width: 1200px;
    margin: 30px auto 0;
    /* 删除display:flex相关所有代码 */
}

        /* 顶部导航栏 */
        .nav-bar {
            display: flex;
            align-items: center;
            border: 1px solid #e5e7eb;
            border-bottom: none;
        }
        .nav-item {
            padding: 16px 30px;
            font-size: 16px;
            cursor: pointer;
        }
        .nav-item.active {
            background-color: #ff7800;
            color: #fff;
        }
        .nav-more {
            color: #4078f0;
            margin-left: auto;
        }
        /* 主体左右布局 */
        .main-wrap {
            display: flex;
            gap: 40px;
            border: 1px solid #e5e7eb;
            padding: 20px;
        }
		.main-wrap::after{
    content:"";
    display:block;
    clear:both;
}
        .left-box {
            width: 800px;
        }
        .right-box {
            width: 360px;
        }
        /* 新闻列表项 */
        .news-item {
            display: flex;
            gap: 15px;
            margin-bottom: 24px;
        }
        .news-img {
            width: 160px;
            height: 100px;
            background-color: #d0d7e3;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            text-align: center;
            padding: 5px;
        }
        .news-info h3 {
            font-size: 18px;
            margin-bottom: 8px;
            font-weight: normal;
        }
        .news-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 6px;
        }
        .news-date {
            font-size: 14px;
            color: #888;
        }
        /* 分页 */
        .page-wrap {
            margin-top: 30px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .page-wrap button, .page-wrap input {
            padding: 6px 12px;
            border: 1px solid #ddd;
            background: #fff;
            font-size:14px;
        }
        .page-wrap button.active {
            background-color: #ff7800;
            color:#fff;
            border-color:#ff7800;
        }
        .page-wrap input {
            width:45px;
        }
        /* 右侧侧边栏 */
        .side-block {
            margin-bottom:30px;
        }
        .side-title {
            font-size:20px;
            margin-bottom:16px;
            display:flex;
            align-items:center;
        }
        .side-title span {
            color:#aaa;
            font-size:16px;
            margin-left:8px;
        }
        .hot-list li {
            list-style: none;
            padding:10px 0;
            border-bottom:1px solid #f2f2f2;
        }
        .hot-list li:last-child {
            border-bottom:none;
        }
        .hot-num {
            display:inline-block;
            width:22px;
            height:22px;
            line-height:22px;
            text-align:center;
            background:#eee;
            border-radius:50%;
            margin-right:8px;
            font-size:14px;
        }
        .hot-list li:nth-child(1) .hot-num,
        .hot-list li:nth-child(2) .hot-num,
        .hot-list li:nth-child(3) .hot-num {
            background:#ff4444;
            color:#fff;
        }
        .hot-text {
            font-size:14px;
        }
        .hot-view {
            font-size:12px;
            color:#999;
            margin-left:30px;
            margin-top:4px;
        }
        /* 本周必读 */
        .read-item {
            display:flex;
            gap:10px;
            margin-bottom:16px;
        }
        .read-img {
            width:100px;
            height:80px;
            background:#ddd;
            flex-shrink:0;
        }
        .read-text {
            font-size:14px;
            line-height:1.5;
        }
        .read-ul li {
            margin-left:16px;
            padding:6px 0;
            font-size:14px;
        }
		
		
/* 整体容器 1200px居中 flex布局不变 */
.news-container{
    width:1200px;
    margin:0 auto;
    display:flex;
    gap:40px;
    align-items:flex-start;
}
/* 左侧文章区域 800px */
.article-wrap{
    width:800px;
    background:#ffffff;
    padding:30px;
    border-radius:4px;
}
/* 右侧侧边栏 360px */
.sidebar{
    width:360px;
}
.side-inner{
    width:100%;
}
.side-card{
    background:#fff;
    padding:24px;
    margin-bottom:20px;
    border-radius:4px;
}

/* 文章头部 */
.article-title{
    font-size:28px;
    color:#222;
    text-align:center;
    margin-bottom:24px;
    line-height:1.4;
}
.article-meta{
    display:flex;
    align-items:center;
    gap:20px;
    font-size:14px;
    color:#777;
    padding:12px 16px;
    background:#f6f6f6;
    margin-bottom:24px;
    position:relative;
}
/* 字号调节按钮 */
.font-size-btn{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    gap:8px;
}
.font-size-btn span{
    cursor:pointer;
    font-size:16px;
    padding:2px 8px;
    border:1px solid #ddd;
    border-radius:4px;
    color:#666;
    user-select:none;
}
.font-size-btn span:hover{
    border-color:#ff7800;
    color:#ff7800;
}

/* 导读模块 */
.dao-du{
    display:flex;
    background:#f6f6f6;
    padding:16px;
    margin-bottom:24px;
}
.dao-du-label{
    font-size:36px;
    color:#999;
    font-weight:bold;
    line-height:1;
    margin-right:16px;
}
.dao-du-text{
    font-size:16px;
    line-height:1.7;
    color:#333;
    padding-top:8px;
}

/* 正文内容 & 字号档位 */
.article-content{
    transition: font-size 0.2s;
}
.article-content p{
    line-height:1.8;
    color:#222;
    margin-bottom:20px;
    text-indent:2em;
}
.font-small{
    font-size:16px !important;
}
.font-normal{
    font-size:18px !important;
}
.font-large{
    font-size:20px !important;
}

/* 底部操作栏 */
.article-toolbar{
    display:flex;
    justify-content:center;
    gap:32px;
    margin-top:40px;
    padding-top:24px;
    border-top:1px solid #eee;
}
.tool-item{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:15px;
    color:#555;
    cursor:pointer;
}

/* 免责声明 */
.copyright-notice{
    margin-top:30px;
    padding:20px;
    background:#fff8e8;
    border:1px solid #ffddb3;
    border-radius:4px;
}
.copyright-notice h4{
    font-size:18px;
    margin-bottom:12px;
    color:#333;
}
.copyright-notice p{
    font-size:14px;
    color:#777;
    line-height:1.7;
}

/* 同类资讯 */
.same-news{
    margin-top:35px;
    padding-top:20px;
    border-top:1px solid #eee;
}
.same-news-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}
.same-news-title{
    font-size:18px;
    color:#222;
    display:flex;
    align-items:center;
}
.same-news-title::before{
    content:"";
    width:4px;
    height:18px;
    background:#4078f0;
    margin-right:8px;
}
.same-news-more{
    font-size:14px;
    color:#333;
}
.same-news-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.same-news-list li{
    list-style:none;
    font-size:15px;
    line-height:1.6;
    padding-left:14px;
    position:relative;
    margin-bottom:8px;
}
.same-news-list li::before{
    content:"•";
    position:absolute;
    left:0;
    color:#333;
}

/* 侧边栏 用户信息 */
.user-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:24px;
}
.user-info{
    display:flex;
    gap:12px;
    align-items:center;
}
.user-avatar{
    width:80px;
    height:80px;
    background:#e8e8e8;
    border-radius:50%;
    position:relative;
    overflow:hidden;
}
.user-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.user-v{
    position:absolute;
    right:0;
    bottom:0;
    width:16px;
    height:16px;
    background:#ff7800;
    border-radius:50%;
    color:#fff;
    font-size:10px;
    text-align:center;
    line-height:16px;
}
.user-name{
    font-size:17px;
    color:#222;
}
.user-desc{
    font-size:14px;
    color:#888;
    margin-top:4px;
}
.follow-btn{
    border:1px solid #dde;
    padding:4px 12px;
    border-radius:16px;
    font-size:14px;
    color:#444;
    display:flex;
    align-items:center;
    gap:4px;
}

/* 侧边栏标题 */
.side-h{
    font-size:18px;
    color:#222;
    margin-bottom:18px;
    display:flex;
    align-items:center;
}
.side-h::before{
    content:"";
    width:4px;
    height:18px;
    background:#4078f0;
    margin-right:8px;
}

/* 推荐图文网格 */
.img-news-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:24px;
}
.grid-item img{
    width:100%;
    height:110px;
    object-fit:cover;
    background:#ddd;
    display:block;
    margin-bottom:6px;
}
.grid-item .title{
    font-size:14px;
    color:#333;
    line-height:1.4;
}

/* 推荐资讯列表 */
.side-list li{
    list-style:none;
    font-size:15px;
    line-height:1.7;
    margin-bottom:10px;
}
.side-list li.red{
    color:red;
}