@charset "utf-8";
/*================================
  2021新版：
  ◆ 登入頁
================================*/

/* .service_content .serviceBtn{
  display: block;
  width: 80%;
  height: auto;
  color: var(--var(--normal-font-primary-color));
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  margin-top: 30px;
}

.serviceBtn .btnBox{
  display: block;
  width: 100%;
  text-align: center; 
  border-radius: 55px;
  color: var(--var(--normal-font-primary-color));
  position: relative;
  padding: 5px;
}



.serviceBtn .btnBox p{
  padding: 0;
  margin: 0;
  border-radius: 55px;
  color: var(--var(--normal-font-primary-color));
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.service_content .serviceBtn span{
  font-size: 14px;
}

.serviceBtn .btnBox::before{
  content: "";
  display: block;
  width: 50px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.btnBox.liveService{
  background: linear-gradient( to bottom ,#f1a5c3 ,#af2e91 );
}

.btnBox.qqService{
  background: linear-gradient( to bottom ,#65ceff ,#1944b9 );
}

.btnBox.weixinService{
  background: linear-gradient( to bottom ,#b0f8f8 ,#037868 );
}

.btnBox.liveService::before{
  background: url(../img/login/4.png) no-repeat center -10px;
  background-size: 80px;
  border-radius: 50%;
} 

.btnBox.qqService::before{
  background: url(../img/login/6.png) no-repeat center -10px;
  background-size: 80px;
  border-radius: 50%;
} 

.btnBox.weixinService::before{
  background: url(../img/login/5.png) no-repeat center -10px;
  background-size: 80px;
  border-radius: 50%;
}  */

