* {
    box-sizing: border-box;
}
/* 重置a标签样式 */
a {
    color: inherit; /* 继承父元素的文字颜色 */
    text-decoration: none; /* 去掉下划线 */
}
 
/* 鼠标悬停时的样式 */
a:hover {
    text-decoration: none; /* 鼠标悬停时增加下划线 */
}
/* HTML和body的基本样式 */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 防止水平滚动 */
    width: 100%;
}
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-image: url('../img/pc_bg2.jpg'); /* 替换为您的背景图片 URL */
    background-repeat: no-repeat; /* 不重复背景图片 */
    display: flex;
    justify-content: center;
    align-items: center;
	margin-top:70px;
}

.container {
    text-align: center;
    width: 1350px;
}

h1 {
    color: #5c5c99;
    margin-bottom: 20px;
    font-size: 2.5em;
}

.button-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
	margin-top: 160px;
	margin-bottom: 20%;
	border: none;
	background: none;
	cursor: pointer;
	outline: none;
}

.button-container img{
	width:100%;
}
@keyframes opacity-change {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
 
/* 鼠标悬停时停止动画 */
.button-container:hover img {
  animation-play-state: paused;
}
.btn {
    padding: 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    color: white;
    background-color: #3498db;
    transition: background-color 0.3s;
}

.btn:nth-child(odd) {
    background-color: #9b59b6;
}

.btn:hover {
    opacity: 0.9;
}
.clear{clear:both;}
.three-images-row {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.three-image {
    margin-left: 10px;
}
.container_xz {
            background-color: rgba(255, 255, 255, 0.3); /* 半透明白色背景 */
            border-radius: 15px; /* 圆角 */
			padding-top: 50px;
			padding-bottom: 50px;
			padding-top: 50px;
			padding-bottom: 50px;
			margin-top: 5%;
			margin-bottom: 5%;
        }
        .button {
            background: linear-gradient(to right, #6a11cb, #2575fc);
            color: white;
            border: none;
            padding: 15px 20px;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s;
            flex: 1 1 calc(30% - 10px); /* 按钮宽度 */
            min-width: 150px; /* 最小宽度 */
        }
        .button:hover {
            background: linear-gradient(to right, #2575fc, #6a11cb);
        }
.container_xz img{
	margin: 10px;
}
footer {
    text-align: center;
    padding: 10px 0;
    position: relative; /* 确保 footer 在内容下方 */
    width: 100%;
    bottom: 0;
	font-size: 12px;
	color: #666;
}
@media (max-width: 768px) {
	.container img{
		width:80%;
	}
	.container_xz img{
		margin: 5px;
	}
	.button-container {
		margin-top: 20px;
		margin-bottom: 20%;
	}
	body {
		margin-top: 20px;
	}
	body {background-image: url('../img/mobi_bg2.jpg');}
}