@font-face {
    font-family: '思源黑體Medium';
    src: url('font/NotoSansTC-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: '思源黑體Regular';
    src: url('font/NotoSansTC-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

body, html{
    margin: 0;
    padding: 0;
    font-family: '思源黑體Medium', '思源黑體Regular',sans-serif; /* 設置整體字體 */
    font-weight: 500; /* 設置整體字體的粗細 */
    height: 100%;
    scroll-behavior: smooth;/* 滑順滾動 */
    scroll-margin-top: 65px;
}

body{
    overflow-x: hidden;
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start; /* 滾動對齊 */
}

[data-scroll-container] {
    overflow: hidden;
}

/* 導覽列基礎樣式 */
.navbar {
    position: fixed;/* 釘住畫面 */
    height: 65px;
    width: 100%;
    background-color: #E6F4FF;
    display: flex;
    justify-content: space-between; /* 修改：將justify-content改為space-between */
    object-position: right center; /* 水平靠右，垂直置中 */
    padding: 16px;
    box-sizing: border-box;
    z-index: 3; /* 導覽列的 z-index 設為比圖片高的值 */
}

/* Logo容器樣式 */
.logo-container {
    display: flex;
    align-items: center; /* 垂直置中 */
}

/* Logo樣式 */
.logo {
    width: 150px;
    height: 53.9px;
}

/* 導覽列按鈕容器樣式 */
.navbar-buttons {
    display: flex;
    gap: 16px;
}

/* 導覽列按鈕基礎樣式 */
.nav-button {
    height: 40px;
    width: 100px;
    background-color: transparent; /* 初始背景色設置為透明 */
    border: none;/* 移除按鈕邊框 */
    border-radius: 8px;/* 圓角程度 */
    cursor: pointer;
    font-size: 14px;
    color: #001D66;
    letter-spacing: 4px; /* 設置字距 */
    font-family: '思源黑體Medium', sans-serif; /* 設置按鈕字體 */

}

.nav-button:hover {
    background-color: #B1CEF0; /* 懸停背景色設置 */
    border-radius: 8px;/* 添加：將按鈕下方兩個角設置為 8px 圓角 */
}

.nav-button.active {
    background-color: #FFFFFF; /* 點擊後背景色設置為白色 */
    border-radius: 8px; /* 添加：設置按鈕的圓角 */
}

/* 下拉菜單樣式 */
.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; /* 相對於父元素的下方 */
    left: 0;
    background-color: #FFFFFF;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    border-radius: 0px 0px 8px 8px;
    overflow: hidden;
    z-index: 1; /* 確保下拉選單顯示在前面 */
    width: auto; /* 修改：設置寬度為自動 */
    height: auto; /* 修改：設置高度為自動 */
    padding: 16px; /* 修改：設置下拉選單的內邊距 */
}

/* 分隔區樣式 */
.dropdown-section {
    margin: 16px; /* 修改：設置兩區之間的間距 */
}

.dropdown-title {
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 8px;
    letter-spacing: 4px; /* 設置字距 */
}

/* 新增：下拉選單分隔線樣式 */
.dropdown-divider {
    height: 1px;
    width: 202px; /* 修改：設置分隔線的寬度 */
    background-color: #000000;
    margin-bottom: 16px; /* 修改：設置分隔線的下邊距 */
}

/* 下拉菜單項目樣式 */
.dropdown-item {
    display: block;
    text-decoration: none;
    color: #000000;
    font-size: 12px;
    letter-spacing: 4px;/* 設定字距 */
    width: 218px; /* 修改：設置按鈕的寬度 */
    height: 17px; /* 修改：設置按鈕的高度 */
}

.dropdown-item:hover {
    /*background-color: #E6F4FF;*/
    background-color: #E6F4FF;
}

/* 新增：下拉選單網格佈局樣式 */
.dropdown-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px; /* 修改：設置網格中的元素之間的間距 */
}

/* 響應式設計 */
@media (max-width: 800px) {
    .navbar-buttons {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 65px;
        left: 0;
        background-color: #E6F4FF;
        z-index: 1000;
        height: calc(100vh - 65px); /* 修改點：設置高度填滿屏幕 */
    }

    .navbar-buttons.active {
        display: flex;
    }

    #menu-toggle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        margin-right: 16px;
        background-color: transparent; /* 初始背景透明 */
        border: none; /* 移除邊框 */
        cursor: pointer; /* 添加指針手型 */
        transition: background-color 0.3s ease-in-out; /* 添加過渡效果 */
        border-radius: 8px;/* 圓角程度 */
    }

    #menu-toggle:hover {
        background-color: #B1CEF0; /* 懸停背景色設置 */
        border-radius: 8px;/* 添加：將按鈕下方兩個角設置為 8px 圓角 */
    }

    #menu-toggle.active {
        background-color: #FFFFFF; /* 點擊後背景色設置為白色 */
        border-radius: 8px; /* 添加：設置按鈕的圓角 */
    }
    
    #menu-toggle img {
        transition: transform 0.3s ease-in-out; /* 添加過渡效果 */
    }
    
    #menu-toggle.active img {
        transform: rotate(90deg); /* 旋轉90度 */
    }

    #support-menu {
        /* 修改點：設置下拉選單在響應式設計中的位置和寬度*/
        position: static;
        width: 100%;
        padding: 0;
        box-shadow: none;
    }

    #dropdown-menu { 
        /* 修改點：設置下拉選單在響應式設計中的位置和寬度*/
        position: static;
        width: 100%;
        padding: 0;
        box-shadow: none;
    }

    .dropdown-menu.active { /* 修改點：顯示下拉選單*/
        display: block;
    }
    .dropdown-menu {
        height: auto; /* 高度自動 */
        padding: 8px; /* 內邊距設置 */
        box-sizing: border-box; /* 包含內邊距和邊框 */
    }

    .dropdown-item {
        display: block; /* 使項目顯示為塊級元素 */
        width: 100%; /* 使項目寬度自適應容器寬度 */
        height: auto;
        box-sizing: border-box; /* 確保內邊距和邊框包含在寬度內 */
        word-wrap: break-word; /* 使長字自動換行 */
    }

}

