@charset "utf-8";
/* CSS Document */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Microsoft YaHei", "SimHei", sans-serif;}
 html, body {
      height: 100%;
      width: 100%;
      background-color: #f5f7fa !important;
      color: #333;
     line-height: 1.6;}

.clearboth{
    clear:both;
    border:0px;
    padding:0px;
    margin:0px;}

 /* 面包屑导航 */
.breadcrumb {
     padding: 15px 0;
     background-color: #fff;
     box-shadow: 0 2px 5px rgba(0,0,0,0.05);
     margin-bottom: 30px;
}
        
.breadcrumb ul {
     display: flex;
     list-style: none;
}
        
.breadcrumb ul li {
     margin-right: 10px;
     font-size: 14px;
     color: #666;
}
        
.breadcrumb ul li:after {
     content: ">";
     margin-left: 10px;
}
        
.breadcrumb ul li:last-child:after {
     content: "";
}
        
.breadcrumb ul li a {
     color: #4412c1;
     text-decoration: none;
}
        
.breadcrumb ul li a:hover {
     text-decoration: underline;
}

/*~~~~~首页列表Card~~~~~~~*/

.ii-title{ border-bottom: #d4d4d4 1px solid; width: 100%; height: auto; overflow: hidden;}
.ii-title h1{font-size: 24px; color: #000000;line-height: 40px; float: left; font-weight: normal;margin: 0; padding: 0 0 10px 0;}
.ii-title a{ float: right; font-size: 14px; color: #666666; margin-top: 20px;}
.ii-title a:hover{}
.i-ilist{height: auto; overflow: hidden; width: 100%; padding-top: 10px;box-sizing: border-box;}

.i-ilist li a:hover{ color: #4412c1;}

/* 列表项容器修改 */
.i-ilist li {
    /* 关键修改：启用 flex 布局 */
    display: flex;
    /* 关键修改：垂直居中对齐 */
    align-items: center;
    /* 关键修改：子元素两端对齐（虽然主要靠flex-grow控制，但此属性是好习惯） */
    justify-content: space-between;
    width: 100%; /* 显式声明宽度为100% */
    box-sizing: border-box; /* 确保内边距不会导致总宽度超出 */
    /* 保持原有高度设置 */
    height: 40px;
    line-height: 40px; /* 保持文字垂直居中 */
    border-bottom: 1px dashed #dedede; /* 可选：增加下划线让列表更清晰 */
    padding: 0 5px;}

/* 链接（左侧文字）修改 */
.i-ilist li a {
    /* 关键修改：利用 flexbox 调整视觉顺序。*/
    /* 因为html中 span 在前，我们用 order: -1 强制把 a 放到视觉上的第一位（左侧） */
    order: -1; 
    font-size: 16px;
    /* 关键修改：占据剩余所有空间，将日期挤到右边 */
    flex: 1;
    
    /* 关键修改：由 flex 布局的特性，必须设置 min-width: 0 才能启用省略号截断 */
    min-width: 0;
    
    /* 关键修改：省略号三件套 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    color: #666666;
    text-decoration: none;
    display: block; /* 确保作为块状填满高度 */
    margin-right: 10px;}

/* 日期（右侧时间）修改 */
.i-ilist li span {
    /* 关键修改：禁止日期被压缩，确保始终完整显示 */
    flex-shrink: 0;
    
    /* 移除原来的 float: right，flex 布局下不需要浮动 */
    /* float: right; */ 
    
    color: #999999;
    font-size: 14px; /* 建议明确指定日期字体大小 */
    text-align: right;}

.i-ilist ul {
    list-style: none;
    padding: 0;
    margin: 0;}

  /* 栏目区域 */
.sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin: 10px auto;
    max-width: 1200px;
}
        
.section-card {
    padding: 10px;
    background-color: white !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}
        
.section-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.section-card h1 {color: #4412c1;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~列表页 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 /* 主体容器：Flex 布局实现 footer */
 .app-container {
     display: flex;
     flex-direction: column;
     min-height: 100vh; /* 确保容器至少占满屏幕高度 */
     width: 100%;
}
/* 主体内容：自动填充剩余空间 */
.main {
      flex: 1; /* 关键：占据容器剩余高度 */
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
     background: white;
     border-radius: 10px;
     box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.list-banner {
    margin: 10px auto;
    max-width: 1200px;
    width: 100%;
    height: 160px;
    overflow: hidden;}

.list-main {
    margin: 15px auto;
    height: auto;
    overflow: hidden;
    background: #FFF;
    max-width: 1200px;
    width: 100%;}

.lm_right .lm_dqwz {
    min-height: 47px;
    border-bottom: #e2e2e2 1px solid;
    text-align: right;
    padding: 0 20px;}

.lm_right .lm_dqwz h1 {
    font-size: 16px;
    line-height: 47px;
    color: #000;
    float: left;
    background: url(../images/ico_004.png) left center no-repeat;
    margin: 0;
    padding: 0 0 0 30px;
    font-family: "微软雅黑";
    font-weight: normal;}

.lm_right .lm_dqwz h2 {
    font-size: 16px;
    line-height: 47px;
    color: #000;
    float: left;
    background: url(../images/ico_007.png) left center no-repeat;
    margin: 0;
    padding: 0 0 0 30px;
    font-family: "微软雅黑";
    font-weight: normal;}

.lm_right .lm_dqwz p {
    font-size: 12px;
    color: #999999;
    line-height: 47px;
    margin: 0;
    padding: 0;}

.lm_right .lm_list {
    padding: 30px 50px 10px 50px;}



/* 列表项容器布局修改 */
.lm_right .lm_list li {
    /* 关键修改：启用flexbox布局，这是实现响应式对齐的核心 */
    display: flex; 
    /* 关键修改：子元素两端对齐（左侧文字，右侧日期） */
    justify-content: space-between;
    /* 关键修改：垂直居中 */
    align-items: center;
    
    height: 46px;
    background: url(../images/xhx.png) bottom repeat-x;
    color: #333;
    font-size: 16px;
    /* 移除原来的行高限制，交由flex控制，或保留但需配合align-items */
    line-height: 46px;}

/* 左侧链接样式修改 */
.lm_right .lm_list a {
    background: url(../images/ico_006.png) left center no-repeat;
    padding-left: 20px;
    /* 关键修改：让链接占据所有剩余空间 */
    flex: 1;
    /* 关键修改：至关重要！允许flex子项压缩至内容以下，否则省略号不会出现 */
    min-width: 0; 
    /* 关键修改：强制不换行 */
    white-space: nowrap;
    /* 关键修改：超出部分隐藏 */
    overflow: hidden;
    /* 关键修改：超出显示省略号 */
    text-overflow: ellipsis;
    margin-right: 15px;
    color: #333; /* 继承父元素颜色或指定颜色 */
    display: block; /* 确保作为块级元素填充高度 */
    font-size: 16px !important;}

/* 右侧日期样式修改 */
.lm_right .lm_list li span {
    /* 关键修改：防止空间不足时日期被挤压换行或变形 */
    flex-shrink: 0;
    
    color: #999;
    font-size: 14px;
    text-align: right;
    /* 可选：保持原来的最小宽度，或让其自适应 */
    min-width: 80px; 
    /* 关键修改：确保日期文字不换行 */
    white-space: nowrap;}

.lm_right .lm_list ul {
    list-style: none;
    padding: 0;
    margin: 0;}



/* 响应式设计 */
@media (max-width: 768px) {
    .list-banner {
        height: 120px;}
    
    .lm_right .lm_list {
        padding: 20px 20px 10px 20px;}
    
    .lm_right .lm_list a {
        padding-left: 25px;
        font-size: 14px;}
    
    .lm_right .lm_list li span {
        font-size: 12px;}
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~内容页 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* --- 文章容器 --- */
.wz_nr {
    padding: 30px;
    width: 100%; /* 确保占满容器 */
}

/* --- 标题样式 --- */
.wz_nr .w_title {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif; /* 增加兼容性写法 */
    line-height: 1.4; /* 使用倍数行高，适应多行标题 */
    font-size: 24px;
    color: #333333;
    font-weight: normal;
    text-align: center;
    margin: 0 0 10px 0; /* 增加底部间距 */
    padding: 0;
}

/* --- 时间/元数据样式 --- */
.wz_nr .w_wztime {
    font-size: 12px;
    line-height: 34px;
    height: 34px;
    background: #fafafa;
    width: 100%;
    text-align: center;
    font-weight: normal;
    color: #555;
    margin-bottom: 20px; /* 增加与正文的距离 */
}

/* --- 正文段落样式 --- */
.zw_xx p {
    text-indent: 2em;
    font-size: 14px; /* 建议改为16px，移动端14px略小 */
    line-height: 1.8; /* 增加行高提升阅读舒适度 */
    text-align: justify; /* 两端对齐，比 -webkit-left 更通用 */
    color: #333;
    word-wrap: break-word; /* 防止长英文/链接撑破布局 */
}

/* --- 【新增】正文图片自适应 --- */
/* 这一点非常重要，防止文章里的图片过大导致手机端横向滚动 */
.zw_xx img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 10px auto;
}

/* --- 主要内容区域 Flex布局 --- */
.main-content {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    flex: 1;
    /* 限制最大宽度，防止在大屏上太宽难以阅读，可根据需要调整 */
    max-width: 1200px; 
    margin-left: auto;
    margin-right: auto;
}

/* --- 媒体查询（响应式适配） --- */

/* 平板及以下尺寸 (<= 992px) */
@media (max-width: 992px) {
    .main-content {
        flex-direction: column; /* 改为垂直排列 */
        padding: 15px;
        gap: 20px;
    }
}

/* 手机尺寸 (<= 768px) */
@media (max-width: 768px) {
    /* 减小外层容器内边距，增加内容显示区域 */
    .wz_nr {
        padding: 15px 10px; 
    }

    /* 缩小标题字号 */
    .wz_nr .w_title {
        font-size: 20px;
        line-height: 1.3;
    }

    /* 调整正文阅读体验 */
    .zw_xx p {
        font-size: 15px; /* 移动端适当调整字号 */
        line-height: 1.6;
        text-align: left; /* 手机端通常左对齐阅读更自然 */
        text-indent: 0; /* 现代移动端设计有时会取消首行缩进，改为段间距，可根据喜好保留或删除此行 */
    }
    
    .main-content {
        box-shadow: none; /* 手机端通常去掉阴影使其更扁平化 */
        padding: 10px;
        width: 100%;
    }
}    




#footer {
    /* 【关键修改】距离窗口底部 0px */
    bottom: 0;
    /* 【关键修改】距离窗口左侧 0px，确保从最左边开始 */
    left: 0;
    /* 1. 宽度设置：充满父元素 */
    width: 100%;
    
    /* 2. 高度设置：保持原有高度 */
    height: 80px;
    
    /* 3. 【关键修改】启用 flex 布局 */
    display: flex;
    /* 4. 【关键修改】水平居中 (main axis) */
    justify-content: center;
    
    /* 5. 【关键修改】垂直居中 (cross axis) */
    align-items: center;
    
    /* 视觉样式保持不变 */
    background: #4412c1;
    color: #ffffff;
    font-size: 14px;
    margin-top: auto;}