/* 平滑滚动 */
html{
	scroll-behavior: smooth;
	background-color: #232323;
}

/* 全局字体/限制宽度 */
body{
	margin: 0;
	font-family: "Exo-Regular";
	min-width: 31.25rem;
	overflow-x: hidden;
}

/* 去除下划线 */
a{
	text-decoration: none;
}

/* 去除列表序号 */
ul{
	margin: 0;
	list-style: none;
}

/* 去除间距 */
h1, h2{
	margin: 0;
}

/* 页内跳转/修正定位位置 */
#gamecontent, #aboutus, #update{
	float: left;
	margin-top: -5.9rem;
}

/* 启动时加载界面 */
.loading{
	transition: all 1s;
	z-index: 103;
	position: fixed;
	font-size: 5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: skyblue;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 1;
}

/* 加载完毕 */
.loaded{
	transition: opacity 1s;
	animation-delay: 2s !important;
	animation: language_change 1.4s;
	z-index: 103;
	position: fixed;
	font-size: 5rem;
	font-family: "Exo-Regular", sans-serif;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: skyblue;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
}

/* 切换语言过渡动画 */
@keyframes language_change{
	0%{
		width: 0;
		left: 0;
		opacity: 1;
		overflow: hidden;
		display: block !important;
		font-size: 1rem;
	}
	45%{
		width: 100%;
		left: 0;
		display: block !important;
		font-size: 4rem;
	}
	55%{
		width: 100%;
		left: 0;
		display: block !important;
		font-size: 4rem;
	}
	100%{
		width: 0%;
		left: 100%;
		opacity: 1;
		overflow: hidden;
		display: none;
		font-size: 1rem;
	}
	
}

/* 加载中模糊背景（不展示，用于加载完成后过渡） */
.blur{
	transition: all 1s;
	z-index: 102;
	width: 100%;
	height: 100%;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	position: fixed;
}

/* 加载完成后过渡至无模糊 */
.unblur{
	transition: all 1s;
	z-index: 102;
	width: 100%;
	height: 100%;
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
	position: fixed;
}

/* 顶部导航栏 */
#header{
	transition: all.5s;
	top: 0;
	z-index: 101;
	position: sticky;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-family: "Exo-Regular", sans-serif;
	background-color: #00000020;
	.align{
		align-items: center;
		height: 6rem;
		margin: 0 auto;
		margin-top: -1rem;
		.logo{
			margin: 0 auto;
			padding-top: 0.9rem;
			width: 17rem;
			/* Logo */
			img{
				cursor: pointer;
				transition: transform.3s;
				height: 4rem;
				width: 4rem;
				&.rotatearound{
					transform: rotate(540deg);
				}
			}
			/* 游戏名 */
			p{
				float: right;
				font-weight: bold;
				line-height: 1.3rem;
				font-size: 1.5rem;
			}
		}
		/* 导航菜单展开按钮 */
		.menu{
			top: 1.6rem;
			right: 3rem;
			height: 3rem;
			width: 3rem;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			position: fixed;
			.menuLine{
				transition: all.3s ease-out;
				width: 2rem;
				height: 0.2rem;
				background-color: #000000;
				margin: 0.2rem 0;
				border-radius: 1rem;
			}
			&.close .menuLine{
				&:nth-child(1){
					transform: rotate(45deg) translateY(0.425rem) translateX(0.425rem);
					width: 2.4rem;
				}
				&:nth-child(2){
					opacity: 0;
				}
				&:nth-child(3){
					transform: rotate(-45deg) translateY(-0.425rem) translateX(0.425rem);
					width: 2.4rem;
				}
			}
		}
		/* 导航栏 */
		.navbar{
			top: 2rem;
			ul{
				transition: background-color.3s;
				width: 100%;
				overflow: hidden;
				padding: 0;
				margin-top: 0.85rem;
				li{
					&.show{
						transition: height.5s, margin-top.5s, padding.5s, background-color.5s;
						height: 1.75rem;
						padding: 2rem 0;
						margin-top: 0.3rem;
					}
					transition: height.3s, margin-top.3s, padding.3s, background-color.3s;
					background-color: #00000030;
					font-size: 1.25rem;
					text-align: center;
					height: 0;
					padding: 0;
					margin: 0;
					a{
						height: 100%;
						width: 100%;
						display: block;
						cursor: pointer;
						transition: all.2s;
						color: black;
						text-align: center;
						top: 0;
						padding: 0;
						position: relative;
						span{
							display: none;
						}
					}
					/* 语言切换按钮 */
					button{
						font-size: 1.25rem;
						transition: all.3s;
						border: none;
						background: none;
						cursor: pointer;
					}
				}
			}
		}
	}
}

