@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap');/*繁中-黑體*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;500;600;700;800;900&display=swap'); /*繁中-宋體*/

/* 取消新版chrome搞出來的黑框bug */
*, *:focus {
	outline: none;
}
button:active, button.active, button:focus, button.focus {
	outline: none;
	border: none;
	box-shadow: none !important;
}


/* 強制修改fancybox css */
.fancybox-bg {
    background: var(--cafe);
    opacity:1 !important;
}
.fancybox-inner .fancybox-infobar {
	display: none;
}
.fancybox-button {
    /*background: rgba(30, 30, 30, .6);*/
	background: var(--cafe);
	opacity:1 !important;
}



/* ==================================================
   Color顏色
================================================== */
body {
	--white: #fff;
	--cafe: #723E00;
	--yallow:#FBC70D;
	--orange: #E07A00;
	--skin: #f7eccd;
}


/* ==================================================
   BS內建
================================================== */
main {
	overflow: clip; /* 隱藏捲軸避免bug, 原本用 hidden 會導致 .nav 的 position:sticky; 失效 */
}
.img-fluid {
    max-width:auto;
	width:100%;
}

body {
	/*padding-top:65px; 搭配Header區固定置頂，記得不能用margin,容易和其它相衝*/
	margin: 0 auto;
	min-width:340px; 
	/*max-width:1920px;*/
	background: var(--cafe);
	margin-top:4em;
}
/* 1em等同於15px ~ 1rem等同於16px;*/
body,p {
	font-size: 1.1em;
	color: var(--cafe); 
	font-weight: 500;
	font-family: 'Noto Sans TC',Arial,-apple-system,Segoe UI,Roboto,sans-serif; /*繁中-黑體*/
	/*font-family: -apple-system, Segoe UI, Roboto, "微軟正黑體", "Helvetica Neue", Arial, sans-serif;*/
}
h3,h4,h5 {
	font-family: 'Noto Serif TC', sans-serif; /*繁中-宋體*/
	font-weight: 800;
	letter-spacing: 0.1em;
}
h2 {
	font-size: 2.2em;
	font-weight: 800;
}
h3 {
	font-size: 1.8em;
}
#F h4 {
	font-size: 1.7em;
	line-height:1.2;
	color:var(--cafe);
	background-color:var(--white);
	margin-bottom:0.75em; 
	display: inline-block;
	padding: 0.2em 0.35em;
	border:var(--cafe) double 6px;
}
#F h5 {
	font-size: 1.7em;
	line-height:1.2;
	color:var(--white);
	background-color:var(--cafe);
	margin-bottom:0.35em; 
	display: inline-block;
	padding: 0.4em 0.6em;
}
h6 {
	font-size: 1.15em;
	font-weight: bold;
	line-height:1.2;
	margin-top:1.5em; 
	margin-bottom:0.5em; 
}
p {
	text-align: justify;
	margin-bottom:0.5em; 
	line-height:1.6;
}
.tc {
	font-size: 1em;
	line-height:1.5;
	text-align:left;
}
a {
	color: var(--gray);
	text-decoration:none; 
	/*text-decoration:underline;*/
}
a:hover {
	color: var(--orange);
	text-decoration:none;
}
a.link {
	color: var(--orange);
	text-decoration:underline;
}
a.link:hover {
	color: var(--orange);
	text-decoration:none;
}

ol.tc li {
	padding-left:10px; 
}

dl, ol, ul {
    margin-bottom:0;
}


/*桌上型*/
@media (min-width: 1200px) and (max-width: 1399.98px) { 
	h2 {
		font-size: 1.9em;
		font-weight: 800;
	}
	h3 {
		font-size: 1.6em;
	}
	#F h4 {
		font-size: 1.45em;
	}
	#F h5 {
		font-size: 1.45em;
	}
}


/*ipad 橫式lg ~ 直式md */
@media (min-width: 768px) and (max-width: 1199.98px) { 
	body,p {
		font-size: 1em;
	}
	h2 {
		font-size: 1.8em;
	}
	h3 {
		font-size: 1.4em;
		letter-spacing: 0.05em !important;
	}
	#F h4 {
		font-size: 1.3em;
	}
	#F h5 {
		font-size: 1.3em;
	}
}

/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) { 
	...
}

/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) { 
	body {
		margin-top:4em;
	}
	#F h5 {
		letter-spacing: 0 !important;
	}
}


