.ctitle {  
    display: inline-block;  
    /* 其他h1样式 */  
}  
  
.nameRemark {  
    display: inline-block;  
    margin-left: 10px;  
    /* 其他span样式 */  
}  
.nameRemark {
    border-radius: 3px;
    font-size: 12px;
    display: inline;
    color: #946328;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
    height: 17px;
    font-weight: unset;
    vertical-align: text-bottom;
    border: 1px solid #e3b579;
    line-height: 1.34;
}
.download-container {  
    position: relative; /* 设置为相对定位，以便子元素可以绝对定位 */  
    display: inline-block; /* 以便二维码容器能够紧跟在A标签旁边 */  
}  
.starGame {  
    position: relative; /* 设置为相对定位，以便子元素可以绝对定位 */  
    display: inline-block; /* 以便二维码容器能够紧跟在A标签旁边 */  
} 


.qrcode-container {
    position: absolute;
    top: -5%;
    left: -135px;
    width: 125px;
    height: 125px;
    display: none;
    z-index: 9999;
    background-color: orange; /* 橙色背景 */  
    border: 1px solid #ff8c00; /* 可选：添加一个与背景色相近的边框以增强效果 */  
      
    /* 如果二维码图片本身没有边距，可能需要给容器添加内边距来避免内容紧贴边框 */  
    padding: 3px; /* 根据需要调整 */ 
} 
.qrcode-container-2 {
position: absolute;
    top: -135%;
    left: -135px;
    width: 125px;
    height: 125px;
    display: none;
    z-index: 9999;
    background-color: orange; /* 橙色背景 */  
    border: 1px solid #ff8c00; /* 可选：添加一个与背景色相近的边框以增强效果 */  
      
    /* 如果二维码图片本身没有边距，可能需要给容器添加内边距来避免内容紧贴边框 */  
    padding: 3px; /* 根据需要调整 */ 
}
.qrcode-container-3 {
    position: absolute;
    top: -276%;
    left: -135px;
    width: 125px;
    height: 125px;
    display: none;
    z-index: 9999;
    background-color: orange; /* 橙色背景 */  
    border: 1px solid #ff8c00; /* 可选：添加一个与背景色相近的边框以增强效果 */  
      
    /* 如果二维码图片本身没有边距，可能需要给容器添加内边距来避免内容紧贴边框 */  
    padding: 3px; /* 根据需要调整 */ 
}
.qrcode {  
    width: 100%; /* 二维码图片宽度设置为容器宽度 */  
    height: auto; /* 高度自动以保持比例 */  
}  
/* 如果有需要，添加媒体查询来隐藏小屏幕设备上的二维码 */  
@media (max-width: 968px) {  
    .qrcode-container,.qrcode-container-2,.qrcode-container-3 {  
        display: none !important;  
    }  
}
/* 设置默认的字体大小为26px */  
.infotextkeyapp {  
    font-size: 1em;  
    text-decoration: none; /* 移除下划线（如果需要的话） */  
    color: #ff3100;
}  
  
/* 当鼠标划过时，确保字体大小仍为26px（这一步实际上是多余的，因为上面已经设置了） */  
.infotextkeyapp:hover {  
    font-size: 1em;  
    /* 这里可以添加鼠标划过时的其他样式，比如颜色变化 */  
    /* color: #your-hover-color; */  
   color: #261753;
}
.m-fold-txt.expand {
	display: block;
	max-height: none!important;
}
    .video-container {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%; /* 16:9的宽高比 */
    }

    .video-container video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
   .orange-link {
        display: inline-block; /* 使得可以设置宽度和高度 */
        height: 45px; /* 固定高度 */
        line-height: 45px; /* 垂直居中文本 */
        padding: 0 16px; /* 调整内边距以适应固定高度 */
        border: 1px solid #000; /* 边框 */
        background-color: orange; /* 背景色 */
        color: black; /* 字体颜色 */
        text-decoration: none; /* 去除链接下划线 */
        font-weight: bold; /* 加粗字体 */
        transition: all 0.3s ease; /* 过渡效果 */
        text-align: center; /* 文本居中 */
    }
    
    .orange-link:hover {
        background-color: darkorange; /* 鼠标悬停背景色 */
        color: white; /* 鼠标悬停字体颜色 */
    }
.qr-code-container {  
    position: absolute; /* 或者其他定位方式，如relative, fixed等 */  
    /* 其他样式，如宽度、高度、背景等 */  
    z-index: 100; /* 确保二维码显示在其他内容之上 */  
}  
.item:hover .qr-code-container {  
    display: block; /* 鼠标划过时显示二维码容器 */  
}

.game-cover {  
    /* 设置容器的宽度和高度，或者让它由其父元素决定 */  
    /* 如果.game-cover没有父元素或需要自适应屏幕宽度，可以使用百分比或视窗单位（vw） */  
    width: 100%; /* 假设你希望它占据父元素的全部宽度 */  
    /* height 可以根据需要设置，或者通过padding-bottom技巧来保持比例 */  
    position: relative; /* 设置为相对定位，以便内部绝对定位的元素可以定位 */  
    overflow: hidden; /* 如果图片比容器大，隐藏多余的部分 */  
}  
  
.game-cover img {  
    /* 假设这是你想要设置百分比大小的图片 */  
    width: 100%; /* 宽度设置为100%，高度将自动调整以保持比例 */  
    height: auto; /* 让高度自动调整以保持图片的原始比例 */  
    display: block; /* 消除图片底部的空白 */  
}  
  
