* {
	padding: 0;
	margin: 0;
}

:root {
	--animate-delay: 0.1s;

	--primary-color: #00EAFA;
	--bg-dark: #0a192f;
	--text-light: #fff;
}

.banner {
	height: 1060px;
	width: 100%;
	background: linear-gradient(135deg, var(--bg-dark) 0%, #1a237e 100%);
	background-size: cover;
}

.banner .logo {
	padding-left: 300px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.banner .logo img {
	width: 182px;
}

.banner .content {
	width: 800px;
	height: 800px;
	margin: 0 auto;
	position: relative;
}

.banner .content .p1 {
	width: 100%;
	height: 100%;
	border: 3px solid #00EAFA;
	border-radius: 50%;
	opacity: 0.08;
	margin: auto;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
}

.banner .content .p1.animate__fadeIn {
	-webkit-animation-name: p1FadeIn;
	animation-name: p1FadeIn
}
@-webkit-keyframes p1FadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 0.08
    }
}

.banner .content .p2 {
	width: 668px;
	height: 668px;
	border: 3px solid #00EAFA;
	border-radius: 50%;
	opacity: 0.2;
	margin: auto;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
}
.banner .content .p2.animate__fadeIn {
	-webkit-animation-name: p2FadeIn;
	animation-name: p2FadeIn
}
@-webkit-keyframes p2FadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 0.2;
    }
}

.banner .content .p3 {
	width: 535px;
	height: 535px;
	border: 3px solid #00EAFA;
	border-radius: 50%;
	opacity: 0.5;
	margin: auto;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
}
.banner .content .p3.animate__fadeIn {
	-webkit-animation-name: p3FadeIn;
	animation-name: p3FadeIn
}
@-webkit-keyframes p3FadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 0.5;
    }
}

.banner .content .txt {
	color: #fff;
}

.banner .content .txt .animate__animated.animate__fadeIn {
	--animate-duration: 4s;
}

.banner .content .txt h1 {
	font-size: 50px;
	text-align: center;
	padding-top: 220px;
	margin-bottom: 130px;
}

.banner .content .txt p {
	text-align: center;
	font-size: 18px;
	line-height: 2;
}


/* 12-9add */
.page1 {
	min-height: 1000px;
	background: var(--bg-dark);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.page1 .title {
	text-align: center;
	font-size: 40px;
	color: rgb(0, 234, 250);
	font-weight: bold;
	letter-spacing: 5px;
	margin-bottom: 40px;
}

.page1 .content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	gap: 30px; /* 子元素之间的间距 */
	overflow: hidden;
}

.left-side {
	flex: 1;
	padding-right: 30px; /* 留出间距 */
}

.right-side {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}



/* 子内容样式统一 */
.content_1, .content_2, .content_3 {
	font-size: 21px;
	font-weight: 500;
	width: 284px; /* 统一宽度 */
	color: #fff;
	line-height: 1.5;
	letter-spacing: 2px;
	position: relative;
	margin-top: 30px;
	opacity: 0; /* 初始隐藏 */
	animation-duration: 0.6s; /* 动画时长 */
	animation-fill-mode: forwards; /* 动画结束保持最终状态 */
}

/* 入场动画控制 */
.content_1 {
	animation-name: slideInLeft; /* 从左移入 */
	animation-delay: 0.3s; /* 第一个入场延迟 */
}
.content_2 {
	animation-name: slideInRight; /* 从右移入 */
	animation-delay: 0.6s; /* 第二个入场延迟 */
}
.content_3 {
	animation-name: slideInUp; /* 从下移入 */
	animation-delay: 0.9s; /* 第三个入场延迟 */
}

/* 装饰线条 */
.content_1::after, .content_2::after, .content_3::after {
	height: 5px;
	width: 284px; /* 与内容宽度一致 */
	background:rgb(0, 234, 250);
	content: '';
	position: absolute;
	left: 0; /* 左对齐 */
	bottom: 0;
}

