/* 基础 */
	:root{
	  --bg:#000;
	  --text:#fff;
	  --muted:#cfcfcf;
	  --sub:#cfcfcf;           /* 新增：段落颜色 */
	  --dot:#9aa3ad;
	  --dot-active:#ffcc33;
	  --mask: rgba(0,0,0,.92); /* 新增：加载遮罩 */
	  --minvh: 640px;      /* 每屏最小高度，防止超矮窗口 */
	  --section-pad: clamp(16px,4vw,40px);
	}
	*{box-sizing:border-box}
	html,body{height:100%;margin:0; scroll-snap-type: y mandatory;}
	body{margin:0;background:#000;color:var(--text);  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";  overflow:hidden; }
	/* 全局滚动表现：默认平滑；JS 控制一屏一屏 */
	html{scroll-behavior:smooth;}

	/* 每一屏 */
	.section{
	  position:relative;
	  min-height:100vh;     /* 满屏最小高度 */
	  min-height: 100dvh;  /* 新：优先用动态视口 */
	  display:grid;place-items:center;
	  overflow:hidden;                /* 背景视频裁切 */
	  isolation:isolate;
	  scroll-snap-align: start; 
	}
	/* 背景视频 */
	.section video.bg {
	  position: absolute;
	  inset: 0;
	  z-index: -1;
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	  background: #000; /* 无视频时的底色 */
	}

	/* 支持 filter 的现代浏览器：启用亮度与饱和度调整 */
	@supports (filter: brightness(0.9)) {
	  .section video.bg {
	    filter: brightness(0.50) saturate(0.95);
	    will-change: filter; /* 提示 GPU 优化 */
	  }
	}
	/* 支持 filter 的现代浏览器：启用亮度与饱和度调整 */
	@supports (filter: brightness(0.5)) {
	  .section video.bg01 {
	    filter: brightness(0.40) saturate(0.95);
	    will-change: filter; /* 提示 GPU 优化 */
	  }
	}
	
	/* 支持 filter 的现代浏览器：启用亮度与饱和度调整 */
	@supports (filter: brightness(0.5)) {
	  .section video.bg02 {
	    filter: brightness(0.40) saturate(0.95);
	    will-change: filter; /* 提示 GPU 优化 */
	  }
	}
	
	/* 支持 filter 的现代浏览器：启用亮度与饱和度调整 */
	@supports (filter: brightness(0.2)) {
	  .section video.bg03 {
	    filter: brightness(0.20) saturate(0.35);
	    will-change: filter; /* 提示 GPU 优化 */
	  }
	}
	/* 支持 filter 的现代浏览器：启用亮度与饱和度调整 */
	@supports (filter: brightness(0.15)) {
	  .section video.bg04 {
	    filter: brightness(0.15) saturate(0.3);
	    will-change: filter; /* 提示 GPU 优化 */
	  }
	}

	/* 保险降级方案：为不支持 filter 的浏览器添加暗化遮罩层 */
	.section::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  z-index: -1;
	  background: rgba(0, 0, 0, 0.45);
	  pointer-events: none;
	}
	
	/* 支持 filter 的现代浏览器：启用亮度与饱和度调整 */
	@supports (filter: brightness(0.9)) {
	  .section video.bg3 {
	    filter: brightness(0.2) saturate(0.5);
	    will-change: filter; /* 提示 GPU 优化 */
	  }
	}

