@charset "utf-8";
/*--------------------
   默认设置
 -------------------*/
*{
    padding:0; margin:0; box-sizing:border-box; -webkit-box-sizing:border-box;
	/* -webkit-user-select: none;-moz-user-select: none; */   
	// touch-action: none;
    // -webkit-transform: translate3d(0, 0, 0);
    // -moz-transform: translate3d(0, 0, 0);
    // -ms-transform: translate3d(0, 0, 0);
    // transform: translate3d(0, 0, 0);  
} 
html { -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight:rgba(0,0,0,0);-webkit-text-size-adjust:none;overflow:-moz-scrollbars-vertical;width: 100%; height: 100%; font-size: 100px;}
body { position: relative; width: 100%; height:100%; margin: 0 auto; font: normal 12px/auto "Helvetica Neue", Helvetica,'Micorsoft YaHei', Arial, sans-serif;  /* -webkit-user-select: none;*/  }
a{text-decoration:none; color: #fff;}
textarea{resize:none;}
article, aside, footer, header, hgroup, nav, section, figure, figcaption { display: block;}
h1, h2, h3, h4, h5, h6, th, td, table, input, button, select, textarea, sub{ font-size:1em;font-weight:normal;}
body, input, button, select, textarea, sub{ font-family:Arial, sans-serif;}
em, cite, address, optgroup { font-style:normal;}
kbd, samp, code { font-family:monospace;}
input, button, select, textarea { vertical-align:middle;outline:none;outline: none;background: none; border:none; margin: 0; padding: 0; }
ul, ol { list-style:none;}
img, fieldset { border:0; max-width: 100%;}

html{
  background-color: #0c0718;
  width: 100%;
  margin: auto;
  overflow-x: hidden;
  body{
    // max-width: 750px;
    overflow-x: hidden;
    background: #0c0718;
  }
}
.active-dot{
	background: #3c3c3c;
	opacity: .5;
}

html,body{
    // height: auto!important;
}

// loading style
@vw: 7.5vw;
.loading-container{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #0c0718;
	// background: -webkit-linear-gradient(top, #b7dbfa 0%, #82c3f8 15%, #63acf3 85%,  #b7dbfa 100%) ;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;

	.leaf{
		fill: #9A4DFF;
	}

	@keyframes hide {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}

	.keyframes (@prefix,@name,@content) when (@prefix=def) {
		@keyframes @name {
			@content();
		}
	}
	.keyframes (@prefix,@name,@content) when (@prefix=moz) {
		@-moz-keyframes @name {
			@content();
		}
	}
	.keyframes (@prefix,@name,@content) when (@prefix=o) {
		@-o-keyframes @name {
			@content();
		}
	}
	.keyframes (@prefix,@name,@content) when (@prefix=webkit) {
		@-webkit-keyframes  @name{
			@content();
		}
	}
	.keyframes (@prefix,@name,@content) when (@prefix=all) {
		.keyframes(moz,@name,@content);
		.keyframes(o,@name,@content);
		.keyframes(webkit,@name,@content);
		.keyframes(def,@name,@content);
	}


	 @i:0;
	.loop(@i)when(@i<36){//递归调用 达到循环的目的
		.loop((@i+1));//执行某个需要循环的方法
		@realIndex: @i+1;
		@aniname : ~'leaf@{realIndex}';
		@delaytime: @i*0.025+0.1;
		@duration: @i*0.1*0.25;
		@durationStr: ~'@{duration}s';
		@delaytimeStr: ~'@{delaytime}s';
		@rotate: @i*10-10;
		@rotateStr: ~'@{rotate}deg';
		@rotateNext: @i*10;
		@rotateNextStr: ~'@{rotateNext}deg';
		
		.keyframes(all,@aniname,{
			from{ 
				opacity: 0;
				transform:rotate(@rotateStr) scale(1); 
				transform-origin:50% 45.4%; 
			} 
			to{ 
				opacity: 0.45;
				transform:rotate(@rotateNextStr) scale(1); 
				transform-origin:50% 45.4%; 
			} 
		});
		
		#leaf@{realIndex} {
			animation:  @aniname @durationStr ease @delaytimeStr both;
		} 
	}

	//初始化开始循环 不初始化 不会开始循环
	.loop(@i);
}

@keyframes rotateCon {
    from {
        transform: rotate(-30deg);
    }
	to {
        transform: rotate(360deg);
    }
}



.loading-container .loader,
.loading-container .loader:after {
	visibility: visible!important;
	// border-radius: 50%;
	width: 5rem;
	height: 5rem;
	// background-color: #ff6d47;
}
.loading-container .loader{
	.con{
		width: 5rem;
		height: 5rem;
		transform-origin:50% 45%;
		animation:  rotateCon 5s linear  infinite;
	}
	p{
		color: #fff;
		text-align: center;
		animation:  hide .5s ease 3s both;
	}
	#svg{
		animation:  hide .5s ease 3s both;
		// background-color: #edd;
	}
}
