@charset "utf-8";

body {
	font-family: Arial, Helvetica, 新細明體;
	font-size: 12px;
	color: #000000;
	background: url(../resource/logon/bg.gif) repeat-x center top #fff;
}
body.Eng {
	letter-spacing: 0.08px;
}
body.Big5 {
	letter-spacing: 1px;
	font-size: 11px;
}
body.Gb {
	letter-spacing: 1px;
	font-size: 11px;
}

.header {
	width: 100%;
	min-width: 1000px;
	height: 71px;
	margin: 0 auto;
}

.wrapper {
	position: relative;
	margin: 0 auto;
	width: 1000px;
	height: 375px;
}

.scroll-container {
	position: absolute;
	width: 100%;
	height: 100%;
	/* text-align:center; */
	font: normal 12px/15px Helvetica;
}

.container-adjust {
	text-align: center;
}

.container-adjust .title {
	margin-top: 25px;
	text-align: left;
	height: 20px;
}

#mybackground {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
}

input::-ms-clear, ::-ms-reveal {
	display: none;
}

input::placeholder  {
	font-size: 16px;
	height: 25px;
	line-height: 25px;
	color: #666666;
}

input:-ms-input-placeholder {
	font-size: 16px;
	height: 25px;
	line-height: 25px;
	color: #666666;
}

#captchaInput.en::placeholder {
	font-size: 12px;
	height: 25px;
	line-height: 25px;
}
#captchaInput:-ms-input-placeholder {
	font-size: 12px;
	height: 25px;
	line-height: 25px;
}

.form-control::placeholder{
	font-weight: normal;
}

input::-webkit-autofill,
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
	visibility: hidden;
	display: none !important;
	pointer-events: none;
	height: 0;
	width: 0;
	margin: 0;
}

table.accountT td {
	border-bottom: none !important;
}

table.accountT {
	border-bottom: none !important;
}

:focus {
	outline: none;
}

::-webkit-scrollbar-track{
	background: #666666;
	border-radius: 2px;

}

.num{
	margin: 0;
	position: absolute;
	top:50%;
	left:50%;
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.circle_in_red {
	width: 16px;
	height: 16px;
	background: #DF1118;
	color: #FFFFFF;
	text-align: center;
	border-radius: 999em;
	font-size: 10px;
	position: relative;
}

.stepDesc {
	display: flex;
}
.stepDescNum {
	flex: 10%;
}
.stepDescDtl {
	flex: 90%;
	margin-top: -3px;
}

.bold {
	font-weight: bold;
}

.tips_split {
	margin-left: 8px;
}

/* header (start) */
.logoSize {
	display: inline-block;
	position: absolute;
	left: 2.9%;
	top: 1.8%;
	width: 250px;
}
.PB_logoSize {
	display: inline-block;
	position: absolute;
	left: 2.9%;
	top: 1.8%;
	width: 400px;
}
.langSel {
	position: absolute;
	right: 40px;
	top: 25px;
	width: 60px;
	font-family: Arial, Helvetica, Noto Sans CJK TC, Noto Sans CJK SC;
}
.PB_langSel {
	position: absolute;
	right: 40px;
	top: 25px;
	width: 60px;
	font-family: Optima;
}

.newLoginHeader {
	height: 72px;
	opacity: 90%;
	background-color: white;
	box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.1)
}

.lang_choose_1 {
	position: absolute;
	top: 2.9%;
	right: 9.4%;
	font-size: 20px;
}
.lang_choose_1.zh {
	font-size: 19px;
}
.lang_choose_1 > a {
	color: #666666;
	text-decoration: none;
}
.PB_.lang_choose_1 > a {
	
}

.lang_choose_2 {
	position: absolute;
	top: 2.9%;
	right: 4.9%;
	font-size: 20px;
}
.lang_choose_2.zh {
	font-size: 19px;
}
.lang_choose_2 > a {
	color: #666666;
	text-decoration: none;
}
.PB_.lang_choose_2 > a {

}

div.lang_choose_split {
	position: absolute;
	top: 2.8%;
	right: 7.8%;
	border: 1px solid #666666;
	height: 20px;
}
/* header (end) */

/* input container (start) */
.mainArea {
	position: static;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font: normal 12px/15px Helvetica;
}

.inputboard {
	width: 584px;
	border-radius: 25px;
	margin-left: auto;
	margin-right: auto;
}

.PB_inputboard {
	width: 584px;
	border-radius: 25px;
	margin-left: auto;
	margin-right: auto;
}