/* 登入頁 */
.backgroundBGset {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  font-family: -apple-system,
      BlinkMacSystemFont,
      'Microsoft JhengHei',
      sans-serif;
  font-size: 14px;
  text-align: center;
}
.backgroundBGset {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


.loginPageBg {
  background: var(--login-loginPageBg-bg);
  background-size: var(--login-loginPageBg-bgSize);
  padding: 10% 8%;
  min-height: 800px;
}

.loginPageBg a:active,
.loginPageBg button:active,
.loginPageBg input[type="button"]:active {
  transform: scale(.9);
  outline: none;
  text-decoration: none;
}
.loginPageBg .logo {
  width: var(--menu-menu_head_logo-width);
  margin: 0px auto 20px;
  background: var(--menu-menu_head_title-bg);
  background-size: contain;
  height: 125px;
}
.loginPageBg .TG-logo {
  width: 90px;
  margin: 25px auto 50px;
}

.formBox{
  padding: 15px;
  background: var(--login-formBox-bg);
  border-radius: 10px;
  box-shadow: var(--login-formBox-shadow);
  border: var(--login-formBox-border);
}

form.loginForm{
  border-bottom: var(--login-loginForm-border-bottom);
}
form.loginForm .tab-group {
  width: var(--login-tab-group-width);
  margin: var(--login-tab-group-margin);
  border-radius: var(--login-tab-group-btn-bdrs);
  background: var(--login-tab-group-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
form.loginForm .tab-group span {
  flex: 1;
  border-radius: var(--login-tab-group-span-bdrs);
  padding: 5px 10px;
  color: #fff;
  background: var(--login-tab-group-btn);
  display: block;
  box-shadow:var(--login-tab-group-btn-boxshadow);;
}
form.loginForm .tab-group .register_btn {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  color: var(--login-tab-group-fontColor);
}
form.loginForm .form-group {
  position: relative;
  border-bottom: 1px solid var(--login-formgroup-borderColor);
  border-top:var(--login-formgroup-border-top);
  border-right:var(--login-formgroup-border-top);
  border-left:var(--login-formgroup-border-top);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0;
  /* margin: 1.75rem auto; */
  background: var(--login-formgroup-bg);
  margin: 10px auto 25px auto;
  box-shadow: var(--login-formgroup-shadow);
  border-radius: var(--login-formgroup-bdrs);
}

form.loginForm .form-group label {
  display: block;
  width: 20px;
  height: 20px;
  background: var(--gray12);
  flex: none;
  margin: 0 5px;
}

form.loginForm .form-group label[for="account"] {
  background: var( --login-itemicon-account);
  background-size: contain;
}

form.loginForm .form-group label[for="pwd"] {
  background: var( --login-itemicon-pwd);
  background-size: contain;
}
form.loginForm .form-group label[for="patternCode"] {
  background: var( --login-itemicon-patternCode);
  background-size: contain;
  opacity: 0.5;
}

form.loginForm .form-group input {
  border: 0;
  background: none;
  flex: 1;
  border-radius: 55px;
  font-size: 15px;
  color: var(--loginForm-fontColor);
}
form.loginForm .form-group input:-webkit-autofill,
form.loginForm .form-group input:autofill {
  background: none;
  
}

form.loginForm input.form-control:focus {
  border: 0;
  outline: none;
  box-shadow: none;
}

form.loginForm input::placeholder {
  color: var(--gray13);
  font-weight: 300;
}

form.loginForm .other-btns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: -10px;
}

form.loginForm .invalid-feedback {
  position: absolute;
  margin: 0;
  pointer-events: none;
}

form.loginForm .form-group .pwdShowHide {
  position: absolute;
  right: 0;
  width: 20px;
  height: 20px;
  border: 0;
  box-shadow: none;
  outline: none;
  margin-right: 20px;
  top: 25%;
  background: url("/assets/primary/normal/img/icons/pwdHide.png") center right no-repeat;
  background-size: 75% auto;
  cursor: pointer;
  display: var(--login-pwdHide-show);
}
form.loginForm .form-group .pwdShowHide.show{
  background: url("/assets/primary/normal/img/icons/pwdShow.png")center right no-repeat;
  background-size: 75% auto;
}

form.loginForm .form-group.patternCode .invalid-feedback {
  margin-left: -15%;
}
/* 蓋掉樣式 */
form.loginForm.was-validated .form-control:valid {
  border-color: unset;
  background-image: none;
  box-shadow: none;
}

.custom-switch {
  padding-left: 30px;
}

.login-switch-input {
  opacity: 0; 
  display: none;
}

.login-switch-input+.login-switch-label {
  margin-bottom: 0;
  vertical-align: middle;
  line-height: 20px;
  color: var(--login-label-color);
  font-size: 15px;
}

.login-switch-input+.login-switch-label::before {
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 5px;
  width: 20px;
  height: 20px;
  pointer-events: all;
  border-radius: var(--login-saveLogin-box-bdrs);
  background: var(--login-saveLogin-box-bg);
  border: var(--login-saveLogin-box-bd) solid 1px;
  transition: all .15s ease-in-out;
}

.login-switch-input:checked+.login-switch-label::before {
  background: var(--login-checked-bg);
  background-size: contain;
  transition: all .15s ease-in-out;
  border: 0;
}

.forgetPwd {
  color: var(--forgetPwd-fontColor);
  cursor: pointer;
  line-height: 20px;
  font-size: 15px;
  text-decoration:underline;
}

.verify {
  height: var(--login-verify_box-height);
  margin-top: 40px;
  padding: var(--login-verify_box-padding);
  margin-bottom: 30px;
}

.verify #verify_box {
  text-align: center;
  line-height: var(--login-verify_box-lineheight);
  height: var(--login-verify_box-height);
  font-size: 14px;
  color: var(--login-verify_box-fontColor);
  position: relative;
  border-radius: var(--login-verify_box-bdrs);
  border: var(--login-verify_box-bd);
  background: var(--login-verify_box-bg);
  box-shadow: 0 5px 5px var(--black-point-3);
}

.verify #verify_xbox {
  width: var(--login-verify-btn-width);
  height: calc( var(--login-verify_xbox-height) - 2px );
  text-align: center;
  font-size: 14px;
  color: var(--normal-font-primary-color);
  position: absolute;
  border-radius: var(--login-verify_box-bdrs);
  background: var(--verify_xbox-bg);
}

.verify #btn {
  cursor: pointer;
  width: var(--login-verify-btn-width);
  height: var(--login-verify-btn-height);
  border-radius: 25px;
  border-radius: var(--login-verify-btn-bdrs);
  background: var(--login-verify-btn-arrow);
  float: right;
  position: relative;
  top: var(--login-verify-btn-top);
  left: var(--login-verify-btn-left);
}

.verify #btn.ok {
  background: url(../img/login/verify-arror.svg) center no-repeat;
  background-size: cover;
}

.verify .continue {
  width: 120px;
  height: 50px;
  background-color: var(--gray15);
  margin: 0 70px;
  border: none;
  color: var(--blue5);
  font-size: 16px;
}

.verify .continue:hover {
  background-color: var(--red5);
  color: var(--normal-font-primary-color);
}

.verify #verifyText {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.verify .login-btn {
  border-radius: 5px;
  background: var(--login-tab-group-btn);
  color: #fff;
  padding: 15px;
  font-size: 18px;
}


