/* ==========================================================================
   BooBlo Theme — 探越未来（碳跃未来）全站视觉重塑（仅 UI，无内容改动）
   --------------------------------------------------------------------------
   策略说明：
   1. 本文件在 <head> 中最后加载。文档流中晚于它的只有 <body> 内的
      nav.css / bugfixed.css / ML_contact_nav.css —— 针对这三份文件里需要
      覆盖的选择器（.ml_sidebar / .ml_mbbot），此处用 ul./body. 前缀提高
      特异性取胜，不改动旧文件。
   2. 旧样式大量使用 var(--main-color) / var(--primary-color) /
      var(--secondary-color) / var(--main-color-blue) 输出品牌红/蓝。
      这里在 :root 把这些旧变量重定向到 BooBlo accent，一次性消灭全部
      品牌色泄漏（含带 !important 的规则），因此无需修改任何旧 css。
   3. commonStyle.css 的 `* { font-family:'microsoft yahei' }` 直接命中
      每个元素（继承失效），故此处必须用同构的 `*` 规则在更晚的层级覆盖；
      .fa 等类选择器特异性更高，图标字体不受影响。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 旧变量桥接：品牌红/蓝 → BooBlo accent
   -------------------------------------------------------------------------- */
:root {
  --main-color: var(--bb-accent);
  --primary-color: var(--bb-accent);
  --secondary-color: var(--bb-accent);
  --main-color-blue: var(--bb-accent);
  --main-color-white: #ffffff;
  --main-color-fontColor: var(--bb-text-2);
}

/* --------------------------------------------------------------------------
   1. 基础：字体 / 背景 / 文字 / 链接
   -------------------------------------------------------------------------- */
* {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
}

body {
  background: var(--bb-bg);
  color: var(--bb-text);
  font-size: 14px;
}

a { color: var(--bb-text); }
a:hover { color: var(--bb-accent); }

/* 旧站全局 crisp-edges 会让缩放照片发虚，恢复默认渲染 */
img { image-rendering: auto; }

::placeholder { color: var(--bb-text-2); opacity: 1; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bb-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. 顶部导航：白色磨砂玻璃 + 细线描边
   -------------------------------------------------------------------------- */
/* 磨砂玻璃必须挂在 ::before 上：backdrop-filter 会让元素成为 fixed 后代
   的包含块。旧模板的手机抽屉 .head .nav_box 是 position:fixed;
   height:calc(100% - 61px)，若 .headbg 自带 backdrop-filter，该高度就按
   60px 高的 .headbg 解析 → 塌成 ~0，白色 .navbg 随之 0 高，抽屉看起来
   透明。.headbg 是 position:fixed + z-index:55（style.css）形成的层叠
   上下文，z-index:-1 的伪元素垫在子内容（logo/菜单）之下、页面之上，
   玻璃观感不变。position:fixed / z-index 沿用 style.css，此处不重述、
   更不能加 transform。 */
.headbg {
  background: transparent;
  border-bottom: 1px solid var(--bb-line);
  box-shadow: var(--bb-shadow-1);
  transition: box-shadow var(--bb-dur) var(--bb-ease);
}

/* 显式压掉 style.css 的 .headbg.active{background:#fff}（同为 (0,2,0)，
   本文件后加载取胜）——玻璃态全部移交 ::before */
.headbg.active {
  background: transparent;
}

.headbg::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .42);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  transition: background var(--bb-dur) var(--bb-ease);
}

.headbg.active::before {
  background: rgba(255, 255, 255, .6);
}

/* 无 backdrop-filter 支持的浏览器：保持接近不透明以保证可读性 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .headbg::before { background: rgba(255, 255, 255, .95); }
  .headbg.active::before { background: #ffffff; }
}

.head .menu > ul > li > a {
  color: var(--bb-text);
  font-weight: 500;
  transition: color var(--bb-dur) var(--bb-ease);
}

.head .menu > ul > li > a:hover,
.head .menu > ul > li:hover > a {
  color: var(--bb-accent);
}

/* 悬停下划线 → 渐变短条 */
.head .menu > ul > li > a:before {
  height: 2px;
  border-radius: 2px;
  background: var(--bb-grad);
  bottom: 16px;
  transition: width var(--bb-dur) var(--bb-ease);
}

/* 下拉菜单 → 卡片 */
.head .menu > ul > li ul {
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-md);
  box-shadow: var(--bb-shadow-2);
  padding: 8px;
}

