@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Arsenal:wght@400;700&family=Noto+Sans+TC:wght@400;500;700&display=swap');

:root {
	--bg-gray: #f2f2f4;
	--border-gray: #999;
	--border-gray1: #ccc;
	--title-gray: #43464a;
	--content-gray: #0F0F0F;
	--alert-red: #ff0000;
	--green: #7FBE25;
	--light-yellow: #fdbc42;
	--highlight-blue: #039be5;
	--brand-blue: #004c9e;
	--brand-blue1: #428ee0;
	--input-blue: #214c99;
	--pro-blue: #010a33;
	--pro-blue1: #06165c;
	--pro-blue2: #28387e;
	--sub-orange: #cf4228;
	--sub-purple: #5122aa;
	--sub-green: #6fc387;
}

@media screen and (max-width: 1199px) {
	:root {
		/* --header-height: 60px; */
	}
}

* {
	touch-action: manipulation;
	/* outline: 1px solid rgb(44, 109, 87); */
}

*,
::after,
::before {
	box-sizing: border-box;
}

.btn-disable {
	pointer-events: none;
	cursor: default;
}

.flex-block {
	display: flex;
	flex-wrap: wrap;
}

.touch-disable {
	touch-action: none;
}



body,
html {
	margin: 0px;
	padding: 0px;
	/* width: 100%;
	height: 100%; */
}

body {
	color: var(--content-gray);
	font-size: 16px;
	line-height: 26px;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	background-color: #332c28;

	/* font-weight: 500; */
	font-family: "Arsenal",
		"Noto Sans TC",
		微軟正黑體,
		Arial,
		Verdana,
		新細明體,
		system-ui,
		-apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
}

.font-title {
	font-family: "Source Serif Pro",
		"Noto Sans TC";
}

/* 透過CSS判斷是否為觸控螢幕 */
@media (any-hover: none) {
	body::before {
		content: 'hoverNone';
		display: none;
	}
}



/* @media screen and (max-width: 1199px) {

	html,
	body {
		min-width: 1200px;
	}
} */

@media screen and (max-width: 767px) {

	html,
	body {
		min-width: 100%;
		font-size: 16px;
		line-height: 30px;
	}
}

/* 20221208測試 */
body::after {
	content: 'pc';
	display: none;
}

@media screen and (max-width: 1199px) and (min-width: 768px) {
	body::after {
		content: 'moblie';
		display: none;
	}
}

@media screen and (max-width: 767px) {
	body::after {
		content: 'moblie';
		display: none;
	}
}

/* 20221208測試 */

/* container */
.container-fluid {
	width: 100%;
	padding: 0;
}

.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.index-inner-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

.html-container {
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 40px;
}

.common-padding {
	padding: 80px 0 100px;
}

@media screen and (max-width: 767px) {

	.container,
	.html-container,
	.index-inner-container {
		padding: 0 20px;
		max-width: 540px;
		/* margin: 0 auto; */
	}

	.common-padding {
		padding: 60px 0 80px;
	}
}

/* 字體相關設定 */
.bold {
	font-weight: bold;
}

.medium {
	font-weight: 500;
}

.semibold {
	font-weight: 600;
}



.center {
	text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
	/* font-weight: 500; */
}

h1 {
	font-size: 42px;
	line-height: 60px;
	letter-spacing: 0.4em;
}

h2 {
	font-size: 32px;
	line-height: 46px;
	letter-spacing: 0.08em;
}

h3 {
	font-size: 22px;
	line-height: 34px;
	letter-spacing: 0.08em;

}

h4 {
	font-size: 17px;
	line-height: 32px;
	letter-spacing: 0.15em;

}

p {
	font-size: 15px;
	line-height: 30px;
	letter-spacing: 0.15em;
}

/* p+p {
	font-size: 16px;
} */
.font-42 {
	font-size: 42px;
	line-height: 60px;
	letter-spacing: 0.4em;
}

.font-32 {
	font-size: 32px;
	line-height: 46px;
	letter-spacing: 0.08em;
}

.font-22 {
	font-size: 22px;
	line-height: 34px;
	letter-spacing: 0.08em;

}

.font-17 {
	font-size: 17px;
	line-height: 32px;
	letter-spacing: 0.15em;

}



.font-15 {
	font-size: 15px;
	line-height: 30px;
	letter-spacing: 0.15em;

}


a {
	text-decoration: none;
	/* font-size: 16px;
	line-height: 26px; */
}

a:hover,
a:focus {
	color: #F6CBA3;
}

a:active {
	opacity: 0.5;
}

@media screen and (max-width: 1199px) {
	h1 {
		font-size: 30px;
		line-height: 40px;
	}


	h2 {
		font-size: 26px;
		line-height: 36px;
	}

	h3 {
		font-size: 16px;
		line-height: 22px;
	}

	h4 {
		font-size: 16px;
		line-height: 22px;
	}

	p {
		font-size: 14px;
		line-height: 20px;
	}


	.font-32 {
		font-size: 26px;
		line-height: 36px;
	}

	.font-22 {
		font-size: 16px;
		line-height: 22px;

	}

	.font-17 {
		font-size: 16px;
		line-height: 22px;

	}

	.font-15 {
		font-size: 14px;
		line-height: 20px;

	}

}

/* color usage */
.bg-gray {
	color: var(--bg-gray);
}

.border-gray {
	color: var(--border-gray);
}

.title-gray {
	color: var(--title-gray);
}

.content-gray {
	color: var(--content-gray);
}

.alert-red {
	color: var(--alert-red);
}

.yellow {
	color: var(--green);
}

.light-yellow {
	color: var(--light-yellow);
}

.highlight-blue {
	color: var(--highlight-blue);
}

.brand-blue {
	color: var(--brand-blue);
}

.brand-blue1 {
	color: var(--brand-blue1);
}

.pro-blue {
	color: var(--pro-blue);
}

.pro-blue1 {
	color: var(--pro-blue1);
}

.pro-blue2 {
	color: var(--pro-blue2);
}

.sub-orange {
	color: var(--sub-orange);
}

.sub-purple {
	color: var(--sub-purple);
}

.sub-green {
	color: var(--sub-green);
}

.white {
	color: #fff;
}

.blue-bg {
	background-color: var(--brand-blue);
}

/* 圖片填滿自動補底色 */
.img-autofull {
	justify-content: center;
	background-color: #fff;
	display: flex;


}

.img-autofull img {
	width: auto;
	object-fit: contain;
}

/* .gray-bg {
	background-color: var(--bg-gray);
} */

/* color usage end */
ul,
ol {
	margin-bottom: 0;
}

/* img相關設定 */
img {
	border: none;
	max-width: 100%;
	max-height: 100%;
}

.img video,
.img img {
	width: 100%;
	height: 100%;
	object-position: center;
}

/* 圖片放大時的遮罩 */
.img-fit {
	overflow: hidden;
}

.img-fit video,
.img-fit img {
	object-fit: cover;
}

.img-contain img,
.img-contain video {
	object-fit: contain;
}

.padding-fit {
	--fit-padding: 56.25%;
	position: relative;
	padding-bottom: var(--fit-padding);
}

.padding-fit img,
.padding-fit iframe,
.padding-fit video {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 767px) {
	.m-padding-fit {
		--fit-padding: 56.25%;
		position: relative;
		padding-bottom: var(--fit-padding);
	}

	.m-padding-fit img,
	.m-padding-fit iframe,
	.m-padding-fit video {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}
}

/* hover後圖片放大 */
.hover-img-zoom {
	/* safari調整hover時圓角不見 */
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	z-index: 0;
}

