@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@900&display=swap');
@import url('./noto_serif_cjk_tc.css');
/* BS5修改預設 */
html,
body {
  overflow-x: hidden;
  margin: 0%;
}

html {
  height: 100%;
}

body {
  background-color: #d32e26;
  background-blend-mode: overlay;
  background-repeat: repeat;
  background-image: url(../../images/pattern.png?v=1);
  font-family: 'Noto Sans TC', sans-serif;
  letter-spacing: 2px;
}

#main {
  opacity: 0;
}

#main.active {
  opacity: 1;
  animation: mainFadeIn 1s ease-in-out;
}

@keyframes mainFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

h2 {
  color: #fff;
  font-weight: 700;
}

a {
  color: #fff;
  text-decoration: none;
}

.navbar-expand-md .navbar-nav .nav-link {
  padding-right: 3.5rem;
  padding-left: 3.5rem;
  font-family: 'Noto Serif TC', sans-serif !important;
  font-weight: 700 !important;
}

.btn-inc {
  background-color: #f9bf58;
  color: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !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: #f9bf58;
}

.navbar-default {
  transition: all 0.3s ease-in-out;
}

.hideme {
  opacity: 0;
}

.buy {
  color: #fff !important;
  background-color: #f39c29;
}

.vertical-center {
  min-height: 100%; /* Fallback for browsers do NOT support vh unit */

  display: flex;
  align-items: center;
}

@media (max-width: 1440px) {
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}

@media (max-width: 996px) {
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

.bg-inc {
  background-color: #d32e26;
}

.text-inc {
  color: #d32e26;
}

.decorate li::marker {
  font-size: 0;
}

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

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  -webkit-backface-visibility: hidden;
  transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -webkit-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
}

.loading img {
  -webkit-backface-visibility: hidden;
}

.loading-bg {
  position: absolute;
  z-index: 101;
  width: 50vw;
  width: 50vw;
  left: calc(50% - 25vw);
  top: calc(50% - 25vw);
  object-fit: cover;
  object-position: center center;
}

.loading-frame {
  position: absolute;
  z-index: 102;
  width: 50vw;
  height: 50vw;
  left: calc(50% - 25vw);
  top: calc(50% - 25vw);
  object-fit: cover;
  object-position: center center;
  animation: loading-frame 20s;
}

@keyframes loading-frame {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loading-flower {
  position: absolute;
  z-index: 103;
  width: 50vw;
  width: 50vw;
  left: calc(50% - 25vw);
  top: calc(50% - 25vw);
  object-fit: cover;
  object-position: center center;
  animation: loading-flower 4s;
  opacity: 0;
}

@keyframes loading-flower {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 576px) {
  .loading-bg,
  .loading-frame,
  .loading-flower {
    width: 300px;
    height: 300px;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
  }
}

.loading-lantern {
  position: absolute;
  z-index: 104;
}

.navbar-brand img {
  width: 10vw;
  min-width: 60px;
}

footer {
  /* background-image: url(../../images/footer-title1.png),
    url(../../images/footer-title2.png);
  background-repeat: no-repeat, no-repeat;
  background-position: top 4rem left 10vw, top 4rem right 10vw; */
  color: #fff;
}

/* @media (max-width: 767.5px) {
  footer {
    background-image: none;
  }
}
*/
footer p {
  margin-top: 0px;
  margin-bottom: 0px;
}

.header-slick .slick-dots {
  position: absolute;
  bottom: 2%;
  z-index: 1;
}

.slick-dots li.slick-active button:before,
.slick-dots li button:before {
  color: #fff !important;
}

.slick-dotted.slick-slider {
  margin-bottom: 0px;
}

.slick-dots li button:before {
  font-size: 40px;
}

/*top*/
#side {
  position: fixed;
  display: inline-block;
  cursor: pointer;
  z-index: 999;
  bottom: 0;
  right: 1rem;
  width: 12vw;
  height: 25vh;
  min-width: 70px;
  max-width: 100px;
}

.side-content {
  position: absolute;
}

.top_button_icon_box {
  position: block;
  width: 12vw;
  height: 12vw;
  min-width: 70px;
  min-height: 70px;
  max-width: 100px;
  max-height: 100px;
}

