@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;
}

sup {
  vertical-align: super;
  font-size: 12px;
}

main {
  padding: 0;
  margin: 0;
  background-color: #fff;
  width: 100%;
  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;
  font-weight: 500;
  color: #555555;
}
main ul li {
  font-weight: 500;
}
main p {
  font-weight: 500;
}

section {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

/*變數*/
html {
  /*雙口味共用背景-覆雜版*/
  --twotasteBG:linear-gradient(to right, #5ad2f9 0%,#5ad2f9 45%,#5ec859 55%,#5ec859 100%);
}
html img {
  width: 100%;
}

.i-style {
  font-family: "Glegoo", "PingFang TC", "蘋果儷中黑", "Noto Emoji", "Noto Sans TC", "微軟正黑體", serif;
  font-weight: 700;
}

.allIn {
  display: grid;
  width: min(100%, 1300px);
  margin: auto;
  gap: 0;
  grid-template-columns: 100%;
}
@media (min-width: 992px) {
  .allIn {
    grid-template-columns: 60% 40%;
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  .allIn {
    grid-template-columns: 100%;
  }
}

#taste, #heart, #dataChart, #comparison, #qa, #Ingredients, #age-group, #free10, #Certification {
  padding: 5rem 0;
  height: auto;
}
@media (min-width: 576px) {
  #taste, #heart, #dataChart, #comparison, #qa, #Ingredients, #age-group, #free10, #Certification {
    padding: 6rem 0;
  }
}
@media (min-width: 992px) {
  #taste, #heart, #dataChart, #comparison, #qa, #Ingredients, #age-group, #free10, #Certification {
    padding: 8rem 0;
  }
}
@media (min-width: 576px) {
  #taste .allIn, #heart .allIn, #dataChart .allIn, #comparison .allIn, #qa .allIn, #Ingredients .allIn, #age-group .allIn, #free10 .allIn, #Certification .allIn {
    grid-template-columns: 1fr;
  }
}
#taste .h2-titlle-style, #heart .h2-titlle-style, #dataChart .h2-titlle-style, #comparison .h2-titlle-style, #qa .h2-titlle-style, #Ingredients .h2-titlle-style, #age-group .h2-titlle-style, #free10 .h2-titlle-style, #Certification .h2-titlle-style {
  padding-top: 0;
  margin-bottom: 3.5rem;
}
@media (min-width: 768px) {
  #taste .h2-titlle-style, #heart .h2-titlle-style, #dataChart .h2-titlle-style, #comparison .h2-titlle-style, #qa .h2-titlle-style, #Ingredients .h2-titlle-style, #age-group .h2-titlle-style, #free10 .h2-titlle-style, #Certification .h2-titlle-style {
    margin-bottom: 4.5rem;
  }
}

.font-i {
  font-family: "Glegoo", "PingFang TC", "蘋果儷中黑", "Noto Emoji", "Noto Sans TC", "微軟正黑體", serif;
  font-weight: 700;
}

.more {
  margin-bottom: 2rem;
  padding-right: 10px;
  font-size: 14px;
}
@media (min-width: 576px) {
  .more {
    padding-right: 15px;
  }
}
.more img {
  display: inline-block;
  width: 8px;
  margin-left: 5px;
}

.title-blue {
  color: #35c6f2;
}

.title-darks {
  color: #205165;
} /*#0d3745*/
.title-w {
  color: #ffffff;
}

.h2-titlle-style {
  position: relative;
  margin-bottom: 2rem;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
}

.h2-l, .h2-m, .h2-s-song, .h2-100-s, .h2-l {
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 1.3;
}
.h2-l span, .h2-m span, .h2-s-song span, .h2-100-s span, .h2-l span {
  font-family: "Shippori Mincho", serif;
}

.h2-l {
  font-size: 55px;
  letter-spacing: 3px;
  text-indent: 3px;
}
@media (min-width: 576px) {
  .h2-l {
    font-size: min(10vw, 80px);
    letter-spacing: 8px;
    text-indent: 8px;
  }
}

.h2-m {
  font-size: 40px;
}
@media (min-width: 576px) {
  .h2-m {
    font-size: 55px;
    letter-spacing: 6px;
    text-indent: 6px;
  }
}

.h2-s-song {
  font-size: clamp(22px, 5.6vw, 28px);
  line-height: 1.8;
}

.h2-s-black {
  margin-bottom: 2rem;
  font-size: 18px;
  color: #0d3745;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.5px;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
}
@media (min-width: 768px) {
  .h2-s-black {
    letter-spacing: 2px;
    font-size: 22px;
  }
}

.h2-bigger-100 {
  font-family: "Shippori Mincho", serif;
  font-size: 110px;
  font-weight: bold;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .h2-bigger-100 {
    font-size: min(40vw, 160px);
    line-height: 1.4;
  }
}

.h2-100-s {
  font-size: 30px;
}
@media (min-width: 768px) {
  .h2-100-s {
    font-size: 35px;
    letter-spacing: 5px;
  }
}

br.pc-none {
  display: block;
}
@media (min-width: 768px) {
  br.pc-none {
    display: none;
  }
}

.gradient {
  color: transparent;
  background: linear-gradient(130deg, #959b9e 20%, #c5cacb 25%, #959b9e 30%, #959b9e 50%, #c5cacb 60%, #ffffff 61%, #a4b8c9 62%, #959b9e 64%);
  background-size: 200% 200%;
  -webkit-animation: animatedTextGradient 9s ease-out infinite;
          animation: animatedTextGradient 9s ease-out infinite;
  -webkit-background-clip: text;
          background-clip: text;
}

#Certification .gradient::before, #heart .gradient::before, #heart-scroll .gradient::before, #dataChart .gradient::before, #more-manufacturing .gradient::before, #more-dataNum .gradient::before {
  z-index: -1;
  position: absolute;
  text-shadow: -3px 1px 0 #ffffff;
}
@media (min-width: 768px) {
  #Certification .gradient::before, #heart .gradient::before, #heart-scroll .gradient::before, #dataChart .gradient::before, #more-manufacturing .gradient::before, #more-dataNum .gradient::before {
    text-shadow: -6px 2px 0 #ffffff;
  }
}

#Certification .gradient::before {
  content: "食不相瞞";
}

#more-manufacturing .gradient::before, #heart .gradient::before, #heart-scroll .gradient::before {
  content: "用心對待";
}

#more-dataNum .gradient::before, #dataChart .gradient::before {
  content: "真實不作假";
}

#more-manufacturing .gradient::before, #more-dataNum .gradient::before {
  display: block;
  text-shadow: 1px 4px 0 #ffffff;
  top: 0;
  left: 0;
}
@media (min-width: 768px) {
  #more-manufacturing .gradient::before, #more-dataNum .gradient::before {
    text-indent: 0px;
    text-shadow: 2px 7px 0 #ffffff;
  }
}

.aniTxt {
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
}

.aniRL {
  opacity: 0;
  -webkit-transform: translateX(50px);
          transform: translateX(50px);
}

@-webkit-keyframes animatedTextGradient {
  0% {
    background-position: 200% 0;
  }
  40% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 0;
  }
}

@keyframes animatedTextGradient {
  0% {
    background-position: 200% 0;
  }
  40% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 0;
  }
}
section#one-top, section#heart-scroll {
  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;
}

#one-top {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(230, 239, 237, 0)), color-stop(20%, rgba(230, 239, 237, 0)), color-stop(38%, rgb(230, 239, 237)), color-stop(40%, rgba(230, 239, 237, 0)), to(rgba(230, 239, 237, 0))), -webkit-gradient(linear, left top, left bottom, color-stop(80%, #f8f8f8), to(#effafb));
  background: linear-gradient(to bottom, rgba(230, 239, 237, 0) 0%, rgba(230, 239, 237, 0) 20%, rgb(230, 239, 237) 38%, rgba(230, 239, 237, 0) 40%, rgba(230, 239, 237, 0) 100%), linear-gradient(#f8f8f8 80%, #effafb 100%);
  overflow: visible;
  position: relative;
}
@media (min-width: 768px) {
  #one-top {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(230, 239, 237, 0)), color-stop(35%, rgba(230, 239, 237, 0)), color-stop(55%, rgb(230, 239, 237)), color-stop(60%, rgba(230, 239, 237, 0)), to(rgba(230, 239, 237, 0))), -webkit-gradient(linear, left top, left bottom, color-stop(60%, #f8f8f8), to(#effafb));
    background: linear-gradient(to bottom, rgba(230, 239, 237, 0) 0%, rgba(230, 239, 237, 0) 35%, rgb(230, 239, 237) 55%, rgba(230, 239, 237, 0) 60%, rgba(230, 239, 237, 0) 100%), linear-gradient(#f8f8f8 60%, #effafb 100%);
  }
}
#one-top .top-box {
  position: sticky;
  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;
  top: 0;
  width: min(100%, 1020px);
  height: 100vh;
}
#one-top .top-box .allGrid {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 42.5% 15% 17.5% 23%;
  padding-top: 28px;
  width: 100%;
  height: 68%;
}
@media (max-height: 740px) and (orientation: portrait) {
  #one-top .top-box .allGrid {
    height: 77%;
    grid-template-rows: 42% 15% 17.5% 25%;
  }
}
@media (min-width: 768px) {
  #one-top .top-box .allGrid {
    grid-template-columns: 70% 270px 1fr;
    grid-template-rows: 100px 60% 1fr;
    margin-right: 55px;
  }
}
#one-top .top-box .main-show {
  grid-area: 1/1/2/2;
  justify-self: center;
  margin: 0;
  width: 90%;
  aspect-ratio: 1/0.57;
  background: url(/images/other/Img_p3-probiotic.webp?123) no-repeat top center/contain;
}
@media (min-width: 768px) {
  #one-top .top-box .main-show {
    width: 100%;
    grid-area: 1/1/3/2;
    margin-top: 1rem;
    align-self: center;
  }
}
#one-top .top-box .buy-btn {
  --btncricle:55px;
  position: absolute;
  width: var(--btncricle);
  height: var(--btncricle);
  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: 21%;
  top: 37%;
  color: #ffffff;
}
#one-top .top-box .buy-btn span {
  position: absolute;
  z-index: 2;
  color: #ef5f27;
}
@media (min-width: 768px) {
  #one-top .top-box .buy-btn {
    --btncricle:65px;
    width: var(--btncricle);
    height: var(--btncricle);
    top: 65%;
    right: 33%;
  }
}
#one-top .top-box .buy-btn::after {
  content: "";
  --anibtn-color: #c4f7ff40;
  --anibtn-color-50: #b5f1ff73;
  display: block;
  height: var(--btncricle);
  width: var(--btncricle);
  text-align: center;
  background-color: rgba(125, 229, 242, 0.8);
  border-radius: 50%;
  -webkit-animation: circleBuyBtn 2.8s infinite ease-in-out;
          animation: circleBuyBtn 2.8s infinite ease-in-out;
}
#one-top .top-box .p-slogn {
  grid-area: 2/1/3/2;
  position: relative;
  font-family: "Roboto", "Noto Sans TC", "微軟正黑體", sans-serif;
  display: grid;
  place-items: center;
  font-size: clamp(30px, 6.15vw, 70px);
  line-height: 1.4;
}
@media screen and (max-width: 576px) {
  #one-top .top-box .p-slogn {
    width: 270px;
    margin: auto;
  }
}
@media (min-width: 768px) {
  #one-top .top-box .p-slogn {
    grid-area: 3/1/4/4;
    margin: 3.3rem 0 1.5rem 0;
  }
}
#one-top .top-box .p-slogn .slogn-light {
  --imgsize:30px;
  position: absolute;
  top: -13px;
  right: 14px;
  width: var(--imgsize);
  height: var(--imgsize);
  z-index: 5;
}
@media (min-width: 768px) {
  #one-top .top-box .p-slogn .slogn-light {
    --imgsize:70px;
    width: var(--imgsize);
    height: var(--imgsize);
    top: -50px;
    right: 50px;
  }
}
#one-top .top-box .p-slogn .element {
  display: block;
  position: absolute;
}
#one-top .top-box .p-slogn .element.first {
  z-index: 2;
}
#one-top .top-box .p-slogn .element.first .slogn-style.two {
  background: linear-gradient(45deg, rgb(53, 198, 242) 50%, rgb(34, 175, 241) 75%, rgb(163, 227, 242) 86%, rgb(53, 198, 242) 100%);
  -webkit-background-clip: text;
  color: transparent;
}
#one-top .top-box .p-slogn .element.sed {
  z-index: 1;
  text-shadow: 0 6px 8px rgba(195, 210, 211, 0.85);
}
@media (min-width: 768px) {
  #one-top .top-box .p-slogn .element.sed {
    text-shadow: 0 10px 8px rgba(195, 210, 211, 0.85);
  }
}
#one-top .top-box .p-slogn .slogn-style {
  position: relative;
  padding-left: 5px;
  color: #35c6f2;
  font-weight: 800;
  letter-spacing: 4px;
  z-index: 0;
}
#one-top .top-box .p-slogn .slogn-style::before, #one-top .top-box .p-slogn .slogn-style::after {
  content: "";
  position: absolute;
  left: 0;
  padding-left: 5px;
}
#one-top .top-box .p-slogn .slogn-style::before {
  content: attr(data-storke);
  z-index: -1;
  -webkit-text-stroke: 3px #ffffff;
}
@media (min-width: 768px) {
  #one-top .top-box .p-slogn .slogn-style::before {
    -webkit-text-stroke: 5px #ffffff;
  }
}
#one-top .top-box .p-slogn .slogn-style::after {
  content: attr(data-storke);
  z-index: -2;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgb(237, 231, 208)), color-stop(15%, rgb(245, 243, 234)), color-stop(28%, rgb(239, 225, 174)), color-stop(33%, rgb(234, 226, 198)), color-stop(51%, rgb(245, 243, 234)), color-stop(67%, rgb(234, 226, 198)), color-stop(83%, rgb(245, 243, 234)), color-stop(90%, rgb(237, 231, 208)));
  background: linear-gradient(to bottom, rgb(237, 231, 208) 1%, rgb(245, 243, 234) 15%, rgb(239, 225, 174) 28%, rgb(234, 226, 198) 33%, rgb(245, 243, 234) 51%, rgb(234, 226, 198) 67%, rgb(245, 243, 234) 83%, rgb(237, 231, 208) 90%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 7px transparent;
}
@media (min-width: 768px) {
  #one-top .top-box .p-slogn .slogn-style::after {
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 253, 231)), color-stop(22%, rgb(219, 197, 159)), color-stop(30%, rgb(211, 176, 115)), color-stop(60%, rgb(255, 253, 231)), color-stop(53%, rgb(247, 245, 212)), color-stop(70%, rgb(211, 176, 115)), to(rgb(247, 246, 237)));
    background: linear-gradient(to bottom, rgb(255, 253, 231) 0%, rgb(219, 197, 159) 22%, rgb(211, 176, 115) 30%, rgb(255, 253, 231) 60%, rgb(247, 245, 212) 53%, rgb(211, 176, 115) 70%, rgb(247, 246, 237) 100%);
    -webkit-background-clip: text;
    -webkit-text-stroke: 11px transparent;
  }
}
@media (min-width: 768px) {
  #one-top .top-box .p-slogn .slogn-style {
    letter-spacing: 8px;
  }
}
#one-top .top-box .p-slogn .slogn-style.one {
  margin-right: 90px;
}
@media (min-width: 768px) {
  #one-top .top-box .p-slogn .slogn-style.one {
    margin-right: 0;
  }
}
#one-top .top-box .p-slogn .slogn-style.two {
  margin-left: 40px;
}
@media (min-width: 768px) {
  #one-top .top-box .p-slogn .slogn-style.two {
    margin-left: 0;
  }
}
#one-top .top-box .p-slogn .slogn-style.three {
  padding-right: 3px;
}
#one-top .top-box .p-slogn .slogn-style.three::before, #one-top .top-box .p-slogn .slogn-style.three::after {
  padding-right: 3px;
}
#one-top .top-box .allpeople {
  grid-area: 3/1/4/2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 0.6rem;
}
@media (min-width: 768px) {
  #one-top .top-box .allpeople {
    margin-top: 0;
    grid-area: 1/2/2/3;
  }
}
#one-top .top-box .allpeople .people {
  --peoplesize:68px;
  width: var(--peoplesize);
  height: var(--peoplesize);
  background-color: #c48787;
  border: 4px solid #fff;
  border-radius: 50%;
  margin-left: -2%;
  -webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
          box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  opacity: 0;
  -webkit-transform: scale(1.2) translateX(0) translateY(20px);
          transform: scale(1.2) translateX(0) translateY(20px);
}
#one-top .top-box .allpeople .people:nth-child(1) {
  z-index: 1;
  background: url(/images/product/probiotic/new/bighead-4.webp) no-repeat center/100%;
}
#one-top .top-box .allpeople .people:nth-child(2) {
  z-index: 2;
  background: url(/images/product/probiotic/new/bighead-3.webp) no-repeat center/100%;
}
#one-top .top-box .allpeople .people:nth-child(3) {
  z-index: 3;
  background: url(/images/product/probiotic/new/bighead-2.webp) no-repeat center/100%;
}
#one-top .top-box .allpeople .people:nth-child(4) {
  z-index: 4;
  background: url(/images/product/probiotic/new/bighead-1.webp) no-repeat center/100%;
}
@media (min-width: 768px) {
  #one-top .top-box .allpeople .people {
    --peoplesize:75px;
    width: var(--peoplesize);
    height: var(--peoplesize);
  }
}
#one-top .top-box .maintxt {
  grid-area: 4/1/5/2;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: url(/images/product/probiotic/new/taste-main-text_03.webp) no-repeat center center/73% auto;
}
@media (min-width: 768px) {
  #one-top .top-box .maintxt {
    grid-area: 2/2/3/3;
    background: url(/images/product/probiotic/new/PCtaste-main-text_03.webp) no-repeat top center/270px auto;
  }
}

#update {
  background-color: #e0f3f6;
  background-image: linear-gradient(160deg, #e0f3f6 62%, #ffffff 100%);
  position: relative;
  height: 110vh;
}
@media (min-width: 768px) {
  #update .bg-view-btn {
    bottom: 3vh;
  }
}
#update .titleArea {
  position: absolute;
  width: 100%;
  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;
  top: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(239, 250, 251)), color-stop(50%, rgb(239, 250, 251)), color-stop(96%, rgba(239, 250, 251, 0)), to(rgba(239, 250, 251, 0)));
  background: linear-gradient(to bottom, rgb(239, 250, 251) 0%, rgb(239, 250, 251) 50%, rgba(239, 250, 251, 0) 96%, rgba(239, 250, 251, 0) 100%);
}
#update .titleArea .h2-titlle-style {
  padding-top: 10px;
}
@media (min-width: 768px) {
  #update .titleArea .h2-titlle-style {
    padding-top: 0;
  }
}
#update .titleArea .h2-l, #update .titleArea .h2-s-song {
  display: inline-block;
  -webkit-transform: scale(2);
          transform: scale(2);
  opacity: 0;
}
#update .gradient-white {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 25%;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(54, 211, 194, 0)), color-stop(95%, #bedce7));
  background-image: linear-gradient(180deg, rgba(54, 211, 194, 0) 60%, #bedce7 95%);
  position: absolute;
  bottom: 0;
  z-index: 5;
  display: flex;
}
#update .viewbtn {
  --expanded: 166px;
}
@media (min-width: 768px) {
  #update .viewbtn {
    --expanded: 190px;
  }
}
#update .h2-l {
  margin-top: 40px;
}
@media (min-width: 768px) {
  #update .h2-l {
    margin-top: 15px;
  }
}
#update .spline-bg {
  width: 100%;
  height: 110vh;
}
#update .spline-bg.bg-lazyload {
  background: url(/images/product/probiotic/new/ball-background.webp) no-repeat bottom center/auto 100%;
}
#update .spline {
  width: 100%;
  height: 110vh;
  display: none;
}

@media screen and (min-width: 576px) and (max-width: 1300px) {
  #bestChoose .allIn, #guard .allIn {
    width: 90%;
    margin: auto;
  }
}

