@charset "utf-8";
/* ============================================================
   Contact Us 系列頁面共用樣式
   對應頁面：
     contact/rma_contact.php      分流頁（#contactUs）
     contact/contact_form.php     Business & Partnerships（#contactUs）
     rma/rma_form_global.php      Technical Support & RMA（#contactUs）

   本檔只補「作用域專屬」與「本系列新增」的樣式。
   以下版型直接沿用 css/default.css，不要在這裡重寫：
     .topHeader / .headerWrapper / .headerWordContainer / .headerWord  banner
     .pageTitleBox / .h2_hr                                            區塊標題＋粉紅線
     .supportIcon / .supportContrnt / .supportText / .supportBtn       卡片內部
     .a_center / .r_center                                             置中輔助
   ★ 使用前提：頁面必須引用 css/default.css
   ============================================================ */

/* ---------- 共用字體 -------------------------------------- */
/* 頁面需載入 Noto Sans TC 的 400/700/900 三種字重，
   只載 400 的話粗體會變成瀏覽器合成的偽粗體，看起來不夠重 */
#contactUs .headerWord,
#contactUs .faqSupportWarp {
  font-family: "Noto Sans TC", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    '微軟正黑體', "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

/* ---------- Banner ---------------------------------------- */
/* default.css 的 .headerWrapper 沒有 position，.a_center 會以 .topHeader
   為基準（含 64px padding-top）而偏移，這裡補回來 */
#contactUs .headerWrapper {
  position: relative;
  background: url(../images/download_banner.jpg) no-repeat center center;
  background-size: cover;
}

/* 覆寫 default.css 的 font-weight:bold，改用真正的 900 字重 */
#contactUs .headerWord {
  font-weight: 900;
  /* tw/css/default.css 的 .headerWord 用 text-shadow，與 root 版的
     drop-shadow 不同。這兩行是中文站專屬，用來對齊英文站的視覺 */
  text-shadow: none;
  filter: drop-shadow(0px 0px 3px black) drop-shadow(0px 0px 5px black);
}

/* ---------- 內容區底色 ------------------------------------ */
/* 麵包屑那條與下方卡片區塊統一底色，避免出現一條白帶。
   註：改用 .cuPathBar 直接指容器。掛在 #contactUs #content 上不會生效
   （原因不明，所有載入的 CSS 都查過沒有競爭規則），不要改回去。 */
#contactUs .cuPathBar {
  background: #F2F3F5;
}

/* ---------- 區塊容器（複製 default.css 的 #FAQ 版本）-------- */
#contactUs .pageExtraWarp {
  position: relative;
  width: 100%;
  height: auto;
  background: #F2F3F5;
  padding: 0 0 60px 0;
}

/* flex 容器：讓並排的卡片自動等高 */
#contactUs .faqSupportWarp {
  position: relative;
  margin: 0 auto;
  width: 80%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
@media screen and (max-width: 1200px) {
  #contactUs .faqSupportWarp { width: 90%; }
}

#contactUs .faqSupportBox {
  position: relative;
  width: 48%;
  height: auto;
  margin: 20px 0.5% 0 0.5%;
  padding: 3% 2%;
  background: #fff;
  text-align: left;
  -webkit-transition: -webkit-box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
  -o-transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
  transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
}
#contactUs .faqSupportBox:hover {
  -webkit-box-shadow: 0px 5px 12px 3px rgba(144, 142, 142, 0.8);
  box-shadow: 0px 5px 12px 3px rgba(144, 142, 142, 0.8);
}
@media screen and (max-width: 800px) {
  #contactUs .faqSupportBox { width: 100%; }
}

/* 整張卡片可點：連結不要帶預設色與底線，並撐滿卡片高度 */
#contactUs .faqSupportBox > a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* ---------- 卡片內容 -------------------------------------- */
/* icon 垂直置中；文字欄撐滿高度，好讓按鈕貼齊底部 */
#contactUs .supportBox {
  display: flex;
  align-items: stretch;
  height: 100%;
}
@media screen and (max-width: 450px) {
  #contactUs .supportBox { flex-wrap: wrap; }
}

#contactUs .supportIcon {
  display: flex;
  align-items: center;
  justify-content: center;
}

#contactUs .supportContrnt {
  display: flex;
  flex-direction: column;
}

/* default.css 沒有卡片標題，這裡新增 */
#contactUs .supportTitle {
  width: 90%;
  margin: 0 auto 12px auto;
  font-size: 1.7rem;
  line-height: 2.2rem;
  font-weight: bold;
  color: #1A1A1A;
}
@media screen and (max-width: 450px) {
  #contactUs .supportTitle {
    width: 100%;
    font-size: 1.5rem;
    line-height: 2rem;
    text-align: center;
  }
}