/* 支持 filter 的现代浏览器：启用亮度与饱和度调整 */
	@supports (filter: brightness(0.9)) {
	  .section video.bg4 {
	    filter: brightness(0.3) saturate(0.5);
	    will-change: filter; /* 提示 GPU 优化 */
	  }
	}

	/* 遮罩加载层：小蜜蜂 */
	.bee-loader{
	  position:absolute;inset:0;z-index:3;
	  display:grid;place-items:center;
	  background:var(--mask);
	  transition:opacity .35s ease;
	}
	/* 把你的动图放这里 */
	.bee-loader::after{
	  content:"";
	  width:100px;height:86px;
	  background:url('../img/home/loading.gif') center/contain no-repeat;
	}

	/* 内容呈现淡入 */
	.content{opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease; padding:clamp(20px,4vw,48px);}
	.content-vid{ padding: 0;}
	.section.loaded .content{opacity:1;transform:none;}
	.section.loaded .bee-loader{opacity:0;pointer-events:none;}
	.content-page{ width: 95%;}
	.content-contact{width: 70%;}

	/* 右侧圆点导航 */
	.dots{
	  position:fixed;right:22px;top:50%;translate:0 -50%;
	  display:flex;flex-direction:column;gap:14px;z-index:9;
	  user-select:none;
	}
	.dot{
	  width:14px;height:14px;border-radius:100px;
	  border:2px solid var(--dot); box-sizing:border-box;
	  cursor:pointer; opacity:.9; transition:all .2s;
	  background:transparent;
	}
	.dot.active{border-color:var(--dot-active); background:var(--dot-active); box-shadow:0 0 0 4px #ffcc3340;}
	.dot:hover{opacity:1;transform:scale(1.08);}

	/* 鼠标图标外框 */
	.micn{
	  position: fixed;
	  right: 17px;
	  bottom: 40px;
	  width: 20px;
	  height: 35px;
	  border: 2px solid var(--dot);
	  border-radius: 50px;
	  z-index: 9;
	}

	/* 中间黄色滚轮 */
	.micn .wbar{
	  position: absolute;
	  left: 6px;
	  top: 7px;                        /* 初始位置 */
	  width: 3px;
	  height: 7px;
	  border-radius: 10px;
	  background: var(--dot-active);
	  will-change: transform, opacity; /* 性能优化 */
	  /*animation: wheelUp 1.0s ease-in-out infinite;*/
	  animation: wheelUpStep 1.2s steps(3, end) infinite; 
	}

	/* 连续上移→淡出→回到起点 */
	@keyframes wheelUp{
	  0%   { transform: translateY(0);    opacity: 1; }
	  60%  { transform: translateY(3px); opacity: 0; }
	  61%  { transform: translateY(-1px);  opacity: 0; }
	  100% { transform: translateY(0);    opacity: 1; }
	}
	/* 台阶式 */
	@keyframes wheelUpStep{
	  from { transform: translateY(0); }
	  to   { transform: translateY(3px); }
	}

	/* 无障碍：尊重系统“减少动态效果”设置 */
	@media (prefers-reduced-motion: reduce){
	  .micn .wbar{ animation: none; }
	}
	/* 标题排版示例 */
	.hero{ text-align: center;}
	.hero3{ width: 60%;}
	.hero-OM{ width: 90%;}
	.hero h1{font-size:50px;margin:0 0 25px 0; color: #FFF;}
	.hero p{color:var(--sub); font-size:36px; margin:0 auto 24px;line-height:1.3}
	.hero p.stit{ margin-bottom: 8px;}
	.hero-stry{ text-align: left; max-width:60%;}
	.hero-stry h1{ text-align: center;}
	.hero-stry .stry_fnt{ width: 80%; margin: 0 auto; padding-top: 50px;}
	.hero-stry p{  margin: 0; font-size: 20px; line-height: 140%; text-align: justify;}
	.hero .stry_fnt p{ font-size:20px; }
	.hero .btn{
	  display:inline-block;background:#ffcc33;color:#000; 
	  padding:12px 28px;border-radius:8px;text-decoration:none;
	  box-shadow:0 6px 18px #ffcc3355; font-size: 16px;
	  margin-top: 20px;
	}
	.hero .btn:hover{
		padding:14px 32px;
	}
	/* 让一屏一屏滚动更稳定：在 iOS 下避免橡皮筋导致跳页 */
	body{overscroll-behavior-y:none;}
	/* 若文字超高超出视窗，允许自然滚动 */
	.content .long{max-width:1000px}
	.hftr{ color: #aaa; font-size: 14px; position: fixed; bottom: 40px; left: 22px; z-index: 9;}
	 .hftr .cpy{ margin-right: 5px;}
    .datalst{
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		margin: 0 auto;
		
	}
	.datalst2{
		flex-wrap: wrap;
	}
	.datalst .item{
		text-align: center;	
		color: var(--sub);
		width: 32%;
		margin-bottom: 20px;
	}
	.datalst .item h3{
		font-size:clamp(28px,5vw,64px);
		color: #00b0f0;
		font-weight: bold;
	}
	.hero5 h1{
		font-size: clamp(20px,4vw,48px);
		margin-bottom: 30px;
		
	}
	.hero5 .datalst .item h3{
		font-size: clamp(20px,4vw,48px);
	}
	.hero5 .datalst .item .iconfont{
		font-size: clamp(12px,2vw,32px);
	}
	.hero5 .datalst .item .tit1{
		color: #4471c4;
	}
	.hero5 .datalst .item .tit2{
		color: #ec7c30;
	}
	.hero5 .datalst .item .tit3{
		color: #00caad;
	}
	.hero5 .datalst .item .tit4{
		color: #92d050;
	}
	.hero5 .datalst .item .tit5{
		color: #ffc000;
	}
	.hero5 .datalst .item .tit6{
		color: #00afef;
	}
	/* 背景音乐按钮 */
	.bgm{
	  position: fixed;
	  right: 16px;
	  bottom: 90px;   /* 和你右下角 UI 锚点错位开一点 */
	  color: #FFF;
	  opacity: 0.8;
	  display: grid; place-items: center;
	  z-index: 12;
	  backdrop-filter: blur(2px);
	  cursor: pointer;
	}
	.bgm:hover{ color: #FFF; opacity: 1; }
	
	/* 默认显示静音图标；播放时显示 sound；loading 时显示 spinner */
	.bgm .ico{ display: none; }
	.bgm .ico .iconfont{ font-size: 24px;}
	.bgm.muted  .ico-muted{ display: block; }
	.bgm.playing .ico-sound{ display: block; }
	.bgm.loading .spinner{ display: inline-block; }
	
	/* spinner */
	.bgm .spinner{
	  display:none;
	  width: 18px; height: 18px;
	  border: 2px solid rgba(255,255,255,.25);
	  border-top-color: #ffcc33;
	  border-radius: 50%;
	  animation: spin 0.9s linear infinite;
	}
	@keyframes spin{ to{ transform: rotate(360deg); } }
	
	
/* tooltip 气泡 */
[data-tip]:hover::after{
  content: attr(data-tip);
  position: absolute;
  right: 112%; /* 在元素左侧 */
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.8);
  color:#fff;
  font-size:13px;
  padding:6px 10px;
  border-radius:6px;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  opacity:0;
  animation: tipFadeIn .25s ease forwards;
  pointer-events:none;
  z-index:20;
}

/* ✅ 箭头（完整显示 + 不被遮挡） */
[data-tip]:hover::before{
  content:"";
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  right: calc(112% - 8px);   /* 🔸比原来多移出6px，让箭头完整显示 */
  width:0; height:0;
  border:6px solid transparent;
  border-left-color: rgba(0,0,0,.8);  /* 指向右边 */
  opacity:0;
  animation: tipFadeIn .25s ease forwards;
  z-index:21;  /* 🔸高于气泡，避免被覆盖 */
}
/* 🔸喇叭按钮的个别微调，贴得更近 */
.bgm[data-tip]:hover::after{ right:110%; }
.bgm[data-tip]:hover::before{ right: calc(110% - 8px); }
/* Tooltip 样式 */
.micn[data-tip]:hover::after{ right:110%;}
/* 小三角箭头 */
.micn[data-tip]:hover::before{ right: calc(110% - 8px);}
.kpi{
  font-variant-numeric: tabular-nums; /* 等宽数字，防跳动 */
  -webkit-font-smoothing: antialiased;
}
@keyframes tipFadeIn { to { opacity: 1; } }
@media screen and (min-width:1920px){
 .inav .mlogo img{ height: 60px;}
}
@media screen and (max-width:1700px){
.hero h1{font-size: 48px; margin-bottom: 15px;}
.hero3{ width: 85%;}
}

@media screen and (max-width:1440px){
.hero h1{font-size: 42px;}
}

@media screen and (max-width:1280px){
.inav .mlogo img{ height: 40px;}
.inav #menu .nvi ul li{ font-size: 15px;}
.hero h1{font-size: 36px;}
.datalst .item h3{ font-size: 48px;}
.hero3{ width: 70%;}
.hero .btn{ padding: 10px 24px; font-size: 14px;}
.hero5 .datalst .item h3{ font-size: 36px;}
.hero3{ width: 95%;}
}
@media screen and (max-width:769px){
.datalst .item h3{ font-size: 40px;}
}

@media screen and (max-width:600px){
.hero h1{ font-size: 20px;}
.datalst{ display: block;}
.datalst .item{ width: 100%; margin-bottom: 10px;}
.hero3{ width: 85%;}
.datalst2{ display: flex;}
.datalst2 .item{ width: 50%;}
.hero5 .datalst .item h3{ font-size: 24px;}
.hero5 .datalst .item .iconfont{ font-size: 18px;}
}