#bestChoose {
  padding-top: 2rem;
  background-color: #bedce7;
}
@media (min-width: 576px) {
  #bestChoose {
    padding-top: 6rem;
  }
}
#bestChoose.bg-lazyload {
  background: -webkit-gradient(linear, left top, left bottom, from(#bedce7), color-stop(10%, rgba(54, 211, 194, 0))), radial-gradient(circle at 60% 35%, rgba(161, 233, 240, 0.7098039216) 0, rgba(161, 215, 240, 0) 20%), radial-gradient(circle at 25% 50%, rgba(161, 233, 240, 0.7098039216) 0, rgba(161, 215, 240, 0) 15%), radial-gradient(circle at 65% 80%, rgba(209, 249, 222, 0.6588235294) 0, rgba(161, 215, 240, 0) 25%), url(/images/product/probiotic/new/best-bg_02.jpg) no-repeat top center/contain, #ceeaf8;
  background: linear-gradient(to bottom, #bedce7 0%, rgba(54, 211, 194, 0) 10%), radial-gradient(circle at 60% 35%, rgba(161, 233, 240, 0.7098039216) 0, rgba(161, 215, 240, 0) 20%), radial-gradient(circle at 25% 50%, rgba(161, 233, 240, 0.7098039216) 0, rgba(161, 215, 240, 0) 15%), radial-gradient(circle at 65% 80%, rgba(209, 249, 222, 0.6588235294) 0, rgba(161, 215, 240, 0) 25%), url(/images/product/probiotic/new/best-bg_02.jpg) no-repeat top center/contain, #ceeaf8;
}
@media (min-width: 768px) {
  #bestChoose.bg-lazyload {
    background: -webkit-gradient(linear, left top, left bottom, from(#bedce7), color-stop(10%, rgba(54, 211, 194, 0))), radial-gradient(circle at 60% 35%, rgba(164, 230, 255, 0.568627451) 0, rgba(161, 215, 240, 0) 20%), radial-gradient(circle at 25% 50%, rgba(161, 233, 240, 0.7098039216) 0, rgba(161, 215, 240, 0) 15%), radial-gradient(circle at 70% 80%, #a3d8f2 0, rgba(161, 215, 240, 0) 15%), url(/images/product/probiotic/new/best-bg_02.jpg) no-repeat top center/contain, #ceeaf8;
    background: linear-gradient(to bottom, #bedce7 0%, rgba(54, 211, 194, 0) 10%), radial-gradient(circle at 60% 35%, rgba(164, 230, 255, 0.568627451) 0, rgba(161, 215, 240, 0) 20%), radial-gradient(circle at 25% 50%, rgba(161, 233, 240, 0.7098039216) 0, rgba(161, 215, 240, 0) 15%), radial-gradient(circle at 70% 80%, #a3d8f2 0, rgba(161, 215, 240, 0) 15%), url(/images/product/probiotic/new/best-bg_02.jpg) no-repeat top center/contain, #ceeaf8;
  }
}
#bestChoose .cloud img {
  position: absolute;
  width: 240px;
  opacity: 0.8;
}
#bestChoose .cloud img:nth-child(1) {
  top: 20%;
  left: -100px;
}
@media (min-width: 768px) {
  #bestChoose .cloud img:nth-child(1) {
    left: 15%;
  }
}
#bestChoose .cloud img:nth-child(2) {
  top: 40%;
  left: 75%;
}
@media (min-width: 768px) {
  #bestChoose .cloud img:nth-child(2) {
    top: 30%;
  }
}
@media (min-width: 992px) {
  #bestChoose .allIn {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  #bestChoose .allIn {
    grid-template-columns: 100%;
  }
}
#bestChoose h4 {
  grid-area: 1/1/2/2;
}
@media (min-width: 992px) {
  #bestChoose h4 {
    grid-area: 1/1/2/2;
    align-self: center;
  }
}
#bestChoose h4 .sel-1 span:nth-child(1), #bestChoose h4 .sel-1 span:nth-child(2) {
  color: #0d3745;
  font-size: clamp(55px, 14vw, 80px);
  padding: 0 3px;
}
#bestChoose h4 .sel-2 span:nth-child(2), #bestChoose h4 .sel-2 span:nth-child(3) {
  color: #0d3745;
  font-size: clamp(55px, 14vw, 80px);
  padding: 0 3px;
}
#bestChoose .boxImg {
  grid-area: 3/1/4/3;
  position: relative;
  bottom: 0;
  margin-top: -20px;
  margin-bottom: 1rem;
  text-align: center;
  z-index: 5;
}
@media (min-width: 992px) {
  #bestChoose .boxImg {
    display: block;
    margin-top: 0;
    margin-bottom: 0;
  }
}
#bestChoose .boxImg .productImg {
  width: 100%;
  aspect-ratio: 1.05/1;
  margin-top: -9vh;
  background: url(/images/product/probiotic/new/p-box03.webp) no-repeat top center/120%;
}
@media (min-width: 992px) {
  #bestChoose .boxImg .productImg {
    margin-top: -12%;
    aspect-ratio: 1.24/1;
    width: min(100%, 800px);
    margin-left: -18%;
    margin-top: -420px;
    background-size: 100%;
  }
}
@media (min-width: 1200px) {
  #bestChoose .boxImg .productImg {
    margin-left: -10%;
  }
}
@media (min-width: 1400px) {
  #bestChoose .boxImg .productImg {
    margin-right: 580px;
    margin-left: -80px;
    margin-top: -500px;
  }
}
#bestChoose .arc {
  position: absolute;
  bottom: -1px;
  z-index: 1;
  width: 100%;
  height: 6.39%;
  -webkit-mask: url(/images/product/probiotic/new/Arc-type.svg) center top/cover no-repeat;
          mask: url(/images/product/probiotic/new/Arc-type.svg) center top/cover no-repeat;
  background: -webkit-gradient(linear, left top, left bottom, from(#eff3f3), to(rgb(218, 234, 235)));
  background: linear-gradient(to bottom, #eff3f3 0%, rgb(218, 234, 235) 100%);
  z-index: 0;
}
@media (min-width: 992px) {
  #bestChoose .arc {
    height: 130px;
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  #bestChoose .arc {
    height: 11vh;
  }
}
#bestChoose .bestChoose-h2 {
  --varH:332px;
  --varp:60px;
  grid-area: 1/1/2/3;
  padding: var(--varp) 0;
  height: var(--varH);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: url(/images/product/probiotic/new/halo-big.webp) no-repeat center center/150%;
}
@media (min-width: 768px) {
  #bestChoose .bestChoose-h2 {
    --varp:40px;
    background-size: min(100%, 700px);
  }
}
#bestChoose .bestChoose-h2 .h-hid {
  overflow: hidden;
}
#bestChoose .bestChoose-h2 .Height-ani .box {
  height: calc(var(--varH) - var(--varp) * 2);
  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;
}
@media (min-width: 768px) {
  #bestChoose .bestChoose-h2 .Height-ani .box:first-child h2 {
    height: 252px;
  }
}
#bestChoose .bestChoose-h2 .Height-ani .box:nth-child(2) h2 {
  --w2txt: 50px;
}
#bestChoose .bestChoose-h2 .Height-ani .box:nth-child(2) h2 div {
  display: inline-block;
}
#bestChoose .bestChoose-h2 .Height-ani .box:nth-child(2) h2 div:nth-of-type(1) {
  margin-right: var(--w2txt);
}
#bestChoose .bestChoose-h2 .Height-ani .box:nth-child(2) h2 div:nth-of-type(2) {
  margin-left: var(--w2txt);
}
@media (min-width: 768px) {
  #bestChoose .bestChoose-h2 .Height-ani .box:nth-child(2) h2 {
    --w2txt: 150px;
    line-height: 1.25;
    margin-bottom: 0.5rem;
  }
}
#bestChoose .bestChoose-h2 h2 {
  text-align: center;
  text-shadow: -5px 8px 3px rgba(199, 186, 155, 0.4784313725);
}
#bestChoose .bestChoose-h2 .max464 {
  width: min(85%, 464px);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5rem;
}
@media (min-width: 768px) {
  #bestChoose .bestChoose-h2 .max464 {
    margin-top: 1rem;
  }
}
#bestChoose .swiperAll {
  grid-area: 2/1/3/3;
  display: grid;
  grid-template-columns: 1fr;
  margin: auto;
  height: 100%;
}
@media screen and (min-width: 375px) {
  #bestChoose .swiperAll {
    grid-template-columns: 360px;
  }
}
@media screen and (min-width: 413px) {
  #bestChoose .swiperAll {
    grid-template-columns: 413px;
  }
}
@media (min-width: 992px) {
  #bestChoose .swiperAll {
    z-index: 10;
    grid-template-columns: 1fr 600px;
    width: min(100%, 1020px);
  }
}
#bestChoose .swiperAll .foil-L, #bestChoose .swiperAll .foil-R {
  position: absolute;
  z-index: 5;
}
#bestChoose .swiperAll .foil-L {
  width: 70px;
  left: 5%;
  top: -70px;
}
@media (min-width: 768px) {
  #bestChoose .swiperAll .foil-L {
    width: 80px;
    left: -80px;
    top: 60px;
  }
}
#bestChoose .swiperAll .foil-R {
  width: 80px;
  right: 5%;
  top: -80px;
}
@media (min-width: 768px) {
  #bestChoose .swiperAll .foil-R {
    width: 90px;
    right: -20px;
    top: 230px;
  }
}
#bestChoose .swiperAll .s-txt-bg {
  position: relative;
  padding: 30px 0;
}
@media (min-width: 768px) {
  #bestChoose .swiperAll .s-txt-bg {
    padding: 60px 0;
  }
}
#bestChoose .swiperAll .s-txt-bg::after {
  content: "";
  position: absolute;
  top: 0px;
  left: calc(50% - 260px);
  width: 520px;
  height: 320px;
  aspect-ratio: 1/1.7;
  background: url(/images/product/probiotic/new/halo-smill.webp) no-repeat top center/contain;
}
#bestChoose .swiperAll .swiperBg {
  width: 100%;
  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;
  aspect-ratio: 1/1.38;
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
}
@media screen and (max-width: 576px) {
  #bestChoose .swiperAll .swiperBg {
    margin-top: -20px;
  }
}
#bestChoose .swiperAll .swiperBg.bg-lazyload {
  background: url(/images/product/probiotic/new/talkbox-Mobile2.webp) no-repeat center center/100% auto;
}
@media (min-width: 992px) {
  #bestChoose .swiperAll .swiperBg.bg-lazyload {
    background: url(/images/product/probiotic/new/talkbox-PC2.webp) no-repeat center center/100%;
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  #bestChoose .swiperAll .swiperBg.bg-lazyload {
    background: url(/images/product/probiotic/new/talkbox-Mobile2.webp) no-repeat center center/100% auto;
  }
}
@media (min-width: 992px) {
  #bestChoose .swiperAll .swiperBg {
    margin-top: -1rem;
    aspect-ratio: 1/1.25;
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  #bestChoose .swiperAll .swiperBg {
    aspect-ratio: 1/1.38;
  }
}
#bestChoose .swiperAll .swiperBg.active {
  -webkit-animation-name: swiperBGmove;
          animation-name: swiperBGmove;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
#bestChoose .swiperAll .swiper-1 {
  width: 85%;
}
@media (min-width: 992px) {
  #bestChoose .swiperAll .swiper-1 {
    width: 80%;
  }
}
#bestChoose .swiperAll .swiper-1 .swiper-wrapper .swiper-slide {
  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;
}
#bestChoose .swiperAll .swiper-1 .swiper-wrapper .swiper-slide .lottie-player {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#bestChoose .swiper-pagination {
  position: relative;
  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;
  margin-top: 30px;
  counter-reset: oxxo; /* 定義重設計數器名稱為 oxxo */
}
@media (min-width: 768px) {
  #bestChoose .swiper-pagination {
    margin-top: 0px;
  }
}
#bestChoose .swiper-pagination span {
  counter-increment: oxxo; /* div 裡每出現一次 span，oxxo 數值就增加 1 */
}
#bestChoose .swiper-pagination span::before {
  content: counter(oxxo) ".";
  font-family: "Outfit", sans-serif;
  display: inline-block;
  margin-bottom: 2px;
  color: #276273;
  -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
          writing-mode: horizontal-tb;
  vertical-align: middle;
  font-size: 1rem;
}
#bestChoose .swiper-pagination span::after {
  content: "";
  position: absolute;
  margin-left: -5px;
  width: 100%;
  top: 0;
  aspect-ratio: 1/1.14;
  background: url(/images/product/probiotic/new/perfect-tick.png) no-repeat top center/38px;
}
#bestChoose .swiper-pagination .swiper-pagination-bullet {
  display: block;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  padding: 40px 8px 0px 8px;
  margin: 0 5px;
  width: auto;
  height: 200px;
  font-size: 1.1rem;
  color: #205165;
  font-weight: 700;
  vertical-align: middle;
  text-align: start;
  line-height: 1;
  background: linear-gradient(135deg, rgb(112, 219, 251) 0%, rgb(164, 231, 249) 51%, rgb(112, 219, 251) 100%);
  border-radius: 30px;
  opacity: 1;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
}
@media (min-width: 768px) {
  #bestChoose .swiper-pagination .swiper-pagination-bullet {
    margin: 0 10px;
    padding: 40px 8px 25px 8px;
    height: auto;
    font-size: 1.12rem;
    text-align: center;
  }
}
#bestChoose .swiper-pagination .swiper-pagination-bullet-active {
  padding: 50px 12px 20px 12px;
  margin-top: -1rem;
  height: 230px;
  font-size: 1.25rem;
  background: linear-gradient(135deg, #d1c978 0%, #f6edbf 49%, #d1c978 100%);
  color: #5f3519;
  -webkit-box-shadow: -3px 3px 0 #cdb67e, -5px 5px 5px rgba(192, 185, 166, 0.7);
          box-shadow: -3px 3px 0 #cdb67e, -5px 5px 5px rgba(192, 185, 166, 0.7);
}
@media (min-width: 768px) {
  #bestChoose .swiper-pagination .swiper-pagination-bullet-active {
    font-size: 1.25rem;
    height: auto;
  }
}
#bestChoose .swiper-pagination .swiper-pagination-bullet-active::after {
  background-size: 48px;
}
#bestChoose .swiper-pagination .swiper-pagination-bullet-active::before {
  margin-bottom: 5px;
  color: #5f3519 !important;
}

#exclusive {
  padding-top: 1rem;
  background-color: #dbeaec;
}
#exclusive.bg-lazyload {
  background: url(/images/product/probiotic/new/map-bg-bottom.jpg) no-repeat center 88%/100%, -webkit-gradient(linear, left bottom, left top, from(#dbeaed), color-stop(30%, #dbeaed), color-stop(65%, #c7e3e6), to(#dbeaec));
  background: url(/images/product/probiotic/new/map-bg-bottom.jpg) no-repeat center 88%/100%, linear-gradient(0deg, #dbeaed 0%, #dbeaed 30%, #c7e3e6 65%, #dbeaec 100%);
}
@media screen and (max-width: 576px) {
  #exclusive .more-complex {
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline; /*4隻菌的跳出卡片位置*/
  }
}
#exclusive .bg-view-btn {
  bottom: 0;
}
#exclusive .allIn {
  height: 100%;
  grid-auto-columns: auto;
}
@media (min-width: 992px) {
  #exclusive .allIn {
    grid-template-rows: calc(211px + 5rem) auto;
    grid-template-columns: 63% 37%;
  }
}
@media (min-width: 992px) {
  #exclusive .titleArea {
    grid-area: 1/2/2/3;
    text-align: center;
  }
}
@media (min-width: 992px) {
  #exclusive .ruleDetail {
    grid-area: 2/2/3/3;
    width: 100%;
    height: 86%; /*1011*/
    position: relative;
  }
  #exclusive .ruleDetail .more-complex {
    width: min(90%, 450px);
    height: 100%;
    position: absolute;
    top: 0;
    right: 5%;
    opacity: 1;
    background-color: transparent;
  }
}
#exclusive .viewbtn {
  --expanded: 180px;
}
@media (min-width: 992px) {
  #exclusive .viewbtn {
    --expanded: 200px;
  }
}
#exclusive .map {
  position: relative;
  width: 100%;
  margin-bottom: 5%;
  margin-top: 60px;
  aspect-ratio: 1/1.65;
  background-image: none;
  background-color: rgba(199, 227, 230, 0); /* 可選的佔位背景色 */
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-name: mapmove;
          animation-name: mapmove;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
@media (min-width: 576px) {
  #exclusive .map {
    -webkit-animation-name: mapmove02;
            animation-name: mapmove02;
    -webkit-animation-duration: 1.2s;
            animation-duration: 1.2s;
  }
}
@media (min-width: 992px) {
  #exclusive .map {
    grid-area: 1/1/3/2;
    height: 960px;
    margin-left: -3.5rem;
    margin-top: 110px;
  }
}
#exclusive .map.bg-lazyload {
  background: url(/images/product/probiotic/new/map-web.webp) no-repeat center 0/auto 90%;
}
@media (min-width: 992px) {
  #exclusive .map.bg-lazyload {
    background-size: 100% auto;
    background-position: center bottom;
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  #exclusive .map {
    margin-top: 160px;
    aspect-ratio: 1/1.3;
    -webkit-animation-name: mapmove02;
            animation-name: mapmove02;
    -webkit-animation-duration: 1.2s;
            animation-duration: 1.2s;
  }
}
#exclusive .map .cloud {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
#exclusive .map .cloud img {
  position: absolute;
  z-index: 3;
}
#exclusive .map .cloud img:nth-child(1) {
  width: 16%;
  top: 13%;
  left: -5%;
}
#exclusive .map .cloud img:nth-child(2) {
  width: 21%;
  top: 16%;
  right: -9%;
}
#exclusive .map .cloud img:nth-child(3) {
  width: 20%;
  bottom: 20%;
  left: 5%;
}
#exclusive .map .cloud img:nth-child(4) {
  width: 20%;
  bottom: 35%;
  right: 5%;
}
#exclusive .map .rule {
  position: absolute;
  z-index: 9;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0;
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}
@media (min-width: 992px) {
  #exclusive .map .rule {
    width: 78%;
    top: 2%;
    left: 10%;
  }
}
#exclusive .map .rule div {
  cursor: pointer;
}
#exclusive .map .rule .rule-container {
  position: absolute;
  display: block;
  width: 45%;
}
#exclusive .map .rule .hb89, #exclusive .map .rule .lgg, #exclusive .map .rule .ncfm, #exclusive .map .rule .ubcb70 {
  width: 65%;
}
@media (min-width: 768px) {
  #exclusive .map .rule .hb89, #exclusive .map .rule .lgg, #exclusive .map .rule .ncfm, #exclusive .map .rule .ubcb70 {
    width: 60%;
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  #exclusive .map .rule .hb89, #exclusive .map .rule .lgg, #exclusive .map .rule .ncfm, #exclusive .map .rule .ubcb70 {
    width: 55%;
  }
}
#exclusive .map .rule .hb89 {
  top: -11%;
  left: 17.5%;
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  #exclusive .map .rule .hb89 {
    top: -16%;
    left: 22.5%;
  }
}
#exclusive .map .rule .lgg {
  top: 21%;
  left: 3%;
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  #exclusive .map .rule .lgg {
    top: 16%;
    left: 11%;
  }
}
#exclusive .map .rule .ncfm {
  pointer-events: none; /*下穿透不然會擋到lgg*/
  /*補回-角色可以點選*/
  top: 16%;
  right: 3%;
}
#exclusive .map .rule .ncfm svg g {
  pointer-events: auto;
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  #exclusive .map .rule .ncfm {
    top: 13%;
    right: 8%;
  }
}
#exclusive .map .rule .ubcb70 {
  pointer-events: none; /*下穿透不然會擋到lgg*/
  /*補回-角色可以點選*/
  bottom: 30%;
  left: 20%;
}
#exclusive .map .rule .ubcb70 svg g {
  pointer-events: auto;
}
@media (min-width: 992px) {
  #exclusive .map .rule .ubcb70 {
    bottom: 25%;
    left: 25%;
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  #exclusive .map .rule .ubcb70 {
    left: 25%;
  }
}

#guard {
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 4rem;
  background-color: #dbeaec;
}
#guard.bg-lazyload {
  background: url(/images/product/probiotic/new/water-droplets-BG_03.png) no-repeat bottom/35% 6%, url(/images/product/probiotic/new/water-droplets-BG_02.png) repeat-x bottom, #dbeaec;
}
@media (min-width: 992px) {
  #guard.bg-lazyload {
    background: url(/images/product/probiotic/new/water-droplets-BG_03.png) no-repeat bottom/23% 8%, url(/images/product/probiotic/new/water-droplets-BG_02.png) repeat-x bottom, #dbeaec;
  }
}
@media (min-width: 992px) {
  #guard {
    padding-top: 5rem;
    padding-bottom: 8.5rem;
  }
}
#guard .allIn {
  margin-bottom: 100px;
}
@media (min-width: 768px) {
  #guard .allIn {
    display: grid;
    margin-bottom: 120px;
  }
}
@media (min-width: 992px) {
  #guard .allIn {
    grid-template-columns: 50% 50%;
    gap: 0 2rem;
    margin-bottom: 0;
  }
}
#guard .allIn h2 {
  padding-left: 1.6rem;
}
@media (min-width: 992px) {
  #guard .allIn h2 {
    padding-left: 0;
  }
  #guard .allIn h2 .title-darks {
    padding-left: 2.5rem;
  }
}
#guard .allIn .h2-titlle-style {
  margin-bottom: 0;
}
@media (min-width: 992px) {
  #guard .allIn .h2-titlle-style {
    text-align: left;
    margin-bottom: 5rem;
    margin-left: 4px;
  }
}
#guard .allIn .guardBg {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -ms-flex-item-align: center;
      align-self: center;
}
#guard .allIn .guardBg.bg-lazyload {
  background: radial-gradient(circle at 70% 30%, rgba(233, 255, 187, 0.5) 0, rgba(161, 215, 240, 0) 25%), radial-gradient(circle at 25% 55%, rgba(243, 219, 253, 0.84) 0, rgba(161, 215, 240, 0) 18%), url(/images/product/probiotic/new/kid-BG.png) no-repeat 0 center/110%;
}
@media (min-width: 992px) {
  #guard .allIn .guardBg.bg-lazyload {
    background-size: 90%;
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  #guard .allIn .guardBg.bg-lazyload {
    background-size: 100%;
  }
}
#guard .allIn .guardBg.bg-lazyload::before {
  position: absolute;
  content: "";
  width: 100%;
  aspect-ratio: 1/1;
  z-index: 15;
  opacity: 0.85;
  background: url(/images/product/probiotic/new/right-point.png) no-repeat 68% 38%/15px, url(/images/product/probiotic/new/right-point.png) no-repeat 69% 58%/12px, url(/images/product/probiotic/new/right-point.png) no-repeat 26% 50%/18px;
}
@media (min-width: 768px) {
  #guard .allIn .guardBg.bg-lazyload::before {
    background: url(/images/product/probiotic/new/right-point.png) no-repeat 55% 34%/20px, url(/images/product/probiotic/new/right-point.png) no-repeat 57% 50%/15px, url(/images/product/probiotic/new/right-point.png) no-repeat 25% 45%/20px;
  }
}
@media (min-width: 992px) {
  #guard .allIn .guardBg {
    grid-area: 1/2/3/3;
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  #guard .allIn .guardBg {
    width: min(100%, 600px);
    margin: auto;
  }
}
#guard .allIn .guardBg__width {
  width: 100%;
  margin-bottom: 1rem;
  margin-top: -2.5rem;
}
@media (min-width: 992px) {
  #guard .allIn .guardBg__width {
    width: min(100%, 550px);
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  #guard .allIn .guardBg__width {
    margin-bottom: 2rem;
  }
}
#guard .allIn .allCare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  padding: 0 7.25%;
}
@media (min-width: 768px) {
  #guard .allIn .allCare {
    grid-template-columns: repeat(2, 1fr);
    margin: auto;
    gap: 3rem 1rem;
  }
}
@media (min-width: 992px) {
  #guard .allIn .allCare {
    grid-area: 2/1/3/2;
    padding: 0;
  }
}
@media (min-width: 1200px) {
  #guard .allIn .allCare {
    grid-template-columns: repeat(2, 310px);
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  #guard .allIn .allCare {
    gap: 3rem 1rem;
  }
}
#guard .allIn .allCare .care {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
}
#guard .allIn .allCare .care ul {
  padding: 0 15px;
}
#guard .allIn .allCare .care ul li {
  padding-left: 8px;
  list-style-type: "‑";
  line-height: 1.8;
  letter-spacing: 0.5px;
  color: rgba(51, 51, 51, 0.8392156863);
}
#guard .allIn .allCare .care ul li::marker {
  font-weight: bold;
  color: #91c5d5;
}
#guard .allIn .allCare .care ul li span {
  font-size: 13px;
  opacity: 0.7;
  letter-spacing: 0;
}
#guard .allIn .allCare .care .summary {
  display: inline-block;
  padding: 2px 11px 0 11px;
  margin-bottom: 5px;
  margin-right: 5px;
  font-weight: 500;
  font-size: 18px;
  color: #fff;
  background-color: #35c6f2;
  border-radius: 15px;
}
#guard .allIn .allCare .care .summary .smallUn {
  font-weight: 300;
  font-size: 14px;
}
#guard .allIn .allCare .care .quantity {
  font-size: 12px;
  color: #2daed5;
  letter-spacing: 0.5px;
}
@media (min-width: 768px) {
  #guard .allIn .allCare .care .quantity {
    font-size: 14px;
  }
}

