/**
 * 星辰當舖 - 主要樣式
 * 包含全站共用樣式和首頁特有樣式
 */

/* 修復頁面溢出問題 */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

body {
    font-family: 'Huninn', 'jf-openhuninn', sans-serif;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 確保loan-promo-image不會導致頁面溢出 */
.loan-promo-image {
    position: relative;
    text-align: center;
    height: 180px;
    overflow: visible;
    max-width: 100%;
}

.loan-promo-image img {
    max-width: 70%;
    height: auto;
    margin-top: -100px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

/* 確保loan-projects-section不會導致頁面溢出 */
.loan-projects-section {
    padding: 40px 0;
    position: relative;
    overflow: hidden;
}

/* 環境介紹區塊樣式 */
.environment-section {
    padding: 0px 0;
    background: rgba(255, 255, 255, 0.05);
    margin: 0px 0;
}

.environment-section .section-title {
    color: #000;
    padding-bottom: 0;
}

.environment-section .section-title::after {
    display: none;
}

.environment-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.environment-grid .col-md-6 {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
}

.environment-item {
    background: rgba(255, 255, 255, 0.1);
    border: 3px solid #ffffff;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    height: 300px;
    width: 100%;
}

.environment-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(247, 201, 110, 0.2);
    border-color: #f7c96e;
}

.environment-content {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.video-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.panorama-content #panorama {
    width: 100%;
    height: 100%;
    background: #000;
}

.image-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.environment-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* 響應式設計 */
@media (max-width: 768px) {
    .environment-section {
        padding: 40px 0;
        margin: 20px 0;
    }
    

    
    .environment-item {
        height: 250px;
        margin-bottom: 15px;
    }
    
    .environment-grid {
        gap: 15px;
    }
    
    .environment-grid .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* 確保版權區域完整顯示 */
.site-footer {
    position: relative;
    color: #fff;
    padding: 0px 0 0;
    margin-top: 150px;
    z-index: 8;
    overflow: visible;
}

.copyright {
    margin-top: 10px;
    padding: 15px 0;
    font-size: 14px;
    background: linear-gradient(to right, #f5c15c, #f1a30a);
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: hidden;
}

/* 強制所有文字使用圓潤字體 */
*, 
*::before, 
*::after {
    font-family: 'Huninn', 'jf-openhuninn', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Huninn', 'jf-openhuninn', sans-serif;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}

a {
    text-decoration: none;
    color: #e9a63b;
    transition: all 0.3s ease;
}

a:hover {
    color: #f7c96e;
}

.container {
    max-width: 1200px;
    padding: 0 15px;
}

/* 共用元素 */
.section-title {
    font-size: 25px;
    font-weight: 900;
    color: #000000;
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, #f7c96e, #e9a63b);
}

.section-subtitle {
    font-size: 18px;
    color: #aaa;
    margin-bottom: 40px;
}

/* 按鈕樣式 */
.btn {
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary {
    background: linear-gradient(to right, #f7c96e, #e9a63b);
    color: #0a1128;
}

.btn-primary:hover {
    background: linear-gradient(to right, #e9a63b, #f7c96e);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(233, 166, 59, 0.3);
}

.btn-outline-primary {
    background: transparent;
    border: 2px solid #e9a63b;
    color: #e9a63b;
}

.btn-outline-primary:hover {
    background: #e9a63b;
    color: #0a1128;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(233, 166, 59, 0.3);
}

/* 首頁內容樣式 */
.home-content {
    padding: 60px 0;
}

/* 借款專案卡片 */
.loan-projects-grid {
    margin-top: 30px;
    margin-bottom: 50px;
}

.loan-project-card {
    background-color: rgba(10, 17, 40, 0.8);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(233, 166, 59, 0.1);
}

.loan-project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    border-color: rgba(233, 166, 59, 0.3);
}

.project-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(to bottom right, #f7c96e, #e9a63b);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.project-icon img {
    width: 50px;
    height: 50px;
}

.loan-project-card h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #fff;
}

.project-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.project-features li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px;
}

.project-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #e9a63b;
}

/* 特點區塊 */
.features-section {
    padding: 60px 0;
    background-color: rgba(7, 13, 31, 0.5);
    border-radius: 20px;
    margin: 30px 20px;
}

.features-container {
    margin-top: 40px;
}

.feature-card {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    width: 140px;
    height: 120px;
    margin: 0 auto 15px;
}

.feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-card h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #f7c96e;
}

.feature-card p {
    color: #ddd;
}

/* 成功案例區塊 */
.cases-section {
    padding: 60px 0;
}

/* 首頁成功案例區塊特殊間距 */
.home-cases-section {
    margin-top: 80px !important;
}

.cases-section .section-title {
    color: #000;
    padding-bottom: 0;
}

.cases-section .section-title::after {
    display: none;
}

.section-title.fw-900 {
    font-weight: 900;
    margin-bottom: 1rem;
}

.section-subtitle.fw-300 {
    font-weight: 500;
    font-size: 18px;
    color: #333;
    margin-bottom: 40px;
}

.case-card {
    background: linear-gradient(180deg, #fef499 0%, #fcc63d 100%);
    border: 2px solid #ffd52e;
    border-radius: 15px;
    padding: 20px;
    height: 100%;
    transition: all 0.3s ease;
}

.case-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    gap: 15px;
}

.case-icon {
    width: 24px;
    height: auto;
}

.case-title h3 {
    margin: 0;
    font-size: 24px;
    color: #000;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 15px rgba(255, 255, 255, 0.6), 0 0 20px rgba(255, 255, 255, 0.4);
}

.case-title h3 .highlight {
    color: #ec760e;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 15px rgba(255, 255, 255, 0.6), 0 0 20px rgba(255, 255, 255, 0.4);
    font-size: 30px;
}

.case-divider {
    position: relative;
    height: 1px;
    background: transparent;
    margin: 20px 0;
}

.case-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: repeating-linear-gradient(to right, #000 0, #000 2px, transparent 2px, transparent 4px);
}

.case-content {
    color: #000;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: justify;
}

.case-footer {
    color: #000;
    font-size: 15px;
    text-align: center;
    margin: 0;
    font-weight: 500;
}

/* 線上估價區塊 */
.estimate-section {
    padding: 60px 0;
    background-color: rgba(10, 17, 40, 0.7);
    border-radius: 20px;
    margin: 0 20px 60px;
}

.estimate-form {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 20px;
}

.form-label {
    color: #f7c96e;
    margin-bottom: 8px;
}

.form-control, .form-select {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    padding: 12px 15px;
}

.form-control:focus, .form-select:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(233, 166, 59, 0.5);
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(233, 166, 59, 0.25);
}

/* FAQ 簡介區塊 */
.faq-preview {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 15px;
    height: 100%;
}

.faq-preview h3 {
    color: #f7c96e;
    margin-bottom: 20px;
    font-size: 24px;
    text-align: center;
}

.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: rgba(255, 255, 255, 0.1);
    --bs-accordion-btn-color: #fff;
    --bs-accordion-btn-bg: rgba(10, 17, 40, 0.5);
    --bs-accordion-active-bg: rgba(233, 166, 59, 0.1);
    --bs-accordion-active-color: #f7c96e;
    --bs-accordion-btn-focus-border-color: rgba(233, 166, 59, 0.5);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(233, 166, 59, 0.25);
}

