@charset "utf-8";

/* 載入思源黑、明體 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&display=swap');

:root {
	--color-primary: #ca3d1d;
	--color-secondary: #fec200;
	--color-dark: #351400;
	--color-light: #f7edd2;
}

html {
	background: url("../images/section-b-bg-fixed.jpg") center bottom no-repeat fixed, var(--color-dark);
	scroll-behavior: smooth;
}

body {
	background-color: transparent !important;
}

.container {
	background: none;
}

@media screen and (max-width: 991px) {
	html {
		background: var(--color-dark);
	}

	html:before {
		content: "";
		position: fixed;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url("../images/section-b-bg-fixed.jpg")center no-repeat;
		background-size: cover;
	}

	.container {
		background: none;
	}
}


/* 針對架構工具調整 */
.blk_head,
.blk_body,
.blk_item {
	background-color: transparent !important;
	padding: 0;
}

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

	.blk_body,
	.blk_head {
		padding: 1vw 0;
	}

	.blk_pre .tips a {
		padding: calc(var(--bs-gutter-x) * 0.2);
	}

	.blk_bas .blk_body>* {
		margin-top: 1vw;
		margin-bottom: 1vw;
	}
}

/* 版身動畫 */
#Canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 999;
}

@media (max-width: 991px) {
	#Canvas {
		display: none !important;
	}
}


/*主視覺動畫*/
.kv-bg {
	width: 100%;
}

.kvitem {
	position: absolute;
}

.kv-deco1 {
	width: calc((154 / 1920)* 100%);
	top: calc((1174 / 1920) * 100%);
	left: calc((98 / 1920) * 100%);
	animation: anime-swing2 ease-in-out 3.5s infinite alternate;
	transform-origin: bottom;
}

.kv-deco2 {
	width: calc((120 / 1920)* 100%);
	top: calc((915 / 1920) * 100%);
	left: calc((192 / 1920) * 100%);
	animation: anime-swing2 ease-in-out 3.5s infinite alternate;
	transform-origin: bottom;
	animation-delay: -.4s;
}

.kv-deco3 {
	width: calc((128 / 1920)* 100%);
	top: calc((940 / 1920) * 100%);
	left: calc((1659 / 1920) * 100%);
	animation: anime-swing ease-in-out .6s infinite alternate;
}

.kv-deco4 {
	width: calc((173 / 1920)* 100%);
	top: calc((1300 / 1920) * 100%);
	left: calc((1576 / 1920) * 100%);
	animation: anime-swing ease-in-out .6s infinite alternate;
	animation-delay: -.6s;
}

.kv-frame {
	width: calc((1868 / 1920)* 100%);
	top: calc((86 / 1920) * 100%);
	left: calc((26 / 1920) * 100%);
}

.kv-tt-frame {
	width: calc((1361 / 1920)* 100%);
	top: calc((63 / 1920) * 100%);
	left: calc((279 / 1920) * 100%);
}

.kv-tt {
	width: calc((987 / 1920)* 100%);
	top: calc((524 / 1920) * 100%);
	left: calc((467 / 1920) * 100%);
	animation: flipInX 1.2s;
	animation-delay: .15s;
	animation-fill-mode: backwards;
}

.kv-dp {
	width: calc((708 / 1920)* 100%);
	top: calc((1253 / 1920) * 100%);
	left: calc((606 / 1920) * 100%);
}

.kv-dp .kv-perspective {
	-webkit-perspective: 1500px;
	perspective: 1500px;
}

.kv-dp img {
	width: 100%;
	-webkit-transform: rotateX(45deg);
	transform: rotateX(45deg);
	-webkit-transform-origin: center top;
	transform-origin: center top;
	-webkit-animation: anime1 2s -1s ease-in-out infinite alternate;
	animation: anime1 2s -1s ease-in-out infinite alternate;
}

@media screen and (max-width: 991px) {
	.kv_m {
		position: relative;
	}

	.kvm-tt {
		top: calc((0 / 991) * 100%);
		left: calc((0 / 991) * 100%);
		width: calc((991 / 991) * 100%);
	}

	.kv-dp {
		top: calc((660 / 991) * 100%);
		left: calc((85 / 991) * 100%);
		width: calc((822 / 991) * 100%);
	}
}

@-webkit-keyframes anime1 {
	0% {
		-webkit-transform: rotateX(20deg);
		transform: rotateX(20deg);
	}

	100% {
		-webkit-transform: rotateX(-25deg);
		transform: rotateX(-25deg);
	}
}