#taste {
  padding-top: 40vw;
  padding-bottom: 20vh;
  background: var(--twotasteBG);
  --foilW: 239px; /*鋁包寬*/
  --circleW: 250px; /*左右圓寬*/
  --Ocircle: 150%;
  --Lcircle: 143%;
}
@media screen and (max-width: 991px) {
  #taste .h2-titlle-style, #taste .aniTxt {
    opacity: 1;
  }
  #taste .aniTxt {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
#taste.bg-lazyload {
  background: url(/images/product/probiotic/new/water-droplets-BG_05.png) no-repeat top/60%, url(/images/product/probiotic/new/twotaste-BG.webp) no-repeat center 65%/80%, var(--twotasteBG);
}
@media (min-width: 768px) {
  #taste.bg-lazyload {
    background: url(/images/product/probiotic/new/water-droplets-BG_05.png) no-repeat top, url(/images/product/probiotic/new/twotaste-BG.webp) no-repeat center 80%/700px, url(/images/product/probiotic/new/blue-BG.webp) no-repeat -30%/contain, url(/images/product/probiotic/new/lemon-BG.webp) no-repeat 130%/contain, var(--twotasteBG);
  }
}
@media (min-width: 992px) {
  #taste.bg-lazyload {
    background: url(/images/product/probiotic/new/water-droplets-BG_05.png) no-repeat top, url(/images/product/probiotic/new/twotaste-BG.webp) no-repeat center 80%/700px, url(/images/product/probiotic/new/blue-BG.webp) no-repeat left/contain, url(/images/product/probiotic/new/lemon-BG.webp) no-repeat right/contain, var(--twotasteBG);
  }
}
@media (min-width: 768px) {
  #taste {
    padding-top: 320px;
  }
}
@media (min-width: 992px) {
  #taste {
    padding-top: 340px;
  }
}
#taste .bg-view-btn {
  bottom: 6vh;
}
@media (min-width: 768px) {
  #taste .bg-view-btn {
    bottom: 7vh;
  }
}
#taste .viewbtn {
  padding-top: 0;
}
#taste .allIn {
  grid-template-columns: 100%;
}
#taste .allIn .h2-l, #taste .allIn .h2-m {
  letter-spacing: 6px;
  text-indent: 6px;
}
@media (min-width: 768px) {
  #taste .allIn .h2-l, #taste .allIn .h2-m {
    letter-spacing: 10px;
    text-indent: 10px;
  }
}
#taste .allIn .h2-l {
  font-size: 60px;
}
@media (min-width: 768px) {
  #taste .allIn .h2-l {
    font-size: 90px;
  }
}
#taste .allIn .h2-m {
  vertical-align: super;
}
@media (min-width: 768px) {
  #taste .allIn .h2-m {
    font-size: 60px;
  }
}
#taste .allIn .h2-s-song {
  font-size: 22px;
  letter-spacing: 3px;
}
@media (min-width: 768px) {
  #taste .allIn .h2-s-song {
    font-size: 28px;
    letter-spacing: 5px;
  }
}
#taste .allIn .h2-titlle-style {
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  #taste .allIn .h2-titlle-style {
    margin-bottom: 3.5rem;
  }
}
#taste .allIn .titleArea {
  position: relative;
}
#taste .allIn .titleArea .dot-circle {
  --point00000W:80%;
  position: absolute;
  top: 40%;
  width: var(--point00000W);
  left: calc(50% - var(--point00000W) / 2);
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
}
@media (min-width: 768px) {
  #taste .allIn .titleArea .dot-circle {
    --point00000W:600px;
    top: 10%;
  }
}
#taste .allIn .title-darks, #taste .allIn .gradient-color {
  color: transparent;
  background: linear-gradient(135deg, rgb(231, 231, 231) 0%, rgb(255, 255, 255) 50%, rgb(235, 245, 202) 60%, rgb(253, 253, 253) 65%);
  -webkit-background-clip: text;
          background-clip: text;
}
#taste .allIn .gradient-txt {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, rgb(193, 193, 193)), color-stop(50%, rgb(250, 250, 245)), color-stop(95%, rgb(193, 193, 193)));
  background: linear-gradient(to bottom, rgb(193, 193, 193) 5%, rgb(250, 250, 245) 50%, rgb(193, 193, 193) 95%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 2px transparent;
}
@media (min-width: 768px) {
  #taste .allIn .gradient-txt {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(15%, rgb(218, 218, 218)), color-stop(50%, rgb(250, 250, 245)), color-stop(85%, rgb(218, 218, 218)));
    background: linear-gradient(to bottom, rgb(218, 218, 218) 15%, rgb(250, 250, 245) 50%, rgb(218, 218, 218) 85%);
    -webkit-background-clip: text;
    -webkit-text-stroke: 4px transparent;
  }
}
@media (min-width: 992px) {
  #taste {
    --circleW: 290px;
  }
}
#taste .twoTaste {
  position: relative;
  margin-top: -1rem;
}
@media (min-width: 768px) {
  #taste .twoTaste {
    margin-top: -4.5rem;
  }
}
#taste .twoTaste .foilpack {
  position: absolute;
  width: 36%;
  top: 15%;
  left: 32%;
  z-index: 5;
}
@media (min-width: 768px) {
  #taste .twoTaste .foilpack {
    width: var(--foilW);
    left: calc(50% - var(--foilW) / 2);
  }
}
#taste .taste-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 23%;
  margin: auto;
}
@media (min-width: 768px) {
  #taste .taste-grid {
    gap: calc(var(--foilW) + 10%);
    max-width: calc(var(--circleW) + var(--foilW) + var(--circleW));
  }
}
#taste .circle, #taste .circle p, #taste .h2-s-song, #taste .smaller, #taste .madeIn p {
  font-family: "Shippori Mincho", serif;
}
#taste .circle p, #taste .smaller, #taste .madeIn p {
  font-weight: 600;
}
#taste .circle, #taste .madeIn, #taste .circle-bg {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-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;
  aspect-ratio: 1/1;
  color: #4f3321;
}
#taste .circle {
  width: min(98%, var(--circleW));
  border-radius: 99em;
}
#taste .circle .h2-s-song {
  line-height: 1.5;
  letter-spacing: 0.5px;
}
@media (min-width: 768px) {
  #taste .circle .h2-s-song {
    font-size: 32px;
  }
}
#taste .circle .line {
  width: min(80%, 165px);
  height: 16px;
  background: url(/images/product/probiotic/new/0000-2.svg) no-repeat center/contain;
}
@media (min-width: 768px) {
  #taste .circle .line {
    height: 32px;
  }
}
#taste .circle p {
  font-size: 17px;
  line-height: 1.3;
}
@media (min-width: 768px) {
  #taste .circle p {
    font-size: 24px;
  }
}
#taste .circle .smaller {
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}
@media (min-width: 768px) {
  #taste .circle .smaller {
    font-size: 20px;
  }
}
#taste .original, #taste .lemon, #taste .vanlia {
  position: relative;
  text-align: center;
}
#taste .original .img-group, #taste .lemon .img-group, #taste .vanlia .img-group {
  position: absolute;
  z-index: 5;
}
#taste .original .circle, #taste .vanlia .circle, #taste .lemon .circle {
  padding: 3px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(208, 202, 140)), color-stop(51%, rgb(255, 255, 255)), to(rgb(208, 202, 140)));
  background-image: linear-gradient(to bottom, rgb(208, 202, 140) 0%, rgb(255, 255, 255) 51%, rgb(208, 202, 140) 100%);
}
@media (min-width: 768px) {
  #taste .original .circle, #taste .vanlia .circle, #taste .lemon .circle {
    padding: 5px;
  }
}
#taste .original .circle-bg, #taste .vanlia .circle-bg, #taste .lemon .circle-bg {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
#taste .original .circle, #taste .vanlia .circle {
  margin-top: 150%; /**/
  background-color: #cfeef4;
  -webkit-box-shadow: rgba(82, 205, 246, 0.0901960784) 0px 1px 1px 0px inset, rgba(75, 190, 229, 0.2901960784) 0px 50px 100px -20px, rgba(63, 161, 193, 0.3568627451) 0px 30px 60px -30px;
          box-shadow: rgba(82, 205, 246, 0.0901960784) 0px 1px 1px 0px inset, rgba(75, 190, 229, 0.2901960784) 0px 50px 100px -20px, rgba(63, 161, 193, 0.3568627451) 0px 30px 60px -30px;
}
#taste .original .circle .circle-bg, #taste .vanlia .circle .circle-bg {
  background: linear-gradient(145deg, rgb(241, 238, 209) 20%, rgb(249, 247, 234) 30%, rgb(241, 238, 209) 50%);
}
#taste .original img:nth-child(1) {
  margin-top: 25%;
  width: 90%;
}
#taste .original img:nth-child(2) {
  margin-top: -15%;
  width: 95%;
}
#taste .original img:nth-child(3) {
  margin-top: -35%;
}
@media (min-width: 768px) {
  #taste .original img:nth-child(3) {
    margin-top: -25%;
  }
}
#taste .original.bg-lazyload {
  background: url(/images/product/probiotic/new/original-shadow.png) no-repeat center 40%/contain;
}
#taste .original .madeIn.bg-lazyload {
  background: url(/images/product/probiotic/new/cookie_04.png) no-repeat center/contain;
}
#taste .vanlia .vanlia-img {
  position: relative;
}
#taste .vanlia .vanlia-img img:nth-child(1) {
  margin-top: 55%;
  width: 55px;
  margin-right: 50%;
}
#taste .vanlia .vanlia-img img:nth-child(2) {
  margin-top: -30%;
  width: 95%;
}
#taste .vanlia .vanlia-img img:nth-child(3) {
  margin-top: -38%;
}
#taste .vanlia .vanlia-img img:nth-child(4) {
  position: absolute;
  left: 0;
  margin-top: -38%;
}
#taste .vanlia .vanlia-img img:nth-child(5) {
  position: absolute;
  left: 0px;
  margin-top: -10%;
  width: 84%;
  margin-left: 6%;
}
@media (min-width: 768px) {
  #taste .vanlia .vanlia-img img:nth-child(1) {
    margin-top: 55%;
    width: 90px;
    margin-right: 50%;
  }
  #taste .vanlia .vanlia-img img:nth-child(2) {
    width: 100%;
  }
  #taste .vanlia .vanlia-img img:nth-child(5) {
    position: absolute;
    left: -10px;
    margin-top: -10%;
  }
}
#taste .vanlia.bg-lazyload {
  background: url(/images/product/probiotic/new/vanilla-shadow.png) no-repeat center 40%/contain;
}
#taste .vanlia .madeIn {
  position: relative;
}
#taste .vanlia .madeIn.bg-lazyload {
  background: url(/images/product/probiotic/new/cookie_04-2.png) no-repeat center/contain;
}
#taste .vanlia .circle {
  position: relative;
}
#taste .vanlia .circle .organic-icon {
  position: absolute;
  width: 26%;
  left: 0;
  top: 0;
  z-index: 5;
}
@media (min-width: 768px) {
  #taste .vanlia .circle .organic-icon {
    left: -30px;
    top: 45px;
  }
}
@media (min-width: 992px) {
  #taste .vanlia .circle .organic-icon {
    width: 70.08px;
  }
}
#taste .lemon {
  margin-top: calc(var(--Ocircle) - var(--Lcircle)); /*補回等高*/
}
#taste .lemon.bg-lazyload {
  background: url(/images/product/probiotic/new/lemon-shadow.png) no-repeat center 40%/contain;
}
#taste .lemon img:nth-child(1) {
  margin-top: 25%;
}
#taste .lemon img:nth-child(2) {
  margin-top: -33%;
}
@media (min-width: 768px) {
  #taste .lemon img:nth-child(1) {
    margin-top: 18%;
  }
  #taste .lemon img:nth-child(2) {
    margin-top: -23%;
  }
}
#taste .lemon .circle {
  position: relative;
  margin-top: 143%;
  -webkit-box-shadow: rgba(92, 190, 87, 0.3607843137) 0px 1px 1px 0px inset, rgba(62, 148, 57, 0.4588235294) 0px 50px 100px -20px, rgba(53, 120, 50, 0.6) 0px 30px 60px -30px;
          box-shadow: rgba(92, 190, 87, 0.3607843137) 0px 1px 1px 0px inset, rgba(62, 148, 57, 0.4588235294) 0px 50px 100px -20px, rgba(53, 120, 50, 0.6) 0px 30px 60px -30px;
}
#taste .lemon .circle .circle-bg {
  background: linear-gradient(145deg, rgb(224, 239, 194) 20%, rgb(241, 255, 230) 30%, rgb(224, 239, 194) 50%);
}
#taste .lemon .circle .organic-icon {
  position: absolute;
  top: 0;
  left: 5%;
  margin-top: -5%;
  width: 26%;
}
@media (min-width: 768px) {
  #taste .lemon .circle .organic-icon {
    top: 0;
    left: 1%;
    margin-top: 0;
  }
}
@media (min-width: 992px) {
  #taste .lemon .circle .organic-icon {
    width: 70.08px;
  }
}
#taste .lemon .madeIn {
  position: relative;
}
#taste .lemon .madeIn.bg-lazyload {
  background: url(/images/product/probiotic/new/lemon_05.png) no-repeat center/contain;
}
#taste .madeIn {
  width: min(70%, 158px);
  margin: auto;
  margin-top: -1vh;
  padding-top: 1.4vh;
}
@media (min-width: 768px) {
  #taste .madeIn {
    margin-top: -2vh;
  }
}
#taste .madeIn p {
  text-align: center;
  line-height: 1.2;
}
@media (min-width: 576px) {
  #taste .madeIn p {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
  }
}
#taste .madeIn .smaller {
  letter-spacing: 0;
  font-size: 12px;
}
@media (min-width: 576px) {
  #taste .madeIn .smaller {
    font-size: 16px;
  }
}
#taste .viewbtn {
  --expanded: 110px;
}
@media (min-width: 768px) {
  #taste .viewbtn {
    --expanded: 135px;
  }
}

.ad {
  background-color: #d4ebf9;
  background-image: -webkit-gradient(linear, right top, left top, from(#d4ebf9), color-stop(50%, #fff), to(#d4ebf9));
  background-image: linear-gradient(270deg, #d4ebf9 0%, #fff 50%, #d4ebf9 100%);
}
@media (min-width: 768px) {
  .ad {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d4ebf9), color-stop(50%, #fff), to(#d4ebf9));
    background-image: linear-gradient(180deg, #d4ebf9 0%, #fff 50%, #d4ebf9 100%);
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  .ad {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #d4ebf9), color-stop(50%, #fff), color-stop(80%, #d4ebf9));
    background-image: linear-gradient(180deg, #d4ebf9 10%, #fff 50%, #d4ebf9 80%);
  }
}
.ad .warp {
  display: grid;
  grid-template-columns: 1fr;
  padding: 70px 0 75px 0;
  text-align: center;
}
@media (min-width: 576px) {
  .ad .warp {
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) {
  .ad .warp {
    gap: 0;
    width: min(90%, 1050px);
    margin: auto;
  }
}
@media (min-width: 992px) {
  .ad .warp {
    padding: 100px 0;
    width: min(80%, 1050px);
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  .ad .warp {
    padding: 80px 0;
  }
}
.ad .warp .text {
  font-family: "Outfit", sans-serif;
  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;
  margin-bottom: 8px;
  font-size: 110px;
  font-weight: 400;
  color: transparent;
  line-height: 1;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #d0ca8c), color-stop(70%, #a67e17));
  background: linear-gradient(to bottom, #d0ca8c 30%, #a67e17 70%);
  -webkit-background-clip: text;
          background-clip: text;
}
@media (min-width: 576px) {
  .ad .warp .text {
    margin-bottom: 0px;
    font-size: min(10vw, 130px);
  }
}
.ad .warp .text span {
  font-size: 16px;
  text-align: center;
  color: #c7bd99;
  line-height: 1.5;
  letter-spacing: 3px;
  display: block;
}
.ad .warp .award {
  width: 90%;
  margin: auto;
  text-align: center;
}
@media (min-width: 576px) {
  .ad .warp .award {
    width: min(100%, 390px);
  }
}

@media screen and (max-width: 576px) {
  #dataChart .h2-m, #heart-scroll .h2-m, #Certification .h2-m {
    font-size: 32px;
    margin-bottom: 5px;
    letter-spacing: 3px;
    text-indent: 5px;
  }
}
@media (min-width: 768px) {
  #dataChart .h2-m, #heart-scroll .h2-m, #Certification .h2-m {
    letter-spacing: 8px;
    text-indent: 8px;
  }
}

#dataChart {
  padding-bottom: calc(12vh + 6rem);
}
#dataChart.bg-lazyload {
  background: radial-gradient(circle at -30% 0%, #c9f4f9 0, rgba(213, 220, 221, 0) 30%), radial-gradient(circle at 130% 0%, #c7dfff 0, rgba(213, 220, 221, 0) 30%), url(/images/product/probiotic/new/chart-BG02.jpg) no-repeat center 18%/717px auto, #edeef0;
}
@media (min-width: 768px) {
  #dataChart.bg-lazyload {
    background: radial-gradient(circle at 0% 0%, #cedce7 0, rgba(213, 220, 221, 0) 35%), radial-gradient(circle at 100% 0%, #cedce7 0, rgba(213, 220, 221, 0) 35%), url(/images/product/probiotic/new/chart-BG02.jpg) no-repeat 70% 20%/1150px, #edeef0;
  }
}
#dataChart .viewbtn {
  --expanded: 150px;
}
@media (min-width: 768px) {
  #dataChart .viewbtn {
    --expanded: 165px;
  }
}

/*實業數據頁+跳出頁共用*/
#dataChart .chartAll .twochart, #more-dataNum .chartAll .twochart {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  width: 80%;
  margin: auto;
}
@media (min-width: 768px) {
  #dataChart .chartAll .twochart, #more-dataNum .chartAll .twochart {
    grid-template-columns: 1fr 1fr;
    width: min(80%, 867px);
    gap: 1rem 90px;
  }
}
#dataChart .chartAll .twochart .chart, #more-dataNum .chartAll .twochart .chart {
  width: 100%;
  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;
}
@media (min-width: 768px) {
  #dataChart .chartAll .twochart .chart, #more-dataNum .chartAll .twochart .chart {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  #dataChart .chartAll .twochart .chart:nth-child(2), #more-dataNum .chartAll .twochart .chart:nth-child(2) {
    margin-top: 65px;
  }
}
#dataChart .chartAll .twochart .chart .banner1, #dataChart .chartAll .twochart .chart .banner2, #more-dataNum .chartAll .twochart .chart .banner1, #more-dataNum .chartAll .twochart .chart .banner2 {
  position: relative;
  padding: 8px 20px;
  color: #0e3844;
  font-size: 22px;
  font-weight: 500;
}
@media (min-width: 768px) {
  #dataChart .chartAll .twochart .chart .banner1, #dataChart .chartAll .twochart .chart .banner2, #more-dataNum .chartAll .twochart .chart .banner1, #more-dataNum .chartAll .twochart .chart .banner2 {
    font-size: 24px;
  }
}
#dataChart .chartAll .twochart .chart .banner1::before, #dataChart .chartAll .twochart .chart .banner2::before, #more-dataNum .chartAll .twochart .chart .banner1::before, #more-dataNum .chartAll .twochart .chart .banner2::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  bottom: -11px;
  left: 0;
  border-style: solid;
  border-width: 0 25px 11px 0;
}
#dataChart .chartAll .twochart .chart .banner1 span, #dataChart .chartAll .twochart .chart .banner2 span, #more-dataNum .chartAll .twochart .chart .banner1 span, #more-dataNum .chartAll .twochart .chart .banner2 span {
  font-weight: 400;
}
@media (min-width: 768px) {
  #dataChart .chartAll .twochart .chart .banner1 span, #dataChart .chartAll .twochart .chart .banner2 span, #more-dataNum .chartAll .twochart .chart .banner1 span, #more-dataNum .chartAll .twochart .chart .banner2 span {
    font-size: 18px;
    font-weight: 600;
  }
}
#dataChart .chartAll .twochart .chart .banner1, #more-dataNum .chartAll .twochart .chart .banner1 {
  background-color: #2dc8f6;
}
#dataChart .chartAll .twochart .chart .banner1::before, #more-dataNum .chartAll .twochart .chart .banner1::before {
  border-color: transparent #18a5d2 transparent transparent;
}
#dataChart .chartAll .twochart .chart .banner2, #more-dataNum .chartAll .twochart .chart .banner2 {
  background-color: #468bf3;
}
#dataChart .chartAll .twochart .chart .banner2::before, #more-dataNum .chartAll .twochart .chart .banner2::before {
  border-color: transparent #3a77d2 transparent transparent;
}
#dataChart .chartAll .twochart .chart .banner2 i, #more-dataNum .chartAll .twochart .chart .banner2 i {
  font-style: normal;
}
#dataChart .chartAll .twochart .chart .shape-position, #more-dataNum .chartAll .twochart .chart .shape-position {
  position: relative;
}
#dataChart .chartAll .twochart .chart img, #more-dataNum .chartAll .twochart .chart img {
  margin-top: 30px;
  -webkit-box-shadow: 3px 10px 15px rgba(64, 70, 73, 0.1607843137);
          box-shadow: 3px 10px 15px rgba(64, 70, 73, 0.1607843137);
}
#dataChart .chartAll .twochart .chart .shape-1, #dataChart .chartAll .twochart .chart .shape-2, #more-dataNum .chartAll .twochart .chart .shape-1, #more-dataNum .chartAll .twochart .chart .shape-2 {
  position: relative;
  width: 13.2%;
  height: 55%;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#2dc8f6), to(#0c5d78));
  background-image: linear-gradient(180deg, #2dc8f6 0%, #0c5d78 100%);
  position: absolute;
  bottom: 13.5vw;
  border-radius: 5px 5px 0 0;
  left: 58%;
}
#dataChart .chartAll .twochart .chart .shape-1::before, #dataChart .chartAll .twochart .chart .shape-2::before, #more-dataNum .chartAll .twochart .chart .shape-1::before, #more-dataNum .chartAll .twochart .chart .shape-2::before {
  --down-iconsize:20vw;
  position: absolute;
  content: "";
  width: var(--down-iconsize);
  aspect-ratio: 1/1;
  top: calc(var(--down-iconsize) * -1);
  right: calc(var(--down-iconsize) * -0.77);
}
@media (min-width: 768px) {
  #dataChart .chartAll .twochart .chart .shape-1::before, #dataChart .chartAll .twochart .chart .shape-2::before, #more-dataNum .chartAll .twochart .chart .shape-1::before, #more-dataNum .chartAll .twochart .chart .shape-2::before {
    --down-iconsize:90px;
  }
}
#dataChart .chartAll .twochart .chart .shape-1, #more-dataNum .chartAll .twochart .chart .shape-1 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#2dc8f6), to(#0c5d78));
  background-image: linear-gradient(180deg, #2dc8f6 0%, #0c5d78 100%);
}
@media (min-width: 768px) {
  #dataChart .chartAll .twochart .chart .shape-1, #more-dataNum .chartAll .twochart .chart .shape-1 {
    bottom: 15%;
    height: 49%;
  }
}
#dataChart .chartAll .twochart .chart .shape-1::before, #more-dataNum .chartAll .twochart .chart .shape-1::before {
  background: url(/images/product/probiotic/down-txt.png) no-repeat center/contain;
}
#dataChart .chartAll .twochart .chart .shape-2, #more-dataNum .chartAll .twochart .chart .shape-2 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#468bf3), to(#1f4278));
  background-image: linear-gradient(180deg, #468bf3 0%, #1f4278 100%);
}
@media (min-width: 768px) {
  #dataChart .chartAll .twochart .chart .shape-2, #more-dataNum .chartAll .twochart .chart .shape-2 {
    bottom: 15%;
    height: 58%;
  }
}
#dataChart .chartAll .twochart .chart .shape-2::before, #more-dataNum .chartAll .twochart .chart .shape-2::before {
  background: url(/images/product/probiotic/down-txt02.png) no-repeat center/contain;
}
#dataChart .chartAll .ps, #more-dataNum .chartAll .ps {
  font-size: 1rem;
  color: #35c6f2;
  margin-top: 40px;
  margin-bottom: 20px;
  text-align: center;
}

