/* 全局重置样式 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
    font-family: 'Noto Serif TC', sans-serif;
    overflow-x: hidden; /* 避免橫向卷軸 */
    height: 100%; /* 使html和body的高度為100% */
    margin: 0;
    width: 100%;
    overflow-x: hidden;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    width: 100%;
    overflow-x: hidden;
}

img, video, iframe, .slide {
    max-width: 100%; /* 限制元素寬度 */
    height: auto; /* 確保比例縮放 */
}

a{
    text-decoration: none;
}
/* 全局重置样式 */



/* 背景 GIF */
.video-background {
    position: relative;
    height: 85vh;
    overflow: hidden;
}

#bgGif {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 自適應填滿畫面 */
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none; /* 不阻擋按鈕 */
}

/* 選單 */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px; /* 根據需求調整高度 */
    background-image: url('../img/第三章-IQT.png'); /* 指定背景圖片的路徑 */
    background-size: cover; /* 確保圖片覆蓋整個區域 */
    background-position: center; /* 圖片置中 */
    background-repeat: no-repeat; /* 防止圖片重複 */
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    box-sizing: border-box;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.727); /* 陰影效果 */
}

/* Logo */
.logo {
    margin: 10px; /* 為 logo 添加外邊距 */
}

.logo img {
    height: 35px; /* 設置 logo 高度 */
    width: auto;
    padding-right: 20px;
}

/* 子選項 */
.submenu {
    padding-right: 40px; /* 為整個 submenu 增加右邊距 */
}

.submenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* 在小螢幕上自動換行 */
}

.submenu li {
    margin-left: 20px;
}

.submenu a {
    color: white;
    text-decoration: none;
}

.submenu a:hover {
    color: #FFE200; /* 滑過時的顏色，這裡是橙紅色，你可以根據需要調整 */
}

/* 漢堡選單圖示 */
.hamburger-menu {
    display: none; /* 預設隱藏 */
    width: 30px; /* 控制漢堡圖示寬度 */
    height: 3px; /* 漢堡圖示線條的高度 */
    background-color: white; /* 中間線條顏色 */
    position: fixed; /* 固定定位 */
    top: 30px; /* 距離頂部20px */
    right: 20px; /* 距離右側20px */
    cursor: pointer;
    z-index: 9999; /* 確保漢堡選單在最上層 */
}

.hamburger-menu::before,
.hamburger-menu::after {
    content: '';
    width: 30px;
    height: 3px;
    background-color: white; /* 上下線條顏色 */
    position: absolute;
    left: 0;
}

.hamburger-menu::before {
    top: -8px; /* 上方線條的間距 */
}

.hamburger-menu::after {
    top: 8px; /* 下方線條的間距 */
}

/* 響應式設計 */
@media (max-width: 732px) {
    .hamburger-menu {
        display: block; /* 顯示漢堡圖示 */
    }

    /* 隱藏 submenu，點擊漢堡圖示時才顯示 */
    .submenu {
        display: none;
        position: absolute;
        top: 60px; /* 讓 submenu 在漢堡圖示下方顯示 */
        right: 0;
        background-color: rgba(0, 0, 0, 0.9);
        width: 100%;
        text-align: center;
        z-index: 1; /* 確保submenu在漢堡圖示下面 */
        padding-top: 40px; /* 增加上邊距 */
        padding-bottom: 40px; /* 增加下邊距 */
        padding-right: 0; /* 去掉右邊距 */
    }

    .submenu ul {
        display: flex; /* 使用flex排版 */
        flex-direction: column; /* 垂直顯示選單項目 */
        align-items: center; /* 水平置中 */
        justify-content: center; /* 垂直置中 */
        padding: 0;
        margin: 0;
        height: 100%; /* 填滿整個submenu的高度 */
    }

    .submenu li {
        margin: 10px 0; /* 增加垂直間距 */
    }
}
/*-----------------------------------------------------------------------------*/
/* 您的智能投資夥伴 */
.overlay-text {
    position: absolute; /* 絕對定位 */
    left: 50%; /* 居中 */
    top: 50%; /* 垂直居中 */
    transform: translate(-50%, -50%); /* 完全居中調整 */
    text-align: center; /* 文字置中 */
    color: rgb(255, 255, 255); /* 文字顏色 */
    z-index: 10; /* 提高 z-index 值 */
    font-size: 50px;
    line-height: 1.5
}

