@charset "utf-8";
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap&subset=chinese-traditional'); */

body {
  background-color: #e9e3da;
  font-family: 'Noto Sans TC', sans-serif;
}

.outside-line {
  display: block;
  width: 100vw;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;

  display: flex;
  flex-direction: column; /* 子元素垂直排列 */
  align-items: center; /* 子元素水平居中 */
  /* justify-content: center; */
}


.kv-half{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: auto;
}

.kv-half li {
  display: block;
}


.kv-half li img {
  display: block;
  width: 100%;
  position: relative;

  pointer-events: auto;
  cursor: pointer;
}





.inside-line {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: var(--basic-width);
  /* width: 480px; */
  position: relative;
  top: 0;

  background-color: #666;
  height: 100vh;
}

.all-cover {
  background-color: #e9e3da;
}

.preloader {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 1px;
  height: 0px;
  overflow: hidden;

  display: none;
}

.header {
  display: block;
  width: var(--basic-width);
  /* width: 480px; */
  position: fixed;
}

/*/////////////////////////////////////////////*/
/*///////////////////  KV  ////////////////////*/
/*/////////////////////////////////////////////*/
.kv-img {
  display: block;
  width: 100%;
  position: relative;
}

/*/////////////////////////////////////////////*/
/*//////////////////  menu  ///////////////////*/
/*/////////////////////////////////////////////*/
.menu-box {
  display: block;
  width: var(--basic-width);
  /* width: 480px; */
  position: fixed;
  top: auto;
  bottom: 0;

  background-color: #8d624a;

  box-shadow: 0px -10px 10px -10px rgba(0, 0, 0, 0.4);
}

.menu-bg {
  display: block;
  width: 100%;
  position: relative;
}

.menu-ul {
  display: block;
  width: 100%;
  position: absolute;
  position: relative;
  top: 0;
  left: 0;

  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.menu-ul li {
  display: block;
}

.menu-ul li img {
  display: block;
  width: 100%;
  position: relative;

  pointer-events: auto;
  cursor: pointer;
}

/*/////////////////////////////////////////////*/
/*//////////////// 平衡能量區 ///////////////////*/
/*/////////////////////////////////////////////*/
.blance-box {
}

.blance-box img {
  display: block;
  width: var(--card-width);
  /* width: 101.25px; */
  position: absolute;
  top: 0;
  left: 0;

  pointer-events: auto;
  cursor: pointer;
}

.blance-box .m1 {
  top: var(--card-top-1);
  /* top: 322.5px; */

  left: var(--card-left-1);
  /* left: 124.5px; */
}

.blance-box .m2 {
  top: var(--card-top-1);
  /* top: 322.5px; */

  left: var(--card-left-2);
  /* left: 254.25px; */
}

.blance-box .m3 {
  top: var(--card-top-2);
  /* top: 465px; */

  left: var(--card-left-3);
  /* left: 60px; */
}

.blance-box .m4 {
  top: var(--card-top-2);
  /* top: 465px; */

  left: var(--card-left-4);
  /* left: 189.75px; */
}

.blance-box .m5 {
  top: var(--card-top-2);
  /* top: 465px; */

  left: var(--card-left-5);
  /* left: 318.75px; */
}

.blance-box .m6 {
  top: var(--card-top-3);
  /* top: 604.5px; */

  left: var(--card-left-1);
  /* left: 124.5px; */
}

.blance-box .m7 {
  top: var(--card-top-3);
  /* top: 604.5px; */

  left: var(--card-left-2);
  /* left: 254.25px; */
}

.blance-box .w1 {
  top: var(--card-top-4);
  /* top: 875.25px; */

  left: var(--card-left-1);
  /* left: 124.5px; */
}

.blance-box .w2 {
  top: var(--card-top-4);
  /* top: 875.25px; */

  left: var(--card-left-2);
  /* left: 254.25px; */
}

.blance-box .w3 {
  top: var(--card-top-5);
  /* top: 1016.25px; */

  left: var(--card-left-3);
  /* left: 60px; */
}

.blance-box .w4 {
  top: var(--card-top-5);
  /* top: 1016.25px; */

  left: var(--card-left-4);
  /* left: 189.75px; */
}

.blance-box .w5 {
  top: var(--card-top-5);
  /* top: 1016.25px; */

  left: var(--card-left-5);
  /* left: 318.75px; */
}

.blance-box .w6 {
  top: var(--card-top-6);
  /* top: 1155.75px; */

  left: var(--card-left-1);
  /* left: 124.5px; */
}

.blance-box .w7 {
  top: var(--card-top-6);
  /* top: 1155.75px; */

  left: var(--card-left-2);
  /* left: 254.25px; */
}

.blance-box .blance-bg {
  display: block;
  width: 100%;
  position: relative;

  pointer-events: none;
}

.blance-box .btn-cta {
  width: var(--btn-cta-width);
  /* width: 173.25px; */
  top: auto;
  bottom: 10%;
  /* bottom: 45px; */
  left: 50%;
  transform: translateX(-50%);
}
/*/////////////////////////////////////////////*/
/*////////////////   slider   /////////////////*/
/*/////////////////////////////////////////////*/

.product-box {
  background-color: #fff;
  padding-top: var(--product-box-padding-top);
  /* padding-top: 64.5px; */
  padding-bottom: var(--product-box-padding-bottom);
  /* padding-bottom: 70.5px; */
}

.til-product {
  display: block;
  width: var(--product-title-width);
  /* width: 337.5px; */
  position: relative;
  left: 50%;
  transform: translateX(-50%);

  margin-bottom: var(--product-title-bottom);
  /* margin-bottom: 36px; */
}

#slider-box {
  display: block;
  width: 100%;
  position: relative;
}