@media (min-width: 768px) {
  #more-dataNum .chartAll .twochart .chart .banner1 {
    font-size: 24px !important;
  }
}

#free10 .h2-titlle-style, #free10 .h2-s-black, #age-group .h2-titlle-style, #age-group .h2-s-black, #Ingredients .h2-titlle-style, #Ingredients .h2-s-black, #Ingredients .h2-titlle-style, #Ingredients .h2-s-black, #comparison .h2-titlle-style, #comparison .h2-s-black, #qa .h2-titlle-style, #qa .h2-s-black {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

/*這些頁因PC版沒有分2攔的改寫*/
#Certification .h2-titlle-style, #free10 .h2-titlle-style {
  margin-bottom: 2.8rem;
}
#Certification .h2-s-black, #free10 .h2-s-black {
  margin-bottom: 3rem;
  text-align: center;
  color: #68aabe;
}

/*SGS認證頁*/
#Certification {
  display: block;
}
#Certification.bg-lazyload {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgb(255, 255, 255) 100%), linear-gradient(170deg, rgba(181, 219, 225, 0) 30%, rgba(181, 219, 225, 0) 60%, #d7ecef 60%), url(/images/product/probiotic/new/food-bg.jpg) center/cover no-repeat;
}
@media (min-width: 768px) {
  #Certification.bg-lazyload {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgb(255, 255, 255) 100%), linear-gradient(170deg, rgba(181, 219, 225, 0) 30%, rgba(181, 219, 225, 0) 60%, #d7ecef 60%), url(/images/product/probiotic/new/food-bg.jpg) center/cover no-repeat;
  }
}
@media (min-width: 768px) {
  #Certification {
    padding-bottom: 4rem;
    padding-top: 8rem;
  }
}
@media screen and (max-width: 576px) {
  #Certification .h2-titlle-style {
    margin-bottom: 1.8rem;
  }
}
#Certification .certification-box {
  width: 100%;
}
#Certification .certification-box__img {
  position: relative;
  aspect-ratio: 1/1.14;
}
#Certification .certification-box__img.bg-lazyload {
  background: url(/images/product/probiotic/new/food-foil-mobile.webp) top center/130% no-repeat;
}
@media (min-width: 768px) {
  #Certification .certification-box__img.bg-lazyload {
    background: url(/images/product/probiotic/new/food-foil-PC.webp) top center/725px no-repeat;
  }
}
@media (min-width: 768px) {
  #Certification .certification-box__img {
    margin: auto;
    aspect-ratio: auto;
    height: 550px;
  }
}
#Certification .certification-box__img .more {
  position: absolute;
  right: 0;
  bottom: 7%;
}
@media (min-width: 768px) {
  #Certification .certification-box__img .more {
    bottom: 80px;
  }
}
@media (min-width: 1480px) {
  #Certification .certification-box__img .more {
    display: none;
  }
}
#Certification .certification-box .certification-swiper-wride {
  padding-left: 2rem;
}
@media screen and (max-width: 1479px) {
  #Certification .certification-box .certification-swiper-wride .c-swiper-pagination {
    margin-bottom: 1rem;
    text-align: center;
  }
  #Certification .certification-box .certification-swiper-wride .c-swiper-pagination .swiper-pagination-bullet, #Certification .certification-box .certification-swiper-wride .c-swiper-pagination .swiper-pagination-bullet-active {
    width: 12px;
    height: 12px;
  }
  #Certification .certification-box .certification-swiper-wride .c-swiper-pagination .swiper-pagination-bullet {
    background: #ffffff;
    border: 4px solid #35c6f2;
  }
  #Certification .certification-box .certification-swiper-wride .c-swiper-pagination .swiper-pagination-bullet-active {
    background: #2b9dc0;
    border: 3px solid #35c6f2;
  }
}
@media (min-width: 1480px) {
  #Certification .certification-box .certification-swiper-wride {
    width: min(100%, 1460px);
    margin: auto;
    padding-left: 0;
    /*PC版1046後斜使用*/
  }
  #Certification .certification-box .certification-swiper-wride .swiper-wrapper {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  #Certification .certification-box .certification-swiper-wride .certification-list__item {
    --bottomHeight:1.8rem;
  }
  #Certification .certification-box .certification-swiper-wride .certification-list__item.pc-show {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  #Certification .certification-box .certification-swiper-wride .certification-list__item a {
    display: inline-block;
  }
  #Certification .certification-box .certification-swiper-wride .certification-list__item a:hover .certification-list__item__img p {
    background-color: rgba(107, 232, 243, 0.7);
    Box-shadow: 0px 0px 30px 0px #71d7e7 inset, 5px 5px 10px rgba(28, 160, 181, 0.68);
  }
  #Certification .certification-box .certification-swiper-wride .certification-list__item a:hover .certification-list__item__img p span::after {
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-name: linkarrow;
            animation-name: linkarrow;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
  #Certification .certification-box .certification-swiper-wride .certification-list__item:nth-child(2) a {
    margin-bottom: var(--bottomHeight);
  }
  #Certification .certification-box .certification-swiper-wride .certification-list__item:nth-child(3) a {
    margin-bottom: calc(var(--bottomHeight) * 2);
  }
  #Certification .certification-box .certification-swiper-wride .certification-list__item:nth-child(4) a {
    margin-bottom: calc(var(--bottomHeight) * 3);
  }
  #Certification .certification-box .certification-swiper-wride .certification-list__item:nth-child(5) a {
    margin-bottom: calc(var(--bottomHeight) * 4);
  }
  #Certification .certification-box .certification-swiper-wride .certification-list__item:nth-child(6) a {
    margin-bottom: calc(var(--bottomHeight) * 5);
  }
}
#Certification .certification-box .Certification-Swiper {
  margin-top: -50px;
}
@media (min-width: 768px) {
  #Certification .certification-box .Certification-Swiper {
    margin-top: -100px;
  }
}
@media (min-width: 1480px) {
  #Certification .certification-box .Certification-Swiper {
    margin-top: -200px;
    padding-top: 100px;
  }
}
#Certification .certification-list__item {
  width: 228px;
}
#Certification .certification-list__item p {
  text-align: center;
  color: #64a6b9;
  font-size: 1.12rem;
  font-weight: 500;
}
#Certification .certification-list__item .text {
  font-family: "Shippori Mincho", serif;
  font-size: 1.6rem;
  color: #455e65;
  font-weight: 600;
  letter-spacing: 4px;
}
#Certification .certification-list__item__img {
  position: relative;
  width: 228px;
  height: 292px;
  margin-bottom: 1rem;
  -webkit-box-shadow: 1px 0px rgba(49, 63, 66, 0.2), 0px 1px rgba(49, 63, 66, 0.7), 7px 7px 10px rgba(109, 115, 117, 0.5882352941);
          box-shadow: 1px 0px rgba(49, 63, 66, 0.2), 0px 1px rgba(49, 63, 66, 0.7), 7px 7px 10px rgba(109, 115, 117, 0.5882352941);
}
#Certification .certification-list__item__img p {
  position: absolute;
  right: 0;
  bottom: 15px;
  padding: 10px 0;
  width: 90%;
  font-size: 1rem;
  text-align: center;
  font-weight: 500;
  color: #19363f;
  background-color: rgba(47, 198, 243, 0.7);
  Box-shadow: 0px 0px 30px 0px #33bfe7 inset;
}
#Certification .certification-list__item__img p span {
  letter-spacing: 1px;
  position: relative;
}
#Certification .certification-list__item__img p span::after {
  --arrow-w:13px;
  position: absolute;
  content: "";
  display: inline-block;
  width: var(--arrow-w);
  height: var(--arrow-w);
  top: calc(50% - var(--arrow-w) / 2);
  right: -20px;
  -webkit-mask-image: url(/images/circle-arrow-right-solid.svg);
          mask-image: url(/images/circle-arrow-right-solid.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: cover;
          mask-size: cover;
  background-color: #ffffff;
}
#Certification .certification-list__item__img img {
  width: 100%;
}
#Certification .sgs-part {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: auto;
  width: min(90%, 900px);
  margin-top: 5rem;
}
@media (min-width: 768px) {
  #Certification .sgs-part {
    grid-template-columns: 1.5fr 1fr;
  }
}
#Certification .sgs-part .sgs-card, #Certification .sgs-part .fda-card {
  display: grid;
  padding: 1.5rem;
  border: 6px solid #eff5f7;
  border-radius: 40px;
  background: url(/images/product/probiotic/grid-bg.gif), #fbfbfb;
  -webkit-box-shadow: 0 0 0 6px #c2e8f3, 10px 10px 10px rgba(51, 51, 51, 0.3294117647);
          box-shadow: 0 0 0 6px #c2e8f3, 10px 10px 10px rgba(51, 51, 51, 0.3294117647);
}
@media (min-width: 768px) {
  #Certification .sgs-part .sgs-card, #Certification .sgs-part .fda-card {
    padding: 2rem;
  }
}
#Certification .sgs-part .sgs-card a, #Certification .sgs-part .fda-card a {
  position: relative;
  display: block;
  padding: 10px 0;
  font-size: 1.1rem;
  border-radius: 50em;
  color: #0f3844;
  text-align: center;
}
#Certification .sgs-part .sgs-card a::after, #Certification .sgs-part .fda-card a::after {
  --arrow-w: 13px;
  position: absolute;
  content: "";
  display: inline-block;
  width: var(--arrow-w);
  height: var(--arrow-w);
  top: calc(50% - var(--arrow-w) / 2);
  right: 10%;
  -webkit-mask-image: url(/images/circle-arrow-right-solid.svg);
  mask-image: url(/images/circle-arrow-right-solid.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: #ffffff;
}
#Certification .sgs-part .sgs-card a:hover.blue, #Certification .sgs-part .fda-card a:hover.blue {
  background: #4ab5d5;
}
#Certification .sgs-part .sgs-card a:hover.green, #Certification .sgs-part .fda-card a:hover.green {
  background: #60b736;
}
#Certification .sgs-part .sgs-card a:hover::after, #Certification .sgs-part .fda-card a:hover::after {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-name: linkarrow;
          animation-name: linkarrow;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
#Certification .sgs-part .sgs-card .blue, #Certification .sgs-part .fda-card .blue {
  background: #8cd7f2;
}
#Certification .sgs-part .sgs-card .green, #Certification .sgs-part .fda-card .green {
  background: #b0e199;
}
#Certification .sgs-part .sgs-card .one {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  #Certification .sgs-part .sgs-card .one {
    grid-template-columns: 33% 66%;
  }
}
#Certification .sgs-part .sgs-card .ul-style {
  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;
}
#Certification .sgs-part .sgs-card ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  max-width: 315px;
}
@media screen and (max-width: 576px) {
  #Certification .sgs-part .sgs-card ul {
    margin-left: 0.5rem;
  }
}
#Certification .sgs-part .sgs-card ul li span {
  font-size: 1.1rem;
  border-bottom: 1px #000 solid;
}
#Certification .sgs-part .sgs-card .two {
  margin-top: 1.5rem;
  text-align: center;
}
@media (min-width: 768px) {
  #Certification .sgs-part .sgs-card .two {
    margin-top: 1rem;
  }
}
#Certification .sgs-part .sgs-card .img-35 {
  vertical-align: bottom;
  max-width: 35px;
}
#Certification .sgs-part .sgs-card .img-105 {
  text-align: center;
}
#Certification .sgs-part .sgs-card .img-105 img {
  max-width: 105px;
  padding: 10px 5px 5px 5px;
  text-align: center;
  background-color: #ffffff;
  border-radius: 20px;
  -webkit-box-shadow: 1px 1px 1px rgba(39, 39, 39, 0.1215686275);
          box-shadow: 1px 1px 1px rgba(39, 39, 39, 0.1215686275);
}
#Certification .sgs-part .fda-card .img-bg {
  background-color: #ffffff;
}
#Certification .sgs-part .fda-card .btn a:first-child {
  margin-bottom: 0.5rem;
}

#free10.bg-lazyload {
  background: url(/images/product/probiotic/new/water-bg.jpg) center/800px no-repeat;
}
@media screen and (max-width: 576px) {
  #free10 {
    padding: 3rem 0 5rem 0;
  }
}
@media (min-width: 576px) {
  #free10 {
    padding-top: 4.5rem;
  }
}
#free10 .titleArea .h2-l:first-child {
  padding-left: 18px;
}
#free10 .titleArea .title-blue {
  background: -webkit-gradient(linear, left top, right top, from(rgb(53, 208, 225)), to(rgb(125, 185, 232)));
  background: linear-gradient(to right, rgb(53, 208, 225) 0%, rgb(125, 185, 232) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
#free10 .titleArea .h-hid {
  display: inline-block;
  overflow: hidden;
  vertical-align: sub;
}
#free10 .titleArea .h-hid.h2-l {
  height: 71px;
}
#free10 .titleArea .h-hid.h2-m {
  height: 52px;
}
#free10 .titleArea .h-hid.title-blue {
  color: #35c6f2 !important;
}
@media (min-width: 768px) {
  #free10 .titleArea .h-hid.h2-l {
    height: 104px;
  }
  #free10 .titleArea .h-hid.h2-m {
    height: 71px;
  }
}
#free10 .title-ani-hidden {
  overflow: hidden;
  height: 150px;
}
@media (min-width: 992px) {
  #free10 .title-ani-hidden {
    height: 200px;
  }
}
#free10 .gird-1-2 {
  display: grid;
  grid-template-columns: 1fr;
  width: min(80%, 780px);
  margin: auto;
  text-align: center;
}
@media (min-width: 576px) {
  #free10 .gird-1-2 {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}
#free10 .gird-1-2 ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding-left: 10px;
}
#free10 .gird-1-2 ul li {
  font-size: 1.12rem;
  line-height: 1.5;
  text-align: left;
}
#free10 .gird-1-2 ul li:before {
  content: "";
  padding-left: 25px;
  background: url(/images/product/probiotic/new/xx-icon-blue.svg) center left/10px no-repeat;
}
#free10 .gird-1-2 img {
  width: min(100%, 400px);
}
#free10 .gird-1-2 p {
  margin-bottom: 2rem;
  line-height: 1.8;
}
#free10 .gird-1-2 .box-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 3rem;
}
@media (min-width: 576px) {
  #free10 .gird-1-2 .box-center {
    margin-bottom: 0;
  }
}

#age-group {
  background: -webkit-gradient(linear, left top, left bottom, from(#ebf5f8), color-stop(70%, #ffffff));
  background: linear-gradient(to bottom, #ebf5f8 0%, #ffffff 70%);
}
@media (min-width: 768px) {
  #age-group {
    background: -webkit-gradient(linear, left top, left bottom, from(#ebf5f8), to(#f4fafb));
    background: linear-gradient(to bottom, #ebf5f8 0%, #f4fafb 100%);
  }
}
#age-group .age-group-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 1rem;
  width: 80%;
  margin: auto;
  text-align: center;
  font-size: 1.12rem;
  font-weight: 600;
  color: #6bbbd4;
}
@media (min-width: 576px) {
  #age-group .age-group-grid {
    width: 70%;
    font-size: 1.25rem;
  }
}
@media (min-width: 768px) {
  #age-group .age-group-grid {
    width: min(80%, 500px);
  }
}
@media (min-width: 992px) {
  #age-group .age-group-grid {
    width: min(80%, 960px);
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
  }
  #age-group .age-group-grid li {
    padding-right: 3rem;
    text-align: left;
    background: url(/images/product/probiotic/new/age-bg-1.png) center/contain no-repeat;
  }
  #age-group .age-group-grid li:nth-child(n+1) {
    margin-left: -1.2rem;
  }
  #age-group .age-group-grid li:nth-child(even) img {
    margin-top: 4rem;
  }
}
@media (min-width: 1200px) {
  #age-group .age-group-grid li {
    padding-right: 4rem;
  }
  #age-group .age-group-grid li:nth-child(n+1) {
    margin-left: -1rem;
  }
}
#age-group .age-group-grid li p {
  text-align: center;
}
@media (min-width: 992px) {
  #age-group .age-group-grid li p {
    text-align: left;
  }
}
#age-group .age-group-grid li img {
  height: 109px;
  width: auto;
}
@media (min-width: 576px) {
  #age-group .age-group-grid li img {
    height: 120px;
  }
}
@media (min-width: 768px) {
  #age-group .age-group-grid li img {
    height: 150px;
    margin-bottom: 0.5rem;
  }
}

#Ingredients {
  padding-top: 2rem;
}
@media (min-width: 768px) {
  #Ingredients {
    padding-top: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(#f4fafb), color-stop(50%, #ffffff));
    background: linear-gradient(to bottom, #f4fafb 0%, #ffffff 50%);
  }
}
#Ingredients .allIn {
  width: min(90%, 1300px);
}
#Ingredients .Ingredients-box .gird-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  #Ingredients .Ingredients-box .gird-2 {
    display: none;
  }
}
#Ingredients .Ingredients-box .gird-2 .taste-btn {
  font-family: "Shippori Mincho", serif;
  position: relative;
  padding: 5px 0;
  margin-bottom: 1rem;
  width: 100%;
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.5;
  color: #333333;
  background-color: #dedede;
  border-radius: 99em;
  font-weight: 600;
}
#Ingredients .Ingredients-box .gird-2 .taste-btn.blue.active::after, #Ingredients .Ingredients-box .gird-2 .taste-btn.green.active::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: calc(50% - 4px);
  margin-bottom: 8px;
  border-top: 8px solid #35c6f2;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
