@charset "utf-8";

/* ============================================================
   主动公开页面（GK-主动公开.html）响应式样式
   独立文件，不与 gk-active-disclosure.css 耦合
   依赖：gk-active-disclosure.css（在它之后加载）
   断点：
     - 平板及以下   <= 991px   page-con 改为纵向
     - 手机          <= 767px   进一步压缩间距 / 字号
     - 小屏手机      <= 480px   树状菜单缩进与字号再压缩
   ============================================================ */

/* =========================================================
   1) 通用：避免在窄屏出现横向滚动条
   ========================================================= */
.page-body,
.page-con,
.xxgk-nav,
.xxgk-right,
.xxgk-box,
#treeContainer,
#xzql {
	box-sizing: border-box;
}

/* =========================================================
   2) 平板及以下：page-con 由两栏转纵向
   ========================================================= */
@media (max-width: 991px) {

	/* 取消两侧浮，让 flex 接管 */
	.xxgk-nav.fl,
	.xxgk-right.fr {
		float: none;
		display: block;
		width: 100%;
	}

	/* page-con 改为纵向 flex 容器 */
	.page-con.clearfix {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 0 16px 30px;
		/* 父容器是 page-body，宽度 100% 即可 */
	}

	/* 阻止 .clearfix::after 的占位 "." 变成 flex item 干扰布局 */
	.page-con.clearfix::after {
		content: none;
	}

	/* 顺序：左侧导航在上，右侧内容在下 */
	.xxgk-nav {
		order: 1;
		margin-bottom: 16px;
	}
	.xxgk-right {
		order: 2;
	}

	/* 头部背景在小屏下适当压缩 */
	.header-bg {
		height: auto;
		background-size: cover;
	}
	.header-con {
		width: 100%;
		height: auto;
		padding: 0 16px;
		box-sizing: border-box;
	}

	/* 自适应：隐藏 header-top（顶部 logo 区） */
	.header-top {
		display: none;
	}

	/* 自适应：page-body 取消负 margin，紧跟头部 */
	.page-body {
		margin-top: 0;
	}

	/* 标题大图（政府信息公开）随屏幕缩放
	   桌面原图约 540~600px，因此 max-width 设 600 防止拉大糊；
	   767px 以下则填满容器 */
	.header-tit {
		padding: 16px 0;
	}
	.header-tit > img {
		display: block;
		width: 60%;
		max-width: 600px;
		height: auto;
		margin: 0 auto;
	}

	/* 检索框缩小 */
	.sosu {
		height: 40px;
	}

	/* 右侧内容：iframe 自适应宽度 */
	.xxgk-box {
		width: 100%;
		max-width: 100%;
		padding: 0 8px;
		max-height: unset;
	}
	.xxgk-box iframe {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 9;
		min-height: 360px;
	}
	.kaung {
		display: none;
	}

	/* =========================================================
	   法定主动公开内容 treeContainer：纵向布局下的"友好"处理
	   策略：横向滚动 + 右侧渐变阴影 + 自定义滚动条 + 高度限制
	   ========================================================= */
	#xxgk-left {
		background-color: #fff;
		border-radius: 4px;
		overflow: hidden;
	}

	/* 树容器：限制最大高度，超出内部滚动；保留横向溢出 */
	#treeContainer.twoUl.TreeView {
		position: relative;
		max-height: 360px;       /* 防止首屏被树撑得过高 */
		overflow-x: auto !important;   /* 覆盖内联 overflow-y:visible */
		overflow-y: auto !important;   /* 内联 style="overflow-y:visible" */
		padding: 8px 0 18px;
		background-color: #fff;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;   /* Firefox */
		scrollbar-color: #b8c6d6 #f0f3f7;
	}

	/* 树容器：右侧渐变阴影，提示"还有内容"
	   实现：用 position:sticky 伪元素贴在内容右边缘，溢出时自然显露 */
	#treeContainer.twoUl.TreeView::after {
		content: "";
		position: absolute;
		top: 28px;            /* 避开顶部提示行 */
		right: 0;
		bottom: 0;
		width: 28px;
		pointer-events: none;
		background: linear-gradient(
			to right,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.95) 100%
		);
	}

	/* 树内容：不换行 + 最小宽度，触发横向滚动条 */
	#xzql.threeUl {
		min-width: max-content;
		padding-left: 0 !important;
		padding-bottom: 8px !important;  /* 覆盖内联 padding-bottom:30px */
		overflow: visible !important;     /* 覆盖内联 overflow-x:auto */
	}

	#xzql.threeUl > div,
	#xzql.threeUl a {
		white-space: nowrap;
	}

	/* 树节点在窄屏下压缩缩进与高度，减小横向总宽 */
	.TreeView div.Root,
	.TreeView div.RootOpened {
		width: auto;
		min-width: 220px;
		height: 40px;
		line-height: 40px;
		text-indent: 36px;
		margin-top: 4px;
		background-size: 18px 18px;
		background-position: 12px center;
	}
	.TreeView div.Folder,
	.TreeView div.FolderOpened {
		text-indent: 44px;
		line-height: 36px;
		background-size: 16px 16px;
		background-position: 14px center;
	}
	.TreeView div.Page {
		text-indent: 50px;
		line-height: 30px;
		background-size: 6px 6px;
		background-position: 22px center;
	}
	.TreeView div.Page a,
	.TreeView div.Folder a,
	.TreeView div.FolderOpened a {
		font-size: 15px;
	}

	/* webkit 滚动条样式 */
	#treeContainer.twoUl.TreeView::-webkit-scrollbar {
		height: 8px;
		width: 8px;
	}
	#treeContainer.twoUl.TreeView::-webkit-scrollbar-track {
		background: #f0f3f7;
		border-radius: 4px;
	}
	#treeContainer.twoUl.TreeView::-webkit-scrollbar-thumb {
		background: #b8c6d6;
		border-radius: 4px;
	}
	#treeContainer.twoUl.TreeView::-webkit-scrollbar-thumb:hover {
		background: #8fa6c0;
	}

	.page-con.clearfix {
		padding: 0 10px 24px;
	}

	.xxgk-nav {
		margin-bottom: 12px;
	}

	/* 左侧导航：2 列网格布局
	   左列纵向堆叠 5 个普通项，右列由法定主动公开内容 + 默认展开的树菜单占据，跨 5 行
	   文字均为"上下两行 4 字"（HTML 中已用 <br> 强制断行） */
	.leftNav > ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(5, auto);
		gap: 16px;
	}
	.leftNav .liBox {
		box-sizing: border-box;
	}
	/* 覆盖首个 li 上内联 style="margin-top:0"（grid gap 已统一间距） */
	.leftNav .liBox .navLi[style*="margin-top"] {
		margin-top: 0;
	}
	/* 法定主动公开内容：单独放第 2 列，跨 5 行 */
	.leftNav #xxgkgknr {
		grid-column: 2;
		grid-row: 1 / 6;
		align-self: start;
	}

	/* 默认展开 treeContainer（覆盖桌面端 default 隐藏逻辑） */
	.leftNav #xxgkgknr .twoUl.TreeView {
		display: block;
	}

	/* 导航单元：图标 + 2 行文字，垂直居中 */
	.leftNav .navLi {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 50px;
		padding: 6px 4px;
		margin-top: 0;
		overflow: hidden;
		text-align: center;
	}
	.leftNav .navLi a {
		flex: 1;
		min-width: 0;
		font-size: 24px;
		line-height: 1.4;
		margin-left: 26px;
		display: block;
		text-align: left;
	}
	.leftNav .navLi img {
		flex: 0 0 auto;
		width: 36px;
		margin: 0 0 0 20px;
	}
	.leftNav .navLi.slideToggle,
	.leftNav .navLi:hover,
	.leftNav .yes .navLi,
	.leftNav .yes .navLi.slideToggle {
		background-position: 92% center;
		background-image: none;
	}


}

