/* ==========================================================================
   锐客网 · 全站顶部导航改版 v3（2026-11-02）
   独立文件，不并入 rk.css —— 便于单独回退 / 单独调参。
   加载顺序：在 rk.css 之后（css.htm）。

   v3 改动：
   1) 二级面板改「通栏」：.rn-drop-layer 挂在 .main-header 下，
      left:0;right:0 = viewport 口径铺满，左右不留缝（旧版是 600px 居中小卡）
   2) 面板内容形态对齐参考区块：左标题区（大标题+说明+示意图）
      + 右侧图标网格条目（图标 + 名称 + 简介），4 列 / 6 列自适应
   3) 消灭 hover 串菜单 bug：面板不再叠在 li 里，显隐由 JS 类名驱动
   ========================================================================== */

/* ---------- 0. 头部栅格：logo 在左，导航 + 电话作为一组靠右 ---------- */
.header > .container-fluid{justify-content:flex-start !important;}

/* 面板层默认收起（不占位、不拦截鼠标）
   注意：不能用 height:0 + overflow:hidden —— 会把展开的面板裁掉；
   靠 visibility/opacity/pointer-events 控制，收起时子元素 display:none 自然不占高度 */
.rn-drop-layer{
	position:absolute;
	left:0;
	right:0;
	top:var(--rn-drop-top,96px);
	z-index:130;
	visibility:hidden;
	opacity:0;
	pointer-events:none;
	transition:opacity .22s ease,visibility .22s;
}
.main-header.rn-drop-active .rn-drop-layer{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}