#Ingredients .Ingredients-box .gird-2 .taste-btn.blue.active {
  color: #ffffff;
  background-color: #35c6f2;
}
#Ingredients .Ingredients-box .gird-2 .taste-btn.green.active {
  color: #ffffff;
  background-color: #6cd567;
}
#Ingredients .Ingredients-box .gird-2 .taste-btn.green.active::after {
  border-top: 8px solid #6cd567;
}
#Ingredients .Ingredients-box .grid-1-2 {
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (max-width: 576px) {
  #Ingredients .Ingredients-box .grid-1-2 {
    position: relative;
  }
}
@media (min-width: 768px) {
  #Ingredients .Ingredients-box .grid-1-2 {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}
#Ingredients .Ingredients-box .grid-1-2 hr {
  margin: 15px 0;
  height: 1px;
  border: none;
  border-top: 1px dotted #6b6b6b;
}
#Ingredients .Ingredients-box .grid-1-2 sup {
  font-size: 10px;
}
@media screen and (max-width: 576px) {
  #Ingredients .Ingredients-box .grid-1-2 .taste-01.is-show, #Ingredients .Ingredients-box .grid-1-2 .taste-lemon.taste-lemon.is-show {
    opacity: 1;
    margin-top: 0;
    -webkit-transition-property: opacity, margin-top;
    transition-property: opacity, margin-top;
    -webkit-transition-duration: 1s;
            transition-duration: 1s;
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
    visibility: visible;
  }
}
#Ingredients .Ingredients-box .grid-1-2 .taste-01, #Ingredients .Ingredients-box .grid-1-2 .taste-lemon {
  margin-top: 2rem;
  padding: 3rem 1rem;
  border-radius: 50px;
  background-color: #e0eff1;
  -webkit-box-shadow: 3px 3px #d4e4ea;
          box-shadow: 3px 3px #d4e4ea;
  opacity: 0;
}
@media screen and (max-width: 576px) {
  #Ingredients .Ingredients-box .grid-1-2 .taste-01, #Ingredients .Ingredients-box .grid-1-2 .taste-lemon {
    opacity: 0;
    -webkit-transition-property: opacity, margin-top;
    transition-property: opacity, margin-top;
    -webkit-transition-duration: 0.6s;
            transition-duration: 0.6s;
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
  }
}
@media (min-width: 768px) {
  #Ingredients .Ingredients-box .grid-1-2 .taste-01, #Ingredients .Ingredients-box .grid-1-2 .taste-lemon {
    display: block;
    padding: 3rem 4.5vw;
    opacity: 1;
  }
}
#Ingredients .Ingredients-box .grid-1-2 .taste-01.lemon, #Ingredients .Ingredients-box .grid-1-2 .taste-lemon.lemon {
  background-color: #e0eedf;
  -webkit-box-shadow: 3px 3px #cbdfc9;
          box-shadow: 3px 3px #cbdfc9;
}
#Ingredients .Ingredients-box .grid-1-2 .taste-01 h5, #Ingredients .Ingredients-box .grid-1-2 .taste-lemon h5 {
  display: none;
  font-family: "Shippori Mincho", serif;
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: 700;
}
@media (min-width: 768px) {
  #Ingredients .Ingredients-box .grid-1-2 .taste-01 h5, #Ingredients .Ingredients-box .grid-1-2 .taste-lemon h5 {
    display: block;
  }
}
#Ingredients .Ingredients-box .grid-1-2 .taste-01 p, #Ingredients .Ingredients-box .grid-1-2 .taste-lemon p {
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 1.5;
}
#Ingredients .Ingredients-box .grid-1-2 .taste-01 .number-title, #Ingredients .Ingredients-box .grid-1-2 .taste-lemon .number-title {
  display: inline-block;
  margin: 1rem 0 0 0;
  padding: 8px 10px 3px 10px;
  color: #ffffff;
  border-radius: 15px 15px 0 0;
  letter-spacing: 0.5px;
  background: #555555;
}
#Ingredients .Ingredients-box .grid-1-2 .taste-01 .number-box, #Ingredients .Ingredients-box .grid-1-2 .taste-lemon .number-box {
  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: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 8px 10px;
  border: 2px solid #555555;
  border-radius: 0 15px 15px 15px;
}
@media (min-width: 992px) {
  #Ingredients .Ingredients-box .grid-1-2 .taste-01 .number-box, #Ingredients .Ingredients-box .grid-1-2 .taste-lemon .number-box {
    width: 50%;
  }
}
#Ingredients .Ingredients-box .grid-1-2 .taste-01 .number-box .right, #Ingredients .Ingredients-box .grid-1-2 .taste-lemon .number-box .right {
  text-align: right;
}
#Ingredients .Ingredients-box .grid-1-2 .taste-01 .number-box p, #Ingredients .Ingredients-box .grid-1-2 .taste-lemon .number-box p {
  line-height: 1.05;
  font-size: 15px;
}
#Ingredients .Ingredients-box .grid-1-2 .taste-01 .click-btn-box, #Ingredients .Ingredients-box .grid-1-2 .taste-lemon .click-btn-box {
  text-align: right;
}
#Ingredients .Ingredients-box .grid-1-2 .taste-01 .click-btn, #Ingredients .Ingredients-box .grid-1-2 .taste-lemon .click-btn {
  display: inline-block;
  width: 65px;
  height: 65px;
  margin-top: 2rem;
  line-height: 65px;
  color: #ffffff;
  text-align: center;
  background-color: #35c6f2;
  border-radius: 50em;
}
#Ingredients .Ingredients-box .grid-1-2 .taste-01 .click-btn:hover, #Ingredients .Ingredients-box .grid-1-2 .taste-lemon .click-btn:hover {
  background-color: #2a9ec1;
}
#Ingredients .Ingredients-box .grid-1-2 .taste-01 .click-btn.lemon, #Ingredients .Ingredients-box .grid-1-2 .taste-lemon .click-btn.lemon {
  background-color: #6cd567;
}
#Ingredients .Ingredients-box .grid-1-2 .taste-01 .click-btn.lemon:hover, #Ingredients .Ingredients-box .grid-1-2 .taste-lemon .click-btn.lemon:hover {
  background-color: #44ad3f;
}
@media screen and (max-width: 576px) {
  #Ingredients .Ingredients-box .grid-1-2 .taste-lemon {
    position: absolute;
    visibility: hidden;
  }
}

#comparison {
  overflow: auto;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(35%, #ffffff), to(#f6f5f2));
  background: linear-gradient(to bottom, #ffffff 35%, #f6f5f2 100%);
}
@media (min-width: 576px) {
  #comparison {
    padding-top: 2rem;
  }
}
#comparison .comparison_box {
  width: 100%;
  margin-bottom: 1rem;
  text-align: center;
}
@media (min-width: 768px) {
  #comparison .comparison_box {
    width: min(100%, 1130px);
    margin: auto;
  }
}
#comparison .comparison_box .more img {
  width: 8px;
}
#comparison .comparison_box .Comparison-jpg {
  overflow-y: auto;
}
#comparison .comparison_box .Comparison-jpg img {
  height: 80vh;
  width: auto;
}
@media (min-width: 768px) {
  #comparison .comparison_box .Comparison-jpg img {
    width: min(100%, 1111px);
    height: auto;
  }
}
#comparison .more {
  text-align: right;
}
@media (min-width: 768px) {
  #comparison .more {
    display: none;
  }
}

#qa {
  padding-bottom: 150px;
}
@media (min-width: 576px) {
  #qa {
    padding-bottom: 200px;
  }
}
#qa .allIn {
  width: min(85%, 1300px);
}
#qa .qa-list {
  width: 100%;
  margin: auto;
}
@media (min-width: 576px) {
  #qa .qa-list {
    width: min(80%, 800px);
    margin-bottom: 3rem;
  }
}
#qa .qa-list__item {
  position: relative;
  padding: 1rem 0;
  border-top: 1px solid #e5edef;
  font-size: 1.06rem;
  line-height: 1.5;
  letter-spacing: 0.5px;
}
@media (min-width: 576px) {
  #qa .qa-list__item {
    padding: 1.06rem;
  }
}
@media (min-width: 768px) {
  #qa .qa-list__item {
    padding: 1.12rem;
  }
}
#qa .qa-list__item a {
  display: block;
  color: #555555;
}
#qa .qa-list__item a.active .plus-padd .plus-icon span {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  color: #666666;
}
#qa .qa-list__item a.active .plus-padd .plus-icon span:nth-child(2) {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
#qa .qa-list__item a .plus-icon span {
  background-color: #aed8e3;
}
#qa .qa-list__item .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#qa .qa-list__item .q-icon {
  padding-left: 40px;
  font-weight: 500;
}
@media (min-width: 768px) {
  #qa .qa-list__item .q-icon {
    padding-left: 45px;
  }
}
#qa .qa-list__item .q-icon::before {
  display: inline-block;
  content: "Q";
  width: 25px;
  height: 25px;
  margin-left: -40px;
  margin-right: 15px;
  font-family: "Outfit", sans-serif;
  color: #ffffff;
  text-align: center;
  line-height: 25px;
  background-color: #aedeed;
  border-radius: 45%;
}
@media (min-width: 768px) {
  #qa .qa-list__item .q-icon::before {
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin-left: -45px;
  }
}
#qa .qa-list__item .q-icon.ans {
  position: relative;
  display: none;
  margin-top: 1.5rem;
  line-height: 2;
}
@media (min-width: 768px) {
  #qa .qa-list__item .q-icon.ans {
    margin-top: 2rem;
  }
}
#qa .qa-list__item .q-icon.ans::before {
  position: absolute;
  content: "A";
  color: #ffffff;
  background-color: #555555;
}
#qa .qa-list__item .q-icon.ans p {
  margin-bottom: 30px;
}
#qa .qa-list__item .q-icon.ans P, #qa .qa-list__item .q-icon.ans div, #qa .qa-list__item .q-icon.ans li {
  font-size: 1.06rem;
  letter-spacing: 0.5px;
  font-weight: 400;
  color: #555555;
}
#qa .qa-list__item .q-icon.ans ul {
  padding-left: 15px;
}
#qa .qa-list__item .q-icon.ans li {
  list-style-type: disc;
}
#qa .qa-list__item .plus-padd {
  padding-top: 9px;
  padding-left: 15px;
}
#qa .qa-list__item .qa-btn {
  position: relative;
  display: inline-block;
  padding: 0 2rem;
  font-size: 1rem;
  color: #2b5b65;
  background: #e0f3f9;
  letter-spacing: 1px;
  border-radius: 50em;
}
#qa .qa-list__item .qa-btn::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 7px;
  height: 12px;
  right: 15px;
  top: 9px;
  -webkit-mask: url(/images/index/arrow-triangle.svg) no-repeat center center;
          mask: url(/images/index/arrow-triangle.svg) no-repeat center center;
  background-color: #4f6167;
}

#heart-scroll {
  background-color: #dbeaed;
  --max980width:min(90%, 890px);
}
@media (min-width: 768px) {
  #heart-scroll {
    padding-bottom: 5%;
  }
}
@media screen and (max-width: 576px) {
  #heart-scroll .h2-s-black {
    margin-bottom: 0;
  }
}
@media (min-width: 768px) {
  #heart-scroll .h2-m {
    text-indent: 0;
  }
  #heart-scroll .gradient::before {
    text-shadow: -2px 1px 0 #ffffff;
  }
}
#heart-scroll .h2-l {
  margin-bottom: 2rem;
}
@media screen and (max-width: 576px) {
  #heart-scroll .gradient {
    text-indent: 0;
  }
  #heart-scroll .gradient::before {
    text-shadow: 2px 1px 0 #ffffff;
  }
}
#heart-scroll .text-allin {
  width: 100%;
}
#heart-scroll .viewbtn {
  --expanded: 180px;
}
@media (min-width: 992px) {
  #heart-scroll .viewbtn {
    --expanded: 200px;
  }
}
@media screen and (max-width: 576px) {
  #heart-scroll .bg-view-btn {
    bottom: 4vh;
  }
}
#heart-scroll .container-pin {
  padding: 30px 0 30px 0;
  text-align: center;
}
#heart-scroll .container-pin.bg-lazyload {
  background: url(/images/product/probiotic/new/live-BG.jpg) no-repeat center top/900px;
}
@media (min-width: 768px) {
  #heart-scroll .container-pin {
    display: grid;
    padding: 80px 0;
  }
}
#heart-scroll .txt-bg {
  padding: 60px 0 10px 0;
  text-align: center;
}
@media (min-width: 768px) {
  #heart-scroll .txt-bg {
    grid-area: 1/2/2/3;
    margin-right: auto;
    padding: 70px 0 60px 0;
  }
}
#heart-scroll .hidden-W {
  overflow-x: hidden;
}
@media (min-width: 768px) {
  #heart-scroll .hidden-W {
    grid-area: 3/1/4/3;
    overflow-x: clip;
    margin-top: -70px;
  }
}
#heart-scroll .zzz-img {
  opacity: 0;
  position: relative;
  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: 100%;
  text-align: center;
  aspect-ratio: 1/0.8;
}
#heart-scroll .zzz-img.bg-lazyload {
  background: url(/images/product/probiotic/new/zzzP-BG03.png) no-repeat center/130%;
}
#heart-scroll .zzz-img.bg-lazyload::before {
  background: url(/images/product/probiotic/new/cloud-rota_03.png) no-repeat 44% center/83%;
}
@media (min-width: 768px) {
  #heart-scroll .zzz-img.bg-lazyload::before {
    background: url(/images/product/probiotic/new/cloud-rota_03.png) no-repeat 44% center/330px;
  }
}
@media (min-width: 992px) {
  #heart-scroll .zzz-img.bg-lazyload::before {
    background: url(/images/product/probiotic/new/cloud-rota_03.png) no-repeat 44% center/350px;
  }
}
#heart-scroll .zzz-img.bg-lazyload::after {
  background: url(/images/product/probiotic/new/zzz-halo_03.png) no-repeat center/83.5%;
}
@media (min-width: 768px) {
  #heart-scroll .zzz-img.bg-lazyload::after {
    background: url(/images/product/probiotic/new/zzz-halo_03.png) no-repeat center/330px;
  }
}
@media (min-width: 768px) {
  #heart-scroll .zzz-img {
    grid-area: 1/1/1/1;
    width: 400px;
    margin-left: auto;
  }
}
@media (min-width: 992px) {
  #heart-scroll .zzz-img {
    margin-top: 2rem;
  }
}
#heart-scroll .zzz-img::before, #heart-scroll .zzz-img::after { /*背景圖*/
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}
#heart-scroll .zzz-img::before { /*背景圖*/
  -webkit-animation-name: cloudrota;
          animation-name: cloudrota;
  -webkit-animation-duration: 9.2s;
          animation-duration: 9.2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
#heart-scroll .zzz-img::after { /*背景圖*/
  -webkit-animation-name: haloopacty;
          animation-name: haloopacty;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
#heart-scroll .zzz-img__size { /*lottie菌的尺寸*/
  width: 170px;
  margin: auto;
}
@media (min-width: 768px) {
  #heart-scroll .zzz-img__size {
    width: min(80%, 150px);
  }
}
#heart-scroll .three-icon {
  z-index: 5;
  position: relative;
  margin-bottom: -60px;
  margin-top: -50px;
}
@media (min-width: 768px) {
  #heart-scroll .three-icon {
    grid-area: 2/1/3/3;
    width: var(--max980width);
    margin: auto;
  }
}
#heart-scroll .three-icon ul {
  position: relative;
}
@media (min-width: 768px) {
  #heart-scroll .three-icon ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
#heart-scroll .three-icon ul li {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  #heart-scroll .three-icon ul li {
    position: relative;
  }
}
#heart-scroll .three-icon ul li .step {
  width: 52px;
  margin-left: -52px;
}
@media screen and (max-width: 576px) {
  #heart-scroll .three-icon ul li .icon {
    width: 160px;
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
    -webkit-animation-name: icon3move;
            animation-name: icon3move;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
@media (min-width: 768px) {
  #heart-scroll .three-icon ul li .icon {
    width: 164px;
  }
}
@media screen and (max-width: 576px) {
  #heart-scroll .three-icon ul li.step1-icon, #heart-scroll .three-icon ul li.step2-icon, #heart-scroll .three-icon ul li.step3-icon {
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    transition-property: opacity, transform, -webkit-transform;
    -webkit-transition-timing-function: cubic-bezier(0.15, 0, 0, 1);
            transition-timing-function: cubic-bezier(0.15, 0, 0, 1);
    -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
  }
}
#heart-scroll .three-icon ul li.step1-icon {
  position: relative;
  left: auto;
  top: auto;
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
#heart-scroll .three-icon ul li.step1-icon.is-hidden {
  opacity: 0;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
#heart-scroll .three-icon ul li.step2-icon, #heart-scroll .three-icon ul li.step3-icon {
  opacity: 0;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}
@media (min-width: 768px) {
  #heart-scroll .three-icon ul li.step2-icon, #heart-scroll .three-icon ul li.step3-icon {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
#heart-scroll .three-icon ul li.step2-icon.active, #heart-scroll .three-icon ul li.step3-icon.active {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
#heart-scroll .horizontal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
@media (min-width: 768px) {
  #heart-scroll .horizontal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    width: var(--max980width);
    margin: auto;
  }
}
#heart-scroll .horizontal .onebox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  padding: 80px 0 40px 0;
  text-align: center;
}
#heart-scroll .horizontal .onebox:first-child.bg-lazyload {
  background: linear-gradient(to right, rgb(219, 234, 237) 0%, rgba(219, 234, 237, 0) 100px), url(/images/product/probiotic/new/W-wave03_01.png) no-repeat left top/100%;
}
#heart-scroll .horizontal .onebox:first-child .subject {
  background-color: #86d1e7;
}
#heart-scroll .horizontal .onebox:first-child .arrow {
  background-color: #00a7b1;
}
#heart-scroll .horizontal .onebox:first-child .arrow::before {
  border-left: 30px solid #00a7b1;
}
#heart-scroll .horizontal .onebox:nth-child(2).bg-lazyload {
  background: url(/images/product/probiotic/new/W-wave03_02.png) no-repeat left top/100%;
}
#heart-scroll .horizontal .onebox:nth-child(2) .subject {
  background-color: #9597f3;
}
#heart-scroll .horizontal .onebox:nth-child(2) .arrow {
  background-color: #4587d3;
}
#heart-scroll .horizontal .onebox:nth-child(2) .arrow::before {
  border-left: 30px solid #4587d3;
}
#heart-scroll .horizontal .onebox:nth-child(3).bg-lazyload {
  background: linear-gradient(to left, rgb(219, 234, 237) 0%, rgba(219, 234, 237, 0) 100px), url(/images/product/probiotic/new/W-wave03_03.png) no-repeat left top/100%;
}
#heart-scroll .horizontal .onebox:nth-child(3) .subject {
  background-color: #5196f4;
}
#heart-scroll .horizontal .onebox:nth-child(3) .arrow {
  background-color: #2564d9;
}
#heart-scroll .horizontal .onebox:nth-child(3) .arrow::before {
  border-left: 30px solid #2564d9;
}
#heart-scroll .horizontal .onebox:nth-child(3) .arrow__box p {
  margin-top: 15px;
}
@media (min-width: 768px) {
  #heart-scroll .horizontal .onebox:nth-child(3) .arrow__box p {
    margin-top: 13px;
  }
}
#heart-scroll .horizontal .onebox .txt-box {
  width: 80%;
  --fontsize:1.5rem;
}
@media screen and (max-width: 376px) {
  #heart-scroll .horizontal .onebox .txt-box {
    --fontsize:1.3rem;
  }
}
@media (min-width: 768px) {
  #heart-scroll .horizontal .onebox .txt-box {
    --fontsize:1.2rem;
    width: 90%;
  }
}
#heart-scroll .horizontal .onebox .txt-box .txt-box__bg {
  width: 100%;
  margin-top: 40px;
  aspect-ratio: 1/0.4;
  -webkit-box-shadow: #ffffff 0px 0px 20px inset;
          box-shadow: #ffffff 0px 0px 20px inset;
  border-radius: 0 0 25px 25px;
}
@media (min-width: 768px) {
  #heart-scroll .horizontal .onebox .txt-box .txt-box__bg {
    aspect-ratio: 1/0.43;
  }
}
#heart-scroll .horizontal .onebox .txt-box .txt-box__bg.one, #heart-scroll .horizontal .onebox .txt-box .txt-box__bg.two, #heart-scroll .horizontal .onebox .txt-box .txt-box__bg.three {
  background-color: rgba(255, 255, 255, 0.3);
}
#heart-scroll .horizontal .onebox .txt-box .txt-box__bg.one .arrow__box p:nth-child(1) {
  color: #0d7379;
}
#heart-scroll .horizontal .onebox .txt-box .txt-box__bg.one .arrow__box p::before {
  background: url(/images/product/probiotic/new/plus-icon1.png) no-repeat center/100%;
}
#heart-scroll .horizontal .onebox .txt-box .txt-box__bg.one .arrow {
  text-shadow: 1px 1px 5px rgb(0, 117, 93);
}
#heart-scroll .horizontal .onebox .txt-box .txt-box__bg.two .arrow__box p:nth-child(1) {
  color: #3672bb;
}
#heart-scroll .horizontal .onebox .txt-box .txt-box__bg.two .arrow__box p::before {
  background: url(/images/product/probiotic/new/plus-icon2.png) no-repeat center/100%;
}
#heart-scroll .horizontal .onebox .txt-box .txt-box__bg.two .arrow {
  text-shadow: 1px 1px 5px rgb(84, 69, 245);
}
#heart-scroll .horizontal .onebox .txt-box .txt-box__bg.three .arrow__box p::before {
  background: url(/images/product/probiotic/new/plus-icon3.png) no-repeat center/100%;
}
#heart-scroll .horizontal .onebox .txt-box .subject {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 10px;
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0;
  border-radius: 50em;
}
#heart-scroll .horizontal .onebox .txt-box .arrow {
  position: relative;
  width: calc(100% - 30px);
  padding-left: 20px;
  top: -30px;
  font-weight: 600;
  font-size: var(--fontsize);
  text-align: center;
  color: #f5feff;
  line-height: 60px;
  border-radius: 10px 0 0 10px;
}
#heart-scroll .horizontal .onebox .txt-box .arrow::before {
  content: "";
  position: absolute;
  right: -30px;
  top: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
}
#heart-scroll .horizontal .onebox .txt-box .arrow__box {
  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;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: -15px;
}
#heart-scroll .horizontal .onebox .txt-box .arrow__box p {
  position: relative;
  margin-left: -10px;
  padding-left: 25px;
  font-size: var(--fontsize);
  font-weight: bold;
  line-height: 1.4;
  text-shadow: 0px 2px 2px #ffffff, 0px 2px 2px #ffffff;
}
#heart-scroll .horizontal .onebox .txt-box .arrow__box p::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: calc(50% - 8px);
  left: 0;
}
@media (min-width: 768px) {
  #heart-scroll .cold-box {
    grid-area: 4/1/5/3;
    width: var(--max980width);
    margin: auto;
    padding-bottom: 50px;
  }
}
#heart-scroll .cold-box__content {
  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: 90%;
  padding: 1.5rem 0;
  margin: auto;
  border-radius: 54px;
  border: 3px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #dfeef3, #dfeef3), linear-gradient(45deg, #fff, #dbdcde);
  -webkit-box-shadow: #6398e3 0px 0px 50px 10px inset;
          box-shadow: #6398e3 0px 0px 50px 10px inset;
}
@media (min-width: 768px) {
  #heart-scroll .cold-box__content {
    position: relative;
    width: min(90%, 750px);
    border-radius: 20px;
    padding: 1rem 0;
    margin-right: 40px;
  }
}
#heart-scroll .cold-box__content .icon-center {
  --freezingW: 66px;
  margin-left: -15px;
  margin-right: 20px;
  width: var(--freezingW);
  height: var(--freezingW);
}
@media (min-width: 768px) {
  #heart-scroll .cold-box__content .icon-center {
    position: absolute;
    --freezingW: 80px;
    left: calc(var(--freezingW) / 2 - var(--freezingW));
    margin: 0;
  }
}
#heart-scroll .cold-box__content ul {
  text-align: left;
}
@media (min-width: 768px) {
  #heart-scroll .cold-box__content ul {
    display: grid;
    grid-template-columns: 37% 35% 30%;
    width: calc(100% - 80px);
    margin-left: 80px;
  }
}
#heart-scroll .cold-box__content ul li {
  color: #485871;
  line-height: 1.5;
  font-size: 15px;
}
#heart-scroll .cold-box__content ul li span {
  margin-left: 5px;
  color: #3e6eba;
}
#heart-scroll .height-box {
  height: 15vh;
  width: 100%;
}
@media (min-width: 768px) {
  #heart-scroll .height-box {
    height: 20px;
  }
}

