@charset "UTF-8";
/* CSS Document */
    body{
        font-family: 'Noto Sans TC Thin SemiBold', 'Noto Sans TC', 'Noto Sans TC Black', 'Noto Sans TC Bold', 'Noto Sans TC Medium', sans-serif;
    }
	
	#bkg_wrapper {
		width : 100%;
		height : auto;
	}

	#outer_wrapper {
		background-image: url("../img/Untitled-1-01.png");
		max-width: 996px;
		height : auto;
		margin : 0 auto;
		vertical-align: middle;
		overflow-y: hidden;
	}

	#header {
		width : 100%;
	}

    .logo-area {
	    width : 100%;
        vertical-align: middle;
        height : auto;
		margin-bottom: 40px;
    }

    .main-logo {
		width : 42%;
        display: flex; 
		justify-content: center;
        height : auto;
		margin : 30px auto;
     }

   /* Container scales exactly like your old .main-button rules */
.nav-button-container {
    width: 50%;
    margin: 50px auto;
    position: relative; /* Set anchor frame boundary for children */
    display: block;
}

.main-button-bg {
    width: 100%;
    height: auto;
    display: block;
}

/* absolute overlay coordinates perfectly matching your original image geometry proportions */
.nav-links-overlay {
    position: absolute;
    top: 1px;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
}

.overlay-link {
    flex: 1; /* Automatically gives each link exactly 50% width horizontally */
    height: 100%;
    cursor: pointer;
    background: transparent; /* Invisible but perfectly clickable */
}

/* ==========================================================================
   Usemap 影像地圖點擊優化
   ========================================================================== */
    area {
        cursor: pointer;
        outline: none; 
    }

/* 全局平滑滾動 */
    html {
        scroll-behavior: smooth;
    }

     #video_wrapper {
	    width: 100%;
     }

     #section_video {
	    max-width: 900px;
	   	height : auto;
		margin : 0 auto;
        vertical-align: middle;
     }

    .line_video {
		width : 100%;
	   	height : auto;
		margin : 0 0;
        display: flex; 
		justify-content: center;
     }
   
     #video_list_wrapper {
	     max-width: 900px;
		 height : auto;
		 margin : 0 auto;
         vertical-align: middle;
     }

/* ==========================================================================
   1. 桌面版樣式 (Desktop Layout - 橫向通欄)
   ========================================================================== */
    .media-card {
    	width : 100%;	
        display: flex;
        align-items: flex-start;
        gap: 30px;
        padding: 20px 0;
        font-family: 'Noto Sans TC Thin SemiBold', 'Noto Sans TC', 'Noto Sans TC Black', 'Noto Sans TC Bold', 'Noto Sans TC Medium', sans-serif;
     }

/* 序號與日期 */
    .card-meta {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: 180px; 
        flex: 0 0 60px;
    }

    .meta-number {
        font-family: 'Noto Sans TC SemiBold', "sans-serif";
        font-size: 50px;
        line-height: 0.9;
        color: transparent;
        -webkit-text-stroke: 1px #333; 
        font-weight: bold;
     }
    
    .meta-number-date {
        font-family: 'Noto Sans TC SemiBold', "sans-serif";
        font-size: 20px;
        line-height: 1;
        color: transparent;
        -webkit-text-stroke: 1px #333; 
        font-weight: bold;
		margin-top: auto; 
        margin-bottom: 0;
     }

/* 圖片容器維持 16:9 比例 */
     .card-cover {
        flex: 0 0 320px;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-radius: 4px;
     }

     .card-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
     }

.card-cover a {
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
}

.card-cover img:hover {
    opacity: 0.9; /* 當滑鼠移上去時稍微變亮/變暗，暗示可以點擊 */
    transition: opacity 0.2s ease;
}

/* 內容與按鈕的整體容器 */
    .card-content {
       flex: 1; 
       display: flex;
       justify-content: space-between; 
       align-items: center;
       gap: 20px;
	   height: 180px; 	
    }

