#AlerBottom{ display:none; position:fixed; top:0; padding:10px 0; line-height:22px; left:0; right:0; z-index:10000000001; color:#eee;  font-size:14px; -webkit-transition:all .3s ease;}
#AlerBottom .AlerBottomBg{ width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(0,0,0,.5); z-index:1; -webkit-transform:translateY(-100%); -webkit-transition:all .5s ease;}
#AlerBottom .AlerBottomBg-in{ position:absolute; left:0; top:0; height:100%; width:0;;}
#AlerBottom .status{ opacity:0; position:absolute; z-index:2; left:20px; width:16px; top:15px; -webkit-transform:translateY(-200%);}
#AlerBottom .info{opacity:0; position:relative; z-index:2; margin:0 20px 0 56px; -webkit-transform:translateY(-200%);}

#AlerBottom.AlerBottom-loading{}
#AlerBottom.AlerBottom-loading .AlerBottomBg-in{ -webkit-transition:width .5s ease; background:rgba(118,255,3,.7)}
#AlerBottom.AlerBottom-loading .AlerBottomBg{ -webkit-transform:translateY(0);}
#AlerBottom.AlerBottom-loading .status{ -webkit-animation:moveUp2 .3s ease both .3s;}
#AlerBottom.AlerBottom-loading .info{ -webkit-animation:moveUp2 .3s ease both .5s;}

#AlerBottom.AlerBottom-success{}
#AlerBottom.AlerBottom-success .AlerBottomBg-in{ width:100%!important; background:rgba(37,155,36,.7)}
#AlerBottom.AlerBottom-success .AlerBottomBg{ -webkit-transform:translateY(0);}
#AlerBottom.AlerBottom-success .status{ -webkit-animation:moveUp3 .3s ease both .3s;}
#AlerBottom.AlerBottom-success .info{ -webkit-animation:moveUp3 .3s ease both .5s;}

#AlerBottom.AlerBottom-error{}
#AlerBottom.AlerBottom-error .AlerBottomBg-in{ width:100%!important; background:rgba(255,0,0,.7)}
#AlerBottom.AlerBottom-error .AlerBottomBg{ -webkit-transform:translateY(0);}
#AlerBottom.AlerBottom-error .status{ -webkit-animation:moveUp4 .3s ease both .3s;}
#AlerBottom.AlerBottom-error .info{ -webkit-animation:moveUp4 .3s ease both .5s;}

@-webkit-keyframes moveUp2{
	0%{opacity:0;  -webkit-transform:translateY(-100%);}
	100%{opacity:1; -webkit-transform:translateY(0);}
}
@-webkit-keyframes moveUp3{
	0%{opacity:0;  -webkit-transform:translateY(-100%);}
	100%{opacity:1; -webkit-transform:translateY(0);}
}
@-webkit-keyframes moveUp4{
	0%{opacity:0;  -webkit-transform:translateY(-100%);}
	100%{opacity:1; -webkit-transform:translateY(0);}
}

/*square loader*/
/*!
 * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
 * Copyright 2015 Daniel Cardoso <@DanielCardoso>
 * Licensed under MIT
 */
.la-ball-clip-rotate{ margin-top:-7px;}
.la-ball-clip-rotate,
.la-ball-clip-rotate > div {
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.la-ball-clip-rotate {
    display: block;
    font-size: 0;
    color: #fff;
}

.la-ball-clip-rotate.la-dark {
    color: #333;
}

.la-ball-clip-rotate > div {
    display: inline-block;
    float: none;
    background-color: currentColor;
    border: 0 solid currentColor;
}

.la-ball-clip-rotate {
    width: 32px;
    height: 32px;
}

.la-ball-clip-rotate > div {
    width: 32px;
    height: 32px;
    background: transparent;
    border-width: 2px;
    border-bottom-color: transparent;
    border-radius: 100%;
    -webkit-animation: ball-clip-rotate .75s linear infinite;
       -moz-animation: ball-clip-rotate .75s linear infinite;
         -o-animation: ball-clip-rotate .75s linear infinite;
            animation: ball-clip-rotate .75s linear infinite;
}

.la-ball-clip-rotate.la-mm {
    width: 12px;
    height: 12px;
}

.la-ball-clip-rotate.la-mm > div {
    width: 12px;
    height: 12px;
    border-width: 2px;
}
.la-ball-clip-rotate.la-sm {
    width: 24px;
    height: 24px;
}

.la-ball-clip-rotate.la-sm > div {
    width: 24px;
    height: 24px;
    border-width: 2px;
}

.la-ball-clip-rotate.la-2x {
    width: 64px;
    height: 64px;
}

.la-ball-clip-rotate.la-2x > div {
    width: 64px;
    height: 64px;
    border-width: 4px;
}

.la-ball-clip-rotate.la-3x {
    width: 96px;
    height: 96px;
}

.la-ball-clip-rotate.la-3x > div {
    width: 96px;
    height: 96px;
    border-width: 6px;
}

/*
 * Animation
 */
@-webkit-keyframes ball-clip-rotate {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@-moz-keyframes ball-clip-rotate {
    0% {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }
    50% {
        -moz-transform: rotate(180deg);
             transform: rotate(180deg);
    }
    100% {
        -moz-transform: rotate(360deg);
             transform: rotate(360deg);
    }
}
@-o-keyframes ball-clip-rotate {
    0% {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }
    50% {
        -o-transform: rotate(180deg);
           transform: rotate(180deg);
    }
    100% {
        -o-transform: rotate(360deg);
           transform: rotate(360deg);
    }
}
@keyframes ball-clip-rotate {
    0% {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
           -moz-transform: rotate(180deg);
             -o-transform: rotate(180deg);
                transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
           -moz-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}






/*成功*/
.la-success{ width:32px; height:32px; position:relative;}
.la-success.la-sm{ width:20px; height:20px;}
.la-success > div:nth-child(1),
.la-success > div:nth-child(2) {
    position: absolute;
	background:#fff;
	
}
.la-success > div:nth-child(1){
	width:10px;
	height:3px;
	top:7px;
	-webkit-transform:rotate(45deg);
	
}
.la-success > div:nth-child(2){
	width:20px; 
	height:3px;
	top:4px;
	left:4px;
	-webkit-transform:rotate(-45deg);
}
@-webkit-keyframes successdiv1{
	0%{ -webkit-transform:scale(.1)}
	100%{ -webkit-transform:scale(1)}
}


/*错误*/
.la-error{ width:32px; height:32px; position:relative;}
.la-error.la-sm{ width:20px; height:20px;}
.la-error > div:nth-child(1),
.la-error > div:nth-child(2) {
    position: absolute;
	background:#fff;
	width:15px; 
	height:3px;
	top:4px;
	left:4px;
}
.la-error > div:nth-child(1){
	-webkit-transform:rotate(45deg);
}
.la-error > div:nth-child(2){
	-webkit-transform:rotate(-45deg);
}