﻿/* 置頂高度 */
.cls_MarginTop{height:50px}

/* 身分證字號、驗證碼 之間高度 */
.cls_Height{height:20px}

/* 身分證字號 */
.cls_Input_IDNO {width:100%;max-width:540px;position:relative;margin:0px auto}
.cls_Input_IDNO>input[type="text"]{font-size:16px;font-weight:bold;color:#333;width:100%;padding:10px 15px 10px 10px;box-sizing:border-box;letter-spacing:1px;border:0;border-bottom:1px solid #ccc;}
.cls_Input_IDNO>input[type="text"] ~ .cls_Focus_Border{position:absolute;bottom:0;left:0;width:0;height:2px;background-color:#39f;transition:.4s}
.cls_Input_IDNO>input[type="text"]:focus ~ .cls_Focus_Border{width:100%;transition:.4s}

/* 首頁內容區塊 */
.cls_Index_Input_Area {width:100%;max-width:345px;margin:0px auto}

/* 出生年月日 - 寬度 */
.cls_Birthday_Year_W {width:40%}
.cls_Birthday_Slash {color:#172439;font-weight:bold;font-size:21px;width:9%;text-align:center;vertical-align:bottom;padding-bottom:5px}
.cls_Birthday_MonthDay_Width {width:21%}


/* 手機號碼 */
.cls_Input_Phone {width:100%;max-width:600px;position:relative;margin:0px auto;}
.cls_Input_Phone>input[type="text"]{font-size:16px;font-weight:bold;color:#333;width:100%;padding:10px 15px 10px 40px;box-sizing:border-box;letter-spacing:1px;border:0;border-bottom:1px solid #ccc;background:url(../../Images/Process/ICON_Mobile.png) 6px 7px no-repeat;border-radius:0;}
.cls_Input_Phone>input[type="text"] ~ .cls_Focus_Border{position:absolute;bottom:0;left:0;width:0;height:2px;background-color:#39f;transition:.4s}
.cls_Input_Phone>input[type="text"]:focus ~ .cls_Focus_Border{width:100%;transition:.4s}

/* 點此發送認證碼、點此認證 按鈕 */
.cls_Button_S,
.cls_Button_S:after {background:#E85231;cursor:pointer;margin:0 auto;padding:5px 0;width:130px;box-sizing:border-box;color:#fff;font-size:15px;font-weight:bold;white-space:nowrap;text-align:center;letter-spacing:1px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.cls_Button_S:hover {background:rgba(232,82,49,0.9)}
.cls_Button_S:active{background:#E85231}

/* 請輸入認證碼 */
.cls_Input_OTP {width:100%;max-width:600px;position:relative;margin:0px auto;}
.cls_Input_OTP>input[type="text"]{font-size:16px;font-weight:bold;color:#333;width:100%;padding:10px 15px 10px 40px;box-sizing:border-box;letter-spacing:1px;border:0;border-bottom:1px solid #ccc;background:url(../../Images/Process/ICON_OTP.png) 6px 7px no-repeat;border-radius:0;}
.cls_Input_OTP>input[type="text"] ~ .cls_Focus_Border{position:absolute;bottom:0;left:0;width:0;height:2px;background-color:#39f;transition:.4s}
.cls_Input_OTP>input[type="text"]:focus ~ .cls_Focus_Border{width:100%;transition:.4s}

/* 設定線上開戶密碼 */
.cls_Input_PA {width:100%;max-width:600px;position:relative;margin:0px auto;}
.cls_Input_PA>input[type="password"]{font-size:16px;font-weight:bold;color:#333;width:100%;padding:10px 15px 10px 40px;box-sizing:border-box;letter-spacing:1px;border:0;border-bottom:1px solid #ccc;background:url(../Images/Process/ICON_LOCK.png) 6px 7px no-repeat;border-radius:0;}
.cls_Input_PA>input[type="password"] ~ .cls_Focus_Border{position:absolute;bottom:0;left:0;width:0;height:2px;background-color:#39f;transition:.4s}
.cls_Input_PA>input[type="password"]:focus ~ .cls_Focus_Border{width:100%;transition:.4s}

/* 設定線上開戶密碼 - 新樣式 */
.cls_Input_PA_New {width:100%;max-width:600px;position:relative;margin:0px auto;}
.cls_Input_PA_New>input[type="password"],.cls_Input_PA_New>input[type="text"]{font-size:16px;font-weight:bold;color:#333;width:100%;padding:10px 15px 10px 15px;box-sizing:border-box;letter-spacing:1px;border:0;border-bottom:1px solid #ccc;border-radius:0;}
.cls_Input_PA_New>input[type="password"] ~ .cls_Focus_Border,.cls_Input_PA_New>input[type="text"] ~ .cls_Focus_Border{position:absolute;bottom:0;left:0;width:0;height:2px;background-color:#39f;transition:.4s}
.cls_Input_PA_New>input[type="password"]:focus ~ .cls_Focus_Border,.cls_Input_PA_New>input[type="text"]:focus ~ .cls_Focus_Border{width:100%;transition:.4s}
.cls_Input_PA_New .title {position:absolute;top:-18px;left:0px;font-family:"微軟正黑體","Microsoft JhengHei";color:#494f58;font-size:14px;letter-spacing:.5px;white-space:nowrap}

/* 西元出生年月日 */
.cls_Input_Birthday {width:100%;max-width:540px;position:relative;margin:0px auto;}
.cls_Input_Birthday>input[type="text"]{font-size:16px;font-weight:bold;color:#333;width:100%;padding:10px 15px 10px 40px;box-sizing:border-box;letter-spacing:1px;border:0;border-bottom:1px solid #ccc;background:url(../Images/Main/ICON_Birthday.png) 6px 7px no-repeat;border-radius:0;}
.cls_Input_Birthday>input[type="text"] ~ .cls_Focus_Border{position:absolute;bottom:0;left:0;width:0;height:2px;background-color:#39f;transition:.4s}
.cls_Input_Birthday>input[type="text"]:focus ~ .cls_Focus_Border{width:100%;transition:.4s}

/* 下載圖示 */
.cls_ICON_File{padding:0px;width:1px;white-space:nowrap;vertical-align:middle}
.cls_ICON_FileWording{padding:0px;text-align:left;vertical-align:middle;padding-left:10px;text-align:justify;text-justify:inter-ideograph;}

/* QR PDF 同意 Table 樣式 */
.tb_Agree    {border-collapse:collapse;border:none;font-size:16px;margin:5px auto 20px auto;}
.tb_Agree th {border-collapse:collapse;border:none;font-size:0px;font-weight:normal;text-align:left;vertical-align:top;width:1px;white-space:nowrap;padding:0px;}
.tb_Agree td {border-collapse:collapse;border:none;text-align:justify;text-justify:inter-ideograph;vertical-align:top;padding:0px;}

/* 顯示、隱藏密碼 */
.cls_ReMaskPW {position:absolute;right:0;bottom:2px;padding:5px 5px 4px 10px;background:#FFF;cursor:pointer;z-index:2;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

/* 提示訊息框 */
.WarningContent {position:absolute;z-index:2;margin:0;padding:3px 8px;box-sizing:border-box;top:150%;left:0;font-size:14px;color:#FFF;text-align:justify;text-justify:inter-word;background:#DE577B;border:1px solid #f97583;cursor:default;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;max-width:300px;opacity:0;visibility:hidden;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:all .1s linear;display:inline-block}

/* 提示訊息框 Arrow */
.WarningContent::before {content:'';bottom:100%;left:12px;border:solid transparent;height:0;width:0;position:absolute;pointer-events:none;border-color:transparent;border-bottom-color:#DE577B;border-width:6px;transition:all .1s linear}

/* 檢核錯誤提示 - 顯示提示訊息框 */
.ERR .WarningContent {opacity:1;visibility:visible;top:110%}


/* ▁▁▁▁▁▁▂▄▆█ RWD Setting █▆▄▂▁▁▁▁▁▁ */
@media screen and (max-width: 600px) {
    /* 置頂高度 */
    .cls_MarginTop{height:20px}
}
@media screen and (max-width: 460px) {
    /* 下載圖示 */
    .cls_ICON_File{padding:0px;width:1px;white-space:nowrap;vertical-align:top;}
}
@media screen and (max-width: 350px) {
    /* 初次設定或忘記進度查詢密碼 按鈕 */
    .cls_Button_ForgetPA{padding:3px 4px 4px 4px;width:115px;font-size:13px;right:0px;}
    .cls_Button_ForgetPA,
    .cls_Button_ForgetPA:after {margin-bottom:2px;}
}
@media screen and (max-width: 320px) {
    .cls_Button_S{padding:5px 0 6px 0;width:115px;font-size:13px;}

    /* 出生年月日 - 寬度 */
    .cls_Birthday_Year_W {width:42%}
    .cls_Birthday_MonthDay_Width {width:20%}
    .cls_Index_Notice_Line {padding:0px 5px}
}
