/* 默认导航栏样式 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

body {
  font-family: 'Segoe UI', sans-serif;
}
#navbar {
  position: fixed;
  top: 0;
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  transition: all 0.3s ease;
  z-index: 1000;
  

}



/* 滚动后导航栏样式 */
.nav-scrolled {



  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  

  
}

/* 隐藏状态 */
.nav-hidden {
  transform: translateY(-100%);
  
}


.navbarbg{
	
	padding:50px 100px;
	
	width: 100%;

 height: 50px;
  
}
.logo {
  color: white;
  font-size: 1.8rem;
  transition: all 0.3s ease;
  text-indent: -9999px;

  
  background: url(../images/logo20.png) no-repeat;
  background-size:300px 50px ;

   width: 300px;
   float: left;
   margin-top: 0px;
   
   height: 50px;
   
 

}

.nav-links {
  list-style: none;
width: 40%;
float: right;	

}

.nav-links a {
  color: white;
  text-decoration: none;
}

/* 滚动后颜色变化 */

.nav-scrolled .logo{
 
  background: url(../images/logo10.png) no-repeat;
  background-size:170px 30px ;
  width: 170px;
  height: 30px;
  margin-top: 5px;
}


.nav-scrolled .nav-links .nav_main .nav a {
  color: #666;
}

.nav-scrolled .nav-links .nav_main .nav li.xian{ background: #666; }

.nav-scrolled .navbarbg{ 
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	width: 100%; height: 40px;  margin-top:-40px; 
		
		}
		



/* 测试内容区域（长页面） */
.section {
  height: 100vh; /* 每屏高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
  font-weight: bold;
}



/*网站导航*/
.nav_main{width:100%;height: 40px;position: relative;z-index: 3; }
.nav_main .nav{  }
.nav_main .nav li{float:left;width: 138px;line-height: 40px;display: block;position:
 relative;z-index: 10;font-size: 16px;text-align: center;transition: all .5s;}
.nav_main .nav li.xian{ width: 1px;height: 10px;background: #017CC5;margin-top: 15px; }
.nav_main .nav li a{display: block;color:#fff;font-size:16px;overflow: hidden;text-overflow:
 ellipsis;white-space: nowrap;}
.nav_main .nav li a:hover{  color: #c4c4c4;}

.nav_main .nav dl{width:1200%; height: 300px;    position: absolute;left:-1000%;top:100%;z-index: 12;
box-shadow: 3px 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  
  
  position: relative;}
.nav_main .nav dl{position: absolute;

opacity: 0;visibility: hidden;transition: all .6s ease 0s;
transform: translate3d(0, 10px, 0);
-moz-transform: translate3d(0, 10px, 0);
-webkit-transform: translate3d(0, 10px, 0);}

.nav_main .nav li:hover dl{opacity: 1;
visibility: visible;transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);}


.nav_main .nav  dl .dl100{ width: 25%; height: 300px; float: left; overflow: hidden;
-webkit-border-radius: 10px 0px 0px 10px;
-moz-border-radius: 10px 0px 0px 10px;
border-radius: 10px 0px 0px 10px;

}



.nav_main .nav  dl .dl200{
	 all: initial;
	
	width: 25%; height: 300px;float: left;overflow: hidden; 


}
.nav_main .nav  dl .dl200 h2{ font-size: 30px; padding: 50px 0 0 60px;}
.nav_main .nav  dl .dl200 p{ font-size: 16px; margin: 10px 0 10px 60px; }
.nav_main .nav  dl .dl200 .dl200_list{ 
	padding:0 0 0 20px;
}
.nav_main .nav  dl .dl200 .dl200_list ul{ 
  width:92%;
  overflow: hidden; padding: 20px; 
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
 border-radius: 10px;
 }
.nav_main .nav  dl .dl200 .dl200_list ul li{ 
	width: 110px;
	font-size: 18px;
}

.nav_main .nav  dl .dl200 .dl200_list ul li a{ color: #000; font-size: 18px; }
.nav_main .nav  dl .dl200 .dl200_list ul li a:hover{ color: #000; text-decoration: underline; }
.nav_main .nav  dl .dl300{ width: 25%;height: 300px; float: left;overflow: hidden;border: 1px solid red; }
.nav_main .nav  dl .dl400{ width: 20%;height: 300px; float: left;overflow: hidden;border: 1px solid red;}
.nav_main .nav dl .sanjiao{   position: absolute;
  right:200px;
  top: -8px}
  

  /*网站导航end*/

.video-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  z-index: -2; /* 置于内容下方 */
}

.video-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1)); /* 渐变遮罩 */
  z-index: -1; /* 覆盖在视频上方 */
}

  /*网站背景视频及黑色遮罩end*/