/*@import url(http://fonts.useso.com/css?family=Source+Sans+Pro:200,300);*/
* { box-sizing: border-box; margin: 0; padding: 0; }
input { border: none; outline: none; }
body { font-family: 'Microsoft YaHei', sans-serif; color: white; overflow: hidden; }
 body ::-webkit-input-placeholder { /* WebKit browsers */
font-family: 'Microsoft YaHei', sans-serif;
color: white;
}
 body :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-family: 'Microsoft YaHei', sans-serif;
color: white;
opacity: 1;
}
 body ::-moz-placeholder { /* Mozilla Firefox 19+ */
font-family: 'Microsoft YaHei', sans-serif;
color: white;
opacity: 1;
}
 body :-ms-input-placeholder { /* Internet Explorer 10+ */
font-family: 'Microsoft YaHei', sans-serif;
color: white;
}
a{line-height: 21px;font-size: 14px;cursor: pointer;text-decoration: none;color: #fff;}
:-moz-placeholder {
color: #FFF;
opacity: 0.6;
}
/* Mozilla Firefox 4 to 18 */
::-moz-placeholder {
color: #FFF;
opacity: 0.6;
}
/* Mozilla Firefox 19+ */
input:-ms-input-placeholder {
color: #FFF;
opacity: 0.6;
}
input::-webkit-input-placeholder {
color: #FFF;
opacity: 0.6;
}
.wrapper { background: #00DBDE; background: -webkit-linear-gradient(top left, #00dbde 25%, #fc00ff 77%); background: linear-gradient(to bottom right, #00dbde 25%, #fc00ff 75%); opacity: 0.99; position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; }
.wrapper.form-success .container h1 { -webkit-transform: translateY(85px); -ms-transform: translateY(85px); transform: translateY(85px); }
.container { max-width: 600px; margin: 0 auto; padding: 80px 0; height: 400px; text-align: center; }
.container h1 { font-size: 40px; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; font-weight: 200; }
form { padding: 20px 0; position: relative; z-index: 2; }
form input { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border: 1px solid rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.2); width: 250px; border-radius: 3px; padding: 10px 15px; margin: 0 auto 10px auto; display: block;  font-size: 18px; color: white; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; font-weight: 300; }
form input:hover { background-color: rgba(255, 255, 255, 0.4); }
form input:focus { background-color: white; width: 300px; color: #53e3a6; }
form button { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; background-color: white; border: 0; padding: 10px 15px; color: #53e3a6; border-radius: 3px; width: 250px; cursor: pointer; font-size: 18px; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; }
form button:hover { background-color: #f5f7f9; }
.bg-bubbles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.bg-bubbles li { position: absolute; list-style: none; display: block; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.15); bottom: -160px; -webkit-animation: square 66s infinite; animation: square 66s infinite; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; }
.bg-bubbles li:nth-child(1) { left: 10%; }
.bg-bubbles li:nth-child(2) { left: 20%; width: 80px; height: 80px; -webkit-animation-delay: 16s; animation-delay: 16s; -webkit-animation-duration: 17s; animation-duration: 17s; }
.bg-bubbles li:nth-child(3) { left: 25%; -webkit-animation-delay: 18s; animation-delay: 18s; }
.bg-bubbles li:nth-child(4) { left: 40%; 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%; }
.bg-bubbles li:nth-child(6) { left: 80%; width: 120px; height: 120px; -webkit-animation-delay: 16s; animation-delay: 16s; background-color: rgba(255, 255, 255, 0.2); }
.bg-bubbles li:nth-child(7) { left: 32%; width: 160px; height: 160px; -webkit-animation-delay: 16s; animation-delay: 16s; }
.bg-bubbles li:nth-child(8) { left: 55%; 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%; width: 10px; height: 10px; -webkit-animation-delay: 16s; animation-delay: 16s; -webkit-animation-duration: 40s; animation-duration: 40s; background-color: rgba(255, 255, 255, 0.3); }
.bg-bubbles li:nth-child(10) { left: 90%; width: 160px; height: 160px; -webkit-animation-delay: 11s; animation-delay: 11s; }
 @-webkit-keyframes square {  0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
 100% {
-webkit-transform: translateY(-1600px) rotate(600deg);
transform: translateY(-1600px) rotate(600deg);
}
}
 @keyframes square {  0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
 100% {
-webkit-transform: translateY(-1600px) rotate(600deg);
transform: translateY(-1600px) rotate(600deg);
}
}
/* ��¼ע���� */
.wrapper .wrap-frame { width: 500px; margin: 0 auto; margin-top: 15%; text-align: center; }
/*.wrapper .wrap-frame img { width: 100%; }*/
.wrapper .wrap-frame .title-label { margin-top: 6px; font-size: 20px; cursor: default; }
.wrapper .wrap-frame .frame-input { width: 351px; margin: 0 auto; margin-top: 52px; }
.wrapper .wrap-frame .input-deta { width: 100%; height: 48px; margin-top: 22px; background-color: rgba(255,255,255,.12); }
.wrapper .wrap-frame .block-icon { width: 57px; float: left; }
.wrapper .wrap-frame .block-icon.user img { width: 22px; margin-top: 13px; }
.wrapper .wrap-frame .block-icon.pwd img { width: 19px; margin-top: 13px; }
.wrapper .wrap-frame .part-line { width: 1px; height: 22px; margin-top: 13px; background-color: #FFF; opacity: .3; float: left; }
.wrapper .wrap-frame .input-box { border: 0px;width: 293px; padding: 0 22px; line-height: 48px; background-color: transparent; color: #FFF; font-family: 'Microsoft YaHei', sans-serif; font-size: 14px; }
.wrapper .wrap-frame .frame-status { width: 351px; height: 21px; line-height: 21px; margin: 0 auto; margin-top: 16px; font-size: 14px; cursor: pointer; }
.wrapper .wrap-frame .status-info.forget { height: 21px; float: left; }
.wrapper .wrap-frame .block-icon.quest { width: 19px; float: left; margin: 2px 6px 0 10px; }
.wrapper .wrap-frame .info-label { float: left; }
.wrapper .wrap-frame .status-info.remem { float: right; }
.wrapper .wrap-frame .info-choose { width: 18px; height: 18px; margin: 2px 6px 0 0; border: 2px solid #FFF; border-radius: 180px; float: right; cursor: default; transition: all ease-out 0.2s; }
.wrapper .wrap-frame .info-choose.check { border: 2px solid #FFF; background-color: #ED214C; }
.wrapper .wrap-frame .status-info.remem .info-label { margin-right: 10px; float: right; }
.wrapper .wrap-frame .block-btn { border: 0px;width: 351px; line-height: 55px; margin: 0 auto; margin-top: 45px; background-color: #ED214C; border-radius: 6px; box-shadow: 0 0 6px rgba(237,33,76,0.66); transition: all linear 0.2s; cursor: pointer; color: #fff; text-align: center; font-size: 16px }
.wrapper .wrap-frame .block-btn:hover { box-shadow: 0 0 22px rgba(237,33,76,0.66); }
.block-warn { width: 351px; line-height: 40px; margin: 0 auto; margin-top: 30px; background-color: rgba(0,0,0,0.3); font-size: 14px; border-radius: 4px }