/* 隱藏選單按鈕 */
@media (min-width: 801px) {
    #menu-toggle {
        display: none;
    }
}

/* 區塊標題樣式 */

.section-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: #3775CD;
    padding:32px 0;
    max-height: 250px;
}

.section-title h2 {
    font-size: 70px; /* 標題字體大小 */
    letter-spacing: 4px; /* 設定字距 */
    text-align: center; /* 文字水平置中 */
    margin-bottom: 8px; /* 調整底邊距，讓標題與線條更接近 */
    line-height: 150%;
    margin: 0;
    padding: 0;
}

.title-divider {
    width: 398px; /* 線條寬度 */
    height: 5px; /* 線條高度 */
    background: linear-gradient(to right, #BAEF68, #1BAC3B); /* 漸變色背景 */
    padding: 0;
    margin: 0;
}

.contentText {
    font-size: 20px;
    letter-spacing: 4px; /* 設定字距 */
    line-height: 150%;
    color: #000000;
    margin: 0;
}

@media (max-width: 1440px) {
    .section-title h2 {
        font-size: 50px; /* 標題字體大小 */
    }

    .title-divider {
        width: 220px;
    }

    .contentText {
        font-size: 16px;
    }
}

@media (max-width: 1024px) {
    .section-title h2 {
        font-size: 30px; /* 標題字體大小 */
    }

    .title-divider {
        width: 100px;
    }

    .contentText {
        font-size: 12px;
    }
}

@media (max-width: 800px) {
    .title-divider {
        width: 220px;
    }
}

img {
    max-width: 100%; /* 確保圖片不會超出父元素的寬度 */
    height: auto;
}

.subtitle{
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0 0 32px 0;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.subtitleIcon{
    height: 46px;
    width: 46px;
    justify-content: flex-start;
    align-items:flex-start;
    margin-right: 16px;
    object-fit: contain; /* 圖片在容器內完整顯示 */
}

.subtitle p{
    font-size: 30px;
    color: #0059A9;
    font-weight: bold;
    margin: 0;
}

.subtitleImg{
    height: 51px;
    width: auto;
    object-fit: contain; /* 圖片在容器內完整顯示 */
    margin:0 0 32px 0;
}

.pointS{
    display: flex;
    flex-direction:row;
    height:auto;
    gap: 32px;
    width: 100%;
}

.pointColumn{
    display: flex;
    flex-direction: column;
    gap: 16px;
    height:auto;
    width: 100%;
}

.point{
    display: flex;
    flex-direction:row;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
    margin: 0;
    height:auto;
   
}

.pointStar{
    height: 30px;
    width: 30px;
    margin:0 16px 0 0;
    object-fit: contain; /* 圖片在容器內完整顯示 */
}

@media (max-width: 1440px) {
    .subtitle p{
        font-size: 25px;
    }
    .subtitleIcon{
        height: 40px;
        width: 40px;
    }
    .subtitleImg{
        height: 40px;
        object-fit: contain; /* 圖片在容器內完整顯示 */
        margin:0 0 32px 0;
    }
    .pointStar{
        height: 28px;
        width: 28px;
        margin:0 16px 0 0;
        object-fit: contain; /* 圖片在容器內完整顯示 */
    }
}

@media (max-width: 1024px) {
    .subtitle{
        margin: 0 0 16px 0;
    }
    .subtitle p{
        font-size: 20px;
    }
    .subtitleIcon{
        height: 30px;
        width: 30px;
    }
    .subtitleImg{
        height: 30px;
        margin:0 0 16px 0;
    }
    .pointStar{
        height: 20px;
        width: 20px;
        margin:0 16px 0 0;
    }
}

@media (max-width:800px) {
    .pointS{
        flex-direction:column;
        gap: 16px;
    }
}

/* section1 */
#section1 {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: center;
    justify-content: flex-start;
    height: 100vh;
    width: 100%;
    min-height: 913px;
}
.firstImgPh{
    display: none;
}
#section1 img{
    width: 100%;
}

