:root {
	font-size: 1vw;
	/* 递增值 */
	--dzRem: 0.0521rem;
	--f20: 1.042rem;
	--f22: calc(var(--f20) - ((20 - 22) * var(--dzRem)));
	--f23: calc(var(--f20) - ((20 - 23) * var(--dzRem)));
	--f24: calc(var(--f20) - ((20 - 24) * var(--dzRem)));
	--f25: calc(var(--f20) - ((20 - 25) * var(--dzRem)));
	--f26: calc(var(--f20) - ((20 - 26) * var(--dzRem)));
	--f28: calc(var(--f20) - ((20 - 28) * var(--dzRem)));
	--f30: calc(var(--f20) - ((20 - 30) * var(--dzRem)));
	--f32: calc(var(--f20) - ((20 - 32) * var(--dzRem)));
	--f34: calc(var(--f20) - ((20 - 34) * var(--dzRem)));
	--f35: calc(var(--f20) - ((20 - 35) * var(--dzRem)));
	--f36: calc(var(--f20) - ((20 - 36) * var(--dzRem)));
	--f40: calc(var(--f20) - ((20 - 40) * var(--dzRem)));
	--f120: calc(var(--f20) - ((20 - 120) * var(--dzRem)));
	--f320: calc(var(--f20) - ((20 - 320) * var(--dzRem)));
	box-sizing: border-box;
}

/*通用样式*/
@font-face {
	font-family: 'CustomFont';
	src: url('../fonts/fzzq.TTF') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	/* 或者 optional */
}

/* 自定义样式 */
body,
html {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: 'CustomFont', sans-serif;
	font-size: clamp(1rem, 1.5vw + 0.5rem, 1.5rem);
}

.containercc {
	margin: 0;
	/* 移除顶部外边距 */
	min-height: 100vh;
	/* 设置高度为视口高度 */
	width: 100%;
	/* 设置宽度为视口宽度 */
	/* display: flex; */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-image: url('../images/bgsm.png');
	background-size: cover;
	/* 确保背景图片覆盖整个容器 */
	background-position: center;
	padding: 0;
	padding-bottom: 5rem;
	/* 确保没有内边距 */
	box-sizing: border-box;
	/* 确保内边距和边框不会增加元素的总宽度 */
}

.login,
.main,
.random-number-container {
	margin: 1rem auto 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 75rem;
	/* 设置相同的宽度 */
	/* height: 50vh; */
	/* 设置高度为视口高度的 50% */
}