.inputContents {
	margin-left: 42px;
	margin-right: 42px;
	margin-top: 0px;
	margin-bottom: 10px;
	text-align: left;
}
.PB_inputContents {
	margin-left: 42px;
	margin-right: 42px;
	margin-top: 0px;
	margin-bottom: 10px;
	text-align: left;
}
.inputContents > div {
	margin-top: -1px;
}

.fieldItem {
	position: relative;
	height: 40px;
	margin: auto;
	margin-top: 10px;
	background: #fff;
	width: 586px;
	/*width:400px;*/
	border-radius: 20px !important;
	font: normal 12px/15px Helvetica;
}
.fieldItem-no-margin-top {
	position: relative;
	height: 40px;
	margin-top: 10px;
	background: #fff;
	width: 500px;
	/*width:400px;*/
	border-radius: 20px !important;
	font: normal 12px/15px Helvetica;
}

.activePage {
	width: 325px;
	height: 52px;
	background-color: #FFFFFF;
	border-radius: 14px 14px 0 0;
	font-size: 18px;
	color: #DF1118;
	text-align: center;
	line-height: 50px;
	cursor: pointer;
}
.activePage.zh {
	font-size: 17px;
}

.noActivePage {
	background: #F7F7F7;
	border-radius: 14px 14px 0 0;
	width: 325px;
	height: 52px;
	font-size: 18px;
	color: #666666;
	text-align: center;
	line-height: 50px;
	cursor: pointer;
}
.noActivePage.zh {
	font-size: 17px;
}

.exclamationMark {
	width: 31px;
	height: 31px;
	line-height: 31px;
	border-radius: 50%;
	border: 1px solid #EC1D25;
	text-align: center;
	font-size: 29px;
	color: #DF1118;
}
.exclamationMarkBorder {
	padding-right: 15px;
}

.titleName {
	font-weight: bold;
	font-size: 12px;
	word-spacing: 0.5px;
}
.PB_titleName {
	font-weight: bold;
	font-size: 12px;
	word-spacing: 0.5px;
}

.inputImg {
	float: left;
	height: 20px;
	left: 50px;
	/* margin-left: 20px; */
	margin-top: 10px;
}

.rightPwdimg {
	right: 0px;
	position: absolute;
	margin-right: 12px;
	margin-top: 10px;
	width: 20px;
	height: 20px;
	float: right;
}

.inputItem {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	left: 40px;
	width: 420px;
	font-size: 16px;
	border: none;
	outline: none;
	background: #fff;
	height: 25px;
	line-height: 25px;
}

.inputItemPwd {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	left: 50px;
	width: 420px;
	font-size: 16px;
	border: none;
	outline: none;
	background: #fff;
	line-height: 25px;
}

.password_place_holde {
	font-size: 16px;
	height: 25px;
	line-height: 25px;
}

.password_place_holde.has_input {
	font-size: 25px;
	color:black;
}

.PB_password_place_holde {
	font-size: 16px;
	height: 25px;
	line-height: 25px;
}

.PB_password_place_holde.has_input {
	font-size: 25px;
	color:black;
}

hr.accSeparate {
	margin-top: 0;
	margin-bottom: 0;
}

hr.separateLine {
	border-top: 1px solid #DDDDDD;
	width: 586px;
}

.scanQrImageContainer {
	margin-left: 34px;
	width: 193px;
	height: 193px;
	background: #FFFFFF;
	border: 1px solid #DDDDDD;
	border-radius: 14px;
	position: relative;
	margin-top: 24px;
	margin-bottom: 32.5px;
}

#qrcodeImagePath {
	padding: 10px;
}

.scanQrDesc {
	width: 291px;
}

.scanQrDesc > p {
	height:fit-content;
}

.qrcodeImagePathBorder {
	background: #FFFFFF;
	border: 1px solid #989898;
	border-radius: 14px;
	width: 170px;
	height: 170px;
}

.qrcode_refresh_button {
	width: 291px;
	font-size: 18px;
	border: 1px solid #DF1118;
	outline: none;
	height: 42px;
	line-height: 25px;
	border-radius: 27px !important;
	display: block;
	color: #DF1118;
	position: relative;
	margin-top: 20px;
	background: #FFFFFF;
}
.qrcode_refresh_button.zh {
	font-size: 17px;
}

.qrcode_refresh_button:disabled {
	border: 1px solid #DF1118;
	color: #DF1118;
	opacity: 60%;
}

.secuMsgForLogin {
	width: 600px;
	margin-left: 50px;
	margin-top: -10px;
	text-align: left;
	color: #F00;
	font-size: 14px;
	display: none;
}
.secuMsgForLogin.zh{
	font-size: 13px;
}
.buttonContainer {
	text-align: center;
}

