.page-header{
	display:none;
}
.elementor-heading-title>a{
	color:black;
}
.elementor-element-329a714{
	display:block;
}
 .elementor-element-411a844{
		 display:none;
	 }
.elementor-element-5e1294a{
	display:block;
}
.elementor-element-e35cb70{
	display:none;
}
	@media screen and (max-width:1200px) {
		.elementor-163{
				position:relative;
		}

}
	@media screen and (max-width:1024px) {
	.elementor-element-9debb52>.e-con-inner>.elementor-element-6ba5615>.elementor-widget-container>.elementor-posts-container,.elementor-element-a1cd8da>.elementor-widget-container>.elementor-posts-container{
	grid-template-columns:repeat(2,1fr);
}
}
@media screen and (max-width: 767px){
/* 	.elementor-element-1f0f369>.elementor-widget-container>.elementor-posts-container{
			grid-template-columns:repeat(2,1fr);
	} */
	.elementor-element-1f0f369>.elementor-widget-container{
		margin-bottom:200px;
	}
	.elementor-293{
		margin-top:350px;
	}
	.elementor-element-1f0f369>.elementor-widget-container{
			grid-template-columns:repeat(2,1fr);
	}
	.elementor-144 .elementor-element.elementor-element-535df4b .swiper-slide,.swiper-slide{
		min-height:400px;
	}
	.elementor-element-329a714{
		display:none;
	}
	.elementor-element-52dd75d>img{
		width:36px;
		height:36px;
		object-fit:contain;
	}
	.elementor-element-e35cb70{
	display:block;
}
	.elementor-element-43f4d11,.elementor-element-7aa73af,.elementor-element-70ecee1,.elementor-element-83de1d4{
		width:20%;
	}
}
 @media screen and (max-width:600px) {
	 	.elementor-element-1f0f369>.elementor-widget-container{
			grid-template-columns:repeat(2,1fr);
	}
        .elementor-post{
            flex-wrap: wrap;
        }
	 .elementor-element-5e1294a{
	display:none;
}
	 .elementor-element-411a844{
		 display:block;
	 }
	 .elementor-element-da7c932{
		 display:none;
	 }
	 .elementor-element-7e7f9dd{
		 display:none;
	 }
	 .elementor-element-1f1d20e{
		 display:none;
	 }
	 .elementor-element-9ee7911{
		 display:none;
	 }
	 .elementor-element-e35cb70{
	display:block;
}
	 .elementor-element-329a714{
	display:none;
}
	 	.elementor-element-9debb52>.e-con-inner>.elementor-element-6ba5615>.elementor-widget-container>.elementor-posts-container,.elementor-element-a1cd8da>.elementor-widget-container>.elementor-posts-container{
	grid-template-columns:repeat(1,1fr);
    }
}
.elementor-163{
	position:sticky;
	z-index:100;
	top:0;
	background-color:white;
}




.wpforms-field-name>label{
	color:white;
}
.wpforms-field-label{
	color:white !important;
}
#wpforms-submit-396{
	background-color:white !important;
	width:100%;
	color:black;
}
.wpforms-field-large{
	background-color:#ffffff00 !important;
	border:1px solid white !important;
}

#wpforms-396-field_4{
	background-color:#ffffff00 !important;
	border:1px solid white !important;
}
.elementor-widget-search .e-search-input{
	height:98%;
	min-height:98% !important;
}
.e-search-submit{
	height:10px;
}
#search-1a3a42f5{
	display:none;
	
}

#menu-2-2dd4ff02{
	display:flex;
	flex-wrap:wrap;
}
#menu-2-2dd4ff02>li{
	width:25%;
}
.elementor-313 .elementor-element.elementor-element-98f6f85 .elementor-icon-list-icon svg{
	width:14px;
}
.elementor-widget-container ul{
/* 	display:flex; 头部导航*/
	list-style:none;
}
.elementor-widget-post-info .elementor-icon-list-item{
	margin-left:10px
}
.elementor-element-cb78a7b{
	padding:0;
}
.elementor-element-ff83e55{
	padding:0px;
	
}
.elementor-element-40a3eb9>.elementor-widget-container>p{
		display:flex !important;
		flex-direction:column !important;
	}
