@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 {
	--color1: #c1384a;
	--color2: #faa099;
	--color3: #604e3a;
	--color4: #b59667;
}

html {
	background: url("../images/bg-scroll.jpg") top center repeat;
	scroll-behavior: smooth;
}

body {
	background-color: transparent !important;
}

.container {
	background: url("../images/bg-fixed.png") top center no-repeat fixed;
}

@media screen and (max-width: 991px) {
	html {
		background-size: 250%;
	}

	.container {
		background: none;
	}
}


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

.kvitem {
	position: absolute;
}

.kv-tt {
	width: calc((538 / 1920)* 100%);
	top: calc((97 / 1920) * 100%);
	left: calc((381 / 1920) * 100%);
	animation: fadeInDown 1.8s;
	animation-delay: .1s;
	animation-fill-mode: backwards;
}

.kv-p {
	width: calc((569 / 1920)* 100%);
	top: calc((1374 / 1920) * 100%);
	left: calc((375 / 1920) * 100%);
	animation: flipInX 1.5s;
	animation-delay: 1.8s;
	animation-fill-mode: backwards;
}

.kv-date {
	width: calc((90 / 1920)* 100%);
	top: calc((296 / 1920) * 100%);
	left: calc((847 / 1920) * 100%);
	animation: fadeInDown 1.8s;
	animation-delay: .8s;
	animation-fill-mode: backwards;
}

.kv-goods {
	width: calc((712 / 1920)* 100%);
	top: calc((328 / 1920) * 100%);
	left: calc((899 / 1920) * 100%);
	animation-name: float_A;
	animation-timing-function: ease-in-out;
	animation-duration: 2s;
	animation-delay: -1s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}

.kv-text {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	animation-name: float_A;
	animation-timing-function: ease-in-out;
	animation-duration: 2s;
	animation-delay: 1.8s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}

@keyframes float_A {
	0% {
		transform: translateY(0%);
	}

	100% {
		transform: translateY(3%);
	}
}


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

@media screen and (max-width: 991px) {
	.blk_pre .tips a {
		padding: calc(var(--bs-gutter-x) * 0.2);
	}

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


/* 區塊 */
.block0 {
	padding: 10px 0 0;
	margin: 0 auto 80px;
	background: url("../images/bg-color1.jpg");
	transform-style: preserve-3d;
}

.block0::after {
	display: flex;
	max-width: 1920px;
	height: 110px;
	position: relative;
	top: 109px;
	margin: -118px auto 0;
	background: url("../images/blk0-af.png")center top no-repeat;
	pointer-events: none;
	transform: translateZ(-1px);
	content: '';
}

.blk_bas {
	position: relative;
	max-width: 1230px;
	margin: 120px auto 0px;
	padding: 0 0 20px;
	border-radius: 30px;
	background: url("../images/bg-color3.jpg");
}

.blk_bas::before {
	content: '';
	position: absolute;
	inset: 14px;
	border: 3px solid var(--color4);
	border-radius: 20px;
	pointer-events: none;
}

.blk_bas::after {
	display: flex;
	width: 100%;
	height: 50px;
	position: relative;
	top: 2px;
	right: 0px;
	margin: 0 auto;
	background: url("../images/deco.png")center top no-repeat;
	background-size: contain;
	pointer-events: none;
	content: '';
}

.block_other.blk_bas {
	margin: 60px auto 0;
	padding: 0 0 50px;
	background: none;
}

.block_other.blk_bas::before,
.block_other.blk_bas::after {
	display: none;
}

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

	.block0 {
		margin: 0 auto 6vw;
		padding: 1vw 0 0;
		background-size: 15%;
	}

	.block0::after {
		display: flex;
		height: 10vw;
		position: relative;
		top: 9.5vw;
		margin: -10vw auto 0;
		background: url("../images/blk0-af.png") center top no-repeat;
		background-size: 150%;
		content: '';
	}

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

	}

	.blk_bas {
		margin: 15vw 1vw 0vw;
		padding: 0 0 2vw;
		border-radius: 20px;
		background-size: 15%;
	}

	.blk_bas::before {
		content: '';
		position: absolute;
		inset: 4px;
		border: 2px solid var(--color4);
		border-radius: 16px;
		pointer-events: none;
	}

	.blk_bas::after {
		display: flex;
		width: 100%;
		height: 25px;
		position: relative;
		top: 0px;
		right: 0px;
		margin: 0 auto;
		background: url("../images/deco.png")center top no-repeat;
		background-size: contain;
		pointer-events: none;
		content: '';
	}

	.block_other.blk_bas {
		margin: 4vw auto 6vw;
		padding: 0;
	}
}


