html,
body {
	height: 100%;
}

* {
	margin: 0;
	padding: 0;
}
:root {
	--primary: 212 100% 45%;
	--foreground: 210 6% 21%;
	--muted-foreground: 240 3.8% 46.1%;
}

.preload__wrap {
	display: flex;
	flex-direction: column;
	letter-spacing: 1px;
	background-color: #f6f8ff;
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 9999;
	transition: all 0.3s ease-in;
	opacity: 1;
	pointer-events: none;
}

.preload__wrap.is-hide {
	opacity: 0;
}

.preload__container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	user-select: none;
	-webkit-user-select: none;
	flex-grow: 1;
}

.preload__name {
	font-size: 30px;
	color: #006be6;
	letter-spacing: 5px;
	font-weight: bold;
	margin-bottom: 30px;
}

.preload__title {
	color: #fff;
	font-size: 14px;
	margin: 30px 0 20px 0;
}

.preload__sub-title {
	color: #ababab;
	font-size: 12px;
}

.preload__footer {
	text-align: center;
	padding: 10px 0 20px 0;
}

.preload__footer a {
	font-size: 12px;
	color: #ababab;
	text-decoration: none;
}

.logo {
	animation: breathe 2s infinite;
}
.loader {
	width: 60px;
	height: 60px;
	display: grid;
}
.loader:before,
.loader:after {
	content: '';
	grid-area: 1/1;
	background-color: #006be6;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 25%, 0 0, 0 100%, 100% 100%, 25% 75%, 0 0);
	animation: l20 1.5s infinite linear;
}
.loader:after {
	clip-path: polygon(0 0, 76% 24%, 100% 100%, 24% 76%);
	--s: 0;
}
@keyframes l20 {
	0% {
		transform: perspective(100px) rotate3d(1, var(--s, 1), 0, 0);
	}
	25% {
		transform: perspective(100px) rotate3d(1, var(--s, 1), 0, -90deg);
	}
	25.01% {
		transform: perspective(100px) rotate3d(1, var(--s, 1), 0, -90deg);
	}
	40%,
	60% {
		transform: perspective(100px) rotate3d(1, var(--s, 1), 0, -180deg);
	}
	75% {
		transform: perspective(100px) rotate3d(1, var(--s, 1), 0, -270deg);
	}
	75.01% {
		transform: perspective(100px) rotate3d(1, var(--s, 1), 0, -270deg);
	}
	90%,
	100% {
		transform: perspective(100px) rotate3d(1, var(--s, 1), 0, -360deg);
	}
}

@property --gradient-angle {
	syntax: '<angle>';
	initial-value: 360deg;
	inherits: false;
}

@keyframes gradient-rotation {
	0% {
		--gradient-angle: 360deg;
	}
	100% {
		--gradient-angle: 0deg;
	}
}

.animate-gradient-x {
	background: linear-gradient(
		var(--gradient-angle),
		#00b2ff 0%,
		#00a6ff 8%,
		#0099ff 16%,
		#008cff 24%,
		#0080ff 32%,
		#0073ff 40%,
		#0066ff 48%,
		#1a75ff 56%,
		#3385ff 64%,
		#66a3ff 72%,
		#99c2ff 80%,
		#cce0ff 88%,
		#e6f7ff 96%,
		#00b2ff 100%
	);
	animation: gradient-rotation 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* absolute inset-0 animate-gradient-x blur-[10px] */
.logo_card {
	position: absolute;
	inset: 0;
	filter: blur(10px);
}

@font-face {
	font-family: 'ALMMHT';
	font-weight: 700;
	src:
		url('//at.alicdn.com/wf/webfont/bKq9cgqVGbZ4/C1rVoQm5RThh.woff2') format('woff2'),
		url('//at.alicdn.com/wf/webfont/bKq9cgqVGbZ4/Jya4GHRdQ5Fh.woff') format('woff');
	font-display: swap;
}
.ALMMHT {
	font-family: 'ALMMHT';
}
.index_init {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.index_html {
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	position: relative;
	box-shadow:
		0 10px 15px -3px rgb(0 0 0 / 0.1),
		0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.index_init .logo_img {
	width: 70%;
	height: 70%;
}
.index_init .logo {
	position: relative;
	z-index: 10;
	backdrop-filter: blur(12px);
	background-color: rgb(255 255 255 / 0.1);
	border-radius: 9999px;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.index_init .content-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 30px;
	opacity: 0;
	text-align: center;
	transform: translateY(10px);
	animation: contentFadeIn 0.8s ease 1.7s forwards;
}
.content-container .title {
	font-size: 27px;
	line-height: 30px;
	font-weight: 700;
	margin-bottom: 3px;
	position: relative;
	z-index: 10;
	color: #1f2937;
}
.content-container .sub_title {
	max-width: 336px;
	text-align: center;
	line-height: 1.625;
	margin-bottom: 20px;
	position: relative;
	z-index: 10;
	color: #4b5563;
}

@keyframes logoShrink {
	from {
		width: 200px;
		height: 200px;
	}
	to {
		width: 150px;
		height: 150px;
	}
}
@keyframes contentFadeIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes unblurAndRotate {
	from {
		opacity: 0;
		transform: rotate(0deg);
		border-radius: 50%;
	}
	to {
		filter: blur(0);
		opacity: 1;
		transform: rotate(360deg);
		border-radius: 0;
	}
}
.index_html {
	animation: logoShrink 0.8s ease forwards;
}

.index_html .logo_img {
	opacity: 0;
	animation: unblurAndRotate 0.8s ease 0.8s forwards;
}