@charset "UTF-8";
/*!
 * 顶部导航栏 · 「产品中心」下拉菜单
 * 文件：template/default/css/z_nav_dropdown.css
 * 站点：http://www.aquaclean.com.cn/
 *
 * 作用：只为桌面端顶部导航的「产品中心」增加悬停下拉，列出全部产品。
 *      其余栏目（关于我们 / 新闻中心 / 人才战略 / 联系我们）不带下拉，保持原样。
 * 断点：> 980px 生效。移动端（<=980px）沿用模板原有的 .z_menu_warp 全屏菜单，
 *      本文件不影响它，head.html 里那部分代码也一字未改。
 * 依赖：css/style.min.css 中的 .z_header / .z_header_nav 基础样式。
 */


/* ============================================================
   1. 一级菜单项：建立下拉面板的定位基准
   ============================================================ */
.z_header .z_header_nav>ul>li.z_nav_item {
	position: relative;
}

.z_header .z_header_nav .z_nav_a {
	position: relative;
	white-space: nowrap;
}


/* ============================================================
   2. 下拉箭头
   ------------------------------------------------------------
   箭头 <i> 每个一级菜单项里都有，但默认不显示；
   只有「含下拉面板」的项才显示 —— 也就是只有产品中心。
   z_has_sub 由 z_nav_dropdown.js 自动加上；
   下面这条 :has() 规则负责在脚本执行前就先画出来（不支持 :has() 的浏览器会忽略它）。
   ============================================================ */
.z_header .z_header_nav .z_nav_arrow {
	display: none;
	width: 0;
	height: 0;
	margin-left: 7px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	vertical-align: middle;
	position: relative;
	top: -1px;
	opacity: .8;
	-webkit-transition: -webkit-transform .3s ease, opacity .3s ease;
	transition: transform .3s ease, opacity .3s ease;
	pointer-events: none;
}

.z_header .z_header_nav li.z_has_sub .z_nav_arrow {
	display: inline-block;
}

/* 单独成条书写：一旦浏览器不支持 :has()，只丢弃这一条，不影响上面的规则 */
.z_header .z_header_nav li:has(> .z_dropdown) .z_nav_arrow {
	display: inline-block;
}

/* 悬停 / 展开时箭头翻转 */
.z_header .z_header_nav li:hover>.z_nav_a .z_nav_arrow,
.z_header .z_header_nav li.z_open>.z_nav_a .z_nav_arrow {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	opacity: 1;
}


/* ============================================================
   3. 下拉面板容器
   ============================================================ */
.z_header .z_header_nav .z_dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 99;
	padding-top: 10px;
	/* 上面 10px 是“悬停缓冲区”：面板视觉上与导航留一点缝，
	   但这段留白仍属于面板盒子，鼠标从菜单滑到面板途中不会闪断。 */
	visibility: hidden;
	opacity: 0;
	text-align: left;
	-webkit-transition: opacity .28s ease, visibility .28s ease;
	transition: opacity .28s ease, visibility .28s ease;
	/* 注意：这里刻意不用 pointer-events:none。
	   隐藏时 visibility:hidden 本身就不参与点击命中，
	   而显示后整块面板（含 10px 缓冲区）都可命中，
	   鼠标经过缓冲区时 li:hover 才不会被判为离开。 */
}

/* 鼠标悬停，或触摸设备上由 JS 加上 z_open */
.z_header .z_header_nav li:hover>.z_dropdown,
.z_header .z_header_nav li.z_open>.z_dropdown {
	visibility: visible;
	opacity: 1;
}

.z_header .z_header_nav .z_dropdown_inner {
	position: relative;
	min-width: 208px;
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 170px);
	padding: 10px 0;
	background: #fff;
	border-top: 3px solid #17609a;
	/* 用上边框做品牌色装饰条：它不会跟着内容滚动，比绝对定位的 ::before 稳 */
	border-radius: 8px;
	overflow-x: hidden;
	overflow-y: auto;
	/* 产品多的时候可以滚动，避免面板超出屏幕（顶部装饰条不受影响） */
	box-shadow: 0 16px 38px rgba(9, 40, 68, .18);
	opacity: 0;
	-webkit-transform: translateY(-8px);
	transform: translateY(-8px);
	-webkit-transition: opacity .28s ease, -webkit-transform .28s ease;
	transition: opacity .28s ease, transform .28s ease;
}

