@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Emoji:wght@300&family=Noto+Sans+TC:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Glegoo:wght@400;700&family=Noto+Emoji:wght@300&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
h1.title-forSeo {
  width: 1px;
  height: 1px;
  overflow: hidden;
  text-indent: -101%;
  position: absolute;
}

#frame {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  max-width: 100vw;
  height: 100vh;
  background-color: #eef1e4;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: grid;
  place-items: center;
  opacity: 0;
  -webkit-transform: translateX(125%);
          transform: translateX(125%);
  -webkit-transition: 0.6s cubic-bezier(1, 0.885, 0.32, 1);
  transition: 0.6s cubic-bezier(1, 0.885, 0.32, 1);
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: transform;
}
#frame::before, #frame::after {
  content: "";
  position: absolute;
  width: 125%;
  height: 100%;
  top: 0;
  left: -12.5%;
  background: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(237, 238, 155, 0)), color-stop(50%, rgba(237, 238, 155, 0.7490196078)), to(rgba(237, 238, 155, 0)));
  background: linear-gradient(to right, rgba(237, 238, 155, 0) 25%, rgba(237, 238, 155, 0.7490196078) 50%, rgba(237, 238, 155, 0) 100%);
  -webkit-transition: -webkit-transform 1.2s cubic-bezier(1, 0.885, 0.32, 1);
  transition: -webkit-transform 1.2s cubic-bezier(1, 0.885, 0.32, 1);
  transition: transform 1.2s cubic-bezier(1, 0.885, 0.32, 1);
  transition: transform 1.2s cubic-bezier(1, 0.885, 0.32, 1), -webkit-transform 1.2s cubic-bezier(1, 0.885, 0.32, 1);
  -webkit-transition-delay: 250ms;
          transition-delay: 250ms;
  z-index: 98;
  -webkit-transform: translateX(0) skewX(5deg);
          transform: translateX(0) skewX(5deg);
}
#frame::after {
  z-index: 99;
  background: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(163, 189, 47, 0)), color-stop(60%, rgba(163, 189, 47, 0.5803921569)), to(rgba(163, 189, 47, 0)));
  background: linear-gradient(to right, rgba(163, 189, 47, 0) 25%, rgba(163, 189, 47, 0.5803921569) 60%, rgba(163, 189, 47, 0) 100%);
  width: 125%;
  -webkit-transition: -webkit-transform 1.4s cubic-bezier(1, 0.885, 0.32, 1);
  transition: -webkit-transform 1.4s cubic-bezier(1, 0.885, 0.32, 1);
  transition: transform 1.4s cubic-bezier(1, 0.885, 0.32, 1);
  transition: transform 1.4s cubic-bezier(1, 0.885, 0.32, 1), -webkit-transform 1.4s cubic-bezier(1, 0.885, 0.32, 1);
}
#frame .frameClose {
  opacity: 0;
}
#frame .frameClose span {
  position: absolute;
  border-radius: 50%;
  font-size: 1.3em;
  width: 50px;
  line-height: 50px;
  background-color: #8bac61;
  color: #fff;
  font-family: "Noto Emoji", sans-serif !important;
  text-align: center;
}
#frame .frame-wrap {
  background-color: #c7c1bd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 0;
  width: 100vw;
  height: 100vh;
  padding: 15px;
}
#frame .frame-wrap iframe {
  min-width: 100%;
  height: 100%;
  border-radius: 20px;
}
@media (min-width: 768px) {
  #frame .frame-wrap iframe {
    min-width: 90%;
  }
}
@media (min-width: 992px) {
  #frame .frame-wrap iframe {
    min-width: 70%;
  }
}

.buy-content-text a, .news-read-part a, .hc-news p a {
  display: inline-block;
  color: #2196F3;
  text-decoration: none;
}

p a {
  display: inline-block;
  line-height: 1.8;
  color: #555555;
}
p a:hover {
  color: #2196F3;
}

.frame_active {
  cursor: auto;
  overflow: hidden;
}
.frame_active #frame {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition-delay: 400ms;
          transition-delay: 400ms;
}
.frame_active #frame::before {
  -webkit-transition-delay: 200ms;
          transition-delay: 200ms;
  -webkit-transform: translateX(-175%) skewX(5deg);
          transform: translateX(-175%) skewX(5deg);
}
.frame_active #frame::after {
  -webkit-transition-delay: 400ms;
          transition-delay: 400ms;
  -webkit-transform: translateX(-150%) skewX(-15deg);
          transform: translateX(-150%) skewX(-15deg);
}
.frame_active #frame .frame-wrap {
  opacity: 1;
  -webkit-transition: opacity 508ms ease 883ms, cubic-bezier(1, 0.885, 0.32, 1);
  transition: opacity 508ms ease 883ms, cubic-bezier(1, 0.885, 0.32, 1);
}
.frame_active #frame .frameClose {
  position: relative;
  top: 15px;
  left: -48%;
  cursor: pointer;
  opacity: 1;
  -webkit-transition: opacity 1.25s;
  transition: opacity 1.25s;
  -webkit-transition-delay: 1.25s;
          transition-delay: 1.25s;
}
@media (min-width: 768px) {
  .frame_active #frame .frameClose {
    top: 15px;
    left: -45%;
  }
}
@media (min-width: 992px) {
  .frame_active #frame .frameClose {
    top: 15px;
    left: -36%;
  }
}
.frame_active #frame .frameClose b.actCircle {
  position: absolute;
  top: -5px;
  left: -5px;
  background-color: #e6ef96;
  opacity: 0.5;
  width: 60px;
  height: 60px;
  opacity: 0.85;
  border-radius: 50%;
  -webkit-animation: pulse 1.2s cubic-bezier(0.66, 0, 0.34, 1) infinite;
          animation: pulse 1.2s cubic-bezier(0.66, 0, 0.34, 1) infinite;
}
.frame_active #frame .frameClose b.actCircle::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(219, 231, 138, 0.568627451);
  top: 0;
  left: 0;
  -webkit-animation: pulse 1.2s cubic-bezier(0.66, 0, 0.34, 1) infinite;
          animation: pulse 1.2s cubic-bezier(0.66, 0, 0.34, 1) infinite;
  z-index: -1;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.85;
  }
  50% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.85;
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.85;
  }
  50% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.85;
  }
}
@-webkit-keyframes pulse1 {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.85;
  }
  50% {
    -webkit-transform: scale(1.45);
            transform: scale(1.45);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.85;
  }
}
@keyframes pulse1 {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.85;
  }
  50% {
    -webkit-transform: scale(1.45);
            transform: scale(1.45);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.85;
  }
}
@-webkit-keyframes circleBuyBtn {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-box-shadow: 0 0 0 5px var(--anibtn-color);
            box-shadow: 0 0 0 5px var(--anibtn-color);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    -webkit-box-shadow: 0 0 0 14px var(--anibtn-color-50);
            box-shadow: 0 0 0 14px var(--anibtn-color-50);
  }
  100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-box-shadow: 0 0 0 5px var(--anibtn-color);
            box-shadow: 0 0 0 5px var(--anibtn-color);
  }
}
@keyframes circleBuyBtn {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-box-shadow: 0 0 0 5px var(--anibtn-color);
            box-shadow: 0 0 0 5px var(--anibtn-color);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    -webkit-box-shadow: 0 0 0 14px var(--anibtn-color-50);
            box-shadow: 0 0 0 14px var(--anibtn-color-50);
  }
  100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-box-shadow: 0 0 0 5px var(--anibtn-color);
            box-shadow: 0 0 0 5px var(--anibtn-color);
  }
}
@media (min-width: 992px) {
  .buy-part .popact .popupAct {
    left: calc((85% - 460px) / 2.85);
  }
}

.page-overlay {
  display: none;
}

.show {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.85;
  }
  50% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.85;
  }
}
.pulse {
  -webkit-animation: pulse ease-in-out 1.8s infinite alternate both;
          animation: pulse ease-in-out 1.8s infinite alternate both;
}