/* 覆寫 default.css：固定 height:100px 會讓不同長度的文案對不齊 */
#contactUs .supportText {
  width: 90%;
  height: auto;
  margin: 0 0 20px 5%;
  padding: 0;
}

/* 覆寫 default.css：預設是 width:90% 的長條，設計稿是貼合文字的按鈕。
   margin-top:auto 把按鈕推到卡片底部，兩張卡的按鈕才會齊平 */
#contactUs .supportBtn {
  align-self: flex-start;
  width: auto;
  margin: auto 0 0 5%;
  padding: 10px 25px;
  font-weight: 600;
  /* font-size: 1rem; */
  /* letter-spacing: 1px; */
  /* 漸層掃動，與表單頁的 .cuBtnSubmit / .cuCreatorBtn 同一套做法。
     這裡的 1 個 id 選擇器蓋得過 default.css 的 .supportBtn / .supportBtn:hover
     （0 個 id），所以那邊 background 簡寫造成的 background-size 重置不會生效。 */
  background-color: #90268d;
  background-image: linear-gradient(to right, #4a3cff 0%, #90268d 50%, #4a3cff 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-transition: background-position 200ms cubic-bezier(0.2, 0, 0, 1), -webkit-transform 140ms ease-out;
  -o-transition: background-position 200ms cubic-bezier(0.2, 0, 0, 1), transform 140ms ease-out;
  transition: background-position 200ms cubic-bezier(0.2, 0, 0, 1), transform 140ms ease-out;
}
#contactUs .supportBtn:active {
  -webkit-transform: scale(0.97);
  -ms-transform: scale(0.97);
  transform: scale(0.97);
}
/* hover 只在真正有指標裝置時啟用 */
@media (hover: hover) and (pointer: fine) {
  #contactUs .supportBtn:hover {
    /* 覆寫 default.css 的 transform: scale(1.1)，改用漸層掃動 */
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    background-position: 0% 0;
  }
}
@media screen and (max-width: 450px) {
  #contactUs .supportBtn { 
    margin: 0 auto;
  }
  #contactUs .faqSupportBox{
    padding: 2% 0 8% 0;
  }
}

/* ---------- 底部 FAQ 導引 --------------------------------- */
#contactUs .cuFaqNote {
  margin: 45px auto 0 auto;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.6rem;
  color: #3c3c3c;
}
#contactUs .cuFaqNote a {
  color: #E84CDF;
  font-weight: bold;
}
#contactUs .cuFaqNote a:hover {
  text-decoration: underline;
}

/* ============================================================
   表單頁樣式（Business & Partnerships / Technical Support）
   對應頁面：tw/contact/contact_form.php
   ★ 目前只有中文站在用。英文版要套用時，把這整段複製到
     css/contact-us.css，兩邊保持一致。
   ============================================================ */

/* ---------- 版面容器 -------------------------------------- */
/* 依設計稿：前言與 Creators 卡是較窄的閱讀欄，表單區較寬 */
#contactUs .cuIntroWarp {
  position: relative;
  margin: 0 auto;
  width: 56%;
  max-width: 1080px;
}
#contactUs .cuFormWarp {
  position: relative;
  margin: 0 auto;
  width: 69%;
  max-width: 1320px;
}
@media screen and (max-width: 1200px) {
  #contactUs .cuIntroWarp { width: 80%; }
  #contactUs .cuFormWarp  { width: 88%; }
}
@media screen and (max-width: 800px) {
  #contactUs .cuIntroWarp,
  #contactUs .cuFormWarp { width: 92%; }
}

/* 表單頁的字體跟卡片區一致 */
#contactUs .cuIntroWarp,
#contactUs .cuFormWarp {
  font-family: "Noto Sans TC", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    '微軟正黑體', "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

/* ---------- 前言 ------------------------------------------ */
#contactUs .cuIntro {
  margin: 0 0 32px 0;
  font-size: 1.1rem;
  line-height: 1.95rem;
  color: #3c3c3c;
  text-align: left;
}

/* 過年公告等臨時訊息（$holiday_str 有值時才輸出） */
#contactUs .cuHolidayNote {
  margin: 0 0 32px 0;
  font-size: 1.05rem;
  line-height: 1.8rem;
  font-weight: bold;
  color: #D61D1D;
}

