body { margin: 0;
            padding: 0; background-color: #ffffff; }
        .container { max-width: 1100px; margin-top: 30px; }
        .invalid-feedback { display: none; }
        .is-invalid .invalid-feedback { display: block; }
        .form-control, .form-select {
            background-color: #FDFDFD;
    height: 50px;
    border-radius: 0;
        }

        * {
            padding: 0;
            margin: 0;
        }

        *, ::after, ::before {
            box-sizing: border-box;
        }
        .masthead:not(.side-header) .header-bar {
            position: relative;
            display: -ms-flexbox;
            display: -ms-flex;
            display: flex;
            -ms-align-items: stretch;
            -ms-flex-align: stretch;
            align-items: stretch;
            -ms-align-content: stretch;
            align-content: stretch;
            -ms-flex-line-pack: stretch;
            -ms-flex-pack: space-between;
            -ms-justify-content: space-between;
            justify-content: space-between;
            -ms-flex-pack: justify;
        }
        .inline-header .header-bar {
            -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
        }
        .phantom-fade .masthead, .phantom-slide .masthead {
            top: 0 !important;
        }

        .masthead:not(.mixed-header) {
            background: #ffffff none repeat center center;
            background-size: auto;
        }

        .masthead:not(.side-header):not(.side-header-v-stroke):not(.side-header-menu-icon) .header-bar, .ph-wrap {
            padding-right: 15px;
            padding-left: 15px;
        }

        .masthead:not(.side-header) {
            max-width: 100%;
        }

        .masthead {
            position: relative;
            z-index: 102;
            box-sizing: border-box;
        }

        .masthead {
            -ms-grid-column: 1;
            -ms-grid-row: 1;
            grid-area: header;
        }

        .masthead:not(.side-header):not(.side-header-v-stroke):not(.side-header-menu-icon) .header-bar, .ph-wrap
 {
    padding: 0 15px 0 15px;
}
.masthead:not(.side-header):not(.mixed-header) .header-bar, .header-space {
    min-height: 100px;
}
.form-check {
    padding-bottom: 10px;
    margin-right: 2rem;
}

.red-color {
    color:#ff0000;
}

        .masthead.shadow-decoration:not(.side-header-menu-icon):not(#phantom):not(.masthead-mobile-header) {
            box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.07);
        }

        .masthead:not(.side-header):not(.side-header-v-stroke):not(.side-header-menu-icon) {
            box-sizing: border-box;
        }

        .masthead:not(.side-header):not(.side-header-menu-icon) .header-bar {
            max-width: calc(1400px - 50px - 50px);
            margin: 0 auto;
        }


        .branding {
            display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -ms-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 0;
    font-size: 0;
        }

        .assistive-text {
            position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
        }
        .branding > a, .branding > img {
    padding: 0px 5px 0px 0px;
}
.branding>a {
    display: block;
}

.branding a img, .branding img {
    max-width: 100%;
    height: auto;
}

.branding .mobile-logo {
    display: none;
}

.masthead:not(.side-header).full-height .main-nav {
    -ms-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-align-content: stretch;
    align-content: stretch;
}

.inline-header.right .main-nav {
    -ms-flex-pack: flex-end;
    -ms-justify-content: flex-end;
    justify-content: flex-end;
    -ms-flex-pack: end;
}
.inline-header.left .main-nav, .inline-header.right .main-nav, .inline-header.center .main-nav {
    -ms-flex-positive: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
}

.masthead:not(.side-header) .main-nav {
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.main-nav>li {
    position: relative;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
}

#primary-menu {
    padding:0;
    margin:0;
}
.masthead:not(.side-header).full-height .header-bar .main-nav > li > a, .masthead:not(.side-header) .header-bar .main-nav > li > a {
    display: flex;
    display: -ms-flexbox;
    display: -ms-flex;
    -ms-align-content: center;
    align-content: center;
    -ms-flex-line-pack: stretch;
}

.top-header .outside-item-remove-margin.main-nav > li:first-child > a {
    margin-left: 0;
}

