.hover-container {	
    position: fixed;
    bottom: 60px;  /* 距离浏览器窗口底部20px */
    right: 24px;   /* 距离浏览器窗口右侧20px */
    width: 49px;  /* 图片宽度 */
    height: auto;  /* 自动调整高度，保持比例 */
    z-index: 1000; /* 确保图片在其他内容之上 */
}

.fixed-top1{
	border: 1px;
	width: 48px;
	height: 48px;
	display: flex;  
	justify-content: center; /* 水平居中 */  
	align-items: center; /* 垂直居中 */ 
}

.trigger{
	width: 49px;
	height: 20px;
	text-align: center;
}

.trigger p{
	color: rgb(80, 80, 80);
}

.hover-container-qrcode {  
	background-color: rgb(235, 235, 235); 
    position: absolute; /* 绝对定位二维码图片 */  
    top: -450%; /* 初始位置在悬停容器的下方 */  
    left: -260%; /* 水平居中 */  
    transform: translateX(-50%); /* 根据自身宽度调整位置，实现水平居中 */  
    display: none; /* 初始时隐藏二维码图片 */  
	width: 206px;
	height: 270px;
	border-radius: 10px;
}

.hover-container:hover .hover-container-qrcode {  
    display: block; /* 当鼠标悬停在悬停容器上时显示二维码图片 */  
}

.layer-text-layer {  
        /* 这里可以添加一些间距或者边框样式等 */  
    margin: 12px 0; /* 上下间距，左右不变 */  
}  

.layer-text-layer p{  
    color: rgb(0, 0, 0);
}  
  
.text-layer {  
    text-align: center; /* 文本水平居中 */  
}  
  
.layer-image-layer {  
        /* 如果图片需要固定大小，可以添加以下样式 */  
    width: 160px; /* 示例宽度 */  
    height: 160px; /* 示例高度 */  
	margin-left: 24px;
	
}
  
.layer-image-layer img {  
    max-width: 100%; /* 保证图片不会超出容器 */  
    height: auto; /* 保持图片比例 */  
    display: block; /* 消除图片底部默认的空白 */  
    margin: 0 auto; /* 水平居中 */  
} 

.img-weixi{
	background-color: #007bff;
	width: 200%;
	height: 150px;
}

.outer-div1 {  
    /* 可以根据需要设置 outer-div 的样式，例如宽度、高度、背景等 */  
    width: 100%; /* 或者特定的宽度值 */  
    height: 50%; /* 或者特定的高度值 */  
    display: flex;  
    justify-content: center; /* 水平居中 */  
    align-items: center; /* 垂直居中 */  
}  
  
.inner-div2 {  
    /* 根据需要设置 inner-div 的样式，但通常不需要特定的宽度和高度 */
    text-align: center; /* 这对于图片居中不是必需的，但可以用于其他内联元素 */  
}  
  
.inner-div2 img {  
    /* 使图片铺满 inner-div */  
    height: auto; /* 保持图片的原始宽高比 */  
    /* 如果需要，可以添加其他图片样式，如 border-radius、object-fit 等 */  
}





.grid-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 30px;
	width: 300%;
	max-width: 100%;
	border-radius: 8px;
	/* 添加圆角 */
	overflow: hidden;
	/* 确保内容不会超出圆角边界 */
}

.video-container {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	cursor: pointer;
}

.thumbnail {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.play-button {
	position: absolute;
	top: 42%;
	left: 46%;
	transform: translate(-50%, -50%);
	font-size: 25px;
	color: white;
	border-radius: 50%;
	padding: 15px;
	cursor: pointer;
	transition: background-color 0.3s;
}

.video-wrapper {
	position: absolute;
	top: 0.01%;
	left: 0.01%;
	width: 99.9%;
	height: 99.9%;
	display: none;
}

.video-iframe {
	width: 100%;
	height: 100%;
}