@charset "utf-8";

.HomePage {
	width: 7.5rem;
	margin: 0 auto;
	min-height: 100vh;
	background-color: #F3F4F5;
	position: relative;
	overflow-x: hidden;
}

.HomePage .homebg {
	position: absolute;
	width: 7.5rem;
	margin: 0 auto;
	height: 100%;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
}


.music {
	position: absolute;
	top: .3rem;
	right: .3rem;
	z-index: 6;
	width: .8rem;
	z-index: 999;
	height: .8rem;
	background: rgba(0, 0, 0, .5);
	border-radius: 50%;
}

.music img {
	width: .4rem;
	height: .4rem;
	margin: .2rem;
	animation: move linear 2s infinite both;
}

@keyframes move {
	from {
		transform: rotate(0);
	}

	to {
		transform: rotate(360deg);
	}
}

.HomePage .indexbox {
	text-align: center;
	position: relative;
	/* padding-bottom: 6.88rem; */
}

.HomePage .indexbox .logo {
	width: 6rem;
	margin: 0 auto;
	margin-top: 1.5rem;
	margin-bottom: .27rem;
}

.HomePage .indexbox .enter-btn {
	position: relative;
	width: 3.6rem;
	height: 0.96rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #FFF0A3 0%, #FFCC66 100%);
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.24);
	border-radius: .48rem;
	font-weight: bold;
}



.HomePage .enter-btn::after {
	content: '';
	width: 3.53rem;
	height: 0.88rem;
	background: linear-gradient(180deg, #FF5B40 0%, #B30000 100%);
	box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, 0.2);
	border-radius: 0.44rem;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	transform: translate3d(-50%, -50%, 0);
}

.HomePage .indexbox .enter-btn span {
	font-size: 0.44rem;
	color: #FFCC66;
	position: relative;
	z-index: 2;
	/* background: linear-gradient(180deg, #FFF0A3 0%, #FFCC66 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; */
}

.HomePage .flagbox {
	width: 7.5rem;
	height: 5rem;
	position: absolute;
	right: 0;
	bottom: 4rem;
	overflow: hidden;

}

.HomePage .flagbox .flag {
	width: 9rem;
	height: 5rem;
	position: absolute;
	right: -1.8rem;
	top: 0;
	display: flex;
	justify-content: flex-end;

}

.HomePage .flagbox .flag img {
	width: 100%;
	transform: rotate(12deg);
}

.HomePage .soldier {
	width: 4.5rem;
	height: 6rem;
	position: absolute;
	right: -.45rem;
	bottom: 0;
	display: flex;
	justify-content: flex-end;
}

.HomePage .soldier img {
	width: 4.5rem;
	height: 6rem;
}



/* 视频 */
.homeVideoOrigin {
	position: fixed;
	z-index: 998;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	width: 7.5rem;
	min-height: 100vh;
	margin: 0 auto;
}

.homeVideoOrigin .video {
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	width: 7.5rem;
	min-height: 100vh;
	z-index: 100;
	background-size: cover;
	object-fit: cover;


}

.homeVideoOrigin .mutedBtn-dakai {
	position: absolute;display: none;
	left: .1rem;
	top: .3rem;
	font-size: .18rem;
	cursor: pointer;
	z-index: 999;
	align-items: center;
	margin: 0 .2rem;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, .4);

}

.homeVideoOrigin .mutedBtn-guanbi {
	
	position: absolute;
	left: .1rem;
	top: .3rem;
	font-size: .18rem;
	cursor: pointer;
	z-index: 999;
	align-items: center;
	margin: 0 .2rem;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, .4);

}

.homeVideoOrigin .icon {
	width: .26rem;
	vertical-align: middle;
	margin-right: 5px;
}

.homeVideoOrigin .jumpbtn {
	cursor: pointer;
	position: fixed;
	bottom: .3rem;
	right: .3rem;
	font-size: .28rem;
	line-height: .28rem;
	font-weight: 600;
	color: #fff;
	z-index: 999;
	text-shadow: 0 2px 4px rgba(0, 0, 0, .4)
}