@charset "utf-8";
/* CSS Document */

#loading {
	position: fixed;
	top: -100px;
	left: -100px;
	right: -100px;
	bottom: -100px;
	z-index:99;
	background:#1f1f1f;
}
.pLoading{
	position:absolute;
	top:50%;
	left:50%;
	width:100px;
	height:100px;
	-webkit-transform:scale(0.9,0.9) translate(-50%,-50%);
	transform:scale(0.9,0.9) translate(-50%,-50%);
	-webkit-transform-origin:left top;
	transform-origin:left top;
}
.pLogo{
	width:100%;
	height:80px;
	overflow:hidden;
}
.s{
	position:absolute;
	top:77px;
	left:25px;
	width:15px;
	height:15px;
	background:url(../images/plogo.png) no-repeat -25px -77px;
	
	-webkit-animation: loadS 4s infinite ease-out;
	animation: loadS 4s infinite ease-out;	
}
.i{
	position:absolute;
	top:77px;
	left:45px;
	width:10px;
	height:15px;
	background:url(../images/plogo.png) no-repeat -45px -77px;
	
	-webkit-animation: loadI 4s infinite ease-out;
	animation: loadI 4s infinite ease-out;	
}
.d{
	position:absolute;
	top:77px;
	left:62px;
	width:10px;
	height:15px;
	background:url(../images/plogo.png) no-repeat -62px -77px;
	
	-webkit-animation: loadD 4s infinite ease-out;
	animation: loadD 4s infinite ease-out;	
}
.dot1, .dot2{
	position:absolute;
	top:77px;
	left:37px;
	width:10px;
	height:15px;
	background:url(../images/plogo.png) no-repeat -37px -77px;
	
	-webkit-animation: loaddot 4s infinite ease-out;
	animation: loaddot 4s infinite ease-out;	
}
.dot2{
	left:52px;
	-webkit-animation: loaddot2 4s infinite ease-out;
	animation: loaddot2 4s infinite ease-out;	
}

@-webkit-keyframes loadS {
0%  { left:65px; opacity:0; }
15% { left:25px; opacity:1; }
90% { left:25px; opacity:1; }
100%{ left:25px; opacity:0; }
}
@keyframes loadS {
0%  { left:65px; opacity:0; }
15% { left:25px; opacity:1; }
90% { left:25px; opacity:1; }
100%{ left:25px; opacity:0; }
}

@-webkit-keyframes loaddot {
0%  { left:77px; opacity:0; }
5% { left:77px; opacity:0; }
15% { left:27px; opacity:1; }
20% { left:37px; opacity:1; }
90% { left:37px; opacity:1; }
100%{ left:37px; opacity:0; }	
}
@keyframes loaddot {
0%  { left:77px; opacity:0; }
5% { left:77px; opacity:0; }
15% { left:27px; opacity:1; }
20% { left:37px; opacity:1; }
90% { left:37px; opacity:1; }
100%{ left:37px; opacity:0; }
}

@-webkit-keyframes loadI {
0%  { left:85px; opacity:0; }
10% { left:85px; opacity:0; }
25% { left:40px; opacity:1; }
30% { left:45px; opacity:1; }
90% { left:45px; opacity:1; }
100%{ left:45px; opacity:0; }	
}
@keyframes loadI {
0%  { left:85px; opacity:0; }
10% { left:85px; opacity:0; }
25% { left:40px; opacity:1; }
30% { left:45px; opacity:1; }
90% { left:45px; opacity:1; }
100%{ left:45px; opacity:0; }
}

@-webkit-keyframes loaddot2 {
0%  { left:92px; opacity:0; }
15% { left:92px; opacity:0; }
30% { left:47px; opacity:1; }
35% { left:52px; opacity:1; }
90% { left:52px; opacity:1; }
100%{ left:52px; opacity:0; }		
}
@keyframes loaddot2 {
0%  { left:92px; opacity:0; }
15% { left:92px; opacity:0; }
30% { left:47px; opacity:1; }
35% { left:52px; opacity:1; }
90% { left:52px; opacity:1; }
100%{ left:52px; opacity:0; }		
}

@-webkit-keyframes loadD {
0%  { left:102px; opacity:0; }
20% { left:102px; opacity:0; }
35% { left:57px;  opacity:1; }
40% { left:62px;  opacity:1; }
90% { left:62px;  opacity:1; }	
100%{ left:62px;  opacity:0; }	
}
@keyframes loadD {
0%  { left:102px; opacity:0; }
20% { left:102px; opacity:0; }
35% { left:57px;  opacity:1; }
40% { left:62px;  opacity:1; }
90% { left:62px;  opacity:1; }	
100%{ left:62px;  opacity:0; }
}