/* ============================================
   轮播图 最外层容器（全屏版）
   作用：控制整个轮播的宽度、位置、溢出隐藏
============================================ */
.banner {
  position: relative;       /* 相对定位：子元素可基于此容器绝对定位 */
  width: 100% !important;   /* 宽度强制100%，实现全屏显示 */
  max-width: 100% !important;/* 最大宽度强制100%，不限制展示宽度 */
  margin: 0 auto;           /* 水平居中：左右自动居中 */
  overflow: hidden;          /* 溢出隐藏：超出容器部分自动隐藏，防止图片外漏 */
  height: 600px;             /* 设置轮播图整体高度为600px */
}

/* ============================================
   单张轮播面板
   作用：控制每一张轮播图的高度、布局、显示方式
============================================ */
.banner-inner {
  position: absolute;       /* 绝对定位：实现多张图片叠加淡入效果 */
  width: 100%;              /* 宽度100%：占满父容器 */
  height: 500px;            /* 设置轮播内容区域高度为500px */
  top: 0;                   /* 顶部对齐：紧贴父容器顶部 */
  left: 0;                  /* 左侧对齐：紧贴父容器左侧 */
  opacity: 0;               /* 默认透明度0：完全隐藏 */
  display: flex;            /* flex布局：用于文字垂直居中 */
  align-items: center;       /* 垂直居中：内部文字垂直居中 */
  padding-left: 220px;      /* 左内边距：文字距离左侧420px */
  z-index: 1;                /* 层级：默认层级1 */
  transition: opacity 1.2s ease; /* 过渡动画：透明度变化1.2秒平滑过渡 */
}

/* 当前显示的轮播面板 */
.banner-inner.active {
  opacity: 1;               /* 透明度1：完全显示 */
  z-index: 2;               /* 层级2：显示在最上层 */
}

/* ============================================
   轮播图片容器
   作用：让图片铺满整个轮播区域
============================================ */
.banner-image {
  position: absolute;        /* 绝对定位：铺满父容器 */
  top: 0;                    /* 顶部对齐 */
  left: 0;                   /* 左侧对齐 */
  width: 100%;               /* 宽度100% */
  height: 100%;              /* 高度100% */
  z-index: 1;                /* 图片层级1 */
}

/* ============================================
   轮播图片本身
============================================ */
.banner-image img {
  width: 100%;               /* 图片宽度100% */
  height: 100%;              /* 图片高度100% */
  object-fit: cover;         /* 图片等比缩放并裁剪，不变形、铺满容器 */
  position: relative;        /* 相对定位：支持左右偏移 */
  left: -10px;               /* 图片向右偏移20px */
  transform: scale(1.1);     /* 默认缩放1.1倍：轻微放大 */
  transition: transform 1.5s ease; /* 缩放动画：1.5秒平滑过渡 */
}
.banner-inner.active .banner-image img {
  transform: scale(1);       /* 激活时恢复原始缩放比例1 */
}

/* ============================================
   文字内容区域
============================================ */
.banner-content {
  position: relative;        /* 相对定位 */
  z-index: 99;               /* 层级99：确保文字显示在最上层 */
}

/* ============================================
   逐行文字动画（中文 + 英文 共用）
============================================ */
.banner-content .line1,
.banner-content .line2,
.banner-content .line3,
.banner-content .line4 {
  opacity: 0;                     /* 初始透明度0：隐藏 */
  transform: translateY(30px);    /* 初始向下偏移30px */
  transition: all 0.8s ease;      /* 所有属性0.8秒平滑过渡 */
  line-height: 1.6;               /* 行高1.5：控制文字行间距 */
  margin-bottom: 0;               /* 清除下外边距 */
}

