@charset "UTF-8";
body {
  overflow-y: auto;
  background-color: #B7D9EE;
}

#app {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  background-image: url(../../images/bg.png);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100%;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#header .container {
   /* outline:10px solid #000;*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#header .logo, #header .healthy__classmate__party, #header .join {
  width: 170px;
}

@media screen and (max-width: 1023px) {
  #header .logo, #header .healthy__classmate__party, #header .join {
    width: 80%;
  }
}

#header .join {
  display: none;
  position: fixed;
  bottom: 2rem;
  right: 1rem;
}

#header.is--sticky {
  background-color: rgba(68, 146, 201, 0.9);
}

#header.is--sticky .healthy__classmate__party {
  /*display: none;*/
}

#header.is--sticky .join {
  display: block;
  filter: drop-shadow(0px 0px 10px rgba(0, 125, 125, 0.8));
  margin: 0 auto;
  right: 10%;
}

#header.is--sticky .join img{
display: block;
    max-width: 100%;
    margin: 0 auto;}

#footer {
  text-align: center;
  background-color: #386DAD;
  padding-top: 3rem;
  padding-bottom: 1rem;
  position: relative;
}

#footer .link__list .link__item {
  display: inline-block;
}

#footer .link__list .link__item a {
  color: #fff;
  border-radius: 20px;
  padding: 0 1rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#footer .link__list .link__item a:hover {
  color: #386DAD;
  background-color: #fff;
}

#footer .copyright {
  color: #fff;
  font-size: 12px;
}

#main {
  text-align: center;
  padding-top: 100px;
}

#main img {
  max-width: 70%;
  margin: 0 auto;
}

@media screen and (max-width: 1023px) {
  #main img {
    max-width: 90%;
  }
}

#main .text {
  white-space: nowrap;
  max-width: 85%;
  font-size: 32px;
  margin: 0 auto;
}

@media screen and (max-width: 1023px) {
  #main .text {
    max-width: 95%;
    font-size: 15px;
    line-height: 1.5;
  }
}

#main .section {
  margin-bottom: 9.375%;
  position: relative;
}

#main .section .content {
  margin-top: 4.16667%;
  margin-bottom: 4.16667%;
}

#main .section .text {
  margin-bottom: 10.41667%;
}

#main .section:last-child {
  margin-bottom: 0;
}

#main .section[data-area="健康同學會開班囉"] img {
  width: 70%;
  margin-bottom: 10px;
}

@media screen and (max-width: 1023px) {
  #main .section[data-area="健康同學會開班囉"] img {
    width: 90%;
  }
}

#main .section[data-area="健康同學四大權益"] .content {
  width: 100%;
  max-width: 85%;
  margin-right: 1.5625%;
}

@media screen and (max-width: 1023px) {
  #main .section[data-area="健康同學四大權益"] .content {
    min-width: 120%;
    margin-right: 0;
    -webkit-transform: translateX(3%);
            transform: translateX(3%);
  }
}

#main .section[data-area="健康同學四大權益"] .icon__ball {
  width: 12.5%;
  position: absolute;
  bottom: -8%;
  right: 15%;
}

#main .section[data-area="專屬衛教資訊"] .icon__heart {
  width: 12.5%;
  position: absolute;
  bottom: -5%;
  right: 12%;
}

#main .section[data-area="一對一營養師"] .icon__heart2 {
  width: 6.25%;
  position: absolute;
  top: -3%;
  left: 11%;
}

@media screen and (max-width: 1023px) {
  #main .section[data-area="一對一營養師"] .icon__heart2 {
    left: 0;
  }
}

#main .section[data-area="一對一營養師"] .icon__coin {
  width: 10.41667%;
  position: absolute;
  bottom: -3%;
  left: 11%;
}

@media screen and (max-width: 1023px) {
  #main .section[data-area="一對一營養師"] .icon__coin {
    left: 5%;
  }
}

#main .section[data-area="健康幣累積計劃"] .content {
  width: 90%;
  max-width: 90%;
  margin-right: 0;
}

#main .section[data-area="健康幣累積計劃"] .wrapper {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

#main .section[data-area="健康幣累積計劃"] .wrapper .sub__title {
  display: inline-block;
  font-size: 24px;
  color: #fff;
  background-color: #006934;
  border-radius: 20px;
  margin: 1rem 0;
  padding: 3px 25px;
}

@media screen and (max-width: 1023px) {
  #main .section[data-area="健康幣累積計劃"] .wrapper .title {
    width: 70vw;
  }
  #main .section[data-area="健康幣累積計劃"] .wrapper .sub__title {
    font-size: 14px;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  #main .section[data-area="健康幣累積計劃"] .wrapper .text {
    margin-bottom: 1.5rem;
    font-size: 13px;
  }
}

