/* Body */
body {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	background-color: #FFFFFF;
	margin: 0;

}
header {
    width: 98%;
    height: 0%;
    background-color: #FFFFFF;
	text-align:right;
}

#abgne_float_ad {
	display: none;
	position: absolute;
}
#abgne_float_ad .abgne_close_ad {
	display: block;
	text-align: right;
	cursor: pointer;
	font-size: 12px;
}
#abgne_float_ad a img {
	border: none;
}
div.open {
	height: auto;
}


footer {
    width: 100%;
    background-color: #FFFFFF;
	text-align:center;


}

a {
text-decoration: none!important;
color: inherit;
cursor: pointer;
}
a:hovere {
	color: inherit;
}


.button3 {
    display: inline-block;
    border: solid 1px #ffffff;
    border-radius: 5px;
    padding-top: 4px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 4px;
    font-family: 微軟正黑體;
	font-weight:bold; 
    background-color: #ffffff;
    color: #747474;
    margin-top: 36px;
    margin-left: 0px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.button3 a{ text-decoration:none;
   color: #FFFFFF;
}



.hero_header2 {
    color: #ff7373;
    text-align: center;
    margin: 0;
    letter-spacing: 0px;
    font-family: "微軟正黑體";
    font-weight: bold;    
    padding-top: 40px;
    padding-bottom: 20px;	
}

.hero_header2 a{
    color: #ff7373;
	

}


.hero_header3 {
    color: #ff7373;
    text-align: left;
    margin: 0;
    letter-spacing: 0px;
    font-family: "微軟正黑體";
    font-weight: bold;
    font-size: 30px;
    padding-top: 15px;
    padding-bottom: 4px;
}


.hero_header4 {
    color: #787878;
    text-align: center;
    margin: 0;
    letter-spacing: 0px;
    font-family: "微軟正黑體";    
    padding-top: 40px;
    padding-bottom: 40px;	
}




.profile5 {		
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}

.pa {
	text-align: left;
	font-family: "微軟正黑體";
	font-size: 100%;
	color: #777777;
	padding-top: 0px;
	line-height: 200%;
    }
.pa a{
	color: #0084ff;

    }


.pa3 {
	text-align: center;
	font-family: "微軟正黑體";
	font-size: 80%;
	color: #787878;
	padding-top: 20px;
    }
.pa2 {
    text-align: center;
    font-family: "微軟正黑體";
    font-size: 120%;
    color: #777777;
    margin-top: 20px;
    }




.button {
    width: 100%;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    padding-top: 20px;
    padding-right: 0px;
    padding-bottom: 20px;
    padding-left: 0px;
    text-align: center;
    vertical-align: middle;
    border-radius: 0px;
    font-weight: bold;
    color: #ffffff;
	font-family: "微軟正黑體";
	background:linear-gradient(0deg,#fb3b50,#fe4b5e );
}



.b-only {
	width: 100%;
}

.a-only {
	width: 100%;
}



/* 背景遮罩 */
        .modal-overlay {
            display: none; /* 預設隱藏 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            
            /* Flexbox 置中 */
            display: flex;
            justify-content: center;
            align-items: center;
            
            /* 動畫效果 */
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        /* 顯示時的狀態 */
        .modal-overlay.show {
            visibility: visible;
            opacity: 1;
        }

        /* 彈跳視窗本體 (容器) */
        .modal-content {
            background-color: white;
            position: relative;
            padding: 15px;
            border-radius: 8px;            
            /* 尺寸設定：最大寬度 800px，手機寬度 95% */
            width: 800px;
            max-width: 95%;            
            /* 高度設定：不超過視窗 80%，內容多可捲動 */
			height: 800px;
            max-height: 85vh;
            overflow-y: auto;            
            box-shadow: 0 4px 10px rgba(0,0,0,0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* 圖片 RWD 設定 (最大 800x820 縮放) */
        .responsive-img {
            width: 100%;
            height: auto; /* 維持比例 */
            max-width: 800px;
   
            display: block;
            border-radius: 4px;
        }

        /* 關閉按鈕 */
        .close-btn {
            position: absolute;
            top: 1px;
            right: 1px;
            font-size: 30px;
            font-weight: bold;
            color: #333;
            cursor: pointer;
            z-index: 10;
            background: rgba(255, 255, 255, 0.8);
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 50%;
        }

        .modal-header {
            padding: 10px;
            background: #f1f1f1;
            text-align: right;
            height: 30px; /* 標頭高度 */
        }


        .close-btn:hover { color: red; }

        /* . 內嵌網頁區域 (Iframe) */
        .iframe-container {
            flex-grow: 1; /* 填滿剩餘空間 */
            width: 100%;
            height: 100%;
            border: none;
        }




        /* 淺灰色內容區塊 */
        .content-area {
    background-color: #e0e0e0; /* 淺灰色底色 */
    padding-top: 30px;
    padding-right: 50px;
    padding-left: 50px;
    padding-bottom: 30px;
    max-width: 80%; /* 限制內容最大寬度，提升電腦閱讀體驗 */
    margin: 0 auto; /* 置中 */
        }

        /* QA 容器樣式 */
        .qa-item {
            margin-bottom: 15px;
            border-radius: 8px;
            overflow: hidden; /* 確保圓角效果良好 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            background-color: white; /* QA 項目背景為白色 */
        }

        /* 題目樣式 */
        .question {
            background-color: white; 
            padding: 15px 20px;
            cursor: pointer; /* 顯示可點擊 */
            font-size: 1.1em;
            font-weight: bold;
            color: #787878; /* 橘色字體 */
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background-color 0.2s;
        }

        /* 點擊時的背景微變化 */
        .question:hover {
            background-color: #f9f9f9;
        }

        /* 展開/收合圖示 */
        .toggle-icon {
            font-size: 1.2em;
            margin-left: 10px;
            transition: transform 0.3s;
        }

        /* 展開時圖示旋轉 */
        .question.active .toggle-icon {
            transform: rotate(180deg);
        }

        /* 答案區塊樣式 */
        .answer {
            max-height: 0; /* 預設隱藏 (高度為 0) */
            overflow: hidden; /* 隱藏超出內容 */
            padding: 0 20px; /* 預設 padding 為 0 */
            transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out; 
            color: #714040; /* 深灰色字體 */
            font-weight: 500; /* 微軟粗黑體 */
            font-size: 1em;
			text-align: left;
			
        }

        /* 答案展開時的樣式 */
        .answer.open {
            max-height: 500px; /* 展開時設定一個足夠大的高度 */
            padding: 15px 20px 20px 20px;
        }
        
        /* 圖片 RWD 設置 */
        .answer img {
            max-width: 100%; /* 圖片最大寬度為其父容器的 100% */
            height: auto; /* 高度自動調整，保持圖片比例 */
            display: block; /* 確保圖片不被當作行內元素 */
            margin-top: 10px;
            border-radius: 4px;
        }

        /* --- 手機螢幕優化 (RWD) --- */
        @media (max-width: 600px) {
            .header {
                font-size: 1.3em;
            }
            .content-area {
                padding: 10px;
            max-width: 100%; /* 限制內容最大寬度，提升電腦閱讀體驗 */

        }
            
            .question, .answer {
                padding-left: 15px;
                padding-right: 15px;
            }
            .question {
                font-size: 1em;
            }
            .answer.open {
                padding-top: 10px;
                padding-bottom: 15px;
            }
        }


        /* ---------------------------------------------------- */
        /* 1. 外層置中容器：實現水平置中 */
        /* ---------------------------------------------------- */
        .center-wrapper {
            /* 讓區塊元素在可用空間中自動居中 */
            text-align: center; 
            /* 注意：如果使用 text-align 方式，內層元素必須是 inline 或 inline-block */
            width: 100%;
        }

        /* ---------------------------------------------------- */
        /* 2. 內部內容容器：用於圖標和文字的對齊 */
        /* ---------------------------------------------------- */
        .icon-and-text-container {
            /* 確保這個元素不會佔滿整行，才能被父元素的 text-align: center 影響 */
            display: inline-flex; 
            
            /* Flexbox 屬性：讓圖標和文字在同一行並垂直居中 */
            align-items: center; 
            gap: 10px; 
            
        }
        
        /* ---------------------------------------------------- */
        /* 3. SVG 圖標樣式 */
        /* ---------------------------------------------------- */
        .svg-icon {
            width: 70px; 
            height: 70px; 
            flex-shrink: 0; 
        }
        
        .svg-icon svg {
            width: 100%;
            height: 100%;
            display: block;
        }







     /* 按鈕容器樣式 */
        .button-container {
            /* 最大寬度控制在電腦上看起來不會太寬 */
            max-width: 900px; 
            width: 100%;
            display: flex;
            flex-wrap: wrap; /* 允許換行 */
            gap: 20px; /* 按鈕間距 */
            justify-content: center; /* 按鈕在容器內居中 */
        }

        /* 按鈕單元樣式 */
        .button-item {
    /* 預設的寬度，會在 Media Query 中被覆寫 */
    flex-basis: calc(50% - 20px); /* 手機預設：每排 2 個 (50% - 間距) */
    background-color: #ff8a00; /* 按鈕背景 */
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.2s;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
        }

       .button-item2 {
    /* 預設的寬度，會在 Media Query 中被覆寫 */
    flex-basis: calc(50% - 20px); /* 手機預設：每排 2 個 (50% - 間距) */
    background-color: #fb3b50; /* 按鈕背景 */
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.2s;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
        }



        /* 藍色文字樣式 */
        .button-text {
            color: #fff; 
            font-size: 1em;
        }

        /* --- Media Query: 電腦螢幕 (寬度大於 768px) --- */
        @media (min-width: 768px) {
            .button-item {
                /* 電腦螢幕：每排 4 個 (25% - 間距) */
                flex-basis: calc(20% - 15px); /* 計算公式：(總寬度 - 總間距) / 項目數 */
            }
            /* 為了讓間距計算更精確，這裡調整一下按鈕容器的間距 */
            .button-container {
                gap: 20px;
            }
            .button-item2 {
                /* 電腦螢幕：每排 4 個 (25% - 間距) */
                flex-basis: calc(20% - 15px); /* 計算公式：(總寬度 - 總間距) / 項目數 */
            }
            /* 為了讓間距計算更精確，這裡調整一下按鈕容器的間距 */
            .button-container {
                gap: 20px;
            }			
			
			
        }

.header3 {
    background-color: #f9f9f9;
    color: #ff314f;
    padding-top: 15px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 30px;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
        }




.me-3 {
    margin-right: 1rem !important;
    margin-bottom: 30px;
}










/* Mobile */
@media (max-width: 299px) {
	
	.button3 {
    font-size: 40%;
    display: inline-block;
    border: solid 1px #ffffff;
    border-radius: 5px;
    padding-top: 3px;
    padding-right: 4px;
    padding-left: 4px;
    padding-bottom: 3px;
    font-family: 微軟正黑體;
	font-weight:bold; 
    background-color: #ffffff;
    color: #747474;
    margin-top: 18px;
    margin-left: 0px;
    margin-right: 2px;
    margin-bottom: 2px;
}
	.profile2 {
	width: 60%;
}



.hero_header2 {
    color: #ff7373;
    text-align: center;
    margin: 0;
    letter-spacing: 0px;
    font-family: "微軟正黑體";
    font-weight: bold;
	font-size: 18px;
    padding-top: 30px;
    padding-bottom: 10px;
}

.hero_header4 {
    font-size: 18px;
    padding-top: 30px;
    padding-bottom: 30px;	
}	
	
	
        .svg-icon {
            width: 48px; 
            height: 48px; 
            flex-shrink: 0; 
        }
	
	.hero_header3 {
    color: #ff7373;
    text-align: left;
    margin: 0;
    letter-spacing: 0px;
    font-family: "微軟正黑體";
    font-weight: bold;
    font-size: 18px;
    padding-top: 5px;
    padding-bottom: 10px;
}

	hr{
    border: 0;
    height: 2px;
    background:#e40101;
	width: 90%;

}
	





	.a-only {
display: none !important;
}		


	
	.profile5 {		
width: 50%;
text-align: center;
padding-top: 0px;
padding-bottom: 0px;
}
.button {
    width: 100%;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    padding-top: 20px;
    padding-right: 0px;
    padding-bottom: 20px;
    padding-left: 0px;
    text-align: center;
    vertical-align: middle;
    border-radius: 0px;
    font-weight: bold;
    color: #ffffff;
	font-family: "微軟正黑體";
	font-size: 70%;
	line-height: 15px;
	background:linear-gradient(0deg,#ff2a35,#fa4952 );

}
	
	.header3 {
    font-size: 1em;
  }
.pa3 {
	font-size: 60%;

    }	
.pa2 {

    font-size: 80%;

    }	
	
 .button-text {

            font-size: 0.7em;
        }
	
.pa {

	line-height: 160%;
    }	
	
}
/* Small Tablets */
@media (min-width: 300px)and (max-width: 767px) {
	.button3 {
    font-size: 60%;
    display: inline-block;
    border: solid 1px #ffffff;
    border-radius: 5px;
    padding-top: 3px;
    padding-right: 4px;
    padding-left: 4px;
    padding-bottom: 3px;
    font-family: 微軟正黑體;
	font-weight:bold; 
    background-color: #ffffff;
    color: #747474;
    margin-top: 18px;
    margin-left: 0px;
    margin-right: 2px;
    margin-bottom: 2px;
}


.profile2 {
	width: 60%;
}		



.hero_header2 {
    color: #ff7373;
    text-align: center;
    margin: 0;
    letter-spacing: 0px;
    font-family: "微軟正黑體";
    font-weight: bold;
	font-size: 22px;
    padding-top: 30px;
    padding-bottom: 10px;
}
.hero_header4 {
	font-size: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
}	
	
	
.svg-icon {
            width: 52px; 
            height: 52px; 
            flex-shrink: 0; 
        }	
	
	
	
	.hero_header3 {
    color: #ff7373;
    text-align: left;
    margin: 0;
    letter-spacing: 0px;
    font-family: "微軟正黑體";
    font-weight: bold;
    font-size: 22px;
    padding-top: 5px;
    padding-bottom: 10px;
}
	

	hr{
    border: 0;
    height: 2px;
    background:#e40101;
	width: 90%;

}
	







	
.a-only {
display: none !important;
}	


	
.profile5 {		
width: 50%;
text-align: center;
padding-top: 0px;
padding-bottom: 0px;
}
.button {
    width: 100%;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    padding-top: 20px;
    padding-right: 0px;
    padding-bottom: 20px;
    padding-left: 0px;
    text-align: center;
    vertical-align: middle;
    border-radius: 0px;
    font-weight: bold;
    color: #ffffff;
	font-family: "微軟正黑體";
	font-size: 70%;
	line-height: 15px;
	background:linear-gradient(0deg,#ff2a35,#fa4952 );
}

	.header3 {
    font-size: 1.2em;
  }
.pa3 {
	font-size: 70%;

    }	
.pa2 {

    font-size: 100%;

    }
	
	 .button-text {

            font-size: 0.9em;
        }
	
	
.pa {

	line-height: 160%;
    }	
	
	
}



/* Small Desktops */
@media (min-width: 768px) and (max-width: 1096px) {
.profile2 {
	width: 100%;
}





	.text-center {
	text-align: center !important;}



	hr{
    border: 0;
    height: 2px;
    background:#e40101;
	width: 80%;
}
	.b-only {
display: none !important;
}
	
	.profile5 {		
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
float:left;
}
	
}
	
@media (min-width: 1097px) and (max-width: 4000px) {

.profile2 {
	width: 98%;
}





	.text-center {
	text-align: center !important;}

	
.b-only {
display: none !important;
}
.profile5 {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 40px;
    float: left;
    padding-left: 20px;
}	
	
        .button-text {
            color: #fff; 
            font-size: 1.2em;
        }

	
}