.overlay-text h1 {
    white-space: nowrap;
    font-size: 48px; 
}

.overlay-text p {
    white-space: nowrap;
    font-size: 32px; 
}

.overlay-text img {
    width: 30%;
}

@media (max-width: 541px) {
    .overlay-text h1 {
        font-size: 34px; /* h1 字體縮小 */
    }

    .overlay-text p {
        font-size: 20px; /* p 字體縮小 */
    }
}

@media (max-width: 431px) {
    .overlay-text h1 {
        font-size: 32px; /* h1 字體縮小 */
    }

    .overlay-text p {
        font-size: 18px; /* p 字體縮小 */
    }
}

@media (max-width: 415px) {
    .overlay-text h1 {
        font-size: 32px; /* h1 字體縮小 */
    }

    .overlay-text p {
        font-size: 18px; /* p 字體縮小 */
    }
}

@media (max-width: 376px) {
    .overlay-text h1 {
        font-size: 32px; /* h1 字體縮小 */
    }

    .overlay-text p {
        font-size: 18px; /* p 字體縮小 */
    }
}

@media (max-width: 322px) {
    .overlay-text h1 {
        font-size: 30px; /* h1 字體縮小 */
    }

    .overlay-text p {
        font-size: 16px; /* p 字體縮小 */
    }
}
/* 您的智能投資夥伴 結束 */

/* 底圖 */
.content-section {
    position: relative;
    background-image: url('../img/background.png');
    background-size: cover;
    background-position: top; /* 將背景圖片對齊容器的上邊緣 */
    text-align: center;
}

/* 黃色大標統一間距 */
.content-background {
    padding-top: 32px;
    padding-bottom: 32px;
    border-radius: 10px;
    display: inline-block;
    max-width: 1920px;
}

/* 黃色大標 */
.content-background .see {
    position: relative;
    display: inline-block;
    color: #FFE200;
    font-size: 36px; 
    margin: 0;
    padding-bottom: 10px;
}

@media (max-width: 980px) {
    .content-background .see {
        padding-bottom: 10px; 
    }
}

.content-background hr {
    border: 0; /* 移除預設邊框 */
    height: 2px; /* 設置水平線的高度 */
    background-color: #FFE200; /* 設置顏色 */
    transform: skewX(100deg); /* 使用 skewX 使水平線斜體 */
}

/*可控制輪播*/
.slideshow-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 500px;
    margin: auto;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0; /* 確保元素定位在容器內 */
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* 底色 */
    background-image: url('../img/000.png'); /* 背景圖片 */
    background-size: cover; /* 背景圖片填滿 */
    background-position: center; /* 背景圖片居中 */
    background-blend-mode: multiply; /* 混合模式 */

    /* Flexbox 置中圖片 */
    display: flex;
    align-items: center; /* 垂直置中 */
    justify-content: center; /* 水平置中 */
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    transform: translateX(100%);
    border-radius: 15px;
    padding: 5px;
}

.slide img {
    width: 100%; /* 改成100%以確保填滿容器  object-fit: cover;*/
    height: 100%; /* 同樣設為100% */
    object-fit: contain; /* 讓圖片完整顯示在容器內，避免裁切 */
    object-position: center; /* 確保圖片保持居中 */
}

.slide .slide04img {
    width: 100%; /* 改成100%以確保填滿容器  object-fit: cover;*/
    height: 100%; /* 同樣設為100% */
    object-fit: contain; /* 讓圖片完整顯示在容器內，避免裁切 */
    object-position: center; /* 確保圖片保持居中 */
}


