/*===========logo的加载========*/
#EgLoading
{
    width:100%;height:100%;position:fixed;left:0px;top:0px;text-align:center;
    z-index:10001;display:none;
    background-color:rgba(0,0,0,0.2);
}
#EgLoading_canvas
{
    width:160px;height:160px;overflow:hidden;position:absolute;
    left:50%;top:50%;margin-left:-80px;margin-top:-80px;
}
#EgLoading_logo
{
    width:80px;height:80px;background-image:url('logo.png');background-size:100% 100%;position:absolute;left:40px;top:40px;z-index:2;
}
#EgLoading_circle
{
    width:100%;height:100%;background-image:url('circle.png');background-size:100% 100%;position:absolute;left:0px;top:0px;z-index:1;
}
.EgLoading_rotate
{
    -webkit-animation-name: EgLoading_rotate;
   -webkit-animation-duration:2s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
}
@-webkit-keyframes EgLoading_rotate 
{
  from 
  {
      -webkit-transform:rotate(0deg);
  }
  to 
  {
      -webkit-transform:rotate(360deg);
  }
}

#EgLoading_index
{
    width:100%;height:100%;position:fixed;left:0px;top:0px;text-align:center;
    z-index:10001;display:none;
    background-color:rgba(0,0,0,0.2);
}
#EgLoading_index_canvas
{
	width:100px;height:100px;background-color:rgba(0,0,0,0.6);position:absolute;left:50%;top:50%;
	margin-left:-50px;margin-top:-50px;overflow:hidden;border-radius:10px;
}
#EgLoading_index_canvas_loader
{
	position:absolute;width:40px;height:40px;top:15px;left:30px;
	background:url('loading_index.png') no-repeat center center;background-size:cover;
}
.EgLoading_index_rotate
{
    -webkit-animation-name: EgLoading_rotate;
   -webkit-animation-duration:2s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
}
#EgLoading_index_canvas_text
{
	text-align:center;color:#FFFFFF;height:40px;line-height:40px;
	position:absolute;bottom:5px;left:0px;width:100%;
}
@-webkit-keyframes EgLoading_index_rotate 
{
  from 
  {
      -webkit-transform:rotate(0deg);
  }
  to 
  {
      -webkit-transform:rotate(360deg);
  }
}
/*==============EgLoader用于区域显示,一个页面可显示多个==============*/
.EgLoader
{
  position:absolute;width:64px;height:64px;left:50%;top:50%;margin-left:-32px;margin-top:-32px;
  z-index:10001;
}
.EgLoaderInner 
{
  position:absolute;left:8px;top:8px;
}
.EgLoaderInner .dot
{
  position: absolute;
  opacity: 0;
  width: 48px;
  height: 48px;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
  -webkit-animation-name: EgLoader;
  -moz-animation-name: EgLoader;
  -ms-animation-name: EgLoader;
  -o-animation-name: EgLoader;
  animation-name: EgLoader;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -o-animation-duration: 5.28s;
  -moz-animation-duration: 5.28s;
  -webkit-animation-duration: 5.28s;
  animation-duration: 5.28s;
}
/*.EgLoading .dot:after 
{
  content: "";
  position:absolute;
  width: 6px;
  height:6px;
  border-radius: 50%;
  background: #ffffff;
}*/
.EgLoaderInner .dot div
{
      position:absolute;
      width: 6px;
      height:6px;
      border-radius: 50%;
      background-color: #20a0ff;
      /*background-color: #888888;*/
}
.EgLoaderInner .dot:nth-child(2) 
{
  -webkit-animation-delay: .23s;
  -moz-animation-delay: .23s;
  -ms-animation-delay: .23s;
  -o-animation-delay: .23s;
  animation-delay: .23s;
}
.EgLoaderInner .dot:nth-child(3)
 {
  -webkit-animation-delay: .46s;
  -moz-animation-delay: .46s;
  -ms-animation-delay: .46s;
  -o-animation-delay: .46s;
  animation-delay: .46s;
}
.EgLoaderInner .dot:nth-child(4)
 {
  -webkit-animation-delay: .69s;
  -moz-animation-delay: .69s;
  -ms-animation-delay: .69s;
  -o-animation-delay: .69s;
  animation-delay: .69s;
}
.EgLoaderInner .dot:nth-child(5) 
{
  -webkit-animation-delay: .92s;
  -moz-animation-delay: .92s;
  -ms-animation-delay: .92s;
  -o-animation-delay: .92s;
  animation-delay: .92s;
}
@-webkit-keyframes EgLoader {
  0% {
    -webkit-transform: rotate(225deg);
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
  }
  8% {
    -webkit-transform: rotate(345deg);
    -webkit-animation-timing-function: linear;
  }
  30% {
    -webkit-transform: rotate(455deg);
    -webkit-animation-timing-function: ease-in-out;
  }
  40% {
    -webkit-transform: rotate(690deg);
    -webkit-animation-timing-function: linear;
  }
  60% {
    -webkit-transform: rotate(815deg);
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
  }
  75% {
    -webkit-transform: rotate(965deg);
    -webkit-animation-timing-function: ease-out;
  }
  76% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
 
@keyframes EgLoader {
  0% {
    transform: rotate(225deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  8% {
    transform: rotate(345deg);
    animation-timing-function: linear;
  }
  30% {
    transform: rotate(455deg);
    animation-timing-function: ease-in-out;
  }
  40% {
    transform: rotate(690deg);
    animation-timing-function: linear;
  }
  60% {
    transform: rotate(815deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  75% {
    transform: rotate(965deg);
    animation-timing-function: ease-out;
  }
  76% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}