*{
	margin: 0;
	padding: 0;
	border: 0;
}

html {
	height: 100%;
}
body {
	height: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FFFFFF;
	position: relative;
}

html, body {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	/* touch-action: none; */
	/* font-size: calc(10000vw/1920); */
	/* background: #000000; */
}

.background {
	background: url(../img/background1.jpg) center center / 100% 100% no-repeat;
	width: 3200px;
	height: 1280px;
	left: 0;
	top: 0;
	position: absolute;
}

.background2 {
	background: url(../img/background2.png) center center / 100% 100% no-repeat;
	width: 3200px;
	height: 1280px;
	left: 0;
	top: 0;
	display: none;
	position: absolute;
}

.l_arrow {
	background: url(../img/arrow.png) center center / 100% 100% no-repeat;
	width: 118px;
	height: 113px;
	position: absolute;
	left: 1330px;
	bottom: 512px;
	animation: arrow_move1 1s ease-in-out infinite alternate;
}

.r_arrow {
	background: url(../img/r_arrow.png) center center / 100% 100% no-repeat;
	width: 118px;
	height: 113px;
	position: absolute;
	left: 1774px;
	bottom: 512px;
	animation: arrow_move2 1s ease-in-out infinite alternate;
}

.o_button {
	background: url(../img/button.png) center center / 100% 100% no-repeat;
	width: 592px;
	height: 630px;
	cursor: pointer;
	position: absolute;
	left: 1313px;
	bottom: 249px;
	transform: scale(0.4);
	-webkit-tap-highlight-color:rgba(255,255,255,0);
}

.title {
	position: absolute;
	background: url(../img/title.png) center center / 100% 100% no-repeat;
	width: 1239px;
	height: 152px;
	left: 982px;
	top: 412px;
}

.light {
	position: absolute;
    top: 803px;
    left: 698px;
    width: 330px;
    height: 238px;
    background: url(../img/light1.png) center center / 100% 100% no-repeat;
    animation: lightshining 1s linear infinite alternate;
}

@keyframes lightshining {
	from{opacity: 1;}
	to{opacity: 0;}
}

@keyframes arrow_move1 {
	from{transform: translateX(0px);}
	to{transform: translateX(-100px);}
}

@keyframes arrow_move2 {
	from{transform: translateX(0px);}
	to{transform: translateX(100px);}
}

.video1 {
	height: 1279px;
	width: 2271px;
	position: absolute;
	left: 464px;
	top: 0;
	object-fit: fill;
	display: none;
}

.video2 {
	height: 1279px;
	width: 2271px;
	position: absolute;
	left: 464px;
	top: 0;
	object-fit: fill;
	display: none;
}

.button_next {
	cursor: pointer;
	width: 820px;
	height: 510px;
	top: 592px;
	left: 540px;
	position: absolute;
	-webkit-tap-highlight-color:rgba(255,255,255,0);
	/* display: none; */
}

.button_skip {
	cursor: pointer;
	width: 238px;
	height: 87px;
	display: none;
	position: absolute;
	right: 600px;
	top: 50px;
	z-index: 10;
	background: url(../img/jump.png) center center / 100% 100% no-repeat;
	-webkit-tap-highlight-color:rgba(255,255,255,0);
}

.button_skip:hover {
	background: url(../img/jump2.png) center center / 100% 100% no-repeat;
}


.navigator {
	position: absolute;
	background: url(../img/button.png) center center / 100% 100% no-repeat;
	width: 592px;
	height: 630px;
    left: 253px;
    top: -150px;
	animation: scaleanimate 1s linear infinite alternate;
}

.right_door {
	background: url(../img/right_door.png) center center / 100% 100% no-repeat;
	width: 655px;
	height: 580px;
	position: absolute;
	top: 406px;
	left: 1580px;
}

.left_door {
	background: url(../img/left_door.png) center center / 100% 100% no-repeat;
	width: 703px;
	height: 584px;
	position: absolute;
    top: 402px;
    left: 985px;
}

.register {
    position: absolute;
	left: 953px;
    top: 425px;
	width: 238px;
	height: 87px;
    background: #000000;
    cursor: pointer;
	background: url(../img/register.png) center center / 100% 100% no-repeat;
	opacity: 0.8;
	/* display: none; */
}

.register:hover {
	opacity: 1;
}

.login {
	position: absolute;
	left: 2042px;
	top: 425px;
	width: 238px;
	height: 87px;
	background: #000000;
	cursor: pointer;
	background: url(../img/login.png) center center / 100% 100% no-repeat;
	opacity: 0.8;
	/* display: none; */
}

.login:hover {
	opacity: 1;
}

.big_scale {
	transition:all 0.75s linear;
	transform: scale(2.8);
}

.left_animate {
	transition:all 0.8s linear;
	transform: translateX(-1500px);
}

.right_animate {
	transition:all 0.8s linear;
	transform: translateX(1500px);
}

@keyframes scaleanimate {
	from{transform: scale(0.3);}
	to{transform: scale(0.4);}
}

.new_container {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}

.background3,
.background4 {
	background-color: #000000;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.title_button {
	width: 1500px;
	height: 600px;
	position: absolute;
	left: 1100px;
	top: 470px;
	cursor: pointer;
}
#mask {
	background: #000000;
	display: none;
	justify-content: center;
	align-items: center;
	color: #FFFFFF;
	font-size: 20px;
	z-index: 100;
	width: 100vw;
	height: 100vh;
	position: absolute;
	left: 0px;
	top: 0px;
}
#mask .d{
	width: 300px;
	display: flex;
	flex-direction: column;
	justify-content: start;
}
#mask .d span{
	width: 300px;
	text-align: center;
}
#mask .d span:nth-child(2){
	margin-top: 10px;
}
.compatibleStyle {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	/* Chrome 和 Safari */
	-moz-backface-visibility: hidden;
	/* Firefox */
	-ms-backface-visibility: hidden;
	/* Internet Explorer */
	-webkit-perspective: 0;
	-webkit-transform: translate3d(0, 0, 0);
	visibility: visible;
}
.bah{
	width: 206px;
	height: 68px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	color: red;
	right: 592px;
	bottom: 8px;
	z-index: 100;
	text-decoration-color: black;
	font-size: 17px;
}
.bah a{
	color: rgb(167, 160, 155);
	text-decoration: none;
}
.video-dom {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: none;
}
.video-dom video {
  width: 100%;
  height: 100%;
}