body { background-color:#f3f5f5; }
#login_container { position:fixed;left:0;top:0;width:100%;height:100%;text-align:center; }
#login_container > div { vertical-align:middle; }
#login_logo img { width:100%;max-width:120px; }
.login_window { width:100%;max-width:400px;margin:30px auto 20px;border-radius:20px;
background-color:#fff;padding:40px;box-sizing:border-box; }

#login1_title { font-size:16pt;font-weight:600;text-align:right;margin-bottom:5px;letter-spacing:-0.3pt; }
#login1_desc { text-align:right;color:#888;line-height:25px;font-size:10pt;margin-bottom:30px; }
#login1_input { position:relative; }
#login1_input input { width:100%;height:50px;border-radius:10px;border:2px solid #ddd;direction:ltr;
box-sizing:border-box;padding:0px 15px;text-align:left;font-size:12pt;outline-style:none;padding-left:55px; }
#login1_input input:focus { border-color:#000; }
#login1_input i { display:block;width:24px;height:24px;position:absolute;top:13px;left:15px;background-size:100%;
background-image:url('../image/login_email.png'); }

.button2_eff { background-color:#57c5c6;color:#fff;position:relative;z-index:0;overflow:hidden; }
.button2_eff > span { position:relative;z-index:+2; }
.button2_eff:before { content:"";display:block;z-index:+1;background-color:#42a1a2;z-index:+1;border-radius:10px;opacity:0;
position:absolute;left:50%;top:50%;width:0;height:0;transition:200ms;-webkit-transition:200ms;-moz-transition:200ms; }
.button2_eff:hover:before { width:102%;height:102%;left:-1%;top:-1%;opacity:1; }
#login_button { height:50px;line-height:50px;display:block;margin-top:18px;font-size:12pt;border-radius:10px;
cursor:pointer;font-weight:600; }

#login_footer { text-align:center;font-size:10pt;font-weight:600; }
#login_footer a { opacity:0.3; }
#login_footer a:hover { opacity:1; }

#login_step1 { display:block; }
#login_step2 { display:none; }

#login2_title { text-align:right;margin-bottom:5px; }
#login2_title span { font-size:14pt;font-weight:600;letter-spacing:-0.3pt;cursor:pointer; }
#login2_title span:before { content:"";display:inline-block;vertical-align:middle;width:18px;height:18px;background-size:100%;
margin-left:8px;background-image:url('../image/back.png'); }
#login2_desc { text-align:right;color:#888;line-height:25px;font-size:10pt;margin-bottom:30px; }
#login2_desc span { margin:0px 5px;color:#000;display:inline; }
#login2_input { text-align:center;direction:ltr; }
#login2_input input { width:50px;margin:0px 3px;height:50px;border-radius:10px;border:2px solid #ddd;
font-size:18pt;text-align:center;direction:ltr;box-sizing:border-box; }
#login2_timer { text-align:center;margin-top:20px;height:25px;line-height:25px;font-weight:600; }
#login2_timer > div:nth-child(1) {  }
#login2_timer > div:nth-child(2) { display:none; }
#login2_timer > div:nth-child(2) span { cursor:pointer; }

@media only screen and (max-width:500px) {
    body { background-color:#fff; }
    #login_footer { position:fixed;left:0;bottom:0;width:100%;padding:10px 0px;
    background-color:#fff;border-top:2px solid #eee; }
}
@media only screen and (max-height:470px) {
    body { background-color:#fff; }
    #login_footer { position:absolute;left:0;bottom:0;width:100%;padding:10px 0px;
    background-color:#fff;border-top:2px solid #eee; }
    #login_container { display:block;overflow-y:auto; }
    #login_container > div { display:block;margin:40px auto 0px;position:relative;min-height:430px; }
}