.loginButton {
	width: 586px;
	height: 42px;
	border: 1px solid #DF1118;
	border-radius: 27px;
	font-size: 20px;
	color: #DF1118;
	text-align: center;
	position: relative;
	cursor: pointer;
	background-color: white;
}
.loginButton.zh {
	font-size: 19px;
}

.loginButton > img {
	height: 25px;
}

.loginButton_primary {
	background-color: #DF1118;
	color: white;
}

.loginButton_primary:disabled {
	background-color: white;
	color: #DF1118;
}

.dualAuthenticationContainer {
	margin: 12.5px auto 12px auto;
}

.passwordLoginContainer {
	margin: 0px auto 38px auto;
}

.nextContainer {
	margin: 34.17px auto 34.17px auto;
}

.forgotPin {
	background: #FFFFFF;
	width: 656px;
	height: 102px;
	border-top: #EEEEEE solid 1px;
	border-radius: 0 0 24px 24px;
	font-size: 17px;
	color: #666666;
	line-height: 28px;
}
forgotPin.zh {
	font-size: 16px;
}
.PB_forgotPin {
	background: #FFFFFF;
	width: 656px;
	height: 102px;
	border-top: #EEEEEE solid 1px;
	border-radius: 0 0 24px 24px;
	font-size: 17px;
	color: #777777;
	letter-spacing: 0.08px;
	line-height: 28px;
}
.PB_forgotPin.zh {
	font-size: 16px;
}
.forgotPin > div > u > a {
	color: #666666;
}
.PB_forgotPin > div > u > a {
	color: #666666;
}
#login, #loginWithQrcode, #loginMethod, #dualAuthenticationPage, #passwordLoginPage, #systemEnhancement, #errorMessageDisplay {
	width: 656px;
	background: #FFFFFF;
	border-radius: 0 0 24px 24px;
}

.errorBack {
	background: #FFFFFF;
	width: 656px;
	height: 102px;
	border-top: #EEEEEE solid 1px;
	border-radius: 0 0 24px 24px;
	font-size: 17px;
	color: #666666;
	line-height: 28px;
}
.errorBack > u > a{
	color: #666666;
}
.changeText{
	font-size: 17px;
	color: #666666;
}
.changeText.zh{
	font-size: 16px;
}
.changeButton{
	margin-left:8px; 
	margin-right:8px;
	cursor: pointer;
}
h1.scanQRContent{
	margin: 0 36px;
	font-size: 18px;
	color: #292929;
}
h1.scanQRContent.zh{
	font-size: 17px;
}

.accLabel{
	margin-left: 36px;
	font-size: 18px;
	color: #292929;
	line-height: 21px;
}
.accLabel.zh{
	font-size: 17px;
}

.tokenOtpLabel{
	font-size: 14px;
}
.tokenOtpLabel.zh{
	font-size: 13px;
}

.selectLabel{
	font-size: 18px;
	color: #292929;
	margin-left:37px;
}
.selectLabel.zh{
	font-size: 17px;
}

.acctDisp{
	font-size: 18px;
	color: #292929;
	line-height: 21px;
}
.acctDisp.zh{
	font-size: 17px;
}

.loginIncorrect{
	font-size: 14px;
	color: #DF1118;
	margin-left: 3.4%;
	display:none;
}
.loginIncorrect.zh{
	font-size: 13px;
}
.changeAcctButton{
	text-decoration: underline;
	right: 0px;
	position: absolute;
	margin-right: 37px;
	height: 20px;
	float: right;
	font-size: 18px;
	color: #666666;
	text-align: right;
	cursor: pointer;
}
.changeAcctButton.zh{
	height: 19px;
}
.scanQrDesc{
	font-size: 18px;
	color: #292929;
	line-height: 22px;
	margin:35px auto;
}
.scanQrDesc.zh{
	font-size: 17px;
}
/* input container (end) */

