/* ============================================================
   公共顶部 banner —— 与 phpcms/templates/default/content/header_content.html 配对
   命名沿用本站 header_min.html ↔ header_min.css 的惯例：样式跟着模板走，
   页面只要 {template "content","header_content"} 即可拿到完整的顶部导航+banner。

   2026-07-16 改版：背景由后台栏目大图({$CATEGORYS[..][image]})改为 CSS 品牌蓝渐变；
   布局由“整层绝对定位覆盖在大图上”改为“左文右图”两栏 flex。

   走 header_min 的页面不加载 css/show_function.css，故此处自带一份品牌变量
   （值与 show_function.css 的 :root 保持一致）
   ============================================================ */
:root {
	--sol-banner-gradient: linear-gradient(135deg, #0067FC 0%, #03B8FF 100%);
}

.solution_banner {
	position: relative;
	background: var(--sol-banner-gradient);
	overflow: hidden;
}

/* 头部是高 80px 的透明 fixed 层，故上内边距要让开它；
   容器宽度沿用本站的 1380（居中后正好与头部 logo 左缘对齐）。
   height 固定 500px（用户 2026-07-16 指定）：banner 高度不再被插画高度撑动，
   插画由下面的 max-height 锁在内容区内，换任何图都不会改变这块的高度。
   依赖 common.css 的全局 border-box：height 含 padding，内容区 = 500-160 = 340 */
/* 垂直居中：头部是 70px 的 fixed 浮层盖住顶部，故 padding-top 里有 70 被头部吃掉。
   要让图片框在"可见区(头部下方)"里上下等距，需 padding-bottom = padding-top − 70。
   现 100/30 → 可见区上下各 30px，图片框(及框内居中的图案)整体垂直居中。 */
.solution_banner_inner {
	width: 1380px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 100px 0 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

/* 左栏：原先是 position:absolute 的覆盖层，改版后作为 flex 子项参与正常排版 */
.img_content {
	color: white;
	position: static;
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.5;
}

.img_msg,
.img_buttom {
	color: white;
	width: auto;
	position: relative;
}

.img_content .tip_1 {
	display: block;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 1px;
	margin-bottom: 20px;
}

.img_content .tip_2 {
	font-size: 16px;
	white-space: pre-wrap;
	line-height: 1.8;
	max-width: 520px;
	opacity: .85;
}

.img_buttom {
	margin-top: 32px;
}

.img_buttom a {
	position: relative;
	text-decoration: none;
}

.solution_banner_visual {
	flex: 0 0 auto;
	padding-right: 20px;
}

/* 固定 500×320 的图片位（用户 2026-07-17 指定）。object-fit:contain + object-position:center
   → 整张图完整、按比例、居中显示在这个框内；框比图宽/高时的空隙露出 banner 蓝底。
   ⚠️ 因各页图片宽高比不同(1.28~2.01)，在固定框内 contain 后"可见图案"大小会不一致
   （详见交付说明）；若要各页图案完全等大，改用 object-fit:cover（会裁掉溢出边缘）。 */
.solution_banner_visual .header_img_icon {
	position: static;
	display: block;
	width: 500px;
	height: 320px;
	margin: 0;
	object-fit: contain;
	object-position: center;
}

@media only screen and (max-width: 1400px) {
	/* 头部在此断点降到 50px；同理 padding-bottom = padding-top − 50 = 30，使图片框可见区上下等距。
	   图片已是固定尺寸，无需再锁 height。 */
	.solution_banner_inner {
		width: 1075px;
		padding: 80px 0 30px;
	}

	.img_content .tip_1 {
		font-size: 30px;
	}

	.img_buttom {
		margin-top: 24px;
	}

	/* 固定框按比例缩小到此断点内容区(252 = 380-128)：500×320 → 394×252，保持同样框比例 */
	.solution_banner_visual .header_img_icon {
		width: 394px;
		height: 252px;
	}
}

/* ============================================================
   顶部头部：始终白底吸顶（2026-07-16 用户要求）
   ------------------------------------------------------------
   背景：全站头部默认在 banner 上透明(nav_a_all 白字/whitelogo)，滚动≥50px 时
   main.js 的 menu_change() 给头部加 .selected 变白、并给 #banner 加 .topImg
   (padding-top:180) 造成 180px 节点跳动。用户要求：用了本 banner 的页面，头部
   “始终白底吸顶”、不随滚动变化、不再有节点位移。
   做法：本文件只在“新 banner 页”加载，故只在此把头部锁成“白底态”外观，并让 JS
   加的 .topImg 失效。★不改全局 main.js / header_min★——首页轮播依赖的“透明→滚动
   变白”不受影响。main.js 仍会切换这些类，但下面的样式把两种态都统一成白底态，故无视觉变化。
   ============================================================ */

/* 头部：始终白底 + 阴影（覆盖“未滚动=透明”）。header.fixed-header 特指性高于 .selected */
header.fixed-header {
	background-color: #fff;
	box-shadow: #839cb7 0 0 20px;
}

/* logo：始终用彩色版、隐藏白色版 */
.i_logo .esunlogo { display: block; }
.i_logo .whitelogo { display: none; }

/* 导航文字：把“透明态类” .nav_a_all 的表现改写成与白底态 .nav_a 一致
   （基础深色、悬停/激活主色、下划线主色），这样 JS 挂哪个类都在白底上清晰 */
.fixed-header .nav_a_all { color: #1a1a1a; }
.fixed-header .nav_a_all:hover,
.fixed-header .nav_a_all.active1,
.fixed-header .nav_a_all.active { color: #0067FC; }
.fixed-header .nav_a_all::after { background-color: #0067FC; }

/* 右侧电话/按钮：同理把透明态 .ui_div_right_all 锁成白底态外观 */
.ui_div_right_all .nav_phone_icon { color: #0067FC; }
.ui_div_right_all .nav_phone_number { color: #1a1a1a; }
.ui_div_right_all .nav_cta { background-color: #0067FC; color: #fff; }
.ui_div_right_all .nav_cta:hover { background-color: #0055d4; color: #fff; }

/* 关键：让 JS 滚动时加到 #banner 上的 .topImg(padding-top:180) 失效，消除节点跳动 */
#banner.topImg { padding-top: 0; }