@charset "utf-8";
/*css reset*/
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, span, input, textarea ,.swiper-container{ margin:0; padding:0; }
li, ol { list-style:none; }
i, em { font-style:normal; }
a { text-decoration:none; }
input,textarea { -webkit-appearance: none; }
html {  -webkit-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0,255,255,255); }

@font-face {
    font-family: 'Manrope-Medium';
    src: url("../fonts/Manrope-Medium.ttf");
}

@font-face {
    font-family: 'SourceHanSansK-Medium';
    src: url("../fonts/SourceHanSansK-Light.ttf");
}
body {
	background-color: #000;
	font-family: "SourceHanSansK-Medium";
}
.wrapper {
	width: 100%;
	max-width: 1238px;
	margin: 0 auto;
	color: #FFFFFF;
	text-align: center;
	overflow-x: hidden;
}
.typeface01{
	font-family: 'SourceHanSansK-Medium';
}
.typeface02{
	font-family: 'Manrope-Medium';
}
.nav-section{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 66px;
	background: #1c1d1f;
	z-index: 999999;
	display:inline-block;
}
.nav-section .wrapper {
	position: relative;
	width: 100%;
	max-width: 1238px;
	margin: 0 auto;
	height: 66px;
	font-size: 14px;
	display: -webkit-box; 
	display: -moz-box; 
	-webkit-box-align:center; 
	-moz-box-align:center; 
}
.nav-ul{
	position: absolute;
	right: 0px;
	margin-top: -32px;
	color: #FFFFFF;
	width: 390px;
	height: 30px;
	display: flex;
	justify-content: space-around;
}
.nav-ul li{
	padding: 5px 20px;
	margin: 0px 2px;
	display: -webkit-box; 
	display: -moz-box; 
	-webkit-box-align:center; 
	-moz-box-align:center; 
	 -moz-user-select:none; 
	 -webkit-user-select:none; 
	 -ms-user-select:none; 
	 -khtml-user-select:none; 
	 user-select:none;
	 cursor: pointer;
}

.nav-ul li:hover{
	background: #1583f5;
	border-radius: 2px;
}

.activity{
	background: #1583f5;
	border-radius: 2px;
}
.logo{
	left: 0px !important;
	width: 115px;
	height: 15px;
	margin-top: 10px;
	margin-left: 10px;
	display:inline-block;
}
.stage > img {
	position: fixed;
	left: 50%;
	z-index: 1;
	display:inline-block;
}

.stage1-txt{
	position: fixed;
	margin-top: 100px;
	font-size: 56px;
	z-index: 99;
	width: 100%;
	max-width: 1238px;
	top: 0px;
	letter-spacing:2px
}

.stage1-p{
	position: fixed;
	top: 0px;
	margin-top: 180px;
	font-size: 22px;
	z-index: 99;
	width: 100%;
	max-width: 1238px;
	letter-spacing:1px
}
.stage1-p2{
	position: fixed;
	font-size: 16px;
	z-index: 99;
	padding: 4px 40px 2px 40px;
	border: 1px solid rgba(255,255,255,1.00);
	border-radius: 40px;
	left: 50%;
	transform: translateX(-50%);
}
.stage1-p2:hover{
		background-color:rgba(255,255,255,0.2);
	}
.stage1-p2 span{
	font-size: 22px;
}
.cp2-txt02{
	position: fixed;
	top: 0px;
	margin-top: 220px;
	font-size: 24px;
	font-weight: bold;
	z-index: 99;
	width: 100%;
	max-width: 1238px;
	
}
.bg1-img{
	top: 50%;
	margin-left: -784px;
	margin-top: -460px;
	display:inline-block;
}
.cp1-img {
	top: 50%;
	margin-left: -380px;
	margin-top: -460px;
}
.stage1 .cp1-img {
	top: 50%;
	left: 50%;
	margin: 0px;
	transform: translate(-50%,-50%) scale(1);
}