/* 顶部展开菜单背景遮罩 */
.other{
	transition: background-color.5s;
	position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #00000000;
}

/* 通用标题 */
.topbar{
    transition: color.3s;
    font-size: 1.88rem;
    background-color: #00000070;
    color: white;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    height: 6rem;
    line-height: 6rem;
    top: 5.9rem;
    z-index: 98;
    position: sticky;
}

/* 主内容 */
.main{
	margin: 0 auto;
	text-align: center;
	/* 主页 */
	.top{
		margin-top: -5rem;
		padding-top: 5rem;
		background-image: url("img/Background/WindyHill.jpeg"); /*WindyHill.jpeg*/
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		background-attachment: fixed;
		font-family: "Exo-Regular", sans-serif;
		.title{
			h1{
				font-size: 4rem;
				font-weight: 600;
				padding-top: 5rem;
			}
		}
		.describe{
			margin-top: 1rem;
			font-size: 2rem;
			position: relative;
			width: 60%;
			left: 20%;
		}
		.join{
			margin-top: 3.13rem;
			p{
				font-size: 1.2rem;
			}
			a{
				transition: all.3s;
				color: black;
				padding: 0.8rem 1.9rem;
				font-size: 1.3rem;
				box-shadow: 0 0 1rem 0.03rem #00000096;
				display: block;
				width: 6rem;
				margin: auto;
				&.up{
					border-radius: 1.8rem 1.8rem 0.5rem 0.5rem;
					margin-bottom: 0.19rem;
				}
				&.down{
					border-radius: 0.5rem 0.5rem 1.8rem 1.8rem;
				}
			}
			padding-bottom: 5rem;
		}
		.download{
			ul{
				padding-left: 0;
				padding-bottom: 2rem;
				width: 100%;
				li{
					transition: all.2s;
					display: inline-block;
					position: relative;
					border-radius: 0.6rem;
					box-shadow: 0 0 1rem 0.03rem #00000096;
					top: 1rem;
					padding-top: 2rem;
					&:first-child{
						border-radius: 1.8rem 0.6rem 0.6rem 1.8rem;
					}
					&:last-child{
						border-radius: 0.6rem 1.8rem 1.8rem 0.6rem;
					}
					a{
						font-size: 1.2rem;
						position: relative;
						color: black;
						padding: 0 1rem;
						span{
							transition: all.2s;
							position: absolute;
							text-align: center;
							margin-left: -1rem;
							width: 100%;
							height: 100%;
							top: -110%;
						}
						img{
							height: 1rem;
							width: 1rem;
							position: relative;
							top: 0.14rem;
						}
					}
				}
			}
		}
	}
	/* 游戏内容 */
	#content{
		font-family: "CAVIARDREAMS";
		transition: background-image.3s;
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: cover;
		background-attachment: fixed;
		background-blend-mode: color;
		background-color: #00000020;
		/* 导航菜单展开按钮 */
		.menuDiv{
			top: 5.9rem;
			margin-right: 3rem;
			margin-top: -6rem;
			height: 6rem;
			position: sticky;
			display: flex;
			justify-content: center;
			align-items: end;
			flex-direction: column;
			z-index: 99;
			.menu{
				height: 3rem;
				width: 3rem;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				.menuLine{
					transition: all.3s ease-out;
					width: 2rem;
					height: 0.2rem;
					background-color: white;
					margin: 0.2rem 0;
					border-radius: 1rem;
				}
				&.close .menuLine{
					&:nth-child(1){
						transform: rotate(45deg) translateY(0.425rem) translateX(0.425rem);
						width: 2.4rem;
					}
					&:nth-child(2){
						opacity: 0;
					}
					&:nth-child(3){
						transform: rotate(-45deg) translateY(-0.425rem) translateX(0.425rem);
						width: 2.4rem;
					}
				}
			}
		}
		/* 内容 */
		.content{
			transition: height 1s;
			background-color: #00000030;
			position: relative;
			height: 125rem;
			margin-top: -1.3rem;
			/* 游戏内容展开菜单背景遮罩 */
			.shadow{
				transition: background-color.5s;
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 96;
				width: 100%;
				height: 100%;
				background-color: #00000000;
			}
			/* 导航栏 */
			.nav{
				margin-top: 1.3rem;
				color: white;
				width: 100%;
				overflow: hidden;
				-webkit-backdrop-filter: blur(10px);
				backdrop-filter: blur(10px);
				background-color: #00000070;
				padding: 0;
				top: 11.9rem;
				z-index: 97;
				position: sticky;
				li{
					transition: all.3s;
					height: 0;
					padding: 0;
					cursor: pointer;
					font-size: 1.25rem;
					position: relative;
					&.show{
						transition: all.5s;
						height: 1.75rem;
						padding: 2.5rem 0;
					}
					span{
						display: none;
					}
					.leave{
						transition: all.3s;
						left: 100%;
					}
				}
				.selected{
					background-color: #ffffff90;
					color: black;
				}
				a{
					color: white;
				}
			}
			/* 这个是真的内容了 */
			.listContent{
				transition: all.3s;
				display: none;
				opacity: 0;
				margin-top: 30rem;
				/* 文字 */
				p{
					width: 25rem;
					text-align: left;
					font-size: 1.88rem;
					color: white;
					text-shadow: 0 0 0.31rem;
					margin-bottom: 4.38rem;
					margin-left: auto;
					margin-right: auto;
					.version{
						margin-left: 0.19rem;
						display: block;
						font-size: 1rem;
						color: #ffffff80;
					}
				}
				/* 图片 */
				div{
					transition: all.3s;
					height: 19.38rem;
					width: 31.25rem;
					border-radius: 1.56rem;
					background-repeat: no-repeat;
					background-size: cover;
					background-position: center;
					box-shadow: 0 0 1.25rem white;
					position: relative;
					margin-top: -3.13rem !important;
					margin: auto;
				}
				/* 提示文字 */
				.tip{
					position: absolute;
					top: -1.4rem;
					left: 3rem;
					font-size: 1.5rem;
					width: 27rem;
					color: white;
				}
				/* 第一行 */
				.first{
					margin-top: -26.25rem;
				}
				/* 不同屏幕宽度的图片点击动画 */
				@media screen and (max-width: 45rem){
					div:hover{
						z-index: 89 !important;
						height: 26rem;
						width: 100%;
					}
				}
				@media screen and (min-width: 45rem){
					div:hover{
						z-index: 89 !important;
						height: 26rem;
						width: 85%;
					}
				}
			}
			/* 淡出(动画) */
			.imgout{
				transition: all.3s;
				display: block;
				opacity: 0;
				.first{
					transition: all.3s;
					margin-top: -35rem;
				}
			}
			/* 淡入(动画) */
			.imgin{
				transition: all.3s;
				display: block;
				opacity: 1;
				margin-top: 30rem;
				&.show{
					transition: all.5s;
					margin-top: 3rem;
				}
				.first{
					transition: all.3s;
					margin-top: -28rem;
				}
			}
			/* 关卡信息特殊调整 */
			#levelinfo{
				div{
					height: 17.44rem;
					a{
						p{
							height: 100%;
							width: 100%;
							color: transparent;
						}
					}
					&:hover{
						height: 23.69rem;
					}
				}
			}
		}
	}
	/* 关于我们 */
	.aboutus{
		background-image: url("img/Background/TheSeasons1.jpeg"); /* TheSeasons1.jpeg */
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: cover;
		background-attachment: fixed;
		background-blend-mode: color;
		background-color: #000000A0;
		/* 内容 */
		.content{
			/* 工作室图标 */
			img{
				margin: 1.25rem;
				width: 6.25rem;
				height: 6.25rem;
				filter: drop-shadow(0 0 10px white);
			}
			/* 文字 */
			.text{
				color: white;
				padding: 0 2.5rem 3.13rem 2.5rem;
				p{
					margin: 0.63rem;
					text-align: center;
					font-size: 1.13rem;
				}
			}
		}
	}
	/* 更新速览 */
	.update{
		background-image: url("img/Background/TheSeasons2.jpeg"); /* TheSeasons2.jpeg */
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: cover;
		background-attachment: fixed;
		background-blend-mode: color;
		background-color: #000000A0;
		/* 内容 */
		.content{
			color: white;
			padding: 1.25rem 2.5rem 3.13rem 2.5rem;
			.version{
				font-size: 2rem;
				font-weight: 600;
			}
		}
	}
}