/* =========================================================
   3) 手机：进一步压缩
   ========================================================= */
@media (max-width: 767px) {
	
	.leftNav > ul {
		gap: 8px;
	}
	/* 导航单元：图标 + 2 行文字，垂直居中 */
	.leftNav .navLi {
		min-height: 40px;
	}
	.leftNav .navLi a {
		font-size: 18px;
		margin-left: 14px;
	}
	.leftNav .navLi img {
		width: 32px;
		margin: 0 0 0 18px;
	}
	/* iframe 比例适配手机: 去掉 aspect-ratio,让高度跟随内容自然撑开
	   (嵌套页面内部已自适应用 auto 高度,这里设固定比会被裁) */
	.xxgk-box iframe {
		aspect-ratio: auto;
		min-height: 320px;
	}

	/* 树容器最大高度缩小，避免首屏失衡 */
	#treeContainer.twoUl.TreeView {
		max-height: 280px;
	}
}

/* =========================================================
   4) 小屏手机：树缩进再压缩
   ========================================================= */
@media (max-width: 480px) {

	/* 左侧导航：再压缩图标与字号，避免 320px 设备溢出 */
	.leftNav > ul {
		gap: 6px;
	}
	.leftNav .navLi {
		padding: 4px 2px;
		min-height: 32px;
	}
	.leftNav .navLi a {
		font-size: 16px;
		line-height: 1.3;
		margin-left: 16px;
	}
	.leftNav .navLi img {
		width: 24px;
		margin-left: 16px;
	}

	.TreeView div.Root,
	.TreeView div.RootOpened {
		min-width: 200px;
		height: 36px;
		line-height: 36px;
		text-indent: 30px;
	}
	.TreeView div.Folder,
	.TreeView div.FolderOpened {
		text-indent: 36px;
		line-height: 32px;
	}
	.TreeView div.Page {
		text-indent: 42px;
		line-height: 28px;
	}
	.TreeView div.Page a,
	.TreeView div.Folder a,
	.TreeView div.FolderOpened a {
		font-size: 14px;
	}

	.xxgk-box iframe {
		min-height: 260px;
	}
}