.elementor-element-1f0f369>.elementor-widget-container>.elementor-pagination{
	margin-bottom:70px;
}
.post-142>.page-content{
	margin-bottom:80px;
}
.post-2245>.elementor-post__text{
	margin-bottom:50px;
}


/* 2026-08-10 首頁大輪播固定 16:9：解除全域 min-height:400px 的限制，讓 Elementor 的 Height 設定生效 */
.elementor-8 .elementor-element.elementor-element-fbf4a63 .swiper-slide{
	min-height:0;
}

/* 2026-08-10 首頁右側精選區塊：手機上維持「小圖＋標題」並排，避免圖片吃滿寬度把標題擠到下一行 */
@media screen and (max-width:767px){
	.elementor-8 .elementor-element-f0d9199 > .e-con{
		gap:12px;
		flex-wrap:nowrap;
		align-items:flex-start;
	}
	.elementor-8 .elementor-element-f0d9199 > .e-con > .elementor-widget-image{
		width:120px;
		flex:0 0 120px;
	}
	.elementor-8 .elementor-element-f0d9199 > .e-con > .e-con{
		width:auto;
		flex:1 1 0;
		min-width:0;
	}
}

/* 2026-08-10 文章內文 Jetpack Slideshow：手機上 Swiper 在圖片載入前把高度算成正方形，導致圖片底部被 overflow:hidden 裁掉 37px。改成由內容決定高度。桌機沒有這個問題，故不套用。 */
@media screen and (max-width:767px){
	.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_container,
	.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_swiper-wrapper{
		height:auto !important;
	}
}

/* 2026-08-10 分類頁 banner：解除全域 min-height:400px，讓各分頁自己設定的手機高度(190px)生效。各分頁 widget id 不同(535df4b / 3e588a2 ...)，故用 widget 類別選擇器。娛樂頁(elementor-144)因原規則權重較高，仍維持 400px。 */
@media screen and (max-width:767px){
	.elementor-widget-slides .swiper-slide{
		min-height:0;
	}
}

/* 2026-08-13 Nav 滾動隱藏 + 手機側邊欄 */
/* ==================== 2026-08-13 Nav 滾動隱藏 + 手機側邊欄 ==================== */

/* ---------- A. 滾動時：第二列收起、header 底部真正漸層消失（無邊界）----------
   做法：不對 header 本身上 backdrop-filter（那會是一整塊，下緣必有硬邊），
   改用 ::before 疊一層，並對這一層施 mask-image 讓「模糊與底色一起」由上往下淡到全透明。 */
/* 🔴 不要在這裡寫 position:relative —— 會覆蓋掉主題原本的 position:sticky，
   header 會跟著內容捲走。sticky 本身就能當絕對定位子元素的容器。 */
.elementor-location-header{
	background-color: transparent !important;
}
.elementor-location-header > *{ position: relative; z-index: 1; }
/* 🔴 不用 backdrop-filter。模糊在捲動時每一幀都要重繪整塊背景，是「一幀一幀」的主因。
   純漸層一樣達到「沒有邊界」的效果，而且成本是零。 */
.elementor-location-header::before{
	content: "";
	position: absolute; left: 0; right: 0; top: 0; bottom: 0;
	z-index: 0;
	pointer-events: none;
	background: #fff;
	opacity: 1;
	transition: opacity .28s ease;
}
/* 🔴 漸層層做成「獨立的固定元素」，不掛在 header 上。
   掛在 header 上時它會跟著 header 位移，蓋住的範圍無法預測（會遮太多）。
   固定在視窗頂端後，高度＝遮蔽範圍，可以精準控制。 */
body::before{
	content: "";
	position: fixed; left: 0; right: 0; top: 0;
	height: 186px;                 /* 展開時：蓋住 logo 列 + 分類列 */
	z-index: 99;                   /* 低於 header 的 100，所以在文字後面 */
	pointer-events: none;
	opacity: 0;
	transition: opacity .26s ease, height .30s cubic-bezier(.4, 0, .2, 1);
	background: linear-gradient(to bottom,
		rgba(255,255,255,.96) 0%,
		rgba(255,255,255,.93) 58%,
		rgba(255,255,255,.62) 80%,
		rgba(255,255,255,0)   100%);
}
body.od-scrolled::before{ opacity: 1; }
body.od-nav-hide::before{ height: 124px; }   /* 收起時：只蓋 logo 列，遮蔽大幅減少 */

