@charset "utf-8";
/* CSS Document */
html{
    overflow-x:hidden;     
}
body {
    font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    padding-top: 80px; /* 將網頁內容往下拉，避免被 Header 蓋住 */
    overflow-x:hidden; 
}
/*header*/
        /* 客製化背景漸層 (吸取圖片中的顏色) */
        .custom-header {
            background: linear-gradient(90deg, #91cebc 0%, #60aebd 35%, #2a83ac 75%, #1f729b 100%);
            padding-top: 15px;
            padding-bottom: 15px;
        }
        .header .header_logo_dm{
            height: 26px;
        }
        /* 導覽列文字樣式 */
        .custom-nav-link {
            color: #ffffff !important;
            font-size: 15px;
            font-weight: 500;
            letter-spacing: 1px;
            padding: 8px 16px !important;
        }

        /* 滑鼠懸停效果 */
        .custom-nav-link:hover {
            color: #e0e0e0 !important;
        }

        /* 導覽列垂直分隔線 */
        .nav-divider {
            color: rgba(255, 255, 255, 0.7);
            display: flex;
            align-items: center;
            font-weight: 300;
            font-size: 14px;
        }

        /* Logo 品牌文字顏色 */
        .brand-text {
            color: #0050a0;
            font-weight: 800;
            font-size: 24px;
            letter-spacing: 1px;
            margin-left: 8px;
            font-family: Arial, sans-serif;
        }

        /* 語系下拉選單的小箭頭微調 */
        .lang-arrow {
            font-size: 10px;
            margin-left: 2px;
        }
/* --- 手機版選單浮動與白底樣式 --- */
@media (max-width: 991.98px) {
    /* 讓選單絕對定位，浮在畫面最上層 */
    #navbarNav {
        position: absolute;
        top: 100%; /* 從 Header 的最底部開始往下長 */
        left: 0;
        width: 100%;
        /* ▼ 改成純白背景 */
        background-color: #ffffff; 
        z-index: 9999; /* 確保在最上層 */
        padding: 1rem 1.5rem 1.5rem;
        /* 加上淡淡的陰影，讓白底選單更有懸浮感 */
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); 
    }
    
    /* 調整選單為靠左對齊，填滿寬度 */
    .navbar-nav {
        align-items: flex-start !important;
        width: 100%;
    }
    
    .nav-item {
        width: 100%;
        /* ▼ 底線改成淺灰色，適應白底 */
        border-bottom: 1px solid #eaeaea; 
    }
    
    .nav-item:last-child {
        border-bottom: none;
    }
    
    /* ▼ 白底上的文字顏色，改為深藍色 (呼應Logo) */
    .custom-nav-link {
        padding: 15px 0 !important;
        display: block;
        color: #0050a0 !important; 
        font-weight: 500;
    }

    .custom-nav-link:hover {
        color: #2a83ac !important;
    }

    /* 語系下拉選單展開時的樣式微調 */
    .dropdown-menu {
        background-color: #f8f9fa; /* 用極淺灰做區隔 */
        border: none;
        padding-left: 10px;
    }
    .dropdown-item {
        color: #333333;
        padding: 10px 15px;
    }
    .dropdown-item:hover {
        background-color: transparent;
        color: #0050a0;
    }
}
/*header end*/
/*footer*/
/* 頁尾主要區塊背景漸層 (同 Header) */
/* --- 修正 Footer 語系下拉選單為白底黑字 --- */
.footer_logo_dm{
    height: 26px;
}
.footer-main .dropdown-menu {
    background-color: #ffffff !important; /* 確保選單是白底 */
    border: 1px solid rgba(0,0,0,0.1);
}

.footer-main .dropdown-item {
    color: #333333 !important; /* 將文字改為深灰色/黑色 */
    font-weight: 400;
}

