/* 新增：全局容器样式 */
.page-container {
    /*max-width: 720px; !* 基础宽度720px *!*/
    /*width: 100%; !* 小屏时占满屏幕 *!*/
    /*margin: 0 auto; !* 水平居中 *!*/
    background-color: #f1f1f1; /* 继承body背景色，避免边缘留白 */
    font-size: 28px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    /*padding: 0 30px; !* 基础内边距，防止内容贴边 *!*/
    /*box-sizing: border-box;*/
}

/* 基础样式（可根据需求补充CSS） */
body {
    margin: 0;
    background-color: #f1f1f1;
    font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑", sans-serif;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to right, #00b4d8, #ffffff);
}


.search-bar {
    display: flex;
    align-items: center;
    margin: 20px;
    padding: 20px;
    background: #ffffff;
    border-radius: 5px;
    height: 28px;
}
.search-bar img{
    width: 28px;
    /*margin-left: 24px;*/
}

.search-bar input {
    flex: 1;
    border: none;
    outline: none;
    margin-left: 20px;
    /*font-size: 24px;*/
    /*padding: 15px;*/
}
.hot-issues {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin: -20px 20px 0 20px;
    border-radius: 5px;
    background-color: #ffffff;
    z-index: 1000;
    position: relative;
}
.hot-issues .title {
    width: 72px;
    padding: 10px;
    display: flex;
    align-items: center;
}
.hot-issues .title img{
    width: 100%;
}

.hot-issues .content {
    flex: 1;
    /*color: #000000;*/
    /*font-size: 24px;*/
    height: 100px;
    overflow: hidden;
    position: relative;

}
.hot-issues .content ul {
    list-style: none; /* 移除默认列表样式 */
    padding-left: 0; /* 左侧留白，避免圆点溢出 */
    margin: 0; /* 调整上下外边距 */
    position: absolute;
    top: 0 ;
    left: 0;
    width: 100%;
    transition: transform 0.5s linear; /* 平滑过渡动画 */
}
.hot-issues .content ul li {
    /*position: relative;*/
    padding-left: 18px; /* 为自定义圆点预留空间 */
    /*margin-bottom: 6px; !* 列表项之间的间距 *!*/
    height: 50px;
    line-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    margin-bottom: 0;
    box-sizing: border-box;
}
.hot-issues .content ul li::before {
    content: '•'; /* 圆点字符 */
    position: absolute;
    left: 0;
    /*font-size: 24px; !* 圆点大小（比文字小） *!*/
    color: #b2b2b2; /* 圆点颜色（灰色示例，可修改为其他值） */
    line-height: 1.5; /* 垂直居中对齐文字 */
}


.hot-issues .more {
    /*font-size: 24px;*/
    color: #afaeaf;
    width: 72px;
    background-color: #f9f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /*height: 100%;*/
    border-radius: 0 5px 5px 0;
}
.hot-issues .more img{
    width: 28px;
}
.hot-issues .more span{
    margin-bottom: 5px;
}


.service-items {
    width: calc(100% - 60px);
    margin: 0 auto;
    padding: 0;
}

.items-list {
    position: relative;
    height: 210px;
    width: 500px;
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    background: url(/m/assets/img/indexNew/gr_dbg.png) no-repeat left;
}

.service-items .item {
    /*display: flex;*/
    /*flex-direction: row; !* 图标和文字垂直排列 *!*/
    /*align-items: center; !* 居中对齐 *!*/
    /*flex: 0 0 40%; !* 每行显示2个，预留间距 *!*/
    text-align: center; /* 文字居中 */
    margin-left: 20px;
    width: 220px;
    float: left;
    height: 100px;
}
.service-items .item img {
    width: 48px;
    height: 48px;
    margin-right: 10px;
}
.service-items .item p {
    /*font-size: 14px; !* 缩小字体确保两行显示 *!*/
    margin-top: 8px;
    line-height: 1.5; /* 调整行高 */
}
.service-items .item-gr {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    top: 0;
    bottom: 0;
    right: 20px;
    width: 180px; /* 根据背景图实际尺寸调整 */
    height: auto;
    background: url("/m/assets/img/indexNew/g_bg.png") no-repeat center center;
    background-size: contain;
    gap: 5px;
    z-index: 10;
    position: absolute;
}

.service-items .item-qy {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    top: 0;
    bottom: 0;
    right: 20px;
    width: 180px; /* 根据背景图实际尺寸调整 */
    height: auto;
    background: url("/m/assets/img/indexNew/gs_bg.png") no-repeat center center;
    background-size: contain;
    gap: 5px;
    z-index: 10;
    position: absolute;
}

.item-gr img{
    width: 36px;
    margin-top: 28px;
}
.item-gr p{
    /*font-size: 14px;*/
     width: 70px;
    color:#abd0f4;
    margin-top: 28px;
    margin-left: 10px;
}

.item-qy img{
    width: 36px;
    margin-top: 28px;
}
.item-qy p{
    width: 70px;
    color:#a5dee0;
    margin-top: 28px;
    margin-left: 10px;
}











.popular-issues {
    margin: 20px;
    /*width: 100%;*/
}
.popular-issues .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    /*padding: 0 10px;*/
}
.popular-issues .title .more {
    /*font-size: 14px;*/
    color: #a0a0a0;
    width: auto;
    font-weight: normal;
    /*margin-right: 10px;*/
}
.popular-issues .title span:first-of-type{
    flex: 1;
    white-space: nowrap;
    font-size: 32px;
}
.popular-issues .title img{
    width: 32px;
    margin-right: 5px;
}

