@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: auto;
	}

   h1 {
		padding: 0 60px;
	}
	
	h2 {
		font: "Noto Sans TC Medium" ;
		font-size: 20px;
		color: #333333 ;
		margin : 2px 0;
	}
	
	h3 {
		font: "Noto Sans TC Medium" ;
		color: #000000 ;
		font-size: 22px;
	}
	
	p {
		padding: 0 60px;
	}

/* ==========================================================================
   Header Layout Fix (Forces Same Horizontal Line Alignment)
   ========================================================================== */
#header {
    width: 100%;
    padding: 30px 0 50px 0;
    display: block; /* Clear formatting float drops */
}

.header-container {
    width: 100%;            /* CRITICAL: Enforces full width so left: 0 works on the same line */
    max-width: 900px;       /* Aligns seamlessly with your video track borders */
    margin: 0 auto;
    position: relative;     /* Absolute anchor frame boundary */
    display: flex;
    justify-content: center;/* Perfect horizontal layout centering for the logo */
    align-items: center;    /* Perfect vertical alignment on the exact same axis */
}

.btn-back {
    position: absolute;
    left: 0;                /* Pins arrow directly to the far left edge of the logo row */
    top: 50%;
    transform: translateY(-50%);
    width: 50px;            /* Matches your image asset sizes */
    height: auto;
    cursor: pointer;
    z-index: 10;
    display: inline-block;
}

.btn-back img {
    width: 100%;
    height: auto;
    display: block;
}

.main-logo {
    width: 44%;             /* Keeps the logo proportional and unaffected by the button positioning */
    height: auto;
    display: block;
}

/* Mobile Shorter Logo: Hidden on desktop layout, absolute tracking ready */
.main-logo-short {
    display: none;          /* Uses display property to prevent phantom space assignment */
    position: absolute;
    right: 0;               /* Pins directly to the far right bounding box edge */
    top: 50%;
    transform: translateY(-50%); /* Locked vertically */
    width: 40px;            /* Your target dimension width */
    height: auto;
    z-index: 10;
}
/* ==========================================================================
   Responsive Video Container (Positioned Below Paragraph Block)
   ========================================================================== */
#video_wrapper {
	width: 100%;
}

.video-container {
    position: relative;
    width: 100%;                  /* 撐滿主內容寬度 */
    height: 0;                    /* 高度設為 0，依靠 padding-bottom 撐出比例 */
    padding-left: 60px;           /* 與 p 標籤完全一致的左邊內距 */
    padding-right: 60px;          /* 與 p 標籤完全一致的右邊內距 */
    
    /* 核心 16:9 比例：扣除左右 60px (共 120px) 的內距後，乘上 0.5625 高度比 */
    padding-bottom: calc((100% - 181px) * 0.5625); 
    
    box-sizing: border-box;       /* 將 padding 計算納入寬度內，防止破版 */
    margin: 30px auto;
}

/* 控制原生播放器元件與封面圖片 (Poster) 滿版且不變形 */
.responsive-video-player {
    position: absolute;
    top: 0;
    left: 96px;                   /* 配合容器的 padding-left 向右推移，對齊文字 */
    width: calc(100% - 181px);    /* 動態計算扣除左右 60px 的真實可用文字寬度 */
    height: 100%;                 /* 完美垂直填滿 16:9 高度 */
    object-fit: cover;            /* 確保封面圖片與影片內容完全填滿容器，不留白邊或變形 */
    background-color: #000;       /* 預留黑底備用防閃爍 */
    display: block;
}

/* ==========================================================================
   Text Introductions Block
   ========================================================================== */
.video-intro-section {
    text-align: center;
    max-width: 900px;         /* Match the maximum layout boundary of the video box */
    margin: 0 auto 30px auto; /* Centered left-and-right via auto */
}

.video-main-title {
    font-size: 26px;
    color: #000000;
    margin-bottom: 20px;
    line-height: 1.4;
    font-weight: bold;
    text-align: center;       /* Centers the heading text */
}