/* 右側「標題與內文」區塊 */
    .text-area {
      flex: 1 1 auto; 
      height: 100%;    
      display: flex;
      flex-direction: column;
      justify-content: space-between; 
      overflow: hidden;
    }

    .card-title {
      font-size: 22px;
      font-weight: bold;
      color: #000;
	  margin: 0;
      line-height: 1.4;       
      height: 60px;           
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .card-desc {
		font-family: 'Noto Sans TC', "sans-serif";
        font-size: 16px;
	    color: #000;
		margin: 0;
	    line-height: 1.6;       
        height: 100px;           
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;	
    }

/* 綠色播放按鈕桌面板定位 */
    .card-footer-video {
       display: flex;
       justify-content: flex-end;
    }

    .btn-play {
       flex: 0 0 50px;
       width: 100%;
    }

    .play-size {
	   width: 50px;
	   height: auto;
       display: block;
    }

    #separate_video {
		width : 100%;
	}

    .gdots {
	    width : 100%;
        vertical-align: middle;
        height : auto;
    }

    .greensss {
		width : 3%;
        display: flex; 
		justify-content: center;
        height : auto;
		margin : 50px auto 120px auto;
     }

     #article_wrapper {
	    width: 100%;
     }

     #section_article {
	    max-width: 900px;
	   	height : auto;
		margin : 0 auto;
        vertical-align: middle;
     }

    .line_article {
		width : 100%;
	   	height : auto;
		margin : 0 0;
        display: flex; 
		justify-content: center;
     }

    .block-title {
	    text-align: right;
     }

    .article-section {
        padding: 40px 20px;
        font-family: 'Noto Sans TC Thin SemiBold', 'Noto Sans TC', 'Noto Sans TC Black', 'Noto Sans TC Bold', 'Noto Sans TC Medium', sans-serif;
    }

    .article-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: 50px; 
        max-width: 900px;
        margin: 0 auto;
     }

    .article-card {
        display: flex;
        flex-direction: column; 
        background: transparent;
    }

/* 頂部中斷點 */
    .card-meta-article {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin: 20px 0px;
    }

    .meta-id {
        font-family: 'Noto Sans TC SemiBold', "sans-serif";
        font-size: 50px;
        line-height: 0.9;
        font-weight: bold;
        color: transparent;
        -webkit-text-stroke: 1px #333; 
    }

    .meta-date {
        font-family: 'Noto Sans TC SemiBold', "sans-serif";
        font-size: 20px;
        line-height: 0.9;
        color: transparent;
        font-weight: bold;
	    -webkit-text-stroke: 1px #333; 
        text-align: right;
    }

/* 圖片區強制鎖定 16:9 */
     .card-image {
        width: 100%;            
        aspect-ratio: 16 / 9;   
        overflow: hidden;
        border-radius: 2px;
        margin: 0 0 20px ;
    }

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

    .card-body {
        width: 100%;
    }

/* 標題字數與行數限制（鎖死 2 行） */
    .card-title-a {
        line-height: 1.4;
        height: 60px; 
        margin: 0 0 25px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;     
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

/* 內文字數與行數限制（鎖死 4 行） */
    .card-desc-a {
       font-size: 16px;
       color: #000;
       line-height: 1.6;
       height: 100px; 
       margin-bottom: 50px;
       text-align: justify; 
       display: -webkit-box;
       -webkit-line-clamp: 4;  
       -webkit-box-orient: vertical;
       overflow: hidden;
    }

/* 底部按鈕區 */
    .card-footer {
       display: flex;
       justify-content: flex-end;
       margin-top: 30px; 
    }

	.btn-arrow {
       flex: 0 0 105px;
       width: 100%;
    }

    #separate_article {
		width : 100%;
	}

    .orange {
		width : 3%;
        display: flex; 
		justify-content: center;
        height : auto;
		margin : 50px auto 120px auto;
     }
    
    .scroll-top-btn {
        position: fixed;        
	    cursor: pointer;
        border: none ;
	    color:transparent;
        bottom: 50px;           
        right: 60px;            
        z-index: 99;            
        opacity: 0;             
        visibility: hidden;
        transition: all 0.4s ease;      
    }

    .scroll-top-btn.show {
        opacity: 1;
        visibility: visible;
	    background: transparent;
        border: none ;
    }

    .top{
	    width : 60%;
    }

     #copyright {
	    width :100%;
     }

    .statement {
     	width: 100%;
    	text-align: center;
    	font-size: 12px;
    	margin-top: 140px;
	    margin-bottom: 20px;
        color: #333333;
    }

