/* default frame setting */
*{ margin: 0; padding: 0; box-sizing:border-box;}
a, img{ border: none; text-decoration:none;}
html{font-family:"微軟正黑體", Arial, sans-serif;/*自動找手機裡的黑體字*/
	-webkit-text-size-adjust:none;/*修正iphone旋轉後文字不要放大*/}
ul, li{list-style: none; margin: 0;}
body{position: relative;}
.clearfix{clear: both;}
.bg-icon{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url(../images/bg-hiring-icon-bk.svg); opacity: .055; background-size: 30em; z-index: -1;}

#NewLoginBox {height: 420px;}
.NewLoginMain{max-width: 990px; margin:0 auto; padding:20px 0;}
.NewLoginMain .breadcrumb{font-size: 13px; color: #fff; margin:10px 0 30px; position: relative;}
.NewLoginMain .breadcrumb a{color: #fff; padding: 0 3px; text-decoration: none;}
.NewLoginMain .breadcrumb a::after{content: "\f105"; padding:0 3px 0 8px; font: normal normal normal 15px/1 FontAwesome;}

.NewLoginMain .Loginitem{width: 440px; background: #fff; border-radius: 5px; box-shadow: 0 0 5px #c5c5c5; position:relative; margin: auto;}
.NewLoginMain .Loginitem .logincontent{width:100%; padding:20px 10px 0px; float:left;}
.NewLoginMain .Loginitem .logincontent h2{text-align: center; color: #6C757D; font-size: 22px; font-weight:bold; letter-spacing:1; margin-bottom:10px;}
.NewLoginMain .Loginitem .logincontent h2 img{width: 117px; vertical-align:text-top; margin-right:6px;}
.NewLoginMain .Loginitem .logincontent h3{font-size: 15px; font-weight: bold; color: #3D3D3D; padding-bottom: 5px; text-align: left;}
.NewLoginMain .Loginitem .logincontent h3 span{font-size: 13px; color: #888; font-weight: normal; padding-left: 5px;}
.logincontent ul.tablebar{padding-top:10px; color: #a7a7a7;}
.logincontent ul.tablebar a{text-decoration: none;}
.logincontent ul.tablebar li.twoItem-box{font-size: 0;}
.forgrtmessage {color: #888; font-size: 14px; text-align: center;}

/*填寫表單欄位*/
ul.tablebar .inputSty {position: relative; margin-bottom: 5px;}
ul.tablebar .inputSty span{color:#d6d6d6; position: absolute; top: 55%; width:40px; text-align: center; transform: translateY(-50%); transition: 0.3s;}
ul.tablebar .inputSty span.EnterCodeText{color:#6C757D; text-indent: 42px; font-weight: 800; left: 0;top: 20px;}
ul.tablebar .inputSty span.inputicon{left:0;}
ul.tablebar .inputSty span i{font-size: 20px;}
ul.tablebar .inputSty span i.fa-mobile{font-size:32px;}
ul.tablebar .inputSty input{width: 100%; height:40px; border: 1px solid #d7d7d7; border-radius: 5px; padding:10px; font-family:"微軟正黑體"; font-size: 14px; outline: none; text-indent:30px; transition: 0.3s; box-shadow: none;-webkit-appearance: none;}
ul.tablebar .inputSty input.EnterCode{text-indent: 74px;}
ul.tablebar .inputSty input:focus,
ul.tablebar .sexmaxclick select:focus{border-color:#a8dce2; box-shadow: 0 2px 0 0 #a8dce2;}
ul.tablebar .inputSty input:focus + span{color:#777;}
ul.tablebar .inputSty input::placeholder{color:#999; opacity: 1;}
ul.tablebar .inputSty input::-ms-input-placeholder {color:#999;}
ul.tablebar .inputSty input.error{border-color:#FF6B81;}
ul.tablebar .inputSty input.fontSize13::placeholder{font-size: 13px;}
ul.tablebar .inputSty div, ul.tablebar .inputSty button, ul.tablebar .inputSty a.gobackbtn{position: absolute; top: 50%; z-index: 2; display: block; text-align: center; transform: translateY(-50%); cursor: pointer;}
ul.tablebar .inputSty div.eyebor{right: 10px;}
ul.tablebar .inputSty div.checkicon{right:40px; color:#6eba44;}
ul.tablebar .inputSty div i{font-size:20px;}
ul.tablebar .inputSty div i.fa.fa-eye-slash{color:#999;}
ul.tablebar .inputSty div i.fa.fa-eye{color:#6eba44;}
ul.tablebar .inputSty button{right:0; border:none; outline:none; background:#0c9cb8; color: #fff; padding:10px 15px; border-radius:5px; font-size: 14px; font-family:"微軟正黑體";}
ul.tablebar .inputSty button.disabled{background:#999999;cursor: inherit;}
ul.tablebar .inputSty span.codeTips{right:0; border:none; outline:none; background:#4983DB; color: #fff; padding:10px 15px; border-radius:5px; font-size: 14px; font-family:"微軟正黑體"; width: auto; top: 50%;}
ul.tablebar .inputSty span.codeTips.disabled{background:#999999;cursor: inherit;}
ul.tablebar .inputSty a.gobackbtn{width:40px; height: 40px; line-height: 40px; background: #FF6B81; font-size:20px; color:#fff; border-radius:5px 0 0 5px;}
ul.tablebar .inputSty span.awicon{position: absolute; top: 50%; right:0; z-index: 2; display: block; text-align: center; transform: translateY(-50%); cursor: pointer;}
ul.tablebar .inputSty span.awicon i{font-size:20px; color:#999;}
ul.tablebar .floatL{width:79%; display: inline-block; vertical-align: top; margin-right: 1%;}
ul.tablebar .sexmaxclick{display: inline-block; width:20%; position: relative; overflow: hidden; border: 1px solid #d7d7d7; border-radius: 5px;}
ul.tablebar .sexmaxclick select{width: 100%; height:38px; border: none; padding:0 8px; font:normal normal normal 14px/1 FontAwesome, 微軟正黑體; color:#888; outline: none; transition: 0.3s; -webkit-appearance: none; -moz-appearance: none; appearance: none; z-index: 2; position: relative; background-color: transparent;}
ul.tablebar .sexmaxclick select::-ms-expand { display: none;}
ul.tablebar .sexmaxclick:after{position: absolute; top: 23%; right: .5em; font-family: "FontAwesome"; content: "\f078"; font-size: 18px; color: #999; /*z-index: 1;*/}
ul.tablebar .sexmaxclick option{padding:5px;}
ul.tablebar .sexmaxclick span{position: absolute; top: 50%; z-index: 2; display: block; text-align: center; transform: translateY(-50%); cursor: pointer;}
ul.tablebar li.mobile-inlineBox{ font-size: 0; }
ul.tablebar .inputSty select:focus + span{color:#777;}

/*輸入&錯誤提示框*/
.logincontent .tooltiptext{position: relative; top: -40px;}
.logincontent .tooltiptext span{width:262px; height:40px; font-size: 12px; line-height:15px; color: #6C757D; border-radius: 5px; padding:3px 5px; position: absolute; z-index: 1; top: -5px; left: 103%; margin: auto; border: 3px solid #ffca00;}
.logincontent .tooltiptext span::before{content:''; display: inline-block; height: 100%; width: 0; vertical-align: middle;}
.logincontent .tooltiptext span::after {content: ""; position: absolute; top: 50%; right: 101%; margin-top: -6px; border-width: 6px; border-style: solid;}
.logincontent .tooltiptext span p{display: inline-block; vertical-align: middle;}
.logincontent .tooltiptext span.hintMsg{background:#fff;display: none;} /*輸入中提示*/
.logincontent .tooltiptext span.hintMsg.pair02{}
.logincontent .tooltiptext span.hintMsg::after{border-color: transparent #ffca00 transparent transparent;}
.logincontent .tooltiptext span.errorMsg{background:#FF6B81;border: 3px solid #FF6B81;color: #fff;display: none;} /*錯誤提示*/
.logincontent .tooltiptext span.show{display: block;}
.logincontent .tooltiptext span.errorMsg::after{border-color: transparent #FF6B81 transparent transparent;}

.logincontent .btn{display: block; border-radius:5px; text-align: center; padding:10px; margin:10px 0; letter-spacing:2;}
.logincontent input.btn{width: 100%; height: 40px; border:none; border-radius: 5px; padding: 10px; font-family: "微軟正黑體"; font-size: 14px; outline: none; text-indent: 30px; transition: 0.3s; box-shadow: none; -webkit-appearance: none; cursor: pointer;}
.logincontent .btncram{ font-size:17px; font-weight: bold; color: #fff;  background: #0c9cb8;}
.logincontent .btnborder{font-size:14px; color:#47c1d1; border:#47c1d1 solid 1px;}

.logincontent .linkway{text-align:center; font-size:14px;}
.logincontent .linkway a{color:#4983DB; padding:0 10px;}
.logincontent .linkway a:hover, .NewLoginMain .Loginitem .errorBox a:hover{text-decoration: underline;}
.logincontent .waybox{text-align:center; margin:40px 0 10px;}
.logincontent .waybox .waytext{position:relative; margin: auto; width: 100%; background:#dedede; height: 1px; display:block; margin-bottom:25px;}
.logincontent .waybox .waytext span{min-width:70px; font-size:14px; background: #fff; color:#888; position: absolute; left: 50%; transform: translate(-50%, -50%);}

.logincontent .promptmessage, .logincontent .errorexplain, .logincontent .redText{text-align: center; color:#FF6B81; font-size:13px;}
.logincontent .errorexplain span.field-validation-error {display: block;}
.logincontent .tipsText{text-align: center; color:#888; font-size:13px;margin-top: 10px;}
.logincontent .blueText{text-align: center; color:#4983DB; font-size:12px;}
.logincontent .promptmessageblue{color:#4c5d79; font-size: 15px; text-align: center; margin:20px 0 10px;}
.logincontent .promptmessage, .logincontent .redText, .logincontent .normalText, .logincontent .blueText{margin-bottom:5px;}

.NewLoginMain .Loginitem .errorBox{position: absolute; left:437px; width:494px; min-height:500px; background: #f4fafb; border-radius:0 5px 5px 0;  border-left: #f1f1f1 solid 1px; padding:60px;}
.NewLoginMain .Loginitem .errorBox dt, .NewLoginMain .Loginitem .errorBox_M dt{font-size:15px; font-weight: bold; color: #3D3D3D; margin-top:25px;}
.NewLoginMain .Loginitem .errorBox dt::before, .NewLoginMain .Loginitem .errorBox_M dt::before{content: "\f005"; color:#FF7F50; padding-right:8px;  font: normal normal normal 15px/1 FontAwesome;}
.NewLoginMain .Loginitem .errorBox dd, .NewLoginMain .Loginitem .errorBox_M dd{font-size: 14px; color: #888; line-height: 23px; margin:2px 0 0 37px; display:block;}
.NewLoginMain .Loginitem .errorBox a, .NewLoginMain .Loginitem .errorBox_M a{color:#4983DB;}
.NewLoginMain .Loginitem .errorBox_M{border:#b7dee8 solid 1px; background:#f4fcfd; padding:0 10px 10px; margin-top:10px;}

/*得知其他資訊*/
.logincontent .inforroute{font-size:13px; max-width: 370px; background: #f4fcfd; padding:10px 8px;}
.logincontent .inforroute h4{color:#4c5d79; text-align: center; padding-bottom:2px; font-weight: bold;}
.logincontent .inforroute h4.mt5{margin-top: 5px;}
.logincontent .inforroute span{position: relative;}
.logincontent .inforroute .chooseItem{display: inline-block; margin:2px 2px 2px 0; line-height:24px; border-radius: 3px; border: 1px solid #d7d7d7; text-align: center; background: #FFF; cursor: pointer;}
.logincontent .inforroute .chooseItem a{color:#313131;}
.logincontent .inforroute .chooseItem.active{background: #88a3be; color: #FFF; border: 1px solid #88a3be;}
.logincontent .inforroute .chooseItem input[type="checkbox"] {display: none;}
.logincontent .inforroute .chooseItem input[type="checkbox"] + label{display: inline-block; cursor: pointer; line-height:24px; padding: 0 14px; border-radius: 3px;}
.logincontent .inforroute input[type="text"] {border: 1px solid #d7d7d7; font-size: 13px; height: 25px; line-height: 25px; border-radius:3px; padding:0 3px;}
.logincontent .inforroute .chooseItem input[type="checkbox"]:checked + label{background: #88a3be; color: #FFF;}

.logincontent .iagreebox{font-size: 13px; max-width:370px; margin:15px 0; display: flex;}
.logincontent .iagreebox a{color:#4983DB;}
.logincontent .iagreebox [type="checkbox"]:not(:checked),
.logincontent .iagreebox [type="checkbox"]:checked{position: absolute; left: -9999px;}
.logincontent .iagreebox [type="checkbox"]:not(:checked) + label,
.logincontent .iagreebox [type="checkbox"]:checked + label{position: relative; padding-left:30px; cursor: pointer; }
.logincontent .iagreebox [type="checkbox"]:not(:checked) + label:before,
.logincontent .iagreebox [type="checkbox"]:checked + label:before{content: ''; position: absolute; left:0; top: 2px; width:20px; height:20px; border:2px solid #d7d7d7; background: #f8f8f8; border-radius:2px;}
.logincontent .iagreebox [type="checkbox"]:not(:checked) + label:after,
.logincontent .iagreebox [type="checkbox"]:checked + label:after {content: '✔'; position: absolute; top:-4px; left: 2px; font-size:24px; color:#4983DB; transition: all .2s;}
.logincontent .iagreebox [type="checkbox"]:not(:checked) + label:after{opacity: 0; transform: scale(0);}
.logincontent .iagreebox [type="checkbox"]:checked + label:after{opacity: 1; transform: scale(1);}
.logincontent .iagreebox p{line-height:14px;}

.NewLoginMain .loginbottom{clear:both; background:#f1f1f1; color:#888; font-size: 12px; line-height:1.3;  padding:10px 5px; text-align: center; border-radius: 0 0 5px 5px; width: 100%; position: absolute; bottom: 0;}

/*新版註冊停權頁*/
.NewLoginMain .loginError{width: 600px; font-size: 14px;}
.NewLoginMain .loginError .logincontent{padding: 30px 95px 10px; color: #6c757d;}
.loginError .logincontent .greeting{margin-top: 40px; margin-bottom: 20px; font-size: 18px; font-weight: 800;}
.loginError .logincontent > p{margin-bottom: 10px;}
.loginError .logincontent .red{color: #FF6B81;}
.loginError .logincontent .mainMsg{color: #17A2B8; text-align: center; margin: 30px auto 40px;}
.loginError .logincontent .mainMsg b{font-size: 16px;}
.loginError .logincontent .mainMsg .mmsgBox{margin: 15px auto; padding: 20px; background-color: #f1f5f9; border-radius: 5px;}
.loginError .logincontent .mainMsg .mmsgBox .decorationBar{width: 60px; height: 5px; background-color: #17A2B8; margin: auto; margin-top: -22px; margin-bottom: 15px;}
.loginError .logincontent .mainMsg .mmsgBox .btnBox{max-width: 180px; margin: 20px auto 0px;}
.loginError .logincontent .mainMsg .mmsgBox .btnAcc{font-size: 16px; color: #fff; background: #4983DB; box-shadow: 0 4px 0 0 #2d60ad};

/*忘記密碼-取得臨時密碼後重新登入*/
ul.tablebar .twoItem-box {font-size: 0;}
ul.tablebar .twoItem-box .inputSty {display: inline-block; width: 50%;}
ul.tablebar .twoItem-box .inputSty div.verification {width: 100%;padding: 0 2%;}
ul.tablebar .twoItem-box .inputSty div.verification img{margin: auto;width: 100%;max-width: 150px;}

.forgetemail {margin-top: 10px;text-align: center;color: #6f6f6f;border-width: 1px;border-style: solid;border-color: rgb(183, 222, 232);border-image: initial;background: rgb(244, 252, 253);padding: 10px 5px;}
.forgetemail h5 {font-size: 15px;color: #525252;padding-bottom: 5px;}
.forgetemail p {font-size: 13px;}
.forgetemail a {color: #4983DB;}
.forgetemail span {color: #525252;font-weight: bold;}

.input-validation-error { border: 1px red solid !important;}


/* MOBILE 
-----------------------------------------------------------------------------------------------------------------------------*/
/*覆蓋header.css*/
#NewLoginBox .btn {
    letter-spacing: normal;
    text-shadow: none;
    text-align: center;
    text-indent: 0px;
}

.logincontent a.btnborder {
	font-weight: normal;
	background-color: transparent;
}

@media screen and (max-width: 990px){
	.NewLoginMain .Otheritemstep{display: none;}
	.NewLoginMain .Otheritem{display: none;}
	.NewLoginMain .Loginitem .errorBox{display: none;}
	.NewLoginMain .Loginitem.loginInLeft{ margin: auto; display: block;}
}

@media screen and (min-width: 990px){
	.NewLoginMain .Loginitem .errorBox_M{display: none;}
}

@media screen and (max-width: 767px) {
	.bg-icon{background-image: none;}
	#NewLoginBox{background-image:none; background-color: #fff;}
	.NewLoginMain .breadcrumb{display: none;}
	.NewLoginMain .Otheritem, .NewLoginMain .Otheritemstep{display: none;}
	/*.NewLoginMain{padding:20px 10px;}*/
	.NewLoginMain .Loginitem{box-shadow: none; margin: auto;}
	/*.NewLoginMain .Loginitem .logincontent h2 img{display: none;}*/
	/*.NewLoginMain .Loginitem .logincontent{padding:30px 10px 10px;}*/
	.NewLoginMain .Loginitem .logincontent.stepmobile{}
	.NewLoginMain .Loginitem .errorBox dt, .NewLoginMain .Loginitem .errorBox_M dt{margin-top:15px;}
	.logincontent .tooltiptext{top:0;}
	.logincontent .tooltiptext span{width:100%; height:auto; display: block; position:initial; margin-bottom:5px;}
	.logincontent .tooltiptext span.hintMsg{background: #ffd228;border: 3px solid #ffd228;}
	.logincontent .tooltiptext span.hintMsg::after, .logincontent .tooltiptext span.errorMsg::after{border:none;}
	.logincontent .tooltiptext span.errorMsg.pair02{float: left;}
	.logincontent .tooltiptext span.errorMsg.pair02 p{position: static; top: auto;}
	.logincontent .tooltiptext span p{vertical-align: middle;}
	ul.tablebar .inputSty button{font-size: 13px;}
}

@media screen and (max-width: 497px) {
	.NewLoginMain .Loginitem{width: auto; max-width: 440px;}
	ul.tablebar .sexmaxclick:after {font-size: 14px; top: 28%;}
	.NewLoginMain .Loginitem .errorBox_M dd{margin:2px 0 0 0px;}
}

@media screen and (max-width: 320px) {
	ul.tablebar .floatL{width:69%; margin-right: 1%;}
	ul.tablebar .sexmaxclick{width: 30%;}
	ul.tablebar .inputSty button#sendValid{position: static; width: 100%; transform: translateY(0); margin-top: 5px;}
	ul.tablebar .inputSty span.mobile{top: 25%;}
}