/* 大筆電 */
@media (max-width: 1600px) {
    .nav-option-content {
        padding: 1.6875rem 5rem; /* 27px 80px */
        white-space: nowrap; /* 防止換行 */
    }
    
    .nav-option-title {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .nav-option-arrow {
        flex-shrink: 0;
        margin-left: 1rem;
    }
    
    .nav-option-expanded {
        padding: 0 5rem 1.6875rem 5rem; /* 0 80px 27px 80px */
    }

    .investor-info {
        padding: 2.3125rem 5rem 2.3125rem 3.75rem; /* 37px 80px 37px 60px */
    }
    
    .investor-divider {
        width: 37.5rem; /* 600px */
    }
}

/* 筆電 */
@media (max-width: 1440px) and (min-width: 991px) {
    .nav-option {
        padding: 0 0 5rem 0; /* 80px bottom */
    }
    
    .nav-option-content {
        padding: 1.5rem 3.75rem; /* 24px 60px */
        height: 5.5rem; /* 88px */
        white-space: nowrap; /* 防止換行 */
    }
    
    .nav-option-title {
        font-size: clamp(32px, 2rem, 999px);
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .nav-option-arrow {
        width: 2.125rem; /* 34px */
        height: 1.0625rem; /* 17px */
        flex-shrink: 0;
        margin-left: 1rem;
    }
    
    .nav-option-expanded {
        padding: 0 3.75rem 1.5rem 3.75rem; /* 0 60px 24px 60px */
    }
    
    /* Expandable content responsive styles */
    .expand-section-header {
        white-space: nowrap;
    }
    
    .expand-section-subtitle {
        font-size: clamp(22px, 1.375rem, 999px);
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .expand-section-arrow {
        width: 2.125rem; /* 34px */
        height: 1.0625rem; /* 17px */
        flex-shrink: 0;
        margin-left: 0.75rem;
    }
    
    .expand-contact-text {
        font-size: clamp(18px, 1.125rem, 999px);
    }

    .investor-title {
        font-size: clamp(42px, 2.625rem, 999px);
    }
    
    .investor-info {
        padding: 1.875rem 3.75rem 1.875rem 3.125rem; /* 30px 60px 30px 50px */
    }
    
    .investor-divider {
        width: 31.25rem; /* 500px */
    }
    
    .section-title {
        font-size: clamp(22px, 1.375rem, 999px);
    }
    
    .contact-text {
        font-size: clamp(18px, 1.125rem, 999px);
    }
    
    .general-title {
        font-size: clamp(42px, 2.625rem, 999px);
    }
}

/* 大橫式平板(例: iPad Pro/Air) */
@media (max-width: 1200px) and (min-width: 992px) {
    .nav-option {
        padding: 0 0 4rem 0; /* 64px bottom */
    }
    
    .nav-option-content {
        padding: 1.25rem 2.5rem; /* 20px 40px */
        height: 4.875rem; /* 78px */
        white-space: nowrap; /* 防止換行 */
    }
    
    .nav-option-title {
        font-size: clamp(28px, 1.75rem, 999px);
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .nav-option-arrow {
        width: 1.875rem; /* 30px */
        height: 0.9375rem; /* 15px */
        flex-shrink: 0;
        margin-left: 0.75rem;
    }
    
    .nav-option-expanded {
        padding: 0 2.5rem 1.25rem 2.5rem; /* 0 40px 20px 40px */
    }
    
    /* Expandable content responsive styles */
    .expand-section-header {
        white-space: nowrap;
    }
    
    .expand-section-subtitle {
        font-size: clamp(20px, 1.25rem, 999px);
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .expand-section-arrow {
        width: 1.875rem; /* 30px */
        height: 0.9375rem; /* 15px */
        flex-shrink: 0;
        margin-left: 0.5rem;
    }
    
    .expand-contact-text {
        font-size: clamp(16px, 1rem, 999px);
    }

    .investor-title {
        font-size: clamp(36px, 2.25rem, 999px);
    }
    
    .investor-info {
        padding: 1.5625rem 2.5rem 1.5625rem 2.5rem; /* 25px 40px 25px 40px */
    }
    
    .investor-divider {
        width: 25rem; /* 400px */
    }
    
    .section-title {
        font-size: clamp(20px, 1.25rem, 999px);
    }
    
    .spokesperson-name,
    .spokesperson-title {
        font-size: clamp(16px, 1rem, 999px);
    }
    
    .contact-text {
        font-size: clamp(16px, 1rem, 999px);
    }
    
    .general-title {
        font-size: clamp(36px, 2.25rem, 999px);
    }
}

/* 平板（<=992px） */
@media (max-width: 992px) {
    .nav-option {
        padding: 0 0 3rem 0; /* 48px bottom */
    }
    
    .nav-option-container {
        max-width: 90%;
        padding: 0 1.875rem; /* 30px */
    }
    
    .nav-option-content {
        padding: 1rem 1.875rem; /* 16px 30px */
        height: 4.375rem; /* 70px */
        white-space: nowrap; /* 防止換行 */
    }
    
    .nav-option-title {
        font-size: clamp(24px, 1.5rem, 999px);
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .nav-option-arrow {
        width: 1.5rem; /* 24px */
        height: 0.75rem; /* 12px */
        flex-shrink: 0;
        margin-left: 0.5rem;
    }
    
    .nav-option-expanded {
        padding: 0 1.875rem 1rem 1.875rem; /* 0 30px 16px 30px */
    }
    
    /* Expandable content responsive styles */
    .expand-section {
        margin-bottom: 1.5rem; /* 24px */
        padding-bottom: 1.5rem; /* 24px */
    }
    
    .expand-section-header {
        white-space: nowrap;
        margin-bottom: 1rem; /* 16px */
    }
    
    .expand-section-subtitle {
        font-size: clamp(18px, 1.125rem, 999px);
        text-align: center;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .expand-section-arrow {
        width: 1.5rem; /* 24px */
        height: 0.75rem; /* 12px */
        flex-shrink: 0;
        margin-left: 0.5rem;
    }
    
    .expand-contact-item {
        justify-content: center;
    }
    
    .expand-contact-text {
        font-size: clamp(16px, 1rem, 999px);
        text-align: center;
    }

    .investor-content {
        flex-direction: column;
        min-height: auto;
    }
    
    .investor-image {
        flex: none;
        height: 18.75rem; /* 300px */
        margin-left: 0;
        order: 1;
    }
    
    .investor-info {
        flex: none;
        padding: 2.5rem 1.875rem; /* 40px 30px */
        order: 2;
        text-align: center;
    }
    
    .investor-title {
        font-size: clamp(32px, 2rem, 999px);
        text-align: center;
    }
    
    .investor-divider {
        width: 100%;
        margin: 1.875rem auto; /* 30px auto */
    }
    
    .info-section {
        margin-bottom: 2.5rem; /* 40px */
    }
    
    .section-title {
        font-size: clamp(20px, 1.25rem, 999px);
        text-align: center;
    }
    
    .spokesperson-info {
        gap: 1.875rem; /* 30px */
        align-items: center;
    }
    
    .spokesperson {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .contact-item {
        justify-content: center;
        text-align: center;
    }
    
    .generalRequire {
        height: auto;
        min-height: 31.25rem; /* 500px */
        display: flex; /* 確保 flexbox 佈局 */
        flex-direction: column; /* 垂直佈局 */
    }
    
    .general-content {
        flex-direction: column-reverse; /* 圖片在上，文字在下 */
        flex: 1; /* 使用所有可用空間 */
        display: flex; /* 確保是 flex 容器 */
    }
    
    .general-info {
        flex: 1; /* 使用剩餘空間 */
        padding: 1rem; /* 16px - 進一步減少 padding */
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center; /* 垂直置中對齊 */
        align-items: center; /* 水平置中對齊 */
        min-height: 12.5rem; /* 200px - 確保最小高度 */
    }
    
    .general-image {
        flex: 0 0 auto; /* 不要伸縮，使用內容高度 */
        height: 15rem; /* 240px - 稍微減少圖片高度 */
    }
    
    .general-title {
        font-size: clamp(32px, 2rem, 999px);
        margin-bottom: 1.5rem; /* 24px - 標題與按鈕之間的間距 */
    }
}

/* 小平板或大手機（<=768px） */
@media only screen and (max-width: 768px) {
    .main-content{
        margin-top: 0;
    }

    .div_mobile_img{
        background: url("/images/company/contactUs/contactUs_banner_mobile.jpg");
    }

    .nav-option {
        padding: 0 0 2.5rem 0; /* 40px bottom */
    }
    
    .nav-option-container {
        max-width: 95%;
        padding: 0 1.25rem; /* 20px */
    }
    
    .nav-option-content {
        padding: 0.75rem 1.4375rem 0.75rem 1.25rem;
        height: 3.125rem; 
        white-space: nowrap; /* 防止換行 */
    }
    
    .nav-option-title {
        font-size: clamp(20px, 1.25rem, 999px);
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .nav-option-arrow, .expand-section-arrow {
        width: 2rem; /* 20px */
        height: 1rem; /* 10px */
        flex-shrink: 0;
        margin-left: 0.5rem;
    }
    
    .nav-option-expanded {
        padding: 0 1.4rem 0.875rem 1.25rem; /* 0 20px 14px 20px */
    }
    
    /* Expandable content responsive styles for mobile */
    .expand-section {
        margin-bottom: 0; /* 移除底部邊距 */
        padding-bottom: 0; /* 移除底部內距 */
        border-bottom: 1px solid #000000; /* 添加分隔線 */
    }
    
    .expand-section:first-child {
        border-top: 1px solid #000000; /* 第一個項目上方添加分隔線 */
    }
    
    .expand-section:last-child {
        border-bottom: 1px solid #000000; /* 確保最後一個也有底部分隔線 */
    }
    
    .expand-section-header {
        white-space: nowrap;
        margin-bottom: 0; /* 移除底部邊距 */
        padding: 0.875rem 0; /* 14px 上下內距 */
        align-items: center;
    }
    
    .expand-section-subtitle {
        font-size: clamp(20px, 1.25rem, 999px); /* 增大字體 */
        color: #0042FF; /* 設定為藍色，符合Figma設計 */
        text-align: left;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 700; /* 加粗字體 */
        margin: 0; /* 移除邊距 */
    }
    
    .expand-section-arrow {
        /* width: 1.25rem;
        height: 0.625rem; 
        flex-shrink: 0;
        margin-left: 0.5rem; */
    }
    
    .expand-contact-item {
        display: none; /* 目前隱藏聯絡項目，因為還沒有第三層 */
        justify-content: flex-start;
        gap: 0.5625rem; /* 9px */
    }
    
    .expand-contact-text {
        font-size: clamp(18px, 1.125rem, 999px);
        text-align: left;
    }

    /* Mobile-first investor container - 符合設計師樣式 */
    .investor {
        background-color: #ffffff;
    }
    
    .investor-content {
        display: flex;
        flex-direction: column;
        /* max-width: 30rem;  */
        width: 100%;
        margin: 0 0;
        min-height: auto;
    }

    .investor-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1.4;
        margin-left: 0;
        order: 1;
        background: url("/images/company/contactUs/investor_mobile.jpg");
        background-repeat: no-repeat;
        background-size: contain;
    }
    
    .investor-image img {
        display: none;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }
    
    .investor-info {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        background-color: #ffffff;
        padding: 1.3125rem 1.25rem 2.625rem; /* 21px 20px 42px */
        order: 2;
        text-align: left;
    }
    
    .investor-title {
        color: #0042FF;
        font-family: "Funnel Display", -apple-system, Roboto, Helvetica, sans-serif;
        font-weight: 700;
        font-size: clamp(28px, 1.75rem, 999px);
        line-height: normal;
        margin: 0;
        text-align: left;
        max-width: none;
    }
    
    .investor-divider {
        width: 100%;
        height: 0.075rem; /* 1.2px */
        background-color: #000000;
        margin: 0.6875rem 0 0 0; /* 11px top */
        border: none;
    }
    
    .info-section {
        width: 100%;
        margin-bottom: 0;
    }
    
    .info-section:nth-child(3) { /* Financial Information */
        margin-top: 1.625rem; /* 26px */
    }
    
    .info-section:nth-child(4) { /* Investor relations */
        margin-top: 2rem; /* 32px */
    }
    
    .info-section:nth-child(5) { /* Product information */
        margin-top: 2.8125rem; /* 45px */
    }
    
    .section-title {
        color: #0042FF;
        font-family: "Funnel Display", -apple-system, Roboto, Helvetica, sans-serif;
        font-weight: 700;
        font-size: clamp(21px, 1.3125rem, 999px);
        margin: 0 0 0 0; 
        text-align: left;
        line-height: normal;
    }
    
    .spokesperson-info {
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
        width: 100%;
    }
    
    .spokesperson {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin-bottom: 1.125rem; /* 18px for deputy spokesperson spacing */
    }
    
    .spokesperson:last-child {
        margin-top: 1.125rem; /* 18px */
    }
    
    .spokesperson-details {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0.75rem 0 0 0; /* 12px top */
        text-align: left;
    }
    
    .spokesperson-name {
        color: #000000;
        font-family: "Funnel Sans", -apple-system, Roboto, Helvetica, sans-serif;
        font-weight: 400;
        font-size: clamp(21px, 1.3125rem, 999px);
        line-height: normal;
        margin: 0;
    }
    
    .spokesperson-title {
        color: #000000;
        font-family: "Funnel Sans", -apple-system, Roboto, Helvetica, sans-serif;
        font-weight: 400;
        font-size: clamp(21px, 1.3125rem, 999px);
        line-height: normal;
        margin: 0;
    }
    
    .contact-item {
        display: flex;
        align-items: center;
        gap: 0.5625rem; /* 9px */
        margin: 1rem 0 0 0; /* 22px top */
        text-align: left;
        flex-direction: row;
        white-space: nowrap;
        justify-content: flex-start; /* 改為左對齊，符合設計師樣式 */
    }
    
    .contact-item:last-of-type {
        margin-top: 0rem;
    }
    
    .contact-icon {
        width: 2.6875rem; /* 43px */
        height: 2.6875rem; /* 43px - 設定固定高度確保垂直對齊 */
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .contact-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }
    
    .contact-text {
        color: #000000;
        font-family: "Funnel Sans", -apple-system, Roboto, Helvetica, sans-serif;
        font-weight: 400;
        font-size: clamp(21px, 1.3125rem, 999px);
        line-height: 1.2; /* 設定行高確保垂直對齊 */
        flex-basis: auto;
        align-self: center; /* 確保文字垂直置中 */
        text-align: left;
        margin: 0; /* 移除可能影響對齊的邊距 */
    }
    
    .contact-email {
        text-decoration: underline;
        color: #000000;
    }
    
    /* 移除之前隱藏圖示的設定，讓所有聯絡方式都顯示圖示 */
    .info-section .contact-item {
        justify-content: flex-start; /* 所有項目都左對齊 */
    }
    
    .info-section .contact-item .contact-icon {
        display: flex; /* 確保所有圖示都顯示 */
    }
    
    .info-section .contact-text {
        text-align: left; /* 文字左對齊 */
        width: auto; /* 移除固定寬度 */
    }

    .generalRequire {
        min-height: 25rem; /* 400px */
    }
    
    .general-content {
        flex-direction: column-reverse; /* 圖片在上，文字在下 */
    }
    
    .general-info {
        padding: 2.5rem 1.25rem 1.875rem 1.25rem; 
        text-align: left; /* 改為左對齊 */
        min-height: 10rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* 靠上對齊 */
        align-items: flex-start; /* 水平靠左對齊 */
    }
    
    .general-image {
        height: 17.5rem; 
    }
    
    .general-title {
        font-size: clamp(28px, 1.75rem, 999px);
        text-align: left; /* 標題靠左對齊 */
    }
}

/* 小型手機（<=576px） */
@media (max-width: 576px) {
    .nav-option {
        padding: 0 0 2.375rem 0;
    }
    
    .nav-option-container {
        max-width: 100%;
        padding: 0 0.9375rem; /* 15px */
    }
    
    /* Expandable content responsive styles for small mobile */
    .expand-section {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 1px solid #000000;
    }
    
    .expand-section:first-child {
        border-top: 1px solid #000000;
    }
    
    .expand-section:last-child {
        border-bottom: 1px solid #000000;
    }
    
    .expand-section-header {
        white-space: nowrap;
        margin-bottom: 0;
        padding: 0.75rem 0; /* 12px 上下內距 */
        align-items: center;
    }
    
    .expand-section-subtitle {
        font-size: clamp(18px, 1.125rem, 999px); /* 保持適中的字體大小 */
        color: #0042FF;
        text-align: left;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 700;
        margin: 0;
    }
    
    .expand-contact-item {
        display: none; /* 隱藏聯絡項目 */
    }
    
    .expand-contact-text {
        font-size: clamp(16px, 1rem, 999px);
    }

    /* Mobile-first investor container for small phones */

    .investor-image {
        height: auto;
        aspect-ratio: 1.4;
        order: 1;
    }
    
    .investor-info {
        padding: 1.125rem 0.9375rem 2.25rem; /* 18px 15px 36px - adjusted for smaller screen */
        order: 2;
        text-align: left;
    }
    
    .investor-divider {
        width: 100%;
        margin: 0.5625rem 0 0 0; /* 9px top - smaller margin */
    }
    
    .info-section:nth-child(3) { /* Financial Information */
        margin-top: 1.375rem; /* 22px - slightly less for mobile */
    }
    
    .info-section:nth-child(4) { /* Investor relations */
        margin-top: 1.75rem; /* 28px */
    }
    
    .info-section:nth-child(5) { /* Product information */
        margin-top: 2.5rem; /* 40px */
    }
    
    .spokesperson-details {
        margin: 0.625rem 0 0 0; /* 10px top */
    }
    
    .contact-icon {
        width: 2.25rem; /* 36px - slightly smaller */
        height: auto;
        aspect-ratio: 1.02;
    }
    
    .contact-text {
        font-size: clamp(18px, 1.125rem, 999px);
    }
    
    /* Financial Information email spacing */
    .info-section:nth-child(3) .contact-item {
        margin-top: 0.5rem; 
    }
    
    /* Product Information email spacing */
    .info-section:nth-child(5) .contact-item {
        margin-top: 0.5rem; /* 8px */
    }
    
    .spokesperson:last-child {
        margin-top: 1rem; /* 16px - reduced spacing */
    }
    
    .generalRequire {
        min-height: 21.875rem; /* 350px */
    }
    
    .general-info {
        /* padding: 1.875rem 0.9375rem 1.5625rem 0.9375rem;  */
        text-align: left; /* 改為左對齊 */
    }
}