/* =========================================================
* 首页大屏 Tab 切换修复样式
* 部署方式（二选一）：
* 1. 把本文件上传到 /template/default/css/banner-fix.css，
* 然后在首页 中 aoyun.css 后面加一行：
*
* 2. 或者直接把本文件内容复制到 /template/default/css/aoyun.css 末尾
* 注意：必须放在 homepage4556.css 之后加载，才能覆盖原样式
*
* 统一类名语义：item01 = 轨迹查询，item02 = 运费查询，item03 = 会员登录
* ========================================================= */
/* ---------- 1. 三个查询面板的显示/隐藏与淡入淡出 ---------- */
.home-banner__wp .xl-pro-banner .banner__item {
opacity: 0;
visibility: hidden; /* 隐藏后不占交互，防止透明面板挡住可见面板的表单 */
pointer-events: none; /* 透明面板不拦截鼠标点击 */
-webkit-transition: opacity .4s ease;
transition: opacity .4s ease;
}
/* 当前选中的面板（由 banner.js 添加 panel-active 类） */
.home-banner__wp .xl-pro-banner .banner__item.panel-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* ---------- 2. 切换时面板内容的淡入上移动画 ---------- */
.banner__item .banner-detail.panel-enter {
-webkit-animation: panelFadeUp .45s ease both;
animation: panelFadeUp .45s ease both;
}
@-webkit-keyframes panelFadeUp {
from { opacity: 0; -webkit-transform: translateY(24px); }
to { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes panelFadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- 3. 纠正按钮图标（原模板 item01/item02 的图标放反了） ---------- */
/* item01 = 轨迹查询：图标用地球（原 item02 的位置） */
.home-banner__list .item01 .banner-tab__ico01 {
background-position: -487px -315px; /* 地球（暗态） */
}
.home-banner__list .item01 .banner-tab__ico02 {
background-position: 0px -445px; /* 地球（高亮态） */
}
/* item02 = 运费查询：图标用计算器（原 item01 的位置） */
.home-banner__list .item02 .banner-tab__ico01 {
background-position: -487px -210px; /* 计算器（暗态） */
}
.home-banner__list .item02 .banner-tab__ico02 {
background-position: -246px -330px; /* 计算器（高亮态） */
}
/* item03 = 会员登录：图标原本正确，保持不动 */
.home-banner__list .item03 .banner-tab__ico01 {
background-position: -351px -330px;
}
.home-banner__list .item03 .banner-tab__ico02 {
background-position: -487px 0px;
}
/* 注：按钮下方“轨迹查询/运费查询/会员登录”文字是烘在图标图片里的，
原模板把 设为 display:none，这里保持原样即可，无需改动。 */