@keyframes anime1 {
	0% {
		-webkit-transform: rotateX(20deg);
		transform: rotateX(20deg);
	}

	100% {
		-webkit-transform: rotateX(-25deg);
		transform: rotateX(-25deg);
	}
}

@keyframes anime-swing {
	0% {
		transform: rotate(5deg);
	}

	100% {
		transform: rotate(-1deg);
	}
}

@keyframes anime-swing2 {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(5deg);
	}

	100% {
		transform: rotate(0deg);
	}
}


/* 區塊 */
.section-a {
	background: url("../images/section-a-side-deco.png")center 60px repeat-y, url("../images/bg.jpg");
	padding: 1px 0 80px;
	margin: -110px auto 0;
	max-width: 1920px;
}

.section-b {
	margin: 0 auto;
	padding: 1px 0 140px;
	background: url("../images/section-b-bg-bottom.png")bottom center no-repeat fixed,
		url("../images/section-b-side-scroll.png") center top repeat-y fixed,
		url("../images/section-b-side-deco.png") center top repeat-y;
}

.section-b::before {
	content: '';
	max-width: 1920px;
	margin: -130px auto 0px;
	background: url("../images/section-b-be.png")center top no-repeat;
	height: 111px;
	display: flex;
	top: 110px;
	position: relative;
	z-index: 1;
}

.blk-r {
	margin: 320px auto 0px;
	max-width: 1248px;
	background: url("../images/blk-bg-r.png") top center repeat-y;
	transform-style: preserve-3d;
}

.blk-r::before {
	content: '';
	width: 1248px;
	margin: 0 auto -320px;
	background: url("../images/blk-be-r.png")center top no-repeat;
	height: 127px;
	display: flex;
	top: -126px;
	right: 0px;
	position: relative;
	pointer-events: none;
	transform: translateZ(-1px);
}

.blk-r::after {
	content: '';
	width: 1248px;
	margin: -120px auto 0px;
	background: url("../images/blk-af-r.png")center top no-repeat;
	height: 85px;
	display: flex;
	top: 84px;
	right: 0px;
	position: relative;
	pointer-events: none;
	transform: translateZ(-1px);
}

.blk-or {
	margin: 320px auto 0px;
	max-width: 1248px;
	background: url("../images/blk-bg-or.png") top center repeat-y;
	transform-style: preserve-3d;
}

.blk-or::before {
	content: '';
	width: 1248px;
	margin: 0 auto -320px;
	background: url("../images/blk-be-or.png")center top no-repeat;
	height: 127px;
	display: flex;
	top: -126px;
	right: 0px;
	position: relative;
	pointer-events: none;
	transform: translateZ(-1px);
}

.blk-or::after {
	content: '';
	width: 1248px;
	margin: -120px auto 0px;
	background: url("../images/blk-af-or.png")center top no-repeat;
	height: 85px;
	display: flex;
	top: 84px;
	right: 0px;
	position: relative;
	pointer-events: none;
	transform: translateZ(-1px);
}

.blk-g {
	margin: 320px auto 0px;
	max-width: 1248px;
	background: url("../images/blk-bg-g.png") top center repeat-y;
	transform-style: preserve-3d;
}

.blk-g::before {
	content: '';
	width: 1248px;
	margin: 0 auto -320px;
	background: url("../images/blk-be-g.png")center top no-repeat;
	height: 127px;
	display: flex;
	top: -126px;
	right: 0px;
	position: relative;
	pointer-events: none;
	transform: translateZ(-1px);
}

