﻿/* Prevent font scaling in landscape while allowing user zoom */
html {-webkit-text-size-adjust: 100%}

/* 取消連點放大 */
html, body {touch-action:manipulation}

/* body Style */
body {margin:0;padding:0;font-family:"微軟正黑體","Microsoft JhengHei";-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);color:#333;background:#FFF}

/* Disable Tap Hightligt Color */
* {-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent}
:focus {outline:none}

/* Fix FireFox placeholder line-height */
::-moz-placeholder {line-height:130%}

a {cursor:pointer}

/* Banner 樣式 */
#divTopBanner {width:100%;background:#fff;font-size:0px}
.cls_TopBanner {width:100%;max-width:992px;height:68px;text-align:left;margin:0 auto;padding:15px 0;box-sizing:border-box}
.cls_TopBanner img {width:82px;vertical-align:middle}

/* 背景 */
.BodyBG {background:url(../../Images/dw/BG.png) repeat-y center center;background-size:cover;min-height:calc(100vh - 67px - 68px)}

/* Footer */
.cls_Footer {background:#000;height:67px;padding:10px 0;box-sizing:border-box;text-align:center;font-size:0}
.cls_Footer img {margin:0px 12px 0px 16px;vertical-align:middle}
.cls_FooterLogo{line-height:1.6;color:#FFF;font-size:13px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;align-items:center}
.cls_FooterLink {margin-top:5px;line-height:1.6;color:#FFF;font-size:13px}
.cls_Footer a {margin:0 8px;color:#FFF;text-decoration:none;position:relative}
.cls_Footer a:after{content:'';position:absolute;top:3px;right:-8px;height:12px;width:1px;background-color:#999}
.cls_Footer a:last-child::after{display:none}
.cls_FooterPC {display:none}

/* BodyContainer */
.BodyContainer {width:100%;max-width:992px;margin:0px auto;padding:0}

/* 進度條 */
.cls_OpenProgress {width:100%;height:3px;background:#f5f5f5}
.cls_OpenProgressNow{font-size:0;width:20%;height:3px;background:#e8cb3e;background:-webkit-gradient(linear,left top,right top,from(#cd9b1d),to(#e8cb3e));background:linear-gradient(90deg,#cd9b1d 0,#e8cb3e 100%)}

/* ---------------------------- */
/* CheckBox/RadioBox Table 樣式 */
/* ---------------------------- */
.tb_Frame {border-collapse:collapse;border:none;display:table;float:left}
.tb_Frame * {cursor:pointer}
.tb_FrameICON {display:table-cell;border-collapse:collapse;border:none;text-align:left;vertical-align:top;font-size:0px;padding:0px;box-sizing:border-box;width:1px;white-space:nowrap}
.tb_FrameWORD {display:table-cell;font-size:16px;color:#111111;border:none;padding-left:8px;font-weight:bold;vertical-align:top;cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:left}
.tb_FrameWORD.C {color:#c38b47}
.tb_FrameWORD.J {text-align:justify;text-justify:inter-word}

/* CheckBox 樣式 */
.CB_Style {display:none}
.CB_Draw {border:1px solid #aaa;border-radius:3px;cursor:pointer}
.CB_Draw path {stroke-dashoffset:25;stroke-dasharray:25;/*transition:all .2s linear*/}
.CB_Style:checked ~ label .CB_Draw {border:1px solid #c38b47;background:#c38b47}
.CB_Style:checked ~ label .CB_Draw path {stroke-dashoffset:0}
.tb_Frame.disabled .CB_Draw {background:#e4e4e4;cursor:not-allowed}
.tb_Frame.disabled * {cursor:not-allowed}
.Err .CB_Draw {border:1px solid #ff6767}

/* RadioBox 樣式 */
.RB_Style {display:none}
.RB_Draw {border:1px solid #aaaaaa;border-radius:50%;cursor:pointer}
.RB_Draw circle:first-of-type {stroke-width:0;opacity:0;transition:all .1s linear}
.RB_Style:checked ~ label .RB_Draw {border:1px solid #aaaaaa}
.RB_Style:checked ~ label .RB_Draw circle:first-of-type {stroke-width:8;opacity:1}
.tb_Frame.disabled .RB_Draw {background:#e4e4e4;cursor:not-allowed}
.tb_Frame.disabled * {cursor:not-allowed}
.Err .RB_Draw {border:1px solid #ff6767}

/* 按鈕樣式 */
.cls_Buttons_Disabled{display:inline-block;margin:0 auto;padding:8px;box-sizing:border-box;width:100%;max-width:156px;height:40px;min-height:40px;font-weight:bold;font-size:1rem;border-radius:3px;border:0;cursor:not-allowed;text-align:center;color:#e3e3e3;-webkit-box-shadow:0 2px 3px 0 rgb(0 0 0 / 20%);box-shadow:0 2px 3px 0 rgb(0 0 0 / 20%);background-image:-webkit-gradient(linear,left top,left bottom,from(#b2b2b2),to(#818181));background-image:linear-gradient(to bottom,#b2b2b2,#818181);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.cls_Buttons_Next{display:inline-block;margin:0 auto;padding:8px;box-sizing:border-box;width:100%;max-width:156px;height:40px;min-height:40px;font-weight:bold;font-size:1rem;border-radius:3px;border:0;cursor:pointer;text-align:center;color:#784f1d;-webkit-box-shadow:0 2px 3px 0 rgb(0 0 0 / 20%);box-shadow:0 2px 3px 0 rgb(0 0 0 / 20%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f2cb91),to(#c29557));background-image:linear-gradient(to bottom,#f2cb91,#c29557);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.cls_Buttons_Cancel{display:inline-block;margin:0 auto;padding:8px;box-sizing:border-box;width:100%;max-width:156px;height:40px;min-height:40px;font-weight:bold;font-size:1rem;border-radius:3px;border:0;cursor:pointer;text-align:center;color:#e3e3e3;-webkit-box-shadow:0 2px 3px 0 rgb(0 0 0 / 20%);box-shadow:0 2px 3px 0 rgb(0 0 0 / 20%);background-image:-webkit-gradient(linear,left top,left bottom,from(#b2b2b2),to(#818181));background-image:linear-gradient(to bottom,#b2b2b2,#818181);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.cls_Buttons_Prev{display:inline-block;margin:0 auto;padding:8px;box-sizing:border-box;width:100%;max-width:156px;height:40px;min-height:40px;font-weight:bold;font-size:1rem;border-radius:3px;border:1px solid #d9d8d8;cursor:pointer;text-align:center;color:#726f6f;-webkit-box-shadow:0 2px 3px 0 rgb(0 0 0 / 20%);box-shadow:0 2px 3px 0 rgb(0 0 0 / 20%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f1f1f1),to(#d3d2d2));background-image:linear-gradient(to bottom,#f1f1f1,#d3d2d2);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.cls_Buttons_Next *, .cls_Buttons_Cancel *, .cls_Buttons_Prev * {cursor:pointer}
.cls_Buttons_Disabled * {cursor:not-allowed}

/* Input 樣式 */
.cls_Input{display:block;width:100%;color:#111;border:1px solid #aaa;border-radius:3px;padding:8px 10px;font-size:16px;font-weight:400;line-height:1.6;caret-color:#c38b47;box-sizing:border-box}
.cls_Input.C{border:1px solid #ff6767}
.cls_Input:focus {border:1px solid #C38B47}
.cls_Input.disabled{background:#e3e3e3;cursor:not-allowed}
.Err .cls_Input {border:1px solid #ff6767}

/* 備註說明標題 */
.cls_ItemTitle {display:table;font-size:0;border-collapse:collapse;border:0}
.cls_ItemTitle div {display:table-cell;border-collapse:collapse;border:0;font-size:0px;text-align:left;vertical-align:middle;height:22px}
.cls_ItemTitle div span {font-size:16px;font-weight:600;letter-spacing:0.4px;color:#172439;padding-left:14px;box-sizing:border-box}
.cls_ItemTitle div.ICON {width:30px;text-align:right}
.cls_ItemTitle div.ICON img {width:20px;cursor:pointer}

/* 頁面內容padding */
.cls_CTPadding {padding:0px 15px;box-sizing:border-box}

/* 按鈕區域 */
.cls_ButtonArea {padding:32px 0 50px 0;width:100%;text-align:center}
.cls_ButtonArea .cls_ButtonArea_L {width:50%;padding-right:10px;box-sizing:border-box;text-align:right}
.cls_ButtonArea .cls_ButtonArea_R {width:50%;padding-left:10px;box-sizing:border-box;text-align:left}

._Err {font-size:12px;color:rgba(230, 235, 245, 0.8);text-align:center}


/* ▁▁▁▁▁▁▂▄▆█ RWD Setting █▆▄▂▁▁▁▁▁▁ */

@media screen and (max-width: 1279px) {
    
    /* Banner 樣式 */
    .cls_TopBanner {height:56px;text-align:center}
    .cls_TopBanner img {width:65px;vertical-align:middle}
    
    /* 背景 */
    .BodyBG {min-height:calc(100vh - 67px - 56px)}

}

@media screen and (max-width: 767px) {
    /* Footer */
    .cls_FooterPC {display:none}
}
