*,body,html{font-family: "方正黑体" !important;}

.xlt_loading_hide{
	opacity: 0;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	transition: all .2s;
}
.xlt_loading_div{
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	background: #dcdada;
	font-family: 'Open Sans';
	font-weight: 100;
	color:#f2f2f2;
	font-size:100%;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 999999999;
	top: 0;
	left: 0;
	margin:0;
	padding:0;
}

/* Start the xlt_loader code, first, let's align it the center of screen */
.xlt_loader {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-mos-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align:center;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor:default;
	width: fit-content;
}

.xlt_loader div{
	position:relative;
	width:40px;
	height:40px;
	background:#fff;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	margin:0 5px;
	float:left;
	font-size:20px;
	line-height:40px;
	-webkit-animation: bounce 1.5s infinite ease-in-out;
	-moz-animation: bounce 1.5s infinite ease-in-out;
	-mos-animation: bounce 1.5s infinite ease-in-out;
	-o-animation: bounce 1.5s infinite ease-in-out;
	animation: bounce 1.5s infinite ease-in-out;
}

.xlt_loader div:after{
	content:'';
	position:absolute;
	bottom:-2em;
	left:0;
	width:40px;
	height:8px;
	background:#b7b4b2;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
}

.xlt_loader div:nth-child(1){
	-webkit-animation: bouncefirst 1.5s infinite ease-in-out;
	-moz-animation: bouncefirst 1.5s infinite ease-in-out;
	-mos-animation: bouncefirst 1.5s infinite ease-in-out;
	-o-animation: bouncefirst 1.5s infinite ease-in-out;
	animation: bouncefirst 1.5s infinite ease-in-out;
	-webkit-animation-delay: 0ms; 
	-moz-animation-delay: 0ms; 
	-ms-animation-delay: 0ms; 
	-o-animation-delay: 0ms; 
	animation-delay: 0ms;
	background:#83d1d3;
	color:#fff;
}

.xlt_loader div:nth-child(2){
	-webkit-animation-delay: 50ms; 
	-moz-animation-delay: 50ms; 
	-ms-animation-delay: 50ms; 
	-o-animation-delay: 50ms; 
	animation-delay: 50ms;
	background:#60c9ca;
	color:#fff;
}

.xlt_loader div:nth-child(3){
	-webkit-animation-delay: 100ms;
	-moz-animation-delay: 100ms;
	-ms-animation-delay: 100ms;
	-o-animation-delay: 100ms;
	animation-delay: 100m;
	background:#56bebf;
	color:#fff;
}

.xlt_loader div:nth-child(4){
	-webkit-animation-delay: 150ms; 
	-moz-animation-delay: 150ms; 
	-ms-animation-delay: 150ms; 
	-o-animation-delay: 150ms; 
	animation-delay: 150ms;
	color:#fff;
	background:#2cb7b9;
}

.xlt_loader div:nth-child(5){
	-webkit-animation-delay: 200ms; 
	-moz-animation-delay: 200ms; 
	-ms-animation-delay: 200ms; 
	-o-animation-delay: 200ms; 
	animation-delay: 200ms;
	background:#99d3d4;
	color:#fff;
}

.xlt_loader div:nth-child(6){
	-webkit-animation-delay: 250ms; 
	-moz-animation-delay: 250ms; 
	-ms-animation-delay: 250ms; 
	-o-animation-delay: 250ms; 
	animation-delay: 250ms;
	background:#56bebf;
	color:#fff;
}

.xlt_loader div:nth-child(7){
	-webkit-animation-delay: 300ms; 
	-moz-animation-delay: 300ms; 
	-ms-animation-delay: 300ms; 
	-o-animation-delay: 300ms; 
	animation-delay: 300ms;
	color:#fff;
	background:#13A3A5;
}


@-webkit-keyframes bouncefirst {
	0% { -webkit-transform: translateX(0px); } 
20% { -webkit-transform: translateX(-40px); } 
25% { -webkit-transform: translateX(-40px); } 
50% { -webkit-transform: translateX(80px); } 
	80%,100% { -webkit-transform: translateX(0px); } 
}

@-moz-keyframes bouncefirst {
	0% { -moz-transform: translateX(0px); } 
20% { -moz-transform: translateX(-40px); } 
25% { -moz-transform: translateX(-40px); } 
50% { -moz-transform: translateX(80px); } 
	80%,100% { -moz-transform: translateX(0px); } 
}

@-mos-keyframes bouncefirst {
	0% { -mos-transform: translateX(0px); } 
20% { -mos-transform: translateX(-40px); } 
25% { -mos-transform: translateX(-40px); } 
50% { -mos-transform: translateX(80px); } 
	80%,100% { -mos-transform: translateX(0px); } 
}

@-o-keyframes bouncefirst {
	0% { -o-transform: translateX(0px); } 
20% { -o-transform: translateX(-40px); } 
25% { -o-transform: translateX(-40px); } 
50% { -o-transform: translateX(80px); } 
	80%,100% { -o-transform: translateX(0px); } 
}

@keyframes bouncefirst {
	0% { transform: translateX(0px); } 
20% { transform: translateX(-40px); } 
25% { transform: translateX(-40px); } 
50% { transform: translateX(80px); } 
	80%,100% { transform: translateX(0px); } 
}

@-webkit-keyframes bounce {
	0% { -webkit-transform: translateX(0px); } 
20% { -webkit-transform: translateX(0px); } 
28% { -webkit-transform: translateX(0px); } 
50% { -webkit-transform: translateX(80px); } 
	80%,100% { -webkit-transform: translateX(0px); } 
}

@-moz-keyframes bounce {
	0% { -moz-transform: translateX(0px); } 
20% { -moz-transform: translateX(0px); } 
28% { -moz-transform: translateX(0px); } 
50% { -moz-transform: translateX(80px); } 
	80%,100% { -moz-transform: translateX(0px); } 
}

@-mos-keyframes bounce {
	0% { -mos-transform: translateX(0px); } 
20% { -mos-transform: translateX(0px); } 
28% { -mos-transform: translateX(0px); } 
50% { -mos-transform: translateX(80px); } 
	80%,100% { -mos-transform: translateX(0px); } 
}

@-o-keyframes bounce {
	0% { -o-transform: translateX(0px); } 
20% { -o-transform: translateX(0px); } 
28% { -o-transform: translateX(0px); } 
50% { -o-transform: translateX(80px); } 
	80%,100% { -o-transform: translateX(0px); } 
}

@keyframes bounce {
	0% { transform: translateX(0px); } 
20% { transform: translateX(0px); } 
28% { transform: translateX(0px); } 
50% { transform: translateX(80px); } 
	80%,100% { transform: translateX(0px); } 
}