/* ---------- Brook Creators 導引卡 ------------------------- */
#contactUs .cuCreatorCard {
  margin: 0 0 55px 0;
  background: #fff;
  -webkit-transition: -webkit-box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
  -o-transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
  transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
}
/* 陰影值與分流頁的 .faqSupportBox:hover 相同 */
#contactUs .cuCreatorCard:hover {
  -webkit-box-shadow: 0px 5px 12px 3px rgba(144, 142, 142, 0.8);
  box-shadow: 0px 5px 12px 3px rgba(144, 142, 142, 0.8);
}

/* 整張卡片是一個連結：撐滿容器、不要連結預設色與底線 */
#contactUs .cuCreatorLink {
  display: flex;
  align-items: center;
  padding: 32px 40px;
  color: inherit;
  text-decoration: none;
}
#contactUs .cuCreatorLink:hover,
#contactUs .cuCreatorLink:focus {
  color: inherit;
  text-decoration: none;
}
#contactUs .cuCreatorLogo {
  flex: 0 0 26%;
  padding-right: 30px;
}
#contactUs .cuCreatorLogo img {
  display: block;
  width: 100%;
  height: auto;
}
#contactUs .cuCreatorBody {
  flex: 1 1 auto;
}
#contactUs .cuCreatorTitle {
  margin: 0 0 10px 0;
  font-size: 1.45rem;
  line-height: 1.9rem;
  font-weight: bold;
  color: #1A1A1A;
}
#contactUs .cuCreatorText {
  margin: 0 0 20px 0;
  font-size: 1.05rem;
  line-height: 1.7rem;
  color: #3c3c3c;
}
#contactUs .cuCreatorBtn {
  display: inline-block;
  padding: 12px 28px;
  font-size: 1rem;
  line-height: 1.3rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  text-decoration: none;
  /* background-image 不能 transition，所以改用「三色停 + 兩倍寬 + 移動
     background-position」來做可插值的漸層掃動。
     靜止 100% → 可見區是 #90268d → #4a3cff（與原設計同色）；
     hover 移到 0% 時圖片往右滑一個容器寬，形成左→右的前進感。 */
  background-color: #90268d;
  background-image: linear-gradient(to right, #4a3cff 0%, #90268d 50%, #4a3cff 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-transition: background-position 200ms cubic-bezier(0.2, 0, 0, 1), -webkit-transform 140ms ease-out;
  -o-transition: background-position 200ms cubic-bezier(0.2, 0, 0, 1), transform 140ms ease-out;
  transition: background-position 200ms cubic-bezier(0.2, 0, 0, 1), transform 140ms ease-out;
}
#contactUs .cuCreatorBtn:active {
  -webkit-transform: scale(0.97);
  -ms-transform: scale(0.97);
  transform: scale(0.97);
}
/* hover 只在真正有指標裝置時啟用：觸控裝置點擊會觸發 hover 並殘留 */
@media (hover: hover) and (pointer: fine) {
  #contactUs .cuCreatorBtn:hover {
    background-position: 0% 0;
  }
}
@media screen and (max-width: 600px) {
  #contactUs .cuCreatorLink {
    flex-wrap: wrap;
    padding: 28px 22px;
    text-align: center;
  }
  #contactUs .cuCreatorLogo {
    flex: 0 0 70%;
    margin: 0 auto 18px auto;
    padding-right: 0;
  }
}

/* ---------- 必填欄位說明 ---------------------------------- */
#contactUs .cuRequiredNote {
  margin: 0 0 10px 0;
  font-size: .95rem;
  line-height: 1.5rem;
  color: #E84CDF;
  text-align: right;
}

/* ---------- 表單分區 -------------------------------------- */
/* 上緣的粉→藍漸層線是設計稿的分區標記，用 ::before 疊，
   比 border-image 的瀏覽器支援穩 */
#contactUs .cuFormSection {
  position: relative;
  padding-top: 3px;
  background: #fff;
}
#contactUs .cuFormSection::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, #E84CDF 0%, #4a3cff 100%);
}
#contactUs .cuFormSection + .cuFormSection {
  /* margin-top: 30px; */
}
#contactUs .cuFormSectionTitle {
  padding: 18px 30px;
  font-size: 1.25rem;
  line-height: 1.7rem;
  font-weight: bold;
  color: #1A1A1A;
  background: #EDEEF0;
}
#contactUs .cuFormBody {
  padding: 30px;
}
@media screen and (max-width: 600px) {
  #contactUs .cuFormSectionTitle { padding: 15px 20px; }
  #contactUs .cuFormBody { padding: 22px 20px; }
}

/* ---------- 欄位 ------------------------------------------ */
#contactUs .cuField {
  margin-bottom: 26px;
}
#contactUs .cuFormBody > .cuField:last-child {
  margin-bottom: 0;
}
#contactUs .cuRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#contactUs .cuRow > .cuField {
  width: 48.5%;
}
@media screen and (max-width: 600px) {
  #contactUs .cuRow > .cuField { width: 100%; }
}

