/* 基本設定 */
        :root {
            --primary-color: #007bff;
            --secondary-color: #6c757d;
            --white-color: #fff;
            --black-color: #000;
            --light-gray: #e0e0e0;
            --dark-gray: #343a40;
            --spacing-sm: 8px;
            --spacing-md: 16px;
            --spacing-lg: 24px;
        }

        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #ebebeb;
        }

        a {
            text-decoration: none;
            color: #0231a1;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-md);
            box-sizing: border-box;
        }
		.section-3-1{
			max-width:720px;
		}	
		.section-3-1 a{
			font-size:1rem;	
		}		
		.slider-container .owl-carousel {
            position: relative; /* 確保箭頭定位在其內部 */
        }

        .slider-container .owl-carousel .item img {
            width: 100%;
            height: auto;
            display: block;
			aspect-ratio: 16 / 9;
        }

        .slider-container .owl-carousel .owl-nav {
            position: absolute;
            top: 50%;			
            right:0;
			left: 0;
            width: 100%;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;          
            z-index: 10;			
        }
		.owl-nav button.owl-prev {
			position: relative; left: -4px;
		}
		.owl-nav button.owl-next{
			position: relative; left: 4px;
		}

        .slider-container .owl-carousel .owl-nav button.owl-prev,
        .slider-container .owl-carousel .owl-nav button.owl-next {
            background: rgba(0, 0, 0, 0.5) !important;
            border: none !important;
            color: var(--white-color) !important;
            font-size: 24px !important;
            cursor: pointer;
            padding: 8px 12px !important;
            line-height: 1;
            transition: background-color 0.3s;
            outline: none;
        }

        .slider-container .owl-carousel .owl-nav button.owl-prev:hover,
        .slider-container .owl-carousel .owl-nav button.owl-next:hover {
            background: rgba(0, 0, 0, 0.8) !important;
        }

        .slider-container .owl-carousel .owl-dots {
            display: none; /* 隱藏底部點點 */
        }
        
        /* 漸層文字背景樣式 */
        .slider-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding-top: 100px;
            /* 由底部深黑漸層向上淡出至透明 */
            background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0) 100%);
            color: var(--white-color);
        }
        .slider-content .text-content {
            padding: 16px 34px 16px 16px;
        }
        .slider-content .text-content a {
            color: #fff;
			font-size:1.3rem;			
        }
        .slider-content h3 {
            margin: 0 0 6px 0;
            color: var(--white-color);
            font-size: 20px;
            font-weight: 600;
            line-height: 1.4;
			text-align:center;
        }
        .slider-content p {
            margin: 0;
            color: var(--white-color);
            font-size: 14px;
            line-height: 1.6;
        }
        .hide-mobile {
            display: none;
        }

        /* 導覽列 (區塊一) */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-md) var(--spacing-lg);
            background-color: var(--white-color);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .navbar .logo a {
            font-size: 24px;
            font-weight: bold;
            color: var(--black-color);
        }

        .nav-links {
            display: none; /* 預設手機板隱藏 */
        }
        .nav-links a {
            margin: 0 var(--spacing-md);
            color: var(--black-color);
            font-size: 16px;
        }

        .nav-icons {
            display: flex;
            align-items: center;
        }
        .nav-icons .icon {
            font-size: 20px;
            cursor: pointer;
            margin-left: var(--spacing-lg);
        }

        .hamburger {
            font-size: 24px;
            cursor: pointer;
            display: block;
        }

        /* 手機板選單 */
        .mobile-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: var(--white-color);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        .mobile-menu.active {
            display: block;
        }
        .mobile-menu a {
            display: block;
            padding: var(--spacing-md) var(--spacing-lg);
            border-bottom: 1px solid var(--light-gray);
        }

        /* 彈出視窗 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background-color: var(--white-color);
            padding: var(--spacing-lg);
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
            position: relative;
        }
        .modal-close {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 24px;
            cursor: pointer;
        }

        /* 廣告區 (區塊二) */
        .ad-section {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
			padding: 10px 16px 4px 16px; 
			gap: var(--spacing-lg); ;
        }
        .ad-item {
            
            color: var(--white-color);
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
        }
        .ad-item-720 {
            width: 100%;
            max-width: 720px;
            height: 90px;
			flex-shrink: 0;
        }
        .ad-item-720 img {
            max-width: 100%;
            height: auto;
        }
		
		.ad-item-720 ins.dcmads {
			display: block !important;
			width: 100% !important;
			max-width: 728px;
			margin: 0 auto !important;
		}
        .ad-item-336 {
            width: 336px;
            height: 90px;
			flex-shrink: 0;
        }
		.img-wrapper1 {
			display: flex;
			justify-content: center; /* 水平置中 */
			align-items: center;     /* 垂直置中（選擇性） */
			width: 100%;             /* 確保容器佔滿寬度 */
			text-align: center;      /* 針對內聯元素（如 <img>）的傳統置中 */
		}

		/* 確保廣告產生的圖片本身不會跑位 */
		.img-wrapper1 img {
			max-width: 100%;
			height: auto;
			display: block;          /* 消除圖片下方間隙 */
			margin: 0 auto;          /* 傳統的區塊元素置中 */
		}
        /* 主要內容區 (區塊三) */
        .main-content {
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-md);
            padding: var(--spacing-sm) 0;
			justify-content:center;
        }
        .main-content .section-3-1 {
            width: 100%;
        }
        .main-content .section-3-2 {
            display: none; /* 預設手機板隱藏 */
        }
        
        /* 區塊 3-1 */
        .combined-section {
            background-color: var(--white-color);
            padding: var(--spacing-lg);
            margin-bottom: 12px;;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .slider-container, .fixed-grid {
            margin-bottom: 0;
        }

        .fixed-grid {
            display: grid;
            grid-template-columns: 1fr; /* 手機版一列 */
            gap: var(--spacing-md);
            border-top: 1px solid var(--light-gray);
            padding-top: var(--spacing-lg);
            margin-top: var(--spacing-lg);
        }
        
        .fixed-grid-item {
            background-color: transparent;
            padding: 0;
            box-shadow: none;
        }
        
        .divider {
            height: 1px;
            background-color: var(--light-gray);
            margin: var(--spacing-lg) 0;
        }

       /* 輪播區 */
        .slider {
            position: relative;
            overflow: hidden;
        }

        .slides-wrapper {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .slide {
            min-width: 100%;
            position: relative;
        }

        .slide img {
            width: 100%;
            height: auto;
            /* 移除 aspect-ratio 和 object-fit */
        }

        .slider-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding-top: 50px;
            /* 手機版漸層範圍縮小，避免蓋掉太多圖片 */
            background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%);
            color: var(--white-color);
        }
        .slider-content .text-content {
            padding: 8px 12px 10px 12px;
        }
        .slider-content h3 {
            font-size: 15px;
            font-weight: 600;
            line-height: 1.4;
            margin: 0;
        }
        /* h3 內的連結繼承 h3 字體大小，才能透過 h3 統一控制 */
        .slider-content h3 a {
            font-size: inherit !important;
            color: var(--white-color);
        }
        .slider-content p {
            display: none; /* 手機版隱藏 <p> 標籤 */
        }

        .slider-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center; /* 確保按鈕在 flex 容器內垂直居中 */
            transform: translateY(-50%);
            padding: 0 var(--spacing-sm);
            box-sizing: border-box; /* 確保 padding 不會影響寬度計算 */
        }

        .slider-nav button {
            background: rgba(0, 0, 0, 0.5);
            border: none;
            color: var(--white-color);
            font-size: 24px;
            cursor: pointer;
            padding: var(--spacing-sm);
        }

        .slider-nav .prev, .slider-nav .next {
            display: block;
        }

        /* 新增的卡片區塊樣式 */
        .card-section {
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-md);
        }
        .card-item {
            background-color: var(--white-color);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 8px;
			position: relative;
			border-radius: 8px;
			overflow: hidden; 
        }
		.card-item .text-content h4 {
			font-size: 18px;
			font-weight: 700;
			line-height: 1.4;
			margin-top: 8px;
			margin-bottom: 10px;
		}

		.card-item .text-content p {
			font-size: 14px;
			margin-bottom: 16px;
			line-height: 1.6;
		}
		/* 響應式影片容器 */
		.video-container {
			position: relative;
			width: 100%;
			padding-bottom: 56.25%; /* 16:9 比例 */
			height: 0;
			overflow: hidden;
		}

		.video-container iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		
        /* Card 1 */
        .card-item.card1 {
            width: calc(50% - var(--spacing-md) / 2); /* 桌面和手機都並排顯示 */
        }
        .card-item.card1 img {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: contain; /* 確保圖片不被裁切 */
        }
        .card-item.card1 .text-content {
            padding: 0 var(--spacing-md);
        }
        
		
		
        /* Card 2 */
        .card-item.card2 {
            display: flex;
            align-items: center;
            width: 100%; /* 電腦和手機都佔滿一行 */
        }
        .card-item.card2 .image-wrapper {
            width: 50%;
        }
        .card-item.card2 img {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: contain; /* 確保圖片不被裁切 */
        }
        .card-item.card2 .text-content {
            width: 50%;
            padding: 0 var(--spacing-md);
        }
		
		/* Card 3 */
		.card-item.card3 {
			width: calc(50% - var(--spacing-md) / 2);
		}
		.card-item.card3 .text-content {
			padding: 0 var(--spacing-md);
		}

		/* Card 4 — 手機版：上圖下文，圖片置中佔滿 */
		.card-item.card4 {
			display: flex;
			align-items: center;
			width: 100%;
			flex-direction: column;
		}
		.card-item.card4 .image-wrapper {
			width: 100% !important;   /* 覆蓋 responsive-card 干擾 */
			height: auto !important;
			overflow: hidden;
			display: flex;
			justify-content: center;
		}
		.card-item.card4 .image-wrapper img {
			width: 100% !important;
			aspect-ratio: 1 / 1;     /* 正方形 */
			object-fit: contain;
			display: block;
		}
		.card-item.card4 .text-content {
			width: 100% !important;  /* 覆蓋 responsive-card 干擾 */
			padding: var(--spacing-sm) var(--spacing-md);
		}
		/* card4 的 category-label 還原正常大小（覆蓋全域縮放） */
		.card-item.card4 .category-label {
			font-size: 13px !important;
			transform: none;
		}

		/* Card 5 — 手機版與桌機版皆為左圖右文 */
		.card-item.card5,
		.card-item.card5.responsive-card {
			display: flex !important;
			flex-direction: row !important;
			align-items: stretch !important;
			width: 100%;
			padding: 0;                   /* 移除卡片內距，讓圖片貼邊 */
		}
		.card-item.card5 .image-wrapper,
		.card-item.card5.responsive-card .image-wrapper {
			flex-shrink: 0 !important;
			width: 45% !important;        /* 桌機版圖片區佔 45% */
			overflow: hidden !important;
			display: block !important;
		}

		/* 手機版圖片縮小，讓文字有更多空間 */
		@media (max-width: 768px) {
			.card-item.card5 .image-wrapper,
			.card-item.card5.responsive-card .image-wrapper {
				width: 30% !important;
			}
		}
		.card-item.card5 .image-wrapper img,
		.card-item.card5.responsive-card .image-wrapper img {
			display: block !important;
			width: 100% !important;
			height: 100% !important;
			aspect-ratio: 1 / 1;          /* 正方形，確保容器有高度 */
			object-fit: contain !important;
		}
		.card-item.card5 .text-content,
		.card-item.card5.responsive-card .text-content {
			flex: 1 !important;
			min-width: 0 !important;
			padding: var(--spacing-sm) var(--spacing-md);
		}
		/* card5 說明文字：桌機顯示長版，手機顯示短版 */
		.card-item.card5 .des-mobile {
			display: none;
		}
		.card-item.card5 .des-pc {
			display: block;
		}
		@media (max-width: 768px) {
			.card-item.card5 .des-pc {
				display: none;
			}
			.card-item.card5 .des-mobile {
				display: block;
			}
			.card-item.card5 .category-label {
				display: none !important;
			}
		}
		/* category-label 還原正常大小 */
		.card-item.card5 .category-label {
			font-size: 13px !important;
			transform: none;
		}

		 /* 新增 Card 6 (重新設計) */
		 .card-item.card6 {
		  display: flex;
		  flex-direction: column;
		  width: 100%;
		 }
		 .card-item.card6 .card-overlay {
		  position: relative;
		  width: 100%;
		  height: 100%; /* 確保 overlay 覆蓋整個圖片區域 */
		 }
		 .card-item.card6 .image-wrapper {
		  position: relative; /* 確保 overlay 相對此容器定位 */
		  width: 100%;
		  height: auto;
		 }
		 .card-item.card6 img {
		  width: 100%;
		  height: auto;
		  aspect-ratio: 16 / 9;
		  object-fit: cover;
		  display: block; /* 移除圖片底部可能產生的額外間距 */
		 }
		 .card-item.card6 .card-overlay-text {
		  position: absolute;
		  bottom: 0;
		  left: 0;
		  width: 100%;
		  padding: var(--spacing-md);
		  background-color: rgba(0, 0, 0, 0.5); /* 半透明灰色 */
		  color: var(--white-color);
		  box-sizing: border-box; /* 確保 padding 不會增加元素總寬度 */
		 }
		 .card-item.card6 .card-overlay-text h4,
		 {
		  text-align:center;
		 }
		 .card-item.card6 .card-overlay-text p {
		  margin: 0;
		 }
		
		.card-item.responsive-card {
			display: flex;
			flex-direction: column;
			width: 100%;
		}

		.card-item.responsive-card .image-wrapper,
		.card-item.responsive-card .text-content {
			width: 100%;
		}

		.card-item.responsive-card img {
			width: 100%;
			aspect-ratio: 16 / 9;
			object-fit: cover;
		}
		
		
		.category-label {
			color: #545353 !important;
			display: inline-block; /* 必須是 inline-block 或 block 縮放才有效 */
			
			/* 解決瀏覽器 12px 限制的標準做法 */
			font-size: 12px !important; /* 先設為瀏覽器可接受的最小字體 */
			transform: scale(0.78);   /* 8/12 = 0.666，將 12px 縮小為 8px 的視覺大小 */
			transform-origin: left center; /* 確保縮放後依然靠左對齊 */
			
			white-space: nowrap; /* 防止縮放後換行 */
		}
		.category-label a {
			color: #545353; /* 確保連結顏色也一致 */
		}
		
        /* 區塊 3-2 */
        .section-3-2 .widget {
            background-color: var(--white-color);
            padding: var(--spacing-md);
            margin-bottom: var(--spacing-md);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        .section-3-2 .widget-slider {
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            height: 220px; /* 固定高度，避免自動輪播時高度跳動 */
        }
        
        .widget-slide {
			width: 100%; /* 修正為100% */
			display: flex;
			align-items: center;
			
		}
        .widget-slide .image-wrapper {
            width: 40%;
        }
        .widget-slide img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
        .widget-slide .text-content {
            width: 60%;
            padding-left: var(--spacing-sm);
        }
        .widget-slide .btn {
            background-color: var(--primary-color);
            color: var(--white-color);
            padding: var(--spacing-sm);
            border-radius: 4px;
            display: inline-block;
            margin-top: var(--spacing-sm);
            font-size: 14px;
        }

        .section-3-2 .widget-full-image img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        .section-3-2 .widget-text-image {
            display: flex;
            align-items: center;
            margin-bottom: var(--spacing-sm);
        }
        .section-3-2 .widget-text-image .image-wrapper {
            width: 30%;
        }
        .section-3-2 .widget-text-image img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
        .section-3-2 .widget-text-image .text-content {
            padding-left: var(--spacing-sm);
        }

        .section-3-2 .widget-list ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .section-3-2 .widget-list li {
            padding: var(--spacing-sm) 0;
            border-bottom: 1px solid var(--light-gray);
        }
		.mag_nt{
			padding-bottom:5px;
			color:#005e00;
			font-size:1rem;
			font-family:sans-serif;
		}

        /* Footer */
        .footer {
            background-color: var(--black-color);
            color: var(--white-color);
            padding: var(--spacing-lg);
            text-align: center;
        }
		
		.img-wrapper1 {
			max-width: 100%;      /* 外層最大寬度不超過容器 */
			display: inline-block;
		}

		.img-wrapper1 img {
			max-width: 100%;      /* 圖片在容器中不超過容器寬度 */
			height: auto;         /* 高度等比例縮放 */
			display: block;       /* 移除圖片下方的空白間距 */
		}
		.img-wrapper1 a {
			display: block;      /* 讓超連結範圍跟圖片一樣大 */
		}
		.card-section{
				padding:0 8px;
			}
		
		.mag1 a{
			font-size:1rem;
		}
		.ad_in a{
			color:#0231a1;
			font-size:14px;
		}
		.cf_t{
			font-size:16px;
			text-align:center;
			color:#0231a1;
		}
		.cf_bt{
			width: 100%;
			box-sizing: border-box;
			background-color:#5F8D4E;
			font-size:16px;
			color:#fff;	
			padding: 5px;			
		}
		.ad_cf{
			padding:0;
			background-color: var(--white-color);           
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		}
		.ad_cf1{
			padding: var(--spacing-md);
            margin-bottom: var(--spacing-md);
		}
		.item a{
			color:#2b2b2b;
		}
		.item .subbtn1 {
			color:#fff !important;
		}
		.section-3-2 .widget, 
		.ad_cf, 
		.widget.ad_in {
			border-radius: 8px;
			overflow: hidden;
			background-color: var(--white-color);
			margin-bottom: 12px;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		}
		.cf_bt {
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
		}
        /* 桌面板 Media Queries */
        @media (min-width: 768px) {
            .navbar {
                padding: var(--spacing-md) var(--spacing-lg);
            }
            .nav-links {
                display: flex; /* 桌面板顯示導覽列 */
                align-items: center;
            }
            .hamburger {
                display: none; /* 桌面板隱藏漢堡選單 */
            }
            .ad-item-336 {
                display: block; /* 桌面板顯示 */
            }
            .main-content .section-3-1 {
                width: calc(70% - var(--spacing-lg) / 2);
            }
            .main-content .section-3-2 {
                width: calc(30% - var(--spacing-lg) / 2);
                display: block; /* 桌面版顯示 */
            }
            .card-item.card1 {
                width: calc(50% - var(--spacing-md) / 2);
            }
            .fixed-grid {
                grid-template-columns: repeat(2, 1fr); /* 桌面版 2x2 排版 */
            }
            .slider-content p {
                display: block; /* 桌面版顯示 <p> 標籤 */
                font-size: 14px;
            }
            .slider-content h3 {
                font-size: 22px;
            }
            .slider-content h3 a {
                font-size: inherit !important;
            }
			.card-section{
				padding:0;
			}
			.card-item.responsive-card {
				flex-direction: row; /* 改為左右排列 */
				align-items: center;
			}
			
			.card-item.responsive-card .image-wrapper {
				width: 50%; /* 圖片佔一半 */
			}
			
			.card-item.responsive-card .text-content {
				width: 50%; /* 文字佔一半 */
				padding: 0 var(--spacing-lg); /* 增加間距 */
			}

			/* card4 桌機版：左圖填滿高度不置中，其餘空間給文字 */
			.card-item.card4 {
				flex-direction: row;
				align-items: stretch;  /* 讓圖片容器撐滿卡片高度 */
			}
			.card-item.card4 .image-wrapper {
				width: auto !important;  /* 寬度由圖片內容決定 */
				flex-shrink: 0;
				align-self: stretch;     /* 填滿卡片高度 */
				display: block !important;
				overflow: hidden;
			}
			.card-item.card4 .image-wrapper img {
				width: auto !important;
				height: 100%;            /* 圖片填滿容器高度 */
				aspect-ratio: auto;      /* 取消正方形限制，自然填滿 */
				object-fit: contain;
				display: block;
			}
			.card-item.card4 .text-content {
				flex: 1 !important;      /* 佔用剩餘所有寬度 */
				width: auto !important;
				min-width: 0;
				padding: var(--spacing-sm) var(--spacing-md);
			}

			/* card5 桌機版：沿用 base 樣式，無需額外覆蓋 */
			.slider-content .text-content a {
            
			font-size:1.2rem;
			
        }
        }
		@media (max-width: 1055px) {
		  .ad-item-336 {
			display: none !important;
		  }
		}
		
		@media (max-width: 728px) {
			
			
    .ad-item-720 {
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vw * 90 / 728);
        overflow: hidden;
        display: none !important;
        position: relative;
    }
    .ad-item-720 ins.dcmads {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 728px !important;
        height: 90px !important;
        /* zoom：影響 layout 且縮放子元素含動態 iframe（Chrome/Safari/Edge） */
        zoom: calc(100vw / 728);
        /* Firefox fallback：transform 縮放 ins 外框 */
        transform-origin: top left;
        transform: scale(calc(100vw / 728));
    }
}

/* 桌機版：確保 zoom 被還原，不影響大螢幕 */
@media (min-width: 729px) {
    .ad-item-720 ins.dcmads {
        zoom: 1;
        transform: none;
    }
}