@charset "utf-8";
/* CSS Document */
		
	header{

		    border-bottom: solid 2px #fff;
	}
/* CSS Document */
	/* 全域設定 */
    body {
        font-family: 'Noto Sans TC', sans-serif;
        background-color: #f8fafc;
        /*color: #334155;*/
        padding-top: 0;
		background-color: #fff !important;
    }
    a, a:hover, a:focus {
        text-decoration: none;
        color: inherit;
    }
    /* 顏色變數模擬 */
    .text-primary-red { color: #dc2626; }
    .bg-primary-red { background-color: #dc2626; }
    .text-blue { color: #2563eb; }
    .bg-blue { background-color: #1a1a1a; }
    
    /* ---------------------------------------------------
       Header 區域 (Logo 圖片樣式)
    --------------------------------------------------- */
    .top-header {
        background: #fff;
        padding: 15px 0;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        position: relative;
        z-index: 100;
    }
    
    .logo-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Logo 圖片樣式 */
    .header-logo-img {
        max-width: 100%;
        height: auto;
        display: inline-block;
        
    }

    /* ---------------------------------------------------
       Navbar 區域
    --------------------------------------------------- */
    .custom-navbar {
        background-color: #1a1a1a;
        border: none;
        border-radius: 0;
        margin-bottom: 0;
        min-height: auto;
        transition: all 0.3s ease;
    }

    .custom-navbar .nav > li > a {
        color: #fff;
        font-weight: 500;
        padding: 15px 20px;
        white-space: nowrap; 
		text-shadow: 2px 3px 5px #01242e;
    }
    
    .custom-navbar .nav > li > a:hover,
    .custom-navbar .nav > li.open > a,
    .custom-navbar .nav > li.open > a:focus,
    .custom-navbar .nav > li.open > a:hover {
        background-color: #1f2937;
    }

    /* 下拉選單樣式修正 */
    .dropdown-menu {
        border-radius: 4px;
        border: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin-top: 0;
        min-width: 180px;
    }
    
    .dropdown-menu > li > a {
        padding: 10px 20px;
        color: #334155;
        font-weight: 500;
		
    }
    
    .dropdown-menu > li > a:hover {
        background-color: #f3f4f6;
       
    }

    .navbar-center {
        text-align: center;
    }
    .navbar-center > ul {
		
        display: inline-block;
        float: none;
    }

    /* 漢堡選單按鈕樣式 */
    .navbar-toggle {
        border-color: transparent;
    }
    .navbar-toggle .icon-bar {
        background-color: #fff;
    }

    /* Navbar 內的隱藏 Logo (捲動後顯示) */
    .navbar-scroll-logo {
        display: none; 
        float: left;
        padding: 10px;
        height: 50px;
        text-decoration: none;
        align-items: center; /* Flex alignment if needed */
    }
    
    /* 捲動後的 Navbar Logo 圖片樣式 */
    .navbar-scroll-logo img {
        height: 40px; /* 固定高度，讓寬度自適應 */
        width: auto;
        margin-top: auto;
        display: block;
    }

    /* 當滑鼠移過 dropdown li 時，讓底下的 dropdown-menu 顯示 */
    .navbar-nav > li.dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0; /* 修正可能產生的間隙 */
    }

    /* 確保滑鼠滑過選單項目時，維持選單開啟的狀態 */
    .navbar-nav > li.dropdown > .dropdown-menu {
        margin-top: 0;
    }



    /* ---------------------------------------------------
   SCROLLED STATE (捲動後的樣式)
--------------------------------------------------- */
@media (min-width: 768px) {
    /* 桌面版捲動樣式 */
    .scrolled-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;		
		background: linear-gradient(110deg, #ffffff 0%, #ffffff 60vw, #1a1a1a 60vw, #1a1a1a 100%);
		box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        padding: 0; 
    }

    /* 顯示捲動後的 Logo */
    .scrolled-nav .navbar-scroll-logo {
        display: flex; 
        align-items: center;
        height: 50px; 
        margin-left: 15px;
        position: relative;
        z-index: 2; 
    }

    /* 藍色背景自動適應文字 */
    .scrolled-nav .navbar-collapse {
        background-color: #1a1a1a; 
        float: right; 
        padding-right: 20px;
        padding-left: 40px;
        position: relative;
		font-size: medium;
    }
	.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header{
		font-size: medium;
	}
    .scrolled-nav .navbar-collapse::before {
        content: '';
        position: absolute;
        top: 0;
        left: -15px;
        width: 20vw;
        height: 100%;
        background-color: #1a1a1a;
        transform: skewX(-20deg);
        z-index: 0;
    }
    .scrolled-nav .nav.navbar-nav {
        position: relative;
        z-index: 1;
        float: none;
        display: block;
    }
    .scrolled-nav .nav > li > a {
        padding-top: 20px;
        padding-bottom: 20px;
    }
	.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand{
	/*margin-left: -30px;*/	
	}
}
/* --- 手機版樣式設定 (修正版：白底藍選單) --- */
@media (max-width: 767px) {
    
    /* 1. 滑動後的導覽列本體：變為白色背景 */
    .scrolled-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        background-color: #ffffff !important; /* 強制白色背景 */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        border-bottom: 1px solid #eee; /* 加一點底線區隔內容 */
    }

    /* 2. 修正 Logo：在白色導覽列左側顯示 */
    .scrolled-nav .navbar-scroll-logo {
        display: flex !important;
        align-items: center;
        float: left;
        height: 50px;
        padding: 5px 15px;
    }
    .scrolled-nav .navbar-scroll-logo img {
        height: 30px;
        width: auto;
    }

    /* 3. 漢堡選單按鈕設定 */
    .scrolled-nav .navbar-toggle {
        float: right;
        margin-right: 15px;
        
    }

    /* 漢堡按鈕的「三條線」*/
    .scrolled-nav .navbar-toggle .icon-bar {
        background-color:#1f2937 !important; 
    }
	
	

    /* 4. 下拉展開後的選單區塊：設定為藍色背景 */
    .navbar-collapse {
        background-color: #1a1a1a; /* 藍色底 */
        border-top: none;
        max-height: 80vh; /* 避免選單太長 */
        overflow-y: auto;
    }

    /* 5. 選單內的連結文字：在藍底上顯示為白色 */
    .navbar-nav > li > a {
        color: #ffffff !important; /* 強制白字 */
        border-bottom: 1px solid rgba(255,255,255,0.1); /* 淡淡的分隔線 */
        padding: 15px 20px;
    }
    
    /* 當手指按壓連結時的效果 */
    .navbar-nav > li > a:hover,
    .navbar-nav > li > a:focus {
        background-color: #1f2937!important; /* 深一點的藍色 */
    }
    
    /* 下拉選單 (Dropdown) 內的子選單修正 */
    .navbar-nav .open .dropdown-menu {
        background-color: #125a9c; /* 子選單用更深的藍色 */
        padding: 10px 0;
    }
    .navbar-nav .open .dropdown-menu > li > a {
        
        padding: 10px 30px;
    }
	
	 .navbar-collapse .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;
    }
    /* 確保下拉選單在父項目關閉時也關閉 */
    .navbar-collapse .dropdown:not(.open) .dropdown-menu {
        display: none !important;
    }
    /* 當下拉選單打開時的樣式 */
    .navbar-collapse .dropdown.open .dropdown-menu {
        display: block !important;
    }
	  /* 1. 修正 Header 高度與定位基準 (防止跳動) */
    .custom-navbar .navbar-header {
        position: relative;
        min-height: 60px; /* 需配合你的 Logo 區域高度 */
        display: flex;
        align-items: center;
    }
 
    /* 2. 漢堡按鈕本體設定 */
    .custom-navbar .navbar-toggle {
        position: absolute !important;
        top: 50% !important;
        right: 15px !important;
        margin: 0 !important;         /* 移除預設 margin 避免跳動 */
        transform: translateY(-50%) scale(1); /* 垂直置中 + 可在此調整縮放比例 */
        /* --- 顏色設定重點 --- */
        background-color: transparent !important; /* 按鈕背景*/
		border-color: #ffffff !important;
        
        border-radius: 5px;
        z-index: 1001;
    }
 
    /* 3. 漢堡線條顏色 (三條線) */
    .custom-navbar .navbar-toggle .icon-bar {
        /* background-color: #ffffff !important; 線條：白色 */
        height: 2px;       /* 線條厚度 */
        width: 22px;       /* 線條寬度 */
        border-radius: 1px;
    }
 
    /* 4. 滑鼠移過或點擊時的效果 */
    .custom-navbar .navbar-toggle:hover,
    .custom-navbar .navbar-toggle:focus {
        /*background-color: #125a9c !important;  深一點的藍色，增加互動感 */
        border-color: #ffffff !important;
    }
    /* 5. 確保展開後的選單緊貼上方 */
    .navbar-collapse {
        margin-top: 0px !important;
        border-top: 1px solid #ffffff; /* 展開後的頂部格線改為白色 */
    }

	.navbar-nav .open .dropdown-menu > li > a{
		background-color: #fff;
	}
  .navbar-collapse {
	  padding: 0px;
	}
	
	
	
}
	
	
	
	
	
	
	
    .footer { background-color: #1f2937; color: #9ca3af; padding: 40px 0; border-top: 1px solid #374151;  }
    .footer-links a { color: #d1d5db; padding: 0 10px; border-right: 1px solid #4b5563;}
    .footer-links a:last-child { border-right: none; }
    .footer-links a:hover { color: white; }
    .social-icons a {
        display: inline-block; width: 40px; height: 40px; background: #4b5563; border-radius: 50%;
        text-align: center; line-height: 40px; color: white; margin: 0 5px; transition: background 0.3s;
    }
	
    .social-icons a:hover { background: #dc2626; }
    .social-icons i, 
    .social-icons .material-icons { 
        font-size: 16px; 
        line-height: 32px; 
    }
    .footer-bottom { border-top: 1px solid #374151; margin-top: 30px; padding-top: 30px; }

    body { -moz-user-select : none; -webkit-user-select: none; }

    @media (max-width: 768px) {
        .hero-section { height: 400px; }
        .hero-title { font-size: 36px; }
        .intro-title { font-size: 30px; }
        .navbar-center > ul { display: block; }
        .custom-navbar .nav > li > a { padding: 10px; }
        .process-card { max-width: 380px; margin: 0 auto 30px; }
        .detail-card { margin-bottom: 0; }
		.footer-links a {
			display: block; margin:20px; 
		border: hidden;
			
		}
		   /* 1. 將 Icon 調整為兩排 */
    .social-icons {
        display: grid;
        /* 設定為 3 欄，每欄自動寬度，這樣 6 個 icon 就會變成 3個x2排 */
        grid-template-columns: repeat(3, auto); 
        justify-content: center; /* 整個區塊置中 */
        gap: 20px 20px; /* 第一個值是行距(上下)，第二個值是欄距(左右) */
    }

    /* 確保 icon 連結原本的 margin 不會影響 grid 排版 */
    .social-icons a {
        margin: 0 !important; 
    }

    /* 2. 將最下方的圖片置中 */
    /* 覆寫 Bootstrap 的 text-right 樣式 */
    .footer-bottom .text-right {
        text-align: center;
    }

    /* 讓 img-responsive 圖片本身水平置中 */
    .footer-bottom img.img-responsive {
        margin: 0 auto;
        display: block; /* 確保它以區塊方式呈現才能使用 margin auto */
    }

    /* (選用) 調整版權文字也變置中，這樣整體比較平衡 */
    .footer-bottom .text-left {
        text-align: center;
        margin-bottom: 20px; /* 增加與下方 Logo 的距離 */
    }
		
		
		


		
    }

	.navbar-nav > li.dropdown > .dropdown-menu{
background-color: #fff;
    border-radius: 0px;
}
/**/	
.breadcrumb {
background-color: unset;
}