/*手機版~*/
@media (max-width: 767.98px) { 
	body {
		margin-top: 60px;
	}
	body,p {
		font-size: 0.95em;
	}
	h2 {
		font-size: 1.25em;
	}
	h3 {
		font-size: 1.25em;
	}
	#F h4 {
		font-size: 1.2em;
	}
	#F h5 {
		font-size: 1.2em;
	}
	h6 {
		font-size: 1.1em;
		margin-bottom: 2.5em;
	}
	
	#F h6{
		margin-bottom: 0;
	}
	
	.tc {
		font-size: 0.85em;
	}
	ul.list-inline .list-inline-item {
		margin-bottom: 0.5em;
	}
	.g-5, .gy-5 {
		--bs-gutter-y: 1.5em;
	}
	.pt-5 {
		padding-top: 2em !important;
	}
	.m-4 {
		margin: 1em !important;
	}
}


/* ==================================================
   漢堡按鈕-旋轉X
================================================== */
.navbar-toggler {
	padding: 0;
	border-radius: 0;
	background-color: none;
	border: none;
}

/*Hamburger Menu to X css*/
.navbarX {
	width: 25px;
	height: 18px;
	background-color: transparent !important;
	position: relative;
	float: right;
	margin-right: 0;
	cursor: pointer;
}

@media (min-width:992) {  /*手機版以外767px, md平板直式以外992px*/
	.navbarX {
		display:none;
	}
}

.navbarX i {
	background: var(--skin);
	border-radius: 2px;
	width: 100%;
	height: 3px;
	content: "";
	display: block;
}

.navbarX i:nth-child(1) {
	animation: outT 0.8s backwards;  /*若要取消進場動畫*/
	animation-direction: reverse;
}

.navbarX i:nth-child(2) {
	margin: 5px 0;
	animation: outM 0.8s backwards;  /*若要取消進場動畫*/
	animation-direction: reverse;
}

.navbarX i:nth-child(3) {
	animation: outBtm 0.8s backwards; /*若要取消進場動畫*/
	animation-direction: reverse;
}

.navbarX.active i:nth-child(1) {
	animation: inT 0.8s forwards;
}

.navbarX.active i:nth-child(2) {
	animation: inM 0.8s forwards;
}
.navbarX.active i:nth-child(3) {
	animation: inBtm 0.8s forwards;
}

@keyframes inM {
	50% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(45deg);
	}
}

@keyframes outM {
	50% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(45deg);
	}
}


@keyframes inT {
	0% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(9px) rotate(0deg);
	}
	100% {
		transform: translateY(7px) rotate(135deg);/*微上調2px*/
	}
}

@keyframes outT {
	0% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(9px) rotate(0deg);
	}
	100% {
		transform: translateY(7px) rotate(135deg);
	}
}

@keyframes inBtm {
	0% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(-9px) rotate(0deg);
	}
	100% {
		transform: translateY(-9px) rotate(135deg);
	}
}

@keyframes outBtm {
	0% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(-9px) rotate(0deg);
	}
	100% {
		transform: translateY(-9px) rotate(135deg);
	}
}



/* ==================================================
   區域
================================================== */
section + section {
	padding-top: 2.5em;
}

/*多張背景圖,結尾要用逗號區隔*/
.bgA {
	background: url(../imgs/bg01.gif) no-repeat center top/100%,
		        url(../imgs/bg02.gif) repeat-y center top/100%;
	background-color: var(--skin);
	overflow: hidden;
	padding: 4% 0 3%;
}
.bgACT {
	width:80%;
	margin:0 auto;
}
.bgACT p{
	font-size: clamp(0.8em, 1.05vw, 1.25em);
	margin:2% 0 0;
}
@media (max-width:768px){
	.bgA {
		padding: 3% 0 2%;
	}
	.bgACT {
		width:85%;
	}
	.bgACT p{
		margin-top:3%;
	}
}

a.expert{
	display: block;
}
a.expert img{
	display: block;
	width:100%;
	transition: scale 0.5s;
}
a.expert:hover img{
	scale:1.04;
}

a.more{
	display: block;
	width:7em;
	margin:1.5em 0 0 -0.25em;
}
a.more img{
	display: block;
	width:100%;
	transition: scale 0.5s;
}
a.more:hover img{
	scale:1.1;
}
@media (max-width:768px){
	a.more{
		margin-top:1em;
		margin-bottom:0.5em;
	}
}

