@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@900&display=swap');
@import url('./SweiSpringSugarCJKtc.css');


:root {
	--deep-orange: #D57355;
	--light-brown: #DED8CA;
	--brown: #80483B;
	--deep-brown: #5C4F47;
	--light: #FEF9F5;
	--light-grey: #F8F8F8;
	--light-yellow: #E9CFA6;
	--khaki: #B78E63;
	--black: #212529;
}

/* BS5修改預設 */
html,
body {
	overflow-x: hidden;
	margin: 0%;
}

html {
	height: 100%;
}

body {
	background-color: var(--light);
	color: var(--black);
	background-blend-mode: overlay;
	background-repeat: repeat;
	background-image: url(../../images/pattern.png);
	font-family: 'SweiSpringSugarCJKtc', 'Noto Serif TC', sans-serif;
	letter-spacing: 2px;
	position: relative !important;
}

/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
	width: 10px;
}

/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
	background: var(--deep-brown);
}

/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
	background: var(--light-brown);
}

/* 網頁捲軸【滑過時】把手的顏色 */
::-webkit-scrollbar-thumb:hover {
	background: var(--deep-orange);
}


/* navbar start */
.navbar {
	padding-top: 0;
	padding-bottom: 0;
}

.navbar-nav {
	align-items: center;
}

.navbar-brand span {
	font-family: 'SweiSpringSugarCJKtc', sans-serif !important;
	font-weight: 700 !important;
	color: var(--brown) !important;
}


.navbar-brand img {
	width: 120px;
	transition: all 0.3s ease-in-out;
}

@media screen and (min-width: 768px) {
	.navbar-brand img {
		width: 120px;
	}

	.navbar-brand {
		margin-right: 0;
		padding: 0 1em;
	}
}

.navbar-toggler.active {
	transform: rotate(-90deg);
}

.navbar-expand-md .navbar-nav .nav-link {
	padding-right: 4.3vw;
	padding-left: 4.3vw;
	font-family: 'SweiSpringSugarCJKtc', sans-serif !important;
	font-weight: 700 !important;
	color: var(--deep-orange) !important;
}

.navbar-expand-md .navbar-nav .nav-link:hover,
.navbar-expand-md .navbar-nav .nav-link:active,
.navbar-expand-md .navbar-nav .nav-link.active,
.navbar-expand-md .navbar-nav .show>.nav-link {
	color: var(--deep-brown) !important;
}

.one {
	display: block;
	position: relative;
	width: 21px;
	height: 2px;
	background: var(--brown);
	visibility: inherit;
	opacity: 1;
	transform: matrix(1, 0, 0, 1, 0, 0);
}

.two {
	display: block;
	position: relative;
	width: 21px;
	height: 2px;
	background: var(--brown);
	margin-top: 5px;
}

.tre {
	display: block;
	position: relative;
	width: 21px;
	height: 2px;
	background: var(--brown);
	margin-top: 5px;
	visibility: inherit;
	opacity: 1;
	transform: matrix(1, 0, 0, 1, 0, 0);
}


/* navbar end */


/* header start */
.header-banner {
	position: relative;
}

.header-banner img {
	height: 100%;
	max-height: 100vh;
	width: 100%;
	object-fit: cover;
	object-position: center center;
}

.header-box {
	position: relative;
}

.header-content-1st {
	position: absolute;
	z-index: 10;
	color: var(--light) !important;
	padding: 1vw;
	text-align: left;
	left: calc(50% - 35vw);
	bottom: calc(50% - 5.5vw);
	opacity: .7;
}

.header-content-2nd {
	position: absolute;
	z-index: 10;
	color: var(--light) !important;
	padding: 1vw;
	text-align: left;
	left: calc(50% - 40vw);
	bottom: calc(50% - 6vw);
	opacity: .7;
}

.header-title {
	font-family: 'Cormorant SC', 'Arial', 'SweiSpringSugarCJKtc', '黑體-繁', '微軟正黑體', sans-serif;
	margin-bottom: 0px;
	font-size: 2vw;
	text-transform: none;
	line-height: 1.5em;
	letter-spacing: 6px;
	font-weight: 400;
}

.header-subtitle {
	font-family: 'Limelight', 'Arial', 'SweiSpringSugarCJKtc', '黑體-繁', '微軟正黑體', sans-serif;
	margin-bottom: 0px;
	font-size: 0.5vw;
}


@media (max-width: 1199.9px) {
	.header-content-1st {
		left: calc(50% - 30vw);
		bottom: calc(50%);
	}

	.header-content-2nd {
		left: calc(50% - 40vw);
		bottom: calc(50% - 21vw)
	}

	.header-title {
		font-size: 3vw;
	}
}

