@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&display=swap');
body {
		font-family: 'Noto Serif TC', '微軟正黑體', 'Microsoft JhengHei', 'Microsoft YaHei', Helvetica, Arial, sans-serif;
		background-color: #ffffff;
		letter-spacing: 1px;
}
.home-ad .is-time, .mouse-scroll-hint, .loader-percentage {
		font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', 'Microsoft YaHei', Helvetica, Arial, sans-serif;
}
section {
		max-width: 100%;
		margin: auto;
		position: relative;
}
a, a:hover {
		text-decoration: none;
}
.intro-video-section {
		z-index: 1;
}
.brand-sticky, .home-section.is-start .home-sticky {
		z-index: 2 !important;
}
footer, .about-section, .contact-section, .horizontal-section, .history-section, .album-section, .video-section, .contact-section {
		z-index: 3 !important;
}
#videoModal .btn-close, .detailmodl .modal-header .btn-close, .livestream-close {
		border: 0;
		position: absolute;
		top: 20px;
		right: 20px;
		width: 40px;
		height: 40px;
		background: rgba(255, 255, 255, 0);
		border-radius: 50%;
		color: #fff;
		cursor: pointer;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		z-index: 10;
}
.detailmodl .modal-header .btn-close {
		right: 2rem;
		top: 2rem;
}
#videoModal .btn-close:hover, .detailmodl .modal-header .btn-close:hover, .livestream-close:hover {
		background: rgba(255, 255, 255, 0);
		-webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
}
#videoModal .btn-close:focus, .detailmodl .modal-header .btn-close:focus {
		outline: none !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
}
#videoModal .btn-close, #videoModal .btn-close:hover, .livestream-close, .livestream-close:hover, .detailmodl .modal-header .btn-close, .detailmodl .modal-header .btn-close:hover {
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
#videoModal .btn-close {
		top: 0;
		right: 3rem;
}
/* 防止工具列造成的跳動 */
html {
		height: 100%;
		overflow-x: hidden;
}
body {
		min-height: 100%;
		min-height: -webkit-fill-available;
}
/* ============================================ */
/* Cookies 提示框 */
/* ============================================ */
#infopop {
		position: fixed;
		bottom: 1rem;
		left: auto;
		right: 1rem;
		background-color: rgba(0, 0, 0, 0.85);
		color: #fff;
		padding: 1rem;
		z-index: 9998;
		display: none;
		-webkit-animation: slideUp 0.5s ease-out;
		animation: slideUp 0.5s ease-out;
		max-width: 500px;
		border-radius: 1rem;
		font-size: 1rem;
}
#infopop .btn {
		color: #ffffff !important;
}
#infopop .btn:focus, #infopop .btn:hover {
		color: #ffffff !important;
		background-color: RGBA(255, 255, 255, .25) !important;
}
@-webkit-keyframes slideUp {
		from {
				-webkit-transform: translateY(100%);
				transform: translateY(100%);
		}
		to {
				-webkit-transform: translateY(0);
				transform: translateY(0);
		}
}
@keyframes slideUp {
		from {
				-webkit-transform: translateY(100%);
				transform: translateY(100%);
		}
		to {
				-webkit-transform: translateY(0);
				transform: translateY(0);
		}
}
#infopop .wlink {
		color: #c6b188;
		text-decoration: underline;
}
#infopop .wlink:hover {
		color: #dcc8a0;
}
/* 隱私權政策彈窗 */
#popbg {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 9999;
		display: none;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-animation: fadeIn 0.3s ease-out;
		animation: fadeIn 0.3s ease-out;
		font-size: 1rem;
}
@-webkit-keyframes fadeIn {
		from {
				opacity: 0;
		}
		to {
				opacity: 1;
		}
}
@keyframes fadeIn {
		from {
				opacity: 0;
		}
		to {
				opacity: 1;
		}
}
#txtpop {
		background-color: RGBA(255, 255, 255, .95);
		border-radius: 1rem;
		max-width: 800px;
		width: 90%;
		max-height: 80vh;
		position: relative;
		-webkit-animation: scaleIn 0.3s ease-out;
		animation: scaleIn 0.3s ease-out;
		font-size: 1rem;
}
@-webkit-keyframes scaleIn {
		from {
				-webkit-transform: scale(0.8);
				transform: scale(0.8);
				opacity: 0;
		}
		to {
				-webkit-transform: scale(1);
				transform: scale(1);
				opacity: 1;
		}
}
@keyframes scaleIn {
		from {
				-webkit-transform: scale(0.8);
				transform: scale(0.8);
				opacity: 0;
		}
		to {
				-webkit-transform: scale(1);
				transform: scale(1);
				opacity: 1;
		}
}
.hand {
		cursor: pointer;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		-webkit-transition: -webkit-transform 0.2s;
		transition: -webkit-transform 0.2s;
		-o-transition: transform 0.2s;
		transition: transform 0.2s;
		transition: transform 0.2s, -webkit-transform 0.2s;
		width: 25px;
		height: 25px;
		position: absolute;
		right: 2rem;
		top: 2rem;
}
.hand:hover {
		-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
		transform: scale(1.1);
}
.dowtit {
		font-size: 1.35rem;
		font-weight: bold;
		padding: 2rem 2rem 1rem 2rem;
		margin: 0;
}
.downinfo01 {
		padding: 2rem;
		max-height: calc(80vh - 100px);
		overflow-y: auto;
}
.custom-scrollbar::-webkit-scrollbar {
		width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
		background: #888;
		border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
		background: #555;
}
.downinfo01 ul {
		margin: 0;
		padding-left: 1.5rem;
}
.downinfo01 li {
		margin-bottom: 1rem;
		line-height: 1.8;
		text-align: justify;
}
@media (min-width: 1920px) {
		#infopop {
				right: max(0px, calc((100vw + 2rem - 1940px) / 2));
		}
}
@media (max-width: 767px) {
		#infopop {
				padding: 1rem;
				margin: auto;
				max-width: calc(100% - 2rem);
				left: 0;
		}
		#txtpop {
				width: calc(100% - 2rem);
				max-height: 90vh;
		}
		.dowtit {
				font-size: 1.25rem;
				padding: 1rem;
		}
		.downinfo01 {
				padding: 1rem;
		}
		#txtpop, #popbg, #infopop {
				font-size: .85rem;
		}
}
@media (max-width: 576px) {
		#infopop {
				right: 0;
				bottom: 1rem;
		}
		#infopop .text-start {
				text-align: end !important;
		}
}
/* ============================================ */
/* SPACE */
/* ============================================ */
.about-content {
		padding-top: 10rem;
}
.album-content {
		padding-top: 20rem;
}
.video-content {
		padding-top: 20rem;
}
.horizontal-section .sidebar, .horizontal-container {
		padding-top: 20rem;
}
.intro-sticky {
		/* 使用 JS 計算的實際高度 */
		height: var(--fixed-viewport-height);
		min-height: var(--fixed-viewport-height);
}
.livestream-open {
		-ms-scroll-chaining: none;
		overscroll-behavior: contain;
}
body {
		overscroll-behavior-y: none;
}
@supports (-webkit-touch-callout: none) {
		html {
				height: calc(var(--vh, 1vh) * 100);
		}
		body {
				min-height: calc(var(--vh, 1vh) * 100);
		}
}
/* ============================================ */
/* TITLE */
/* ============================================ */
.area-title {
		font-size: 1.75rem;
		font-weight: bold;
		color: #c6b188;
		z-index: 10;
		text-align: start;
		left: 0;
		display: inline-block;
		overflow: visible;
		pointer-events: none;
		margin-bottom: 2rem;
}
.area-title .text {
		padding-left: 3.5rem;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: end;
		-ms-flex-align: end;
		align-items: flex-end;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		position: relative;
		aspect-ratio: 301 / 200;
		bottom: 0;
		max-width: 100%;
		width: 100%;
		z-index: 2;
		-webkit-mask-image: url('../../images/title_underline_mask.png');
		mask-image: url('../../images/title_underline_mask.png');
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
}
.area-title .text span {
		opacity: 0;
		-webkit-transform: translateY(30px);
		-ms-transform: translateY(30px);
		transform: translateY(30px);
		-webkit-transition: opacity 0.3s ease-out 0.5s, -webkit-transform 0.3s ease-out 0.5s;
		transition: opacity 0.3s ease-out 0.5s, -webkit-transform 0.3s ease-out 0.5s;
		-o-transition: opacity 0.3s ease-out 0.5s, transform 0.3s ease-out 0.5s;
		transition: opacity 0.3s ease-out 0.5s, transform 0.3s ease-out 0.5s;
		transition: opacity 0.3s ease-out 0.5s, transform 0.3s ease-out 0.5s, -webkit-transform 0.3s ease-out 0.5s;
}
.area-title img {
		top: -.5rem;
		max-width: 220px;
		position: relative;
		display: block;
		width: 100%;
		-webkit-transform: scaleX(0);
		-ms-transform: scaleX(0);
		transform: scaleX(0);
		-webkit-transform-origin: left center;
		-ms-transform-origin: left center;
		transform-origin: left center;
		-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		-o-transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.is-move.active .area-title img {
		-webkit-transform: scaleX(1);
		-ms-transform: scaleX(1);
		transform: scaleX(1);
}
.is-move.active .area-title .text span {
		opacity: 1;
		-webkit-transform: translateY(-10px);
		-ms-transform: translateY(-10px);
		transform: translateY(-10px);
}
.about-photo {
		aspect-ratio: 6 / 4.5;
		overflow: hidden;
}
.is-move.active .about-photo img {
		-webkit-transition: all 1s 1.25s;
		-o-transition: all 1s 1.25s;
		transition: all 1s 1.25s;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
		-o-object-fit: cover;
		object-fit: cover;
		width: 100%;
		height: 100%;
}
.is-move.active #about-subtitle {
		-webkit-transition: all 1s 2.25s ease;
		-o-transition: all 1s 2.25s ease;
		transition: all 1s 2.25s ease;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
}
/* ============================================ */
/* INTRO */
/* ============================================ */
.intro-section {
		min-height: 400vh;
		position: relative;
		background: #000;
		overflow: visible;
		background-image: url("../../images/bg_1.jpg");
		background-repeat: no-repeat;
		background-position: center top;
		background-color: #bca475;
}
.intro-sticky {
		height: 100vh;
		position: sticky !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		overflow: hidden;
		z-index: 10;
}
.intro-canvas {
		position: relative;
		width: 100%;
		height: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
}
.bg-layer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
		opacity: 0;
		will-change: opacity;
}
.bg-base {
		opacity: 1;
}
.bg-01 {
		z-index: 1;
}
.bg-02 {
		z-index: 2;
}
.objects-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		pointer-events: none;
}
.object-item {
		position: absolute;
		opacity: 0;
		will-change: transform, opacity;
		pointer-events: auto;
}
.object-a {
		top: 25%;
		right: 22%;
		width: 100%;
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
		max-width: 7vw;
}
.object-b {
		top: 25%;
		left: 22%;
		width: 100%;
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
		max-width: 7vw;
}
.object-c {
		bottom: 18%;
		left: 20%;
		width: 100%;
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
		max-width: 10vw;
}
.object-d {
		bottom: 20%;
		right: 22%;
		width: 100%;
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
		max-width: 8vw;
}
.center-objects {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100%;
}
.object-e {
		position: absolute;
		width: 100%;
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
		max-width: 18.5vw;
		z-index: 1;
		opacity: 0;
		left: 0;
		right: .5%;
		top: 0;
		bottom: 17.25rem;
		margin: auto;
}
.object-f {
		position: absolute;
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
		max-width: 5vw;
		left: 0;
		right: 22%;
		top: 0;
		bottom: 8rem;
		margin: auto;
		opacity: 0;
}
.object-g {
		position: absolute;
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
		max-width: 53vw;
		opacity: 0;
		left: 0;
		right: 1%;
		top: 0;
		bottom: 8rem;
		margin: auto;
		z-index: 3;
}
.object-h {
		position: absolute;
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
		max-width: 53vw;
		opacity: 0;
		left: 0;
		right: 1%;
		top: 0;
		bottom: 8rem;
		margin: auto;
		z-index: 1;
}
.about-section {}
.about-sticky {
		position: sticky;
		top: 0;
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		overflow: hidden;
}
.about-content {
		position: relative;
		z-index: 2;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		will-change: transform, opacity;
		font-size: 1rem;
		line-height: 1.5;
}
.about-content > .row {
		padding-top: 6rem;
}
.about-content #about-subtitle {
		display: block;
		padding-right: 3rem;
		text-align: justify;
		font-size: 1rem;
}
.about-section .page-title {
		will-change: transform, opacity;
}
.about-section p {
		will-change: transform, opacity;
}
.history-section {
		height: 100vh;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		text-align: center;
		position: relative;
		overflow: hidden;
		background-size: cover;
}
.history-content {
		position: relative;
		z-index: 2;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		will-change: transform, opacity;
}
.history-section .page-title {
		will-change: transform, opacity;
}
.history-section p {
		will-change: transform, opacity;
}
.intro-video-section {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
		z-index: -1;
}
#video-mode {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
}
#youtube-bg-player, #youtube-bg-player iframe {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		min-width: 100%;
		min-height: 100%;
		width: 100vw;
		height: 56.25vw; /* 16:9 */
		pointer-events: none;
}
@media (max-aspect-ratio: 16/9) {
		#youtube-bg-player, #youtube-bg-player iframe {
				width: 177.78vh; /* 16:9 */
				height: 100vh;
		}
}
.intro-video-section.is-now {
		z-index: 1;
}
.intro-video-section::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		display: block;
		top: 0;
		bottom: 0;
		margin: auto;
		background-color: RGBA(0, 0, 0, .5);
		z-index: 1;
}
.home-section {
		height: 200vh;
		position: relative;
		z-index: 2;
}
.home-sticky {
		height: 100vh;
		position: sticky;
		top: 0;
		overflow: hidden;
		background-color: transparent;
		width: 100%;
}
.video_mode {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
		min-height: 100vh;
		width: auto;
		height: auto;
		-o-object-fit: cover;
		object-fit: cover;
		z-index: -1;
		opacity: 1;
}
.home-section .home-text {
		text-align: center;
		color: #ffffff;
		font-size: 1.75rem;
		font-weight: bolder;
		line-height: 2;
		letter-spacing: 2px;
		text-shadow: .125rem .125rem .25rem rgba(0, 0, 0, 1);
		-webkit-transform: translate(0, 80vh);
		-ms-transform: translate(0, 80vh);
		transform: translate(0, 80vh);
		opacity: 0;
		-webkit-transition: all 0.6s ease-in-out;
		-o-transition: all 0.6s ease-in-out;
		transition: all 0.6s ease-in-out;
}
.home-section.is-start .home-text {
		-webkit-transform: translate(0, 45vh);
		-ms-transform: translate(0, 45vh);
		transform: translate(0, 45vh);
		opacity: 1;
}
.home-ad {
		position: fixed;
		top: auto;
		bottom: 3rem;
		right: max(0px, calc((100vw - 1940px) / 2));
		opacity: 1;
		z-index: 1010;
		overflow: hidden;
		aspect-ratio: 1 / 1.125;
		text-align: center;
		padding-left: 10px;
}
.home-ad .item {
		max-width: 100px;
		margin: 0 auto 5px auto;
}
.home-ad .text-h {
		max-width: 100px;
		margin: auto;
}
.home-ad .text-v {
		max-width: 25px;
}
.home-ad.is-change a, .home-ad.is-go a {
		background-image: url("../../images/sticky_btn_v3.png");
		background-position: center;
		background-position: -5px center;
		background-repeat: no-repeat;
		background-size: auto 100%;
}
.home-ad.is-change .item {
		-webkit-transform: scale(.55);
		-ms-transform: scale(.55);
		transform: scale(.55);
		-webkit-transform-origin: left top;
		-ms-transform-origin: left top;
		transform-origin: left top;
		left: 2px;
}
.home-ad.is-change:hover .item {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: left top;
		-ms-transform-origin: left top;
		transform-origin: left top;
		left: 0;
		right: 0;
}
.home-ad.is-change:hover .is-time {
		opacity: 1;
}
.home-ad.is-change:hover a {
		-webkit-transform: translate(0%, 0);
		-ms-transform: translate(0%, 0);
		transform: translate(0%, 0);
}
.home-ad.is-change:hover .text-v {
		opacity: 0;
		display: none;
}
.home-ad.is-change:hover .text-h {
		opacity: 1 !important;
		display: block;
}
.home-ad .text-v {
		display: none;
}
.home-ad.is-change .text-h {
		opacity: 0 !important;
		display: none;
}
.home-ad.is-change .text-v {
		opacity: 1 !important;
		display: block;
}
.home-ad.is-change .is-time {
		/*-webkit-transform: translate(120%, 0) !important;
		-ms-transform: translate(120%, 0) !important;
		transform: translate(120%, 0) !important;*/
		opacity: 0;
		display: block;
}
.home-ad, .home-ad.is-change:hover a, .home-ad.is-go a {
		width: 160px;
		height: 180px;
}
.home-ad.is-change a {
		width: 60px;
		height: 180px;
}
.home-ad .text-v {
		opacity: 0;
		max-width: 20px;
		top: 55px;
		left: 25px;
		right: auto;
		margin: auto;
}
.home-ad a {
		-webkit-transform: translate(120%, 0);
		-ms-transform: translate(120%, 0);
		transform: translate(120%, 0);
}
.home-ad.is-close {
		-webkit-transform: translate(120%, 0) !important;
		-ms-transform: translate(120%, 0) !important;
		transform: translate(120%, 0) !important;
}
.home-ad.is-go a {
		-webkit-transform: translate(0%, 0);
		-ms-transform: translate(0%, 0);
		transform: translate(0%, 0);
}
.home-ad.is-change a {
		-webkit-transform: translate(calc(120% + 20px), 0);
		-ms-transform: translate(calc(120% + 20px), 0);
		transform: translate(calc(120% + 20px), 0);
}
.home-ad.is-go a, .home-ad.is-change a, .home-ad:hover a, .home-ad, .home-ad.is-close {
		-webkit-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
}
/*.home-ad:hover .item, .home-ad .item, .home-ad:hover img, .home-ad img {
		transition: all .2s linear;
}*/
.home-ad .is-time {
		display: block;
		top: auto;
		bottom: 8px;
		left: 2px;
		width: 160px;
		height: 30%;
		z-index: 2;
		margin: auto;
		text-align: center;
		font-size: 1rem;
		color: #000;
		overflow: hidden;
}
.livestream-modal {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		visibility: hidden;
		pointer-events: none;
		left: 0;
		right: 0;
		margin: auto;
}
.livestream-modal.active {
		visibility: visible;
		pointer-events: all;
}
.livestream-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.9);
		opacity: 0;
		-webkit-transition: opacity 0.4s ease;
		-o-transition: opacity 0.4s ease;
		transition: opacity 0.4s ease;
}
.livestream-modal.active .livestream-overlay {
		opacity: 1;
}
.livestream-container {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: #000;
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
		-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		transition: -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		-o-transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
}
.livestream-modal.active .livestream-container {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
}
.livestream-content {
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		aspect-ratio: 16 / 9;
		padding: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
}
.livestream-player {
		position: relative;
		width: 100%;
		height: 100%;
		background: #000;
}
.livestream-player iframe {
		width: 100%;
		height: 100%;
		border: none;
}
.livestream-loading {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		color: #fff;
		font-size: 18px;
}
body.livestream-open {
		overflow: hidden;
}
/* ============================================ */
/* 參加辦法 */
/* ============================================ */
.horizontal-section .sidebar {
		width: 300px;
		height: 100%;
		top: 0;
		font-size: 1.5rem;
		font-weight: bold;
}
.horizontal-section .sidebar .list-group {
		min-height: 700px;
		padding-top: 0;
}
.horizontal-section .sidebar .list-group a {
		opacity: 0;
		-webkit-transform: translateY(40%);
		-ms-transform: translateY(40%);
		transform: translateY(40%);
}
.horizontal-section.is-move.active .sidebar .list-group a {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
}
.horizontal-section.is-move.active .sidebar .list-group a:first-child {
		-webkit-transition: opacity .5s .3s ease, -webkit-transform .5s .3s ease;
		transition: opacity .5s .3s ease, -webkit-transform .5s .3s ease;
		-o-transition: transform .5s .3s ease, opacity .5s .3s ease;
		transition: transform .5s .3s ease, opacity .5s .3s ease;
		transition: transform .5s .3s ease, opacity .5s .3s ease, -webkit-transform .5s .3s ease;
}
.horizontal-section.is-move.active .sidebar .list-group a:nth-child(2) {
		-webkit-transition: opacity .5s .6s ease, -webkit-transform .5s .6s ease;
		transition: opacity .5s .6s ease, -webkit-transform .5s .6s ease;
		-o-transition: transform .5s .6s ease, opacity .5s .6s ease;
		transition: transform .5s .6s ease, opacity .5s .6s ease;
		transition: transform .5s .6s ease, opacity .5s .6s ease, -webkit-transform .5s .6s ease;
}
.horizontal-section.is-move.active .sidebar .list-group a:nth-child(3) {
		-webkit-transition: opacity .5s .9s ease, -webkit-transform .5s .9s ease;
		transition: opacity .5s .9s ease, -webkit-transform .5s .9s ease;
		-o-transition: transform .5s .9s ease, opacity .5s .9s ease;
		transition: transform .5s .9s ease, opacity .5s .9s ease;
		transition: transform .5s .9s ease, opacity .5s .9s ease, -webkit-transform .5s .9s ease;
}
.horizontal-section.is-move.active .sidebar .list-group a:nth-child(4) {
		-webkit-transition: opacity .5s 1.2s ease, -webkit-transform .5s 1.2s ease;
		transition: opacity .5s 1.2s ease, -webkit-transform .5s 1.2s ease;
		-o-transition: transform .5s 1.2s ease, opacity .5s 1.2s ease;
		transition: transform .5s 1.2s ease, opacity .5s 1.2s ease;
		transition: transform .5s 1.2s ease, opacity .5s 1.2s ease, -webkit-transform .5s 1.2s ease;
}
.horizontal-section.is-move.active .sidebar .list-group a:nth-child(5) {
		-webkit-transition: opacity .5s 1.5s ease, -webkit-transform .5s 1.5s ease;
		transition: opacity .5s 1.5s ease, -webkit-transform .5s 1.5s ease;
		-o-transition: transform .5s 1.5s ease, opacity .5s 1.5s ease;
		transition: transform .5s 1.5s ease, opacity .5s 1.5s ease;
		transition: transform .5s 1.5s ease, opacity .5s 1.5s ease, -webkit-transform .5s 1.5s ease;
}
.horizontal-section .sidebar .list-group-item, .horizontal-section .sidebar .list-group-item.active {
		z-index: 2;
		color: #999999;
		text-decoration: none;
		background-color: transparent;
		border: 0;
		padding: 1rem 0;
}
.horizontal-section .sidebar .list-group-item:hover, .horizontal-section .sidebar .list-group-item.active2 {
		color: #000000;
}
.horizontal-section .sidebar .list-group-item, .horizontal-section .sidebar .list-group-item:hover {
		-webkit-transition: all .3s linear;
		-o-transition: all .3s linear;
		transition: all .3s linear;
}
.horizontal-sticky {
		position: sticky;
		top: 0;
		overflow: hidden;
		width: 100%;
}
.horizontal-container {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		will-change: transform;
}
.horizontal-item {
		width: 100vw;
		max-width: 100% !important;
		height: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		padding: 0 4rem 0 300px;
		-ms-flex-negative: 0;
		flex-shrink: 0;
}
.horizontal-item .info-block {
		min-height: 700px;
		opacity: 0;
}
.horizontal-section.is-move.active .horizontal-item.active .info-block {
		opacity: 1;
}
/*.horizontal-section.is-move.active .horizontal-item .info-block {
		-webkit-transition: all 1s .3s ease;
		-o-transition: all 1s .3s ease;
		transition: all 1s .3s ease;
}*/
.horizontal-item h2 {
		font-size: 48px;
		margin-bottom: 20px;
}
.horizontal-item p {
		font-size: 18px;
		color: #86868b;
		max-width: 600px;
		text-align: center;
}
.horizontal-item .list-group-item, .horizontal-item .list-group {
		background-color: transparent;
		position: relative;
}
.horizontal-item .list-group {
		padding-top: 1rem;
}
.horizontal-item .list-group-item:first-child {
		border-top-width: var(--bs-list-group-border-width);
}
.horizontal-item .list-group-item {
		border-color: #d4d2cf;
		padding: 0 300px 0 .75rem;
		font-size: 1.25rem;
		font-weight: 600;
}
.horizontal-item .list-group-item a {
		color: #999999;
		width: 100%;
}
.horizontal-item .list-group-item {
		padding: 0;
}
.horizontal-item .list-group-item a .info {
		padding: .75rem .75rem;
		position: relative;
}
.horizontal-item .list-group-item a .info, .horizontal-item .list-group-item a .detail {
		max-width: 100%;
}
.horizontal-item .list-group-item a.active .info, .horizontal-item .list-group-item a.active .detail {
		max-width: calc(100% - 330px);
}
.horizontal-item .list-group-item a.active .info, .horizontal-item .list-group-item a:hover .info {
		color: #fff !important;
}
.horizontal-item .list-group-item a.active .detail {
		color: #333333;
		overflow: visible;
}
.horizontal-item .list-group-item .photo {
		opacity: 0;
		position: absolute;
}
.horizontal-item .list-group-item .date {
		text-wrap: nowrap;
		min-width: 120px;
}
.horizontal-item .list-group-item .detail {
		height: 0;
		overflow: hidden;
		font-size: 1rem;
		line-height: 1.5;
		font-weight: normal;
}
.horizontal-item .list-style-line li {
		position: relative;
		padding-left: 1.5rem;
		font-size: 1.125rem;
		line-height: 3;
		font-weight: 600;
		color: #000000;
}
.horizontal-item .list-style-line li::before {
		content: '-';
		position: absolute;
		left: 0;
		font-size: 150%;
		line-height: 1;
		color: #000;
		top: 10px;
}
.horizontal-item .list-group-item a + .photo {
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		aspect-ratio: 6 / 4;
		width: 280px;
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
		z-index: 2;
}
.horizontal-item .list-group-item a + .photo img {
		-webkit-transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		-o-transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transform-origin: center center;
		-ms-transform-origin: center center;
		transform-origin: center center;
		-webkit-transform: rotateX(180deg) translateY(0);
		transform: rotateX(180deg) translateY(0);
		-webkit-perspective: 1000px;
		perspective: 1000px;
}
.horizontal-item .list-group-item a.active + .photo img {
		-webkit-transform: rotateX(0deg) translateY(0);
		transform: rotateX(0deg) translateY(0);
}
.horizontal-item .list-group-item .photo img {
		-o-object-fit: cover;
		object-fit: cover;
		width: 100%;
		height: auto;
}
.horizontal-item .info-block {
		max-width: 100%;
}
.horizontal-item .info-block.act-map {
		max-width: 70%;
}
.horizontal-item .act-recycle {
		max-width: 80%;
}
.horizontal-item .act-recycle .photo {
		aspect-ratio: 3 / 4;
		overflow: hidden;
}
.horizontal-item .act-recycle .photo img {
		-o-object-fit: cover;
		object-fit: cover;
		width: auto;
		height: 100%;
}
.horizontal-item .text-block {
		font-size: 1rem;
		line-height: 1.75;
		color: #000000;
		margin-bottom: 3rem;
}
.horizontal-section #item4.horizontal-item .act-recycle .col-4 .photo img {
		-webkit-transform: translateX(150%);
		-ms-transform: translateX(150%);
		transform: translateX(150%);
}
.horizontal-section #item4.horizontal-item.active .act-recycle .col-4 .photo img {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
}
.horizontal-section #item4.horizontal-item.active .act-recycle .col-4 .photo img, .horizontal-section #item4.horizontal-item .act-recycle .col-4 .photo img {
		-webkit-transition: -webkit-transform .6s ease;
		transition: -webkit-transform .6s ease;
		-o-transition: transform .6s ease;
		transition: transform .6s ease;
		transition: transform .6s ease, -webkit-transform .6s ease;
}
.horizontal-section #item4.horizontal-item .act-recycle .text-block {
		-webkit-transform: translateY(500%);
		-ms-transform: translateY(500%);
		transform: translateY(500%);
}
.horizontal-section #item4.horizontal-item.active .act-recycle .text-block {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
}
.horizontal-section #item4.horizontal-item.active .act-recycle .text-block, .horizontal-section #item4.horizontal-item .act-recycle .text-block {
		-webkit-transition: all .6s .6s ease;
		-o-transition: all .6s .6s ease;
		transition: all .6s .6s ease;
}
.horizontal-item .list-group-item a.active + .photo, .horizontal-item .list-group-item a.active .detail {
		opacity: 1;
}
.list-group-item a.active .detail {}
/*.horizontal-item-base, .horizontal-item-base.active {
		-webkit-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
}*/
.horizontal-item .list-group-item a .info:hover .icon, .horizontal-item .list-group-item a .detail, .horizontal-item .list-group-item a.active .detail, .horizontal-item .list-group-item a .title, .horizontal-item .list-group-item a.active .title {
		-webkit-transition: all .1s linear;
		-o-transition: all .1s linear;
		transition: all .1s linear;
}
.horizontal-item .list-group-item a .info::after, .horizontal-item .list-group-item a.active .info::after, .horizontal-item .list-group-item a:hover .info::after, .horizontal-item .list-group-item a, .horizontal-item .list-group-item a.active {
		-webkit-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
}
.horizontal-item .list-group-item a .info .icon {
		opacity: 1;
		position: absolute;
		right: 2rem;
}
.horizontal-item .list-group-item a.active .info .icon, .horizontal-item .list-group-item a:hover .info .icon {
		color: #c6b188;
}
.horizontal-item .list-group-item a.active .info .icon {
		-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
}
.horizontal-item .list-group-item a .info::after {
		content: '';
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		margin: auto;
		max-width: 100%;
		background: -o-linear-gradient(left, RGBA(198, 177, 136, 1)60%, RGBA(198, 177, 136, 0)100%);
		background: -webkit-gradient(linear, left top, right top, color-stop(60%, RGBA(198, 177, 136, 1)), to(RGBA(198, 177, 136, 0)));
		background: linear-gradient(to right, RGBA(198, 177, 136, 1)60%, RGBA(198, 177, 136, 0)100%);
		opacity: 0;
		z-index: -1;
}
.horizontal-item .list-group-item a:hover .info .icon, .horizontal-item .list-group-item a.active .info::after, .horizontal-item .list-group-item a:hover .info::after {
		opacity: 1;
}
/* ============================================ */
/* 活動花絮 */
/* ============================================ */
.album-section {
		position: relative;
		background-color: #5d5d5d;
}
.album-sticky {
		position: sticky;
		top: 0;
		min-height: 100vh;
		overflow: hidden;
		background: transparent;
		width: 100%;
}
.album-section .start-left {
		-webkit-transform: translateX(150%);
		-ms-transform: translateX(150%);
		transform: translateX(150%);
		overflow: hidden;
}
.album-section .start-right {
		-webkit-transform: translateX(-150%);
		-ms-transform: translateX(-150%);
		transform: translateX(-150%);
		overflow: hidden;
}
.album-section.is-move.active .start-left {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
}
.album-section.is-move.active .start-right {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
}
.album-section.is-move .start-left, .album-section .is-move.active .start-left {
		-webkit-transition: -webkit-transform 1s 0.6s ease;
		transition: -webkit-transform 1s 0.6s ease;
		-o-transition: transform 1s 0.6s ease;
		transition: transform 1s 0.6s ease;
		transition: transform 1s 0.6s ease, -webkit-transform 1s 0.6s ease;
}
.album-section.is-move .start-right, .album-section .is-move.active .start-right {
		-webkit-transition: -webkit-transform 1s 1.2s ease;
		transition: -webkit-transform 1s 1.2s ease;
		-o-transition: transform 1s 1.2s ease;
		transition: transform 1s 1.2s ease;
		transition: transform 1s 1.2s ease, -webkit-transform 1s 1.2s ease;
}
/* ============================================ */
/* 影音特輯 */
/* ============================================ */
.video-section {
		position: relative;
		background-color: #f7f3ed;
}
.video-sticky {
		position: sticky;
		top: 0;
		min-height: 100vh;
		overflow: hidden;
		background: transparent;
		width: 100%;
}
.video-slider.is-center {
		max-width: 50%;
		margin: auto;
}
.video-slider {
		max-width: 100%;
		margin: auto;
		position: relative;
}
.video-section.is-move .video-slider {
		-webkit-transform: translateX(150%);
		-ms-transform: translateX(150%);
		transform: translateX(150%);
}
.video-section.is-move.active .video-slider {
		-webkit-transform: translateX(2rem);
		-ms-transform: translateX(2rem);
		transform: translateX(2rem);
}
.video-section.is-move .video-slider, .video-section .is-move.active .video-slider {
		-webkit-transition: -webkit-transform .6s ease;
		transition: -webkit-transform .6s ease;
		-o-transition: transform .6s ease;
		transition: transform .6s ease;
		transition: transform .6s ease, -webkit-transform .6s ease;
}
.video-slider .item {
		cursor: pointer;
		position: relative;
		margin: 0 1.5rem;
}
.video-slider .item .cover {
		aspect-ratio: 6 / 4;
}
.video-slider .item .cover img {
		-o-object-fit: cover;
		object-fit: cover;
		width: 100%;
		height: 100%;
}
.video-slider.is-center .slick-list {
		overflow: visible;
}
.video-slider .slick-list {
		overflow: hidden;
}
.video-slider .slick-dots {
		-webkit-transform: translateX(-2rem);
		-ms-transform: translateX(-2rem);
		transform: translateX(-2rem);
}
.video-slider .slick-prev {
		-webkit-animation: arrowLeftPulse 1s infinite linear;
		animation: arrowLeftPulse 1s infinite linear;
}
.video-slider .slick-next {
		-webkit-animation: arrowRightPulse 1s infinite linear;
		animation: arrowRightPulse 1s infinite linear;
}
.video-slider .slick-prev:hover, .video-slider .slick-next:hover {
		-webkit-animation: arrowRightStop 1s forwards linear;
		animation: arrowRightStop 1s forwards linear;
}
.slick-dotted.slick-slider {
		margin-bottom: 0;
}
.slick-prev, .slick-next {
		top: 50%;
		width: 100px;
		height: 100px;
}
.slick-dots li button:before {
		content: '';
		width: 8px;
		height: 8px;
		border-radius: 1rem;
		opacity: .6;
}
.slick-dots li {
		width: 16px;
		height: 16px;
		margin: 0 2px;
}
.slick-dots li.slick-active button:before {
		background-color: #cebb98 !important;
		opacity: 1;
}
.slick-dots li button:before {
		background-color: #ccc !important;
}
.slick-dots {
		bottom: -3rem;
}
.video-slider .slick-prev, .video-slider .slick-next {
		top: 3rem;
		bottom: 0;
		margin: auto;
		z-index: 2;
		width: 50px;
		height: 50px;
}
.video-slider .slick-prev {
		left: 0;
}
.video-slider .slick-next {
		right: 3rem;
}
.video-slider.is-center .slick-prev {
		left: -40%;
}
.video-slider.is-center .slick-next {
		right: -40%;
}
.slick-prev:before, .slick-next:before {
		content: "";
}
[dir='rtl'] .slick-prev, .slick-next {
		background: url(../../images/arrow_right.png) no-repeat scroll center center transparent !important;
		background-size: contain !important;
}
[dir='rtl'] .slick-next, .slick-prev {
		background: url(../../images/arrow_left.png) no-repeat scroll center center transparent !important;
		background-size: contain !important;
}
.play-button {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.6);
		width: 60px;
		height: 60px;
		border-radius: 50%;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		color: #ffffff;
		font-size: 24px;
		opacity: 0.5;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
}
.video-slider .play-button:hover {
		opacity: 1;
}
.video-slider .play-button, .video-slider .play-button:hover {
		-webkit-transition: opacity 0.3s;
		-o-transition: opacity 0.3s;
		transition: opacity 0.3s;
}
#videoModal .modal-dialog {
		max-width: 100%;
		margin: 0 auto;
}
#videoModal .modal-content {
		background-color: rgba(0, 0, 0, 0.9);
		border: none;
}
#videoModal .modal-header {
		border: none;
		padding: 0.5rem;
		position: absolute;
		right: 0;
		z-index: 1;
}
#videoModal .modal-body {
		padding: 0;
}
/* ============================================ */
/* 交通資訊 */
/* ============================================ */
.contact-section {
		background-color: #616161;
		position: relative;
}
.contact-list {
		padding: 18rem 3rem 3rem 0;
		color: #ffffff;
		line-height: 1.75;
		text-align: justify;
		font-size: .95rem;
}
.contact-list .item {
		padding: 2rem 0;
		border-bottom: 2px solid #767676;
}
.contact-list .item:last-child {
		border-bottom: 0;
}
.contact-list .head {
		font-size: 1.125rem;
		font-weight: bold;
		text-wrap: nowrap;
		padding: 0 2rem;
}
.contact-list .badge {
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
}
.contact-list .is-brown {
		background-color: #a18439;
		border-radius: 0;
}
.contact-list .is-red {
		background-color: #cf3231;
		border-radius: 0;
}
.contact-list .is-blue {
		background-color: #76b4ca;
		border-radius: 5rem;
}
/* ============================================ */
/* 水波特效 */
/* ============================================ */
.ripple-layer {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 22%;
		margin: auto;
		width: 100%;
		height: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-transform: rotateX(74deg);
		transform: rotateX(74deg);
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		z-index: 3;
}
.ripple {
		position: absolute;
		width: 0;
		height: 0;
		border-radius: 50%;
		background: transparent;
		border: 1px solid rgba(255, 255, 255, 0.6);
		-webkit-transform-origin: center center;
		-ms-transform-origin: center center;
		transform-origin: center center;
		-webkit-animation: ripple-effect 8s linear infinite;
		animation: ripple-effect 8s linear infinite;
}
.ripple:nth-child(1) {
		-webkit-animation-delay: 0s;
		animation-delay: 0s;
}
.ripple:nth-child(2) {
		-webkit-animation-delay: 2s;
		animation-delay: 2s;
}
.ripple:nth-child(3) {
		-webkit-animation-delay: 4s;
		animation-delay: 4s;
}
.ripple:nth-child(4) {
		-webkit-animation-delay: 6s;
		animation-delay: 6s;
}
.glow {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: -o-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 60%);
		background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 60%);
		pointer-events: none;
		z-index: 1;
}
.light-points-container {
		position: absolute;
		top: -10%;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 2;
}
.light-point {
		position: absolute;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 1);
		-webkit-filter: blur(2px);
		filter: blur(2px);
		-webkit-animation: twinkle 3s infinite alternate;
		animation: twinkle 3s infinite alternate;
}
.light-point:nth-child(1) {
		-webkit-animation-delay: 0s;
		animation-delay: 0s;
}
.light-point:nth-child(2) {
		-webkit-animation-delay: 0.5s;
		animation-delay: 0.5s;
}
.light-point:nth-child(3) {
		-webkit-animation-delay: 1s;
		animation-delay: 1s;
}
.light-point:nth-child(4) {
		-webkit-animation-delay: 1.5s;
		animation-delay: 1.5s;
}
.light-point:nth-child(5) {
		-webkit-animation-delay: 2s;
		animation-delay: 2s;
}
.light-point:nth-child(6) {
		-webkit-animation-delay: 2.5s;
		animation-delay: 2.5s;
}
.light-point:nth-child(7) {
		-webkit-animation-delay: 0.7s;
		animation-delay: 0.7s;
}
.light-point:nth-child(8) {
		-webkit-animation-delay: 1.2s;
		animation-delay: 1.2s;
}
.light-point:nth-child(9) {
		-webkit-animation-delay: 1.7s;
		animation-delay: 1.7s;
}
.light-point:nth-child(10) {
		-webkit-animation-delay: 2.2s;
		animation-delay: 2.2s;
}
.light-point:nth-child(11) {
		-webkit-animation-delay: 0.3s;
		animation-delay: 0.3s;
}
.light-point:nth-child(12) {
		-webkit-animation-delay: 0.8s;
		animation-delay: 0.8s;
}
.center-glow {
		position: absolute;
		top: 40%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 120px;
		height: 80px; /* 璈Ｗ?敶?*/
		background: -o-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 70%);
		background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 70%);
		border-radius: 50%;
		-webkit-filter: blur(5px);
		filter: blur(5px);
		z-index: 2;
		-webkit-animation: pulse 5s infinite alternate;
		animation: pulse 5s infinite alternate;
}
@-webkit-keyframes ripple-effect {
		0% {
				width: 0;
				height: 0;
				border-width: 6px;
				opacity: 0.7;
		}
		100% {
				width: 300vh;
				height: 300vh;
				border-width: 1px;
				opacity: 0;
		}
}
@keyframes ripple-effect {
		0% {
				width: 0;
				height: 0;
				border-width: 6px;
				opacity: 0.7;
		}
		100% {
				width: 300vh;
				height: 300vh;
				border-width: 1px;
				opacity: 0;
		}
}
@-webkit-keyframes twinkle {
		0% {
				opacity: 0.2;
				-webkit-transform: scale(0.8);
				transform: scale(0.8);
		}
		50% {
				opacity: 0.9;
		}
		100% {
				opacity: 0.4;
				-webkit-transform: scale(1.2);
				transform: scale(1.2);
		}
}
@keyframes twinkle {
		0% {
				opacity: 0.2;
				-webkit-transform: scale(0.8);
				transform: scale(0.8);
		}
		50% {
				opacity: 0.9;
		}
		100% {
				opacity: 0.4;
				-webkit-transform: scale(1.2);
				transform: scale(1.2);
		}
}
@-webkit-keyframes pulse {
		0% {
				opacity: 0.3;
				width: 100px;
				height: 70px;
		}
		100% {
				opacity: 0.6;
				width: 140px;
				height: 90px;
		}
}
@keyframes pulse {
		0% {
				opacity: 0.3;
				width: 100px;
				height: 70px;
		}
		100% {
				opacity: 0.6;
				width: 140px;
				height: 90px;
		}
}
/* 頁尾 */
footer {
		background-color: #bca475;
		padding: 3rem 0 6rem 0;
		text-align: center;
		position: relative;
}
footer {
		color: #ffffff;
		font-size: .875rem;
}
footer .bot-brand {
		max-width: 300px;
}
footer .share-list .item a {
		max-width: 40px;
		display: inline-block;
		margin: 0 .5rem;
}
.btn {
		display: inline-block;
		background-color: #007aff;
		color: #fff;
		padding: 12px 30px;
		border-radius: 30px;
		text-decoration: none;
		font-weight: 500;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		will-change: transform, opacity;
}
.btn:hover {
		background-color: #0062cc;
		-webkit-transform: translateY(-2px);
		-ms-transform: translateY(-2px);
		transform: translateY(-2px);
}
.mouse.finger-mode {
		width: 60px;
		height: 60px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		margin: 3rem auto;
		z-index: 200;
		text-align: center;
		border: 0;
}
.finger-in .finger-line img, .finger-in .finger img {
		width: 60px;
		height: 60px;
}
.finger-in {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		margin: auto;
		width: 100%;
		height: 100%;
		opacity: 0;
}
.is-visible.finger-in {
		top: -1.25rem;
}
.scroll-mode .finger-in:not(.is-h) {
		opacity: 1;
}
.scroll-mode .finger-in.is-h {
		opacity: 0;
}
.is-horizontal .finger-in.is-h {
		opacity: 1;
}
.is-horizontal .finger-in:not(.is-h) {
		opacity: 0;
}
.finger-in:not(.is-h) .finger {
		left: 0;
		top: 0;
		-webkit-animation: fingerScroll 0.8s cubic-bezier(0.7, 0, 0.3, 1) infinite alternate;
		animation: fingerScroll 0.8s cubic-bezier(0.7, 0, 0.3, 1) infinite alternate;
		-webkit-animation-delay: 0s;
		animation-delay: 0s;
		-webkit-animation-delay: 80ms;
		animation-delay: 80ms;
}
.finger-in.is-h .finger {
		left: 0;
		top: 0;
		-webkit-animation: fingerScrollH 0.8s cubic-bezier(0.7, 0, 0.3, 1) infinite alternate;
		animation: fingerScrollH 0.8s cubic-bezier(0.7, 0, 0.3, 1) infinite alternate;
		-webkit-animation-delay: 0s;
		animation-delay: 0s;
		-webkit-animation-delay: 80ms;
		animation-delay: 80ms;
}
.is-go-top .finger-in {
		opacity: 0 !important;
		pointer-events: none !important;
}
@-webkit-keyframes fingerScroll {
		0% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
		}
		70%, 100% {
				-webkit-transform: translateY(10px);
				transform: translateY(10px);
		}
}
@keyframes fingerScroll {
		0% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
		}
		70%, 100% {
				-webkit-transform: translateY(10px);
				transform: translateY(10px);
		}
}
@-webkit-keyframes fingerScrollH {
		0% {
				-webkit-transform: translateX(0);
				transform: translateX(0);
		}
		70%, 100% {
				-webkit-transform: translateX(4px);
				transform: translateX(4px);
		}
}
@keyframes fingerScrollH {
		0% {
				-webkit-transform: translateX(0);
				transform: translateX(0);
		}
		70%, 100% {
				-webkit-transform: translateX(4px);
				transform: translateX(4px);
		}
}
/** 滑鼠 **/
.mouse {
		width: 80px;
		height: 40px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		margin: 3rem auto;
		z-index: 200;
		text-align: center;
		border: 0;
}
.mouse-in {
		width: 26px;
		height: 40px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		margin: 0 auto;
		z-index: 200;
		border: 2px solid #ffffff;
		text-wrap: nowrap;
		text-align: center;
		opacity: 0;
		border-radius: 2rem;
}
.mouse.scroll-mode .mouse-in {
		opacity: 1;
}
.mouse .roll {
		position: absolute;
		top: 8px;
		left: 50%;
		width: 4px;
		margin-left: -2px;
		height: 4px;
		border-radius: 4px;
		background-color: #ffffff;
		-webkit-animation: mouseScroll 0.8s cubic-bezier(0.7, 0, 0.3, 1) infinite alternate;
		animation: mouseScroll 0.8s cubic-bezier(0.7, 0, 0.3, 1) infinite alternate;
		z-index: 2;
}
.mouse .rollshadow {
		position: absolute;
		top: 8px;
		left: 50%;
		width: 4px;
		margin-left: -2px;
		height: 4px;
		background-color: #f1f1f1;
		border-radius: 4px;
		-webkit-animation: mouseScroll 0.8s cubic-bezier(0.7, 0, 0.3, 1) infinite alternate;
		animation: mouseScroll 0.8s cubic-bezier(0.7, 0, 0.3, 1) infinite alternate;
		animation-delay: 0s;
		-webkit-animation-delay: 80ms;
		animation-delay: 80ms;
		z-index: 1;
}
.mouse .mouse-in, .mouse, .mouse .roll, .mouse .rollshadow, .mouse.is-dark, .mouse.is-dark .roll, .mouse.is-dark .rollshadow {
		-webkit-transition: all .3s linear;
		-o-transition: all .3s linear;
		transition: all .3s linear;
}
.mouse.is-dark .mouse-in {
		border-color: #c6b188;
}
.mouse.is-dark .mouse-in .roll, .mouse.is-dark .mouse-in .rollshadow {
		background-color: #c6b188;
}
@-webkit-keyframes mouseScroll {
		0% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
		}
		100% {
				-webkit-transform: translateY(14px);
				transform: translateY(14px);
		}
}
@keyframes mouseScroll {
		0% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
		}
		100% {
				-webkit-transform: translateY(14px);
				transform: translateY(14px);
		}
}
@-webkit-keyframes mouseScrollm {
		0% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
		}
		100% {
				-webkit-transform: translateY(10px);
				transform: translateY(10px);
		}
}
@keyframes mouseScrollm {
		0% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
		}
		100% {
				-webkit-transform: translateY(10px);
				transform: translateY(10px);
		}
}
@-webkit-keyframes mouseScrollsm {
		0% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
		}
		100% {
				-webkit-transform: translateY(6px);
				transform: translateY(6px);
		}
}
@keyframes mouseScrollsm {
		0% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
		}
		100% {
				-webkit-transform: translateY(6px);
				transform: translateY(6px);
		}
}
.mouse-scroll-hint {
		position: relative;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
		white-space: nowrap;
		opacity: 0;
		visibility: hidden;
		-webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
		-o-transition: opacity 0.3s ease, visibility 0.3s ease;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		pointer-events: none;
		color: #ffffff;
		font-size: 1rem;
		bottom: -3rem;
}
.is-visible + .mouse-scroll-hint {
		opacity: 1;
		visibility: visible;
}
.mouse.is-go-top .mouse-scroll-hint {
		opacity: 0;
		visibility: hidden;
		position: absolute;
}
.mouse.loader-mode {
		bottom: 50px;
}
.mouse.loader-mode .roll, .mouse.loader-mode .rollshadow {
		display: none;
}
.mouse.scroll-mode .loader-container {
		display: none;
}
.mouse.is-go-top {
		width: 80px;
		height: 80px;
		background: transparent;
		border-radius: 50%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		pointer-events: auto;
		margin: 0 auto;
}
.mouse.is-go-top .mouse-in {
		opacity: 0;
		display: none;
}
.mouse.is-go-top::before {
		display: none;
}
.mouse .mouse-go-top-icon {
		display: block;
		-webkit-animation: bounce 1.5s infinite;
		animation: bounce 1.5s infinite;
		color: #ffffff;
		font-size: 2rem;
		opacity: 0;
		pointer-events: none;
}
.mouse.is-go-top .mouse-go-top-icon {
		opacity: .85;
		pointer-events: painted;
}
.mouse.is-go-top:hover .mouse-go-top-icon {
		-webkit-transform: scale(1.15);
		-ms-transform: scale(1.15);
		transform: scale(1.15);
		-webkit-filter: drop-shadow(0 5px 15px rgba(255, 255, 255, 0.5));
		filter: drop-shadow(0 5px 15px rgba(255, 255, 255, 0.5));
}
.mouse.is-clicking .mouse-go-top-icon {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		-webkit-transition: -webkit-transform 0.1s ease;
		transition: -webkit-transform 0.1s ease;
		-o-transition: transform 0.1s ease;
		transition: transform 0.1s ease;
		transition: transform 0.1s ease, -webkit-transform 0.1s ease;
}
@-webkit-keyframes bounce {
		0%, 100% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
		}
		50% {
				-webkit-transform: translateY(-10px);
				transform: translateY(-10px);
		}
}
@keyframes bounce {
		0%, 100% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
		}
		50% {
				-webkit-transform: translateY(-10px);
				transform: translateY(-10px);
		}
}
.loader-container {
		text-align: center;
}
.loader-percentage {
		color: #ffffff;
		font-size: 1.25rem;
		margin-top: 3rem;
}
.brand-section {
		min-height: 100vh;
		position: relative;
		background-color: transparent;
}
.brand-section.is-top {
		top: 0;
		left: 0;
		right: 0;
		min-height: 15vh;
		position: fixed;
		z-index: 1050;
}
.brand-sticky {
		position: sticky;
		top: 0;
		height: 100%;
		overflow: hidden;
		background: transparent;
		width: 100%;
}
.brand-head .brand-container .brand-in {
		padding-top: 1rem;
}
.brand-in {
		width: 100%;
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
		display: block;
		top: 0;
		bottom: 0;
		margin: auto;
}
.brand-head .logo {
		width: 100%;
}
.brand-section.is-fixed .brand-head .logo {
		/*position: fixed !important;*/
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
}
.brand-head .nav {
		margin: 4rem auto;
}
.brand-section .brand-in .logo {
		-webkit-transition: all .5s ease;
		-o-transition: all .5s ease;
		transition: all .5s ease;
		will-change: transform;
}
.brand-section .brand-in .logo {
		margin: 10px auto;
}
.brand-section .brand-head .brand-container, .brand-section.is-top .brand-head .brand-container, .brand-section, .brand-section.is-top {
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
}
.main-nav.brand-head .nav {
		margin: 0 auto;
		height: 0;
		overflow: hidden;
}
.main-nav.open.brand-head .nav {
		height: calc(75vh - 2rem) !important;
}
.main-nav.open.brand-head .brand-in {
		-webkit-box-pack: start !important;
		-ms-flex-pack: start !important;
		justify-content: flex-start !important;
		height: 75vh !important;
}
.brand-head .nav a {
		font-size: 1.75rem;
		padding: .5rem;
		display: inline-block;
		color: #000;
		font-weight: normal;
}
.brand-section.is-top .main-nav.brand-head .brand-in, .brand-section.is-top .main-nav.brand-head.open .brand-in, .brand-section.is-top .main-nav.brand-head .logo, .brand-section.is-top .main-nav.brand-head.open .logo, .main-nav.brand-head .nav, .main-nav.open.brand-head .nav {
		-webkit-transition: all .3s ease !important;
		-o-transition: all .3s ease !important;
		transition: all .3s ease !important;
}
.brand-head .nav li a:hover, .brand-head .nav a:hover, .brand-head .nav li.active a, .brand-head .nav a.active {
		color: #bca475;
}
.brand-head.no-animation .brand-container {
		-webkit-animation: none !important;
		animation: none !important;
		-webkit-transition: none !important;
		-o-transition: none !important;
		transition: none !important;
}
#brand-head-container {
		/*max-width: 2560px;*/
		max-width: 1920px;
		position: fixed;
		top: 0;
		left: 50%;
		-webkit-transform: translate(-50%, 0) translateZ(0);
		transform: translate(-50%, 0) translateZ(0);
		margin: auto;
		width: 100%;
		z-index: 1000;
		overflow: hidden;
}
.brand-head-placeholder {
		visibility: hidden;
		pointer-events: none;
}
.brand-container {
		position: relative;
		/*width: 2560px;*/
		width: 1920px;
		max-width: 100%;
		overflow: hidden;
		text-align: center;
		background-color: #ffffff;
}
.wave-container {
		position: relative;
		/*width: 2560px;*/
		width: 100%;
		max-width: 100%;
		height: 70px;
		overflow: hidden;
		z-index: 1050;
		top: -1px;
}
canvas {
		position: absolute;
		top: 0;
		max-width: 100%;
		height: auto;
}
.intro-logo {
		max-width: 20vw;
		width: 100%;
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
		height: auto;
		left: 0;
		right: 0;
		top: 0;
		bottom: 22%;
		margin: auto;
}
@media (min-width: 1600px) {
		.object-f {
				max-width: 65px;
		}
		.object-g {
				max-width: 815px;
		}
		.object-e {
				max-width: 280px;
		}
		.object-h {
				max-width: 810px;
		}
		.object-d {
				max-width: 136px;
		}
		.object-c {
				max-width: 170px;
		}
		.object-a {
				max-width: 120px;
		}
		.object-b {
				max-width: 120px;
		}
		.brand-head.move .logo {
				max-width: 300px;
		}
		.intro-logo {
				max-width: 340px;
		}
		/*	.brand-section:not(.is-fixed) .brand-head .logo{
				max-width: 300px;
		}
	.brand-section.is-fixed .logo {
				max-width: 450px;
		}*/
}
@media (min-width: 1920px) {
		#youtube-bg-player {
				max-width: 1920px;
				margin: auto;
		}
		.horizontal-section .area-title {
				top: 7rem;
		}
		.area-title {
				font-size: 2rem;
				padding-left: 0;
		}
		.area-title img {
				max-width: 280px;
		}
		.horizontal-section .sidebar {
				width: 400px;
		}
		.horizontal-item {
				padding: 0 4rem 0 400px;
		}
		.horizontal-item .list-group-item a + .photo {
				width: 350px;
		}
		.horizontal-item .list-group-item a.active .info, .horizontal-item .list-group-item a.active .detail {
				max-width: calc(100% - 400px);
		}
		.wave-container {
				max-width: 1920px;
		}
		section {
				max-width: 1920px !important;
		}
		.livestream-modal, .home-section .home-sticky {
				max-width: 1920px !important;
		}
		.object-f {
				right: 18%;
		}
		#horizontal-container {
				max-width: 3840px;
		}
		.horizontal-item {
				width: 100%;
				max-width: 1920px !important;
		}
		#videoModal .modal-dialog {
				max-width: 1920px;
		}
		.video_mode {
				max-width: 1920px;
				width: 100%;
				height: auto;
		}
		.livestream-content {
				max-width: 1920px;
				max-height: 1080px;
		}
		.horizontal-item {
				max-width: 1920px;
		}
		.modal-fullscreen {
				max-width: 1920px;
				margin: auto;
		}
		footer {
				max-width: 1920px;
				margin: auto;
		}
}
@media (min-width: 1940px) {
		.modal-fullscreen {
				max-width: 1940px;
		}
}
@media (min-width: 1200px) {
		.about-section .area-title {
				top: 0 !important;
		}
}
@media (max-width: 1199px) {
		.about-content #about-subtitle {
				font-size: 1rem;
		}
		.horizontal-item .list-group-item a.active .info, .horizontal-item .list-group-item a.active .detail {
				max-width: calc(100%);
		}
		.horizontal-item .list-group-item a .info .icon {
				right: 0;
				top: 10px;
		}
		.mouse-scroll-hint {
				font-size: .85rem;
				bottom: -2.5rem;
		}
		.is-visible + .mouse-scroll-hint {
				bottom: -2.5rem;
		}
		.mouse.finger-mode {
				margin: 2rem auto;
		}
		.horizontal-item .list-group-item a .detail, .horizontal-item .list-group-item a .info {
				max-width: calc(100%);
		}
		.horizontal-item .list-group-item a .info {
				padding: .6rem .75rem;
		}
		.mouse-scroll-hint, .is-visible + .mouse-scroll-hint {}
		.area-title .text {
				padding-left: 2rem;
		}
		.horizontal-section .sidebar, .horizontal-container {
				padding-top: 14rem;
		}
		.horizontal-item .info-block.act-map {
				max-width: 100%;
		}
		.horizontal-section #item4.horizontal-item .act-recycle .text-block {
				font-size: 1rem;
		}
		.horizontal-item .list-style-line li {
				font-size: 1rem;
				line-height: 1.75;
		}
		.video-content {
				padding: 12rem 0 3rem 0;
		}
		.video-content {
				padding: 13rem 0 0 0;
		}
		.horizontal-sticky {
				padding-bottom: 6rem;
		}
		.mouse.finger-mode {
				width: 50px;
				height: 50px;
		}
		.finger-in .finger-line img, .finger-in .finger img {
				width: 50px;
				height: 50px;
		}
		.mouse {
				width: 60px;
				height: 30px;
		}
		.mouse-in {
				width: 25px;
				height: 35px;
				margin: 0 auto;
		}
		.wave-container {
				height: 40px;
		}
		.object-f {
				max-width: 3.5vw;
				right: 22%;
				bottom: 11rem;
		}
		.intro-logo {
				max-width: 30vw;
				bottom: 22%;
		}
		.loader-percentage {
				font-size: 1.25rem;
		}
		.home-section .home-text {
				font-size: 1.5rem;
		}
		.home-ad .text-h {
				max-width: 90px;
		}
		.home-ad {
				-webkit-transform: scale(.8);
				-ms-transform: scale(.8);
				transform: scale(.8);
				-webkit-transform-origin: right bottom;
				-ms-transform-origin: right bottom;
				transform-origin: right bottom;
				padding-left: 0;
				right: -8px;
		}
		.home-ad .text-v {
				top: 52px;
				left: 22px;
		}
		.brand-head .nav a {
				font-size: 1.35rem;
		}
		#videoModal .btn-close, .detailmodl .modal-header .btn-close, .livestream-close {
				width: 40px;
				height: 40px;
				right: 2rem;
				top: 2rem;
		}
		.about-content, .album-content {
				padding-top: 8rem;
		}
		.album-content {
				padding-left: 0 !important;
				padding-right: 0 !important;
		}
		.area-title {
				font-size: 1.35rem;
				max-width: 20vw;
		}
		.about-content #about-subtitle {
				padding-right: 0;
		}
		.about-content, .album-content {
				font-size: .85rem;
		}
		.about-photo {
				aspect-ratio: 6 / 7;
		}
		.horizontal-section .sidebar {
				width: 250px;
				font-size: 1.25rem;
		}
		.horizontal-section .sidebar .list-group-item, .horizontal-section .sidebar .list-group-item.active {
				padding: .75rem 0;
		}
		.horizontal-section .sidebar .list-group {
				min-height: 400px;
		}
		.horizontal-item .list-group-item a.active {
				padding: 0 19vw 0 0;
		}
		.horizontal-item-base {
				width: 100%;
				padding-left: 250px;
		}
		.horizontal-item .info-block {}
		.horizontal-item .list-group-item a + .photo {
				max-width: 18vw;
		}
		.horizontal-item .list-group-item .info {
				font-size: 1rem;
		}
		.horizontal-item .list-group-item .detail {
				font-size: .875rem;
		}
		.contact-list {
				padding: 15rem 2rem 3rem 0;
		}
		.contact-list .item {
				padding: 1rem 0;
				border-bottom: 1px solid #767676;
		}
		.contact-list .head {
				font-size: 1rem;
		}
		.contact-list {
				line-height: 1.5;
				font-size: .875rem;
		}
		.contact-list small {
				font-size: .75rem;
		}
		footer .bot-brand {
				max-width: 15vw;
		}
		footer .share-list .item a {
				max-width: 35px;
		}
}
@media (max-width: 991px) {
		.about-content {
				padding-top: 0;
		}
		.album-content {
				padding-top: 12rem;
		}
		.video-content {
				padding-top: 3rem;
		}
		.video_mode {
				min-height: inherit;
				width: 100%;
				height: 100%;
		}
		.wave-container {
				height: 30px;
		}
		.area-title .text {
				padding-left: 0;
				bottom: 0;
		}
		.intro-logo {
				max-width: 40vw;
				bottom: 22%;
		}
		.center-objects {
				width: 700px;
				height: 700px;
		}
		.object-g, .object-h {
				max-width: 65vw;
		}
		.object-e {
				max-width: 23vw;
				bottom: 14rem;
		}
		.object-f {
				max-width: 5vw;
				right: 28%;
				bottom: 10rem;
		}
		.object-c {
				left: 10%;
				max-width: 15vw;
		}
		.object-d {
				bottom: 20%;
				right: 15%;
				max-width: 12vw;
		}
		.object-b {
				top: 25%;
				left: 15%;
				max-width: 10vw;
		}
		.object-a {
				top: 25%;
				right: 15%;
				max-width: 10vw;
		}
		.area-title {
				font-size: 1.25rem;
				max-width: 25vw;
		}
		.about-photo {
				aspect-ratio: 21 / 9;
				margin-bottom: 2rem;
				margin-top: 4rem;
		}
		.about-content, .album-content {
				font-size: .8125rem;
		}
		.horizontal-section .sidebar, .horizontal-container {
				padding-top: 14rem;
		}
		.horizontal-section .sidebar {
				width: 200px;
				font-size: 1.125rem;
		}
		.horizontal-item .list-group-item {
				font-size: 1rem;
		}
		.horizontal-item-base {
				padding-left: 200px;
				padding-right: 2rem;
		}
		.horizontal-item .info-block {
				max-width: 100%;
		}
		.contact-list .head {
				font-size: 1.125rem;
				padding: 0 4rem;
		}
		.contact-list {
				padding: 14rem 4rem 3rem 1rem;
		}
		.map-frame {
				height: 400px;
		}
		.horizontal-sticky {
				min-height: 100vh !important;
				padding-bottom: 0;
		}
		.horizontal-item .list-group-item a.active {
				padding: 0 20vw 0 0;
				font-size: .875rem;
		}
		.history-sticky, .history-section {
				min-height: 660px !important;
				height: 660px !important;
		}
		.video-sticky, .video-section {
				min-height: 660px !important;
				height: 660px !important;
		}
		.horizontal-container {
				-webkit-box-align: start !important;
				-ms-flex-align: start !important;
				align-items: flex-start !important;
		}
}
@media only screen and (max-width:991px) and (orientation: landscape) {
		.horizontal-section #item4.horizontal-item .act-recycle .text-block {
				font-size: 1rem;
		}
		.about-content #about-subtitle {
				font-size: 1rem;
		}
		footer .bot-brand {
				max-width: 15vw;
		}
		.album-sticky, .album-section {
				min-height: 200vh !important;
				height: 200vh !important;
		}
		.video-sticky, .video-section {
				min-height: 120vh !important;
				height: 120vh !important;
		}
		.horizontal-section .sidebar, .horizontal-container {
				padding-top: 10rem;
		}
		.horizontal-item .info-block {
				padding-top: 0;
		}
		.horizontal-sticky, .horizontal-section {}
		.horizontal-section .sidebar .list-group {
				min-height: 500px;
				padding-top: 0;
		}
		.horizontal-section .sidebar .list-group-item, .horizontal-section .sidebar .list-group-item.active {
				padding: .5rem 0;
		}
		.horizontal-section .sidebar {
				width: 200px;
				font-size: 1.125rem;
		}
		.horizontal-item .list-group-item {}
		.horizontal-item .list-group-item, .horizontal-item .text-block, .horizontal-item .list-style-line li {
				font-size: .875rem;
		}
		.horizontal-item .info-block.act-map {
				max-width: 100%;
				padding: 0;
		}
		.intro-logo {
				max-width: 35vw;
				bottom: 22%;
		}
		.center-objects {
				width: 40vw;
				height: 40vh;
				top: 60%;
		}
		.object-e {
				max-width: 15vw;
				bottom: 17rem;
		}
		.object-c {
				left: 10%;
				max-width: 12vw;
		}
		.object-f {
				max-width: 2vw;
				right: 39%;
				bottom: 7rem;
		}
		.object-b {
				max-width: 8vw;
		}
		.object-a {
				max-width: 7.5vw;
		}
		.object-h, .object-g {
				bottom: 6rem;
		}
		.object-d {
				max-width: 10vw;
		}
		.mouse {
				margin: 1rem auto;
		}
		.mouse-in {
				width: 25px;
				height: 35px;
		}
		.loader-percentage {
				font-size: 1.125rem;
		}
		.brand-head .nav a {
				font-size: 1rem;
				padding: .25rem;
		}
		.home-section .home-text {
				font-size: 1.125rem;
				line-height: 1.5;
		}
		.area-title {
				font-size: 1.125rem;
				max-width: 20vw;
		}
		.area-title .text {
				padding-left: 1rem;
		}
		.about-content > .row {
				padding-top: 0;
		}
		.about-sticky {}
		.about-photo {
				margin-top: 2rem;
				margin-bottom: 2rem;
		}
		.contact-list .head {
				padding: 0 6rem;
		}
		.contact-list {
				padding: 10rem 1rem 3rem 1rem;
		}
}
@media (max-width: 767px) {
		.home-ad {
				right: -8px;
		}
		.video-slider .item {
				margin: 0 .5rem;
		}
		.video-slider .item {
				cursor: pointer;
				position: relative;
				margin: 0 .5rem;
		}
		.horizontal-section #item4.horizontal-item .act-recycle .text-block, .description, .about-content #about-subtitle, .horizontal-item .list-group-item .info {
				font-size: .95rem;
		}
		.album-content {
				padding: 8rem 3rem 3rem 3rem;
		}
		.loader-percentage {
				font-size: 1rem;
		}
		.contact-list {
				padding: 12rem 3rem 3rem 1rem;
		}
		.mouse {
				margin: 2rem auto .5rem auto;
		}
		.mouse-in {
				width: 20px;
				height: 30px;
				margin: 0 auto;
		}
		.mouse .roll {
				-webkit-animation: mouseScrollm 0.8s cubic-bezier(0.7, 0, 0.3, 1) infinite alternate;
				animation: mouseScrollm 0.8s cubic-bezier(0.7, 0, 0.3, 1) infinite alternate;
		}
		.mouse .rollshadow {
				-webkit-animation: mouseScrollm 0.8s cubic-bezier(0.7, 0, 0.3, 1) infinite alternate;
				animation: mouseScrollm 0.8s cubic-bezier(0.7, 0, 0.3, 1) infinite alternate;
		}
		.is-visible {
				margin-bottom: 2.5rem;
		}
		.home-section .home-text {
				font-size: 1rem;
		}
		.brand-head .nav a {
				font-size: 1rem;
				padding: .25rem;
		}
		#videoModal .btn-close, .detailmodl .modal-header .btn-close, .livestream-close {
				width: 30px;
				height: 30px;
				right: 1rem;
				top: 1rem;
		}
		.contact-list .head {
				padding: 0 3rem;
				font-size: 1rem;
		}
		.contact-list .info {
				font-size: .8125rem;
		}
		.map-frame {
				height: 300px;
				position: relative;
				bottom: -3px;
		}
		footer .bot-brand {
				max-width: 20vw;
		}
		footer {
				font-size: .8125rem;
		}
		footer .share-list .item a {
				max-width: 30px;
		}
		.horizontal-section .sidebar {
				width: 150px;
		}
		.horizontal-item-base {
				padding-left: 150px;
				padding-right: 2rem;
		}
		.mouse-scroll-hint {
				font-size: .8125rem;
				bottom: 0;
		}
		footer .container {
				max-width: 100%;
		}
}
@media (max-width: 576px) {
		.album-sticky, .album-section, .about-sticky, .about-section {
				min-height: 100vh !important;
				height: inherit !important;
		}
		.history-sticky, .history-section {
				min-height: 700px !important;
				height: 700px !important;
		}
		.contact-sticky, .album-sticky, .history-sticky, .about-sticky {
				position: relative !important;
		}
		/*.horizontal-sticky, .horizontal-section{
				min-height: 180vh !important;
        height: 180vh !important;
	}
	.horizontal-sticky{
		position: relative !important;
	}*/
		.is-visible.finger-in {
				top: -1rem;
		}
		.home-ad .text-h {
				max-width: 70%;
		}
		.home-ad.is-change:hover .text-h {
				-webkit-transform: translate(0, 0);
				-ms-transform: translate(0, 0);
				transform: translate(0, 0);
		}
		.home-ad {
				-webkit-transform: scale(.6);
				-ms-transform: scale(.6);
				transform: scale(.6);
				right: -8px;
		}
		.home-ad .is-time {
				left: 2px;
				width: 100%;
				height: 30%;
		}
		.mouse.finger-mode {
				width: 40px;
				height: 40px;
		}
		.finger-in .finger-line img, .finger-in .finger img {
				width: 40px;
				height: 40px;
		}
		.mouse {
				margin: 2rem auto 1rem auto;
		}
		.mouse-scroll-hint {
				font-size: .8125rem;
				bottom: 0;
		}
		.horizontal-sticky {
				padding-bottom: 0;
		}
		.marquee-item img {
				position: relative;
		}
		.pic_201902 img {
				-o-object-position: 35% center;
				object-position: 35% center;
		}
		.pic_201903 img {
				-o-object-position: 29% center;
				object-position: 29% center;
		}
		.pic_201905 img {
				-o-object-position: 10% center;
				object-position: 10% center;
		}
		.pic_201931 img {
				-o-object-position: 40% center;
				object-position: 40% center;
		}
		.pic_202006 img {
				-o-object-position: 60% center;
				object-position: 60% center;
		}
		.pic_202007 img {
				-o-object-position: 90% center;
				object-position: 90% center;
		}
		.pic_202010 img {
				-o-object-position: 60% center;
				object-position: 60% center;
		}
		.pic_202011 img {
				-o-object-position: 45% center;
				object-position: 45% center;
		}
		.pic_202302 img {
				-o-object-position: 47% center;
				object-position: 47% center;
		}
		.pic_202303 img {
				-o-object-position: 65% center;
				object-position: 65% center;
		}
		.pic_202304 img {
				-o-object-position: 40% center;
				object-position: 40% center;
		}
		.pic_202307 img {
				-o-object-position: 35% center;
				object-position: 35% center;
		}
		.pic_202308 img {
				-o-object-position: 70% center;
				object-position: 70% center;
		}
		.horizontal-item .list-style-line li::before {
				top: 0;
		}
		.horizontal-item .list-group-item {
				-webkit-box-orient: vertical !important;
				-webkit-box-direction: normal !important;
				-ms-flex-direction: column !important;
				flex-direction: column !important;
		}
		.wave-container {
				height: 20px;
		}
		.ripple-layer {
				display: none;
		}
		.intro-logo {
				max-width: 65vw;
				bottom: 22%;
		}
		.center-objects {
				width: 100%;
				height: 100%;
		}
		.object-a {
				top: 20%;
				right: 15%;
				max-width: 12vw;
		}
		.object-b {
				top: 18%;
				left: 15%;
				max-width: 10vw;
		}
		.object-f {
				max-width: 6vw;
				right: 35%;
				bottom: 9rem;
		}
		.object-e {
				max-width: 30vw;
				bottom: 12rem;
		}
		.object-g, .object-h {
				max-width: 85vw;
		}
		.object-c {
				left: 10%;
				max-width: 20vw;
				bottom: 25%;
		}
		.object-d {
				bottom: 30%;
				right: 10%;
				max-width: 18vw;
		}
		.brand-head .nav a {
				padding: .5rem;
				font-size: 1.125rem;
		}
		.area-title .text {
				padding-left: 0;
				bottom: 0;
		}
		.about-content > .row {
				padding-top: 0;
		}
		.about-photo {
				aspect-ratio: 16 / 9;
				margin-bottom: 1rem;
				margin-top: 0;
		}
		.about-content, .album-content {
				padding: 14rem 3rem 3rem 3rem;
		}
		.area-title {
				left: 50%;
				margin: auto;
				-webkit-transform: translateX(-50%);
				-ms-transform: translateX(-50%);
				transform: translateX(-50%);
				font-size: 1.35rem;
				max-width: 35vw;
				position: absolute !important;
		}
		.horizontal-section .sidebar {
				width: 100%;
				font-size: 1rem;
				-webkit-box-pack: start !important;
				-ms-flex-pack: start !important;
				justify-content: flex-start !important;
				padding-top: 12rem;
				height: auto;
				margin-bottom: 0 !important;
		}
		.horizontal-section .sidebar .list-group {
				min-height: inherit;
				-webkit-box-orient: horizontal;
				-webkit-box-direction: normal;
				-ms-flex-direction: row;
				flex-direction: row;
				padding-top: 0;
				width: 100%;
		}
		.horizontal-section.is-move.active .sidebar .list-group a {
				text-align: center;
		}
		.horizontal-item-base {
				padding-left: 1rem;
				padding-right: 1rem;
		}
		.horizontal-item .list-group-item .date {
				min-width: 100px;
		}
		.horizontal-container {
				padding-top: 16rem;
				height: auto !important;
		}
		.horizontal-item .list-group {
				padding-top: 0;
		}
		.horizontal-section #item4.horizontal-item .act-recycle .text-block {
				font-size: .95rem;
				padding: 1rem 0;
		}
		.horizontal-item .list-group-item {
				padding: 0;
				font-size: .85rem;
				position: relative;
		}
		.horizontal-item .list-group-item a.active {
				max-width: calc(100%);
				padding: 0;
		}
		.horizontal-item .list-group-item a + .photo {
				max-width: 24vw;
		}
		.horizontal-item .list-group-item a.active + .photo {
				width: 100%;
				max-width: 100%;
				position: relative;
				right: auto;
				left: 0;
				margin: 0;
				aspect-ratio: auto
		}
		.horizontal-item .list-group-item a, .horizontal-item .list-group-item a.active {
				-webkit-transition: all .3s ease;
				-o-transition: all .3s ease;
				transition: all .3s ease;
		}
		.horizontal-item .list-style-line li, .horizontal-item .text-block {
				font-size: .875rem;
				line-height: 1.5;
		}
		.horizontal-item .info-block.act-map {
				max-width: 100%;
		}
		.horizontal-sticky {
				height: 120vh;
		}
		.contact-list {
				padding: 9rem 2rem 3rem 1rem;
		}
		.contact-list .head {
				padding: 0 1.5rem;
		}
		.video-slider .slick-dots {
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0);
		}
		.video-section.is-move.active .video-slider {
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0);
		}
		.video-slider .slick-prev {
				left: .5rem;
		}
		.video-slider .slick-next {
				right: .5rem;
		}
		.video-slider .slick-prev, .video-slider .slick-next {
				width: 40px;
				height: 40px;
		}
		footer .bot-brand {
				max-width: 35vw;
		}
		footer {
				font-size: .8125rem;
		}
		footer .share-list .item a {
				max-width: 30px;
		}
		footer .container {
				padding: 2rem 2rem 0 2rem;
		}
		.horizontal-section, .horizontal-sticky {
				/*min-height: 200vh !important;
		height: 200vh !important;*/
		}
		.history-sticky, .history-section {
				/*min-height: 660px !important;
				height: 660px !important;*/
		}
		.album-content {
				padding: 0 3rem 3rem 3rem;
		}
		.album-sticky, .album-section {
				min-height: 100vh !important;
				height: 100vh !important;
		}
		.video-content {
				padding-top: 3rem;
		}
		.video-sticky, .video-section {
				min-height: 70vh !important;
				height: 70vh !important;
		}
		.album-section .start-left, .album-section .start-right {
				overflow: visible;
		}
}
@media only screen and (max-width:568px) and (orientation: landscape) {
		footer .bot-brand {
				max-width: 25vw;
		}
		.album-content {
				padding: 6rem 3rem 3rem 3rem;
		}
		.contact-list {
				padding: 12rem 2rem 3rem 1rem;
		}
		.album-sticky, .album-section {
				min-height: 320vh !important;
				height: 320vh !important;
		}
		.video-sticky, .video-section {
				min-height: 220vh !important;
				height: 220vh !important;
		}
		.history-sticky, .history-section {
				min-height: 200vh !important;
				height: 200vh !important;
		}
		.center-line {
				top: 75%;
		}
		.video_mode {
				min-height: inherit;
				width: 100%;
		}
		.horizontal-sticky, .horizontal-section {
				height: 250vh !important;
		}
		.intro-logo {
				max-width: 40vw;
				bottom: 22%;
		}
		.object-e {
				max-width: 17vw;
				bottom: 8rem;
		}
		.object-g, .object-h {
				max-width: 45vw;
		}
		.object-c {
				left: 10%;
				max-width: 9vw;
				bottom: 20%;
		}
		.object-d {
				bottom: 25%;
				right: 10%;
				max-width: 8vw;
		}
		.object-a {
				top: 25%;
				right: 15%;
				max-width: 7vw;
		}
		.object-b {
				top: 25%;
				left: 15%;
				max-width: 6vw;
		}
		.object-f {
				max-width: 3vw;
				right: 18%;
				bottom: 7rem;
		}
		.mouse-in {
				width: 15px;
				height: 25px;
		}
		.mouse .roll {
				width: 3px;
				margin-left: -1.5px;
				height: 3px;
				-webkit-animation: mouseScrollsm 0.8s cubic-bezier(0.7, 0, 0.3, 1) infinite alternate;
				animation: mouseScrollsm 0.8s cubic-bezier(0.7, 0, 0.3, 1) infinite alternate;
		}
		.mouse .rollshadow {
				width: 3px;
				margin-left: -1.5px;
				height: 3px;
				-webkit-animation: mouseScrollsm 0.8s cubic-bezier(0.7, 0, 0.3, 1) infinite alternate;
				animation: mouseScrollsm 0.8s cubic-bezier(0.7, 0, 0.3, 1) infinite alternate;
		}
		.brand-head .nav a {
				padding: .125rem;
				font-size: .85rem;
		}
}
@media (max-width: 480px) {
		.contact-list {
				padding: 10rem 2rem 3rem 0;
		}
		.about-content, .album-content {
				padding: 12rem 3rem 3rem 3rem;
		}
		.video-content {
				padding-top: 6rem;
		}
}
@media (max-width: 320px) {
		.mouse.finger-mode {
				-webkit-transform: scale(.85);
				-ms-transform: scale(.85);
				transform: scale(.85);
		}
		.area-title {
				font-size: 1.125rem;
		}
		footer {
				font-size: .75rem;
		}
		footer .container {
				padding: 2rem 1rem 0 1rem;
		}
		.horizontal-section #item4.horizontal-item .act-recycle .text-block, .horizontal-item .list-group-item .detail, .description, .about-content #about-subtitle, .horizontal-item .list-group-item .info {
				font-size: .75rem;
		}
		.horizontal-section.is-move.active .sidebar .list-group a {
				font-size: .875rem;
		}
		.horizontal-item .list-group-item {
				font-size: .75rem;
		}
		.history-sticky, .history-section {
				min-height: 110vh !important;
				height: 110vh !important;
		}
		.horizontal-sticky, .horizontal-section {
				min-height: 90vh !important;
		}
}