@charset "UTF-8";
:root{
	--bg-header:var(--bg-header-custom,#fff);
	--bg-header-expended-img: #fff no-repeat 50% 50% / cover;
	--bg-header-top:var(--bg-header-expended-img,#fff);
	--bg-header-belt:var(--bg-header-custom,var(--bs-main));
	--bg-header-expended-mobile:linear-gradient(to bottom, transparent var(--header-height), #fff var(--header-height));
	--bg-header-expended:var(--bg-header-top);
	
	--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:60px;
}
*,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.區塊： */
/* 頁面區塊層級從大到小：
.section(段落) > 
.container(段落內的大容器) > 
.content(區塊功能) > 
.block(通常是功能) */
body{
	--header-height:60px;
	padding-top: var(--header-height);
}
.header-main{
	--header-padding-bottom:auto;
	background:var(--bg-header-expended-img);
	position:fixed;
	top:0;
	right:0;
	left:0;
	height: var(--header-height);
	z-index:1025;
	box-shadow: var(--bs-box-shadow);
}
.header-main .navbar-expand-lg{
	background: var(--bg-header-expended-mobile);
}
.header-main .navbar-brand{
	--brand-font-size:var(--bs-fs-h6);
	--bs-navbar-brand-padding-y:0;
	display:flex;
	align-items:center;
	gap:8px;
	max-width:calc(100% - 4.5rem);
	flex: 0 1 0%;
}
.navbar-brand>.img{
	min-width: fit-content;
	max-width:100%;
}
.navbar-brand>.img img{
	max-width:100%;
}
.header-main .navbar-brand ._text{
	z-index: 1;
	font-size: var(--brand-font-size);
	text-decoration: none;
  	color: var(--bs-navbar-brand-color);
  	cursor: pointer;
}
.header-main .navbar-primaryNav {
	--bs-nav-link-font-size:1.125rem; /* 18px */
	--bs-nav-link-font-weight:500;
	--navbar-text-color:var(--bs-main-rgb);
	--bs-navbar-color: rgba(var(--navbar-text-color), 1);
	--bs-navbar-hover-color: rgba(var(--bs-accessory-rgb), 1);
	--bs-navbar-disabled-color: rgba(var(--navbar-text-color), 0.3);
	--bs-navbar-active-color: rgba(var(--bs-accessory-rgb), 1);
	/* --bs-navbar-padding-x: 0;
		--bs-navbar-padding-y: 0.5rem; */
}
.header-main .navbar-primaryNav .nav-link.cta,.header-main .navbar-primaryNav .nav-link.show {
  color: var(--bs-navbar-active-color);
}
.header-main .navbar-secondaryNav {
	--bs-nav-link-font-size:1.125rem;
	--bs-nav-link-font-weight:500;
	--navbar-text-color:var(--bs-main-rgb);
	--bs-navbar-color: rgba(var(--navbar-text-color), 1);
	--bs-navbar-hover-color: rgba(var(--bs-dark-rgb), 1);
	--bs-navbar-disabled-color: rgba(var(--navbar-text-color), 0.3);
	--bs-navbar-active-color: rgba(var(--navbar-text-color), 1);
}
.navbar:not(.navbar-dark) [class*="btn-outline-"]{
	--bs-btn-color:var(--bs-black);
}
.content-search{
	top:calc(var(--header-height) * -1);
}
/* 2.既有元件： */
/* 3.自訂元件： */
/* 3.-巢狀下拉 */
:where(.navbar-expand-lg) .navbar-nav{
	position:relative;
	/* color:var(--bs-light); */
	--navbar-text-color:var(--bs-main-rgb);
	--bs-navbar-color: rgba(var(--navbar-text-color), 0.65);
	--bs-navbar-hover-color: rgba(var(--navbar-text-color), 0.8);
	--bs-navbar-disabled-color: rgba(var(--navbar-text-color), 0.3);
	--bs-navbar-active-color: rgba(var(--bs-accessory-rgb), 1);
}

/* 4.套件元件： */
/* 4-1.套件元件：滾動吸頂 FixedTop */
.header-main ~ [class^="content-"]:first-of-type.mlFixed-top{
	top:3.5rem!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-5.規則：表單相關-客製 */
input[type="number"]{width:5rem}
/* 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) {
	/* 頁面區塊(header/footer) */
	.box-search{--bs-gutter-y:1rem}
}
/* md 當螢幕大於768px時*/
@media screen and (min-width:768px) {

	/* 4-1.套件元件：滾動吸頂 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) {
	body{
		padding-top: 0;
	}
	/* 頁面區塊(header/footer) */
	.header-main{
		--header-content-height:145px;
		--header-padding-bottom:60px;
		--header-height:calc( var(--header-content-height) + var(--header-padding-bottom));
		
		background:var(--bg-header-expended);
		box-shadow: none;
	}
	.header-main .navbar-expand-lg{
		background: unset;
	}
	.header-main>nav{
		position: static;
		height: var(--header-content-height);
	}
	.header-main .navbar-primaryNav{
		position: absolute;
		left: 0;
		bottom: 0;
		height: var(--header-padding-bottom);
		justify-content: center;
		background:var(--bg-header-belt);
	}
	.header-main .navbar-primaryNav.fixed{
		position: fixed;
		height: var(--header-padding-bottom);
		top: 0;
		bottom: unset!important;
	}
	.header-main .navbar-primaryNav {
		--bs-nav-link-font-size:var(--bs-fs-h5)!important; /* 20px */
		--bs-nav-link-font-weight:500!important;
		--navbar-text-color:var(--bs-white-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);
		--bs-navbar-nav-link-padding-x:1.5rem;
	}
	.header-main .navbar-secondaryNav{
		--bs-nav-link-font-size:var(--bs-fs-h6); /* 16 18px */
		--bs-nav-link-font-weight:500!important;
		--navbar-text-color:var(--bs-main-rgb);
		--bs-navbar-color: rgba(var(--navbar-text-color), 1);
		--bs-navbar-hover-color: rgba(var(--bs-dark-rgb), 1);
		--bs-navbar-disabled-color: rgba(var(--navbar-text-color), 0.3);
		--bs-navbar-active-color: rgba(var(--navbar-text-color), 1);
		--bs-navbar-nav-link-padding-x:1.5rem;
		justify-content: end;
	}
	.header-main .navbar-primaryNav .nav-link{
		height: 100%;
	}
	.header-main :is(.navbar-primaryNav,.navbar-secondaryNav) .nav-item{
		position: relative;
	}
	.header-main :is(.navbar-primaryNav,.navbar-secondaryNav) .nav-item:not(:last-child)::after{
		content: "";
		position: absolute;
		display: block;
		height: var(--bs-nav-link-font-size);
		width: 1px;
		top: calc((100% - var(--bs-nav-link-font-size))/2);
    right: 0.5px;
		background: rgb(var(--navbar-text-color));
	}
	.navbar-brand{
		max-width:480px;
	}
	.navbar-brand > img{
		max-width:300px;
	}
	.header-main .navbar-brand{
		display: flex;
		justify-content: start;
		align-items: center;
		gap:1.25rem;
		flex: 1 1 auto;
	}
	.header-main .navbar-brand ._text{
		--brand-font-size:var(--bs-fs-h5);
		position: relative;
		flex: 0 0 auto;
		border: 2px solid #D9D9D9;
		border-width: 2px 0;
		padding: 0.25rem 0;
	}
	.header-main .navbar-brand ._text::after{
		content: "";
		position: absolute;
		height: calc(100% + 16px);
		width: 72%;
		top: -8px;
    left: 0;
		border: 2px solid #D9D9D9;
		border-width: 2px 0;
	}
	.header-main .navbar-nav{
		width:100%;
	}
	.header-main .navbar-secondaryNav{
		--bs-navbar-nav-link-padding-x: 1rem;
		flex-wrap: wrap;
	}
	.navbar-signedInNav{
		position:relative;
		justify-content:end;
	}
	.header-main{
		position:relative;
	}
	.header-main ~ [class^="content-"]:first-of-type{
		margin-top:0;
	}
	
	/* -主搜尋區塊 */

	/* 3-10.巢狀下拉共同部分 */
	.navbar-nav .dropdown-menu{max-width:12em}
	:is(.navbar-expand-lg,.navbar-primaryNav) .navbar-nav .nav-link{
		--bs-nav-link-font-weight:var(--bs-fw-bold);
		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:0.375rem;
		bottom:0;
		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");
		background-repeat: no-repeat;
		background-position: top center;
	}
	
	/* 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) {
	/* 頁面區塊(header/footer) */
	.header-main .navbar-secondaryNav{
		--bs-nav-link-font-size:1.125rem!important; /* 18px */
	}
}
/* xxl 當螢幕大於1400px時*/
@media screen and (min-width:1400px) {
	/* 頁面區塊(header/footer) */
	.header-main .navbar-brand{
		flex: 1 1 0%;
		max-width:500px;
	}
	.navbar-brand > img{
		max-width:320px;
	}
	.header-main .navbar-brand ._text{
		--brand-font-size:var(--bs-fs-h4);
	}
	.header-main .navbar-secondaryNav{
		--bs-navbar-nav-link-padding-x: 1.5rem;
	}
}
/* xxl 當螢幕大於2200px時*/
@media screen and (min-width:2200px) {}