/* 頁面頂端維持原本的純白底 */
body.od-scrolled .elementor-location-header::before{ opacity: 0; }
/* 內層容器不能有自己的白底，否則會擋住上面那層漸層 */
.elementor-163 .elementor-element-329a714,
.elementor-163 .elementor-element-e35cb70{
	background-color: transparent !important;
}
/* 第二列＝分類選單，往下捲時收起（logo 那列保留）
   🔴 不用 max-height 動畫 —— 每一幀都要重算版面，是「鈍鈍的、一幀一幀」的主因。
   改成雙 transform：整個 header 上移 66px，logo 那列再下移 66px 抵銷。
   視覺上 logo 不動、只有第二列滑上去被 logo 列蓋住。transform 走合成層，不觸發 layout。 */
.elementor-location-header{
	will-change: transform;
	transition: transform .30s cubic-bezier(.4, 0, .2, 1);
}
body.od-nav-hide .elementor-location-header{
	transform: translateY(-52px);
}
.elementor-163 .elementor-element-393339c{
	position: relative;
	z-index: 2;
	will-change: transform;
	transition: transform .30s cubic-bezier(.4, 0, .2, 1);
	/* logo 上方多留一點空間，所有狀態一致（原本只有 10px，貼頂很擠）*/
	padding-top: 22px;
}
/* 抵銷量比位移量多 12px，讓 logo 收起後不要貼齊視窗頂端 */
body.od-nav-hide .elementor-163 .elementor-element-393339c{
	transform: translateY(64px);
}
/* 🔴 這裡不要再給 logo 列一層白底。
   分類列收起時已經 opacity:0，不需要遮蔽；加白底會讓整個 header 變不透明，
   漸層就看不到了（2026-08-14 踩過）。 */
.elementor-163 .elementor-element-a394915{
	opacity: 1;
	transition: opacity .22s ease;
}
body.od-nav-hide .elementor-163 .elementor-element-a394915{
	opacity: 0;
	pointer-events: none;
}

/* ---------- B. 手機側邊欄（滿版，Complex 式深色 + Popbee 式頁尾）---------- */
#od-drawer{
	position: fixed; inset: 0;
	background: #0b0b0b; color: #fff;
	z-index: 99999;
	display: flex; flex-direction: column;
	transform: translateX(100%);
	transition: transform .32s cubic-bezier(.22,.61,.36,1);
	visibility: hidden;
}
body.od-drawer-open #od-drawer{ transform: translateX(0); visibility: visible; }
body.od-drawer-open{ overflow: hidden; }

#od-drawer .od-top{
	flex: 0 0 auto;
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(255,255,255,.13);
}
#od-drawer .od-top img{ height: 20px; width: auto; filter: invert(1); }
#od-drawer .od-close{
	background: none; border: 0; color: #fff;
	font-size: 24px; line-height: 1; width: 34px; height: 34px;
	cursor: pointer; padding: 0;
}

#od-drawer .od-body{ flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#od-drawer .od-item{ border-bottom: 1px solid rgba(255,255,255,.10); }
#od-drawer .od-row{ display: flex; align-items: stretch; }
#od-drawer .od-row > a{
	flex: 1 1 auto; display: block;
	color: #fff; text-decoration: none;
	font-size: 17px; font-weight: 600; letter-spacing: .08em;
	padding: 19px 18px;
}
#od-drawer .od-toggle{
	flex: 0 0 auto;
	background: none; border: 0; color: #fff;
	width: 56px; font-size: 20px; line-height: 1;
	cursor: pointer;
	transition: transform .25s ease;
}
#od-drawer .od-item.open > .od-row .od-toggle{ transform: rotate(90deg); }
#od-drawer .od-sub{
	max-height: 0; overflow: hidden;
	background: #151515;
	transition: max-height .30s ease;
}
#od-drawer .od-item.open > .od-sub{ max-height: 560px; }
#od-drawer .od-sub a{
	display: block;
	color: rgba(255,255,255,.76); text-decoration: none;
	font-size: 15px; letter-spacing: .04em;
	padding: 13px 18px 13px 34px;
}
#od-drawer .od-sub a:active{ background: rgba(255,255,255,.06); }