.bg-view-btn {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  bottom: 5%;
  height: 15vh;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 99;
}
@media (min-width: 768px) {
  .bg-view-btn {
    bottom: 9vh;
  }
}

.viewbtn .more-bar {
  opacity: 0;
}
.viewbtn .active.more-bar {
  --radius: 28px;
  --speed: 1.5;
  opacity: 1;
  position: relative;
  height: calc(var(--radius) * 2);
  padding: 0 var(--radius);
  border-radius: var(--radius);
  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;
  -webkit-animation: calc(0.5s / var(--speed)) in-real-bubble ease-in-out calc(0.4s / var(--speed)) forwards;
          animation: calc(0.5s / var(--speed)) in-real-bubble ease-in-out calc(0.4s / var(--speed)) forwards;
  cursor: pointer;
}
.viewbtn .active.more-bar::before, .viewbtn .active.more-bar::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--radius) * 2);
  height: calc(var(--radius) * 2);
  border-radius: var(--radius);
}
.viewbtn .active.more-bar::before {
  background-color: #7ACFE2;
  -webkit-animation: calc(1.5s / var(--speed)) in-white-bubble ease-in-out forwards;
          animation: calc(1.5s / var(--speed)) in-white-bubble ease-in-out forwards;
}
.viewbtn .active.more-bar::after {
  background-color: rgba(232, 232, 237, 0.7);
  -webkit-animation: calc(1s / var(--speed)) in-blue-bubble ease-in-out forwards;
          animation: calc(1s / var(--speed)) in-blue-bubble ease-in-out forwards;
}
.viewbtn .active.more-bar span {
  font-size: clamp(14px, 3.6vw, 17px);
  font-weight: 500;
  display: block;
  overflow: hidden;
  letter-spacing: 1px;
  white-space: nowrap;
  text-align: center;
  color: #fefefe;
  width: 0px;
  opacity: 0;
  text-shadow: 0 0 3px #3cd4f4;
  -webkit-animation: calc(1s / var(--speed)) bubble-expand cubic-bezier(0.42, 0, 0.6, 1.32) forwards calc(2s / var(--speed)), calc(0.5s / var(--speed)) fade-in ease-in-out calc(0.5s / var(--speed)) forwards;
          animation: calc(1s / var(--speed)) bubble-expand cubic-bezier(0.42, 0, 0.6, 1.32) forwards calc(2s / var(--speed)), calc(0.5s / var(--speed)) fade-in ease-in-out calc(0.5s / var(--speed)) forwards;
}
.viewbtn .active.more-bar .dot-circle {
  color: #fff;
  background-color: #7ACFE2;
  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: calc(var(--radius) * 1.3);
  height: calc(var(--radius) * 1.3);
  border-radius: var(--radius);
  position: absolute;
  right: calc(var(--radius) / 3);
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-animation: calc(0.5s / var(--speed)) scale cubic-bezier(0.42, 0, 0.6, 1.32) calc(1.5s / var(--speed)) forwards;
          animation: calc(0.5s / var(--speed)) scale cubic-bezier(0.42, 0, 0.6, 1.32) calc(1.5s / var(--speed)) forwards;
}
.viewbtn .active.more-bar .icon {
  width: calc(var(--radius) * 1.1);
  height: calc(var(--radius) * 1.1);
  background: url(/images/add_white.svg) no-repeat center;
}

#more-history .popup-inner {
  background: linear-gradient(40deg, #d5d1c7 var(--gradientboxH), #f3f0ec 50%);
}
#more-history .popup-inner .gradient-box {
  background: -webkit-gradient(linear, left top, left bottom, from(#f3f0ec), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to bottom, #f3f0ec 0%, rgba(255, 255, 255, 0) var(--gradientboxH));
}
#more-history h2 {
  padding: 0 10px 20px 20px;
  color: #6e6e6e;
}
@media (min-width: 768px) {
  #more-history h2 {
    text-align: center;
    line-height: 3.3rem;
  }
}
#more-history h2 i.lighterTxt {
  display: block;
  -webkit-filter: grayscale(1) opacity(0.6);
          filter: grayscale(1) opacity(0.6);
}
#more-history .service-Timeline {
  --cutwide:50px;
  position: relative;
  padding: var(--cutwide) 0;
  margin-bottom: 100px;
  background: #ffffff;
  border-radius: 55px;
  -webkit-box-shadow: 5px 5px 10px rgba(93, 93, 93, 0.0588235294);
          box-shadow: 5px 5px 10px rgba(93, 93, 93, 0.0588235294);
}
#more-history .service-Timeline .line-g {
  position: absolute;
  height: calc(100% - var(--cutwide) * 2);
  width: 2px;
  left: 20px;
  background: -webkit-gradient(linear, left top, left bottom, from(#35474b), color-stop(50%, #cbcbcb), color-stop(55%, #9bd8df));
  background: linear-gradient(to bottom, #35474b 0%, #cbcbcb 50%, #9bd8df 55%);
}
@media (min-width: 768px) {
  #more-history .service-Timeline .line-g {
    top: var(--cutwide);
    left: calc(12.5% + 64px);
  }
}
#more-history .service-Timeline .line-g:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: -5px;
  bottom: -3px;
  border-style: solid;
  border-width: 15px 6px 0 6px;
  border-color: #42585d transparent transparent transparent;
}
#more-history .service-Timeline .Timeline-content .Timeline-part {
  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;
}
@media (min-width: 768px) {
  #more-history .service-Timeline .Timeline-content .Timeline-part {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
#more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-left {
  width: 100%;
  padding-top: 20px;
}
@media (min-width: 768px) {
  #more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-left {
    width: 130px;
    padding-left: 0px;
    border-left: 0;
  }
  #more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-left.part-3-3 {
    background: linear-gradient(to bottom, #ffffff 2px, #e5f5f3 2px, #ffffff 100%);
  }
  #more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-left.part-3-2 {
    background: linear-gradient(to bottom, #ffffff 2px, #c6e8e5 2px, rgb(230, 246, 244) 100%);
  }
  #more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-left.part-3-1 {
    background: linear-gradient(to bottom, rgb(60, 138, 130) 5px, #b2d5d2 5px, rgb(199, 232, 229) 100%);
  }
  #more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-left.part-2-1 {
    background: linear-gradient(to bottom, rgb(171, 207, 217) 5px, #cce5f1 5px);
  }
  #more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-left.part-1-1 {
    background: linear-gradient(to bottom, rgb(193, 211, 219) 5px, #eaf1f9 5px);
  }
  #more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-left.part-0-2 {
    background: linear-gradient(to bottom, #ffffff 2px, #ededed 2px, #ededed 100%);
  }
  #more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-left.part-0-1 {
    background: linear-gradient(to bottom, rgb(142, 151, 155) 5px, #e3e3e3 5px, #ededed 100%);
  }
}
#more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-left .Timeline-year {
  position: relative;
  font-family: "Amiri", serif;
  padding-left: 35px;
  line-height: 3rem;
  font-size: 2rem;
  color: rgba(45, 68, 73, 0.8196078431);
  font-weight: 500;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  #more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-left .Timeline-year {
    padding-right: 30px;
    font-size: 1.7rem;
    text-align: right;
  }
}
#more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-left .Timeline-year::before {
  --pointW:6px;
  content: "";
  position: absolute;
  display: block;
  left: 18px;
  top: calc(50% - var(--pointW) / 2);
  width: var(--pointW);
  height: var(--pointW);
  background-color: #555555;
  border-radius: 50%;
}
@media (min-width: 768px) {
  #more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-left .Timeline-year::before {
    right: calc(var(--pointW) / 2 - var(--pointW));
    left: auto;
  }
}
#more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-left .lp {
  color: #35c6f2;
}
#more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-left .lp::before {
  background-color: #35c6f2;
}
#more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-right {
  width: 100%;
  padding: 10px 12px 40px 38px;
  border-bottom: 1px dotted #c9c9c9;
}
@media (min-width: 768px) {
  #more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-right {
    width: 75%;
    padding: 35px 30px;
  }
}
#more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-right .green-txt {
  color: #8bb34f;
}
#more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-right .important {
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(192, 234, 242)), to(rgb(255, 255, 255)));
  background: linear-gradient(to bottom, rgb(192, 234, 242) 0%, rgb(255, 255, 255) 100%);
  -webkit-backdrop-filter: brightness(0.5);
          backdrop-filter: brightness(0.5);
}
@media (min-width: 768px) {
  #more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-right ul {
    margin-top: -3px;
  }
}
#more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-right ul li {
  position: relative;
  padding-left: 15px;
  line-height: 1.8;
}
#more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-right ul li:last-child {
  margin-bottom: 0;
}
#more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-right ul li::before {
  content: "●";
  position: absolute;
  top: 10px;
  left: 0;
  font-size: 5px;
  color: #9cd2d9;
  vertical-align: middle;
}
#more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-right ul li .xxs {
  font-size: 14px;
}
#more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-right ul li a {
  font-size: 14px;
  color: #0b6b97;
  line-height: 1rem;
  letter-spacing: 0;
  text-decoration: underline;
}
#more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-right ul li sup {
  margin-left: 3px;
  font-size: 10px;
  color: rgba(51, 51, 51, 0.8392156863);
  -webkit-text-size-adjust: none;
}
#more-history .service-Timeline .Timeline-content .Timeline-part .Timeline-right ul .ps {
  margin: 5px;
  padding: 7px 20px;
  font-size: 0.8em;
  color: rgba(51, 51, 51, 0.8392156863);
  background-color: rgba(152, 152, 152, 0.1607843137);
  border-radius: 5px;
}
#more-history .service-Timeline .Timeline-content .Timeline-part .p-en {
  font-family: "Outfit", sans-serif;
  padding: 0 3px;
  font-weight: 500;
  color: transparent;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgb(60, 198, 240)), color-stop(90%, rgb(36, 137, 167)));
  background: linear-gradient(to bottom, rgb(60, 198, 240) 10%, rgb(36, 137, 167) 90%);
  -webkit-background-clip: text;
          background-clip: text;
}

.popuptext {
  width: 100%;
  height: 85vh;
  padding-top: var(--gradientboxH);
  overflow-y: scroll;
}
.popuptext .content-width {
  width: 100%;
  margin: auto;
  padding: 0 30px 60px 30px;
}
@media (min-width: 576px) {
  .popuptext .content-width {
    width: 80%;
    padding: 0;
  }
}

.innerJump {
  bottom: 0;
  right: 0;
  -webkit-transform: translateY(0) !important;
          transform: translateY(0) !important;
}

.seeMore {
  opacity: 1 !important;
  visibility: visible !important;
}

.card-show {
  opacity: 1 !important;
  visibility: visible !important;
}

.complexani {
  display: none;
}

/*跳出頁半透黑底*/
.more-complex {
  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;
  position: fixed;
  width: 100%;
  height: 100%;
  bottom: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: 0.64s ease-in-out;
  transition: 0.64s ease-in-out;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.6);
  --hb89c:#4b8f96;
  --ncfmc:#616ec4;
  --ubcb70c:#ce77c7;
  --lgg:#cf7c3e;
}
@media (min-width: 768px) {
  .more-complex {
    z-index: 4999; /*小於meun的z-index:5010*/
  }
}
.more-complex.blur {
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.more-complex .popup-inner, .more-complex .popup-probiotic {
  position: relative;
  top: 5vh;
  width: min(95%, 1210px);
  height: auto;
  background-color: #fff;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  --gradientboxH:40px; /*頂端的漸層色塊高度*/
}
@media (min-width: 768px) {
  .more-complex .popup-inner, .more-complex .popup-probiotic {
    top: 15vh;
  }
}
.more-complex .popup-inner .closepopup, .more-complex .popup-probiotic .closepopup {
  position: absolute;
  font-family: "Outfit", sans-serif;
  right: 1.5rem;
  top: 1.5rem;
  width: 3rem;
  height: 3rem;
  font-size: 1rem;
  font-weight: 300;
  border-radius: 100%;
  background-color: rgba(122, 207, 226, 0.6705882353);
  z-index: 9999;
  color: #fff;
  line-height: 3rem;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}
.more-complex .popup-inner {
  --paddtopH:55px;
  padding: var(--paddtopH) 0 10% 0;
  border-radius: 55px;
}
@media (min-width: 768px) {
  .more-complex .popup-inner {
    --paddtopH:80px;
  }
}
@media (min-width: 768px) {
  .more-complex .popup-inner {
    padding: var(--paddtopH) 0;
  }
}
.more-complex .popup-inner .gradient-box {
  position: absolute;
  width: 100%;
  height: var(--gradientboxH);
  top: calc(var(--paddtopH) - 1px); /* 高度50px iphone會有1px落差)*/
  z-index: 10;
}
.more-complex .popup-probiotic {
  width: min(100%, 500px);
  font-size: 4.15vw;
}
@media (min-width: 768px) {
  .more-complex .popup-probiotic.more-lgg .txt-align-probio {
    grid-template-columns: 220px 1fr;
  }
}
@media screen and (max-width: 576px) {
  .more-complex .popup-probiotic.more-ubcb70 .txt-align-probio {
    grid-template-columns: 55% 1fr;
  }
}
.more-complex .popup-probiotic .txt-align-probio {
  display: grid;
  grid-template-columns: 185px 1fr;
  width: 85%;
  height: auto;
  margin: auto;
  letter-spacing: 0.5px;
}
@media (min-width: 768px) {
  .more-complex .popup-probiotic .txt-align-probio {
    grid-template-columns: 200px 1fr;
  }
}
.more-complex .popup-probiotic .txt-align-probio .name-pro {
  margin-top: 3px;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.1;
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  letter-spacing: 1px;
}
.more-complex .popup-probiotic .txt-align-probio .name-pro sup {
  font-size: 1.3rem;
  font-weight: 400;
  -webkit-background-clip: text;
          background-clip: text;
}
.more-complex .popup-probiotic .txt-align-probio .name-pro span {
  display: block;
  margin-left: 1px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.more-complex .popup-probiotic .txt-align-probio .center-probio {
  justify-self: center;
  font-family: "Outfit", sans-serif;
}
.more-complex .popup-probiotic .txt-align-probio .probioticTxt {
  margin-top: 1rem;
  padding: 10px 20px 0 15px;
  font-size: 1rem;
  -ms-flex-item-align: start;
      align-self: start;
  line-height: 1.8;
  letter-spacing: 0.5px;
}
@media (min-width: 768px) {
  .more-complex .popup-probiotic .txt-align-probio .probioticTxt {
    padding: 0 30px;
  }
}
.more-complex .popup-probiotic .txt-align-probio .probioticTxt ul {
  padding-left: 25px;
  list-style: disc;
  letter-spacing: 0;
}
.more-complex .popup-probiotic .txt-align-probio .probioticTxt ul li {
  position: relative;
  color: rgba(51, 51, 51, 0.8);
}
.more-complex .popup-probiotic .txt-align-probio .probioticTxt ul li::marker {
  color: rgba(51, 51, 51, 0.3725490196);
  font-size: smaller;
}
.more-complex .popup-probiotic .txt-align-probio .probioticTxt ul li.map-icon::marker {
  content: none;
}
.more-complex .popup-probiotic .txt-align-probio .probioticTxt ul li.map-icon::before {
  position: absolute;
  content: "";
  display: block;
  width: 13px;
  height: 18px;
  left: -21px;
  top: 20%;
  background: url(/images/product/probiotic/new/map-icon-02.svg) no-repeat center/100%;
}
.more-complex .popup-probiotic .txt-align-probio .probioticTxt ul i {
  letter-spacing: 0.5px;
  font-size: 12px;
  font-style: normal;
}
.more-complex .popup-probiotic .txt-align-probio .probioticTxt .small {
  font-size: 0.87rem;
  padding-bottom: 5px;
  color: rgba(51, 51, 51, 0.65);
}
.more-complex .popup-probiotic .txt-align-probio .probioticTxt .andopen_item__list {
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.87rem;
  border-top: 1px dotted #60a7ac;
}
.more-complex .popup-probiotic .txt-align-probio .probioticTxt .andopen_item__list li {
  list-style-type: circle;
  color: rgba(51, 51, 51, 0.65);
}
.more-complex .popup-probiotic .txt-align-probio .probioticTxt .gray-n, .more-complex .popup-probiotic .txt-align-probio .probioticTxt .gray-n2 {
  display: inline-block;
  color: #5f3519;
  letter-spacing: 0;
  background: -webkit-gradient(linear, left top, right top, color-stop(20%, #c3af83), color-stop(46%, #f6edbd), color-stop(80%, #c3af83));
  background: linear-gradient(to right, #c3af83 20%, #f6edbd 46%, #c3af83 80%);
}
.more-complex .popup-probiotic .txt-align-probio .probioticTxt .gray-n {
  width: 90%;
  margin: 1rem 5%;
  padding: 5px 0;
  text-align: center;
  font-size: 0.87rem;
  border-radius: 50em;
}
.more-complex .popup-probiotic .txt-align-probio .probioticTxt .gray-n sup {
  font-size: 10px;
}
.more-complex .popup-probiotic .txt-align-probio .probioticTxt .gray-n2 {
  margin-left: 3px;
  padding: 1px 3px;
  font-size: 0.75rem;
  line-height: 1;
  border-radius: 3px;
}
.more-complex .popup-probiotic .txt-align-probio .probioticTxt .ps-txt {
  font-size: 14px;
  color: #cb73c4;
  line-height: 20px;
}
.more-complex .popup-probiotic .txt-align-probio .left-little-name, .more-complex .popup-probiotic .txt-align-probio .right-little-name {
  font-size: 14px;
  line-height: 1.1;
  opacity: 0.75;
}
.more-complex .popup-probiotic .txt-align-probio .left-little-name {
  grid-area: 1/1/2/2;
  padding-left: 33px;
}
.more-complex .popup-probiotic .txt-align-probio .right-little-name {
  grid-area: 1/2/2/3;
}
.more-complex .popup-probiotic .txt-align-probio .left-probio {
  grid-area: 2/1/3/2;
  padding-left: 30px;
}
.more-complex .popup-probiotic .txt-align-probio .right-pribio {
  grid-area: 2/2/3/3;
}
.more-complex .popup-probiotic .txt-align-probio .probioticTxt {
  grid-area: 3/1/4/3;
}
.more-complex .popup-probiotic.more-hb89 .probioticTxt {
  overflow: hidden;
  height: calc(100vh - 350px);
  padding: 0 0 0 13px;
}
@media (min-width: 992px) {
  .more-complex .popup-probiotic.more-hb89 .probioticTxt {
    padding: 0 0 0 30px;
    height: 403px;
  }
}
.more-complex .popup-probiotic.more-hb89 .probioticTxt .overflow-y {
  position: relative;
  overflow-y: auto;
  height: 100%;
  padding-right: 20px;
  padding-top: 0.8rem;
}
.more-complex .popup-probiotic.more-hb89 .probioticTxt .overflow-y::-webkit-scrollbar {
  width: 7px;
}
.more-complex .popup-probiotic.more-hb89 .probioticTxt .overflow-y::-webkit-scrollbar-thumb {
  background-color: #3b767b;
  border-radius: 10px;
}
.more-complex .popup-probiotic.more-hb89 .probioticTxt .overflow-y::-webkit-scrollbar-track {
  border-radius: 10px 10px 0 0;
  background: #9eb3b6;
}
.more-complex .more-hb89 {
  position: relative;
}
.more-complex .more-hb89::after {
  position: absolute;
  content: "";
  bottom: 0;
  width: 84%;
  margin-left: 8%;
  height: 10%;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgb(172, 225, 231)), to(rgba(210, 231, 232, 0)));
  background: linear-gradient(to top, rgb(172, 225, 231) 10%, rgba(210, 231, 232, 0) 100%);
}
@media (min-width: 768px) {
  .more-complex .more-hb89::after {
    width: 83%;
  }
}
.more-complex .more-hb89.bg-lazyload {
  background: url(/images/product/probiotic/new/bg-card-hb89.webp) no-repeat top center/100% auto;
}
.more-complex .more-lgg.bg-lazyload {
  background: url(/images/product/probiotic/new/bg-card-lgg.webp) no-repeat top center/100% auto;
}
.more-complex .more-ncfm.bg-lazyload {
  background: url(/images/product/probiotic/new/bg-card-a.webp) no-repeat top center/100% auto;
}
.more-complex .more-ubcb70.bg-lazyload {
  background: url(/images/product/probiotic/new/bg-card-70.webp) no-repeat top center/100% auto;
}
.more-complex .more-ubcb70, .more-complex .more-hb89, .more-complex .more-lgg, .more-complex .more-ncfm {
  padding-top: 170px;
  height: 95%;
  bottom: 0;
}
@media (min-width: 768px) {
  .more-complex .more-ubcb70, .more-complex .more-hb89, .more-complex .more-lgg, .more-complex .more-ncfm {
    height: 85%;
    top: auto;
    height: 100%;
  }
}
.more-complex .hb89-g {
  background: linear-gradient(135deg, #006972 10%, #148e99 35%, #006972 55%);
}
.more-complex .hb89-g span {
  color: var(--hb89c);
}
.more-complex .ncfm-g, .more-complex .ncfm-g sup {
  background-image: linear-gradient(135deg, #4d53cd 30%, #6b71de 45%, #4d53cd 65%);
}
.more-complex .ncfm-g span, .more-complex .ncfm-g sup span {
  color: var(--ncfmc);
}
.more-complex .lgg-g, .more-complex .lgg-g sup {
  background-image: linear-gradient(135deg, #de6800 10%, #e98f3e 30%, #de6800 50%);
}
.more-complex .lgg-g span, .more-complex .lgg-g sup span {
  color: var(--lgg);
}
.more-complex .ubcb70-g {
  background-image: linear-gradient(135deg, #d45bca 25%, #dd8fe2 40%, #d45bca 55%);
  font-size: 2rem !important;
}
@media (min-width: 768px) {
  .more-complex .ubcb70-g {
    font-size: 2.3rem !important;
  }
}
.more-complex .ubcb70-g sup {
  background-image: linear-gradient(160deg, #ed2f8c 0%, #ee85f4 50%, #8d10db 100%);
}
.more-complex .ubcb70-g span {
  color: var(--ubcb70c);
}
.more-complex .cen-hb89 {
  color: var(--hb89c);
}
.more-complex .cen-lgg {
  color: var(--lgg);
}
.more-complex .cen-ncfm {
  color: var(--ncfmc);
}
.more-complex .cen-ubcb70 {
  color: var(--ubcb70c);
}
@media (min-width: 768px) {
  .more-complex .cen-ubcb70 {
    margin-top: -15px;
  }
}

/*跳出頁-共同使用*/
#more-history .popup-h2part, #more-idCard .popup-h2part, #more-fragrance .popup-h2part, #more-dataNum .popup-h2part, #more-manufacturing .popup-h2part {
  margin-bottom: 2rem;
  text-align: center;
}
#more-history .h2-m, #more-idCard .h2-m, #more-fragrance .h2-m, #more-dataNum .h2-m, #more-manufacturing .h2-m {
  font-size: 40px;
}
@media (min-width: 768px) {
  #more-history .h2-m, #more-idCard .h2-m, #more-fragrance .h2-m, #more-dataNum .h2-m, #more-manufacturing .h2-m {
    font-size: 55px;
  }
}
#more-history .h2-m.gradient, #more-idCard .h2-m.gradient, #more-fragrance .h2-m.gradient, #more-dataNum .h2-m.gradient, #more-manufacturing .h2-m.gradient {
  position: relative;
}
@media screen and (max-width: 576px) {
  #more-history .h2-m.gradient, #more-idCard .h2-m.gradient, #more-fragrance .h2-m.gradient, #more-dataNum .h2-m.gradient, #more-manufacturing .h2-m.gradient {
    font-size: 32px;
  }
}
#more-history .h2-s-black, #more-idCard .h2-s-black, #more-fragrance .h2-s-black, #more-dataNum .h2-s-black, #more-manufacturing .h2-s-black {
  font-size: 18px;
  opacity: 1;
  letter-spacing: 1px;
}
#more-history .h2-l, #more-idCard .h2-l, #more-fragrance .h2-l, #more-dataNum .h2-l, #more-manufacturing .h2-l {
  font-size: 40px;
}
@media (min-width: 768px) {
  #more-history .h2-l, #more-idCard .h2-l, #more-fragrance .h2-l, #more-dataNum .h2-l, #more-manufacturing .h2-l {
    font-size: 55px;
  }
}
#more-history p.en, #more-idCard p.en, #more-fragrance p.en, #more-dataNum p.en, #more-manufacturing p.en {
  font-family: "Outfit", sans-serif;
}
#more-history .hr, #more-idCard .hr, #more-fragrance .hr, #more-dataNum .hr, #more-manufacturing .hr {
  width: 100%;
  border-bottom: 1px solid rgba(51, 51, 51, 0.168627451);
}