@media (max-width: 768px) {
	.header-content-1st {
		left: calc(50% - 10vw);
		bottom: calc(50% - 3vw);
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;

	}

	.header-content-2nd {
		left: calc(50% - 10vw);
		bottom: calc(50% - 30vw);
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;

	}
}

@media (max-width: 540px) {
	.header-content-1st {
		left: calc(50% - 30vw);
		bottom: calc(50% + 3vw);
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;

	}

	.header-content-2nd {
		left: calc(50% - 40vw);
		bottom: calc(50% - 15vw);
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;

	}
}

@media (max-width: 300px) {
	.header-title {
		letter-spacing: 4px;
	}
}

/* header end */

/*top start*/

#topBtn {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 1vw;
	z-index: 999;
	font-size: 18px;
	border: none;
	outline: none;
	color: var(--light);
	background-color: var(--deep-orange);
	cursor: pointer;
	padding: 5px 10px;
	border-radius: 0px;
}

#topBtn:hover {
	color: var(--light);
	background-color: var(--deep-brown);
}

#topBtn img {
	width: 80px !important;
	max-width: 12vw;
}


/* top end */




/* story start */
#story {
	background-image: url(../../images/story-bg-1200w.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	font-weight: 700;
	color: var(--deep-brown) !important;
}

@media (max-width:1000px) {
	#story {
		background-image: url(../../images/story-bg-768w.png);
	}
}

@media (max-width:576px) {
	#story {
		background-image: url(../../images/story-bg-540w.png);
	}
}

#story .describe {
	max-width: 700px;
	color: var(--deep-brown) !important;
}

#story h2 {
	font-weight: 900;
	color: var(--brown);
}

#story h4 {
	font-weight: 700;
}

.profiles {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* story end */

/* products start */
.products-title {
	padding: 0 0 11rem 0;
}

.products-title h3 {
	font-size: calc(1.3rem + .6vw);
	font-weight: 900;
	text-align: center;
	color: var(--brown);
}

.products-info {
	margin-top: -9rem;
	padding-bottom: 1vw;
}

.products-info p {
	text-align: center;
	margin-top: 1rem;
}

.products-info p span {
	font-weight: 700;
	padding: 0 1rem;
	border: 2px var(--black) solid;
	border-top: 0;
	border-bottom: 0;
}

.modal-header {
	border-radius: 0;
	padding: 0.5rem 1rem;
	background-color: var(--deep-brown);
	color: var(--light-yellow);
}

.modal-body {
	padding-top: 0;
	background-color: var(--deep-brown);
	color: var(--light);
}

.modal-body .modal-text::before {
	content: "";
	background-image: url(../../images/modal-left.png);
	background-repeat: no-repeat;
	position: absolute;
	left: -30px;
	top: -20px;
	z-index: 100;
	width: 250px;
	height: 100px;
}

.modal-body .modal-text::after {
	content: "";
	background-image: url(../../images/modal-bottom.png);
	background-repeat: no-repeat;
	position: absolute;
	right: -10px;
	bottom: -35px;
	z-index: 100;
	width: 250px;
	height: 100px;
}

.btn-close {
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

/* products end */


/* material start */

#material {
	background-image: url(../../images/material-bg-1200w.png);
	/* background-color: var(--black); */
	/* background-blend-mode: darken; */
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border-top: 13px solid var(--khaki);
	color: #161817;
}


@media (max-width:1000px) {
	#material {
		background-image: url(../../images/material-bg-768w.png);
	}
}

@media (max-width:576px) {
	#material {
		background-image: url(../../images/material-bg-540w.png);
	}
}


#material h2 {
	font-weight: 700;
	color: var(--brown);
}

#material p {
	font-weight: 700;
	color: var(--deep-brown);
}

.ingredient-box {
	overflow: hidden;
}

#material .ingredient-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

#material .decorate {
	color: var(--deep-orange);
	/* -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl; */
}

#material .decorate h2 {
	opacity: 0.7;
}

/* material end */


/* manufacture start */
#manufacture {
	background-color: var(--khaki);
	color: var(--light) !important;
}

#manufacture h2.display-1 {
	font-weight: 700;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

.manufacture-slick-bg {
	background-color: var(--brown);
	background-image: url(../../images/manufacture-slick-bg-800w.jpg);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	position: relative;
	bottom: -30px;
}


@media (max-width:576px) {
	.manufacture-slick-bg {
		background-image: url(../../images/manufacture-slick-bg-540w.jpg);
	}
}

.manufacture-slick h2 {
	color: var(--light) !important;
	font-weight: 700;
}

#manufacture .describe {
	position: relative;
	z-index: 2;
}


#manufacture .decorate {
	position: absolute;
	right: -3px;
	bottom: 5px;
	z-index: 0;
}