.slide.active {
    opacity: 1;
    transform: translateX(0);
}

/*幻燈片切換點*/
.dots {
    text-align: center;
    padding: 10px;
}
.dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}
.active-dot, .dot:hover {
    background-color: #FFE200;
}
.info-text {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
}

.icon-title-container {
    display: flex;
    align-items: flex-end; /* 底部對齊 */
    justify-content: center; /* 水平置中 */
}

.info-text .icon img{
    width: 20px; /* 設置 icon 的大小，可根據需求調整 */
    height: 20px;
    margin-right: 5px; /* icon 與 title 之間的間距 */
}

.info-text .title {
    font-size: 22px;
    font-weight: bold;
    color: #FFE200;
}

.info-text .description {
    font-size: 16px;
    color: #ffffff;
}
/* 隱藏所有幻燈片資訊的 div */
.slide-info {
    display: none;
}
/*-----------------------------------------------------------------------------*/
.content-section .content-background02{
    position: relative;
    background-image: url('../img/background-02.png');
    background-size: cover;
    background-position: top; /* 將背景圖片對齊容器的上邊緣 */
    text-align: center;
    padding-bottom: 80px;
}

/* 外層容器樣式 */
.content-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%; /* 自適應寬度 */
    text-align: center; /* 垂直文字置中 */
    margin: auto; /* 水平置中 */
}

.content-containers {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%; /* 自適應寬度 */
    text-align: center; /* 垂直文字置中 */
    margin: auto; /* 水平置中 */
}

/* 圖片和標題的外層容器 */
.media-frame {
    display: flex;
    flex-direction: column; /* 讓標題在圖片的上方 */
    align-items: center; /* 水平居中 */
    width: 90%; /* 設定容器寬度，自適應 */
    max-width: 1257px; /* 最大寬度 */
}

.overlay-title{
    color: #ffffff;
    font-size: 24px;
    line-height: 1.5;
    padding-top: 48px;
    padding-bottom: 48px;
}

.overlay-title02{
    color: #ffffff;
    font-size: 24px;
    line-height: 1.5;
    padding-top: 0px;
    padding-bottom: 48px;
}

@media (max-width: 535px) {
    .overlay-title {
        font-size: 18px; /* 調整字體大小 */
    }
}

/* 圖片樣式 */
.media-frame img {
    width: 100%; /* 圖片寬度自適應 */
    height: auto; /* 保持圖片比例 */
    object-fit: cover; /* 填滿容器 */
    border-radius: 10px; /* 圖片圓角 */
}
/*-----------------------------------------------------------------------------*/
/* 第一組 Tabs */
#tabs1 {
    width: 100%; /* 自適應寬度 */
    max-width: 1257px; /* 最大寬度限制 */
    border-radius: 10px;
    overflow: hidden;
    background-color: #1e007a2a;
    border: 2px solid #a080ff5e;
}

#tabs1 .tab-header {
    display: flex;
    background-color: #f4f4f4;
}

#tabs1 .tab-button {
    padding: 15px 20px; /* 調整 padding 以適應更多頁籤 */
    flex: 1;
    background-color: #3446A3;
    border: none;
    cursor: pointer;
    text-align: center;
    font-size: 18px;
    color: #ffffff;
    box-shadow: 0px 0px 20px 8px #150056;
}

#tabs1 .tab-button:hover {
    background-color: #071040;
}

#tabs1 .tab-button.active {
    background-color: #071040;
    color: white;
}

#tabs1 .tab-content {
    position: relative;
    overflow: hidden;
    height: auto;
    padding: 20px;
}

#tabs1 .tab-panel {
    display: none;
    padding: 0;
    text-align: left;
}

#tabs1 .tab-panel.active {
    display: flex; /* 使用 flex 排列 */
    align-items: center; /* 垂直置中對齊 */
}

#tabs1 .tab-panel img {
    max-width: 50%; /* 圖片寬度自適應容器 */
    height: auto;
    margin-right: 60px; /* 圖片與文字之間的間距 */
}