.head .menu > ul > li ul li { border-bottom: 1px solid var(--bb-line); }
.head .menu > ul > li ul li:last-child { border-bottom: none; }

.head .menu > ul > li ul li a {
  color: var(--bb-text-2);
  padding: 10px 16px;
  border-radius: var(--bb-r-sm);
  transition: color var(--bb-dur) var(--bb-ease), background var(--bb-dur) var(--bb-ease);
}

.head .menu > ul > li ul li a:hover,
.head .menu > ul > li > ul li:hover > a {
  color: var(--bb-accent);
  background: rgba(99, 102, 241, .08);
}

/* 汉堡按钮 */
.head .nav_open i,
.head .nav_open:before,
.head .nav_open:after { background: var(--bb-text-2); }

/* --------------------------------------------------------------------------
   3. 手机端抽屉导航
   -------------------------------------------------------------------------- */
.head .nav_box { border-top: 1px solid var(--bb-line); }

.head .navbg {
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.head .nav_list > ul > li {
  border-top-color: transparent;
  border-bottom: 1px solid var(--bb-line);
}

.head .nav_list ul li span a { color: var(--bb-text); }
.head .nav_list > ul > li > span a { font-weight: 500; }

/* --------------------------------------------------------------------------
   4. 首页 Banner 轮播：分页圆点 / 箭头（图片与结构不动）
   -------------------------------------------------------------------------- */
.banner_swiper .swiper-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  opacity: 1;
  transition: all var(--bb-dur) var(--bb-ease);
}

.banner_swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 22px;
  background: var(--bb-accent);
}

.banner_swiper .swiper-button-prev,
.banner_swiper .swiper-button-next {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--bb-line);
  border-radius: 999px;
  color: var(--bb-text);
  box-shadow: var(--bb-shadow-2);
  transition: all var(--bb-dur) var(--bb-ease);
}

.banner_swiper .swiper-button-prev:hover,
.banner_swiper .swiper-button-next:hover {
  background: var(--bb-grad);
  border-color: transparent;
  color: #fff;
}

/* --------------------------------------------------------------------------
   5. 内页通栏 Banner：暗色渐变蒙层 + 现代排版（图片不动）
   -------------------------------------------------------------------------- */
.inbanner:before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(29, 29, 31, .18), rgba(29, 29, 31, .52));
  z-index: 1;
  pointer-events: none;
}

.inbanner_txt { z-index: 2; }

.inbanner_txt .h2 {
  color: #fff;
  font-weight: 600;
  letter-spacing: .12em;
}

/* --------------------------------------------------------------------------
   6. 栏目标题：粗体 + 渐变短下划线
   -------------------------------------------------------------------------- */
.tit1 .h2 {
  color: var(--bb-text);
  font-weight: 700;
  letter-spacing: .02em;
}

.tit1 .h2:after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--bb-grad);
  margin: 14px auto 0;
}

.tit1 .h3 { color: var(--bb-text-2); }

.tit2 .h2 { color: var(--bb-text); font-weight: 700; }

.tit2 .line1 {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--bb-grad);
}

/* --------------------------------------------------------------------------
   7. 首页 con01 核心优势：卡片化（等高 + 顶端对齐）
   -------------------------------------------------------------------------- */
/* ul 由浮动改为 flex 换行布局：li 宽度/边距沿用旧 CSS，几何不变；
   同行 li 默认 stretch 拉伸 → 整行等高，消除底部参差。
   注：li 带 .wow fadeInUp（wow.js），故不加入场动画，避免双重 transform */
.con01 .list ul { display: flex; flex-wrap: wrap; }

.con01 .list ul li {
  display: flex;
  flex-direction: column;
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-lg);
  box-shadow: var(--bb-shadow-1);
  padding: 28px 14px 26px;
  transition: transform var(--bb-dur-slow) var(--bb-ease),
              box-shadow var(--bb-dur-slow) var(--bb-ease),
              border-color var(--bb-dur-slow) var(--bb-ease);
}

/* 链接 → nr_box → txtbg 逐层纵向撑满：短卡片的多余空间落在卡内底部，
   文本始终顶端对齐（不垂直居中、不加底部填充） */