/* 第一行文字动画 */
.banner-inner.active .line1 {
  opacity: 1;                     /* 显示 */
  transform: translateY(0);       /* 恢复原位：无偏移 */
  transition-delay: 0.3s;         /* 延迟0.3秒开始动画 */
}
/* 第二行文字动画 */
.banner-inner.active .line2 {
  opacity: 1;                     /* 显示 */
  transform: translateY(0);       /* 恢复原位 */
  transition-delay: 0.5s;         /* 延迟0.5秒 */
}
/* 第三行文字动画 */
.banner-inner.active .line3 {
  opacity: 1;                     /* 显示 */
  transform: translateY(0);       /* 恢复原位 */
  transition-delay: 0.7s;         /* 延迟0.7秒 */
}
/* 第四行文字动画 */
.banner-inner.active .line4 {
  opacity: 1;                     /* 显示 */
  transform: translateY(0);       /* 恢复原位 */
  transition-delay: 0.9s;         /* 延迟0.9秒 */
}

/* ============================================
   仅英文样式（不影响中文）
============================================ */
/* 英文整体容器 */
html[lang="en"] .banner-content {
  max-width: 650px !important;    /* 最大宽度650px */
  width: 650px !important;        /* 固定宽度650px */
  margin-left: 10px !important;   /* 左外边距10px：整体右移 */
}
/* 英文图片偏移 */
html[lang="en"] .banner-image img {
  position: relative !important;  /* 相对定位 */
  left: 10px !important;          /* 向左偏移10px */
}

/* 英文第一行 */
html[lang="en"] .banner-content .line1 {
  font-size: 1.2vw !important;          /* 响应式字号1.2vw */
  white-space: normal !important;      /* 自动换行 */
  word-break: keep-all !important;     /* 保持单词不拆分 */
}
/* 英文第二行 */
html[lang="en"] .banner-content .line2 {
  font-size: 1.5vw !important;          /* 响应式字号1.5vw */
  white-space: normal !important;      /* 自动换行 */
  word-break: keep-all !important;     /* 单词不拆分 */
}
/* 英文第三行 */
html[lang="en"] .banner-content .line3 {
  font-size: 1.5vw !important;          /* 响应式字号1.5vw */
  white-space: normal !important;      /* 自动换行 */
  word-break: keep-all !important;     /* 单词不拆分 */
}

/* 英文第四行按钮 */
html[lang="en"] .banner-content .line4.banner-en {
  font-size: 0.8vw !important;          /* 字号0.8vw */
  color: #333333 !important;            /* 文字颜色深灰 */
  font-weight: 400 !important;          /* 字重常规 */
  background: #ffc107 !important;       /* 背景色黄色 */
  padding: 8px 20px !important;         /* 内边距8px 20px */
  border-radius: 6px !important;        /* 圆角6px */
  max-width: 500px !important;          /* 最大宽度500px */
  width: 100% !important;                /* 宽度100% */
  display: block !important;            /* 块状显示 */
  line-height: 1.6 !important;           /* 行高1.4 */
  word-break: keep-all !important;      /* 单词不拆分 */
  white-space: normal !important;       /* 自动换行 */
}

/* ============================================
   中文第四行按钮样式
============================================ */
.banner-content .line4 {
  font-size: 25px !important;            /* 字号16px */
  color: #333333 !important;            /* 文字颜色深灰 */
  font-weight: 400 !important;          /* 字重常规 */
  margin: 0 0 10px 0 !important;        /* 下外边距10px */
  max-width: 800px !important;          /* 最大宽度500px */
  background: #ffc107 !important;       /* 背景黄色 */
  padding: 8px 20px !important;         /* 内边距8px 20px */
  border-radius: 6px !important;        /* 圆角6px */
  display: inline-block !important;     /* 行内块状 */
}

