.for-m {
  display: none !important;
}

[data-scroll-show] {
  transform: translateY(3rem);
  opacity: 0;
  transition: opacity 1s, transform 1s;
}
[data-scroll-show].scrollShowActive {
  opacity: 1;
  transform: translateY(0);
}

body {
  position: relative;
  color: #e6e1cf;
}
body::before {
  position: fixed;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 600px;
  background: url("../img/bg-m.jpg") repeat-y top center;
  background-size: 100% auto;
}

section {
  color: #e6e1cf;
  line-height: normal;
  font-family: "Noto Serif TC", serif;
}
section h1, section h2, section h3, section h4, section h5, section h6 {
  font-weight: bold;
}
section div, section span, section h1, section h2, section h3, section h4, section h5, section h6, section p {
  font-family: "Noto Serif TC", serif;
  line-height: normal;
}

.fake_menu {
  z-index: 1;
  position: fixed;
  max-width: 600px;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #EEE;
}
.fake_menu p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
}

.kv-first,
.kv,
.intro,
.design,
.box,
.product {
  width: 100%;
  max-width: 600px;
  margin: auto;
}

.kv-first {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-bottom: 10%;
}
.kv-first .deco {
  display: block;
  width: 8%;
  margin: 0 auto;
  transform: rotate(90deg);
}
.kv-first .kv-first-title {
  display: block;
  width: 90%;
  margin: 0 auto;
  margin-bottom: 8%;
}
.kv-first .hr {
  display: block;
  width: 80%;
  margin: 0 auto;
  margin-top: 12%;
}