.con01 .list ul li > a { display: flex; flex-direction: column; flex: 1 1 auto; }
.con01 .list ul li .nr_box { display: flex; flex-direction: column; flex: 1 1 auto; }
.con01 .list ul li .txtbg { flex: 1 1 auto; }

.con01 .list ul li:hover {
  transform: translateY(-6px);
  box-shadow: var(--bb-shadow-3);
}

.con01 .list ul li .img {
  border: 8px solid var(--bb-bg);
  background: var(--bb-bg);
}

.con01 .list ul li .imgbg {
  box-shadow: none;
  transition: box-shadow var(--bb-dur) var(--bb-ease);
}

.con01 .list ul li:hover .imgbg { box-shadow: var(--bb-shadow-2); }

.con01 .list ul li .txt .h2 { color: var(--bb-text); }
.con01 .list ul li .txt .h3 { color: var(--bb-text-2); padding: 0 8px; }
.con01 .list ul li:hover .txt .h2 { color: var(--bb-accent); }

/* --------------------------------------------------------------------------
   8. 首页 con02 数据带： refined 蒙层 + 渐变数字
   -------------------------------------------------------------------------- */
.con02bg:before {
  background: linear-gradient(180deg, rgba(29, 29, 31, .5), rgba(29, 29, 31, .72));
}