/*文字標題*/

h2,
h3,
.menustyle2 ul li a,
.btt,
.stt,
.hightlightAd-text li:nth-child(1) h4,
.hightlight3 .one-time ul.ot li:nth-child(2) p,
.hightlight3 .one-time ul.ot li:nth-child(2) big,
.hightlight3 .one-time ul.ot li:nth-child(3) span,
.hightlight3 .one-time ul.ot li:nth-child(6) p,
.go_btn a {
	font-family: 'Noto Serif TC', serif;
}

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

.btt {
	position: relative;
	width: 100%;
	height: 130px;
	margin: -62px auto 0px;
	padding: 28px 0 0;
	align-items: center;
	background: url("../images/btt-bg.png")top center no-repeat;
	color: #fff;
	font-size: 3.5rem;
	font-weight: 900;
	letter-spacing: 2px;
	z-index: 1;
}

.block0 .btt {
	margin: 0px auto 0px;
}

.notice {
	color: #fff;
	letter-spacing: 0.5px;
}

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

	.btt {
		height: 16vw;
		margin: -10vw auto 0;
		padding: 4vw 0 0;
		background-size: contain;
		font-size: 1.8rem;
		letter-spacing: 1px;
	}
}


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

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

.box-mix ul.quotes .font .price {
	color: #fff;
}

.alternate .font h4 {
	color: var(--color1);
}

.hightlightAd .font h4,
.hightlightAd-text li:nth-child(1) h4,
.special_5p_1 .hightlight_5p ul li h4,
.hightlight .font h4 {
	background: url("../images/bg-color4.jpg");
}

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

.special_5p_1 .stt-sp h3 {
	color: #fff;
}

.half ul {
	background: #bdb5aa4d;
}

.keywordC .round_5p img {
	border: 5px solid var(--color4);
}

.keywordC .round_5p .font {
	top: 90%;
	left: 50%;
    transform: translate(-50%, -50%);
	background: var(--color4);
	font-size: 1rem;
}

.slick5itam-2 h4 {
	color: var(--color3);
}

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

	.banner {
		padding: 0 3vw;
	}

	.half ul {
		margin: 1vw;
		padding: 1vw 0;
	}

	.keywordC {
		padding-bottom: 0;
	}

	.keywordC .round_5p .font {
		text-align: center;
	}

	.keywordC .round_5p li:nth-child(even) .font {
		text-align: center;
	}

	.block1 .slickbg {
		width: 95vw;
	}

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

	.special_5p_1 .stt-sp h3,
	.hightlight_5p ul li:first-child .font h4 {
		color: var(--color1);
	}

	.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-be.png");
		background-size: contain;
		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-af.png");
		background-size: contain;
		content: "";
	}
}


/*兩大品修正*/
.rectangle_3p.rectangle_2p ul {
	justify-content: space-evenly;
}

.rectangle_3p.rectangle_2p li {
	width: 500px;
	margin: 0 -40px 0;
	padding: 10px;
	background: transparent;
}

.rectangle_3p.rectangle_2p li img {
	width: 500px;
	height: auto;
}

.rectangle_3p.rectangle_2p li .font {
	width: 350px;
	margin-top: 20px;
	padding: 0 40px 10px;
	border: 4px solid var(--color2);
	border-radius: 10px;
	color: var(--color3);
	background: #fff;
	-moz-box-shadow: none;
	box-shadow: none;
}

.rectangle_3p.rectangle_2p li .font h4 {
	margin-top: -25px;
	padding: 12px 25px;
	color: var(--color1);
	background: var(--color2);
	font-size: 1.5rem;
	line-height: 1.2;
	clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
}

.rectangle_3p.rectangle_2p .font p {
	font-size: 1.2rem;
	line-height: 1.2;
}

.rectangle_3p.rectangle_2p li .font .price {
	margin: 3px auto 10px;
	color: var(--color3);
}

.rectangle_3p.rectangle_2p li .font .price big {
	color: var(--color1);
	font-size: 2rem;
}