/*先寫的排在上面*/
.bgB {
	background: url(../imgs/bgicon01.png) no-repeat center center/contain,
				url(../imgs/bg03.gif) no-repeat center bottom/contain,
		        url(../imgs/bg02.gif) repeat-y center top/contain;
	background-color: var(--skin);
	overflow: hidden;
	padding-bottom: 8em;
}
.bgPattern {
	background: url(../imgs/bgcafe.gif) no-repeat center top/contain,
				url(../imgs/bgPattern.gif) center center;
	padding-bottom: 10em;
}
.bgPattern1 {
	background: url(../imgs/bgPattern1.gif) center center;
	padding-bottom: 3em;
	border: var(--cafe) double 0.65em;
}
#C {
	padding-top:3.75em;
}
#G {
	padding-bottom:4em;
}
#G .title {
	margin-top:-3em;
}
#G .title.titleyt {
	margin-top:8em;
}


@media (min-width: 1700px) { 
	#C {
		padding-top:6em;
	}
}

/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) { 
	#G .title {
		margin-top:-2.5em;
	}
	#G .title.titleyt {
		margin-top:6em;
	}
}

/*ipad 直式 md以下*/
@media (max-width: 991.98px) { 
	.bgB {
		padding-bottom: 5em;
	}
	#G .title {
		margin-top:-1.5em;
	}
	#G .title.titleyt {
		margin-top:6em;
	}
	.bgPattern {
		padding-bottom: 7em;
	}
	.bgPattern1 {
		padding-bottom: 2em;
	}
}

/*手機版*/
@media (max-width: 767.98px) { 
	.bgB {
		background: url(../imgs/bgicon01.png) repeat-y center top/contain,
					url(../imgs/bg03.gif) no-repeat center bottom/contain,
					url(../imgs/bg02.gif) repeat-y center top/contain;
		background-color: var(--skin);
		overflow: hidden;
		padding-bottom: 3em;
	}
	#C {
		padding-top:2em;
	}
	#G {
		padding-bottom:2em;
	}
	#G .title.titleyt {
		margin-top:4em;
	}
}



/* ==================================================
   自定.按鈕
================================================== */
.enfont {
	font-family: Arial;
	font-weight: normal;
}

img.title {
	width:auto;
	max-height:150px; 
	min-height:70px;
	height:10vw;
	margin-top:3em; 
	margin-bottom:1.5em;
}

.map {
	max-width: 1500px;
	width:90%;
	margin: 0 auto;
}

/*.tiger01 {
	position: absolute;
	left:11.5%;
	bottom:0;
	margin-bottom:13.5%; 
	width:9.5%;
	height: auto;
	z-index:9; 
	animation:rhythmX 3.5s ease-out infinite;
}*/

.event.slick {
	margin-bottom: 2em !important;
}
.event hgroup {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0 4em 2.75em;
}
.event hgroup h2 {
	border-bottom:var(--white) solid 3px;
	padding-bottom: 0.35em;
	display: inline-block;
}
.event hgroup h2,
.event hgroup p {
	color:var(--white);
}

/*ipad 橫式lg ~ 直式md */
@media (min-width: 768px) and (max-width: 1199.98px) { 
	.event hgroup {
		padding: 0 3em 1.75em;
	}
}

/*手機版*/
@media (max-width: 767.98px) { 
	.event hgroup {
		padding: 1em 1.5em 0;
		position: relative;
		text-align: center;
	}
	.event hgroup h2,
	.event hgroup p {
		color:var(--cafe);
	}
	.event hgroup h2 {
		margin: 0 auto 0.5em;
		padding: 0.25em 0.75em;
		border-top: var(--cafe) solid 2px;
    	border-bottom: var(--cafe) solid 2px;
		font-family: 'Noto Serif TC', sans-serif; /*繁中-宋體*/
		font-weight: 800;
		letter-spacing: 0.1em;
	}
}

.btnGO {
	position: fixed;
	bottom:3.5%;
	right:1%;
	z-index:99;
	animation:rhythmY 2s ease-out infinite;
}
.btnGO img {
	display: block;
	transition: all 0.5s;
	width: clamp(65px, 10em, 140px);  /*最小值,理想值-這個一定要是伸縮單位, 最大值 */
}

.btn-close {
	z-index: 1;
	transition: all 0.5s ease-out;
}
.btn-close:hover {
	transform: rotate(180deg);
}

.btn-link {
	animation:rhythmX 2s ease-out infinite;
	display:inline-block;
}
.btn-link img {
	transition: all 0.5s;
	width: clamp(65px, 8em, 200px);  /*最小值,理想值-這個一定要是伸縮單位, 最大值 */
}

@media (min-width: 1600px) { 
	.btnGO img {
		width: 180px;
	}
}