.con02 .tit1 .h2,
.con02 .tit1 .h3 { color: #fff; }
.con02 .tit1 .h3 { opacity: .75; }

.con02 .list ul li .txt .h2 strong {
  background: var(--bb-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.con02 .list ul li .txt .h3 { color: rgba(255, 255, 255, .8); }

/* --------------------------------------------------------------------------
   9. con05 表单区：卡片 + 渐变药丸按钮
   -------------------------------------------------------------------------- */
.con05bg { border-top: 1px solid var(--bb-line); }

.con05 .list {
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-xl);
  box-shadow: var(--bb-shadow-1);
  overflow: hidden;
}

.con05_rt .h2 { color: var(--bb-text); }

.con05_rt .form .text1,
.con05_rt .form textarea {
  border: 1px solid var(--bb-line);
  background: var(--bb-bg);
  border-radius: var(--bb-r-sm);
  transition: border-color var(--bb-dur) var(--bb-ease),
              box-shadow var(--bb-dur) var(--bb-ease),
              background var(--bb-dur) var(--bb-ease);
}

.con05_rt .form .text1:focus,
.con05_rt .form textarea:focus {
  border-color: var(--bb-accent);
  background: var(--bb-surface);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

.con05_rt .form .button1 {
  border: 0;
  background: var(--bb-grad);
  color: #fff;
  border-radius: 999px;
  box-shadow: var(--bb-shadow-2);
  font-weight: 600;
  letter-spacing: .08em;
  transition: transform var(--bb-dur) var(--bb-ease),
              box-shadow var(--bb-dur) var(--bb-ease),
              filter var(--bb-dur) var(--bb-ease);
}

.con05_rt .form .button1:hover {
  transform: translateY(-2px);
  box-shadow: var(--bb-shadow-3);
  filter: brightness(1.05);
}

.con05_rt .form .button1:before { display: none; }

/* --------------------------------------------------------------------------
   10. con06 首页新闻列表 + more1 圆形按钮
   -------------------------------------------------------------------------- */
.con06 .list ul li { border-bottom: 1px solid var(--bb-line); }
.con06 .list ul li a { color: var(--bb-text); }
.con06 .list ul li a:hover { color: var(--bb-accent); }
.con06 .list ul li span { color: var(--bb-text-2); }

.more1 span {
  border: 1px solid var(--bb-line);
  background: var(--bb-surface);
  color: var(--bb-text-2);
  transition: all var(--bb-dur) var(--bb-ease);
}

.more1 span:hover {
  color: #fff;
  border-color: transparent;
  background: var(--bb-grad);
  box-shadow: var(--bb-shadow-2);
}

/* 旧红色径向渐变扩散特效 → 关闭（纯装饰） */
.more1 a i { display: none; }

/* --------------------------------------------------------------------------
   11. 平台简介 / 功能介绍：business1 / business2 / more3
   -------------------------------------------------------------------------- */
.business1 {
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-lg);
  background: var(--bb-surface);
  box-shadow: var(--bb-shadow-1);
  overflow: hidden;
}

.business1 ul li .txt { color: var(--bb-text-2); }
.business1 ul li .txt .h2 { color: var(--bb-text); }
.business1 ul li:hover .txt .h2 { color: var(--bb-accent); }

/* ul 由浮动改为 flex 换行布局：同行 li 等高、内容顶端对齐；
   宽度/边距沿用旧 CSS 与各页内联样式，几何不变。
   此处 li 无 .wow（platform/features 均未载 wow.js/animate.css）→ 安全挂载入场动画 */
.business2 .list ul { display: flex; flex-wrap: wrap; }

/* 加 .inside 前缀 (0,3,2)：features.html <head> 内联样式块在本文档之后
   加载，其 .business2 .list ul li { padding:1% 0 } (0,2,2) 会吃掉内边距 */
.inside .business2 .list ul li {
  display: flex;
  flex-direction: column;
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-lg);
  box-shadow: var(--bb-shadow-1);
  padding: 24px;
  transition: transform var(--bb-dur-slow) var(--bb-ease),
              box-shadow var(--bb-dur-slow) var(--bb-ease);
  animation: bb-card-in var(--bb-dur-slow) var(--bb-ease) both;
}

.inside .business2 .list ul li:hover {
  transform: translateY(-6px);
  box-shadow: var(--bb-shadow-3);
}

/* 文本容器撑满剩余高度：标题在顶、正文顺排，多余空间留在卡内底部；
   features 页图片为等高定值 → 各卡图片底部自然对齐 */
.business2 .list ul li .txt { flex: 1 1 auto; }
.business2 .list ul li .txt .h2 { color: var(--bb-text); font-weight: 600; }
.business2 .list ul li .txt .h4 { color: var(--bb-text-2); margin-top: 8px; }

/* 卡内图片：与文本留出间距，圆角沿用设计令牌 */
.business2 .list ul li > img {
  display: block;
  margin-top: 16px;
  border-radius: var(--bb-r-sm);
}

/* 一次性载入动画：fade-up + 前 6 张小步进错峰（步长 = 慢速时长 / 6） */
@keyframes bb-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.business2 .list ul li:nth-child(2) { animation-delay: calc(var(--bb-dur-slow) / 6); }
.business2 .list ul li:nth-child(3) { animation-delay: calc(var(--bb-dur-slow) / 6 * 2); }
.business2 .list ul li:nth-child(4) { animation-delay: calc(var(--bb-dur-slow) / 6 * 3); }
.business2 .list ul li:nth-child(5) { animation-delay: calc(var(--bb-dur-slow) / 6 * 4); }
.business2 .list ul li:nth-child(6),
.business2 .list ul li:nth-child(n + 7) { animation-delay: calc(var(--bb-dur-slow) / 6 * 5); }

@media (prefers-reduced-motion: reduce) {
  .business2 .list ul li { animation: none; }
}

/* “点击咨询”按钮 → 渐变药丸 */
.more3 a:before { display: none; }

.more3 span {
  border: 0;
  background: var(--bb-grad);
  color: #fff;
  border-radius: 999px;
  box-shadow: var(--bb-shadow-2);
  transition: transform var(--bb-dur) var(--bb-ease),
              box-shadow var(--bb-dur) var(--bb-ease);
}

.more3 span:hover { color: #fff; }

.more3 a:hover span {
  transform: translateY(-2px);
  box-shadow: var(--bb-shadow-3);
}

/* --------------------------------------------------------------------------
   12. 内页二级导航 innav
   -------------------------------------------------------------------------- */
.innav ul li a { color: var(--bb-text-2); font-weight: 500; }

.innav ul li a:before {
  height: 2px;
  border-radius: 2px;
  background: var(--bb-grad);
  bottom: 2px;
  transition: width var(--bb-dur) var(--bb-ease);
}

.innav ul li a:hover,
.innav ul li.hover > a { color: var(--bb-accent); }

/* --------------------------------------------------------------------------
   13. 关于我们：正文卡片
   -------------------------------------------------------------------------- */
.aboutus1 .list {
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-xl);
  box-shadow: var(--bb-shadow-1);
  padding: 40px 48px;
}

/* --------------------------------------------------------------------------
   14. 新闻列表页（newitem1，搜索页结果同款）+ 分页
   -------------------------------------------------------------------------- */
.newitem1 {
  border-bottom: 1px solid var(--bb-line);
  padding: 20px 10px;
  border-radius: var(--bb-r-sm);
  transition: background var(--bb-dur) var(--bb-ease);
}

.newitem1:hover { background: var(--bb-surface); }

.newitem1_top a { color: var(--bb-text); font-weight: 500; }
.newitem1_top span { color: var(--bb-text-2); }
.newitem1_bot span { color: var(--bb-text-2); }
.newitem1:hover a { color: var(--bb-accent); }

/* 分页 */
.pages span a {
  border: 1px solid var(--bb-line);
  background: var(--bb-surface);
  color: var(--bb-text-2);
  border-radius: 999px;
  transition: all var(--bb-dur) var(--bb-ease);
}

.pages span a:hover {
  color: #fff !important;
  background: var(--bb-accent);
  border-color: var(--bb-accent);
  box-shadow: var(--bb-shadow-2);
}

.number {
  border: 1px solid transparent;
  background: var(--bb-accent);
  color: #fff;
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   15. 新闻详情页（update.css 的 update_detail 系列）
   -------------------------------------------------------------------------- */
.update_detail_top h1 {
  color: var(--bb-text);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.4;
}

.update_detail_top h2 { color: var(--bb-text-2); }

.update_detail_con {
  border-top: 1px solid var(--bb-line);
  border-bottom: 1px solid var(--bb-line);
}

.update_detail_bot a {
  border: 1px solid var(--bb-line);
  background: var(--bb-surface);
  color: var(--bb-text);
  border-radius: var(--bb-r-md);
  box-shadow: var(--bb-shadow-1);
  transition: all var(--bb-dur) var(--bb-ease);
}

.update_detail_bot a:hover {
  border-color: transparent;
  background: var(--bb-grad);
  color: #fff;
  box-shadow: var(--bb-shadow-2);
}

/* --------------------------------------------------------------------------
   16. 联系我们页（commonStyle.css 的 ml_contact 系列）
   -------------------------------------------------------------------------- */
.ml_contact {
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-xl);
  box-shadow: var(--bb-shadow-1);
}

/* 两栏分别卡片化（外层 .ml_contact 白卡内的一对子卡）；
   box-sizing 由 commonStyle.css 的 * { border-box } 兜底，
   width:100% 的移动端栏加 padding/border 不会横向溢出 */
.ml_contactcon_left,
.ml_contactcon_right {
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-lg);
  box-shadow: var(--bb-shadow-1);
  padding: 26px 24px 28px;
}

