@charset "utf-8";
/*
---------------------------------------------------------
combine/combine-9031f1ec.css
---------------------------------------------------------
00. /var/www/archibm/public/css/site/app/faq.css
*/

/*
---------------------------------------------------------
00. /var/www/archibm/public/css/site/app/faq.css
---------------------------------------------------------
*/

/* ============================================================
   BIMTeki 新版網站：常見問題頁內容區（.bt-app，沒有 Sara 設計稿，我們依新版風格自套）
   ------------------------------------------------------------
   來源：舊版 /faq 頁面實際套用到的內容區規則（scratchpad extract_css.js 自動抽出，選擇器加 :where(.bt-app) 前綴），
   與 Sara 複刻頁的做法相同；基底變數與中性色在 app-base.css。檔尾「新版調整」是我們的補充。
   ============================================================ */
/* === reset.css === */
:where(.bt-app) div, :where(.bt-app) span, :where(.bt-app) applet, :where(.bt-app) object, :where(.bt-app) iframe, :where(.bt-app) h1, :where(.bt-app) h2, :where(.bt-app) h3, :where(.bt-app) h4, :where(.bt-app) h5, :where(.bt-app) h6, :where(.bt-app) p, :where(.bt-app) blockquote, :where(.bt-app) pre, :where(.bt-app) a, :where(.bt-app) abbr, :where(.bt-app) acronym, :where(.bt-app) address, :where(.bt-app) big, :where(.bt-app) cite, :where(.bt-app) code, :where(.bt-app) del, :where(.bt-app) dfn, :where(.bt-app) em, :where(.bt-app) img, :where(.bt-app) ins, :where(.bt-app) kbd, :where(.bt-app) q, :where(.bt-app) s, :where(.bt-app) samp, :where(.bt-app) small, :where(.bt-app) strike, :where(.bt-app) strong, :where(.bt-app) tt, :where(.bt-app) var, :where(.bt-app) b, :where(.bt-app) u, :where(.bt-app) i, :where(.bt-app) center, :where(.bt-app) dl, :where(.bt-app) dt, :where(.bt-app) dd, :where(.bt-app) ol, :where(.bt-app) ul, :where(.bt-app) li, :where(.bt-app) fieldset, :where(.bt-app) form, :where(.bt-app) label, :where(.bt-app) legend, :where(.bt-app) table, :where(.bt-app) caption, :where(.bt-app) tbody, :where(.bt-app) tfoot, :where(.bt-app) thead, :where(.bt-app) tr, :where(.bt-app) th, :where(.bt-app) td, :where(.bt-app) article, :where(.bt-app) aside, :where(.bt-app) canvas, :where(.bt-app) details, :where(.bt-app) embed, :where(.bt-app) figure, :where(.bt-app) figcaption, :where(.bt-app) footer, :where(.bt-app) header, :where(.bt-app) hgroup, :where(.bt-app) menu, :where(.bt-app) nav, :where(.bt-app) output, :where(.bt-app) ruby, :where(.bt-app) section, :where(.bt-app) summary, :where(.bt-app) time, :where(.bt-app) mark, :where(.bt-app) audio, :where(.bt-app) video{margin: 0px; padding: 0px; border: 0px; font: inherit; vertical-align: baseline;}
:where(.bt-app) article, :where(.bt-app) aside, :where(.bt-app) details, :where(.bt-app) figcaption, :where(.bt-app) figure, :where(.bt-app) footer, :where(.bt-app) header, :where(.bt-app) hgroup, :where(.bt-app) main, :where(.bt-app) menu, :where(.bt-app) nav, :where(.bt-app) section{display: block;}
:where(.bt-app) ol, :where(.bt-app) ul{list-style: none;}
/* === common.css === */
:where(.bt-app) *{box-sizing: border-box;}
:where(.bt-app) a{color: inherit; text-decoration: none; transition: 0.2s;}
:where(.bt-app) h1, :where(.bt-app) h2, :where(.bt-app) h3, :where(.bt-app) h4, :where(.bt-app) h5, :where(.bt-app) h6{font-weight: 500; color: var(--theme-text-color);}
:where(.bt-app) .fr-view{font-size: 1rem; line-height: 1.7em;}
:where(.bt-app) .flex{display: flex;}
:where(.bt-app) .flex-center{display: flex; align-items: center;}
:where(.bt-app) .flex-justify{display: flex; justify-content: space-between;}
:where(.bt-app) .button, :where(.bt-app) .button-md, :where(.bt-app) .button-lg, :where(.bt-app) .button-sq{display: inline-block; padding: 0px 1.1em; white-space: nowrap; cursor: pointer; transition: 0.2s; background: var(--theme-button-color); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; text-align: center; text-decoration: none !important;}
:where(.bt-app) .button-md{height: 42px; line-height: 40px; border-radius: 6px; font-size: 1.1em;}
:where(.bt-app) .button:hover, :where(.bt-app) .button-md:hover, :where(.bt-app) .button-lg:hover{}
:where(.bt-app) .expandable{border-top: 1px solid var(--gray-border-color); transition: opacity 0.4s;}
:where(.bt-app) .expandable:last-child{border-bottom: 1px solid var(--gray-border-color);}
:where(.bt-app) .expandable-title{padding: 25px 3px;}
:where(.bt-app) .expandable-title .expandable-handle{position: relative; display: inline-block; flex-shrink: 0; flex-grow: 0; width: 24px; height: 24px; margin-right: 5px; margin-left: 10px; color: rgb(153, 153, 153); cursor: pointer;}
:where(.bt-app) .expandable-title .expandable-handle i{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%); transition: 0.4s;}
:where(.bt-app) .expandable-body{padding: 0px 0px 20px; display: none;}
:where(.bt-app) .expandable.show .expandable-title .expandable-handle i{transform: translate(-50%, -50%) rotate(90deg);}
:where(.bt-app) .expandable.show .expandable-body{display: block;}
:where(.bt-app) .expandable.show .expandable-handle i{transform: rotate(180deg);}
/* === app.css === */
:where(.bt-app) h1, :where(.bt-app) h2, :where(.bt-app) h3, :where(.bt-app) h4, :where(.bt-app) h5, :where(.bt-app) h6{color: var(--default-title-color); font-weight: 700;}
:where(.bt-app) h2{font-size: 2.7em; line-height: 1.2em;}
:where(.bt-app) .expandable-title{color: var(--gray-text-color); padding: 12px 3px; cursor: pointer; transition: 0.2s;}
:where(.bt-app) .expandable-title .no{flex-shrink: 0; flex-grow: 0; margin-right: 20px; width: 34px; height: 34px; line-height: 32px; text-align: center; border-radius: 50%; color: var(--theme-text-color); border: 1px solid var(--theme-border-color); background-color: rgb(255, 255, 255); transition: 0.2s;}
:where(.bt-app) .expandable-title .text{margin-right: auto; font-size: 1.2em; line-height: 1.3em; letter-spacing: 0.06em; color: var(--default-title-color);}
:where(.bt-app) .expandable-title .expandable-handle{color: var(--gray-button-color);}
:where(.bt-app) .expandable-body .text{margin: 0px 4.5%;}
:where(.bt-app) .expandable-body .fr-view{font-size: 1rem;}
:where(.bt-app) .expandable.show .expandable-title .no{background-color: var(--theme-bg-color); color: rgb(255, 255, 255);}
:where(.bt-app) .expandable.show .expandable-handle{color: var(--theme-button-color);}
:where(.bt-app) .button, :where(.bt-app) .button-md, :where(.bt-app) .button-lg{border-radius: 50px;}
:where(.bt-app) .button-outline{background-color: rgb(255, 255, 255); border: 1px solid var(--theme-button-color); color: var(--theme-button-color);}
:where(.bt-app) .button-outline:hover, :where(.bt-app) .button-outline.active{background-color: var(--theme-button-color); border: 1px solid var(--theme-button-color); color: rgb(255, 255, 255);}
:where(.bt-app) .tab-buttons{justify-content: center; margin-bottom: 60px; gap: 10px;}
:where(.bt-app) .tab-buttons li a{font-size: 1.1em; border-radius: 50px; padding: 0px 3em; min-width: 200px;}
:where(.bt-app) .tab-buttons-dropdown{display: none;}
:where(.bt-app) .faq-expandable .expandable.show .expandable-title .expandable-handle i{transform: translate(-50%, -50%) rotate(45deg);}
:where(.bt-app) .inner{width: 92%; max-width: 1440px; margin: auto;}
:where(.bt-app) .inner-lg{width: 92%; max-width: 1350px; margin: auto;}
:where(.bt-app) .inner-md{width: 92%; max-width: 1150px; margin: auto;}
:where(.bt-app) #page-header-inner{padding: var(--page-header-padding) 15px calc(var(--page-header-padding) * .65) 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;}
:where(.bt-app) #page-header-inner h2{color: var(--default-title-color); font-weight: 500; font-size: var(--page-header-fontsize);}
:where(.bt-app) #main-wrapper{min-height: 50vh;}
:where(.bt-app) .main-content-wrapper{position: relative;}
:where(.bt-app) .main-content-wrapper .main-content{padding-bottom: 60px;}
:where(.bt-app) .main-content-wrapper .main-content .content-headroom{padding: 18vh 0px 0px;}
/* === app.rwd.css === */
@media screen and (max-width: 1600px){
:where(.bt-app) h2{font-size: 2.4em;}
:where(.bt-app) .main-content-wrapper .main-content .content-headroom{padding: 8vh 0px 0px;}
}
@media screen and (max-width: 1280px){
:where(.bt-app) .expandable-title{padding: 10px 3px;}
:where(.bt-app) .expandable-title .text{font-size: 1.05em;}
}
@media screen and (max-width: 1024px){
:where(.bt-app) h2{font-size: 2.1em;}
:where(.bt-app) .inner{width: 92%; margin: auto;}
:where(.bt-app) .tab-buttons{margin: 20px 0px 30px; gap: 5px;}
:where(.bt-app) .tab-buttons li a{font-size: 1em; min-width: 140px; padding: 0px 1em; height: 36px; line-height: 34px;}
:where(.bt-app) .main-content-wrapper .main-content{padding: 0px 0px 40px;}
:where(.bt-app) .main-content-wrapper .main-content .content-headroom{padding: 0px;}
}
@media screen and (max-width: 768px){
:where(.bt-app) .expandable-title .no{margin-right: 15px; width: 30px; height: 30px; line-height: 26px; font-size: 0.92em;}
}
@media screen and (max-width: 640px){
:where(.bt-app) h2{font-size: 1.9em;}
:where(.bt-app) .tab-buttons-dropdown{display: block; text-align: center; margin-top: 20px; margin-bottom: 30px; height: 34px; line-height: 32px; color: var(--theme-text-color); border: 1px solid var(--theme-border-color); border-radius: 50px;}
:where(.bt-app) .tab-buttons-dropdown i{font-size: 12px; margin-left: 2px;}
:where(.bt-app) .tab-buttons-dropdown + .tab-buttons{display: none; margin-top: 0px; padding: 10px 0px; border-radius: 10px; background-color: rgb(255, 255, 255); box-shadow: rgba(122, 115, 255, 0.15) 0px 1px 6px;}
:where(.bt-app) .tab-buttons-dropdown + .tab-buttons li{display: block; width: 100%;}
:where(.bt-app) .tab-buttons-dropdown + .tab-buttons li a{display: block; width: 100%; height: 32px; line-height: 30px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 0px; background: none; color: var(--theme-text-color);}
:where(.bt-app) .tab-buttons-dropdown + .tab-buttons li a.active{background-color: var(--soft-bg-color);}
:where(.bt-app) .expandable-title{padding: 8px 3px;}
:where(.bt-app) #page-header-inner{padding: var(--page-header-padding) 10px calc(var(--page-header-padding) * .25) 10px;}
}
@media screen and (max-width: 480px){
:where(.bt-app) h2{font-size: 1.7em;}
}
@media screen and (max-width: 360px){
:where(.bt-app) h2{font-size: 1.5em;}
}
/* === application.css === */
/* === subscription.css === */
/* === newsletter.css === */
/* === auth.css === */