/* keypad (start) */
.keyboard{ position:absolute; left:0; top:0;}
.keyA{ display:block; position:absolute; left:58px; top:190px; background:url(../resource/logon/key_a.gif) no-repeat 0 0; width:31px; height:31px;}
.keyB{ display:block; position:absolute; left:213px; top:222px; background:url(../resource/logon/key_b.gif) no-repeat 0 0; width:31px; height:31px;}
.keyC{ display:block; position:absolute; left:151px; top:222px; background:url(../resource/logon/key_c.gif) no-repeat 0 0; width:31px; height:31px;}
.keyD{ display:block; position:absolute; left:120px; top:190px; background:url(../resource/logon/key_d.gif) no-repeat 0 0; width:31px; height:31px;}
.keyE{ display:block; position:absolute; left:104px; top:158px; background:url(../resource/logon/key_e.gif) no-repeat 0 0; width:31px; height:31px;}
.keyF{ display:block; position:absolute; left:151px; top:190px; background:url(../resource/logon/key_f.gif) no-repeat 0 0; width:31px; height:31px;}
.keyG{ display:block; position:absolute; left:182px; top:190px; background:url(../resource/logon/key_g.gif) no-repeat 0 0; width:31px; height:31px;}
.keyH{ display:block; position:absolute; left:213px; top:190px; background:url(../resource/logon/key_h.gif) no-repeat 0 0; width:31px; height:31px;}
.keyI{ display:block; position:absolute; left:259px; top:158px; background:url(../resource/logon/key_i.gif) no-repeat 0 0; width:31px; height:31px;}
.keyJ{ display:block; position:absolute; left:244px; top:190px; background:url(../resource/logon/key_j.gif) no-repeat 0 0; width:31px; height:31px;}
.keyK{ display:block; position:absolute; left:275px; top:190px; background:url(../resource/logon/key_k.gif) no-repeat 0 0; width:31px; height:31px;}
.keyL{ display:block; position:absolute; left:306px; top:190px; background:url(../resource/logon/key_l.gif) no-repeat 0 0; width:31px; height:31px;}
.keyM{ display:block; position:absolute; left:275px; top:222px; background:url(../resource/logon/key_m.gif) no-repeat 0 0; width:31px; height:31px;}
.keyN{ display:block; position:absolute; left:244px; top:222px; background:url(../resource/logon/key_n.gif) no-repeat 0 0; width:31px; height:31px;}
.keyO{ display:block; position:absolute; left:290px; top:158px; background:url(../resource/logon/key_o.gif) no-repeat 0 0; width:31px; height:31px;}
.keyP{ display:block; position:absolute; left:321px; top:158px; background:url(../resource/logon/key_p.gif) no-repeat 0 0; width:31px; height:31px;}
.keyQ{ display:block; position:absolute; left:42px; top:158px; background:url(../resource/logon/key_q.gif) no-repeat 0 0; width:31px; height:31px;}
.keyR{ display:block; position:absolute; left:135px; top:158px; background:url(../resource/logon/key_r.gif) no-repeat 0 0; width:31px; height:31px;}
.keyS{ display:block; position:absolute; left:89px; top:190px; background:url(../resource/logon/key_s.gif) no-repeat 0 0; width:31px; height:31px;}
.keyT{ display:block; position:absolute; left:166px; top:158px; background:url(../resource/logon/key_t.gif) no-repeat 0 0; width:31px; height:31px;}
.keyU{ display:block; position:absolute; left:228px; top:158px; background:url(../resource/logon/key_u.gif) no-repeat 0 0; width:31px; height:31px;}
.keyV{ display:block; position:absolute; left:182px; top:222px; background:url(../resource/logon/key_v.gif) no-repeat 0 0; width:31px; height:31px;}
.keyW{ display:block; position:absolute; left:73px; top:158px; background:url(../resource/logon/key_w.gif) no-repeat 0 0; width:31px; height:31px;}
.keyX{ display:block; position:absolute; left:120px; top:222px; background:url(../resource/logon/key_x.gif) no-repeat 0 0; width:31px; height:31px;}
.keyY{ display:block; position:absolute; left:197px; top:158px; background:url(../resource/logon/key_y.gif) no-repeat 0 0; width:31px; height:31px;}
.keyZ{ display:block; position:absolute; left:89px; top:222px; background:url(../resource/logon/key_z.gif) no-repeat 0 0; width:31px; height:31px;}

.key0{ display:block; position:absolute; left:404px; top:254px; width:31px; height:31px;}
.key1{ display:block; position:absolute; left:373px; top:158px; width:31px; height:31px;}
.key2{ display:block; position:absolute; left:404px; top:158px; width:31px; height:31px;}
.key3{ display:block; position:absolute; left:435px; top:158px; width:31px; height:31px;}
.key4{ display:block; position:absolute; left:373px; top:190px; width:31px; height:31px;}
.key5{ display:block; position:absolute; left:404px; top:190px; width:31px; height:31px;}
.key6{ display:block; position:absolute; left:435px; top:190px; width:31px; height:31px;}
.key7{ display:block; position:absolute; left:373px; top:222px; width:31px; height:31px;}
.key8{ display:block; position:absolute; left:404px; top:222px; width:31px; height:31px;}
.key9{ display:block; position:absolute; left:435px; top:222px; width:31px; height:31px;}