.z_header .z_header_nav li:hover>.z_dropdown .z_dropdown_inner,
.z_header .z_header_nav li.z_open>.z_dropdown .z_dropdown_inner {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

/* 面板滚动条做细一点，别太抢眼 */
.z_header .z_header_nav .z_dropdown_inner::-webkit-scrollbar {
	width: 6px;
}

.z_header .z_header_nav .z_dropdown_inner::-webkit-scrollbar-thumb {
	background: #ccd6e0;
	border-radius: 3px;
}

.z_header .z_header_nav .z_dropdown_inner::-webkit-scrollbar-track {
	background: transparent;
}


/* ============================================================
   4. 下拉菜单项（竖排，与底部导航的产品列表保持一致）
   ------------------------------------------------------------
   说明：style.min.css 里存在这些会“污染”下拉链接的规则 ——
     .z_header a                            { color:#fff }
     .z_header.on .z_header_nav li a        { color:#000 }
     .z_header.on .z_header_nav li:hover a  { color:#17609a; font-weight:bold }
     .z_header .z_header_nav a::before      { 白色下划线动画 }
   其中 `.z_header.on .z_header_nav li:hover a` 权重是 (0,4,2)，
   所以下面统一用 5 个 class 的选择器 (0,5,0) 来稳压它。
   ============================================================ */
.z_header .z_header_nav .z_dropdown_item {
	position: relative;
	display: block;
}

.z_header .z_header_nav .z_dropdown .z_dropdown_item .z_dropdown_a {
	display: block;
	position: relative;
	padding: 0 24px;
	line-height: 42px;
	font-size: 15px;
	font-weight: normal;
	color: #333;
	text-align: left;
	white-space: normal;
	word-break: break-word;
	background: transparent;
	-webkit-transition: color .25s ease, background .25s ease;
	transition: color .25s ease, background .25s ease;
}

/* 干掉基础样式给导航链接加的白色下划线动画 */
.z_header .z_header_nav .z_dropdown .z_dropdown_item .z_dropdown_a::before {
	content: none;
	display: none;
}

/* 左侧品牌色指示条 */
.z_header .z_header_nav .z_dropdown .z_dropdown_item .z_dropdown_a::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 18px;
	background: #17609a;
	-webkit-transform: translateY(-50%) scaleY(0);
	transform: translateY(-50%) scaleY(0);
	-webkit-transition: -webkit-transform .25s ease;
	transition: transform .25s ease;
}

.z_header .z_header_nav .z_dropdown .z_dropdown_item .z_dropdown_a:hover {
	color: #17609a;
	background: #f2f7fc;
}

.z_header .z_header_nav .z_dropdown .z_dropdown_item .z_dropdown_a:hover::after {
	-webkit-transform: translateY(-50%) scaleY(1);
	transform: translateY(-50%) scaleY(1);
}

/* 当前正在浏览的产品高亮 */
.z_header .z_header_nav .z_dropdown .z_dropdown_item.active .z_dropdown_a {
	color: #17609a;
	font-weight: bold;
	background: #f2f7fc;
}


/* ============================================================
   5. 移动端（<= 980px）防御性关闭
   ------------------------------------------------------------
   .z_header_nav 在移动端本来就是 display:none，这里再兜一层，
   防止以后调整断点时下拉面板意外露出来。
   ============================================================ */
@media screen and (max-width: 980px) {
	.z_header .z_header_nav .z_dropdown {
		display: none;
	}
}


/* ============================================================
   6. 以后想给别的栏目也加下拉怎么办
   ------------------------------------------------------------
   在 head.html 的 <li> 里，把「只有产品中心」那个 {pboot:if} 判断放开即可，
   例如给「关于我们」加子栏目下拉：

     {pboot:2if('[nav:soncount]')}
     <div class="z_dropdown">
         <div class="z_dropdown_inner">
             {pboot:2nav parent=[nav:scode]}
             <div class="z_dropdown_item"><a href="[2nav:link]" class="z_dropdown_a">[2nav:name]</a></div>
             {/pboot:2nav}
         </div>
     </div>
     {/pboot:2if}

   注意两条 PbootCMS 硬性规则（踩过坑，务必遵守）：
   1. {pboot:2if} / {pboot:2nav} 这类带序号的标签，必须写在 {pboot:if} / {pboot:nav}
      的内容里，不能独立出现在 class 属性之类的位置，否则原始标签会漏到页面上。
   2. 一个 {pboot:if}...{/pboot:if} 里最多只能有一个 {else}，嵌套的 2if 不要带 else。
   ============================================================ */