/* 底部Copyright */
.copyright{
	margin: 0;
	background-color: #232323;
	height: 5rem;
	line-height: 5rem;
	text-align: center;
	color: white;
}

/* 以下为预加载内容 */
.gameback1{
	background-image: url("img/Background/loading.jpeg"); /*loading.jpeg*/
}
.gameback2{
	background-image: url("img/Background/Dramamine.jpeg"); /*Dramamine.jpeg*/
}
.gameback3{
	background-image: url("img/Background/23C95B7D8B6AAC2EBD2.jpeg"); /*23C95B7D8B6AAC2EBD2.jpeg*/
}
.gameback4{
	background-image: url("img/Background/WH.jpeg"); /*WH.jpeg*/
}

.chapter1{
	background-image: url("img/TimeLine/TimeLine1.jpeg"); /*TimeLine1.jpeg*/
}
.chapter2{
	background-image: url("img/TimeLine/TimeLine2.jpeg"); /*TimeLine2.jpeg*/
}
.level1{
	background-image: url("img/TimeLine/Level1.jpeg"); /*Level1.jpeg*/
}
.level1_select{
	background-image: url("img/TimeLine/Level1-Select.jpeg"); /*Level1-Select.jpeg*/
}
.level2{
	background-image: url("img/TimeLine/Level2.jpeg"); /*Level2.jpeg*/
}
.level2_select{
	background-image: url("img/TimeLine/Level2-Select.jpeg"); /*Level2-Select.jpeg*/
}