/* ===== 新版調整 ===== */
/* 分類切換：比照購買方案頁比較表的分頁（.pc-tabs）與加購頁範圍切換——灰底膠囊、選中白底，紫只留給主要動作 */
:where(.bt-app) .tab-buttons{ width:fit-content; max-width:100%; margin:0 auto 48px; padding:3px; gap:4px; flex-wrap:wrap; justify-content:center; background:#F1F1F5; border:1px solid #E6E6EC; border-radius:999px; }
:where(.bt-app) .tab-buttons li a,
:where(.bt-app) .tab-buttons li a.button-outline{ min-width:0; height:auto; padding:9px 1.6em; line-height:1.4; border:1px solid transparent; border-radius:999px; background:transparent; color:#666666; font-size:1em; }
:where(.bt-app) .tab-buttons li a:hover{ background:transparent; color:#222222; }
:where(.bt-app) .tab-buttons li a.active{ background:#FFFFFF; border-color:#E6E6EC; color:#222222; box-shadow:0 1px 2px rgba(33,29,58,.10); }
/* 舊版上方留 18vh 是因為沒有頁首標題；新版有標題列，改成固定間距 */
:where(.bt-app) .main-content-wrapper .main-content .content-headroom{ padding-top:24px; }
/* 手機版下拉：中性框 */
:where(.bt-app) .tab-buttons-dropdown{ border-color:#E4E4E4; color:#222222; }