*{-webkit-transition: all 0.3s;-o-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;box-sizing: border-box;}
*{ font-weight:100;} 

body {background:#CCCCCC; margin:0px ; padding:0px;font-family:"微軟正黑體",Arial;}
img{  border:0px;}
a {color: #000000;LETTER-SPACING: 0px; TEXT-DECORATION:none}
a:link {color: #000000;}
a:visited {color: #000000;}
a:hover {TEXT-DECORATION:none;}
a:active {color: #000000;}


body{ background:#BA9E78;background-image:linear-gradient( 45deg ,#adcfff, #c9a572, #ff9e9e); padding-bottom:60px}


.login-logo { display:block; text-align:center; margin:40px auto 20px auto ;}

.login-logo a{ display:inline-block; text-align: center; display: flex; align-items: center; justify-content: center }
 
.login-logo-image{ width: 60px; opacity:0.8; }
.login-logo-title{ margin-left: 10px;   opacity:0.8; }

.login-logo a:hover img{ opacity:0.6;  }

.login{ width:100%; overflow:hidden; text-align:center} 
.login form{ width:100%; background:#FFFFFF; color:#333333; padding:0px; border-radius:10px; ; padding:10px 20px}
.login-title{   letter-spacing:1px;font-size:14pt; font-weight:bold;padding:15px 0px 10px 0px; color:#666666; display:none;}

.input_group{ margin-bottom:00px; width:100%; border-bottom:1px solid #CCCCCC;  ; margin:8px auto ; position:relative;   }
.input_group:hover .icon{ color:#666666}
.input_group .icon{ width:45px; float:left; text-align:center; height:40px; display: block; border:0px;padding:0px;  margin:0px; border-right:0px solid #f1f1f1 ; color:#CCCCCC; font-size:16pt; padding:5px 0px 0px 0px }
.input_group .icon .material-icons{ padding-top:2px;}
.input_group .input{ padding-left:45px;float:left; margin-left:-45px; padding-top:5px;   width:99%; position:relative}
.input_group .input *{  border:0px; padding:5px 5px; font-size:12pt;}
.input_group .p2{ margin-left:-5px; }
 
 
.jn-rule span{ text-align:left; display:block; font-size:10pt; padding:0px 5px }

.login-fb{ display:inline-block; padding:6px 7px; width:30px; height:30px; border-radius:100px; text-align:center; background:#4267B2; color:#FFFFFF!important}
.login-fb:hover{ background:#34528d; color:#FFFFFF!important}

.verifyCode{ position: absolute; right: 0px; top: 3px; border: 0px solid #CC0000 }
.send{ cursor: pointer; background: seagreen; color: #FFFFFF;border:0px}

.login-send{ display:block; width:100%; margin: 10px auto;border-radius:5px; padding:10px; font-size:12pt; background:#333333; color:#FFFFFF; cursor:pointer; letter-spacing:5px}

.login .lb-divider{ margin:10px 10px;color:#ffffff;   opacity:0.8}
.login .lb-divider *{ background:#FFFFFF}

.login-link { margin-top:10px;}
.login-link a{ margin:5px; font-size:11pt; font-weight:bold; color:#FFFFFF}


.login-phone { display:none;}
        
.login-phone span.input{display: flex; align-items:center; height:100% }
.login-phone span.input i{ width:20px;padding:0px}
.login-phone span.input .login-phone-show {width:auto;  min-width:50px;  padding:0px; height:auto; text-align:left;color:#999999}
.login-phone span.input input{  padding:0px; height:30px!important ; flex:1 }
.login-phone-select-on{ cursor:pointer}
.login-phone-select{position:absolute;left:0px; top:40px; z-index:1; display:none; width:100%;overflow-y:auto; max-height:160px;  z-index:5; background:#FFFFFF; padding:5px 0px;border:1px solid #CCCCCC}
.login-phone-select li{ display:block; width:100%; text-align:left; padding:5px 5px 5px 45px; cursor:pointer}
.login-phone-select li.on{ color:#F45F5B}
.login-phone-select li:hover{ background:#F45F5B; color:#FFFFFF}

.errortip{ display:block; position:absolute; float:left;  margin:-8px 0px 0px 50px; z-index:1  ;  width:auto; ; font-size:9pt; color: #F45F5B    ; }

.join .login-phone{ display:block}
#Loading{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
            align-items: center;
    -webkit-justify-content: center;
            justify-content: center;
}
#Loading {cursor: pointer;  position:absolute; width: 100%; height: 100%;left:0; top:0;  z-index: 11; background: rgba(0,0,0,0.5);   }
#Loading img{ display: block; width: 30%; max-width: 50px;}

.password-visible{padding: 5px 10px; cursor:pointer; color:#999999}
.password-visible i{}


/*login-tip*/
.login-tip{width:100%; background:#ac3232; color:#ffffff; margin-bottom: 5px; padding:0px; border-radius:10px; ; padding:10px 20px}

.join-rule{}
.join-rule a{ color: #009966; font-weight: bold;}

/*member-verify*/
.member-verify{width:100%; background:#FFFFFF; color:#333333; padding:0px; border-radius:10px; ; padding:30px  10px; text-align: center}
.member-verify i{ display: block; font-size: 80px; margin-bottom: -10px; color: #BA9E78}
.member-verify h3{ padding: 20px 10px; font-weight: bold; font-size: 12pt}