.popular-issues .list{
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    background-color: #ffffff;
}


.popular-issues .item {
    display: flex;
    align-items: center;
    padding: 20px 0;
    margin:0 20px;
    border-bottom: 1px dashed #cccccc;
}
.popular-issues .item .rank {
    width: 60px;
    height: 48px;
    color: #ffffff;
    /*font-size: 14px;*/
}
.rank img{
    width: 48px;
}

.popular-issues .item .content {
    flex: 1;
}
.popular-issues .item .content p {
    font-size: 28px;
    margin: 0;
}
.popular-issues .item .content span {
    font-size: 22px;
    color: #666666b3;
}
.popular-issues .item .button img{
    width: 134px;
}
.popular-issues .item:last-child {
    border-bottom: none;
}
.popular-issues .item:nth-child(2) {
    margin-top:10px;
    margin-bottom: 10px;
}

.footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    background: #ffffff;
}
.footer .item {
    text-align: center;
}
.footer .item img {
    width: 30px;
    height: 30px;
}
.footer .item p {
    font-size: 14px;
}
.service-online{
    margin: 20px 20px 10px 20px;
    /*width: 100%;*/
}
.service-online .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*font-size: 24px;*/
    font-weight: bold;
    /*padding: 0 10px;*/
}
.service-online .title img{
    width: 32px;
    margin-right: 5px;
}

.service-online .title span:first-of-type {
    flex: 1; /* 占满图标和"更多"之间的空间 */
    white-space: nowrap; /* 防止文字换行 */
    font-size: 32px;
}


.service-online .title .more{
    /*font-size: 14px;*/
    color: #a0a0a0;
    width: auto;
    font-weight: normal;

}

.items-container{
    width: 100%;
    height: 100%;
    position: relative;
    padding: 10px 0;
}

.items-container-qy{
    width: 100%;
    height: 100%;
    position: relative;
    padding: 10px 0;
}

.items-container-qy .items-list {
    /*width: 100%; !* 与个人事项列表保持一致 *!*/
    background: url(/m/assets/img/indexNew/gs_dbg.png) no-repeat left;
}

.more{
    cursor: pointer;
}
.item-qy{
    cursor: pointer;
}
.item-gr {
   cursor: pointer;
}

.item-bg{
    width: 20px;
    height: auto;
    margin: 10px 0;
    background-color: #ffffff;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
}




/* 网办事项容器 - 左右边距30px（总60px） */
.service-items {
    width: calc(100% - 40px); /* 100%宽度减去左右30px边距 */
    margin: 0 auto; /* 居中 */
    padding: 0 0 10px 0;
}

/* 个人/企业事项容器 - 背景图处理 */
.items-container, .items-container-qy {
    width: 100%; /* 与service-items同宽 */
    background: url(/m/assets/img/indexNew/gr_dbg.png) no-repeat center; /* 背景图居中 */
    background-size: 600px auto; /* 保持600px宽背景图 */
    background-color: #f1f1f1; /* 背景图两侧补白 */
    position: relative;
    min-height: 145px; /* 基础高度，可根据内容调整 */
    box-sizing: border-box;
}

/* 事项列表 - 自适应排列 */
/*.items-list {*/
/*    display: flex; !* 使用flex布局 *!*/
/*    flex-wrap: wrap; !* 超出自动换行 *!*/
/*    padding: 10px;*/
/*    gap: 15px; !* 项目间距 *!*/
/*}*/

/* 单个事项 - 响应式宽度 */
/*.items-list .item {*/
/*    flex: 1; !* 平均分配空间 *!*/
/*    min-width: 80px; !* 最小宽度，防止过窄 *!*/
/*    max-width: 120px; !* 最大宽度，防止过宽 *!*/
/*    text-align: center;*/
/*}*/

/* 右侧"更多"按钮 - 相对定位 */
/*.item-gr, .item-qy {*/
/*    position: absolute;*/
/*    right: 10px; !* 右侧边距10px *!*/
/*    top: 50%;*/
/*    transform: translateY(-50%); !* 垂直居中 *!*/
/*    width: 100px; !* 按钮基础宽度 *!*/
/*}*/

/* 搜索栏输入框 - 响应式字体 */
.search-bar input {
    font-size: clamp(16px, 4vw, 24px); /* 最小16px，最大24px，按屏幕宽度比例 */
}

/* 媒体查询 - 小屏幕适配（<720px） */
/*@media (max-width: 720px) {*/
/*    .service-items {*/
/*        width: calc(100% - 40px); !* 小屏幕减小边距为20px *!*/
/*    }*/

/*    .items-list .item {*/
/*        min-width: 70px; !* 更小屏幕调整项目最小宽度 *!*/
/*    }*/

/*    .item-gr, .item-qy {*/
/*        width: 80px; !* 小屏幕缩小按钮宽度 *!*/
/*    }*/
/*}*/


.section-footer{
    width: 100%;
    height: 200px;
    font-size: 28px;
    line-height: 40px;
    text-align: center;
    color: #999999;
}
.indexNewContent{
    /*min-height: calc(100% - 288px)*/
    margin: 0 15px;
}
.indexNewContent .section-footer:after{
    content: '';
    width: 100%;
    height: 270px;
}



/*demo*/
.item .icon{
    width: 50px;
    float: left;
    margin-top: 25px;
}
.item .text{
    float: left;:
    margin:0 0 0 10px;
    /*line-height: 1.2;*/
    margin: 15px 0;
    width: 170px;
}