.loginServBox{
  padding: 20px 0px 10px 0px;
  margin: 0px;
  line-height: 1.2;
  display: flex;
  flex-direction: row;
  gap: 10px;
  color:var(--loginServiceBox-fontColor);
}

.loginServBox .loginBRbtn{
  flex: 1;
}

.loginServBox a{
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 35px;
  color: var(--login-servbox-fontColor);
}
/*舊客服預計移除*/
.loginServBox a.service24H{
  background: var(--icon-service-b-primary) no-repeat top center;
  background-size: 30px;
}
/*新客服-非全天*/
.loginServBox a.service_primary {
  background: url("/assets/primary/normal/img/services/primary-service-e.png") no-repeat top center;
  background-size: 30px;
}
/*新客服-24h*/
.loginServBox a.service_advanced {
  background: url("/assets/primary/normal/img/services/advanced-service-e.png") no-repeat top center;
  background-size: 30px;
}

.loginServBox a.downloadAPP{
  background: url(../img/login/app_download.svg) no-repeat top center;
  background-size: 30px;
}

.loginServBox a.officialVideo{
  background: url(../img/login/icon-officialvideo.svg) no-repeat top center;
  background-size: 30px;
}
/* loginModal */

.loginModal .loginModal-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  position: absolute;
  border: 0;
  background: none;
}
.loginModal .modal-dialog {
  justify-content: center;
}
.loginModal .loginModal-content button,
.loginModal .loginModal-content a,
.loginModal .loginModal-content input {
  margin: 1rem;
  width: 120px;
  height: 120px;
  border: none;
  outline: none;
}
.loginModal .loginModal-content button:active,
.loginModal .loginModal-content a:active,
.loginModal .loginModal-content input:active {
  transform: scale(.9);
}
.wechatBtn {
  background: url("../img/login/wechat.svg") center no-repeat;
  background-size: contain;
}
.qqBtn {
  background: url("../img/login/qq.svg") center no-repeat;
  background-size: contain;
}
/*舊客服預計移除*/
.service24Btn {
  background: var(--icon-service-b-second) center no-repeat;
  background-size: contain;
}
/*新客服-非全天*/
.service_primary_Btn {
  background: url("/assets/primary/normal/img/services/primary-service-f.png") center no-repeat;
  background-size: contain;
}
/*新客服-24h*/
.service_advanced_Btn {
  background: url("/assets/primary/normal/img/services/advanced-service-f.png") center no-repeat;
  background-size: contain;
}

.mosgramBtn {
  background: url(../img/login/paopaotalk.png) center no-repeat;
  background-size: contain;
}
.popBtn {
  background: url("/assets/primary/normal/img/services/pop_icon.png") center no-repeat;
  background-size: contain;
}
.livechatBtn {
  background: url("/assets/primary/normal/img/services/livechat_icon.png") center no-repeat;
  background-size: contain;
}
.lineBtn {
  background: url("/assets/primary/normal/img/services/line_icon.png") center no-repeat;
  background-size: contain;
}
.miduokeBtn {
  background: url("/assets/primary/normal/img/services/miduoke_icon.png") center no-repeat;
  background-size: contain;
}
.androidBtn {
  background: var(--btn-androidBtn) ;
  background-size: contain;
}
.iosBtn {
  background: url("../img/login/ios.svg") center no-repeat;
  background-size: contain;
}
.loginModal~.modal-backdrop {
  background: var(--var(--normal-font-primary-color));
}

.loginModal~.modal-backdrop.show {
  opacity: .8;
}

.zaloBtn{
  background: var(--login-servicebtn-zalo) center no-repeat;
  background-size: contain;
}

/* forgetPwd */
.rules_title {
  color: var(--normal-font-primary-color);
  font-size: 20px;
  text-align: center;
  letter-spacing: 2px;
  padding-top: 12px;
}

.verificationContainer {
  margin-top: 85px;
  padding: 0px 15px;
  height: calc(100% - 85px);
  position: relative;
}

.form-verification {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.form-verification .form-group {
  background: var(--normal-font-primary-color);
  margin-bottom: 0;
  border-bottom: 1px solid var(--gray12);
  padding: 5px;
}

.form-verification .form-group label {
  padding: 7px 10px 0 25px;
}

.form-verification .form-group input,
.form-verification .form-group .form-control {
  border: 0;
  box-shadow: none;
  text-align: right;
}

.form-verification input#patternCode {
  width: 100%;
}