#tabs1 .tab-panel .scriptimg {
    max-width: 35%; /* 圖片寬度自適應容器 */
    height: auto;
    margin-right: 240px; /* 圖片與文字之間的間距 */
}

#tabs1 .tab-panel p {
    color: #ffffff;
    font-size: 24px;
    line-height: 1.5;
}

@media (max-width: 321px) {
    #tabs1 .tab-panel {
        flex-direction: column; /* 改為垂直排列 */
        text-align: center; /* 垂直排列時居中對齊 */
    }

    #tabs1 .tab-panel img {
        max-width: none; /* 圖片寬度自適應容器 */
        height: auto;
        margin-right: 0; /* 圖片與文字之間的間距 */
    }
    #tabs1 .tab-panel .scriptimg{
        max-width: 100%; 
        height: auto;
        margin-right: 0px;
    }
}

@media (max-width: 376px) {
    #tabs1 .tab-panel {
        flex-direction: column; /* 改為垂直排列 */
        text-align: center; /* 垂直排列時居中對齊 */
    }

    #tabs1 .tab-panel img {
        max-width: none; /* 圖片寬度自適應容器 */
        height: auto;
        margin-right: 0; /* 圖片與文字之間的間距 */
    }

    #tabs1 .tab-panel p{
        padding-top: 18px;
        font-size: 18px;
    }

    #tabs1 .tab-panel .scriptimg{
        max-width: 100%; 
        height: auto;
        margin-right: 0px;
    }
}

@media (max-width: 543px) {
    #tabs1 .tab-panel {
        flex-direction: column; /* 改為垂直排列 */
        text-align: center; /* 垂直排列時居中對齊 */
    }

    #tabs1 .tab-panel img {
        max-width: none; /* 圖片寬度自適應容器 */
        height: auto;
        margin-right: 0; /* 圖片與文字之間的間距 */
    }

    #tabs1 .tab-panel p{
        padding-top: 18px;
        font-size: 18px;
    }

    #tabs1 .tab-panel .scriptimg{
        max-width: 100%; 
        height: auto;
        margin-right: 0px;
    }
}

/* 第二組 Tabs */
.tab1-1 {
    display: flex; /* 使用 Flexbox 排版 */
    align-items: center; /* 水平置中 */
    justify-content: center; /* 垂直置中 */
    text-align: center; /* 讓文字置中 */
}

#tabs2 {
    width: 100%; /* 自適應寬度 */
    max-width: 1257px; /* 最大寬度限制 */
    border-radius: 10px;
    overflow: hidden;
    background-color: #1e007a2a;
    border: 2px solid #a080ff5e;
}

#tabs2 .tab-header {
    display: flex;
    background-color: #f4f4f4;
}

#tabs2 .tab-button {
    padding: 15px 20px; /* 調整 padding 以適應更多頁籤 */
    flex: 1;
    background-color: #3446A3;
    border: none;
    cursor: pointer;
    text-align: center;
    font-size: 18px;
    color: #ffffff;
    box-shadow: 0px 0px 20px 8px #150056;
}

#tabs2 .tab-button:hover {
    background-color: #071040;
}

#tabs2 .tab-button.active {
    background-color: #071040;
    color: white;
}

#tabs2 .tab-content {
    position: relative;
    overflow: hidden;
    height: auto;
    padding: 20px;
}

#tabs2 .tab-panel {
    display: none;
    padding: 0;
    text-align: left;
}

#tabs2 .tab-panel.active {
    display: flex; /* 使用 flex 排列 */
    align-items: center; /* 垂直置中對齊 */
}

#tabs2 .tab-panel img {
    max-width: 50%; /* 圖片寬度自適應容器 */
    height: auto;
    margin-right: 60px; /* 圖片與文字之間的間距 */
}

#tabs2 .tab-panel img[src="img/script06666666666-01.png"] {
    max-width: 25%; /* 調整圖片寬度為原來的 50% */
    height: auto; /* 確保圖片比例不變 */
}