.masthead:not(.side-header).full-height .main-nav > li > a {
    -ms-flex-positive: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
    -ms-flex-pack: center;
    -ms-justify-content: center;
    justify-content: center;
}

.ot-logo {
    text-align: center;
    margin-bottom: 10px !important;
}

#primary-menu li a {
    text-decoration: none;
}

#primary-menu li a:hover {
    opacity: .7;
}

ol li span.s2 a {
    color:#9E8FF2;
}

footer {
    background-color: #0f3d85;
    padding-top:40px;
    padding-bottom:40px;
    width: 100%;
} 

.footer-content {
    width:1300px;
    margin:0 auto;
}

.contact-content {
    color: #ffffff;
    font-size: 13px;
    text-align: center;
}

.tandc {
    color: #ffffff; 
    font-size: 13px; 
    text-align: center; 
    padding-top: 10px;
}

.contact-btn {
    text-align: center;
}

.border-w-2 {
    border: 1px solid #ffffff;
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 50px;
    text-align: center;
}

.social {
    width:100%;
    display: block;
    text-align: center;
}

.social a {
    text-decoration: none;
}

.facebook img {
    width: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.instagram img {
    width: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left:5px;
}

.alert {
    margin-top: 15px;
    margin-bottom: 0;
}

.alert ul {
    margin-bottom: 0;
}

form .btn-secondary {
    text-align: center;
    background-color: #ffffff;
    border: 2px solid #0f3d85 !important;
    width: 40%;
    height: 60px;
    margin: 0 auto;
    font-size: 24px;
    color:#104383;
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 0;
}

.table-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
    border-radius: 8px;
}
.table th, .table td {
    vertical-align: middle;
    padding: 12px;
}
.table th {
    background-color: #e9ecef;
    width: 30%;
}
.table td {
    background-color: #ffffff;
}

.bottom-bar {
    background-color: #ffffff;
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
    text-align: center;
    color: #0f3d85;
    font-size: 11px;
}

.contact-btn a, .contact-content a {
    color:#ffffff;
}


.main-nav > li.act:not(.wpml-ls-item) > a {
    color: #104383;
}
.main-nav > li > a {
    margin: 18px 14px 18px 14px;
    padding: 4px 4px 4px 4px;
}