.stage2 .cp1-img{
	top: 50%;
	margin-top: -400px;
}
.stage2 .cp2-img01{
	top: 50%;
	margin: 156px 0px 0px 53px;
	z-index: 9999;
}
.cp2-img02-div{
	position: fixed;
	top: 50%;
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
	z-index: 9999;
	margin: 160px 0px 0px 0px;
}
.bg01-img{
	position: absolute;
	height: 100%;
	width: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.stage2 .cp2-img02{
	position: absolute;
	top: 0%;
	margin: 157px 0px 0px -18px;
}
.stage2 .cp2-img03{
	top: 50%;
	margin: 20px 0px 0px 210px;
}
.stage2 .cp2-img04{
	top: 50%;
	margin: -234px 0px 0px 220px;
}
.stage2 .cp2-img05{
	top: 50%;
	margin: -130px 0px 0px -130px;
}

.stage2 .cp2-txt02{
	top: 50%;
	text-align: center;
	width: 430px;
	font-weight: 300;
	margin: 350px 0px 0px 500px;
}

.stage2 .cp2-txt03{
	position: fixed;
	margin-top: 220px;
	font-size: 22px;
	font-weight: 300;
	z-index: 99;
	top: 50%;
	left: 50%;
	text-align: left;
	width: 30%;
	margin: -330px 0px 0px 60px;
}
.stage2 .cp2-txt03 span{
	font-size: 22px;
	color: #777777;
	font-weight: 300;
}
.stage2 .cp2-txt04{
	position: fixed;
	margin-top: 220px;
	font-size: 18px;
	font-weight:300;
	z-index: 99;
	top: 50%;
	left: 50%;
	text-align: center;
	width: 240px;
	margin:-142px 0px 0px -440px;
}
.stage1 .stage1-txt{
	font-size: 68px;
}

.stage1 .stage1-p{
	margin-top: 200px;
	line-height: 36px;
}
.stage2 .stage1-txt{
	top: 50%;
	text-align: left;
	font-size: 42px;
	line-height: 52px;
	width: 50%;
	margin: -60px 0px 0px 200px;
}
.stage2 .stage1-p{
	top: 50%;
	text-align: left;
	width: 50%;
	margin: 60px 0px 0px 200px;
	color: #777777;
}

.stage3 .cp1-img{
	top: 50%;
    margin-left: -640px;
	margin-top: -440px;
}

.stage3 .stage1-txt{
	text-align: left;
	top: 50%;
	line-height: 100px;
	width: 300px;
	margin: 150px 0px 0px 800px;
}
.stage3 .stage1-p{
	text-align: left;
	line-height: 36px;
	top: 50%;
	width: 50%;
	width: 420px;
	margin: 150px 0px 0px 800px;
	letter-spacing: 0.5px;
}

.stage4 .cp1-img{
	margin-left: -640px;
	margin-top: -440px;
	top: 50%;
	left: 50%;
}
.stage4 .cp2-img{
	top: 50%;
	left: 50%;
	margin: 4px 0px 0px -252px;
}
.stage4 .stage1-txt{
	text-align: center;
	line-height: 100px;
	margin: -340px 0px 0px 0px;
	top: 0px;
	margin-top: 100px;
}
.stage4 .stage1-p{
	text-align: center;
	font-size: 32px;
	top: 0px;
	margin-top: 120px;
}
.stage5 .cp1-img {
	top: 50%;
	margin-left: -526px;
	margin-top: -440px;
}

.stage5 .cp2-img{
	top: 50%;
	margin: 0px 0px 0px -80px;
}
.stage5 .cp3-img{
	top: 50%;
	margin: -22px 0px 0px -80px;
}
.stage5 .bg5-img-xian{
	top: 50%;
	margin: -20px 0px 0px -294px;
	height: 230px;
}
.stage5 .stage1-txt{
	text-align: left;
	top: 50%;
	left: 50%;
	width: 800px;
	line-height: 90px;
	margin: 140px 0px 0px -460px;
}
.stage5 .stage1-p{
	text-align: left;
	top: 50%;
	left: 50%;
	font-size: 32px;
	width: 800px;
	margin: 230px 0px 0px -410px;
}
.stage5 .stage5-img01{
	display: block;
}
.stage5 .stage5-img02{
	display: none;
}
.cp5-img02-div{
	position: fixed;
	top: 50%;
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
	z-index: 9999;
	margin: 0px 0px 0px 0px;
}
.stage01 .bg1-video{
	/*margin-left: -684px;*/
	position: fixed;
	width: 1480px;
	height: 833px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 9;
	opacity: 0;
}
.stage7 .bg1-video{
	/*margin-left: -684px;*/
	position: fixed;
	width: 1472px;
	height: 833px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.stage01 .bg1-img{
	position: fixed;
    z-index: 99;
    width: 100%;
    height: 100%;
    margin: 0px;
	transform: translate(-50%,-50%);
}
.stage01 .cp1-img{
	top: 0px;
	margin-top: 110px;
	width: 425px;
	height: 95px;
	margin-left: -208px !important;
	z-index: 100;
}
.stage01 .index-btn{
	position: fixed;
	font-size: 16px;
	top: 0px;
	left: 50%;
	margin-top: 220px;
	margin-left: -80px;
	text-align: center;
	z-index: 99;
	width: 150px;
	height: 37px;
	padding-right: 18px;
	background:url("../images/index-btn-icon01.png") 100% 100%;
	background-size: 100% 100%;
	border: 1px solid rgba(255,255,255,1.00);
	border-radius: 30px;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
	-moz-user-select:none; 
    -webkit-user-select:none; 
    -ms-user-select:none;
    -khtml-user-select:none; 
    user-select:none;
	z-index: 99999;
	cursor: pointer;
}
.stage01 .index-btn:hover{
	background:url("../images/index-btn-icon02.png") 100% 100%;
	background-size: 100% 100%;	
}

.stage6 .cp1-img {
	top: 50%;
	margin-left: -493px;
	margin-top: -440px;
}
.stage6 .stage1-txt{
	text-align: center;
	margin: -340px 0px 0px 0px;
	top: 0px;
	margin-top: 100px;
}
.stage6 .stage1-p{
	text-align: center;
	top: 0px;
	font-size: 22px;
	margin-top: 180px;
	line-height: 36px;
}
.stage7-btn {
	position: fixed;
	bottom: 100px;
	width: 220px;
	height: 44px;
	color: #FFFFFF;
	z-index: 999;
	left: 50%;
	font-size: 16px;
	transform: translateX(-50%);
	border: 1px solid rgba(255,255,255,1.00);
	border-radius: 30px;
	opacity: 0;
	display: -webkit-box; 
	display: -moz-box; 
	-webkit-box-align:center; 
	-moz-box-align:center; 
	-webkit-box-pack:center;
	-moz-box-pack:center; 
	 -moz-user-select:none; 
    -webkit-user-select:none; 
    -ms-user-select:none;
    -khtml-user-select:none; 
    user-select:none;
	cursor: pointer;
}
.stage7-btn:hover{
	background: rgba(255,255,255,.3);
}
.video{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: rgba(26,30,31,1.00);
	z-index: 999999;
	display: none;
}
.mui-player-div{
	position: fixed;
	/*width: 1280px;
	height: 720px;*/
	width: auto;
	/* height: 80%; */
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.video-close{
	position: fixed;
	top: 20px;
	right: 20px;
	width: 60px;
	height: 60px;
	background:url("../images/index-video-close.png") 100% 100%;
	background-size: 100% 100%;
	opacity: .5;
	z-index: 999;
}
.video-close:hover{
	opacity: 1;
}
.img-zz{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	z-index: 11 !important;
	transform: translate(-50%,-50%) scale(1);
}
.fadeIn{
	animation-delay: .5s;
}
.cp2-txt02-02an,.cp2-txt02-03an,.cp2-txt03-01an,.cp2-txt03-02an,.cp2-txt04-01an,.cp2-txt04-02an,.cp2-txt05-01an,.cp2-txt05-02an,.cp2-txt06-01an,.cp2-txt06-02an{
	opacity: 0;
}
.cp2-txt02-02an{
	transform-origin: 100px;
}
.bounceIn1 {
	-webkit-animation-name: bounceIn1;
	animation-name: bounceIn1
}
@-webkit-keyframes bounceIn1 {
	-webkit-animation-duration: .5s;
	animation-duration: .5s
0%, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);
animation-timing-function:cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity:0;
-webkit-transform:scale3d(2.3, 2.3, 2.3);
transform:scale3d(2.3, 2.3, 2.3)
}

to {
opacity:1;
-webkit-transform:scaleX(1);
transform:scaleX(1)
}
}
.bounceIn4 {
	-webkit-animation-name: bounceIn4;
	animation-name: bounceIn4
}
@-webkit-keyframes bounceIn4 {
	-webkit-animation-duration: .5s;
	animation-duration: .5s
0%, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);
animation-timing-function:cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity:0;
-webkit-transform:scale3d(2.3, 2.3, 2.3);
transform:scale3d(2.3, 2.3, 2.3)
}
20% {

-webkit-transform:scale3d(0.9,0.9, 0.9);
transform:scale3d(0.9,0.9, 0.9);
}
40% {
-webkit-transform:scale3d(1.1, 1.1, 1.1);
transform:scale3d(1.1, 1.1, 1.1);
}
60% {
-webkit-transform:scale3d(0.93, 0.93, 0.93);
transform:scale3d(0.93, 0.93, 0.93);
}
80% {
-webkit-transform:scale3d(1.03, 1.03, 1.03);
transform:scale3d(1.03, 1.03, 1.03);
}	
to {
opacity:1;
-webkit-transform:scaleX(1);
transform:scaleX(1)
}
}
.cp2-img02dh {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 150px;
	opacity: 0;
}

