.ingredientsList p, .ingredientsList .Img .svgMask, .ingredientsList .Img::before {
		-webkit-transition: all 0.5s ease-out;
		transition: all 0.5s ease-out;
}

/*
	Authors: Alvin, Randy, Rex
    Version: 2.0
	Latest Update: 2020/03/13
*/
.outerWrap {
		overflow: hidden;
}

.mainArea {
		position: relative;
}

.ingredientsList {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		margin-top: 100px;
}
@media (min-width: 1441px) {
		.ingredientsList {
				margin-left: -42px;
				margin-right: -42px;
		}
}
@media (max-width: 1180px) {
		.ingredientsList {
				margin-top: 50px;
		}
}
@media (min-width: 481px) and (max-width: 1440px) {
		.ingredientsList {
				margin-left: -20px;
				margin-right: -20px;
		}
}
.ingredientsList > li {
		position: relative;
		margin-bottom: 60px;
}
@media (min-width: 1441px) {
		.ingredientsList > li {
				padding-left: 42px;
				padding-right: 42px;
		}
}
@media (min-width: 481px) and (max-width: 1440px) {
		.ingredientsList > li {
				padding-left: 20px;
				padding-right: 20px;
		}
}
@media (min-width: 769px) {
		.ingredientsList > li {
				width: 33.3333333333%;
		}
}
@media (min-width: 481px) and (max-width: 768px) {
		.ingredientsList > li {
				width: 50%;
		}
}
@media (max-width: 480px) {
		.ingredientsList > li {
				width: 100%;
		}
}
.ingredientsList .itemContentBox {
		display: none;
		width: 100% !important;
		padding: 40px 42px;
		background-color: #f2f2f2;
}
.ingredientsList .itemContentBox::before, .ingredientsList .itemContentBox::after {
		content: "";
		position: absolute;
		top: 0;
		z-index: -1;
		width: calc((100vw - 1400px) / 2);
		height: 100%;
		background-color: #f2f2f2;
}
.ingredientsList .itemContentBox::before {
		left: calc((-100vw + 1400px) / 2);
}
.ingredientsList .itemContentBox::after {
		right: calc((-100vw + 1400px) / 2);
}
.ingredientsList .itemContentBox .arrow {
		position: absolute;
		top: -20px;
		left: 0;
		z-index: 1;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 20px 20px 20px;
		border-color: transparent transparent #f2f2f2 transparent;
}
.ingredientsList .item {
		max-width: 340px;
		margin-left: auto;
		margin-right: auto;
}
.ingredientsList .item:hover .Img::before {
		opacity: 0;
}
.ingredientsList .item:hover .svgMask {
		opacity: 0;
}
.ingredientsList .item:hover h3 a, .ingredientsList .item:hover p {
		color: #9f6420;
}
.ingredientsList .Img {
		position: relative;
		padding-bottom: 100%;
}
.ingredientsList .Img::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)), -webkit-gradient(linear, left top, right top, from(#fff), to(#fff));
		background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to right, #fff, #fff);
		background-position: 50% 50%;
		background-size: 17px 1px, 1px 17px;
		background-repeat: no-repeat;
		pointer-events: none;
		opacity: 1;
}
.ingredientsList .Img > a {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
}
.ingredientsList .Img img {
		display: block;
		max-width: 100%;
		-webkit-backface-visibility: hidden;
		        backface-visibility: hidden;
}
.ingredientsList .Img .svgMask {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		pointer-events: none;
		fill: #000;
		opacity: 0.5;
}
.ingredientsList .Txt {
		padding-top: 10px;
		text-align: center;
}
.ingredientsList path {
		-webkit-transform-origin: center center;
		        transform-origin: center center;
}
.ingredientsList h3 a {
		display: block;
		font: 700 30px "Cinzel", "Noto Serif TC", serif;
		color: #454545;
}
.ingredientsList p {
		font: 700 20px "Cinzel", "Noto Serif TC", serif;
		color: #000;
}

.ingredientsParallax1 {
		top: 40px;
		left: 30%;
}
@media (max-width: 1180px) {
		.ingredientsParallax1 {
				left: 30px;
		}
}

.ingredientsParallax2 {
		top: 60px;
		right: 20%;
}

.ingredientsParallax3 {
		top: 80px;
		left: 50%;
}
@media (max-width: 1180px) {
		.ingredientsParallax3 {
				display: none;
		}
}

.ingredientsParallax4 {
		top: 16%;
		left: 5%;
}

.ingredientsParallax5 {
		top: 23%;
		left: 15%;
}

.ingredientsParallax6 {
		top: 20%;
		right: 5%;
}

.ingredientsParallax7 {
		top: 40%;
		left: 33%;
}

.ingredientsParallax8 {
		top: 42%;
		left: 53%;
}
@media (max-width: 1180px) {
		.ingredientsParallax8 {
				display: none;
		}
}

.ingredientsParallax9 {
		top: 48%;
		left: 9%;
}

.ingredientsParallax10 {
		top: 48%;
		right: 3%;
}

.ingredientsParallax11 {
		top: 60%;
		left: 2%;
}

.ingredientsParallax12 {
		top: 61%;
		right: 9%;
}

.ingredientsParallax13 {
		top: 70%;
		left: 30%;
}

.ingredientsParallax14 {
		bottom: 40px;
		left: 12%;
}