.keyBackspaceEng{ display:block; position:absolute; left:114px; top:254px; background:url(../resource/logon/key_backspace_Eng.gif) no-repeat 0 0; width:98px; height:31px;}
.keyBackspaceBig5{ display:block; position:absolute; left:114px; top:254px; background:url(../resource/logon/key_backspace_Big5.gif) no-repeat 0 0; width:63px; height:31px;}
.keyBackspaceGb{ display:block; position:absolute; left:114px; top:254px; background:url(../resource/logon/key_backspace_Gb.gif) no-repeat 0 0; width:63px; height:31px;}

.keyClearEng{ display:block; position:absolute; left:212px; top:254px; background:url(../resource/logon/key_clear_Eng.gif) no-repeat 0 0; width:64px; height:31px;}
.keyClearBig5{ display:block; position:absolute; left:177px; top:254px; background:url(../resource/logon/key_clear_Big5.gif) no-repeat 0 0; width:94px; height:31px;}
.keyClearGb{ display:block; position:absolute; left:177px; top:254px; background:url(../resource/logon/key_clear_Gb.gif) no-repeat 0 0; width:94px; height:31px;}

.fullkeypad {
	margin-right: auto;
	margin-left: auto;
	width: 500px;
	height: 150px;
	#background: #fff;
	z-index: 9999;
	color: #333;
	#padding: 20px 0;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
	display: none;
}
.fullkeypad.active {
	left: 50%;
	-o-transform: translate(-50%);
	display: block;
}

.fullkeypad div {
	text-align: center;
}
.fullkeypad div span {
	display: inline-block;
	width: 28px;
	height: 28px;
	text-align: center;
	font-size: 20px;
	-webkit-transition: all .1s;
	-moz-transition: all .1s;
	-ms-transition: all .1s;
	-o-transition: all .1s;
	transition: all .1s;
}

.keyActive {
	border-radius: 3px;
	box-shadow: 2px 2px 5px #999;
}

.fullkeypad > div:not (:last-child ){
	margin-bottom: 10px;
}

.fullkeypad .keyItem img {
	width: 32px;
	height: 32px;
}

.fullkeypad .row_letter div {
	display: inline-block;
}

.fullkeypad .row_number div {
	display: inline-block;
}

.fullkeypad .delete {
	background-color: transparent;
}

.keyChars {
	margin-top: 10px;
	width: 350px;
	height: 150px;
	position: relative;
	left: 0;
	top: 0;
	margin-left: -10px;
	margin-top: 0px;
	text-align: center;
}
.keyDigits {
	margin-top: 10px;
	width: 100px;
	height: 150px;
	position: relative;
	float: right;
	/*right:-350px; */
	top: -160px;
	margin-right: 0;
	margin-top: 0;
	text-align: center;
}
/* keypad (end) */

/* footer (start) */
#alert_bottom {
	font-size: 12px;
	overflow: hidden;
}
#alert_bottom.zh {
	font-size: 12px;
}

.alert_bottom {
	bottom: 0;
	position: absolute;
	width: 100%;
	background: rgba(34, 34, 34, 0.90);
	color: #C0C0C0;
	font-size: 10px;
	font-weight: normal;
}
.alert_bottom.zh {
	font-size: 9px;
}
.PB_alert_bottom {
	bottom: 0;
	position: absolute;
	width: 100%;
	background: #000;
	color: #C0C0C0;
	font-size: 10px;
	font-weight: normal;
}
.PB_alert_bottom.zh {
	font-size: 9px;
}

#myBottomContent {
	white-space: nowrap;
	position: relative;
	height: 38px;
	left: 3.4%;
	display: flex;
}
#myBottomContent > div > div {
	font-size: 17px;
	color: #FFFFFF;
	line-height: 22px;
}
#myBottomContent.zh > div > div {
	font-size: 16px;
}
#myBottomContent > div > div > font > a {
	color: #FFFFFF;
	text-decoration: none;
}

.bottomConent {
	display: inline-block;
	margin-top: 8px;
	margin-left: 5px;
}

#importantInformation {
	font-size: 17px;
	color: #FFFFFF;
	line-height: 22px;
}
#importantInformation.zh {
	font-size: 16px;
}

#voiceNavigationModal_content > ol > li > a {
	font-size: 18px;
	color: #DF1118;
	line-height: 22px;
	text-decoration: underline;
}
#voiceNavigationModal_content.zh > ol > li > a {
	font-size: 18px;
}

.copyright {
	color: #000000;
	clear: both;
	text-align: right;
	line-height: 22px;
	position: absolute;
	right: 3.4%;
	margin-right: 65px;
}