/* 桌面端（≥997px，避开 commonStyle 的 996px 堆叠断点）：两卡等宽等高
   （flex 默认 stretch），间距固定 28px——旧 space-between + 48% 的
   4% 缝在 1230px 容器下约 47px，超出卡间距规范 */
@media (min-width: 997px) {
  .ml_contactcon { gap: 28px; }
  .ml_contactcon_left,
  .ml_contactcon_right { flex: 1 1 0; min-width: 0; }
}

/* 移动端（≤996px）：commonStyle 已将两栏 width:100% 上下堆叠、
   左栏 margin-bottom:30px，此处只收紧卡内边距 */
@media (max-width: 996px) {
  .ml_contactcon_left,
  .ml_contactcon_right { padding: 20px 18px 22px; }
}

/* 栏目小标题：粗体 + 渐变短下划线（与 .tit1 .h2 同一语言；
   字号/边距晚于 commonStyle 加载，直接覆盖其 25px/35px） */
.tact_strong {
  color: var(--bb-text) !important;
  font-weight: 600 !important;
  font-size: 18px;
  letter-spacing: .02em;
  margin-bottom: 18px;
}

.tact_strong:after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--bb-grad);
  margin-top: 10px;
}

/* 列表项节奏收紧到 14px（旧值 25px/20px 带 !important，此处同为
   !important 且更晚加载取胜） */
.ml_contactcon_left ul li {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--bb-line);
}
.ml_contactcon_left ul li:last-child { border-bottom: none; }
.ml_contactcon_left ul li i { color: var(--bb-accent); }
.ml_contactcon_left ul li p { color: var(--bb-text); }
.ml_contactcon_left ul li span { color: var(--bb-text-2); }

.ml_contactcon_right input,
.ml_contactcon_right textarea {
  border: 1px solid var(--bb-line);
  background: var(--bb-bg);
  border-radius: var(--bb-r-sm);
  transition: border-color var(--bb-dur) var(--bb-ease),
              box-shadow var(--bb-dur) var(--bb-ease),
              background var(--bb-dur) var(--bb-ease);
}

