.maskloading{z-index:1007;position:fixed;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);-moz-opacity:0.5;display:none;}
.maskloading-center{max-width:400px;z-index:1008;position:absolute;width:100%;margin:0 auto;top:28%;background-color:#FFFFFF;border-radius:4px;display:none;padding:15px 0px 20px 0px;}
.maskloading-center img{width:80%}
.maskloading-center span{font-size:14px;color: #999999; text-align:center;}
#animationTipBox{font-family:"Microsoft Yahei","微软雅黑",Arial,Tahoma;font-size:14px;width:250px;height:auto;background-color:#fff;border-radius:8px;position:fixed;left:50%;top:50%;margin-left:-125px;margin-top:-85px;z-index:1006;-webkit-animation:alertAnimation .3s ease-in-out 0 1;-moz-animation:alertAnimation .3s ease-in-out 0 1;animation:alertAnimation .3s ease-in-out 0 1}
#sm-load{width:20px;height:20px;padding:0;background:0;padding:0;position:relative;float:left;vertical-align:middle;margin-right:5px;top:0;left:0;margin:0;-webkit-animation:none;-moz-animation:none;animation:none}
#sm-load .load{width:20px;height:20px;border:0;margin:0 auto;top:0}
#sm-load .icon_box{margin:0 auto}
#sm-load .load .cirBox1,#sm-load .load .cirBox2,#sm-load .load .cirBox3{width:20px;height:20px;position:absolute;left:0;top:0}
#sm-load .load .cirBox1>div,#sm-load .load .cirBox2>div,#sm-load .load .cirBox3>div{width:4px;height:4px;border-radius:100%;background-color:#fff;position:absolute}
#sm-load .load .icon_box{width:20px;height:20px}
#animationTipBox .maskicon{position:relative;width:80px;height:80px;border-radius:50px;border:4px solid #6c3;margin:15px auto 5px auto}
#animationTipBox .icon_box{width:80px;height:80px;margin:0 auto;text-align:center;position:relative}
.tip .maskicon{width:80px;height:80px;background-color:#6c3;border-radius:100%;color:#fff;font-size:80px;text-align:center;line-height:80px}

#animationTipBox .maskicontip{position:relative;width:40px;height:40px;border-radius:50px;border:4px solid #6c3;margin:15px auto 5px auto}
.maskicontip{width:40px;height:40px;background-color:#6c3;border-radius:100%;color:#fff;font-size:40px;text-align:center;line-height:40px}

#animationTipBox .maskicontipcomeon{position:relative;width:80px;height:80px;border-radius:50px;border:4px solid #F90;margin:15px auto 5px auto}
.maskicontipcomeon{width:80px;height:80px;background-color:#F90;border-radius:100%;color:#fff;font-size:70px;text-align:center;line-height:80px}

#animationTipBox .lose .maskicon{border-color:#4184f3}
#animationTipBox .comeon .maskicon{border-color:#F90}
#animationTipBox .lose .icon_box{-webkit-animation:lose_Animation .5s;-moz-animation:lose_Animation .5s;animation:lose_Animation .5s}
#animationTipBox .dec_txt{font-size:16px;text-align:center;color:#666;line-height:26px;height:26px;padding:5px 0 10px 0;}
#animationTipBox .dec_txt_tip{font-size:16px;text-align:center;color:#666;line-height:26px;padding:10px 10px 10px 10px;height:73px;}
.success .line_short{width:25px;height:5px;position:absolute;left:14px;top:46px;border-radius:4px;background-color:#6c3;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:success_short_Animation .65s;-moz-animation:success_short_Animation .65s;animation:success_short_Animation .65s}
.success .line_long{width:47px;height:5px;position:absolute;right:8px;top:38px;border-radius:4px;background-color:#6c3;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:success_long_Animation .65s;-moz-animation:success_long_Animation .65s;animation:success_long_Animation .65s}
.lose .line_left,.lose .line_right{width:47px;height:5px;position:absolute;left:17px;top:37px;border-radius:4px;background-color:#4184f3;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}
.lose .line_right{right:11px;top:37px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}
@keyframes alertAnimation{0%{transform:scale(.5)}
45%{transform:scale(1.25)}
80%{transform:scale(.95)}
100%{transform:scale(1)}
}
@-webkit-keyframes alertAnimation{0%{-webkit-transform:scale(.5)}
45%{-webkit-transform:scale(1.25)}
80%{-webkit-transform:scale(.95)}
100%{-webkit-transform:scale(1)}
}
@-moz-keyframes alertAnimation{0%{-moz-transform:scale(.5)}
45%{-moz-transform:scale(1.25)}
80%{-moz-transform:scale(.95)}
100%{-moz-transform:scale(1)}
}
@-webkit-keyframes success_short_Animation{0%{width:0;left:1px;top:19px}
54%{width:0;left:1px;top:19px}
70%{width:50px;left:-4px;top:37px}
84%{width:17px;left:21px;top:48px}
100%{width:25px;left:14px;top:45px}
}
@-moz-keyframes success_short_Animation{0%{width:0;left:1px;top:19px}
54%{width:0;left:1px;top:19px}
70%{width:50px;left:-4px;top:37px}
84%{width:17px;left:21px;top:48px}
100%{width:25px;left:14px;top:45px}
}
@keyframes success_short_Animation{0%{width:0;left:1px;top:19px}
54%{width:0;left:1px;top:19px}
70%{width:50px;left:-4px;top:37px}
84%{width:17px;left:21px;top:48px}
100%{width:25px;left:14px;top:45px}
}
@-webkit-keyframes success_long_Animation{0%{width:0;right:46px;top:54px}
65%{width:0;right:46px;top:54px}
84%{width:55px;right:0;top:35px}
100%{width:47px;right:8px;top:38px}
}
@-moz-keyframes success_long_Animation{0%{width:0;right:46px;top:54px}
65%{width:0;right:46px;top:54px}
84%{width:55px;right:0;top:35px}
100%{width:47px;right:8px;top:38px}
}
@keyframes success_long_Animation{0%{width:0;right:46px;top:54px}
65%{width:0;right:46px;top:54px}
84%{width:55px;right:0;top:35px}
100%{width:47px;right:8px;top:38px}
}
@-webkit-keyframes lose_Animation{0%{-webkit-transform:scale(.6);opacity:.2}
50%{-webkit-transform:scale(.6);opacity:.5}
80%{-webkit-transform:scale(1.15);opacity:.8}
100%{-webkit-transform:scale(1);opacity:1}
}
@-moz-keyframes lose_Animation{0%{-moz-transform:scale(.6);opacity:.2}
50%{-moz-transform:scale(.6);opacity:.5}
80%{-moz-transform:scale(1.15);opacity:.8}
100%{-moz-transform:scale(1);opacity:1}
}
@keyframes lose_Animation{0%{transform:scale(.6);opacity:.2}
50%{transform:scale(.6);opacity:.5}
80%{transform:scale(1.15);opacity:.8}
100%{transform:scale(1);opacity:1}
}
@-webkit-keyframes load_Animation{0%{-webkit-transform:scale(.6);opacity:.2}
50%{-webkit-transform:scale(.6);opacity:.5}
80%{-webkit-transform:scale(1.15);opacity:.8}
100%{-webkit-transform:scale(1);opacity:1}
}
@-moz-keyframes load_Animation{0%{-moz-transform:scale(.6);opacity:.2}
50%{-moz-transform:scale(.6);opacity:.5}
80%{-moz-transform:scale(1.15);opacity:.8}
100%{-moz-transform:scale(1);opacity:1}
}
@keyframes load_Animation{0%{transform:scale(.6);opacity:.2}
50%{transform:scale(.6);opacity:.5}
80%{transform:scale(1.15);opacity:.8}
100%{transform:scale(1);opacity:1}
}
/*
.load{position:relative;width:60px;height:80px;border-radius:50px;border:4px solid #fff;margin:15px auto 5px auto;top:10px}
.load .icon_box{margin:10px auto;width:60px;height:60px}
.load .cirBox1,.load .cirBox2,.load .cirBox3{width:60px;height:60px;position:absolute;left:0;top:0}
.load .cirBox1>div,.load .cirBox2>div,.load .cirBox3>div{width:10px;height:10px;border-radius:100%;background-color:#ccc;position:absolute}
.load .cirBox1{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);transform:rotate(30deg)}
.load .cirBox2{-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);transform:rotate(60deg)}
.load .cirBox3{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);transform:rotate(90deg)}
.load .cir1{left:0;top:0}
.load .cir2{right:0;top:0}
.load .cir3{right:0;bottom:0}
.load .cir4{left:0;bottom:0}
.load .cir1,.load .cir2,.load .cir3,.load .cir4{-webkit-animation:cir_Animation 1.2s ease 0 infinite;-moz-animation:cir_Animation 1.2s ease 0 infinite;animation:cir_Animation 1.2s ease 0 infinite}
.cirBox1 .cir2{-webkit-animation-delay:-1.1s;-moz-animation-delay:-1.1s;animation-delay:-1.1s}
.cirBox1 .cir3{-webkit-animation-delay:-.8s;-moz-animation-delay:-.8s;animation-delay:-.8s}
.cirBox1 .cir4{-webkit-animation-delay:-.5s;-moz-animation-delay:-.5s;animation-delay:-.5s}
.cirBox2 .cir2{-webkit-animation-delay:-1s;-moz-animation-delay:-1s;animation-delay:-1s}
.cirBox2 .cir3{-webkit-animation-delay:-.7s;-moz-animation-delay:-.7s;animation-delay:-.7s}
.cirBox2 .cir4{-webkit-animation-delay:-.4s;-moz-animation-delay:-.4s;animation-delay:-.4s}
.cirBox3 .cir2{-webkit-animation-delay:-.9s;-moz-animation-delay:-.9s;animation-delay:-.9s}
.cirBox3 .cir3{-webkit-animation-delay:-.6s;-moz-animation-delay:-.6s;animation-delay:-.6s}
.cirBox3 .cir4{-webkit-animation-delay:-.3s;-moz-animation-delay:-.3s;animation-delay:-.3s}
@-webkit-keyframes cir_Animation{0%,100%,80%{-webkit-transform:scale(.4)}
40%{-webkit-transform:scale(1)}
}*/
.mask{width:100%;height:100%;background-color:#000;opacity:.6;position:fixed;left:0;top:0;z-index:1005}
.maskdanse{width:100%;height:100%;background-color:#000;opacity:.2;position:fixed;left:0;top:0;z-index:1005}
#animationTipBox .okoButton{width:80px;display:block;height:35px;margin:0 auto;border:0;padding:0;border-radius:5px;background:#6c3;color:#fff;font-size:22px;}
#animationTipBox .redOkoButton{background:#4184f3}
.loaddh {position:relative;width:80px;height:80px;border-radius:50px;border:4px solid #fff;margin:15px auto 25px auto;top:10px}
.cirBox1 > div, .cirBox2 > div, .cirBox3 > div {
  width: 16px;
  height: 16px;
  background-color:#bbb;
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.loaddh .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.cirBox2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
.cirBox3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
.cir1 { top: 0; left: 0; }
.cir2 { top: 0; right: 0; }
.cir3 { right: 0; bottom: 0; }
.cir4 { left: 0; bottom: 0; }
.cirBox2 .cir1 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.cirBox3 .cir1 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.cirBox1 .cir2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.cirBox2 .cir2 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.cirBox3 .cir2 {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.cirBox1 .cir3 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.cirBox2 .cir3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.cirBox3 .cir3 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.cirBox1 .cir4 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.cirBox2 .cir4 {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.cirBox3 .cir4 {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% {-webkit-transform: scale(0.0)}
40% { -webkit-transform: scale(1.0)}
}

@keyframes bouncedelay {
0%, 80%, 100%{transform: scale(0.0);-webkit-transform: scale(0.0);}
40%{transform: scale(1.0);-webkit-transform: scale(1.0);}
}