/* latin */
@font-face {
  font-family: 'SFUDinEngschrift';
  src: url(../../fontFamily/SFUDinEngschrift.woff) format('woff'), url(../../fontFamily/SFUDinEngschrift.ttf) format('ttf');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.zacitves-rotate {
	-webkit-transform: rotateX(60deg) rotateY(0deg);
			transform: rotateX(60deg) rotateY(0deg);
}

@-webkit-keyframes opacity {
	from{ opacity: 0;}
	to{ opacity: 1;}
}
@keyframes opacity {
	from{ opacity: 0;}
	to{ opacity: 1;}
}
.zfontShine {
    background:-webkit-linear-gradient(left, #6de2ff 0%, #fff 50%, #fff 90%, #6de2ff 100%);
    background: linear-gradient(left, #6de2ff 0%, #fff 50%, #fff 90%, #6de2ff 100%);
    background-color: #6de2ff;
    background-size:20% 100%; 
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    		background-clip: text;
    -webkit-text-fill-color: transparent;
    		text-fill-color: transparent;
}
.zfontShine2 {
    /*background:-webkit-gradient(linear, 0 0, 100% 0, from(#fff), color-stop(0.5, #2c84f8), color-stop(0.9, #2c84f8), to(#fff));*/
    background:-webkit-linear-gradient(left, #fff 0%, #2c84f8 50%, #2c84f8 90%, #fff 100%);
    background: linear-gradient(left, #fff 0%, #2c84f8 50%, #2c84f8 90%, #fff 100%);
    background-color: #fff;
   	background-repeat: no-repeat;
    background-size:20% 100%; 
    -webkit-background-clip: text;
    		background-clip: text;
    -webkit-text-fill-color: transparent;
    		text-fill-color: transparent;
}
.zfontShine3 {
    background:-webkit-linear-gradient(left, #00eaff 0%, #fff 50%, #fff 90%, #00eaff 100%);
    background: linear-gradient(left, #00eaff 0%, #fff 50%, #fff 90%, #00eaff 100%);
    background-color: #00eaff;
   	background-repeat: no-repeat;
    background-size:20% 100%; 
    -webkit-background-clip: text;
    		background-clip: text;
    -webkit-text-fill-color: transparent;
    		text-fill-color: transparent;
}
@-webkit-keyframes zfontShine {
    0% { background-position: -100% 0; }
    80% { background-position: -100% 0; }
    100% { background-position: 100% 100%; }
 }
 @keyframes zfontShine {
    0% { background-position: -100% 0; }
    80%{ background-position: -100% 0; }
    100% {background-position: 100% 100%;}
 }


.zfontShine {-webkit-animation: zfontShine 5s linear infinite; animation: zfontShine 5s linear infinite; }
.zfontShine2 {-webkit-animation: zfontShine 4s linear infinite; animation: zfontShine 4s linear infinite; }
.zfontShine3 {-webkit-animation: zfontShine 5s linear infinite; animation: zfontShine 5s linear infinite; }


/*课堂活动监测页面----------------------------------------------------------------------*/
.zactives { position: absolute; top: .9rem; left: 5.8rem; width: 8rem; height: 8rem;}
.zactives-list { position: relative;}
.zactives-item { position: absolute; left: .5rem; top: .5rem; width: 2rem; height: 2.3rem; z-index: 100;}
.zactives-item { position: absolute; left: 0; top: 0; width: 2rem; height: 3rem; opacity: 0;
	-webkit-animation: opacity 1s forwards ease-in;
					animation: opacity 1s forwards ease-in;
}
.zactives-index { z-index: 1000;}
.zactives-item:nth-child(1) { -webkit-animation-delay: 1s;}
.zactives-item:nth-child(2) { -webkit-animation-delay: 2.2s;}
.zactives-item:nth-child(3) { -webkit-animation-delay: 2s;}
.zactives-item:nth-child(4) { -webkit-animation-delay: 1.8s;}
.zactives-item:nth-child(5) { -webkit-animation-delay: 1.6s;}
.zactives-item:nth-child(6) { -webkit-animation-delay: 1.4s;}
.zactives-item:nth-child(7) { -webkit-animation-delay: 1.2s;}

.zactives-item:nth-child(1) .zpillar-flex { -webkit-animation-delay: 1s;}
.zactives-item:nth-child(2) .zpillar-flex { -webkit-animation-delay: 2.2s;}
.zactives-item:nth-child(3) .zpillar-flex { -webkit-animation-delay: 2s;}
.zactives-item:nth-child(4) .zpillar-flex { -webkit-animation-delay: 1.8s;}
.zactives-item:nth-child(5) .zpillar-flex { -webkit-animation-delay: 1.6s;}
.zactives-item:nth-child(6) .zpillar-flex { -webkit-animation-delay: 1.4s;}
.zactives-item:nth-child(7) .zpillar-flex { -webkit-animation-delay: 1.2s;}


.zactives-pillar { position: absolute; left: 50%; bottom: 0; width: .84rem; height: .7rem; margin-left: -.42rem;}
.zpillar-top { position: absolute; top: -.37rem; width: .84rem; height: .37rem; background: url(../../images/pillar_01.png) center top no-repeat; background-size: .84rem .37rem;}
.zpillar-icon { position: absolute; bottom: 0.0rem; width: .3rem; height: 0.3rem; left: .27rem; top: .03rem; font-size: 0; line-height: 0;
-webkit-transform: rotateX(-65deg) rotateY(1deg) rotateZ(48deg);
}
.zpillar-icon svg { margin: 0; padding: 0; width: 100%; height: 100%; }
.zpillar-color { fill: rgba(0, 255, 255, 1);}
@-webkit-keyframes zhang{
	0% { height: 0;}
}
.zpillar-shadow { position: absolute; bottom: -.84rem; width: 1.4rem; height: 1.4rem; left: 50%; margin-left: -.7rem; font-size: 0; line-height: 0; opacity: .5s;

}
.zpillar-shadow svg { margin: 0; padding: 0; width: 100%; height: 100%; -webkit-transform: rotateX(-65deg) rotateY(1deg) rotateZ(48deg);}
.zpillar-color1 { fill: rgba(0, 255, 255, .06);}
.zpillar-flex { position: absolute; bottom: .37rem; width: .84rem; height: .7rem; background: url(../../images/pillar_02.png) center top repeat-y;  background-size: .84rem .1rem;
	animation: zpillar-progress .5s ease;
	
}
@-webkit-keyframes zpillar-progress {
	0% { height: 1px;}
}

.zpillar-bottom {position: absolute;bottom: 0; width: 100%; height: .37rem; background: url(../../images/pillar_04.png) center top no-repeat;  background-size: .84rem .37rem;}
.zpillar-tray { position: absolute; bottom: -.19rem; left: -.26rem; width: 1.36rem; height: .74rem; background: url(../../images/tray_02.png) no-repeat; background-size: 1.36rem .74rem;}
.zactives-info { position: absolute; bottom: .55rem; left: 50%; margin-left: -1rem; width: 2rem; text-align: center; }
.zactives-info dt { line-height: .34rem; font-size: .18rem; color: #fff;}
.zactives-info dd { line-height: .24rem; font-size: .14rem; color: #9fe0ff;}
.actives-icon { width: 1rem; height: 1rem; background: #fff;}
.actives-icon svg { width: .57rem; height: .57rem;}
.zactives-grid { position: absolute; left: 4.2rem; top: 2.3rem; width: 11.30rem; height: 7rem; overflow: hidden;}
.zactives-grid div { 
-webkit-mask-image: url(../../images/blend1.png);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position:50% 50%;
	-webkit-mask-size: 2.5rem 1.5rem;
			mask-image: url(../../images/blend1.png);
			mask-repeat: no-repeat;
			mask-position:50% 50%;
			mask-size: 2.5rem 1.5rem;
	-webkit-animation:maskimage 10s ease-out infinite forwards, opacitimage 10s ease-out infinite forwards;
			animation:maskimage 10s ease-out infinite forwards, opacitimage 10s ease-out infinite forwards;
}
.zactives-lightblue { position: absolute; left: 4.7rem; top: 2.3rem; width: 11.3rem; height: 7rem; background: radial-gradient(rgba(0, 51, 255, .4) 10%, rgba(0, 51, 255, .3) 30%, rgba(0, 51, 255, 0) 68%);
	-webkit-animation: opacitimage 10s ease-out infinite forwards;
			animation: opacitimage 10s ease-out infinite forwards;
}
.zactives-darkblue { position: absolute; left: 4.7rem; top: 2.6rem; width: 11.3rem; height: 7rem; background: radial-gradient(rgba(13, 44, 169, .4) 10%, rgba(13, 44, 169, .3) 30%, rgba(13, 44, 169, 0) 68%);
	-webkit-animation: opacitimage 10s ease-out infinite forwards;
			animation: opacitimage 10s ease-out infinite forwards;
}
@-webkit-keyframes opacitimage{
	0% { opacity: .5;}
	50%{ opacity: 1;}
	100%{ opacity: .5;}
}
@-webkit-keyframes maskimage{
				0%{ 
					-webkit-mask-size: 2.5rem 1.5rem;
							mask-size: 2.5rem 1.5rem;
				}
				50%{ 
					-webkit-mask-size: 18.18rem 10.98rem;
							mask-size: 18.18rem 10.98rem;
				}
				100%{
					-webkit-mask-size: 2.5rem 1.5rem;
							mask-size: 2.5rem 1.5rem;
				}
			}
.zactives-circle1 { position: absolute; left: 5.2rem; top: 2.65rem; width: 8.4rem; height: 8.4rem;}
.zactives-circle1 .zpoints-item {
	left: 4.5rem; background: rgba(76, 219, 255, .2);
	-webkit-transform-origin: 0 4.5rem; 
			transform-origin: 0 4.5rem;
	-webkit-animation: zpoints-color4 3s infinite ease;
			animation: zpoints-color4 3s infinite ease;
}
.zactives-circle5 { position: absolute; left:8.4rem; top: 4.2rem; width: 7.4rem; height: 7.4rem; opacity: 1; }
.zactives-circle5 .water1,
.zactives-circle5 .water2,
.zactives-circle5 .water3,
.zactives-circle5 .water4,
.zactives-circle5 .water5,
.zactives-circle5 .water6 {position: absolute; left: 0; top: 0; padding: 20%; border: 1px solid #05f; box-shadow: 0 0 1rem .2rem rgba(0, 85, 255, 1) inset; border-radius: 100%; z-index: 1; background: rgba( 0, 85, 255, .3); opacity: 0;}

@keyframes wateranimate {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0.5;
		box-shadow: 0 0 1rem .2rem rgba(0, 85, 255, .1) inset;
	}
	40% {
		-webkit-transform: scale(2);
		transform: scale(2);
		box-shadow: 0 0 1rem .2rem rgba(0, 85, 255, 0) inset;
		opacity: .3;
	}
	80% {
		box-shadow: 0 0 1rem .2rem rgba(0, 85, 255, 0) inset;
		-webkit-transform: scale(3);
		transform: scale(3);
		opacity: 0;
	}
	100% {
		box-shadow: 0 0 1rem .2rem rgba(0, 85, 255, 0) inset;
		-webkit-transform: scale(3);
		transform: scale(3);
		opacity: 0;
	}
}			
		
.zactives-circle5 .water1 {
	-webkit-animation: wateranimate 12s 10s ease-out infinite;
			animation: wateranimate 12s 10s ease-out infinite;
}			
.zactives-circle5 .water2 {
	-webkit-animation: wateranimate 12s 8s ease-out infinite;
			animation: wateranimate 12s 8s ease-out infinite;
}			
.zactives-circle5 .water3 {
	-webkit-animation: wateranimate 12s 6s ease-out infinite;
			animation: wateranimate 12s 6s ease-out infinite;
}			
.zactives-circle5 .water4 {
	-webkit-animation: wateranimate 12s 4s ease-out infinite;
	animation: wateranimate 12s 4s ease-out infinite;
}	
.zactives-circle5 .water5 {
	-webkit-animation: wateranimate 12s 2s ease-out infinite;
	animation: wateranimate 12s 2s ease-out infinite;
}	
.zactives-circle5 .water6 {
	-webkit-animation: wateranimate 12s 0s ease-out infinite;
	animation: wateranimate 12s 0s ease-out infinite;
}


/*课堂互动*/
.zacitves-interaction{ position: absolute; left: 9rem; top: 4.4rem; z-index: 999; width: 1.58rem; height: 1.58rem; }
.zacitves-interaction li { padding-top: .28rem; width: 1.58rem; height: 1.3rem; background: -webkit-linear-gradient(30deg, rgba(0, 51, 255, .6), rgba(0, 187, 255, .8)); font-size: .45rem; line-height: 1.15; font-weight: bold; text-align: center; letter-spacing: .05rem;
  	display: block;
  	margin: 0;
  	position: absolute;
  	 color: #2efbfd;
    -webkit-transform-origin: center center;
    	    transform-origin: center center;
    	    -webkit-transform: rotate(45deg);
    /*-webkit-animation: around 40s both linear infinite;*/
    	    /*animation: around 40s both linear infinite;*/

}
.zacitves-interaction li:last-child {
	background: -webkit-linear-gradient(30deg, rgba(5, 10, 72, .6), rgba(15, 60, 180, .8));
	opacity: 0.5;
}
.zacitves-interaction li:nth-child(1) {
	-webkit-animation: scale1 4s both linear infinite;
    	    animation: scale1 4s both linear infinite;
	z-index: 11;
}
.zacitves-interaction li:nth-child(2) {
	-webkit-animation: scale2 4s both linear infinite;
    	    animation: scale2 4s both linear infinite;
	margin-top: 1.2rem;
	z-index: 10;
}
.zacitves-interaction li:nth-child(3) {
	-webkit-animation: scale3 4s both linear infinite;
    	    animation: scale3 4s both linear infinite;
	margin-top: 2.4rem; 
	z-index: 9;
}
.zacitves-interaction li:nth-child(4) {
	-webkit-animation: scale4 4s both linear infinite;
    	    animation: scale4 4s both linear infinite;
	margin-top: 3.6rem;
	z-index: 8;                                      
}
.zacitves-interaction li:nth-child(5) {
	-webkit-animation-delay: 2500ms;
	margin-top: 4.8rem;
	z-index: 7;
	
}
.zacitves-center { position: absolute; left: 8.8rem; top: 5.5rem; z-index: 999; width: 2rem; height: 1.62rem;}
 @-webkit-keyframes around {
	0% {
    	-webkit-transform: rotate(0deg);
        		transform: rotate(0deg);
        -webkit-transform-origin: center center;
        		transform-origin: center center;
	}
	100% {
    	-webkit-transform: rotate(360deg);
            	transform: rotate(360deg);
        -webkit-transform-origin: center center;
        		transform-origin: center center;
  }
}

@keyframes around {
	0% {
    	-webkit-transform: rotate(0deg);
    	transform: rotate(0deg);
    	-webkit-transform-origin: center center;
    	transform-origin: center center;
	}
	100% {
    	-webkit-transform: rotate(360deg);
    	transform: rotate(360deg);
    	-webkit-transform-origin: center center;
    	transform-origin: center center;
	}
} 

@-webkit-keyframes scale1 {
	0% { margin-top: 0rem;}
	50% {margin-top: .2rem;}
	100% {margin-top: 0rem;}
}
@-webkit-keyframes scale2 {
	0% { margin-top: 1.2rem; transform: scale(1) rotate(45deg);}
	50% {margin-top: 1.4rem;  transform: scale(.9) rotate(45deg);}
	100% {margin-top: 1.2rem;  transform: scale(1) rotate(45deg);}
}
@-webkit-keyframes scale3 {
	0% { margin-top: 2.4rem;  transform: scale(1) rotate(45deg);}
	50% {margin-top: 2.6rem;  transform: scale(.7) rotate(45deg);}
	100% {margin-top: 2.4rem; transform: scale(1) rotate(45deg);}
}
@-webkit-keyframes scale4 {
	0% { margin-top: 3.6rem;  transform: scale(1) rotate(45deg);}
	50% {margin-top: 3.6rem;  transform: scale(.5) rotate(45deg);}
	100% {margin-top: 3.6rem;  transform: scale(1) rotate(45deg);}
}


@-webkit-keyframes zyoyo {
	0% { 
		-webkit-transform: translateY(0);
				transform: translateY(0);
	}
	50% { 
		-webkit-transform: translateY(.2rem);
				transform: translateY(.2rem);
	}
	100% {
		-webkit-transform: translateY(0rem);
				transform: translateY(0rem);
	}
}
@keyframes zyoyo{
	0% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(.2rem);
				transform: translateY(.2rem);
	}
	100% {
		-webkit-transform: translateY(0rem);
				transform: translateY(0rem);
	}
}
.zyoyo { 
	-webkit-animation: zyoyo 3s infinite ease-in-out;
			animation: zyoyo 3s infinite ease-in-out;
}

@-webkit-keyframes zshadow {
	0% { 
		-webkit-transform: scale(1);
				transform: scale(1);
				opacity: .5;
	}
	50% { 
		-webkit-transform: scale(.8);
				transform: scale(.8);
				opacity: 1;
	}
	100% {
		-webkit-transform: scale(1);
				transform: scale(1);
				opacity: .5;
	}
}
.zshadow { 
	-webkit-animation: zshadow 5s infinite ease-in-out;
			animation: zshadow 5s infinite ease-in-out;
} { 
	-webkit-animation: zshadow 5s infinite ease-in-out;
			animation: zshadow 5s infinite ease-in-out;
}
.mvbox { position: absolute; left: 0; bottom: .05rem; z-index: 10; width: 100%; height: 150%; overflow: hidden;}





/*资源监测页面----------------------------------------------------------------------*/
.zresources { position: absolute; left: 5.8rem; top: 1.6rem; width: 8.5rem; height: 5.75rem;}
.zresources-list { position: relative; width: 100%; height: 100%; }
.zresources-item { position: absolute; left: 0; top: 0; width: 2rem; height: 3rem; opacity: 0;
	-webkit-animation: opacity 1s forwards ease-in;
					animation: opacity 1s forwards ease-in;
}
.zresources-item:nth-child(1) { -webkit-animation-delay: 1s;}
.zresources-item:nth-child(2) { -webkit-animation-delay: 1.8s;}
.zresources-item:nth-child(3) { -webkit-animation-delay: 1.6s;}
.zresources-item:nth-child(4) { -webkit-animation-delay: 1.4s;}
.zresources-item:nth-child(5) { -webkit-animation-delay: 1.2s;}
.zresources-points { position: absolute; left: 50%; bottom: 1rem; margin-left: -1.7rem; width: 2rem; height: 1.2rem; }
.zresources-info { position: absolute; left: 0rem; bottom: 1.215rem; width: 1.64rem; height: .76rem; }
.zresources-txt { position: absolute; left: 0rem; top: 0rem; width: 1.64rem; height: .76rem; text-align: center;}
.zresources-txt dt { line-height: 1.5; font-size: .18rem; font-weight: bold; color: #fff;}
.zresources-txt dd { line-height: 1.6; font-size: .25rem; font-weight: bold; color: #fff; font-family: 'SFUDinEngschrift'; width: 3rem; margin-left: -0.5rem}
.zresources-tips { position: absolute; left: 1.4rem; top: 0rem; width: 2.42rem; min-height: .4rem; padding: .07rem .1rem .1rem; border: 1px rgba(255, 255, 255, .29) solid; border-radius: .1rem; background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, .29) 0%, transparent); display: none;}
.zresources-tips h2 { line-height: 1.8; font-size: .16rem; color: #fff;}
.zresources-tips p { line-height: 1.5; font-size: .14rem; color: #9fe0ff;}
/*视频*/
.zresources-video { }
.zresources-video .zresources-tray { position: absolute; left: 0rem; bottom: 0rem; width: 1.64rem; height: .76rem; background: url(../../images/tray-video.png); background-size: 1.64rem .76rem;}
.zresources-video .zresources-mask { position: absolute; left: -.232rem; bottom: .5rem; width: 1.64rem; height: .76rem;}
.zresources-video .zresources-mask svg { width: 2.1rem;}
.zresources-video .zresources-icon { position: absolute; left: 0rem; bottom: .4rem; width: 1.64rem; height: .76rem; text-align: center;}
.zresources-video .zresources-icon img { width: rem; height: rem;}

/*文档*/
.zresources-doc { }
.zresources-doc .zresources-tray { position: absolute; left: 0rem; bottom: 0rem; width: 1.46rem; height: .7rem; background: url(../../images/tray-doc.png); background-size: 1.46rem .7rem;}
.zresources-doc .zresources-mask { position: absolute; left: -.48rem; bottom: .62rem; width: 1.64rem; height: .76rem;}
.zresources-doc .zresources-mask svg { width: 2.4rem;}
.zresources-doc .zresources-icon { position: absolute; left: 0rem; bottom: .4rem; width: 1.4rem; height: .76rem; text-align: center;}
.zresources-doc .zresources-icon img { width: rem; height: rem;}
/*PPT课件*/
.zresources-ppt { }
.zresources-ppt .zresources-tray { position: absolute; left: 0rem; bottom: 0rem; width: 1.63rem; height: .98rem; background: url(../../images/tray-ppt.png); background-size: 1.63rem .98rem;}
.zresources-ppt .zresources-mask { position: absolute; left: -.37rem; bottom: 1.12rem; width: 1.63rem; height: .76rem;}
.zresources-ppt .zresources-mask svg { width: 2.4rem;}
.zresources-ppt .zresources-icon { position: absolute; left: .3rem; bottom: .47rem; width: 1.63rem; height: .76rem; text-align: center;}
.zresources-ppt .zresources-icon img { width: rem; height: rem;}
/*音频*/
.zresources-audio { }
.zresources-audio .zresources-tray { position: absolute; left: 0rem; bottom: 0rem; width: 1.79rem; height: .84rem; background: url(../../images/tray-audio.png); background-size: 1.79rem .84rem;}
.zresources-audio .zresources-mask { position: absolute; left: -.31rem; bottom: .52rem; width: 1.79rem; height: .76rem;}
.zresources-audio .zresources-mask svg { width: 2.4rem;}
.zresources-audio .zresources-icon { position: absolute; left: 0rem; bottom: .4rem; width: 1.79rem; height: .76rem; text-align: center;}
.zresources-audio .zresources-icon img { width: rem; height: rem;}
/*图片*/
.zresources-image { }
.zresources-image .zresources-tray { position: absolute; left: 0rem; bottom: 0rem; width: 1.76rem; height: .81rem; background: url(../../images/tray-image.png); background-size: 1.76rem .81rem;}
.zresources-image .zresources-mask { position: absolute; left: .01rem; bottom: .185rem; width: 1.73rem; height: 1.24rem;}
.zresources-image .zresources-mask svg { width: 1.73rem;}
.zresources-image .zresources-icon { position: absolute; left: 0rem; bottom: .3rem; width: 1.76rem; height: .81rem; text-align: center;}
.zresources-image .zresources-icon img { width: rem; height: rem;}
/*中央3d盒子*/
.zresources .zbox3d { position: absolute; left: 3.4rem; top: 2.16rem; width: 1.4rem; height: 1.4rem; 
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
  -webkit-transform: rotateX(20deg) rotateY(-20deg) translateZ(-1.4rem);
          transform: rotateX(20deg) rotateY(-20deg) translateZ(-1.4rem);
  -webkit-transform-origin: center center -1.4rem;
          transform-origin: center center -1.4rem;
  /*-webkit-animation: zresources-around 15s both linear infinite;
          animation: zresources-around 15s both linear infinite;*/
  -webkit-animation: zresources-around 15s both cubic-bezier(0.94, -0.6, 0.45, 1.31) infinite;
          animation: zresources-around 15s both cubic-bezier(0.94, -0.6, 0.45, 1.31) infinite;
}
.zresources .zbox3d .panel { width: 1.4rem; height: 1.4rem; margin: 0; position: absolute;  }

.zresources .front {
  -webkit-transform: rotateY(0deg) translateZ(.7rem);
          transform: rotateY(0deg) translateZ(.7rem);
  background-color: rgba(69, 218, 255, 0.1);
  box-shadow: 0 0 .3rem .05rem rgba(76, 219, 255, .15) inset;
}
.zresources .back {
  -webkit-transform: rotateX(180deg) translateZ(.7rem);
          transform: rotateX(180deg) translateZ(.7rem);
  background-color: rgba(69, 218, 255, 0.1);
  box-shadow: 0 0 .3rem .05rem rgba(76, 219, 255, .15) inset;
}
.zresources .left {
  -webkit-transform: rotateY(-90deg) translateZ(.7rem);
          transform: rotateY(-90deg) translateZ(.7rem);
  background-color: rgba(69, 218, 255, 0.1);
  box-shadow: 0 0 .3rem .05rem rgba(76, 219, 255, .15) inset;
}
.zresources .right {
  -webkit-transform: rotateY(90deg) translateZ(.7rem);
          transform: rotateY(90deg) translateZ(.7rem);
  background-color: rgba(69, 218, 255, 0.1);
  box-shadow: 0 0 .3rem .05rem rgba(76, 219, 255, .15) inset;
}
.zresources .top {
	display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center;
  -webkit-transform: rotateX(90deg) translateZ(.7rem);
          transform: rotateX(90deg) translateZ(.7rem);
    background: -webkit-linear-gradient(30deg, transparent 30%, rgba(69, 218, 255, 0.5));
  background-color: rgba(69, 218, 255, 0.1);
  box-shadow: 0 0 .3rem .05rem rgba(76, 219, 255, .15) inset;
}

.zresources .bottom {
   display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center;
  -webkit-transform: rotateX(-90deg) translateZ(.7rem);
          transform: rotateX(-90deg) translateZ(.7rem);
  background-color: rgba(69, 218, 255, 0.1);
  box-shadow: 0 0 .3rem .05rem rgba(76, 219, 255, .15) inset;
}
.zresources .top p { font-size: .46rem; font-weight: bold; color: rgba(93, 245, 249, .8);}
.zresources .bottom p { display: block; width: 80%; height: 80%; border-radius: 50%; box-shadow: 0 0 .3rem .05rem rgba(76, 219, 255, .15) inset;}
.zresources .topline  { width: 1.7rem; height: 1.7rem; margin-top: -.15rem; margin-left: -.15rem;  position: absolute; border: .03rem rgba(69, 218, 255, .34) solid;
	-webkit-transform: rotateX(-90deg) translateZ(.1rem);
          transform: rotateX(-90deg) translateZ(.1rem);
  -webkit-animation: zresources-linemove1 4s cubic-bezier(0.94, -0.6, 0.45, 1.31) infinite;
  				animation: zresources-linemove1 4s cubic-bezier(0.94, -0.6, 0.45, 1.31) infinite;
}
.zresources .bottomline  { width: 1.7rem; height: 1.7rem; margin-top: -.15rem; margin-left: -.15rem;  position: absolute; border: .03rem rgba(69, 218, 255, .34) solid;
	-webkit-transform: rotateX(-90deg) translateZ(-.2rem);
          transform: rotateX(-90deg) translateZ(-.2rem);
  -webkit-animation: zresources-linemove2 4s cubic-bezier(0.94, -0.6, 0.45, 1.31) infinite;
  				animation: zresources-linemove2 4s cubic-bezier(0.94, -0.6, 0.45, 1.31) infinite;
}

@-webkit-keyframes zresources-linemove1 {
	0%{ transform: rotateX(-90deg) translateZ(.1rem) scale(1); opacity: 1;}
	25%{ transform: rotateX(-90deg) translateZ(.3rem) scale(1); opacity: 1;}
	50%{ transform: rotateX(-90deg) translateZ(.1rem) scale(1); opacity: 1;}
	75%{ transform: rotateX(90deg) translateZ(.1rem) scale(.5); opacity: .3; background: rgba(69, 218, 255, .1);}
	100%{ transform: rotateX(90deg) translateZ(.1rem) scale(1); opacity: .3; background: rgba(69, 218, 255, .5);}
}
@-webkit-keyframes zresources-linemove2 {
	0%{ transform: rotateX(-90deg) translateZ(-.2rem) scale(1); opacity: 1;}
	25%{ transform: rotateX(-90deg) translateZ(-.4rem) scale(1); opacity: 1;}
	50%{ transform: rotateX(-90deg) translateZ(-.2rem) scale(1); opacity: 1;}
	75%{ transform: rotateX(90deg) translateZ(-.2rem) scale(.5); opacity: .3; background: rgba(69, 218, 255, .1);}
	100%{ transform: rotateX(90deg) translateZ(-.2rem) scale(1); opacity: .3; background: rgba(69, 218, 255, .5);}
}

 @-webkit-keyframes zresources-around {
  0% {
    -webkit-transform: rotateX(20deg) rotateY(0deg) translateZ(-1.4rem);
            transform: rotateX(20deg) rotateY(0deg) translateZ(-1.4rem);
  }
  100% {
    -webkit-transform: rotateX(20deg) rotateY(360deg) translateZ(-1.4rem);
            transform: rotateX(20deg) rotateY(360deg) translateZ(-1.4rem);
  }
}
@keyframes zresources-around {
  0% {
    -webkit-transform: rotateX(20deg) rotateY(0deg) translateZ(-1.4rem);
            transform: rotateX(20deg) rotateY(0deg) translateZ(-1.4rem);
  }
  100% {
    -webkit-transform: rotateX(20deg) rotateY(360deg) translateZ(-1.4rem);
            transform: rotateX(20deg) rotateY(360deg) translateZ(-1.4rem);
  }
} 
.zresources-rotate {
	-webkit-transform: rotateX(64deg) rotateY(0deg);
			transform: rotateX(64deg) rotateY(0deg);
}
.zresources-circle1 { position: absolute; left: 5.3rem; top: .65rem; width: 8.8rem; height: 8.8rem;}
.zresources-circle1 .zpoints-item {
	left: 4.5rem; background: rgba(76, 219, 255, .2);
	-webkit-transform-origin: 0 4.5rem; 
			transform-origin: 0 4.5rem;
	-webkit-animation: zpoints-color3 3s infinite ease;
			animation: zpoints-color3 3s infinite ease;
}
.zresources-circle5 { position: absolute; left:8.4rem; top: 2.4rem; width: 7.4rem; height: 7.4rem; opacity: 1; }
.zresources-circle5 .water1,
.zresources-circle5 .water2,
.zresources-circle5 .water3,
.zresources-circle5 .water4,
.zresources-circle5 .water5,
.zresources-circle5 .water6 {position: absolute; left: 0; top: 0; padding: 20%; border: 1px solid rgba(76, 219, 255, .3); box-shadow: 0 0 .8rem .2rem rgba(76, 219, 255, .1) inset; border-radius: 100%; z-index: 1; background: rgba(76, 219, 255, .3); opacity: 0;}


@keyframes zresources-wateranimate {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0.5;
	}
	40% {
		-webkit-transform: scale(2);
		transform: scale(2);
		opacity: .3;
	}
	80% {
		-webkit-transform: scale(3);
		transform: scale(3);
		opacity: 0;
	}
	100% {
		-webkit-transform: scale(3);
		transform: scale(3);
		opacity: 0;
	}
}			
		
.zresources-circle5 .water1 {
	-webkit-animation: zresources-wateranimate 6s 5s ease-out infinite;
			animation: zresources-wateranimate 6s 5s ease-out infinite;
}			
.zresources-circle5 .water2 {
	-webkit-animation: zresources-wateranimate 6s 2.5s ease-out infinite;
			animation: zresources-wateranimate 6s 2.5s ease-out infinite;
}			
.zresources-circle5 .water3 {
	-webkit-animation: zresources-wateranimate 6s 0s ease-out infinite;
			animation: zresources-wateranimate 6s 0s ease-out infinite;
}			


/*整体数据概况----------------------------------------------------------------------*/
.zcylinder { position: absolute; left: 4.8rem; top: 1.9rem; width: 9.6rem; height: 7.47rem;}
.zcylinder-list { position: relative; width: 8rem; margin: 0 auto; margin-left: 1rem; height: 6rem;}
.zcylinder-item { position: absolute; left: .5rem; top: .5rem; width: 2rem; height: 1.4rem;}
.zcylinder-pillar { position: absolute; left: 50%; bottom: 0rem; width: .8rem; height: .7rem; margin-left: -.4rem;}
.zcylinder-top { position: absolute; top: -.37rem; width: .8rem; height: .37rem; background: url(../../images/zcylinder_01.png) left top no-repeat; background-size: .8rem .37rem;}
.zcylinder-icon { position: absolute; bottom: 0.0rem; width: .3rem; height: 0.3rem; left: .27rem; top: .03rem; font-size: 0; line-height: 0;
-webkit-transform: rotateX(-65deg) rotateY(1deg) rotateZ(48deg);
}
.zcylinder-icon svg { margin: 0; padding: 0; width: 100%; height: 100%; }
.zcylinder-color { fill: rgba(0, 255, 255, 1);}
@-webkit-keyframes zhang{
	0% { height: 0;}
}
@-webkit-keyframes zhang{
	0% { height: 0;}
}
.zcylinder-flex { position: absolute; bottom: .97rem; width: .84rem; height: .8rem; background: url(../../images/zcylinder_03.png) left top repeat-y;  background-size: .8rem .1rem;
	animation: zhang .5s ease;
}
.zcylinder-bottom {position: absolute;bottom: .6rem; width: 100%; height: .37rem; background: url(../../images/zcylinder_05.png) left top no-repeat;  background-size: .8rem .37rem;}
/*.zcylinder-tray { position: absolute; bottom: -.19rem; left: -.26rem; width: 1.36rem; height: .74rem; background: url(../images/tray_02.png) no-repeat; background-size: 1.36rem .74rem;}*/
.zcylinder-tray { position: absolute; bottom: 0; left: 50%; margin-left: -.68rem; width: 1.34rem; height: 1.34rem; border-radius: 50%; border-left: 1px #030822 solid; border-bottom: 1px #030822 solid;
	-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(315deg);
}
.zcylinder-tray .shapecake { width: 1.24rem; height: 1.24rem; margin-left: 10px; border-radius: 50%; background: -webkit-linear-gradient(45deg, #0055ff, transparent);}
.zcylinder-tray .shapecake:after { display: block; content: ''; margin-left: 10px; width: 1.14rem; height: 1.14rem; border-left: 1px rgba(22, 130, 193, 1) solid; border-bottom: 1px rgba(22, 130, 193, 1) solid; border-radius: 50%;}
.zcylinder-info { position: absolute; bottom: .55rem; left: 50%; margin-left: -1rem; width: 2rem; text-align: center; }
.zcylinder-info dt { line-height: .3rem; font-size: .18rem; color: #fff;}
.zcylinder-info dd { line-height: .2rem; font-size: .14rem; color: #9fe0ff;}

/*中间*/
.zteaching { position: absolute; left: 3.74rem; top: 3.3rem; width: 2.28rem; height: 2.5rem;}
.zteaching-pillar { position: absolute; left: 50%; bottom: 0rem; width: 100%; height: 1rem; margin-left: -1.14rem;}
.zteaching-top { position: absolute; top: -1.09rem; width: 100%; height: 1.09rem; background: url(../../images/zcylindermax_01.png) left top no-repeat; background-size: 2.28rem 1.09rem;}
.zteaching-top h1 { line-height: 1.09rem; font-size: .4rem; font-weight: bold; color: #2efbfd; text-align: center;
	/*-webkit-animation: around .1s forwards infinite linear;*/
}



@-webkit-keyframes zhang{
	0% { height: 0;}
}
@-webkit-keyframes zhang{
	0% { height: 0;}
}
.zteaching-flex { position: absolute; bottom: 1.09rem; width: 100%; height: 1rem; background: url(../../images/zcylindermax_03.png) left top repeat-y;  background-size: 2.28rem 1.09rem;
	animation: zhang .5s ease;
}
.zteaching-bottom {position: absolute;bottom: 0rem; width: 100%; height: 1.09rem; background: url(../../images/zcylindermax_05.png) left top no-repeat;  background-size: 2.28rem 1.09rem;}

.zlinelt { position: absolute; left: 1.9rem; top: 4.4rem; width: 2.1rem; height: .56rem;}
.zlinelt-1 { position: absolute; left: 1.9rem; top: 4.65rem; width: 2.1rem; height: .56rem;}
.zlinert { position: absolute; left: 5.55rem; top: 4.3rem; width: 2.1rem; height: .56rem;}
.zlinert-1 { position: absolute; left: 5.7rem; top: 4.5rem; width: 2.1rem; height: .56rem;}
.zlinelb { position: absolute; left: 2.9rem; top: 5.6rem; width: 1.2rem; height: .9rem;}
.zlinelb-1 { position: absolute; left: 3.14rem; top: 5.71rem; width: 1.2rem; height: .9rem;}
.zlinerb { position: absolute; left: 5.55rem; top: 5.65rem; width: 1.2rem; height: .9rem;}
.zlinerb-1 { position: absolute; left: 5.35rem; top: 5.72rem; width: 1.2rem; height: .9rem;}


 @-webkit-keyframes around {
	0% {
    	-webkit-transform: rotate(0deg);
        		transform: rotate(0deg);
        -webkit-transform-origin: center center;
        		transform-origin: center center;
	}
	100% {
    	-webkit-transform: rotate(360deg);
            	transform: rotate(360deg);
        -webkit-transform-origin: center center;
        		transform-origin: center center;
  }
}

@keyframes around {
	0% {
    	-webkit-transform: rotate(0deg);
    	transform: rotate(0deg);
    	-webkit-transform-origin: center center;
    	transform-origin: center center;
	}
	100% {
    	-webkit-transform: rotate(360deg);
    	transform: rotate(360deg);
    	-webkit-transform-origin: center center;
    	transform-origin: center center;
	}
} 

.zcylinder svg path {
    stroke-dasharray: 35;
}
.zcylinder .liuGuang {
    stroke: #2efbfd;
    -webkit-animation: path 4s forwards infinite linear;
    		animation: path 4s forwards infinite linear;
}
.zcylinder .liuGuang-1 {
    stroke: #03061c;
    -webkit-animation: path 4s forwards infinite linear;
    		animation: path 4s forwards infinite linear;
}

@-webkit-keyframes path {
    0% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    100% {
        opacity: 1;
        stroke-dashoffset: 425;
    }
}
.particlebox { position: absolute; left: 0; bottom: .55rem; z-index: 10; width: 100%; height: 150%; overflow: hidden;}




/*师生活跃监测----------------------------------------------------------------------*/
.zstActive { position: absolute; left: 5rem; top: 1.75rem; width: 9.6rem; height: 8rem;}
.zstActive-name { position: absolute; left: 50%; top: 3.1rem; margin-left: -1rem; width: 2rem; font-size: .306rem; font-weight: bold; color: #fff; text-align: center;}
.zstActive-center { position: absolute; left: 50%; top: 2.78rem; margin-left: -1.3rem; width: 2.6rem; height: 1.62rem;}
.zstActive .zbox3d { position: absolute; width: 2.6rem; height: 2.6rem;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(35deg) rotateY(-20deg) translateZ(-2.6rem);
          transform: rotateX(35deg) rotateY(-20deg) translateZ(-2.6rem);
  -webkit-transform-origin: center center -2.6rem;
          transform-origin: center center -2.6rem;
  -webkit-animation: zstActive-around 60s both linear infinite;
          animation: zstActive-around 60s both linear infinite;
}
.zstActive .zbox3d .panel { position: absolute; left: .46rem; top: .46rem; width: 1.6rem; height: 1.6rem;
	background-color: rgba(0, 137, 243, .1);
  box-shadow: 0 0 .4rem .1rem rgba(5, 201, 253, .1) inset;
  -webkit-animation: zstActive-boxshadow 3s forwards infinite ease-in;
					animation: zstActive-boxshadow 3s forwards infinite ease-in;	
}

.zstActive .zbox3d .front {
  -webkit-transform: rotateY(0deg) translateZ(.8rem);
          transform: rotateY(0deg) translateZ(.8rem);
  
}
.zstActive .zbox3d .back {
  -webkit-transform: rotateX(180deg) translateZ(.8rem);
          transform: rotateX(180deg) translateZ(.8rem);
  
  	
}
.zstActive .zbox3d .left {
  -webkit-transform: rotateY(-90deg) translateZ(.8rem);
          transform: rotateY(-90deg) translateZ(.8rem);
}
.zstActive .zbox3d .right {
  -webkit-transform: rotateY(90deg) translateZ(.8rem);
          transform: rotateY(90deg) translateZ(.8rem);
}
.zstActive .zbox3d .top {
	display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center;
  -webkit-transform: rotateX(90deg) translateZ(.8rem);
          transform: rotateX(90deg) translateZ(.8rem);
    background: -webkit-linear-gradient(30deg, rgba(11, 53, 132, .5) 20%, rgba(32, 230, 246, .5));
}

.zstActive .zbox3d .bottom {
   display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center;
  -webkit-transform: rotateX(-90deg) translateZ(.8rem);
          transform: rotateX(-90deg) translateZ(.8rem);
}



.zstActive .zbox3d .top p { font-size: .46rem; font-weight: bold; color: rgba(93, 245, 249, .8);}

 
 @-webkit-keyframes zstActive-around {
  0% {
    -webkit-transform: rotateX(35deg) rotateY(0deg) translateZ(-2.6rem);
            transform: rotateX(35deg) rotateY(0deg) translateZ(-2.6rem);
  }
  100% {
    -webkit-transform: rotateX(35deg) rotateY(360deg) translateZ(-2.6rem);
            transform: rotateX(35deg) rotateY(360deg) translateZ(-2.6rem);
  }
}

@keyframes zstActive-around {
  0% {
    -webkit-transform: rotateX(35deg) rotateY(0deg) translateZ(-2.6rem);
            transform: rotateX(35deg) rotateY(0deg) translateZ(-2.6rem);
  }
  100% {
    -webkit-transform: rotateX(35deg) rotateY(360deg) translateZ(-2.6rem);
            transform: rotateX(35deg) rotateY(360deg) translateZ(-2.6rem);
  }
} 
			

/*活跃度*/
.zstActive-interaction { position: absolute; left: 0rem;  width: 2.6rem; height: 2.6rem; background: rgba(26, 156, 239, .2);
    /*-webkit-transform: rotateX(-90deg) translateZ(.8rem);
          transform: rotateX(-90deg) translateZ(.8rem);*/

}
.zstActive-interaction:nth-child(1) {
	z-index: 9;
	-webkit-transform: rotateX(-90deg) translateZ(1.2rem);
          transform: rotateX(-90deg) translateZ(1.2rem);
}
.zstActive-interaction:nth-child(2) {
	z-index: 10;
	-webkit-transform: rotateX(-90deg) translateZ(.96rem);
          transform: rotateX(-90deg) translateZ(.96rem);
}
.zstActive-interaction:nth-child(3) {
	z-index: 11;
	-webkit-transform: rotateX(-90deg) translateZ(.8rem);
          transform: rotateX(-90deg) translateZ(.8rem);
}

.zstActive-circle1,
.zstActive-circle2,
.zstActive-circle3,
.zstActive-circle4 { position: absolute;  width: .18rem; height: .18rem; border-radius: 50%; background: #0b4359;
	display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center;
}
.zstActive-circle1:after,
.zstActive-circle2:after,
.zstActive-circle3:after,
.zstActive-circle4:after { display: block; content: ''; width: .12rem; height: .12rem; border-radius: 50%; background: rgba(5, 201, 253, 1);
	-webkit-animation: zstActive-background 3s forwards infinite ease-in;
				animation: zstActive-background 3s forwards infinite ease-in;
}
 /*front*/
.zstActive-circle1 {left: -.4rem; top: -.4rem;}
 /*backleft*/
.zstActive-circle2 { right: -.4rem; top: -.4rem;}
/*back right*/
.zstActive-circle3 { left: -.35rem; top: 1.85rem;}
 /*front right*/
.zstActive-circle4 { right: -.4rem; top: 1.85rem;}

.zstActive-rect1,
.zstActive-rect2 { position: absolute; left: .28rem; top: .46rem;  width: 2.6rem; height: 2.6rem;
	-webkit-transform: rotateY(90deg) translateZ(.8rem);
          transform: rotateY(90deg) translateZ(.8rem);
}
.zstActive-rect2 { left: -.34rem; top: .46rem; 
	-webkit-transform: rotateY(-90deg) translateZ(.8rem);
          transform: rotateY(-90deg) translateZ(.8rem);
}
.zstActive-rect1:after,
.zstActive-rect2:after { display: block; content: ''; position: absolute; left: .14rem; top: .39rem; width: .12rem; height: 1.2rem; background: -webkit-linear-gradient(top, rgba(15, 82, 231, 0), rgba(15, 82, 231, 1));
	-webkit-animation: zstActive-colors 3s forwards infinite ease-in;
				animation: zstActive-colors 3s forwards infinite ease-in;
}
.zstActive-rect1:before,
.zstActive-rect2:before { display: block; content: ''; position: absolute; right: .12rem; top: .39rem; width: .12rem; height: 1.2rem; background: -webkit-linear-gradient(top, rgba(15, 82, 231, 0), rgba(15, 82, 231, 1));
-webkit-animation: zstActive-colors 3s forwards infinite ease-in;
				animation: zstActive-colors 3s forwards infinite ease-in;
}

@-webkit-keyframes zstActive-colors {
	0%,
	100%{ background: -webkit-linear-gradient(top, rgba(5, 201, 253, 0), rgba(5, 201, 253, .3));}
	25%{ background: -webkit-linear-gradient(top, rgba(16, 183, 250, 0), rgba(16, 183, 250, .3));}
	50%{ background: -webkit-linear-gradient(top, rgba(44, 135, 240, 0), rgba(44, 135, 240, .3));}
	75%{ background: -webkit-linear-gradient(top, rgba(63, 103, 234, 0), rgba(63, 103, 234, .3));}
}
@-webkit-keyframes zstActive-boxshadow {
	0%,
	100%{ box-shadow: 0 0 .4rem .1rem rgba(5, 201, 253, .3) inset;}
	25%{ box-shadow: 0 0 .4rem .1rem rgba(16, 183, 250, .3) inset;}
	50%{ box-shadow: 0 0 .4rem .1rem rgba(44, 135, 240, .3) inset;}
	75%{ box-shadow: 0 0 .4rem .1rem rgba(63, 103, 234, .3) inset;}
}
@-webkit-keyframes zstActive-background {
	0%,
	100%{
		background-color: rgba(5, 201, 253, 1);
	}
	25%{
		background-color: rgba(16, 183, 250, 1);
	}
	50%{
		background-color: rgba(44, 135, 240, 1);
	}
	75%{
		background-color: rgba(63, 103, 234, 1);
	}
}




.zstActive-list { position: absolute; left: 3.68rem; top: 2rem;}
.zstActive-item { position: absolute; top: 0; left: 0rem; width: 1rem; height: 2.46rem; opacity: 0;
-webkit-animation: opacity 1s forwards ease-in;
				animation: opacity 1s forwards ease-in;
}
.zstActive-index { z-index: 100;}
.zstActive-item:nth-child(1) { -webkit-animation-delay: 1s;}
.zstActive-item:nth-child(2) { -webkit-animation-delay: 2.2s;}
.zstActive-item:nth-child(3) { -webkit-animation-delay: 2s;}
.zstActive-item:nth-child(4) { -webkit-animation-delay: 1.8s;}
.zstActive-item:nth-child(5) { -webkit-animation-delay: 1.6s;}
.zstActive-item:nth-child(6) { -webkit-animation-delay: 1.4s;}
.zstActive-item:nth-child(7) { -webkit-animation-delay: 1.2s;}

.zstActive-item:nth-child(1) .zstActive-progress { -webkit-animation-delay: 1s;}
.zstActive-item:nth-child(2) .zstActive-progress { -webkit-animation-delay: 2.2s;}
.zstActive-item:nth-child(3) .zstActive-progress { -webkit-animation-delay: 2s;}
.zstActive-item:nth-child(4) .zstActive-progress { -webkit-animation-delay: 1.8s;}
.zstActive-item:nth-child(5) .zstActive-progress { -webkit-animation-delay: 1.6s;}
.zstActive-item:nth-child(6) .zstActive-progress { -webkit-animation-delay: 1.4s;}
.zstActive-item:nth-child(7) .zstActive-progress { -webkit-animation-delay: 1.2s;}
.zstActive-ball { position: absolute; top: .16rem; width: 1rem; height: 1rem;
-webkit-animation: pulse 3s infinite ease;
			animation: pulse 3s infinite ease;
}
@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale3d(1) translate(0, 0);
		transform: scale3d(1) translate(0, 0)
	}
	50% {
		-webkit-transform: scale3d(1.07, 1.07, 1.07) translate(0, .1rem);
		transform: scale3d(1.07, 1.07, 1.07) translate(0, .1rem)
	}
	100% {
		-webkit-transform: scale3d(1) translate(0, 0);
		transform: scale3d(1) translate(0, 0)
	}
}
@keyframes pulse {
	0% {
		-webkit-transform: scale3d(1);
		transform: scale3d(1)
	}
	50% {
		-webkit-transform: scale3d(1.07, 1.07, 1.07);
		transform: scale3d(1.07, 1.07, 1.07)
	}
	100% {
		-webkit-transform: scaleX(1);
		transform: scale3d(1)
	}
}
.pulse {
	-webkit-animation-name: pulse;
	animation-name: pulse
}


.zstActive-light { position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border-top: .02rem rgba(73, 160, 196, .4) solid; border-bottom: .02rem rgba(73, 160, 196, .3) solid; border-radius: 50%; box-shadow: 0 0 .3rem .1rem rgba(0, 198, 255, .25) inset;
	-webkit-transform: rotate(45deg);
}
.zstActive-ball dl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center;display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center; -webkit-box-orient: vertical;}
.zstActive-ball dl dt { font-size: .23rem; color: #0055FF;}
.zstActive-ball dl dt {
	color: green;
	font-family: "arial black";
	background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(152, 234, 255, 1)), to(rgba(70, 91, 232, 1)));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	}
.zstActive-ball dl dd { line-height: 1.5; font-size: .17rem; color: #fff; font-weight: bold;}
.zstActive-shine { position: absolute; left: 0; top: 0; width: 1rem; height: 1.18rem; background: -webkit-linear-gradient(top, transparent 0%, rgba(28, 82, 185, .3) 80%);
	-webkit-transform: perspective(2.6rem) rotateX(-70deg) rotateY(0deg);
    transform: perspective(2.6rem) rotateX(-70deg) rotateY(0deg);
    -webkit-transform-origin: center 100%;
    transform-origin: center 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    
    -webkit-animation: shine .5s infinite ease-in-out;
			animation: shine .5s infinite ease ease-in-out;
}

@-webkit-keyframes shine {
	0%,
	100%{  opacity: 1;}
	50%{ opacity: .5;}
}

.zstActive-pillar { position: absolute; bottom: 0; left: 0; height: 1.26rem;}
.zstActive-bg { position: absolute; bottom: 0; left: 0; width: 1rem; height: 1.26rem; background: -webkit-linear-gradient(left, rgba(17, 47, 99, .3) 0%, rgba(50, 214, 252, .15));}
.zstActive-bottom {}
.zstActive-top { position: absolute; top: -.5rem; width: 1rem; height: 1rem; border-radius: 50%; background: -webkit-linear-gradient(60deg, rgba(27, 79, 180, .95) 0%, rgba(24, 68, 165, .95)) 100%;}
.zstActive-progress {position: absolute; bottom: 0; width: 1rem; height: 2px; background: -webkit-linear-gradient(left, rgba(6, 15, 160, 1) 0%, rgba(38, 151, 185, 1));
	-webkit-animation: zstActive-progress 1s ease;
}
@-webkit-keyframes zstActive-progress {
	0% { height: 1px;}
}

.zstActive-pbottom { position: absolute; bottom: -.5rem; width: 1rem; height: 1rem; border-radius: 50%; background: -webkit-linear-gradient(left, rgba(6, 15, 160, 1) 0%, rgba(38, 151, 185, 1));}
.zstActive-ptop { position: absolute; top: -.5rem; width: 1rem; height: 1rem; border-radius: 50%; background: -webkit-linear-gradient(60deg, rgba(27, 79, 180, .95) 0%, rgba(24, 68, 165, .95)) 100%;}
.zstActive-rotate { -webkit-transform: rotateX(60deg);}


.zpoints { position: absolute; left: 5rem; top: 3.8rem; width: 9.2rem; height: 5.8rem;}
.zpoints-rotate { -webkit-transform: rotateX(60deg);}
.zpoints-list1 { position: absolute; left: 50%; top: 50%; margin-left: -3.05rem; margin-top: -3.05rem; width: 6.1rem; height: 6.1rem;}
.zpoints-list2 { position:  absolute; left: 50%; top: 50%; margin-left: -3.74rem; margin-top: -3.74rem; width: 7.48rem; height: 7.48rem;}
.zpoints-list3 { position: absolute; left: 50%; top: 50%; margin-left: -4.35rem; margin-top: -4.35rem; width: 8.7rem; height: 8.7rem;}
.zpoints-item { position: absolute; width: .04rem; height: .04rem; border-radius: 50%; background: #fff; opacity: 0; 
	/*-webkit-animation: opacity 2s infinite ease;
			animation: opacity 2s infinite ease;		*/
}
.zpoints-list1 .zpoints-item {
	left: 3.05rem; background: #f1724b;
	-webkit-transform-origin: 0px 3.05rem; 
			transform-origin: 0px 3.05rem;
	-webkit-animation: opacity 4s ease, zpoints-color2 4s infinite ease;
			animation:  opacity 4s ease,zpoints-color2 4s infinite ease;
}
.zpoints-list2 .zpoints-item {
	left: 3.74rem; background: #84fdfb;
	-webkit-transform-origin: 0px 3.74rem; 
			transform-origin: 0px 3.74rem;
	-webkit-animation: opacity 3s ease, zpoints-color1 2s infinite ease;
			animation: opacity 3s ease, zpoints-color1 2s infinite ease;		
}
.zpoints-list3 .zpoints-item {
	left: 4.35rem; background: #f1724b;
	-webkit-transform-origin: 0px 4.35rem; 
			transform-origin: 0px 4.35rem;
	-webkit-animation: opacity 2s ease, zpoints-color2 3s infinite ease;
			animation: opacity 2s ease, zpoints-color2 3s infinite ease;
}
@-webkit-keyframes zpoints-color1 {
	0% { background: #f1724b; opacity: 1;}
	50% { background: #84fdfb; opacity: .6;}
	100% { background: #f1724b; opacity: 1;}
}
@-webkit-keyframes zpoints-color2 {
	0% { background: #84fdfb; opacity: 1;}
	50% { background: #f1724b; opacity: .6;}
	100% { background: #84fdfb; opacity: 1;}
}
@-webkit-keyframes zpoints-color3 {
	0% { background: rgba(76, 219, 255, .2); opacity: 1;}
	50% { background: rgba(76, 219, 255, .1); opacity: .6;}
	100% { background: rgba(76, 219, 255, .2); opacity: 1;}
}
@-webkit-keyframes zpoints-color4 {
	0% { background: rgba(76, 219, 255, .6); opacity: 1;}
	50% { background: rgba(76, 219, 255, .3); opacity: .6;}
	100% { background: rgba(76, 219, 255, .6); opacity: 1;}
}




/*2020-08-07*/
.zfontShine_pos{ width:.6rem; height:.3rem; line-height:.3rem; font-size:.3rem; font-weight:bold; position:absolute; top:50%; left:50%; margin:-.92rem 0 0 -.48rem;}

.zresources-tips{ visibility:hidden; opacity:0; display:block; transition:all .3s linear;}
.zresources-tips-active{ visibility:visible; opacity:1;}