/* 基本样式 */  
        html, body {  
            height: 100%; 
			width:100%;			
            margin: 0;  
            display: flex;  
            //justify-content: center;  
            align-items: center;  
            flex-direction: column;  
			background-color: black;  
			color: white;  
			font-family: Arial, sans-serif;
            
        }  
		.video-container-wrapper {  
			display: grid;  
			place-items: center; /* 居中子元素 */  
			height: 60vh; /* 使用视口高度 */  
		}  
  
		.video-container {  
			border: 2px solid #a2a;  
			padding: 10px; /* 固定的内边距 */  
			/* 假设我们想要.video-container本身也占据一定的视口宽度和高度，  
			但在这里，我们只是通过外层.video-container-wrapper来控制位置 */  
			width: 100%; /* 或者使用vw单位，如width: 60vw; */  
			box-sizing: border-box; /* 包含padding和border在宽度内 */  
			text-align: center;
		}  

        .container {  
            display: flex;  
			flex-direction: column; /* 垂直排列子元素 */  
			align-items: flex-start; /* 子元素在交叉轴上的对齐方式，flex-start即顶部对齐 */  
			width: 100%;  
			max-width: 960px;  
			text-align: center; /* 水平居中 */  	
			margin-top: 100px; /* 悬浮框高度 */
            padding: 20px;
        }  
        video {  
            width: 100%;  
            max-width: 960px; /* 保持视频的最大宽度与容器一致 */  
            height: auto; /* 保持视频的原始宽高比 */  
        }  
        .hfad {  
            width: 100%;  
            max-width: 960px; /* 保持广告的最大宽度与容器一致 */  
            /*height: 70px;*/  
            background-size: cover;  
            background-position: center;  
            margin-top: 0px;  
		
			
        }  

		.xtad-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: left; /* 使广告之间均匀排列 */
		}

		.xtad-wrapper {
			display: flex;
			flex-direction: column; /* 图片和文字垂直排列 */
			align-items: center; /* 让图片和文字居中对齐 */
			margin: 0px; /* 广告之间的间距 */
			width: 100px; /* 设置广告宽度 */
			background-color: #000000; /* 可以给广告一个背景颜色 */
			padding: 10px; /* 内部间距，避免内容贴边 */
			border-radius: 5px; /* 给广告整体加一点圆角 */
			box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 添加阴影效果 */
		}

		.xtad-img {
			width: 100%; /* 控制图片的大小 */
			max-width: 96px; /* 确保图片不超过广告容器宽度 */
			margin-bottom: 5px; /* 图片和文字之间的小间距 */
		}

		.xtad-text {
			font-size: 14px;
			color: #FFFFFF;
			text-align: center;
			margin: 0; /* 去掉 p 标签的默认外边距 */
		}
		
		/* 广告容器的样式 */
		.wzad-wrapper {
			width: 455px;
			height: 18px;
			margin: 5px; /* 每个广告之间的外边距 */
			padding: 3px; /* 内边距 */
			background-color: orange; /* 背景颜色 */
			border: 1px solid #ddd; /* 边框颜色 */
			border-radius: 10px; /* 圆角边框 */
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
			text-align: center;
			justify-content: center;
			transition: transform 0.2s, box-shadow 0.2s; /* 添加动画效果 */
		}
		/* 当鼠标悬停时，广告容器放大并增加阴影 */
		.wzad-wrapper:hover {
			transform: scale(1.05); /* 放大效果 */
			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 增加阴影效果 */
		}
		/* 广告文字的样式 */
		.wzad-text {
			font-size: 14px; /* 字体大小 */
			color: #000000; /* 文字颜色，类似链接的蓝色 */
			text-decoration: none; /* 去掉下划线 */
			display: block; /* 让文字换行 */
			text-align: center; /* 文字居中 */
			justify-content: center;
			margin-top: 0px;
			font-weight: bold; /* 加粗字体 */
			transition: color 0.2s; /* 当鼠标悬停时颜色变化的动画 */
		}

		/* 鼠标悬停在广告文字时 */
		.wzad-text:hover {
			color: #000000; /* 改变颜色 */
		}
		
		
		.video-list {  
			display: flex;  
			flex-wrap: wrap;  
			padding: 10px;  
			justify-content: space-between; /* 可选，用于在项之间添加空间 */  
	
		}  
  
		.video-item {  
			width: 300px; /* 减去外边距的影响 */  
			margin: 0px;  
			box-sizing: border-box;  
			position: relative; /* 如果需要绝对定位子元素 */  
			overflow: hidden; /* 防止图片溢出 */  
		}  
  
		.video-item img {  
			width: 100%;  
			height: auto%; /* 尝试填充整个容器，但可能会被裁剪 */  
			object-fit: cover; /* 保持宽高比，裁剪以适应容器 */  
			display: block; /* 移除图片下方的默认间隙 */  
		}  
		.video-info {  
			margin-top: 10px;  
			font-size: 0.9em;  
			background-color: black;  
			color: white;  
		}  

	
      
		/* 顶部悬浮框 */
        .fixed-top-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #333;
            color: white;
            padding: 0px 0px;
            z-index: 1000;
            display: flex;
            flex-direction: column; /* 让内部元素垂直排列 */
            align-items: center;
            /*box-sizing: border-box;*/
        }

        /* 左侧 LOGO 样式 */
        .logo {
            font-size: 40px;
            font-weight: bold;
            text-decoration: none;
            color: orange;
        }

        /* 右侧链接容器 */
        .link-container {
			flex: 1; /* 独占一行 */
            padding: 0px;
            display: flex;
			margin-right: 10px;
            /*flex-wrap: wrap;*/  /* 使链接分成两排 */
            gap: 5px;        /* 链接之间的间距 */
        }

        /* 每个链接的样式 */
        .link {
            color: white;
            text-decoration: none;
            padding: 5px 10px;
        }

        /* 当鼠标悬停在链接上时的样式 */
        .link:hover {
            background-color: #555;
            border-radius: 3px;
        }
		.nav-row {
			display: flex;
            /*justify-content: center; *//* 中间对齐 */
            gap: 10px; /* 控制两个元素的间距 */
            width: 100%; /* 占满导航栏宽度 */
            /*margin-bottom: 0px;*/ /* 第一行和第二行之间的间距 */
        }

        /* 给内容区添加 margin-top 以避免被悬浮框遮挡 */
       
		 .item1 {
				flex: 0 0 50%; /* 每个元素占据50%空间 */
				padding: 10px;
				box-sizing: border-box;
				text-align: center; /* 内容居中 */
			}
			 .item2 {
				flex: 0 0 50%; /* 每个元素占据50%空间 */
				padding: 10px;
				box-sizing: border-box;
				text-align: center; /* 内容居中 */
			}
		/*LOGO标题*/
		 .logo-title {
			align-items: center;
			font-size: 40px;
			box-sizing: border-box;
            
			text-align: right;
			/*margin-right: 10px;*/
            /*border: 1px solid #000;*/
        }
		
		 /* 搜索框容器 */
        .search-container {
			align-items: center;
            box-sizing: border-box;
           
            /*border: 1px solid #000;*/
            max-width: 20%;
			/*margin-top 10px*/
            /*margin: auto;*/
            position: relative;
			text-align: left;
        }

        /* 搜索框输入 */
        .search-input {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            outline: none;
        }

        /* 搜索按钮 */
        .search-btn {
            position: absolute;
            right: -18px;
            top: 50%;
            transform: translateY(-50%);
            padding: 5px 10px;
            border: none;
            background-color: #007BFF;
            color: white;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
        }

        /* 热门候选词列表 */
        .suggestions-list {
            display: none;
            position: absolute;
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: white;
            max-height: 200px;
            overflow-y: auto;
            z-index: 1000;
            margin-top: 5px;
        }

        /* 每个候选词项 */
        .suggestion-item {
            padding: 10px;
            cursor: pointer;
            text-decoration: none;
            display: block;
            color: #333;
        }

        /* 鼠标悬停效果 */
        .suggestion-item:hover {
            background-color: #f0f0f0;
        }
		.search-div {
            position: fixed;
            
            width: 100%;
			max-width: 960px; 
            height: 100%;
            background-color: rgba(256, 256, 256, 1); /* 半透明黑色背景 */
            display: none; /* 默认隐藏 */
            justify-content: center;
            align-items: center;
			text-align: center; /* 水平居中 */  	
            color: white;
            font-size: 24px;
            z-index: 1001; /* 保证在最顶层 */
        }
		.search-container-in {
            width: 90%;
            /*max-width: 600px;*/
            margin: auto;
            padding: 10px;
			margin-top: 0;
            box-sizing: border-box;
        }
		.search-bar {
            display: flex;
            margin-bottom: 20px;
        }

        /* 输入框样式 */
        .search-input-in {
            flex: 1;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px 0 0 5px;
            outline: none;
        }

        /* 按钮样式 */
        .cancel-btn, .search-btn-in {
            padding: 10px 15px;
            font-size: 16px;
            border: 1px solid #ccc;
            cursor: pointer;
            outline: none;
        }

        .cancel-btn {
            border-radius: 0 5px 5px 0;
            background-color: #f44336;
            color: white;
            border-left: none;
        }

        .search-btn-in {
            border-radius: 0 5px 5px 0;
            background-color: #007BFF;
            color: white;
            border-left: none;
        }
		 /* 列表容器样式 */
        .search-list-container {
            max-height: 80vh; /* 控制最大高度 */
			
            overflow-y: auto; /* 垂直滚动条 */
            border: 1px solid #ccc;
            padding: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px; /* 设置选项之间的间距 */
            box-sizing: border-box;
        }

        /* 列表项样式 */
        .search-list-item {
            padding: 8px 12px;
            background-color: #eeeeee;
           
            text-decoration: none;
            border-radius: 5px;
			color: #000000;
            display: inline-block;
            white-space: nowrap; /* 防止单个列表项内部换行 */
        }

        .search-list-item:hover {
            background-color: #0056b3;
        }
		
       /* 手机适配样式 */  
        @media (max-width: 1280px) {  
		   html, body {  
            height: 100%; 
			width: 100%;			
            margin: 0;  
            display: flex;  
            /*justify-content: center;  */
            align-items: center;  
            flex-direction: column;  
			background-color: black;  
			color: white;  
        }  
		 .container {  
            display: flex;  
			flex-direction: column; /* 垂直排列子元素 */  
			align-items: flex-start; /* 子元素在交叉轴上的对齐方式，flex-start即顶部对齐 */  
			width: 100%;  
			max-width: 960px;  
			text-align: center; /* 水平居中 */  	
			
            padding: 20px;
			margin-top: 70px; /* 根据悬浮框的高度进行调整 */
			width:100%;	
        }  

		.video-list {  
			display: flex;  
			flex-wrap: wrap;  
			padding: 10px;  
			justify-content: space-between; /* 可选，用于在项之间添加空间 */  
	
		}  
  
		.video-item {  
			width: 48%; /* 减去外边距的影响 */  
			margin: 0px;  
			box-sizing: border-box;  
			position: relative; /* 如果需要绝对定位子元素 */  
			overflow: hidden; /* 防止图片溢出 */  
		}  
  
		.video-item img {  
			width: 100%;  
			height: auto%; /* 尝试填充整个容器，但可能会被裁剪 */  
			object-fit: cover; /* 保持宽高比，裁剪以适应容器 */  
			display: block; /* 移除图片下方的默认间隙 */  
		}  
		.video-info {  
			margin-top: 8px;  
			font-size: 0.9em;  
			background-color: black;  
			color: white;  
		}  

		
            .hfad {  
                
                width: 100%;  
				max-width: 960px; /* 保持广告的最大宽度与容器一致 */  
				background-size: cover;  
				background-position: center;  
				margin-top: 0px;  
            }
			.xtad-container {
				display: flex;
				flex-wrap: wrap;
				justify-content: left; /* 使广告之间均匀排列 */
			}

			.xtad-wrapper {
				display: flex;
				flex-direction: column; /* 图片和文字垂直排列 */
				align-items: center; /* 让图片和文字居中对齐 */
				margin: 0px; /* 广告之间的间距 */
				width: 60px; /* 设置广告宽度 */
				background-color: #000000; /* 可以给广告一个背景颜色 */
				padding: 10px; /* 内部间距，避免内容贴边 */
				border-radius: 5px; /* 给广告整体加一点圆角 */
				box-shadow: 0 2px 2px rgba(0,0,0,0.1); /* 添加阴影效果 */
			}

			.xtad-img {
				width: 100%; /* 控制图片的大小 */
				max-width: 50px; /* 确保图片不超过广告容器宽度 */
				margin-bottom: 3px; /* 图片和文字之间的小间距 */
			}

			.xtad-text {
				font-size: 8px;
				color: #FFFFFF;
				text-align: center;
				margin: 0; /* 去掉 p 标签的默认外边距 */
			}
				/* 广告容器的样式 */
			.wzad-wrapper {
				width: 45%;
				height: 18px;
				margin: 5px; /* 每个广告之间的外边距 */
				padding: 3px; /* 内边距 */
				background-color: orange; /* 背景颜色 */
				border: 1px solid #ddd; /* 边框颜色 */
				border-radius: 10px; /* 圆角边框 */
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
				text-align: center;
				justify-content: center;
				transition: transform 0.2s, box-shadow 0.2s; /* 添加动画效果 */
			}
			/* 当鼠标悬停时，广告容器放大并增加阴影 */
			.wzad-wrapper:hover {
				transform: scale(1.05); /* 放大效果 */
				box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 增加阴影效果 */
			}
			/* 广告文字的样式 */
			.wzad-text {
				font-size: 14px; /* 字体大小 */
				color: #000000; /* 文字颜色，类似链接的蓝色 */
				text-decoration: none; /* 去掉下划线 */
				display: block; /* 让文字换行 */
				text-align: center; /* 文字居中 */
				justify-content: center;
				margin-top: 0px;
				font-weight: bold; /* 加粗字体 */
				transition: color 0.2s; /* 当鼠标悬停时颜色变化的动画 */
			}
	
			/* 鼠标悬停在广告文字时 */
			.wzad-text:hover {
				color: #000000; /* 改变颜色 */
			}
		
			 .playlist {  
                
                width: 100%;  
				max-width: 960px; /* 保持广告的最大宽度与容器一致 */  
				background-size: cover;  
				background-position: center;  
				margin-top: 0px;  
            }
			/* 顶部悬浮框：保持 LOGO 在左侧，链接在右侧并分成两排 */
			.fixed-top-bar {
				display: flex;
				padding: 0px;
				
			}
			 .item1 {
				flex: 1 1 45%; /* 每个元素占据50%空间 */
				text-align: center; /* 内容居中 */
				padding: 2px;
			}
			 .item2 {
				flex: 1 1 55%; /* 每个元素占据50%空间 */
				text-align: center; /* 内容居中 */
				padding: 2px;
			}
			.logo-title {
				margin-bottom : 0;
				width: 100%
				justify-content: center;
				/*align-items: center;*/
				font-size: 20px;
				/*box-sizing: border-box;*/
				padding: 0px;
				text-align: right;
				/*margin-right: 10px;*/
				/*border: 1px solid #000;*/
			}
			/* LOGO 在手机上居中 */
			.logo {
				font-size: 20px; /* LOGO字体大小适配手机 */
				flex-basis: 20%; /* LOGO占整行 */
				text-align: right; /* LOGO居中显示 */
					justify-content: center;
			}
	
			/* 链接容器居中显示，分成两排 */
			.link-container {
				margin-top: 3px;
				flex: 1 1 100%; /* 独占一行 */
				box-sizing: border-box;
				flex-wrap: wrap; /* 允许链接换行 */
				justify-content: center; /* 链接容器居中对齐 */
			}

			/* 每个链接分成两排，保持居中 */
			.link {
				font-size: 10px; 
				flex-basis: calc(100% / 4 - 10px); /* 每个链接占据1/3宽度 */
				text-align: center; /* 链接居中显示 */
				padding: 2px 0; /* 增加点击区域 */
			}	

			/* 内容区的顶部间距调整，避免被悬浮框遮挡 */
			
		.nav-row {
			display: flex;
          
            gap: 0px; /* 控制两个元素的间距 */
            width: 100%; /* 占满导航栏宽度 */
          
        }
			/* 搜索框输入 */
        .search-input {
            width: 100%;
            padding: 5px;
            font-size: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            outline: none;
        }
		.search-container {
			margin-bottom : 0;
			width: 100%
            box-sizing: border-box;
            max-width: 80%;
			text-align: left;
        }
        /* 搜索按钮 */
        .search-btn {
            position: absolute;
			 padding: 5px;
            right: -10px;
            top: 50%;
            transform: translateY(-50%);
            padding: 5px 10px;
            border: none;
            background-color: #007BFF;
            color: white;
            font-size: 10px;
            border-radius: 5px;
            cursor: pointer;
        }
			 /* 输入框样式 */
        .search-input-in {
            flex: 1;
            padding: 5px;
            font-size: 10px;
            border: 1px solid #ccc;
            border-radius: 5px 0 0 5px;
            outline: none;
        }

        /* 按钮样式 */
        .cancel-btn, .search-btn-in {
            padding: 5px 7px;
            font-size: 10px;
            border: 1px solid #ccc;
            cursor: pointer;
            outline: none;
        }

        .cancel-btn {
            border-radius: 0 5px 5px 0;
            background-color: #f44336;
            color: white;
            border-left: none;
        }

        .search-btn-in {
            border-radius: 0 5px 5px 0;
            background-color: #007BFF;
            color: white;
            border-left: none;
        }
		 /* 列表容器样式 */
        .search-list-container {
            max-height: 80vh; /* 控制最大高度 */
			
            overflow-y: auto; /* 垂直滚动条 */
            border: 1px solid #ccc;
            padding: 5px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px; /* 设置选项之间的间距 */
            box-sizing: border-box;
        }

        /* 列表项样式 */
        .search-list-item {
			font-size: 15px;
            padding: 4px 4px;
            background-color: #eeeeee;
			color: #000000;
          
            text-decoration: none;
            border-radius: 10px;
            display: inline-block;
			
            white-space: nowrap; /* 防止单个列表项内部换行 */
        }

        .search-list-item:hover {
            background-color: #0056b3;
        }
        }