#tabs2 .tab-panel .scriptimg {
    max-width: 35%; /* 圖片寬度自適應容器 */
    height: auto;
    margin-right: 240px; /* 圖片與文字之間的間距 */
}

#tabs2 .tab-panel p {
    color: #ffffff;
    font-size: 24px;
    line-height: 1.5;
}

@media (max-width: 321px) {
    #tabs2 .tab-panel {
        flex-direction: column; /* 改為垂直排列 */
        text-align: center; /* 垂直排列時居中對齊 */
    }

    #tabs2 .tab-panel img {
        max-width: none; /* 圖片寬度自適應容器 */
        height: auto;
        margin-right: 0; /* 圖片與文字之間的間距 */
    }
    #tabs2 .tab-panel .scriptimg{
        max-width: 100%; 
        height: auto;
        margin-right: 0px;
    }
}

@media (max-width: 376px) {
    #tabs2 .tab-panel {
        flex-direction: column; /* 改為垂直排列 */
        text-align: center; /* 垂直排列時居中對齊 */
    }

    #tabs2 .tab-panel img {
        max-width: none; /* 圖片寬度自適應容器 */
        height: auto;
        margin-right: 0; /* 圖片與文字之間的間距 */
    }
    #tabs2 .tab-panel .scriptimg{
        max-width: 100%; 
        height: auto;
        margin-right: 0px;
    }
    #tabs2 .tab-panel img[src="img/script06666666666-01.png"] {
        max-width: 60%; /* 調整圖片寬度為原來的 50% */
        height: auto; /* 確保圖片比例不變 */
    }
}

@media (max-width: 600px) {
    #tabs2 .tab-panel {
        flex-direction: column; /* 改為垂直排列 */
        text-align: center; /* 垂直排列時居中對齊 */
    }

    #tabs2 .tab-panel img {
        max-width: none; /* 圖片寬度自適應容器 */
        height: auto;
        margin-right: 0; /* 圖片與文字之間的間距 */
    }

    #tabs2 .tab-panel p{
        padding-top: 18px;
        font-size: 18px;
        white-space: nowrap; /* 禁止換行 */
        display: inline; /* 讓文字顯示為行內元素 */
    }

    #tabs2 .tab-panel .scriptimg{
        max-width: 100%; 
        height: auto;
        margin-right: 0px;
    }
}

/* 針對小螢幕的樣式調整 */
@media (max-width: 400px) {
    #tabs1, #tabs2 {
        width: 100%; /* 更窄的裝置下佔滿寬度 */
        margin: 10px auto; /* 減少外部間距 */
    }

    #tabs1 .tab-button,
    #tabs2 .tab-button {
        font-size: 14px; /* 縮小字體 */
        padding: 10px; /* 減少 padding */
    }

    #tabs1 .tab-content,
    #tabs2 .tab-content {
        padding: 10px; /* 減少內容 padding */
    }
}
/*--------------------複製成功經驗 - 購買課程立即使用--------------------*/
.animated-title {
    opacity: 0; /* 預設隱藏 */
}
/*--------------------下單 - 自動化--------------------*/
.image-wrapper {
    position: relative;
    display: inline-block; /* 確保容器只包裹圖片大小 */
    width: 100%; /* 確保在自適應時縮放 */
    max-width: 1257px; /* 限制圖片的最大寬度，視需求調整 */
}

.overlay-text002 {
    position: absolute;
    top: 40%; /* 根据需求自由调整垂直位置 */
    left: 71%; /* 根据需求自由调整水平位置 */
    transform: none; /* 移除居中修正 */
    font-size: calc(1.5vw);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    text-align: left; /* 可根据需求调整文字对齐 */
    z-index: 10; /* 提高 z-index 值 */
}

.overlay-text003 {
    position: absolute;
    top: 40%; /* 根据需求自由调整垂直位置 */
    left: 15%; /* 根据需求自由调整水平位置 */
    transform: none; /* 移除居中修正 */
    font-size: calc(1.5vw);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    text-align: left;
    transform: skewX(10deg);
    z-index: 10; 
}