#contactUs .cuLabel {
  display: block;
  margin-bottom: 8px;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: bold;
  color: #1A1A1A;
}
/* 必填星號 */
#contactUs .cuLabel em {
  color: #E84CDF;
  font-style: normal;
  font-weight: bold;
}

#contactUs .cuField input[type="text"],
#contactUs .cuField select,
#contactUs .cuField textarea {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #1A1A1A;
  background: #fff;
  border: 1px solid #C9CCD1;
  border-radius: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#contactUs .cuField textarea {
  height: 150px;
  resize: vertical;
}
#contactUs .cuField input[type="text"]:focus,
#contactUs .cuField select:focus,
#contactUs .cuField textarea:focus {
  outline: none;
  border-color: #7730DB;
}

/* ---------- 驗證碼 ---------------------------------------- */
#contactUs .cuCaptchaRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#contactUs .cuCaptchaRow input[type="text"] {
  width: 150px;
  margin-right: 14px;
}
#contactUs .cuCaptchaRow #code_img {
  display: block;
  /* 覆寫 default.css 的全域 img{width:100%}。authimg_sk.php 產生的圖是
     60x20，不設 width:auto 會被拉成滿版 */
  width: auto;
  height: auto;
  margin-right: 12px;
}
#contactUs .cuCaptchaRow #change_img {
  display: block;
  height: 25px;
  width: auto;
  cursor: pointer;
}

/* ---------- 按鈕列 ---------------------------------------- */
#contactUs .cuBtnBar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
#contactUs .cuBtnClear,
#contactUs .cuBtnSubmit {
  min-width: 170px;
  padding: 13px 26px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.3rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
  cursor: pointer;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  /* 指定屬性而非 all；200ms + Corporate 簽名曲線 */
  -webkit-transition: background-position 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1), color 200ms cubic-bezier(0.2, 0, 0, 1), -webkit-transform 140ms ease-out;
  -o-transition: background-position 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1), color 200ms cubic-bezier(0.2, 0, 0, 1), transform 140ms ease-out;
  transition: background-position 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1), color 200ms cubic-bezier(0.2, 0, 0, 1), transform 140ms ease-out;
}
/* 按下回饋：觸控裝置也吃得到 */
#contactUs .cuBtnClear:active,
#contactUs .cuBtnSubmit:active {
  -webkit-transform: scale(0.97);
  -ms-transform: scale(0.97);
  transform: scale(0.97);
}
#contactUs .cuBtnClear {
  margin-right: 18px;
  color: #7730DB;
  background: #fff;
  border: 1px solid #7730DB;
}
#contactUs .cuBtnSubmit {
  color: #fff;
  border: 1px solid transparent;
  /* 漸層掃動，做法與 .cuCreatorBtn 相同 */
  background-color: #90268d;
  background-image: linear-gradient(to right, #4a3cff 0%, #90268d 50%, #4a3cff 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
}
/* hover 只在真正有指標裝置時啟用 */
@media (hover: hover) and (pointer: fine) {
  #contactUs .cuBtnClear:hover {
    /* 灰階刻意比送出鈕低調，維持主次關係 */
    background-color: #E5E7EA;
  }
  #contactUs .cuBtnSubmit:hover {
    background-position: 0% 0;
  }
}
@media screen and (max-width: 450px) {
  #contactUs .cuBtnBar { flex-wrap: wrap; }
  #contactUs .cuBtnClear,
  #contactUs .cuBtnSubmit {
    width: 100%;
    min-width: 0;
  }
  #contactUs .cuBtnClear { margin: 0 0 14px 0; }
}

/* ---------- 欄位錯誤提示 ---------------------------------- */
/* 由 contact_form.php 的 JS 動態插入 .cuField 內（取代原本的 alert）。
   色值沿用必填星號的 #E84CDF，讓「星號＝必填」與「提示＝沒填」讀成同一套。 */
#contactUs .cuField.is-error input[type="text"],
#contactUs .cuField.is-error select,
#contactUs .cuField.is-error textarea {
  border-color: #E84CDF;
}
#contactUs .cuFieldError {
  display: flex;
  align-items: flex-start;
  margin-top: 7px;
  font-size: .95rem;
  line-height: 1.5rem;
  font-weight: bold;
  color: #E84CDF;
}
/* 圓形驚嘆號圖示：純 CSS，不用圖檔（避免 default.css 的全域 img 規則） */
#contactUs .cuFieldError::before {
  content: "!";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 4px 6px 0 0;
  border-radius: 50%;
  background: #E84CDF;
  color: #fff;
  font-size: .78rem;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
}