.video-main-desc {
    font-size: 16px;
    color: #333333;
    line-height: 1.6;
    text-align: justify;      /* Keeps the text flow crisp on left and right margins */
    max-width: 900px;         /* Ensures paragraph lines fill up exactly to match the video width */
    margin: 0 auto;           /* Centers the paragraph container element */
	padding-bottom: 20px;
}

/* Separator Dots Alignment */
.separator-dots {
    width: 100%;
    display: flex;
    justify-content: center;  /* Center dots container elements vertically */
	margin-top: 70px;
    margin-bottom: 150px;
}

.dots-icon {
    width: 3%;
    height: auto;
}

/* ==========================================================================
   UPDATED MODULE: Related Content Section Boundary Fixes
   ========================================================================== */
     #section_video_0 {
	    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;
     }

/* Outer Wrapper: Acts as the absolute bounds anchor */
.slider-outer-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    /* CRITICAL FIX: This padding leaves side spaces for the arrows, 
      guaranteeing the visible moving items never stretch outside the 900px line 
    */
    padding: 0 45px; 
}

/* Horizontal Track Strip Window Wrapper */
.slider-scroll-track {
    width: 100%;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 0;
    scrollbar-width: none; /* Hides horizontal native bars */
}

.slider-scroll-track::-webkit-scrollbar {
    display: none;
}

/* Item Card Sizing Math Calculations */
.related-card {
    /* FIXED MATH: Deducts the tracking item gap dimensions for 3 layout items */
    flex: 0 0 calc((100% - 40px) / 3); 
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.card-thumb-box {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 12px;
    background-color: transparent;
}

.card-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-item-title {
    font-family: "Noto Sans TC Medium", sans-serif;
    font-size: 14px;
    color: #333333;
    line-height: 1.3;
    margin: 0;
    font-weight: normal;
    text-align: justify;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Slider Arrows System: Aligned to sit flush inside the container boundaries */
.slider-arrow {
    position: absolute;
    top: 32%;                 
    background: transparent;  
    border: none;             
    width: 35px;              
    height: 35px;
    cursor: pointer;
    z-index: 15;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.slider-arrow:hover {
    opacity: 0.7;             
}

.slider-arrow img {
    width: 50%;
    height: auto;
    display: block;
}

/* FIXED ARROW PLACEMENT: 
  Pins them flush to the exact outer edges of your padded 900px block area 
*/
.arrow-left {
    left: 0; 
}

.arrow-right {
    right: 0;
}

/* ==========================================================================
   footer
   ========================================================================== */
    .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;
    }

/* ==========================================================================
   RWD Media Queries
   ========================================================================== */
@media screen and (max-width: 912px) {
	
	#outer_wrapper {
        padding: 0 25px;
    }
	
	#header {
		padding: 30 25 50 25;
	}
	
	.btn-back {
        left: 10px;
        width: 6%;
        height: auto;
    }
	
	.slider-outer-container {
    padding: 0 40px; 
}
	
	.arrow-left { left: 0; }
    .arrow-right { right: 0; }
	
	.slider-arrow img {
    width: 40%;
    height: auto;
    display: block;
}
	
	.video-container {
    position: relative;
    width: 100%;                  /* 撐滿主內容寬度 */
    height: 0;                    /* 高度設為 0，依靠 padding-bottom 撐出比例 */
    padding-left: 60px;           /* 與 p 標籤完全一致的左邊內距 */
    padding-right: 60px;          /* 與 p 標籤完全一致的右邊內距 */
    
    /* 核心 16:9 比例：扣除左右 60px (共 120px) 的內距後，乘上 0.5625 高度比 */
    padding-bottom: calc((100% - 120px) * 0.5625); 
    
    box-sizing: border-box;       /* 將 padding 計算納入寬度內，防止破版 */
    margin: 30px auto;
}

/* 控制原生播放器元件與封面圖片 (Poster) 滿版且不變形 */
.responsive-video-player {
    position: absolute;
    top: 0;
    left: 60px;                   /* 配合容器的 padding-left 向右推移，對齊文字 */
    width: calc(100% - 120px);    /* 動態計算扣除左右 60px 的真實可用文字寬度 */
    height: 100%;                 /* 完美垂直填滿 16:9 高度 */
    object-fit: cover;            /* 確保封面圖片與影片內容完全填滿容器，不留白邊或變形 */
    background-color: #000;       /* 預留黑底備用防閃爍 */
    display: block;
}

	
	}