/* 入场动画定义 */
@keyframes slideInLeft {
	0% {
		opacity: 0;
		transform: translateX(-50px); /* 从左侧滑入 */
	}
	100% {
		opacity: 1;
		transform: translateX(0); /* 最终位置 */
	}
}

@keyframes slideInRight {
	0% {
		opacity: 0;
		transform: translateX(50px); /* 从右侧滑入 */
	}
	100% {
		opacity: 1;
		transform: translateX(0); /* 最终位置 */
	}
}

@keyframes slideInUp {
	0% {
		opacity: 0;
		transform: translateY(50px); /* 从下方滑入 */
	}
	100% {
		opacity: 1;
		transform: translateY(0); /* 最终位置 */
	}
}



/* 图片和折扇部分 */
.page1 .content .content-img {
	width: 870px;
	height: 337px;
	position: relative;
	overflow: hidden; /* 防止动画区域超出 */
	margin: 0 auto;
	margin-left: 250px;

}

.page1 .content .content-img img {
	display: none; /* 隐藏原图，使用切片显示 */
}

.page1 .content .content-img .fold {
	position: absolute;
	height: 100%;
	background: url("img2.png") no-repeat;
	background-size: 871px 337px;
	transform-origin: left;
	transform: scaleX(0); /* 初始折叠状态 */
	transition: transform 0.3s ease-in-out; /* 为折叠设置过渡动画 */
	animation-fill-mode: forwards; /* 确保动画结束后保持最终状态 */
}
/* 折叠部分 */
.page1 .content .content-img .fold-1,
.page1 .content .content-img .fold-5 {
	left: 0;
	transform-origin: right; /* 向右展开 */
	animation: unfold 1s forwards;
	animation-delay: 0s; /* 立即开始 */
}

.page1 .content .content-img .fold-2 {
	left: calc(100% * 0.163); /* 根据前一部分的宽度设置位置 */
	transform-origin: left; /* 向左展开 */
	animation: unfold 1s forwards;
	animation-delay: 1s; /* 立即开始 */
}

.page1 .content .content-img .fold-3 {
	left: calc(100% * 0.163 + 100% * 0.202 + 100% * 0.235); /* 累加前两个折叠部分的宽度 */
	width: calc(100% * 0.235); /* 宽度按比例计算 */
	/*background-position: -calc(100% * 0.163) 0; !* 根据第一个部分的位置计算背景位置 *!*/
	transform-origin: right;
	animation: unfold 1s forwards;
	animation-delay: 2s; /* 延迟2秒启动 */
}

.page1 .content .content-img .fold-4 {
	left: calc(100% * 0.163 + 100% * 0.202); /* 根据前两部分设置位置 */
	width: calc(100% * 0.201);
	/*background-position: -calc(100% * 0.163 + 100% * 0.202) 0;*/
	transform-origin: left;
	animation: unfold 1s forwards;
	animation-delay: 1s; /* 延迟1秒启动 */
}

.page1 .content .content-img .fold-5 {
	left: calc(100% * 0.163 + 100% * 0.202 + 100% * 0.235);
	width: calc(100% * 0.199);
	/*background-position: -calc(100% * 0.163 + 100% * 0.202 + 100% * 0.235) 0;*/
	transform-origin: left;
	animation: unfold 1s forwards;
	animation-delay: 0s; /* 立即开始 */
}

/* 关键帧动画：折叠展开效果 */
@keyframes unfold {
	0% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(1);
	}
}



/* 关键帧动画：折叠展开效果 */
@keyframes unfold {
	0% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(1);
	}
}