.section1Bottom {
    display: flex;
    flex-direction: row; /* 水平排列 */
    justify-content: center;
    align-items: center;
    padding: 0 240px;
    background-color: #E6F4FF;
    box-sizing: border-box; /* 确保 padding 包含在宽度和高度中 */
    width: 100%;
    height: 100%;
}

.section1BottomImg{
    margin-left: 64px;
}
@media (max-width: 1600px) {

    #section1 {
        margin-top: 16px;
        min-height: 800px;
    }
    .section1Bottom {
        padding: 16px 64px;
    }
    .section1BottomImg{
        height:350px ;
        margin-left: 64px;
    }
}

@media (max-width: 1440px) {
    #section1 {
        margin-top: 24px;
        min-height: 600px;
        max-height: 600px;
    }
    .section1BottomImg{
        height:300px ;
        margin-left: 32px;
    }
}

@media (max-width: 1024px) {
    #section1 {
        margin-top: 32px;
        min-height: 500px;
        max-height: 500px;
    }
    .section1BottomImg{
        height:200px ;
        margin-left: 16px;
    }

}

@media (max-width: 800px) {
    #section1 {
        margin-top: 48px;
        min-height:1400px;
        max-height: 1400px;
    }
    .section1Bottom {
        flex-direction: column; /* 水平排列 */
        padding: 64px;
    }
    .section1BottomImg{
        height: 400px;

        margin-left: 0;
        margin-top: 16px;
        object-fit: cover; /* 也可以使用cover根據需求選擇 */
    }
    .firstImgPC{
        display: none;
    }
    .firstImgPh{
        display: flex;
        width: 100%;
    }
}

@media (max-width: 600px) {
    #section1 {
        min-height:1100px;
        max-height: 1100px;
    }
    .section1BottomImg{
        height: 300px;
        margin-left: 0;
        margin-top: 16px;
        object-fit: cover; /* 也可以使用cover根據需求選擇 */
    }
}

@media (max-width: 430px) {
    #section1 {
        min-height:900px;
        max-height: 900px;
    }
    .section1Bottom {
        padding: 0 16px;
    }
}

/* section2 */
.section2Bottom {
    height: 100%;
    width: 100%;
    background: url('img/Frame 269.png') no-repeat top left;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 913px;
}

.section2Card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 64px;
    margin-right: 64px;
    width: 980px;
    height: auto;
    background-color: #ffffff;
    box-shadow: -16px 16px 20px 4px rgba(0, 0, 0, 0.25);
    z-index: 1;
    border-radius: 16px;
}

@media (max-width: 1440px) {
    .section2Card {
        margin-left: 64px;
    }
}

@media (max-width: 800px) {
    .section2Bottom {
        background: url('img/Frame\ 269P.png') no-repeat top left;
        min-height: 700px;
        max-height: 700px;
    }
    .section2Card {
        padding: 32px;
        margin-right: 32px;
        margin-left: 32px;
    }
}

@media (max-width: 430px) {
    .section2Card {
        padding: 32px;
        margin-right: 16px;
        margin-left: 16px;
    }
}

.section3Top {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* 改變這裡以均衡分佈內部元素 */
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 64px 120px; /* 適當的邊距來確保內容不會貼邊 */
    box-sizing: border-box;
    flex-direction: row-reverse;/* 圖片在右邊，文字在左邊 */
}

.section3L {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-right: 64px;
    width: auto; /* 根據內容自適應寬度 */
}

.section3R{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: 64px;
    width: auto; /* 根據內容自適應寬度 */
}

.section3Bottom{
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* 改變這裡以均衡分佈內部元素 */
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 64px 120px; /* 適當的邊距來確保內容不會貼邊 */
    box-sizing: border-box;
}

.section3Img{
    width:945px;
    height: auto;
    object-fit: cover;
}

@media (max-width: 1600px) {
    .section3Img{
        width:800px;
    }
}