.card-cover a, 
.card-cover a:hover, 
.card-cover a:focus, 
.card-cover a:active {
    text-decoration: none !important; /* 強制移除任何瀏覽器預設底線效果 */
    outline: none;                    /* 移除點擊時產生的外框線 */
    border: none;                     /* 確保沒有底邊框線條 */
}
/* ==========================================================================
   影片彈出視窗基礎樣式 (Video Modal Base Styles - Hidden by Default)
   ========================================================================== */
.custom-modal {
    position: fixed;        /* 固定定位，使其浮動於視窗最上層 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;         /* 確保層級高於網頁上所有其他元素 */
    display: flex;
    align-items: center;    /* 垂直置中 */
    justify-content: center; /* 水平置中 */
    opacity: 0;             /* 預設完全透明 */
    visibility: hidden;     /* 預設隱藏不佔空間且無法點擊 */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 當 JavaScript 動態加上 .active 類別時才會顯示出來 */
.custom-modal.active {
    opacity: 1;
    visibility: visible;
}

/* 半透明背景遮罩（點擊可關閉） */
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* 黑色背景 */
    cursor: pointer;
}

/* 影片主外殼容器（控制桌機版最大寬度） */
.modal-wrapper {
    position: relative;
    width: 90%;
    max-width: 850px;       /* 設定最大寬度防止在大螢幕上過大 */
    background-color: #000;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 2;
    transform: scale(0.9);  /* 預設微縮小，配合淡入做出放大動畫 */
    transition: transform 0.3s ease;
}

/* 當啟用 active 時，影片視窗縮放還原成 1 */
.custom-modal.active .modal-wrapper {
    transform: scale(1);
}

/* 關閉按鈕 (× 叉叉記號) 位置與樣式 */
.modal-close-btn {
    position: absolute;
    top: -45px;             /* 浮動在影片外殼的右上方 */
    right: 0;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 5px;
}

.modal-close-btn:hover {
    color: #144300;         /* hover : green */
}

/* 16:9 黃金比例響應式影音容器 */
.modal-video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 完美的 16:9 高度自適應佔位比例 */
    background: #000;
    overflow: hidden;
}

/* 彈出視窗內的 iframe 影音滿版設定 */
.modal-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 修正：強迫原生 video 標籤元件 100% 滿版填滿外層的 16:9 框架容器 */
.modal-video-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain; 
    background-color: #000;
    display: block;
}

/* ==========================================================================
   RWD Media Queries
   ========================================================================== */
@media screen and (max-width: 912px) {
	#outer_wrapper {
        padding: 0 20px;
    }
	.main-logo {
        width: 47%;
    }
	.main-button {
        width: 55%;
    }
	
	.nav-button-container { width: 55%; }
	
    .media-card {
        gap: 15px; 
    }
    .card-cover {
        flex: 0 0 320px; 
    }
    .card-content {
        gap: 10px; 
    }
    .btn-play {
        flex: 0 0 45px;
    }
    .play-size {
        width: 45px;
    }
	.top {
        width: 80%;
    }
    .article-grid {
        gap: 25px; 
    }
}

