*{-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( 0deg , #F00 50%, #C00 50%);background-image:linear-gradient( 0deg , #300 , #F00 ); padding-bottom:60px}  */
body{ background:#F1F1F1; padding-bottom:60px} 

.login-logo { display:flex; align-items: center; justify-content: center; margin:40px auto 20px auto ;}

.login-logo a{  display: block; font-size: 20PT;  }
 
.login-logo-image{ min-width: 140px; max-width: 200px;   }
.login-logo-image:hover  { opacity:0.9;  }

.login-logo-to-icon{font-size:30px!important ;opacity:0.5!important}
.login-logo-word{ font-weight: bolder; font-size: 16pt;}

.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; display: flex; align-items: center; }
.input_group:hover .icon{ color:#666666}
.input_group .icon{ width:45px;   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{     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:#333333}

.my-select{cursor:pointer; position: relative; display: flex; align-items: center; flex-wrap: wrap  ;} 
.my-select .my-select-show{ padding: 0px;}
.my-select i{  }
.my-select ul{ display:none ;width: 100%;position:absolute;left:0px; top:100%; z-index:1;overflow-y:auto; max-height:160px;  z-index:5; background:#FFFFFF; padding:5px 0px;border:1px solid #CCCCCC!important }
.my-select ul li{ display:block; width:100%; text-align:left; padding:5px 5px 5px 45px; cursor:pointer}
.my-select ul li.on{ color:#F45F5B}
.my-select ul li:hover{ background:#F45F5B; 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:-40px 0px 0px 45px; 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}


.login-auth{ text-align: center; padding: 100px 0px 50px 0px;  }
.login-auth form{ width:100%; background:#FFFFFF; color:#333333; padding:0px; border-radius:10px; ; padding:30px 20px}
.login-auth-cosite-logo{  width: 50px; opacity: 0.3; margin-top: 20px;;}
.login-auth-cosite-logo:hover{  opacity: 0.4}
.login-auth-send{ display:block; width:100%; margin: 10px auto;border-radius:5px; padding:10px; font-size:12pt; background:#333333; color:#FFFFFF; cursor:pointer; letter-spacing:1px; text-align: center;}

.login-auth-brand-logo{ width:30%; max-width: 100px;}
.login-auth-brand-name{ display: inline-block; border: 1px solid #ddd; padding: 10px; font-weight: bolder;}

.login-auth-note{ padding: 50px 10px; font-size: 12pt; line-height: 150%;}
.login-auth-note h3{ padding: 10px 10px;  font-size: 14pt;  font-weight: bolder;}
.login-auth-note b{font-weight: bolder;}



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

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