/*ipad 直式 md~ 橫式 lg*/
@media (min-width: 768px) and (max-width: 1199.98px) { 
	.btnGO img {
		width: 100px;
	}
}

/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) { 
	img.title {
		margin-top:1em; 
		margin-bottom:0.5em;
	}
}

/*手機版*/
@media (max-width: 767.98px) {
	.btnGO {
		right:3%;
	}
	.btnGO img {
		width:100px;
	}
	img.title {
		min-height: 65px;
		margin-top:1em; 
		margin-bottom:0.5em;
	}
}



/* ==================================================
   主視覺 mainKV
================================================== */
/*slick輪播*/
.recommend { 
	position:relative;
	overflow:hidden;
	margin:0 auto; 
}
.recommend li { 
	margin:0;
	/*transform:scale(0.88); 因為有遮罩, 如果要居中放大,則要反過來這邊縮小0.95,*/
	transition:transform 0.25s;
	margin-bottom:0; /*和下面點距離*/
}
/*由js判別相呼應*/
.recommend li.slick-center{
	/*transform:scale(1); 如果要居中放大,則要反過來這邊對應成1*/
}

.mainKV {
	position:relative;
}
.mainKV img{
	width:100%;
}
.mainKV img:nth-child(1){
	display: block;
}
.mainKV img:nth-child(2){
	display: none;
}



/*手機版~*/
@media (max-width: 767.98px) { 
	.mainKV img:nth-child(1){
		display: none;
	}
	.mainKV img:nth-child(2){
		display: block;
	}
}



/* ==================================================
   slickArticle
================================================== */
.slickArticle {
	width: 100%;
}
.slickArticle .articleWrapper {
	height: auto;
	padding: 0 1em;
}
/*白底圓角*/
.slickArticle .boxRadius {
	height: 100%;
	border-radius: 1.5rem; /*圓角*/
	overflow: hidden;
	box-shadow: 0 .5rem .75rem rgba(0,0,0,.15); 
	background-color:var(--white);
}

/*一般設定
.slickArticle .article {
	height: 100%;
	overflow: hidden;
}
*/
.slickArticle .article h3 {
	border-top:var(--cafe) solid 2px;
	border-bottom:var(--cafe) solid 2px;
	display:inline-block;
	padding:0.25em 0.75em;
	margin-bottom: .6em;
	white-space:nowrap;
}

.slickArticle .slick-track {
	display: flex;
}

.slickArticle li img {
	display: block;
	width:100%;
	transition: all 0.5s;
}
.slickArticle li .txt {
	padding: 1.35rem 1.15rem .5rem;
}


/*ipad 橫式lg ~ 直式md */
@media (min-width: 768px) and (max-width: 1199.98px) { 
	.slickArticle li .txt {
		padding: 1.35rem 0 .5rem;
	}
	.slickArticle .article h3 {
		padding:0.25em 0;
	}
}

/*手機版~*/
@media (max-width: 767.98px) { 
	.slickArticle li .txt {
		padding: 1.35rem 0 .5rem;
	}
}


/******************* slick start ******************/
.slick,
.slickVideo,
.slickArticle{
	margin-bottom: 0; /* 覆寫 slick-theme.css 的 .slick-slider 的 margin-bottom: 30px; */
}

.btn-arrowL,
.btn-arrowR {
	position: absolute;
	top: 51%;
	transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width:3.75%;
	cursor: pointer;
	/*--x:calc(100% + 0.25em);*/
	--x:calc(100% + 0.05em);
	opacity: 1;
}
.btn-arrowL {
	right: var(--x);
	padding-right:5px; 
	margin-right:15px; 
}
.btn-arrowR {
	left: var(--x);
	padding-left:5px;
	margin-left:15px; 
}

.btn-arrowL:hover,
.btn-arrowR:hover {
	opacity: 0.7;
}