@media screen and (max-width: 768px) {
    #outer_wrapper {
        padding: 0 20px;
    }
    
    .main-logo {
        width: 50%;
    }
    
    .main-button {
        width: 65%;
    }
	
	.nav-button-container { width: 65%; }

    .media-card {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        padding: 25px 0;
    }
    
    .card-meta {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: auto;
        flex: none;
        width: 100%;
        padding-bottom: 8px;
    }
    
    .meta-number-date {
        margin-top: 0;
        text-align: right;
    }
    
    .card-cover {
        flex: none;
        width: 100%;
    }
    
    .card-content {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        gap: 40px; 
    }
    
    .text-area {
        flex: none;
        width: 100%;
        height: auto;
        gap: 10px;
    }
    
    .card-title {
        height: auto;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .card-desc {
        height: auto;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
/* 修正：將影片底部的播放列按鈕區塊向右靠齊 */
    .card-footer-video {
        display: flex;
        justify-content: flex-end;
        margin-top: 15px;
    }

    /* 修正：使其完美比照文章區 btn-arrow 的 120px 行為比例 */
    .btn-play {
        flex: 0 0 120px;
		width: 120px;
    }

    .play-size {
        width: 120px;
    }

    .article-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .card-title-a {
        height: auto;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 15px;
    }
    
    .card-desc-a {
        height: auto;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 30px;
    }
    
    .greensss, .orange {
        width: 4%;
    }
    
    .scroll-top-btn {
        right: 20px;
        bottom: 20px;
    }
	
	/* 修正：配合文章區的 .btn-arrow 與 .arrow-size 的寬度 105px 設定 */
	.btn-play {
        align-self: flex-end;
        flex: 0 0 60px;
		width: 105px;
    }
	  
	.play-size {
        width: 60px;
    }
	
	.btn-arrow {
       flex: 0 0 60px;
       width: 100%;
    }
	
	.arrow-size{
		width: 120px;
	}
	
    .top {
        width: 75%;
    }
}

@media screen and (max-width: 576px) {
    .main-logo {
        width: 75%;
    }
    
    .main-button {
        width: 90%;
    }
	
	.nav-button-container { width: 90%; }
    
    .meta-number, .meta-id {
        font-size: 40px;
    }
    
    .meta-number-date, .meta-date {
        font-size: 16px;
    }
	
	.card-content {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        gap: 30px;
    }
	
	.text-area {
        flex: none;
        width: 100%;
        height: auto;
        gap: 10px;
    }
    
    .card-title, .card-title-a {
        font-size: 18px;
		height: auto;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 10px;
    }
    
    .card-desc, .card-desc-a {
        display: none;
		height: 0;
        margin-bottom: 0;
    }
    
	.card-footer-video {
        margin-top: 10px;
    }

    /* 修正：配合行動裝置 576px 降級，縮小至與 btn-arrow 完全相同的 105px */
	.btn-play {
        flex: 0 0 55px;
		width: 105px;
    }

    .play-size {
        width: 55px;
    }
	
	.btn-arrow {
       flex: 0 0 80px;
       width: 100%;
    }
	
	.arrow-size{
		width: 105px;
	}
	
    .greensss, .orange {
        width: 5%;
    }
	
	.top {
        width: 70%;
    }
	
	.modal-close-btn {
        top: -40px;
        right: 5px;
        font-size: 32px;
    }
    .modal-wrapper {
        width: 92%;
    }
}


@media screen and (max-width: 376px) {
    .main-logo {
        width: 80%;
    }
    
    .main-button {
        width: 100%;
    }
    
	.nav-button-container { width: 100%; }
	
    .meta-number, .meta-id {
        font-size: 32px;
    }
    
    .meta-number-date, .meta-date {
        font-size: 14px;
    }
    
    .card-title, .card-title-a {
        font-size: 16px;
		height: auto;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 15px;
    }
	
    /* 修正：配合行動裝置極限 376px 降級，縮小至與 btn-arrow 完全相同的 85px */
    .btn-play {
        flex: 0 0 45px;
        width: 85px;
    }

    .play-size {
        width: 45px;
    }
	
	.btn-arrow {
       flex: 0 0 70px;
       width: 100%;
    }
	
	.arrow-size{
		width: 85px;
	}
	
	.greensss, .orange {
        width: 6%;
    }
}