.text-animate h2 {
	animation: text-motion 2.5s ease-in-out;
	white-space: nowrap;
}

.banner-set p {
	width: 38.95vw;
	animation: p-motion 1s ease-in-out;
}

@keyframes text-motion {
	from {
		transform: translateX(10%);
		opacity: 0;
		letter-spacing: 1vw;
	}

	to {
		transform: translateX(0);
		opacity: 1;
		letter-spacing: 0px;
	}
}

@keyframes p-motion {
	from {
		transform: translateY(20%);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

#scene>div {
	position: relative !important;
}

/* 这是一个按钮动画，原理是div中包裹了两个span，让第一个span向上移动的同时，透明度由1到0，第二个span向上移动的同时，透明度由0到1 */
.btn-animate {
	width: 300px;
	height: 88px;
	transform: translateY(0);
	transition: all 0.5s ease-in-out;
	background: rgba(255, 255, 255, 0.01);
	outline: 1px solid var(--white);
	backdrop-filter: blur(10px);
	position: relative;
}

.move-padding-item {
	min-width: 300px;
	height: 88px;
	background: var(--orange);
	position: absolute;
	z-index: -1;
	left: -300px;
	transition: all 2s cubic-bezier(0.4, 0, 0, 1);
}

.btn-animate img {
	user-select: none;
}

.btn-animate span {
	font-size: 1.5rem;
}

.btn-animate:hover {
	transform: translateY(-8px);
	background: var(--orange);
	transition: all 0.5s ease-in-out;
	outline: 1px solid var(--orange);
}

.btn-animate .word {
	margin-top: 26px;
	transition: all 0.5s ease-in-out;
}

.btn-animate .word span:last-child {
	opacity: 0;
	transition: all 0.5s ease-in-out;
}

.btn-animate:hover .word span:last-child {
	transition: all 0.5s ease-in-out;
	opacity: 1;
}

.btn-animate:hover .word span:first-child {
	transition: all 0.5s ease-in-out;
	opacity: 0;
}

.btn-animate:hover .word {
	margin-top: -6px;
	transition: all 0.5s ease-in-out;
}

.word span {
	user-select: none;
}

.btn-animate .img span:first-child {
	margin-top: 18px;
	opacity: 1;
	transition: all 0.5s ease-in-out;
}

.btn-animate:hover .img span:first-child {
	margin-top: -18px;
	opacity: 0;
}

.btn-animate .img span:last-child {
	margin-top: 18px;
	opacity: 0;
	transition: all 0.5s ease-in-out;
}

.btn-animate:hover .img span:last-child {
	margin-top: -18px;
	opacity: 1;
}

.float-text-motion {
	width: 100vw;
	height: 100vh;
	color: rgba(255, 255, 255, 0.03);
	font-size: 30rem;
	font-family: 'aliHeavy';
	z-index: -99;
	user-select: none;
	position: fixed;
	font-weight: bold;
}

.float-text-motion ul li {
	margin-top: -240px;
}

.float-text-motion ul:first-child {
	transform: translateY(5%);
	animation: text-move-motion 30s linear infinite alternate;
}

.float-text-motion ul:last-child {
	transform: translateY(-40%);
	animation: text2-move-motion 30s linear infinite alternate;
}

@keyframes text-move-motion {
	from {
		transform: translateY(5%);
	}

	to {
		transform: translateY(-80%);
	}
}

@keyframes text2-move-motion {
	from {
		transform: translateY(-80%);
	}

	to {
		transform: translateY(5%);
	}
}

.r-motion {
	min-width: 220px;
	min-height: 220px;
	width: 220px;
	height: 220px;
	position: relative;
}

.r-motion li {
	width: 220px;
	height: 32px;
	background: #00FFF0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: var(--width-motion), rotation-motion 3s 1s infinite forwards;
}

.r-motion li:nth-child(1) {
	z-index: 1;
}

.r-motion li:nth-child(2) {
	background: var(--motion-color1);
	animation: var(--width-motion), rotation-motion2 3s 1s infinite forwards;
}

.r-motion li:nth-child(3) {
	background: var(--motion-color1);
	animation: var(--width-motion), rotation-motion3 3s 1s infinite forwards;
}

.r-motion li:nth-child(4) {
	background: var(--motion-color1);
	animation: var(--width-motion), rotation-motion4 3s 1s infinite forwards;
}

.r-motion li:nth-child(5) {
	background: var(--motion-color1);
	animation: var(--width-motion), rotation-motion5 3s 1s infinite forwards;
}

.r-motion li:nth-child(6) {
	background: var(--motion-color1);
	animation: var(--width-motion), rotation-motion6 3s 1s infinite forwards;
}

.r-motion li:nth-child(7) {
	background: var(--motion-color1);
	animation: var(--width-motion), rotation-motion7 3s 1s infinite forwards;
}

.r-motion li:nth-child(8) {
	background: var(--motion-color1);
	animation: var(--width-motion), rotation-motion8 3s 1s infinite forwards;
}

@keyframes width-motion {
	0% {
		width: 0;
	}

	100% {
		width: 220px;
	}
}

@keyframes rotation-motion {
	0% {
		transform: translate(-50%, -50%) rotateZ(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotateZ(-60deg);
	}
}

@keyframes rotation-motion2 {
	0% {
		transform: translate(-50%, -50%) rotateZ(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotateZ(-45deg);
	}
}

@keyframes rotation-motion3 {
	0% {
		transform: translate(-50%, -50%) rotateZ(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotateZ(-30deg);
	}
}

@keyframes rotation-motion4 {
	0% {
		transform: translate(-50%, -50%) rotateZ(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotateZ(-15deg);
	}
}

@keyframes rotation-motion5 {
	0% {
		transform: translate(-50%, -50%) rotateZ(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotateZ(0deg);
	}
}

@keyframes rotation-motion6 {
	0% {
		transform: translate(-50%, -50%) rotateZ(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotateZ(30deg);
	}
}

@keyframes rotation-motion7 {
	0% {
		transform: translate(-50%, -50%) rotateZ(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotateZ(60deg);
	}
}

@keyframes rotation-motion8 {
	0% {
		transform: translate(-50%, -50%) rotateZ(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotateZ(90deg);
	}
}

.motionScroll ul:first-child {
	transform: translateY(0);
	animation: motionScroll1 20s linear infinite alternate;
}

@keyframes motionScroll1 {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-40%);
	}
}

.motionScroll ul:nth-child(2) {
	transform: translateY(0);
	animation: motionScroll1 20s linear infinite alternate;
}

@keyframes motionScroll2 {
	from {
		transform: translateY(-40%);
	}

	to {
		transform: translateY(0%);
	}
}

.motionScroll ul:last-child {
	transform: translateY(0);
	animation: motionScroll1 20s linear infinite alternate;
}

@keyframes motionScroll3 {
	/*from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-40%);
	}*/
}

.motionScroll-row {
	transform: translateX(0%);
	animation: motionScroll4 20s linear infinite alternate;
}

@keyframes motionScroll4 {
	from {
		transform: translateX(0%);
	}

	to {
		transform: translateX(-20%);
	}
}

@keyframes height-motion1 {
	from {
		opacity: 0;
		height: 0px;
	}

	to {
		opacity: 1;
		height: 96px;
	}
}

@keyframes height-motion2 {
	from {
		opacity: 0;
		height: 0px;
	}

	to {
		opacity: 1;
		height: 560px;
	}
}

@keyframes tiny-motion {
	/*from {
		transform: rotateZ(0deg);
	}

	to {
		transform: rotateZ(-2deg);
	}*/
}

@keyframes swing-motion {
	/*from {
		transform: rotateZ(-2deg);
	}
	
	to {
		transform: rotateZ(2deg);
	}*/
}

@keyframes tiny-motion {
	/*from {
		transform: rotateZ(0deg);
	}

	to {
		transform: rotateZ(-2deg);
	}*/
}

@keyframes opacity-motion {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes map-motion {
	from {
		transform: rotateZ(0deg);
	}

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

@keyframes map-motion2 {
	from {
		transform: rotateZ(360deg);
	}

	to {
		transform: rotateZ(0deg);
	}
}

.menu-list ul {
	opacity: 0;
	white-space: nowrap;
	width: 100%;
	animation: menu-list-width-motion 2s ease-in-out forwards;
}

@keyframes menu-list-width-motion {
	from {
		opacity: 0;
		width: 0%;
	}

	to {
		opacity: 1;
		width: 100%;
	}
}

.menu-list ul li {
	margin-right: 4rem;
	animation: margin-right-motion 3s ease-in-out forwards;
}

@keyframes margin-right-motion {
	from {
		opacity: 0;
		margin-right: -4rem;
	}

	to {
		opacity: 1;
		margin-right: 4rem;
	}
}

.introduction-decoration span {
	background: linear-gradient(90deg, #BD30FF 0%, #A492FF 8%, #0047FF 16%, #8BCFFF 24%, #00C1CD 32%, #49FFE8 40%, #19BB81 48%, #BCFF9D 56%, #FFCB66 64%, #FFC188 72%, #FF6C1A 80%, #FFACA7 88%, #FF1F55 100%);
	transform: translateX(0%);
	animation: color-motion 5s ease-in-out infinite alternate;
}

@keyframes color-motion {
	from {
		transform: translateX(0%);
	}

	to {
		transform: translateX(-50%);
	}
}

.svg-img .line {
	opacity: 0;
	transform: rotateZ(360deg);
	animation: fast-line-rotate-motion 2s 2s cubic-bezier(0.26, 0.6, 0.4, 1.05) forwards, line-rotate-motion 80s 4s linear infinite;
}

@keyframes fast-line-rotate-motion {
	from {
		opacity: 0;
		transform: rotateZ(720deg);
	}

	to {
		opacity: 1;
		transform: rotateZ(0deg);
	}
}

@keyframes line-rotate-motion {
	from {
		transform: rotateZ(0deg);
	}

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

.svg-img .logo {
	opacity: 0;
	animation: svg-logo-motion 1s 2s cubic-bezier(0.26, 0.6, 0.4, 1.4) forwards;
}

@keyframes svg-logo-motion {
	from {
		opacity: 0;
		width: 0;
		height: 0;
	}

	to {
		opacity: 1;
		width: 10.125rem;
		height: 10.125rem;
	}
}

.svg-img>img {
	animation: img-rotate-motion 100s linear infinite;
}

@keyframes img-rotate-motion {
	from {
		transform: rotateZ(360deg);
	}

	to {
		transform: rotateZ(0deg);
	}
}

.nav-side {
	animation: nav-side-motion 1s ease-in-out infinite alternate;
}

@keyframes nav-side-motion {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(16px);
	}
}

.html-viewport {
	opacity: 0;
	animation: var(--opacity-motion), height-grow-motion 3s 1s cubic-bezier(0.4, 0, 0, 1) forwards;
	outline: 0.625rem solid var(--white2);
}

@keyframes height-grow-motion {
	from {
		height: 0rem;
	}

	to {
		height: 50rem;
	}
}

.culture ul li div,
.culture ul li img {
	animation: culture-img-height-motion 2s ease-in-out forwards;
}

@keyframes culture-img-height-motion {
	from {
		height: 0rem;
	}

	to {
		height: 5.5rem;
	}
}

.culture ul li {
	animation: var(--culture-rotate-motion);
}

@keyframes culture-rotate-motion {
	from {
		transform: rotate(-10deg);
	}

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

.culture .ml128 {
	animation: var(--culture-rotate-motion), margin128-left-motion 1s 1.5s cubic-bezier(0.4, 0, 0, 1) forwards;
}

@keyframes margin128-left-motion {
	from {
		margin-left: 0rem;
	}

	to {
		margin-left: 8rem;
	}
}

.culture .ml56 {
	animation: var(--culture-rotate-motion), margin56-left-motion 1s 1.5s cubic-bezier(0.4, 0, 0, 1) forwards;
}

@keyframes margin56-left-motion {
	from {
		margin-left: 0rem;
	}

	to {
		margin-left: 3.5rem;
	}
}

.circle-border-motion {
	z-index: -1;
	animation: circle-border-grow-motion 2s 0.5s ease-in-out forwards;
	overflow: hidden;
	top: 50%;
	transform: translateY(-50%);
}

@keyframes circle-border-grow-motion {
	from {
		width: 0vw;
		height: 0vh;
	}

	to {
		width: 50vw;
		height: 100vh;
	}
}

.svg-path {
	width: 10vw;
	height: 10vw;
	top: 42%;
	left: -10%;
	animation: circle-border-motion 30s linear infinite;
}

.circle-first {
	height: 100%;
	width: 100%;
	left: -50%;
	border: 1px solid var(--white3);
	animation: circle-border-motion 30s linear infinite;
}

.circle-second {
	height: 60%;
	width: 60%;
	left: -30%;
	top: 20%;
	border: 1px solid var(--white3);
	animation: circle-border-reverse-motion 15s linear infinite;
}

@keyframes circle-border-motion {
	from {
		transform: rotateZ(0deg);
	}

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

@keyframes circle-border-reverse-motion {
	from {
		transform: rotateZ(360deg);
	}

	to {
		transform: rotateZ(0deg);
	}
}


.circle-second span,
.circle-first span {
	display: inline-block;
	background: var(--white1);
	backdrop-filter: blur(5px);
	position: absolute;
	right: -3%;
	top: 50%;
	transform: translateY(-50%);
	width: 3vw;
	height: 3vw;
}

.circle-second span {
	right: -8%;
	width: 5vw;
	height: 5vw;
	background: var(--white3);
}

@keyframes svg-path-motion {
	from {
		transform: rotateZ(-90deg);
	}

	to {
		transform: rotateZ(450deg);
	}
}

.touch-motion {
	height: 24px;
	background: linear-gradient(270deg, var(--white5) 0%, rgba(255, 255, 255, 0.00) 100%);
	position: absolute;
	left: 65%;
	bottom: 50%;
	z-index: 1;
	border-radius: 100vw;
	animation: touch-width-motion 3s cubic-bezier(0.4, 0, 0, 1) infinite;
}

@keyframes touch-width-motion {
	from {
		opacity: 0;
		width: 0;
	}

	to {
		opacity: 1;
		width: 400px;
	}
}

.small-circle,
.big-circle {
	height: 48px;
	width: 48px;
	background: var(--white5);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: -12px;
	border-radius: 100vw;
}

.small-circle {
	height: 24px;
	width: 24px;
	right: 0;
}

.light-motiom-front {
	width: 24px;
	background: linear-gradient(270deg, var(--white7) 0%, rgba(255, 255, 255, 0.00) 100%);
	position: absolute;
	right: 0;
	z-index: 1;
	height: 100%;
}

.light-motiom {
	width: 24px;
	background: linear-gradient(270deg, var(--white7) 0%, rgba(255, 255, 255, 0.00) 100%);
	position: absolute;
	right: 0;
	z-index: 1;
	height: 100%;
	animation: light-move-motion 2s cubic-bezier(0.4, 0, 0, 1) infinite;
}

@keyframes light-move-motion {
	0% {
		opacity: 0;
		right: 100%;
	}
	
	80% {
		opacity: 1;
	}

	100% {
		opacity: 0.1;
		right: 0;
	}
}