#manufacture .decorate span {
	position: relative;
	z-index: -1;
	font-weight: 700;
	font-size: calc(1.625rem + 5.5vw);
	line-height: 0.9;
	color: #FEF9F5;
	opacity: 0.15;
	letter-spacing: 2px;
}

.manufacture-adorn {
	position: relative;
	color: var(--black);
	opacity: .9;
}

.manufacture-adorn::before {
	content: "";
	background-image: url(../../images/manufacture-left.png);
	background-repeat: no-repeat;
	position: absolute;
	left: -20px;
	top: 0;
	z-index: 100;
	width: 250px;
	height: 100px;
}

.manufacture-adorn::after {
	content: "";
	background-image: url(../../images/manufacture-bottom.png);
	background-repeat: no-repeat;
	position: absolute;
	left: 50%;
	bottom: -35px;
	z-index: 100;
	width: 250px;
	height: 100px;
}

.wrapper {
	/* clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); */
	/* clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%); */
	/* border-radius: 59% 52% 56% 59%; */
	background-color: var(--light);
	width: 100%;
	height: 100%;
	position: relative;
	top: 0;
	left: 0;
}

/* .wrapper:hover img {
	transform: scale(1.2);
} */

.defaultWrap {
	/* border-radius: 51% 67% 56% 64%; */
	position: relative;
	/* bottom: 8px;
	left: 5px; */
	overflow: hidden;
	z-index: 2;
	/* animation:  morph 10s linear 2s infinite reverse; */
}

@keyframes morph {
	0% {
		/* border-radius: 51% 67% 56% 64%; */
		transform: rotate(-5deg);
	}

	100% {
		/* border-radius: 40% 60%; */
		transform: rotate(5deg);
	}
}

.defaultWrap img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center center;
}

.activeWrap {
	/* border-radius: 51% 67% 56% 64%; */
	position: absolute;
	top: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	z-index: 3;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 1.5rem !important;
	font-weight: 700;
	color: var(--deep-brown);
}

/* .activeWrap:hover {
	position: absolute;
	top: -8px;
	left: 5px;
	background-color: rgba(94, 81, 75, 0.54);
	color: var(--light);
	-webkit-transition: opacity .5s;
	transition: opacity .5s;
} */

/* manufacture end */



/* news start */
#news {
	background-image: url(../../images/newsbg-1200w.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 0 0 3rem 0;
}

@media (max-width:1000px) {
	#news {
		background-image: url(../../images/newsbg-768w.png);
	}
}

@media (max-width:576px) {
	#news {
		background-image: url(../../images/newsbg-540w.png);
	}
}

#news h2 {
	display: inline-block;
	font-weight: 900;
	background-color: var(--brown);
	color: var(--light);
	padding: 1rem 5rem;
	margin-top: 3rem;
	opacity: .7;
	/* border-top-right-radius: 38px 130px;
	border-bottom-left-radius: 110px 19px;
	border-bottom-right-radius: 120px 24px; */
}

#news h5 {
	font-weight: 700;
}

#news .news-slick {
	font-weight: 500;
	color: var(--deep-brown);
	font-weight: 700;
}

#news .slick-prev:before,
.slick-next:before {
	font-family: '';
	color: var(--brown);
	font-size: 1.8rem;
	font-weight: 900;
	opacity: 1;
}

/* news end */



/* footer start */

.footer-bg {
	background-image: url(../../images/footer-bg-1200w.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	height: 500px;
	width: 100%;
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	color: var(--light) !important;
	margin-bottom: -6rem;
	z-index: 100;
	position: relative;
}

@media (max-width:1000px) {
	.footer-bg {
		background-image: url(../../images/footer-bg-768w.png);
	}
}

@media (max-width:576px) {
	.footer-bg {
		background-image: url(../../images/footer-bg-540w.png);
	}
}

.footer-bg p {
	font-family: 'SweiSpringSugarCJKtc', sans-serif !important;
}

footer p {
	font-family: 'Noto Sans TC', sans-serif;
}


footer h2 {
	font-weight: 900 !important;
}

footer ul {
	list-style: none;
	padding-left: 0rem !important;
}

footer li {
	list-style-type: none !important;
	margin-bottom: 8px;
}


/* footer end */


.portfolio-item {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.navbar-default {
	background-color: var(--light-brown);
	transition: all 0.3s ease-in-out;
}

.hideme {
	opacity: 0;
}

.bg-deep-brown {
	background-color: var(--deep-brown);
	color: var(--light-brown) !important;
}

.bg-brown {
	background-color: var(--brown);
	color: var(--light);
}

.bg-yellow {
	background-color: var(--light-yellow);
	color: var(--deep-brown);
}

.bg-deep-orange {
	background-color: var(--deep-orange);
	color: var(--black);
}