.no-scroll {
  height: 100vh;
  overflow: hidden;
}

.no-scroll > * {
  position: sticky;
  top: 0;
}

#more-idCard .content-txt, #more-fragrance .content-txt, #more-dataNum .content-txt, #more-manufacturing .content-txt {
  display: grid;
  gap: 1rem;
}
@media (min-width: 992px) {
  #more-idCard .content-txt, #more-fragrance .content-txt, #more-dataNum .content-txt, #more-manufacturing .content-txt {
    padding-bottom: 8rem;
  }
}
#more-idCard .content-txt__text p, #more-fragrance .content-txt__text p, #more-dataNum .content-txt__text p, #more-manufacturing .content-txt__text p {
  margin-bottom: 1.3rem;
}

/*more-idCard-四隻菌-跳出頁身分證*/
#more-idCard .popup-inner {
  background: linear-gradient(to bottom, #dceaed 80px, #ffffff 70%);
}
#more-idCard .gradient-box {
  background: -webkit-gradient(linear, left top, left bottom, from(#dceaed), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to bottom, #dceaed 0%, rgba(255, 255, 255, 0) var(--gradientboxH));
}
#more-idCard .h2-m {
  display: inline-block;
  width: 90%;
  padding: 1rem 0;
  margin-top: 1rem;
  background-color: #b3dfec;
  border-radius: 25px;
  font-size: 30px;
}
@media (min-width: 768px) {
  #more-idCard .h2-m {
    margin-top: 1.5rem;
    width: min(80%, 480px);
    font-size: 40px;
  }
}
@media (min-width: 992px) {
  #more-idCard .content-width.bg-lazyload {
    width: 100%;
    padding: 0 10%;
    background: url(/images/product/probiotic/new/half-map.webp) no-repeat left 180px/500px;
  }
}
@media (min-width: 992px) {
  #more-idCard .content-txt {
    padding-top: 4rem;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  #more-idCard .content-txt .right-box {
    grid-area: 1/2/2/3;
  }
  #more-idCard .content-txt .center-box {
    grid-area: 2/1/3/3;
  }
  #more-idCard .content-txt .center-box p {
    text-align: center;
  }
  #more-idCard .content-txt .hr {
    grid-area: 3/1/4/3;
  }
  #more-idCard .content-txt .grid-1-2 {
    grid-area: 4/1/5/3;
    display: grid;
    grid-template-columns: 1fr 280px;
    grid-template-rows: 70px 1fr;
    gap: 2rem 5rem;
  }
  #more-idCard .content-txt .grid-1-2 h3 {
    grid-area: 1/1/2/2;
    height: 70px;
  }
  #more-idCard .content-txt .grid-1-2 .main-box {
    grid-area: 2/1/3/2;
  }
  #more-idCard .content-txt .grid-1-2 .second-box {
    grid-area: 1/2/3/3;
  }
  #more-idCard .content-txt .grid-1-2 .second-box p:nth-of-type(1) {
    margin-bottom: 0.5rem;
  }
  #more-idCard .content-txt .blue-box {
    grid-area: 5/1/6/3;
    padding: 3rem;
  }
}
#more-idCard .content-txt .ex-part {
  display: grid;
  gap: 3px;
  background: url(/images/product/probiotic/new/point-03.svg) no-repeat center top/100%, url(/images/product/probiotic/new/point-03.svg) no-repeat center bottom/100%;
}
#more-idCard .content-txt .ex-part div, #more-idCard .content-txt .ex-part p {
  display: inline-block;
  text-align: center;
}
#more-idCard .content-txt .ex-part p {
  font-size: 0.8rem;
  letter-spacing: 0;
}
#more-idCard .content-txt .ex-part p.xxs {
  font-size: 10px;
  color: #678084;
}
#more-idCard .content-txt .ex-part p.en {
  font-size: 0.9rem;
}
#more-idCard .content-txt .ex-part.one {
  grid-template-columns: 1fr 0.8fr 0.7fr 1.3fr;
  margin: 2rem auto 4rem 0;
}
@media (min-width: 992px) {
  #more-idCard .content-txt .ex-part.one {
    margin: 3rem auto;
  }
}
#more-idCard .content-txt .ex-part.one div:nth-child(1) p:nth-child(1) {
  background-color: #bbe8ea;
}
#more-idCard .content-txt .ex-part.one div:nth-child(2) p:nth-child(1) {
  background-color: #87d8ce;
}
#more-idCard .content-txt .ex-part.one div:nth-child(3) p:nth-child(1) {
  background-color: #89d6e8;
}
#more-idCard .content-txt .ex-part.one div:nth-child(4) p:nth-child(1) {
  background-color: #7ec3ed;
}
#more-idCard .content-txt .ex-part.one .en {
  font-size: 0.9rem;
  height: 30px;
}
#more-idCard .content-txt .ex-part.two {
  grid-template-columns: 1fr 1fr;
  width: min(80%, 270px);
  margin: 2rem auto 1.8rem auto;
}
#more-idCard .content-txt .ex-part.two div:nth-child(1) p:nth-child(1) {
  background-color: #b5e9f5;
}
#more-idCard .content-txt .ex-part.two div:nth-child(2) p:nth-child(1) {
  background-color: #b5cdf4;
}
#more-idCard .content-txt .ex-part.two .en {
  font-size: 1.25rem;
  height: 30px;
}
#more-idCard .content-txt .ex-part.one, #more-idCard .content-txt .ex-part.two {
  padding: 2rem 0;
}
#more-idCard .content-txt .ex-part.one .en, #more-idCard .content-txt .ex-part.two .en {
  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: 100%;
  margin-bottom: 5px;
}
#more-idCard .content-txt .safe-ex {
  margin: 1rem;
}
@media (min-width: 992px) {
  #more-idCard .content-txt .safe-ex {
    width: min(100%, 350px);
    margin: 3rem auto;
  }
}
#more-idCard .content-txt .safe-ex p:nth-child(odd) {
  color: #277a8d;
  line-height: 1;
}
#more-idCard .content-txt .safe-ex p:nth-child(even) {
  margin-bottom: 1rem;
  font-size: 0.87rem;
}
@media (min-width: 992px) {
  #more-idCard .content-txt .safe-ex p {
    text-align: left;
  }
}
#more-idCard .right-box .h3style {
  margin-bottom: 1rem;
}
#more-idCard .h3style {
  font-size: 20px;
  font-weight: 600;
  color: #333333;
  line-height: 1.5;
  letter-spacing: 1px;
}
@media (min-width: 992px) {
  #more-idCard .h3style {
    font-size: 24px;
    font-weight: 500;
  }
}
#more-idCard .h3style.blue {
  width: 100%;
  margin: 0 auto 2rem auto;
  line-height: 70px;
  text-align: center;
  background-color: #c1e8f4;
  border-radius: 50em;
}
#more-idCard h4 {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0 1rem;
  color: #ffffff;
  font-size: 1rem;
  line-height: 25px;
  background-color: #0b617a;
  margin-bottom: 0.5rem;
}
#more-idCard h4.main {
  background-color: #0b617a;
}
#more-idCard .hr {
  margin: 2rem 0;
}
#more-idCard .grid-1-2 img {
  margin: 1rem auto 1.5rem auto;
}
@media (min-width: 768px) {
  #more-idCard .grid-1-2 img {
    margin: 0.5rem auto 1rem auto;
  }
}
#more-idCard .blue-box {
  display: grid;
  gap: 1rem;
  padding: 2rem 1rem;
  margin-bottom: 1rem;
  text-align: center;
  background-color: #d8ecf1;
  border-radius: 25px;
}
#more-idCard .blue-box p {
  text-align: left;
}
#more-idCard .b-blue {
  color: #0b617a;
  margin-bottom: 1rem;
}
#more-idCard .tick-ani {
  position: relative;
}
#more-idCard .tick-ani .tick, #more-idCard .tick-ani .ok-icon {
  position: absolute;
}
#more-idCard .tick-ani .tick {
  width: 25px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
}
#more-idCard .tick-ani .tick:nth-of-type(1) {
  top: 32%;
  left: 19%;
}
#more-idCard .tick-ani .tick:nth-of-type(2) {
  top: 46%;
  left: 19%;
}
#more-idCard .tick-ani .tick:nth-of-type(3) {
  top: 60%;
  left: 19%;
}
#more-idCard .tick-ani .tick:nth-of-type(4) {
  top: 60%;
  left: 60%;
}
@media (min-width: 768px) {
  #more-idCard .tick-ani .tick {
    width: 30px;
  }
  #more-idCard .tick-ani .tick:nth-of-type(1) {
    top: 44%;
    left: 21%;
  }
  #more-idCard .tick-ani .tick:nth-of-type(2) {
    top: 59%;
    left: 21%;
  }
  #more-idCard .tick-ani .tick:nth-of-type(3) {
    top: 73%;
    left: 21%;
  }
  #more-idCard .tick-ani .tick:nth-of-type(4) {
    top: 73%;
    left: 62%;
  }
}
#more-idCard .tick-ani .ok-icon {
  width: 110px;
  top: 55%;
  left: calc(50% - 55px);
  opacity: 0;
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}
@media (min-width: 768px) {
  #more-idCard .tick-ani .ok-icon {
    width: 175px;
    top: 60%;
    left: calc(50% - 87px);
  }
}

/*more-fragrance-雙口味跳出頁*/
#more-fragrance .popup-h2part.bg-lazyload {
  background: url(/images/product/probiotic/new/00000.svg) no-repeat bottom/90%;
}
@media (min-width: 992px) {
  #more-fragrance .popup-h2part.bg-lazyload {
    background: url(/images/product/probiotic/new/00000.svg) no-repeat bottom/500px;
  }
}
#more-fragrance .popuptext .content-width {
  padding-left: 15px;
  padding-right: 15px;
}
#more-fragrance .popup-inner {
  background: var(--twotasteBG);
}
#more-fragrance .popup-inner .h2-m, #more-fragrance .popup-inner .h2-l {
  color: #ffffff;
}
@media (min-width: 768px) {
  #more-fragrance .popup-inner .h2-m {
    font-size: min(5.5vw, 55px);
    letter-spacing: 8px;
  }
}
#more-fragrance .popup-inner .h2-l {
  line-height: 1;
}
@media (min-width: 768px) {
  #more-fragrance .popup-inner .h2-l {
    font-size: 80px;
  }
}
#more-fragrance .gradient-box {
  background: var(--twotasteBG);
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent var(--gradientboxH));
          mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));
          mask-image: linear-gradient(to bottom, black 0%, transparent var(--gradientboxH));
}
#more-fragrance .content-txt .original-taste, #more-fragrance .content-txt .lemon-taste, #more-fragrance .content-txt .vanilla-taste {
  display: grid;
  gap: 2rem;
  padding: 180px 1rem 3rem 1rem;
  border-radius: 25px;
  background-color: #f2f1ed;
}
@media (min-width: 992px) {
  #more-fragrance .content-txt .original-taste, #more-fragrance .content-txt .lemon-taste, #more-fragrance .content-txt .vanilla-taste {
    grid-template-columns: 250px 1fr;
    padding: 5rem 3rem 3rem 3rem;
  }
}
@media (min-width: 1200px) {
  #more-fragrance .content-txt .original-taste, #more-fragrance .content-txt .lemon-taste, #more-fragrance .content-txt .vanilla-taste {
    padding: 3rem 4.5rem;
    gap: 2rem;
  }
}
#more-fragrance .content-txt .original-taste .circle, #more-fragrance .content-txt .lemon-taste .circle, #more-fragrance .content-txt .vanilla-taste .circle {
  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;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: min(80%, 250px);
  margin: auto;
  aspect-ratio: 1/1;
  background: linear-gradient(45deg, #c19843 20%, #f2ecab 50%, #c19843 80%);
  border-radius: 50em;
  -webkit-box-shadow: 0px 8px 8px rgba(116, 68, 0, 0.231372549);
          box-shadow: 0px 8px 8px rgba(116, 68, 0, 0.231372549);
}
@media (min-width: 768px) {
  #more-fragrance .content-txt .original-taste .circle, #more-fragrance .content-txt .lemon-taste .circle, #more-fragrance .content-txt .vanilla-taste .circle {
    margin-bottom: 0;
  }
}
@media (min-width: 992px) {
  #more-fragrance .content-txt .original-taste .circle, #more-fragrance .content-txt .lemon-taste .circle, #more-fragrance .content-txt .vanilla-taste .circle {
    width: min(100%, 250px);
  }
}
#more-fragrance .content-txt .original-taste .circle p, #more-fragrance .content-txt .lemon-taste .circle p, #more-fragrance .content-txt .vanilla-taste .circle p {
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 32px;
  color: #3d2210;
  text-align: center;
  line-height: 1.3;
}
#more-fragrance .content-txt .original-taste .circle p.small, #more-fragrance .content-txt .lemon-taste .circle p.small, #more-fragrance .content-txt .vanilla-taste .circle p.small {
  font-size: 22px;
}
#more-fragrance .content-txt .original-taste .circle img, #more-fragrance .content-txt .lemon-taste .circle img, #more-fragrance .content-txt .vanilla-taste .circle img {
  position: absolute;
  margin: auto;
}
#more-fragrance .content-txt .original-taste .circle .line, #more-fragrance .content-txt .lemon-taste .circle .line, #more-fragrance .content-txt .vanilla-taste .circle .line {
  height: 30px;
  margin-top: 5px;
  width: 90%;
  background: url(/images/product/probiotic/new/dotted-02.svg) center/cover no-repeat;
}
@media (min-width: 992px) {
  #more-fragrance .content-txt .original-taste .circle .line, #more-fragrance .content-txt .lemon-taste .circle .line, #more-fragrance .content-txt .vanilla-taste .circle .line {
    height: 20px;
  }
}
@media screen and (max-width: 576px) {
  #more-fragrance .content-txt .original-taste .p-style, #more-fragrance .content-txt .lemon-taste .p-style, #more-fragrance .content-txt .vanilla-taste .p-style {
    text-align: justify;
  }
}
#more-fragrance .content-txt .original-taste .p-style .style-gold, #more-fragrance .content-txt .lemon-taste .p-style .style-gold, #more-fragrance .content-txt .vanilla-taste .p-style .style-gold {
  padding: 0 10px;
  background: -webkit-gradient(linear, left top, right top, color-stop(10%, rgb(218, 216, 210)), color-stop(12%, rgb(255, 255, 255)), color-stop(20%, rgba(135, 125, 111, 0.3)));
  background: linear-gradient(to right, rgb(218, 216, 210) 10%, rgb(255, 255, 255) 12%, rgba(135, 125, 111, 0.3) 20%);
  border-radius: 5px;
}
#more-fragrance .content-txt .original-taste {
  padding-bottom: 5rem;
}
#more-fragrance .content-txt .original-taste.bg-lazyload {
  background: url(/images/product/probiotic/new/w-kid.jpg) bottom right/60% no-repeat, #f2f1ed;
}
@media (min-width: 992px) {
  #more-fragrance .content-txt .original-taste.bg-lazyload {
    background: url(/images/product/probiotic/new/w-kid.jpg) bottom right/250px no-repeat, #f2f1ed;
  }
}
@media (min-width: 1200px) {
  #more-fragrance .content-txt .original-taste.bg-lazyload {
    background: url(/images/product/probiotic/new/w-kid.jpg) center right/contain no-repeat, #f2f1ed;
  }
}
@media (min-width: 992px) {
  #more-fragrance .content-txt .original-taste {
    grid-template-columns: 250px 0.8fr;
  }
}
@media (min-width: 1200px) {
  #more-fragrance .content-txt .original-taste {
    grid-template-columns: 250px 1fr 0.5fr;
  }
}
@media (min-width: 992px) {
  #more-fragrance .content-txt .original-taste .circle {
    margin-top: 75px;
  }
}
@media (min-width: 1200px) {
  #more-fragrance .content-txt .original-taste .circle {
    margin-top: 110px;
  }
}
#more-fragrance .content-txt .original-taste .circle img {
  margin-top: -300px;
  max-width: 200px;
}
#more-fragrance .content-txt .original-taste .content-txt__text {
  display: grid;
  place-content: center;
}
#more-fragrance .content-txt .original-taste .ok-eat {
  padding: 3px 1rem;
  background-color: #d8e5e9;
  border-radius: 50em;
}
#more-fragrance .content-txt .original-taste .ok-eat::before {
  content: "";
  padding-left: 25px;
  background: url(/images/product/probiotic/new/tick-icon-w.png) left/15px no-repeat;
}
#more-fragrance .content-txt .vanilla-taste {
  background-image: url(/images/product/probiotic/new/vanilla-bg.webp);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 400px;
  padding-bottom: 100px;
}
@media (min-width: 768px) {
  #more-fragrance .content-txt .vanilla-taste {
    background-size: 540px;
  }
}
@media screen and (max-width: 576px) {
  #more-fragrance .content-txt .vanilla-taste {
    padding-top: 100px;
    gap: 1rem;
  }
}
@media (min-width: 992px) {
  #more-fragrance .content-txt .vanilla-taste .circle {
    margin-top: 80px;
  }
}
#more-fragrance .content-txt .vanilla-taste .circle img:nth-of-type(1) {
  margin-top: -240px;
}
#more-fragrance .content-txt .vanilla-taste .circle img:nth-of-type(2) {
  top: 20px;
  left: -20px;
  max-width: 70.08px;
}
@media (min-width: 768px) {
  #more-fragrance .content-txt .vanilla-taste .circle img:nth-of-type(2) {
    left: -8px;
  }
}
#more-fragrance .content-txt .vanilla-taste .img-three {
  margin-top: 2rem;
}
@media (min-width: 768px) {
  #more-fragrance .content-txt .vanilla-taste .img-three {
    margin-top: 3rem;
  }
}
@media (min-width: 768px) {
  #more-fragrance .content-txt .vanilla-taste .content-txt__text {
    margin-top: 3rem;
  }
}
#more-fragrance .content-txt .vanilla-taste .content-txt__text .vanilla-photo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
  margin-top: 2rem;
}
@media (min-width: 768px) {
  #more-fragrance .content-txt .vanilla-taste .content-txt__text .vanilla-photo {
    gap: 2rem;
    max-width: 382px;
    margin-left: auto;
    margin-right: auto;
  }
}
#more-fragrance .content-txt .vanilla-taste .content-txt__text .vanilla-photo img {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50em;
}
@media (min-width: 768px) {
  #more-fragrance .content-txt .vanilla-taste .content-txt__text .vanilla-photo img {
    width: 175px;
  }
}
#more-fragrance .content-txt .lemon-taste {
  gap: 2.5rem;
  padding-bottom: 100px;
}
@media (min-width: 992px) {
  #more-fragrance .content-txt .lemon-taste {
    gap: 4rem;
    background: url(/images/product/probiotic/new/lemontree-BG.jpg) center left/50% no-repeat, #f2f1ed;
  }
}
@media (min-width: 768px) {
  #more-fragrance .content-txt .lemon-taste .m-bottom {
    margin-top: 3rem;
  }
}
@media (min-width: 992px) {
  #more-fragrance .content-txt .lemon-taste .circle {
    margin-top: 180px;
  }
}
#more-fragrance .content-txt .lemon-taste .circle img:first-child {
  margin-top: -350px;
}
#more-fragrance .content-txt .lemon-taste .circle img:nth-child(2) {
  top: 0;
  left: -10px;
  max-width: 70.08px;
}
@media (min-width: 768px) {
  #more-fragrance .content-txt .lemon-taste .circle img:nth-child(2) {
    top: 1rem;
    left: 0;
  }
}
#more-fragrance .content-txt .lemon-taste .circle span {
  font-family: "Outfit", sans-serif;
}
#more-fragrance .content-txt .lemon-taste .rounding-cut-part {
  position: relative;
  margin-bottom: 2rem;
}
@media (min-width: 992px) {
  #more-fragrance .content-txt .lemon-taste .rounding-cut-part {
    margin-bottom: 3rem;
  }
}
#more-fragrance .content-txt .lemon-taste .rounding-cut-part .rounding-cut {
  border-radius: 25px;
  aspect-ratio: 2/1;
  --position-vw:18vw;
}
@media (min-width: 992px) {
  #more-fragrance .content-txt .lemon-taste .rounding-cut-part .rounding-cut {
    --position-vw:90px;
  }
}
#more-fragrance .content-txt .lemon-taste .rounding-cut-part .rounding-cut:first-child {
  position: absolute;
  height: 23vw;
  right: 0;
  top: calc(var(--position-vw) * -1);
  max-width: min(50%, 250px);
}
#more-fragrance .content-txt .lemon-taste .rounding-cut-part .rounding-cut:first-child.bg-lazyload {
  background: url(/images/product/probiotic/new/wood-logo.jpg) center/cover no-repeat;
}
@media (min-width: 992px) {
  #more-fragrance .content-txt .lemon-taste .rounding-cut-part .rounding-cut:first-child {
    height: 115px;
  }
}
#more-fragrance .content-txt .lemon-taste .rounding-cut-part .rounding-cut:nth-child(2) {
  margin-top: calc(var(--position-vw) + 0.5rem);
  max-width: min(90%, 392px);
}
#more-fragrance .content-txt .lemon-taste .rounding-cut-part .rounding-cut:nth-child(2).bg-lazyload {
  background: url(/images/product/probiotic/new/Ama-lemon.jpg) center/cover no-repeat;
}
#more-fragrance .content-txt .lemon-taste .circle-cut-part {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (min-width: 768px) {
  #more-fragrance .content-txt .lemon-taste .circle-cut-part {
    grid-area: 2/1/3/3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: min(90%, 625px);
    margin-left: auto;
    margin-right: auto;
  }
}
#more-fragrance .content-txt .lemon-taste .circle-cut-part .circle-cut {
  --marginleft:-13.25vw;
  width: 35vw;
  border-radius: 50%;
  aspect-ratio: 1/1;
}
#more-fragrance .content-txt .lemon-taste .circle-cut-part .circle-cut.bg-lazyload:nth-child(1) {
  background: url(/images/product/probiotic/new/lemontree-01.jpg) center/cover no-repeat;
}
#more-fragrance .content-txt .lemon-taste .circle-cut-part .circle-cut.bg-lazyload:nth-child(2) {
  margin-left: var(--marginleft);
  background: url(/images/product/probiotic/new/lemontree-02.jpg) center/cover no-repeat;
}
#more-fragrance .content-txt .lemon-taste .circle-cut-part .circle-cut.bg-lazyload:nth-child(3) {
  margin-left: var(--marginleft);
  background: url(/images/product/probiotic/new/lemontree-03.jpg) center/cover no-repeat;
}
@media (min-width: 768px) {
  #more-fragrance .content-txt .lemon-taste .circle-cut-part .circle-cut.bg-lazyload:nth-child(2) {
    background: url(/images/product/probiotic/new/lemontree-02.jpg) center/cover no-repeat;
  }
  #more-fragrance .content-txt .lemon-taste .circle-cut-part .circle-cut.bg-lazyload:nth-child(3) {
    background: url(/images/product/probiotic/new/lemontree-03.jpg) center/cover no-repeat;
  }
}
@media (min-width: 768px) {
  #more-fragrance .content-txt .lemon-taste .circle-cut-part .circle-cut {
    --marginleft:auto;
    width: min(80%, 173px);
    margin: auto;
  }
}
@media screen and (max-width: 576px) {
  #more-fragrance .content-txt .lemon-taste .lemonvit-part img {
    margin: 1rem 0.5rem 0.5rem 0.5rem;
  }
}
@media (min-width: 768px) {
  #more-fragrance .content-txt .lemon-taste .lemonvit-part {
    grid-area: 3/1/4/3;
    display: grid;
    grid-template-columns: calc(55% - 1.5rem) calc(45% - 1.5rem);
    gap: 1rem 3rem;
  }
}
#more-fragrance .content-txt .lemon-taste .lemonvit-part .color-center {
  text-align: center;
}
@media (min-width: 768px) {
  #more-fragrance .content-txt .lemon-taste .lemonvit-part .color-center {
    grid-area: 2/1/3/3;
  }
}
#more-fragrance .content-txt .lemon-taste .green, #more-fragrance .content-txt .lemon-taste .org {
  display: inline-block;
  padding: 6px 8px;
  margin: 3px 1.5px;
  letter-spacing: 0;
  border-radius: 100px/50px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(149, 202, 101)), color-stop(50%, rgb(220, 247, 195)), to(rgb(149, 202, 101)));
  background: linear-gradient(to bottom, rgb(149, 202, 101) 0%, rgb(220, 247, 195) 50%, rgb(149, 202, 101) 100%);
}
#more-fragrance .content-txt .lemon-taste .green {
  color: #417017;
}
#more-fragrance .content-txt .lemon-taste .green.round {
  border-radius: 50em;
  padding: 3px 10px;
}
#more-fragrance .content-txt .lemon-taste .org {
  color: #dc7b00;
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(240, 182, 92)), color-stop(50%, rgb(251, 232, 201)), to(rgb(240, 182, 92)));
  background: linear-gradient(to bottom, rgb(240, 182, 92) 0%, rgb(251, 232, 201) 50%, rgb(240, 182, 92) 100%);
}