/* 重置Bootstrap的默认样式 */
.header,
.input-group,
.btn {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

button {
	cursor: pointer;
	margin: 5px;
}

.zzshow {
	display: none;
}

/* 新增样式：使input-group相对定位，以便绝对定位图片 */
.input-group {
	position: relative;
	background-image: url('../images/tmbg.png');
	background-size: 100% 100%;
	/* 拉伸背景图片以填满整个容器 */
	background-repeat: no-repeat;
	/* 防止背景图片重复 */
	background-position: center;
	/* 居中显示背景图片 */
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* height: 100%; */
	height: auto;
	aspect-ratio: 1416/490;
}

/* 新增样式：使图片绝对定位在input-group的左上角 */
.cyrs-img {
	position: absolute;
	top: 38px;
	left: 50%;
	transform: translate(-50%, -50%);
	/*width: 300px;*/
}

.cyrs {
	position: absolute;
	top: .1rem;
	left: 50%;
	transform: translateX(-50%);
	width: 30rem;
	background: url(../images/ygbhbg.png) no-repeat center/cover;
	height: auto;
	aspect-ratio: 580/73;
	color: #fff;
	display: flex;
	font-size: var(--f40);
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding-top: .3rem;
}

/*.confirm, .btn-numcc {*/
/*    position: absolute; !* 绝对定位 *!*/
/*    bottom: -35px; !* 放置在底部边线正上方 *!*/
/*    left: 50%; !* 水平居中 *!*/
/*    transform: translateX(-50%); !* 调整水平位置 *!*/
/*    margin-left: auto; !* 将按钮向右对齐 *!*/
/*    padding: 0;*/
/*}*/

.exit {
	position: fixed;
	/* top: 10px;
	right: 10px; */
	top: 1rem;
	right: 1rem;
	z-index: 1000;
	/* 确保按钮在最上层 */
	/* width: 200px;
	height: 60px; */
	padding: 0;
}

/* 防止图片拉伸 */
.logo-img,
.xycj-img,
.cyrs-img,
.tccc-img {
	width: auto;
	/* 保持图片原始宽度 */
	height: auto;
	/* 保持图片原始高度 */
	max-width: 100%;
	/* 最大宽度为父容器宽度 */
	max-height: 100%;
	/* 最大高度为父容器高度 */
	object-fit: contain;
	/* 保持图片宽高比并完全显示 */
}

.tc {
	color: #081e61;
	padding: .5rem 3.2rem;
	border-radius: 5rem;
	letter-spacing: .4rem;
	cursor: pointer;
	background: linear-gradient(90deg, #d4b786, #f0e0be, #a97d55);
	font-size: var(--f24);
	font-weight: bold;
	font-family: '微软雅黑';
}

.banner {
	/*width: 40vh;*/
}

.banner h1 {
	margin-bottom: 2rem;
}

.xycj {
	background-image: linear-gradient(45deg, #e3cda4, #f3e6c6, #a97d55);
	-webkit-background-clip: text;
	color: transparent;
	font-size: var(--f120);
	letter-spacing: 1rem;
	font-weight: bold;
}

.xycj-img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.custom-input {
	color: #955b27;
	border-radius: 20px;
	border: solid 2px #a97d55;
	font-size: 3rem;
	text-align: center;
	width: 10rem;
	height: auto;
	aspect-ratio: 386/204;
	/*line-height: 90px;*/
	/*height: 90px;*/
	/* line-height: 10vh; */
}

.custom-input:focus {
	outline: none;
}

/*登录*/
#ygid::placeholder,
.custom-input::placeholder {
	/* font-size: 1.8rem; */
	color: #b0b0b0;
	/* 可以根据需要调整 placeholder 的颜色 */
	text-align: center;
}

/*内容*/
.main {
	display: none;
}

.header {
	/* position: absolute; */
	/* top: 55px; */
	/* left: 10vh; */
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* width: 40vh; */
	/* top: 3rem;
	left: 5rem; */
	/* width: 20rem; */
	padding: 3rem 0 0 4rem;
}

.header h1 {
	width: 20rem;
}

.count-header span {
	font-size: 1.5rem;
	color: #fff;
	letter-spacing: 10px;
}

.again {
	display: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"] {
	-moz-appearance: textfield;
}

/*随机数*/

/* 新增样式：随机数字样式 */
#random-number-container {
	font-size: var(--f320);
	/* 根据需要调整字体大小 */
	/*margin: 5px; !* 根据需要调整间距 *!*/
	background: linear-gradient(to bottom, #f4e7c6 18%, #fcca7c 57%, #f4e7c6);
	/* 文字渐变色 */
	-webkit-background-clip: text;
	/* 使背景应用于文字 */
	-webkit-text-fill-color: transparent;
	/* 使文字颜色透明以显示背景色 */
	background-clip: text;
	/* 兼容性处理 */
	text-fill-color: transparent;
	/* 兼容性处理 */
	/*margin-top: 30px;*/
	/*margin-bottom: 0;*/
	margin: 0;
	/* padding-top: 20px; */
	padding-top: 4rem;
	line-height: 1;
	/* font-weight: bold; */
}

.random-number-container {
	display: none;
	flex-direction: column;
	align-items: center;
	/* 水平居中 */
	justify-content: center;
	/* 垂直靠上 */
	text-align: left;
}

.count-header {
	position: absolute;
	top: 40px;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
	z-index: 1;
}

/*弹窗*/
.modal-dialog {
	margin-top: 30vh;
}

.modal-footer {
	border-top: none;
}

#ygid {
	/* width: 55vh; */
	width: 40rem;
	height: auto;
	aspect-ratio: 894/144;
	/*line-height: 10vh;*/
}

.eenumstr {
	font-size: 2rem;
	color: #e9d5b0;
	padding: 0 10px;
	line-height: 1;
	padding-top: 1rem;
}

.confirm-login,
.confirm,
.btn-numcc {
	position: absolute;
	/* 绝对定位 */
	bottom: 0;
	/* 放置在底部边线正上方 */
	left: 50%;
	/* 水平居中 */
	transform: translate(-50%, 50%);
	/* 调整水平位置 */
	margin-left: auto;
	/* 将按钮向右对齐 */
	width: auto;
	/* 保持图片原始宽度 */
	height: auto;
	/* 保持图片原始高度 */
	max-width: 100%;
	/* 最大宽度为父容器宽度 */
	max-height: 100%;
	/* 最大高度为父容器高度 */
	object-fit: contain;
	/* 保持图片宽高比并完全显示 */
	cursor: pointer;
	background: linear-gradient(90deg, #d4b786, #f0e0be, #a97d55);
	font-weight: bold;
	font-size: var(--f40);
	font-family: '微软雅黑';
	color: #081e61;
	padding: 1rem 6rem;
	border-radius: 5rem;
	letter-spacing: .4rem;
}