@charset "utf-8";

/*default setting start*/
body,
html {
	margin: 0px;
	padding: 0px;
}

img {
	max-width: 100%;
	border: none;
}

body.noscroll {
	overflow: hidden;
}

p {
	font-size: 16px;
	line-height: 24px;
}

ul {
	margin: 0;
	padding: 0;
}

.bold {
	font-weight: bold;
}

.italic {
	/* 斜體 */
	font-style: italic;
	vertical-align: baseline;
}

video {
	max-width: 100%;
	width: 100%;
}

/* KV */
.section-cover .title {
	font-size: clamp(1.771vw, 0.729vw + 2.0833vw, 2.0833vw);
	line-height: 4vw;
	position: absolute;
	left: 10%;
	bottom: 6%;
}

.section-cover .feature {
	font-size: clamp(1.771vw, 0.729vw + 2.0833vw, 2.0833vw);
	line-height: 4vw;
	position: absolute;
	left: 76%;
	bottom: 13%;
}

/* 產品特色 */
.section-container {
	position: relative;
}

.section-container .intro {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 8%;
	text-align: center;
}

.section-container .title {
	font-size: clamp(1.771vw, 0.729vw + 2.0833vw, 2.0833vw);
	line-height: 2vw;
	margin: 0;
	margin-bottom: 3%;
}

.section-container .sub-title {
	line-height: 2.5vw;
	font-size: clamp(0.625vw, 1.615vw, 2.083vw);
	margin: 0;

}

.section-container .prod-detail {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 79%;
	text-align: center;
	width: 86%;
	background-color: rgba(255, 255, 255, 0.8);
	padding: 1.5% 1% 1%;
	text-align: center;
}

.section-container .prod-detail .flex-block {
	display: flex;
	justify-content: space-between;
}

.section-container .prod-detail .inner-intro {
	width: calc((100% - 15%) / 5);
}

.section-container .img img {
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center;
}

.section-container .prod-detail .inner-intro p {
	font-size: clamp(0.625vw, 1.354vw, 2.083vw);
	line-height: 2vw;
	color: #7F6D6F;
	margin: 0;
	font-weight: bold;
}

.section-container .prod-detail .inner-intro p.ingredient-source {
	color: #d6aeb3;
}

.section-container .prod-detail .inner-intro .description {
	color: #C00000;
	margin-bottom: 1%;
}

.section-registration .form-check {
	text-align: left;
}

/* footer */
.social-icon-wrapper {
	padding-bottom: 40px;
}

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



	/* 產品特色 */
	.section-cover {
		position: relative;
	}

	.section-container {
		padding-bottom: 21%;
	}

	.section-container .img {
		position: relative;
	}

	.section-container .img::before {
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		box-shadow: 0 50px 50px -10px #feefee inset,
			0 -50px 50px -10px #feefee inset;
	}

	.section-container .intro {
		position: static;
		transform: translate(0);
		text-align: center;
		padding-bottom: 12%;
	}

	.section-container .title {
		font-size: clamp(2.083vw, 3.906vw, 6.25vw);
		line-height: 4vw;
		margin-bottom: 3%;
	}

	.section-container .sub-title {
		line-height: 3.5vw;
		font-size: clamp(1.563vw, 2.604vw, 3.906vw);
	}

	.section-container .prod-detail {
		position: absolute;
		width: 100%;
		transform: translateX(0);
		top: 0;
		left: 0;
		height: 100%;
		padding: 0;
		background-color: transparent;
	}

	.section-container .prod-detail .flex-block {
		width: 100%;
		/* height: 100%; */
	}

	.section-container .prod-detail .inner-intro {
		position: absolute;

	}

	.section-container .prod-detail .inner-intro:first-child {
		top: 17%;
		width: auto;
		left: 7%;
	}

	.section-container .prod-detail .inner-intro:nth-child(2) {
		top: 83%;
		width: auto;
		left: 24%;
	}

	.section-container .prod-detail .inner-intro:nth-child(even)::before {
		top: auto;
		bottom: 100%;
	}

	.section-container .prod-detail .inner-intro:nth-child(3) {
		top: 17%;
		width: auto;
		left: 41%;
	}

	.section-container .prod-detail .inner-intro:nth-child(4) {
		top: 83%;
		width: auto;
		left: 58%;
	}

	.section-container .prod-detail .inner-intro:nth-child(5) {
		top: 17%;
		width: auto;
		left: 75%;
	}

	.section-container .prod-detail .inner-intro::before {
		content: '';
		height: 9vw;
		width: 1px;
		background-color: #E5C4C7;
		display: block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 100%;
	}


	.section-container .prod-detail .inner-intro p {
		font-size: clamp(1.563vw, 2.604vw, 3.906vw);

		line-height: 3vw;

	}

	.section-container .prod-detail .inner-intro .description {
		margin-bottom: 1%;
	}

}

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

	/* KV */
	.section-cover .title {
		left: 74%;
		bottom: 11%;
		font-size: clamp(2.5vw, 0.729vw + 2.0833vw, 2.0833vw);

	}

	.section-cover .feature {
		left: 36%;
		bottom: 1%;
		font-size: clamp(2.5vw, 0.729vw + 2.0833vw, 2.0833vw);

	}
}

.thank_container {
	position: fixed;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 999999;
	display: none;
	top: -1px;
}

.thank_container .thank {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 45.36%;
	padding-top: 33.13%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center top;
	background-image: url('../images/thanks.png');
	z-index: 999;
}

.thank_container .thank .close_btn {
	position: absolute;
	top: 1%;
	right: 10px;
	width: 5.2%;
	padding-top: 5.2%;
	cursor: pointer;
}

.thank_container .thank .close_btn::before {
	content: '';
	position: absolute;
	width: 30px;
	height: 2px;
	top: 50%;
	left: 0%;
	transform: translate(0%, -50%);
	background-color: black;
	border-radius: 3px;
	transform: rotate(45deg);
}

.thank_container .thank .close_btn::after {
	content: '';
	position: absolute;
	width: 30px;
	height: 2px;
	top: 50%;
	left: 0%;
	transform: translate(0%, -50%);
	background-color: black;
	border-radius: 3px;
	transform: rotate(-45deg);
}

#supply-btn {
	position: absolute;
	top: 93.6%;
	left: 48%;
	width: 11%;
	padding-top: 3%;
	cursor: pointer;
}

@media screen and (max-width:767px) {
	.thank_container .thank {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
		padding-top: 65.5%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center top;
		z-index: 999;
	}

	.thank_container .thank .close_btn {
		position: absolute;
		top: 0px;
		right: 0px;
		width: 6.2%;
		padding-top: 10.2%;
		cursor: pointer;
	}

	.thank_container .thank .close_btn::before {
		content: '';
		position: absolute;
		width: 20px;
		height: 2px;
		top: 50%;
		left: 0%;
		transform: translate(0%, -50%);
		background-color: black;
		border-radius: 3px;
		transform: rotate(45deg);
	}

	.thank_container .thank .close_btn::after {
		content: '';
		position: absolute;
		width: 20px;
		height: 2px;
		top: 50%;
		left: 0%;
		transform: translate(0%, -50%);
		background-color: black;
		border-radius: 3px;
		transform: rotate(-45deg);
	}
}

/* 20220211_Jared調整卷軸滾動效果，處理bootstrap和jquery套件的衝突 */
html,
body {
	scroll-behavior: auto !important;
}