.side-content a {
  display: block;
  padding: 0.5rem 0.3rem;
  margin: 0.5rem 0 0.5rem 0.5rem;
  text-decoration: none;
  background-color: #f39c29;
  color: #fff;
  border-radius: 2rem;
  text-align: center;
}

.shake:hover {
  animation-name: shake;
  animation-duration: 1.5s;
}

@keyframes shake {
  0% {
    -webkit-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
    transform-origin: center center;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
    transform-origin: center center;
  }

  100% {
    -webkit-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
    transform-origin: center center;
  }
}

/* header */
.header-slick div {
  position: relative;
  font-family: 'Noto Serif TC', sans-serif;
}

.header-slick p {
  margin-bottom: 0;
}

.header-slick .slick1 div {
  position: absolute;
  left: calc(50% - 45vw);
  top: calc(18% - 6vw);
  text-align: center;
  width: 90vw;
  font-weight: 900;
}

.slick1 p:nth-child(1) {
  font-size: 3.5vw;
  line-height: 4.5vw;
  color: #ffc812;
}

.slick1 p:nth-child(2) {
  font-size: 1.5vw;
  line-height: 2vw;
  color: #eeddaa;
  text-shadow: -1px -1px 0 #790000, 1px -1px 0 #790000, -1px 1px 0 #790000,
    1px 1px 0 #790000, 2px 2px 2px #790000;
}

.header-slick .slick1 {
  width: 100vw;
  height: 100vh;
  background-image: url(../../images/header-slick2.jpg?v=9);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
}