.accordion-item {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 10px;
}

.accordion-button:not(.collapsed) {
    color: #f7c96e;
    background-color: rgba(233, 166, 59, 0.1);
}

.accordion-body {
    color: #ddd;
    padding: 15px;
    line-height: 1.6;
}

.btn-link {
    color: #e9a63b;
    text-decoration: none;
    padding-left: 0;
    display: block;
    margin-top: 15px;
    text-align: center;
}

/* 首頁方案介紹區塊 */
.loan-projects-section {
    padding: 40px 0;
    position: relative;
}

.loan-projects-section .container {
    max-width: 1080px; /* 調整容器寬度更窄 */
    padding: 0 10px; /* 減少容器內邊距 */
}

.loan-projects-row {
    margin-bottom: 0px;
    margin-left: -5px; /* 負邊距使項目更緊密 */
    margin-right: -5px; /* 負邊距使項目更緊密 */
}

/* 調整項目間距 */
.loan-project-col {
    margin-bottom: 30px;
    padding-left: 5px; /* 減少左右內邊距 */
    padding-right: 5px; /* 減少左右內邊距 */
}

.loan-project-item {
    position: relative;
    transition: all 0.3s ease;
    max-width: 300px;
    margin: 0 auto;
    padding-top: 80px; /* 為上方圖標預留更多空間 */
}

.loan-project-link {
    display: block;
    text-decoration: none;
}