/*功效數據跳出頁*/
#more-dataNum .gradient-box {
  background: linear-gradient(to bottom, rgb(238, 239, 241) 0px, rgba(255, 255, 255, 0) var(--gradientboxH));
}
#more-dataNum .popup-inner {
  --jumpwide:90%;
}
#more-dataNum .popup-inner.bg-lazyload {
  background: url(/images/product/probiotic/new/chart-BG02.jpg) no-repeat right -300px top -100px/700px, #eeeff1;
}
@media (min-width: 768px) {
  #more-dataNum .popup-inner.bg-lazyload {
    background: url(/images/product/probiotic/new/chart-BG02.jpg) no-repeat right -200px top -50px/1150px, #eeeff1;
  }
}
#more-dataNum .popup-inner .content-txt .catalog-box {
  margin-bottom: 1rem;
}
#more-dataNum .popup-inner .content-txt .catalog-box span {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 2px 13px 0 13px;
  color: #333333;
  background-color: #30b8e1;
  border-radius: 5px;
}
#more-dataNum .popup-inner .content-txt .catalog-box p {
  margin-bottom: 1.2rem;
}
#more-dataNum .popup-inner .content-txt .conclusion {
  width: 100%;
  margin: 0 0 2rem 0;
  padding: 1rem 0;
  text-align: center;
  background: -webkit-gradient(linear, left top, right top, from(rgba(238, 239, 241, 0.5)), color-stop(20%, rgb(196, 168, 105)), color-stop(50%, rgb(235, 202, 109)), color-stop(80%, rgb(196, 168, 105)), to(rgba(238, 239, 241, 0.5)));
  background: linear-gradient(to right, rgba(238, 239, 241, 0.5) 0%, rgb(196, 168, 105) 20%, rgb(235, 202, 109) 50%, rgb(196, 168, 105) 80%, rgba(238, 239, 241, 0.5) 100%);
}
#more-dataNum .popup-inner .content-txt .conclusion p {
  color: #442d0f;
  line-height: 1.5;
}
#more-dataNum .popup-inner .content-txt .conclusion p:nth-child(1) {
  font-size: 1.3rem;
  font-weight: bold;
}
#more-dataNum .popup-inner .content-txt .conclusion p:nth-child(2) {
  font-size: 1rem;
  font-weight: 500;
}
#more-dataNum .popup-inner .content-txt .conclusion small {
  font-size: 14px;
}
@media (min-width: 768px) {
  #more-dataNum .popup-inner .content-txt .conclusion {
    width: var(--jumpwide);
    margin: 2rem auto 4rem auto;
    padding: 1.5rem 0;
  }
  #more-dataNum .popup-inner .content-txt .conclusion p {
    line-height: 1.3;
  }
  #more-dataNum .popup-inner .content-txt .conclusion p:nth-child(1) {
    font-size: 28px;
  }
  #more-dataNum .popup-inner .content-txt .conclusion p:nth-child(2) {
    font-size: 20px;
  }
}
#more-dataNum .popup-inner .content-txt .twochart {
  width: var(--jumpwide);
  margin-bottom: 1rem;
}
#more-dataNum .popup-inner .content-txt .chart-object {
  text-align: center;
  margin-bottom: 1rem;
}
#more-dataNum .popup-inner .content-txt .chart-object p {
  display: inline-block;
  margin-right: 1rem;
  margin-bottom: 5px;
  --objectcircle:25px;
}
#more-dataNum .popup-inner .content-txt .chart-object p:first-child::before, #more-dataNum .popup-inner .content-txt .chart-object p:last-child::before {
  display: inline-grid;
  place-content: center;
  width: var(--objectcircle);
  height: var(--objectcircle);
  margin-right: 5px;
  font-size: 0.9rem;
  line-height: 1;
  border-radius: 50em;
  border: 2px solid rgba(75, 75, 75, 0.6196078431);
}
#more-dataNum .popup-inner .content-txt .chart-object p:first-child::before {
  content: "敏";
}
#more-dataNum .popup-inner .content-txt .chart-object p:last-child::before {
  content: "污";
}
#more-dataNum .popup-inner .content-txt .blue-box {
  width: min(100%, 825px);
  margin: auto;
  padding: 1.5rem 1rem;
  background: #d4eaf0;
  border-radius: 20px;
}
@media (min-width: 768px) {
  #more-dataNum .popup-inner .content-txt .blue-box {
    padding: 2rem 3rem;
  }
}
#more-dataNum .popup-inner .content-txt .blue-box span {
  font-size: 14px;
  color: #53818d;
  font-weight: 400;
}
#more-dataNum .popup-inner .content-txt .blue-box i {
  font-size: 12px;
}
#more-dataNum .popup-inner .content-txt .hr {
  margin: 1rem 0;
}
@media (min-width: 768px) {
  #more-dataNum .popup-inner .content-txt .hr {
    margin: 2rem 0;
  }
}

/*用心對待跳出頁*/
#more-manufacturing {
  --makeblue01:#048d99;
  --makeblue02:#3672bb;
}
@media (min-width: 768px) {
  #more-manufacturing .gradient-box {
    background: linear-gradient(to bottom, rgb(211, 234, 244) 0px, rgba(255, 255, 255, 0) var(--gradientboxH));
  }
}
#more-manufacturing .popup-inner {
  overflow-x: hidden;
}
#more-manufacturing .popup-inner.bg-lazyload {
  background: url(/images/product/probiotic/new/manufacturing-BG01.webp) no-repeat top center/700px, linear-gradient(135deg, rgb(213, 235, 247) 50%, rgb(161, 209, 225) 100%);
}
@media (min-width: 768px) {
  #more-manufacturing .popup-inner.bg-lazyload {
    background: url(/images/product/probiotic/new/manufacturing-BG01.webp) no-repeat top center/contain, linear-gradient(135deg, rgb(213, 235, 247) 50%, rgb(161, 209, 225) 100%);
  }
}
#more-manufacturing .popup-h2part {
  margin-bottom: 6rem;
}
#more-manufacturing .j-step-hr {
  width: 100%;
  margin: 2rem 0;
  border-bottom: 0px solid #84a1b2;
}
@media (min-width: 768px) {
  #more-manufacturing .j-step-hr {
    margin: 3rem 0;
  }
}
#more-manufacturing .j-step__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  color: #225164;
}
@media (min-width: 768px) {
  #more-manufacturing .j-step__content {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    line-height: 1.7;
  }
}
#more-manufacturing .j-step__content ol {
  list-style: revert;
  padding-left: 20px;
}
#more-manufacturing .j-step__content ol.ol-one {
  margin-bottom: 8px;
}
#more-manufacturing .j-step__content ol.ol-two li {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #b1d8ee;
  background-color: #0c2e3c;
  border-bottom: 1px solid #add7e5;
}
#more-manufacturing .j-step__content ol.ol-two li::marker {
  color: #225164;
}
#more-manufacturing .j-step__content .font-w {
  font-weight: bold;
  background-color: rgba(140, 185, 231, 0.5);
}
#more-manufacturing .Ooka-title {
  padding-bottom: 2rem;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.3;
}
#more-manufacturing .Ooka-title .blue-01 {
  color: var(--makeblue01);
}
#more-manufacturing .Ooka-title .blue-02 {
  color: var(--makeblue02);
}
#more-manufacturing .Ooka-title .blue-03 {
  color: #2564d9;
}
#more-manufacturing .name-bg {
  margin-right: 5px;
  padding: 1px 5px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8156862745);
  border-radius: 5px;
}
#more-manufacturing .name-bg.blue-01 {
  background-color: var(--makeblue01);
}
#more-manufacturing .name-bg.blue-02 {
  background-color: var(--makeblue02);
}
#more-manufacturing .img-size {
  width: 180px;
  margin: 1rem auto 2.5rem auto;
}
@media (min-width: 992px) {
  #more-manufacturing .img-size02 {
    margin-top: -4rem;
    margin-bottom: 2rem;
    width: 500px;
  }
}
#more-manufacturing .j-step-box .j-step {
  position: relative;
  padding-left: 55px;
}
#more-manufacturing .j-step-box .j-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 90px;
  width: 100%;
  z-index: -1;
}
@media (min-width: 768px) {
  #more-manufacturing .j-step-box .j-step::before {
    width: 350px;
  }
}
#more-manufacturing .j-step-box .j-step .color-border {
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 1rem;
  padding: 3px 5px 1px 5px;
  line-height: 1;
  font-weight: 600;
  background-color: #87d3eb;
  border-radius: 50em;
}
#more-manufacturing .j-step-box.one .j-step::before {
  background: url(/images/product/probiotic/new/j-step1.svg) no-repeat 0px 28px/42px, url(/images/product/probiotic/new/manufacturing-title-bg-W.png) no-repeat -51px 5px/450px;
}
#more-manufacturing .j-step-box.one .j-step .color-border {
  background-color: #87d3eb;
}
@media (min-width: 768px) {
  #more-manufacturing .j-step-box.two .j-step__content {
    gap: 80px;
  }
}
#more-manufacturing .j-step-box.two .j-step::before {
  background: url(/images/product/probiotic/new/j-step2.svg) no-repeat 0px 28px/42px, url(/images/product/probiotic/new/manufacturing-title-bg-W.png) no-repeat -51px 5px/450px;
}
#more-manufacturing .j-step-box.two .j-step .color-border {
  background-color: #7dc2ec;
}
@media (min-width: 768px) {
  #more-manufacturing .j-step-box.three .j-step__content {
    grid-template-columns: 1fr 265px;
    gap: 80px;
  }
}
#more-manufacturing .j-step-box.three .j-step::before {
  background: url(/images/product/probiotic/new/j-step3.svg) no-repeat 0px 28px/42px, url(/images/product/probiotic/new/manufacturing-title-bg-W.png) no-repeat -100px 5px/450px;
}
#more-manufacturing .j-step-box.three .j-step .color-border {
  background-color: #92bae5;
}

@-webkit-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes scale {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes bubble-expand {
  from {
    width: 0px;
  }
  to {
    width: var(--expanded);
  }
}
@keyframes bubble-expand {
  from {
    width: 0px;
  }
  to {
    width: var(--expanded);
  }
}
@-webkit-keyframes in-real-bubble {
  from {
    background-color: rgba(33, 33, 33, 0);
  }
  to {
    background-color: rgba(33, 33, 33, 0.6);
  }
}
@keyframes in-real-bubble {
  from {
    background-color: rgba(33, 33, 33, 0);
  }
  to {
    background-color: rgba(33, 33, 33, 0.6);
  }
}
@-webkit-keyframes in-white-bubble {
  0% {
    -webkit-transform: translatey(400px) scale(0);
            transform: translatey(400px) scale(0);
    opacity: 0;
  }
  40% {
    -webkit-transform: translatey(0px) scale(1.5);
            transform: translatey(0px) scale(1.5);
    opacity: 1;
  }
  50% {
    -webkit-transform: translatey(0px) scale(1.6);
            transform: translatey(0px) scale(1.6);
    opacity: 1;
  }
  80% {
    -webkit-transform: translatey(0px) scale(1.5);
            transform: translatey(0px) scale(1.5);
    opacity: 1;
  }
  100% {
    -webkit-transform: translatey(0px) scale(0);
            transform: translatey(0px) scale(0);
    opacity: 1;
  }
}
@keyframes in-white-bubble {
  0% {
    -webkit-transform: translatey(400px) scale(0);
            transform: translatey(400px) scale(0);
    opacity: 0;
  }
  40% {
    -webkit-transform: translatey(0px) scale(1.5);
            transform: translatey(0px) scale(1.5);
    opacity: 1;
  }
  50% {
    -webkit-transform: translatey(0px) scale(1.6);
            transform: translatey(0px) scale(1.6);
    opacity: 1;
  }
  80% {
    -webkit-transform: translatey(0px) scale(1.5);
            transform: translatey(0px) scale(1.5);
    opacity: 1;
  }
  100% {
    -webkit-transform: translatey(0px) scale(0);
            transform: translatey(0px) scale(0);
    opacity: 1;
  }
}
@-webkit-keyframes in-blue-bubble {
  0% {
    -webkit-transform: translatey(400px);
            transform: translatey(400px);
    opacity: 1;
  }
  40% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
    opacity: 1;
  }
  60% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
    opacity: 0;
  }
}
@keyframes in-blue-bubble {
  0% {
    -webkit-transform: translatey(400px);
            transform: translatey(400px);
    opacity: 1;
  }
  40% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
    opacity: 1;
  }
  60% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
    opacity: 0;
  }
}
@-webkit-keyframes swiperBGmove {
  from {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
    scale: 0.95;
  }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    scale: 1;
  }
}
@keyframes swiperBGmove {
  from {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
    scale: 0.95;
  }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    scale: 1;
  }
}
@-webkit-keyframes mapmove {
  from {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes mapmove {
  from {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes mapmove02 {
  from {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
  }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes mapmove02 {
  from {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
  }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes cloudrota {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    opacity: 1;
    scale: 1;
  }
  80% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    opacity: 1;
    scale: 1;
  }
  90% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
    opacity: 0;
    scale: 0.9;
  }
  91% {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
    opacity: 0;
    scale: 1.1;
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    opacity: 1;
    scale: 1;
  }
}
@keyframes cloudrota {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    opacity: 1;
    scale: 1;
  }
  80% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    opacity: 1;
    scale: 1;
  }
  90% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
    opacity: 0;
    scale: 0.9;
  }
  91% {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
    opacity: 0;
    scale: 1.1;
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    opacity: 1;
    scale: 1;
  }
}
@-webkit-keyframes haloopacty {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
@keyframes haloopacty {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
@-webkit-keyframes icon3move {
  from {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes icon3move {
  from {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes linkarrow {
  0% {
    -webkit-transform: translate(0%, 0px);
            transform: translate(0%, 0px);
  }
  100% {
    -webkit-transform: translate(60%, 0px);
            transform: translate(60%, 0px);
  }
}
@keyframes linkarrow {
  0% {
    -webkit-transform: translate(0%, 0px);
            transform: translate(0%, 0px);
  }
  100% {
    -webkit-transform: translate(60%, 0px);
            transform: translate(60%, 0px);
  }
}
@media screen and (min-width: 413px) {
  #bestChoose {
    height: 1600px;
  }
}
@media screen and (min-width: 576px) {
  #bestChoose {
    height: 1700px;
  }
  #exclusive {
    height: 975px;
  }
  #guard {
    height: 1295px;
  }
  #taste {
    height: 902px;
  }
  #adsection {
    height: 590px;
  }
  #dataChart {
    height: 1480px;
  }
  #Certification {
    height: 1546px;
  }
}
@media (min-width: 768px) {
  #bestChoose, #exclusive, #guard, #taste, #adsection, #dataChart, #Certification {
    height: auto;
  }
}
@-webkit-keyframes mappointani {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    -webkit-box-shadow: 0 0 0 3px rgba(var(--pointcolor), 0.05);
            box-shadow: 0 0 0 3px rgba(var(--pointcolor), 0.05);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-box-shadow: 0 0 0 8px rgba(var(--pointcolor), 0.3), 0 0 0 16px rgba(var(--pointcolor), 0.2);
            box-shadow: 0 0 0 8px rgba(var(--pointcolor), 0.3), 0 0 0 16px rgba(var(--pointcolor), 0.2);
  }
  100% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    -webkit-box-shadow: 0 0 0 3px rgba(var(--pointcolor), 0.05);
            box-shadow: 0 0 0 3px rgba(var(--pointcolor), 0.05);
  }
}
@keyframes mappointani {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    -webkit-box-shadow: 0 0 0 3px rgba(var(--pointcolor), 0.05);
            box-shadow: 0 0 0 3px rgba(var(--pointcolor), 0.05);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-box-shadow: 0 0 0 8px rgba(var(--pointcolor), 0.3), 0 0 0 16px rgba(var(--pointcolor), 0.2);
            box-shadow: 0 0 0 8px rgba(var(--pointcolor), 0.3), 0 0 0 16px rgba(var(--pointcolor), 0.2);
  }
  100% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    -webkit-box-shadow: 0 0 0 3px rgba(var(--pointcolor), 0.05);
            box-shadow: 0 0 0 3px rgba(var(--pointcolor), 0.05);
  }
}
.wrapper-box {
  padding-top: 2rem;
  z-index: 9999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
}
.wrapper-box.no-open {
  display: none;
}
.wrapper-box .box {
  position: relative;
  width: min(90%, 1400px);
  height: calc(100% - 2rem);
  margin: 0 auto;
}
.wrapper-box .box .iframe-style {
  width: 100%;
  height: 100%;
  border: 0;
}
.wrapper-box .box .close {
  font-family: "Outfit", sans-serif;
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #000;
  color: #fff;
  font-weight: 700;
}