.d1 {
  -webkit-animation-delay: 2.7s;
          animation-delay: 2.7s;
}

main {
  width: 100%;
  --radius:10px;
  --resetcolor:#3f3a39;
}

h3 {
  margin-bottom: 1.5rem;
  font-family: "Noto Serif TC", serif;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  color: #444444;
  letter-spacing: 1rem;
}
@media (min-width: 768px) {
  h3 {
    font-size: 1.8rem;
  }
}

.position-relative {
  position: relative;
}

.originalblue {
  background-color: #64cfdf;
}
.originalblue:hover {
  background-color: #1ab4cc;
}

.kumquatOrange {
  background-color: #eac443 !important;
}
.kumquatOrange:hover {
  background-color: #d6b138 !important;
}

.sgs-document[data-flavor=金棗] .orange:hover {
  background-color: #d6b138 !important;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

.buy-part {
  --rightitemW:100%;
  --gapsize:1rem;
  --paddsize:87.5vw;
  position: relative;
  padding-bottom: 0;
}
@media (min-width: 992px) {
  .buy-part {
    --rightitemW:370px;
    --gapsize:2rem;
  }
}
@media (min-width: 1400px) {
  .buy-part {
    --rightitemW:415px;
    --gapsize:2.5rem;
  }
}
@media screen and (min-width: 1616px) {
  .buy-part {
    --paddsize:1400px;
  }
}
.buy-part .padd {
  width: var(--paddsize);
  margin: auto;
}
.buy-part__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gapsize);
}
@media (min-width: 992px) {
  .buy-part__row {
    grid-template-columns: 1fr var(--rightitemW);
  }
}
@media (min-width: 1200px) {
  .buy-part__row {
    gap: var(--gapsize);
  }
}
@media (min-width: 1400px) {
  .buy-part__row {
    gap: var(--gapsize);
  }
}
@media (min-width: 992px) {
  .buy-part .left-item .sticky-box {
    position: sticky;
  }
  .buy-part .left-item .sticky-box.p-s {
    top: calc(50% - (var(--paddsize) - (var(--rightitemW) + var(--gapsize))) / 2 / 2);
  }
  .buy-part .left-item .sticky-box.p-p {
    top: calc(50% - (var(--paddsize) - (var(--rightitemW) + var(--gapsize))) * 0.67 / 2);
  }
  .buy-part .left-item .sticky-box.p-t {
    top: calc(50% - (var(--paddsize) - (var(--rightitemW) + var(--gapsize))) * 0.57 / 2);
  }
  .buy-part .left-item .sticky-box.p-plus {
    top: calc(50% - (var(--paddsize) - (var(--rightitemW) + var(--gapsize))) * 0.6 / 2);
  }
}
.buy-part .left-item .buy-btn {
  --btncricle: 55px;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  right: 6%;
  top: -25px;
  width: 66px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}