@media (min-width:1201px){

/* 导航整体靠右，电话紧邻其后 */
.main-header .popup-mobile-menu{margin-left:auto;}

/* 一级导航项：字号 / 字距 / 内距微调（hover 仅变色，去掉底部橙条） */
.main-header .popup-mobile-menu .mainmenu > li > a{
	padding:11px 0 11px 24px;
	font-size:15px;
	font-weight:600;
	letter-spacing:.02em;
	transition:color .26s ease;
}
.main-header .popup-mobile-menu .mainmenu > li:first-child > a{padding-left:0;}
.main-header .popup-mobile-menu .mainmenu > li:hover > a{
	color:#f0780c;
}
/* 透明浮头态：rk.css 里 "白字" 规则特异性更高，这里同结构覆盖，hover 才变橙 */
body:has(.index_banner, .banner_info, .so-banner) .main-header .popup-mobile-menu .mainmenu > li:hover > a,
.main-header.over-banner .popup-mobile-menu .mainmenu > li:hover > a{color:#f0780c;}
.main-header .popup-mobile-menu .mainmenu > li > a .dropdown-indicator{
	font-size:10px;
	opacity:.5;
	transition:transform .26s ease,opacity .26s ease;
}
.main-header .popup-mobile-menu .mainmenu > li:hover > a .dropdown-indicator{
	transform:rotate(180deg);
	opacity:1;
}
/* 面板打开时，一级菜单项保持橙（提示当前所在栏目） */
.main-header.rn-drop-active .popup-mobile-menu .mainmenu > li:hover > a{color:#f0780c;}

/* ---------- 电话区 ---------- */
.main-header .phone{
	display:flex;
	align-items:center;
	flex:0 0 auto;
	margin-left:26px;
	padding-left:22px;
	border-left:1px solid rgba(19,26,38,.10);
	white-space:nowrap;
}
.main-header .phone .rk-tel-ico{
	width:34px;height:34px;flex:0 0 34px;
	border-radius:50%;
	display:inline-flex;align-items:center;justify-content:center;
	background:rgba(240,120,12,.10);
	color:#f0780c;
	font-size:13px;
	transition:background .26s ease,color .26s ease;
}
.main-header .phone:hover .rk-tel-ico{background:#f0780c;color:#fff;}
.main-header .phone .rk-tel-box{margin-left:10px;line-height:1.2;}
.main-header .phone .rk-tel-box p{
	margin:0;
	font-size:11px;
	letter-spacing:.08em;
	opacity:.72;
}
.main-header .phone .rk-tel-box h2{
	margin:3px 0 0;
	font-family:"DINPro-Bold","DIN Alternate","Helvetica Neue",Arial,sans-serif;
	font-size:22px;
	font-weight:700;
	letter-spacing:.01em;
	line-height:1.1;
}

/* 透明浮头态：分隔线 / 图标转金橙 */
body:has(.index_banner, .banner_info, .so-banner) .main-header .phone,
.main-header.over-banner .phone{border-left-color:rgba(255,255,255,.22);}
body:has(.index_banner, .banner_info, .so-banner) .main-header .phone .rk-tel-ico,
.main-header.over-banner .phone .rk-tel-ico{background:rgba(255,182,87,.18);color:#ffb657;}
body:has(.index_banner, .banner_info, .so-banner) .main-header .phone:hover .rk-tel-ico,
.main-header.over-banner .phone:hover .rk-tel-ico{background:#f0780c;color:#fff;}
/* 滚动态：回到深色系 */
body:has(.index_banner, .banner_info, .so-banner) .main-header.scrolled .phone,
.main-header.over-banner.scrolled .phone{border-left-color:rgba(19,26,38,.10);}
body:has(.index_banner, .banner_info, .so-banner) .main-header.scrolled .phone .rk-tel-ico,
.main-header.over-banner.scrolled .phone .rk-tel-ico{background:rgba(240,120,12,.10);color:#f0780c;}

/* ---------- 通栏面板本体 ----------
   注意：面板必须是 position:relative（参与文档流），
   否则绝对定位不撑起 .rn-drop-layer 的高度，layer 高 0 -> 面板看不见 */
.rn-drop{
	position:relative;
	left:0;
	right:0;
	top:0;
	display:none;
	background:#fff;
	border-top:1px solid #e8ebf0;
	box-shadow:0 22px 48px rgba(19,26,38,.13);
}
.rn-drop.is-on{display:block;}
/* 顶部金橙渐变细线（沿用全站语言） */
.rn-drop::before{
	content:"";
	position:absolute;
	left:0;right:0;top:-1px;
	height:2px;
	background:linear-gradient(90deg,#f0780c,#ffb657);
	z-index:3;
}

/* 面板内部：跟随站内容栅格居中 */
.rn-drop-inner{
	position:relative;
	display:flex;
	align-items:stretch;
	gap:48px;
	max-width:1414px;
	margin:0 auto;
	padding:30px 40px 32px;
	min-height:236px;
	max-height:var(--rn-drop-max,600px);
	overflow-y:auto;
	overflow-x:hidden;
}

/* 左侧标题区 */
.rn-drop-side{
	flex:0 0 300px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding-right:8px;
}
/* 右侧图标网格（整体垂直居中） */
.rn-drop-grid{
	flex:1 1 auto;
	min-width:0;
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:4px 0;
	align-content:center;
	align-self:center;
	border-left:1px solid #eef1f5;
}
.rn-drop-en{
	display:block;
	font-family:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
	font-size:11px;
	font-weight:700;
	letter-spacing:.22em;
	color:#f0780c;
	margin-bottom:12px;
}
.rn-drop-cn{
	display:block;
	font-size:36px;
	font-weight:800;
	line-height:1.16;
	letter-spacing:.01em;
	color:#131a26;
	margin-bottom:14px;
}
.rn-drop-desc{
	margin:0;
	font-size:14px;
	line-height:1.8;
	color:#6b7785;
	max-width:260px;
}
/* 示意图（当前未启用，保留样式备用） */
.rn-drop-fig{
	margin-top:20px;
	height:126px;
	border-radius:8px;
	background-size:cover;
	background-position:center;
	background-color:#f2f4f7;
}
.rn-drop-go{
	display:inline-flex;
	align-items:center;
	gap:7px;
	align-self:flex-start;
	margin-top:22px;
	padding:9px 20px;
	border-radius:999px;
	font-size:12.5px;
	font-weight:700;
	color:#fff;
	background:#f0780c;
	transition:gap .2s ease,background .2s ease;
}
.rn-drop-go i{font-size:10px;}
.rn-drop-go:hover{gap:12px;background:#d96a09;}

/* 桌面端隐藏 li 内的原始二级列表（内容已由 JS 搬进通栏面板） */
.main-header .popup-mobile-menu .mainmenu .has-droupdown .submenu{
	display:none !important;
}

.rn-cell{
	display:flex;
	align-items:flex-start;
	gap:13px;
	padding:13px 22px 13px 28px;
	min-width:0;
	transition:background .2s ease;
}
.rn-cell:hover{background:#f7f8fa;}
.rn-cell-ico{
	flex:0 0 38px;
	width:38px;height:38px;
	border-radius:9px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:#f4f6f9;
	color:#5a6472;
	font-size:15px;
	transition:background .2s ease,color .2s ease;
}
.rn-cell:hover .rn-cell-ico{background:#f0780c;color:#fff;}
.rn-cell-body{min-width:0;display:block;}
.rn-cell-t{
	display:block;
	font-size:14.5px;
	font-weight:700;
	line-height:1.45;
	color:#131a26;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.rn-cell-d{
	display:block;
	margin-top:4px;
	font-size:12px;
	line-height:1.62;
	color:#8e9aa8;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

/* 多列模式（> 12 项）：标题区改为顶部横条，网格整幅铺开 */
.rn-drop.is-wide .rn-drop-inner{
	display:block;
	padding:26px 40px 30px;
}
.rn-drop.is-wide .rn-drop-side{
	flex:none;
	display:block;
	padding:0 0 16px;
	margin-bottom:16px;
	border-bottom:1px solid #eef1f5;
}
.rn-drop.is-wide .rn-drop-en{
	display:inline-block;
	margin:0 14px 0 0;
	vertical-align:6px;
}
.rn-drop.is-wide .rn-drop-cn{
	display:inline-block;
	font-size:22px;
	margin:0;
	vertical-align:middle;
}
.rn-drop.is-wide .rn-drop-desc{
	display:inline-block;
	margin:0 0 0 16px;
	vertical-align:6px;
	max-width:none;
}
.rn-drop.is-wide .rn-drop-go{
	position:absolute;
	right:40px;
	top:24px;
	margin:0;
	padding:8px 18px;
}
.rn-drop.is-wide .rn-drop-grid{
	border-left:0;
	grid-template-columns:repeat(6,minmax(0,1fr));
}
.rn-drop.is-wide .rn-cell{padding:10px 14px 10px 8px;gap:10px;}
.rn-drop.is-wide .rn-cell-ico{flex:0 0 32px;width:32px;height:32px;font-size:13px;}
.rn-drop.is-wide .rn-cell-t{font-size:13.5px;}
.rn-drop.is-wide .rn-cell-d{font-size:11.5px;-webkit-line-clamp:1;}

}

/* 窄一点的桌面（1201~1399px）：导航项收紧 + 电话缩小，保证单行不换行、不溢出 */
@media (min-width:1201px) and (max-width:1399px){
.main-header .popup-mobile-menu .mainmenu > li > a{padding:10px 0 10px 15px;font-size:14.5px;}
.main-header .phone .rk-tel-box h2{font-size:19px;}
.main-header .phone .rk-tel-ico{width:30px;height:30px;flex-basis:30px;font-size:12px;}
.main-header .phone .rk-tel-box p{font-size:10px;}
.main-header .phone{margin-left:14px;padding-left:14px;}
.rn-drop-inner{padding:26px 28px 30px;gap:36px;}
.rn-drop-side{flex:0 0 268px;}
.rn-drop-cn{font-size:28px;}
.rn-drop-fig{height:126px;}
.rn-drop-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.rn-cell{padding:11px 14px 11px 18px;gap:11px;}
.rn-cell-ico{flex:0 0 34px;width:34px;height:34px;font-size:13.5px;}
.rn-cell-t{font-size:13.5px;}
.rn-cell-d{font-size:11.5px;}
.rn-drop.is-wide .rn-drop-side{flex:none;}
.rn-drop.is-wide .rn-drop-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
.rn-drop.is-wide .rn-cell{padding:9px 8px 9px 4px;gap:9px;}
.rn-drop.is-wide .rn-cell-ico{flex:0 0 29px;width:29px;height:29px;font-size:12px;}
.rn-drop.is-wide .rn-cell-t{font-size:12.5px;}
.rn-drop.is-wide .rn-cell-d{display:none;}
.rn-drop.is-wide .rn-drop-inner{padding:22px 28px 26px;}
.rn-drop.is-wide .rn-drop-go{right:28px;top:20px;}
}

/* ---------- 移动端（<=1200px）：沿用 rk.js 原有折叠逻辑 ---------- */
@media (max-width:1200px){
/* 电话区在移动端隐藏（沿用 rk.css 规则，此处兜底防止被上面的高优先级规则带出来） */
.main-header .phone{display:none !important;}

/* 移动端：logo 居左、汉堡导航按钮居右。
   覆盖全局 .header>.container-fluid{justify-content:flex-start!important}，
   否则 logo 与汉堡会一起贴左侧挤在一起。margin-left:auto 在 flex 里
   优先级高于容器的 justify-content，把汉堡顶到最右（中间 popup 为 fixed、
   phone 为 display:none，均不占流，故两端仅剩 logo 与汉堡） */
.main-header .hamberger-button{margin-left:auto;}

/* 移动端不显示通栏面板层 */
.rn-drop-layer{display:none !important;}

/* 二级列表还原为 rk.css 的折叠样式（覆盖 v2 期间的 rn-mega 规则）
   注意：必须保留左侧缩进（rk.css 用 padding-inline-start:14px），
   否则移动端二级项会顶格对齐一级项，看不出层级 */
.main-header .popup-mobile-menu .mainmenu .has-droupdown .submenu{
	display:none;
	position:static;
	left:auto;
	top:auto;
	margin:0;
	padding:0 0 0 14px;
	max-width:100%;
	background:none;
	box-shadow:none;
	border-radius:0;
	opacity:1;
	visibility:visible;
	transform:none;
	transition:none;
	list-style:none;
}
/* 二级项本身：去掉 rk.css 给一级 li 的分隔线，改用左缩进表达层级 */
.main-header .popup-mobile-menu .mainmenu .has-droupdown .submenu li{
	border-top:0 !important;
	padding:2px 0;
}
.main-header .popup-mobile-menu .mainmenu .has-droupdown .submenu li a{
	font-size:13.5px;
	font-weight:400;
	color:#7b8593;
	padding:8px 12px;
	border-radius:6px;
}
.main-header .popup-mobile-menu .mainmenu .has-droupdown .submenu li a:hover{
	background:#f4f6f9;
	color:#f0780c;
}
}