body {
	background: #fcfcfc;
	height: 100vh;
	width: 1280rem;
	overflow: hidden;
}

.hide {
	display: none;
}

/* 自定义红色背景 */
.red-bg {
	background: #C8132D !important;
}

/* spinner居中并设置白色/金色 */
.spinner-custom {
	position: absolute !important;
	left: 50% !important;
	margin-left: -100rem !important;
	top: 60% !important;
	margin-top: -100rem !important;
	border: 4px solid rgba(255, 255, 255, 0.2) !important;
	border-left-color: #FFD700 !important;
}

/* 科技感加载文字样式 */
.num-tech {
	color: #FFD700 !important;
	font-weight: bold !important;
	letter-spacing: 8rem !important;
	text-shadow: 0 0 20rem rgba(255, 215, 0, 0.8), 
	             0 0 40rem rgba(255, 215, 0, 0.5) !important;
	animation: num-glow 1.5s ease-in-out infinite !important;
	position: absolute !important;
	left: 50% !important;
	top: 60% !important;
	margin-top: 150rem !important;
	transform: translateX(-50%) !important;
	text-align: center !important;
	width: auto !important;
	line-height: normal !important;
}

.bigp-tech {
	color: #FFFFFF !important;
	font-weight: 300 !important;
	letter-spacing: 6rem !important;
	text-shadow: 0 0 15rem rgba(255, 255, 255, 0.6) !important;
	border: 2px solid rgba(255, 215, 0, 0.5) !important;
	background: rgba(255, 215, 0, 0.1) !important;
	padding: 20rem 60rem !important;
	border-radius: 50rem !important;
	animation: bigp-pulse 2s ease-in-out infinite !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	margin-top: 550rem !important;
	margin-left: 0 !important;
	transform: translateX(-50%) !important;
	width: auto !important;
	height: 60rem !important;
	line-height: 60rem !important;
	white-space: nowrap !important;
	text-align: center !important;
}

.bigp-tech:hover {
	background: rgba(255, 215, 0, 0.2) !important;
	border-color: rgba(255, 215, 0, 0.8) !important;
	text-shadow: 0 0 20rem rgba(255, 255, 255, 0.9) !important;
	transform: translateX(-50%) !important;
}

.bigp-tech:active {
	transform: translateX(-50%) !important;
}

/* zs24图片居中 */
.zs24 {
	position: absolute !important;
	left: 50% !important;
	top: 300rem !important;
	transform: translateX(-50%) !important;
}

.zs24 img {
	width: 693rem !important;
	height: auto !important;
	display: block !important;
}

/* 数字发光动画 */
@keyframes num-glow {
	0%, 100% {
		text-shadow: 0 0 20rem rgba(255, 215, 0, 0.8), 
		             0 0 40rem rgba(255, 215, 0, 0.5);
	}
	50% {
		text-shadow: 0 0 30rem rgba(255, 215, 0, 1), 
		             0 0 60rem rgba(255, 215, 0, 0.7);
	}
}

/* 按钮脉冲动画 */
@keyframes bigp-pulse {
	0%, 100% {
		box-shadow: 0 0 20rem rgba(255, 215, 0, 0.3);
	}
	50% {
		box-shadow: 0 0 40rem rgba(255, 215, 0, 0.6);
	}
}