@media screen and (max-width: 768px) {
    #outer_wrapper {
        padding: 0 25px;
    }
    .main-logo {
        width: 55%;
    }
    .btn-back {
        left: 10px;
        width: 7%;
        height: auto;
    }
    .video-main-title {
        font-size: 22px;
    }
    .video-main-desc {
        font-size: 15px;
    }
	
    .slider-outer-container {
    padding: 0 45px; 
}
	
	.slider-arrow img {
    width: 38%;
    height: auto;
    display: block;
}
	
	.related-card {
        flex: 0 0 calc((100% - 20px) / 2); /* Safely switches to 2 items wide on tablets */
    }
}


@media screen and (max-width: 576px) {
    #outer_wrapper {
        padding: 0 15px;
    }
    
    /* 1. This adds extra space (e.g., 60px) strictly above the header on mobile screens */
    #header {
        padding-top: 50px;    /* Adjust this value higher or lower to get the exact spacing you want */
        padding-bottom: 50px; /* Optional: adjust the bottom spacing if needed */
    }

    /* Your existing mobile layout rules remain intact below */
    .main-logo {
        display: none;      
    }
	
	   /* Typography adjustments */
	
	h1{
		padding: 0 10px;
	}
	
	p{
		padding: 0 10px;
	}
	
/* 1. Forces Back Button and Short Logo onto the exact same centerline.
       We match their heights and use the same top/transform properties.
    */
    .btn-back {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%); /* Aligns perfectly on the vertical centerline */
        width: 35px;                /* Adjusted width to match mobile scale */
        height: auto;               /* FIXED: Changed from 45px to 30px so it remains square and aligned */
        display: inline-block;
    }

    .main-logo-short {
        display: block;     
        position: absolute;
        right: 10px;        
        top: 50%;
        transform: translateY(-50%); /* Aligns perfectly on the vertical centerline */
        width: 40px;                /* Matches your short logo layout width requirement */
        height: auto;
    }
    
    /* Typography adjustments */
    .video-main-title {
        font-size: 20px;
    }
	
	/* Erases slide padding bounds and arrow buttons completely when items stack vertically */
    .slider-outer-container {
        padding: 0;
        display: block;
    }

    .slider-arrow {
        display: none !important;
    }

    .slider-scroll-track {
        flex-direction: column;
        gap: 35px;
        overflow-x: visible;
    }

    .related-card {
        width: 100%;
        flex: none;
    }

    .card-item-title {
        font-size: 15px;
        -webkit-line-clamp: unset;
    }
	
/* 修正：在 568px 以下小螢幕，同步與行動裝置版的 p 標籤左右 15px 對齊 */
.video-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-bottom: calc((100% - 50px) * 0.5625) !important; /* 手機 16:9 比例 */
        width: 100% !important;
        height: 0 !important;
    }

    .responsive-video-player {
        left: 25px !important;
        width: calc(100% - 50px) !important; /* 扣除手機左右各 15px 邊距 */
        height: 100% !important;
    }
}

@media screen and (max-width: 375px) {
    .btn-back {
        left: 10px;
        width: 11%;
        height: auto;
    }
	
	.dots-icon {
    width: 5%;
    height: auto;
}
	
	h1{
		padding: 0 0;
	}
	
	p{
		padding: 0 0;
	}
}