.main-nav>li>a, .mini-nav li>a {
    position: relative;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -ms-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.main-nav > li:not(.wpml-ls-item) > a .menu-text {
    color: #104383;
}
.from-centre-line>li>a>span {
    position: relative;
    display: block;
}

.from-centre-line > li > a .menu-item-text:before {
    bottom: -6px;
    height: 2px;
    background-color: #104383;
}


.top-header .from-centre-line>li.act>a .menu-item-text:before, .top-header .from-centre-line>li.dt-hovered>a .menu-item-text:before, .top-header .from-centre-line>li>a:hover .menu-item-text:before {
    visibility: visible;
    transform: scaleX(1);
}

.main-nav > li.act:not(.wpml-ls-item) > a .menu-text, .main-nav > li.act:not(.wpml-ls-item) > a .subtitle-text {
    color: #104383;
}
.main-nav > li > a .menu-text {
    font: normal 17px / 21px "Noto Sans", Helvetica, Arial, Verdana, sans-serif;
    text-transform: none;
}
.menu-text, .subtitle-text {
    display: block;
}

.masthead:not(.side-header):not(.side-header-menu-icon) .mobile-header-bar {
    margin: 0 auto;
    box-sizing: border-box;
}
.dt-mobile-header, .dt-mobile-menu-icon, .mobile-header-space, .masthead .mobile-header-bar, .transparent .header-space, .hidden-header.header-side-left .masthead, .hidden-header.header-side-right .masthead, .hidden-header .top-line-space, .hidden-header .masthead:not(.sticky-on):not(#phantom), .hidden-header .header-space:not(.sticky-space-on)
 {
        display: none;
    }
    .masthead .mobile-header-bar {
        width: 100%;
        -ms-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        -ms-align-content: stretch;
        align-content: stretch;
        -ms-justify-content: space-between;
        justify-content: space-between;
        -ms-flex-pack: justify;
    }
    .mobile-header-bar, .mobile-header-space {
        display: none;
    }
    .mobile-header-bar>* {
        display: -ms-flexbox;
        display: -ms-flex;
        display: flex;
        -ms-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .dt-mobile-menu-icon:not(.floating-btn) {
        margin: 0px 0px 0px 0px;
        border-radius: 0px;
    }
    .dt-mobile-menu-icon {
        padding: 5px 2px 5px 2px;
    }
    .dt-mobile-menu-icon, .lines-button {
        display: -ms-inline-flexbox;
        display: -ms-inline-flex;
        display: inline-flex;
        -ms-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        -ms-justify-content: center;
        justify-content: center;
        cursor: pointer;
        user-select: none;
    }
    .dt-mobile-menu-icon, .menu-toggle>a {
        text-decoration: none;
    }
    .dt-close-mobile-menu-icon, .dt-mobile-menu-icon, .hide-overlay, .menu-close-toggle, .menu-toggle {
        position: relative;
    }
    a, a:hover {
        color: #ffffff;
    }
    .small-mobile-menu-icon .dt-mobile-menu-icon .lines-button {
        height: 16px;
        width: 22px;
    }
    .dt-mobile-menu-icon .lines-button {
        position: relative;
        margin-right: 0;
        text-align: center;
    }

    .dt-mobile-menu-icon, .lines-button
 {
    display: -ms-inline-flexbox;
    display: -ms-inline-flex;
    display: inline-flex;
    -ms-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    -ms-justify-content: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
.lines-button {
    z-index: 2;
}
.dt-mobile-menu-icon .menu-line:nth-of-type(3) {
    top: 14px;
}
.dt-mobile-menu-icon .menu-line:nth-of-type(2) {
    top: 7px;
}

.dt-mobile-menu-icon .menu-line:first-of-type {
    top: 0;
}
.animate-position-2-mobile-menu-icon .dt-mobile-menu-icon .menu-line, .small-mobile-menu-icon .dt-mobile-menu-icon .menu-line {
    width: 22px;
    height: 2px;
}



.dt-mobile-menu-icon .menu-line {
    max-width: 100%;
    position: absolute;
}
.dt-mobile-menu-icon .menu-line, .menu-toggle .menu-line {
    z-index: 2;
}
.menu-line:first-of-type {
    top: -7px;
}
.menu-line {
    position: absolute;
    display: inline-block;
    left: 0;
    width: 22px;
    height: 2px;
    content: '';
    transform-origin: 1.5px center;
    transition: transform .2s linear, color .2s linear;
}
        .recaptcha-notice { font-size: 0.8rem; text-align: center; margin-top: 10px; }

       
        .header-image {
            width: 100%;
            max-width: 1920px; /* 限制圖片最大寬度 */
            height: auto; /* 保持圖片比例 */
            display: block; /* 移除圖片底部間距 */
            margin: 0 auto; /* 水平居中 */
        }
        .main-title {
            font-size: 30px;
            color:#104383;
            font-weight: bold;
        }
        .desktop {
            display:block;
        }
        .mobile {
                display:none;
             }
             hr.line {
                width: 13%;
    text-align: center;
    margin: 0 auto;
    margin-top: -10px;
             }

.red-title {
    font-size:14px;
    color:#ff0000;
    margin-top:20px;
}

ol li {
    padding-bottom: 10px;
}

ul.listing {
    list-style: lower-alpha !important;
    font-size: 13px;
    padding-left:16px;
    padding-top:10px;
}

ol li::marker {
    font-size: 14px;
}

li span.s2 {
    font-size: 14px;
    line-height:20px;
}

form .btn-primary {
    text-align: center;
    background-color: #0f3d85;
    width: 40%;
    height: 60px;
    margin: 0 auto;
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 30px;
    border: 0;
    border-radius: 0;
}
.thankyou-title {
    font-size: 45px;
    line-height: 60px;
    color:#0f3d85;
    font-weight: bold;
    letter-spacing: 1px;
}

.lucky-draw {
    background-image: url("/wp-content/uploads/2025/06/gery-bg.jpg");
    width: 100%;
    max-width: 1920px;
    max-height: 374px;
    background-position: top center;
    background-size: cover;
    padding-top: 85px;
    padding-bottom: 85px;
    background-repeat: no-repeat;
}

.form-check-input.is-valid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label {
    color: #dc3545;
}

.form-check-input.is-valid:checked, .was-validated .form-check-input:valid:checked {
    background-color: #dc3545;
}

.form-check-input.is-valid, .was-validated .form-check-input:valid {
    border-color: #dc3545;
}

.highlight {
    background-color: #FFEB00;
}

.lucky-content {
    font-size: 28px;
    line-height: 40px;
    color:#252525;
    font-weight: normal;
    letter-spacing: 1px;
    margin: 0 auto;
    text-align: center;
}

.font-b {
    font-weight: bold;
}

 .luck-btn {
    text-align: center;
    background-color: #0f3d85;
    width: 30%;
    height: 60px;
    margin: 0 auto;
    font-size: 24px;
    margin-top: 30px;
    border: 0;
    border-radius: 0;
    display: block;
    padding-top: 10px;
}

.luck-btn-2 {
    text-align: center;
    background-color: #0f3d85;
    width: 47%;
    height: 60px;
    margin: 0 auto;
    font-size: 24px;
    margin-top: 10px;
    border: 0;
    border-radius: 0;
    display: block;
    padding-top: 10px;
    margin-bottom: 22px;
    color:#ffffff;
}

.follow-text {
    font-size: 24px;
    color:#0f3d85;
}

.lucky-draw a, .container a {
    text-decoration: none;
}

.mobile-navigation {
    display: none;
}
        @media only screen and (max-width: 600px) {
            .desktop {
                display:none;
             }
             .mobile {
                display:block;
             }

             .dt-mobile-header, .dt-mobile-menu-icon, .mobile-header-space, .masthead .mobile-header-bar, .transparent .header-space, .hidden-header.header-side-left .masthead, .hidden-header.header-side-right .masthead, .hidden-header .top-line-space, .hidden-header .masthead:not(.sticky-on):not(#phantom), .hidden-header .header-space:not(.sticky-space-on)
 {
        display: block;
    }

             .p-4 {
                padding:0 !important;
             }

             #primary-menu {
                
               
                position: fixed; /* 固定在視口中 */
                top: 0;
                right: -100%; /* 初始位置在屏幕右側之外 */
               
                max-width: 300px; /* 最大寬度，防止在大平板上過寬 */
                height: 100%; /* 全屏高度 */
                background-color: #ffffff; /* 菜單背景色 */
                z-index: 1000; /* 確保菜單在最上層 */
                overflow-y: auto; /* 如果菜單項過多，可以滾動 */
                padding-top: 60px; /* 為了避免被頂部遮擋，給點留白 */
                width: calc(300px - 13px);
                 padding: 45px 15px 30px 30px;
                box-sizing: border-box;
                visibility: hidden; /* 默認隱藏，但允許過渡 */
                opacity: 0; /* 默認透明 */
                transition: right 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* 所有相關屬性都進行過渡 */
            }

            .mobile-main-nav li > a .menu-text {
                font: 16px / 20px "Noto Sans", Helvetica, Arial, Verdana, sans-serif;
                color: #104383;
                text-transform: none;
            }

            .main-nav > li > a {
                 padding: 15.2px 25px 15.2px 0;
                 margin:  0; 
            }
        
            /* 顯示主菜單時的樣式 (通過 JS 添加 .menu-open class) */
            #primary-menu.menu-open {
                visibility: visible; /* 顯示 */
                opacity: 1; /* 完全不透明 */
                right: 0; /* 滑入到屏幕內 */
                display: initial;
            }
        
            #primary-menu li {
           
                border-bottom: 1px solid #eee; /* 添加分隔線 */
                width: 100%; /* 確保菜單項佔滿寬度 */
                text-align: left; /* 手機菜單文字靠右對齊，因為從右邊滑入 */
            }
        
            #primary-menu li:last-child {
                border-bottom: none; /* 最後一個菜單項沒有下邊框 */
            }
        
            #primary-menu a {
                color: #555; /* 手機菜單文字顏色 */
                display: block; /* 讓鏈接佔滿整個 li 的空間，更容易點擊 */
                font-size: 1.1em; /* 調整字體大小 */
            }
        
            /* 顯示移動菜單圖標 */
            .mobile-navigation {
                display: block; /* 顯示漢堡包圖標 */
                position: absolute; /* 相對於父元素定位 */
                top: 50%; /* 垂直居中 */
                right: 20px; /* 距離右側的距離 */
                transform: translateY(-50%); /* 精確垂直居中 */
                z-index: 1001; /* 確保圖標在菜單之上，可以點擊關閉 */
            }
        
            /* 漢堡包圖標樣式 */
            .dt-mobile-menu-icon {
                cursor: pointer;
                padding: 10px; /* 增加點擊區域 */
            }
        
            .lines-button .menu-line {
                display: block;
                width: 25px;
                height: 3px;
                background-color: #104383; /* 漢堡包線條顏色 */
                margin: 5px 0;
                transition: all 0.3s ease-in-out;
            }
        
            /* 漢堡包圖標動畫 (可選，需要 JS 添加 class) */
            /* 當菜單打開時，將 .menu-open-icon 添加到 .dt-mobile-menu-icon */
            .dt-mobile-menu-icon.menu-open-icon .menu-line:nth-child(1) {
                transform: translateY(0px) rotate(45deg);
            }
        
            .dt-mobile-menu-icon.menu-open-icon .menu-line:nth-child(2) {
                opacity: 0;
            }
        
            .dt-mobile-menu-icon.menu-open-icon .menu-line:nth-child(3) {
                transform: translateY(-1px) rotate(-45deg);
            }
        
            /* 隱藏桌面導航的下劃線等裝飾，只在手機菜單顯示時應用 */
            .main-nav.underline-decoration:after,
            .main-nav.from-centre-line:before,
            .main-nav.from-centre-line:after {
                display: none;
            }
            .footer-content {
                width: 100%;
                margin: 0 auto;
                padding-left: 10px;
                padding-right: 10px;
            }
            form .btn-primary {
                width: 100%;
                height: 40px;
                margin-top: 10px;
                font-size: 18px;
            }

            li span.s2 {
                font-size: 13px;
                line-height: 14px;
            }

            .masthead:not(.side-header):not(.side-header-v-stroke):not(.side-header-menu-icon) .header-bar, .ph-wrap {
                padding: 5px 15px 5px 15px;
            }

            .masthead:not(.side-header):not(.mixed-header) .header-bar, .header-space {
                min-height: 60px;
            }

            .branding a img, .branding img {
                width:150px;
            }

            /* --- 新增 CSS for Close Button (X) --- */
  

    /* --- 新增 CSS for Overlay Background --- */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0); /* 初始透明 */
        z-index: 99; /* 在菜單之下，在其他內容之上 */
        transition: background-color 0.3s ease-in-out; /* 平滑過渡 */
        display: none; /* 默認隱藏 */
    }

    .menu-overlay.active {
        background-color: rgba(0, 0, 0, 0.5); /* 激活時變為 50% 黑色 */
        display: block; /* 激活時顯示 */
    }

    .mobile-mb-3 {
        margin-bottom: 1rem !important;
    }

    .table-container {
        font-size:14px;
        padding: 0;
    }

    form .btn-secondary {
        width: 100%;
    height: 40px;
    margin-top: 10px;
    font-size: 18px;
    margin-bottom: 0;
    }

    .lucky-draw {
        background-image: url(/wp-content/uploads/2025/06/gery-bg-m.jpg);
        padding-top: 45px;
        padding-bottom: 40px;
    }

    .lucky-content {
        font-size: 16px;
        line-height: 25px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .luck-btn, .luck-btn-2 {
        width: 90%;
        font-size: 20px;
        padding-top: 15px;
    }

    .follow-text {
        font-size: 18px;
    }

    .thankyou-title {
        font-size: 22px;
        line-height: 32px;
    }

          
        }