.ingredientsList .Img::before, .ingredientsList .Img .svgMask, .ingredientsList p {
  -webkit-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  transition: all .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: calc(100% / 3); } }
    @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: -webkit-linear-gradient(left, #fff, #fff), -webkit-linear-gradient(left, #fff, #fff);
      background-image: -o-linear-gradient(left, #fff, #fff), -o-linear-gradient(left, #fff, #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: .5; }
  .ingredientsList .Txt {
    padding-top: 10px;
    text-align: center; }
  .ingredientsList path {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center; }
  .ingredientsList h3 a {
    display: block;
    font: 700 28px "Cinzel", "Noto Serif TC", serif;
    color: #454545; }
  .ingredientsList p {
    font: 700 16px "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%; }