@charset "utf-8";
html, body {
    overflow-x: hidden; /* 強制隱藏水平捲軸 */
    width: 100%;
    position: relative;
}

:root {
	--bg-light: #ffffff;
	/* 品牌色彩定義 */
	--color-fb: #1877F2;
	--color-line: #06C755;
	--color-pinterest: #BD081C;
	--color-x: #000000;
}

@media (max-width: 1000px) {
	.text-uppercase {
			font-size: 26px;
        }
}

/* 調整間距，從 20px 縮小為 12px */
.share-group {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

.icon-container {
	text-align: center;
}

.label {
	display: block;
	margin-top: 6px; /* 縮小與圖示的距離 */
	font-size: 11px;
	color: #bbb;
	font-weight: bold;
}

/* 基礎 Icon 樣式 - 尺寸維持精緻 */
.share {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	background-color: #f5f5f5;
	border-radius: 50%;
	color: #666;
	font-size: 18px;
	cursor: pointer;
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	text-decoration: none;
	position: relative;
}

/* 360度旋轉動畫 */
.share:hover {
	transform: rotate(360deg) scale(1.15);
	color: #fff;
	background-color: var(--spin-color);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 各品牌顏色設定 */
.share-fb { --spin-color: var(--color-fb); }
.share-line { --spin-color: var(--color-line); }
.share-pinterest { --spin-color: var(--color-pinterest); }
.share-x { --spin-color: var(--color-x); }

/* CSS Document */
/* 搜尋容器 - 改為白底帶淺灰色邊框與柔和陰影 */
.search-container {
	max-width: 100%;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 24px;
	padding:30px;
	border: 1px solid #f0f0f0;
	box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}

/* 切換標籤樣式 - 強制水平排列 */
.search-tabs {
	display: flex !important;
	flex-direction: row !important; /* 強制水平排列 */
	flex-wrap: nowrap !important; /* 禁止換行 */
	gap: 10px;
	margin-bottom: 25px;
	border: none;
	padding-left: 0;
	list-style: none;
}

.search-tabs .nav-item {
	flex: 0 0 auto;
}

.search-tabs .nav-link {
	color: #666;
	background: #f8f9fa; /* 未選中時淡淡的灰色 */
	border: none;
	padding: 10px 24px;
	border-radius: 50px;
	font-weight: 600;
	transition: all 0.3s;
	white-space: nowrap; /* 避免文字斷行 */
}

.search-tabs .nav-link.active {
	background-color: #1DB954; /* 保持綠色作為品牌色 */
	color: #ffffff !important;
}

.search-tabs .nav-link:hover:not(.active) {
	color: #333;
	background-color: #eeeeee;
}

/* 輸入框組合 */
.input-group-custom {
	position: relative;
	display: flex;
	align-items: center;
}

.input-group-custom input {
	width: 100%;
	padding: 16px 28px;
	padding-right: 120px;
	background-color: #f8f9fa; /* 輸入框底色改為淺灰 */
	border: 2px solid transparent;
	border-radius: 50px;
	color: #333;
	font-size: 16px;
	transition: all 0.3s;
}

.input-group-custom input:focus {
	outline: none;
	border-color: #1DB954;
	background-color: #ffffff;
	box-shadow: 0 0 15px rgba(29, 185, 84, 0.1);
}

/* 搜尋按鈕 */
.btn-search {
	position: absolute;
	right: 8px;
	padding: 10px 28px;
	background-color: #1DB954;
	color: #ffffff;
	border: none;
	border-radius: 50px;
	font-weight: 700;
	transition: all 0.3s;
	z-index: 5;
}

.btn-search:hover {
	transform: translateY(-1px);
	background-color: #1ed760;
	box-shadow: 0 4px 12px rgba(29, 185, 84, 0.3);
}

/* 提示文字顏色調整 */
.search-hint {
	color: #888;
	font-size: 14px;
	margin-top: 18px;
	padding-left: 20px;
}

/* 標籤圖示點綴 (選配) */
.search-hint b {
	color: #1DB954;
}

/* 針對小螢幕的手機版優化 */
@media (max-width: 576px) {
	.search-tabs .nav-link {
		padding: 8px 16px;
		font-size: 14px;
	}
	.input-group-custom input {
		padding-right: 100px;
		font-size: 14px;
	}
	.btn-search {
		padding: 8px 20px;
		font-size: 14px;
	}
}

.btn-green {
	background: linear-gradient(135deg, #74B41B 0%, #198754 100%);
	color: #ffffff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-green:hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
	color: #ffffff;
}
/* 平板 */
@media (max-width: 992px) {
  .txt_run{
	   font-size: 40px;
   }
}

/* 手機 */
@media (max-width: 576px) {
   .txt_run{
   font-size: 20px;
	   }
			/* 基礎按鈕設定 */
	.btn-custom {
		padding: 10px 30px;
		font-size: 16px;
		}
}

/* 預設狀態（電腦版） */
.dynamic-bg {
	background-image: url('assets/imgs/page/bg-archive1.png');
	background-color: #000;
}

/* 行動版修正（螢幕寬度小於 768px 時） */
@media (max-width: 1000px) {
.dynamic-bg {
	/* 切換為行動版專用圖片 */
	background-image: url('assets/imgs/page/bg-archive1_mob.png') !important;
	background-size: cover;
	/* 針對行動版調整位置（如果圖片太長或太短可以調整這裡） */
	background-position: center center;
}
 .text-green{
	   color: #24C35C !important;
   }
.card-recommend img {
	max-height: 800px;
}
.text_tt_item{
   font-size: 14px;
}

/* 質感細灰線 CSS */
.custom-hr {
	border: 0;
	height: 1px;
	/* 使用線性漸層：透明 -> 淺灰(0.4透明度) -> 透明 */
	background: #999;
	width: 100%; /* 寬度設為 80% 比較精緻，不會貼齊邊緣 */
	display: block;
}
}



.square-wrapper {
	position: relative;
	width: 100%;
	padding-top: 100%; /* 1:1 比例 */
	aspect-ratio: 1 / 1; /* 直接定義 1:1 比例 */
	background-color: #f8f9fa; /* 背景色：當圖片比例不符時顯示 */
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #dee2e6;
}

.square-wrapper img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	/* 核心屬性：contain */
	/* 圖片會完整縮放顯示，不裁切，保持原比例 */
	object-fit: contain; 

	/* 確保在容器中居中 */
	object-position: center;

	box-sizing: border-box;
}


/*分頁樣式表*/

.page{font-family:Tahoma; font-size:16px;}
	
.pages {

  PADDING-RIGHT: 7px; PADDING-LEFT: 7px; PADDING-BOTTOM: 7px; MARGIN: 3px; PADDING-TOP: 7px; TEXT-ALIGN: center;

}

.page A {

  BORDER-RIGHT: #4e6458 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #4e6458 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 5px; MARGIN: 2px; BORDER-LEFT: #4e6458 1px solid; COLOR: #4e6458; PADDING-TOP: 5px; BORDER-BOTTOM: #4e6458 1px solid; TEXT-DECORATION: none;border-radius: 5px;

}

.page A:hover {

  BORDER-RIGHT: #4e6458 1px solid; BORDER-TOP: #4e6458 1px solid; BORDER-LEFT: #4e6458 1px solid; COLOR: #fff; BORDER-BOTTOM: #4e6458 1px solid; BACKGROUND-COLOR: #4e6458;

}

.page A:active {

  BORDER-RIGHT: #4e6458 1px solid; BORDER-TOP: #4e6458 1px solid; BORDER-LEFT: #4e6458 1px solid; COLOR: #fff; BORDER-BOTTOM: #4e6458 1px solid; BACKGROUND-COLOR: #4e6458;

}

.page SPAN.current {

  BORDER-RIGHT: #4e6458 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #4e6458 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #4e6458 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #4e6458 1px solid; BACKGROUND-COLOR: #4e6458;

}

.page SPAN {

  BORDER-RIGHT: #253B2F 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #253B2F 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 5px; MARGIN: 2px; BORDER-LEFT: #253B2F 1px solid; COLOR: #fff; PADDING-TOP: 5px; BORDER-BOTTOM: #253B2F 1px solid;

BACKGROUND-COLOR: #253B2F;border-radius: 5px;

}