@charset "UTF-8";
:root{
	--bg-header:var(--bg-header-custom,#000);
	--bg-header-expended-img: no-repeat 50% 50% / cover,var(--bg-header-custom,#000);
	--bg-header-top:var(--bg-header-expended-img,var(--bg-header-custom,#000));
	--bg-header-belt:var(--bg-header-custom,var(--bs-main));
	--bg-header-expended-mobile:linear-gradient(to bottom, transparent var(--header-height), var(--bg-header-custom,#000) var(--header-height));
	--bg-header-expended:linear-gradient(to top,var(--bg-header-belt),var(--bg-header-belt) 48px , transparent 48px),var(--bg-header-top);

	--bs-body-color-emphasis:#472800;
	--shadow-tabPills:0 2px 8px rgba(66, 43, 97, 0.15);
	--shadow-tabPills-hover:0 1px 6px rgba(66, 43, 97, 0.85);
	--border-color:#d9d9d9;
	--header-height:56px;
}
*,html {font-family:"Noto Sans TC",'微軟正黑體','Microsoft JhengHei','PingFang TC','儷黑 Pro','LiHei Pro','黑體-繁','Heiti TC','文泉驛正黑','WenQuanYi Zen Hei',sans-serif;}
/* 五種分類： */
/* 1.區塊： */
/* 2.既有元件： */
/* 3.自訂元件： */
/* 4.套件元件： */
/* 5.規則： */

/* 1.區塊： */
.header-main{
	/* background:var(--bg-header); */
	background:var(--bg-header-expended-img);
	position:fixed;
	top:0;
	right:0;
	left:0;
	z-index:1025;
}
.header-main .navbar-expand-lg{
	background: var(--bg-header-expended-mobile);
}
.header-main ~ [class^="content-"]:first-of-type{
	margin-top:var(--header-height);
}
.navbar-brand{
	max-width:calc(100% - 4.5rem);
}
.navbar-brand>img{
	max-width:100%;
}

.navbar:not(.navbar-dark) [class*="btn-outline-"]{
	--bs-btn-color:var(--bs-black);
}
.footer{
	color:#fff!important;
	background:var(--bg-header);
}
.footer a{color:var(--bs-accessory)}

/* 2.既有元件： */

/* 3.自訂元件： */
/* 3.-巢狀下拉 */
.header-main .navbar-primaryNav{
	/* --bs-nav-link-color:rgba(var(--bs-headerBeltLink-rgb), 1); */
	--navbar-text-color:var(--bs-headerBeltLink-rgb);
	--bs-navbar-color:rgba(var(--bs-headerBeltLink-rgb), 1);
	--bs-navbar-hover-color:rgba(var(--bs-headerBeltLinkCTA-rgb), 1);
	--bs-navbar-disabled-color:rgba(var(--navbar-text-color), 0.3);
	--bs-navbar-active-color:rgba(var(--bs-headerBeltLinkCTA-rgb), 1);
}
.navbar-secondaryNav,.navbar-signedInNav{
	--bs-nav-link-color:var(--bs-light);
	--bs-navbar-color:var(--bs-light);
}
:is(.navbar-expand-lg,.navbar-primaryNav) .navbar-nav .nav-link{
	position:relative;
}
:is(.navbar-expand-lg,.navbar-primaryNav) .navbar-nav :is(.nav-link.active,.nav-link:hover){
	color: var(--bs-navbar-active-color);
}

/* 4.套件元件： */
/* 4-1.多層次下拉 */
.dropdown-hover-all .dropdown-menu, .dropdown-hover > .dropdown-menu.dropend{
	margin-left:-1px!important;
	margin-top:-1px;
}
/* 4-2.套件-滾動吸頂FixedTop-客製部分 */
.header-main ~ [class^="content-"]:first-of-type.mlFixed-top{
	top:var(--header-height)!important;
	bottom:unset!important;
}
.header-main ~ [class^="content-"]:first-of-type.mlFixed-bottom{
	top:unset!important;
	bottom:0!important;
}
.header-main ~ .content-search.mlFixed-bottom.fixed{
	top:unset!important;
	bottom:0!important;
	margin-top:unset;
	height:60px;
	background:#fff;
	-webkit-box-shadow:var(--shadow-tabPills)!important;
	box-shadow:var(--shadow-tabPills)!important;
	overflow-y:hidden;
	z-index:1030;
}
.header-main ~ .content-search.fixed .row>.py-5 {padding-top:0.5rem!important}
/* 5.規則： */

/* xs 當螢幕小於575px時 */
@media screen and (max-width:575px) {}
/* sm 當螢幕大於576px時*/
@media screen and (min-width:576px) {
	/* 4-1.套件元件：滾動吸頂 FixedTop */
	.header-main ~ [class^="content-"]:first-of-type.mlFixed-sm-top{
		top:0!important;
		bottom:unset!important;
	}
	.header-main ~ [class^="content-"]:first-of-type.mlFixed-sm-bottom{
		top:unset!important;
		bottom:0!important;
	}
}
/* 平板直向時 */
@media screen and (min-width:768px) and (min-height:992px) {}
/* md 當螢幕 小於768px時*/
@media screen and (max-width:768px) {}
/* md 當螢幕大於768px時*/
@media screen and (min-width:768px) {
	/* 套件-滾動吸頂FixedTop-客製部分 */
	.header-main ~ [class^="content-"]:first-of-type.mlFixed-md-top{
		top:0!important;
		bottom:unset!important;
	}
	.header-main ~ [class^="content-"]:first-of-type.mlFixed-md-bottom{
		top:unset!important;
		bottom:0!important;
	}
	.header-main ~ .content-search.mlFixed-md-bottom.fixed{
		top:unset!important;
		bottom:0!important;
		margin-top:unset;
		height:60px;
		background:#fff;
		-webkit-box-shadow:var(--shadow-tabPills)!important;
		box-shadow:var(--shadow-tabPills)!important;
		overflow-y:hidden;
		z-index:1030;
	}
}
/* lg 當螢幕小於992px時 */
@media screen and (max-width:992px) {	
	/* 4-1.套件元件：滾動吸頂 FixedTop */
	.mlFixed-bottom.fixed ~ footer{padding-bottom:60px}
}
/* lg 當螢幕大於992px時*/
@media screen and (min-width:992px) {
	/* 頁面區塊(header/footer) */
	.navbar-brand{
		max-width:300px;
	}
	.header-main .navbar-nav{
		width:100%;
		justify-content:end;
	}
	.navbar-primaryNav{order:3}
	.navbar-signedInNav{order:1}
	.navbar-secondaryNav{order:2}
	.header-main{
		position:relative;
		background:var(--bg-header-expended);
	}
	.header-main .navbar-expand-lg{
		background:unset;
	}
	.header-main ~ [class^="content-"]:first-of-type{
		margin-top:0;
	}

	/* 組件-巢狀下拉 */
	.navbar-nav .dropdown-menu{max-width:12em}
	:is(.navbar-expand-lg,.navbar-primaryNav) .navbar-nav .nav-link{
		display:flex;
		justify-content:center;
		align-items:center;
	}
	:is(.navbar-expand-lg,.navbar-primaryNav) .navbar-nav .nav-link.active::before{
		content:" ";
		position:absolute;
		display:block;
		width:32px;
		height:16px;
		bottom:-0.825rem;
		background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32 16' style='enable-background:new 0 0 32 16;' xml:space='preserve'%3E%3Cpolygon class='st0' fill='%23FFFFFF' points='16,0 0,16 32,16 '/%3E%3C/svg%3E");
	}

	/* 4-1.套件元件：滾動吸頂 FixedTop */
	.header-main ~ [class^="content-"]:first-of-type.mlFixed-lg-top{
		top:0!important;
		bottom:unset!important;
	}
	.header-main ~ [class^="content-"]:first-of-type.mlFixed-lg-bottom{
		top:unset!important;
		bottom:0!important;
	}
}
/* xl 當螢幕大於1200px時*/
@media screen and (min-width:1200px) {}
/* xxl 當螢幕大於1400px時*/
@media screen and (min-width:1400px) {
	/* 頁面區塊(header/footer) */
	.navbar-brand{max-width:400px}
	.navbar-primaryNav .nav-link{font-size: var(--bs-fs-h5);}
}
/* xxl 當螢幕大於2200px時*/
@media screen and (min-width:2200px) {}