.footer-main .dropdown-item:hover {
    background-color: #f1f1f1 !important; /* 滑鼠移過去時變成淺灰底 */
    color: #000000 !important;
}
        .footer-main {
            background: linear-gradient(90deg, #8dcab9 0%, #64b1c1 35%, #3189b1 75%, #1d7199 100%);
            color: #ffffff;
        }

        /* Logo 區塊 */
        .footer-brand {
            font-size: 32px;
            font-weight: 800;
            letter-spacing: 2px;
            font-family: Arial, sans-serif;
            color: #ffffff;
            text-decoration: none;
        }

        .footer-brand:hover {
            color: #ffffff;
        }

        /* 聯絡資訊區塊 */
        .contact-info {
            font-size: 15px;
            font-weight: 300;
            letter-spacing: 0.5px;
        }

        /* 導覽列連結區塊 */
        .footer-nav a {
            color: #ffffff;
            text-decoration: none;
            font-size: 15px;
            font-weight: 500;
            letter-spacing: 1px;
            transition: opacity 0.2s;
        }

        .footer-nav a:hover {
            opacity: 0.7;
        }

        /* 垂直分隔線 */
        .divider {
            color: rgba(255, 255, 255, 0.6);
            margin: 0 15px;
            font-weight: 300;
        }

        /* 語言切換小箭頭 */
        .lang-arrow {
            font-size: 10px;
            margin-left: 4px;
        }

        /* 底部版權區塊 (實色深藍) */
        .footer-bottom {
            background-color: #1b74bb; 
            color: #ffffff;
            font-size: 13px;
            letter-spacing: 0.5px;
        }
        
        /* 手機版 (RWD) 樣式微調 */
        @media (max-width: 768px) {
    .divider {
        display: none; /* 手機版隱藏分隔線，讓排版更清爽彈性 */
    }
    
    /* 聯絡資訊保持垂直排列 */
    .contact-info span {
        display: block;
        margin-bottom: 12px;
    }
    
    /* 導覽列選單改為橫排，自動換行並置中 */
    .footer-nav {
        margin-top: 20px;
        gap: 15px 25px; /* 上下間距 15px，左右間距 25px */
    }
    
    .footer-nav a {
        display: inline-block; /* 確保可以橫排 */
        margin-bottom: 0; /* 移除原本的底部距離，改由上面的 gap 控制 */
    }
    
    /* 語系下拉選單微調，讓它跟其他文字對齊 */
    .footer-nav .dropdown {
        margin-top: 0 !important; 
    }
        }
/*footer end*/
/*回頂端*/
#gotop_dm {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    padding: 1px 10px 4px 10px;
    font-size: 29px;
    background-color: rgba(100, 176, 164, 0.5);
    border-radius: 100%;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    color:#ffffff;
}

#gotop_dm:hover {
    background-color: rgba(100, 176, 164, 0.9);
}
.content{
    background-color: #f1f1f1;
    background-image:url(../img/bg_img.png?cache_9);
    background-size: 100%;
    background-position:top center;
    background-repeat: repeat-y;   

}
.title_dm .section-title {
    font-size: 28px;
    font-weight: bold;
    color: #444444;
    margin-bottom: 11px;
    letter-spacing: 2px;
}
.title_dm .title-underline {
    width: 120px;
    height: 4px;
    background-color: #7ab3a6; /* 湖水綠底線 */
    margin-bottom: 30px;
}
#successModal .modal-title{
    color:#0070c0;
}
#successModal .btn-close{
    color:#0070c0;
}
#successModal .btn-secondary{
    background-color:#0070c0;
}
@media (min-width: 1200px) {
    body {
        padding-top: 76px; /* 將網頁內容往下拉，避免被 Header 蓋住 */
    }

}
@media (min-width: 992px) {
.div_in{
    padding:70px 0; 
}
.col-lg-10_sidebarright{
    padding-left: 80px;
}
}
@media (max-width: 991px) {
    body {
        padding-top: 68px; /* 將網頁內容往下拉，避免被 Header 蓋住 */
    }
.div_in{
    padding:50px 0; 
}  
.col-lg-10_sidebarright{
    margin-top: 30px;
}
}