.main-box {
  display: block;
  width: 100%;
  position: relative;

  color: #fff;

  overflow: hidden;
}

.main-box img {
  display: block;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.main-box .main-bg {
  position: relative;
  left: 0;
  opacity: 0;
}

.content-box {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  /* background-color: rgb(184, 27, 27);
  border: 1px solid #ff00ff; */
}

.slider-ul {
  display: block;
  width: 100%;
  position: absolute;
  top: auto;
  left: 0;
  bottom: var(--slider-bottom);
  /* bottom: -42px; */

  /* border: 1px solid #000; */
  /* background-color: rgba(255, 255, 255, 0.5); */

  display: flex;
  flex-direction: row;
  justify-content: center;
}

.slider-ul li {
  display: block;
  width: var(--slider-circle-width);
  height: var(--slider-circle-width);
  /* width: 12px;
  height: 12px; */
  text-align: center;

  color: rgba(0, 0, 0, 0);

  /* background-color: rgb(48, 53, 48); */
  /* background-color: rgba(255, 255, 255, 0.5); */
  background-color: #fff;
  border-radius: 15px;
  border: 1px solid #b18d72;

  pointer-events: auto;
  cursor: pointer;

  margin-left: var(--slider-circle-margin-left);
  /* margin-left: 40px; */
}

.slider-ul li:first-child {
  margin-left: 0;
}

.btn-right,
.btn-left {
  display: block;
  width: 15%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  pointer-events: auto;
  cursor: pointer;

  display: none;
}

.btn-left {
  left: 1%;
}

.btn-right {
  right: 1%;
}

/*/////////////////////////////////////////////*/
/*//////////////      store     ///////////////*/
/*////////////////////////////////////////////*/
.store-box {
  display: block;
  width: 100%;

  background-image: url('../images/store_bg.jpg');
  background-repeat: repeat-y;

  padding-top: var(--store-padding-top);
  padding-bottom: var(--store-padding-bottom);
  /* padding-top: 45px;
  padding-bottom: 158.25px; */

  display: flex;
  flex-direction: column;
  align-items: center;
}

.til-store {
  display: block;
  width: var(--store-tiltle-width);
  /* width: 210px; */
  position: relative;
  /* left: 50%;
  transform: translateX(-50%); */
}
.store-box span {
  display: block;
  width: 360px;
  position: relative;
  border: 1px solid red;

  font-weight: bolder;
  font-size: 30px;
}

.txt-store {
  display: block;
  width: var(--store-txt-width);
  /* width: 345px; */
  position: relative;
  margin-top: var(--store-padding-top);
  /* margin-top: 45px; */
}

/*/////////////////////////////////////////////*/
/*//////////////       pop      ///////////////*/
/*////////////////////////////////////////////*/
.pop-box {
  display: block;
  width: calc(var(--basic-width));
  /* width: calc(var(--basic-width) * var(--pr)); */
  /* width: 480px; */
  height: 100%;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.6);

  /* border: 1px solid #ff00ff; */
  display: none;
}