.loan-project-images {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loan-project-text {
    width: 120%; /* 縮小文字圖片尺寸 */
    height: auto;
    transition: transform 0.3s ease;
    margin: 0 auto;
    display: block;
}

.loan-project-icon {
    position: absolute;
    top: -80px; /* 調整到文字圖片上方 */
    left: 48%;
    transform: translateX(-50%);
    width: 100%; /* 與文字圖片保持相同比例 */
    max-width: 100%; /* 限制最大寬度 */
    height: auto;
    transition: transform 0.3s ease;
    z-index: 2; /* 確保圖標在文字圖片上方 */
}

.loan-project-link:hover .loan-project-text {
    transform: translateY(5px); /* 懸停時文字圖片下移 */
}

.loan-project-link:hover .loan-project-icon {
    transform: translateX(-50%) translateY(-5px); /* 懸停時圖標上移 */
}

/* 其他區塊樣式 */
.cases-section,
.contact-form-section,
.faq-section {
    padding: 60px 0;
    position: relative;
}

/* 公司簡介區塊 */
.about-section {
    padding: 0;
    margin-top: 0;
    background: url('../images/about_cloudbg.png') no-repeat center top;
    background-size: cover; /* 修改為 cover 以確保背景圖片完全覆蓋 */
    position: relative;
    padding-top: 130px; /* 為背景圖頂部預留空間 */
    padding-bottom: 60px;
    min-height: 500px; /* 確保最小高度足夠顯示背景 */
    z-index: 1; /* 確保層級高於其他背景 */
}

.about-section .container {
    padding-left: 0; /* 減少左側內邊距 */
    max-width: 1300px; /* 增加容器最大寬度 */
}

.about-section .row {
    margin-left: -0px; /* 負邊距使內容向左移動 */
}

.about-section .col-lg-10 {
    width: 90%; /* 確保文字區域寬度為90% */
    flex: 0 0 90%;
    max-width: 90%;
    padding-top: 95px; /* 向下移動70px */
}

.about-title {
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #000;
    font-family: 'Huninn', 'jf-openhuninn', 'Noto Sans TC', sans-serif;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 15px rgba(255, 255, 255, 0.6);
    line-height: 1.4;
    padding-left: 15px; /* 增加左側內邊距 */
}

.about-content {
    margin-bottom: 8px;
    padding-left: 15px; /* 增加左側內邊距 */
    width: 100%; /* 確保內容區域寬度為100% */
}

.about-content p {
    color: #28292c;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 5px; /* 減少段落間距為5px */
    font-family: 'Huninn', 'jf-openhuninn', 'Noto Sans TC', sans-serif;
}

.about-btn {
    display: inline-block;
    padding: 5px 30px;
    background: linear-gradient(to right, #ffa60c, #ec760e);
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 700;
    font-size: 15px;
    font-family: 'Huninn', 'jf-openhuninn', 'Noto Sans TC', sans-serif;
    transition: all 0.3s ease;
    border: 2px solid #ffd390;
    margin-left: 15px; /* 增加左側外邊距 */
}

.about-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 166, 12, 0.4);
    color: #fff;
}

/* 添加下方內容背景 */
.cases-section,
.contact-form-section,
.faq-section {
    position: relative;
    z-index: 0;
}

/* 移除之前添加的背景設置 */
body::after {
    display: none;
}

/* 移除背景容器和遮罩 */
.bottom-background-container,
.background-mask {
    display: none;
}

/* 公司簡介區塊 */
.about-section {
    padding: 0;
    margin-top: 0;
    background: url('../images/about_cloudbg.png') no-repeat center top;
    background-size: cover; /* 修改為 cover 以確保背景圖片完全覆蓋 */
    position: relative;
    padding-top: 130px; /* 為背景圖頂部預留空間 */
    padding-bottom: 60px;
    min-height: 500px; /* 確保最小高度足夠顯示背景 */
    z-index: 1; /* 確保層級高於其他背景 */
}

/* 下方內容區域背景 */
.cases-section,
.contact-form-section,
.faq-section {
    position: relative;
    z-index: 1;
}

/* 添加背景容器，包含所有下方內容區域 */
.content-background-wrapper {
    position: relative;
    background: url('../images/footer/bg2.jpg') no-repeat center top;
    background-size: cover;
    background-attachment: scroll;
    margin-top: -50px;
    padding-top: 50px;
    padding-bottom: 0;
    min-height: calc(100vh - 500px);
}

.content-background-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: -1;
}

/* 修改內容區塊背景，使其半透明 */
.cases-section,
.contact-form-section,
.faq-section {
    margin: 0px 0; /* 添加上下間距 */
    padding: 10px 0;
    border-radius: 15px; /* 添加圓角 */
}

/* 聯絡表單區塊 */
.contact-form-section {
    padding: 60px 0;
}

.contact-form-card {
    background-color: rgba(255, 255, 255, 0.5);
    border: 3px solid #d3d8fa;
    border-radius: 15px;
    padding: 15px;
}

/* 必填欄位說明 */
.required-field-note {
    color: #f1ad00;
    font-size: 14px;
    margin-bottom: 3px;
}

.text-required {
    color: #f1ad00;
}

.contact-form-card h2 {
    color: #000;
    font-weight: 700;
    margin-bottom: 15px;
}

.form-label {
    color: #000;
    font-weight: 500;
    margin-bottom: 4px;
}

.contact-form-card .mb-3 {
    margin-bottom: 8px !important;
}

.contact-form-card .mb-4 {
    margin-bottom: 12px !important;
}

.contact-form-card .mb-2 {
    margin-bottom: 4px !important;
}

.contact-form-card .mt-4 {
    margin-top: 12px !important;
}

.form-control {
    border: 1px solid #d3d8fa;
    border-radius: 8px;
    padding: 10px 15px;
    color: #000 !important;
    background-color: #fff;
}

.form-control:focus {
    border-color: #a5acf9;
    box-shadow: 0 0 0 0.2rem rgba(211, 216, 250, 0.25);
    background-color: #fff;
}

.form-control::placeholder {
    color: #666;
}

/* 單選和複選框的文字顏色 */
.form-check-label {
    color: #000;
}

.custom-amount {
    color: #000 !important;
    background-color: #fff;
}

/* 借款金額選項 */
.loan-amount-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
}

.form-check-inline {
    margin-right: 0;
    margin-bottom: 5px;
}

.form-check-input {
    border-color: #d3d8fa;
}

