@charset "utf-8";


	html * {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	html {
		scroll-behavior: smooth;
	}

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

	body,
	html {
		height: 100%;
		overflow: hidden;
	}

	body {
		font-family: Arial, 'Noto Sans TC', "微軟正黑體";
		font-style: normal;
		color: #000;
		margin: 0px;
		line-height: 170%;
		background-color: #313131;
		-webkit-text-size-adjust: none;
		overflow-x: hidden;
		width: 100%;
	}
	/*文字反選顏色*/

	::selection {
		background: #6b2740;
		color: #fff;
	}

	::-moz-selection {
		background: #6b2740;
		color: #fff;
	}

	img::selection {
		background: transparent;
	}

	img::-moz-selection {
		background: transparent;
	}




	a {
		text-decoration: none;
		cursor: pointer;
		position: relative;
		transition: 500ms;
	}

	a:hover {
		text-decoration: none;
		-webkit-transition: 500ms;
		transition: 500ms;
	}




	.div_close {
		display: none!important;
	}
	/*通用全站都有的寫法-會影響到手機版輪播*/

	@media (min-width: 851px) {
		*:link,
		*:visited,
		*:hover,
		*:active,
		*:focus {
			-webkit-transition: color .25s linear, background-color .25s linear, border-color .25s linear, padding .16s linear, filter .16s linear, opacity .16s linear, transform .16s linear;
			transition: color .25s linear, background-color .25s linear, border-color .25s linear, padding .16s linear, filter .16s linear, opacity .16s linear, transform .16s linear;
		}
	}
	/*文字顏色、字體大小*/

	body,
	input,
	button {}

	img {
		display: block;
		width: 100%;
	}

	h2,
	.btn,
	.btn2 {
		font-size: 24px;
	}

	p {
		font-size: 18px;
		line-height: 150%;
	}

	.txt,
	.video,
	.btn,
	.box,
	.map {
		position: fixed;
	}

	.map,
	.txt {
		right: 3%;
	}

	.map {

		width: 182px;
		bottom: 5%;
		z-index: 2;
	}

	button,
	.btn {
		cursor: pointer;
	}

	.btn {
		color: #fff;
		text-align: center;
		border-radius: 5000px;
		padding: 1vw 0;
		width: 276px;
		background: linear-gradient(180deg, #e8b46d 0%, #bd9359 100%);
		border: 1px solid rgba(255, 255, 255, 0.4);
		z-index: 3;
		left: 50%;
		top: 80%;
		transform: translateX(-50%);
		position: absolute;
		animation: glowPulse 2s infinite;
		overflow: visible;
		box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
	}
	/* 加入擴散線圈動畫 */
	/*.btn::before,
.btn::after {
	content: '';
	position: absolute;
	top: -15%;
	left: 0;
	width: 100%;
	height: 130%;
	border: 2px solid rgba(255, 255, 255, 0.6);
	border-radius: 5000px;
	transform-origin: center center;
	z-index: -1;
}

.btn::before {
	animation: ringPulse 1.8s infinite ease-out;
}

.btn::after {
	animation: ringPulse 1.8s infinite ease-out;
	animation-delay: 0.9s;
}*/

	@keyframes glowPulse {
		0% {
			box-shadow: 0 0 10px rgba(255, 255, 255, 0), 0 0 10px rgba(255, 255, 255, 0), 0 0 10px rgba(255, 255, 255, 0);
		}
		50% {
			box-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1);
		}
		100% {
			box-shadow: 0 0 10px rgba(255, 255, 255, 0), 0 0 10px rgba(255, 255, 255, 0), 0 0 10px rgba(255, 255, 255, 0);
		}
	}

	@keyframes ringPulse {
		0% {
			transform: scale(0.9);
			opacity: 0.8;
		}
		100% {
			transform: scale(1.5);
			opacity: 0;
		}
	}

	.btn2 {
		color: #E9B56D;
		text-align: center;
		width: 160px;
		height: 160px;
		line-height: 160px;
		border: 2px solid #E9B56D;
		border-radius: 5000px;
		position: absolute;
		z-index: 3;
		overflow: visible;
		box-shadow: 0 0 20px rgba(233, 181, 109, 0.5);
		/* 微光暈 */
		animation: glowFlicker 2s ease-in-out infinite;
	}
	/* 第一圈擴散 */

	.btn2::before,
	.btn2::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 2px solid #E9B56D;
		border-radius: 50%;
		transform-origin: center center;
		z-index: -1;
	}

	.btn2::before {
		animation: ringPulse 1.8s infinite ease-out;
	}

	.btn2::after {
		animation: ringPulse 1.8s infinite ease-out;
		animation-delay: 0.9s;
		/* 第二圈延遲一半時間 */
	}
	/* 發光閃爍動畫 */

	@keyframes glowFlicker {
		0%,
		100% {
			box-shadow: 0 0 10px rgba(233, 181, 109, 0.3);
		}
		50% {
			box-shadow: 0 0 25px rgba(233, 181, 109, 0.8);
		}
	}

	#btn_s5_2 {
		left: 42%;
		bottom: 14%;
	}

	#btn_s2_2 {
		left: 46%;
		bottom: 18%;
	}

	#btn_s3_2 {
		left: 48.5%;
		bottom: 37%;
	}

	#btn_s4_2 {
		left: 41%;
		bottom: 35%;
	}


	.btn_music {
		width: 56px;
		border-radius: 5000px;
		background-color: #000;
		border: 1px solid #000;
	}

	.btn_music_close {
		background-color: rgba(255, 255, 255, 0.9);
	}

	.btn_music.active {
		display: none;
	}

	.btn_chevron {
		width: 24px;
		border-radius: 5000px;
		background-color: #000;
		border: 1px solid #000;
	}

	.btn_chevron.btn_next {
		transform: rotate(180deg);
		margin-left: 7px;
		animation: glowFlicker 2s ease-in-out infinite;
		box-shadow: 0 0 20px rgba(233, 181, 109, 0.5);
		position: relative;
		overflow: visible;
	}
	/* 擴散動畫圈圈 */

	.btn_chevron.btn_next::before,
	.btn_chevron.btn_next::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 1px solid #E9B56D;
		border-radius: 50%;
		transform-origin: center center;
		z-index: -1;
	}

	.btn_chevron.btn_next::before {
		animation: ringPulse2 1.8s infinite ease-out;
	}

	.btn_chevron.btn_next::after {
		animation: ringPulse2 1.8s infinite ease-out;
		animation-delay: 0.9s;
	}




	@keyframes ringPulse2 {
		0% {
			transform: scale(1);
			opacity: 0;
		}
		10% {
			transform: scale(1.2);
			opacity: 1;
		}
		50% {
			transform: scale(1.7);
			opacity: 1;
		}
		80% {
			transform: scale(2);
			opacity: 0.8;
		}
		100% {
			transform: scale(2.5);
			opacity: 0;
		}
	}

	.progress_bar_link img {
		width: 8px;
	}

	.progress_bar_link .active img {
		width: 10px;
	}

	.progress_bar_link .active {
		pointer-events: none;
	}

	.box {
		left: 3%;
		bottom: 5%;
		z-index: 3;
	}

	.box,
	.progress_bar,
	.progress_bar_link {
		display: flex;
		align-items: center;
	}

	.progress_bar_link {
		align-items: flex-end;
		transform: translateY(-2px);
	}

	.progress_bar {
		background-color: rgba(255, 255, 255, 0.9);
		border: 1px solid #000;
		box-shadow: 0px 0px 15px rgb(0 0 0 / 20%);
		border-radius: 5000px;
		padding: .72vw 1vw;
		margin-left: 20px;
	}

	.progress_bar_link a {
		padding: 5px 2px 0;
	}

	.progress_bar_link a,
	.progress_bar_link div {
		margin-left: 5px;
	}

	.progress_bar_link div {
		width: 40px;
		height: 4px;
		position: relative;
		background-color: #d4d4d4;
	}

	.progress_bar_link div span {
		position: absolute;
		height: 100%;
		background-color: #C09D5B;
		display: block;
		transition: width 0.3s linear;
	}

	.progress.active span {
		width: 100%;
	}

	.txt {
		width: 395px;
		text-align: center;
		color: #fff;
		z-index: 3;
		background-image: url(../images/assets_spot.svg), url(../images/txt_bg2.png), url(../images/txt_bg.png);
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-size: auto, 100% 100%, 100% 100%;
		background-position: center 35%, center, center;
		top: 5%;
		padding: 30px 25px;
		border: 1px solid rgba(255, 255, 255, 0.4);
	}

	#s2_txt,
	#s3_txt {
		background-position: center 30%, center, center;
	}
	/*#s5_txt {
		background-position: center 30%, center, center;
	}
*/

	.txt h2 {
		border-bottom: 1px solid #fff;
		padding-bottom: 15px;
		margin-bottom: 15px;
	}

	.video {
		left: 0%;
		top: 0%;
		z-index: 1;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.video>div {
		position: relative;
		width: 100%;
	}

	.video video {
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 1;
		position: absolute;
	}

	.map,
	.progress_bar,
	.txt {
		opacity: 0;
		transition: opacity 1s ease;
	}

	.fade-in {
		animation: fadeIn 0.5s ease forwards;
	}

	.fade-out {
		animation: fadeOut 0.5s ease forwards;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes fadeOut {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}

	@media (max-width: 1600px) {
		h2,
		.btn,
		.btn2 {
			font-size: 1.5vw;
		}

		p {
			font-size: 1.125vw;
		}

		.map {
			width: 11.375vw;
		}

		.btn {
			width: 17.25vw;
		}

		.btn2 {
			width: 10vw;
			height: 10vw;
			line-height: 10vw;
		}

		.btn_music {
			width: 3.5vw;
		}

		.btn_chevron {
			width: 1.5vw;
		}

		.btn_chevron.btn_next {
			margin-left: 0.4375vw;
		}

		.progress_bar_link img {
			width: 0.5vw;
		}

		.progress_bar_link .active img {
			width: 0.625vw;
		}

		.progress_bar {
			box-shadow: 0vw 0vw 0.9375vw rgb(0 0 0 / 20%);
			margin-left: 1.25vw;
		}

		.progress_bar_link a {
			padding: 0.3125vw 0.125vw 0;
		}

		.progress_bar_link a,
		.progress_bar_link div {
			margin-left: 0.3125vw;
		}

		.progress_bar_link div {
			width: 2.5vw;
			height: 0.25vw;
		}

		.txt {
			width: 24.6875vw;
			padding: 1.875vw 1.5vw;
		}

		.txt h2 {
			padding-bottom: 0.9375vw;
			margin-bottom: 0.9375vw;
		}
	}

	@media (min-width: 850px) {
		.btn_music,
		.btn,
		.btn_chevron,
		.progress_bar_link a,
		.btn2 {
			transition: 500ms!important;
		}
		.btn:hover {
			margin-top: -10px;
		}
		.btn2:hover {
			transform: scale(0.95);
		}

		.btn_music:hover,
		.btn_chevron:hover {
			background-color: rgba(232, 180, 109, 0.9);
			border: 1px solid rgba(232, 180, 109, 0.9);
		}
		.progress_bar_link a:hover {
			opacity: 0.5
		}
	}
	/*選單*/

	.menu {
		position: fixed;
		left: 3%;
		top: 5%;
		z-index: 5;
		display: inline-block;
		font-size: 16px;
		transition: 500ms;
	}

	.menu_btn {
		background-color: #fff;
		border: 1px solid #000;

		padding: 10px;
		color: #000;
	}

	.menu_btn:hover {
		background-color: #E9B56D;
	}

	.menu_btn,
	.menu ul {
		border-radius: 8px;
	}

	.menu_list {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 999;
		padding-top: 20px;
		transition: 500ms;
	}

	.menu ul {
		margin: 0;
		list-style: none;
		background-color: #000;
		box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.8);
		padding: 10px 0;
	}

	.menu:hover .menu_list {
		display: block;
	}

	.menu ul li a {
		display: block;
		padding: 5px 20px;
		text-decoration: none;
		color: #fff;
		white-space: nowrap;
	}

	.menu ul li a:hover {
		text-decoration: underline;
	}

	@media (max-width: 1600px) {
		.menu {
			font-size: 1vw;
		}

		.menu_btn {
			padding: 0.625vw;
		}
		.menu_btn,
		.menu ul {
			border-radius: 0.5vw;
		}
		.menu_list {
			padding-top: 1.25vw;
		}

		.menu ul {
			box-shadow: 0vw 0.3125vw 0.625vw rgba(0, 0, 0, 0.8);
			padding: 0.625vw 0;
		}

		.menu ul li a {
			padding: 0.3125vw 1.25vw;
		}
	}

#btn_s2, #btn_s3, #btn_s4, #btn_s5 {
    display: none !important;
  }