.bottomBar {
	width: 100%;
	height: 28px;
}
/* footer (end) */

/* modal (start) */
.modal {
	position:absolute;
}
.modal-content {
	overflow-x: hidden;
	overflow-y: hidden;
	min-height: 60vh;
	margin: 0px;
	border-radius: 25px;
	border: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	line-height: 24px;
}
.modal-header {
	border-bottom: 0px;
	margin-top: 25px;
	margin-left: 25px;
	margin-right: 25px;
	padding: 0px;
	font-size: 18px;
}
.modal-header.zh {
	font-size: 17px;
}
.modal-body {
	margin-left: 25px;
	margin-right: 25px;
	margin-bottom: 25px;
	margin-top: 0px;
	padding: 0px;
	font-size: 16px;
}
.modal-body.zh {
	font-size: 15px;
}

.modal-content.square {
	min-height: 10vh;
}
.modal-content.alert_content {
	border-radius: 0px 10px 10px 10px;
}
.modal-content.overlay {
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
}

.arrow-down {
	width: 0px;
	height: 0px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 15px solid;
}
.arrow-top {
	width: 0px;
	height: 0px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 15px solid;
}

.modal.modal_black {
	background: rgba(0, 0, 0, 0);
}
.modal-content.modal_black {
	background: rgba(34, 34, 34, 0.95);
	color: #CCCCCC;
}
.arrow.modal_black {
	border-top-color: rgba(34, 34, 34, 0.95);
}
.arrow-down.modal_black {
	border-top-color: rgba(34, 34, 34, 0.95);
}
.arrow-top.modal_black {
	border-bottom-color: rgba(34, 34, 34, 0.95);
}

.alert_body {
	font-size: 15px;
}
.alert_body.zh {
	font-size: 14px;
}

button.modal_close {
	float: right;
	background: 0 0;
	cursor: pointer;
	border: 0px;
	padding: 0px;
}

img.modal_close {
	width:15px;
	height:15px;
}

.closeButton {
	position: absolute;
	right: 32px;
	top: 32px;
	width: 14px;
	height: 14px;
}
.closeButton:before, .closeButton:after {
	position: absolute;
	left: 15px;
	content: ' ';
	height: 14px;
	width: 1px;
	background-color: #FFFFFF;
}
.closeButton:before {
	transform: rotate(45deg);
}
.closeButton:after {
	transform: rotate(-45deg);
}

#acctNoModal_frame {
	width: 800px;
}

.acctNoModal_div {
	padding: 0px 10px 5px 0;
}
.acctNoModal_content_div {
	padding: 3px 5px 3px 0;
}
.acctNoModal_content {
	font-size: 14px;
	/* padding: 5px 5px 5px 0; */
	line-height: 1.3;
}
.acctNoModal_content.zh {
	font-size: 13px;
}
.acctNoModal_header_1{
	font-size: 18px;
	/* padding: 5px 5px 5px 0; */
	line-height: 1.3;
}
.acctNoModal_header_1.zh{
	font-size: 17px;
}
.acctNoModal_header_2{
	font-size: 14px;
	/* padding: 5px 5px 5px 0; */
	font-weight: bold;
	line-height: 1.3;
}
.acctNoModal_header_2.zh{
	font-size: 13x;
}
.acctNoModal_pic{
	width: 240px;
	margin: auto;
    display: block;
}


#passwordLoginModal_frame {
	width: 600px;
}
#passwordLoginModal_content {
	font-size: 14px;
	line-height: normal;
}
#passwordLoginModal_content.zh {
	font-size: 13px;
}
#generatingSecurityCodeModal_frame {
	width: 743px;
	height: 680px;
}
#generatingSecurityCodeModal_content > div > span > input::placeholder {
	font-size: 14px;
	padding-left: 10px;
}
.generatingSecurityCodeModal_title {
	font-size: 18px;
	color: #292929;
}
.generatingSecurityCodeModal_title.zh {
	font-size: 17px;
}
#generatingSecurityCodeModal_body {
	margin-top: 10px;
}
#generatingSecurityCode{
	color: #DF1118;
	cursor: pointer;
	text-decoration: underline !important;
}
.tokenotp_form {
	margin-top: 10px;
	font-size: 14px;
	font-weight: bold;
}
.tokenotp_form.zh {
	font-size: 13px;
}
#tokenOtpModalContent {
	position: absolute;
	width: 850px;
	height: 650px;
	border-radius: 0px 10px 10px 10px;
}
.tokenotp_secuMsgForLogin {
	width: 600px;
	margin-bottom: 10px;
	margin-left: 10px;
	text-align: left;
	color: #F00;
	font-size: 12px;
	display: none;
}
.tokenotp_secuMsgForLogin.zh{
	font-size: 11px;
}