.form-check-input:checked {
    background-color: #f1ad00;
    border-color: #f1ad00;
}

.form-check-label {
    color: #000;
    font-weight: 400;
}

/* 自填金額輸入框 */
.custom-amount-input {
    display: flex;
    align-items: center;
}

.custom-amount {
    margin-left: 8px;
    height: 30px;
    padding: 4px 8px;
}

/* 借款方式選項 */
.loan-type-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* 按鈕樣式 */
.btn-secondary {
    background-color: #777679;
    color: #fff;
    padding: 8px 25px;
    border: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.btn-secondary:hover {
    background-color: #666668;
    color: #fff;
}

.btn-primary {
    background-color: #f1ad00;
    color: #fff;
    padding: 8px 25px;
    border: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.btn-primary:hover {
    background-color: #d99e00;
    color: #fff;
}

/* 常見問題區塊 */
.faq-section {
    padding: 60px 0;
}

/* 左側常見問答 */
.faq-title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.qa-icon {
    width: 100px;
    height: auto;
    margin-right: 15px;
}

.faq-title h2 {
    color: #000;
    margin: 0;
}

.qa-list {
    margin-bottom: 30px;
}

.qa-item {
    margin-bottom: 20px;
}

.question {
    background: linear-gradient(to bottom, #f8c86b, #eea902);
    border-radius: 50px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-right: 0;
    overflow: visible;
    position: relative;
    height: 46px;
}

.q-number {
    background: linear-gradient(to bottom, #667cd8, #26263c);
    color: #fff;
    width: 50px;
    height: 50px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    border-radius: 50%;
    position: absolute;
    left: -2px;
    top: -2px;
    z-index: 1;
}

.question h3 {
    color: #000;
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 20px 12px 60px;
    width: 100%;
}

.answer {
    padding: 0 5px 0 5px;
}

.answer p {
    color: #000;
    margin: 0;
    line-height: 1.6;
}

/* 右側聯絡資訊 */
.contact-info {
    padding-left: 30px;
}

.contact-title {
    color: #26263c;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    font-size: 24px;
}

.contact-title .highlight {
    color: #e57816;
}

.contact-text {
    color: #000;
    font-weight: 500;
    line-height: 1.8;
    margin-bottom: 30px;
}

.map-container {
    position: relative;
    margin-top: 30px;
}

.map-container iframe {
    border: 5px solid #ffc83f !important;
    border-radius: 10px;
}

.map-man {
    position: absolute;
    left: -87px;
    bottom: -87px;
    width: 120px;
    height: auto;
    z-index: 1;
}

/* FAQ 和聯絡我們按鈕樣式 */
.qa-more-btn,
.contact-btn {
    text-align: left;
    margin-top: 20px;
    padding-left: 5px;
}

.qa-more,
.contact-more {
    display: inline-block;
    margin-left: 0;
    transform: translateX(-5px);
}

/* RWD 響應式設計 */
@media (max-width: 768px) {
    .contact-form-card {
        padding: 20px;
    }

    .loan-amount-options,
    .loan-type-options {
        gap: 5px;
    }

    .form-check-inline {
        margin-bottom: 5px;
    }

    .custom-amount {
        width: 100px !important;
    }

    .contact-info {
        padding-left: 0;
        margin-top: 40px;
    }

    .map-man {
        width: 80px;
        left: -10px;
        bottom: -50px;
    }

    .question {
        border-radius: 30px;
        height: 36px;
    }

    .q-number {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 16px;
    }

    .question h3 {
        font-size: 16px;
        padding: 10px 15px 10px 50px;
    }

    .answer {
        padding: 0 15px 0 55px;
    }

    .qa-more-btn,
    .contact-btn {
        margin-top: 15px;
    }

    .qa-more,
    .contact-more {
        transform: translateX(-10px);
    }

    .content-background-wrapper {
        background-size: 250% auto;
        background-position: 65% top;
        min-height: calc(200vh - 500px);
        padding-bottom: 50px;
    }
}

/* 響應式調整 */
@media (max-width: 991px) {
    .section-title {
        font-size: 28px;
    }
    
    .home-content, .features-section, .cases-section, .estimate-section {
        padding: 40px 0;
    }
    
    .loan-project-card, .case-card, .estimate-form, .faq-preview {
        padding: 20px;
    }

    .loan-project-icon {
        max-width: 100px;
        top: -35px;
    }
    
    .loan-project-text {
        width: 80%;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .section-subtitle {
        font-size: 16px;
    }

    .about-section {
        padding-top: 80px;
        padding-bottom: 40px;
        margin-top: 0;
        background-size: cover;
        min-height: 450px;
    }
    
    .about-section .row {
        margin-left: -15px;
    }
    
    .about-section .col-lg-10,
    .about-section .col-md-11 {
        padding-top: 20px; /* 保持向下移動20px */
    }
    
    .about-title {
        font-size: 22px;
        margin-bottom: 5px;
    }
    
    .about-content p {
        font-size: 13px;
        line-height: 1.5;
    }
}

@media (max-width: 767px) {
    .section-title {
        font-size: 24px;
    }
    
    .section-subtitle {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
    .feature-icon {
        width: 120px;
        height: 100px;
    }
    
    .feature-card h3 {
        font-size: 20px;
    }

    .loan-project-col {
        margin-bottom: -5px; /* 負邊距，使項目向上移動 */
    }
    
    .loan-project-icon {
        max-width: 75%;
        top: -60px;
    }
    
    .loan-project-text {
        width: 100%;
    }
    
    .loan-projects-section,
    .cases-section,
    .contact-form-section,
    .faq-section {
        padding: 30px 0;
    }

    .about-section {
        padding-top: 20px; /* 減少頂部內邊距 */
        padding-bottom: 30px;
        margin-top: 0;
        background: url(../images/about_cloudbg1080.png) no-repeat center top;
        background-size: 150% auto; /* 調整背景圖片大小，確保覆蓋 */
        background-position: center top; /* 調整背景圖片位置 */
        min-height: 350px;
    }
    
    .about-section .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .about-section .row {
        margin-left: 0;
    }
    
    .about-section .col-lg-10,
    .about-section .col-md-11 {
        padding-top: 80px; /* 進一步增加向下移動的距離 */
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 20px; /* 增加左側內邊距 */
        padding-right: 20px; /* 增加右側內邊距 */
    }
    
    .about-content {
        text-align: left; /* 文字靠左對齊 */
        padding-left: 0;
        width: 100%; /* 增加內容區域寬度至100% */
        margin: 0; /* 移除自動邊距 */
    }
    
    .about-title {
        font-size: 16px;
        text-align: left; /* 標題靠左對齊 */
        padding-left: 0;
        margin-bottom: 10px; /* 增加標題下方間距 */
    }
    
    .about-btn {
        display: inline-block; /* 改為內聯塊級元素 */
        margin-left: 0; /* 移除左側外邊距 */
        margin-top: 10px; /* 增加按鈕上方間距 */
    }

    .content-background-wrapper {
        background-size: 588% auto; /* 調整背景圖片大小，確保覆蓋 */
        margin-top: -30px; /* 調整與上方區塊的重疊 */
        padding-top: 0px;
    }

    .case-card {
        margin-bottom: 20px;
        padding: 20px;
    }

    .case-title h3 {
        font-size: 20px;
    }

    .case-title h3 .highlight {
        font-size: 22px; /* 保持在手機版也比標題文字大 2px */
    }

    .case-content {
        font-size: 14px;
    }

    .case-footer {
        font-size: 13px;
    }
} 

/* 公司簡介頁面樣式 */
.about-page-section {
    padding: 40px 0 10px; /* 減少頂部和底部的間距 */
    position: relative;
}

/* 添加 col-lg-1-5 類別，使 5 個卡片在同一行 */
.col-lg-1-5 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 992px) {
    .col-lg-1-5 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* 設置公司簡介頁面的背景圖片 */
body.about-page {
    background: url('../images/inside_bg2400.jpg') no-repeat center top;
    background-size: cover;
    background-attachment: scroll; /* 改為跟隨滾動 */
    background-position: center top;
}

/* 設置 FAQ 頁面的背景圖片 */
body.faq-page {
    background: url('../images/inside_bg2400.jpg') no-repeat center top;
    background-size: cover;
    background-attachment: scroll; /* 改為跟隨滾動 */
    background-position: center top;
}

/* 設置成功案例頁面的背景圖片 */
body.cases-page {
    background: url('../images/inside_bg2400.jpg') no-repeat center top;
    background-size: cover;
    background-attachment: scroll; /* 改為跟隨滾動 */
    background-position: center top;
}

@media (max-width: 991px) {
    body.about-page,
    body.faq-page,
    body.cases-page {
        background: url('../images/inside_bg3840.jpg') no-repeat center top;
        background-size: 450% auto; /* 確保完整顯示，不裁切 */
        background-attachment: scroll;
        background-position: center top;
    }
}

.about-page-title {
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin-bottom: 0.5rem;
}

.about-page-subtitle {
    font-size: 18px;
    color: #48527e;
    margin-bottom: 40px;
    font-weight: 400;
}

.about-page-content {
    color: #000;
    font-size: 16px;
    line-height: 1.8;
}

.about-page-content p {
    margin-bottom: 15px;
}

.about-page-image {
    text-align: center;
}

.about-features-section {
    padding: 40px 0 80px;
}

/* FAQ 頁面特定樣式 */
.faq-full-section {
    padding: 0 0 40px; /* 減少頂部和底部的間距 */
    background-color: transparent; /* 移除白色背景 */
    border-radius: 0;
    margin: 0;
}

.faq-full-section .container {
    padding: 0;
    max-width: 1100px;
}

.faq-full-section .qa-row {
    margin: 0 -5px 10px; /* 減少行之間的間距 */
}

.faq-full-section .qa-row:last-child {
    margin-bottom: 0; /* 最後一行沒有底部間距 */
}

.faq-full-section .col-md-6 {
    padding: 0 10px; /* 減少列之間的間距 */
}

/* 固定每個問答項目的高度 */
.faq-full-section .qa-item {
    margin-bottom: 0;
    display: block;
    height: 128px; /* 保持固定高度 */
    position: relative;
    overflow: hidden;
}

.faq-full-section .question {
    background: linear-gradient(to bottom, #fad36f, #f5b332);
    border-radius: 30px;
    display: flex;
    align-items: center;
    margin-bottom: 8px; /* 微調間距 */
    padding-right: 20px;
    overflow: hidden;
    position: relative;
    height: 46px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    cursor: pointer;
}

.faq-full-section .q-number {
    background: linear-gradient(to bottom, #6c83c7, #3a3e6b);
    color: #fff;
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.faq-full-section .question h3 {
    color: #000;
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 20px 12px 58px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.faq-full-section .answer {
    display: block;
    padding: 0 15px 0 60px;
    margin-top: 0; /* 移除上邊距 */
    margin-bottom: 0; /* 移除下邊距 */
    height: 70px; /* 保持答案區域高度 */
    overflow: hidden;
}

.faq-full-section .answer p {
    color: #000;
    margin: 0;
    line-height: 1.6;
    font-size: 15px;
}

/* 添加懸停效果 */
.faq-full-section .qa-item:hover .question {
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}

/* 修改 about-page-section 樣式，減少間距 */
.about-page-section {
    padding: 40px 0 10px; /* 減少頂部和底部的間距 */
    position: relative;
}

/* FAQ 頁面圖文區塊樣式 */
.about-page-section .pl-md-4 {
    padding-left: 20px !important; /* 確保文字與圖片之間有足夠間距 */
}

.about-page-section .text-left {
    text-align: left !important;
}

.about-page-section .about-page-content p {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .about-page-section {
        padding: 30px 0 5px; /* 手機版更小的間距 */
    }
    
    .about-page-section .pl-md-4 {
        padding-left: 0 !important;
        margin-top: 15px;
    }
    
    .faq-full-section {
        padding: 10px 0 30px; /* 手機版更小的間距 */
    }
    
    .faq-full-section .container {
        padding: 0 10px;
    }
    
    .faq-full-section .qa-row {
        margin-bottom: 0;
    }
    
    .faq-full-section .col-md-6 {
        margin-bottom: 15px !important;
    }
    
    .faq-full-section .col-md-6:last-child {
        margin-bottom: 0 !important;
    }
    
    .faq-full-section .qa-item {
        height: auto;
        margin-bottom: 0;
    }
    
    .faq-full-section .question {
        border-radius: 25px;
        height: 38px;
    }
    
    .faq-full-section .q-number {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 16px;
    }
    
    .faq-full-section .question h3 {
        font-size: 14px;
        padding: 10px 15px 10px 45px;
    }
    
    .faq-full-section .answer {
        padding: 0 10px 0 45px;
        height: auto;
        margin-top: 5px;
    }
}

.about-feature-card {
    background-color: rgba(255, 255, 255, 0.5);
    border: 3px solid #d3d8fa;
    border-radius: 15px;
    padding: 25px 20px 15px; /* 增加底部內邊距，讓文字區域往下 */
    height: 100%;
    text-align: center;
    transition: all 0.3s ease;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 改為從頂部開始對齊 */
}

.about-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    text-align: center;
    margin-bottom: 0px; /* 進一步增加底部間距 */
}

.feature-icon img {
    max-width: 170px; /* 進一步放大圖片 */
    height: auto;
}

.feature-divider {
    width: 170px;
    height: 2px;
    background-color: #ffd390;
    margin: 27px auto -17px; /* 調整分隔線與文字的間距 */
}

.feature-text {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    margin-top: auto; /* 將文字推到底部 */
    padding-top: 10px; /* 為文字增加一些頂部間距 */
}

.about-bottom-title {
    color: #28292c;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff;
}

.about-bottom-subtitle {
    color: #000;
    font-size: 16px;
    margin-bottom: 25px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* 媒體查詢 - 平板和手機 */
@media (max-width: 991px) {
    .about-page-section {
        padding: 60px 0 30px;
    }
    
    .about-page-title {
        font-size: 28px;
    }
    
    .about-page-subtitle {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
    .about-page-content {
        margin-bottom: 30px;
        margin-left: 15px;
    }
    
    .about-bottom-title {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .about-page-section {
        padding: 40px 0 20px;
    }
    
    .about-page-title {
        font-size: 24px;
    }
    
    .about-feature-card {
        margin-bottom: 20px;
    }
    
    .about-bottom-title {
        font-size: 20px;
    }
    
    .about-bottom-subtitle {
        font-size: 14px;
    }
} 

/* 成功案例頁面特定樣式 */
.cases-full-section {
    padding: 0 0 40px;
    background-color: transparent;
    border-radius: 0;
    margin: 0;
}

/* 縮小標題區域的上下間距 */
.about-page-section .row {
    margin-bottom: 5px;
}

.about-page-section .row.align-items-center {
    margin-bottom: 10px;
    margin-top: -40px; /* 設置與上方標題的間距為15px */
}

.about-page-section .mb-4 {
    margin-bottom: 10px !important;
}

/* 調整內容與標題間的間距 */
.about-page-content.text-center {
    margin-top: 15px;
}

.cases-full-section .container {
    padding: 0;
    max-width: 1100px;
}

.cases-full-section .cases-row:first-child {
    margin-top: 5px; /* 設置第一行案例卡片的頂部間距為5px */
}

.cases-full-section .cases-row {
    margin: 0 -10px 20px;
}

.cases-full-section .cases-row:last-child {
    margin-bottom: 0;
}

.cases-full-section .col-md-6 {
    padding: 0 10px;
}

/* 案例數量樣式 */
.case-count-wrapper {
    margin-bottom: 5px !important; /* 強制設置底部間距為5px */
}

.case-count {
    text-align: right;
    color: #48527e;
    font-weight: 500;
    font-size: 16px;
    margin: 0;
    padding-right: 15px;
}

@media (max-width: 767px) {
    .cases-full-section {
        padding: 10px 0 30px;
    }
    
    .cases-full-section .container {
        padding: 0 10px;
    }
    
    .cases-full-section .cases-row {
        margin-bottom: 15px;
    }
    
    .cases-full-section .col-md-6 {
        margin-bottom: 15px !important;
    }
    
    .cases-full-section .col-md-6:last-child {
        margin-bottom: 0 !important;
    }
    
    .case-count {
        text-align: center;
        padding-right: 0;
    }
} 

/* 聯絡我們頁面樣式 */
body.contact-page {
    background: url('../images/inside_bg2400.jpg') no-repeat center top;
    background-size: cover;
    background-attachment: scroll;
    background-position: center top;
}

@media (max-width: 991px) {
    body.contact-page {
        background: url('../images/inside_bg3840.jpg') no-repeat center top;
        background-size: 380% auto;
        background-attachment: scroll;
        background-position: center top;
    }
}

/* 聯絡資訊方塊樣式 */
.contact-info-boxes {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

.contact-info-box {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid #ffd52e;
    border-radius: 10px;
    padding: 10px 15px;
    transition: all 0.3s ease;
    width: auto;
}

.contact-info-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-icon {
    width: auto;
    height: 30px;
    margin-right: 15px;
}

.contact-label {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin-right: 5px;
}

.separator {
    color: #e57816;
    font-weight: 700;
    margin: 0 10px;
}

.contact-value {
    font-size: 16px;
    color: #333;
    font-weight: 700;
}

/* 地圖容器樣式 */
.contact-map-container {
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    border: 5px solid #ffc83f;
}

.contact-map-container iframe {
    width: 100%;
    height: 350px;
    border: 0;
    display: block;
}

/* 底部內容樣式 */
.contact-image {
    text-align: right;
    padding-right: 10px;
}

.contact-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.contact-bottom-content {
    padding: 20px 20px 20px 10px;
    text-align: left;
}

.contact-bottom-title {
    font-size: 24px;
    font-weight: 900;
    color: #000;
    margin-bottom: 20px;
    line-height: 1.4;
    text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 0.8);
}

.highlight-text {
    color: #e57816;
    margin-right: 5px;
}

.contact-bottom-text {
    color: #000;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 700;
    margin-bottom: 25px;
}

.contact-bottom-text p {
    margin-bottom: 10px;
}

.contact-line-btn {
    margin-top: 20px;
}

.line-contact-btn {
    display: inline-flex;
    align-items: center;
    background-color: #5bb512;
    color: #fff;
    padding: 5px 25px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.line-contact-btn:hover {
    background-color: #4a9e0f;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(91, 181, 18, 0.3);
}

.line-icon {
    width: 32px;
    height: 32px;
    margin-right: 5px;
}

/* 響應式調整 */
@media (max-width: 767px) {
    .contact-info-box {
        margin-bottom: 15px;
        flex-wrap: wrap;
    }
    
    .contact-icon {
        height: 25px;
        margin-right: 10px;
    }
    
    .separator {
        margin: 0 5px;
    }
    
    .contact-bottom-title {
        font-size: 20px;
        margin-top: 20px;
    }
    
    .contact-bottom-text {
        font-size: 15px;
    }
    
    .line-contact-btn {
        width: 100%;
        justify-content: center;
    }
} 

.contact-bottom-section {
    padding-left: 50px;
} 

/* 聯絡頁面特定樣式 - 縮減間距 */
.contact-page-section {
    padding: 40px 0 10px;
}

.contact-page-section .about-page-title {
    margin-bottom: 6px;
}

.contact-page-section .about-page-subtitle {
    margin-bottom: 15px;
}

.contact-page-section .contact-info-boxes {
    margin-top: 15px;
}

.contact-page-section .contact-bottom-title {
    margin-bottom: 10px;
}

.contact-page-section .contact-bottom-text {
    margin-bottom: 15px;
}

.contact-page-section .contact-line-btn {
    margin-top: 10px;
}

/* 調整地圖容器高度 */
.contact-map-container iframe {
    height: 350px;
}

/* 手機版聯絡頁面樣式 */
@media (max-width: 767px) {
    /* 聯絡資訊方塊在手機版上下排列 */
    .contact-info-boxes {
        flex-direction: column;
        align-items: center;
    }
    
    .contact-info-box {
        width: 90%;
        margin-bottom: 10px;
    }
    
    /* 底部圖文區域在手機版往左移動 */
    .contact-bottom-section {
        padding-left: 10px;
    }
    
    /* 手機版地圖高度調整 */
    .contact-map-container iframe {
        height: 300px;
    }
    
    /* 手機版底部圖文區域調整 */
    .contact-image {
        text-align: center;
        padding-right: 0;
        margin-bottom: 15px;
    }
    
    .contact-image img {
        max-width: 60%;
    }
    
    .contact-bottom-content {
        padding: 0 15px;
    }
} 

/* 借款介紹頁面樣式 */
body.loan-page {
    background: url('../images/inside_bg2400.jpg') no-repeat center top;
    background-size: cover;
    background-attachment: scroll;
    background-position: center top;
}

@media (max-width: 991px) {
    body.loan-page {
        background: url('../images/inside_bg3840.jpg') no-repeat center top;
        background-size: 550% auto;
        background-attachment: scroll;
        background-position: center top;
    }
}

/* 借款介紹區塊 */
.loan-intro-section {
    padding: 40px 0 20px;
    position: relative;
}

.loan-intro-section .row.mb-4 {
    position: relative;
    z-index: 5; /* 確保標題在最上層 */
}

.loan-intro-image {
    text-align: center;
    position: relative;
    z-index: 1; /* 降低圖片層級 */
}

/* 電腦版的圖片位置 */
@media (min-width: 768px) {
    .loan-intro-image {
        margin-top: -140px; /* 電腦版保持原來的位置 */
    }
}

.loan-intro-content {
    padding: 0 15px;
}

.loan-intro-text {
    font-size: 16px;
    color: #000;
    font-weight: 400;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* 條件說明樣式 */
.loan-conditions {
    margin-top: 20px;
}

.condition-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.condition-icon {
    width: 20px;
    flex-shrink: 0;
    margin-right: 0px;
    margin-top: -5px;
}

.condition-icon img {
    max-width: 100%;
    height: auto;
}

.condition-content {
    flex-grow: 1;
}

.condition-title {
    font-size: 16px;
    font-weight: 700;
    color: #e57816;
    margin-bottom: 5px;
}

.condition-text {
    font-size: 16px;
    color: #000;
    line-height: 1.6;
    margin-bottom: 0;
}

/* 宣傳區塊樣式 */
.loan-promo-section {
    padding: 0 0 20px;
}

.loan-promo-box {
    position: relative;
    border: 3px solid #fff;
    border-radius: 15px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.1);
    overflow: visible;
}

.loan-promo-content {
    padding-right: 20px;
}

.loan-promo-text-bold {
    font-size: 17px;
    color: #000;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.6;
}

.loan-promo-text {
    font-size: 16px;
    color: #000;
    line-height: 1.6;
    margin-bottom: 0;
}

.loan-promo-image {
    position: relative;
    text-align: center;
    height: 180px;
    overflow: visible;
}

.loan-promo-image img {
    max-width: 70%;
    height: auto;
    margin-top: -100px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

/* 響應式調整 */
@media (max-width: 767px) {
    .loan-intro-section {
        padding-top: 40px; /* 大幅增加頂部間距，為圖片預留更多空間 */
    }
    
    .loan-intro-section .row.mb-4 {
        margin-bottom: 60px !important; /* 增加標題與內容的間距 */
    }
    
    .loan-intro-image {
        margin-top: -70px !important; /* 手機版調整圖片位置，避免覆蓋標題 */
        margin-bottom: 0;
    }
    
    .loan-intro-content {
        padding: 0;
        margin-top: 30px; /* 增加與圖片的間距 */
        margin-left: 15px;
    }
    
    .condition-icon {
        width: 40px;
        margin-right: -15px;
        margin-left: 15px;
    }
    
    .loan-promo-box {
        padding: 20px;
    }
    
    .loan-promo-content {
        padding-right: 0;
        margin-bottom: 20px;
    }
    
    .loan-promo-image img {
        max-width: 60%;
        margin-top: -10px;
        margin-right: 80px;
    }
} 

/* 借款標題塊樣式 */
.loan-title-banner {
    background: linear-gradient(to right, #e39f35, #f8ca7a);
    padding: 5px 20px;
    border-radius: 30px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    min-height: 31px;
}

.loan-title-banner h2 {
    color: #000000;
    font-weight: 700;
    margin: 0;
    font-size: 17px;
    text-align: left;
}

/* 應備文件區塊樣式 */
.document-categories {
    margin-top: 15px;
    margin-bottom: 0;
}

.document-category {
    margin-bottom: 15px;
}

.document-category-title {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e57816;
    display: inline-block;
}

/* 手機版應備文件區塊調整 */
@media (max-width: 767px) {
    .document-categories {
        margin-top: 10px;
    }
    
    .document-category {
        margin-bottom: 20px;
    }
    
    .document-category-title {
        padding-bottom: 5px;
        margin-bottom: 8px;
    }
}