.blk-g::after {
	content: '';
	width: 1248px;
	margin: -120px auto 0px;
	background: url("../images/blk-af-g.png")center top no-repeat;
	height: 85px;
	display: flex;
	top: 84px;
	right: 0px;
	position: relative;
	pointer-events: none;
	transform: translateZ(-1px);
}

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

	.section-a {
		background: url("../images/bg.jpg");
		background-size: 30%;
		padding: 1vw 0 6vw;
		margin: -10vw auto 0;
	}

	.section-b {
		margin: 0 auto;
		padding: 1vw 0 10vw;
		background: none;
	}

	.section-b::before {
		content: '';
		margin: -10vw auto -1vw;
		background: url("../images/section-b-be.png")center top no-repeat;
		background-size: 230vw;
		height: 10vw;
		display: flex;
		top: 8vw;
		position: relative;
	}

	.blk-r {
		margin: 32vw auto 0;
		background: url("../images/blk-bg-r.png") top center repeat-y;
		background-size: 100vw;
		transform-style: preserve-3d;
	}

	.blk-r::before {
		content: '';
		width: 100%;
		display: flex;
		margin: 0 auto -31vw;
		background: url("../images/blk-be-r.png")center top no-repeat;
		background-size: 100vw;
		height: 10vw;
		top: -9.5vw;
		position: relative;
		pointer-events: none;
		transform: translateZ(-1px);
	}

	.blk-r::after {
		content: '';
		width: 100%;
		display: flex;
		margin: -10vw auto 0;
		background: url("../images/blk-af-r.png") center top no-repeat;
		background-size: 100vw;
		height: 8vw;
		top: 7.5vw;
		position: relative;
		pointer-events: none;
		transform: translateZ(-1px);
	}

	.blk-or {
		margin: 32vw auto 0;
		background: url("../images/blk-bg-or.png") top center repeat-y;
		background-size: 100vw;
		transform-style: preserve-3d;
	}

	.blk-or::before {
		content: '';
		width: 100%;
		display: flex;
		margin: 0 auto -31vw;
		background: url("../images/blk-be-or.png")center top no-repeat;
		background-size: 100vw;
		height: 10vw;
		top: -9.5vw;
		position: relative;
		pointer-events: none;
		transform: translateZ(-1px);
	}

	.blk-or::after {
		content: '';
		width: 100%;
		display: flex;
		margin: -10vw auto 0;
		background: url("../images/blk-af-or.png") center top no-repeat;
		background-size: 100vw;
		height: 8vw;
		top: 7.5vw;
		position: relative;
		pointer-events: none;
		transform: translateZ(-1px);
	}

	.blk-g {
		margin: 32vw auto 0;
		background: url("../images/blk-bg-g.png") top center repeat-y;
		background-size: 100vw;
		transform-style: preserve-3d;
	}

	.blk-g::before {
		content: '';
		width: 100%;
		display: flex;
		margin: 0 auto -31vw;
		background: url("../images/blk-be-g.png")center top no-repeat;
		background-size: 100vw;
		height: 10vw;
		top: -9.5vw;
		position: relative;
		pointer-events: none;
		transform: translateZ(-1px);
	}

	.blk-g::after {
		content: '';
		width: 100%;
		display: flex;
		margin: -10vw auto 0;
		background: url("../images/blk-af-g.png") center top no-repeat;
		background-size: 100vw;
		height: 8vw;
		top: 7.5vw;
		position: relative;
		pointer-events: none;
		transform: translateZ(-1px);
	}

	.section-b .blk-r::after,
	.section-b .blk-or::after,
	.section-b .blk-g::after {
		margin: -14vw auto 0;
	}
}


/*文字標題*/
h2,
h3,
.menustyle2 a,
.special_5p_1 .stt-sp h3,
.ribbon,
.swiper_3p .swiper-slide h4,
.swiper_5p .swiper-slide .swp-text p,
.swiper_5p .swiper-slide .swp-text p .swp-text-highlight {
	font-family: 'Noto Sans TC';
}

big {
	color: var(--color-primary);
}

.blk_head {
	margin-bottom: -30px;
}

.btt {
	width: fit-content;
	height: 97px;
	position: relative;
	margin: 0px auto 60px;
	padding: 15px 20px 0;
	text-align: center;
	background: url("../images/btt-bg.png");
	background-position: top center;
	background-repeat: repeat-x;
	background-size: contain;
	color: var(--color-dark);
	font-size: 3.45rem;
	font-weight: 900;
	letter-spacing: 2px;
}

.btt span {
	color: var(--color-primary);
}

.btt::before {
	display: block;
	width: 100%;
	height: 97px;
	position: absolute;
	top: 0;
	left: 1px;
	background-image: url("../images/btt-be.png");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	content: "";
}

.btt::after {
	display: block;
	width: 100%;
	height: 97px;
	position: absolute;
	top: 0;
	right: 1px;
	background-image: url("../images/btt-af.png");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	content: "";
}

.stt {
	width: fit-content;
	height: 64px;
	position: relative;
	margin: 20px auto 10px;
	padding: 8px 16px 0;
	text-align: center;
	background: url("../images/stt-bg.png");
	background-position: top center;
	background-repeat: repeat-x;
	background-size: contain;
	color: var(--color-light);
	font-size: 2.2rem;
	font-weight: 900;
	letter-spacing: 2px;
}