.hover-img-zoom img {
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

.hover-img-zoom:hover img {
	transform: scale(1.2);
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
}

.bg-cover {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* input 或 ul li相關屬性清除 */
input[type="text"],
input[type="password"],
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/*select預設符號隱藏*/
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

select::-ms-expand {
	display: none;
}

select:focus {
	outline: none;
}

.no-ul,
.no-ul>li {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* =====================show hidden break point=========================== */
.hidden {
	display: none;
}

.show {
	display: block;
}

/* 全部隱藏 */
.is-hidden {
	display: none !important;
}

@media screen and (max-width: 1199px) {
	.show-pc {
		display: none !important;
	}
}

@media screen and (max-width:1199px) {

	/* pc出現、mb*/
	.hidden-tb {
		display: none !important;
	}
}

@media screen and (max-width:767px) {

	/* pc出現、mb*/
	.hidden-m {
		display: none !important;
	}
}

@media screen and (min-width: 1200px) {

	.hidden-pc,
	.nav>li.hidden-pc {
		display: none !important;
	}
}

@media screen and (min-width: 768px) {
	.show-m {
		display: none !important;
	}
}

@media screen and (max-width: 1360px) {

	/* 1280以下隱藏 footer斷點 */
	.show-1360 {
		display: none !important;
	}
}

@media screen and (min-width: 1360px) {
	.hidden-1360 {
		display: none !important;
	}
}

@media screen and (min-width: 1200px) {
	.show-1200 {
		display: none !important;
	}
}

html.noscroll {
	overflow: hidden;
}

body.noscroll {
	width: 100%;
	height: 100%;
	overflow: hidden !important;
	scrollbar-gutter: stable;
	/* position: fixed; */
}



@media screen and (max-width: 1199px) {

	/*.hidden_pc,*/
	.nav>li.hidden-pc {
		display: block !important;
	}

	.hidden-1200 {
		display: none !important;
	}
}

@media screen and (max-width: 767px) {
	.hidden-768 {
		display: none !important;
	}
}

/* utility class */
/* 常用margint-top */
.mt-40 {
	margin-top: 40px;
}

/* 清除max-height */
.no-max-height {
	max-height: none !important;
}

.common-title {
	color: var(--title-gray);
	font-weight: 500;
}

/*  */
.mt-16 {
	margin-top: 16px;
}

.mt-12 {
	margin-top: 12px;
}

.mt-24 {
	margin-top: 24px;
}

/* 非編輯器基礎的 common ul li */
ul.common-ul>li {
	position: relative;
	padding-left: 40px;
	font-size: 18px;
	line-height: 28px;
	color: var(--content-gray);
}

ul.common-ul>li>a {
	color: var(--content-gray);
}

ul.common-ul.white-type>li,
ul.common-ul.white-type>li>a {
	color: #fff;

}

/* tbc 12? 8? 20?*/
ul.common-ul>li+li {
	--li-margin-top: 10px;
	margin-top: var(--li-margin-top);
}

ul.common-ul.two-col>li+li {
	--li-margin-top: 0;
}

ul.common-ul>li::before {
	content: '';
	display: inline-block;
	position: absolute;
	top: 7px;
	left: 15px;
	width: 10px;
	height: 10px;
	background-color: var(--brand-blue);
	border-radius: 50%;
}

ul.common-ul.white-type>li::before {
	background-color: #fff;

}

@media screen and (max-width: 767px) {
	ul.common-ul>li::before {
		top: 6px;
	}
}

.text-clip {
	--text-line: 2;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--text-line);
	white-space: normal;
	display: -webkit-box;
	overflow: hidden;
}

@media screen and (max-width: 767px) {
	.text-clip.m-text-auto {
		max-height: none !important;
		height: auto !important;
		text-overflow: clip;
		-webkit-box-orient: inline-axis;
		-webkit-line-clamp: none;
		white-space: normal;
		display: block;
		overflow: visible;
	}
}

/* ==================== layout class ===================*/
/* ==================== layout class ===================*/
/* 內部排版 兩欄式 */
.two-col {
	--gap-block: 16px;
	--gap-inline: 32px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap-block) var(--gap-inline);
}

/* 內部排版 三欄式 */
.three-col {
	--gap-block: 32px;
	--gap-inline: 32px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap-block) var(--gap-inline);
}

/* 內部排版 四欄式 */
.four-col {
	--gap-block: 50px;
	--gap-inline: 27px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gap-block) var(--gap-inline);
}


.col-full {
	grid-column: 1 / -1;
}

