@charset "UTF-8";
.masthead {
  width: 100vw;
  height: 100vh;
  padding: 0px;
  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;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1; }
  .masthead__kv {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("../images/healthKv.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; }
    @media screen and (max-width: 1024px) {
      .masthead__kv {
        background-image: url("../images/m-healthKv.jpg"); } }

.progress__wrapper {
  width: 100%;
  max-width: 1000px;
  margin: auto; }
  @media screen and (max-width: 1366px) {
    .progress__wrapper {
      max-width: 900px; } }
  @media screen and (max-width: 768px) {
    .progress__wrapper {
      width: 90%; } }
.progress__title {
  text-align: center;
  margin-bottom: 30px; }
  @media screen and (max-width: 768px) {
    .progress__title {
      margin-bottom: 20px; } }
.progress__h2 {
  font-size: 3.75em;
  line-height: 1.4em;
  font-weight: lighter;
  color: #00631B; }
  @media screen and (max-width: 1366px) {
    .progress__h2 {
      font-size: 3em; } }
  @media screen and (max-width: 768px) {
    .progress__h2 {
      font-size: 2em; } }
.progress__span {
  font-weight: 400; }
.progress__note {
  margin-top: 30px;
  font-size: 1.875em;
  color: #434444; }
  @media screen and (max-width: 1366px) {
    .progress__note {
      font-size: 1.5em; } }
  @media screen and (max-width: 768px) {
    .progress__note {
      font-size: 1.125em; } }
.progress__kind {
  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;
  color: #434444;
  font-size: 1.125em; }
  @media screen and (max-width: 768px) {
    .progress__kind {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      width: 80%;
      margin: auto;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start; } }
  @media screen and (max-width: 320px) {
    .progress__kind {
      width: 90%; } }
.progress__kindLeft, .progress__kindRight {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
.progress__kindLeft {
  margin-right: 15px; }
  @media screen and (max-width: 768px) {
    .progress__kindLeft {
      margin-right: 0;
      margin-bottom: 5px; } }
  .progress__kindLeft .progress__circle {
    background-color: #3A928C; }
.progress__kindRight .progress__circle {
  background-color: #C7542B; }
.progress__circle {
  width: 15px;
  height: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 50%;
  background: red;
  margin-right: 10px; }
.progress__name {
  font-size: 1em;
  color: #4D4D4D; }
  @media screen and (max-width: 768px) {
    .progress__name {
      font-size: 0.75em; } }
.progress__bar {
  margin-top: 30px;
  position: relative; }
  .progress__bar::before {
    content: '';
    background-image: url("../images/rainbowB.png");
    background-size: auto 100%;
    width: 5px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 12%; }
    @media screen and (max-width: 1366px) {
      .progress__bar::before {
        left: 13%; } }
    @media screen and (max-width: 768px) {
      .progress__bar::before {
        left: 13%; } }
    @media screen and (max-width: 411px) {
      .progress__bar::before {
        left: 23%; } }
    @media screen and (max-width: 375px) {
      .progress__bar::before {
        left: 26%; } }
    @media screen and (max-width: 320px) {
      .progress__bar::before {
        left: 30%; } }
.progress__item {
  position: relative;
  width: 100%;
  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; }
.progress__type {
  width: 120px;
  font-size: 1.5em;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  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: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 10px; }
  @media screen and (max-width: 1366px) {
    .progress__type {
      font-size: 1.2em; } }
  @media screen and (max-width: 768px) {
    .progress__type {
      width: 90px;
      font-size: 1em;
      -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
      flex: 1 0 auto; } }
.progress__lineBox {
  width: 74%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px 10px; }
  @media screen and (max-width: 768px) {
    .progress__lineBox {
      width: 100%;
      padding-right: 0px; } }
.progress__top {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 5px 0px;
  padding: 16px 0px;
  border-radius: 40px;
  background-color: #3A928C; }
  @media screen and (max-width: 768px) {
    .progress__top {
      overflow: hidden;
      padding: 8px 0px; } }
.progress__down {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 5px 0px;
  padding: 16px 0px;
  border-radius: 40px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 2; }
  @media screen and (max-width: 768px) {
    .progress__down {
      padding: 8px 0px; } }
.progress__downLine {
  width: 100%;
  height: 32px;
  display: block;
  background-color: #C7542B;
  position: absolute;
  top: 0%;
  left: 0%; }
  @media screen and (max-width: 768px) {
    .progress__downLine {
      height: 16px; } }
.progress__topName {
  font-size: 1.125em;
  width: 65px;
  white-space: nowrap;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  -ms-flex-item-align: start;
  align-self: start;
  position: absolute;
  top: 50%;
  right: -80px;
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  color: #434444; }
  @media screen and (max-width: 1366px) {
    .progress__topName {
      font-size: 1em; } }
  @media screen and (max-width: 768px) {
    .progress__topName {
      font-size: 0.75em;
      color: white;
      text-align: right; } }
.progress__downName {
  font-size: 1.125em;
  white-space: nowrap;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  color: #434444; }
  @media screen and (max-width: 1366px) {
    .progress__downName {
      font-size: 1em; } }
  @media screen and (max-width: 768px) {
    .progress__downName {
      font-size: 0.75em; } }
@media screen and (max-width: 768px) {
  .progress__item:nth-of-type(1) .progress__topName {
    right: 10px; } }
.progress__item:nth-of-type(1) .progress__downLine {
  width: 6%; }
.progress__item:nth-of-type(1) .progress__downName {
  right: -110px; }
  @media screen and (max-width: 768px) {
    .progress__item:nth-of-type(1) .progress__downName {
      right: -70px; } }
@media screen and (max-width: 768px) {
  .progress__item:nth-of-type(2) .progress__topName {
    right: 10px; } }
.progress__item:nth-of-type(2) .progress__downLine {
  width: 10%; }
.progress__item:nth-of-type(2) .progress__downName {
  right: -125px; }
  @media screen and (max-width: 768px) {
    .progress__item:nth-of-type(2) .progress__downName {
      right: -85px; } }
@media screen and (max-width: 768px) {
  .progress__item:nth-of-type(3) .progress__topName {
    right: 26px; } }
.progress__item:nth-of-type(3) .progress__downLine {
  width: 7%; }
.progress__item:nth-of-type(3) .progress__downName {
  right: -135px; }
  @media screen and (max-width: 768px) {
    .progress__item:nth-of-type(3) .progress__downName {
      right: -95px; } }
@media screen and (max-width: 768px) {
  .progress__item:nth-of-type(4) .progress__topName {
    right: 30px; } }
.progress__item:nth-of-type(4) .progress__downLine {
  width: 22%; }
.progress__item:nth-of-type(4) .progress__downName {
  right: -155px; }
  @media screen and (max-width: 768px) {
    .progress__item:nth-of-type(4) .progress__downName {
      right: -100px; } }
@media screen and (max-width: 768px) {
  .progress__item:nth-of-type(5) .progress__topName {
    right: 10px; } }
.progress__item:nth-of-type(5) .progress__downLine {
  width: 50%; }
.progress__item:nth-of-type(5) .progress__downName {
  right: -115px; }
  @media screen and (max-width: 768px) {
    .progress__item:nth-of-type(5) .progress__downName {
      right: -75px; } }
@media screen and (max-width: 768px) {
  .progress__item:nth-of-type(6) .progress__topName {
    right: 10px; } }
.progress__item:nth-of-type(6) .progress__downLine {
  width: 25%; }
.progress__item:nth-of-type(6) .progress__downName {
  right: -115px; }
  @media screen and (max-width: 768px) {
    .progress__item:nth-of-type(6) .progress__downName {
      right: -80px; } }
@media screen and (max-width: 768px) {
  .progress__item:nth-of-type(7) .progress__topName {
    right: 20px; } }
.progress__item:nth-of-type(7) .progress__downLine {
  width: 33%; }
.progress__item:nth-of-type(7) .progress__downName {
  right: -110px; }
  @media screen and (max-width: 768px) {
    .progress__item:nth-of-type(7) .progress__downName {
      right: -70px; } }
@media screen and (max-width: 768px) {
  .progress__item:nth-of-type(8) .progress__topName {
    right: 15px; } }
.progress__item:nth-of-type(8) .progress__downLine {
  width: 0%; }
.progress__item:nth-of-type(8) .progress__downName {
  left: 10px; }
@media screen and (max-width: 768px) {
  .progress__item:nth-of-type(9) .progress__topName {
    right: 20px; } }
.progress__item:nth-of-type(9) .progress__downLine {
  width: 0%; }
.progress__item:nth-of-type(9) .progress__downName {
  left: 10px; }
.progress__safe {
  width: 100%;
  margin: auto;
  text-align: center;
  margin-top: 50px; }
  @media screen and (max-width: 768px) {
    .progress__safe {
      text-align: justify;
      margin-top: 30px; } }
.progress__safeP {
  color: #696969;
  font-size: 0.875em;
  line-height: 1.4em; }
  @media screen and (max-width: 768px) {
    .progress__safeP {
      font-size: 0.75em; } }
@media screen and (max-width: 768px) {
  .progress__safeSpan {
    display: block;
    margin-top: 10px; } }

.smart__wrapper {
  width: 100%;
  max-width: 1000px;
  margin: auto; }
  @media screen and (max-width: 1366px) {
    .smart__wrapper {
      max-width: 900px; } }
  @media screen and (max-width: 768px) {
    .smart__wrapper {
      width: 90%; } }
.smart__title {
  text-align: center;
  margin-bottom: 30px; }
  @media screen and (max-width: 768px) {
    .smart__title {
      margin-bottom: 20px; } }
.smart__h2 {
  font-size: 3.75em;
  line-height: 1.4em;
  font-weight: lighter;
  color: #00631B; }
  @media screen and (max-width: 1366px) {
    .smart__h2 {
      font-size: 3em; } }
  @media screen and (max-width: 768px) {
    .smart__h2 {
      font-size: 2em; } }
.smart__note {
  margin-top: 30px;
  font-size: 1.875em;
  color: #434444; }
  @media screen and (max-width: 1366px) {
    .smart__note {
      font-size: 1.5em; } }
  @media screen and (max-width: 768px) {
    .smart__note {
      font-size: 1.125em; } }
.smart__info {
  width: 100%;
  max-width: 900px;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 120px; }
  @media screen and (max-width: 1366px) {
    .smart__info {
      width: 80%; } }
  @media screen and (max-width: 768px) {
    .smart__info {
      width: 100%;
      margin-top: 25px;
      margin-bottom: 70px; } }
.smart__item {
  width: 27%; }
  @media screen and (max-width: 768px) {
    .smart__item {
      width: 30%; } }
.smart__circle {
  width: 100%;
  padding-bottom: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px solid #3A928C;
  position: relative; }
.smart__p {
  position: absolute;
  top: 20%;
  left: 50%;
  -webkit-transform: translate(-50%, -20%);
  -ms-transform: translate(-50%, -20%);
  transform: translate(-50%, -20%);
  font-size: 1.4em;
  color: #00631B;
  line-height: 1.4em;
  text-align: center;
  white-space: nowrap; }
  @media screen and (max-width: 1366px) {
    .smart__p {
      font-size: 1.2em; } }
  @media screen and (max-width: 768px) {
    .smart__p {
      font-size: 0.8em; } }
  @media screen and (max-width: 320px) {
    .smart__p {
      font-size: 0.6em; } }
.smart__span {
  font-size: 1.4em;
  font-weight: 600;
  color: #C7542B; }
.smart__imgBox {
  position: absolute;
  bottom: -15%;
  left: 50%;
  -webkit-transform: translate(-50%, 15%);
  -ms-transform: translate(-50%, 15%);
  transform: translate(-50%, 15%); }
  @media screen and (max-width: 1366px) {
    .smart__imgBox {
      bottom: -18%; } }
  @media screen and (max-width: 768px) {
    .smart__imgBox {
      bottom: -15%; } }
.smart__img {
  width: 200px; }
  @media screen and (max-width: 1366px) {
    .smart__img {
      width: 140px; } }
  @media screen and (max-width: 768px) {
    .smart__img {
      width: 140px; } }
  @media screen and (max-width: 375px) {
    .smart__img {
      width: 70px; } }
.smart__text {
  font-size: 1.125em;
  line-height: 1.2em;
  color: #696969;
  margin: 10px 0px;
  text-align: center; }
  @media screen and (max-width: 768px) {
    .smart__text {
      display: none; } }
.smart__mobile {
  display: none; }
  @media screen and (max-width: 768px) {
    .smart__mobile {
      display: block; } }
.smart__mobileP {
  font-size: 1em;
  line-height: 1.6em;
  color: #696969;
  margin: 10px 0px;
  text-align: justify; }

.link__wrapper {
  width: 100%;
  max-width: 1000px;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  z-index: 3; }
  @media screen and (max-width: 1366px) {
    .link__wrapper {
      max-width: 900px; } }
  @media screen and (max-width: 768px) {
    .link__wrapper {
      width: 90%; } }
.link__a {
  width: 48%;
  display: block; }
  .link__a:first-child .link__btn {
    background-image: url("../images/one.jpg"); }
    .link__a:first-child .link__btn::after {
      content: '進化植萃力守護再升級'; }
      @media screen and (max-width: 768px) {
        .link__a:first-child .link__btn::after {
          content: '進化植萃力\A守護再升級';
          white-space: pre;
          line-height: 1.2em; } }
  .link__a:last-child .link__btn {
    background-image: url("../images/two.jpg"); }
.link__btn {
  width: 100%;
  padding-bottom: 56.28%;
  height: 0;
  position: relative;
  background-size: cover;
  background-position: center; }
  .link__btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s; }
  .link__btn::after {
    content: '營養知多少';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.2em;
    z-index: 2;
    width: 100%;
    text-align: center; }
    @media screen and (max-width: 768px) {
      .link__btn::after {
        font-size: 1em; } }
  .link__btn:hover::after {
    color: black; }
  .link__btn:hover::before {
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    opacity: 0; }

.scrollYt {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 2; }
  .scrollYt__img {
    width: 100%;
    position: relative; }
  .scrollYt__item {
    position: absolute; }
    .scrollYt__item:nth-of-type(1) {
      width: 25%;
      top: 6%;
      left: -9%; }
      @media screen and (max-width: 1366px) {
        .scrollYt__item:nth-of-type(1) {
          width: 20%; } }
      @media screen and (max-width: 768px) {
        .scrollYt__item:nth-of-type(1) {
          width: 25%;
          top: -8%;
          left: -12%; } }
      .scrollYt__item:nth-of-type(1) .scrollYt__img {
        max-width: 448px; }
    .scrollYt__item:nth-of-type(2) {
      width: 10%;
      top: 51%;
      left: 12%; }
      @media screen and (max-width: 1366px) {
        .scrollYt__item:nth-of-type(2) {
          top: 55%;
          left: 5%; } }
      @media screen and (max-width: 768px) {
        .scrollYt__item:nth-of-type(2) {
          width: 22%;
          top: 58%;
          left: -3%; } }
      .scrollYt__item:nth-of-type(2) .scrollYt__img {
        max-width: 191px; }
    .scrollYt__item:nth-of-type(3) {
      width: 6%;
      top: 74%;
      left: 4%; }
      @media screen and (max-width: 1366px) {
        .scrollYt__item:nth-of-type(3) {
          display: none; } }
      .scrollYt__item:nth-of-type(3) .scrollYt__img {
        max-width: 122px; }
    .scrollYt__item:nth-of-type(4) {
      width: 11%;
      top: 55%;
      right: 5%; }
      @media screen and (max-width: 1366px) {
        .scrollYt__item:nth-of-type(4) {
          right: 0%; } }
      @media screen and (max-width: 768px) {
        .scrollYt__item:nth-of-type(4) {
          width: 26%;
          top: 64%;
          right: -8%; } }
      .scrollYt__item:nth-of-type(4) .scrollYt__img {
        max-width: 224px; }

.scrollProgress {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 2; }
  .scrollProgress__img {
    width: 100%;
    position: relative; }
  .scrollProgress__item {
    position: absolute; }
    .scrollProgress__item:nth-of-type(1) {
      width: 7%;
      top: 6%;
      left: 8%; }
      @media screen and (max-width: 1366px) {
        .scrollProgress__item:nth-of-type(1) {
          width: 3%; } }
      @media screen and (max-width: 768px) {
        .scrollProgress__item:nth-of-type(1) {
          display: none; } }
      .scrollProgress__item:nth-of-type(1) .scrollProgress__img {
        max-width: 149px; }
    .scrollProgress__item:nth-of-type(2) {
      width: 34%;
      top: 15%;
      right: -15%; }
      @media screen and (max-width: 1366px) {
        .scrollProgress__item:nth-of-type(2) {
          width: 30%; } }
      @media screen and (max-width: 768px) {
        .scrollProgress__item:nth-of-type(2) {
          display: none; } }
      .scrollProgress__item:nth-of-type(2) .scrollProgress__img {
        max-width: 727px; }
    .scrollProgress__item:nth-of-type(3) {
      width: 3%;
      top: 65%;
      left: 6%; }
      @media screen and (max-width: 768px) {
        .scrollProgress__item:nth-of-type(3) {
          display: none; } }
      .scrollProgress__item:nth-of-type(3) .scrollProgress__img {
        max-width: 45px; }
    .scrollProgress__item:nth-of-type(4) {
      width: 9%;
      top: 80%;
      left: 12%; }
      @media screen and (max-width: 1366px) {
        .scrollProgress__item:nth-of-type(4) {
          display: none; } }
      @media screen and (max-width: 768px) {
        .scrollProgress__item:nth-of-type(4) {
          display: none; } }
      .scrollProgress__item:nth-of-type(4) .scrollProgress__img {
        max-width: 171px; }

.scrollSmart {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 2; }
  .scrollSmart__img {
    width: 100%;
    position: relative; }
  .scrollSmart__item {
    position: absolute; }
    .scrollSmart__item:nth-of-type(1) {
      width: 33%;
      top: 10%;
      left: -14%; }
      @media screen and (max-width: 1366px) {
        .scrollSmart__item:nth-of-type(1) {
          width: 28%;
          left: -18%; } }
      @media screen and (max-width: 768px) {
        .scrollSmart__item:nth-of-type(1) {
          width: 28%;
          top: -6%;
          left: -12%; } }
      .scrollSmart__item:nth-of-type(1) .scrollSmart__img {
        max-width: 635px; }
    .scrollSmart__item:nth-of-type(2) {
      width: 6%;
      top: 38%;
      right: 8%; }
      @media screen and (max-width: 1366px) {
        .scrollSmart__item:nth-of-type(2) {
          right: 3%; } }
      @media screen and (max-width: 768px) {
        .scrollSmart__item:nth-of-type(2) {
          width: 12%;
          top: 23%;
          right: -2%; } }
      .scrollSmart__item:nth-of-type(2) .scrollSmart__img {
        max-width: 122px; }

.scrollLink {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 2; }
  .scrollLink__img {
    width: 100%;
    position: relative; }
  .scrollLink__item {
    position: absolute; }
    .scrollLink__item:nth-of-type(1) {
      width: 31%;
      top: -28%;
      right: -8%; }
      @media screen and (max-width: 768px) {
        .scrollLink__item:nth-of-type(1) {
          width: 31%;
          top: -18%;
          right: -9%; } }
      .scrollLink__item:nth-of-type(1) .scrollLink__img {
        max-width: 606px; }
    .scrollLink__item:nth-of-type(2) {
      width: 4%;
      top: 70%;
      left: 8%; }
      @media screen and (max-width: 768px) {
        .scrollLink__item:nth-of-type(2) {
          width: 6%;
          top: 94%;
          left: 8%; } }
      .scrollLink__item:nth-of-type(2) .scrollLink__img {
        max-width: 91px; }