html { height: 100%;}

body.signin { height: auto; background: #f0f0f0; -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 }

.navbar{background:#c71602;margin-bottom: 0;}

.navbar .ico-home,.navbar .ico-nav,.navbar .ico-back{float:left;width:20%;height:100px;overflow:hidden;text-indent:-9999em;background:url(../images/ico-home.png) center center no-repeat;}

.navbar .ico-nav{float:right;background:url(../images/user1.png) center center no-repeat;}

.navbar #title{float:left;width:58%;height:100px;margin:0 1%;font-size:3.142em;font-weight:normal;color:#fff;line-height:100px;text-align:center;overflow:hidden;-webkit-transition:font-size 0.2s ease-out; -o-transition:font-size 0.2s ease-out; -moz-transition:font-size 0.2s ease-out;transition:font-size 0.2s ease-out;}

.navbar .ico-back{float:left;background:url(../images/back.png) no-repeat center;}

.copyright{ margin-top: 20px; text-align:center;margin:1em 0 4em;font-size:1em; }

    .copyright p{ height: 22px; line-height: 22px;}

    .copyright p a {color: #0970c8;text-decoration: none;}

    .copyright{font-size:0.8em;}

.signinpanel h1,  .signinpanel h5, .signup-footer { text-align: center; color: #efefef; }

.signinpanel h1 { font: bold 36px Cambria, "Hoefler Text", '微软雅黑'; margin-bottom: 50px; text-shadow: 1px 1px 0 rgba(255,255,255,0.4); }

.signinpanel h4{color: #71564b; }

.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: #fff; 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: 3px; 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 }

    .navbar .ico-home,.navbar .ico-nav,.navbar .ico-back{height:50px;background-size:29.5px 24.5px;}

    .navbar .ico-nav,.navbar .ico-back{background-size:24.5px 21.5px;}

    .navbar #title{height:50px;font-size:1.271em;line-height:50px;} 

    .header .description{height:29px;font-size:0.9em;line-height:29px;} 

    .header .description span{padding:2px 5px;color:#ffea00;border-radius:1em;} 

}



@media screen and (max-width:320px) {

.signinpanel, .signuppanel { margin: 0px; width: auto }

}