body .layer-nobg {
  box-shadow: 0;
  background-color: transparent;
}

input {
  box-shadow: 0 1000px #fff inset;
  -moz-box-shadow: 0 1000px #fff inset;
  -webkit-box-shadow: 0 1000px #fff inset;
}

.xajaxlogin .normal-login-title {
  margin: 0 35px;
  width: 26px;
  height: 26px;
  background: url('newpop.png') -10px -164px;
  cursor: pointer;
}

.xajaxlogin .normal-imgs {
  width: 400px;
  height: auto;
  float: left;
}

.xajaxlogin .normal-imgs img {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 10px 0 10px;
  vertical-align: middle;
}

.xajaxlogin .normal {
  width: 400px;
  height: auto;
  box-sizing: border-box;
  float: left;
  padding-top: 46px;
}

.xajaxlogin .normal .normal-login {
  display: block;
  margin: 0 auto;
  width: 300px;
}

.layui-layer-setwin .layui-layer-close1 {
  transform: translate(-5px,5px) !important;
  opacity: 0.7 !important;
  background-position: -149px -31px !important;
}

.layui-layer-setwin .layui-layer-close1:hover {
  opacity: 1 !important;
}

.layui-layer-page {
  border-radius: 15px !important;
  overflow: hidden !important;
}

.layui-layer-content {
  overflow: visible !important;
}

.three-login {
  width: 800px !important;
  height:auto !important;
  border-radius: 15px !important;
  overflow: hidden !important;
}

.layui-layer-setwin .layui-layer-close1 {
  top: 15px !important;
  right: 15px !important;
}

.layui-layer-content {
  padding: 0 !important;
  overflow: hidden !important;
}

.layui-layer-page {
  background: transparent !important;
  box-shadow: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}



.xajaxlogin,
  .three-login {
  position: relative !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: 800px !important;
  height: auto !important;
  background: #fff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.xajaxlogin .normal-imgs {
  display: flex !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 350px !important;
  height: 100% !important;
  color: #fff !important;
  background: linear-gradient(180deg,#007bff 0%,#00d2ff 100%) !important;
  align-items: center !important;
  bottom: 0 !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  justify-content: center !important;
}

.three-login .normal {
  display: flex !important;
  padding: 40px !important;
  width: calc(100% - 350px) !important;
  height: 100% !important;
  box-sizing: border-box !important;
  flex-direction: column !important;
  justify-content: center !important;
  margin-left: 350px !important;
}

.xajaxlogin .normal-imgs img,
  .xajaxlogin .normal-imgs a {
  display: none !important;
}

.welcome-text {
  padding: 20px !important;
  text-align: center !important;
  color: #fff !important;
}

.welcome-text h3 {
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  margin-bottom: 10px !important;
}

.welcome-text p {
  line-height: 1.6 !important;
  opacity: 0.8 !important;
  font-size: 14px !important;
}

.login-from label {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  margin-bottom: 20px !important;
}

.login-from i {
  position: absolute !important;
  top: 50% !important;
  left: 15px !important;
  color: #007bff !important;
  transform: translateY(-50%) !important;
  font-style: normal !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

.monitor-input1,
  .monitor-input2 {
  padding: 14px 16px 14px 45px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #f9f9f9 !important;
  border: 1px solid #e0e0e0 !important;
  transition: all 0.3s ease !important;
  border-radius: 10px !important;
}

.intl-tel-input {
  display: block !important;
  width: 100% !important;
}

.monitor-input1:focus,
  .monitor-input2:focus {
  background: #fff !important;
  box-shadow: 0 4px rgba(0,123,255,0.1) !important;
  border-color: #007bff !important;
}

.xajaxlogin .normal .normal-login .login-from .login-password {
  position: relative;
}

.xajaxlogin .normal .normal-login .login-from .login-password i {
  display: inline-block;
  position: absolute;
  top: 50%;
  width: 15px;
  height: 15px;
  background: url(/user/images/personaluser/loginv2/loginv2-1.png) center no-repeat;
  cursor: pointer;
  margin-top: -7.5px;
  right: 0;
}

.xajaxlogin .normal .normal-login .login-from .login-yzm {
  display: none;
  position: relative;
}

.xajaxlogin .normal .normal-login .login-from .login-yzm button,
  .xajaxlogin .normal .normal-login .login-from .login-yzm #sendYzm {
  display: block;
  position: absolute;
  top: 50%;
  width: 90px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #999;
  background: none;
  border: 1px solid #e7e7e9;
  cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
  margin-top: -22px;
  right: 0;
}

.xajaxlogin .normal .normal-login .login-from .login-yzm button:hover,
  .xajaxlogin .normal .normal-login .login-from .login-yzm #sendYzm:hover {
  color: #003663;
  border: 1px solid #003663;
}



