@charset "utf-8";
/* CSS Document */
/***********************CSS RESET*********************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,   
form,fieldset,input,textarea,p,blockquote,th,td {   
    padding: 0;   
    margin: 0;
	font-family:Microsoft Yahei;
}   
table {   
    border-collapse: collapse;   
    border-spacing: 0;   
}   
fieldset,img {   
    border: 0;   
} 


body{ background:url(../images/bg_login.png) no-repeat fixed left top / 100% 100%; overflow:hidden; }

.login_content{ position:absolute; top:50%; left:50%; margin-left:-275px; margin-top:-300px; width:550px; height:360px; padding-top:40px; background:url(../images/form_bg.png) repeat; border-radius:10px; text-align:center; }
.title{ font-size:28px; text-indent:80px; font-weight:normal; color:#ddd; text-shadow: 1px 1px 2px #0099FF; line-height:65px; position:relative; width:auto; display:inline-block; }
.logo{ width:60px; height:60px; background:url(../images/logo.png) no-repeat left top / 100% 100%; display:inline-block; position:absolute; left:0; top:0; }

.login_box{ width:auto; display:inline-block; }
.input{ padding: 20px 0; color:#fff; text-shadow: 1px 1px 1px #0099FF; }
.input span{ display:inline-block; width:70px;  }
.input input{ border:1px solid #fff; margin-left:10px; background: none; text-shadow: 1px 1px 1px #0099FF; width:250px; height:35px; font-size:16px; color:#fff; text-indent:10px; border-radius:5px; box-shadow: 0 0 5px #0099FF inset; outline:none; }
.input input[type="password"]{ font-size:22px; }
.input input:focus{ box-shadow: -1px -1px 10px #0099FF; 
-webkit-animation: animate-bg 5s linear 100;
-moz-animation: animate-bg 5s linear 100;
-ms-animation: animate-bg 5s linear 100;
-o-animation: animate-bg 5s linear 100;
animation: animate-bg 5s linear 100;
}

@-webkit-keyframes animate-bg {
  from {
    box-shadow: -1px -1px 10px #0099FF; 
  }
  to {
    box-shadow: -1px -1px 10px #FF00FF; 
  }
}
@-moz-keyframes animate-bg {
  from {
    box-shadow: -1px -1px 10px #0099FF; 
  }
  to {
    box-shadow: -1px -1px 10px #FF00FF; 
  }
}
@-ms-keyframes animate-bg {
  from {
    box-shadow: -1px -1px 10px #0099FF; 
  }
  to {
    box-shadow: -1px -1px 10px #FF00FF; 
  }
}
@-o-keyframes animate-bg {
  from {
    box-shadow: -1px -1px 10px #0099FF; 
  }
  to {
    box-shadow: -1px -1px 10px #FF00FF; 
  }
}

.login_box p{ margin-top:15px; padding-left:55px; }
.login_btn{ width:110px; height:35px; margin-left:25px; line-height:35px; border:none; cursor:pointer; background:url(../images/login_btn.png) no-repeat; font-size:15px; color:#fff; }
.footer{ width:600px; margin:0 auto; }
.footer p{ text-align:center; font-size:13px; color:#ddd; text-shadow: 1px 1px 1px #666; }

.loading_up{ height:50%; width:100%; position:absolute; top:0; left:0; background:#000; z-index:99; /*background:url(../images/login_up.jpg) no-repeat left top / 100% 100%; */}
.loading{ width:100%; height:50%; position:absolute; bottom:0; left:0; background:#000; z-index:99; /*background:url(../images/login.jpg) no-repeat left top / 100% 100%; */}
.progress-bar {
background-color: #1a1a1a;
height: 25px;
padding: 5px;
width: 350px;
position:absolute;
top:0;
left:50%;
margin-left:-175px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}

.progress-bar span {
display: inline-block;
height: 25px;
width: 0px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-ms-transition: width .4s ease-in-out;
-o-transition: width .4s ease-in-out;
transition: width .4s ease-in-out;
}


.blue span {
background-color: #34c2e3;
}


.stripes span {
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
background-size: 30px 30px;
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);

-webkit-animation: animate-stripes 1s linear infinite;
-moz-animation: animate-stripes 1s linear infinite;
}

@-webkit-keyframes animate-stripes {
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

@-moz-keyframes animate-stripes {
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}