@media screen and (max-width: 767px) {
	.two-col {
		--gap-block: 16px;
		--gap-inline: 0px;
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.three-col {
		--gap-block: 20px;
		--gap-inline: 0px;
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.four-col {
		--gap-block: 30px;
		--gap-inline: 0px;
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

}

/* ==================== layout class end ===================*/
/* ==================== layout class end ===================*/

/*  */
/*----------------------------------------   按鈕開始    ------------------------------*/
/*----------------------------------------   按鈕開始    ------------------------------*/

/*----------------------------------------   按鈕結束    ------------------------------*/
/*----------------------------------------   按鈕結束    ------------------------------*/



/* ========================
html-edit
========================== */
/* 基礎設定 */
.html-edit {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

/* .html-edit {
	width: 100%;
	overflow: hidden;
	max-width: 1120px;
	margin: auto;
} */

.html-edit ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.html-edit img {
	max-width: 100%;
	height: auto;
}

.html-edit table {
	table-layout: fixed;
	border-spacing: 0px;
	max-width: 100%;
}

.html-edit a {
	color: #F6CBA3;
	text-decoration: none;
}

.html-edit a:hover {
	color: #F6CBA3;
}

.html-edit p {
	font-size: 17px;
	line-height: 32px;
	letter-spacing: 0.04em;
	color: #fff;
}

.html-edit ul>li {
	position: relative;
	padding-left: 40px;
	font-size: 17px;
	line-height: 32px;
	color: #fff;
	letter-spacing: 0.04em;
	/* TBH */
	text-align: left;
}

.html-edit ul>li+li {
	margin-top: 16px;
}

.html-edit ul>li::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 9px;
	left: 11px;
	width: 12px;
	height: 12px;
	background-color: #F6CBA3;
	border-radius: 50%;
}

.html-edit ol {
	margin: 0;
	padding-left: 40px;
}

.html-edit ol>li {
	font-size: 17px;
	line-height: 32px;
	letter-spacing: 0.04em;
	color: #fff;
}



.html-edit ol>li::marker {
	color: #fff;
}



@media screen and (max-width: 1199px) {
	.html-edit p {
		font-size: 16px;
		line-height: 22px;
	}

	.html-edit ul>li,
	.html-edit ol>li {
		font-size: 16px;
		line-height: 22px;
	}

	.html-edit ul>li::before {
		top: 8px;
		width: 8px;
		height: 8px;
	}
}


/* template */

/* template 1 大標 */
.html-temp1 p {
	font-size: 26px;
	line-height: 36px;
	color: #F6CBA3;
	font-weight: 700;

}



.html-temp1 td {
	padding-bottom: 24px;
}

@media screen and (max-width: 767px) {
	.html-temp1 p {
		font-size: 19px;
		line-height: 27px;
	}

}

/* template 2 次副標 */
.html-temp2 p {
	font-size: 17px;
	line-height: 26px;
	color: #F6CBA3;
	font-weight: 700;
}

.html-temp2 td {
	padding-bottom: 17px;
}



/* template 4 左文右圖  + template 5 右文左圖*/
.html-temp3,
.html-temp4 {
	width: 100%;
}

.html-temp3>tbody>tr,
.html-temp4>tbody>tr {
	width: 100%;
}

/* .html-temp3>tbody>tr>.html-img-block,
.html-temp4>tbody>tr>.html-img-block {
	width: 500px;
} */

.html-temp4>tbody>tr>td,
.html-temp3>tbody>tr>td {
	vertical-align: top;
}

.html-temp3>tbody>tr>.html-img-block {
	padding-right: 16px;
	font-size: 0;
	line-height: 0;
}

.html-temp3>tbody>tr>.html-text-block {
	padding-left: 16px;

}

.html-temp4>tbody>tr>.html-img-block {
	padding-left: 16px;
	font-size: 0;
	line-height: 0;
}

.html-temp4>tbody>tr>.html-text-block {
	padding-right: 16px;
}

.html-temp3 tr>td>img,
.html-temp4 tr>td>img {
	width: 100%;
}

.html-temp3>tbody>tr>td>img+p,
.html-temp4>tbody>tr>td>img+p {
	padding-top: 16px;
}

/* .html-temp3>tbody>tr:last-child td,
.html-temp4>tbody>tr:last-child td,
.html-temp5>tbody>tr:last-child td {
	padding-bottom: 34px;
	line-height: 0;
} */

@media screen and (max-width: 767px) {

	.html-temp3,
	.html-temp4 {
		min-width: 100%;
	}

	.html-text-block>p:first-child {
		line-height: 0;
	}

	.html-temp3>tbody>tr>td,
	.html-temp4>tbody>tr>td {
		display: block;
		width: 100%;
	}

	.html-temp3>tbody>tr>.html-img-block,
	.html-temp4>tbody>tr>.html-img-block {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.html-temp3>tbody>tr>.html-img-block,
	.html-temp4>tbody>tr>.html-text-block {
		padding-bottom: 32px;
	}

	.html-temp3>tbody>tr>.html-text-block {
		padding: 0px;
	}

	/* .html-temp3>tbody>tr:last-child td,
	.html-temp4>tbody>tr:last-child td,
	.html-temp5>tbody>tr:last-child td {
		padding-bottom: 34px;
	} */

	/* .html-temp3>tbody>tr:last-child td:first-child,
	.html-temp4>tbody>tr:last-child td:first-child {
		padding-bottom: 0;
	} */
}

/* template 6  */
/* 一頁兩圖 */
.html-temp5 {
	min-width: 100%;
}

.html-temp5 tr td {
	width: 50%;
	vertical-align: top;
	padding-bottom: 0;
	font-size: 0;
	line-height: 0;
}


.html-temp5 tr>td>img {
	width: 100%;
}

.html-temp5 tr:first-child td:nth-child(1) {
	padding-right: 16px;
}

.html-temp5 tr:first-child td:nth-child(2) {
	padding-left: 16px;
}

.html-temp5 tr:first-child>td>p {
	padding-top: 16px;
}

@media screen and (max-width: 767px) {
	.html-temp5 tr td {
		width: 100%;
	}

	.html-temp5 tr:last-child>td {
		padding-bottom: 0;
	}

	.html-temp5 tr:first-child>td {
		display: block;
		width: 100%;
	}

	.html-temp5 tr:first-child td:nth-child(1) {
		padding-right: 0;
		padding-bottom: 30px;
	}

	.html-temp5 tr:first-child td:nth-child(2) {
		padding-left: 0;
	}




	/* .html-temp5 tr>td {
		text-align: center;
	} */

}

/* template 6  */
.html-temp6 {
	margin: 0 auto;
}

.html-temp6 tr:first-child>td>p {
	padding-top: 16px;
}

.html-temp6 tr td {

	font-size: 0;
	line-height: 0;
}


/* template 7  */
.html-edit table.html-temp7 {
	width: 100%;
	max-width: 890px;
	margin: auto;
}

.html-temp7 .temp-video-container {
	width: 100%;
	position: relative;
	overflow: hidden;
	height: 0;
	padding-bottom: 56.23%;
}

.html-temp7 .temp-video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* template 8  */
.html-temp8 td p.link-container {
	display: flex;
}

.html-temp8 td a {
	position: relative;
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0;
	line-height: 0;
}

.html-temp8 td a>img {
	width: 100%;
	object-position: center;
}

.html-temp8 td a+a {
	margin-left: 16px;
}

@media screen and (max-width: 767px) {
	.html-temp8 td a {
		width: 20px;
		height: 20px;
	}
}



/* 清除最後一個的間距 start*/

.html-edit>table:last-child>tbody>tr:last-child>td:last-child {
	padding-bottom: 0;
}

/* TBH */
/* .html-edit > table.html-temp7-table-container:last-child,
.html-edit > table.html-temp7-table-container:last-child {
	padding-bottom: 0;
	line-height: 0;
} */

.html-edit>table.html-temp3:last-child>tbody>tr:last-child td {
	padding-bottom: 0;
	line-height: 0;
}

.html-edit>table.html-temp4:last-child>tbody>tr:last-child td {
	padding-bottom: 0;
	line-height: 0;
}

.html-edit>table.html-temp7:last-child>tbody>tr:last-child td {
	padding-bottom: 0;
	line-height: 0;
}

.html-edit>table.html-temp7:last-child>tbody>tr:last-child td {
	padding-bottom: 0;
	line-height: 0;
}

.html-edit>table.html-temp5:last-child>tbody>tr:last-child td {
	padding-bottom: 0;
	line-height: 0;
}

.html-edit>table.html-temp5 tbody>tr:last-child td {
	padding-bottom: 0;
	line-height: 0;
}

/* 清除最後一個的間距 end*/
/* ========================
html-edit end
========================== */
/*-----Header start-----*/
#header-block {
	position: fixed;
	z-index: 990;
	background-image: linear-gradient(-180deg, #332c28 41.176259160715055%, rgba(51, 44, 40, 0.9) 72.04107597908782%, rgba(51, 44, 40, 0.55) 85.43524176819298%, rgba(51, 44, 40, 0) 99.41176259160706%);
	max-height: 130px;
	width: 100%;
	top: 0;
	opacity: 1;
	transition: opacity linear 0.5s;
}

/* 首頁第一屏不需要背景，其餘都需要 */
#header-block.no-background {
	background: transparent;
}

#header-block.no-scrolled {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}



/* 語系 */
.header-lang-title {
	color: #fff;
	position: relative;
}

.header-lang-title>p {
	position: relative;
	cursor: pointer;
	transition: all ease-out 0.3s;
	padding: 4px 8px;
	padding-bottom: 9px;
	padding-right: 16px;
}

.header-lang-title:hover::before {
	opacity: 1;
}

.header-lang-title:hover>p {
	color: #F6CBA3;
}

.header-lang-title:hover>p::before {
	opacity: 0;
}

.header-lang-title:hover>p::after {
	opacity: 1;
}


.header-lang-title:hover::before {
	opacity: 1;
}



.header-lang-title.active::before {
	opacity: 1;
}

.header-lang-title.active>p {
	color: #F6CBA3;

}

.header-lang-title.active>p::before {
	opacity: 0;
}

.header-lang-title.active>p::after {
	opacity: 1;
	transform: translateY(-50%) scaleY(-1);

}


.header-lang-title::before {
	content: '';
	display: block;
	position: absolute;
	background-color: #F6CBA3;
	transition: opacity ease-out 0.3s;
	bottom: 2px;
	left: 0;
	width: 100%;
	height: 1px;
	opacity: 0;
}

.header-lang-title>p::before {
	content: '';
	width: 10px;
	display: block;
	height: 6px;
	background-image: url('../images/common/header/ajoy-language-down-arrow.svg');

	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: opacity ease-out 0.3s;
}

.header-lang-title>p::after {
	content: '';
	width: 10px;
	display: block;
	height: 6px;
	background-image: url('../images/common/header/ajoy-language-down-arrow-hover.svg');
	opacity: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: opacity ease-out 0.3s;
}

.header-lang-title .lang-list {
	cursor: pointer;
	width: 100%;
	position: absolute;
	top: calc(100% + 5px);
	opacity: 0;
	left: 50%;
	transform: translateX(-50%);
	transition: opacity 0.8s;
	pointer-events: none;
	/* height: 48px; */
	z-index: 4;
	transition: opacity ease-out 0.3s;
}



.header-lang-title.active .lang-list {
	opacity: 1;
	pointer-events: auto;
}


.lang-list li {

	width: 100%;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	/* background-color: #FFFFFF; */
}

.lang-list li a {
	display: block;
	width: 100%;
	text-decoration: none;
	padding: 29px 0px 13px;
	color: #F6CBA3;
	text-align: center;
	transition: all 0.4s ease;
	position: relative;
}

.lang-list li a:hover {
	background-color: rgba(0, 0, 0, 0.2);
	padding: 21px 0px 21px;
}


.lang-list li a::before {
	content: '';
	display: block;
	position: absolute;
	background-color: #fff;
	transition: all ease-out 0.3s;
	bottom: 0px;
	left: 0;
	width: 100%;
	height: 1px;
	opacity: 1;
}

.lang-list li a:hover::before {
	background: linear-gradient(108.62deg, #E7C196 -6.12%, #FDEAD7 26.81%, #D29A72 68.71%, #AA7959 86.67%, #916549 101.64%, #885E44 110.62%, #8C634A 115.11%, #9A745B 121.09%, #B18F77 127.08%, #D0B49F 134.56%, #F8E4D1 142.05%, #FDEAD7 143.54%);
}

.lang-list li a:active {
	opacity: 0.5;
}

.lang-list li a:active::before {
	opacity: 0.5;
}




/* .lang-list li a:hover,
.lang-list li a:active {
	color: #FFFFFF;
} */



/* 滾動至下方的header */
.header-container {
	padding: 0 64px;
	position: relative;
	/* top: 69px; */
	margin: 0 auto;
	display: flex;
	max-width: 1832px;
	height: 130px;
}



.navbar {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

/*logo*/
.navbar-brand {
	width: 59px;
	height: 68px;
	display: block;
	padding: 0;
	z-index: 999;
	margin: 0;
	opacity: 0;
	position: fixed;
	top: 31px;
	left: calc((100% - 474px) / 2 + 205px);
	/* position: fixed; */
	/* position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%); */

}

.navbar-brand.is-animated {
	opacity: 1;
}

.navbar-brand.is-animated-end {
	transition: all linear 0.3s;
}


.navbar-brand img {
	display: block;
}

.navbar-brand .logo-a {
	/* position: absolute;
	left: 21px;
	top: 0; */
	position: fixed;
	width: 18px;
	height: 31px;
	top: 31px;
	left: calc((100% - 474px) / 2 + 229px);
}

.navbar-brand .logo-j {
	/* position: absolute;
	left: -2px;
	top: 35px; */
	position: fixed;
	top: 66px;
	left: calc((100% - 474px) / 2 + 206px);
	width: 16px;
	height: 33px;
}

.navbar-brand .logo-o {
	/* position: absolute;
	left: 18px;
	top: 40px; */
	position: fixed;
	top: 71px;
	left: calc((100% - 474px) / 2 + 225px);
	width: 26px;
	height: 25px;
}

.navbar-brand .logo-y {
	/* position: absolute;
	left: 42px;
	top: 35px; */
	position: fixed;
	width: 16px;
	height: 32px;
	top: 66px;
	left: calc((100% - 474px) / 2 + 250px);
}

/*--- 常駐區 ---*/



/*header MENU*/
.navbar {
	margin-bottom: 0;
}

.navbar-collapse {
	padding: 0;
}

.navbar-default {
	border: 0;
	background: transparent;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
	border: 0;

}

/* 清掉bs5 樣式 */
.buger-toggler {
	padding: 0;
	background-color: transparent;
	border: none;
	border-radius: 0;
	cursor: pointer;
}

.navbar {
	padding-top: 0;
	padding-bottom: 0;
}

.navbar-nav {
	flex-direction: row;
}

.header-menu {

	height: 100%;
	display: flex;
}

.navbar-default .navbar-nav>li,
.navbar-nav>li {
	margin-left: 0;
	margin-right: 0;
	position: relative;

}

.navbar-default .navbar-nav>li:nth-child(n+2) {
	margin-left: 16px;
}

.navbar-nav>li.active>a {
	background: linear-gradient(108.62deg, #E7C196 -6.12%, #FDEAD7 26.81%, #D29A72 68.71%, #AA7959 86.67%, #916549 101.64%, #885E44 110.62%, #8C634A 115.11%, #9A745B 121.09%, #B18F77 127.08%, #D0B49F 134.56%, #F8E4D1 142.05%, #FDEAD7 143.54%);

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;

}

.navbar-default .navbar-nav>li>a,
.navbar-nav>li>a {
	display: flex;
	color: #fff;
	/* padding: 20px 8px 20px; */
	position: relative;
	text-decoration: none;

	align-items: center;
	height: 100%;
	transition: all ease-out 0.3s;
}


.navbar-nav>li::before,
.header-lang-title-m::before {
	content: '';
	display: block;
	position: absolute;
	background: linear-gradient(108.62deg, #E7C196 -6.12%, #FDEAD7 26.81%, #D29A72 68.71%, #AA7959 86.67%, #916549 101.64%, #885E44 110.62%, #8C634A 115.11%, #9A745B 121.09%, #B18F77 127.08%, #D0B49F 134.56%, #F8E4D1 142.05%, #FDEAD7 143.54%);
	transition: all ease-out 0.3s;
	bottom: -5px;
	left: 0;
	width: 100%;
	height: 1px;
	opacity: 0;
	transform: scaleX(0);
}


.navbar-nav>li:hover>a {
	color: #F6CBA3;
	/* text-decoration: underline; */
}

.navbar-nav>li:hover::before {
	opacity: 1;
	transform: scaleX(1);

}

.navbar-nav>li>a:active {
	color: rgba(246, 203, 163, 0.5);
}

.navbar-nav>li>a:active::before {
	opacity: 0.5;
}


/*--- menu Lv2 ---*/






.common-menu {
	position: fixed;
	z-index: 999;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	/* padding: 40px 50; */
	border-radius: 0 0 50px 50px;
	overflow: hidden;
	max-width: 1160px;
	/* align-items: flex-start;
	flex-wrap: nowrap; */
}

.common-menu>.flex-block {
	/* align-items: flex-start; */
	flex-wrap: nowrap;
	min-height: 302px;
}




.common-menu .menu-lv2::before {
	content: "";
	display: block;
	position: absolute;
	right: 60px;
	bottom: 0;
	background-image: url('../images/common/leadgene-pc-pattern.webp');
	width: 195px;
	height: 226px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.common-menu .menu-lv2 .inner-menu-lv2 {
	width: 250px;
}

.common-menu .menu-lv2 .inner-menu-lv2:nth-child(n+2) {
	margin-left: 15px;
}


.common-menu .into .font-title {
	margin-bottom: 20px;
}


.lv2-pro-drop .menu-lv2-block,
.lv2-drop .common-menu {
	display: none;

	pointer-events: none;
}

.lv2-pro-drop .menu-lv2-block {
	z-index: -1;
}

/* .lv2-pro-drop:hover .menu-lv2-block,
.lv2-drop:hover .common-menu {
	opacity: 1;
	pointer-events: auto;
} */

.lv2-pro-drop.open .menu-lv2-block,
.lv2-drop.open .common-menu {
	/* opacity: 1; */
	pointer-events: auto;
}

.lv2-pro-drop:hover .menu-lv2-block {
	z-index: 0;
}







.icon-group {
	margin-left: auto;
	display: flex;
}




.right-icon-list {
	display: flex;
	align-items: center;
}

.right-icon-list>li+li {
	margin-left: 16px;
}

.right-icon-list>li {
	position: relative;
}



.gift-link {
	overflow: hidden;
	font-size: 0;
	line-height: 0;
}



/* 島嶼選物 */
.gift-link a {
	color: #F6CBA3;
	/* text-decoration: underline; */
	padding-left: 42px;
	display: inline-block;
	transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
	transform: translateX(calc(100% - 34px));
	line-height: 34px;
}



.gift-link a>.line {
	display: block;
	position: absolute;
	background: linear-gradient(108.62deg, #E7C196 -6.12%, #FDEAD7 26.81%, #D29A72 68.71%, #AA7959 86.67%, #916549 101.64%, #885E44 110.62%, #8C634A 115.11%, #9A745B 121.09%, #B18F77 127.08%, #D0B49F 134.56%, #F8E4D1 142.05%, #FDEAD7 143.54%);
	transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
	bottom: 2px;
	right: 0;
	width: calc(100% - 42px);
	height: 1px;
}

.gift-link a:hover {
	transform: translateX(0%);

}


.gift-link a:hover::before {
	left: 0;
	opacity: 0;
}

.gift-link a:hover::after {
	left: 0;
	opacity: 1;
}

.gift-link a:active {
	opacity: 0.5;

}

.gift-link a:active {
	transform: translateX(0%);

}

.gift-link a:active::before {
	left: 0;
	opacity: 0;
}

.gift-link a:active::after {
	left: 0;
	opacity: 1;
}




.gift-link a::before {
	background-image: url('../images/common/header/ajoy-icon-gift.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	display: block;
	width: 34px;
	height: 34px;
	transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}


.gift-link a::after {
	background-image: url('../images/common/header/ajoy-icon-gift-hover.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	display: block;
	width: 34px;
	height: 34px;
	transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
	opacity: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

/* 音樂 */
/* 20230901_Jared調整音樂播放樣式 */
.hover-article-animate {
	transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
}

.voice-controller {
	width: 34px;
	height: 34px;
	position: relative;
	cursor: pointer;
	overflow: hidden;
	transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
}

.voice-controller .play-music {
	opacity: 0;
	pointer-events: none;
}

.voice-controller.active .play-music {
	height: 34px;
	z-index: 2;
	opacity: 1;
}

.voice-controller.active .off-music {
	opacity: 0;
	z-index: 2;
}

.play-music,
.off-music {
	/* display: none; */
	/* opacity: 0; */
	position: absolute;
	width: 100%;
	height: 100%;
	transition: all cubic-bezier(0.25, 0.1, 0.25, 1.0) 0.15s;
	bottom: 0;
	color: #F6CBA3;
	padding-left: 42px;
	display: flex;
	align-items: center;
	/* width: 80px; */
}

.off-music {
	opacity: 1;
}

.play-music {
	height: 0;
}

.play-music::after,
.play-music::before,
.off-music::before,
.off-music::after {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	display: block;
	width: 34px;
	height: 34px;
	transition: all cubic-bezier(0.25, 0.1, 0.25, 1.0) 0.15s;
	position: absolute;
	left: 0;
	top: 0;
}

.play-music::after,
.off-music::after {
	opacity: 0;
}

.voice-controller:hover .play-music::before,
.voice-controller:hover .off-music::before {
	opacity: 0;
}

.voice-controller:hover .play-music::after,
.voice-controller:hover .off-music::after {
	opacity: 1;
}

.play-music::before {
	background-image: url('../images/common/header/ajoy-icon-sound_on.svg');
}

.play-music::after {
	background-image: url('../images/common/header/ajoy-icon-sound_on_hover.svg');
}

.off-music::before {
	background-image: url('../images/common/header/ajoy-icon-sound_off.svg');
}

.off-music::after {
	background-image: url('../images/common/header/ajoy-icon-sound_off_hover.svg');
}



@media screen and (max-width: 1199px) {
	.voice-controller.active .play-music {
		height: 26px;
		z-index: 2;
	}

	.navbar-default .navbar-nav>li:nth-child(n+2) {
		margin-left: 0;
	}

	.extra-link {
		padding: 16px;
		transition: all ease-out 1s;
		opacity: 0;
		transform: translateX(-100%);
	}

	/* 進場動畫 */
	.extra-link.is-animated {
		opacity: 1;
		transform: translateX(0%);
	}

	.extra-link>li+li {
		margin-left: 8px;
	}

	.gift-link a {
		position: relative;
		transform: translateX(0);
		line-height: 26px;
		padding-left: 26px;
		width: 26px;
		white-space: nowrap;
		overflow: hidden;
	}

	/* .gift-link a .iland {
		width: 0;
	} */

	.gift-link a:hover {
		padding-left: 34px;
		width: 100%;
	}

	.gift-link a>.line {
		width: calc(100% - 34px);
	}

	.gift-link a::before,
	.gift-link a::after {
		width: 26px;
		height: 26px;
	}

	.play-music::after,
	.play-music::before,
	.off-music::before,
	.off-music::after {
		width: 26px;
		height: 26px;
	}

	.play-music,
	.off-music {
		padding-left: 34px;
	}

	.play-music span,
	.off-music span {
		line-height: 26px;
	}

	.voice-controller {
		width: 26px;
		height: 26px;
	}

	.icon-group .cart-content {
		padding-right: 0px;
	}

	.navbar-nav {
		flex-wrap: wrap;
	}

	.header-container {
		padding: 0 16px;
		display: flex;
		justify-content: space-between;
		height: 48px;
	}

	/*logo*/
	.navbar-brand {
		width: 27px;
		height: 32px;
		top: 16px;
		left: calc((100% - 328px) / 2 + 150px);
		z-index: 1001;
	}

	.navbar-brand .logo-a {
		/* left: 10px;
		width: 9px;
		height: 15px; */
		width: 9px;
		height: 15px;
		top: 16px;
		left: calc((100% - 328px) / 2 + 160px);
	}

	.navbar-brand .logo-j {
		/* left: 0px;
		top: 17px;
		width: 7px;
		height: 15px; */
		width: 7px;
		height: 15px;
		top: 33px;
		left: calc((100% - 328px) / 2 + 150px);
	}

	.navbar-brand .logo-o {
		/* left: 9px;
		top: 19px;
		width: 12px;
		height: 12px; */
		width: 12px;
		height: 12px;
		top: 35px;
		left: calc((100% - 328px) / 2 + 158px);
	}

	.navbar-brand .logo-y {
		/* left: 20px;
		top: 17px;
		width: 7px;
		height: 15px; */
		width: 7px;
		height: 15px;
		top: 33px;
		left: calc((100% - 328px) / 2 + 170px);
	}


	.main-navbar {
		position: fixed;
		top: 8px;
		left: 0;
		opacity: 0;
		pointer-events: none;
		/* right: 0; */
		width: 100%;
		/* height: calc(100% - 56px); */
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		transition: opacity .6s ease-in;
		background: rgba(255, 255, 255, 0.05);
		box-shadow: 16px 16px 32px rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		/* Note: backdrop-filter has minimal browser support */

		border-radius: 8px;


		width: calc(100% - 16px);
		margin-left: 8px;
	}



	.open.main-navbar {
		opacity: 1;
		pointer-events: auto;
	}

	.main-navbar .reserve-now {
		margin-top: 64px;
		text-align: center;
		margin-bottom: 8px;
		position: static;
		width: 100%;
		height: auto;
		cursor: default;
		opacity: 1;
		display: block !important;
	}

	.main-navbar .reserve-now a {
		display: inline-block;
		width: 67px;
		height: 80px;
		transition: all ease-in-out 0.3s;
	}




	/* 進場動畫 */
	.main-navbar .reserve-now a.is-animated {
		opacity: 1;
	}

	.main-navbar .reserve-now a.is-animated:active {
		opacity: 0.5;
	}

	/* 離場動畫 */
	.main-navbar .reserve-now a.out-animated {
		opacity: 0;
		transform: translateX(100%);
	}

	#header-block {
		width: 100%;
	}



	.buger-toggler {
		border: 0;
		height: 55px;
	}



	.navbar-default .buger-toggler,
	.navbar-default .buger-toggler:hover,
	.navbar-default .buger-toggler:focus {
		background: transparent;
		outline: none;
		border: none;
		color: transparent;
		z-index: 2;
		margin-top: 12px;
	}



	.navbar {
		min-height: auto;
		z-index: 1001;
		position: static;
		order: -1;

	}



	/*--- Lv1 ---*/
	.navbar-default .navbar-nav>li,
	.navbar-nav>li {
		margin-right: 0;
		width: 100%;
		transition: all ease-out 0.3s;
		opacity: 0;
		/* transform: translateY(100%); */
	}

	.navbar-nav>li>a,
	.navbar-nav>li>span {
		padding: 16px;
		text-align: left;
		display: flex;
		position: relative;
		color: #fff;
		transition: all ease-out 0.3s;
		cursor: pointer;
		transform: translateY(100%);

	}


	.navbar-nav>li>a:hover,
	.navbar-nav>li>span:hover {
		color: #F6CBA3;
		background: rgba(0, 0, 0, 0.2);
		-webkit-text-fill-color: #F6CBA3;
		/* opacity: 0.8; */
		/* border-bottom: 0.5px solid rgba(255, 255, 255, 0.2); */
	}

	.navbar-nav>li>a:active {
		color: rgba(246, 203, 163, 0.5);
		background: rgba(0, 0, 0, 0.2);
		/* opacity: 0.8; */
	}

	.navbar-nav>li>a:active::before {
		opacity: 0.5;
	}


	.navbar-nav>li::before,
	.header-lang-title-m::before {
		bottom: 0;
		background-color: #fff;
		transform: scaleX(1);
		width: 0;
		opacity: 0;
	}

	/* 進場動畫 */
	.navbar-nav>li.is-animated {
		opacity: 1;
		/* transform: translateY(0%); */
	}

	.navbar-nav>li.is-animated>a,
	.navbar-nav>li.is-animated>span {
		transform: translateY(0%);

	}

	.navbar-nav>li.is-animated::before,
	.header-lang-title-m.is-animated::before {
		width: 100%;
		/* transition-delay: 0.3s; */
		opacity: 0.2;
	}

	/* .navbar-default .navbar-nav>li>a:hover::before {
		 background: linear-gradient(108.62deg, #E7C196 -6.12%, #FDEAD7 26.81%, #D29A72 68.71%, #AA7959 86.67%, #916549 101.64%, #885E44 110.62%, #8C634A 115.11%, #9A745B 121.09%, #B18F77 127.08%, #D0B49F 134.56%, #F8E4D1 142.05%, #FDEAD7 143.54%);
	} */
	.header-lang-title-m>span::before {
		content: '';
		width: 10px;
		display: block;
		height: 6px;
		background-image: url(../images/common/header/ajoy-language-down-arrow.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
		transition: opacity ease-out 0.3s;
	}

	.header-lang-title-m>span::after {
		content: '';
		width: 10px;
		display: block;
		height: 6px;
		background-image: url(../images/common/header/ajoy-language-down-arrow-hover.svg);
		opacity: 0;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
		transition: opacity ease-out 0.3s;
	}



	.header-lang-title-m:hover>span::before {
		opacity: 0;
	}

	.header-lang-title-m:hover>span::after {
		opacity: 1;
	}

	.header-lang-title-m.active>span::after {
		opacity: 0;
	}

	.header-lang-title-m.active>span::before {
		transform: translateY(-50%) scaleY(-1)
	}

	.header-lang-title-m.active:hover>span {
		color: #fff;
		opacity: 1;
		background: transparent;
	}

	.header-lang-title-m.active:hover>span::before {
		opacity: 1;
	}

	.header-lang-title-m .language-list {
		padding: 8px 16px 24px;
		display: none;
	}

	.header-lang-title-m .language-list a {
		color: #fff;
		font-size: 14px;
		line-height: 20px;
		letter-spacing: 0.04em;
		padding: 0 16px;
		text-align: center;
		position: relative;
		transition: color ease-out 0.3s;

	}

	.header-lang-title-m .language-list a:hover {
		color: #F6CBA3;
	}

	.header-lang-title-m .language-list a:active {
		color: rgba(246, 203, 163, 0.5);
	}

	.header-lang-title-m .language-list a:not(:last-child)::before {
		content: '';
		width: 1px;
		display: block;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		position: absolute;
		right: 0px;
		top: 0;
		background-color: #FFF;
	}

	.header-lang-title-m .language-list a:first-child {
		padding-left: 0;
	}





	/*mobile開合鈕*/
	.buger-toggler {
		width: 24px;
		height: 24px;
		position: relative;
	}



	/* 擴大點擊範圍 */
	.buger-toggler::after {
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		margin: -20px;
		padding: 20px;
		top: 12px;
		left: 12px;
	}

	.buger-toggler .icon-bar {
		height: 1px;
		display: block;
	}

	/* .navbar-default .buger-toggler .icon-bar {
		color: #C3D600;
	} */

	#m-menu-hamb span {
		display: block;
		position: absolute;
		width: 100%;

		background: #fff;
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: 0.6s ease-in-out;
		-moz-transition: 0.6s ease-in-out;
		-o-transition: 0.6s ease-in-out;
		transition: 0.6s ease-in-out;
	}

	.buger-toggler .icon-bar+.icon-bar {
		margin-top: 0;
	}

	#m-menu-hamb span:nth-child(1) {
		top: 5px;
		width: 24px;
	}

	#m-menu-hamb span:nth-child(2) {
		top: 8px;
		width: 21px;
	}

	#m-menu-hamb span:nth-child(3) {
		top: 11px;
		width: 18px;
	}

	#m-menu-hamb span:nth-child(4) {
		top: 14px;
		width: 15px;
	}

	#m-menu-hamb span:nth-child(5) {
		top: 17px;
		width: 12px;
	}

	#m-menu-hamb span:nth-child(6) {
		top: 20px;
		width: 9px;
	}


	#m-menu-hamb.open span:nth-child(1) {
		top: 12px;
		left: 0px;
		width: 24px;
		transform: rotate(45deg);
	}

	#m-menu-hamb.open span:nth-child(2) {
		top: 10px;
		left: 2px;
		width: 24px;
		transform: rotate(45deg);
	}

	#m-menu-hamb.open span:nth-child(3) {
		top: 5px;
		left: 11px;
		width: 11px;
		transform: rotate(-45deg);
	}

	#m-menu-hamb.open span:nth-child(4) {
		top: 7px;
		left: 12.5px;
		width: 11px;
		transform: rotate(-45deg);
	}

	#m-menu-hamb.open span:nth-child(5) {
		top: 15px;
		left: 2px;
		width: 9px;
		transform: rotate(-45deg);
	}

	#m-menu-hamb.open span:nth-child(6) {
		top: 17px;
		left: 4px;
		width: 9px;
		transform: rotate(-45deg);
	}


	/* 右側icon */
	/* .right-icon-list {
		padding: 20px 0 12px;
	} */

	.right-icon-list>li+li {
		margin-left: 0px;
	}

	.right-icon-list>li.reservation {
		margin-top: 12px;
	}

	.nav-icon {
		width: 24px;
		height: 24px;
	}

	.icon-group {
		margin-left: 0;
	}

	/* 手機板訂位 */
	.reservation {
		width: 24px;
		height: 24px;
		cursor: pointer;
		z-index: 1001;
		margin: 0;
	}

	.reservation>a {
		background-image: url('../images/common/header/ajoy-reservation.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		display: block;
		width: 100%;
		height: 100%;
		position: relative;

	}

	.reservation>a::before {
		content: '';
		display: block;
		background-image: url('../images/common/reserve/ajoy-btn-reserve-arrow.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		width: 17px;
		height: 7px;
		position: absolute;
		right: 0;
		bottom: 2px;
		transition: all ease-in-out 0.3s;
	}

	.reservation>a:hover::before {
		right: -5px;
	}

}


/*---Header end---*/

/* =================================================
gdpr
==================================================== */


/*---Footer start---*/
.footer-block {
	padding: 181px 64px 0px;
	background-color: #332c28;
	overflow: hidden;
	position: relative;
	z-index: 2;
}

.footer-block .footer-container {

	overflow: hidden;
	position: relative;
	padding: 128px;

	border-radius: 32px;

}

.footer-block .footer-container .gradient-mask {
	background: linear-gradient(180deg, rgba(101, 88, 79, 0) 0%, rgba(101, 88, 79, 0.3) 19.79%);
	background-blend-mode: multiply;
	filter: drop-shadow(32px 32px 64px rgba(0, 0, 0, 0.15));
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url('../images/index/section-footer/ajoy-footer-bg.svg');
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* transition: all ease-in-out 1s; */
	pointer-events: none;

}

.footer-block .footer-container .footer-pattern {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url('../images/index/section-footer/ajoy-footer-pattern.svg');
	position: absolute;
	width: 1132px;
	height: 1284px;
	left: -270px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	pointer-events: none;

	/* transition: all ease-in-out 1s; */
}



.footer-block .footer-container .top {
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	z-index: 2;
}




.reservation-meeting-footer {
	margin-top: 32px;
	/* width: 320px;
	height: 100px; */
	cursor: pointer;
	border: 1px solid #fff;
	text-align: left;
	background-color: transparent;
	transition: all ease-in-out 0.15s;
	cursor: pointer;
	padding: 32px 50px;
	width: 350px;
}

.reservation-meeting-footer a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

.read-container {
	display: inline-block;
	position: relative;
}

.read-more {


	display: inline-block;
	color: #fff;
}

.arrow-container {
	position: absolute;
	left: calc(100% + 20px);
	top: 50%;
	transform: translateY(-50%);
	width: 95px;
	height: 16px;
	transition: all ease-in-out 0.15s;
}

.white-line {
	background-color: #fff;
	transition: all ease-in-out 0.15s;
	display: block;
	width: 100%;
	height: 1px;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
}

.innerarrow {
	transition: all ease-in-out 0.15s;
	background-image: url(../images/index/section-footer/ajoy-arrow-long.svg);
	background-position: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
	width: 32px;
	height: 18px;
	position: absolute;
	top: -2px;
	left: calc(100% - 27px);
	z-index: 2;
}


/* .reservation-meeting-footer a:hover::before {
	opacity: 0;
}

.reservation-meeting-footer a:hover::after {
	opacity: 1;
} */
.reservation-meeting-footer:hover {
	border-style: solid;
	border-image: linear-gradient(108.62deg, #E7C196 -6.12%, #FDEAD7 26.81%, #D29A72 68.71%, #AA7959 86.67%, #916549 101.64%, #885E44 110.62%, #8C634A 115.11%, #9A745B 121.09%, #B18F77 127.08%, #D0B49F 134.56%, #F8E4D1 142.05%, #FDEAD7 143.54%);
	border-image-slice: 1;
	background-color: rgba(0, 0, 0, 0.3);
}

.reservation-meeting-footer:hover .arrow-container {
	width: 126px;
}

.reservation-meeting-footer a:active {
	opacity: 0.5;
}



/* .reservation-meeting-footer a::before {
	transition: opacity .15s ease-in-out;
	transition: opacity .1s ease-in;
	background-image: url(../images/index/section-footer/ajoy-reservation.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.reservation-meeting-footer a::after {
	transition: opacity .15s ease-in-out;
	background-image: url(../images/index/section-footer/ajoy-reservation-hover.svg);
	background-position: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
}

.reservation-meeting-footer .font-22 {
	position: absolute;
	top: 36px;
	left: 50px;
	color: #fff;
	z-index: 2;
	transition: left .15s ease-in-out;
}

.reservation-meeting-footer .arrow {
	transition: all .15s ease-in-out;
	background-image: url(../images/index/section-footer/ajoy-arrow-long.svg);
	background-position: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	display: block;
	width: 32px;
	height: 18px;
	position: absolute;
	left: 243px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.reservation-meeting-footer .white-line {
	background-color: white;
	transition: all .15s ease-in-out;
	content: '';
	display: block;
	width: 95px;
	height: 1px;
	position: absolute;
	left: 175px;
	bottom: 41px;
	opacity: 0.6;
	z-index: 1;
}

.reservation-meeting-footer a:hover .arrow {
	left: 259px;

}

.reservation-meeting-footer a:hover .white-line {
	width: 110px;
} */

.footer-down {
	position: relative;
	margin-top: 128px;
	color: #C4C3C7;
	z-index: 2;
}

.footer-down .has-icon {
	position: relative;
	display: flex;
	align-items: center;
}

.footer-down .has-icon+.has-icon {
	margin-left: 32px;
}

.footer-down .has-icon>a {
	color: #F6CBA3;

}

.footer-down .has-icon>a,
.footer-down .has-icon>span {
	padding-left: 40px;
	letter-spacing: 0.08em;
	display: inline-block;
	height: 100%;
}

.footer-down .has-icon>span {
	color: #F6CBA3;
}

.footer-down .has-icon>a span {
	color: #C4C3C7;
}

.footer-down .has-icon::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	background-repeat: no-repeat;
	background-position: right;
	width: 32px;
	height: 32px;
	top: 50%;
	transform: translateY(-50%);
	background-size: contain;
	pointer-events: none;
}

.footer-down .map::before {
	background-image: url('../images/index/section-footer/ajoy-icon-location.svg');

}

.footer-down .phone::before {
	background-image: url('../images/index/section-footer/ajoy-icon-phone.svg');

}

.footer-social-icon {
	position: relative;
	width: 32px;
	height: 32px;
	display: inline-block;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
}

.footer-down .hover-item {
	position: absolute;
	bottom: 0;
	color: #F6CBA3;
	padding-left: 40px;
	display: flex;
	align-items: center;
	background: none;
}

.footer-down .hover-item span {
	display: inline-block;
	white-space: nowrap;
}

.footer-block .releated-brands {
	margin-right: 100px;
}

.footer-social-icon+.footer-social-icon {
	margin-left: 16px;
}

.footer-social-icon>span:not(.hover-item) {
	display: block;
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 32px;
	height: 32px;
	background-position: center bottom;
	background-size: contain;
	background-repeat: no-repeat;
	transition: 0.3s ease;
}

.footer-social-icon>span:nth-child(2) {
	opacity: 0;
}


.footer-social-icon:hover>span:first-child {
	opacity: 0;
}

.footer-social-icon:hover>span:nth-child(2) {
	opacity: 1;
}

.footer-social-icon:active>span:nth-child(2) {
	opacity: 0.5;
}

.footer-block .right-block {
	width: 150px;
}

.down-outerlink {
	margin-top: 16px;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

.down-outerlink .releated-brands ul li {
	display: flex;
	align-items: center;
	height: 42px;
}

.down-outerlink .releated-brands ul a {
	color: #C4C3C7;
	transition: color ease-in 0.15s;
	padding-right: 35px;
	/* padding: 0 17.5px; */
	text-align: center;
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
}

.down-outerlink .releated-brands ul a::after {
	content: '';
	display: block;
	position: absolute;
	background: linear-gradient(108.62deg, #E7C196 -6.12%, #FDEAD7 26.81%, #D29A72 68.71%, #AA7959 86.67%, #916549 101.64%, #885E44 110.62%, #8C634A 115.11%, #9A745B 121.09%, #B18F77 127.08%, #D0B49F 134.56%, #F8E4D1 142.05%, #FDEAD7 143.54%);
	transition: all ease-out 0.3s;
	bottom: 3px;
	left: 0;
	width: calc(100% - 35px);
	height: 1px;
	opacity: 0;
	transform: scaleX(0);
}

.down-outerlink .releated-brands ul li:nth-child(2) a {
	padding-left: 17.5px;
}

.down-outerlink .releated-brands ul li:nth-child(2) a::after {
	width: calc(100% - 52.5px);
	left: 17.5px;
}


.down-outerlink .releated-brands ul li:not(:last-child, :first-child) a::before {
	content: '';
	width: 3px;
	display: inline-block;
	height: 3px;
	position: absolute;
	right: 17.5px;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: #FFF;
}

.down-outerlink .releated-brands ul a:hover {
	color: #F6CBA3;
}

.down-outerlink .releated-brands ul a:hover::after {
	opacity: 1;
	transform: scaleX(1);
}

.footer-block .bottom-container {
	color: #C4C3C7;
	padding: 36px 0 42px;
	justify-content: center;
	align-items: center;
}

.footer-block .bottom-container .link-container a,
.footer-block .bottom-container .link-container span {
	color: #C4C3C7;
	padding: 0 16px;
	text-align: center;
	position: relative;
	transition: color ease-in 0.15s;
	display: inline-block;
}


.footer-block .bottom-container .link-container a::after {
	content: '';
	display: block;
	position: absolute;
	background: linear-gradient(108.62deg, #E7C196 -6.12%, #FDEAD7 26.81%, #D29A72 68.71%, #AA7959 86.67%, #916549 101.64%, #885E44 110.62%, #8C634A 115.11%, #9A745B 121.09%, #B18F77 127.08%, #D0B49F 134.56%, #F8E4D1 142.05%, #FDEAD7 143.54%);
	transition: all ease-out 0.3s;
	bottom: -5px;
	left: 16px;
	width: calc(100% - 32px);
	height: 1px;
	opacity: 0;
	transform: scaleX(0);
}

.footer-block .bottom-container .link-container a:hover {
	color: #F6CBA3;
}

.footer-block .bottom-container .link-container a:hover::after {
	opacity: 1;
	transform: scaleX(1);
}

.footer-block .bottom-container .link-container a::before {
	content: '';
	width: 1px;
	display: block;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: absolute;
	right: 0px;
	top: 0;
	background-color: #FFF;
}

.footer-block .bottom-container .copyright {
	margin-left: 16px;
}


/* 動畫設定 */
[data-aos="all-you-can-animate"] {
	/* 預設的樣式 */
	opacity: 0;
	transform: translateX(-176.785%);
	transition-timing-function: ease-in-out;
	transition-duration: 1300ms;

}

/* 觸發時的樣式 */
[data-aos="all-you-can-animate"].aos-animate {
	opacity: 1;
	transform: translateX(0);
}

/* 動畫設定 */
[data-aos="seperendity-animate"] {
	/* 預設的樣式 */
	opacity: 0;
	transform: translateX(-176.785%);
	transition-timing-function: ease-in-out;
	transition-duration: 1300ms;

}

/* 觸發時的樣式 */
[data-aos="seperendity-animate"].aos-animate {
	opacity: 1;
	transform: translateX(0);
}


/* 動畫設定 */
[data-aos="logo-animate"] {
	/* 預設的樣式 */
	opacity: 0;
	transform: translateX(180.67%);
	transition-timing-function: ease-in-out;
	transition-duration: 1300ms;

}

/* 觸發時的樣式 */
[data-aos="logo-animate"].aos-animate {
	opacity: 1;
	transform: translateX(0);
}

/* 動畫設定 */
[data-aos="social-link-animate"] {
	/* 預設的樣式 */
	opacity: 0;
	transform: translateX(336.25%);
	transition-timing-function: ease-in-out;
	transition-duration: 1300ms;

}

/* 觸發時的樣式 */
[data-aos="social-link-animate"].aos-animate {
	opacity: 1;
	transform: translateX(0);
}



/* 動畫設定 */
[data-aos="menu-animate"] {
	/* 預設的樣式 */
	opacity: 0;
	transform: translateX(-83.86%);
	transition-timing-function: ease-in-out;
	transition-duration: 1300ms;
}

/* 觸發時的樣式 */
[data-aos="menu-animate"].aos-animate {
	opacity: 1;
	transform: translateX(0);
}

/* 動畫設定 */
[data-aos="icon-animate"] {
	/* 預設的樣式 */
	opacity: 0;
	transform: translateX(-83.86%);
	transition-timing-function: ease-in-out;
	transition-duration: 1300ms;
}

/* 觸發時的樣式 */
[data-aos="icon-animate"].aos-animate {
	opacity: 1;
	transform: translateX(0);
}


/* 動畫設定 */
[data-aos="bottom-animate"] {
	/* 預設的樣式 */
	opacity: 0;
	transform: translateY(597.91%);
	transition-timing-function: ease-in-out;
	transition-duration: 1300ms;
}

/* 觸發時的樣式 */
[data-aos="bottom-animate"].aos-animate {
	opacity: 1;
	transform: translateY(0);
}

/* 動畫設定 */
.footer-block .footer-container .footer-pattern[data-aos="line-animate"] {
	transform: translateY(18.55%);
	top: 0;
	opacity: 0;
	transition-timing-function: ease-in-out;
	transition-duration: 1300ms;
}

.footer-block .footer-container .footer-pattern[data-aos="line-animate"].aos-animate {
	opacity: 1;
	top: 50%;
	transform: translateY(-50%);
}


@media screen and (max-width: 1440px) {
	.reservation-meeting-footer .font-22 {
		font-size: 22px;
		line-height: 22px;
	}




	.footer-block .right-block {
		width: 13%;
	}

	.reservation-meeting-footer .innerarrow {
		/* left: 173px; */
		width: 26px;
		height: 22px;
		left: calc(100% - 23px);
	}

	.arrow-container {
		width: 58px;
	}

	.reservation-meeting-footer:hover .arrow-container {
		width: 105px;
	}

	.reservation-meeting-footer {
		width: 300px;
		padding: 32px;
	}

	.footer-block .footer-container .top .left-block {
		width: 26%;
	}



	.footer-social-icon {
		width: 24px !important;
		height: 24px;
	}

	.footer-social-icon>span:not(.hover-item) {
		width: 24px;
		height: 24px;
	}

	.footer-down .hover-item {
		padding-left: 32px;
	}

	.footer-down .hover-item span {
		line-height: 24px;
	}

	.footer-block .footer-container {
		padding: 72px 90px;
	}
}

@media screen and (max-width: 1199px) {
	.footer-down .has-icon+.has-icon {
		margin-left: 8px;
	}

	.footer-block {
		padding: 0px 32px 0px;

	}

	.footer-block .footer-container {

		overflow: hidden;
		position: relative;
		padding: 32px;

		border-radius: 16px;

	}

	.footer-block .right-block {
		width: 77px;
	}


	.footer-block .footer-container .footer-pattern {


		width: 522px;
		height: 592px;
		left: 332px;

		/* transition: all ease-in-out 1s; */
	}

	.footer-block .right-block {
		width: 78px;
		height: 128px;
	}


	.arrow-container {
		width: 49px;
	}

	.reservation-meeting-footer:hover .arrow-container {
		width: 105px;
	}

	.reservation-meeting-footer {
		width: 255px;
		padding: 16px;
		margin-top: 16px;

	}

	.reservation-meeting-footer .innerarrow {
		width: 17px;
		height: 10px;
		background-image: url(../images/index/section-footer/ajoy-arrow-short.svg);
		left: calc(100% - 14px);
		top: 6px;
	}



	.footer-down .has-icon>a,
	.footer-down .has-icon>a span,
	.footer-down .has-icon>span {
		font-size: 14px;
		line-height: 20px;
	}

	.reservation-meeting-footer .font-22 {
		font-size: 16px;
		line-height: 22px;
	}

	/* .reservation-meeting-footer a:hover .arrow {
		left: 192px;

	} */

	/* .reservation-meeting-footer a:hover .white-line {
		width: 105px;
	} */


	.footer-down {
		margin-top: 32px;

	}


	/* .footer-down .has-icon+.has-icon {
		margin-left: 0px;
		margin-top: 8px;
	} */

	/* .footer-down .has-icon {
		width: 100%;
	} */

	.footer-down .has-icon>a,
	.footer-down .has-icon>span {
		padding-left: 28px;
	}


	.footer-down .has-icon::before {

		width: 20px;
		height: 20px;

	}



	.footer-social-icon {
		width: 20px !important;
		height: 20px;

	}

	.footer-social-icon>span:not(.hover-item) {
		width: 20px;
		height: 20px;
	}

	.footer-down .hover-item {
		padding-left: 28px;
	}

	.footer-block .releated-brands {
		margin-right: 20px;
		max-width: 277px;
		width: 100%;
	}

	.footer-block .social-icon {
		top: 0;
	}

	.footer-block .releated-brands>.title {
		/* width: 100%; */
		padding-right: 16px;
		position: relative;
		cursor: pointer;
		color: #C4C3C7;
	}

	.footer-block .releated-brands>.title::before {
		content: '';
		width: 10px;
		display: block;
		height: 6px;
		background-image: url(../images/common/header/ajoy-language-down-arrow.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		/* transition: opacity ease-out 0.3s; */
	}

	.footer-block .releated-brands.active>.title::before {
		transform: translateY(-50%) scaleY(-1);
	}

	.footer-block .link-outer-container {
		width: 100%;
		display: none;
	}

	.down-outerlink .releated-brands ul {
		width: 100%;
		margin-top: 16px;
	}

	.down-outerlink {
		margin-top: 32px;

	}



	.down-outerlink .releated-brands ul li {
		display: flex;
		align-items: center;
		height: 26px;
	}

	.down-outerlink .releated-brands ul a {
		padding-right: 18px;
		font-size: 13px;
		line-height: 18px;
	}

	.down-outerlink .releated-brands ul a::after {
		width: calc(100% - 18px);
	}

	.down-outerlink .releated-brands ul li:nth-child(2) a {
		padding-left: 0;
	}

	.down-outerlink .releated-brands ul li:nth-child(2) a::after {
		width: calc(100% - 18px);
		left: 0;
	}

	.down-outerlink .releated-brands ul li:not(:last-child, :first-child) a::before {
		width: 2px;
		height: 2px;
		right: 9px;
	}


	.footer-block .bottom-container {
		padding: 16px 0 24px;
		text-align: center;
	}

	.footer-block .bottom-container .link-container {
		width: 100%;
	}

	.footer-block .bottom-container .copyright {
		margin-left: 0;
		margin-top: 8px;
		width: 100%;
	}
}

@media screen and (max-width: 767px) {

	.footer-block {
		padding: 0px 16px 0px;

	}

	.footer-block .footer-container {


		padding: 24px;

		border-radius: 8px;

	}


	.footer-block .footer-container .footer-pattern {


		width: 522px;
		height: 592px;
		left: 72px;

		/* transition: all ease-in-out 1s; */
	}

	.footer-block .right-block {
		width: 78px;
		height: 128px;
	}

	/* .reservation-meeting-footer {
		width: 100%;

	} */
	.footer-down {
		margin-top: 16px;
	}

	.footer-social-icon+.footer-social-icon {
		margin-left: 0px;
	}

	.footer-social-icon:not(:last-child) {
		margin-right: 16px;
	}

	.footer-social-icon {
		height: 36px;
	}

	.footer-social-icon span {
		max-height: 20px;
	}

	.footer-block .footer-container .top .left-block {
		width: auto;
	}


	.footer-block .releated-brands {
		margin-right: 20px;
		max-width: 277px;
		width: 100%;
	}

	.footer-down .has-icon>a,
	.footer-down .has-icon>a span,
	.footer-down .has-icon>span {
		font-size: 12px;
		line-height: 18px;
	}

	.footer-block .releated-brands>.title {
		font-size: 12px;
		line-height: 18px;
	}

	.footer-block .bottom-container .link-container a {
		font-size: 12px;
		line-height: 18px;
	}


	.footer-block .link-outer-container {
		width: 100%;
		display: none;
	}

	.down-outerlink .releated-brands ul {
		width: 100%;
		margin-top: 16px;
	}


	.footer-block .bottom-container {
		padding: 16px 0 24px;
	}


	.footer-block .bottom-container .link-container a {
		padding: 0 8px;
	}

	.footer-block .bottom-container .link-container a::after {
		width: calc(100% - 16px);
		left: 8px;
	}

	/* 動畫設定 */
	[data-aos="all-you-can-animate"] {
		/* 預設的樣式 */
		transform: translateY(371.43%);


	}

	/* 觸發時的樣式 */
	[data-aos="all-you-can-animate"].aos-animate {
		transform: translateY(0);
	}

	/* 動畫設定 */
	[data-aos="seperendity-animate"] {
		transform: translateY(338.78%);
	}

	/* 觸發時的樣式 */
	[data-aos="seperendity-animate"].aos-animate {
		transform: translateY(0);
	}




	/* 動畫設定 */
	[data-aos="logo-animate"] {
		/* 預設的樣式 */
		transform: translateX(-371.43%);
	}

	/* 觸發時的樣式 */
	[data-aos="logo-animate"].aos-animate {
		transform: translateX(0);
	}



	/* 動畫設定 */
	[data-aos="icon-animate"] {
		/* 預設的樣式 */
		transform: translateY(340.82%);

	}

	/* 觸發時的樣式 */
	[data-aos="icon-animate"].aos-animate {
		transform: translateY(0);
	}

	/* 動畫設定 */
	[data-aos="menu-animate"] {
		transform: translateY(1295%);

	}

	/* 觸發時的樣式 */
	[data-aos="menu-animate"].aos-animate {
		transform: translateY(0);
	}

	/* 動畫設定 */
	[data-aos="bottom-animate"] {
		transform: translateY(95.23%);
	}

	/* 觸發時的樣式 */
	[data-aos="bottom-animate"].aos-animate {
		transform: translateY(0);
	}

	/* 動畫設定 */
	[data-aos="social-link-animate"] {
		/* 預設的樣式 */

		transform: translateX(371.42%);

	}

	/* 觸發時的樣式 */
	[data-aos="social-link-animate"].aos-animate {
		transform: translateX(0);
	}


	/* 動畫設定 */
	.footer-block .footer-container .footer-pattern[data-aos="line-animate"] {
		transform: translateY(17.91%);
	}

	/* 觸發時的樣式 */
	.footer-block .footer-container .footer-pattern[data-aos="line-animate"].aos-animate {
		transform: translateY(-50%);
	}

	/* 動畫設定 */
	[data-aos="mask-animate"] {
		opacity: 0;
		transition-timing-function: ease-in-out;
		transition-duration: 1000ms;
		transform: translateY(95.23%);
	}

	/* 觸發時的樣式 */
	[data-aos="mask-animate"].aos-animate {
		opacity: 1;
		transform: translateY(0);
	}

}

/*立即訂位*/
.reservation-meeting {
	position: fixed;
	z-index: 101;
	/* 20250818 Tina AI智能客服 */
	/* width: 96px;
	height: 115px; */
	width: 100px;
	height: 100px;
	bottom: 32px;
	right: 34px;
	cursor: pointer;
	opacity: 0;
	transition: opacity linear 0.2s;
}

.reservation-meeting.is-animated {
	opacity: 1;
}


.reservation-meeting a:hover::before {
	opacity: 0;
}

.reservation-meeting a:hover::after {
	opacity: 1;
}

.reservation-meeting a:active {
	opacity: 0.5;
}


.reservation-meeting a:hover .arrow {
	left: 74px;
}

.reservation-meeting a:hover .white-line {
	width: 25px;
}

.reservation-meeting a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

/* 20250818 Tina AI智能客服 */
/* .reservation-meeting a::before {
	-webkit-transition: opacity .1s ease-in;
	transition: opacity .1s ease-in;
	background-image: url(../images/common/reserve/ajoy-btn-reserve.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.reservation-meeting a::after {
	-webkit-transition: opacity .1s ease-in;
	transition: opacity .1s ease-in;
	background-image: url(../images/common/reserve/ajoy-btn-reserve-hover.svg);
	background-position: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
} */

.reservation-meeting .font-17 {
	position: absolute;
	top: 29px;
	left: 15px;
	color: #fff;
	z-index: 2;
	font-size: 17px;
	line-height: 28px;
}

.reservation-meeting .arrow {
	transition: left .1s ease-in;
	background-image: url(../images/common/reserve/ajoy-common-reserve-arrow.svg);
	background-position: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	display: block;
	width: 11px;
	height: 7px;
	position: absolute;
	left: 67px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.reservation-meeting .white-line {
	background-color: white;
	transition: all .1s ease-in;
	content: '';
	display: block;
	width: 17px;
	height: 1px;
	position: absolute;
	left: 58px;
	top: 60px;
	opacity: 0.6;
	z-index: 1;
}

/* 20250818 Tina AI智能客服 */
.reservation-meeting .ai_cs{
	background: url(../images/index/ajoy_aics.png) no-repeat center center;
    background-size: cover;
}

@media screen and (max-width: 1199px) {
	.reservation-meeting {
		/* 20250818 Tina AI智能客服 */
		/* width: 67px;
		height: 80px; */
		width: 80px;
		height: 80px;
		bottom: 16px;
		right: 16px;
	}


	.reservation-meeting .font-17 {
		top: 20px;
		left: 8px;
		font-size: 14px;
		line-height: 20px;
		letter-spacing: 0.1em;

	}

	.reservation-meeting .arrow {
		left: 51px;
	}

	.reservation-meeting .white-line {
		left: 42px;
		top: 42px;
	}

	.reservation-meeting a:hover .white-line {
		width: 22px;
	}

	.reservation-meeting a:hover .arrow {
		left: 54px
	}
}

@media screen and (max-width: 767px) {
	.reservation-meeting {
		/* display: none !important; */
	}
}

/* 20230907_Jared新增 */
.panoramic-view {
	margin-top: 120px;
	height: calc((var(--vh, 1vh) * 100) - 120px);
	position: relative;
	width: 100%;
}

.panoramic-view iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

@media screen and (max-width: 1199px) {
	.panoramic-view {
		margin-top: 60px;
		height: calc((var(--vh, 1vh) * 100) - 60px);
	}


}


@media screen and (max-width: 767px) {
	.panoramic-view {
		margin-top: 36px;
		height: calc((var(--vh, 1vh) * 100) - 36px);
	}

}