#od-drawer .od-foot{
	flex: 0 0 auto;
	border-top: 1px solid rgba(255,255,255,.13);
	padding: 24px 18px calc(26px + env(safe-area-inset-bottom));
	text-align: center;
}
#od-drawer .od-foot > img{ height: 18px; width: auto; filter: invert(1); margin-bottom: 16px; }
#od-drawer .od-social{ display: flex; justify-content: center; gap: 24px; margin-bottom: 16px; }
#od-drawer .od-social a{ color: #fff; font-size: 18px; line-height: 1; }
#od-drawer .od-social svg{ width: 18px; height: 18px; fill: #fff; }
#od-drawer .od-links{ display: flex; justify-content: center; gap: 24px; }
#od-drawer .od-links a{
	color: rgba(255,255,255,.60); text-decoration: none;
	font-size: 11px; letter-spacing: .12em;
}

/* 側邊欄開啟時，蓋掉 Elementor 自己的下拉，避免兩層並存 */
body.od-drawer-open .elementor-location-header nav.elementor-nav-menu--dropdown{ display: none !important; }

/* ==================== C. 頂部右側改為「會員 + 搜尋」icon ==================== */
/* 桌機：隱藏原本的搜尋輸入框，logo 置中，icon 靠右絕對定位 */
.elementor-163 .elementor-element-393339c{ position: relative; }
.elementor-163 .elementor-element-24d2f0f{ display: none !important; }   /* 原搜尋框 */
.elementor-163 .elementor-element-daafe56{ margin-left: auto; margin-right: auto; }
.elementor-163 .elementor-element-c4bba03{
	position: absolute; right: 24px; top: 50%;
	transform: translateY(-50%);
	margin: 0; width: auto;
}
/* 原本的四個社群 icon 藏起來（頁尾已經有了），位置讓給新 icon */
.elementor-163 .elementor-element-c4bba03 > .elementor-widget-icon{ display: none !important; }

/* 手機：藏掉社群 icon、舊的搜尋圖示與舊的搜尋輸入框 */
.elementor-163 .elementor-element-dc8771e > .elementor-widget-icon{ display: none !important; }
.elementor-163 .elementor-element-f695b57{ display: none !important; }
.elementor-163 .elementor-element-1a3a42f5{ display: none !important; }
/* 容器原本是 space-around，社群 icon 藏掉後新 icon 會浮在中間，要改靠右 */
.elementor-163 .elementor-element-dc8771e{ justify-content: flex-end !important; }

/* 新的 icon 組 */
.od-actions{ display: flex; align-items: center; gap: 18px; }
.od-actions button{
	/* 🔴 Firefox 對 <button> 有自己的預設外觀，只寫 background:none 壓不掉，
	   會出現桃紅底。要一併關掉 appearance 並用 !important 寫死。 */
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0; cursor: pointer;
	color: #000 !important; line-height: 0;
	transition: opacity .18s ease;
	/* 🔴 不加這幾行，點按時 SVG 會被「選取」，站上的反白色是桃紅色，看起來像 icon 變紅底 */
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none; user-select: none;
	outline: none;
}
.od-actions button::selection,
.od-actions button *::selection{ background: transparent; }
.od-actions svg{ pointer-events: none; }
.od-actions button:focus-visible{ outline: 2px solid rgba(0,0,0,.35); outline-offset: 4px; border-radius: 4px; }
.od-actions button:hover{ opacity: .55; }
.od-actions svg{ width: 26px; height: 26px; display: block; fill: #000 !important; }
.od-actions .od-member{ cursor: default; }          /* 會員 icon 目前不可點 */
.od-actions .od-member:hover{ opacity: 1; }

/* ==================== D. 搜尋面板（深色，從 header 下方拉開） ====================
   🔴 關鍵：面板不能蓋住 header。POPBEE 的做法是 header 完整留著、面板從它下方展開，
   使用者才不會失去方向感，也能再點一次放大鏡收起來。
   top 由 JS 依 header 實際高度動態設定（header 收合時高度會變）。 */
#od-search{
	position: fixed; left: 0; right: 0;
	top: var(--od-header-h, 176px);
	z-index: 98;                       /* 低於 header(100)，所以蓋不到它 */
	background: #2b2b2b; color: #fff;
	/* 減 56px：底部永遠留一道空隙，讓面板讀起來是「從導覽列拉下的抽屜」，
	   而不是佔滿整個畫面的彈窗（頂到地板會被切掉，很難看）*/
	max-height: calc(100vh - var(--od-header-h, 176px) - 56px);
	overflow-y: auto;
	transform: translateY(-12px);
	opacity: 0;
	visibility: hidden;
	transition: transform .30s cubic-bezier(.22,.61,.36,1), opacity .22s ease, visibility .30s;
	-webkit-overflow-scrolling: touch;
}
body.od-search-open #od-search{ transform: translateY(0); opacity: 1; visibility: visible; }
body.od-search-open{ overflow: hidden; }
/* 面板開啟時關掉頂部漸層，否則會疊在面板上方 */
body.od-search-open::before{ opacity: 0 !important; }