.slick-dots {
	bottom: -1.5em;
}
.slick-dots li {
	width: 13px;
	height: 13px;
	margin: 0 5px;
}
.slick-dots li button {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: none;
	background:var(--skin);
}
.slick-dots li button:hover,
.slick-dots li button:focus,
.slick-dots li.slick-active button {
	background: var(--orange);
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before,
.slick-dots li button:before,
.slick-dots li.slick-active button:before {
	display: none;
}
/******************* slick end ********************/



/*手機版~*/
@media (max-width: 767.98px) { 
	.slick-dots li {
		width: 10px;
		height: 10px;
		margin: 0 3px;
	}
	.btn-arrowL {
		padding-right:0;
		margin-right:0; 
	}
	.btn-arrowR {
		padding-left:0;
		margin-left:0; 
	}
}


/* ==================================================
   modal lightbox 背景濾鏡模糊
================================================== */
.modal {
	backdrop-filter: blur(1.5rem); /*backdrop-filter 背景濾鏡模糊*/
	-webkit-backdrop-filter: blur(1.5rem);
}
/*因為加了 backdrop-filter 背景濾鏡模糊,所以透明度的過度效果要特別移除*/
.modal.fade {
	/*transition: opacity .15s linear;*/
	transition: none;
}
.modal-header .btn-close {
    padding: 1rem 1rem;
}
.modal-content {
	border: none;
	border-radius: 0.5rem;
	padding: 1em 4em 3em;
	background: var(--bgcolor);
}


/*桌上型 xl*/
@media (min-width: 1200px) { 
	.modal-dialog {
		width: 85%;
		max-width: 1200px;
		margin: 1.75rem auto;
	}
}


/*ipad 橫式lg ~ 直式md */
@media (min-width: 768px) and (max-width: 1199.98px) { 
	.modal-dialog {
		width: 90%;
		max-width: 700px;
		margin: 1.75rem auto;
	}
}

/*手機版*/
@media (max-width: 767.98px) {
	/*手機版滿寬時取消上方左右圓角*/
	.modal-fullscreen-md-down img.rounded {
		border-top-left-radius:0 !important;
		border-bottom-left-radius:0 !important;
		border-top-right-radius:0 !important;
	}
	.modal-header .btn-close {
		padding: .5rem .5rem;
		opacity: 1;
	}
}



/* ==================================================
   動畫 animation
================================================== */
a.zoom img {
	transition: all 1s cubic-bezier(0, .71, .4, 1);
	transform: scale(0.95);	
}
a.zoom:hover img {
	transform: scale(1);	
	position: relative;
	z-index:99; /*永遠疊在最上層*/ 
}
a.zoomBig img {
	transition: all 1s cubic-bezier(0, .71, .4, 1);
	transform: scale(1);	
}
a.zoomBig:hover img {
	transform: scale(1.25);
	position: relative;
	z-index:99; /*永遠疊在最上層*/ 
}

/*手機版~*/
@media (max-width: 767.98px) { 
	a.zoomBig:hover img {
		transform: scale(1.75);
	}
}


/*區塊偵測出場*/
.inout {
	opacity:0;
	transition:all 1s;
	/*transition: all .5s cubic-bezier(0, .71, .4, 1);*/
	transform:translateY(10%);
}
.inout.highlight {
	opacity:1;
	transform:translateY(0);
}


/*律動Y*/
@keyframes rhythmY {
  0% {
    transform:translate(0,0); /*原點X,Y*/
  }
  50% {
    transform:translate(0,5%); /*一樣要從原點來計算*/
  }
}

/*律動X*/
@keyframes rhythmX {
  0% {
    transform:translate(0,0); /*原點X,Y*/
  }
  50% {
    transform:translate(5%,0); /*一樣要從原點來計算*/
  }
}



/* ==================================================
   RWD
================================================== */
/*ipad 直式切換*/
@media (max-width: 768px) {
	.container {
		min-width: none;
		max-width: none;
		width: 93.5%;
	}
	.mt-5 {
		margin-top: 1rem !important;
	}
	.mb-4 {
		margin-bottom: 0.75rem !important;
	}
	.mb-5 {
		margin-bottom: 1rem !important;
	}
	
	/******************* slick start ******************/
	.slickPN.prev {
		margin-left:0;
	}
	.slickPN.next {
		margin-right:0;
	}
	
	.slick-dots{
		width:100%;
		right:auto;
		top:auto;
		margin:0;
		display:flex !important;
		justify-content: center;
		align-items: center;
	}
	.slick-dots li{
		margin:0 5px;
	}
	.slick-dots li+li{
		margin-top:0;
	}
	/******************* slick end ********************/
	
}

/*ipad 直式 md以上*/
@media (min-width: 768px) { 
	.container {
		min-width: none;
		max-width: none;
		width: 85%;
	}
}


/*桌上型 xl~*/
@media (min-width: 1200px) and (max-width: 1599.98px) { 
	.container {
		min-width: 1000px;
		max-width: 1350px;
		width: 80%;
	}
}

@media (min-width: 1600px) { 
	.container {
		min-width:auto;
		max-width:auto;
		width: 75%;
	}
}