.kv {
  position: relative;
  width: 100%;
  height: 200vh;
}
.kv .kv-wrap {
  position: sticky;
  left: 0;
  width: 100%;
}
.kv .kv-wrap .kv-scale {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.kv .kv-wrap .kv-scale > img {
  position: absolute;
}
.kv .kv-wrap .kv-scale .kv-frame {
  top: 0;
  left: 0;
}
.kv .kv-wrap .kv-scale .kv-table {
  width: 70%;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 4%;
  transition: opacity 1s;
}
.kv .kv-wrap .kv-scale .kv-tea-left {
  width: 10%;
  bottom: 12.5%;
  left: 32%;
  transition: opacity 1s;
}
.kv .kv-wrap .kv-scale .kv-tea-right {
  width: 10%;
  bottom: 12.5%;
  right: 32%;
  transition: opacity 1s;
}
.kv .kv-wrap .kv-scale .kv-teapot-left {
  width: 15%;
  bottom: 14.5%;
  left: 18%;
  transition: opacity 1s;
}
.kv .kv-wrap .kv-scale .kv-teapot-right {
  width: 15%;
  bottom: 14.5%;
  right: 18%;
  transition: opacity 1s;
}
.kv .kv-wrap .kv-scale .kv-peacock-left-fade {
  width: 110%;
  bottom: 0;
  left: -16%;
}
.kv .kv-wrap .kv-scale .kv-peacock-right-fade {
  width: 110%;
  bottom: 0;
  right: -16%;
}
.kv .kv-wrap .kv-scale .article-1,
.kv .kv-wrap .kv-scale .article-2 {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  width: 65%;
  top: 45%;
  text-align: center;
  line-height: 175%;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 1s, transform 1s;
}
.kv .kv-wrap .kv-scale .article-1 h3,
.kv .kv-wrap .kv-scale .article-2 h3 {
  font-size: 1.45rem;
}
.kv .kv-wrap .kv-scale .article-1 .article-title,
.kv .kv-wrap .kv-scale .article-2 .article-title {
  display: block;
  width: 100%;
  margin: auto;
  filter: drop-shadow(0 0 0.25em #000);
}
.kv .kv-wrap .kv-scale .article-1 .word-flex,
.kv .kv-wrap .kv-scale .article-2 .word-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  font-size: 0.9rem;
}
.kv .kv-wrap .kv-scale .article-1 .word-flex p img,
.kv .kv-wrap .kv-scale .article-2 .word-flex p img {
  display: inline-block;
  vertical-align: middle;
  width: 1.25em;
  margin: 0 0.25em;
  margin-top: -0.15em;
}
.kv .kv-wrap .kv-scale .article-1 {
  opacity: 1;
}
.kv .kv-wrap .kv-scale .article-1 .article-title {
  filter: drop-shadow(0 0.25rem 0.5em rgba(0, 0, 0, 0.5));
}
.kv .kv-wrap .kv-scale .article-2 {
  transform: translateY(calc(-50% + 5rem));
}
.kv .kv-wrap .kv-scale.step-1 .kv-table,
.kv .kv-wrap .kv-scale.step-1 .kv-tea-left,
.kv .kv-wrap .kv-scale.step-1 .kv-tea-right,
.kv .kv-wrap .kv-scale.step-1 .kv-teapot-left,
.kv .kv-wrap .kv-scale.step-1 .kv-teapot-right {
  opacity: 0;
}
.kv .kv-wrap .kv-scale.step-1 .article-1 {
  opacity: 0;
  transform: translateY(calc(-50% - 5rem));
}
.kv .kv-wrap .kv-scale.step-1 .article-2 {
  opacity: 1;
  transform: translateY(-50%);
}

.intro {
  position: relative;
  width: 100%;
  height: 150vh;
  min-height: 100vh;
}
.intro .intro-sticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  min-height: 100vh;
}
.intro .intro-sticky .intro-bg {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-mask-image: url("../img/intro-mask.svg");
          mask-image: url("../img/intro-mask.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: 65%;
          mask-size: 65%;
  transition: -webkit-mask-size 1s;
  transition: mask-size 1s;
  transition: mask-size 1s, -webkit-mask-size 1s;
}
.intro .intro-sticky .intro-bg img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: left top;
  transform: scale(0.85) translate(-50%, -50%);
  transition: top 0.25s, transform 0.25s;
}
.intro .intro-sticky .intro-frame {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  transform-origin: top left;
  transform: scale(0.7) translate(-50%, -50%);
  transition: transform 1s, opacity 1s;
}
.intro .intro-sticky .img-flower {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22%;
  transition: opacity 1s;
}
.intro .intro-sticky.step-1 .intro-bg {
  -webkit-mask-size: 300%;
          mask-size: 300%;
}
.intro .intro-sticky.step-1 .intro-bg img {
  top: 0;
  transform: scale(3) translate(-50%, 0%);
}
.intro .intro-sticky.step-1 .intro-frame {
  opacity: 0;
  transform: scale(2.75) translate(-50%, -50%);
}
.intro .intro-sticky.step-1 .img-flower {
  opacity: 0;
}
.intro .intro-sticky.step-1 .intro-content {
  pointer-events: all;
  opacity: 1;
  transition: opacity 1s 1s;
}
.intro .intro-sticky .intro-content {
  width: 100%;
  padding: 10% 7%;
  pointer-events: none;
  opacity: 0;
  text-align: center;
  transition: opacity 0.5s 0s;
}
.intro .intro-sticky .intro-content .intro-flex .intro-title {
  position: relative;
  padding: 1rem 0;
}
.intro .intro-sticky .intro-content .intro-flex .intro-title::before {
  position: absolute;
  display: block;
  content: "";
  width: 90%;
  height: 2px;
  bottom: 0;
  left: 5%;
  background: linear-gradient(to bottom, #d0b962, #FFF, #d0b962);
}
.intro .intro-sticky .intro-content .intro-flex .intro-title h2 {
  font-size: 2rem;
  text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
}
.intro .intro-sticky .intro-content .intro-flex .intro-title h2 img {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  margin: 0 0.25em;
  margin-top: -0.15em;
}
.intro .intro-sticky .intro-content .intro-flex .intro-title h2 .img-and {
  display: inline-block;
  width: 1em;
  filter: drop-shadow(0 0 0.5em rgba(0, 0, 0, 0.5));
}
.intro .intro-sticky .intro-content .intro-flex .intro-info {
  position: relative;
}
.intro .intro-sticky .intro-content .intro-flex .intro-info .intro-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.intro .intro-sticky .intro-content .intro-flex .intro-info .intro-tab a {
  position: relative;
  width: 11em;
  padding: 0.5em 0;
  text-align: center;
}
.intro .intro-sticky .intro-content .intro-flex .intro-info .intro-tab a.active::before {
  opacity: 1;
}
.intro .intro-sticky .intro-content .intro-flex .intro-info .intro-tab a::before {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/tab-border.svg") no-repeat center center;
  background-size: contain;
  opacity: 0.35;
  transition: opacity 0.5s;
}
.intro .intro-sticky .intro-content .intro-flex .intro-info .intro-info-wrap .intro-info-block > p {
  line-height: 175%;
  text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
}
.intro .intro-sticky .intro-content .intro-flex .intro-info .intro-info-wrap .intro-info-block .info-flex {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
  text-align: left;
}
.intro .intro-sticky .intro-content .intro-flex .intro-info .intro-info-wrap .intro-info-block .info-flex img {
  display: block;
  width: 25%;
  margin-top: 0.25rem;
}
.intro .intro-sticky .intro-content .intro-flex .intro-info .intro-info-wrap .intro-info-block .info-flex article {
  flex: 1 0 0;
}
.intro .intro-sticky .intro-content .intro-flex .intro-info .intro-info-wrap .intro-info-block .info-flex article h4 {
  font-size: 1.45rem;
  margin-bottom: 0.5rem;
}

.design {
  position: relative;
  padding: 2.5rem 0;
}
.design .design-deco-left-top,
.design .design-deco-right-top {
  position: absolute;
  top: 3.5rem;
  width: 30%;
}
.design .design-deco-left-bottom,
.design .design-deco-right-bottom {
  position: absolute;
  bottom: 0;
  width: 30%;
}
.design .design-deco-left-top,
.design .design-deco-left-bottom {
  left: 0;
}
.design .design-deco-right-top,
.design .design-deco-right-bottom {
  right: 0;
}
.design .design-block {
  position: relative;
  width: 95%;
  margin: auto;
}
.design .design-block .butterfly-left,
.design .design-block .butterfly-right {
  position: absolute;
  width: 5%;
}
.design .design-block .butterfly-left {
  top: 59%;
  left: 5%;
}
.design .design-block .butterfly-right {
  top: 20%;
  right: 5%;
}
.design .design-block h2 {
  font-size: 2rem;
  font-weight: normal;
  text-align: center;
  line-height: 135%;
}
.design .design-block p {
  margin-top: 0.5rem;
  text-align: center;
  line-height: 175%;
}
.design .design-block .design-flex {
  width: 82%;
  margin: 3rem auto;
  gap: 2rem;
  text-align: center;
}
.design .design-block .design-flex div {
  flex: 1 0 0;
}
.design .design-block .design-flex div img {
  display: block;
  width: 70%;
  margin: auto;
}
.design .design-block .design-flex div h3 {
  font-size: 1.45rem;
}
.design .design-block .design-flex div article {
  padding: 0.5rem 0;
}
.design .design-block .design-flex .img-and {
  display: block;
  width: 2.5rem;
  margin: 3rem auto;
  filter: drop-shadow(0 0 0.5em rgba(0, 0, 0, 0.5));
}
.design .design-block .yt-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
}
.design .design-block .yt-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.design .design-block .design-line {
  display: block;
  width: 100%;
  transform: scale(1, -1);
}