#main .section[data-area="健康同學註冊教學"] .title {
  color: #345E9D;
  font-size: 30px;
  margin-bottom: 4.16667%;
}

@media screen and (max-width: 1023px) {
  #main .section[data-area="健康同學註冊教學"] .title {
    font-size: 18px;
  }
}

#main .section[data-area="健康同學註冊教學"] .video {
  text-align: center;
  margin-bottom: 4.16667%;
}

#main .section[data-area="聯絡方式"] .title {
  color: #E60012;
  font-size: 30px;
}

@media screen and (max-width: 1023px) {
  #main .section[data-area="聯絡方式"] .title {
    font-size: 20px;
  }
}

#main .section[data-area="聯絡方式"] .line {
  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;
  font-size: 30px;
  margin-bottom: 1rem;
}

#main .section[data-area="聯絡方式"] .line img {
  width: 42px;
  margin: 0 5px;
}

@media screen and (max-width: 1023px) {
  #main .section[data-area="聯絡方式"] .line {
    font-size: 20px;
  }
  #main .section[data-area="聯絡方式"] .line img {
    width: 30px;
  }
}

#main .section[data-area="聯絡方式"] .qrcode {
  font-size: 20px;
  margin-bottom: 1rem;
}

#main .section[data-area="聯絡方式"] .qrcode img {
  width: 16.66667%;
}

#main .section[data-area="聯絡方式"] .phone {
  display: inline-block;
  margin-bottom: 1rem;
}

#main .section[data-area="聯絡方式"] .phone img {
  width: 54.6875%;
}

#main .section[data-area="聯絡方式"] .server__time {
  display: inline-block;
  text-align: center;
  font-size: 24px;
  letter-spacing: 1px;
  border-top: 1px solid #3E3A39;
  border-bottom: 1px solid #3E3A39;
  padding: 0.5rem 2rem;
}

#main .section[data-area="聯絡方式"] .server__time span {
  font-size: 20px;
}

@media screen and (max-width: 1023px) {
  #main .section[data-area="聯絡方式"] .server__time {
    font-size: 18px;
  }
  #main .section[data-area="聯絡方式"] .server__time span {
    font-size: 16px;
  }
}

#main .section[data-area="健康同學會"] {
  background-color: #fff;
  padding: 1rem;
}

#main .section[data-area="健康同學會"] .go__join {
  width: 100%;
  max-width: 100%;
  border-radius: 20px;
}

#main .section[data-area="健康同學會"] .footer__img {
  width: 100%;
  max-width: 100%;
}


/*新增*/
.footbtnjoin_fixed#footer .btnjoin { z-index: 2; position: fixed; margin-right: unset; top: unset; bottom: 2rem; right: 15px; transform: unset; }
#footer .btnjoin{ position: absolute; top:50%; right: 50%; transform: translateY(-50%); margin-right: -620px; width: 200px; display: block; }
#footer .btnjoin:after{ content: ""; display: block; padding-bottom: 34%; width: 100%; background-image:url(../../images/btn_join.png) ; background-size: cover; background-repeat: no-repeat; background-position: center; }
#footer .btnjoin:hover:after{ background-image:url(../../images/btn_join_hover.png) ; }