/* ============================================
   中文标题文字样式
============================================ */
.banner-content .line1 {
  font-size: 40px;                /* 字号22px */
  color: #444444;                 /* 文字颜色#444 */
  font-weight: 400;               /* 字重常规 */
  margin: 0 0 10px 0;             /* 下外边距10px */
}
.banner-content .line2 {
  font-size: 85px;                /* 字号55px */
  color: #2b6cb3;                 /* 文字颜色蓝色 */
  font-weight: 700;               /* 字重加粗 */
  margin: 0 0 10px 0;             /* 下外边距10px */
}
.banner-content .line3 {
  font-size: 62px;                /* 字号42px */
  color: #2b6cb3;                 /* 文字颜色蓝色 */
  font-weight: 700;               /* 字重加粗 */
  margin: 0 0 20px 0;             /* 下外边距20px */
}
.banner-content a.line3 {
  background: #ffc107;            /* 背景黄色 */
  color: #000 !important;         /* 文字黑色 */
  padding: 12px 30px;             /* 内边距12px 30px */
  border-radius: 6px;             /* 圆角6px */
  text-decoration: none;          /* 去掉下划线 */
  font-size: 16px;                /* 字号16px */
  font-weight: 500;               /* 字重中等 */
}

/* ============================================
   轮播指示器（隐藏）
============================================ */
.banner-indicators {
  display: none; /* 不显示轮播指示器 */
}

/* ======================================================================
   可修改位置说明
======================================================================= */
/*
  1. 轮播高度：.banner-inner { height: 500px; }
  2. 英文缩放：修改 html[lang="en"] 里的 vw
  3. 英文右移：margin-left
  4. 英文图片左移：left
*/

/* ============================================
   鼠标圆圈文字（完美闭合）
============================================ */
.banner-mouse-indicator {
  position: absolute;           /* 绝对定位 */
  bottom: 30px;                  /* 距离底部30px */
  left: 50%;                     /* 距离左侧50%：水平居中 */
  width: 110px;                  /* 容器宽度110px */
  height: 110px;                 /* 容器高度110px */
  transform: translateX(-50%);   /* 向左偏移自身50%：精确居中 */
  z-index: 50;                   /* 层级50 */
}

/* 圆圈文字容器 */
.banner-text-circle {
  position: absolute;           /* 绝对定位 */
  width: 100%;                  /* 宽度100% */
  height: 100%;                 /* 高度100% */
  animation: circleRotate 18s linear infinite; /* 旋转动画18秒一圈，线性无限循环 */
}

/* 单个文字样式 */
.banner-text-circle b {
  position: absolute;           /* 绝对定位 */
  top: 0;                       /* 顶部对齐 */
  left: 50%;                    /* 左侧50%：居中 */
  color: #009999;               /* 文字颜色蓝绿色 */
  font-size: 10px;              /* 文字大小10px */
  transform-origin: 0 55px;     /* 旋转中心点：半径55px */
  white-space: nowrap;          /* 不换行 */
}

/* 20个字符 18°等分 360°闭合 */
.banner-text-circle b:nth-child(1)  { transform: rotate(0deg); }   /* 第1个字符：0度 */
.banner-text-circle b:nth-child(2)  { transform: rotate(18deg); }  /* 第2个字符：18度 */
.banner-text-circle b:nth-child(3)  { transform: rotate(36deg); }  /* 第3个字符：36度 */
.banner-text-circle b:nth-child(4)  { transform: rotate(54deg); }  /* 第4个字符：54度 */
.banner-text-circle b:nth-child(5)  { transform: rotate(72deg); }  /* 第5个字符：72度 */
.banner-text-circle b:nth-child(6)  { transform: rotate(90deg); }  /* 第6个字符：90度 */
.banner-text-circle b:nth-child(7)  { transform: rotate(108deg); } /* 第7个字符：108度 */
.banner-text-circle b:nth-child(8)  { transform: rotate(126deg); } /* 第8个字符：126度 */
.banner-text-circle b:nth-child(9)  { transform: rotate(144deg); } /* 第9个字符：144度 */
.banner-text-circle b:nth-child(10) { transform: rotate(162deg); } /* 第10个字符：162度 */
.banner-text-circle b:nth-child(11) { transform: rotate(180deg); } /* 第11个字符：180度 */
.banner-text-circle b:nth-child(12) { transform: rotate(198deg); } /* 第12个字符：198度 */
.banner-text-circle b:nth-child(13) { transform: rotate(216deg); } /* 第13个字符：216度 */
.banner-text-circle b:nth-child(14) { transform: rotate(234deg); } /* 第14个字符：234度 */
.banner-text-circle b:nth-child(15) { transform: rotate(252deg); } /* 第15个字符：252度 */
.banner-text-circle b:nth-child(16) { transform: rotate(270deg); } /* 第16个字符：270度 */
.banner-text-circle b:nth-child(17) { transform: rotate(288deg); } /* 第17个字符：288度 */
.banner-text-circle b:nth-child(18) { transform: rotate(306deg); } /* 第18个字符：306度 */
.banner-text-circle b:nth-child(19) { transform: rotate(324deg); } /* 第19个字符：324度 */
.banner-text-circle b:nth-child(20) { transform: rotate(342deg); } /* 第20个字符：342度 */

