@charset "utf-8";
/* CSS Document */
body,html{width:100%; height: 100%;}
body {
	margin:0;
	padding:0;
	font-family:"微软雅黑","Microsoft Yahei","宋体", Arial;
	font-size:14px;
	line-height:1.5;
	color:#333;
	width:100%; height: 100%;
	min-width:1200px;
	margin:0px auto;
	background-color:#fff;
}
a {
	color:#333;
	text-decoration:none;
}
a:hover {
	color:#333;
}

img {
	border:0;
	display:inline;
	vertical-align: bottom;
	width:auto;
	height:auto;
	max-width:100%;
}
div, ul, li, dl, dd, span, h1, h2, p, h4, h3 {
	margin:0;
	padding:0;
	list-style:none;
	-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
.clear {
	clear:both; width:0px; height:0px;
}
.container {
	width:1200px;
	margin:0px auto;
	height:auto;

}

* {
	box-sizing: border-box;
}
.tpleft{ float:left;}
.tpright{ float:right;}
.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.flex-center-y {
	display: flex;
	align-items: center;
}
/* 首页 */
.index{ width: 100%; height: 100vh;  position: relative;}
.index .bg{ width:100%; height:100%; position:absolute; left:0px; top:0px; z-index:0;}
.index .bg img{ width:100%; height:100%;object-fit: cover;
 object-position: center center;}
.index:before{
	content: "";
	position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;background-color: rgba(0, 0, 0, 0.7); z-index:1;
}
header {
	position: absolute; left: 50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);
	width:1200px;
	mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 50%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
	margin: 0 auto;
	padding: 20px 20px; z-index: 20;
  }
  
  header ul {
	text-align: center;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.5), inset 0 0 1px rgba(255, 255, 255, 0.6);
  }
  
  header ul li {
	display: inline-block;
  }
  
  header ul li a {
	padding: 18px 25px;
	font-family: "Open Sans";
	text-transform:uppercase;
	color: #000;
	font-size: 18px;
	text-decoration: none;
	display: block;
  }
  
  header ul li a:hover {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4), inset 0 0 1px rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.8);
	color: #248c46;
  }
.part_1{ width: 923px; margin: 0px auto; position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%); display: flex; align-items: flex-start; justify-content: space-between;color:white; z-index:30;}
.part_1 .tpleft{ font-size:72px; z-index: 20;
	position:relative;
	width:500px;color: #fff; position: relative; font-weight: bold;}
.part_1 .tpright{ width: 420px;}
.part_1 .tpright .box{ width: 100%;color: #252B37;border-radius: 8px; font-size: 16px;
    padding: 20px 20px 40px; margin-bottom: 30px;
	background-color: #151823;
	
	position: relative;
	}
	.part_1 .tpright .box:before{   position: absolute;
		content: "";
		top: 2vw;
		left: -5%;
		right: 0;
		z-index: -1;
		height: 100%;
		width: 110%;
		margin: 0 auto;
		transform: scale(0.75);
		-webkit-filter: blur(5vw);
		-moz-filter: blur(5vw);
		-ms-filter: blur(5vw);
		filter: blur(5vw);
		background: linear-gradient(270deg, #0fffc1, #7e0fff);
		background-size: 200% 200%;
		animation: animateGlow 10s ease infinite;}
		
		@keyframes textColor {
			0% {
			  color: #7e0fff;
			}
			50% {
			  color: #0fffc1;
			}
			100% {
			  color: #7e0fff;
			}
		  }
		  @keyframes animateGlow {
			0%{background-position:0% 50%}
			50%{background-position:100% 50%}
			100%{background-position:0% 50%}
		  }
.part_1 .tpright .box .title{ font-size: 32px; font-weight: bold; color: #fff; margin: 10px 0px 20px;}
.part_1 .tpright .box .desc{animation: textColor 10s ease infinite;}
.part_1 .tpright .refer{ display: flex; align-items: stretch; justify-content: center;}
.part_1 .tpright .refer .sumbit{background: none;
	border: 2px solid #4bd577;
	font: inherit; padding: 10px 20px; border-radius: 20px;
	line-height: 1;
	margin: 0px 8px;
	padding: 10px 20px;
    font-size: 16px;color: #4bd577;
    transition: 0.25s; cursor: pointer;}
.part_1 .tpright .refer .sumbit:hover
 {
	  box-shadow: inset 0 0 0 30px #4bd577; color: #000;
	   border: 2px #4bd577 solid;
	}
	@keyframes noise-anim{
		0% {
			clip: rect(4px, 9999px, 52px, 0);
		}
		5% {
			clip: rect(79px, 9999px, 23px, 0);
		}
		10% {
			clip: rect(72px, 9999px, 20px, 0);
		}
		15% {
			clip: rect(13px, 9999px, 96px, 0);
		}
		20% {
			clip: rect(5px, 9999px, 8px, 0);
		}
		25% {
			clip: rect(54px, 9999px, 65px, 0);
		}
		30% {
			clip: rect(90px, 9999px, 51px, 0);
		}
		35% {
			clip: rect(20px, 9999px, 16px, 0);
		}
		40% {
			clip: rect(68px, 9999px, 27px, 0);
		}
		45% {
			clip: rect(29px, 9999px, 69px, 0);
		}
		50% {
			clip: rect(15px, 9999px, 46px, 0);
		}
		55% {
			clip: rect(49px, 9999px, 53px, 0);
		}
		60% {
			clip: rect(11px, 9999px, 20px, 0);
		}
		65% {
			clip: rect(75px, 9999px, 27px, 0);
		}
		70% {
			clip: rect(87px, 9999px, 68px, 0);
		}
		75% {
			clip: rect(1px, 9999px, 42px, 0);
		}
		80% {
			clip: rect(39px, 9999px, 6px, 0);
		}
		85% {
			clip: rect(37px, 9999px, 3px, 0);
		}
		90% {
			clip: rect(21px, 9999px, 34px, 0);
		}
		95% {
			clip: rect(87px, 9999px, 35px, 0);
		}
		100% {
			clip: rect(36px, 9999px, 18px, 0);
		}
	  }
	  .part_1 .tpleft:after{
		content:attr(data-text);
		position:absolute;
		left:2px;
		text-shadow:-1px 0 red;
		top:0;
		color:white;
		background:rgba(0,0,0,0.0);
		overflow:hidden;
		clip:rect(0,900px,0,0); 
		animation:noise-anim 2s infinite linear alternate-reverse;
	  }
	  
	 
	  .part_1 .tpleft:before{
		content:attr(data-text);
		position:absolute;
		left:-2px;
		text-shadow:1px 0 blue; 
		top:0;
		color:white;
		background:rgba(0,0,0,0.0);
		overflow:hidden;
		clip:rect(0,900px,0,0); 
		animation:noise-anim-2 3s infinite linear alternate-reverse;
	  }