/* 手机端适配 */
/* 手机端适配 */
@media (max-width: 998px) {


	/* 图片部分 */
	/* 图片和折扇部分 */
	.page1 .content .content-img {
		width: 870px;
		height: 337px;
		position: relative;
		overflow: hidden; /* 防止动画区域超出 */
		margin: 0 auto;
		margin-left: 20px;

	}
	.page1 .content {
		display: flex;
		flex-direction: column; /* 改为上下排列 */
		align-items: flex-start;
		width: 100%;
		gap: 30px; /* 子元素之间的间距 */
		overflow: hidden;
	}
	.left-side {
		flex: 1;
		padding-right: 30px; /* 留出间距 */
	}

	.right-side {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.content_1, .content_2, .content_3 {
		padding: 10px;
		text-align: center;
		margin: 0 10px; /* 给每个元素加左右间距 */
	}



}

/*12-9last*/


/*!*12-9add*!*/

/*.page1 {*/
/*	min-height: 1000px;*/
/*	background: var(--bg-dark);*/
/*}*/
/*.left-side {*/
/*	flex: 1;*/
/*	padding-right: 30px; !* 留出间距 *!*/
/*}*/

/*.right-side {*/
/*	flex: 1;*/
/*	display: flex;*/
/*	flex-direction: column;*/
/*	justify-content: space-between;*/
/*}*/
/*!* 内容部分 *!*/
/*.content_1, .content_2, .content_3 {*/
/*	font-size: 24px;*/
/*	margin-bottom: 20px;*/
/*}*/

/*.page1 .title {*/
/*	text-align: center;*/
/*	font-size: 40px;*/
/*	color: rgb(0, 234, 250);*/
/*	font-weight: bold;*/
/*	letter-spacing: 5px;*/
/*}*/

/*.page1 .content {*/
/*	overflow: hidden;*/
/*}*/

/*.page1 .content .content_1 {*/
/*	padding-left: 380px;*/
/*	font-size: 21px;*/
/*	font-weight: 500;*/
/*	width: 284px;*/
/*	color: #fff;*/
/*	line-height: 1.5;*/
/*	letter-spacing: 2px;*/
/*	position: relative;*/
/*	padding-bottom: 30px;*/
/*	padding-top: 80px;*/
/*}*/

/*.page1 .content .content_1::after {*/
/*	height: 5px;*/
/*	width: 284px;*/
/*	background: rgba(0, 234, 250, 0.5);*/
/*	content: '';*/
/*	position: absolute;*/
/*	right: 0;*/
/*	bottom: 0;*/
/*}*/

/*.page1 .content .content_2 {*/
/*	float: right;*/
/*	padding-right: 405px;*/
/*	font-size: 21px;*/
/*	font-weight: 500;*/
/*	color: #fff;*/
/*	line-height: 1.5;*/
/*	position: relative;*/
/*	padding-bottom: 30px;*/
/*	letter-spacing: 2px;*/
/*}*/

/*.page1 .content .content_2::after {*/
/*	height: 5px;*/
/*	width: 284px;*/
/*	background: rgba(0, 234, 250, 0.5);*/
/*	content: '';*/
/*	position: absolute;*/
/*	left: 0;*/
/*	bottom: 0;*/
/*}*/


/*!* 12-9add start *!*/
/*.page1 .content .content-img {*/
/*	width: 870px;*/
/*	height: 337px;*/
/*	position: relative;*/
/*	overflow: hidden; !* 防止动画区域超出 *!*/
/*	margin: 0 auto;*/
/*}*/

/*.page1 .content .content-img img {*/
/*	display: none; !* 隐藏原图，使用切片显示 *!*/
/*}*/


/*.page1 .content .content-img .fold {*/
/*	position: absolute;*/
/*	height: 100%;*/
/*	background: url("img2.png") no-repeat;*/
/*	background-size: 871px 337px;*/
/*	transform-origin: left;*/
/*	transform: scaleX(0); !* 初始折叠状态 *!*/
/*	transition: transform 0.5s ease-in-out; !* 为折叠设置过渡动画 *!*/
/*}*/
/*.page1 .content .content-img .fold-1,*/
/*.page1 .content .content-img .fold-5 {*/
/*	left: 0;*/
/*	width: 142px; !* 自定义宽度 *!*/
/*	background-position: 0 0;*/
/*	transform-origin: right; !* 向左展开 *!*/
/*	animation: unfold 1s forwards; !* 关键帧动画 *!*/
/*	animation-delay: 0s; !* 0秒延迟，立即开始动画 *!*/
/*}*/

/*.page1 .content .content-img .fold-2 {*/
/*	left: 142px;*/
/*	width: 176px; !* 自定义宽度 *!*/
/*	background-position: -142px 0;*/
/*	transform-origin: right; !* 向左展开 *!*/
/*	animation: unfold 1s forwards;*/
/*	animation-delay: 1s; !* 延迟1秒 *!*/
/*}*/

/*.page1 .content .content-img .fold-3 {*/
/*	left: 318px;*/
/*	width: 205px; !* 自定义宽度 *!*/
/*	background-position: -318px 0;*/
/*	transform-origin: right; !* 正常展开 *!*/
/*	animation: unfold 1s forwards;*/
/*	animation-delay: 2s; !* 延迟2秒，最后展开 *!*/
/*}*/

/*.page1 .content .content-img .fold-4 {*/
/*	left: 523px;*/
/*	width: 175px; !* 自定义宽度 *!*/
/*	background-position: -523px 0;*/
/*	transform-origin: left; !* 向右展开 *!*/
/*	animation: unfold 1s forwards;*/
/*	animation-delay: 1s; !* 延迟1秒 *!*/
/*}*/

/*.page1 .content .content-img .fold-5 {*/
/*	left: 698px;*/
/*	width: 178px; !* 自定义宽度 *!*/
/*	background-position: -698px 0;*/
/*	transform-origin: left; !* 向右展开 *!*/
/*	animation: unfold 1s forwards;*/
/*	animation-delay: 0s; !* 0秒延迟，立即开始动画 *!*/
/*}*/


/*@keyframes unfold {*/
/*	0% {*/
/*		transform: scaleX(0);*/
/*	}*/
/*	100% {*/
/*		transform: scaleX(1);*/
/*	}*/
/*}*/
/*.page1 .content .content-img .fold {*/
/*	!* 其他样式保持不变 *!*/
/*	animation-fill-mode: forwards; !* 确保动画结束后保持最终状态 *!*/
/*}*/

/*!* 12-9add结束 *!*/

/*.page1 .content .content_3 {*/
/*	font-size: 21px;*/
/*	font-weight: 500;*/
/*	color: #fff;*/
/*	line-height: 1.5;*/
/*	position: relative;*/
/*	text-align: center;*/
/*	padding-top: 17px;*/
/*	letter-spacing: 2px;*/
/*}*/

/*.page1 .content .content_3::after {*/
/*	height: 5px;*/
/*	width: 284px;*/
/*	background: rgba(0, 234, 250, 0.5);*/
/*	content: '';*/
/*	position: absolute;*/
/*	left: 0;*/
/*	right: 0;*/
/*	top: 0;*/
/*	margin: auto;*/
/*}*/

/*!*12-9last*!*/

/*.page1 {*/
/*	min-height: 1000px;*/
/*	background: url(2.png) no-repeat rgba(14, 32, 150, 1);*/
/*}*/

/*.page1 .title {*/
/*	text-align: center;*/
/*	font-size: 40px;*/
/*	color: rgb(0, 234, 250);*/
/*	font-weight: bold;*/
/*	letter-spacing: 5px;*/
/*}*/

/*.page1 .content {*/
/*	overflow: hidden;*/
/*}*/

/*.page1 .content .content_1 {*/
/*	padding-left: 380px;*/
/*	font-size: 21px;*/
/*	font-weight: 500;*/
/*	width: 284px;*/
/*	color: #fff;*/
/*	line-height: 1.5;*/
/*	letter-spacing: 2px;*/
/*	position: relative;*/
/*	padding-bottom: 30px;*/
/*	padding-top: 80px;*/
/*}*/

/*.page1 .content .content_1::after {*/
/*	height: 5px;*/
/*	width: 284px;*/
/*	background: rgba(0, 234, 250, 0.5);*/
/*	content: '';*/
/*	position: absolute;*/
/*	right: 0;*/
/*	bottom: 0;*/
/*}*/

/*.page1 .content .content_2 {*/
/*	float: right;*/
/*	padding-right: 405px;*/
/*	font-size: 21px;*/
/*	font-weight: 500;*/
/*	color: #fff;*/
/*	line-height: 1.5;*/
/*	position: relative;*/
/*	padding-bottom: 30px;*/
/*	letter-spacing: 2px;*/
/*}*/

/*.page1 .content .content_2::after {*/
/*	height: 5px;*/
/*	width: 284px;*/
/*	background: rgba(0, 234, 250, 0.5);*/
/*	content: '';*/
/*	position: absolute;*/
/*	left: 0;*/
/*	bottom: 0;*/
/*}*/

/*.page1 .content .content-img {*/
/*	width: 100%;*/
/*	padding-top: 180px;*/
/*	margin-bottom: 60px;*/
/*}*/

/*.page1 .content .content-img img {*/
/*	width: 870px;*/
/*	margin: 0 auto;*/
/*	display: block;*/
/*	animation: bounceIn;*/
/*	animate-duration: 10s;*/
/*}*/
/*!*12-9add*!*/


/*!*12-9add*!*/


/*.page1 .content .content_3 {*/
/*	font-size: 21px;*/
/*	font-weight: 500;*/
/*	color: #fff;*/
/*	line-height: 1.5;*/
/*	position: relative;*/
/*	text-align: center;*/
/*	padding-top: 17px;*/
/*	letter-spacing: 2px;*/
/*}*/

/*.page1 .content .content_3::after {*/
/*	height: 5px;*/
/*	width: 284px;*/
/*	background: rgba(0, 234, 250, 0.5);*/
/*	content: '';*/
/*	position: absolute;*/
/*	left: 0;*/
/*	right: 0;*/
/*	top: 0;*/
/*	margin: auto;*/
/*}*/

.page2 {
	min-height: 610px;
	background: var(--bg-dark);
	background-size: cover;
}

.page2 .title {
	text-align: center;
	font-size: 28px;
	color: #fff;
	font-weight: 500;
	line-height: 1.5;
	padding-top: 114px;
	padding-bottom: 60px;
}

.page2 p {
	text-align: center;
	font-size: 21px;
	color: rgb(191, 187, 187);
	margin-bottom: 60px;

}

.page2 .numbers {
	overflow: hidden;
	max-width: 1000px;
	margin: 0 auto;
}

.page2 .numbers .item {
	float: left;
	text-align: center;
	width: 32%;
	margin-left: 1%;
	overflow: hidden;
}
.page2 .numbers .item div{
	animation: fadeInLeft; /* referring directly to the animation's @keyframe declaration */
	 animation-duration: 2s; /* don't forget to set a duration! */
}

.page2 .numbers .item h1 {
	font-size: 80px;
	color: #fff;
}

.page2 .numbers .item p {
	font-size: 18px;
}

.page3 {
	min-height: 710px;
	background: var(--bg-dark);
	background-size: cover;
}

.page3 .title {
	color: rgb(0, 234, 250);
	letter-spacing: 2px;
	text-align: center;
	font-size: 40px;
	padding-top: 86px;
	padding-bottom: 10px;
}

.page3 .box {
	width: 950px;
	margin: 0 auto;
	overflow: hidden;
	padding-top: 90px;
}

.page3 .box .item {
	float: left;
	width: 32%;
	margin-left: 1%;
	overflow: hidden;
}

.page3 .box .item .icon {
	text-align: center;
}

.page3 .box .item h1 {
	font-size: 21px;
	color: #fff;
	font-weight: 500;
	text-align: center;
	margin-bottom: 69px;
	letter-spacing: 2px;
}

.page3 .box .item p {
	font-size: 16px;
	text-align: left;
	color: rgb(191, 187, 187);
	line-height: 1.5;
}

/*.page4 {*/
/*	min-height: 850px;*/
/*	background: var(--bg-dark);*/
/*	background-size: cover;*/
/*}*/
.page4 {
	min-height: 850px;
	background: url(page4_bg.png) no-repeat center center;
	background-size: cover;
}
.page4 .title {
	font-size: 40px;
	color: rgb(0, 234, 250);
	padding-bottom: 10px;
	padding-top: 89px;
	text-align: center;
	letter-spacing: 3px;
	margin-bottom: 60px;
}

.page4 .content {
	text-align: center;
	overflow: hidden; /* 隐藏溢出部分 */
	position: relative;
	width: 100%;
}
/*.page4 {*/
/*	min-height: 850px;*/
/*	background: #1a1a1a;*/
/*	background-size: cover;*/
/*}*/

/*.page4 .title {*/
/*	font-size: 40px;*/
/*	color: rgb(0, 234, 250);*/
/*	padding-bottom: 10px;*/
/*	padding-top: 89px;*/
/*	text-align: center;*/
/*	letter-spacing: 3px;*/
/*	margin-bottom: 60px;*/
/*}*/

/*.page4 .content {*/
/*	text-align: center;*/
/*	overflow: hidden;*/
/*	position: relative;*/
/*	width: 100%;*/
/*}*/

/*newadd-12-7*/
.cards-wrapper {
	display: flex;
	flex-direction: column;
	gap: 30px;
	position: relative;
	overflow: hidden; /* 避免内容溢出 */
}

.card-row {
	display: flex;
	width: fit-content;
	gap: 20px;
	padding: 10px 0;
}

.flow-left {
	animation: scrollLeft 20s linear infinite;
}

.flow-right {
	animation: scrollRight 20s linear infinite;
}

.card {
	flex: 0 0 auto;
	width: 90%; /* 默认宽度设置为相对屏幕的比例 */
	max-width: 400px; /* 设置一个最大宽度 */
	padding: 10px;
	background: transparent; /* 背景设置为透明 */
	box-shadow: none; /* 去除阴影效果 */
	border-radius: 0; /* 去除圆角 */
	display: flex;
	justify-content: center;
	align-items: center; /* 居中对齐 */
}
.card img {
	width: 100%; /* 图片填充卡片宽度 */
	height: auto; /* 保持图片比例 */
	max-height: 300px; /* 设置一个最大高度，避免图片过高 */
	object-fit: cover; /* 裁剪以适应容器，确保图片统一大小 */
	border-radius: 4px;
}
/*.card img {*/
/*	width: 100%; !* 图片的宽度填充卡片宽度 *!*/
/*	height: 200px; !* 固定高度，统一图片显示大小 *!*/
/*	object-fit: cover; !* 裁剪图片以适应固定尺寸 *!*/
/*	border-radius: 4px;*/
/*}*/


@keyframes scrollLeft {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-200px * 4 - 80px));
	}
}

