#wrapper{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: inline-block;    
	background: url(/images/about/img/intro_bg.jpg) no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	background-size: cover; 
}

#pointer{
	position: absolute;
	top: calc(28vh);
	right: calc(15vw);
	width: calc(60vh);
	height: calc(60vh);
}

#clock_dot{
	position: absolute;
	top: 46%;
	left: 46%;
	width: 8%;
}
#pointer_dot{
	/*pointer_dot.png*/
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -50%;
	margin-top: -50%;
	display: none;
}
	
#pointer_1{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -50%;
	margin-top: -50%;
	display: none;
}

#pointer_1 .maskimg {
	animation: 2s maskPosition1 1 alternate ;
}

#pointer_2 .maskimg {
	mask:  url(/images/about/img/masker.png) no-repeat;
	-webkit-mask:  url(/images/about/img/masker.png) no-repeat;
	-webkit-mask-size: 100% 50%;
	animation: 3s maskPosition2 1 alternate ;
}


@keyframes maskPosition1{
	0%{ opacity: 0; }
	100%{ opacity: 1; }
}
@keyframes maskPosition2{
	0%{ -webkit-mask-position:0% 0%; }
	100%{ -webkit-mask-position: 100% 100%; }
}

.pointer_1_ani{
	-webkit-animation-name: spin;
	/*-webkit-animation-duration: 180000ms;*/
	-webkit-animation-duration: 62000ms;
	/*-webkit-animation-duration: 60000ms;*/
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}
#pointer_2{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -50%;
	margin-top: -50%;
	/*transform: rotate(125deg);
	-moz-transform: rotate(125deg);
	-webkit-transform: rotate(125deg);
	-ms-transform: rotate(125deg);*/
	display: none;
}
.pointer_2_ani{
	-webkit-animation-name: spin;
	/*-webkit-animation-duration: 48000ms;*/
	-webkit-animation-duration: 22000ms;
	/*-webkit-animation-duration: 5000ms;*/
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

#circle_0{
	position: absolute;
	top: calc(28vh);
	right: calc(15vw);
	width: calc(60vh);
	height: calc(60vh);
	background: url(/images/about/img/circle_0.png) no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	background-size: cover; 
	display: none;
}

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

#number{
	position: absolute;
	right: calc(15vw + 14vh);
	width: calc(32vh);
	height: calc(14vh);
	mask:  url(/images/about/img/masker3.png) no-repeat;
	-webkit-mask:  url(/images/about/img/masker3.png) no-repeat;
	-webkit-mask-size: 100% 100%;
}

.num_box{
	position: absolute;
	width: 23%;
	height: auto;
}
.num1{
	left: 0%;
}
.num2{
	left: 25%;
}
.num3{
	left: 50%;
}
.num4{
	left: 75%;
}

#y1998,#y2000,#y2005,#y2007,#y2012,#y2013,#y2015,#y2016,#y2017,#y2018,#y2019,#y2020,#y2021{
	-webkit-animation-duration: 3s;
	-moz-animation-duration: 3s;
	-ms-animation-duration: 3s;
	animation-duration: 3s;
}

.subTitleArea{
	position: absolute;
	width: 40%;
	top: 40%;
	color: #fff;
}
.subTitle{
	position: relative;
	width: 100%;
	opacity: 0;
}
.subTitle h1 { line-height: 1.2em; margin-top: 10px }

.index_preload{
	display: none;
}

#pd1998,#pd2000,#pd2005,#pd2007,#pd2012,#pd2013,#pd2015,#pd2016,#pd2017,#pd2018,#pd2019,#pd2020,#pd2021{
	margin-top: 0;
}

#y1998 h1 { width: 80%; margin-left: 20% }


@media screen and (max-width: 800px) {
	
	#pointer, #circle_0 {
		top: calc(40vh);
		right: calc(50vw - 25vh);
		width: calc(50vh);
		height: calc(50vh);
	}
	#number{
		right: calc(50vw - 16vh);
		width: calc(32vh);
		height: calc(14vh);
	}
	
	.subTitleArea{
		width: 84%;
		left: 10%;
	}
	
}
	<!--ºÄʱ1777862963.0375Ãë-->