﻿/*加载gif*/
.ajax_loader_overlay{
	position: fixed;
	top: 0;
	left: 0;
	background-color: #fff;
	display: none;
	z-index: 99;
  width: 100%;
  height: 100%;
}

.loadout .ajax_loader_overlay{
display: block;
}
.load .ajax_loader_overlay{
	display: block;
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;

    }
    100% {
        opacity: 1;

    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;

    }
    100% {
        opacity: 1;

    }
}

@-webkit-keyframes fadeout {
    0% {
        opacity:1;

    }
    100% {
        opacity: 0;

    }
}
@keyframes fadeout {
    0% {
        opacity:1;

    }
    100% {
        opacity:0;

    }
}


.ajax_loader {
 position:fixed;
 top:50%;
 left:50%;
 z-index:1100
}
@media only screen and (min-width:1000px) {
 body.vertical_menu_enabled:not(.vertical_menu_hidden) .ajax_loader {
  margin-left:130px
 }
 body.vertical_menu_enabled.vertical_menu_hidden .ajax_loader {
  margin-left:20px
 }
}
.ajax_loader_1 {
 position:relative;
 display:inline-block;
 width:100%;
 height:100%
}
.ajax_loader_2 {
 margin:-50% 0 0 -50%
}
.ajax_loader .pulse {
 width:32px;
 height:32px;
 margin:-16px 0 0 -16px;
 background-color:#303030;
 -webkit-border-radius:16px;
 -moz-border-radius:16px;
 -ms-border-radius:16px;
 -o-border-radius:16px;
 border-radius:16px;
 -webkit-animation:scaleout 1s infinite ease-in-out;
 animation:scaleout 1s infinite ease-in-out
}
@-webkit-keyframes scaleout {
 0% {
  -webkit-transform:scale(0)
 }
 100% {
  -webkit-transform:scale(1);
  opacity:0
 }
}
@-moz-keyframes scaleout {
 0% {
  -moz-transform:scale(0)
 }
 100% {
  -moz-transform:scale(1);
  opacity:0
 }
}
@-ms-keyframes scaleout {
 0% {
  -ms-transform:scale(0)
 }
 100% {
  -ms-transform:scale(1);
  opacity:0
 }
}
@-o-keyframes scaleout {
 0% {
  -o-transform:scale(0)
 }
 100% {
  -o-transform:scale(1);
  opacity:0
 }
}
@keyframes scaleout {
 0% {
  transform:scale(0);
  -webkit-transform:scale(0)
 }
 100% {
  transform:scale(1);
  -webkit-transform:scale(1);
  opacity:0
 }
}
.ajax_loader .double_pulse {
 width:40px;
 height:40px;
 margin:-20px 0 0 -20px;
 position:relative
}
.ajax_loader .double_pulse .double-bounce1,.ajax_loader .double_pulse .double-bounce2 {
 width:100%;
 height:100%;
 border-radius:50%;
 background-color:#303030;
 opacity:.6;
 position:absolute;
 top:0;
 left:0;
 -webkit-animation:bounce 2s infinite ease-in-out;
 animation:bounce 2s infinite ease-in-out
}
.ajax_loader .double_pulse .double-bounce2 {
 -webkit-animation-delay:-1s;
 animation-delay:-1s
}
@-webkit-keyframes bounce {
 0%,100% {
  -webkit-transform:scale(0)
 }
 50% {
  -webkit-transform:scale(1)
 }
}
@keyframes bounce {
 0%,100% {
  transform:scale(0);
  -webkit-transform:scale(0)
 }
 50% {
  transform:scale(1);
  -webkit-transform:scale(1)
 }
}
.ajax_loader .cube {
 width:60px;
 height:60px;
 margin:-30px 0 0 -30px;
 background-color:#303030;
 -webkit-animation:rotateplane 1.2s infinite ease-in-out;
 animation:rotateplane 1.2s infinite ease-in-out
}
@-webkit-keyframes rotateplane {
 0% {
  -webkit-transform:perspective(120px)
 }
 50% {
  -webkit-transform:perspective(120px) rotateY(180deg)
 }
 100% {
  -webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)
 }
}
@keyframes rotateplane {
 0% {
  transform:perspective(120px) rotateX(0) rotateY(0);
  -webkit-transform:perspective(120px) rotateX(0) rotateY(0)
 }
 50% {
  transform:perspective(120px) rotateX(-180.1deg) rotateY(0);
  -webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0)
 }
 100% {
  transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  -webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)
 }
}
.ajax_loader .rotating_cubes {
 width:32px;
 height:32px;
 margin:-16px 0 0 -16px;
 position:relative
}
.ajax_loader .rotating_cubes .cube1,.ajax_loader .rotating_cubes .cube2 {
 background-color:#303030;
 width:10px;
 height:10px;
 position:absolute;
 top:0;
 left:0;
 -webkit-animation:cubemove 1.8s infinite ease-in-out;
 animation:cubemove 1.8s infinite ease-in-out
}
.ajax_loader .rotating_cubes .cube2 {
 -webkit-animation-delay:-.9s;
 animation-delay:-.9s
}
@-webkit-keyframes cubemove {
 25% {
  -webkit-transform:translateX(42px) rotate(-90deg) scale(.5)
 }
 50% {
  -webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)
 }
 75% {
  -webkit-transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5)
 }
 100% {
  -webkit-transform:rotate(-360deg)
 }
}
@keyframes cubemove {
 25% {
  transform:translateX(42px) rotate(-90deg) scale(.5);
  -webkit-transform:translateX(42px) rotate(-90deg) scale(.5)
 }
 50% {
  transform:translateX(42px) translateY(42px) rotate(-179deg);
  -webkit-transform:translateX(42px) translateY(42px) rotate(-179deg)
 }
 50.1% {
  transform:translateX(42px) translateY(42px) rotate(-180deg);
  -webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)
 }
 75% {
  transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5);
  -webkit-transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5)
 }
 100% {
  transform:rotate(-360deg);
  -webkit-transform:rotate(-360deg)
 }
}
.ajax_loader .stripes {
 width:50px;
 height:60px;
 margin:-30px 0 0 -25px;
 font-size:10px
}
.ajax_loader .stripes>div {
 background-color:#303030;
 height:100%;
 width:6px;
 display:inline-block;
 margin:0 3px 0 0;
 -webkit-animation:stretchdelay 1.2s infinite ease-in-out;
 animation:stretchdelay 1.2s infinite ease-in-out
}
.ajax_loader .stripes .rect2 {
 -webkit-animation-delay:-1.1s;
 animation-delay:-1.1s
}
.ajax_loader .stripes .rect3 {
 -webkit-animation-delay:-1s;
 animation-delay:-1s
}
.ajax_loader .stripes .rect4 {
 -webkit-animation-delay:-.9s;
 animation-delay:-.9s
}
.ajax_loader .stripes .rect5 {
 -webkit-animation-delay:-.8s;
 animation-delay:-.8s
}
@-webkit-keyframes stretchdelay {
 0%,100%,40% {
  -webkit-transform:scaleY(.4)
 }
 20% {
  -webkit-transform:scaleY(1)
 }
}
@keyframes stretchdelay {
 0%,100%,40% {
  transform:scaleY(.4);
  -webkit-transform:scaleY(.4)
 }
 20% {
  transform:scaleY(1);
  -webkit-transform:scaleY(1)
 }
}
.ajax_loader .wave {
 width:72px;
 margin:-9px 0 0 -36px
}
.ajax_loader .wave>div {
 width:18px;
 height:18px;
 background-color:#303030;
 margin:0 3px 0 0;
 border-radius:100%;
 display:inline-block;
 -webkit-animation:bouncedelay 1.4s infinite ease-in-out;
 animation:bouncedelay 1.4s infinite ease-in-out;
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both
}
.ajax_loader .wave .bounce1 {
 -webkit-animation-delay:-.32s;
 animation-delay:-.32s
}
.ajax_loader .wave .bounce2 {
 -webkit-animation-delay:-.16s;
 animation-delay:-.16s
}
@-webkit-keyframes bouncedelay {
 0%,100%,80% {
  -webkit-transform:scale(0)
 }
 40% {
  -webkit-transform:scale(1)
 }
}
@keyframes bouncedelay {
 0%,100%,80% {
  transform:scale(0);
  -webkit-transform:scale(0)
 }
 40% {
  transform:scale(1);
  -webkit-transform:scale(1)
 }
}
.ajax_loader .two_rotating_circles {
 width:40px;
 height:40px;
 margin:-20px 0 0 -20px;
 position:relative;
 text-align:center;
 -webkit-animation:rotatecircles 2s infinite linear;
 animation:rotatecircles 2s infinite linear
}
.ajax_loader .two_rotating_circles .dot1,.ajax_loader .two_rotating_circles .dot2 {
 width:60%;
 height:60%;
 display:inline-block;
 position:absolute;
 top:0;
 background-color:#303030;
 border-radius:100%;
 -webkit-animation:bounce 2s infinite ease-in-out;
 animation:bounce 2s infinite ease-in-out
}
.ajax_loader .two_rotating_circles .dot2 {
 top:auto;
 bottom:0;
 -webkit-animation-delay:-1s;
 animation-delay:-1s
}
@-webkit-keyframes rotatecircles {
 100% {
  -webkit-transform:rotate(360deg)
 }
}
@keyframes rotatecircles {
 100% {
  transform:rotate(360deg);
  -webkit-transform:rotate(360deg)
 }
}
.ajax_loader .five_rotating_circles {
 width:60px;
 height:60px;
 margin:-30px 0 0 -30px;
 position:relative
}
.ajax_loader .five_rotating_circles .container1>div,.ajax_loader .five_rotating_circles .container2>div,.ajax_loader .five_rotating_circles .container3>div {
 width:12px;
 height:12px;
 background-color:#42acf0;
 border-radius:100%;
 position:absolute;
 -webkit-animation:bouncedelay 1.2s infinite ease-in-out;
 animation:bouncedelay 1.2s infinite ease-in-out;
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both
}
.ajax_loader .five_rotating_circles .spinner-container {
 position:absolute;
 width:100%;
 height:100%
}
.ajax_loader .five_rotating_circles .container2 {
 -webkit-transform:rotateZ(45deg);
 transform:rotateZ(45deg)
}
.ajax_loader .five_rotating_circles .container3 {
 -webkit-transform:rotateZ(90deg);
 transform:rotateZ(90deg)
}
.ajax_loader .five_rotating_circles .circle1 {
 top:0;
 left:0
}
.ajax_loader .five_rotating_circles .circle2 {
 top:0;
 right:0
}
.ajax_loader .five_rotating_circles .circle3 {
 right:0;
 bottom:0
}
.ajax_loader .five_rotating_circles .circle4 {
 left:0;
 bottom:0
}
.ajax_loader .five_rotating_circles .container2 .circle1 {
 -webkit-animation-delay:-1.1s;
 animation-delay:-1.1s
}
.ajax_loader .five_rotating_circles .container3 .circle1 {
 -webkit-animation-delay:-1s;
 animation-delay:-1s
}
.ajax_loader .five_rotating_circles .container1 .circle2 {
 -webkit-animation-delay:-.9s;
 animation-delay:-.9s
}
.ajax_loader .five_rotating_circles .container2 .circle2 {
 -webkit-animation-delay:-.8s;
 animation-delay:-.8s
}
.ajax_loader .five_rotating_circles .container3 .circle2 {
 -webkit-animation-delay:-.7s;
 animation-delay:-.7s
}
.ajax_loader .five_rotating_circles .container1 .circle3 {
 -webkit-animation-delay:-.6s;
 animation-delay:-.6s
}
.ajax_loader .five_rotating_circles .container2 .circle3 {
 -webkit-animation-delay:-.5s;
 animation-delay:-.5s
}
.ajax_loader .five_rotating_circles .container3 .circle3 {
 -webkit-animation-delay:-.4s;
 animation-delay:-.4s
}
.ajax_loader .five_rotating_circles .container1 .circle4 {
 -webkit-animation-delay:-.3s;
 animation-delay:-.3s
}
.ajax_loader .five_rotating_circles .container2 .circle4 {
 -webkit-animation-delay:-.2s;
 animation-delay:-.2s
}
.ajax_loader .five_rotating_circles .container3 .circle4 {
 -webkit-animation-delay:-.1s;
 animation-delay:-.1s
}