@keyframes scrollRight {
	0% {
		transform: translateX(calc(-200px * 4 - 80px));
	}
	100% {
		transform: translateX(0);
	}
}

@media (max-width: 1024px) {
	.card {
		width: 180px;
	}
}

@media (max-width: 768px) {
	.card {
		width: 150px;
	}
}

@media (max-width: 480px) {
	.card {
		width: 120px;
	}
}

/*newadd-12-7向上*/

.contact {
	background: linear-gradient(135deg, var(--bg-dark) 0%, #1a237e 100%);
	min-height: 470px;
}

.contact .title {
	font-size: 40px;
	letter-spacing: 5px;
	color: rgb(0, 234, 250);
	text-align: center;
	font-weight: bold;
	margin-bottom: 60px;
}

.contact .form {
	width: 800px;
	margin: 0 auto;
}

.contact .form input {
	background: none;
	border: none;
	/* border-bottom: 3px solid rgb(255, 64, 64); */
	border-bottom: 2px solid #fff;
	font-size: 18px;
	color: #fff;
	outline: none;
}
.contact .form input:hover {
	border-bottom: 3px solid #fff;
}

.contact .form input::-webkit-input-placeholder,
.contact .form textarea::-webkit-input-placeholder {
	color: #999;
}

.contact .form .name,
.contact .form .email {
	width: 380px;
	float: left;
	height: 40px;
	line-height: 40px;
	margin-bottom: 20px;
}

.contact .form .email {
	margin-left: 30px;
}

.contact .form .subject {
	width: 100%;
	line-height: 40px;
	height: 40px;
	margin-bottom: 20px;
}

.contact .form .message {
	background: none;
	border: none;
	/* border-bottom: 3px solid rgb(255, 64, 64); */
	border-bottom: 2px solid #fff;
	width: 100%;
	font-size: 18px;
	color: #fff;
	outline: none;
	margin-bottom: 20px;
	resize: none;
}
.contact .form .border3 {
	border-bottom: 3px solid #fff;
}
.contact .form .message:hover {
	border-bottom: 3px solid #fff;
}

.contact .form .btn {
	background: none;
	border: none;
	color: rgb(0, 234, 250);
	font-size: 21px;
	margin-bottom: 26px;
}

.contact .form .btn:hover {
	color: #fff;
}

.foot {
	background: linear-gradient(135deg, var(--bg-dark) 0%, #1a237e 100%);
	min-height: 577px;
}

.foot .f_top {
	max-width: 920px;
	margin: 0 auto;
	overflow: hidden;
	padding-left: 90px;
	padding-top: 30px;
}

.foot .f_top .item {
	width: 280px;
	color: #fff;
	float: left;
	margin-right: 40px;
	margin-bottom: 70px;
}

.foot .f_top .item:last-child {
	margin-right: 0;
}

.foot .f_top .item h1 {
	font-size: 21px;
	letter-spacing: 2px;
	padding-top: 50px;
	margin-bottom: 30px;
}

.foot .f_top .item p {
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 68px;
	font-weight: 100;
}

.foot .subemail {
	width: 800px;
	margin: 0 auto;
}

.foot .subemail .youEmail {
	height: 50px;
	line-height: 50px;
	background: none;
	border: none;
	/* border-bottom: 3px solid rgb(255, 64, 64); */
	border-bottom: 2px solid #fff;
	outline: none;
	width: 100%;
	margin-bottom: 20px;
	color: #fff;
}

.foot .subemail .youEmail::-webkit-input-placeholder {
	color: #fff;
	font-size: 16px;
}

.foot .subemail .btn {
	height: 50px;
	line-height: 50px;
	color: #000;
	font-size: 18px;
	text-align: center;
	width: 100%;
	background: rgb(0, 234, 250);
	font-weight: bold;
	border: 2px solid rgb(0, 234, 250);
	margin-bottom: 60px;
}

.foot .subemail .btn:hover {
	background: none;
	color: rgb(0, 234, 250);
}

.foot .copyright {
	font-size: 15px;
	color: rgb(0, 234, 250);
	text-align: center;
	font-weight: 100;
	padding-bottom: 80px;
}

.rightIcon {
	position: fixed;
	width: 50px;
	padding-right: 30px;
	right: 0;
	height: 100vh;
	top: 0;
	padding-top: 60px;
}

.rightIcon .navBtn {
	width: 33px;
	height: 33px;
	margin-bottom: 90px;
	text-align: center;
}

.rightIcon .navBtn svg {
	fill: rgb(0, 234, 250);
}

.rightIcon .sns {
	height: 110px;
	padding-top: calc(50vh - 250px);
	text-align: center;
	margin-bottom: 30vh;
}

.rightIcon .sns img {
	width: 25px;
	margin-bottom: 10px;
}

.rightIcon .goTop {
	width: 47px;
	height: calc(47px - 10px);
	padding-top: 10px;
	border-radius: 50%;
	background: #00EAFA;
	text-align: center;
}

.rightIcon .goTop svg {
	fill: #fff;
	width: 25px;
	height: 25px;
}
.task{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: #000;
	opacity: .5;
	z-index: 2;
	display: none;
}
.navDalog {
	width: 977px;
	height: 440px;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: var(--bg-dark);
	padding-top: 40px;
	z-index: 3;
	display: none;
}
.navDalog li {
	list-style: none;
	font-size: 28px;
	font-weight: 400;
	text-align: center;
	color: #00EAFA;
	padding: 10px 0;
	cursor: pointer;
	width: 80%;
	margin: 0 auto;
}
.navDalog li:hover {
	color: #fff;
}
.navDalog svg {
	width: 20px;
	height: 20px;
	position: absolute;
	right: 20px;
	top: 20px;
	cursor: pointer;
}