@charset "utf-8";
@import url('Default.css');
/* =========================================
   1. Reset & Variables
   ========================================= */
.DefContent {
    --primary-color: #333;
    --secondary-color: #666;
    --accent-color: #2c3e50; /* 根據圖片色調推測的強調色 */
    --bg-light: rgba(237, 245, 250, 1);
    --spacing-unit: 3rem;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: var(--primary-color);
    font-size: 16px;
}

.DefContent * { box-sizing: border-box; margin: 0; padding: 0; }

.DefContent img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius:30px;
}

.DefContent ul { list-style: none; }

/* =========================================
   2. Layout Containers
   ========================================= */
.DefContent .container {
    max-width: 1430px;
    margin: 0 auto;
    padding: 0 20px;
}
.DefContent .container + .container { margin-top:20px;}
.DefContent .section-block {
    padding: var(--spacing-unit) 0;
    border-bottom: 1px solid #eee; /* 選用：區隔區塊 */
}

.DefContent .section-block:last-child { border-bottom: none; }

.DefContent .bg-light { background-color: var(--bg-light); }

.DefContent .text-center { text-align: center; }

/* =========================================
   3. Typography
   ========================================= */
.DefContent h2.main-title {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color:#5b87c4;
    line-height: 1.3;
}

.DefContent h3.sub-title {
    font-size: 1.2rem;
    color: var(--secondary-color);
    margin-bottom: .5rem;
    font-weight: 500;
}

.DefContent h3.section-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
	color:#5b87c4;
    position: relative;
	line-height:1.2;
}

/* 內容文字間距 */
.DefContent .content p { margin-bottom: 1rem; text-align: left; }

.DefContent .highlight-text {
    font-weight: bold;
    color: var(--accent-color);
    font-size: 1.1em;
    padding: 10px 0;
}

/* 列表樣式 */
.DefContent .check-list li {
    padding-left: 20px;
    margin-bottom: 8px;
    position: relative;
}

.DefContent .check-list li::before {
    content: "•"; /* 或者換成打勾符號 */
    color: var(--accent-color);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.DefContent .list-header { font-size: 1.2rem; margin-bottom: 15px; }
.DefContent .service-list li { margin-bottom: 5px; padding-left: 0; }

/* =========================================
   4. Grid System (RWD Core)
   ========================================= */
.DefContent .grid-row {
    display: flex;
	width:100%;
	overflow:hidden;
    flex-direction: column; /* 手機版：垂直堆疊 */
    gap: 30px;
}
.DefContent .img-col img {
    width: 100%;
    height: auto;
    border-radius:30px;
    display: block;
}
.DefContent .align-center { align-items: center; }

/* 平板與桌面版 (Min-width 768px) */
@media (min-width: 768px) {
    
    .DefContent .grid-row {
        flex-direction: row; /* 預設：橫向排列 (左圖右文) */
        align-items: center; /* 垂直置中 */
    }
	
	.DefContent .Ani_o .grid-row .img-col img { opacity:0; transform: translate(-20px, 0px);
	animation:left-to-right_Ani 0.5s forwards linear; animation-delay:0.5s;}
	
	.DefContent .Ani_o .grid-row .text-col { opacity:0; transform: translate(20px, 0px);
	animation:right-to-left_Ani 0.5s forwards linear; animation-delay:0.75s;}
	
    /* 3. 自動交錯邏輯 (Zigzag) */
    /* 選取「偶數順序」的 section，將其內部的 row 反轉 */
    .DefContent .section-block:nth-child(even) .grid-row {
        flex-direction: row-reverse; /* 反轉排列：變為 (左文右圖) */
    }
	
	.DefContent .section-block:nth-child(even).Ani_o .grid-row  .img-col img { opacity:0; transform: translate(20px, 0px);
	animation:right-to-left_Ani 0.5s forwards linear; animation-delay:0.5s;}
	
	.DefContent .section-block:nth-child(even).Ani_o .grid-row  .text-col { opacity:0; transform: translate(-20px, 0px);
	animation:left-to-right_Ani 0.5s forwards linear; animation-delay:0.75s;}
	
	 .DefContent .Ani_o .container + .container { opacity:0; transform: translate(-20px, 0px);
	animation:left-to-right_Ani 0.5s forwards linear; animation-delay:0.75s;}

    /* 4. 欄位寬度比例控制 (修正版) */
    /* 這裡使用 flex-basis 來定義寬度，確保反轉時比例跟著內容走 */
    
    /* 1:1 比例 */
    .DefContent .ratio-1-1 .img-col, 
    .DefContent .ratio-1-1 .text-col { 
        flex: 0 0  calc( 50% - 15px ); 
        max-width:  calc( 50% - 15px );
    }

    /* 5:7 比例 */
    /* 預設(左圖右文)：圖 41.6% / 文 58.3% */
    .DefContent .ratio-5-7 .img-col { flex: 0 0 calc( 41.66% - 15px ); max-width:  calc( 41.66% - 15px ); }
    .DefContent .ratio-5-7 .text-col { flex: 0 0  calc( 58.33% - 15px ); max-width:  calc( 58.33% - 15px ); }

    /* 4:8 比例 */
    .DefContent .ratio-4-8 .img-col { flex: 0 0  calc( 33.33% - 15px ); max-width:  calc( 33.33% - 15px ); }
    .DefContent .ratio-4-8 .text-col { flex: 0 0  calc( 66.66% - 15px ); max-width:  calc( 66.66% - 15px ); }

    /* 2:10 比例 */
    .DefContent .ratio-2-10 .img-col { flex: 0 0  calc( 16.66% - 15px ); max-width:  calc( 16.66% - 15px ); }
    .DefContent .ratio-2-10 .text-col { flex: 0 0  calc( 83.33% - 15px ); max-width:  calc( 83.33% - 15px ); }
    
    /* 8:4 比例 (圖大文小) */
    .DefContent .ratio-8-4 .img-col { flex: 0 0  calc( 66.66% - 15px ); max-width:  calc( 66.66% - 15px ); }
    .DefContent .ratio-8-4 .text-col { flex: 0 0  calc( 33.33% - 15px ); max-width:  calc( 33.33% - 15px ); }

}

/* 手機版微調 */
@media (max-width: 767px) {
   .DefContent .section-block { padding: 2rem 0; }
    
    /* 手機版讓標題小一點 */
    .DefContent h2.main-title { font-size: 1.5rem; }
    
    /* 手機版圖片下方增加間距 (如果圖片在文字上方時) */
    .DefContent .img-col { margin-bottom: 20px; }
    
    /* 如果希望手機版圖片永遠在最上方，可以用 order 控制 */
    /* .grid-row .img-col { order: -1; } 
    */
}

/* 平板與桌面版 (Min-width 768px) */
@media (min-width: 1025px) {
    
    .DefContent .ani-content { opacity:0; transition:all .5s;}
	 .DefContent .ani-content.Ani_o { opacity:1;}
}