/* 核心布局样式 */
body { background-color: #f5f5f5; margin: 0; padding: 0; font-family: "Microsoft YaHei", sans-serif; }
.g-container { width: 1200px; margin: 20px auto; display: flex; justify-content: space-between; align-items: flex-start; }

/* 左侧列表区 */
.main-left { width: 860px; background: #fff; padding: 20px; box-sizing: border-box; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

.article-header {
    margin-bottom: 30px;
    text-align: center;
    border-bottom: 1px solid #f5f5f5; /* 标题下方加条淡淡的分割线 */
    padding-bottom: 20px;
}
.article-h1 { 
    font-size: 28px; 
    color: #ff3333; /* 红色标题 */
    font-weight: normal; 
    margin: 0 0 15px 0; 
    line-height: 1.4;
    height: auto;
    padding-bottom: 5px;
}
.article-date { 
    font-size: 14px; 
}
/* --- 新增：文章正文样式 --- */
.article-content { 
    font-size: 16px; 
    line-height: 1.8; 
    color: #444; 
    text-align: justify;
}
.article-content p { margin-bottom: 20px; text-indent: 2em; } /* 首行缩进 */
.article-content img { 
    max-width: 100% !important; 
    height: auto !important; 
    display: block; 
    margin: 20px auto; 
    border-radius: 4px;
}

.column-title { font-size: 18px; font-weight: bold; padding-bottom: 10px; border-bottom: 2px solid #eee; margin-bottom: 10px; position: relative; }
.column-title::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 80px; height: 2px; background: #28b87c; }

.article-item { display: flex; padding: 25px 0; border-bottom: 1px solid #f2f2f2; }
.article-item:last-child { border-bottom: none; }

/* 解决图片过大的核心代码 */
.article-img { width: 220px; height: 135px; flex-shrink: 0; margin-right: 20px; overflow: hidden; border-radius: 4px; }
.article-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.article-item:hover .article-img img { transform: scale(1.05); }

.article-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.article-info h3 { margin: 0 0 10px 0; font-size: 18px; line-height: 1.4; }
.article-info h3 a { color: #333; text-decoration: none; }
.article-info h3 a:hover { color: #28b87c; }
.article-info p { font-size: 14px; color: #777; line-height: 1.6; margin-bottom: 15px; height: 44px; overflow: hidden; }

.article-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #999; }
.meta-tag { color: #28b87c; background: #eaf8f2; padding: 2px 8px; border-radius: 2px; margin-right: 10px; }

/* 右侧侧边栏 */
.sidebar-right { width: 320px; }
.side-box { background: #fff; padding: 20px; margin-bottom: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.side-title { font-size: 16px; font-weight: bold; border-left: 4px solid #28b87c; padding-left: 10px; margin-bottom: 15px; }

/* 排行榜列表样式 */
.rank-list li { display: flex; align-items: center; margin-bottom: 15px; font-size: 14px; }
.rank-num { width: 20px; height: 20px; line-height: 20px; text-align: center; background: #eee; color: #999; font-size: 12px; margin-right: 10px; border-radius: 2px; }
/* 前三名颜色 */
.rank-list li:nth-child(1) .rank-num { background: #ff5a00; color: #fff; }
.rank-list li:nth-child(2) .rank-num { background: #ff9600; color: #fff; }
.rank-list li:nth-child(3) .rank-num { background: #ffc600; color: #fff; }

.rank-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; }
.btn-down { font-size: 12px; color: #28b87c !important; border: 1px solid #28b87c; padding: 1px 8px; border-radius: 3px; text-decoration: none; }
.btn-down:hover { background: #28b87c; color: #fff; }

/* 分页样式 */
.pagination { 
    margin-top: 30px;
    /* text-align: center; */
    font-size: 16px;
}

.pagination p,.pagination img{ 
    /*margin-bottom: 5px;*/
    width: 100%;
    height: auto;
    line-height: 28px;
    font-size: 15px;
    font-weight: normal;
    color: #333;
    margin: 10px 0 0;
    display: block;
    overflow: hidden;
}
.pagination ul { display: inline-flex; list-style: none; padding: 0; }
.pagination li { margin: 0 3px; }
.pagination li a, .pagination li span { display: block; padding: 6px 12px; border: 1px solid #ddd; background: #fff; color: #666; text-decoration: none; border-radius: 3px; }
.pagination li.active span { background: #28b87c; border-color: #28b87c; color: #fff; }
.pagination li a:hover { background: #f8f8f8; }

.pagination h3 {
    line-height: 32px;
    font-size: 19px;
    color: #333;
    font-weight: bold;
    overflow: hidden;
    margin-bottom: 10px;
    margin-top: 10px;
}

.zxxz_wrap {
   width: 600px;
    height: 100px;
    margin: 30px auto;
    padding: 10px;
    background: #FFFFFF;
    border: 2px solid #FAE4D1;
    border-radius: 20px;
    box-sizing: border-box;
    text-indent: 0;
}

.zxxz_wrap .zxxz_left  {
    float: left;
    width: 76px !important;
    height: 76px !important;
    border-radius: 16px;
    display: inline-block;
    margin: 0;
}

.zxxz_wrap .zxxz_right {
    float: right;
    width: 486px;
    height: 100%;
}

.zxxz_wrap .zxxz_right .top {
    width: 100%;
    overflow: hidden;
}

.zxxz_wrap .zxxz_right .top .top_l {
    float: left;
    width: 320px;
}

.zxxz_wrap .zxxz_right .top .top_l .tit {
    display: block;
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zxxz_wrap .zxxz_right .top .top_l .tit::before {
    display: inline-block;
    content: "";
    width: 16px;
    height: 18px;
    margin-right: 5px;
    background: url("https://js1.18183.com/te5/common/images/hot.png") no-repeat center;
}

.zxxz_wrap .zxxz_right .top .top_l .tags {
    width: 100%;
    overflow: hidden;
}

.zxxz_wrap .zxxz_right .top .top_l .tags i {
    float: left;
    height: 16px;
    margin-right: 8px;
    margin-top: 6px;
    padding: 0 8px;
    line-height: 16px;
    border: 1px solid #C3C3C3;
    border-radius: 11px;
    color: #999999;
    font-weight: 400;
    font-size: 12px;
    font-style: normal;
}
.zxxz_wrap .zxxz_right .top .top_l .tags i:nth-child(n+4){
    display: none;
}
.zxxz_wrap .zxxz_right .top .top_l .tags i:nth-of-type(1) {
    border: 1px solid #FF881E;
    color: #FF881E;
}

.zxxz_wrap .zxxz_right .top .top_r {
    float: right;
    width: 140px;
    height: 42px;
    line-height: 42px;
    background: linear-gradient(90deg, #FF5E1E, #FF881E);
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
}

.zxxz_wrap .zxxz_right .top .top_r:hover {
    background: linear-gradient(90deg, #ff4b1e, #ff781e);
}

.zxxz_wrap .zxxz_right .des {
    display: block;
    width: 100%;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-indent: 0;
    margin-top: 6px;
}