.overlay {  
    position: absolute;  
    bottom: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background: rgba(0, 0, 0, 0); /* 初始透明 */  
    transition: background 0.3s ease-in-out;  
    display: flex;  
    flex-direction: column;  
    justify-content: flex-end;  
    align-items: center;  
    text-align: center;  
    padding: 20px; /* 为标题和按钮添加一些内边距 */  
    box-sizing: border-box;  
    overflow: hidden; /* 确保内容不会超出图片范围 */  
    opacity: 0; /* 初始隐藏 */  
    visibility: hidden; /* 初始隐藏 */  
    display: flex; /* 已经是flex容器了 */  
    justify-content: center; /* 水平居中（已经在你的样式中）*/  
    align-items: center; /* 垂直居中 */  
}  
  
.title {  
    color: #fff;  
    margin-bottom: 10px; /* 标题和按钮之间的间距 */  
    transition: transform 0.3s ease-in-out; /* 用于动画滑动效果 */  
}  
  
.buttons {  
    display: flex;  
    justify-content: center;  
    align-items: center; /* 确保按钮垂直居中 */  
}  
  
.btn-start, .btn-download {  
    background: orange;  
    color: #fff;  
    border: none;  
    padding: 10px 20px;  
    margin: 0 5px;  
    cursor: pointer;  
}  
  
@keyframes softBackgroundAnimation {  
  0% {  
    background: rgba(255, 100, 100, 0.6); /* 初始颜色 */  
  }  
  25% {  
    background: rgba(100, 255, 100, 0.8); /* 过渡颜色1 */  
  }  
  50% {  
    background: rgba(100, 100, 255, 0.4); /* 过渡颜色2 */  
  }  
  75% {  
    background: rgba(255, 200, 100, 0.7); /* 过渡颜色3 */  
  }  
  100% {  
    background: rgba(255, 100, 100, 0.6); /* 回到初始颜色 */  
  }  
} 



  
.hover-bar {  
  position: absolute;  
  bottom: 0;  
  left: 0;  
  width: 100%;  
  height: 50px;  
  line-height: 50px;  
  /* 应用动画 */  
  animation: softBackgroundAnimation 3s ease-in-out infinite;  
  color: #fff; /* 使用白色或高对比度的颜色 */  
  text-align: center;  
  font-size: 18px; /* 增大字体大小 */  
  font-weight: bold; /* 字体加粗 */  
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加文字阴影 */  
}  
  
/* hover 时的样式变化（可选） */  
.hover-bar:hover {  
  /* 这里可以添加 hover 时的样式变化，比如改变文字颜色或阴影 */  
  color: #000;  
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);  
  /* 如果你还想改变 hover 时的背景渐变，可以在这里添加 */  
  /* 应用动画 */  
}
.game-cover:hover .overlay {  
    background: rgba(0, 0, 0, 0.5); /* 鼠标划过时半透明 */  
    opacity: 1;  
    visibility: visible;  
}  
  
.game-cover:hover .hover-bar {  
    bottom: -50px; /* 隐藏底部的半透明横条 */  
    opacity: 0;  
}  
  
.game-cover:hover .title {  
    transform: translateY(-50%); /* 标题向上滑动到图片中间 */  
}  
  
/* 针对小屏幕设备，如手机，可能需要调整按钮大小或间距 */  
@media (max-width: 768px) {  
    .btn-start, .btn-download {  
        padding: 5px 10px;  
    }  
    /* 其他可能的调整... */  
}

.btn-start, .btn-download, .buttons a {    
    background: orange;    
    color: #fff;    
    border: none;    
    padding: 10px 20px;    
    margin: 0 5px;    
    text-decoration: none; /* 移除下划线 */  
    cursor: pointer;    
    display: inline-block; /* 确保与其他元素一致 */  
    /* 如果需要按钮间的间距，可以在这里添加 */  
}    
  
/* 针对小屏幕设备，如手机，可能需要调整按钮大小或间距 */    
@media (max-width: 768px) {    
    .btn-start, .btn-download, .buttons a {    
        padding: 5px 10px;    
    }    
    /* 其他可能的调整... */    
}  
  
/* 额外的 hover 样式（如果需要） */  
.buttons a:hover {  
    background-color: darkorange; /* 例如，改变背景色为深橙色 */  
}

  
 
 /* 默认样式，应用于所有设备，包括电脑端 */  
.qre-code {    
  width: 115px !important;    
  height: 115px !important;     
  margin-bottom: 10px; /* 根据需要调整与标题的间距 */    
  border: 3px solid orange; /* 橙色边框 */    
  background-color: #fff; /* 如果二维码图片有透明部分，设置背景色 */    
  display: block; /* 确保块级显示 */    
}  



.img-subtle-3d {  
    animation: subtleShake 2s ease-in-out infinite;  
    transform-origin: center center;  
    /* 确保图片保持在其原始位置 */  
    position: relative;  
    /* 可选：为了看到3D效果，需要设置perspective属性 */  
    perspective: 1000px;  
  }  
  
  @keyframes subtleShake {  
    0% {  
      transform: scale(1) rotateX(0deg) rotateY(0deg);  
    }  
    25% {  
      /* 轻微放大和旋转 */  
      transform: scale(1.005) rotateX(0.5deg) rotateY(-0.5deg);  
    }  
    50% {  
      /* 另一个方向的轻微放大和旋转 */  
      transform: scale(1.003) rotateX(-0.3deg) rotateY(0.4deg);  
    }  
    75% {  
      /* 再次变化 */  
      transform: scale(1.004) rotateX(0.2deg) rotateY(-0.2deg);  
    }  
    100% {  
      transform: scale(1) rotateX(0deg) rotateY(0deg);  
    }  
  }