.stt::before {
	display: block;
	width: 100%;
	height: 64px;
	position: absolute;
	top: 0;
	left: 1px;
	background-image: url("../images/stt-be.png");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	content: "";
}

.stt::after {
	display: block;
	width: 100%;
	height: 64px;
	position: absolute;
	top: 0;
	right: 1px;
	background-image: url("../images/stt-af.png");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	content: "";
}

.half ul h3 {
	width: 300px;
	position: relative;
	margin: 10px auto;
	padding: 0 16px 4px;
	text-align: center;
	color: var(--color-light);
	font-size: 2.2rem;
	font-weight: 900;
	letter-spacing: 2px;
}

.half ul h3::before {
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url("../images/stt-deco.png");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-transform: translateX(0%) rotate(180deg);
	transform: translateX(0%) rotate(180deg);
	content: "";
}

.half ul h3::after {
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
	top: 0;
	right: 0;
	background-image: url("../images/stt-deco.png");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
	content: "";
}

.notice {
	color: var(--color-light);
	letter-spacing: 0.5px;
	padding-bottom: 0;
}

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

	.blk_head {
		margin-bottom: -5vw;
	}

	.btt {
		height: 13vw;
		margin: 0 auto 6vw;
		padding: 2vw 4vw 0;
		font-size: 2rem;
		letter-spacing: 0;
	}

	.btt::before {
		height: 13vw;
	}

	.btt::after {
		height: 13vw;
	}

	.stt {
		height: 11vw;
		margin: 2vw auto;
		padding: 1.8vw 2vw 0;
		font-size: 1.5rem;
	}

	.blk_item_head .stt {
		margin: 0 auto;
	}

	.stt::before {
		height: 11vw;
		background-image: url("../images/stt-be-m.png");
	}

	.stt::after {
		height: 11vw;
		background-image: url("../images/stt-af-m.png");
	}

	.half ul h3 {
		width: 42vw;
		margin: -.5vw auto 2vw;
		padding: 0;
		font-size: 1.5rem;
	}

	.half ul h3::before {
		width: 6vw;
		height: 6vw;
		top: 10%;
	}

	.half ul h3::after {
		width: 6vw;
		height: 6vw;
		top: 10%;
	}

	.notice {
		padding: .5em 2rem;
	}
}


/*攻略區A*/
.link-a ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 auto;
}

.link-a img {
	margin: 5px;
}

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

	.link-a ul {
		width: 96%;
		margin: 0 auto;
	}

	.link-a ul li img {
		width: 90vw;
		margin: .8vw;
	}
}


/*攻略區驚喜任你抓*/
.link-surprise888 ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 auto;
}

.link-surprise888 img {
	margin: 5px;
}

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

	.link-surprise888 ul {
		width: 96%;
		margin: 0 auto;
	}

	.link-surprise888 ul li img {
		width: 90vw;
		margin: .8vw;
	}
}


/*攻略區BOOK*/
.link-book ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.link-book .tip-flex-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
}

.link-book img {
	margin: 5px;
}

.link-book .tip-flex-wrap img:nth-child(1) {
	margin: 0 -1px 0 0;
}

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

	.link-book ul {
		width: 96%;
		margin: 2vw auto 0;
		padding: 0 1vw;
	}

	.link-book img {
		width: 30vw;
		margin: 0 .6vw;
	}

	.link-book .for_m img {
		width: 100%;
		padding: 0 1vw;
	}

	.link-book .for_m img:nth-child(1) {
		margin: 0;
	}
}


/*攻略區B*/
.link-b-tip {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	width: 1150px;
	margin: 0 auto;
}

.link-b .tip-flex-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.link-b img {
	margin: 6px;
}

.link-b img.for_pc {
	border-radius: 15px;
}

@media screen and (max-width: 991px) {
	.link-b-tip {
		flex-wrap: wrap;
		width: 96%;
		margin: 1vw auto 0;
		padding: .5vw;
	}

	.link-b .tip-flex-wrap {
		width: 100%;
	}

	.link-b img {
		width: 98%;
		margin: .8vw;
	}

	.tip-flex-wrap li img {
		width: 45.8vw;
		margin: .8vw;
	}
}