.answer-box {
  display: block;
  width: 100%;
  /* width: calc(var(--basic-width) * var(--pr)); */
  position: relative;
  left: 50%;
  transform: translateX(-50%);

  background-color: #e9e4da;


  /* border-top: calc(var(--pop-border-height) * var(--pr)) solid #8a6b57; */
  /* border-bottom: calc(var(--pop-border-height) * var(--pr)) solid #e9e4da; */
  /* padding-top: calc(var(--pop-padding-height) * var(--pr)); */
  padding-bottom: calc(var(--pop-padding-height) * var(--pr));
  /* border-top: 14.25px solid #8a6b57;
  border-bottom: 14.25px solid #8a6b57;
  padding-top: 33px;
  padding-bottom: 33px; */

  display: flex;
  flex-direction: column;
  align-items: center;

  display: none;
  padding-bottom: 20%;
}

.til-answer {
  display: block;
  /* width: calc(var(--pop-til-wight) * var(--pr)); */
  /* width: 168px; */
  width: 100%;
  position: relative;
}

.txt-prompt {
  display: block;
  /* width: calc(var(--pop-txtprompt-width) * var(--pr)); */
  width: calc(var(--pop-txtprompt-width) * var(--pr2));
  /* width: calc(var(--pop-txtprompt-width)); */
  /* width: 278.25px; */
  position: relative;

  margin-top: calc(var(--pop-btn-margin-top) * var(--pr));
  /* margin-top: 20.25px; */
}

.btn-back,
.btn-next,
.btn-store {
  display: block;
  width: calc(var(--pop-btn-width) * var(--pr));
  width: calc(var(--pop-btn-width));
  /* width: 135.75px; */
  position: relative;

  pointer-events: auto;
  cursor: pointer;

  margin-top: calc(var(--pop-btn-margin-top) * var(--pr));
  /* margin-top: calc(var(--pop-btn-margin-top)); */
  /* margin-top: 20.25px; */
}

.answer-txt-box {
  display: block;
  width: 100%;
  width: 85%;
  position: relative;
  /* border: 1px solid red; */
}

.answer-txt-box img {
  display: block;

  width: 100%;
  position: relative;
  display: none;
}

.answer-txt-box img:first-child {
  /* display: block; */
}

.answer-pic-box {
  display: block;
  width: calc(var(--pop-card-width) * var(--pr));
  /* width: 248.25px; */
  position: relative;

  /* border: 1px solid #ff00ff; */

  margin-top: calc(var(--pop-car-margin-top) * var(--pr));
  margin-bottom: calc(var(--pop-btn-margin-top) * var(--pr));
  /* margin-top: 33.75px;
  margin-bottom: 33.75px; */
}

.answer-pic-box ul {
  display: block;
  width: 100%;
  position: relative;

  display: none;
}

.answer-pic-box ul li {
  display: block;
  width: 100%;
  position: relative;
}

.answer-pic-box ul li:last-child {
  display: none;
}

.answer-box ul img {
  display: block;
  width: 100%;
  position: relative;
}

.answer-box .btn-box {
  display: block;
  width: 100%;
  position: relative;
  /* background-color: #ccc; */

  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: space-between; */
  justify-content: center;
}

.btn-back,
.btn-store {
  margin-left: 10px;
  margin-right: 10px;
}

