@charset "utf-8";
/* CSS Document */

.title{
	text-align:center;
	color:#999999;
	font-size:30px;
	font-weight:800;
	font-family:Tahoma, Geneva, sans-serif;
}

#ray-anim-videobox{
	display: block;
	width:80vw;
	margin:0 auto;
}

.video-row {
  display: grid; /* 建议使用 flex 而不是 inline-flex */
  flex-wrap: wrap; /* 核心：允许子元素换行 */
  grid-template-columns: repeat(auto-fit, minmax(356px, 1fr)); /* 响应式列布局 */
  gap: 40px;
  width:60vw;
  margin: 20px auto;
  justify-content: center; /* <-- 新增此行以实现内部居中 */
}
.video-x {
  /* float: left; <-- 移除此行 */
  /* margin: 10px 30px; <-- 移除此行，由父级的 gap 控制间距 */

  /* 保留的样式 */
  background: url(/assets/images/grid-loading.gif) no-repeat center center;
  width: 356px;
  overflow: hidden;
  /* (可选) display: inline-flex; 如果内部没有flex布局，也可以移除 */
}
.video-x > p {
	font-size: 12px;
	text-align: center;
}

.html5-tip{
	border-radius: 5px;
	background:rgb(197, 148, 3);
	padding:30px 50px;
	text-align:center;
	margin:auto;
	font-size:10px;
	font-weight:800;
	color:#FFF;
}




#ray-anim-wapper{
display: flex;
justify-content: center; /* 水平居中 */
}

/* 在父容器上定义变量 */
#ray-anim-showbox {
display: inline-flex;
margin: 20px 0;
position: relative;
gap: 10px; /* 使用 gap 属性来控制间距 */

/* --- 定义变量 --- */
--item-width: 200px; /* 子元素的宽度 */
--gap: 10px;        /* 子元素之间的间距 */
}

/* 统一 anim-item 和 overlay 的尺寸与盒模型 */
#ray-anim-showbox .anim-item,
#overlay {
box-sizing: border-box; 
width: var(--item-width); /* 使用变量 */
height: 363px;
border: #444 solid 2px;
}

#ray-anim-showbox .anim-item {
background: #fff;
overflow: hidden;
flex: 0 0 auto;
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
position: relative;
}

#ray-anim-showbox .anim-item img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* --- 蒙版区域 --- */
#overlay {
position: absolute;
top: 0;
left: 0;
border-color: transparent; /* 关键：用透明边框来匹配尺寸 */
background-color: rgba(26, 35, 126, 0.5);
mix-blend-mode: multiply;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
opacity: 0;
transform: translate3d(0, 0, 0); 
transition: opacity 0.4s ease,
            background-color 0.6s ease,
            transform 0.2s cubic-bezier(0.65, 0, 0.35, 1) 0s;
pointer-events: none;
z-index: 2;
}

/* 使用新的、精确计算的 hover 规则 */
#anim-1:hover ~ #overlay,
#anim-2:hover ~ #overlay,
#anim-3:hover ~ #overlay,
#anim-4:hover ~ #overlay {
opacity: 0.85;
}

#anim-1:hover ~ #overlay {
background-color: rgba(255, 0, 242, 0.3);
transform: translate3d(0, 0, 0);
}
#anim-2:hover ~ #overlay {
background-color: rgba(0, 166, 255, 0.3);
transform: translate3d(calc(1 * (var(--item-width) + var(--gap))), 0, 0);
}
#anim-3:hover ~ #overlay {
background-color: rgba(0, 255, 0, 0.3);
transform: translate3d(calc(2 * (var(--item-width) + var(--gap))), 0, 0);
}
#anim-4:hover ~ #overlay {
background-color: rgba(255, 153, 0, 0.3);
transform: translate3d(calc(3 * (var(--item-width) + var(--gap))), 0, 0);
}

/* Responsive tweaks */
@media (max-width:1200px){
	#ray-anim-showbox{width:calc(100% - 40px);gap:0}
	#ray-anim-showbox .anim-item, #overlay {
		width:22%;
		height:560px
	}
}
@media (max-width:700px){
	#ray-anim-showbox{flex-wrap:wrap;gap:0}
	#ray-anim-showbox .anim-item, #overlay {
		width:48%;
		height:320px
	}

	#anim-2:hover ~ #overlay {
		transform: translate3d(100%, 0, 0);
	}
	#anim-3:hover ~ #overlay {
		transform: translate3d(0%, 100%, 0);
	}
	#anim-4:hover ~ #overlay {
		transform: translate3d(100%, 100%, 0);
	}
}