.content-btm,
.content-btm .btm-left-content,
.sl{overflow: hidden}
.content{width: 1200px;border: 1px solid #ccc;padding-top: 15px}
.sl{white-space: nowrap;text-overflow: ellipsis}
.content-top{width: 100%;height: 250px;margin-bottom: 10px}
.content-top .email-tab{width: 860px;height: 248px;float: left;margin-left: 1px;border: 1px solid #ccc}
.content-top .email-tab .email-title{width: 100%;height: 34px;border-top: 2px solid #1f89e1;background: #f0f0f0}
.content-top .email-tab .email-title a{display: block;float: left;width: 168px;height: 34px;line-height: 34px;font-size: 18px;color: #1f89e1;text-align: center;text-decoration: none}
.content-top .email-tab .email-title a.active{padding-left: 10px;background: #1f89e1 url(../image/t.png) 3px center no-repeat;color: #fff}
.content-top .email-con{width: 859px;padding-top: 15px;height: 195px;margin: 0 auto;background: #fff}
.content-top .email-con .con-title{width: 100%;height: 30px;line-height: 30px;background: #ccc}
.content-top .email-con .con-title span{display: block;float: left;height: 100%;text-align: center;border-right: 2px solid #fff;margin-left: -2px}
.content-top .email-con .con-title .bianhao{width: 23%}
.content-top .email-con .con-title .neir{width: 53%}
.content-top .email-con .con-title .tim,
.content-top .email-con .con-title .zt{width: 12%}
.content-top .email-con .email-list{width: 100%}
.content-top .email-con .email-list .email-item{display: none}
.content-top .email-con .email-list .email-item.active{display: block}
.content-top .email-con .email-list li{width: 100%;height: 33px;line-height: 33px}
.content-top .email-con .email-list li a,
.content-top .email-con .email-list li span{display: block;float: left;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 16px;}
.content-top .email-con .email-list li .bianhao{width: 23%}
.content-top .email-con .email-list li .neir{width: 53%;text-decoration: none;text-align: left}
.content-top .email-con .email-list li .tim{width: 12%}
.content-top .email-con .email-list li .zt{width: 12%;color: red}
.content-top .email-s{width: 320px;height: 250px;float: right;margin-right: 3px}
.content-center,content-btm{height:250px;margin:15px 0;}
.content-center .interview{width: 860px;height: 248px;margin-left: 2px;float: left;border: 1px solid #ccc}
.content-center .interview .title{width: 100%;height: 34px;border-top: 2px solid #1f89e1;background: #f0f0f0}
.content-center .interview .title a{font-size: 18px;width: 138px;line-height: 34px;display: block;text-decoration: none;text-align: center;color: #1f89e1}
.content-center .interview .title a.active{color: #fff;background: #1f89e1;}
.content-center .interview .view-box .view-img{float: left;margin-left: 6px}
.content-center .interview .view-box .view-img img{display: block;margin-top: 10px}
.content-center .interview .view-box .view-con{width: 530px;float: left;margin-left: 13px}
.content-center .interview .view-box .view-con h2{font-size: 18px;line-height: 26px}
.content-center .interview .view-box .view-con a,
.content-center .interview .view-box .view-con .r_color{font-size: 16px;color:red;line-height: 26px}
.content-center .interview .view-box .view-con .txt{font-size: 16px;line-height: 28px;}
.content-center .review{float: right;margin-right: 3px;width: 320px;height:247px;border: 1px solid #ccc}
.content-center .review .title{width: 100%;height: 36px;border-top: 2px solid #1f89e1;background: #f0f0f0}
.content-center .review .title a{font-size: 18px;width: 138px;line-height: 36px;display: block;text-decoration: none;text-align: center;color: #1f89e1}
.content-center .review .title a.active{color: #fff;background: #1f89e1;}
.content-center .review li{position: relative;padding-left: 18px;height: 33px;line-height: 33px}
.content-center .review li i{width: 6px;height: 6px;position: absolute;left: 5px;top: 13px;border-radius: 50%;background: silver;display: block}
.content-center .review li a{font-size: 16px;text-decoration: none}
.content-btm{width: 1198px;height: 270px;margin: 0 auto;background: #fff;}
.content-btm li{height: 32px;line-height: 32px;font-size: 16px;color: #333;font-family: 'Microsoft Yahei';padding-left: 20px;position: relative}
.content-btm i{display: block;width: 6px;height: 6px;border-radius: 50%;background: #777;position: absolute;left: 6px;top: 12px}
.content-btm span{width: 70px;height: 24px;line-height: 24px;text-align: center;background: #1f89e1;display: inline-block;color: #fff;float: right;margin-top:4px;margin-right: 15px;}
.content-btm .btm-left-content{height: 225px}
.content-btm .btm-left-content .btmLeft-item{display: none;height: 100%}
.content-btm .btm-left-content .btmLeft-item.active{display: block}
.content-btm .title{height: 34px;line-height: 36px;border-top: 2px solid #1f89e1;background: #f0f0f0}
.content-btm .btm-left,
.content-btm .btm-right{width: 592px;height: 260px;float: left;border: 1px solid #ccc}
.content-btm .btm-left .title a,
.content-btm .btm-right .title a{width: 138px;height: 34px;display: block;float: left;text-align: center;text-decoration: none;font-size: 18px;color: #1f89e1}
.content-btm .btm-left .title a.active,
.content-btm .btm-right .title a.active{color: #fff;background: #1f89e1;}
.content-btm .btm-right{float: right;}
.content-btm .btm-right li{position: relative;height: 32px;line-height: 32px;font-size: 16px;color: #333;}
.content-btm .btm-right li a{text-decoration: none;}
.dzxx{background: url(../image/dzxx.jpg) no-repeat!important;}
.wsxfs{background: url(../image/wsxf.jpg) no-repeat!important;}
.hdIconsBtn{overflow:hidden; padding-bottom:19px;}
.hdIconsBtn li{float:left; margin:0 7px 14px 7px; height:80px; width:135px;}
.hdIconsBtn li.li4,.hdIconsBtn li.li5{margin-bottom: 5px;}
.hdIconsBtn li.stat{height: 70px;margin: 0;background: #49578a;width: 100%;}
.hdIconsBtn li.stat span{padding:5px 0;float:left;line-height: 25px;color:#fff;width:48%;display: inline-block;}
.hdIconsBtn a{display:block; height:80px; line-height:34px; overflow:hidden; text-align:center; font-weight:bold; color:#fff; background:#EE4242; cursor:pointer; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.hdIconsBtn i{display:block; height:50px; background:url(../image/indIconsBtn.png) center -20px no-repeat; -webkit-transition:400ms;-o-transition:400ms;-moz-transition:400ms;transition:400ms;}
.hdIconsBtn a:hover{text-decoration:none}
.hdIconsBtn a:hover i{-moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1);}
.hdIconsBtn .li2 i{background-position:center -108px;}
.hdIconsBtn .li3 i{background-position:center -218px;}
.hdIconsBtn .li4 i{background-position:center -315px; height:60px;}
.hdIconsBtn .li5 i{background-position:center -418px;}
.hdIconsBtn .li6 i{background-position:center -508px;}
.hdIconsBtn .li2 a{background:#80A7EE}
.hdIconsBtn .li3 a{background:#78BDE8}
.hdIconsBtn .li4 a{background:#F78449; line-height:20px;}
.hdIconsBtn .li5 a{background:#FC6767}
.hdIconsBtn .li6 a{background:#90D856}
.hdIconsBtn .li6 .pic{display:none; text-align:center;}
.hdIconsBtn .li6 .pic img{height:110px; width:96px;}
.hdIconsBtn .on a{display:none;}
.hdIconsBtn .on .pic{display:block;}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    /* 1. 基础布局重置 */
    .content,
    .content-btm,
    .content-btm .btm-left,
    .content-btm .btm-right,
    .content-center,
    .content-center .interview,
    .content-center .review,
    .content-top,
    .content-top .email-tab,
    .content-top .email-con,
    .content-top .email-s {
        width: 100% !important;
        max-width: 100vw !important; /* 强制最大宽度不能超过屏幕 */
        box-sizing: border-box !important;
    }
    
    .content {
        padding: 10px !important;
        border: none !important;
    }
    
    /* 2. 顶部区域：电子信箱与快捷入口 */
    .content-top {
        height: auto !important;
    }
    .content-top .email-tab {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        margin-left: 0 !important;
    }
    .content-top .email-con {
        width: 100% !important;
        height: auto !important;
        padding: 10px !important;
        box-sizing: border-box;
    }
    /* 隐藏信件编号，节省空间给内容和状态 */
    .content-top .email-con .con-title .bianhao,
    .content-top .email-con .email-list li .bianhao {
        display: none !important;
    }
    .content-top .email-con .con-title .neir,
    .content-top .email-con .email-list li .neir {
        width: 60% !important;
    }
    .content-top .email-con .con-title .tim,
    .content-top .email-con .email-list li .tim,
    .content-top .email-con .con-title .zt,
    .content-top .email-con .email-list li .zt {
        width: 20% !important;
    }
    
    .content-top .email-s {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        margin-right: 0 !important;
        margin-top: 15px;
    }
    .hdIconsBtn {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .hdIconsBtn li {
        width: 49% !important; /* 一排两个 */
        height: 60px !important;
        margin:0 0 15px 0 !important;
    }
    .hdIconsBtn li a {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important; /* 改为上下排列，给图标留出空间 */
        align-items: center;
        justify-content: center;
        line-height: normal !important;
        padding: 5px !important;
    }
    .hdIconsBtn li i {
        display: block !important;
        width: 100% !important;
        height: 35px !important; /* 缩小图标高度 */
        background-size: auto 300px !important; /* 缩小背景图比例，防止图标过大 */
        background-position-x: center !important;
        margin-bottom: 5px;
    }
    
    /* 调整背景图标位置以适应缩小后的背景图 */
    .hdIconsBtn .li1 i { background-position-y: -10px !important; }
    .hdIconsBtn .li3 i { background-position-y: -110px !important; }
    .hdIconsBtn .li4 i { background-position-y: -160px !important; }
    .hdIconsBtn .li5 i { background-position-y: -210px !important; }
    
    .hdIconsBtn li.stat {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important; /* 改为从左到右排列 */
        padding: 10px 5px !important;
        box-sizing: border-box !important;
    }
    .hdIconsBtn li.stat span {
        width: 50% !important; /* 严格平分一半 */
        margin-bottom: 5px !important;
        float: none !important;
        font-size: 13px !important;
        line-height: 25px !important;
        text-align: left !important; /* 统一靠左对齐更整齐 */
        padding-left: 10px !important; /* 左侧留点空隙 */
        display: block !important;
        box-sizing: border-box !important;
    }

    /* 3. 中间区域：在线访谈与12345 */
    .content-center {
        height: auto !important;
        display: flex;
        flex-direction: column;
    }
    .content-center .interview {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        margin-left: 0 !important;
        margin-bottom: 15px;
    }
    .content-center .interview .view-box {
        display: flex;
        flex-direction: column;
        padding: 10px;
    }
    .content-center .interview .view-box .view-img,
    .content-center .interview .view-box .view-con {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
    }
    .content-center .interview .view-box .view-img img {
        width: 100% !important;
        height: auto !important;
    }
    
    .content-center .review {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        margin-right: 0 !important;
        padding-bottom: 10px;
    }

    /* 4. 知识库图片 */
    .zsk img {
        width: 100% !important;
        height: auto !important;
    }

    /* 5. 底部区域：民意征集与网上调查 */
    .content-btm {
        height: auto !important;
        display: flex;
        flex-direction: column; /* 模块本身上下堆叠，否则列表空间太小 */
    }
    .content-btm .btm-left,
    .content-btm .btm-right {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 15px;
    }
    .content-btm .btm-left-content {
        height: auto !important;
    }
    
    /* 列表数据一横排显示，使用更优雅的 Flex 布局 */
    .content-btm .btm-left-content .btmLeft-item li,
    .content-btm .btm-right ul li {
        height: auto !important;
        line-height: 1.5 !important;
        padding: 12px 10px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        /* border-bottom: 1px dashed #eee; 添加底部虚线分割，更美观 */
    }
    
    /* 标题部分，让它占据剩余的所有空间，但不挤压右侧 */
    .content-btm .btm-left-content .btmLeft-item li > a:first-of-type,
    .content-btm .btm-right ul li > a:first-of-type {
        flex: 1 1 auto !important; /* 允许放大和缩小 */
        width: 0 !important; /* 配合 flex:1 解决文本溢出问题 */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin-bottom: 0 !important;
        padding-right: 10px !important; /* 给右侧状态留出间距 */
        font-size: 14px !important;
    }
    
    /* 右侧的状态和反馈，作为一个整体 */
    .content-btm .btm-left-content .btmLeft-item li span,
    .content-btm .btm-right ul li span {
        flex: 0 0 auto !important; /* 不允许被压缩 */
        float: none !important;
        margin: 0 !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        /* color: #888; */
    }
    
    /* 针对民意征集右侧有两个元素（查看反馈、状态）的情况 */
    .content-btm .btm-left-content .btmLeft-item li > a:not(:first-of-type) {
        flex: 0 0 auto !important; /* 查看反馈链接也不允许被压缩 */
        margin-right: 8px !important; /* 状态和反馈之间的间距 */
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    
    .content-btm .btm-left-content .btmLeft-item li > a:not(:first-of-type) span {
        /* color: #1f89e1 !important; 突出显示“查看反馈” */
    }
    
    /* 隐藏不必要的小图标，让排版更干净 */
    .content-btm .btm-left-content .btmLeft-item li i,
    .content-btm .btm-right ul li i {
        display: none !important;
    }
}