/*元件調整*/
.section-a .banner {
	margin: 130px auto 0;
}

.half ul {
	padding: 0;
}

.hightlight .font h4,
.hightlight_5p .font h4,
.toptitle .font h4,
.various .font h4,
.collect_5x6 .special,
.collect_5x6 .s-row h4,
.special_5p_1 .hightlight_5p ul li h4 {
	background: url("../images/bg-color1.jpg");
}

.ribbon {
	color: var(--color-dark);
	background: var(--color-secondary);
	font-weight: 700;
}

.ribbon:before {
	border-bottom: solid 6px var(--color-dark);
}

.ribbon:after {
	border-left: 25px solid var(--color-secondary);
	border-right: 25px solid var(--color-secondary);
}

.box-mix ul.quotes .font h4,
.box-mix ul.quotes .font p,
.alternate ul:nth-child(odd) li:first-child .font h4,
.alternate ul:nth-child(even) li:last-child .font h4,
.alternate .font p,
.alternate ul:nth-child(odd) li:first-child .font .price,
.alternate ul:nth-child(even) li:last-child .font .price {
	color: var(--color-dark);
}

.rectangle_3p .font h4,
.alternate .font h4,
.alternate ul:nth-child(odd) li:first-child .font .price big,
.alternate ul:nth-child(even) li:last-child .font .price big,
.box-mix ul.quotes .font .price big {
	color: var(--color-primary);
}

.recommend_2p li {
	background: var(--color-light);
}

.rectangle_3p_370a_img h3 {
	bottom: 0px;
	background: url("../images/bg-color2.jpg");
}

.box-mix ul.quotes li,
.alternate ul:nth-child(odd) li:first-child,
.alternate ul:nth-child(even) li:last-child {
	background: url("../images/bg-color3.jpg");
}

.special_5p_1 .hightlight_5p {
	width: 1200px;
	background: url("../images/h5psp-bg.png")top center no-repeat;
}

.special_5p_1 .stt-sp h3 {
	padding: 18px 0 0 256px;
	color: var(--color-light);
	font-size: 2.2rem;
	font-weight: 900;
}

.rectangle_2 .crosswise-li {
	width: 100%;
	margin: 5px;
}

.crosswise-2-3-3 {
	background: url("../images/crosswise-bg.png")top center no-repeat;
}

.hightlight_5p img {
	object-fit: contain;
}

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

	.section-a .banner {
		margin: 10vw auto 0;
	}

	.banner {
		padding: 0 3vw;
	}

	.half ul {
		margin: 1vw;
	}

	.ribbon:after {
		border-left: 6vw solid var(--color-secondary);
		border-right: 6vw solid var(--color-secondary);
	}

	.special_5p_1 .hightlight_5p {
		width: 97%;
		background: none;
	}

	.special_5p_1 .stt-sp h3 {
		padding: 0;
		color: var(--color-light);
		font-size: 1.5rem;
	}

	.hightlight_5p ul li:first-child .font h4 {
		color: var(--color-primary);
	}

	.special_5p_1 .stt-sp h3:before {
		display: inline-block;
		width: 6vw;
		height: 6vw;
		margin-right: 1.5vw;
		margin-bottom: -1vw;
		background-image: url("../images/stt-deco.png");
		background-size: contain;
		-webkit-transform: rotateY(180deg);
		transform: rotateY(180deg);
		content: "";
	}

	.special_5p_1 .stt-sp h3:after {
		display: inline-block;
		width: 6vw;
		height: 6vw;
		margin-left: 1.5vw;
		margin-bottom: -1vw;
		background-image: url("../images/stt-deco.png");
		background-size: contain;
		content: "";
	}

	.rectangle_2 .crosswise-li {
		width: 95%;
		margin: 1vw;
		border-radius: 0 0 50px;
	}

	.rectangle_2 ul:nth-child(1) .crosswise-li,
	.rectangle_2 ul:nth-child(1) .crosswise-li img {
		border-radius: 50px 0 0;
	}

	.box-mix ul.quotes li {
		width: 98%;
		margin: 0 auto;
	}

	.broadwise li {
		width: 57vw;
	}

	.crosswise-2-3-3 {
		background: none;
	}
}


/*---- swiper輪播統一設定 ----*/
.swiper {
	max-width: 1180px;
	width: 100%;
	margin: 20px auto 0;
}

.swiper-button-next,
.swiper-button-prev {
	height: 30px;
	top: var(--swiper-navigation-top-offset, 50%)
}