/* 鼠标整体 */
.mouse-group {
  position: absolute;           /* 绝对定位 */
  top: 50%;                     /* 垂直居中 */
  left: 50%;                    /* 水平居中 */
  transform: translate(-50%, -50%); /* 居中校正 */
  animation: mouseFloat 2.6s infinite ease-in-out; /* 浮动动画2.6秒无限循环 */
  z-index: 3;                   /* 层级3 */
}

/* 鼠标图标 */
.mouse-icon-center {
  position: relative;           /* 相对定位 */
  width: 18px;                  /* 宽度18px */
  height: 28px;                 /* 高度28px */
  background: #555555;          /* 背景灰色 */
  border-radius: 9px;           /* 圆角9px */
}

/* 鼠标竖线 */
.mouse-icon-center::before {
  content: "";                  /* 空内容 */
  position: absolute;           /* 绝对定位 */
  top: 7px;                     /* 距离顶部7px */
  left: 50%;                    /* 水平居中 */
  width: 1px;                   /* 宽度1px */
  height: 8px;                  /* 高度8px */
  background: #fff;              /* 颜色白色 */
  transform: translateX(-50%);   /* 居中校正 */
}

/* 鼠标横线 */
.mouse-icon-center::after {
  content: "";                  /* 空内容 */
  position: absolute;           /* 绝对定位 */
  top: 10px;                    /* 距离顶部10px */
  left: 50%;                    /* 水平居中 */
  width: 8px;                   /* 宽度8px */
  height: 1px;                  /* 高度1px */
  background: #fff;              /* 颜色白色 */
  transform: translateX(-50%);   /* 居中校正 */
}

/* 向下箭头 */
.mouse-arrow {
  position: absolute;           /* 绝对定位 */
  bottom: -7px;                 /* 距离底部-7px */
  left: 50%;                    /* 水平居中 */
  transform: translateX(-50%);   /* 居中校正 */
  width: 0;                     /* 宽度0 */
  height: 0;                    /* 高度0 */
  border-left: 4px solid transparent;   /* 左边框4px透明 */
  border-right: 4px solid transparent;  /* 右边框4px透明 */
  border-top: 5px solid #555555;        /* 上边框5px灰色 */
}

/* 鼠标浮动动画 */
@keyframes mouseFloat {
  0%    { transform: translate(-50%, -50%) translateY(0); }    /* 起点：无偏移 */
  50%   { transform: translate(-50%, -50%) translateY(-4px); } /* 中间：向上4px */
  100%  { transform: translate(-50%, -50%) translateY(0); }    /* 终点：回到原位 */
}

/* 圆圈旋转动画 */
@keyframes circleRotate {
  0%    { transform: rotate(0deg); }   /* 开始角度0度 */
  100%  { transform: rotate(360deg); } /* 结束角度360度：顺时针一圈 */
}