/* jquery.validate.js 的錯誤訊息（沿用舊頁的色值） */
#contactUs .error {
  color: #D61D1D;
}

/* ---------- 送出鈕 disabled 狀態 -------------------------- */
/* 送出中不隱藏按鈕、改成 disabled，位置留著 */
#contactUs .cuBtnSubmit:disabled {
  opacity: .55;
  cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
  /* disabled 時不要有漸層掃動 */
  #contactUs .cuBtnSubmit:disabled:hover {
    background-position: 100% 0;
  }
}

/* ---------- 送出成功 popup -------------------------------- */
/* z-index 刻意低於固定檔頭的 1030，讓檔頭維持在最上層可用。
   footer 的回頂端箭頭 .mbr-arrow-up 是 5000，會浮在遮罩上，
   所以開啟時直接隱藏它。 */
#contactUs .cuModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1020;
  background: rgba(26, 26, 26, .6);
  align-items: center;
  justify-content: center;
  /* 上方留出檔頭的高度，內容才不會被壓在檔頭底下 */
  padding: 84px 20px 20px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#contactUs .cuModal.is-open {
  display: flex;
}
/* 這頁真正的捲動容器是 <html>，只鎖 body 完全沒用（實測 popup 開著時
   scrollY 還是從 1878 掉到 1078），兩邊都要鎖。 */
html.cuModalOpen,
body.cuModalOpen {
  overflow: hidden;
}
/* 回頂端箭頭的腳本會自己寫 inline style="display:block"，
   沒有 !important 蓋不掉，它的 z-index 是 5000 會浮在遮罩上面。 */
body.cuModalOpen .mbr-arrow-up {
  display: none !important;
}

#contactUs .cuModalBox {
  width: 100%;
  max-width: 480px;
  padding: 45px 40px 40px 40px;
  background: #fff;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* 進場從 0.95 放大，不從 scale(0) —— 現實中沒有東西從無到有 */
  opacity: 0;
  -webkit-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
  -webkit-transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1), -webkit-transform 260ms cubic-bezier(0.2, 0, 0, 1);
  -o-transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1), transform 260ms cubic-bezier(0.2, 0, 0, 1);
  transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1), transform 260ms cubic-bezier(0.2, 0, 0, 1);
}
/* display:none 沒辦法 transition，所以由 JS 分兩步加 class */
#contactUs .cuModal.is-shown .cuModalBox {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

#contactUs .cuModalIcon {
  width: 90px;
  height: auto;
  margin: 0 auto 10px auto;
}
/* download_tips.png 原始尺寸 116x82。一定要明確給 width，否則會被
   default.css 的全域 img{width:100%} 拉成滿版（驗證碼圖踩過同一個坑）。*/
#contactUs .cuModalIcon img {
  display: block;
  width: 116px;
  height: auto;
  margin: 0 auto;
}
/* 失敗 popup 的圖示是 inline SVG（紅圓＋驚嘆號），64x64 */
#contactUs .cuModalIcon svg {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto;
}

#contactUs .cuModalTitle {
  margin: 0 0 12px 0;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: bold;
  color: #1A1A1A;
}
#contactUs .cuModalText {
  margin: 0 0 32px 0;
  font-size: 1.05rem;
  line-height: 1.8rem;
  color: #3c3c3c;
}

#contactUs .cuModalBtnBar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
/* popup 裡的按鈕是 <a>，補上 input 本來就有的 display 與去底線 */
#contactUs .cuModalBtnBar .cuBtnClear,
#contactUs .cuModalBtnBar .cuBtnSubmit {
  display: inline-block;
  text-decoration: none;
}
#contactUs .cuModalBtnBar .cuBtnClear:hover,
#contactUs .cuModalBtnBar .cuBtnSubmit:hover,
#contactUs .cuModalBtnBar .cuBtnClear:focus,
#contactUs .cuModalBtnBar .cuBtnSubmit:focus {
  text-decoration: none;
}

@media screen and (max-width: 600px) {
  #contactUs .cuModal { padding: 76px 16px 16px 16px; }
  #contactUs .cuModalBox { padding: 35px 24px 30px 24px; }
  #contactUs .cuModalTitle { font-size: 1.35rem; line-height: 1.9rem; }
}

/* 減少動態偏好：只留淡入，去掉縮放 */
@media (prefers-reduced-motion: reduce) {
  #contactUs .cuModalBox {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    -webkit-transition: opacity 200ms ease;
    -o-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
  }
  #contactUs .cuModal.is-shown .cuModalBox {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}