:root {
	--swiper-navigation-size: 50px !important;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
	opacity: 1;
	pointer-events: unset;
}

.swiper-button-next:after,
.swiper-button-prev:after {
	content: "";
	background-image: url(../images/arrow.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30% auto;
	display: block;
	border-radius: 100%;
	width: 30px !important;
	height: 30px !important;
	background-color: var(--color-dark);
	opacity: 1;
	font-size: 0px !important;
	font-family: serif !important;
}

.swiper-button-next:after {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
	left: 0;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
	right: 0;
}

@media screen and (max-width: 991px) {
	.swiper {
		width: 96%;
		margin: 2vw auto 1vw;
	}

	.swiper-button-next:after,
	.swiper-button-prev:after {
		width: 7vw !important;
		height: 7vw !important;
	}
}


/* 精選活動輪播 */
.swiper_3p {
	overflow: hidden;
}

.swiper_3p .swiper-slide h4 {
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--color-light);
	text-align: center;
	margin: 10px auto 0;
}

.swiper_3p .swiper-slide img {
	width: 100%;
	border-radius: 15px;
}

@media screen and (max-width: 991px) {
	.swiper_3p {
		padding: 0 5vw;
	}

	.swiper_3p .swiper-slide h4 {
		margin: 2vw auto 0;
	}
}


/*館別好康輪播*/
.swiper_5p {
	overflow: hidden;
	padding-top: 20px;
}

.swiper_5p .swiper-slide {
	width: 100%;
	background: var(--color-primary);
	border-radius: 15px;
	border: 2px solid var(--color-primary);
	position: relative;
}

.swiper_5p .swiper-slide .swp-type {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 8px 20px;
	margin: 0 auto;
	border-radius: 99rem;
	color: #fff;
	background: var(--color-primary);
	border: 2px solid var(--color-light);
	font-weight: 500;
	font-size: 1.3rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.swiper_5p .swiper-slide .swp-text {
	padding: 8px;
	text-align: center;
}

.swiper_5p .swiper-slide .swp-text p {
	color: #fff;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.5;
}

.swiper_5p .swiper-slide .swp-text p .swp-text-highlight {
	color: var(--color-secondary);
	font-size: 1.5rem;
	font-weight: 500;
}

.swiper_5p .swiper-slide img {
	width: 100%;
	height: 212px;
	background-color: #fff;
	border-radius: 13px 13px 0 0;
	object-fit: contain;
}

@media screen and (max-width: 991px) {
	.swiper_5p {
		padding: 6vw 2vw 0;
	}

	.swiper_5p .swiper-slide {
		width: 44vw;
		padding: 0;
		margin: 0;
	}

	.swiper_5p .swiper-slide .swp-type {
		padding: 1.5vw 4vw;
	}

	.swiper_5p .swiper-slide .swp-text {
		padding: 2vw;
	}

	.swiper_5p .swiper-slide img {
		height: 44vw;
	}
}


/**--  menu  --**/
.menustyle2 {
	width: 130px;
	border-radius: 99rem;
	border: 2px solid var(--color-dark);
	background: url("../images/bg-color1.jpg");
}

.menustyle2 .nav>* {
	border-bottom: none;
}

.menustyle2 ul {
	padding: 36px 0;
}

.menustyle2 a {
	font-weight: 700;
}

.menustyle2 .nav-link {
	color: var(--color-light);
}

.menustyle2 .nav-link:hover,
.menustyle2 .nav-link.active {
	color: var(--color-dark);
	background: url("../images/bg-color3.jpg");
}

@media screen and (max-width: 991px) {
	.menustyle2 {
		width: 100%;
		padding: 1.5vw 1vw;
		border-radius: 0;
		border: 0px solid var(--color-dark);
		border-bottom: 2px solid var(--color-dark);
	}

	.menustyle2 .nav>* {
		border-right: none;
	}

	.menustyle2 ul {
		padding: 0;
	}

	.menustyle2 .nav-pills .nav-link {
		border-radius: 99rem;
	}

	.menustyle2 a {
		padding: 0.5rem 1rem;
		font-size: 1rem;
	}

}


/*--  錨點微調
.target-fix {
	display: block;
	position: relative;
	top: 0px;
	height: 0;
	overflow: hidden;
}

@media screen and (max-width: 991px) {
	.target-fix {
		top: -10vw;
	}
}--*/