.ml_contactcon_right input:focus,
.ml_contactcon_right textarea:focus {
  border-color: var(--bb-accent);
  background: var(--bb-surface);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

.ml_sub {
  background: var(--bb-grad);
  border-radius: 999px;
  box-shadow: var(--bb-shadow-2);
  font-weight: 600;
  letter-spacing: .08em;
  transition: transform var(--bb-dur) var(--bb-ease),
              box-shadow var(--bb-dur) var(--bb-ease);
}

.ml_sub:hover {
  transform: translateY(-2px);
  box-shadow: var(--bb-shadow-3);
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   17. 页脚：深色 #1d1d1f 表面
   -------------------------------------------------------------------------- */
.footbg { background: #1d1d1f; }

.foot,
.foot a { color: var(--bb-text-2); }
.foot a:hover { color: #fff; }

.foot .f_share a {
  border: 1px solid rgba(255, 255, 255, .22);
  transition: all var(--bb-dur) var(--bb-ease);
}

.foot .f_share a:hover {
  border-color: transparent;
  background: var(--bb-grad);
}

.foot .list2 { border-top: 1px solid rgba(255, 255, 255, .08); }

/* --------------------------------------------------------------------------
   18. 右侧浮动栏 .ml_sidebar（本站暂无 DOM，防御性样式）
       与手机底部栏 .ml_mbbot —— 统一渐变语言。
       注意：ML_contact_nav.css 在 <body> 内加载（晚于本文件），
       故此处用 ul./body. 前缀提高特异性。
   -------------------------------------------------------------------------- */
body .ml_sidebar ul li {
  background: var(--bb-grad);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  box-shadow: var(--bb-shadow-2);
}

body .ml_sidebar ul li:first-child { border-top-left-radius: var(--bb-r-md); }
body .ml_sidebar ul li:last-child { border-bottom-left-radius: var(--bb-r-md); }

body .ml_sidebar_pos {
  background: var(--bb-grad);
  border-bottom-color: transparent;
  border-top-left-radius: var(--bb-r-md);
  border-bottom-left-radius: var(--bb-r-md);
  box-shadow: var(--bb-shadow-2);
}

ul.ml_mbbot {
  background: var(--bb-grad);
  box-shadow: 0 -2px 12px rgba(16, 17, 20, .1);
}

ul.ml_mbbot li { border-right: 1px solid rgba(255, 255, 255, .2); }
ul.ml_mbbot li:last-child { border-right: 0; }

/* --------------------------------------------------------------------------
   19. 移动端微调（对齐旧断点 999px，不触碰布局规则）
   -------------------------------------------------------------------------- */
@media (max-width: 999px) {
  .con01 .list ul li { padding: 18px 10px 20px; }
  .inside .business2 .list ul li { padding: 16px; }
  .aboutus1 .list { padding: 20px; }
  .inbanner_txt .h2 { letter-spacing: .08em; }
}

/* --------------------------------------------------------------------------
   20. 卡片悬停微交互（像素级对齐 hover-effect-demo.html：图片 3D 翻转
       + 左下角徽标两段式弹出 + 标题变色）。卡片不允许加 DOM，徽标落在
       li 的两个伪元素上，几何照抄 demo：::before = 90×90 角标底盘盒
       （corner2.png 自身即四分之一圆，弧线贴卡片左下角），::after =
       55px 渐变箭头圆（arricon.svg 叠在渐变底上，与底盘盒同锚点）。
       缓动曲线统一用规范值 cubic-bezier(.4, 0, .2, 1)。
   -------------------------------------------------------------------------- */

/* 舞台：position:relative 为两个伪元素提供锚点；z-index:0 建立层叠
   上下文，把徽标（z-index:2）圈死在本卡内，不渗到相邻卡上 */
.con01 .list ul li,
.inside .business2 .list ul li {
  position: relative;
  z-index: 0;
}

/* --- ① 图片以左边缘为轴 rotateY(14deg) + rotateX(4deg) --- */
/* con01 的翻转目标 .imgbg 深三层（a > .nr_box > .imgbg），li 上的
   perspective 无法穿透 flat 中间层 → 按规范§五改写为 transform 首项
   perspective(1000px) 自带透视 */
.con01 .list ul li .imgbg {
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1),
              box-shadow var(--bb-dur) var(--bb-ease);
}

.con01 .list ul li:hover .imgbg {
  transform: perspective(1000px) rotateY(14deg) rotateX(4deg);
}

/* business2 的图片是 li 直接子级 → li 上 perspective 直接生效
   （platform 的核心优势卡无图片，翻转自然无目标，其余效果照常） */
.inside .business2 .list ul li {
  perspective: 1000px;
}

.inside .business2 .list ul li > img {
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}

.inside .business2 .list ul li:hover > img {
  transform: rotateY(14deg) rotateX(4deg);
}

/* --- ② 左下角徽标底盘：90×90 盒锚在卡片左下角内侧（left/bottom:0）。
       corner2.png 本身就是四分之一圆（圆心在图自身的左下角），弧线
       自然贴合卡片角 —— 无 clip-path、无负偏移、无 translate，照抄
       demo 的 .corner；以左下角为原点 scale(0)→scale(1) 弹出 --- */
.con01 .list ul li::before,
.inside .business2 .list ul li::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 90px;
  height: 90px;
  background: url("../images/corner2.png") center / 90px 90px no-repeat;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(16,17,20,.10));  /* 白卡上托起浅灰底盘 */
  transform: scale(0);
  transform-origin: left bottom;  /* demo .corner 的弹出原点 */
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}

.con01 .list ul li:hover::before,
.inside .business2 .list ul li:hover::before {
  transform: scale(1);
}

/* --- ③ 渐变箭头圆：55px（= 90px 的 61.111%），左下角与底盘盒对齐
       （demo .icon 经 flex 落在 .corner 盒同一位，故同为 left/bottom:0，
       圆整体在卡内侧）；arricon.svg 白色箭头叠在 102° 渐变底上。
       默认 scale(0)+opacity:0，悬停 0.4s 弹出，进入时 delay .15s
       错落跟上；移出无延迟：基础态未写 transition-delay --- */
.con01 .list ul li::after,
.inside .business2 .list ul li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-image:
    url("../images/arricon.svg"),
    linear-gradient(102deg, #b39efd 14.32%, #fa63c0 75.26%);
  background-size: contain, 100% 100%;
  background-position: center, 0 0;
  background-repeat: no-repeat;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: scale(0);
  transition: transform .4s cubic-bezier(.4, 0, .2, 1),
              opacity .4s cubic-bezier(.4, 0, .2, 1);
}

/* 悬停进入时延迟 0.15s（底盘先弹、箭头错落跟上）；
   移出无延迟：基础态未写 transition-delay，直接归位 */
.con01 .list ul li:hover::after,
.inside .business2 .list ul li:hover::after {
  opacity: 1;
  transform: scale(1);
  transition-delay: .15s;
}

/* --- ④ 标题悬停变色 0.25s；con01 的 :hover 变色规则见 §7 --- */
.con01 .list ul li .txt .h2,
.inside .business2 .list ul li .txt .h2 {
  transition: color .25s cubic-bezier(.4, 0, .2, 1);
}

.inside .business2 .list ul li:hover .txt .h2 {
  color: var(--bb-accent);
}

/* 小屏（<768px）：整套徽标等比缩（底盘 60px / 箭头圆 37px），仍锚在
   卡片左下角内侧（left/bottom:0 不变，transform-origin: left bottom
   继承基础规则），比例与桌面一致，避免压住正文 */
@media (max-width: 767px) {
  .con01 .list ul li::before,
  .inside .business2 .list ul li::before {
    width: 60px;
    height: 60px;
    background-size: 60px 60px;
  }

  .con01 .list ul li::after,
  .inside .business2 .list ul li::after {
    width: 37px;
    height: 37px;
  }
}

/* 减少动态：翻转与弹出全部禁用（标题变色非运动量，保留） */
@media (prefers-reduced-motion: reduce) {
  .con01 .list ul li::before,
  .con01 .list ul li::after,
  .inside .business2 .list ul li::before,
  .inside .business2 .list ul li::after {
    transition: none;
  }

  .con01 .list ul li:hover::before,
  .con01 .list ul li:hover::after,
  .inside .business2 .list ul li:hover::before,
  .inside .business2 .list ul li:hover::after {
    transform: scale(0);
    opacity: 0;
  }

  .con01 .list ul li:hover .imgbg,
  .inside .business2 .list ul li:hover > img {
    transform: none;
  }
}