@charset "utf-8";
/**************************************************
= root var()
********************/
:root {
  --bs-border-color: #ced4da;
  --s-font-title: 'Trebuchet MS', 'Myriad Pro', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Lucida Grande', 'Helvetica Neue', 'Arial', 'Microsoft Yahei', 'Microsoft JhengHei', 'Noto Sans TC', 'Lucida Sans Unicode', sans-serif;
}

/**************************************************
= fix bootstrap
********************/
.text-bg-secondary,
.btn-secondary,
.btn-outline-secondary:active,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus { color: #fff !important;}

.alert-primary { background-color: rgba(var(--bs-primary-rgb), 0.15); border-color: rgba(var(--bs-primary-rgb), 0.25);}

/**************************************************
= 頁面框架
********************/
html, body { height: 100% !important;}
body { display: flex !important; flex-direction: column !important;}
footer { margin-top: auto !important;}

.s-body { background-color: #fff;}
.s-wrap { position: relative;}

/* fix 程式端畫面 */
.s-body > .container { max-width: inherit !important; padding: 0 !important;}

/**************************************************
= 頁底區塊 (預設區塊/目前暫未使用)
.s-footer { position: relative; padding: 0.75rem 0; text-align: center; font-size: 0.9rem; color: var(--bs-gray-500); background-color: var(--bs-gray-200);}
.s-footer::before { content: ""; display: none; position: absolute; top: 0; left: 0; right: 0; height: 0.75rem; background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); opacity: 0.05;}
********************/

/**************************************************
= 頁頂區塊
********************/
.s-wrap-header { position: relative; padding: 1rem 1.5rem; font-family: var(--s-font-title); text-transform: uppercase; letter-spacing: 0.1rem; text-align: center; color: #fff; background-color: var(--bs-primary);}
.s-wrap-header * { margin: auto; padding: 0; line-height: normal; font-size: 1.25rem !important;}

/**************************************************
= 產品大圖
********************/
.s-wrap-theme { position: relative; margin: auto; margin-bottom: 1rem; padding: 0 1.5rem; text-align: center; background-color: var(--bs-primary);}
.s-wrap-theme::before { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 25%; background-color: #fff;}
.s-wrap-theme img { z-index: 1; position: relative; width: 100%; max-width: 800px; height: auto; margin: 0; padding: 0; border: 0;}

/**************************************************
= 內容區塊
********************/
.s-wrap-body { position: relative; max-width: 800px; margin: auto; padding: 1.5rem 1rem; text-align: center; justify-content: center;}
.s-wrap-body img { max-width: 100%;}

/* 強調文字 */
.s-highlight { margin-top: -0.1em; font-size: 1.15em; color: var(--bs-secondary);}

/* 按鈕列********************/
.s-block-btn { display: flex; justify-content: space-between; position: relative; max-width: 400px; margin: 3rem auto;}
.s-block-btn .btn { width: 100%; margin: 0 0.5rem 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-family: var(--s-font-title); letter-spacing: 0.1rem;}

@media (max-width: 320px) {
/*.s-block-btn { flex-direction: column;}*/
}

/* 驗證碼輸入框********************/
.s-verification-input { max-width: 400px; margin: auto;}
.s-verification-input input { padding: 0.75rem 0.25rem; text-align: center; text-transform: uppercase; font-size: 1.25rem; border-color: var(--bs-gray-400); border-radius: 0 !important;}

/* 驗證資訊********************/
.s-verification-info { display: flex; flex-direction: column; text-align: left;}
.s-verification-info .s-title { width: 39%; text-align: right; white-space: nowrap;}
.s-verification-info .s-text {}

@media (max-width: 320px) {
.s-verification-info .s-title { width: auto; text-align: inherit;}
}
@media (min-width: 576px) {
.s-verification-info .s-title { width: 46%;}
}
@media (min-width: 768px) {
.s-verification-info .s-title { width: 48%;}
}

/* 表單********************/
.s-form { position: relative; width: 90%; max-width: 500px; margin: auto; text-align: left;}
.s-form-item { position: relative; margin-bottom: 0.75rem;}
.s-form-item > .form-label { margin-bottom: 0.25rem; font-family: var(--s-font-title); font-size: 0.9rem;}
.s-form-check { position: relative; margin-top: 2rem;}
.s-form-btn { position: relative; margin: 2rem auto; text-align: center;}

/* 隱私權政策********************/
.s-block-privacy { position: relative; text-align: left;}
.s-block-privacy h2 { margin-top: 2rem; font-family: var(--s-font-title);}
.s-block-privacy .s-list { padding-left: 1.5rem;}
.s-block-privacy .s-list > li { position: relative; margin-bottom: 0.5rem;}