@media (min-width: 768px) {
  .buy-part .left-item .buy-btn {
    --btncricle: 85px;
    right: 12.5%;
    top: -50px;
    width: var(--btncricle);
    font-size: 1.04rem;
  }
}
.buy-part .left-item .buy-btn::after {
  content: "";
  height: var(--btncricle);
  width: var(--btncricle);
  border-radius: 50em;
  background-color: var(--anibtn-bg);
  -webkit-animation: circleBuyBtn 2.3s infinite ease-in-out;
          animation: circleBuyBtn 2.3s infinite ease-in-out;
}
.buy-part .left-item .buy-btn span {
  position: absolute;
  font-family: "Roboto", "PingFang TC", "Noto Sans TC", "微軟正黑體", sans-serif;
  z-index: 2;
  letter-spacing: 0;
}
.buy-part .left-item .blue3 span {
  color: #286578;
}
@media (min-width: 768px) {
  .buy-part .left-item .blue3 {
    right: -12.5%;
  }
}
.buy-part .left-item .blue3::after {
  --anibtn-bg:rgb(46 215 244 / 60%);
  --anibtn-color:#b5f1ff00;
  --anibtn-color-50:#b5f1ff73;
}
.buy-part .left-item .orange {
  top: -20px;
  --anibtn-bg:rgb(254 103 48 / 60%);
  --anibtn-color:#ffc77f00;
  --anibtn-color-50:#ffc87f6e;
}
.buy-part .left-item .orange span {
  color: #97391b;
}
.buy-part .left-item .pink {
  top: -20px;
  --anibtn-bg:rgb(253 102 140 / 40%);
  --anibtn-color:#ffb5d600;
  --anibtn-color-50:#ffb5d66a;
}
.buy-part .left-item .pink span {
  color: #d7335e;
}
.buy-part .left-item .black {
  --anibtn-bg:rgb(51 51 51 / 70%);
  --anibtn-color:#a1a1a100;
  --anibtn-color-50:#a1a1a167;
}
.buy-part .left-item .black span {
  color: #f5ed8f;
}
.buy-part .left-item .bg-img {
  width: min(100%, 988px);
  margin: auto;
  text-indent: 110%; /*首行縮排*/
  overflow: hidden; /*自動隱藏超出的文字或圖片*/
  white-space: nowrap; /*希望元素在第一排上面，沒有斷行*/
}
.buy-part .left-item .bg-img.p-s {
  aspect-ratio: 2.1/1;
  background: url(/images/other/Img_s2-probiotic.webp) no-repeat top center/contain;
}
.buy-part .left-item .bg-img.p-p {
  aspect-ratio: 1/0.57;
  background: url(/images/other/Img_p3-probiotic.webp?0227) no-repeat top center/contain;
}
.buy-part .left-item .bg-img.p-t {
  aspect-ratio: 1/0.57;
  background: url(/images/other/Img_pt-probiotic.webp) no-repeat top center/contain;
}
.buy-part .left-item .bg-img.p-plus {
  aspect-ratio: 1/0.6;
  background: url(/images/other/Img_pplus-probiotic.webp) no-repeat top center/contain;
}
.buy-part .left-item .circlealign {
  position: relative;
}
@media (min-width: 768px) {
  .buy-part .left-item .circlealign {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-left: 11.5%;
    margin-right: 20%;
  }
}
.buy-part .left-item .circlealign .two-taste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 80%;
  margin: auto;
  color: #ffffff;
}
@media (min-width: 768px) {
  .buy-part .left-item .circlealign .two-taste {
    width: 85%;
    width: 280px;
  }
}
.buy-part .left-item .circlealign .two-taste span {
  position: relative;
  display: inline-block;
  width: 100%;
}
.buy-part .left-item .circlealign .two-taste span:nth-child(1), .buy-part .left-item .circlealign .two-taste span:nth-child(2) {
  --marginH:15px;
  font-size: 0.8rem;
  text-align: center;
  color: #ffffff;
  margin-bottom: var(--marginH);
}
@media (min-width: 768px) {
  .buy-part .left-item .circlealign .two-taste span:nth-child(1), .buy-part .left-item .circlealign .two-taste span:nth-child(2) {
    --marginH:22px;
    font-size: 0.87rem;
  }
}
.buy-part .left-item .circlealign .two-taste span:nth-child(1)::after, .buy-part .left-item .circlealign .two-taste span:nth-child(2)::after {
  font-family: "Roboto", "PingFang TC", "Noto Sans TC", "微軟正黑體", sans-serif;
  position: absolute;
  display: inline-block;
  width: 100%;
  left: 0;
  bottom: calc(var(--marginH) * -1);
  line-height: 1.6;
}
@media (min-width: 768px) {
  .buy-part .left-item .circlealign .two-taste span:nth-child(1)::after, .buy-part .left-item .circlealign .two-taste span:nth-child(2)::after {
    line-height: 2;
  }
}
.buy-part .left-item .circlealign .two-taste span:nth-child(1) {
  padding: 0 5% 0 18%;
}
@media (min-width: 768px) {
  .buy-part .left-item .circlealign .two-taste span:nth-child(1) {
    padding: 0 2.5% 0 5%;
  }
}
.buy-part .left-item .circlealign .two-taste span:nth-child(1)::after {
  content: "香草口味";
  background: -webkit-gradient(linear, left top, right top, from(rgba(96, 210, 245, 0)), color-stop(20%, rgb(96, 210, 245)), color-stop(50%, rgb(25, 174, 236)), to(rgb(96, 210, 245)));
  background: linear-gradient(to right, rgba(96, 210, 245, 0) 0%, rgb(96, 210, 245) 20%, rgb(25, 174, 236) 50%, rgb(96, 210, 245) 100%);
}
.buy-part .left-item .circlealign .two-taste span:nth-child(2) {
  padding: 0 18% 0 5%;
}
@media (min-width: 768px) {
  .buy-part .left-item .circlealign .two-taste span:nth-child(2) {
    padding: 0 5% 0 2.5%;
  }
}
.buy-part .left-item .circlealign .two-taste span:nth-child(2)::after {
  background: -webkit-gradient(linear, left top, right top, from(rgb(101, 208, 97)), color-stop(50%, rgb(15, 186, 9)), color-stop(80%, rgb(85, 204, 81)), color-stop(99%, rgba(101, 208, 97, 0)));
  background: linear-gradient(to right, rgb(101, 208, 97) 0%, rgb(15, 186, 9) 50%, rgb(85, 204, 81) 80%, rgba(101, 208, 97, 0) 99%);
  content: "香檬口味";
}
.buy-part .left-item .between {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  letter-spacing: normal;
  color: #9b9591;
  padding-inline: 9.1vw;
  margin-top: 0.3rem;
  font-size: 0.85rem;
}
@media (min-width: 768px) {
  .buy-part .left-item .between {
    font-size: 1rem;
    color: #555555;
  }
}
@media (min-width: 992px) {
  .buy-part .left-item .between {
    padding-inline: 0;
  }
}
.buy-part .left-item .between .pack {
  padding-left: 15px;
}
.buy-part .left-item .between .pack .one, .buy-part .left-item .between .pack .unit {
  color: #5ab6cb;
}
.buy-part .left-item .between .pack.orange .one, .buy-part .left-item .between .pack.orange .unit {
  color: #fea388;
}
.buy-part .left-item .between .pack.black .one, .buy-part .left-item .between .pack.black .unit {
  color: rgb(179, 172, 147);
}
.buy-part .left-item .between .pack.pink .one, .buy-part .left-item .between .pack.pink .unit {
  color: #f67d9f;
}
.buy-part .left-item .between .pack .unit::after {
  content: "盒";
  margin-left: 0.3rem;
  padding-left: 0.3rem;
  background: url(/images/common/left-border.svg) no-repeat left center/contain;
}
@media (min-width: 768px) {
  .buy-part .left-item .between .pack .unit::after {
    margin-left: 0.5rem;
    padding-left: 0.5rem;
  }
}
.buy-part .left-item .between .price, .buy-part .left-item .between .one {
  font-family: "Outfit", sans-serif;
  font-size: 1.3rem;
  font-weight: 300;
}
@media (min-width: 768px) {
  .buy-part .left-item .between .price, .buy-part .left-item .between .one {
    font-size: 1.5rem;
  }
}
.buy-part .left-item .between .price {
  color: #555555;
  margin-left: 0.3rem;
}
.buy-part .left-item .between .price::before {
  content: "$";
  font-size: 1rem;
}
@media (min-width: 768px) {
  .buy-part .left-item .between .price {
    margin-left: 0.5rem;
  }
}
.buy-part .left-item .pcshow {
  display: none;
}
@media (min-width: 992px) {
  .buy-part .left-item .pcshow {
    display: inline;
  }
}
.buy-part .right-item {
  width: 100%;
  position: relative;
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  .buy-part .right-item {
    max-width: 700px;
    margin: auto;
  }
}
.buy-part .right-item .h2-img {
  width: min(82%, 350px);
  margin: 0 auto 2rem;
}
@media (min-width: 768px) {
  .buy-part .right-item .h2-img {
    margin: 0.4rem auto 1.6rem;
  }
}
@media (min-width: 992px) {
  .buy-part .right-item .h2-img {
    max-width: 360px;
    margin-left: 0;
    margin-bottom: 3rem;
  }
}
.buy-part .right-item .h2-img.p-p {
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 992px) {
  .buy-part .right-item .h2-img.p-p {
    margin-bottom: 1.5rem;
  }
}
.buy-part .right-item .h2-img.p-t {
  width: 85%;
  margin-top: 1.5rem;
}
@media (min-width: 992px) {
  .buy-part .right-item .h2-img.p-t {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
  }
}
.buy-part .right-item .h2-img.p-plusc {
  width: 100%;
}
.buy-part .right-item .taste-choose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .buy-part .right-item .taste-choose {
    cursor: pointer;
  }
}
.buy-part .right-item .taste-choose div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.8rem 0;
  font-family: "Roboto", "PingFang TC", "Noto Sans TC", "微軟正黑體", sans-serif;
  font-size: 1.12rem;
  font-weight: 400;
  text-align: center;
  color: #5d5a59;
  border-radius: 50rem;
  border: 1px solid #cbcbcb;
}
@media (min-width: 768px) {
  .buy-part .right-item .taste-choose div {
    padding: 0.5rem 0;
    font-size: 1.25rem;
  }
}
.buy-part .right-item .taste-choose div.active {
  --orangecolor: #ef914e;
  position: relative;
  background: var(--orangecolor);
  color: #ffffff;
  border: 1px solid var(--orangecolor);
  -webkit-transition: all 0.33s ease-in-out;
  transition: all 0.33s ease-in-out;
}
.buy-part .right-item .taste-choose div.active::after {
  content: "";
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 8px solid var(--orangecolor);
  display: inline-block;
  position: absolute;
  bottom: 0;
  margin-bottom: -7px;
  right: calc(50% - 10px);
}
.buy-part .right-item .taste-choose div:hover {
  border: 1px solid #ffb993;
}
.buy-part .right-item .taste-choose div.p-p {
  padding: 0.5rem 0;
}
.buy-part .right-item .taste-choose div.p-p.active {
  --bluecolor: #45cee3;
  background: var(--bluecolor);
  border: 1px solid var(--bluecolor);
}
.buy-part .right-item .taste-choose div.p-p.active::after {
  border-top: 8px solid var(--bluecolor);
}
.buy-part .right-item .taste-choose div.p-p:hover {
  border: 1px solid var(--bluecolor);
}
.buy-part .right-item .taste-choose .choose img {
  max-width: 30px;
  margin-top: -20px;
  margin-right: 5px;
}
.buy-part .right-item .taste-choose .choose.p-s img {
  max-width: 35px;
}
.buy-part .right-item .taste-choose .nonMilk {
  font-size: 12px;
  padding-left: 5px;
}
.buy-part .right-item .btn-grid {
  margin-bottom: 2.8rem;
}
.buy-part .right-item .p-group, .buy-part .right-item .blend-buy {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
  position: relative;
  cursor: pointer;
}
.buy-part .right-item .p-group .addCircle, .buy-part .right-item .blend-buy .addCircle {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 30px;
  left: 0;
  top: 0;
  opacity: 0;
}
.buy-part .right-item .p-group li, .buy-part .right-item .blend-buy li {
  position: relative;
}
.buy-part .right-item .p-group li.soldout::before, .buy-part .right-item .blend-buy li.soldout::before {
  content: attr(data-bundle-label);
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  color: #555555;
  font-size: 1.5rem;
  font-weight: 600;
  background: rgba(193, 193, 193, 0.8509803922);
  letter-spacing: 3px;
  z-index: 5;
}
.buy-part .right-item .p-group li .price-g, .buy-part .right-item .blend-buy li .price-g {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  text-align: center;
}
.buy-part .right-item .p-group li .price-g span, .buy-part .right-item .blend-buy li .price-g span {
  font-weight: 600;
}
.buy-part .right-item .p-group li .price-g__price, .buy-part .right-item .blend-buy li .price-g__price {
  color: #e3582b;
  font-size: 2.2rem;
  letter-spacing: 0.5px;
}
@media (min-width: 768px) {
  .buy-part .right-item .p-group li .price-g__price, .buy-part .right-item .blend-buy li .price-g__price {
    font-size: 2.2rem;
  }
}
.buy-part .right-item .p-group li .price-g__price::before, .buy-part .right-item .blend-buy li .price-g__price::before {
  content: "$";
  padding-right: 1px;
  font-size: 1rem;
}
.buy-part .right-item .p-group li .price-g__number, .buy-part .right-item .blend-buy li .price-g__number {
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  .buy-part .right-item .p-group li .price-g__number, .buy-part .right-item .blend-buy li .price-g__number {
    font-size: 2rem;
  }
}
.buy-part .right-item .p-group li .price-g__number::before, .buy-part .right-item .blend-buy li .price-g__number::before {
  content: "X";
  font-size: 0.8rem;
  font-weight: 700;
  padding-right: 5px;
  padding-left: 5px;
}
@media (min-width: 768px) {
  .buy-part .right-item .p-group li .price-g__number::before, .buy-part .right-item .blend-buy li .price-g__number::before {
    font-size: 1.2rem;
  }
}
.buy-part .right-item .p-group li .price-g__number::after, .buy-part .right-item .blend-buy li .price-g__number::after {
  content: "盒";
  padding-left: 3px;
  font-size: 1rem;
}
@media (min-width: 768px) {
  .buy-part .right-item .p-group li .price-g__number::after, .buy-part .right-item .blend-buy li .price-g__number::after {
    font-size: 1.2rem;
  }
}
.buy-part .right-item .p-group li .total, .buy-part .right-item .blend-buy li .total {
  margin-left: 10px;
}
@media (min-width: 768px) {
  .buy-part .right-item .p-group li .total, .buy-part .right-item .blend-buy li .total {
    margin-left: 0;
  }
}
.buy-part .right-item .p-group li .total span, .buy-part .right-item .blend-buy li .total span {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}
@media (min-width: 768px) {
  .buy-part .right-item .p-group li .total span, .buy-part .right-item .blend-buy li .total span {
    font-size: 1.3rem;
    letter-spacing: 1px;
  }
}
.buy-part .right-item .p-group li .total span::before, .buy-part .right-item .blend-buy li .total span::before {
  content: "$";
  font-size: 0.8rem;
}
.buy-part .right-item .p-group li .total span::after, .buy-part .right-item .blend-buy li .total span::after {
  content: "總額";
  font-size: 0.8rem;
  padding-left: 2px;
}
.buy-part .right-item .p-group li .group-number, .buy-part .right-item .blend-buy li .group-number {
  display: inline-block;
  color: #666666;
  font-size: 15px;
}
@media (min-width: 768px) {
  .buy-part .right-item .p-group li .group-number, .buy-part .right-item .blend-buy li .group-number {
    font-size: 1rem;
  }
}
.buy-part .right-item .p-group li .group-number span::before, .buy-part .right-item .blend-buy li .group-number span::before {
  content: "|";
  margin-left: 3px;
  margin-right: 2px;
  color: rgba(115, 115, 115, 0.2509803922);
}
@media (min-width: 768px) {
  .buy-part .right-item .p-group li .group-number span::before, .buy-part .right-item .blend-buy li .group-number span::before {
    margin-left: 5px;
    margin-right: 5px;
  }
}
.buy-part .right-item .p-group li .group-number span::after, .buy-part .right-item .blend-buy li .group-number span::after {
  content: "包";
}
.buy-part .right-item .p-group li::after, .buy-part .right-item .blend-buy__li::after {
  background-color: #e95757;
  content: attr(data-price-label);
}
@media (min-width: 768px) {
  .buy-part .right-item .p-group li::after, .buy-part .right-item .blend-buy__li::after {
    font-size: 0.8rem;
  }
}
.buy-part .right-item .p-group li.p-p:hover {
  background: #e9f4f9;
  border: 1px solid #e9f4f9;
}
.buy-part .right-item .p-group li {
  font-family: "Outfit", sans-serif;
  position: relative;
  display: none;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1rem 0.8rem 1rem 0.8rem;
  text-align: right;
  border: 1px solid #bfbfbf;
  border-radius: var(--radius);
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.buy-part .right-item .p-group li[data-product="28341678863614633"], .buy-part .right-item .p-group li[data-product="25559010388214642"], .buy-part .right-item .p-group li[data-product="28341678863614633"]:hover, .buy-part .right-item .p-group li[data-product="25559010388214642"]:hover {
  background: url(/images/event/school-txt-bg_01.png) no-repeat top left/contain, url(/images/event/school-bg.jpg) no-repeat center center/100% 100%;
}
.buy-part .right-item .p-group li::after {
  position: absolute;
  right: 0;
  top: 0;
  padding: 3px 5px;
  font-size: 0.7rem;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0;
  border-radius: 0 var(--radius) 0 var(--radius);
}
@media (min-width: 768px) {
  .buy-part .right-item .p-group li::after {
    padding: 1px 6px;
  }
}
@media (min-width: 1200px) {
  .buy-part .right-item .p-group li {
    padding: 1rem 1.5rem 1rem 1.5rem;
    border: 1px solid #d5d5d5;
  }
}
.buy-part .right-item .p-group li.open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.buy-part .right-item .p-group li.open:nth-child(1n) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
  -webkit-animation: buySection 0.3s ease-in-out;
          animation: buySection 0.3s ease-in-out;
}
.buy-part .right-item .p-group li.open:nth-child(2n) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation: buySection 0.6s ease-in-out;
          animation: buySection 0.6s ease-in-out;
}
.buy-part .right-item .p-group li.open:nth-child(3n) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  -webkit-animation: buySection 0.9s ease-in-out;
          animation: buySection 0.9s ease-in-out;
}
.buy-part .right-item .p-group li.open:nth-child(4n) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
  -webkit-animation: buySection 1.2s ease-in-out;
          animation: buySection 1.2s ease-in-out;
}
.buy-part .right-item .p-group li.open:nth-child(5n) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation: buySection 1.5s ease-in-out;
          animation: buySection 1.5s ease-in-out;
}
.buy-part .right-item .p-group li.open:nth-child(6n) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation: buySection 1.8s ease-in-out;
          animation: buySection 1.8s ease-in-out;
}
.buy-part .right-item .p-group li.open:nth-child(7n) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
  -webkit-animation: buySection 2.1s ease-in-out;
          animation: buySection 2.1s ease-in-out;
}
.buy-part .right-item .p-group li.open:nth-child(8n) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
  -webkit-animation: buySection 2.4s ease-in-out;
          animation: buySection 2.4s ease-in-out;
}
.buy-part .right-item .p-group li.open:nth-child(9n) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
  -webkit-animation: buySection 2.7s ease-in-out;
          animation: buySection 2.7s ease-in-out;
}
.buy-part .right-item .p-group li.open:nth-child(10n) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: buySection 3s ease-in-out;
          animation: buySection 3s ease-in-out;
}
.buy-part .right-item .p-group li:hover {
  background: #ffede2;
  border: 1px solid #ffede2;
}
.buy-part .right-item .p-group li:active {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
.buy-part .right-item .p-group li.p-t:hover {
  background: #eaf1e9;
  border: 1px solid #eaf1e9;
}
.buy-part .right-item .p-group li.p-plusc:hover {
  background: #ffe2e9;
  border: 1px solid #ffe2e9;
}
.buy-part .right-item .blend-buy__li {
  ddisplay: block;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid #bfbfbf;
  border-radius: var(--radius);
  -webkit-box-shadow: 0 3px 3px rgba(51, 51, 51, 0.1098039216);
          box-shadow: 0 3px 3px rgba(51, 51, 51, 0.1098039216);
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
@media (min-width: 992px) {
  .buy-part .right-item .blend-buy__li {
    padding: 1rem 1.5rem 1rem 1.5rem;
  }
}
.buy-part .right-item .blend-buy__li:nth-child(1n) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
  -webkit-animation: buySection 0.3s ease-in-out;
          animation: buySection 0.3s ease-in-out;
}
.buy-part .right-item .blend-buy__li:nth-child(2n) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation: buySection 0.6s ease-in-out;
          animation: buySection 0.6s ease-in-out;
}
.buy-part .right-item .blend-buy__li:nth-child(3n) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  -webkit-animation: buySection 0.9s ease-in-out;
          animation: buySection 0.9s ease-in-out;
}
.buy-part .right-item .blend-buy__li:nth-child(4n) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
  -webkit-animation: buySection 1.2s ease-in-out;
          animation: buySection 1.2s ease-in-out;
}
.buy-part .right-item .blend-buy__li:nth-child(5n) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation: buySection 1.5s ease-in-out;
          animation: buySection 1.5s ease-in-out;
}
.buy-part .right-item .blend-buy__li:nth-child(6n) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation: buySection 1.8s ease-in-out;
          animation: buySection 1.8s ease-in-out;
}
.buy-part .right-item .blend-buy__li:nth-child(7n) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
  -webkit-animation: buySection 2.1s ease-in-out;
          animation: buySection 2.1s ease-in-out;
}
.buy-part .right-item .blend-buy__li:nth-child(8n) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
  -webkit-animation: buySection 2.4s ease-in-out;
          animation: buySection 2.4s ease-in-out;
}
.buy-part .right-item .blend-buy__li:nth-child(9n) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
  -webkit-animation: buySection 2.7s ease-in-out;
          animation: buySection 2.7s ease-in-out;
}
.buy-part .right-item .blend-buy__li:nth-child(10n) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: buySection 3s ease-in-out;
          animation: buySection 3s ease-in-out;
}
.buy-part .right-item .blend-buy__li::after {
  position: absolute;
  right: 0;
  top: 0;
  padding: 3px 5px;
  font-size: 0.7rem;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0;
  border-radius: 0 var(--radius) 0 var(--radius);
}
@media (min-width: 768px) {
  .buy-part .right-item .blend-buy__li::after {
    padding: 1px 6px;
  }
}
.buy-part .right-item .blend-buy__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  padding: 0.8rem 1rem;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, rgb(255, 255, 255)), color-stop(90%, rgb(243, 243, 243)));
  background: linear-gradient(to bottom, rgb(255, 255, 255) 30%, rgb(243, 243, 243) 90%);
}
@media (min-width: 768px) {
  .buy-part .right-item .blend-buy__group {
    padding: 1rem;
  }
}
.buy-part .right-item .blend-buy__content {
  display: none;
  position: relative;
  margin: 0.5rem;
  padding: 13px;
  background-color: #f3f3f3;
  border-radius: 10px;
}
@media (min-width: 768px) {
  .buy-part .right-item .blend-buy__content {
    margin: 0.5rem 1rem 1rem 1rem;
    padding: 1rem;
  }
}
.buy-part .right-item .blend-buy__content.active {
  display: block;
}
.buy-part .right-item .blend-buy__content::before {
  content: "";
  position: absolute;
  margin-top: -10px;
  width: 100%;
  top: 0;
  left: 0;
  border-top: 1px dotted #acacac;
}
@media (min-width: 768px) {
  .buy-part .right-item .blend-buy__content::before {
    border-top: 1px dotted #6f6b6b;
  }
}
.buy-part .right-item .blend-buy__content .note-txt {
  position: relative;
  padding: 0.3rem 0 0.5rem 0;
  font-size: 14px;
  text-align: center;
}
.buy-part .right-item .blend-buy__content .note-txt::after {
  position: absolute;
  content: "";
  width: calc(100% - 10px);
  top: 15px;
  left: 5px;
  border-bottom: 1px dotted #adadad;
}
.buy-part .right-item .blend-buy__content .note-txt span {
  position: relative;
  z-index: 5;
  padding: 0 8px;
  letter-spacing: 0;
  background-color: #f3f3f3;
}
.buy-part .right-item .blend-buy__content .note-txt span.invalid {
  color: #e25732;
}
.buy-part .right-item .blend-buy__content__taste {
  --tastesize:58px;
  font-family: "Roboto", "PingFang TC", "Noto Sans TC", "微軟正黑體", sans-serif;
  position: relative;
  display: inline-block;
  font-size: 1.15rem;
  color: #ffffff;
  width: var(--tastesize);
  height: var(--tastesize);
  text-align: center;
  line-height: var(--tastesize);
  background-color: #63d6e7;
  border-radius: 50em;
  letter-spacing: 0;
}
@media (min-width: 992px) {
  .buy-part .right-item .blend-buy__content__taste {
    letter-spacing: 0.5px;
  }
}
.buy-part .right-item .blend-buy__content__taste::after {
  content: "";
  position: absolute;
  right: -60px;
}
.buy-part .right-item .blend-buy__content__taste.p-p.lemon {
  background-color: #93d55e;
}
.buy-part .right-item .blend-buy__content__img {
  position: absolute;
  width: 80px;
  bottom: 12px;
  margin-left: -18px;
  z-index: 5;
}
.buy-part .right-item .blend-buy__content ul li {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 15px 20px 15px 30px;
  margin-bottom: 5px;
  border: 1px solid #ececec;
  border-radius: 15px;
  background: linear-gradient(135deg, rgb(255, 255, 255) 20%, rgb(240, 238, 241) 40%, rgb(255, 255, 255) 65%);
}
@media (min-width: 768px) {
  .buy-part .right-item .blend-buy__content ul li {
    border: 1px solid #d9d4c8;
  }
}
.buy-part .right-item .blend-buy__content ul li.soldout::before {
  content: "售完";
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  margin-left: -30px;
  color: #555555;
  background: rgba(181, 181, 181, 0.8509803922);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 3px;
  z-index: 10;
}
.buy-part .right-item .blend-buy__content ul .minus-plus-box {
  width: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.buy-part .right-item .blend-buy__content ul .minus-plus-box span {
  color: #f26b37;
  font-size: 1.3rem;
  font-weight: 500;
}
.buy-part .right-item .blend-buy__content ul .minus-btn, .buy-part .right-item .blend-buy__content ul .plus-btn {
  --Wsize:20px;
  position: relative;
  width: var(--Wsize);
  aspect-ratio: 1/1;
  background-color: #dfdcd5;
  border-radius: 5px;
  border: 0;
  padding-inline: 0px;
}
.buy-part .right-item .blend-buy__content ul .minus-btn::after, .buy-part .right-item .blend-buy__content ul .plus-btn::after {
  --masksize:15px;
  content: "";
  position: absolute;
  width: var(--masksize);
  aspect-ratio: 1/1;
  top: 3px;
  right: 3px;
  background-color: #333333;
}
.buy-part .right-item .blend-buy__content ul .minus-btn::after {
  -webkit-mask: url(/images/common/minus-solid.svg) no-repeat center center/contain;
          mask: url(/images/common/minus-solid.svg) no-repeat center center/contain;
}
.buy-part .right-item .blend-buy__content ul .plus-btn::after {
  -webkit-mask: url(/images/common/plus-solid.svg) no-repeat center center/contain;
          mask: url(/images/common/plus-solid.svg) no-repeat center center/contain;
}
.buy-part .right-item .blend-buy__content .go-buy-box {
  position: relative;
  padding: 12px 0;
  text-align: center;
  background: #ffffff;
  border-radius: 15px;
}
.buy-part .right-item .blend-buy__content .go-buy-box button {
  font-family: "Roboto", "PingFang TC", "Noto Sans TC", "微軟正黑體", sans-serif;
  width: 70%;
  margin: auto;
  color: #ffffff;
  font-weight: 500;
  font-size: 1rem;
  line-height: 3rem;
  background-color: #f26b37;
  border: 0;
  border-radius: 15px;
}
@media (min-width: 992px) {
  .buy-part .right-item .blend-buy__content .go-buy-box button {
    width: 60%;
  }
}
.buy-part .right-item .blend-buy__content .go-buy-box button.not-buy {
  background-color: #ababab;
}
.buy-part .right-item .sale-manual-box {
  text-align: right;
  margin: 1rem 0 1.5rem;
}
.buy-part .right-item .sale-manual-box .sale-manual-btn {
  display: inline-block;
  padding-bottom: 3px;
  margin-right: 3px;
  font-size: 12px;
  color: #333333;
  letter-spacing: 0;
  border-bottom: 1px dotted;
}
.buy-part .right-item .sale-manual-box .sale-manual-btn .red-bg {
  font-family: "微軟正黑體", sans-serif;
  display: inline-block;
  margin-right: 4px;
  padding: 1px 5px;
  font-size: 12px;
  text-align: center;
  color: #ffffff;
  border-radius: 0 10px 0 10px;
  background-color: #f28285;
}
@media (min-width: 768px) {
  .buy-part .right-item .sale-manual-box .sale-manual-btn .red-bg {
    padding: 3px 6px;
  }
}
.buy-part .right-item .btn-grid {
  width: min(92%, 340px);
  margin: auto;
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  .buy-part .right-item .btn-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    row-gap: 0;
    -webkit-column-gap: 1rem;
       -moz-column-gap: 1rem;
            column-gap: 1rem;
  }
  .buy-part .right-item .btn-grid .data-box {
    padding: 1.5rem 0 1.5rem 1rem;
  }
  .buy-part .right-item .btn-grid .data-btn {
    grid-area: 1/1/3/2;
  }
  .buy-part .right-item .btn-grid .sgs-document {
    grid-area: 1/2/2/3;
  }
  .buy-part .right-item .btn-grid .money-btn {
    grid-area: 2/2/3/3;
  }
}
.buy-part .right-item .btn-grid__btn {
  position: relative;
  padding: 0.6rem;
  color: #ffffff;
  line-height: 1.2;
  border-radius: 40px;
}
.buy-part .right-item .btn-grid__btn.hb89 {
  background: -webkit-gradient(linear, left top, left bottom, from(#7bd79d), color-stop(39.06%, #5fcfb6), to(#4bcee9));
  background: linear-gradient(180deg, #7bd79d 0%, #5fcfb6 39.06%, #4bcee9 100%);
}
.buy-part .right-item .btn-grid__btn.hb89 .data-box .buy-car {
  background: -webkit-gradient(linear, left top, left bottom, from(#7bd79d), color-stop(39.06%, #5fcfb6), to(#4bcee9));
  background: linear-gradient(180deg, #7bd79d 0%, #5fcfb6 39.06%, #4bcee9 100%);
}
.buy-part .right-item .btn-grid__btn.lemonGreen {
  background: #90ce16;
}
.buy-part .right-item .btn-grid__btn.lemonGreen:hover {
  background-color: #6a990c;
}
.buy-part .right-item .btn-grid__btn.lemonGreen .data-box .buy-car {
  background: #90ce16;
}
.buy-part .right-item .btn-grid__btn.orange {
  background: #f7a273;
}
.buy-part .right-item .btn-grid__btn.orange:hover {
  background-color: #f58649;
}
.buy-part .right-item .btn-grid__btn.orange .data-box .buy-car {
  background: #f59e6e;
}
.buy-part .right-item .btn-grid__btn.black {
  background: #78767c;
}
.buy-part .right-item .btn-grid__btn.black:hover {
  background-color: #414141;
}
.buy-part .right-item .btn-grid__btn.black .data-box .buy-car {
  background: #73bf45;
}
.buy-part .right-item .btn-grid__btn.black.sgs-btn {
  padding-left: 0;
  text-align: center;
}
.buy-part .right-item .btn-grid__btn.black.sgs-btn::after {
  content: none;
}
.buy-part .right-item .btn-grid__btn.pink {
  background: #f8a3b9;
}
.buy-part .right-item .btn-grid__btn.pink:hover {
  background-color: #ff7a9e;
}
.buy-part .right-item .btn-grid__btn.pink .data-box .buy-car {
  background: #f8a3b9;
}
.buy-part .right-item .btn-grid__btn.sgs-btn, .buy-part .right-item .btn-grid__btn.money-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 70px;
  margin-bottom: 1rem;
}
.buy-part .right-item .btn-grid__btn.sgs-btn::after, .buy-part .right-item .btn-grid__btn.money-btn::after, .buy-part .right-item .btn-grid__btn.two-sgs-show .sgs-btn::after {
  content: "";
  position: absolute;
  top: calc(50% - 29px);
  right: 7px;
  background-color: #ffffff;
  width: 58px;
  height: 58px;
}
.buy-part .right-item .btn-grid__btn.two-sgs-show p, .buy-part .right-item .btn-grid__btn.data-btn p {
  margin-bottom: 0.5rem;
  text-align: center;
  letter-spacing: 2px;
}
.buy-part .right-item .btn-grid__btn.sgs-btn, .buy-part .right-item .btn-grid__btn.two-sgs-show .sgs-btn {
  position: relative;
  padding-left: 10%;
  line-height: 1.1;
}
@media (min-width: 768px) {
  .buy-part .right-item .btn-grid__btn.sgs-btn, .buy-part .right-item .btn-grid__btn.two-sgs-show .sgs-btn {
    font-size: 1rem;
  }
}
.buy-part .right-item .btn-grid__btn.sgs-btn::after, .buy-part .right-item .btn-grid__btn.two-sgs-show .sgs-btn::after {
  -webkit-mask: url(/images/common/buy-sgs.svg) no-repeat center center/contain;
          mask: url(/images/common/buy-sgs.svg) no-repeat center center/contain;
}
.buy-part .right-item .btn-grid__btn.money-btn, .buy-part .right-item .btn-grid__btn.data-btn, .buy-part .right-item .btn-grid__btn.two-sgs-show p {
  font-size: 1.1rem;
}
.buy-part .right-item .btn-grid__btn.money-btn {
  text-align: center;
  letter-spacing: 5px;
}
.buy-part .right-item .btn-grid__btn.money-btn::after {
  -webkit-mask: url(/images/common/buy-money.svg) no-repeat center center/contain;
          mask: url(/images/common/buy-money.svg) no-repeat center center/contain;
}
.buy-part .right-item .btn-grid__btn.two-sgs-show {
  margin-bottom: 1rem;
  cursor: pointer;
}
.buy-part .right-item .btn-grid__btn.two-sgs-show .sgs-btn {
  padding: 15px 20px;
  height: auto;
  background: #ffffff;
  border-radius: 30px;
}
.buy-part .right-item .btn-grid__btn.two-sgs-show .sgs-btn::after {
  right: 20px;
  width: 65px;
  height: 65px;
  background-color: #67cfde;
}
.buy-part .right-item .btn-grid__btn.two-sgs-show .sgs-btn:hover::after {
  background-color: #1ab4cc;
}
.buy-part .right-item .btn-grid__btn.two-sgs-show .sgs-document {
  --width:48px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-left: calc(var(--width) + 10px);
  height: var(--width);
  color: var(--resetcolor);
}
.buy-part .right-item .btn-grid__btn.two-sgs-show .sgs-document:first-child {
  margin-bottom: 7px;
}
.buy-part .right-item .btn-grid__btn.two-sgs-show .sgs-document::before {
  position: absolute;
  content: attr(data-flavor);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: calc((var(--width) + 10px) * -1);
  width: 50px;
  height: var(--width);
  letter-spacing: 0;
  border-radius: 20px;
}
.buy-part .right-item .btn-grid__btn.two-sgs-show .sgs-document[data-flavor=香草] div:nth-of-type(1), .buy-part .right-item .btn-grid__btn.two-sgs-show .sgs-document[data-flavor=香檬] div:nth-of-type(1) {
  font-size: 1.1rem;
  font-weight: 500;
}
.buy-part .right-item .btn-grid__btn.two-sgs-show .sgs-document[data-flavor=香草]::before {
  background-color: #caf1ef;
  color: #238e9e;
}
.buy-part .right-item .btn-grid__btn.two-sgs-show .sgs-document[data-flavor=香草] div:nth-of-type(1) {
  color: #4bb2c2;
}
.buy-part .right-item .btn-grid__btn.two-sgs-show .sgs-document[data-flavor=香檬]::before {
  background-color: #dbefc8;
  color: #489700;
}
.buy-part .right-item .btn-grid__btn.two-sgs-show .sgs-document[data-flavor=香檬] div:nth-of-type(1) {
  color: #82b430;
}
.buy-part .right-item .btn-grid__btn.data-btn {
  margin-bottom: 1rem;
}
.buy-part .right-item .btn-grid__btn.data-btn .data-box {
  display: grid;
  grid-template-columns: 1fr 85px;
  padding: 1.1rem 0 1.1rem 0.8rem;
  color: #3f3939;
  font-size: 1rem;
  background-color: #ffffff;
  border-radius: 30px;
}
.buy-part .right-item .btn-grid__btn.data-btn .data-box .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 3px;
  letter-spacing: 0.5px;
}
@media (min-width: 768px) {
  .buy-part .right-item .btn-grid__btn.data-btn .data-box .text {
    font-size: 1.06rem;
  }
}
.buy-part .right-item .btn-grid__btn.data-btn .data-box .color, .buy-part .right-item .btn-grid__btn.data-btn .data-box .data {
  padding: 0 5px;
  font-size: 1.25rem;
  color: #72ac3f;
  letter-spacing: 0.5px;
}
.buy-part .right-item .btn-grid__btn.data-btn .data-box .data {
  font-family: "Outfit", sans-serif;
}
.buy-part .right-item .btn-grid__btn.data-btn .data-box .buy-car {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50em;
}
.buy-part .right-item .btn-grid__btn.data-btn .data-box .buy-car span {
  display: inline-block;
  height: 30px;
  width: 50px;
  margin-bottom: 0.2rem;
  -webkit-mask: url(/images/common/buy-calender-car.svg) no-repeat center center/contain;
          mask: url(/images/common/buy-calender-car.svg) no-repeat center center/contain;
  background-color: #ffffff;
}
.buy-part .right-item .btn-grid a {
  display: block;
  letter-spacing: 0.5px;
}
.buy-part .right-item .p-style {
  padding-bottom: 5px;
  font-size: 0.8rem;
  color: #128697;
  text-align: center;
  font-weight: 400;
}
.buy-part section.two {
  margin-top: 1rem;
  padding: 5rem 0 6rem 0;
  background-color: #f9f9f5;
}
@media (min-width: 768px) {
  .buy-part section.two {
    margin-top: 8rem;
    padding: 5rem 0 185px 0;
  }
}
.buy-part section.two .padd {
  max-width: 1024px;
}
.buy-part section.two h3 {
  margin-bottom: 3rem;
  font-size: 1.4rem;
  text-align: left;
  color: #333333;
  letter-spacing: 0.25rem;
}
@media (min-width: 992px) {
  .buy-part section.two h3 {
    font-size: 1.5rem;
  }
}
.buy-part section.two h3 span {
  font-weight: 200;
  font-size: 1rem;
  color: #a7a7a7;
  letter-spacing: 2px;
}
@media (min-width: 768px) {
  .buy-part section.two h3 span {
    margin-left: 1rem;
    font-size: 1.65rem;
  }
}
.buy-part section.two ul.grid {
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
}
@media (min-width: 768px) {
  .buy-part section.two ul.grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}
@media (min-width: 992px) {
  .buy-part section.two ul.grid {
    gap: 2rem;
  }
}
@media (min-width: 1200px) {
  .buy-part section.two ul.grid {
    gap: 3rem;
  }
}
.buy-part section.two ul.grid li {
  max-width: 304px;
  margin: auto;
}
.buy-part section.two ul.grid li a {
  padding: 2rem 1rem;
  display: grid;
  grid-template-columns: 20% 1fr;
}
@media (min-width: 768px) {
  .buy-part section.two ul.grid li a {
    padding: 2rem 0.5rem;
  }
}
@media (min-width: 992px) {
  .buy-part section.two ul.grid li a {
    padding: 2rem 1rem;
  }
}
.buy-part section.two ul.grid li .title {
  font-family: "Shippori Mincho", serif;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  padding-top: 0.5rem;
  font-weight: 600;
  font-size: 1.8rem;
  color: transparent;
  text-align: left;
  letter-spacing: 7px;
  background: linear-gradient(135deg, rgb(86, 75, 72) 30%, rgb(168, 153, 138) 40%, rgb(110, 98, 94) 50%);
  -webkit-background-clip: text;
          background-clip: text;
}
@media (min-width: 768px) {
  .buy-part section.two ul.grid li .title {
    padding-top: 1rem;
    font-size: 1.5rem;
  }
}
@media (min-width: 992px) {
  .buy-part section.two ul.grid li .title {
    font-size: 1.75rem;
    letter-spacing: 8px;
  }
}
.buy-part section.two ul.grid li .box {
  background-color: #ffffff;
  border-radius: 100px 100px 25px 25px;
  padding-bottom: 1rem;
}
.buy-part section.two ul.grid li img {
  display: block;
  margin: auto;
}
.buy-part section.two ul.grid li .height {
  height: 180px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (min-width: 768px) {
  .buy-part section.two ul.grid li .height {
    height: 130px;
  }
}
@media (min-width: 992px) {
  .buy-part section.two ul.grid li .height {
    height: 150px;
  }
}
@media (min-width: 1200px) {
  .buy-part section.two ul.grid li .height {
    height: 180px;
  }
}
.buy-part section.two ul.grid li .m-top {
  margin-bottom: 0.5rem;
}
.buy-part .DM-part {
  width: 87.5%;
  margin: auto;
  padding-bottom: 3rem;
  text-align: center;
}
.buy-part .DM-part a {
  display: inline-block;
}
@media (min-width: 768px) {
  .buy-part .DM-part {
    padding-top: 3rem;
    padding-bottom: 0;
  }
}
.buy-part .DM-part .mobile-show {
  display: block;
}
@media (min-width: 768px) {
  .buy-part .DM-part .mobile-show {
    display: none;
  }
}
.buy-part .DM-part .pc-show {
  display: none;
  width: 800px;
  margin: auto;
}
@media (min-width: 768px) {
  .buy-part .DM-part .pc-show {
    display: block;
  }
}

.guide-part .buy-content-text {
  width: 87.5%;
  max-width: 1024px;
  margin: auto;
}
@media (min-width: 768px) {
  .guide-part .buy-content-text {
    padding: 5rem 0 2rem 0;
  }
}
.guide-part .buy-content-text a {
  display: inline-block;
  color: #2196F3;
  text-decoration: none;
}
.guide-part .buy-content-text ul .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.guide-part .buy-content-text ul li {
  padding: 1.2rem 0.8rem;
  border-top: 1px solid #e8eddf;
}
.guide-part .buy-content-text ul li .q-icon {
  font-family: "Roboto", "PingFang TC", "Noto Sans TC", "微軟正黑體", sans-serif;
  padding-left: 45px;
  font-size: 1.12rem;
  letter-spacing: 1px;
  color: #666666;
}
@media (min-width: 768px) {
  .guide-part .buy-content-text ul li .q-icon {
    font-size: 1.2rem;
    letter-spacing: 2px;
  }
}
.guide-part .buy-content-text ul li .q-icon::before {
  display: inline-block;
  content: "Q";
  width: 30px;
  height: 30px;
  margin-right: 15px;
  margin-left: -45px;
  font-size: 1rem;
  font-family: "Outfit", sans-serif;
  color: #ffffff;
  text-align: center;
  line-height: 30px;
  background-color: #b5d588;
  border-radius: 45%;
  letter-spacing: 0.5px;
  vertical-align: text-bottom;
}
.guide-part .buy-content-text ul li .q-icon.ans {
  position: relative;
  display: none;
  margin-top: 1.5rem;
  line-height: 1.8;
}
.guide-part .buy-content-text ul li .q-icon.ans::before {
  position: absolute;
  content: "A";
  color: #ffffff;
  background-color: #555555;
}
.guide-part .buy-content-text ul li .q-icon.ans div {
  display: inline-block;
}
.guide-part .buy-content-text ul li .q-icon.ans p {
  margin-bottom: 30px;
}
.guide-part .buy-content-text ul li .q-icon.ans P, .guide-part .buy-content-text ul li .q-icon.ans div, .guide-part .buy-content-text ul li .q-icon.ans li {
  font-size: 1.06rem;
  letter-spacing: 0.5px;
  color: #555555;
  line-height: 1.8;
}
.guide-part .buy-content-text ul li .q-icon.ans ul li {
  padding: 0 0 1rem 1rem;
  border-top: 0;
}
.guide-part .buy-content-text ul li .q-icon.ans span.point {
  font-size: 8px;
  color: #333333;
  vertical-align: middle;
}

.calendar {
  display: none;
  font-size: 1rem;
}
@media (min-width: 768px) {
  .calendar {
    font-size: 1.12rem;
  }
}
.calendar.open {
  display: block;
}
.calendar__bg {
  overflow-y: scroll;
  z-index: 9999;
  position: fixed;
  width: 100vw;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: 2rem;
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
}
@media (max-width: 576px) {
  .calendar__bg {
    padding-top: 1rem;
  }
}
.calendar .close-btn-box {
  width: min(90%, 450px);
  margin: auto;
  margin-bottom: -2rem;
  text-align: right;
}
.calendar .next-part-btn, .calendar .calendar-close-btn {
  font-family: "Outfit", sans-serif;
  position: relative;
}
.calendar .next-part-btn::after, .calendar .calendar-close-btn::after {
  content: "";
  position: absolute;
}
.calendar .next-part-btn::after {
  top: calc(50% - 5px);
  right: 2px;
  height: 10px;
  width: 20px;
  -webkit-mask: url(/images/common/angles-right-solid.svg) no-repeat center center/contain;
          mask: url(/images/common/angles-right-solid.svg) no-repeat center center/contain;
  background-color: #a3a3a3;
}
.calendar .calendar-close-btn {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: #a7cb7e;
  border-radius: 50em;
}
.calendar .calendar-close-btn::after {
  display: inline-block;
  width: 18px;
  height: 18px;
  right: calc(50% - 9px);
  top: calc(50% - 9px);
  -webkit-mask: url(/images/common/xmark-solid.svg) no-repeat center center/contain;
          mask: url(/images/common/xmark-solid.svg) no-repeat center center/contain;
  background-color: #ffffff;
}
.calendar__box {
  width: 90%;
  margin: auto;
  padding: 1rem 1.5rem;
  background-color: #ffffff;
  border-radius: 50px;
}
@media (min-width: 768px) {
  .calendar__box {
    width: min(90%, 450px);
    padding: 1.5rem 2rem 2rem 2rem;
  }
}
.calendar__box .top {
  text-align: right;
}
.calendar__box .top span {
  display: inline-block;
}
.calendar__box .text {
  font-family: "Open Sans", "Outfit", "Geneva", "Arial", "PingFang TC", "微軟正黑體", sans-serif;
  text-align: left;
  letter-spacing: 1px;
}
.calendar__box .text p span {
  display: inline-block;
  vertical-align: middle;
}
.calendar__box .text .center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 0.3rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.calendar__box .text .time, .calendar__box .text .word {
  display: inline-block;
}
.calendar__box .text .word {
  line-height: 1.5;
}
.calendar__box .text .word .green {
  background-color: #e6eddc;
  border-radius: 5px;
  padding: 0 2px;
}
.calendar__box .text .word .green.two {
  background-color: #cfdfbb;
}
.calendar__box .text .time {
  margin-right: 8px;
  padding: 0.8rem;
  border-radius: 8px;
  background: #d8eebf;
}
.calendar__box .text .time.two {
  padding: 0.2rem 1rem;
}
.calendar__box .text .phone {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.1rem 1rem;
  color: #ffffff;
  font-size: 0.87rem;
  background-color: #309f91;
  border-radius: 50em;
}
.calendar__box .text .phone img {
  width: 27px;
  margin-right: 10px;
}
.calendar__box .text .red-day {
  display: inline-block;
  margin-right: 8px;
  padding: 0.1rem 1rem;
  border-radius: 8px;
  background: #f9d8d8;
}
.calendar__box hr {
  margin: 0.7rem 0;
  height: 1px;
  border: none;
  border-top: 1px dashed #d2d9ca;
}
.calendar__box .width {
  margin: auto;
  text-align: left;
}
.calendar__box .width.p {
  font-size: 13px;
  line-height: 1.5;
}
.calendar__box .content .grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
}
.calendar__box .content .grid-3 .work {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem 0;
  background-color: #f0f5e9;
  border-radius: 10px;
}
.calendar__box .content .grid-3 .work P:first-child {
  font-family: "Outfit", sans-serif;
  color: #6a8944;
}
.calendar__box .content .grid-3 .work p:nth-child(2) {
  color: #a4b991;
}
.calendar__box .content .grid-3 .work.active {
  border: 2px solid #9fd867;
}
.calendar__box .content .grid-3 .work.not {
  background: #ededed;
}
.calendar__box .content .grid-3 .work.not P:first-child, .calendar__box .content .grid-3 .work.not p:nth-child(2) {
  color: #9b978e;
}
.calendar__box .content .grid-3 .work.not p:nth-child(2)::after {
  content: "休";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 20px;
  height: 20px;
  color: #86837d;
  background-color: #c9c9c9;
  border-radius: 50em;
}
.calendar__box .content .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 0.8rem;
}
.calendar__box .get-time {
  background-color: #a8da69;
  padding: 0.5rem 0;
  text-align: center;
  font-size: 1.12rem;
  border-radius: 10px;
}

.red-txt {
  color: #c3414c;
}

.red-important {
  padding-inline: 10px;
  margin-right: 5px;
  color: #FFF;
  font-size: 0.87rem;
  background-color: #c3414c;
}

.font-weight {
  font-weight: 600;
}

@-webkit-keyframes buySection {
  from {
    opacity: 0;
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes buySection {
  from {
    opacity: 0;
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
/* fallback 活動的XX使用字體*/
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v153/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDB_Qb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxeJLpBi.woff2) format("woff2");
}
.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.go-luckyBox-btn {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: -30px;
  height: 100px;
  aspect-ratio: 1/2.77;
  padding-left: 6px;
  font-size: 0.87rem;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  letter-spacing: 4px;
  color: #ffffff;
  background-color: #de0422;
  -webkit-mask: url(/images/common/Subtract.svg) no-repeat left top/contain;
          mask: url(/images/common/Subtract.svg) no-repeat left top/contain;
}
@media (min-width: 768px) {
  .go-luckyBox-btn {
    font-size: 1.4rem;
    margin-top: 5%;
    height: 170px;
    padding-left: 10px;
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  .go-luckyBox-btn {
    margin-top: 0;
  }
}
.go-luckyBox-btn::before {
  display: inline-block;
  width: 17px;
  height: 16px;
  content: "";
  -webkit-mask: url(/images/common/gift-luckybox.svg) no-repeat center center/contain;
          mask: url(/images/common/gift-luckybox.svg) no-repeat center center/contain;
  background-color: #ffffff;
}
@media (min-width: 768px) {
  .go-luckyBox-btn::before {
    width: 25px;
    height: 25px;
    padding-bottom: 5px;
  }
}

.new-flavor {
  background: url(/images/new-flavor.svg) no-repeat top center/contain;
  width: 57px;
  height: 26px;
  position: absolute;
  margin-top: -15px;
  z-index: 1;
}

.star {
  position: absolute;
  width: 600px;
  height: 600px;
}