.elementor-20610 .elementor-element.elementor-element-fe00427{--display:flex;--min-height:424px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.6;}.elementor-20610 .elementor-element.elementor-element-fe00427:not(.elementor-motion-effects-element-type-background), .elementor-20610 .elementor-element.elementor-element-fe00427 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://join.oee.tw/storage/twjamisonyang935/2025/08/oee-survey-bg.png");background-position:top center;background-repeat:no-repeat;background-size:cover;}.elementor-20610 .elementor-element.elementor-element-fe00427::before, .elementor-20610 .elementor-element.elementor-element-fe00427 > .elementor-background-video-container::before, .elementor-20610 .elementor-element.elementor-element-fe00427 > .e-con-inner > .elementor-background-video-container::before, .elementor-20610 .elementor-element.elementor-element-fe00427 > .elementor-background-slideshow::before, .elementor-20610 .elementor-element.elementor-element-fe00427 > .e-con-inner > .elementor-background-slideshow::before, .elementor-20610 .elementor-element.elementor-element-fe00427 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-60fdd45 );--background-overlay:'';}.elementor-20610 .elementor-element.elementor-element-f4a4ede{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-20610 .elementor-element.elementor-element-f4a4ede:not(.elementor-motion-effects-element-type-background), .elementor-20610 .elementor-element.elementor-element-f4a4ede > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#17557E;}.elementor-20610 .elementor-element.elementor-element-08cbc3f{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-20610 .elementor-element.elementor-element-a0f6be0{width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;}.elementor-20610 .elementor-element.elementor-element-a0f6be0 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(max-width:1024px){.elementor-20610 .elementor-element.elementor-element-a0f6be0{--container-widget-width:90%;--container-widget-flex-grow:0;width:var( --container-widget-width, 90% );max-width:90%;}}@media(max-width:767px){.elementor-20610 .elementor-element.elementor-element-a0f6be0{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}}/* Start custom CSS *//* ========================================= */
/* 1. 選項樣式 (Checkbox & Radio)           */
/* 說明：此區塊負責將原始的複選框和單選框，美化成自訂的點選樣式。 */
/* ========================================= */

/* 基礎設置：重置選項列表的默認樣式 (移除列表點、內外邊距) */
#wpforms-20616 .wpforms-field-checkbox ul,
#wpforms-20616 .wpforms-field-radio ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 選項容器 (li)：設置背景、邊框、圓角、間距和佈局 */
/* - 使用 flexbox 讓內容垂直居中 */
/* - position: relative 用於後續定位選中標記 */
/* - transition 讓選中時的樣式變化更平滑 */
#wpforms-20616 li {
    background-color: #ffffff00;
    border: 1px solid #ffffff;
    border-radius: 8px;
    margin-bottom: 0px;
    padding: 16px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease-in-out;
}

/* 隱藏原始的 Checkbox 和 Radio 輸入框 */
#wpforms-20616 input[type="checkbox"],
#wpforms-20616 input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* 選項標籤 (label)：設置文字樣式並使用 Flexbox 垂直居中 */
#wpforms-20616 label.wpforms-field-label-inline {
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    flex-grow: 1;
    line-height: 2;
    margin: 0;
    display: flex;
    align-items: center;
}

/* 模擬的圓圈 (未選中狀態)：使用 ::before 偽元素創建 */
#wpforms-20616 label.wpforms-field-label-inline::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 1px solid #fff;
    border-radius: 50%;
    margin-right: 16px;
    box-sizing: border-box;
    flex-shrink: 0;
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}

/* 選中狀態 (需搭配 JS)：當 li 添加 .selected-option class 時，改變邊框和陰影 */
#wpforms-20616 li.selected-option {
    border: 2px solid #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* 選中狀態：當 input 被勾選時，改變模擬圓圈的背景色和邊框 */
#wpforms-20616 input[type="checkbox"]:checked + label.wpforms-field-label-inline::before,
#wpforms-20616 input[type="radio"]:checked + label.wpforms-field-label-inline::before {
    background-color: #E8C24E;
    border-color: #fff;
}


/* ========================================= */
/* 2. 多頁表單通用樣式                       */
/* 說明：此區塊控制多頁表單的進度條、問題標題、分頁按鈕等通用元件。 */
/* ========================================= */