/* 面板下方的壓暗層：保留上下文，點它可關閉 */
/* 🔴 不壓暗。壓暗會讓它變成「彈窗」，POPBEE 是「從導覽列拉下來的抽屜」，
   搜尋是隨手開關的動作，不該有彈窗的份量。這層只負責接住「點外面關閉」。 */
#od-search-scrim{
	position: fixed; inset: 0;
	background: transparent;
	z-index: 97;
	opacity: 0; visibility: hidden;
	transition: visibility .26s;
}
body.od-search-open #od-search-scrim{ opacity: 1; visibility: visible; }

/* 右上角關閉鈕 */
#od-search .od-s-close{
	position: absolute; top: 30px; right: 28px;
	background: none; border: 0; color: rgba(255,255,255,.7);
	font-size: 24px; line-height: 1; width: 36px; height: 36px;
	cursor: pointer; padding: 0;
	transition: color .18s ease;
}
#od-search .od-s-close:hover{ color: #fff; }
#od-search .od-s-inner{ position: relative; }
#od-search form{ margin-right: 58px; }

/* 呼吸感：搜尋框上下都留足空間，讓它是畫面的主角 */
#od-search .od-s-inner{ max-width: 1180px; margin: 0 auto; padding: 32px 28px 34px; }
#od-search form{
	display: flex; align-items: center; gap: 14px;
	border: 1px solid rgba(255,255,255,.32);
	border-radius: 999px;
	padding: 15px 24px;
	margin-bottom: 28px;
}
#od-search form svg{ width: 21px; height: 21px; fill: rgba(255,255,255,.7); flex: 0 0 auto; }
#od-search input[type="search"]{
	flex: 1 1 auto;
	background: transparent; border: 0; outline: none;
	color: #fff; font-size: 16px;
}
#od-search input[type="search"]::placeholder{ color: rgba(255,255,255,.45); }
#od-search input[type="search"]::-webkit-search-cancel-button{ filter: invert(1); opacity: .5; }

#od-search h3{
	font-size: 12px; letter-spacing: .12em; font-weight: 700;
	color: rgba(255,255,255,.62);
	margin: 0 0 13px;
}
#od-search .od-s-sec + .od-s-sec{
	margin-top: 26px; padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.13);
}

#od-search .od-trends{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px 28px; }
#od-search .od-trends a{
	display: flex; align-items: center; gap: 11px;
	color: rgba(255,255,255,.9); text-decoration: none; font-size: 15px;
}
#od-search .od-trends a:hover{ color: #fff; }
#od-search .od-trends svg{ width: 15px; height: 15px; fill: rgba(255,255,255,.45); flex: 0 0 auto; }

#od-search .od-hot{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 28px; }
#od-search .od-hot a{ display: flex; gap: 15px; color: #fff; text-decoration: none; align-items: flex-start; }
#od-search .od-hot img{ width: 104px; height: 70px; object-fit: cover; flex: 0 0 auto; }
#od-search .od-hot span{ font-size: 14px; line-height: 1.55; }
#od-search .od-hot a:hover span{ text-decoration: underline; }

/* 開啟時放大鏡切換成關閉狀態的視覺提示 */
body.od-search-open .od-search-btn{ opacity: .45; }

@media (max-width: 900px){
	#od-search .od-trends{ grid-template-columns: repeat(2, 1fr); }
	#od-search .od-hot{ grid-template-columns: 1fr; }
	#od-search .od-s-inner{ padding: 26px 16px 34px; }
	#od-search form{ padding: 14px 20px; margin-bottom: 28px; }
	#od-search .od-hot img{ width: 92px; height: 62px; }
}