.startui{
	background-image: url("img/In-Game/StartUI.jpeg"); /*Level2-Select.jpeg*/
}
.endui{
	background-image: url("img/In-Game/EndUI.jpeg"); /*Level2-Select.jpeg*/
}

.setting1{
	background-image: url("img/Setting/Setting-Quatily.jpeg"); /*Setting-Quatily.jpeg*/
}
.setting2{
	background-image: url("img/Setting/Setting-Audio.jpeg"); /*Setting-Audio.jpeg*/
}
.setting3{
	background-image: url("img/Setting/Setting-About.jpeg"); /*Setting-About.jpeg*/
}
.setting4{
	background-image: url("img/Setting/Setting-Language.jpeg"); /*Setting-Language.jpeg*/
}
.setting5{
	background-image: url("img/Setting/Setting-Version.jpeg"); /*Setting-Version.jpeg*/
}
.setting6{
	background-image: url("img/Setting/Setting-Account.jpeg"); /*Setting-Account.jpeg*/
}

.level_thebeginning_old{
	background-image: url("img/Level/TheBeginning-old.jpeg"); /*TheBeginning-old.jpeg*/
}
.level_beginning_and_end{
	background-image: url("img/Level/Beginning and End.jpeg"); /*Beginning and End.jpeg*/
}
.level_rainnight{
	background-image: url("img/Level/RainNight.jpeg"); /*RainNight.jpeg*/
}
.level_desert{
	background-image: url("img/Level/Desert.jpeg"); /*Desert.jpeg*/
}
.level_windyhill{
	background-image: url("img/Level/WindyHill.jpeg"); /*WindyHill.jpeg*/
}
.level_thebeginning{
	background-image: url("img/Level/TheBeginning.jpeg"); /*TheBeginning.jpeg*/
}
.level_tears_of_illusion{
	background-image: url("img/Level/Tears of illusion.jpeg"); /*Tears of illusion.jpeg*/
}
.level_the_seasons{
	background-image: url("img/Level/The Seasons.jpeg"); /*The Seasons.jpeg*/
}
.level_dream_of_piano{
	background-image: url("img/Level/Dream of Piano.jpeg"); /*Dream of Piano.jpeg*/
}
.level_dramamine{
	background-image: url("img/Level/Dramamine.jpeg"); /*Dramamine.jpeg*/
}
.level_luminescence{
	background-image: url("img/Level/Luminescence.jpeg"); /*Luminescence.jpeg*/
}
.level_theremnant{
	background-image: url("img/Level/TheRemnant.jpeg"); /*TheRemnant.jpeg*/
}