.loading{ width: 1280rem; height: 100vh; background: #FFFFFF;position: absolute;z-index: 9999999999; left: 0 ;top: 0;}
.loadcontent{ width: 1280rem; height: 100vh; position: absolute; left: 0; top: 0; overflow: visible !important;}
.spinner {
	width: 200rem; height: 200rem; overflow: hidden; position: absolute; left: 0; top: 0;
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-left-color: #000;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}


.num{ width: 100%; line-height: 60rem; text-align: center; position: absolute; bottom: 0; font-size: 36rem;}

@-webkit-keyframes rotates{
	from{ -webkit-transform: rotate(0);}
	to{ -webkit-transform: rotate(360deg);}
}
@keyframes rotates{
	from{ transform: rotate(0);}
	to{ transform: rotate(360deg);}
}

/* music */

.music {
	position: fixed;
    right: 40rem;
    top: 40rem;
    width: 80rem;
    height: 80rem;
    border-radius: 50%;
    background: url(../img/music.png) no-repeat;
    display: block;
    background-size: 100% 100%;
    z-index: 9999;
}

.rota {
	animation: anima 1.5s linear infinite;
	-webkit-animation: anima 1.5s linear infinite;
}

@-webkit-keyframes anima {
	0% {
		-webkit-transform: rotateZ(0deg);
		transform: rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes anima{
	0% {
		-webkit-transform: rotateZ(0deg);
		transform: rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.up {
	position: absolute;
	left: 50%;
	top: 95%;
	margin-left: -40rem;
	animation: updown 1s linear infinite;
	-webkit-animation: updown 1s linear infinite;
	z-index: 9;
}

.up img {
	width: 80rem;
}

.ups {
	position: fixed;
	left: 92%;
	top: 90%;
	margin-left: -40rem;
	animation: updowns 1s linear infinite;
	-webkit-animation: updowns 1s linear infinite;
	z-index: 9;
}

.ups img {
	width: 80rem;
}

@-webkit-keyframes updown {
	from {
		-webkit-transform: translateY(0);
		opacity: 0;
	}
	to {
		-webkit-transform: translateY(-80rem);
		opacity: 1;
	}
}
@keyframes updown {
	from {
		transform: translateY(0);
		opacity: 0;
	}
	to {
		transform: translateY(-80rem);
		opacity: 1;
	}
}

@-webkit-keyframes updowns {
	from {
		-webkit-transform: translateY(0);
		opacity: 0;
	}
	to {
		-webkit-transform: translateY(20rem);
		opacity: 1;
	}
}
@keyframes updowns {
	from {
		transform: translateY(0);
		opacity: 0;
	}
	to {
		transform: translateY(20rem);
		opacity: 1;
	}
}

@-webkit-keyframes slideInUps {
	0% {
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
		visibility: visible
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes slideInUps {
	0% {
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
		visibility: visible
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

.slideInUps{ animation: slideInUps 0.8s forwards; -webkit-animation: slideInUps 0.8s forwards;}

@-webkit-keyframes slideOutUps {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	100% {
		visibility: hidden;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0)
	}
}

@keyframes slideOutUps {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	100% {
		visibility: hidden;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0)
	}
}
.slideOutUps{ animation: slideOutUps 0.8s forwards; -webkit-animation: slideOutUps 0.8s forwards;}

@-webkit-keyframes slideOutRights {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	100% {
		visibility: hidden;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0)
	}
}

@keyframes slideOutRights {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	100% {
		visibility: hidden;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0)
	}
}
.slideOutRights{ animation: slideOutRights 0.8s forwards; -webkit-animation: slideOutRights 0.8s forwards;}

@-webkit-keyframes slideInRights {
	0% {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		visibility: visible
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes slideInRights {
	0% {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		visibility: visible
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}
.slideInRights{ animation: slideInRights 0.8s forwards; -webkit-animation: slideInRights 0.8s forwards;}

@-webkit-keyframes slideInLefts {
	0% {
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
		visibility: visible
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes slideInLefts {
	0% {
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
		visibility: visible
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}
.slideInLefts{ animation: slideInLefts 0.8s forwards; -webkit-animation: slideInLefts 0.8s forwards;}

@-webkit-keyframes slideOutLefts {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	100% {
		visibility: hidden;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0)
	}
}

@keyframes slideOutLefts {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	100% {
		visibility: hidden;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0)
	}
}
.slideOutLefts{ animation: slideOutLefts 0.8s forwards; -webkit-animation: slideOutLefts 0.8s forwards;}

@-webkit-keyframes slideOutDowns {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	100% {
		visibility: hidden;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0)
	}
}

@keyframes slideOutDowns {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	100% {
		visibility: hidden;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0)
	}
}
.slideOutDowns{ animation: slideOutDowns 0.8s forwards; -webkit-animation: slideOutDowns 0.8s forwards;}

@-webkit-keyframes slideInDowns {
	0% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		visibility: visible
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes slideInDowns {
	0% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		visibility: visible
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}
.slideInDowns{ animation: slideInDowns 0.8s forwards; -webkit-animation: slideInDowns 0.8s forwards;}


/* alert */

.pagealert {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 9999;
	display: none;
	background: rgba(0, 0, 0, 0.3);
}

.alert {
	width: 400rem;
	height: 200rem;
	position: fixed;
	left: 50%;
	margin-left: -200rem;
	top: 50%;
	margin-top: -100rem;
	display: block;
	border-radius: 20rem;
	background: #ffffff;
}

.alertsure {
	width: 100%;
	height: 60rem;
	position: absolute;
	bottom: 0;
	text-align: center;
	line-height: 60rem;
	font-size: 22rem;
	border-top: 1rem solid rgba(0, 0, 0, 0.6);
}

.alerttext {
	width: 80%;
	text-align: center;
	font-size: 22rem;
	color: #000000;
	position: absolute;
	left: 10%;
	top: 55rem;
	line-height: 30rem;
}




/* 设置屏幕高度大于1050时  适配iPhone X iPhone XS Max iPhone XR */
 @media screen and (min-height: 2100rem) {
 	.container{ width: 100%; height: 93%; position: absolute; left: 0; top: 3%;}
 }
 
 /* 设置屏幕高度小于1050时 */
 @media screen and (max-height: 2098rem) {
 	.container{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
 }
 
 
/* page1 */
.page{ width: 1280rem; height: 100vh; overflow: hidden; position: absolute; left: 0; top: 0;}
.bg1{ width: 100%; height: 100%; background: url(../img/bg1.png); background-size: 100% 100%; position: absolute; left: 0; top: 0;}

.logo_l{ position: absolute; left: 65rem; top: 65rem;}
.logo_r{ position: absolute; right: 50rem; top: 50rem;}

.contact_box{ width: 1280rem; height: 2276rem; position: absolute; left: 0; top: 50%; margin-top: -1138rem;}

.bg1{ width: 100%; height: 100%; background: url(../img/bg1.png); background-size: 100% 100%; position: absolute; left: 0; top: 0;}
.page1_1{ position: absolute; left: 458rem; top: 200rem;}
.page1_2{ position: absolute; left: 0rem; top: 400rem;}
.page1_3{ position: absolute; left: 302rem; bottom: 50rem}

/* page1 video播放器样式 */
.page1-video {
	position: absolute;
	left: 50%;
	top: 45%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
	z-index: 10;
	box-shadow: 0 4rem 20rem rgba(0, 0, 0, 0.3);
}




/* page2 */
.bg2{ width: 100%; height: 100%; background: url(../img/bg2.png); background-size: 100% 100%; position: absolute; left: 0; top: 0;}
.page2_2{ position: absolute; left: 50%; top: 850rem; transform: translate(-50%, -50%) }
.page2_3{ position: absolute; left: 50%; top: 830rem;
	animation: clockRotate 9s linear infinite; -webkit-animation: clockRotate 9s linear infinite;
	transform-origin: 48% 3%;
}

/* 时钟旋转动画 */
@keyframes clockRotate {
	0% {
		transform: translate(-50%, 0%)  rotate(0deg);
	}
	100% {
		transform: translate(-50%, 0%)  rotate(360deg);
	}
}

@-webkit-keyframes clockRotate {
	0% {
		-webkit-transform: translate(-50%, 0%)  rotate(0deg);
		transform: translate(-50%, 0%)  rotate(0deg);
	}
	100% {
		-webkit-transform: translate(-50%, 0%)  rotate(360deg);
		transform: translate(-50%, 0%)  rotate(360deg);
	}
}
.page2_4{ position: absolute; left: 488rem; bottom: 550rem;}
.page2_5{ position: absolute; left: 294rem; bottom: 250rem;}
.page2_6{ position: absolute; left: 296rem; bottom: 200rem;}



/* page3 */
.bg3{ width: 100%; height: 100%; background: url(../img/bg3.png); background-size: 100% 100%; position: absolute; left: 0; top: 0;}
.page3_0{ position: absolute; left: 332rem; top: 240rem;}
.page3_1{ position: absolute; left: 50%; top: 1100rem; transform: translate(-50%, -50%)}
.page3_2{ position: absolute; left: 50%; top: 1350rem; animation: clockRotate2 9s linear infinite; -webkit-animation: clockRotate2 9s linear infinite;
	transform-origin: 48% 95%;
}

.page3_3{ position: absolute; left: 454rem; top: 800rem;}
.page3_4{ position: absolute; left: 308rem; top: 920rem;}
.page3_5{ position: absolute; left: 436rem; top: 1150rem;}
.page3_6{ position: absolute; left: 259rem; top: 1270rem;}
.page3_7{ position: absolute; left: 418rem; top: 1550rem;}
.page3_8{ position: absolute; left: 259rem; top: 1650rem;}


/* 时钟旋转动画 */
@keyframes clockRotate2 {
	0% {
		transform: translate(-50%, -100%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -100%) rotate(360deg);
	}
}

@-webkit-keyframes clockRotate2 {
	0% {
		-webkit-transform: translate(-50%, -100%)  rotate(0deg);
		transform: translate(-50%, -100%)  rotate(0deg);
	}
	100% {
		-webkit-transform: translate(-50%, -100%)  rotate(360deg);
		transform: translate(-50%, -100%)  rotate(360deg);
	}
}





/* page4 */
.bg4{ width: 100%; height: 100%; background: url(../img/bg4.png); background-size: 100% 100%; position: absolute; left: 0; top: 0;}
.page4_1{ position: absolute; left: 360rem; top: 240rem;}
.page4_2{ position: absolute; left: 205rem; top: 600rem; }

.page4_3{
	width: 100%; height: 100%;  background-size: 100% 100%; position: absolute; left: 0; top: 0;
}
.page4_33{
	position: absolute; left: 605rem; bottom: 230rem;
}
.page4_4{ position: absolute; left: 288rem; bottom: 100rem;}


/* page5 */
.bg5{ width: 100%; height: 100%; background: url(../img/bg5.png); background-size: 100% 100%; position: absolute; left: 0; top: 0;}
.page5_1{ position: absolute; right: 50rem; bottom: 420rem;}
.page5_2{ position: absolute; left: 50rem; bottom: 210rem;}
.page5_3{ position: absolute; left: 50rem; bottom: 100rem;}


/* page6 */
.bg6{ width: 100%; height: 100%; background: url(../img/bg6.png); background-size: 100% 100%; position: absolute; left: 0; top: 0;}
.page6_1{ position: absolute; left: 100rem; bottom: 420rem;}
.page6_2{ position: absolute; left: 50rem; bottom: 210rem;}
.page6_3{ position: absolute; left: 50rem; bottom: 100rem;}



/* page7 */
.bg7{ width: 100%; height: 100%; background: url(../img/bg7.png); background-size: 100% 100%; position: absolute; left: 0; top: 0;}
.page7_1{ position: absolute; right: 50rem; bottom: 420rem;}
.page7_2{ position: absolute; left: 50rem; bottom: 210rem;}
.page7_3{ position: absolute; left: 50rem; bottom: 100rem;}

/* page8 */
.bg8{ width: 100%; height: 100%; background: url(../img/bg8.png); background-size: 100% 100%; position: absolute; left: 0; top: 0;}
.page8_1{ position: absolute; left: 100rem; bottom: 420rem;}
.page8_2{ position: absolute; left: 50rem; bottom: 210rem;}
.page8_3{ position: absolute; left: 50rem; bottom: 100rem;}


/* page9 */
.bg9{ width: 100%; height: 100%; background: url(../img/bg9.png); background-size: 100% 100%; position: absolute; left: 0; top: 0;}
.page9_1{ position: absolute; right: 50rem; bottom: 600rem;}
.page9_2{ position: absolute; left: 50rem; bottom: 210rem;}
.page9_3{ position: absolute; left: 50rem; bottom: 100rem;}


/* page10 */
.bg10{ width: 100%; height: 100%; background: url(../img/bg10.png); background-size: 100% 100%; position: absolute; left: 0; top: 0;}
.page10_1{ position: absolute; left: 165rem;  bottom: 470rem;}
.page10_2{ position: absolute; left: 410rem; bottom: 350rem;}
.page10_3{ position: absolute; left: 313rem; bottom: 240rem;}
.page10_4{ position: absolute; left: 411rem; bottom: 165rem;}
.page10_5{ position: absolute; left: 206rem; top: 155rem; z-index: 2 !important;}
.page10_6{ position: absolute !important; left: 0rem !important; top: 0rem !important; z-index: 1 !important;}


@-webkit-keyframes filterIn {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(1.5, 1.5, 1.5);
		transform: scale3d(1.5, 1.5, 1.5);
		filter: blur(20rem);
		-webkit-filter: blur(20rem);
	}
	50% {
		opacity: 1;
	}
}

@keyframes filterIn {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(1.5, 1.5, 1.5);
		transform: scale3d(1.5, 1.5, 1.5);
		filter: blur(20rem);
		-webkit-filter: blur(20rem);
	}
	50% {
		opacity: 1;
	}
}

.filterIn {
	-webkit-animation: filterIn 2s linear;
	animation: filterIn 2s linear
}