.box {
  position: relative;
}
.box .box-wrap {
  width: 95%;
  margin: auto;
  padding: 1.5rem 0;
  text-align: center;
}
.box .box-wrap .box-title {
  width: 90%;
  margin: auto;
  text-align: center;
}
.box .box-wrap .box-title p {
  padding: 1rem 0;
}
.box .box-wrap article h2 {
  font-size: 2rem;
}
.box .box-wrap article h2 img {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  margin: 0 0.25em;
  margin-top: -0.15em;
}
.box .box-wrap article p {
  line-height: 175%;
}
.box .box-wrap .box-line {
  display: block;
  width: 65%;
  margin: auto;
}
.box .box-wrap .box-swiper {
  position: relative;
  margin: 0.5rem 0;
}
.box .box-wrap .box-swiper .swiper {
  width: 85%;
  margin: auto;
}
.box .box-wrap .box-swiper .swiper-slide {
  width: 100%;
}
.box .box-wrap .box-swiper .swiper-button-prev,
.box .box-wrap .box-swiper .swiper-button-next {
  width: 2rem;
}
.box .box-wrap .box-swiper .swiper-button-prev::after,
.box .box-wrap .box-swiper .swiper-button-next::after {
  display: none;
}
.box .box-wrap .box-swiper .swiper-button-prev {
  left: 0;
}
.box .box-wrap .box-swiper .swiper-button-next {
  right: 0;
}
.box .box-wrap .box-flex {
  width: 85%;
  margin: 1rem auto;
}
.box .box-wrap .box-flex article h3 {
  font-size: 1.45rem;
}
.box .box-wrap .box-flex article p {
  margin-top: 1rem;
}
.box .box-wrap .box-flex div {
  margin-top: 1.5rem;
}
.box .box-wrap .box-flex div p {
  font-size: 0.9rem;
  letter-spacing: 0;
  margin: 1rem 0 1.5rem 0;
  line-height: 175%;
}
.box .box-wrap .box-flex .btn-buy {
  display: block;
  width: 60%;
  margin: auto;
}

.product {
  position: relative;
  padding: 2.5rem 0;
}
.product .product-wrap {
  width: 95%;
  margin: auto;
  text-align: center;
}
.product .product-wrap h2 {
  font-size: 2rem;
}
.product .product-wrap h2 img {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  margin: 0 0.25em;
  margin-top: -0.15em;
}
.product .product-wrap .product-line {
  display: block;
  width: 65%;
  margin: 1rem auto;
}
.product .product-wrap .product-flex > div {
  margin: 3rem auto;
}
.product .product-wrap .product-flex > div > img {
  padding: 0 10%;
}
.product .product-wrap .product-flex > div article {
  padding: 1rem 5%;
}
.product .product-wrap .product-flex > div article h4 {
  font-size: 1.45rem;
}
.product .product-wrap .product-flex > div article p {
  margin: 0.5rem 0;
  line-height: 175%;
}
.product .product-wrap .product-flex > div article a {
  display: block;
  width: 60%;
  margin: auto;
}
.product .product-wrap .product-flex > div article .product-des {
  display: block;
  width: 35%;
  margin: 0.5rem auto 1rem auto;
}
.product .product-wrap .product-flex > div article h5 {
  text-align: left;
  font-weight: normal;
  font-size: 0.9rem;
  margin: 0.5rem 0;
}
.product .product-wrap .product-logo {
  margin-top: 1.5rem;
}
.product .product-wrap .product-logo h5 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}/*# sourceMappingURL=index-m.css.map */