/* 重置一些默认样式 */  
body, h1, p, ul, li, a {  
    margin: 0;  
    padding: 0;  
    font-family: Arial, sans-serif;
   
}  
  
body {  
    background-color: #f4f4f4;  
    color: #333;  
    line-height: 1.0;  
    padding: 20px;  
    max-width: 800px;  
    margin: 0 auto;  
} 

.background-container {  
  position: fixed;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  background-image: url("https://breakvip.playwoool.com/wp-content/uploads/2024/07/ec57d70dd0de69.jpg");  
  background-position: center;  
  background-repeat: no-repeat;  
  background-size: cover;  
  z-index: -1; /* 确保背景容器在内容之下 */  
}  
  
.background-container::after {  
  content: "";  
  position: absolute;  
  top: 0;  
  left: 0;  
  right: 0;  
  bottom: 0;  
  background-color: rgba(0, 0, 0, 0.5); /* 黑色背景，透明度50% */  
  z-index: 1; /* 确保覆盖层在背景图片之上 */  
}  
  

.content {  
  position: relative; /* 如果需要的话，为内容设置相对定位 */  
  z-index: 2; /* 确保内容在覆盖层之上 */  
  padding: 20px; /* 为内容添加一些内边距 */  
  /* 其他样式 */  
}

header {  
    background-color: rgba(255, 255, 255, 0.7) ; 
    color: #000;  
    padding: 20px;  
    text-align: center;  
    border-radius: 8px; 
}  
  
header h1 {  
    font-size: 2em;  
    margin-bottom: 0.5em;  
}  
  
header p {  
    font-size: 1.2em;  
    color: #2c682d;  
}  

.scroll-container {  
    position: relative; /* 或其他适合的定位方式，确保它不在背景图之上被遮挡 */  
    height: 100vh; /* 或其他适合的高度，确保可以滚动 */  
    overflow-y: auto; /* 允许垂直滚动 */  
    padding-top: /* 可能需要一些padding来避免内容被背景图遮挡 */  
}
  
.features {  
    margin-top: 20px;  
    padding: 20px;  
    background-color: #fff;  
    border-radius: 8px;  
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);  
}  
  
.features ul {  
    list-style: none;  
    padding: 0;  
}  
  
.features li {  
    padding: 10px;  
    border-bottom: 1px solid #eee;  
    font-size: 1.0em;  
}  
  
.features li:last-child {  
    border-bottom: none;  
}  
  

  
.download {  
    background-color: rgba(0,0,0,0.7);  
    color: #fff;  
    padding: 20px;  
    text-align: center;  
    border-radius: 8px;  
    margin-top: 10px;  
}  
  
.download h2 {  
    font-size: 1.8em;  
    margin-bottom: 0.5em;  
}  
  
.download p {  
    font-size: 1em;  
    color: #ccc;  
}  
  
.download-btn {  
    display: inline-block;  
    padding: 10px 20px;  
    font-size: 1em;  
    color: #fff;  
    background-color: #28a745;  
    border: none;  
    border-radius: 4px;  
    text-decoration: none;  
    margin-top: 10px;  
    cursor: pointer;  
}  
  
.download-btn:hover {  
    background-color: #218838;  
}  
/* 基本的截图样式 */  
.slideshow-container {
    position: relative;
    max-width: 800px; /* 调整容器宽度 */
    margin: auto;
    margin-top: 20px; 
    
}

.slide {
    display: none; /* 默认隐藏所有图片 */
}

.slide img {
    width: 100%; /* 图片宽度填充父容器 */
    border-radius: 8px; 
}

.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    padding: 16px;
    font-size: 20px;
   background-color: rgba(255, 255, 255, 0.8);
    color: black;
    border: none;
    z-index: 100;
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

  
/* 底部样式可以根据需要添加 */  
footer {  
    margin-top: 20px;  
    padding: 10px;  
    text-align: center;  
    font-size: 0.9em;  
    color: #666;  
}