.tokenotp_step {
	width:205px;
	height:277px;
	margin-top: 23px;
}
.tokenotp_split {
	margin-left: 38px;
}
.tokenotp_step>img {
	width: 100%;
	margin-bottom: 16px;
}
.tokenotp_step_desc {
	font-size: 14px;
}
.tokenotp_step_desc.zh {
	font-size: 13px;
}
 
#qrCodeTipsModal_content span{
	font-size: 14px;
	color: #292929;
}
#qrCodeTipsModal_content.zh span{
	font-size: 13px;
}

.qrCodeTipsMain {
	display: flex;
	width: 100%;
}
.qrCodeTipsSection {
	flex: 1;
	flex-direction: column;
	margin-left: 15px;
	margin-top: 20px;
	margin-bottom: 20px;
}
.qrCodeTipsSectionImg {
}
.qrCodeTipsSectionDesc {
	margin-top: 20px;
}

#importantModal_frame {
	position: absolute;
	width: 776px;
	border-radius: 10px;
}
#importantModal_frame::-webkit-scrollbar {
	width: 4px;
	background-color: background: rgba(34, 34, 34, 0.95);
}
#importantModal_frame::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
}
#importantModal_frame::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
#importantModal_body {
	margin-top: 25px;
}
#importantModal_content::-webkit-scrollbar {
	width: 4px;
	background-color: background: rgba(34, 34, 34, 0.95);
}
#importantModal_content::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
}
#importantModal_content::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
#importantModal_content > span > a {
	color: #DF1118 !important;
	font-weight: normal !important;
	text-decoration: underline !important;
}

#voiceNavigationModal {
	width: 536px;
	/* height: 255px; */
}
#voiceNavigationModal_frame {
	width: 536px;
	/* height: 255px; */
}
#voiceNavigationModal_header {
	margin-top: 12px;
	color: #CCCCCC;
}
#voiceNavigationModal_body {
	color: #666666;
	font-size: 18px;
}
#voiceNavigationModal_body.zh {
	font-size: 17px;
}
#voiceNavigationModal_content > ol {
	padding-left:25px
}

#pinModal_frame {
	width: 443px;
}
#pinModal_body {
	line-height: normal;
}

#rightClickModal {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	display: none;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	outline: 0;
	-webkit-transition: opacity .15s linear;
	-o-transition: opacity .15s linear;
	transition: opacity .15s linear;
	opacity: 1;
}
#rightClickModal_frame {
	width: 450px;
	margin: auto;
	position: relative;
	margin-top: 50px;
}
#rightClickModal_body {
	position: relative;
	background-color: #fff;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid #999;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 6px;
	outline: 0;
	-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
	box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
	-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
	box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
#rightClickModal_content {
	position: relative;
	background-color: #fff;
	border-radius: 6px;
	outline: 0;
	padding-top: 15px;
	font-size: 12px;
	margin-left: 10px;
}
#rightClickModal_footer {
	padding: 10px;
	text-align: right;
}

#loginFailMsgModal_frame {
	width: 443px;
	height: 100px;
}

#errorMsgModal_frame {
	position: absolute;
}

#qrCodeModal_frame {
	position: absolute;
	width:580px;
	height: 590px;
}
#qrCodeModal_body {
	overflow-x: hidden;
	overflow-y: hidden;
	border: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.qrcode_countdown {
	border: 1px solid #757575;
	border-radius: 12px;
	width: 91px;
	height: 24px;
	font-size: 13px;
	color: #666666;
	float: right;
}
.qrcode_countdown.zh{
	font-size: 13px;
}

.qrcode_modal_title {
	font-size: 18px;
}
.qrcode_modal_title.zh {
	font-size: 17px;
}
.qrcode_modal_img {
	float: left;
	width: 250px;
	margin-top: 20px;
}
.qrcode_modal_img img {
	width: 100%;
}
.qrcode_modal_desc {
	margin-top: 20px;
}
.qrcode_modal_span {
	font-size: 14px;
	float: left;
}
.qrcode_modal_span.zh {
	font-size: 13px;
}
.qrcode_modal_img_span {
	width: 220px;
	margin-left: 10px;
}
.qrcode_modal_footer{
	width: 530px;
}
.AcctNoModalList{
	list-style-type: disc;
}
ol.AcctNoModalList{
	padding-left:15px;
}
div.cardWrapper{
	background-color: #eeeeee;
    margin-right: 20px;
    margin-top: 15px;
    padding: 15px 0;
}
img.cardSample{
	
}
	
}
/* modal (end) */