@media screen and (max-width: 991px) {
	.rectangle_3p.rectangle_2p {
		margin: 2vw auto;
	}

	.rectangle_3p.rectangle_2p li,
	.rectangle_3p.rectangle_2p ul li:first-child {
		width: 100%;
		margin: 2vw auto;
		padding: 0;
		text-align: center;
		background: transparent;
	}

	.rectangle_3p.rectangle_2p li .font {
		width: 100vw;
		margin-top: 5vw;
		padding: 0 8vw 3vw;
		border-radius: 10px;
		background: #fff;
		-moz-box-shadow: none;
		box-shadow: none;
	}

	.rectangle_2p ul li:first-child .font {
		padding: 0 8vw 3vw !important;

	}

	.rectangle_3p.rectangle_2p li img,
	.rectangle_3p.rectangle_2p ul li:first-child img {
		width: 100%;
		height: 80vw;
	}

	.rectangle_3p.rectangle_2p ul li:nth-child(3n+1) a {
		flex-wrap: nowrap;
		flex-direction: column;
		justify-content: center;
	}

	.rectangle_3p.rectangle_2p li .font {
		width: 90vw;
	}
}


/*go_btn*/
.go_btn {
	margin: 30px auto;
}

.go_btn a {
	display: block;
	width: fit-content;
	height: auto;
	margin: 0 auto;
	padding: 0 30px;
	border: 2px solid var(--color3);
	border-radius: 999em;
	text-align: center;
	color: #fff;
	font-size: 2.5rem;
	font-weight: 900;
	line-height: 2;
	letter-spacing: 1px;
	background: var(--color1);
	box-shadow: 0 7px var(--color3);
	transition: .2s;
}

.go_btn a:hover {
	filter: brightness(70%);
	transform: translateY(4px);
	box-shadow: 0 2px var(--color3);
}

@media screen and (max-width: 991px) {
	.go_btn {
		margin: 3vw auto;
	}

	.go_btn a {
		padding: 0 5vw;
		font-size: 2rem;
		line-height: 4rem;
	}

	.go_btn a:hover {
		transform: translateY(3px);
	}
}


/*兩品大輪播修正*/
ul.scene-nobox {
	width: 570px;
	margin-top: -20px;
}

.hightlight3 .scene-nobox .sliderbg {
	height: 660px;
	background: url("../images/bg-color2.jpg");
}

.hightlight3 .one-time ul.ot li:nth-child(2),
.hightlight3 .one-time ul.ot li:nth-child(6) {
	background: #fff;
}

.hightlight3 .one-time ul.ot li:nth-child(2) p,
.hightlight3 .one-time ul.ot li:nth-child(2) big,
.hightlight3 .one-time ul.ot li:nth-child(3) span,
.hightlight3 .one-time ul.ot li:nth-child(6) p {
	color: var(--color1);
	font-weight: 900;
}

.hightlight3 .one-time ul.ot li:nth-child(4) span {
	background: var(--color1);
	font-size: 1.3rem;
}

.hightlight3 .one-time ul.ot li:nth-child(4) {
	width: fit-content;
}

.hightlight3 .one-time ul.ot li:nth-child(5) span {
	color: var(--color1);
}

.hightlight3.half {
	justify-content: flex-end;
}

@media screen and (max-width: 991px) {
	ul.scene-nobox {
		width: 100%;
		margin-top: 2vw;
	}

	.hightlight3 .scene-nobox .sliderbg {
		height: auto;
	}

	.hightlight3 .one-time ul.ot li:nth-child(2) {
		top: 2vw;
	}
}


/*輪播統一設定*/
.slick-dotted.slick-slider {
	margin-bottom: 0px !important;
}

@media screen and (max-width: 991px) {
	.slider {
		margin: 2vw auto !important;
	}

	.slick-dotted.slick-slider {
		padding-bottom: 2vw !important;
	}
}


/**--  menu  --**/
.menustyle2 {
	width: 110px;
	border-radius: 99rem;
	border: 1px solid #fff;
	background: var(--menu-color1);
}

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

.menustyle2 ul {
	padding: 25px 0;
}

.menustyle2 a {
	font-weight: 700;
}

@media screen and (max-width: 991px) {
	.menustyle2 {
		width: 100%;
		border-radius: 0;
		border: 0;
	}

	.menustyle2 ul {
		padding: 0;
	}
}