.header-slick .slick2 {
  width: 100vw;
  height: 100vh;
  background-image: url(../../images/header-slick1.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

@media (max-width: 1600px) {
  .header-slick .slick1 div {
    top: calc(20%);
    width: 90vw;
  }

  .slick1 p:nth-child(1) {
    font-size: 6vw;
    line-height: 7vw;
  }

  .slick1 p:nth-child(2) {
    font-size: 3vw;
    line-height: 4vw;
  }

  .header-slick .slick1 {
    background-image: url(../../images/header-slick2-pad.jpg?v=5);
  }

  .header-slick .slick2 {
    background-image: url(../../images/header-slick1-pad.jpg);
  }
}

@media (max-width: 1600px) and (orientation: landscape) {
  .header-slick .slick1 div {
    top: calc(12%);
    width: 90vw;
  }

  .slick1 p:nth-child(1) {
    font-size: 6vw;
    line-height: 7vw;
  }

  .slick1 p:nth-child(2) {
    font-size: 3vw;
    line-height: 4vw;
  }

  .header-slick .slick1 {
    background-image: url(../../images/header-slick2.jpg?v=8);
    background-position: bottom center;
  }

  .header-slick .slick2 {
    background-image: url(../../images/header-slick1.jpg?v=1);
  }
}

@media (max-width: 912px) and (orientation: landscape) {
  .header-slick .slick1 div {
    top: calc(10%);
    width: 90vw;
  }

  .slick1 p:nth-child(1) {
    font-size: 4vw;
    line-height: 5vw;
  }

  .slick1 p:nth-child(2) {
    font-size: 2vw;
    line-height: 3vw;
  }

  .header-slick .slick1 {
    background-image: url(../../images/header-slick2.jpg?v=8);
    background-position: bottom center;
  }

  .header-slick .slick2 {
    background-image: url(../../images/header-slick1.jpg?v=1);
  }
}

@media (max-width: 576px) {
  .header-slick .slick1 div {
    top: calc(40vh - 6vw);
    width: 90vw;
  }

  .slick1 p:nth-child(1) {
    font-size: 8vw;
    line-height: 9vw;
  }

  .slick1 p:nth-child(2) {
    font-size: 4vw;
    line-height: 5vw;
  }
}

@media (max-width: 576px) and (orientation: landscape) {
  .header-slick .slick1 div {
    top: calc(10%);
    width: 90vw;
  }

  .slick1 p:nth-child(1) {
    font-size: 4vw;
    line-height: 5vw;
  }

  .slick1 p:nth-child(2) {
    font-size: 2vw;
    line-height: 3vw;
  }

  .header-slick .slick1 {
    background-image: url(../../images/header-slick2.jpg?v=9);
    background-position: bottom center;
  }

  .header-slick .slick2 {
    background-image: url(../../images/header-slick1.jpg?v=1);
  }
}

/* story */
.story {
  background-image: url(../../images/story-decorate-1.png),
    url(../../images/story-decorate-2.png),
    url(../../images/story-decorate-3.png),
    url(../../images/story-decorate-4.png?v=1),
    url(../../images/story-decorate-5.png),
    url(../../images/story-decorate-6.png),
    url(../../images/story-decorate-7.png);

  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat;

  background-position: top 90px left 0px, bottom 40px left 0px,
    top 0px left 307px, top 74px left 497px, bottom 74px right 343px,
    top 46px right 0px, bottom 41px right 0px;

  margin: 18px 0;
  border: 18px solid rgba(249, 187, 83, 0.75);
  border-left: 0;
  border-right: 0;
  height: 650px;
  font-family: 'Noto Serif TC', sans-serif;
  position: relative;
}

.story .describe {
  position: absolute;
  max-width: 700px;
  min-height: 420px;
  right: 20vw;
  top: calc(50% - 210px);
  z-index: 1;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

.story p {
  margin-left: 3rem;
  font-weight: 500;
  font-size: 1.25rem;
}

.story .describe div {
  margin-top: 2em;
}

@media (max-width: 1600px) {
  .story {
    background-image: url(../../images/story-decorate-1.png),
      url(../../images/story-decorate-2.png),
      url(../../images/story-decorate-4.png?v=1),
      url(../../images/story-decorate-5.png),
      url(../../images/story-decorate-7.png);

    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;

    background-position: top 90px left 0px, bottom 40px left 0px,
      top 65px left 497px, bottom 74px right 343px, bottom 41px right 0px;
  }

  .story .describe {
    right: 5vw;
  }
}

@media (max-width: 1300px) {
  .story p {
    margin-left: 2rem;
  }
}

@media (max-width: 1000px) {
  .story p {
    margin-left: 1.5rem;
  }
}

@media (max-width: 767.9px) {
  .story {
    background-image: url(../../images/story-decorate-1.png),
      url(../../images/story-decorate-3.png),
      url(../../images/story-decorate-4.png),
      url(../../images/story-decorate-5.png),
      url(../../images/story-decorate-7.png);

    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;

    background-position: top 57px left 0px, top 0px right 2vw,
      top 5vw right 20vw, bottom 1vw left 15vw, bottom 41px right 0px;

    min-height: 650px;
  }

  .story p {
    margin-bottom: 8px;
    margin-left: 0;
  }

  .story .describe {
    max-width: 420px;
    min-height: 400px;
    left: 10vw;
    top: calc(50% - 200px);
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
  }
}

@media (max-width: 575.9px) {
  .story {
    background-image: url(../../images/story-decorate-4.png),
      url(../../images/story-decorate-7.png);
    background-repeat: no-repeat, no-repeat;
    background-position: top 5vw right 20vw, bottom 41px right -100px;
    min-height: 650px;
  }

  .story .describe {
    max-width: 300px;
    min-height: 480px;
    left: 8vw;
    position: relative;
    top: calc((100% - 400px) / 2);
  }
  .story p {
    font-size: 1rem;
  }
}

/* memory */
.memory {
  background-color: #ffdec5;
  background-image: url(../../images/memory-decorate-1.png);
  background-repeat: no-repeat;
  background-position: right 16vw top 0px;
  font-family: 'Noto Serif TC', sans-serif;
}

@media (max-width: 1600px) {
  .memory {
    background-position: right 10vw top 0px;
  }
}

@media (max-width: 1300px) {
  .memory {
    background-position: right 3vw top 0px;
  }
}

@media (max-width: 1100px) {
  .memory {
    background-position: right 1vw top 0px;
  }
}

@media (max-width: 767px) {
  .memory {
    background-image: none;
  }
}

.memory .describe {
  max-width: 850px;
}

.memory h2 {
  color: #000;
  font-weight: 900;
}

.memory p {
  font-weight: 600;
  line-height: 2;
}

.memory-flower {
  position: absolute;
  width: 60px;
  left: -20px;
  top: 0;
}

.memory .row {
  position: relative;
}

.memory .col {
  z-index: 2;
}

.memory .col img.rice {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ingridient */
.ingridient {
  background-image: url(../../images/ingridient-decorate-1.png),
    url(../../images/ingridient-decorate-3.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left 0px top 20px, left 445px top 10px;
  height: 450px;
  color: #fff;
  text-align: center;
  border: 18px solid rgba(249, 187, 83, 0.75);
  border-left: 0;
  border-right: 0;
  border-top: 0;
  position: relative;
}

.ingridient .decorate li:nth-child(1) {
  background: url(../../images/ingridient-decorate-2.png);
  width: 289px;
  height: 350px;
  bottom: -138px;
  position: absolute;
  left: 15vw;
  z-index: 1;
}

.ingridient .decorate li:nth-child(2) {
  background: url(../../images/ingridient-decorate-4.png);
  width: 520px;
  height: 873px;
  position: absolute;
  right: 0px;
  bottom: -34px;
}

@media (max-width: 1720px) {
  .ingridient .decorate li:nth-child(2) {
    background-size: 25vw auto;
    background-repeat: no-repeat;
    width: 25vw;
    right: 0px;
    bottom: 0px;
  }
}

@media (max-width: 1600px) {
  .ingridient {
    background-image: url(../../images/ingridient-decorate-1.png),
      url(../../images/ingridient-decorate-3.png);
    background-repeat: no-repeat, no-repeat;
    background-position: left 0px top 20px, right 200px bottom 40px;
    height: 570px;
  }

  .ingridient .decorate li:nth-child(1) {
    left: 25vw;
    background-size: 200px auto;
    background-repeat: no-repeat;
    width: 200px;
    height: 242px;
    bottom: -100px;
  }
}

@media (max-width: 992px) {
  .ingridient .decorate li:nth-child(2) {
    background-size: 20vw auto;
    background-repeat: no-repeat;
    width: 20vw;
    right: 0px;
    top: -5rem;
  }
}

@media (max-width: 767.9px) {
  .ingridient {
    background-image: url(../../images/ingridient-decorate-3.png);
    background-repeat: no-repeat;
    background-position: right 80px bottom 50px;
    height: 600px;
  }

  .ingridient .decorate li:nth-child(1) {
    left: 8vw;
    background-size: 200px auto;
    background-repeat: no-repeat;
    width: 200px;
    height: 242px;
    bottom: -100px;
  }
}

@media (max-width: 576px) {
  .ingridient .decorate li:nth-child(2) {
    background: none !important;
  }
}

@media (max-width: 575.9px) {
  .ingridient {
    background-image: none;
    height: 700px;
  }
}

.ingridient h2 {
  font-weight: 900;
}

.ingridient p {
  font-weight: 500;
  line-height: 2;
}

.ingridient hr {
  color: #fff;
  width: 32px;
  height: 5px;
  opacity: 1;
}

.ingridient .describe {
  position: relative;
  max-width: 821px;
  z-index: 3;
}

/* .ingridient .slick-dots {
  bottom: -4rem;
  text-align: center;
} */

@media (max-width: 1400px) {
  .ingridient p {
    text-align: left;
  }
}

.ingridient .slick-active {
  opacity: 1 !important;
}

/* .ingridient .slick-dots li button:before {
  content: '';
}

.ingridient .slick-dots li:nth-child(1) {
  background: url(../../images/peanut-icon.png?v=2) no-repeat;
  opacity: 0.5;
  width: 7rem;
  height: 4rem;
  line-height: 5rem;
}

.ingridient .slick-dots li:nth-child(2) {
  background: url(../../images/seaweed-icon.png?v=2) no-repeat;
  opacity: 0.5;
  width: 7rem;
  height: 4rem;
  line-height: 5rem;
} */

/* supply */
.supply {
  background-color: #ffdec5;
  font-family: 'Noto Serif TC', sans-serif;
}

.supply-slick div {
  position: relative;
}

.supply-slick div .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(101, 101, 101, 0.5);
  opacity: 1;
}
.supply-slick div .mask:hover,
.supply .mask:active {
  opacity: 0;
}

.supply-slick img {
  width: 100%;
}

.supply h2 {
  position: relative;
  text-align: center;
  color: #000;
  font-weight: 900;
  z-index: 2;
}

.supply p {
  position: relative;
  z-index: 3;
}

/* introduce */
.introduce {
  background-image: url(../../images/introduce-decorate-1.png),
    url(../../images/introduce-decorate-2.png),
    url(../../images/introduce-decorate-3.png),
    url(../../images/introduce-decorate-4.png),
    url(../../images/introduce-decorate-5.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left 52px top 0px, left 0px bottom 80px,
    right 0px top 62px, left 0px bottom 0px, right 104px bottom 300px;

  border: 18px solid rgba(249, 187, 83, 0.75);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  color: #fff;
  width: 100%;
}

@media (max-width: 1200px) {
  .introduce {
    background-image: url(../../images/introduce-decorate-1.png),
      url(../../images/introduce-decorate-3.png),
      url(../../images/introduce-decorate-4.png),
      url(../../images/introduce-decorate-5.png);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: left -52px top 0px, right 0px top 62px,
      left 0px bottom 0px, right 104px bottom 300px;
  }
}

@media (max-width: 575.9px) {
  .introduce {
    background-image: url(../../images/introduce-decorate-4.png);
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
  }
}

.introduce h2 {
  font-weight: 900;
}

.introduce p {
  font-weight: 600;
  line-height: 2;
}

.left-top {
  position: relative;
  width: 50vw;
  height: 20vw;
  min-width: 300px;
  min-height: 150px;
  top: 0;
}

.introduce-cls-1,
.introduce-cls-2,
.introduce-cls-3 {
  fill: #fff;
}
.introduce-cls-1 {
  font-size: 90px;
}
.introduce-cls-2 {
  font-size: 55px;
}
.introduce-cls-3 {
  font-size: 130px;
}
.introduce-cls-4 {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 3px;
}

#introduce .introduce-cls-1,
#introduce .introduce-cls-2,
#introduce .introduce-cls-3 {
  opacity: 1;
  animation-delay: 30s;
  animation: text 5s infinite;
}

@media (max-width: 575.9px) {
  .introduce-cls-1,
  .introduce-cls-2,
  .introduce-cls-3 {
    fill: #fff;
    fill-opacity: 0.5;
  }
  .introduce-cls-1 {
    font-size: 230px;
  }
  .introduce-cls-2 {
    font-size: 190px;
  }
  .introduce-cls-3 {
    font-size: 280px;
  }
  .left-top {
    width: auto;
  }
  #introduce .introduce-cls-1 {
    opacity: 0.7;
    animation: none;
  }
  #introduce .introduce-cls-2 {
    opacity: 0.5;
    animation: none;
  }
  #introduce .introduce-cls-3 {
    opacity: 0.9;
    animation: none;
  }
}

@keyframes text {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#introduce path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

.eat-poprice {
  position: absolute;
  right: calc(42.8%);
  bottom: calc(13%);
  width: 20vw;
  min-width: 100px;
}

@media (max-width: 575.9px) {
  .eat-poprice {
    width: 80vw !important;
    bottom: -50px !important;
    /* right: calc(50% - 28vw) !important; */
  }
}

/* seaweed */
.seaweed {
  background-image: url(../../images/seaweedbg.jpg?v=1);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  color: #000;
  width: 100%;
  min-height: 1130px;
}

.seaweed .seaweedtitle {
  width: 10vw;
  position: absolute;
  right: calc(60% - 5vw);
  min-width: 80px;
}

.seaweed h2 {
  color: #000;
  text-align: center;
}

.seaweed p {
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  max-height: 230px;
  font-weight: 600;
}

.seaweed .describe {
  position: absolute;
  left: calc(25%);
}

@media (max-width: 1600px) {
  .seaweed {
    width: 100%;
    min-height: 700px;
  }

  .seaweed .seaweedtitle {
    right: calc(50% - 4vw);
  }
}

@media (max-width: 767px) {
  .seaweed .seaweedtitle {
    width: 10vw;
    right: calc(40% - 5vw);
  }
}

@media (max-width: 600px) {
  .seaweed {
    width: 100%;
    min-height: 600px;
  }
  .seaweed .seaweedtitle {
    right: calc(35% - 5vw);
  }
  .seaweed .describe {
    position: absolute;
    left: 10vw;
  }
}

@media (max-width: 450px) {
  .seaweed {
    width: 100%;
    min-height: 600px;
  }
  .seaweed .seaweedtitle {
    right: 18vw;
  }
}

/* sales */
.sales {
  background-image: url(../../images/sales-decorate-1.png?v=1),
    url(../../images/sales-decorate-2.png),
    url(../../images/sales-decorate-3.png),
    url(../../images/sales-decorate-4.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left 113px top 0px, left 0px bottom 46px,
    right 0px top 91px, right 0px bottom 61px;

  border: 18px solid rgba(249, 187, 83, 0.75);
  border-left: 0;
  border-right: 0;

  color: #fff;
  width: 100%;
  height: 839px;
}

.sales .describe {
  display: flex;
  height: 700px;
  align-items: flex-start;
}

.sales .describe img {
  position: relative;
  left: -2rem;
  top: -1rem;
}

.sales .seaweed_poprice {
  /* margin-top: 3rem; */
  display: flex;
  height: 600px;
  align-items: flex-end;
}

.sales h2 {
  font-family: 'Noto Serif TC', sans-serif;
}

.sales span {
  /* font-size: 0.9rem !important; */
  border-width: 2px !important;
  padding: 2px;
}

@media (max-width: 1900px) {
  .sales {
    background-image: url(../../images/sales-decorate-2.png),
      url(../../images/sales-decorate-3.png),
      url(../../images/sales-decorate-4.png);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: left 0px bottom 46px, right 0px top 91px,
      right 0px bottom 61px;
  }
}

@media (max-width: 1440px) {
  .sales {
    background-image: url(../../images/sales-decorate-1.png?v=1),
      url(../../images/sales-decorate-2.png);
    background-repeat: no-repeat, no-repeat;
    background-position: right 30px top 0px, left 0px bottom -80px;
    height: 800px;
  }
  .sales .seaweed_poprice,
  .sales .describe {
    height: 600px;
  }
}

@media (max-width: 1200px) {
  .sales {
    height: 600px;
  }
  .sales .seaweed_poprice,
  .sales .describe {
    height: 400px;
  }
}

@media (max-width: 1000px) {
  .sales {
    background-image: url(../../images/sales-decorate-2.png);
    background-repeat: no-repeat;
    background-position: left -30px bottom -85px;
    height: 500px;
  }
  .sales .seaweed_poprice,
  .sales .describe {
    height: 300px;
  }
}

@media (max-width: 767.9px) {
  .sales {
    height: 800px;
  }

  .sales .describe {
    height: auto;
  }
}

@media (max-width: 575.9px) {
  .sales {
    background-image: none;
  }
  .sales .seaweed_poprice {
    margin-bottom: -100px;
    margin-left: -33px;
    width: 110vw;
    height: auto;
  }
}

@media (max-width: 415px) {
  .sales {
    height: 700px;
  }
  .btn-inc {
    display: block;
  }
}

/* mark */
.mark {
  background-color: #ffdec5;
}

.mark h2 {
  color: #000;
  padding-bottom: 0.25rem !important;
  padding-top: 3rem !important;
}

.mark p {
  max-width: 350px;
  color: #000;
  font-weight: 500;
  line-height: 2;
  text-align: left;
}

.mark .col {
  text-align: center;
}

/* modal */
.modal-header {
  border-bottom: 0;
}

.modal-content {
  border-radius: 0;
  background-color: #d22e25;
  border: 0;
  color: #fff;
  font-family: 'Noto Serif TC', sans-serif;
}

.modal-footer {
  border-top: 0;
}

.modal-footer .btn {
  background-color: #f9bf58;
  border-radius: 0;
  color: #fff;
}