.xajaxlogin .normal .normal-login .login-btn a {
  display: block;
  margin: 0 auto;
  width: 300px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  background-color: #003663;
  border-radius: 4px;
  font-size: 16px;
}

.xajaxlogin .normal .normal-login .login-btn .login-btn-active {
  color: #fff;
  background-color: #c8001f;
}

.xajaxlogin .normal .normal-login .login-tips {
  display: none;
  padding: 0;
  line-height: 14px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.xajaxlogin .normal .normal-login .login-tips b {
  color: #003663;
  font-weight: normal;
}



.xajaxlogin .normal .login-style .login-style-title {
  line-height: 14px;
  color: #999;
  font-size: 14px;
  margin-top: 20px;
}

.xajaxlogin .normal .login-style .login-style-title b {
  display: inline-block;
  margin: 0 19px;
  width: 96px;
  height: 1px;
  background-color: #E7E7E9;
  vertical-align: middle;
}

.xajaxlogin .normal .login-style .login-style-contant {
  margin: 34px auto;
  font-size: 0;
}

.xajaxlogin .normal .login-style .login-style-contant a {
  display: inline-block;
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.xajaxlogin .other-normal .login-style .login-style-contant a {
  margin: 0 15px;
}

.xajaxlogin .normal .login-style .login-style-contant a img {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.xajaxlogin .normal .login-style .login-style-text {
  position: absolute;
  width: 400px;
  text-align: center;
  color: #999;
  bottom: 30px;
  font-size: 12px;
  right: 0;
}

.xajaxlogin .normal .login-style .login-style-text a {
  color: #003663;
}

.intl-tel-input.separate-dial-code .selected-dial-code {
  color: #333;
}


.three-login-notips a {
  color: #003663;
  font-weight: bold;
}

.three-login .normal {
  position: relative;
  height: 520px;
  box-sizing: border-box;
}

.three-login .normal .login-style {
  padding-top: 27px;
}

.xajaxlogin .normal .login-style .login-style-title b {
  background-color: #E7E7E9;
}



#loginBtn {
  color: #fff !important;
  background: #007bff !important;
  border: 0 !important;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
  cursor: pointer !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

#loginBtn:hover {
  background: #0056b3 !important;
  box-shadow: 0 6px 15px rgba(0,123,255,0.3) !important;
  transform: translateY(-2px) !important;
}

#loginBtn:active {
  box-shadow: 0 2px 5px rgba(0,123,255,0.3) !important;
  transform: translateY(0) !important;
}

.login-from label {
  display: flex !important;
  position: relative !important;
  width: 100% !important;
  align-items: center !important;
  margin-bottom: 20px !important;
}

.intl-tel-input {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
}

.login-from i,
  .login-from .icon-lock {
  position: absolute !important;
  top: 50% !important;
  left: 15px !important;
  margin: 0 !important;
  color: #007bff !important;
  transform: translateY(-50%) !important;
  font-size: 16px !important;
  pointer-events: none;
  z-index: 10 !important;
}

.monitor-input1,
  .monitor-input2 {
  padding: 14px 16px 14px 45px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.three-login-notips {
  display: flex !important;
  text-align: left !important;
  color: #666 !important;
  align-items: center !important;
  font-size: 13px !important;
  justify-content: flex-end !important;
  margin-bottom:15px !important;
}

.three-login-notips a {
  display: inline-flex !important;
  padding: 0 12px !important;
  color: #666 !important;
  transition: color 0.3s ease;
  align-items: center !important;
  text-decoration: none !important;
}

/* 針對 Chrome, Safari, Edge, Opera */
.monitor-input1::-webkit-input-placeholder,
.monitor-input2::-webkit-input-placeholder {
    color: #ccc !important; /* 你可以根據需求調整，#ccc 比原來的更淺 */
    opacity: 1; /* 確保顏色不會被瀏覽器預設透明度影響 */
}

/* 針對 Firefox 19+ */
.monitor-input1::-moz-placeholder,
.monitor-input2::-moz-placeholder {
    color: #ccc !important;
    opacity: 1;
}

/* 針對 IE 10+ */
.monitor-input1:-ms-input-placeholder,
.monitor-input2:-ms-input-placeholder {
    color: #ccc !important;
}

/* 針對 Edge */
.monitor-input1::-ms-input-placeholder,
.monitor-input2::-ms-input-placeholder {
    color: #ccc !important;
}
.three-login-notips a i {
  color: #007bff !important;
  font-size: 14px !important;
  margin-right: 6px !important;
}

.three-login-notips a:hover {
  color: #007bff !important;
}

.login-style-title {
  display: flex !important;
  margin: 25px 0 !important;
  text-align: center !important;
  color: #999 !important;
  align-items: center !important;
  font-size: 13px !important;
}

.login-style-title b {
  height: 1px !important;
  background: #e0e0e0 !important;
  flex: 1 !important;
}

.login-style-title span {
  padding: 0 15px !important;
  color: #777 !important;
  font-weight: 500 !important;
}

.login-style {
  text-align: center !important;
}

.login-style-text {
  line-height: 1.5 !important;
  color: #999 !important;
  font-size: 12px !important;
}

.login-style-text a {
  color: #007bff !important;
  transition: color 0.3s ease;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.login-style-text a:hover {
  color: #0056b3 !important;
  text-decoration: underline !important;
}

.xajaxlogin {
  position: relative !important;
  border-radius: 15px !important;
  overflow: hidden !important;
}

.my-close-btn {
  position: absolute !important;
  top: 10px !important;
  width: 28px !important;
  height: 28px !important;
  line-height: 26px !important;
  text-align: center !important;
  color: #fff !important;
  background: rgba(0,0,0,0.15) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  font-family: Arial,sans-serif !important;
  font-size: 20px !important;
  right: 10px !important;
  z-index: 9999 !important;
}

.my-close-btn:hover {
  background: rgba(0,0,0,0.3) !important;
  transform: scale(1.1);
}

.layui-layer-dialog .layui-layer-content {
  padding: 20px !important;
  background: #fff !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.layui-layer-dialog {
  width: auto !important;
  border-radius: 5px !important;
  min-width: 260px !important;
}

.layui-layer-dialog .layui-layer-ico {
  display: inline-block !important;
}
/* LINE 登入按鈕美化與間距微調 */
a[href*="line_login.php"] {
    background-color: #06C755 !important;
    color: white !important;
    padding: 12px !important; /* 增加高度與 Google 按鈕對齊 */
    border-radius: 8px !important; /* 圓角與整體一致 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-decoration: none !important;
    margin-top: 15px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: background-color 0.2s ease !important;
}

a[href*="line_login.php"]:hover {
    background-color: #05a346 !important;
}
/* --- 新增：登入按鈕上方的選項列 --- */
.login-options-bar {
    display: flex !important;
    justify-content: space-between !important; /* 左右對齊 */
    align-items: center !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    font-size: 13px !important;
}

/* 1. 確保勾選框不會被內陰影覆蓋成白色 */
.remember-me input[type="checkbox"] {
    appearance: checkbox !important; /* 強制恢復瀏覽器原生外觀 */
    -webkit-appearance: checkbox !important;
    box-shadow: none !important;      /* 殺掉那條 1000px 的白色內陰影 */
    width: 14px !important;           /* 強制給予固定寬度，不要繼承 100% */
    height: 14px !important;
    margin-right: 8px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    display: inline-block !important; /* 確保它不會像普通 input 一樣佔滿一行 */
}

/* 2. 微調文字對齊，確保「記住我」三個字跟框框在同一水平線 */
.remember-me {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    color: #777 !important;
    font-size: 13px !important;
    user-select: none !important; /* 防止點擊太快選到文字 */
}

.forget-pwd {
    color: #999 !important;
    text-decoration: none !important;
}

.forget-pwd:hover {
    color: #007bff !important;
}
/* 針對手機版 850px 以下 */
@media screen and (max-width: 850px) {
    /* 1. 強制關閉藍色區塊：解決重疊問題 */
    .xajaxlogin .normal-imgs, 
    .welcome-text,
    .xajaxlogin .normal-imgs * {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        visibility: hidden !important;
    }

    /* 2. 重置主容器：確保是純白底，且不被原本的 800px 限制 */
    .xajaxlogin, 
    .three-login,
    .layui-layer-page .layui-layer-content {
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 200px !important;
        background: #fff !important;
        position: relative !important;
        display: block !important;
    }

    /* 3. 重置表單區塊：解決「太寬」和「偏移」的問題 */
    .three-login .normal {
        display: block !important;
        width: 100% !important; /* 取消原本的 calc(100% - 350px) */
        margin-left: 0 !important; /* 殺掉原本的 350px 偏移 */
        padding: 40px 25px !important; /* 增加左右邊距，讓輸入框「看起來」不那麼寬 */
        position: static !important;
        box-sizing: border-box !important;
    }

    /* 4. 解決輸入框和按鈕「撐破螢幕」的問題 */
    .xajaxlogin .normal .normal-login {
        width: 100% !important; /* 殺掉原本的 300px 固定寬度 */
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .login-from,
    .login-from label,
    .monitor-input1, 
    .monitor-input2,
    #loginBtn,
    .xajaxlogin .normal .normal-login .login-btn a {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important; /* 關鍵：確保 padding 不會往外撐 */
        margin: 0 0 15px 0 !important;
    }

/* 4.5. 徹底統一所有 ICON 對齊與位置 */
    .login-from label {
        display: flex !important;
        align-items: center !important;
        position: relative !important;
    }

    /* 使用通配符選擇器，確保無論是 <i> 還是 .fa 都會被強制歸位 */
    .login-from label i,
    .login-from label .fa,
    .login-from .login-password i,
    .login-from .login-username i {
        position: absolute !important;
        left: 15px !important;       /* 強制所有 ICON 靠左 */
        right: auto !important;      /* 移除任何右側對齊設定 */
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin-top: -7px !important; 
        
        /* 確保字體垂直居中與文字一致 */
        vertical-align: middle !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: none !important;
        z-index: 10 !important;
    }

    /* 確保所有輸入框的內邊距統一，給圖示留出空間 */
    .monitor-input1, 
    .monitor-input2,
    .login-from input {
        padding-left: 45px !important; /* 確保輸入框文字不會被圖示擋住 */
        box-sizing: border-box !important;
    }

    /* 5. 修正底部文字重疊 */
    .login-style-title,
    .login-operation,
    .login-style-text {
        position: static !important;
        width: 100% !important;
        margin-top: 15px !important;
        text-align: center !important;
    }

    /* 6. 關閉按鈕修正：改為深色，否則在白底看不見 */
    .my-close-btn {
        color: #999 !important;
        background: none !important;
        font-size: 24px !important;
    }
/* 當彈窗被 Layer 插件打開時，才顯示內容 */
    .layui-layer-content .xajaxlogin,
    .layui-layer-content .three-login {
        display: block !important;
    }

    /* 修正你看到的「在底部出現」的問題 */
    .xajaxlogin {
        position: absolute; /* 或是 fixed */
        visibility: hidden; /* 預設完全不可見 */
    }

    /* 只有當它被包裹在 layer 彈窗層裡時，才恢復正常 */
    .layui-layer .xajaxlogin {
        visibility: visible !important;
        position: static !important;
    }
    /* 1. 針對 Google 按鈕的最外層容器 */
    [id^="g_id_onload"], 
    .g_id_signin,
    .S97Ssb-bN9S7c, /* Google 內部常用的 Class */
    iframe[src^="https://accounts.google.com"] {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* 2. 針對 Google iframe 內部的按鈕容器（如果能滲透進去的話） */
    .nsm7Bb-HzV7m-LgbsSe {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. 如果你是用自定義容器包裹 Google 按鈕，請確保該容器也是滿版 */
    .other-login-way, 
    .login-style-contant,
    div[data-type="standard"] {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        padding: 0 !important;
    }
}