@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, button, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, ar, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, input, select, textarea, caption, tbody, tfoot, thead, tr, th, td, nav {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent; }

body {
  position: relative;
  font-family: "Lato", "Microsoft JhengHei", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #555;
  background-color: #333;
  overflow-x: hidden; }

img {
  max-width: 100%;
  vertical-align: middle;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

select, button, textarea, input, select, textarea {
  outline: none; }

a {
  cursor: pointer;
  display: block;
  text-decoration: none; }

a:hover, a:focus, a:active {
  text-decoration: none; }

ul, ol {
  list-style: none; }

*::-webkit-input-placeholder {
  color: #bbb; }

*:-ms-input-placeholder {
  color: #bbb; }

*::-ms-input-placeholder {
  color: #bbb; }

*::placeholder {
  color: #bbb; }

*:-ms-input-placeholder {
  color: #bbb; }

*::-ms-input-placeholder {
  color: #bbb; }

.main {
  position: relative;
  width: 100%;
  max-width: 575px;
  min-height: 100vh;
  margin: 0 auto;
  background: #fff; }

.container {
  position: relative;
  width: 100%;
  padding: 0 5%; }

.full-container {
  position: relative;
  width: 100%; }

.loading {
  position: fixed;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: center;
  align-content: center;
  width: 100%;
  max-width: 575px;
  height: 100vh;
  background: #fff url("../images/loading.svg");
  background-size: 40px 40px;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 9999; }

.common-notread {
  position: fixed;
  top: 0;
  display: none;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  max-width: 575px;
  height: 100vh;
  padding: 3.2rem;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998; }
  .common-notread__block {
    width: 100%;
    padding: 0 2rem 2rem;
    background-color: #fff;
    border-radius: 0.5rem;
    -webkit-box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.05);
    -webkit-transition: -webkit-transform .15s;
    transition: -webkit-transform .15s;
    -o-transition: transform .15s;
    transition: transform .15s;
    transition: transform .15s, -webkit-transform .15s;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0); }
    .common-notread__block::before {
      content: "";
      display: block;
      width: 12.8rem;
      height: 7.8rem;
      margin: 0 auto 1.8rem;
      background-image: url("../images/common/common_notread.png");
      background-size: contain;
      background-position: top center;
      background-repeat: no-repeat; }
    .common-notread__block--active {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1); }
  .common-notread__text {
    width: 100%;
    padding: 0 4rem;
    font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.2;
    color: #222;
    text-align: center; }
    .common-notread__text span {
      margin: 0 0.1em;
      font-size: 1.9rem;
      font-weight: 700;
      line-height: 1;
      color: #d1222a; }
  .common-notread__check {
    width: 55%;
    margin: 1.5rem auto 0;
    font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 3.3rem;
    text-align: center;
    color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffc837), to(#ff8f23));
    background: -webkit-linear-gradient(top, #ffc837 0%, #ff8f23 100%);
    background: -o-linear-gradient(top, #ffc837 0%, #ff8f23 100%);
    background: linear-gradient(180deg, #ffc837 0%, #ff8f23 100%);
    border-radius: 1.65rem; }
  .common-notread__close {
    width: 3rem;
    margin: 0.9rem auto 0;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
    color: #999;
    text-align: center; }

.common-delete {
  position: fixed;
  top: 0;
  display: none;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  max-width: 575px;
  height: 100vh;
  padding: 3.2rem;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998; }
  .common-delete__block {
    width: 100%;
    padding: 0 2rem 2rem;
    background-color: #fff;
    border-radius: 0.5rem;
    -webkit-box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.05);
    -webkit-transition: -webkit-transform .15s;
    transition: -webkit-transform .15s;
    -o-transition: transform .15s;
    transition: transform .15s;
    transition: transform .15s, -webkit-transform .15s;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0); }
    .common-delete__block::before {
      content: "";
      display: block;
      width: 12.8rem;
      height: 7.8rem;
      margin: 0 auto 1.8rem;
      background-image: url("../images/common/common_notread.png");
      background-size: contain;
      background-position: top center;
      background-repeat: no-repeat; }
    .common-delete__block--active {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1); }
  .common-delete__title {
    width: 100%;
    margin-bottom: 1rem;
    font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1;
    color: #222;
    text-align: center; }
  .common-delete__text {
    width: 100%;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
    color: #777;
    text-align: center; }
  .common-delete__check {
    width: 65%;
    margin: 3rem auto 0;
    font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 3.3rem;
    text-align: center;
    color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffc837), to(#ff8f23));
    background: -webkit-linear-gradient(top, #ffc837 0%, #ff8f23 100%);
    background: -o-linear-gradient(top, #ffc837 0%, #ff8f23 100%);
    background: linear-gradient(180deg, #ffc837 0%, #ff8f23 100%);
    border-radius: 1.65rem; }
  .common-delete__cancel {
    width: 5rem;
    margin: 0.9rem auto 0;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    color: #999; }

.common-success {
  position: fixed;
  top: 0;
  display: none;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  max-width: 575px;
  height: 100vh;
  padding: 3.2rem;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998; }
  .common-success__block {
    width: 100%;
    padding: 0 2rem 2rem;
    background-color: #fff;
    border-radius: 0.5rem;
    -webkit-box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.05);
    -webkit-transition: -webkit-transform .15s;
    transition: -webkit-transform .15s;
    -o-transition: transform .15s;
    transition: transform .15s;
    transition: transform .15s, -webkit-transform .15s;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0); }
    .common-success__block::before {
      content: "";
      display: block;
      width: 12.8rem;
      height: 7.8rem;
      margin: 0 auto 1.8rem;
      background-image: url("../images/common/common_success.png");
      background-size: contain;
      background-position: top center;
      background-repeat: no-repeat; }
    .common-success__block--active {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1); }
  .common-success__title {
    width: 100%;
    margin-bottom: 1rem;
    font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1;
    color: #222;
    text-align: center; }
  .common-success__text {
    width: 100%;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
    color: #777;
    text-align: center; }
    .common-success__text span {
      color: #29aa17; }
  .common-success__check {
    width: 35%;
    margin: 1.5rem auto 0;
    font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 2.5rem;
    text-align: center;
    color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffc837), to(#ff8f23));
    background: -webkit-linear-gradient(top, #ffc837 0%, #ff8f23 100%);
    background: -o-linear-gradient(top, #ffc837 0%, #ff8f23 100%);
    background: linear-gradient(180deg, #ffc837 0%, #ff8f23 100%);
    border-radius: 1.65rem; }
    .common-success__check--big {
      width: 65%;
      margin: 3rem auto 0;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 1.3rem;
      font-weight: 400;
      line-height: 3.3rem; }
  .common-success__home {
    width: 5rem;
    margin: 0.9rem auto 0;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    color: #999; }

.common-phone {
  position: fixed;
  top: 0;
  display: none;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  max-width: 575px;
  height: 100vh;
  padding: 3.2rem;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998; }
  .common-phone__block {
    width: 100%;
    padding: 2rem;
    background-color: #fff;
    border-radius: 0.5rem;
    -webkit-box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.05);
    -webkit-transition: -webkit-transform .15s;
    transition: -webkit-transform .15s;
    -o-transition: transform .15s;
    transition: transform .15s;
    transition: transform .15s, -webkit-transform .15s;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0); }
    .common-phone__block--active {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1); }
  .common-phone__title {
    width: 100%;
    margin-bottom: 1rem;
    font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1;
    color: #222;
    text-align: center; }
  .common-phone__text {
    width: 100%;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
    color: #777;
    text-align: center; }
    .common-phone__text span {
      color: #29aa17; }
  .common-phone__check {
    width: 35%;
    margin: 1.5rem auto 0;
    font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 2.5rem;
    text-align: center;
    color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffc837), to(#ff8f23));
    background: -webkit-linear-gradient(top, #ffc837 0%, #ff8f23 100%);
    background: -o-linear-gradient(top, #ffc837 0%, #ff8f23 100%);
    background: linear-gradient(180deg, #ffc837 0%, #ff8f23 100%);
    border-radius: 1.65rem; }
    .common-phone__check--big {
      width: 65%;
      margin: 3rem auto 0;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 1.3rem;
      font-weight: 400;
      line-height: 3.3rem; }

.common-check {
  position: fixed;
  top: 0;
  display: none;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  max-width: 575px;
  height: 100vh;
  padding: 3.2rem;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998; }
  .common-check__block {
    width: 100%;
    padding: 0 2rem 2rem;
    background-color: #fff;
    border-radius: 0.5rem;
    -webkit-box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.05);
    -webkit-transition: -webkit-transform .15s;
    transition: -webkit-transform .15s;
    -o-transition: transform .15s;
    transition: transform .15s;
    transition: transform .15s, -webkit-transform .15s;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0); }
    .common-check__block::before {
      content: "";
      display: block;
      width: 12.8rem;
      height: 7.8rem;
      margin: 0 auto 1.8rem;
      background-image: url("../images/common/common_success.png");
      background-size: contain;
      background-position: top center;
      background-repeat: no-repeat; }
    .common-check__block--active {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1); }
  .common-check__title {
    width: 100%;
    font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1;
    color: #222;
    text-align: center; }
  .common-check__box {
    width: 100%;
    padding: 1.2rem 0;
    margin: 1.2rem 0;
    border-top: 3px solid #eee;
    border-bottom: 3px solid #eee; }
  .common-check__subject {
    width: 100%;
    font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.4;
    color: #333;
    text-align: center; }
  .common-check__text {
    width: 100%;
    margin-top: 0.2rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: #777;
    text-align: center; }
  .common-check__reply {
    width: 100%;
    margin-top: 1rem;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
    text-align: center; }
    .common-check__reply span {
      color: #29aa17;
      word-break: break-all; }
    .common-check__reply-box {
      display: inline-block;
      text-align: left; }
    .common-check__reply-item {
      display: inline-block;
      position: relative;
      padding-left: 7rem; }
      .common-check__reply-item::before {
        content: attr(data-text);
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 7rem;
        font-size: 1.1rem;
        font-weight: 400;
        line-height: 1.6;
        color: #333;
        text-align: right; }
  .common-check__check {
    width: 65%;
    margin: 0 auto;
    font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 3.3rem;
    text-align: center;
    color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffc837), to(#ff8f23));
    background: -webkit-linear-gradient(top, #ffc837 0%, #ff8f23 100%);
    background: -o-linear-gradient(top, #ffc837 0%, #ff8f23 100%);
    background: linear-gradient(180deg, #ffc837 0%, #ff8f23 100%);
    border-radius: 1.65rem; }
  .common-check__close {
    width: 4rem;
    margin: 0.9rem auto 0;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    color: #999; }

.common-function {
  position: relative;
  width: 100%;
  margin-bottom: 1.8rem;
  z-index: 1; }
  .common-function--bg {
    padding: 1.4rem 0;
    background-color: #f7f7f7;
    border-bottom: 1px solid #eee; }
  .common-function__block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    width: 100%; }
  .common-function__back {
    width: 1.4rem;
    height: 1.4rem;
    background-image: url("../images/common/common_back.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; }
    .common-function__back--white {
      background-image: url("../images/common/common_back_w.svg"); }
  .common-function__heading {
    width: calc(100% - 2.8rem);
    height: 1.4rem;
    font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.4rem;
    color: #333;
    text-align: center; }

.common-pagination {
  width: 100%;
  margin-top: 2rem; }
  .common-pagination__block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    width: 100%; }
  .common-pagination__prev {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 0.1rem;
    background-image: url("../images/common/common_prev.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 1.25rem; }
  .common-pagination__next {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 0.1rem;
    background-image: url("../images/common/common_next.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 1.25rem; }
  .common-pagination__btn {
    min-width: 2.5rem;
    height: 2.5rem;
    margin: 0 0.1rem;
    padding: 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 2.5rem;
    color: #555;
    text-align: center;
    border-radius: 1.25rem; }
    .common-pagination__btn--active {
      color: #fff;
      background-color: #ffc13f; }

.common-contact {
  width: 100%;
  margin-top: 1.8rem; }
  .common-contact__block {
    width: 100%; }
    .common-contact__block::after {
      content: "";
      display: block;
      width: 25%;
      height: 0.25rem;
      margin: 0.8rem auto 0;
      background-color: #eee;
      border-radius: 0.125rem; }
  .common-contact__btn {
    width: 85%;
    margin: 0 auto;
    font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 4rem;
    text-align: center;
    color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffc837), to(#ff8f23));
    background: -webkit-linear-gradient(top, #ffc837 0%, #ff8f23 100%);
    background: -o-linear-gradient(top, #ffc837 0%, #ff8f23 100%);
    background: linear-gradient(180deg, #ffc837 0%, #ff8f23 100%);
    border-radius: 2rem; }

.menu {
  position: fixed;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: center;
  align-content: center;
  width: 100%;
  max-width: 575px;
  height: 4.2rem;
  background-color: #fff;
  -webkit-box-shadow: 0 -0.4rem 0.5rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 -0.4rem 0.5rem rgba(0, 0, 0, 0.05);
  -webkit-transition: -webkit-transform .8s, -webkit-box-shadow .8s;
  transition: -webkit-transform .8s, -webkit-box-shadow .8s;
  -o-transition: transform .8s, box-shadow .8s;
  transition: transform .8s, box-shadow .8s;
  transition: transform .8s, box-shadow .8s, -webkit-transform .8s, -webkit-box-shadow .8s;
  z-index: 999; }
  .menu--hide {
    -webkit-box-shadow: 0 0rem 0rem rgba(0, 0, 0, 0.05);
    box-shadow: 0 0rem 0rem rgba(0, 0, 0, 0.05);
    -webkit-transform: translateY(4.2rem);
    -ms-transform: translateY(4.2rem);
    transform: translateY(4.2rem); }
  .menu--forcehide {
    -webkit-box-shadow: 0 0rem 0rem rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 0rem 0rem rgba(0, 0, 0, 0.05) !important;
    -webkit-transform: translateY(4.2rem) !important;
    -ms-transform: translateY(4.2rem) !important;
    transform: translateY(4.2rem) !important; }
  .menu__btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    width: 20%;
    height: 100%;
    padding-top: 0.2rem;
    font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1;
    color: #333;
    text-align: center;
    opacity: .4; }
    .menu__btn--active {
      opacity: 1; }
    .menu__btn::before {
      content: "";
      display: block;
      width: 100%;
      height: 1.3rem;
      margin-bottom: 0.4rem;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat; }
    .menu__btn--site::before {
      background-image: url("../images/menu/menu_icon-05.svg"); }
    .menu__btn--issue::before {
      background-image: url("../images/menu/menu_icon-04.svg"); }
    .menu__btn--drug::before {
      background-image: url("../images/menu/menu_icon-03.svg"); }
    .menu__btn--user::before {
      background-image: url("../images/menu/menu_icon-02.svg"); }
    .menu__btn--home::before {
      background-image: url("../images/menu/menu_icon-01.svg"); }

.login {
  width: 100%;
  background-color: #fff; }
  .login-banner {
    width: 100%; }
  .login-title {
    width: 100%;
    background-color: #f7f7f7; }
    .login-title__text {
      width: 100%;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 1.5rem;
      font-weight: 400;
      line-height: 3;
      color: #000;
      text-align: center;
      letter-spacing: 0.05em; }
  .login-form {
    padding: 3.5rem 0px 5rem; }
    .login-form__item {
      width: 100%; }
      .login-form__item:nth-child(n + 2) {
        margin-top: 2.5rem; }
      .login-form__item--error .login-form__text {
        color: #d93025; }
      .login-form__item--error .login-form__input {
        border-color: #d93025; }
      .login-form__item--error .login-form__msg {
        display: block; }
    .login-form__label {
      position: relative;
      display: block;
      width: 100%; }
    .login-form__text {
      position: absolute;
      top: 50%;
      left: calc(1.5rem - 5px);
      display: inline-block;
      width: auto;
      padding: 0 5px;
      font-size: 1.3rem;
      font-weight: 400;
      line-height: 1;
      color: #777;
      background-color: #fff;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      -webkit-transition: top .2s, font-size .2s;
      -o-transition: top .2s, font-size .2s;
      transition: top .2s, font-size .2s;
      cursor: text;
      pointer-events: none;
      z-index: 2; }
    .login-form__input {
      position: relative;
      width: 100%;
      height: 4rem;
      padding: 0px 4.3rem 0 1.5rem;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 1.3rem;
      font-weight: 500;
      color: #333;
      background-color: #fff;
      border-radius: 3px;
      border: 1px solid #ddd;
      z-index: 1; }
      .login-form__input:focus + .login-form__text {
        top: calc(-0.55rem + 2px);
        font-size: 1.1rem; }
      .login-form__input--active + .login-form__text {
        top: calc(-0.55rem + 2px);
        font-size: 1.1rem; }
    .login-form__icon {
      position: absolute;
      top: 0;
      right: 0;
      width: 4.3rem;
      height: 4rem;
      background-size: 1.3rem 1.3rem;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 2; }
      .login-form__icon--account {
        background-image: url("../images/login/login_account.svg"); }
      .login-form__icon--see {
        background-image: url("../images/login/login_see.svg"); }
      .login-form__icon--nosee {
        background-image: url("../images/login/login_nosee.svg"); }
    .login-form__msg {
      position: relative;
      display: none;
      width: 100%;
      padding-left: 1.5rem;
      margin-top: 0.7rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1;
      color: #d93025; }
      .login-form__msg::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 1rem;
        height: 1rem;
        background-image: url("../images/login/login_error.svg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat; }
    .login-form__function {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: center;
      align-content: center;
      width: 100%;
      margin-top: 1.3rem; }
    .login-form__remember {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: center;
      align-content: center;
      width: auto;
      cursor: pointer; }
      .login-form__remember input {
        display: none; }
        .login-form__remember input:checked + .login-form__remember-checkbox {
          background-image: url("../images/login/login_remember.svg");
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat; }
      .login-form__remember-checkbox {
        width: 1.7rem;
        height: 1.7rem;
        margin-right: 0.7rem;
        border: 1px solid #ddd; }
      .login-form__remember-text {
        width: auto;
        font-size: 1.1rem;
        font-weight: 400;
        color: #555; }
    .login-form__forgot {
      width: auto;
      font-size: 1.1rem;
      font-weight: 400;
      color: #555; }
    .login-form__btn {
      width: 100%;
      margin-top: 3.3rem; }
    .login-form__submit {
      width: 60%;
      margin: 0 auto;
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 3.8rem;
      color: #fff;
      text-align: center;
      background-color: #f7ae1c;
      border-radius: 1.9rem;
      -webkit-box-shadow: 0.3rem 0.3rem 0.5rem rgba(165, 105, 0, 0.3);
      box-shadow: 0.3rem 0.3rem 0.5rem rgba(165, 105, 0, 0.3); }
    .login-form__identity-item {
      width: 100%;
      padding-bottom: 1.3rem;
      border-bottom: 1px solid #eee; }
      .login-form__identity-item:nth-child(n + 2) {
        padding-top: 1.3rem; }
    .login-form__identity-radio {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: center;
      align-content: center;
      width: 100%;
      cursor: pointer; }
      .login-form__identity-radio input {
        display: none; }
        .login-form__identity-radio input:checked ~ .login-form__identity-check {
          display: block; }
    .login-form__identity-icon {
      width: 2.5rem;
      height: 2.5rem;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 1.25rem; }
      .login-form__identity-icon--father {
        background: #58a1dd url("../images/login/login_identity.svg"); }
      .login-form__identity-icon--mother {
        background: #dd938c url("../images/login/login_identity.svg"); }
      .login-form__identity-icon--other {
        background: #8fc9b5 url("../images/login/login_identity.svg"); }
    .login-form__identity-text {
      width: calc(100% - 4.3rem);
      padding-left: 1.5rem;
      font-size: 1.3rem;
      font-weight: 400;
      line-height: 1;
      color: #444; }
    .login-form__identity-check {
      display: none;
      width: 1.8rem;
      height: 1.8rem;
      background-image: url("../images/login/login_check.svg");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat; }
    .login-form__identity-msg {
      position: relative;
      display: none;
      width: 100%;
      padding-left: 1.5rem;
      margin-top: 0.7rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1;
      color: #d93025; }
      .login-form__identity-msg--error {
        display: block; }
      .login-form__identity-msg::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 1rem;
        height: 1rem;
        background-image: url("../images/login/login_error.svg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat; }

.home {
  width: 100%;
  background-color: #fff; }
  .home-user {
    position: relative;
    width: 100%;
    height: 11.9rem;
    background-image: url("../images/home/home_bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; }
    .home-user__block {
      width: 100%; }
    .home-user__topbar {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: center;
      align-content: center;
      width: 100%;
      height: 4.3rem;
      padding: 0 5%; }
      .home-user__topbar::before {
        content: "";
        position: absolute;
        bottom: 0%;
        left: 2%;
        display: block;
        width: 96%;
        height: 1px;
        background-color: #fff; }
      .home-user__topbar-logo {
        width: auto;
        height: 2.2rem; }
        .home-user__topbar-logo img {
          height: 100%;
          -webkit-filter: drop-shadow(0px 0px 0.2rem rgba(0, 0, 0, 0.3));
          filter: drop-shadow(0px 0px 0.2rem rgba(0, 0, 0, 0.3)); }
      .home-user__topbar-logout {
        width: auto;
        height: 2.5rem; }
        .home-user__topbar-logout img {
          height: 100%;
          -webkit-filter: drop-shadow(0px 0px 0.2rem rgba(0, 0, 0, 0.3));
          filter: drop-shadow(0px 0px 0.2rem rgba(0, 0, 0, 0.3)); }
    .home-user__user {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      -ms-flex-line-pack: start;
      align-content: flex-start;
      width: 100%;
      padding: 1rem 5% 0%; }
      .home-user__user-img {
        width: 8.3rem;
        height: 8.3rem;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 4.15rem;
        border: 0.5rem solid #fff;
        -webkit-box-shadow: 0px 0px 0.2rem rgba(0, 0, 0, 0.3);
        box-shadow: 0px 0px 0.2rem rgba(0, 0, 0, 0.3); }
      .home-user__user-info {
        /*width: calc(100% - 8.3rem);*/
        padding-top: 2rem;
        padding-left: 1.3rem; }
      .home-user__user-class {
        width: 100%;
        margin-bottom: 0.6rem;
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        font-size: 1.1rem;
        font-weight: 400;
        line-height: 1;
        color: #fff;
        text-shadow: 0px 0px 0.2rem rgba(0, 0, 0, 0.3); }
      .home-user__user-name {
        width: 100%;
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1;
        color: #fff;
        text-shadow: 0px 0px 0.2rem rgba(0, 0, 0, 0.3); }
  .home-link {
    width: 100%;
    padding-top: 2.8rem;
    padding-bottom: 1.2rem;
    background-color: #fff; }
    .home-link__block {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: center;
      align-content: center;
      width: 100%; }
    .home-link__btn {
      width: 25%;
      text-align: center; }
      .home-link__btn-img {
        position: relative;
        width: 3.4rem;
        margin: 0 auto; }
      .home-link__btn-notice {
        position: absolute;
        top: 0.1rem;
        right: -0.6rem;
        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;
        -ms-flex-line-pack: center;
        align-content: center;
        width: auto;
        min-width: 1.5rem;
        height: 1.5rem;
        padding: 0px 0.3rem;
        font-size: 1rem;
        font-weight: 400;
        color: #fff;
        text-align: center;
        background-color: #d1222a;
        border-radius: 0.75rem;
        border: 2px solid #fff; }
      .home-link__btn-text {
        width: 100%;
        margin-top: 0.8rem;
        font-size: 1.1rem;
        font-weight: 400;
        line-height: 1;
        color: #333; }
  .home-contactbook {
    width: 100%;
    background-color: #fff;
    border-top: 0.8rem solid #eee; }
    .home-contactbook__block {
      width: 100%;
      padding: 2rem 5% 6.2rem; }
    .home-contactbook__today {
      width: 100%; }
      .home-contactbook__today--isread .home-contactbook__today-title::before {
        content: "已讀";
        text-shadow: 0 0 0.4rem rgba(51, 147, 15, 0.5);
        background-color: #7dbc2a; }
      .home-contactbook__today-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-line-pack: center;
        align-content: center;
        width: 100%;
        height: 16.7rem;
        padding: 0 5%;
        background-image: url("../images/home/home_contactbook_bg.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 1.1rem;
        -webkit-box-shadow: 0.3rem 0.3rem 0.5rem rgba(51, 147, 15, 0.2);
        box-shadow: 0.3rem 0.3rem 0.5rem rgba(51, 147, 15, 0.2); }
      .home-contactbook__today-title {
        position: relative;
        display: inline-block;
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-shadow: 0 0 0.4rem rgba(51, 147, 15, 0.5); }
        .home-contactbook__today-title::before {
          content: "NEW";
          position: absolute;
          top: -1.4rem;
          right: -5rem;
          display: block;
          width: 4.2rem;
          height: 2.2rem;
          padding-right: 0.15rem;
          font-family: "Lato", "Microsoft JhengHei", sans-serif;
          font-size: 1.3rem;
          font-weight: 400;
          line-height: 2.3rem;
          text-align: center;
          color: #fff;
          text-shadow: 0 0 0.4rem rgba(206, 50, 46, 0.5);
          background-color: #f76057;
          border-radius: 1.1rem 1.1rem 1.1rem 0;
          overflow: hidden; }
      .home-contactbook__today-date {
        width: 100%;
        margin-top: 0.8rem;
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 1;
        color: #fff;
        text-shadow: 0rem 0rem 1rem rgb(51 147 15 / 94%); }
      .home-contactbook__user-temperature{
        margin-top:20px;
        font-size: 1rem;
        color: #fff;
      }
      .home-contactbook__today-btn {
        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: 35%;
        height: 3.1rem;
        margin-top: 1.5rem;
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        font-size: 1.2rem;
        font-weight: 400;
        line-height: 1;
        color: #82b71c;
        background-color: #fff;
        border-radius: 1.55rem; }
        .home-contactbook__today-btn::before {
          content: "";
          display: block;
          width: 0.7rem;
          height: 0.9rem;
          margin-right: 0.6rem;
          background-image: url("../images/home/home_contactbook_more.svg");
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat; }
    .home-contactbook__record {
      width: 100%;
      padding-top: 2rem;
      margin-top: 2rem;
      border-top: 1px solid #ddd; }
      .home-contactbook__record-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-line-pack: center;
        align-content: center;
        width: 100%; }
      .home-contactbook__record-icon {
        width: 28%;
        height: 6.1rem;
        background-image: url("../images/home/home_contactbook_record.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 1.1rem;
        -webkit-box-shadow: 0.1rem 0.1rem 0.3rem rgba(36, 159, 188, 0.2);
        box-shadow: 0.1rem 0.1rem 0.3rem rgba(36, 159, 188, 0.2); }
      .home-contactbook__record-text {
        width: 50%;
        padding-left: 1rem;
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        font-size: 1.3rem;
        font-weight: 400;
        line-height: 1;
        color: #333; }
        .home-contactbook__record-text span {
          display: block;
          width: 100%;
          margin-top: 0.7rem;
          font-family: "Lato", "Microsoft JhengHei", sans-serif;
          font-size: 1.1rem;
          font-weight: 400;
          line-height: 1;
          color: #777; }
      .home-contactbook__record-btn {
        width: 22%;
        height: 2.6rem;
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        font-size: 1.2rem;
        font-weight: 400;
        line-height: 2.6rem;
        color: #f7b000;
        text-align: center;
        border: 1px solid #f7b000;
        border-radius: 1.3rem; }
  .home-announcement {
    position: fixed;
    top: 0;
    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%;
    max-width: 575px;
    height: 100vh;
    padding: 1.6rem;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
    z-index: 99998; }
    .home-announcement__block {
      width: 100%;
      padding: 55% 5% 10%;
      background: #f2efd7 url("../images/home/home_announcement.png");
      background-size: contain;
      background-position: top center;
      background-repeat: no-repeat;
      -webkit-box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.05);
      box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.05);
      -webkit-transition: -webkit-transform .15s;
      transition: -webkit-transform .15s;
      -o-transition: transform .15s;
      transition: transform .15s;
      transition: transform .15s, -webkit-transform .15s; }
      .home-announcement__block--closing {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0); }
    .home-announcement__box {
      width: 100%;
      padding: 10% 4%;
      background-color: #fff;
      border-radius: 0.4rem;
      -webkit-box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.05);
      box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.05); }
    .home-announcement__title {
      position: relative;
      width: 100%;
      padding-bottom: 1rem;
      margin-bottom: 1.7rem;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 1.7rem;
      font-weight: 400;
      color: #000;
      text-align: center; }
      .home-announcement__title::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        display: block;
        width: 4rem;
        height: 0.25rem;
        background-color: #ffb900;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%); }
    .home-announcement__content {
      width: 100%;
      max-height: 13.2rem;
      font-size: 1.1rem;
      font-weight: 400;
      line-height: 2;
      color: #555;
      overflow: auto; }
      .home-announcement__content::-webkit-scrollbar-track {
        background-color: #F5F5F5; }
      .home-announcement__content::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        background-color: #F5F5F5; }
      .home-announcement__content::-webkit-scrollbar-thumb {
        background-color: #555; }
    .home-announcement__btn {
      width: 70%;
      height: 3rem;
      margin: 10% auto 0%;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 3rem;
      color: #fff;
      text-align: center;
      background-color: #f7ae1c;
      border-radius: 1.5rem; }

.notice {
  width: 100%;
  min-height: 100vh;
  padding: 2rem 0 6.2rem;
  background: #f7f7f7 url("../images/notice/notice_bg.png");
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat; }
  .notice-title {
    width: 100%; }
    .notice-title__block {
      width: 100%; }
    .notice-title__text {
      width: 100%;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 2.1rem;
      font-weight: 500;
      line-height: 1;
      color: #222; }
  .notice-category {
    width: 100%;
    margin-top: 0.8rem; }
    .notice-category__block {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: center;
      align-content: center;
      width: 100%; }
    .notice-category__btn {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: center;
      align-content: center;
      width: auto;
      padding: 0 1.2rem;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 2.4rem;
      color: #bbb;
      text-align: center;
      border-radius: 1.2rem; }
      .notice-category__btn:nth-child(n + 2) {
        margin-left: 0.6rem; }
      .notice-category__btn--active {
        color: #fff;
        background-color: #f7ae1c; }
      .notice-category__btn-count {
        width: auto;
        min-width: 1.5rem;
        height: 1.5rem;
        margin-left: 0.4rem;
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5rem;
        color: #fff;
        background-color: #d1222a;
        border-radius: 0.75rem; }
  .notice-list {
    width: 100%;
    margin-top: 1.2rem; }
    .notice-list__block {
      width: 100%; }
    .notice-list__item {
      position: relative;
      width: 100%;
      padding: 1.4rem 1.5rem 1.3rem 1.8rem;
      background-color: #fff;
      border-radius: 0.2rem;
      -webkit-box-shadow: 0 0 0.7rem rgba(0, 0, 1, 0.1);
      box-shadow: 0 0 0.7rem rgba(0, 0, 1, 0.1);
      overflow: hidden; }
      .notice-list__item:nth-child(n + 2) {
        margin-top: 1.2rem; }
      .notice-list__item--isreply .notice-list__item-status {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-line-pack: center;
        align-content: center;
        height: auto;
        background-color: transparent;
        border-radius: none; }
        .notice-list__item--isreply .notice-list__item-status::before {
          content: "";
          display: block;
          width: 1rem;
          height: 1.1rem;
          margin-right: 0.2rem;
          background-image: url("../images/notice/notice_isreply.svg");
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat; }
        .notice-list__item--isreply .notice-list__item-status::after {
          content: "已回覆";
          font-size: 1.1rem;
          font-weight: 400;
          line-height: 1;
          color: #777; }
      .notice-list__item--important::before {
        content: "";
        position: absolute;
        top: 1rem;
        left: 0.7rem;
        width: 1.8rem;
        height: 1.8rem;
        background-image: url("../images/notice/notice_important.svg");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat; }
      .notice-list__item--important .notice-list__item-title {
        padding-left: 1em; }
      .notice-list__item-topbar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-line-pack: center;
        align-content: center;
        width: 100%; }
      .notice-list__item-title {
        width: calc(100% - 7rem);
        max-height: 1.3rem;
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        font-size: 1.3rem;
        font-weight: 400;
        line-height: 1;
        color: #333;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden; }
      .notice-list__item-date {
        width: 7rem;
        font-size: 1.1rem;
        font-weight: 400;
        line-height: 1;
        color: #f7636b;
        text-align: right; }
      .notice-list__item-indro {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        -ms-flex-line-pack: end;
        align-content: flex-end;
        width: 100%;
        margin-top: 0.9rem; }
      .notice-list__item-text {
        width: 66%;
        max-height: 3.8rem;
        min-height: 2.6rem;
        font-size: 1.1rem;
        font-weight: 400;
        line-height: 1.9rem;
        color: #777;
        overflow: hidden; }
      .notice-list__item-status {
        width: 6.1rem;
        height: 2.2rem;
        margin-bottom: 0.4rem;
        text-align: center;
        background-color: #ee524f;
        border-radius: 1.1rem; }
        .notice-list__item-status::after {
          content: "尚未回覆";
          font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
          font-size: 1.1rem;
          font-weight: 400;
          line-height: 2.2rem;
          color: #fff; }
  .notice--inner {
    width: 100%;
    min-height: 100vh;
    padding: 2rem 0 6.2rem;
    background-color: #fff; }
  .notice-detail {
    width: 100%; }
    .notice-detail__block {
      width: 100%; }
    .notice-detail__title {
      width: 100%;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 1.6rem;
      font-weight: 400;
      line-height: 1.4;
      color: #333333; }
    .notice-detail__date {
      width: 100%;
      margin-top: 0.6rem;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 1.1rem;
      font-weight: 400;
      line-height: 1;
      color: #777; }
    .notice-detail__content {
      width: 100%;
      margin-top: 1.5rem; }
  .notice--reply {
    width: 100%;
    min-height: 100vh;
    padding: 0 0 6.2rem;
    background-image: url("../images/notice/notice_reply_bg.jpg");
    background-size: 100%;
    background-position: top 6rem center;
    background-repeat: no-repeat; }
  .notice-reply {
    width: 100%;
    min-height: calc(100vh - 19.1rem); }
    .notice-reply--success {
      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;
      min-height: calc(100vh - 12.1rem); }
    .notice-reply__title {
      width: 100%;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 1.8rem;
      font-weight: 400;
      line-height: 1.4;
      color: #333; }
    .notice-reply__text {
      width: 100%;
      margin-top: 0.5rem;
      font-size: 1.2rem;
      font-weight: 400;
      color: #777; }
      .notice-reply__text span {
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1;
        color: #ff7f07; }
    .notice-reply__box {
      width: 100%;
      margin-top: 2.5rem; }
    .notice-reply__item {
      width: 100%; }
      .notice-reply__item:nth-child(n + 2) {
        margin-top: 1.5rem; }
    .notice-reply__label {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: center;
      align-content: center;
      width: 100%;
      cursor: pointer; }
    .notice-reply__select {
      width: calc(100% - 6.7rem);
      height: 4rem;
      padding: 0 1.2rem;
      font-size: 1.2rem;
      font-weight: 400;
      color: #666;
      background: #fff url("../images/common/common_select.svg");
      background-size: 1rem 1rem;
      background-position: right 1.2rem center;
      background-repeat: no-repeat;
      border-radius: 0.5rem;
      border: 1px solid #ddd;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none; }
      .notice-reply__select:focus {
        border: 1px solid #7ec53f; }
      .notice-reply__select-title {
        width: 6.7rem;
        padding-right: 1rem;
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        font-size: 1.2rem;
        font-weight: 400;
        line-height: 1;
        color: #333; }
    .notice-reply__radio {
      display: none; }
      .notice-reply__radio:checked + .notice-reply__radio-box {
        color: #fff;
        background-color: #7ec53f;
        background-image: url("../images/notice/notice_reply_check.png");
        background-size: 5.8rem;
        background-position: bottom right 0%;
        background-repeat: no-repeat;
        border: none;
        -webkit-box-shadow: 0.1rem 0.1rem 0.3rem rgba(126, 197, 63, 0.2);
        box-shadow: 0.1rem 0.1rem 0.3rem rgba(126, 197, 63, 0.2); }
      .notice-reply__radio-box {
        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;
        width: 100%;
        min-height: 4rem;
        padding: 0.7rem 4.2rem 0.7rem 1.2rem;
        font-size: 1.3rem;
        font-weight: 400;
        color: #777;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 0.5rem; }
    .notice-reply__success {
      width: 100%;
      padding: 4rem;
      text-align: center; }

.announcement {
  width: 100%;
  min-height: 100vh;
  padding: 2rem 0 6.2rem;
  background: #f7f7f7 url("../images/announcement/announcement_bg.png");
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat; }
  .announcement-title {
    width: 100%; }
    .announcement-title__block {
      width: 100%; }
    .announcement-title__text {
      width: 100%;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 2.1rem;
      font-weight: 500;
      line-height: 1;
      color: #222; }
  .announcement-list {
    width: 100%;
    margin-top: 1.2rem; }
    .announcement-list__block {
      width: 100%; }
    .announcement-list__item {
      position: relative;
      width: 100%;
      padding: 1.4rem 1.8rem;
      background-color: #fff;
      border-radius: 0.2rem;
      -webkit-box-shadow: 0 0 0.7rem rgba(0, 0, 1, 0.1);
      box-shadow: 0 0 0.7rem rgba(0, 0, 1, 0.1);
      overflow: hidden; }
      .announcement-list__item .announcement-list__item-topbar::before {
        content: "";
        display: block;
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 1.1rem;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat; }
      .announcement-list__item:nth-child(3n) .announcement-list__item-topbar::before {
        background: #4da9e2 url("../images/announcement/announcement_bell.svg");
        -webkit-box-shadow: 0 0.3rem 0.2rem rgba(77, 169, 226, 0.3);
        box-shadow: 0 0.3rem 0.2rem rgba(77, 169, 226, 0.3); }
      .announcement-list__item:nth-child(3n + 1) .announcement-list__item-topbar::before {
        background: #f7ae1c url("../images/announcement/announcement_bell.svg");
        -webkit-box-shadow: 0 0.3rem 0.2rem rgba(247, 174, 28, 0.3);
        box-shadow: 0 0.3rem 0.2rem rgba(247, 174, 28, 0.3); }
      .announcement-list__item:nth-child(3n + 2) .announcement-list__item-topbar::before {
        background: #48e298 url("../images/announcement/announcement_bell.svg");
        -webkit-box-shadow: 0 0.3rem 0.2rem rgba(72, 226, 152, 0.3);
        box-shadow: 0 0.3rem 0.2rem rgba(72, 226, 152, 0.3); }
      .announcement-list__item:nth-child(n + 2) {
        margin-top: 1.2rem; }
      .announcement-list__item--lastest .announcement-list__item-topbar::before {
        background: #f45653 url("../images/announcement/announcement_bell.svg") !important;
        -webkit-box-shadow: 0 0.3rem 0.2rem rgba(244, 86, 83, 0.3) !important;
        box-shadow: 0 0.3rem 0.2rem rgba(244, 86, 83, 0.3) !important; }
      .announcement-list__item--lastest .announcement-list__item-date::after {
        content: "最新公告";
        margin-left: 0.7rem;
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        font-weight: 400;
        color: #f45653; }
      .announcement-list__item-topbar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-line-pack: center;
        align-content: center;
        width: 100%; }
      .announcement-list__item-date {
        width: calc(100% - 3rem);
        padding-left: 0.8rem;
        font-size: 1.1rem;
        font-weight: 400;
        line-height: 1;
        color: #333; }
        .announcement-list__item-date--notread {
          color: #f45653; }
      .announcement-list__item-indro {
        width: 100%;
        max-height: 3.8rem;
        margin-top: 0.8rem;
        font-size: 1.1rem;
        font-weight: 400;
        line-height: 1.9rem;
        color: #777;
        overflow: hidden; }
      .announcement-list__item-status {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-line-pack: center;
        align-content: center;
        width: 100%;
        margin-top: 0.8rem; }
        .announcement-list__item-status::after {
          content: "尚未回覆";
          font-size: 1.1rem;
          font-weight: 700;
          line-height: 1;
          color: #333; }
        .announcement-list__item-status--isreply::before {
          content: "";
          display: block;
          width: 1rem;
          height: 1.1rem;
          margin-right: 0.2rem;
          background-image: url("../images/notice/notice_isreply.svg");
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat; }
        .announcement-list__item-status--isreply::after {
          content: "已回覆";
          font-size: 1.1rem;
          font-weight: 400;
          line-height: 1;
          color: #777; }
  .announcement--inner {
    width: 100%;
    min-height: 100vh;
    padding: 2rem 0 6.2rem;
    background-color: #fff; }
  .announcement-detail {
    width: 100%; }
    .announcement-detail__block {
      width: 100%; }
      .announcement-detail__block--lastest .announcement-detail__title::before {
        background: #f45653 url("../images/announcement/announcement_bell.svg"); }
    .announcement-detail__title {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      -ms-flex-line-pack: start;
      align-content: flex-start;
      width: 100%; }
      .announcement-detail__title::before {
        content: "";
        display: block;
        width: 4rem;
        height: 4rem;
        background: #fcb66e url("../images/announcement/announcement_bell.svg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 2rem; }
      .announcement-detail__title-text {
        width: calc(100% - 4rem);
        padding-top: 0.6rem;
        padding-left: 1.2rem;
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        font-size: 1.9rem;
        font-weight: 400;
        line-height: 1.4;
        color: #333333; }
    .announcement-detail__content {
      width: 100%;
      margin-top: 1.5rem; }

.update {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 2rem 0 6.2rem;
  background-color: #f7f7f7; }
  .update::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    padding-bottom: 20%;
    background-image: url("../images/update/update_topbg.png");
    background-size: contain;
    background-position: top left;
    background-repeat: no-repeat;
    z-index: 1; }
  .update::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding-bottom: 32%;
    background-image: url("../images/update/update_bottombg.png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: 1; }
  .update-title {
    position: relative;
    width: 100%;
    z-index: 2; }
    .update-title__block {
      width: 100%; }
    .update-title__img {
      width: auto;
      height: 2.5rem; }
    .update-title__text {
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 2.1rem;
      font-weight: 500;
      line-height: 1;
      color: #222; }
      .update-title__text span {
        display: block;
        width: 100%;
        margin-top: 1rem;
        font-family: "Lato", "Microsoft JhengHei", sans-serif;
        font-size: 1.1rem;
        font-weight: 400;
        line-height: 1;
        color: #777; }
  .update-form {
    position: relative;
    width: 100%;
    margin-top: 2rem;
    z-index: 2; }
    .update-form__block {
      width: 100%;
      -webkit-filter: drop-shadow(0px 0px 0.3rem rgba(0, 0, 0, 0.05));
      filter: drop-shadow(0px 0px 0.3rem rgba(0, 0, 0, 0.05)); }
    .update-form__table {
      width: 100%;
      padding: 3.3rem 2.5rem;
      background-color: #fff;
      border-radius: 0.5rem; }
    .update-form__item {
      width: 100%; }
      .update-form__item:nth-child(n + 2) {
        margin-top: 1.8rem; }
      .update-form__item--error .update-form__item-msg {
        display: block; }
      .update-form__item--error .update-form__item-input {
        border-color: #d93025; }
        .update-form__item--error .update-form__item-input:focus {
          border-color: #d93025; }
      .update-form__item-label {
        display: block;
        width: 100%; }
      .update-form__item-title {
        width: 100%;
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        font-size: 1.1rem;
        font-weight: 400;
        line-height: 1;
        color: #888; }
      .update-form__item-field {
        position: relative;
        width: 100%; }
      .update-form__item-input {
        position: relative;
        width: 100%;
        height: 3.8rem;
        font-size: 1.2rem;
        font-weight: 400;
        color: #333333;
        background-color: #fff;
        border-bottom: 2px solid #eee;
        -webkit-transition: border-color .3s;
        -o-transition: border-color .3s;
        transition: border-color .3s;
        z-index: 1; }
        .update-form__item-input:focus {
          border-color: #ffc13f; }
      .update-form__item-icon {
        position: absolute;
        top: 0;
        right: 0;
        width: 1.3rem;
        height: 3.8rem;
        background-size: 1.3rem 1.3rem;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 2; }
        .update-form__item-icon--see {
          background-image: url("../images/login/login_see.svg"); }
        .update-form__item-icon--nosee {
          background-image: url("../images/login/login_nosee.svg"); }
      .update-form__item-msg {
        position: relative;
        display: none;
        width: 100%;
        padding-left: 1.5rem;
        margin-top: 0.7rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1;
        color: #d93025; }
        .update-form__item-msg::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          width: 1rem;
          height: 1rem;
          background-image: url("../images/login/login_error.svg");
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat; }
    .update-form__btn {
      width: 100%;
      margin-top: 2.8rem; }
    .update-form__save {
      width: 45%;
      margin: 0 auto;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 1.3rem;
      font-weight: 400;
      line-height: 3.3rem;
      text-align: center;
      color: #fff;
      background: -webkit-gradient(linear, left top, left bottom, from(#ffc837), to(#ff8f23));
      background: -webkit-linear-gradient(top, #ffc837 0%, #ff8f23 100%);
      background: -o-linear-gradient(top, #ffc837 0%, #ff8f23 100%);
      background: linear-gradient(180deg, #ffc837 0%, #ff8f23 100%);
      border-radius: 1.65rem; }

.medication {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 2rem 0 6.2rem;
  background-color: #f7f7f7; }
  .medication--edit {
    padding: 2rem 0 9rem; }
  .medication::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 16rem;
    height: 8.5rem;
    background-image: url("../images/medication/medication_img.png");
    background-size: contain;
    background-position: top right;
    background-repeat: no-repeat;
    z-index: 2; }
  .medication-add {
    position: fixed;
    bottom: 4.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -ms-flex-line-pack: end;
    align-content: flex-end;
    width: 100%;
    height: 0;
    max-width: 575px;
    -webkit-transition: -webkit-transform .8s;
    transition: -webkit-transform .8s;
    -o-transition: transform .8s;
    transition: transform .8s;
    transition: transform .8s, -webkit-transform .8s;
    z-index: 999; }
    .medication-add--move {
      -webkit-transform: translateY(4.2rem);
      -ms-transform: translateY(4.2rem);
      transform: translateY(4.2rem); }
    .medication-add--forcemove {
      -webkit-transform: translateY(4.2rem) !important;
      -ms-transform: translateY(4.2rem) !important;
      transform: translateY(4.2rem) !important; }
    .medication-add__btn {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: start;
      align-content: flex-start;
      width: 6.8rem;
      margin-bottom: 1rem;
      margin-right: 1rem;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 1.3rem;
      font-weight: 400;
      line-height: 3.3rem;
      text-align: center;
      color: #fff;
      background: -webkit-gradient(linear, left top, left bottom, from(#ffc837), to(#ff8f23));
      background: -webkit-linear-gradient(top, #ffc837 0%, #ff8f23 100%);
      background: -o-linear-gradient(top, #ffc837 0%, #ff8f23 100%);
      background: linear-gradient(180deg, #ffc837 0%, #ff8f23 100%);
      border-radius: 1.65rem;
      -webkit-box-shadow: 0 0.4rem 0.5rem rgba(165, 105, 0, 0.3);
      box-shadow: 0 0.4rem 0.5rem rgba(165, 105, 0, 0.3); }
      .medication-add__btn::before {
        content: "";
        display: block;
        width: 1.1rem;
        height: 1.1rem;
        margin-right: 0.6rem;
        background-image: url("../images/medication/medication_btn.svg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat; }
  .medication-title {
    position: relative;
    width: 100%;
    z-index: 1; }
    .medication-title__block {
      width: 100%; }
    .medication-title__text {
      width: 100%;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 2.1rem;
      font-weight: 500;
      line-height: 1;
      color: #222; }
  .medication-list {
    width: 100%;
    margin-top: 1.2rem; }
    .medication-list__block {
      width: 100%;
      padding: 1.8rem;
      background-color: #fff;
      border-radius: 0.2rem;
      -webkit-box-shadow: 0 0 0.7rem rgba(0, 0, 1, 0.1);
      box-shadow: 0 0 0.7rem rgba(0, 0, 1, 0.1); }
    .medication-list__item {
      position: relative;
      width: 100%; }
      .medication-list__item:nth-child(n + 2) {
        margin-top: 2.5rem; }
      .medication-list__item-date {
        width: 100%;
        padding-bottom: 0.9rem;
        font-size: 1.1rem;
        font-weight: 400;
        line-height: 1;
        color: #777;
        border-bottom: 1px solid #eee; }
      .medication-list__item-medicine {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-line-pack: center;
        align-content: center;
        width: 100%;
        padding: 1.2rem 0;
        border-bottom: 1px solid #eee; }
        .medication-list__item-medicine::before {
          content: "";
          display: block;
          width: 2.8rem;
          height: 2.8rem;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          border-radius: 1.4rem; }
        .medication-list__item-medicine--powder::before {
          background: #fcb66e url("../images/medication/medication_listicon-01.svg"); }
        .medication-list__item-medicine--potion::before {
          background: #80c8f7 url("../images/medication/medication_listicon-02.svg"); }
        .medication-list__item-medicine--eye::before {
          background: #63d69c url("../images/medication/medication_listicon-03.svg"); }
        .medication-list__item-medicine--other::before {
          background: #f7aaae url("../images/medication/medication_listicon-04.svg"); }
      .medication-list__item-usage {
        width: calc(100% - 8.2rem);
        padding-left: 1.2rem;
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 1;
        color: #333; }
        .medication-list__item-usage span {
          display: block;
          width: 100%;
          margin-top: 0.7rem;
          font-family: "Lato", "Microsoft JhengHei", sans-serif;
          font-size: 1.1rem;
          font-weight: 400;
          line-height: 1;
          color: #777; }
      .medication-list__item-edit {
        width: 2.2rem;
        height: 2.2rem;
        background-image: url("../images/medication/medication_edit.svg");
        background-size: 1.5rem;
        background-position: center;
        background-repeat: no-repeat; }
      .medication-list__item-delete {
        width: 2.2rem;
        height: 2.2rem;
        margin-left: 1rem;
        background-image: url("../images/medication/medication_delete.svg");
        background-size: 1.5rem;
        background-position: center;
        background-repeat: no-repeat; }
  .medication--inner {
    width: 100%;
    min-height: 100vh;
    padding: 2rem 0 6.2rem;
    background-color: #f7f7f7; }
  .medication-edit {
    width: 100%; }
    .medication-edit__item {
      width: 100%; }
      .medication-edit__item:nth-child(n + 2) {
        margin-top: 1.8rem; }
      .medication-edit__item--error .medication-edit__title::before {
        background-color: #d93025;
        border: 0.5rem solid #ffd4d1; }
      .medication-edit__item--error .medication-edit__input {
        border-color: #d93025; }
      .medication-edit__item--error .medication-edit__select {
        border-color: #d93025; }
      .medication-edit__item--error .medication-edit__textarea {
        border-color: #d93025; }
      .medication-edit__item--error .medication-edit__timeslot-text {
        border-color: #d93025; }
      .medication-edit__item--error .medication-edit__msg {
        display: block; }
    .medication-edit__remarks {
      position: relative;
      width: 100%;
      padding: 0.7rem 1rem 0.7rem 5rem;
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 1.4;
      color: #7a6565;
      background-color: #ffdfdf;
      border-radius: 0.5rem; }
      .medication-edit__remarks::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 1rem;
        width: 3rem;
        height: 3rem;
        background-image: url("../images/medication/medication_remarks.svg");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
      .medication-edit__remarks span {
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        color: #ee5253; }
    .medication-edit__group {
      width: 100%;
      margin-top: 1.8rem; }
    .medication-edit__title {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: center;
      align-content: center;
      width: 100%;
      margin-bottom: 1rem;
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 1;
      color: #333; }
      .medication-edit__title::before {
        content: "";
        display: block;
        width: 1.7rem;
        height: 1.7rem;
        margin-right: 0.5rem;
        background-color: #f7ae1c;
        border-radius: 0.85rem;
        border: 0.5rem solid #f7e9cc;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }
    .medication-edit__time {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: center;
      align-content: center;
      width: 100%; }
      .medication-edit__time-item {
        width: 100%; }
      .medication-edit__time .medication-edit__input {
        font-size: 0px; }
      .medication-edit__time .medication-edit__field {
        position: relative; }
        .medication-edit__time .medication-edit__field::before {
          content: attr(data-text);
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 4rem;
          padding: 0 1.2rem;
          font-size: 1.2rem;
          font-weight: 400;
          line-height: 4rem;
          color: #666;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          z-index: 2; }
    .medication-edit__type {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: center;
      align-content: center;
      width: 100%; }
      .medication-edit__type-item {
        width: 23%;
        background-color: #fff;
        border-radius: 0.5rem;
        -webkit-box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1);
        box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1); }
      .medication-edit__type-label {
        width: 100%;
        cursor: pointer; }
        .medication-edit__type-label input {
          display: none; }
          .medication-edit__type-label input:checked + .medication-edit__type-icon {
            opacity: 1;
            border-color: #2f95f2; }
            .medication-edit__type-label input:checked + .medication-edit__type-icon::before {
              display: block; }
      .medication-edit__type-icon {
        position: relative;
        width: 100%;
        padding-bottom: 90%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 0.5rem;
        border: 2px solid transparent;
        opacity: .4; }
        .medication-edit__type-icon::before {
          content: "";
          position: absolute;
          top: 0.5rem;
          right: 0.5rem;
          display: none;
          width: 1.3rem;
          height: 1.3rem;
          background-image: url("../images/medication/medication_checked.svg");
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat; }
        .medication-edit__type-icon--powder {
          background-image: url("../images/medication/medication_type-01.svg"); }
        .medication-edit__type-icon--potion {
          background-image: url("../images/medication/medication_type-02.svg"); }
        .medication-edit__type-icon--eye {
          background-image: url("../images/medication/medication_type-03.svg"); }
        .medication-edit__type-icon--other {
          background-image: url("../images/medication/medication_type-04.svg"); }
    .medication-edit__timeslot {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: center;
      align-content: center;
      width: 100%; }
      .medication-edit__timeslot-item {
        width: 31%;
        background-color: #fff;
        border-radius: 0.5rem;
        -webkit-box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1);
        box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1); }
      .medication-edit__timeslot-label {
        width: 100%;
        cursor: pointer; }
        .medication-edit__timeslot-label input {
          display: none; }
          .medication-edit__timeslot-label input:checked + .medication-edit__timeslot-text {
            opacity: 1;
            border-color: #2f95f2; }
            .medication-edit__timeslot-label input:checked + .medication-edit__timeslot-text::before {
              display: block; }
      .medication-edit__timeslot-text {
        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%;
        height: 4rem;
        font-size: 1.2rem;
        font-weight: 400;
        line-height: 1;
        color: #666;
        text-align: center;
        border-radius: 0.5rem;
        border: 2px solid transparent;
        opacity: .4; }
        .medication-edit__timeslot-text::before {
          content: "";
          position: absolute;
          top: 0.5rem;
          right: 0.5rem;
          display: none;
          width: 1.3rem;
          height: 1.3rem;
          background-image: url("../images/medication/medication_checked.svg");
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat; }
    .medication-edit__field {
      width: 100%; }
    .medication-edit__select {
      width: 100%;
      height: 4rem;
      padding: 0 1.2rem;
      font-size: 1.2rem;
      font-weight: 400;
      color: #666;
      background: #fff url("../images/common/common_select.svg");
      background-size: 1rem 1rem;
      background-position: right 1.2rem center;
      background-repeat: no-repeat;
      border-radius: 0.5rem;
      border: 1px solid #fff;
      -webkit-box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1);
      box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1);
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none; }
    .medication-edit__input {
      width: 100%;
      height: 4rem;
      padding: 0 1.2rem;
      font-size: 1.2rem;
      font-weight: 400;
      color: #666;
      background-color: #fff;
      border-radius: 0.5rem;
      border: 1px solid #fff;
      -webkit-box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1);
      box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1); }
    .medication-edit__textarea {
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      height: 11rem;
      padding: 1.2rem;
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 1.4;
      color: #666;
      background-color: #fff;
      border-radius: 0.5rem;
      border: 1px solid #fff;
      -webkit-box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1);
      box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1); }
    .medication-edit__msg {
      position: relative;
      display: none;
      width: 100%;
      padding-left: 1.5rem;
      margin-top: 0.7rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1;
      color: #d93025; }
      .medication-edit__msg::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 1rem;
        height: 1rem;
        background-image: url("../images/login/login_error.svg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat; }
  .medication-view {
    width: 100%; }
    .medication-view__remarks {
      position: relative;
      width: 100%;
      padding: 0.7rem 1rem 0.7rem 5rem;
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 1.4;
      color: #7a6565;
      background-color: #ffdfdf;
      border-radius: 0.5rem; }
      .medication-view__remarks::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 1rem;
        width: 3rem;
        height: 3rem;
        background-image: url("../images/medication/medication_remarks.svg");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
      .medication-view__remarks span {
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        color: #ee5253; }
    .medication-view__list {
      width: 100%;
      padding: 0.5rem 1.5rem;
      margin-top: 1.8rem;
      background-color: #fff;
      border-radius: 0.5rem;
      -webkit-box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1);
      box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1); }
    .medication-view__item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      -ms-flex-line-pack: start;
      align-content: flex-start;
      width: 100%;
      padding: 1.5rem 0; }
      .medication-view__item:nth-child(n + 2) {
        border-top: 1px solid #ddd; }
    .medication-view__title {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: center;
      align-content: center;
      width: 9rem;
      font-size: 1.2rem;
      font-weight: 400;
      color: #333; }
      .medication-view__title::before {
        content: "";
        display: block;
        width: 1.7rem;
        height: 1.7rem;
        margin-right: 0.5rem;
        background-color: #f7ae1c;
        border-radius: 0.85rem;
        border: 0.5rem solid #f7e9cc;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }
    .medication-view__text {
      width: calc(100% - 9rem);
      font-size: 1.2rem;
      font-weight: 400;
      color: #777; }

.contactbook {
  width: 100%;
  min-height: 100vh;
  padding: 2rem 0 6.2rem;
  background: #f7f7f7 url("../images/contactbook/contactbook_bg.jpg");
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat; }
  .contactbook-title {
    width: 100%; }
    .contactbook-title__block {
      width: 100%; }
    .contactbook-title__text {
      width: 100%;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 2.1rem;
      font-weight: 500;
      line-height: 1;
      color: #fff; }
  .contactbook-list {
    width: 100%;
    margin-top: 1.2rem; }
    .contactbook-list__block {
      width: 100%; }
    .contactbook-list__item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: center;
      align-content: center;
      width: 100%;
      padding: 1.4rem 1.8rem;
      background-color: #fff;
      border-radius: 0.2rem;
      -webkit-box-shadow: 0 0 0.7rem rgba(0, 0, 1, 0.1);
      box-shadow: 0 0 0.7rem rgba(0, 0, 1, 0.1);
      overflow: hidden; }
      .contactbook-list__item:nth-child(3n)::before {
        content: "";
        display: block;
        width: 1rem;
        height: 1rem;
        background-color: #48e298;
        border-radius: 0.5rem; }
      .contactbook-list__item:nth-child(3n + 1)::before {
        content: "";
        display: block;
        width: 1rem;
        height: 1rem;
        background-color: #4da9e2;
        border-radius: 0.5rem; }
      .contactbook-list__item:nth-child(3n + 2)::before {
        content: "";
        display: block;
        width: 1rem;
        height: 1rem;
        background-color: #f7ae1c;
        border-radius: 0.5rem; }
      .contactbook-list__item::after {
        content: "";
        display: block;
        width: 1rem;
        height: 2rem;
        background-image: url("../images/contactbook/contactbook_arrow.svg");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat; }
      .contactbook-list__item:nth-child(n + 2) {
        margin-top: 1.2rem; }
      .contactbook-list__item-info {
        width: calc(100% - 5.6rem); }
      .contactbook-list__item-title {
        width: 100%;
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        font-size: 1.3rem;
        font-weight: 400;
        line-height: 1;
        color: #333; }
      .contactbook-list__item-indro {
        width: 100%;
        max-height: 3.8rem;
        margin-top: 0.9rem;
        font-size: 1.1rem;
        font-weight: 400;
        line-height: 1.9rem;
        color: #777;
        overflow: hidden; }
      .contactbook-list__item-status {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-line-pack: center;
        align-content: center;
        width: 100%;
        margin-top: 0.8rem; }
        .contactbook-list__item-status::after {
          content: "尚未回覆";
          font-size: 1.1rem;
          font-weight: 700;
          line-height: 1;
          color: #333; }
        .contactbook-list__item-status--isreply::before {
          content: "";
          display: block;
          width: 1rem;
          height: 1.1rem;
          margin-right: 0.2rem;
          background-image: url("../images/notice/notice_isreply.svg");
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat; }
        .contactbook-list__item-status--isreply::after {
          content: "已回覆";
          font-size: 1.1rem;
          font-weight: 400;
          line-height: 1;
          color: #777; }
  .contactbook--inner {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 2rem 0 6.2rem;
    background-color: #fff; }
    .contactbook--inner::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      display: block;
      width: 12.8rem;
      height: 10.5rem;
      background-image: url("../images/contactbook/contactbook_img.png");
      background-size: contain;
      background-position: top right;
      background-repeat: no-repeat;
      z-index: 2; }
  .contactbook-detail {
    position: relative;
    width: 100%;
    padding-bottom: 1.4rem;
    z-index: 2; }
    .contactbook-detail:nth-child(n + 3) {
      padding-top: 1.4rem;
      border-top: 0.8rem solid #eee; }
    .contactbook-detail:nth-last-child(1) {
      padding-bottom: 0; }
    .contactbook-detail__block {
      width: 100%; }
    .contactbook-detail__title {
      width: 100%;
      margin-bottom: 2.5rem;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 1.9rem;
      font-weight: 500;
      line-height: 1;
      color: #222; }
    .contactbook-detail__subtitle {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: center;
      align-content: center;
      width: 100%;
      padding-bottom: 1rem;
      margin-bottom: 1.1rem;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 1.3rem;
      font-weight: 400;
      line-height: 1;
      color: #333;
      border-bottom: 1px solid #eee; }
      .contactbook-detail__subtitle::before {
        content: "";
        display: block;
        width: 1.8rem;
        height: 1.8rem;
        margin-right: 0.6rem;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat; }
      .contactbook-detail__subtitle--daily::before {
        background-image: url("../images/contactbook/contactbook_subtitle-01.svg"); }
      .contactbook-detail__subtitle--teacher::before {
        background-image: url("../images/contactbook/contactbook_subtitle-02.svg"); }
      .contactbook-detail__subtitle--class::before {
        background-image: url("../images/contactbook/contactbook_subtitle-03.svg"); }
      .contactbook-detail__subtitle--bag::before {
        background-image: url("../images/contactbook/contactbook_subtitle-04.svg"); }
      .contactbook-detail__subtitle--reply::before {
        background-image: url("../images/contactbook/contactbook_subtitle-05.svg"); }
    .contactbook-detail__daily {
      width: 100%; }
      .contactbook-detail__daily-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-line-pack: start;
        align-content: flex-start;
        width: 100%; }
        .contactbook-detail__daily-list:nth-child(n + 2) {
          margin-top: 1rem; }
      .contactbook-detail__daily-title {
        width: 9rem;
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        font-size: 1.2rem;
        font-weight: 400;
        line-height: 1.4;
        color: #555; }
      .contactbook-detail__daily-text {
        width: calc(100% - 9rem);
        font-size: 1.2rem;
        font-weight: 400;
        line-height: 1.4;
        color: #777; }
    .contactbook-detail__content {
      width: 100%; }
    .contactbook-detail__remarks {
      position: relative;
      width: 100%;
      padding: 0.7rem 1rem 0.7rem 5rem;
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 1.4;
      color: #7a6565;
      background-color: #ffdfdf;
      border-radius: 0.5rem; }
      .contactbook-detail__remarks::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 1rem;
        width: 3rem;
        height: 3rem;
        background-image: url("../images/contactbook/contactbook_remarks.svg");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
      .contactbook-detail__remarks span {
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        color: #ee5253; }
  .contactbook-reply__item {
    width: 100%; }
    .contactbook-reply__item:nth-child(n + 3) {
      margin-top: 1.8rem; }
    .contactbook-reply__item--error .contactbook-reply__title::before {
      background-color: #d93025;
      border: 0.5rem solid #ffd4d1; }
    .contactbook-reply__item--error .contactbook-reply__input {
      border-color: #d93025; }
    .contactbook-reply__item--error .contactbook-reply__select {
      border-color: #d93025; }
    .contactbook-reply__item--error .contactbook-reply__textarea {
      border-color: #d93025; }
    .contactbook-reply__item--error .contactbook-reply__msg {
      display: block; }
    .contactbook-reply__item--leaveerror .contactbook-reply__title::before {
      background-color: #d93025;
      border: 0.5rem solid #ffd4d1; }
    .contactbook-reply__item--leaveerror .contactbook-reply__msg {
      display: block; }
  .contactbook-reply__title {
    position: relative;
    width: 100%;
    padding-left: 2.2rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.4;
    color: #333; }
    .contactbook-reply__title::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 1.7rem;
      height: 1.7rem;
      background-color: #f7ae1c;
      border-radius: 0.85rem;
      border: 0.5rem solid #f7e9cc;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
    .contactbook-reply__title span {
      color: #999; }
  .contactbook-reply__subtitle {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
    color: #888; }
  .contactbook-reply__timebox {
    width: 100%; }
  .contactbook-reply__time {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    width: 100%; }
    .contactbook-reply__time--typeerror .contactbook-reply__time-item .contactbook-reply__select {
      border-color: #d93025; }
    .contactbook-reply__time--dateerror .contactbook-reply__time-item .contactbook-reply__input {
      border-color: #d93025; }
    .contactbook-reply__time:nth-child(n + 2) {
      margin-top: 0.8rem; }
    .contactbook-reply__time-item {
      width: calc((99.999% - 5.8rem) / 3); }
    .contactbook-reply__time-symbol {
      width: 1rem;
      font-size: 2rem;
      font-weight: 300;
      line-height: 1;
      color: #666;
      text-align: center; }
    .contactbook-reply__time-btn {
      width: 2.4rem;
      font-size: 1.1rem;
      font-weight: 400;
      line-height: 1;
      color: #4b556b;
      text-align: center; }
    .contactbook-reply__time-add {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: center;
      align-content: center;
      width: 100%;
      height: 3.3rem;
      margin-top: 1rem;
      font-size: 1.1rem;
      font-weight: 400;
      line-height: 1;
      color: #4b556b;
      background-color: #f0f3f9; }
      .contactbook-reply__time-add:before {
        content: "";
        display: block;
        width: 1rem;
        height: 1rem;
        margin-right: 0.5rem;
        background-image: url("../images/contactbook/contactbook_add.svg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat; }
  .contactbook-reply__field {
    position: relative;
    width: 100%; }
    .contactbook-reply__field--fakedate::before {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4rem;
      padding: 0 1.2rem;
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 4rem;
      color: #666;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      z-index: 2; }
  .contactbook-reply__select {
    width: 100%;
    height: 4rem;
    padding: 0 1.2rem;
    font-size: 1.2rem;
    font-weight: 400;
    color: #666;
    background: #fff url("../images/common/common_select.svg");
    background-size: 1rem 1rem;
    background-position: right 1.2rem center;
    background-repeat: no-repeat;
    border-radius: 0.5rem;
    border: 1px solid #fff;
    -webkit-box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; }
  .contactbook-reply__input {
    width: 100%;
    height: 4rem;
    padding: 0 1.2rem;
    font-size: 1.2rem;
    font-weight: 400;
    color: #666;
    background-color: #fff;
    border-radius: 0.5rem;
    border: 1px solid #fff;
    -webkit-box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1); }
    .contactbook-reply__input[data-date="leave-start"] {
      position: relative;
      font-size: 0px;
      z-index: 1; }
    .contactbook-reply__input[data-date="leave-end"] {
      position: relative;
      font-size: 0px;
      z-index: 1; }
  .contactbook-reply__textarea {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 11rem;
    padding: 1.2rem;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.4;
    color: #666;
    background-color: #fff;
    border-radius: 0.5rem;
    border: 1px solid #fff;
    -webkit-box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1); }
  .contactbook-reply__msg {
    position: relative;
    display: none;
    width: 100%;
    padding-left: 1.5rem;
    margin-top: 0.7rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    color: #d93025; }
    .contactbook-reply__msg::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 1rem;
      height: 1rem;
      background-image: url("../images/login/login_error.svg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat; }
  .contactbook-reply__parent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    width: 100%; }
    .contactbook-reply__parent .contactbook-reply__select {
      width: calc((99.999% - 5.8rem) / 3); }
    .contactbook-reply__parent .contactbook-reply__input {
      width: calc((99.999% - 5.8rem) / 3 * 2 + 5.2rem); }
      .contactbook-reply__parent .contactbook-reply__input:not(.contactbook-reply__input--other) {
        border-width: 0 0 1px 0;
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none; }
  .contactbook-reply__text {
    width: 100%;
    padding-left: 2.2rem; }
    .contactbook-reply__text p {
      width: 100%;
      padding-bottom: 1rem;
      font-size: 1.2rem;
      font-weight: 400;
      color: #777;
      border-bottom: 1px solid #eee; }
      .contactbook-reply__text p:nth-child(n + 2) {
        padding-top: 1rem; }

.issue {
  width: 100%;
  min-height: 100vh;
  padding: 2rem 0 6.2rem;
  background: #f7f7f7 url("../images/issue/issue_bg.png");
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat; }
  .issue-title {
    width: 100%; }
    .issue-title__block {
      width: 100%; }
    .issue-title__text {
      width: 100%;
      font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 2.1rem;
      font-weight: 500;
      line-height: 1;
      color: #222; }
  .issue-list {
    width: 100%;
    margin-top: 1.2rem; }
    .issue-list__block {
      width: 100%; }
    .issue-list__item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: center;
      align-content: center;
      width: 100%;
      padding: 1rem 1.5rem;
      background-color: #fff;
      border-radius: 0.2rem;
      -webkit-box-shadow: 0 0 0.7rem rgba(0, 0, 1, 0.1);
      box-shadow: 0 0 0.7rem rgba(0, 0, 1, 0.1);
      overflow: hidden; }
      .issue-list__item:nth-child(n + 2) {
        margin-top: 1.2rem; }
      .issue-list__item-title {
        width: calc(100% - 5rem);
        padding: 0 1rem 0 0;
        font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        font-size: 1.3rem;
        font-weight: 400;
        line-height: 1.4;
        color: #333; }
      .issue-list__item-btn {
        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: 5rem;
        height: 2.4rem;
        font-size: 1.1rem;
        font-weight: 400;
        line-height: 1;
        color: #fff;
        text-align: center;
        background-color: #ffbe3b;
        border-radius: 1.2rem; }