@media (max-width: 1023px){
	body {
		background-image:url('../img/bg.jpg');
		/*height:2200px;*/
		width: 100%;
		height: 100vh;
		background-size:100% 100%;
		background-position:top left;
		background-repeat:repeat;
		margin:0;
		padding:0;
		position:relative;
	}
	.header {
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:190px;
		z-index:1;
	}

	.header a {
		display:block;
		width:100%;
		height:100%;
		background-image:url('../img/bg.jpg');
		background-size:cover;
		background-position:center center;
		text-indent:-9999px;
		z-index:2;
	}

.dBC{
    
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    padding-top: 165%;
}
	.container {
		margin-top:190px;
		height:100%;
		display:flex;
		align-items:center;
		justify-content:center;
	}

	.link {
		color:#fff;
		font-size:24px;
		text-align:center;
		text-shadow:2px 2px #000;
		cursor:pointer;
	}

	.button-container-top {
		display:flex;
		justify-content:center;
		align-items:center;
		margin-top:5px;
		position:absolute;
		bottom:45%;
		left:50%;
		transform:translateX(-50%);
	}


	.button-container-bottom {
		display:flex;
		justify-content:center;
		align-items:center;
		margin-top:5px;
		position:absolute;
		bottom:23%;
		left:50%;
		transform:translateX(-50%);
	}


	.button-container-bottom2 {
		display:flex;
		justify-content:center;
		align-items:center;
		margin-top:5px;
		position:absolute;
		bottom:15%;
		left:50%;
		transform:translateX(-50%);
	}

	.button {
		width:30px;
		height:30px;
		background-color:transparent;
		display:flex;
		justify-content:center;
		align-items:center;
		border-radius:5px;
		box-shadow:none;
		transition:all 0.2s ease-in-out;
		cursor:pointer;
	}

	.button:hover {
		transform:scale(0.5);
		box-shadow:none;
	}

	.button img {
		object-fit:contain;
	}

	.button span {
		display:none;
	}

	/* 隐藏所有图片 */
	.image {
		display:none;
	}

	/* 显示选中的图片 */
	.selected {
		display:block;
	}

	/* 图片区域居中 */
	.image-container > .center {
		display:flex;
		justify-content:center;
	}

	/* 圆形按钮样式 */
	.button {
		width:40px;
		height:40px;
		border-radius:20px;
		background-color:#fff9f9ed;
		margin-right:10px;
		cursor:pointer;
		transition:all 0.2s ease-in-out;
		/* 添加过渡效果 */
		transform:scale(0.7);
	}

	/* 按钮区域居中 */
	.button-container > .center {
		display:flex;
		justify-content:center;
	}

	/* 仅适用于 .image-container 中的元素 */
	.image-container .image {
		/* 样式设置 */
	}

	.image-container .selected {
		margin-top:-38%;
		max-width:80%;
		border-radius: 20px;
	}


	/* 仅适用于 .button-container 中的元素 */
	.button-container .button {
		/* 样式设置 */
	}

	.button-container .selected-button {
		/* 样式设置 */
	}
}

@media (min-width: 1024px) {

	body {
		max-width: 70%;
		margin: 0 auto;
		height: 200vh;
		background-image: url("../img/bg.jpg");
		background-size: contain; /* 背景图自适应容器 */
		background-position: center center;
		background-repeat: no-repeat;
		position: relative;
		padding: 0;
	}
	.header {
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:17.5%;
		z-index:1;
	}

	.header a {
		display:block;
		width:100%;
		height:100%;
		background-image:url('../img/bg.jpg');
		background-size: contain; /* 等比例缩小以适应容器大小 */
		background-position:center center;
		background-repeat: no-repeat;
		text-indent:-9999px;
		z-index:2;
	}
.dBC{
    
    display: flex;
    justify-content: center;
    flex-direction: column;
    /* align-content: center; */
    align-items: center;
    flex-wrap: nowrap;
    padding-top: 165%;
}

	.container {
		margin-top:190px;
		height:100%;
		display:flex;
		align-items:center;
		justify-content:center;
	}

	.link {
		color:#fff;
		font-size:24px;
		text-align:center;
		text-shadow:2px 2px #000;
		cursor:pointer;
	}

	.button-container-top {
		display:flex;
		justify-content:center;
		align-items:center;
		margin-top:5px;
		position:absolute;
		bottom:62%;
		left:50%;
		transform:translateX(-50%);
	}

.button-container-bottom {
    /* ... other styles ... */
    bottom: 20%; /* Adjust this value as needed */
    left: 50%;
    transform: translateX(-50%);
}

.button-container-bottom2 {
    /* ... other styles ... */
    bottom: 10%; /* Adjust this value as needed */
    left: 50%;
    transform: translateX(-50%);
}



	.button {
		width:30px;
		height:30px;
		background-color:transparent;
		display:flex;
		justify-content:center;
		align-items:center;
		border-radius:5px;
		box-shadow:none;
		transition:all 0.2s ease-in-out;
		cursor:pointer;
	}

	.button:hover {
		transform:scale(0.5);
		box-shadow:none;
	}

	.button img {
		object-fit:contain;
	}

	.button span {
		display:none;
	}

	/* 隐藏所有图片 */
	.image {
		display:none;
	}

	/* 显示选中的图片 */
	.selected {
		display:block;
	}

	/* 图片区域居中 */
	.image-container > .center {
		display:flex;
		justify-content:center;
	}

	/* 圆形按钮样式 */
	.button {
		width:40px;
		height:40px;
		border-radius:20px;
		background-size: contain;
		background-color:#fff9f9ed;
		margin-right:10px;
		cursor:pointer;
		transition:all 0.2s ease-in-out;
		/* 添加过渡效果 */
		transform:scale(0.3);
	}

	/* 按钮区域居中 */
	.button-container > .center {
		display:flex;
		justify-content:center;
		margin-top: -21%;

	}

	/* 仅适用于 .image-container 中的元素 */
	.image-container .image {
		/* 样式设置 */
	}

	.image-container .selected {
		margin-top:-44%;
		max-width:80%;
		height: 250px;
		border-radius: 20px;
	}



	/* 仅适用于 .button-container 中的元素 */
	.button-container .button {
		/* 样式设置 */
	}

	.button-container .selected-button {
		/* 样式设置 */
	}

}