.bannerbox{ background-image:url(../../images/banner_bg.png) ; background-position: center top; background-size: cover; max-width: 1920px; margin: auto; position: relative; }
.bannerbox:after{ content: ""; display:block; width: 100%; height: 872px; }
.bannerbox .mars{ max-width: 1118px; position: absolute; top: 100px; left: 0; right: 0; margin: auto; padding: 0 20px; }
.bannerbox .mars .h1{ max-width: 614px; margin: auto; margin-bottom: 15px; }
.bannerbox .mars .h2{ background-color: #16216a; text-align: center; color: #fff; font-size: 30px; padding: 5px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; margin-bottom: 20px; }
.bannerbox .mars .probox{ display: flex; margin-left: -16px; }
.bannerbox .mars .probox .grids{ width: 50%; padding-left: 16px; box-sizing: border-box; display: flex; align-items: flex-end; }
.bannerbox .mars .probox .grids:nth-child(2){ width: 52%; }
.bannerbox .mars .probox .grids .gs{ width: 100%; display: block; border-radius:8px; padding: 10px; position: relative; box-shadow: 0 10px 10px rgba(0,0,0,0.1); }

.bannerbox .mars .probox .grids .gs .whitbg{ background-color: #fff; padding: 30px 10px 10px 10px; text-align: center; min-height: 484px; }
.bannerbox .mars .probox .grids .gs .title{ font-size: 18px; color: #333; font-weight: 700; text-align: center; margin-bottom: 10px; }
.bannerbox .mars .probox .grids .gs .listname{ display: inline-flex; flex-wrap:wrap; margin-left: -24px; margin-bottom: 10px; max-width: 540px; }
.bannerbox .mars .probox .grids .gs .listname .names{ padding-left: 10px; padding-bottom: 10px; }
.bannerbox .mars .probox .grids .gs .listname .names .ns{ background-color: #16216a; color: #fff; font-size: 20px; font-weight: 700; padding:5px 15px; border-radius: 50px; }
.bannerbox .mars .probox .grids .gs .proimg img{ width: 100%;max-width:292px;margin:auto;}
.bannerbox .mars .probox .grids .gs .tags{ position: absolute; width: 172px; left: 0; right: 0; margin: auto; bottom: -20px; }
.bannerbox .mars .probox .grids .gs .tags:after{ content: ""; display: block; width: 100%; padding-bottom: 29.7%; background-repeat: no-repeat; background-size: cover; background-image: url(../../images/tagimg01.png); background-position: center; }


.bannerbox .mars .probox .grids:nth-child(2) .gs{ margin-bottom: 0px;
  background: rgb(208,218,227);
  background: -moz-linear-gradient(-45deg,  rgba(208,218,227,1) 0%, rgba(255,255,255,1) 25%, rgba(159,169,178,1) 48%, rgba(206,216,225,1) 73%, rgba(170,180,189,1) 100%);
  background: -webkit-linear-gradient(-45deg,  rgba(208,218,227,1) 0%,rgba(255,255,255,1) 25%,rgba(159,169,178,1) 48%,rgba(206,216,225,1) 73%,rgba(170,180,189,1) 100%);
  background: linear-gradient(135deg,  rgba(208,218,227,1) 0%,rgba(255,255,255,1) 25%,rgba(159,169,178,1) 48%,rgba(206,216,225,1) 73%,rgba(170,180,189,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0dae3', endColorstr='#aab4bd',GradientType=1 );}
.bannerbox .mars .probox .grids:nth-child(1) .gs{ background: rgb(255,215,118);
    background: -moz-linear-gradient(-45deg,  rgba(255,215,118,1) 0%, rgba(255,255,255,1) 25%, rgba(211,168,53,1) 48%, rgba(246,220,96,1) 73%, rgba(213,179,77,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(255,215,118,1) 0%,rgba(255,255,255,1) 25%,rgba(211,168,53,1) 48%,rgba(246,220,96,1) 73%,rgba(213,179,77,1) 100%);
    background: linear-gradient(135deg,  rgba(255,215,118,1) 0%,rgba(255,255,255,1) 25%,rgba(211,168,53,1) 48%,rgba(246,220,96,1) 73%,rgba(213,179,77,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd776', endColorstr='#d5b34d',GradientType=1 ); }
.bannerbox .mars .probox .grids:nth-child(3) .gs{
  margin-bottom: 0;
  background: rgb(234,211,192);
  background: -moz-linear-gradient(-45deg,  rgba(234,211,192,1) 0%, rgba(255,255,255,1) 25%, rgba(186,163,144,1) 48%, rgba(231,208,189,1) 73%, rgba(196,173,154,1) 100%);
  background: -webkit-linear-gradient(-45deg,  rgba(234,211,192,1) 0%,rgba(255,255,255,1) 25%,rgba(186,163,144,1) 48%,rgba(231,208,189,1) 73%,rgba(196,173,154,1) 100%);
  background: linear-gradient(135deg,  rgba(234,211,192,1) 0%,rgba(255,255,255,1) 25%,rgba(186,163,144,1) 48%,rgba(231,208,189,1) 73%,rgba(196,173,154,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ead3c0', endColorstr='#c4ad9a',GradientType=1 );}
.bannerbox .mars .probox .grids:nth-child(2) .gs .title{ font-size: 20px; }
.bannerbox .mars .probox .grids:nth-child(2) .gs .listname{ justify-content: center; }
.bannerbox .mars .probox .grids:nth-child(2) .gs .listname .names .ns{ font-size: 18px; padding: 5px 16px; }
.bannerbox .mars .probox .grids:nth-child(1) .gs .tags:after{ background-image: url(../../images/tagimg02.png); }
.bannerbox .mars .probox .grids:nth-child(3) .gs .tags:after{ background-image: url(../../images/tagimg03.png); }

.wrapper{ box-sizing: border-box; background-image: url(../../images/bg.jpg); background-color: #b6d9ed; background-repeat: no-repeat; }
.wrapper .mar{ margin: auto; max-width: 1200px; padding:170px 20px 145px 20px; }

.wrapper .mar .textbox{ padding: 45px 65px; background-color: #c0e5f9; }
.wrapper .mar .textbox .list{ margin-bottom: 30px; display: flex; align-items: baseline; }
.wrapper .mar .textbox .list .t1{ width: 174px; }
.wrapper .mar .textbox .list .t1 .titles{ border-radius: 10px; background-color: #f6702a; color: #fff; font-size: 24px; padding: 10px 15px; display: inline-block; }
.wrapper .mar .textbox .list .t2{ flex:1; padding-left: 60px; font-size: 18px; color: #333; line-height: 1.8; }

.wrapper .mar .section_box.blue .textbox .list .t1 .titles{ background-color: #16216a; }

.section_box{ border-radius: 20px; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.1); margin-bottom: 50px; }
.section_box:last-child{ margin-bottom: 0; }

.wrapper.bannerboxCRM .mar.marCRM{ padding-top: 30px; }
.wrapper.bannerboxCRM .mar_submenubox{ padding: 100px 0 0; margin: 10px 0 0; }
.wrapper .mar_submenubox{ display: flex; justify-content: center; margin-top: 10px; }
.wrapper .mar_submenubox .textbox{ background-color: unset; padding-bottom: 0; padding-left: 0; padding-right: 0; }
.wrapper .mar_submenubox .textbox a{ border-radius: 10px; background-color: #f6702a; color: #fff; font-size: 24px; padding: 10px 15px; display: inline-block; margin-right: 10px }
.wrapper .mar_submenubox .textbox a:hover,
.wrapper .mar_submenubox .textbox a:focus{ background-color: #f56012; }
.wrapper .mar_submenubox .textbox a:last-child{ margin: unset;}

@media screen and (min-width: 768px) and (max-width: 1280px){
  #footer .btnjoin{ margin-right: 0; right: 15px; }
}


@media screen and (max-width: 767px){
  .footbtnjoin_fixed#footer .btnjoin { bottom: 20px; right: 22px; }
  #footer .btnjoin{ top: 0; transform: translateY(-140%); right: 20px;  margin: 0;  width: 160px; }

  .bannerbox:after{ position: absolute; z-index: 1; }
  .bannerbox .mars{ position: relative; z-index: 2; }
  .bannerbox .mars .h2{ margin-bottom: 60px; font-size: 22px; }
  .bannerbox .mars .probox{ flex-direction: column; }
  .bannerbox .mars .probox .grids{ width: 100%; margin-bottom: 40px; }
  .bannerbox .mars .probox .grids:nth-child(1){ order: 1; }
  .bannerbox .mars .probox .grids:nth-child(2){ order: 2; width: 100%; }
  .bannerbox .mars .probox .grids:nth-child(1) .gs{ margin-bottom:0; }
  .bannerbox .mars .probox .grids:nth-child(3) .gs{ margin-bottom:0; }
  .bannerbox .mars .probox .grids .gs{ padding: 8px; }
  .bannerbox .mars .probox .grids .gs .whitbg{ display: flex; align-items: center; min-height: auto; text-align: left; padding: 40px 15px 15px 15px; }
  .bannerbox .mars .probox .grids .gs .title{ text-align: left; }
  .bannerbox .mars .probox .grids .gs .mobs{ flex:1; text-align: center;}
  .bannerbox .mars .probox .grids .gs .proimg{ width: 40%; }
  .bannerbox .mars .probox .grids .gs .tags{ bottom: auto; top: -20px; }
  .bannerbox .mars .probox .grids .gs .listname .names .ns{ font-size:20px; }

  .bannerbox .mars .probox .grids:nth-child(2) .gs .listname .names .ns{ font-size: 20px; }

  .wrapper .mar .textbox{ padding: 30px; }
  .wrapper .mar .textbox .list{ display: block; }
  .wrapper .mar .textbox .list .t2{ padding: 15px 0 0 0; font-size: 16px; }
  .wrapper .mar .textbox .list .t1 .titles{ font-size: 20px; }

  .wrapper .mar_submenubox{ margin-top: -10px; margin-bottom: 15px; }
  .wrapper .mar_submenubox .textbox a{ font-size: 20px; }
  .wrapper.bannerboxCRM .mar_submenubox{ padding: 80px 0 0; }
  .wrapper.bannerboxCRM .bannerbox .mars{ padding-bottom: 100px; }
}