html { height: 100%;}
body.signin { height: auto; background: url(../images/bg.jpg) no-repeat center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: #848484 }
.signinpanel { max-width: 500px; margin: 5% auto 0 }
.signinpanel h1 { text-align: center; color: #fff; }
.signinpanel h1 { font: bold 36px Cambria, "Hoefler Text", '微软雅黑';  text-shadow: 1px 1px 0 rgba(255,255,255,0.4); }
.signinpanel h2,.signup-footer {
    color: #cecece;
    text-align: center;
    margin-bottom: 40px;
}
.signinpanel .logopanel { float: none; width: auto; padding: 0; background: 0 0 }
.signinpanel .signin-info ul { list-style: none; padding: 0; margin: 20px 0 }
.signinpanel li { list-style: none; width: 100%; display: inline-block; position: relative; }
.signinpanel li div { clear: both }
.signinpanel li .Validform_checktip { margin-left: 0; height: 16px; }
.signinpanel .form-control { display: block; }
.signinpanel .fa { color: #333; position: absolute; right: 15px; top: 10px; }
.signinpanel .code { width: 50%; float: left }
.signinpanel .imgcode { position: absolute; right: 0; top: 0px; }
.signinpanel .button{ width: 95px; padding: 6px 0; border: 0px;    background-color: #1ab394;color: #FFF;}
.signinpanel .btn { margin-top: 15px; padding: 6px; }
.signinpanel form { background: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,.3); -moz-box-shadow: 0 3px 0 rgba(12,12,12,.03); -webkit-box-shadow: 0 3px 0 rgba(12,12,12,.03); box-shadow: 0 3px 0 rgba(12,12,12,.03); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 5px; padding: 30px }
.signup-footer { border-top: solid 1px rgba(255,255,255,.3); margin: 20px 0; padding-top: 15px }
.bg-bubbles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.bg-bubbles li { position: absolute; list-style: none; display: block; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.15); -webkit-animation: square 25s infinite; animation: square 25s infinite; -webkit-transition-timing-function: linear; transition-timing-function: linear; }
.bg-bubbles li:nth-child(1) { left: 10%; bottom: 0px; }
.bg-bubbles li:nth-child(2) { left: 20%; bottom: 20px; width: 80px; height: 80px; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 17s; animation-duration: 17s; }
.bg-bubbles li:nth-child(3) { left: 25%; bottom: 30px; -webkit-animation-delay: 4s; animation-delay: 4s; }
.bg-bubbles li:nth-child(4) { left: 40%; bottom: 40px; width: 60px; height: 60px; -webkit-animation-duration: 22s; animation-duration: 22s; background-color: rgba(255, 255, 255, 0.25); }
.bg-bubbles li:nth-child(5) { left: 70%; bottom: 50px; }
.bg-bubbles li:nth-child(6) { left: 80%; bottom: 60px; width: 120px; height: 120px; -webkit-animation-delay: 3s; animation-delay: 3s; background-color: rgba(255, 255, 255, 0.2); }
.bg-bubbles li:nth-child(7) { left: 32%; bottom: 70px; width: 160px; height: 160px; -webkit-animation-delay: 7s; animation-delay: 7s; }
.bg-bubbles li:nth-child(8) { left: 55%; bottom: 80px; width: 20px; height: 20px; -webkit-animation-delay: 15s; animation-delay: 15s; -webkit-animation-duration: 40s; animation-duration: 40s; }
.bg-bubbles li:nth-child(9) { left: 25%; bottom: 90px; width: 10px; height: 10px; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 40s; animation-duration: 40s; background-color: rgba(255, 255, 255, 0.3); }
.bg-bubbles li:nth-child(10) { left: 90%; bottom: 100px; width: 160px; height: 160px; -webkit-animation-delay: 11s; animation-delay: 11s; }
.other-info h3{border-bottom: solid 1px rgba(255,255,255,.3); padding: 10px}
.other-info .logopanel a{ width: 30%; display: inline-block; height: 50px; line-height: 50px; text-align: center}
.other-info .logopanel a img{ height: 30px; padding-right: 5px;}
@-webkit-keyframes square {
 0% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
 100% {
 -webkit-transform: translateY(-700px) rotate(600deg);
 transform: translateY(-700px) rotate(600deg);
}
}
@keyframes square {
 0% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
 100% {
 -webkit-transform: translateY(-700px) rotate(600deg);
 transform: translateY(-700px) rotate(600deg);
}
}

@media screen and (max-width:768px) {
.signinpanel, .signuppanel { margin: 0 auto; width: 350px; padding: 20px }
.signinpanel form { margin-top: 20px }
.signup-footer, .signuppanel .form-control { margin-bottom: 10px }
.signup-footer .pull-left, .signup-footer .pull-right { float: none!important; text-align: center }
.signinpanel .signin-info ul { display: none }
.bg-bubbles { display: none }
}

@media screen and (max-width:320px) {
.signinpanel, .signuppanel { margin: 0px; width: auto }
}