@media( max-width : 1460px) {
	/* footer (start) */
	#myBottomContent > div > div {
		font-size: 14px;
	}
	#myBottomContent.zh > div > div {
		font-size: 13px;
	}
	/* footer (end) */
}

@media ( max-width : 1366px) {
	
	/* header (start) */
	/* header (end) */
	
	/* input container (start) */
	#loginTab, #loginTabWithQrCode {
		width: 285px;
	}
	.fieldItem {
		width: 506px;
	}
	hr.separateLine {
		width: 506px;
	}
	#login,.forgotPin,.PB_forgotPin,#loginMethod,#loginWithQrcode,#dualAuthenticationPage,#passwordLoginPage,#systemEnhancement,#errorMessageDisplay,.errorBack{
		width:576px;
	}
	.dualAuthenticationContainer {
		width: 506px;
	}
	.passwordLoginContainer {
		width: 506px;
	}
	.nextContainer {
		width: 506px;
	}
	.secuMsgForLogin {
		width: 506px;
	}
	/* input container (end) */

	/* keypad (start) */
	
	/* keypad (end) */

	/* footer (start) */
	#myBottomContent > div > div {
		font-size: 14px;
	}
	#myBottomContent.zh > div > div {
		font-size: 13px;
	}
	/* footer (end) */

	/* modal (start) */
	/* #generatingSecurityCodeModal_frame {
		width: 576px;
	} */
	#importantModal_frame {
		width: 536px;
	}
	/* modal (end) */
}

@media ( max-width : 1220px) {
/* footer (start) */
	#myBottomContent {
		margin: auto;
		height: 64px;
		left: 0px;
		align-items: baseline;
		align-content: center;
		justify-content: center;
		display: block;
	}
	#myBottomContent > div {
		text-align: center;
	}
	#myBottomContent > div > div {
		position: static;
	}
	.copyright {
		position: static;
		margin: auto;
	}
	/* footer (end) */
	}

@media ( max-width : 1128px) {
	/* header (start) */
	/* header (end) */
	
	/* input container (start) */
	/* input container (end) */
	
	/* keypad (start) */
	/* keypad (end) */
	
	/* footer (start) */
	/*#myBottomContent > div > div {
		position: static;
	}
	.copyright {
		position: static;
		margin: auto;
	} */
	/* footer (end) */

	/* modal (start) */
	/* modal (end) */}

@media ( max-width : 1024px) {
	
	/* header (start) */
	/* header (end) */
	
	/* input container (start) */
	#loginTab, #loginTabWithQrCode {
		width: 255px;
	}
	.fieldItem {
		width: 446px;
	}
	hr.separateLine {
		width: 446px;
	}
	#login,.forgotPin,.PB_forgotPin,#loginMethod,#loginWithQrcode,#dualAuthenticationPage,#passwordLoginPage,#systemEnhancement,#errorMessageDisplay,.errorBack{
		width:516px;
	}
	.dualAuthenticationContainer {
		width: 446px;
	}
	.passwordLoginContainer {
		width: 446px;
	}
	.nextContainer{
		width:446px;
	}
	.secuMsgForLogin {
		width: 446px;
	}
	
	.scanQrDesc {
		width: 250px;
	}
	.qrcode_refresh_button {
		width: 250px;
	}
	/* input container (end) */
	
	/* keypad (start) */
	/* keypad (end) */
	
	/* footer (start) */
	#myBottomContent {
		margin: auto;
		height: 64px;
		left: 0px;
		align-items: baseline;
		align-content: center;
		justify-content: center;
		display: block;
	}
	#myBottomContent > div {
		text-align: center;
	}
	#myBottomContent > div > div {
		position: static;
	}
	.copyright {
		position: static;
		margin: auto;
	}
	/* footer (end) */

	/* modal (start) */
	/* #generatingSecurityCodeModal_frame {
		width: 516px;
	} */
	#importantModal_frame {
		width: 336px;
		height: 404px;
	}
	#importantModal_content {
		height: 310px;
		overflow-y: scroll;
	}
	/* modal (end) */
}

.qrCodeWrapper{
	border: 1px solid #989898;
	border-radius: 14px;
	background: #FFFFFF;
	margin-top: 24px;
	margin-left:34px;
	margin-bottom: 32.5px;
	position: relative;
	width: 180px;
	height: 180px;
}

.qrCodeWrapper img{
	display: block;
	width: 100%;
	height: auto;
}

#qrcodeImage {
	padding:20px;
}