img {
    width: 100%; /* 使圖片自適應容器 */
    height: auto;
}


/* 小圓點容器樣式 */
.carousel-dots {
    text-align: center;
    margin-top: 10px;
}

/* 小圓點樣式 */
.carousel-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.carousel-dot.active {
    background-color: #333;
}

/*--------------------學院-終身學習--------------------*/
/* 背景层 */
.content-block-bg04 {
    width: 100%; /* 背景色铺满屏幕 */
    background-color: #f5f5f5; /* 背景色 */
    border-radius: 120px 120px 0 0; /* 左上和右上角圆角 */
    padding: 60px 0; /* 上下内边距 */
    box-sizing: border-box; /* 确保 padding 在宽度内 */
    display: flex; /* 启用 Flex 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.content-block-bg05 {
    width: 100%; /* 背景色铺满屏幕 */
    background-color: #e9e9e9; /* 背景色 */
    padding: 60px 0; /* 上下内边距 */
    box-sizing: border-box; /* 确保 padding 在宽度内 */
    display: flex; /* 启用 Flex 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 限制内容宽度 */
.content-block-section04 {
    max-width: 1257px; /* 内容最大宽度 */
    width: 100%; /* 自适应宽度 */
    display: flex;
    flex-wrap: nowrap; /* 禁止内容换行 */
    gap: 20px; /* 文字和图片之间的固定间距 */
    justify-content: center; /* 内容水平居中 */
    align-items: center; /* 内容垂直居中 */
    box-sizing: border-box; /* 确保 padding 计算正确 */
    padding: 0 20px; /* 确保内容两侧有内边距 */
}

/* 文字部分 */
.text-content-section04 {
    flex: 1; /* 文字部分占用剩余空间 */
    min-width: 0; /* 避免 flex 元素超出容器 */
    display: flex;
    flex-direction: column; /* 垂直排列 h2 和 p 标签 */
    text-align: left; /* 文字左对齐 */
    line-height: 2; /* 增加行高，改善可读性 */
}

.text-content-section05 {
    flex: 1; /* 文字部分占用剩余空间 */
    min-width: 0; /* 避免 flex 元素超出容器 */
    display: flex;
    flex-direction: column; /* 垂直排列 h2 和 p 标签 */
    text-align: left; /* 文字左对齐 */
    line-height: 2; /* 增加行高，改善可读性 */
    padding-left: 20px;
}

.title-section04 {
    font-size: 2.5rem; /* 标题字体大小 */
    margin: 0; /* 清除默认外边距 */
    color: #3D3D98;
    font-weight: bold;
}

.text-with-icon-section04 {
    display: flex; /* 图标和文字水平排列 */
    align-items: center; /* 垂直居中图标和文字 */
    font-size: 1.2rem; 
    margin: 0; /* 清除段落默认外边距 */
    color: #3D3D98;
}

.icon-section04 {
    margin-right: 8px; /* 图标和文字的间距 */
    font-size: 1.2rem; /* 图标大小 */
}

/* 图片部分 */
.image-wrapper04 {
    flex: 0 0 auto; /* 图片宽度固定，不随内容调整 */
    max-width: 70%;
    box-sizing: border-box; /* 避免间距超出容器 */
    padding: 0; /* 去掉左右间距 */
}

.image-section04 {
    width: 100%; /* 图片自适应父容器 */
    height: auto; /* 保持比例 */
}

.image-section04-ip02{
    width: 80%; /* 图片自适应父容器 */
    height: auto; /* 保持比例 */
}


@media (max-width: 1142px) {
    .content-block-section04 {
        display: block; /* 改用 block 布局，垂直排列 */
        text-align: center; /* 居中对齐内容 */
        text-align: left; /* 文字左對齊 */
        margin-left: auto; /* 與容器左邊緣對齊 */
        margin-right: auto; /* 保持左右平衡 */
    }

    .text-content-section04 {
        text-align: left; /* 標題左對齊 */
        margin-left: 40px; /* 移除左邊距 */
    }

    .image-wrapper04 {
        text-align: left; /* 內容文字左對齊 */
        margin-left: 0; /* 移除左邊距 */
    }
}

/*支援*/
.section-container {
    display: flex;
    justify-content: center; /* 让 section-content 水平居中 */
    align-items: center; /* 垂直居中 */
    gap: 20px; /* 给两个 section-content 添加间距 */
    background-color: #ffffff; /* 背景色 */
    gap: 200px;
    padding-top: 40px;
}

.section-content {
    display: flex;
    align-items: center; /* 让 img 和 p 水平居中 */
    gap: 20px;
    margin-bottom: 40px;
}

.responsive-image {
    width: 80px; /* 调整图片大小 */
    height: auto;
}

.responsive-image:hover {
    animation: scaleAnimation 0.5s infinite;
}

.text-with-icon {
    align-items: center; /* 让图标和文本垂直居中 */
    color: #5959599c;
    font-weight: bold; /* 文字加粗 */
    text-align: left;  /* 文字左对齐 */
    line-height: 1.4;
}

.hover-scale {
    display: inline-block; /* 確保可以應用 transform 動畫 */
    transition: transform 0.3s ease; /* 平滑過渡效果 */
}

.hover-scale:hover {
    animation: scaleAnimation 0.5s infinite;
}

.text-with-icon .highlight-text {
    font-size: 1.5em; /* 放大文字 */
    color: #D70051; /* 自定義顏色 */
    font-weight: 700; /* 加粗 */
}

@media (max-width: 1000px) {
    .section-container {
        gap: 60px; /* 縮小 gap，適合小螢幕 */
    }

    .section-content {
        gap: 10px; /* 縮小內容之間的間距 */
        margin-bottom: 20px; /* 減少底部間距 */
    }

    .responsive-image {
        width: 60px; /* 縮小圖片大小 */
    }

    .text-with-icon {
        font-size: 14px; /* 縮小字體，適配小螢幕 */
        line-height: 1.2; /* 縮小行距 */
    }
}

@media (max-width: 720px) {
    .section-container {
        flex-direction: column; /* 改為垂直排列 */
        align-items: center; /* 內容水平置中 */
        gap: 40px; /* 垂直間距 */
        padding: 20px; /* 增加內邊距 */
        text-align: center; /* 確保文字置中 */
    }

    .section-content {
        flex-direction: column;
        width: auto; /* 子項目根據內容自適應寬度 */
        margin: 0; /* 清除額外邊距 */
        text-align: center; /* 文字置中 */
    }

    .responsive-image {
        margin: 0 auto; /* 確保圖片居中 */
        display: block; /* 確保 margin:auto 生效 */
    }

    .text-with-icon {
        font-size: 14px; /* 調整字體大小，適合小螢幕 */
        line-height: 1.4; /* 適合小螢幕的行距 */
        text-align: center;
    }
}

/*支援02*/
/* 黃色大標統一間距 */
.ap05{
    background-color: #ffffff;
}

.content-background005 {
    padding-top: 32px;
    padding-bottom: 32px;
    border-radius: 10px;
    display: inline-block;
    max-width: 1920px;
}

/* 黃色大標 */
.content-background005 .see005 {
    position: relative;
    display: inline-block;
    color: #D70051;
    font-size: 36px; 
    margin: 0;
    padding-bottom: 10px;
}

@media (max-width: 980px) {
    .content-background005 .see005 {
        padding-bottom: 10px; 
    }
}

.content-background005 hr {
    border: 0; /* 移除預設邊框 */
    height: 2px; /* 設置水平線的高度 */
    background-color: #D70051; /* 設置顏色 */
    transform: skewX(100deg); /* 使用 skewX 使水平線斜體 */
}

.see066 {
    width: 100%; /* 使其自适应 */
    max-width: 1257px; /* 设置最大宽度为 1257px */
    margin: 0 auto; /* 居中对齐 */
    padding-bottom: 40px;
    color: #595757;
    font-weight: bold; /* 文字加粗 */
    line-height: 1.4;
}

@media (max-width: 790px) {
    .see066 {
        padding-left: 20px; /* 左邊距 */
        padding-right: 20px; /* 右邊距 */
    }
}


.service-number {
    font-size: 24px; /* 文字變大 */
    color: #D70051;  /* 文字變色，這裡是橙色，你可以根據需要修改 */
}


/*懸停在視窗右邊*/
.fixed-right-container {
    position: fixed;  /* 固定定位 */
    right: 10px;         /* 將容器固定在視窗右邊 */
    top: 70%;         /* 將容器固定在視窗中間（垂直方向） */
    transform: translateY(-50%); /* 將容器垂直居中對齊 */
    z-index: 1000;    /* 確保容器顯示在其他元素之上 */
    display: flex;
    flex-direction: column; /* 讓子元素垂直排列 */
    gap: 20px; /* 子元素間距 */
}

.fixed-right-element {
    display: flex; /* 使用 flex 排版 */
    align-items: center; /* 垂直居中 */
    background: linear-gradient(to right, #490097, #001c4c);
    color: white;     /* 文字顏色 */
    padding: 30px 15px; /* 內邊距 */
    border-radius: 5px 0 0 5px; /* 圓角，讓左側有圓滑效果 */
    text-decoration: none; /* 去掉連結下劃線 */
    transition: background-color 0.3s ease; /* 背景色過渡效果 */
    transition: box-shadow 0.3s ease; /* 定義過渡效果，使陰影的出現和消失平滑進行 */
    animation: scaleAnimation 1s infinite; /*放大縮小持續作動動畫*/
}

.fixed-right-element:hover {
    background-color: #ffffff; /* 懸停時變深背景顏色 */
    color: #FFE200;
}

.fixed-right-element .icon {
    margin-right: 8px; /* 圖標與文字間距 */
    width: 24px; /* 圖標寬度 */
    height: 24px; /* 圖標高度 */
}

.fixed-right-element .text08 {
    font-size: 16px; /* 調整文字大小 */
    font-weight: 700;
}
/*懸停在視窗右邊-結束*/


.Warning .Warning-main-title {
    padding-top: 40px;
    padding-bottom: 0%;
    text-align: center;
    font-size: 32px;
    font-weight: 500;
    color: #0B298E;
}

/*警語*/
.noteblock {
    text-align: left;
    background-color: #4900970b;
    color: #464646;
    max-width: 820px; /* 保持最大寬度 */
    width: calc(100% - 40px); /* 使寬度自適應，並考慮邊距 */
    margin: 0 auto; /* 自動左右居中，並添加垂直邊距 */
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 20px; /* 調整內邊距 */
    border-radius: 50px;
    border: 2px dashed #490097; /* 虛線邊框 */
    box-sizing: border-box; /* 包含內邊距和邊框在寬度計算中 */
}


/*footer*/
footer {
    position: relative;
    background: linear-gradient(to right, #490097, #001c4c); /* 从紫色到蓝色的渐变 */
    color: #ffffff;
    padding: 20px;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    width: 100%;  /* 确保 footer 适应父容器宽度 */
    box-sizing: border-box; /* 包含 padding 在内的宽度计算 */
    overflow: hidden; /* 防止子元素溢出 */
}
/*footer-結束*/











.animated-title[data-animation="animate__zoomInDown"] {
    opacity: 0;
    transition: opacity 0.1s ease-in-out; /* 0.2秒的過渡時間 */
}

/* 定義動畫 */
@keyframes scaleAnimation {
    0% {
        transform: scale(1); /* 初始大小 */
    }
    50% {
        transform: scale(1.1); /* 放大 10% */
    }
    100% {
        transform: scale(1); /* 縮回原始大小 */
    }
}