#Modal_verificationCode .text_fail {
  width: 100%;
  text-align: center;
  font-size: 18px;
  letter-spacing: 2px;
  background: var(--normal-header-primary-bg);
  color: var(--normal-font-primary-color);
  line-height: 40px;
}

#Modal_coverchgall .order_content{
  width: 95%;
  margin: 0 auto;
  min-height: 300px;
  border-radius:10px;
  overflow:hidden;
  top: 50%;
  transform: translateY(-75%);
  border: 0;
  background: var(--normal-font-primary-color);
}

#Modal_verificationCode #codeError .errorInfo{
  width: calc(100% - 85px);
  margin: 45px auto;
  font-size: 1.3em;
  color: var(--negative-fourth-color);
  text-align: center;
  font-weight: 700;
}

.verificationContainer .certificateStr.form-group {
  padding: 5px 20px 5px 5px;
}

.certificateStr .btn-info{
  color: var(--normal-font-primary-color);
  background: var(--normal-header-primary-bg);
  border-color: var(--blue6);
}

.uxErrorPageLeftArrow {
  position: absolute;
  left: 10px;
  top: 0px;
  width: 50px;
}

.uxErrorPageLeftArrow .fa-angle-left:before {
  font-size: 28px;
  position: relative;
  color:var(--normal-amount-font);
  left: auto;
  top: auto;
}

.modal.intelligentModal {
  z-index: 1061;
}

.modal.intelligentModal .modal-dialog {
  top: calc(50% - 285px);
}

.modal.intelligentModal .modal-body {
  padding: 0;
  text-align: center;
  border-radius: 5px 5px 0 0;
}

.modal.intelligentModal .modal-body img {
  width: 100%;
  height: auto;
  margin: auto;
  border-radius: 5px 5px 0 0;
}

.modal.intelligentModal .modal-footer {
  padding: 0;
  text-align: center;
  border: 0;
}

.modal.intelligentModal .modal-footer .btn {
  width: 100%;
  border: 0;
  color:var(--normal-amount-font);
  font-size: 16px;
  padding: 12px;
  cursor: pointer;
}

.modal.intelligentModal .modal-border {
  background: var(--modal-intelligentModal-modal-border-bg);
  height: 5px;
}

#Modal_bonusCredit {
  z-index: 1065;
}

.verificationContainer {
  position: relative;
}

.verificationContainer .btnsGroup{
  width: 100%;
  position: absolute;
  bottom: 40px;
  left: 0;
}

/* 2021 新增語言選擇 */
.login-langueSelect{
  position: fixed;
  top:50px;
  right: 8%;
  width: 50px;
  height: 30px;
}

.login-langueSelect .select-national{
  display: block;
  width: 100%;
  height: 30px;
  border: 0;
  background-image: url("../img/arrow_down_gray.svg") no-repeat right center;
  background-size: 12px;
}

#Modal_verificationCode .btnsGroup.fixed-btm{
  bottom: 0;
}

/*20210521 選擇語言*/
button.select-lang{
  width: 60px;
  height: 39px;
  padding: 3px 5px;
  position:absolute;
  right:8%;
  top: 45px;
}

button.select-lang span{
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width:100%;
  vertical-align: middle;
}

button.select-lang span::after{
  content: "";
  width: 0;
  height: 0;
  margin-left: 7px;
  border-style: solid;
  border-width: 6px 4px 0 4px;
  border-color: var(--normal-font-fifth-color) transparent transparent transparent;
  opacity: 0.5;
}

button.select-lang span img{
width:26px;
vertical-align: middle;
}

#selectLangBox{
  background: var(--black-point-8);
}

#selectLangBox .modal-dialog{
  margin: 15px;

}
#selectLangBox .modal-dialog .modal-content{
  margin-top: 130px;

}
#selectLangBox ul.langList{
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 15px;
}

#selectLangBox ul.langList li{
  line-height:20px;
  padding: 25px 25%;
  display:grid;
  grid-template-columns: 30px 1fr;
  align-items:center;
  gap:15px;
  text-align:center;
}

#selectLangBox ul.langList li img{
  width: 100%;
  margin: 0 auto;
}

/* 20230216 增加unlogin狀態 */
.loginPageBg .btn-browseFirst{
  position: absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  display:inline-block;
  text-decoration: underline;
  padding:var(--login-btn-browsefirst-pd);
  background:var(--login-btn-browsefirst-bg);
  border-radius: var(--login-btn-browsefirst-bdrs);
  color: var(--login-btn-browsefirst-fontColor);
}