/* 表單基礎佈局：設為 flexbox 垂直排列，以利後續 order 屬性調整順序 */
.wpforms-form {
    display: flex;
    flex-direction: column;
}

/* -- 2.1 進度條 -- */

/* 進度條容器：調整寬度、置中、間距、背景、高度等 */
#wpforms-form-20616 .wpforms-page-indicator {
    width: 40% !important;
    margin-top: 24px !important;
    margin: 0px auto !important; /* 調整為上下皆有間距且置中 */
    background-color: #fffff00 !important;
    height: 80px !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

/* 進度條背景軌道 */
#wpforms-form-20616 .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress-wrap {
    background-color: #fff;
    height: 6px;
}

/* 進度條已完成部分 (填充顏色) */
.wpforms-page-indicator-page-progress {
    background-color: #E8C24E !important;
    height: 100%;
    border-radius: 5px;
}

/* 進度條文字 (例如 "2 of 7") */
#wpforms-form-20616 .wpforms-page-indicator-steps {
    font-size: 16px !important;
    color: #fff !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

/* -- 2.2 問題標題 -- */

/* 問題標題 (通用)：置中、調整字體大小、顏色和間距 */
#wpforms-form-20616 .wpforms-field-label {
    text-align: center !important;
    width: 100% !important;
    font-size: 20px !important;
    line-height: 1.5;
    color: #fff !important;
    margin-bottom: 24px !important;
}

/* -- 2.3 上一步 / 繼續按鈕 -- */

/* 「上一步」與「繼續」按鈕的通用樣式 */
#wpforms-form-20616 .wpforms-page-button {
    font-size: 16px !important;
    padding: 12px 24px !important;
    border-radius: 5px !important;
    border: 1px solid !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin: 0 10px !important;
}

/* 「上一步」按鈕的特定樣式 */
#wpforms-form-20616 .wpforms-page-button.wpforms-page-prev {
    background-color: #00000000 !important;
    color: white !important;
    border-color: #fff !important;
}

/* 「上一步」按鈕的懸停效果 */
#wpforms-form-20616 .wpforms-page-button.wpforms-page-prev:hover {
    background-color: #fffff00 !important;
    border-color: #fff !important;
}

/* 「繼續」按鈕的特定樣式 */
#wpforms-form-20616 .wpforms-page-button.wpforms-page-next {
    background-color: #E8C24E !important;
    color: black !important;
    border-color: #E8C24E !important;
}

/* 「繼續」按鈕的懸停效果 */
#wpforms-form-20616 .wpforms-page-button.wpforms-page-next:hover {
    background-color: #E8C24E !important;
    border-color: #E8C24E !important;
}


/* ========================================= */
/* 3. 特定欄位樣式                           */
/* 說明：針對特定輸入欄位 (如聯絡資訊) 進行的樣式微調。 */
/* ========================================= */

/* 聯絡資訊欄位：將姓名、Email、手機號碼的標籤靠左對齊 */
#wpforms-form-20616 #wpforms-20616-field_5-container .wpforms-field-label,
#wpforms-form-20616 #wpforms-20616-field_6-container .wpforms-field-label,
#wpforms-form-20616 #wpforms-20616-field_8-container .wpforms-field-label {
    text-align: left !important;
    width: auto !important;
    margin-left: 0 !important;
    font-size: 16px !important;
    color: #fff !important;
}


/* ========================================= */
/* 4. 提交按鈕                              */
/* 說明：表單最後一步的「提交」按鈕樣式。 */
/* ========================================= */

/* 提交按鈕容器：使用 Flexbox 將按鈕水平置中 */
#wpforms-form-20616 .wpforms-submit-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 8px !important;
    padding-bottom: 16px !important;
}

/* 提交按鈕本身：設置背景、顏色、字體、邊框等樣式 */
#wpforms-form-20616 #wpforms-submit-20616 {
    background-color: #E8C24E !important;
    color: black !important;
    border-color: #E8C24E !important;
    font-size: 16px !important;
    padding: 12px 24px !important;
    border-radius: 5px !important;
    border: 0px solid !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

/* 提交按鈕的懸停效果 */
#wpforms-form-20616 #wpforms-submit-20616:hover {
    background-color: #E8C24E !important;
    border-color: #E8C24E !important;
}/* End custom CSS */