.bounceIn02 {
	transform-origin: top;
	animation:bounceIn2 .6s ease-in;
	-webkit-animation:bounceIn2 .6s ease-in;
	animation-fill-mode: forwards;
}

@keyframes bounceIn2
{
0% {transform:scale(1,.2);opacity: 0;margin-top: 116px;}
100% {transform: scale(1,1);opacity: 1; margin-top: 0px;}
}

@-webkit-keyframes bounceIn2 /*Safari and Chrome*/
{
0% {transform:scale(1,.2);opacity: 0;margin-top: 116px;}
100% {transform: scale(1,1);opacity: 1;margin-top: 0px;}
}
.cp5-img02dh {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 160px;
    width: 10px;
	opacity: 0;
}
.bounceIn03 {
	transform-origin: top;
	animation:bounceIn3 .6s ease-in;
	-webkit-animation:bounceIn3 .6s ease-in;
	animation-fill-mode: forwards;
}
@keyframes bounceIn3
{
0% {transform:scale(1,.2);opacity: 0;}
100% {transform: scale(1,1);opacity: 1;}
}

@-webkit-keyframes bounceIn3 /*Safari and Chrome*/
{
0% {transform:scale(1,.2);opacity: 0;}
100% {transform: scale(1,1);opacity: 1;}
}
@media (max-width: 1368px) {
	.stage > img {
		position: fixed;
		left: 50%;
		z-index: 1;
		transform: scale(.8);
	}
	
	.stage1 .cp1-img {
		top: 50%;
		left: 50%;
		margin: 0px;
		transform: translate(-50%,-50%) scale(.7);
	}
	.stage1 .stage1-txt{
		font-size: 52px;
	}

	.stage1 .stage1-p{
		margin-top: 180px;
		line-height: 30px;
	}
	.stage1-txt{
		position: fixed;
		margin-top: 100px;
		font-size: 48px;
		z-index: 99;
		width: 100%;
		top: 0px;
	}
	.img-zz{
		position: fixed;
		top: 50%;
		left: 50%;
		margin: 0px;
		transform: translate(-50%,-50%) scale(1) !important;
	}
	.stage01 .bg1-video{
		width: 1024px;
		height: 576px;
	}
	.stage1-p{
		position: fixed;
		top: 0px;
		margin-top: 190px;
		font-size: 16px;
		z-index: 99;
		width: 100%;
		
	}
	.stage2 .cp2-img01 {
		margin: 132px 0px 0px 56px;
	}
	.stage2 .cp2-img02 {
		margin: 113px 0px 0px -15px;
		transform: scale(.8 ,.6)
	}
	.stage2 .cp2-txt02 {
		top: 39%;
		left: 50%;
		width:200px;
		margin: 350px 0px 0px 0px;
	}
	.stage1-p2{
		position: fixed;
		font-size: 12px;
		z-index: 99;
		padding: 4px 30px 2px 30px;
		border: 1px solid rgba(255,255,255,1.00);
		border-radius: 40px;
		left: 50%;
		transform: translateX(-50%);
	}
	.stage1-p2:hover{
		background-color:rgba(255,255,255,0.2);
	}
	.stage1-p2 span{
		font-size: 16px;
	}
	.stage2 .cp2-txt03 span{
	font-size: 14px;
	color: #777777;
	font-weight: 300;
}
	.stage2 .cp2-img03 {
		top: 50%;
		margin: 30px 0px 0px 188px;
	}
	.stage2 .cp2-img04 {
		top: 57%;
		margin: -214px 0px 0px 196px;
		transform: scale(.8 ,.74)
	}
	.stage2 .cp2-img05 {
		margin: -90px 0px 0px -130px;
	}
	.stage3 .stage1-txt{
		text-align: left;
		top: 50%;
		line-height: 100px;
		width: 300px;
		margin: 130px 0px 0px 700px;
	}
	.stage3 .stage1-p{
		text-align: left;
		top: 50%;
		left: 50%;
		width: 420px;
		font-size: 22px;
		margin: 130px 0px 0px 100px;
	}
	.stage4 .cp2-img {
		top: 50%;
		left: 50%;
		margin: -36px 0px 0px -262px;
	}
	.stage4 .stage1-p {
		text-align: center;
		font-size: 28px;
		top: 0px;
		margin-top: 120px;
	}
	.stage5 .cp3-img {
		top: 50%;
		margin: -33px 0px 0px -91px;
	}
	.stage5 .bg5-img-xian {
		top: 50%;
		margin: -30px 0px 0px -251px;
		transform: scale(.8 ,.7)
	}
	.stage5 .stage1-txt {
		text-align: left;
		line-height: 60px;
		margin: 110px 0px 0px -320px;
	}
	.stage5 .stage1-p {
		text-align: left;
		margin: 180px 0px 0px -360px;
		font-size: 28px;
	}


	.stage2 .cp2-txt03{
		position: fixed;
		margin-top: 220px;
		font-size: 16px;
		font-weight: 500;
		z-index: 99;
		top: 67%;
		left: 50%;
		text-align: left;
		line-height: 22px;
		width: 30%;
		margin: -330px 0px 0px 60px;
	}
	.stage2 .cp2-txt04{
		position: fixed;
		margin-top: 220px;
		font-size: 14px;
		font-weight: 300;
		z-index: 99;
		top: 50%;
		left: 52%;
		text-align: center;
		width: 240px;
		margin: -100px 0px 0px -460px;
	}
	.cp2-txt02{
		position: fixed;
		top: 0px;
		margin-top: 220px;
		font-size: 16px;
		font-weight: 500;
		z-index: 99;
		width: 100%;
		max-width: 1238px;
	}
	.stage5 .stage5-img01{
		display: none;
	}
	.stage5 .stage5-img02{
		display: block;
	}
	.stage01 .index-btn{
		width: 128px;
		height: 30px;
		font-size: 14px;
	}
	
	.stage6 .stage1-p {
		text-align: center;
		top: 0px;
		margin-top: 180px;
		font-size: 18px;
		line-height: 30px;
	}
	.mui-player-div{
		width: 1024px;
		height: 576px;
	}
	.video-close{
		width: 50px;
		height: 50px;
	}
	.stage7-btn {
		position: fixed;
		width: 180px;
		height: 36px;
		color: #FFFFFF;
		z-index: 999;
		left: 50%;
		font-size: 14px;
		transform: translateX(-50%);
		border: 1px solid rgba(255,255,255,1.00);
		border-radius: 30px;
		display: -webkit-box; 
		display: -moz-box; 
		-webkit-box-align:center; 
		-moz-box-align:center; 
		-webkit-box-pack:center;
		-moz-box-pack:center; 
	}
}

@media (max-width: 1024px) {
	.mui-player-div{
		width: 800px;
		height: 450px;
	}
	.video-close{
		width: 36px;
		height: 36px;
	}
	.stage7-btn {
		position: fixed;
		width: 180px;
		height: 36px;
		color: #FFFFFF;
		z-index: 999;
		left: 50%;
		font-size: 14px;
		transform: translateX(-50%);
		border: 1px solid rgba(255,255,255,1.00);
		border-radius: 30px;
		display: -webkit-box; 
		display: -moz-box; 
		-webkit-box-align:center; 
		-moz-box-align:center; 
		-webkit-box-pack:center;
		-moz-box-pack:center; 
	}
}