/*===========logo的加载========*/
#EgLoading
{
    width:100%;height:100%;position:fixed;left:0px;top:0px;text-align:center;
    z-index:10002;display:none;
	background-color:rgba(255,255,255,0.001);
    /*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-position:center center;background-repeat:no-repeat;
    /*background-size:100% 100%;*/
    background-size:contain;
    position:absolute;left:40px;top:40px;z-index:2;
}
/*#EgLoading_circle
{
    background-position:center center;background-repeat:no-repeat;
    width:100%;height:100%;background-image:url('circle.png');background-size:100% 100%;position:absolute;left:0px;top:0px;z-index:1;
}*/
#EgLoading_circle
{
    box-shadow:rgba(0,0,0,0.3) 0px 0px 10px;
    width:140px;height:140px;position:absolute;left:10px;top:10px;box-sizing:border-box;border-radius:50%;
    border:solid 14px rgba(50,50,50,0.3);
}
#EgLoading_circle:before
{
    content:'';
    position:absolute;left:-12px;top:-12px;width:calc(100% + 24px);height:calc(100% + 24px);
    z-index:1;box-sizing:border-box;border-radius:50%;
    border:solid 10px #a2e148;
    border-bottom-color:transparent;
}






.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);
  }
}


/*==============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;
  }
}