@media (max-width: 1440px) {
    .section3Img{
        width:720px ;
    }
}

@media (max-width: 1366px) {
    .section3Top {
        padding: 32px 64px;
    }
    .section3Bottom{
        padding: 32px 64px;
    }
    .section3Img{
        width:600px ;
    }
}


@media (max-width: 1024px) {
    .section3Top {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 32px 16px 0 16px;
    }
    .section3L {
        margin-right: 0;
    }
    .section3R {
        margin-left: 0;
    }
    .section3Bottom{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding:0  16px 32px 16px;
    }
    .section3Img{
        width:720px ;
        margin: 16px 0;
    }
}


#lastSection{
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#section7 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url('img/Frame\ 261.png');
    background-size: cover; /* 背景圖像覆蓋整個區域 */
    background-position: center; /* 背景圖像居中 */
    height:auto;
    min-height: 587px; 
    width: 100%;
    position: relative; /* 確保內容相對於區塊定位 */
}

.centered-text {
    height: auto;
    font-size: 120px;
    font-weight: bold;
    letter-spacing: 4px;
    line-height: 150%;
    color: #ffffff;
    text-align: center;
    padding-bottom:16px ;
    margin: 0;
}

.centered-text2{
    height: auto;
    padding-bottom: 64px;
    font-size: 52px;
    letter-spacing: 4px;
    line-height: 150%;
    color: #ffffff;
    text-align: center;
    margin: 0;
}

.button {
    width: 293px;
    height: 92px;
    background-color: #3775CD;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 4px;
    color: #ffffff;
    cursor: pointer;
    margin: 0;
    border: transparent;
    text-decoration: none; /* 移除按鈕中的底線 */
}

.button:hover {
    background-color: #001D66; /* 懸停時的背景色 */
}

.button.clicked {
    background-color: #ffffff; /* 點擊後的背景色 */
    color: #001D66; /* 點擊後的文本顏色 */
}

#sectionFooter {
    background-color: #E6F4FF;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.footer {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: auto;
}

.footer-columnLogo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 16px 64px; 
}

.footer-columnLogo p{
    color: #1F3F7C;
    font-size: 14px;
    line-height: 150%;
}

.footer-column {
    margin: 0 64px; 
}

.footer-column h3 {
    color: #1F3F7C;
    font-size: 16px;
    font-weight: bold;
    line-height: 150%;
    text-align: left;
    margin-bottom: 16px;
}

.footer-column p {
    color: #1F3F7C;
    font-size: 14px;
    line-height: 150%;
}

.footer-column a {
    text-decoration: underline;
    color: #1F3F7C;
    font-size: 14px;
    line-height: 150%;
}

.footer-line {
    width: 1200px;
    height: 1px;
    background-color: #1F3F7C;
    margin: 16px 0 16px 0; /* 與footer和footer-copyright之間的間距 */
}

.footer-copyright {
    font-size: 12px;
    color: #1F3F7C;
    line-height: 150%;
    text-align: center;
    margin-bottom: 16px;
}

@media (max-width: 1440px) {
    
    .centered-text {
        font-size: 80px;
    }

    .centered-text2{
        font-size: 40px;
    }
    
    .button {
        width: 195px;
        height: 61px;
        font-size: 20px;
    }
    
    #sectionFooter{
        height:auto;
    }

    .footer {
        margin-top: 16px;
        width: 100%;
    }

    .footer-columnLogo{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 16px 32px; 
    }
    
    .footer-columnLogo p{
        color: #1F3F7C;
        font-size: 12px;
        line-height: 150%;
    }
    
    .footer-column {
        margin: 0 32px; 
    }

    .footer-column h3 {
        font-size: 14px;
    }

    .footer-column p {
        font-size: 12px;
    }

    .footer-column a{
        font-size: 12px;
    }

    .footer-line {
        width: 800px;
        margin: 4px;
    }

    .footer-copyright{
        font-size: 10px;
        margin-bottom: 16px;
    }
}

@media (max-width: 1366px) {

    #section7{
        min-height:400px;
    }
    
    .centered-text {
        font-size: 60px;
    }

    .centered-text2{
        padding-bottom:16px;
        font-size: 30px;
    }
}


@media (max-width: 800px) {
    #lastSection{
        background-color: #E6F4FF;
    }

    .centered-text {
        font-size: 30px;
    }

    .centered-text2{
        font-size: 20px;
    }

    .button {
        width: 184px;
        height: 50px;
        font-size: 16px;
    }

    #sectionFooter{
        padding-top:32px ;
    }

    .footer {
        flex-direction: column;
    }

    .footer-line {
        width: 400px;
        margin: 32px 0 8px 0;
    }
}