.answer-box ul:first-child {
  /* display: block; */
}
/* .blance-box div {
  transition: transform 0.25s ease, box-shadow 0.25s ease-in-out;
  background-color: #fff;
} */

.light-on {
  border-radius: 10px;
  box-shadow: 0 0 10px #fff047;
  /* box-shadow: 0 0 10px #fff047, inset 0 0 10px rgba(0, 0, 0, 1); 外部發光和内部光暈 */
  transition: box-shadow 0.25s ease-in-out;
}

.light-off {
  box-shadow: none;
  transition: box-shadow 0.25s ease-in-out;
}

/* .blance-box:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  display: none;
  pointer-events: none;
}

.blance-box .light-on::after {
  display: block;
}

.blance-box .light-off::after {
  display: none;
} */

/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */

@media screen and (max-width: 420px) {
  /* 手機版 */

  .inside-line {
    width: 100vw;
  }

  .header {
    width: 100vw;
  }

  .menu-box {
    width: 100vw;
    height: 21vw;
  }

  .blance-box img {
    width: 21vw;
  }

  .blance-box .m1 {
    top: 67vw;
    left: 26vw;
  }

  .blance-box .m2 {
    top: 67vw;
    left: 53vw;
  }

  .blance-box .m3 {
    top: 96.4vw;
    left: 12.6vw;
  }

  .blance-box .m4 {
    top: 96.4vw;
    left: 39.6vw;
  }

  .blance-box .m5 {
    top: 96.4vw;
    left: 66.5vw;
  }

  .blance-box .m6 {
    top: 125.6vw;
    left: 26vw;
  }

  .blance-box .m7 {
    top: 125.6vw;
    left: 53vw;
  }

  .blance-box .w1 {
    top: 182vw;
    left: 26vw;
  }

  .blance-box .w2 {
    top: 182vw;
    left: 53vw;
  }

  .blance-box .w3 {
    top: 211vw;
    left: 12.6vw;
  }

  .blance-box .w4 {
    top: 211vw;
    left: 39.6vw;
  }

  .blance-box .w5 {
    top: 211vw;
    left: 66.5vw;
  }

  .blance-box .w6 {
    top: 240vw;
    left: 26vw;
  }

  .blance-box .w7 {
    top: 240vw;
    left: 53vw;
  }

  .blance-box .btn-cta {
    width: 36vw;
    bottom: 10%;
  }

  .store-box {
    width: 100vw;

    padding-top: 9.6vw;
    padding-bottom: 33vw;
  }

  .til-store {
    display: block;
    width: 36vw;
  }

  .txt-store {
    width: 75vw;
    margin-top: 9vw;
  }

  .product-box {
    width: 100vw;
    padding-top: 13vw;
    padding-bottom: 14vw;
  }
  .til-product {
    width: 70vw;

    margin-bottom: 8vw;
  }

  #slider-box {
    width: 100vw;
  }

  .slider-ul {
    bottom: -8vw;
  }

  .slider-ul li {
    width: 2.5vw;
    height: 2.5vw;

    margin-left: 8vw;
  }

  .slider-ul li:first-child {
    margin-left: 0;
  }

  .pop-box {
    width: 100vw;
  }

  .answer-box {
    width: 100vw;

    /* border-top: 2.9vw solid #8a6b57; */
    /* border-bottom: 2.9vw solid #8a6b57; */
    /* padding-top: 6.8vw; */
    padding-bottom: 6.8vw;
  }

  .til-answer {
    /* width: 35vw; */
  }

  .txt-prompt {
    width: 58vw;
    margin-top: 4.2vw;
  }

  .btn-back,
  .btn-next,
  .btn-store {
    width: 28vw;

    margin-top: 4.2vw;
  }

  .answer-pic-box {
    width: 52vw;

    margin-top: 7vw;
    margin-bottom: 7vw;
  }
}
@media (min-width: 580px) and (max-width: 1000px) {
  /* pad */
}
/* @media screen and (min-width: 640px)  */
@media screen and (min-width: 1000px) {
  /* 電腦版 */
}