html,body{ background:#252c36;}
.login{ position:fixed; top:0; right:0; bottom:0; left:0; margin:auto; width:870px; height:465px; margin-top:-50px;
}
/*左侧logo*/
.logobox{ 
position:absolute; 
width:443px; 
height:465px; 
top:0;
left:0;
-webkit-animation:logobox 1s ease; 
-moz-animation:logobox 1s ease ; 
-ms-animation:logobox 1s ease ; 
-o-animation:logobox 1s ease ; 
animation:logobox 1s ease ;
}
.logobox_bg{
position:absolute;
width:443px;
height:465px;
top:0;
left:0;
background:url(../images/light_blue.png) no-repeat top left;
filter:alpha(opacity=0);-moz-opacity:0;opacity:0;
-webkit-animation:logobox_bg 1s 1s linear;
-moz-animation:logobox_bg 1s 1s linear; 
-ms-animation:logobox_bg 1s 1s linear;
-o-animation:logobox_bg 1s 1s linear;
animation:logobox_bg 1s 1s linear;
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
}
.logobox .logoimg{ width:155px; height:155px; margin:0 auto; margin-top:230px; position:relative;}
.logobox .logoimg .light{ position:absolute; top:0; left:0; width:155px; height:155px; background:url(../images/light.png) no-repeat; overflow:hidden; 
background-position:0 0;
background:none\9;
border-radius:50%;
-webkit-animation:light 4s 2s ease infinite;
-moz-animation:light 4s 2s ease infinite; 
-ms-animation:light 4s 2s ease infinite;
-o-animation:light 4s 2s ease infinite;
animation:light 4s 2s ease infinite ;
}
.logobox h1{ text-align:center; color:white; font-weight:400; font-size:18px; margin-top:15px;}


/*右侧输入框*/
.userinput{ 
position:absolute; 
bottom:32px; 
right:100px; 
width:340px; 
height:178px; 
background:#e6e9ee; 
border-radius:8px; 
padding:25px 30px;
filter:alpha(opacity=0);-moz-opacity:0;opacity:0;
filter:alpha(opacity=100)\9;
-webkit-animation:userinput 1s 0.8s ease; 
-moz-animation:userinput 1s 0.8s ease ; 
-ms-animation:userinput 1s 0.8s ease ; 
-o-animation:userinput 1s 0.8s ease ; 
animation:userinput 1s 0.8s ease ;
-webkit-animation-fill-mode:both; 
-moz-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
-o-animation-fill-mode:both; 
animation-fill-mode:both;
}
/*箭头*/
.userinput .left_jt{
position:absolute;
left:-39px;
top:50px;
width:0;
height:0;
overflow:hidden;
border-color: transparent #e6e9ee transparent transparent;
border-style: dashed solid dashed dashed;
border-width:20px;
}
/*输入框*/
.userinput .inputbox{ margin-bottom:29px; position:relative;}
.userinput .inputbox .error{ position:absolute; top:45px; left:5px; font-size:12px; color:#cc0000; display:block;}
.userinput .inputbox .success{ position:absolute; top:45px; left:5px; font-size:12px; color:#00ab1c; display:block;}
.userinput .input{ width:100%; height:38px; font-size:14px; font-weight:400; line-height:38px\9; border:1px solid #ddd; color:#333; text-indent:8px; border-radius:4px; outline:none;}
.userinput .span{ display:block; position:absolute; right:10px; top:50%; margin-top:-11px; width:22px; height:22px; overflow:hidden;background:#ffffff url(../images/inputbg.png) no-repeat; transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s;  -moz-transition:all 0.3s ease 0s;  -o-transition:all 0.3s ease 0s;  -ms-transition:all 0.3s ease 0s;}
.userinput .span.zh{ background-position:0 0;}
.userinput .span.mm{ background-position:-22px 0;}
.userinput .input:focus + .span.zh{ background-position:0 -22px;}
.userinput .input:focus + .span.mm{ background-position:-22px -22px;}
.userinput .input:focus{border:1px solid #186093; box-shadow:0 0 3px 0 #3889c3;}
.userinput .input:focus{border:1px solid #186093;}
.userinput .button{ width:100%; height:38px; text-align:center; display:block;font-family:'Microsoft YaHei','SimHei'; font-size:20px; font-weight:400; color:white; line-height:38px\9; border:none; background:#186093;border-radius:4px; cursor:pointer;}
.red{ position:absolute; left:-10px; top:15px; color:red; font-style:normal;}



/*动画事件*/
@-webkit-keyframes logobox{0%{ opacity: 0; left:166px; top:50px; }50%{  opacity: .2; left:166px; top:0; }100%{  opacity: 1; left:0; top:0;}}
@-moz-keyframes logobox{0%{ opacity: 0; left:166px; top:50px; }50%{  opacity: .2; left:166px; top:0; }100%{  opacity: 1; left:0; top:0;}}
@-ms-keyframes logobox{0%{ opacity: 0; left:166px; top:50px; }50%{  opacity: .2; left:166px; top:0; }100%{  opacity: 1; left:0; top:0;}}
@-o-keyframes logobox{0%{ opacity: 0; left:166px; top:50px; }50%{  opacity: .2; left:166px; top:0; }100%{  opacity: 1; left:0; top:0;}}
@keyframes logobox{0%{ opacity: 0; left:166px; top:50px; }50%{  opacity: .2; left:166px; top:0; }100%{  opacity: 1; left:0; top:0;}}
	
@-webkit-keyframes logobox_bg{from{filter:alpha(opacity=0); opacity: 0;}to{filter:alpha(opacity=100);  opacity: 1;}}
@-moz-keyframes logobox_bg{from{filter:alpha(opacity=0); opacity: 0;}to{filter:alpha(opacity=100);   opacity: 1;}}
@-ms-keyframes logobox_bg{from{filter:alpha(opacity=0); opacity: 0;}to{filter:alpha(opacity=100);   opacity: 1;}}
@-o-keyframes logobox_bg{from{filter:alpha(opacity=0); opacity: 0;}to{filter:alpha(opacity=100);   opacity: 1;}}
@keyframes logobox_bg{from{filter:alpha(opacity=0); opacity: 0;}to{filter:alpha(opacity=100);   opacity: 1;}}
	
@-webkit-keyframes userinput{from{ right:0; filter:alpha(opacity=0); opacity: 0;}to{ right:100px; filter:alpha(opacity=100);  opacity: 1;}}
@-moz-keyframes userinput{from{ right:0; filter:alpha(opacity=0); opacity: 0;}to{ right:100px; filter:alpha(opacity=100);   opacity: 1;}}
@-ms-keyframes userinput{from{ right:0; filter:alpha(opacity=0); opacity: 0;}to{ right:100px; filter:alpha(opacity=100);   opacity: 1;}}
@-o-keyframes userinput{from{ right:0; filter:alpha(opacity=0); opacity: 0;}to{ right:100px; filter:alpha(opacity=100);   opacity: 1;}}
@keyframes userinput{from{ right:0; filter:alpha(opacity=0); opacity: 0;}to{ right:100px; filter:alpha(opacity=100);   opacity: 1;}}
	
@-webkit-keyframes light{from{ background-position:-388px -388px}to{ background-position:388px 388px}}
@-moz-keyframes light{from{ background-position:-388px -388px}to{ background-position:388px 388px}}
@-ms-keyframes light{from{ background-position:-388px -388px}to{ background-position:388px 388px}}
@-o-keyframes light{from{ background-position:-388px -388px}to{ background-position:388px 388px}}
@keyframes light{from{ background-position:-388px -388px}to{ background-position:388px 388px}}