html,
body {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

.welcomeContainer {
	position: relative;
	height: 100%;
	/* background: url('../img/bg.jpg') no-repeat; */
	/* background-size: cover; */
	box-sizing: border-box;
}

#waterContainer {
	position: absolute;
	z-index: 1;
	width: 100vw;
	height: 100vh;
	background-image: url(../img/bg.jpg);
	background-size: 100% 100%;
}

#waterContainer img{
	/* position: absolute; */
	
}

.logo {
	display: block;
	margin: 0 auto;
	position: absolute;
	/* top: 50px; */
	top: 7vh;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	/* width: 280px; */
	width: 14.58vw;
}

.welcomeTitle {
	display: block;
	margin: 0 auto 0;
	position: absolute;
	/* top: 190px; */
	top: 21vh;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	/* width: 800px; */
	width: 80vw;
	/* opacity: 0; */
	transform-origin: 0% 0%;
}

.clockContainer {
	width: 440px;
	aspect-ratio: 679/535;
	height: auto;
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	background: url('../img/biao.png') no-repeat;
	background-size: 100%;
	transform-origin: 50% 100%;
	/* opacity: 0; */
}

.zhizhen {
	position: absolute;
	width: 30px;
	height: auto;
	top: 50%;
	left: 50%;
	margin-left: -15.5px;
	transform-origin: 50% 90%;
	margin-top: -86px;
	transform: rotate(-60deg);
	transition: 0.3s;
}

.entryButton {
	position: absolute;
	width: 115px;
	height: auto;
	left: 50%;
	top: 74%;
	cursor: pointer;
	transform: translateX(-50%);
	/* margin-left: -56px; */
	/* animation: scaleEle 1s linear infinite; */
	/* display: none; */
}

.useAniClass {
	animation: rotateAni 5s linear forwards;
}

@keyframes rotateAni {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(1740deg);
	}
}

@keyframes scaleEle {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}

	100% {
		transform: scale(1);
	}
}

.countBg {
	width: 117px;
	font-size: 33px;
	color: #fff;
	font-weight: bold;
	position: absolute;
	background: url(../img/countBg.png) no-repeat;
	/* height: 111px; */
	background-size: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(-60deg);
	left: 10px;
	top: 90px;
	aspect-ratio: 59 / 37;
}

.shadowText {
	/* text-shadow: 2px -2px 9px #fff; */
	animation: shadowTextAni 1s linear infinite;
}

@keyframes shadowTextAni {
	0% {
		text-shadow: 2px -2px 9px #fff;
	}
	50% {
		text-shadow: none;
	}

	100% {
		text-shadow: 2px -2px 9px #fff;
	}
}

.largeScale {
	animation: largeScaleAni 1s linear forwards;
}

@keyframes largeScaleAni {
	0% {
		transform: scale(0) translateX(-50%);
		opacity: 0;
	}

	100% {
		transform: scale(1) translateX(-50%);
		opacity: 1;
	}
}