@charset "UTF-8";
/**生育潛力**/ /**寬高設定**/
/**顯示 動畫**/
@import "all.css";
@keyframes showBlock {
  from {
    height: 0px;
  }
  to {
    height: auto;
  }
}
/**頁首標題**/
.bodyTitle {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #ee7524;
  border-bottom-width: initial;
}

/**對話框式標題**/
.dialog {
  position: relative;
  display: flex;
  justify-content: center;
  border: 2px solid #ee7524;
  background-color: #fff;
  margin-bottom: 20px;
}
.dialog h3 {
  position: relative;
  margin: 0.2em 0;
  z-index: 3;
}
.dialog:after {
  z-index: 2;
  position: absolute;
  background-color: #fff;
  left: 50%;
  bottom: -1px;
  width: 20px;
  height: 20px;
  content: "";
  border-right: 2px solid #ee7524;
  border-bottom: 2px solid #ee7524;
  transform: translate(-50%, 50%) rotate(45deg);
}

/**按鈕**/
.btn a {
  margin: 3px;
  width: 210px;
}
.btn a button {
  cursor: pointer;
  background-color: #ee7524;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 10px;
  user-select: none;
  width: 100%;
  height: 50px;
}
.btn a button:disabled {
  background-color: #807c7c;
  opacity: 0.75;
}
.btn a button label {
  color: #fff;
  cursor: pointer;
}
.btn a.slender {
  width: 100%;
}
.btn a.slender button {
  padding: 6px 0;
  height: 40px;
}
.btn a.medium {
  width: 100%;
}
.btn a.large {
  width: 100%;
}
.btn a.large button {
  height: 70px;
}
.btn a.text {
  text-align: center;
  text-decoration: none;
}
.btn a.text button {
  height: 2em;
  background-color: unset;
}
.btn a.text button label {
  width: 100%;
  text-align: center;
  color: #ee7524;
}
.btn a.secondary button {
  background-color: #ee7524;
}
.btn a.secondary button label {
  color: #f2f2f2;
}
.btn a.wide {
  width: 100%;
}

/**選項框**/
.checkboxRadio .checkboxRadioGroup {
  display: flex;
  align-items: center;
}
.checkboxRadio .checkboxRadioGroup.verticalLabel {
  flex-direction: column;
  align-items: unset;
}
.checkboxRadio .checkboxRadioGroup.verticalLabel h3 {
  width: 100%;
  color: #ee7524;
}
.checkboxRadio .checkboxRadioGroup h3 {
  width: 4em;
  min-width: 4em;
  color: #807c7c;
  word-wrap: break-word;
}
.checkboxRadio .checkboxRadioGroup .options {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.checkboxRadio .checkboxRadioGroup .options.row {
  flex-direction: row;
}
.checkboxRadio .checkboxRadioGroup .options input[type=checkbox],
.checkboxRadio .checkboxRadioGroup .options input[type=radio] {
  display: none;
}
.checkboxRadio .checkboxRadioGroup .options input[type=checkbox] + label,
.checkboxRadio .checkboxRadioGroup .options input[type=radio] + label {
  display: flex;
  margin-right: 0.75em;
  color: #ee7524;
}
.checkboxRadio .checkboxRadioGroup .options input[type=checkbox] + label span,
.checkboxRadio .checkboxRadioGroup .options input[type=radio] + label span {
  position: relative;
  display: inline-block;
  margin-right: 0.5em;
  width: 1em;
  height: 1em;
  background-color: #fff5ea;
}
.checkboxRadio .checkboxRadioGroup .options input[type=checkbox]:checked + label span:after,
.checkboxRadio .checkboxRadioGroup .options input[type=radio]:checked + label span:after {
  position: absolute;
  display: inline-block;
  content: "";
  width: 70%;
  height: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ee7524;
}
.checkboxRadio .checkboxRadioGroup .options input[type=radio] + label span {
  border-radius: 1em;
}
.checkboxRadio .checkboxRadioGroup .options input[type=radio]:checked + label span:after {
  border-radius: 70%;
}

/**開關**/
.switch .switchGroup {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.switch .switchGroup > div {
  display: flex;
  align-items: center;
}
.switch .switchGroup > div input {
  height: 0;
  width: 0;
  visibility: hidden;
}
.switch .switchGroup > div input + label {
  cursor: pointer;
  width: 60px;
  height: 30px;
  background: #d9d9d9;
  display: block;
  border-radius: 100px;
  position: relative;
}
.switch .switchGroup > div input + label:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 26px;
  height: 26px;
  background: #807c7c;
  border-radius: 90px;
  transition: 0.3s;
}
.switch .switchGroup > div input:checked + label {
  background-color: #fff5ea;
}
.switch .switchGroup > div input:checked + label:after {
  background-color: #ee7524;
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

/**下拉選單**/
.select .selectGroup {
  display: flex;
  align-items: center;
}
.select .selectGroup h3 {
  width: 4em;
  min-width: 4em;
  color: #ee7524;
  word-wrap: break-word;
}
.select .selectGroup h3.labelAutoWidth {
  word-break: keep-all;
  white-space: nowrap;
  width: unset;
  margin-right: 1.5em;
}
.select .selectGroup.verticalLabel {
  flex-wrap: wrap;
}
.select .selectGroup.verticalLabel h3 {
  width: 100%;
  color: #ee7524;
}
.select .selectGroup.verticalLabel .unit {
  transform: unset;
}
.select .selectGroup .select-wrapper {
  width: 100%;
  position: relative;
  display: flex;
}
.select .selectGroup .select-wrapper select {
  background-color: #fff5ea;
  color: #ee7524;
  border: none;
  border-radius: 10px;
  width: 100%;
  height: 40px;
  appearance: none;
  outline: none;
  padding: 0 20px;
}
.select .selectGroup .select-wrapper select option {
  width: 100%;
}
.select .selectGroup .select-wrapper select:focus + span {
  transform: translateY(-50%) rotate(90deg);
}
.select .selectGroup .select-wrapper select + span {
  font-family: "Font Awesome 6 Free";
  content: "";
  position: absolute;
  font-weight: 600;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s;
  color: #ee7524;
}
.select .selectGroup.color h3 {
  color: #ee7524;
}

/**文本框**/
.text {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.text .textGroup {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.text .textGroup.verticalLabel {
  flex-wrap: wrap;
}
.text .textGroup.verticalLabel h3 {
  width: 100%;
  color: #ee7524;
}
.text .textGroup.verticalLabel .unit {
  transform: unset;
}
.text .textGroup.innerLabel h3 {
  margin: 0;
  position: absolute;
  padding-left: 4px;
  max-width: 3em;
  overflow: auto;
  word-break: keep-all;
  white-space: nowrap;
}
.text .textGroup.innerLabel input {
  text-indent: 5em;
}
.text .textGroup.unitInTitle h3 {
  margin-right: 0;
  width: unset;
  min-width: unset;
  word-break: keep-all;
  color: #ee7524;
}
.text .textGroup.unitInTitle input {
  order: 3;
  background-color: unset;
  text-align: right;
}
.text .textGroup.unitInTitle input.hasUnit {
  padding-right: 0;
}
.text .textGroup.unitInTitle .unit {
  position: relative;
  order: 2;
  transform: unset;
  color: #ee7524;
}
.text .textGroup.unitInTitle .unit:before {
  content: "(";
  margin-left: 0.5em;
}
.text .textGroup.unitInTitle .unit:after {
  content: ")";
}
.text .textGroup:not(:first-child) {
  margin-left: 5px;
}
.text .textGroup h3 {
  width: 4em;
  min-width: 4em;
  color: #ee7524;
  word-wrap: break-word;
}
.text .textGroup h3.labelAutoWidth {
  word-break: keep-all;
  white-space: nowrap;
  width: unset;
  margin-right: 1.5em;
  min-width: unset;
  max-width: unset;
  overflow: visible;
}
.text .textGroup.textStyle input {
  background-color: unset;
  text-align: right;
}
.text .textGroup.textStyle input:focus {
  outline: none;
}
.text .textGroup input {
  width: 100%;
  border: none;
  color: #ee7524;
  margin: 10px 0px;
  background-color: #fff5ea;
  border-radius: 10px;
  padding: 8px;
}
.text .textGroup input[disabled=disabled] {
  background-color: #ffcfaf;
}
.text .textGroup input.hasUnit {
  padding: 5px 3.5em 5px 8px;
}
.text .textGroup input::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ffe9bd;
  opacity: 1; /* Firefox */
}
.text .textGroup input.large {
  height: 40px;
}
.text .textGroup .unit {
  position: absolute;
  bottom: 50%;
  right: 5px;
  width: auto;
  min-width: auto;
  transform: translateY(50%);
  color: #807c7c;
}
.text .textGroup .backTitle {
  width: 4em;
  text-align: right;
}
.text .textGroup.main h3 {
  color: #ee7524;
}

/**介紹 infoBox**/
.infoBox {
  display: flex;
  flex-direction: column;
}
.infoBox .infoTitle,
.infoBox .infoText {
  padding: 13px 26px;
  border-radius: 12px;
  user-select: none;
  text-align: justify;
}
.infoBox .infoTitle {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  margin-top: 20px;
  cursor: pointer;
  z-index: 20;
  /**點擊效果**/
}
.infoBox .infoTitle i {
  transform: rotate(90deg);
  transition: 0.2s ease-in-out;
  font-size: 35px;
  width: 35px;
  height: 35px;
}
.infoBox .infoTitle.active i {
  transform: rotate(0deg);
}
.infoBox .infoTitle.active + .infoText {
  display: block;
  animation-name: showBlock;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
}
.infoBox .infoText {
  display: none;
  background-color: #f2fdff;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  margin-top: -7px;
  z-index: 10;
}
.infoBox .infoTitle.style2 {
  background-color: #fff5ea;
}
.infoBox .infoTitle.style2 label {
  color: #807c7c;
  max-height: 3em;
  line-height: 1.5em;
  overflow: hidden;
  padding-right: 0.5em;
}
.infoBox .infoTitle.style2.active label {
  max-height: unset;
}

/**表格**/
.table .tableGroup .table-wrapper {
  overflow: auto;
}
.table .tableGroup table {
  min-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1.25em;
}
.table .tableGroup table thead tr th {
  word-break: keep-all;
}
.table .tableGroup table tbody tr td {
  text-align: center;
  min-width: 1.5em;
  word-break: keep-all;
}
.table .tableGroup table tbody tr td.idx {
  text-align: center;
  padding: 2px 0.3em;
}
.table .tableGroup table tbody tr td.sumName {
  text-align: right;
}
.table .tableGroup.style1 {
  color: #807c7c;
}
.table .tableGroup.style1 .title {
  display: flex;
  align-items: center;
  font-size: 1.25em;
  color: #ee7524;
}
.table .tableGroup.style1 .title .addBtn {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #ee7524;
  width: 28px;
  height: 28px;
  font-size: 1.25em;
  line-height: 1;
  border-radius: 50%;
  border: 0;
  margin-left: 10px;
}
.table .tableGroup.style1 .title .deleteBtn {
  padding: 0;
  border: 0;
  height: 28px;
  width: 28px;
  background-image: url("../images/icons/trash.png");
  background-color: unset;
  background-size: contain;
  margin-left: auto;
}
.table .tableGroup.style1.active .deleteBtn {
  background-image: url("../images/icons/trash_2.png");
}
.table .tableGroup.style1 thead tr th {
  background-color: #ffe9bd;
  border-left: 2px solid #ee7524;
  border-right: 2px solid #ee7524;
  padding: 8px 5px;
}
.table .tableGroup.style1 thead tr th:first-child {
  border-left: none;
}
.table .tableGroup.style1 thead tr th:last-child {
  border-right: none;
}
.table .tableGroup.style1 thead tr:first-child th {
  border-top: none;
}
.table .tableGroup.style1 thead tr:not(:first-child) th {
  padding-top: 0;
  font-size: 0.6em;
}
.table .tableGroup.style1 tbody tr td {
  background-color: #fff5ea;
  border: 2px solid #ee7524;
  padding: 8px 5px;
}
.table .tableGroup.style1 tbody tr td:first-child {
  border-left: none;
}
.table .tableGroup.style1 tbody tr td:first-child:not(.sumName) {
  background-color: #ffe9bd;
}
.table .tableGroup.style1 tbody tr td:last-child {
  border-right: none;
}
.table .tableGroup.style1 tbody tr:last-child td {
  border-bottom: none;
}
.table .tableGroup.style2 {
  color: #ee7524;
}
.table .tableGroup.style2 .title {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #ee7524;
  border-bottom-width: initial;
  margin-bottom: 1em;
}
.table .tableGroup.style2 .title h3 {
  margin: 0;
  color: #ee7524;
}
.table .tableGroup.style2 .title .addBtn {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #ee7524;
  width: 28px;
  height: 28px;
  font-size: 1.25em;
  line-height: 1;
  border-radius: 50%;
  border: 0;
  margin-left: 10px;
}
.table .tableGroup.style2 .title .deleteBtn {
  padding: 0;
  border: 0;
  height: 28px;
  width: 28px;
  background-image: url("../images/icons/trash.png");
  background-color: unset;
  background-size: contain;
  margin-left: auto;
}
.table .tableGroup.style2 thead tr th {
  background-color: #ffe9bd;
  border: 2px solid #ee7524;
}
.table .tableGroup.style2 tbody tr td {
  font-weight: bold;
  background-color: #fff5ea;
  border: 2px solid #ee7524;
  padding: 8px 5px;
  color: #ee7524;
}
.table .tableGroup.style2.active .deleteBtn {
  background-image: url("../images/icons/trash_2.png");
}
.table .tableGroup.style3 table {
  width: 100%;
  display: flex;
}
.table .tableGroup.style3 table thead tr {
  display: flex;
  flex-direction: column;
}
.table .tableGroup.style3 table thead tr th {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ee7524;
  height: 35px;
  background-color: #fff5ea;
  text-align: center;
  width: 4em;
  padding: 0 0.5em;
  font-size: 0.8em;
}
.table .tableGroup.style3 table thead tr th:first-child {
  background-color: #ee7524;
  color: #fff;
}
.table .tableGroup.style3 table tbody {
  display: flex;
  flex: 1;
  overflow: auto;
}
.table .tableGroup.style3 table tbody tr {
  display: flex;
  flex-direction: column;
}
.table .tableGroup.style3 table tbody tr td {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4em;
  padding: 0 0.5em;
  border: 1px solid #ee7524;
  text-align: center;
  height: 35px;
  font-size: 0.7em;
}
.table .tableGroup.style3 table tbody tr td:first-child {
  background-color: #ee7524;
  color: #fff;
}

/**彈框提醒modal**/
.popInputModal {
  position: fixed;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.25);
}
.popInputModal .modalDialog {
  box-sizing: border-box;
  width: calc(100% - 30px);
  max-width: 738px;
  background-color: #fff5ea;
  margin: 15px auto;
  padding: 15px 30px;
  border-radius: 10px;
}
.popInputModal .modalDialog .modalTitle {
  position: relative;
  display: flex;
  justify-content: center;
}
.popInputModal .modalDialog .modalTitle button {
  position: absolute;
  right: 0;
  background-color: unset;
  border: 0;
  font-size: 1.25em;
}
.popInputModal .modalDialog input {
  background-color: #ffe9bd;
}

.flower {
  margin: 0 auto;
  position: relative;
  width: 1.75em;
  height: 1.75em;
}
.flower:before, .flower:after {
  position: absolute;
  content: "";
  display: inline-block;
  background-color: #ffd37c;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.flower:before {
  width: 100%;
  height: 1px;
}
.flower:after {
  width: 1px;
  height: 100%;
}
.flower .petal {
  position: absolute;
  width: 36%;
  height: 36%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}
.flower .petal span {
  width: 100%;
  height: 100%;
  border: 1px solid #ffd37c;
  background-color: #fff;
  border-radius: 50% 55% 0% 80%/50% 80% 0 55%;
  box-sizing: border-box;
  transform: rotate(45deg);
  transform-origin: center;
}
.flower .petal.whiteYellow span {
  background-color: #ffe9bd;
}
.flower .petal.greenYellow span {
  background-color: #61b60d;
}
.flower .petal.blood span {
  background-color: #c50000;
}
.flower .petal.grayWhite span {
  background-color: #d9d9d9;
}
.flower .petal.fishy span {
  background-color: #ec6811;
}
.flower .petal.stinky span {
  background-color: #33b8e1;
}
.flower .petal.itch span {
  background-color: #ffa467;
}
.flower .petal.tickle span {
  background-color: #c50000;
}
.flower .petal.swollen span {
  background-color: #ec6811;
}
.flower .petal.up {
  left: 50%;
  transform: translateX(-50%);
}
.flower .petal.down {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.flower .petal.down span {
  transform: rotate(225deg);
}
.flower .petal.left {
  left: 0;
  top: 50%;
}
.flower .petal.left span {
  transform: translateY(-50%) rotate(-45deg);
}
.flower .petal.right {
  top: 50%;
  right: 0;
}
.flower .petal.right span {
  transform: translateY(-50%) rotate(135deg);
}

.menstrualCalendar .ui-datepicker {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 10px;
}
.menstrualCalendar .ui-datepicker.ui-widget.ui-widget-content {
  border: 0;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-header {
  padding: 0.5em 0;
  background-color: #ee7524;
  color: #fff;
  border: 0;
  border-radius: 10px 10px 0 0;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next,
.menstrualCalendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  height: 1em;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon,
.menstrualCalendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon {
  background-image: none;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next:before,
.menstrualCalendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before {
  color: #fff;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next {
  color: red;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next:before {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
}
.menstrualCalendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
  color: red;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before {
  content: "\f053";
  font-family: "Font Awesome 6 Free";
}
.menstrualCalendar .ui-datepicker .ui-datepicker-header .ui-state-hover {
  border: 0;
  background-color: unset;
  font-weight: inherit;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar {
  table-layout: fixed;
  margin: 15px 0;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar thead th {
  color: #ee7524;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar tbody tr td {
  position: relative;
  text-align: center;
  vertical-align: top;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar tbody tr td .ui-state-default {
  font-weight: bold;
  margin: 0 auto;
  border: 0;
  background-color: #fff;
  color: #ee7524;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  border-radius: 50%;
  text-align: center;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar tbody tr td .ui-state-default.trace {
  color: #fff;
  background-color: #febfbf !important;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar tbody tr td .ui-state-default.less {
  color: #fff;
  background-color: #fd7f7f !important;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar tbody tr td .ui-state-default.medium {
  color: #fff;
  background-color: #f95656 !important;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar tbody tr td .ui-state-default.mass {
  color: #fff;
  background-color: #ff0000 !important;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar tbody tr td .ui-state-default.ovulation {
  border: 1px solid #ee7524;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar tbody tr td .flower {
  margin: 0.5em auto;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar tbody tr td .pain {
  position: absolute;
  color: #fff;
  right: 0em;
  top: 2em;
  transform: translateY(-50%);
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  text-align: center;
  font-size: 0.75em;
  line-height: 1em;
  vertical-align: middle;
  background-color: #ff0000;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar tbody tr td.ui-state-disabled {
  opacity: 1;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar tbody tr.legend td {
  text-align-last: left;
  padding-left: 1em;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar tbody tr.legend td span {
  color: #525151;
  display: inline-block;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar tbody tr.legend td span i {
  box-sizing: border-box;
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin-right: 0.5em;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar tbody tr.legend td span#ovulatoryPeriod i {
  border: 1px solid #fd8900;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar tbody tr.legend td span#menstrualPeriod i {
  background-color: #ff0000;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar tbody tr.legend td span#painLevel i {
  width: 0.75em;
  height: 0.75em;
  background-color: #ff0000;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar tbody tr.legend td span#discharge i {
  position: relative;
  width: 1.5em;
}
.menstrualCalendar .ui-datepicker .ui-datepicker-calendar tbody tr.legend td span#discharge i .flower {
  position: absolute;
  top: 50%;
  transform: translateY(-80%);
}

html,
body {
  font-size: 18px;
  height: 100%;
  max-height: 100%;
}
@media (min-width: 768px) {
  html,
  body {
    font-size: 22px;
  }
}

body {
  font-family: "Microsoft JhengHei", "Noto Sans TC", "Open Sans";
  color: #ee7524;
  font-weight: bold;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  background-color: #000000;
}

a,
button,
select,
label {
  color: #ee7524;
  font-weight: bold;
}

input {
  font-weight: bold;
}

a,
button {
  cursor: pointer;
}

#mainDiv {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 2px);
  max-height: calc(100% - 2px);
  max-width: 768px;
  margin: auto;
  background-color: #ffcfaf;
  overflow: hidden;
  /**首頁**/
  /** 登入/註冊**/
  /**會員功能**/
  /**生殖保存**/
  /** 問卷 **/
  /** 生育潛力 **/
}
#mainDiv #header {
  display: flex;
  box-sizing: border-box;
  padding-top: 10px;
  height: 70px;
  justify-content: space-between;
}
#mainDiv #header #headerLogo {
  width: 200px;
}
#mainDiv #header #loginGroup {
  display: none;
  align-items: center;
  padding-right: 20px;
}
@media (max-width: 350px) {
  #mainDiv #header #loginGroup {
    padding-right: 10px;
  }
}
#mainDiv #header #loginGroup #login {
  font-size: 1.1em;
  background-color: #ee7524;
  color: #fff;
  border: 0;
  border-radius: 10px;
}
#mainDiv #header #loginGroup #register {
  font-size: 0.9em;
  background-color: unset;
  border: 0;
}
#mainDiv #header #userInfo {
  flex: 1;
  display: none;
  align-items: center;
  justify-content: flex-end;
  padding-right: 15px;
}
#mainDiv #header #userInfo a {
  font-size: 1.2em;
  color: #525151;
  text-decoration: none;
  margin-right: 4px;
}
#mainDiv #header #userInfo #imgBox {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
#mainDiv #header #userInfo #imgBox img {
  width: 100%;
}
#mainDiv #header #userInfo #logOut {
  display: none;
  border: 2px solid #ee7524;
  background-color: #fff;
  border-radius: 8px;
  font-size: 1.2em;
}
#mainDiv #header #counter {
  display: none;
  position: relative;
  width: 3em;
  height: 3em;
}
#mainDiv #header #counter i {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Default transform property */
  transform: translate(-50%, -50%);
  /* Vendor prefixes for better browser support */
  -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
  -moz-transform: translate(-50%, -50%); /* Firefox */
  -ms-transform: translate(-50%, -50%); /* Internet Explorer */
  -o-transform: translate(-50%, -50%); /* Opera */
  color: #ec6939;
  font-size: 2em;
}
#mainDiv #header #counter span {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Default transform property */
  transform: translate(-50%, -50%);
  /* Vendor prefixes for better browser support */
  -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
  -moz-transform: translate(-50%, -50%); /* Firefox */
  -ms-transform: translate(-50%, -50%); /* Internet Explorer */
  -o-transform: translate(-50%, -50%); /* Opera */
  color: #fff;
}
#mainDiv[class*=member_login] #header #userInfo {
  display: flex;
}
#mainDiv #footer {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 30px;
}
#mainDiv #footer a {
  text-decoration: none;
}
#mainDiv #footer a label {
  cursor: pointer;
  font-size: 1.25em;
  line-height: 40px;
  text-decoration: none;
}
#mainDiv #footer a .goPrevBtn,
#mainDiv #footer a .goNextBtn {
  padding: 0;
  cursor: pointer;
  height: 40px;
  width: 40px;
  border: 0;
  border-radius: 100%;
  color: white;
  background-color: #ee7524;
  font-size: 34px;
}
#mainDiv #footer #contactUs {
  position: absolute;
  bottom: 80px;
  right: 32px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  #mainDiv #footer #contactUs {
    right: 45px;
  }
}
#mainDiv #footer #contactUs .contact_icon img {
  width: 2em;
  height: 2em;
  filter: drop-shadow(2px 2px 5px rgba(238, 117, 36, 0.5));
}
#mainDiv #body {
  flex: auto;
  height: calc(100% - 70px - 70px);
  overflow: auto;
  padding: 5px 30px;
  /**滾動軸**/
  /**基礎文字**/
  /**文字顏色**/
}
#mainDiv #body::-webkit-scrollbar {
  width: 7px;
}
#mainDiv #body::-webkit-scrollbar-track-piece {
  background: transparent;
}
#mainDiv #body::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid slategrey;
}
#mainDiv #body::-webkit-scrollbar-track {
  box-shadow: transparent;
}
#mainDiv #body .font-size-large-2 {
  font-size: 2em;
}
#mainDiv #body .font-size-large-1 {
  font-size: 1.5em;
}
#mainDiv #body .font-size-medium {
  font-size: 1em;
}
#mainDiv #body .neutral-color {
  color: #807c7c;
}
#mainDiv #body .flexCenter {
  display: flex;
  justify-content: center;
}
#mainDiv #body .flexColumn {
  display: flex;
  flex-direction: column;
}
#mainDiv #body .flexColumn.flexCenter {
  align-items: center;
}
#mainDiv.index {
  position: relative;
}
#mainDiv.index #body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 5px 15px;
}
@media (min-width: 768px) {
  #mainDiv.index #body {
    padding: 5px 30px;
  }
}
#mainDiv.index #body #div_bigLogo {
  display: flex;
  align-items: flex-start;
  width: 100%;
}
#mainDiv.index #body #div_bigLogo #bigLogo {
  width: 50%;
  min-width: 220px;
  max-width: 50%;
  margin: 10px auto;
}
#mainDiv.index #body #div_text {
  margin-top: 5px;
}
#mainDiv.index #body #div_text .text {
  color: #fd8900;
  font-size: 1.5em;
}
#mainDiv.index #body #div_btnGroup {
  margin-top: 15px;
  margin-bottom: 15px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#mainDiv.index #body #div_btnGroup .div_btn {
  width: 28%;
  cursor: pointer;
}
#mainDiv.index #body #div_btnGroup .div_btn a {
  cursor: pointer;
}
#mainDiv.index #body #div_btnGroup .div_btn a .btn {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border: 0;
  border-radius: 100%;
  box-shadow: 0 4px 6px rgba(100, 100, 100, 0.5);
}
#mainDiv.index #body #div_btnGroup .div_btn a .btn label {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  /* Default transform property */
  transform: translate(-50%, -50%);
  /* Vendor prefixes for better browser support */
  -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
  -moz-transform: translate(-50%, -50%); /* Firefox */
  -ms-transform: translate(-50%, -50%); /* Internet Explorer */
  -o-transform: translate(-50%, -50%); /* Opera */
  cursor: pointer;
  display: inline-block;
  font-size: 2.5em;
  line-height: 100%;
}
@media (min-width: 768px) {
  #mainDiv.index #body #div_btnGroup .div_btn a .btn label {
    font-size: 70px;
    line-height: 70px;
  }
}
#mainDiv.index #body #div_btnGroup .div_btn a #btn_fertility_potential {
  background-color: #dcfff6;
}
#mainDiv.index #body #div_btnGroup .div_btn a #btn_fertility_potential label {
  color: #3dc0de;
}
#mainDiv.index #body #div_btnGroup .div_btn a #btn_reproductive_preservation {
  background-color: #e3c2e3;
}
#mainDiv.index #body #div_btnGroup .div_btn a #btn_reproductive_preservation label {
  color: #a05aa0;
}
#mainDiv.index #body #div_btnGroup .div_btn a #btn_physiological_tracking {
  background-color: #ffcfaf;
}
#mainDiv.index #body #div_btnGroup .div_btn a #btn_physiological_tracking label {
  color: #ec6811;
}
#mainDiv.index #animation {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffcfaf;
  z-index: 9999;
  overflow: hidden;
  animation: endingAnim 0.5s ease-in-out forwards;
  animation-delay: 5s;
}
#mainDiv.index #animation #headLogo {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  width: 130px;
  top: 10px;
  margin-left: 67px;
  overflow: hidden;
  animation: headLogoMovement 1s cubic-bezier(0.5, 0, 0.5, 1) forwards;
  animation-delay: 4s;
}
#mainDiv.index #animation #headLogo span {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Default transform property */
  transform: translate(-50%, -50%);
  /* Vendor prefixes for better browser support */
  -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
  -moz-transform: translate(-50%, -50%); /* Firefox */
  -ms-transform: translate(-50%, -50%); /* Internet Explorer */
  -o-transform: translate(-50%, -50%); /* Opera */
  border-radius: 50%;
  background-color: #ffcfaf;
  animation: headLogo 4s cubic-bezier(0.5, 0, 0.5, 1) forwards;
  animation-delay: 3s;
}
#mainDiv.index #animation #headLogo img {
  width: 200px;
}
#mainDiv.index #animation #logoImgPos {
  position: relative;
  width: 100%;
  height: 60%;
}
#mainDiv.index #animation #logoImgPos #logoImg {
  position: absolute;
  overflow: hidden;
  animation: startingImg 5s cubic-bezier(0.5, 0, 0.5, 1) forwards;
  background-image: url("../images/logo/globalcryobanks_big.png");
  background-size: 100% auto;
  will-change: transform;
}
#mainDiv.index #animation #logoText1 {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: calc(min(100vw, 768px) * 0.1);
  overflow: hidden;
  transform: scale(5);
  animation: startingText1 2s cubic-bezier(0.5, 0, 0.5, 1) forwards;
}
#mainDiv.index #animation #logoText1 img {
  width: 100%;
}
#mainDiv.index #animation #logoText2 {
  margin-left: -300%;
  text-align: center;
  font-size: 2em;
  color: #000;
  font-weight: normal;
  animation: startingText2 5s cubic-bezier(0.5, 0, 0.5, 1) forwards;
  word-break: keep-all;
}
@keyframes startingImg {
  0% {
    width: 50vw;
    height: 50vw;
    top: 50%;
    left: 50%;
    margin-top: -25vw;
    margin-left: -25vw;
    transform: rotate(0);
  }
  25% {
    width: 100vw;
    height: 100vw;
    top: 50%;
    left: 50%;
    margin-top: -50vw;
    margin-left: -50vw;
    transform: rotate(0);
  }
  50% {
    width: 20vw;
    height: 20vw;
    top: 50%;
    left: 50%;
    margin-top: -10vw;
    margin-left: -10vw;
    transform: rotate(0);
  }
  75% {
    width: 45px;
    height: 45px;
    top: 50%;
    left: 50%;
    margin-top: -22.5px;
    margin-left: -22.5px;
    transform: rotate(-360deg);
  }
  100% {
    width: 45px;
    height: 45px;
    top: 14px;
    left: 17px;
    margin-top: 0;
    margin-left: 0;
    transform: rotate(-360deg);
  }
}
@media (min-width: 768px) {
  @keyframes startingImg {
    0% {
      width: 384px;
      height: 384px;
      top: 50%;
      left: 50%;
      margin-top: -192px;
      margin-left: -192px;
      transform: rotate(0);
    }
    25% {
      width: 768px;
      height: 768px;
      top: 50%;
      left: 50%;
      margin-top: -384px;
      margin-left: -384px;
      transform: rotate(0);
    }
    50% {
      width: 153.6px;
      height: 153.6px;
      top: 50%;
      left: 50%;
      margin-top: -76.8px;
      margin-left: -76.8px;
      transform: rotate(0);
    }
    75% {
      width: 45px;
      height: 45px;
      top: 50%;
      left: 50%;
      margin-top: -22.5px;
      margin-left: -22.5px;
      transform: rotate(-360deg);
    }
    100% {
      width: 45px;
      height: 45px;
      top: 14px;
      left: 17px;
      margin-top: 0;
      margin-left: 0;
      transform: rotate(-360deg);
    }
  }
}
@keyframes startingText1 {
  0% {
    opacity: 0;
    /* Default transform property */
    transform: scale(8);
    /* Vendor prefixes for better browser support */
    -webkit-transform: scale(8); /* Safari and Chrome */
    -moz-transform: scale(8); /* Firefox */
    -ms-transform: scale(8); /* Internet Explorer */
    -o-transform: scale(8); /* Opera */
  }
  20% {
    opacity: 0;
    transform: scale(5);
  }
  100% {
    opacity: 1;
    transform: scale(0.8);
  }
}
@keyframes startingText2 {
  30% {
    margin-left: 0;
  }
  56% {
    margin-left: 0;
    opacity: 1;
  }
  58% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  62% {
    opacity: 1;
  }
  64% {
    opacity: 0;
  }
  66% {
    opacity: 1;
  }
  68% {
    opacity: 0;
  }
  70% {
    opacity: 1;
    margin-left: 0;
  }
  100% {
    margin-left: 300%;
    opacity: 1;
  }
}
@keyframes headLogo {
  0% {
    width: 0;
    height: 0;
  }
  25% {
    width: 130px;
    height: 130px;
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    width: 130px;
    height: 130px;
    opacity: 0;
  }
}
@keyframes headLogoMovement {
  0% {
    margin-left: -130px;
  }
  100% {
    margin-left: 67px;
  }
}
@keyframes endingAnim {
  from {
    left: 0;
  }
  to {
    left: -100%;
  }
}
#mainDiv.login #header {
  display: none;
}
#mainDiv.login #body {
  padding-top: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
#mainDiv.login #body #div_bigLogo {
  display: flex;
  align-items: flex-start;
  width: 100%;
}
#mainDiv.login #body #div_bigLogo #bigLogo {
  width: 50%;
  min-width: 220px;
  max-width: 50%;
  margin: 10px auto;
}
#mainDiv.login #body #div_text {
  margin-top: 5px;
}
#mainDiv.login #body #div_text .text {
  color: #fd8900;
  font-size: 1.5em;
}
#mainDiv.login #body #div_memberGroup .textGroup {
  margin: 15px 0;
}
#mainDiv.login #body #div_memberGroup .textGroup input::placeholder {
  color: #fff;
}
#mainDiv.login #body #div_memberGroup .btn a.slender {
  margin-top: 15px;
}
#mainDiv.login #body #div_memberGroup .btn a.text {
  margin-right: auto;
}
#mainDiv.login #body #div_memberGroup .btn a.text label {
  text-align: left;
  font-size: 1.25em;
}
#mainDiv.register #div_memberGroup .btn a.text {
  width: unset;
}
#mainDiv.register #div_memberGroup .btn a.text:first-child button {
  width: unset;
}
#mainDiv.register #div_memberGroup .btn a.text:first-child button label {
  color: #807c7c;
}
#mainDiv.member_login_discount #body #couponGroup {
  position: relative;
}
#mainDiv.member_login_discount #body #couponGroup #nameGroup {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding-top: 26%;
  padding-left: 45%;
}
#mainDiv.member_login_discount #body #couponGroup #nameGroup span {
  font-weight: bold;
  font-size: 6vw;
  color: #525151;
  background-color: #fff;
  padding: 0 8vw;
  border-radius: 10px;
}
@media (min-width: 768px) {
  #mainDiv.member_login_discount #body #couponGroup #nameGroup span {
    font-size: 46.08px;
    padding: 0 61.44px;
  }
}
#mainDiv.member_login_discount #body #couponGroup #coupon {
  max-width: 100%;
}
#mainDiv.member_login_discount #body #couponGroup.male #useMethod .bodyTitle {
  border-color: #33b8e1;
}
#mainDiv.member_login_discount #body #couponGroup.male #useMethod label {
  color: #33b8e1;
}
#mainDiv.member_login_discount #body #couponGroup.male #nameGroup span {
  background-color: #bfe3f3;
}
#mainDiv.member_login_discount #body #couponGroup.female #useMethod .bodyTitle {
  border-color: #ef8f71;
}
#mainDiv.member_login_discount #body #couponGroup.female #useMethod label {
  color: #ef8f71;
}
#mainDiv.member_login_discount #body #couponGroup.female #nameGroup span {
  background-color: #f9d5c7;
}
#mainDiv.member_login_nav #header #userInfo #imgBox {
  display: none;
}
#mainDiv.member_login_nav #header #userInfo #logOut {
  display: inline-block;
}
#mainDiv.member_login_nav #body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 80px;
}
#mainDiv.member_login_nav #body #uploadImg {
  margin: 0 auto;
  width: 80%;
  position: relative;
  padding-top: 80%;
}
#mainDiv.member_login_nav #body #uploadImg span {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #fff5ea;
  overflow: hidden;
}
#mainDiv.member_login_nav #body #uploadImg span img {
  position: absolute;
}
#mainDiv.member_login_nav #body #uploadImg span img:not(.active) {
  width: 50%;
  height: 50%;
}
#mainDiv.member_login_nav #body p {
  font-size: 2em;
}
#mainDiv.member_login_nav #footer {
  position: absolute;
  padding: 5px 15px;
  bottom: 0;
  height: 80px;
  box-sizing: border-box;
  width: 100%;
  max-width: 768px;
  background-color: #ee7524;
}
@media (min-width: 768px) {
  #mainDiv.member_login_nav #footer {
    padding: 5px 30px;
  }
}
#mainDiv.member_login_nav #footer button {
  display: flex;
  flex-direction: column;
  border: 0;
  background: none;
}
#mainDiv.member_login_nav #footer button img {
  width: 50px;
}
#mainDiv.member_login_nav #footer button span {
  color: #fff;
}
#mainDiv.member_login_change_img #body {
  padding-bottom: 90px;
}
#mainDiv.member_login_change_img #body #avatar {
  position: relative;
  width: 50vw;
  margin: 0 auto;
  padding: 15px;
}
@media (min-width: 768px) {
  #mainDiv.member_login_change_img #body #avatar {
    width: 384px;
  }
}
#mainDiv.member_login_change_img #body #avatar .imgBox {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  height: 50vw;
}
@media (min-width: 768px) {
  #mainDiv.member_login_change_img #body #avatar .imgBox {
    height: 384px;
  }
}
#mainDiv.member_login_change_img #body #avatar #selectBtn {
  position: absolute;
  background-color: #ee7524;
  border: 0;
  border-radius: 50%;
  right: 0;
  bottom: 15px;
  /* Default transform property */
  transform: translate(100%, -20%);
  /* Vendor prefixes for better browser support */
  -webkit-transform: translate(100%, -20%); /* Safari and Chrome */
  -moz-transform: translate(100%, -20%); /* Firefox */
  -ms-transform: translate(100%, -20%); /* Internet Explorer */
  -o-transform: translate(100%, -20%); /* Opera */
  width: 40px;
  height: 40px;
}
#mainDiv.member_login_change_img #body #avatar #selectBtn img {
  width: 90%;
}
#mainDiv.member_login_change_img #body #recommandImg {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: #fff5ea;
  border-radius: 10px;
  padding: 15px;
}
#mainDiv.member_login_change_img #body #recommandImg .imgBox {
  padding: 4px;
}
#mainDiv.member_login_change_img #body #recommandImg .imgBox button {
  padding: 0;
  border: 0;
  background: unset;
}
#mainDiv.member_login_change_img #body #recommandImg .imgBox button img {
  width: 100%;
  border-radius: 10px;
}
#mainDiv.member_login_change_img #footer {
  position: absolute;
  padding: 5px 15px;
  bottom: 0;
  height: 80px;
  box-sizing: border-box;
  width: 100%;
  max-width: 768px;
  background-color: #ee7524;
}
@media (min-width: 768px) {
  #mainDiv.member_login_change_img #footer {
    padding: 5px 30px;
  }
}
#mainDiv.member_login_change_img #footer button {
  display: flex;
  flex-direction: column;
  border: 0;
  background: none;
}
#mainDiv.member_login_change_img #footer button img {
  width: 50px;
}
#mainDiv.member_login_change_img #footer button span {
  color: #fff;
}
#mainDiv.member_login_reminder #body {
  padding: 5px 60px;
}
#mainDiv.member_login_reminder #body h3 {
  margin-top: 0.6em;
  margin-bottom: 0.6em;
}
#mainDiv.member_login_freeze_passbook #body table th,
#mainDiv.member_login_freeze_passbook #body table td {
  font-size: 0.75em;
}
#mainDiv.member_login_account_info #body #changePwd, #mainDiv.member_login_account_info #body #deleteAccount {
  font-size: 0.7em;
  text-decoration: none;
}
#mainDiv.member_login_account_info #footer .right {
  position: relative;
  height: 100%;
  width: 30%;
}
#mainDiv.member_login_account_info #footer .right a {
  display: block;
  width: 100%;
}
#mainDiv.member_login_account_info #footer .right a label {
  position: absolute;
  width: 100%;
  top: 50%;
  right: 5px;
  line-height: 1.75;
  transform: translate(0, -50%);
  background-color: #ffd37c;
  padding: 5px 12px 5px 20px;
  border-radius: 10px;
  color: #807c7c;
  font-size: 0.75em;
  font-weight: bold;
  letter-spacing: 2px;
}
#mainDiv.member_login_account_info #footer .right a button {
  position: absolute;
  top: 50%;
  right: 0;
  width: 50px;
  height: 50px;
  transform: translate(0, -50%);
  background-color: #fff;
}
#mainDiv.member_login_account_info #footer .right a button i {
  display: none;
}
#mainDiv.member_login_account_info #footer .right a button:after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url("../images/icons/gift.png");
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}
#mainDiv.member_login_record #body {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}
#mainDiv.member_login_record #body .bodyTitle {
  width: 100%;
}
#mainDiv.member_login_record #body .nav {
  width: 100%;
  display: flex;
  justify-content: center;
}
#mainDiv.member_login_record #body .nav > div {
  padding: 0 15px;
}
#mainDiv.member_login_record #body .nav > div a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
#mainDiv.member_login_record #body .nav > div a button {
  cursor: pointer;
  border: 0;
  border-radius: 100%;
  background-color: #ee7524;
  width: 17vh;
  height: 17vh;
  margin-top: 3vh;
}
@media (min-width: 768px) {
  #mainDiv.member_login_record #body .nav > div a button {
    width: 270px;
    height: 270px;
  }
}
#mainDiv.member_login_record #body .nav > div a button img {
  width: 85%;
}
#mainDiv.member_login_record #body .nav > div a label {
  cursor: pointer;
  font-size: 6vw;
  color: #807c7c;
}
@media (min-width: 768px) {
  #mainDiv.member_login_record #body .nav > div a label {
    font-size: 46px;
  }
}
#mainDiv.member_login_amh_freeze #body {
  box-sizing: border-box;
}
#mainDiv.member_login_amh_freeze #body .group {
  display: flex;
  align-items: flex-end;
  margin-right: -15px;
}
@media (min-width: 768px) {
  #mainDiv.member_login_amh_freeze #body .group {
    margin-right: 0;
  }
}
#mainDiv.member_login_amh_freeze #body .group .table {
  width: calc(100% - 4.5em);
  flex: 1;
}
#mainDiv.member_login_amh_freeze #body .group .table th:nth-last-child(2),
#mainDiv.member_login_amh_freeze #body .group .table td:nth-last-child(2) {
  height: 73px;
}
@media (min-width: 768px) {
  #mainDiv.member_login_amh_freeze #body .group .table th:nth-last-child(2),
  #mainDiv.member_login_amh_freeze #body .group .table td:nth-last-child(2) {
    height: 88px;
  }
}
#mainDiv.member_login_amh_freeze #body .group .table th:last-child,
#mainDiv.member_login_amh_freeze #body .group .table td:last-child {
  height: 100px;
}
@media (min-width: 768px) {
  #mainDiv.member_login_amh_freeze #body .group .table th:last-child,
  #mainDiv.member_login_amh_freeze #body .group .table td:last-child {
    height: 118px;
  }
}
#mainDiv.member_login_amh_freeze #body .group > div {
  display: flex;
  flex-direction: column;
}
#mainDiv.member_login_amh_freeze #body .group > div .sum {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid #ee7524;
  width: 4.5em;
}
#mainDiv.member_login_amh_freeze #body .group > div .sum:first-child {
  height: 76px;
}
@media (min-width: 768px) {
  #mainDiv.member_login_amh_freeze #body .group > div .sum:first-child {
    height: 90px;
  }
}
#mainDiv.member_login_amh_freeze #body .group > div .sum:last-child {
  height: 100px;
}
@media (min-width: 768px) {
  #mainDiv.member_login_amh_freeze #body .group > div .sum:last-child {
    height: 120px;
  }
}
#mainDiv.member_login_amh_freeze #body .group > div .sum .title {
  background-color: #ee7524;
  color: #fff;
  padding: 5px 0;
  text-align: center;
}
#mainDiv.member_login_amh_freeze #body .group > div .sum .content {
  color: #807c7c;
  font-size: 1.25em;
  text-align: center;
  padding: 8px 0;
}
#mainDiv.member_login_amh_history #body #chartGroup {
  position: relative;
  width: 100%;
  padding-top: 100%;
}
#mainDiv.member_login_amh_history #body #chartGroup #chart {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#mainDiv.member_login_amh_history #body #chartGroup #legendGroup {
  position: absolute;
  top: 20%;
  right: 10%;
  width: 6em;
}
#mainDiv.member_login_amh_history #body #chartGroup #legendGroup label {
  position: absolute;
}
#mainDiv.member_login_amh_history #body #chartGroup #legendGroup label:before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 5px;
  border-radius: 50%;
}
#mainDiv.member_login_amh_history #body #chartGroup #legendGroup #notice {
  color: #c50001;
  top: 0;
  left: 0;
}
#mainDiv.member_login_amh_history #body #chartGroup #legendGroup #notice:before {
  background-color: #c50001;
}
#mainDiv.member_login_amh_history #body #chartGroup #legendGroup #normal {
  color: #63c006;
  top: 1.5em;
  left: 0;
}
#mainDiv.member_login_amh_history #body #chartGroup #legendGroup #normal:before {
  background-color: #63c006;
}
#mainDiv.member_login_menstrual_cycle #body {
  display: flex;
  flex-direction: column;
}
#mainDiv.member_login_menstrual_cycle #body > h3 {
  margin: 0;
}
#mainDiv.member_login_menstrual_cycle #body #lastPeriod {
  border-radius: 5em;
}
#mainDiv.member_login_menstrual_cycle #body .table + .btn {
  margin-top: auto;
}
#mainDiv.member_login_menstrual_cycle #body .modalDialog input[type=radio] + label span {
  background-color: #ffd37c;
}
#mainDiv.member_login_have_frozen #body table th, #mainDiv.member_login_want_frozen #body table th {
  padding: 0;
  width: 4.5em;
  background-color: #ee7524;
  color: #f2f2f2;
}
#mainDiv.member_login_egg_quality #body p {
  width: 12em;
  margin: 1em auto;
  text-align: center;
}
#mainDiv.member_login_egg_quality #body #pEu,
#mainDiv.member_login_egg_quality #body #pBlast {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 8em;
}
#mainDiv.member_login_egg_quality #body #pEu span,
#mainDiv.member_login_egg_quality #body #pBlast span {
  font-family: "Arial", sans-serif;
  font-weight: bold;
  margin: 0 auto;
  font-size: 1.75em;
  color: #ee7524;
}
#mainDiv.member_login_how_many #body .select h3.font-size-medium {
  width: 7em;
  min-width: 7em;
}
#mainDiv.member_login_menstrual_calendar #body {
  padding: 5px 10px;
}
#mainDiv.member_login_menstrual_calendar #body .btn:last-child label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mainDiv.member_login_menstrual_calendar .checkboxRadio {
  display: flex;
  align-items: center;
}
#mainDiv.member_login_menstrual_calendar .checkboxRadio .checkboxRadioGroup {
  display: flex;
  align-items: center;
}
#mainDiv.member_login_menstrual_calendar .checkboxRadio .checkboxRadioGroup .option label {
  margin-right: 0.25em;
}
#mainDiv.member_login_menstrual_calendar .checkboxRadio .checkboxRadioGroup .option label span {
  margin-right: 0.25em;
  background-color: #ffe9bd;
}
#mainDiv.member_login_menstrual_calendar .checkboxRadio .checkboxRadioGroup .option label span:after {
  width: 60%;
  height: 60%;
}
#mainDiv.member_login_menstrual_record #body {
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
}
#mainDiv.member_login_menstrual_record #body .tables {
  flex: 1 0 0;
}
#mainDiv.member_login_menstrual_record #body .tables .table .table-wrapper {
  max-height: 250px;
}
#mainDiv.member_login_menstrual_record #body .tables .table .table-wrapper #menstrualTable thead th:hover .float_message {
  display: inline-block;
}
#mainDiv.member_login_menstrual_record #body .tables .table .table-wrapper #menstrualTable thead th .float_message {
  display: none;
  width: calc(100% - 60px);
  max-width: 708px;
  position: absolute;
  z-index: 300;
  top: 8em;
  word-break: break-word;
  left: 50%;
  transform: translateX(-50%);
  text-align: left;
  background-color: #ffcfaf;
  border: 2px solid #ee7524;
  border-radius: 10px;
  font-size: 0.75em;
  padding: 1em;
}
#mainDiv.member_login_menstrual_record #body .tables .table .table-wrapper #menstrualTable tbody tr td:first-child, #mainDiv.member_login_menstrual_record #body .tables .table .table-wrapper #menstrualTable tbody tr td:last-child {
  font-size: 0.75em;
}
#mainDiv.member_login_menstrual_record #body .tables #median {
  table-layout: fixed;
}
#mainDiv.member_login_menstrual_record #body .tables #median tbody tr td {
  padding: 8px 0;
}
#mainDiv.member_login_menstrual_record #body .tables #median tbody tr td div {
  width: 100%;
  height: 50px;
  background-color: #fff5ea;
  color: #807c7c;
  line-height: 50px;
  text-align: center;
  font-size: 1.25em;
}
#mainDiv.member_login_menstrual_record #body .tables #median tbody tr td:first-child {
  padding-right: 5px;
}
#mainDiv.member_login_menstrual_record #body .tables #median tbody tr td:first-child div {
  border-radius: 5px;
  font-size: 1em;
}
#mainDiv.member_login_menstrual_record #body .tables #median tbody tr td:nth-child(2) {
  padding-right: 2px;
}
#mainDiv.member_login_menstrual_record #body .tables #median tbody tr td:nth-child(2) div {
  border-radius: 5px 0 0 5px;
}
#mainDiv.member_login_menstrual_record #body .tables #median tbody tr td:nth-child(3) {
  padding-right: 2px;
}
#mainDiv.member_login_menstrual_record #body .tables #median tbody tr td:last-child div {
  border-radius: 0 5px 5px 0;
}
#mainDiv.member_login_menstrual_record #body #chart {
  min-height: 200px;
  flex: 1 0 0;
}
#mainDiv.member_login_pain_record #body {
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
}
#mainDiv.member_login_pain_record #body #painRecords {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#mainDiv.member_login_pain_record #body #painRecords .recordBox {
  padding: 1em;
  margin-bottom: 0.5em;
  height: calc((100vh - 365px) / 2);
  min-height: 220px;
  position: relative;
  background-color: #fff5ea;
  border-radius: 10px;
}
#mainDiv.member_login_pain_record #body #painRecords .recordBox .boxTitle {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  color: #807c7c;
}
#mainDiv.member_login_pain_record #body #painRecords .recordBox .boxContent {
  height: 100%;
}
#mainDiv.member_login_pain_record #body #painRecords .recordBox .boxContent div[id^=bodyContainer] {
  display: flex;
  align-items: stretch;
  height: 100%;
}
#mainDiv.member_login_pain_record #body #painRecords .recordBox .boxContent div[id^=bodyContainer] .canvasContainer {
  width: 100%;
}
#mainDiv.member_login_pain_record #body #painRecords .recordBox .boxContent div[id^=bodyContainer] .canvasContainer canvas {
  width: 100%;
  height: 100%;
}
#mainDiv.member_login_health_info_list #body .bodyTitle {
  position: relative;
}
#mainDiv.member_login_health_info_list #body .bodyTitle a {
  top: 0;
  left: 0;
  position: absolute;
}
#mainDiv.member_login_health_info_list #body .bodyTitle a .goPrevBtn {
  padding: 0;
  cursor: pointer;
  height: 40px;
  width: 40px;
  border: 0;
  border-radius: 100%;
  color: white;
  background-color: #ee7524;
  font-size: 34px;
}
#mainDiv.member_login_health_info_list #body .healthBox {
  margin-bottom: 2em;
  font-size: 0.6em;
}
#mainDiv.member_login_health_info_list #body .healthBox .boxTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#mainDiv.member_login_health_info_list #body .healthBox .boxTitle .name {
  display: flex;
}
#mainDiv.member_login_health_info_list #body .healthBox .boxTitle .name .alert2 {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
#mainDiv.member_login_health_info_list #body .healthBox .boxTitle .name .alert2.normal {
  background-color: #23fd00;
}
#mainDiv.member_login_health_info_list #body .healthBox .boxTitle .name .alert2.warning {
  background-color: #fdc500;
}
#mainDiv.member_login_health_info_list #body .healthBox .boxTitle .name .alert2.warning2 {
  background-color: #fd8900;
}
#mainDiv.member_login_health_info_list #body .healthBox .boxTitle .name .alert2.danger {
  background-color: #fd0000;
}
#mainDiv.member_login_health_info_list #body .healthBox .boxTitle .name .alert2.danger2 {
  background-color: #e50000;
}
#mainDiv.member_login_health_info_list #body .healthBox .boxTitle .name .alert2.danger3 {
  background-color: #ac0000;
}
#mainDiv.member_login_health_info_list #body .healthBox .boxTitle .name h3 {
  margin: 0;
  font-size: 2em;
  padding: 0 0.25em;
  cursor: pointer;
}
#mainDiv.member_login_health_info_list #body .healthBox .boxTitle .range {
  flex: 1;
  color: #807c7c;
  font-size: 1em;
  display: flex;
  align-content: center;
  align-items: center;
}
#mainDiv.member_login_health_info_list #body .healthBox .boxTitle .range .addBtn {
  margin-left: 5px;
}
#mainDiv.member_login_health_info_list #body .healthBox .boxTitle .addBtn {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #ee7524;
  width: 24px;
  height: 24px;
  font-size: 1.8em;
  border-radius: 50%;
  border: 0;
}
#mainDiv.member_login_health_info_list #body .healthBox .boxContent {
  font-size: 1em;
}
#mainDiv.member_login_health_info_list #body .healthBox .boxContent i {
  font-size: 28px;
}
#mainDiv.member_login_health_info_list #footer {
  display: none;
}
#mainDiv.member_login_health_info #body {
  padding: 5px 10px;
}
#mainDiv.member_login_health_info #body .table .tableGroup .title {
  position: relative;
  background-color: #ffe9bd;
  border-radius: 10px 10px 0 0;
  justify-content: center;
}
#mainDiv.member_login_health_info #body .table .tableGroup .title h3 {
  font-size: 1.5em;
  margin: 0.25em 0;
}
#mainDiv.member_login_health_info #body .table .tableGroup .title .addBtn {
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
}
#mainDiv.member_login_health_info #body .table .tableGroup .title .deleteBtn {
  display: none;
}
#mainDiv.member_login_health_info #body .table .tableGroup .problemBox {
  background-color: #fff;
  padding: 0.5em 0.25em;
  font-size: 1.15em;
}
#mainDiv.member_login_health_info #body .table .tableGroup .problemBox div {
  color: #ee7524;
}
#mainDiv.member_login_health_info #body .table .tableGroup .table-wrapper .tableTitle {
  background-color: #fff;
  padding: 0.5em 0.25em;
  position: relative;
  display: flex;
  justify-content: center;
}
#mainDiv.member_login_health_info #body .table .tableGroup .table-wrapper .tableTitle h3 {
  font-size: 1.75em;
  margin: 0;
}
#mainDiv.member_login_health_info #body .table .tableGroup .table-wrapper .tableTitle .deleteBtn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  height: 28px;
  width: 28px;
  background-image: url("../images/icons/trash.png");
  background-color: unset;
  background-size: contain;
}
#mainDiv.member_login_health_info #body .table .tableGroup .table-wrapper table {
  margin-bottom: 1em;
  font-size: 1em;
}
#mainDiv.member_login_health_info #body .table .tableGroup .table-wrapper table thead tr th {
  border-color: #fff;
}
#mainDiv.member_login_health_info #body .table .tableGroup .table-wrapper table tbody tr td {
  border-color: #fff;
}
#mainDiv.member_login_health_info #body .table .tableGroup .table-wrapper table tbody tr td:first-child {
  background-color: #fff5ea;
}
#mainDiv.member_login_health_info #body .table .tableGroup .table-wrapper table:not(#range) tbody tr td:last-child {
  font-size: 0.8em;
}
#mainDiv.member_login_health_info #body .table .tableGroup .table-wrapper .alert2 {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
}
#mainDiv.member_login_health_info #body .table .tableGroup .table-wrapper .alert2.normal {
  background-color: #23fd00;
}
#mainDiv.member_login_health_info #body .table .tableGroup .table-wrapper .alert2.warning {
  background-color: #fdc500;
}
#mainDiv.member_login_health_info #body .table .tableGroup .table-wrapper .alert2.warning2 {
  background-color: #fd8900;
}
#mainDiv.member_login_health_info #body .table .tableGroup .table-wrapper .alert2.danger {
  background-color: #fd0000;
}
#mainDiv.member_login_health_info #body .table .tableGroup .table-wrapper .alert2.danger2 {
  background-color: #e50000;
}
#mainDiv.member_login_health_info #body .table .tableGroup .table-wrapper .alert2.danger3 {
  background-color: #ac0000;
}
#mainDiv.member_login_health_info #body .table .tableGroup.active .table-wrapper .tableTitle .deleteBtn {
  background-image: url("../images/icons/trash_2.png");
}
#mainDiv.member_login_health_info #body .popInputModal .modalDialog {
  padding: 0;
  overflow: hidden;
}
#mainDiv.member_login_health_info #body .popInputModal .modalDialog .modalTitle {
  background-color: #ffe9bd;
}
#mainDiv.member_login_health_info #body .popInputModal .modalDialog .modalTitle h3.font-size-medium {
  margin: 0 10px;
  color: #ee7524;
  font-size: 2em;
}
#mainDiv.member_login_health_info #body .popInputModal .modalDialog .modalTitle .closeBtn {
  position: absolute;
  top: 50%;
  right: 0.5em;
  transform: translateY(-50%);
}
#mainDiv.member_login_health_info #body .popInputModal .modalDialog .modalBody {
  background-color: #fff;
  padding: 15px;
}
#mainDiv.member_login_health_info #body .popInputModal .modalDialog .modalBody .text h3 {
  position: static;
}
#mainDiv.member_login_health_info #body .popInputModal .modalDialog .modalBody .text input {
  background-color: #fff5ea;
  text-indent: unset;
}
#mainDiv.member_login_health_info #body .popInputModal .modalDialog .modalBody .text label {
  color: #ee7524;
}
#mainDiv.member_login_health_info #body .popInputModal .modalDialog .modalFooter {
  background-color: #fff;
  padding: 15px;
}
#mainDiv.member_login_health_info #body .popInputModal .modalDialog .modalFooter button {
  padding: 0;
  background-color: #ffc757;
  color: #ee7524;
  height: 40px;
}
#mainDiv.send_verify #body #codeGroup {
  display: flex;
  align-items: center;
}
#mainDiv.send_verify #body #codeGroup .text {
  flex: 1;
}
#mainDiv.send_verify #body #codeGroup .text input {
  height: 1.5em;
}
#mainDiv.send_verify #body #codeGroup .btn {
  margin-left: 5px;
}
#mainDiv.send_verify #body #codeGroup .btn button {
  padding: 0 5px;
}
#mainDiv.important_statement #body ol {
  list-style-position: inside;
  padding-left: 0;
}
#mainDiv.important_statement #body ol li {
  margin-bottom: 1em;
}
#mainDiv.important_statement #footer .btn.flexCenter {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#mainDiv.important_statement #footer .btn.flexCenter button {
  display: flex;
  justify-content: center;
  align-items: center;
}
#mainDiv.important_statement #footer .btn.flexCenter button label {
  font-size: 1.5em;
}
#mainDiv.important_statement #footer .btn.flexCenter > *:nth-child(2) button {
  background-color: #f5f5f5;
}
#mainDiv.important_statement #footer .btn.flexCenter > *:nth-child(2) button label {
  color: #a3a1a1;
}
#mainDiv.save_info #body p label {
  margin-bottom: 5px;
  color: #807c7c;
}
#mainDiv.save_info #body p .font-size-large-1 {
  color: #ee7524;
}
#mainDiv.save_nav #body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
#mainDiv.save_nav #body a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
#mainDiv.save_nav #body a button {
  cursor: pointer;
  border: 0;
  border-radius: 100%;
  background-color: #ee7524;
  width: 17vh;
  height: 17vh;
}
@media (min-width: 768px) {
  #mainDiv.save_nav #body a button {
    width: 270px;
    height: 270px;
  }
}
#mainDiv.save_nav #body a button img {
  width: 85%;
}
#mainDiv.save_nav #body a label {
  cursor: pointer;
  font-size: 6vw;
  color: #807c7c;
}
@media (min-width: 768px) {
  #mainDiv.save_nav #body a label {
    font-size: 46px;
  }
}
@keyframes hideAnim {
  to {
    opacity: 0;
  }
}
@keyframes humanFemale {
  0% {
    stroke-dashoffset: 500;
    fill: rgba(255, 255, 255, 0);
  }
  33% {
    fill: rgba(255, 255, 255, 0);
  }
  66% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 1000;
    fill: #ffa1aa;
  }
}
@keyframes humanMale {
  0% {
    stroke-dashoffset: 500;
    fill: rgba(255, 255, 255, 0);
  }
  33% {
    fill: rgba(255, 255, 255, 0);
  }
  66% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 1000;
    fill: #51A7F9;
  }
}
@keyframes blur {
  0% {
    opacity: 0;
  }
  10%, 40% {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    width: 100%;
    height: auto;
  }
  20% {
    opacity: 1;
    -webkit-filter: blur(50px);
    -moz-filter: blur(50px);
    -o-filter: blur(50px);
    -ms-filter: blur(50px);
  }
  40% {
    opacity: 1;
  }
  52% {
    /* Default transform property */
    transform: translate(-50%, -50%) scale(1.2);
    /* Vendor prefixes for better browser support */
    -webkit-transform: translate(-50%, -50%) scale(1.2); /* Safari and Chrome */
    -moz-transform: translate(-50%, -50%) scale(1.2); /* Firefox */
    -ms-transform: translate(-50%, -50%) scale(1.2); /* Internet Explorer */
    -o-transform: translate(-50%, -50%) scale(1.2); /* Opera */
  }
  55% {
    /* Default transform property */
    transform: translate(-50%, -50%) scale(1);
    /* Vendor prefixes for better browser support */
    -webkit-transform: translate(-50%, -50%) scale(1); /* Safari and Chrome */
    -moz-transform: translate(-50%, -50%) scale(1); /* Firefox */
    -ms-transform: translate(-50%, -50%) scale(1); /* Internet Explorer */
    -o-transform: translate(-50%, -50%) scale(1); /* Opera */
  }
  57% {
    /* Default transform property */
    transform: translate(-50%, -50%) scale(1.2);
    /* Vendor prefixes for better browser support */
    -webkit-transform: translate(-50%, -50%) scale(1.2); /* Safari and Chrome */
    -moz-transform: translate(-50%, -50%) scale(1.2); /* Firefox */
    -ms-transform: translate(-50%, -50%) scale(1.2); /* Internet Explorer */
    -o-transform: translate(-50%, -50%) scale(1.2); /* Opera */
  }
  60% {
    /* Default transform property */
    transform: translate(-50%, -50%) scale(1);
    /* Vendor prefixes for better browser support */
    -webkit-transform: translate(-50%, -50%) scale(1); /* Safari and Chrome */
    -moz-transform: translate(-50%, -50%) scale(1); /* Firefox */
    -ms-transform: translate(-50%, -50%) scale(1); /* Internet Explorer */
    -o-transform: translate(-50%, -50%) scale(1); /* Opera */
  }
  62% {
    /* Default transform property */
    transform: translate(-50%, -50%) scale(1.2);
    /* Vendor prefixes for better browser support */
    -webkit-transform: translate(-50%, -50%) scale(1.2); /* Safari and Chrome */
    -moz-transform: translate(-50%, -50%) scale(1.2); /* Firefox */
    -ms-transform: translate(-50%, -50%) scale(1.2); /* Internet Explorer */
    -o-transform: translate(-50%, -50%) scale(1.2); /* Opera */
  }
  65% {
    /* Default transform property */
    transform: translate(-50%, -50%) scale(1);
    /* Vendor prefixes for better browser support */
    -webkit-transform: translate(-50%, -50%) scale(1); /* Safari and Chrome */
    -moz-transform: translate(-50%, -50%) scale(1); /* Firefox */
    -ms-transform: translate(-50%, -50%) scale(1); /* Internet Explorer */
    -o-transform: translate(-50%, -50%) scale(1); /* Opera */
  }
  67% {
    /* Default transform property */
    transform: translate(-50%, -50%) scale(1.2);
    /* Vendor prefixes for better browser support */
    -webkit-transform: translate(-50%, -50%) scale(1.2); /* Safari and Chrome */
    -moz-transform: translate(-50%, -50%) scale(1.2); /* Firefox */
    -ms-transform: translate(-50%, -50%) scale(1.2); /* Internet Explorer */
    -o-transform: translate(-50%, -50%) scale(1.2); /* Opera */
  }
  70% {
    /* Default transform property */
    transform: translate(-50%, -50%) scale(1);
    /* Vendor prefixes for better browser support */
    -webkit-transform: translate(-50%, -50%) scale(1); /* Safari and Chrome */
    -moz-transform: translate(-50%, -50%) scale(1); /* Firefox */
    -ms-transform: translate(-50%, -50%) scale(1); /* Internet Explorer */
    -o-transform: translate(-50%, -50%) scale(1); /* Opera */
  }
  75% {
    /* Default transform property */
    transform: translate(-50%, -50%) scale(3);
    /* Vendor prefixes for better browser support */
    -webkit-transform: translate(-50%, -50%) scale(3); /* Safari and Chrome */
    -moz-transform: translate(-50%, -50%) scale(3); /* Firefox */
    -ms-transform: translate(-50%, -50%) scale(3); /* Internet Explorer */
    -o-transform: translate(-50%, -50%) scale(3); /* Opera */
    width: 100%;
    height: auto;
  }
  95% {
    /* Default transform property */
    transform: translate(-50%, -50%) scale(1.5);
    /* Vendor prefixes for better browser support */
    -webkit-transform: translate(-50%, -50%) scale(1.5); /* Safari and Chrome */
    -moz-transform: translate(-50%, -50%) scale(1.5); /* Firefox */
    -ms-transform: translate(-50%, -50%) scale(1.5); /* Internet Explorer */
    -o-transform: translate(-50%, -50%) scale(1.5); /* Opera */
    width: 100%;
    height: auto;
  }
  100% {
    opacity: 1;
    width: 36px;
    height: 36px;
    /* Default transform property */
    transform: translate(-150%, 50%) scale(1);
    /* Vendor prefixes for better browser support */
    -webkit-transform: translate(-150%, 50%) scale(1); /* Safari and Chrome */
    -moz-transform: translate(-150%, 50%) scale(1); /* Firefox */
    -ms-transform: translate(-150%, 50%) scale(1); /* Internet Explorer */
    -o-transform: translate(-150%, 50%) scale(1); /* Opera */
  }
}
@keyframes heartMovement {
  0% {
    top: 50%;
    left: 50%;
  }
  100% {
    top: 0;
    left: 100%;
  }
}
@keyframes textFlewIn {
  50% {
    opacity: 0;
    /* Default transform property */
    transform: scale(0) translateX(-1000%);
    /* Vendor prefixes for better browser support */
    -webkit-transform: scale(0) translateX(-1000%); /* Safari and Chrome */
    -moz-transform: scale(0) translateX(-1000%); /* Firefox */
    -ms-transform: scale(0) translateX(-1000%); /* Internet Explorer */
    -o-transform: scale(0) translateX(-1000%); /* Opera */
  }
  75% {
    opacity: 0;
    /* Default transform property */
    transform: scale(0) translateX(-500%);
    /* Vendor prefixes for better browser support */
    -webkit-transform: scale(0) translateX(-500%); /* Safari and Chrome */
    -moz-transform: scale(0) translateX(-500%); /* Firefox */
    -ms-transform: scale(0) translateX(-500%); /* Internet Explorer */
    -o-transform: scale(0) translateX(-500%); /* Opera */
  }
  100% {
    opacity: 1;
    /* Default transform property */
    transform: scale(1) translateX(0%);
    /* Vendor prefixes for better browser support */
    -webkit-transform: scale(1) translateX(0%); /* Safari and Chrome */
    -moz-transform: scale(1) translateX(0%); /* Firefox */
    -ms-transform: scale(1) translateX(0%); /* Internet Explorer */
    -o-transform: scale(1) translateX(0%); /* Opera */
  }
}
@keyframes titleFadeIn {
  0% {
    opacity: 0;
    transform: scale(2);
    -webkit-filter: blur(50px);
    -moz-filter: blur(50px);
    -o-filter: blur(50px);
    -ms-filter: blur(50px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);
  }
}
@keyframes showBody {
  to {
    opacity: 1;
  }
}
#mainDiv.frozen_egg_info_reason #body p label, #mainDiv.frozen_seman_info_reason #body p label {
  display: block;
  text-align: justify;
}
#mainDiv.frozen_seman_info_ta #body p label {
  display: block;
  text-align: justify;
}
#mainDiv.survey #header #counter {
  display: inline-block;
}
#mainDiv.survey #body {
  display: flex;
  flex-direction: column;
}
#mainDiv.survey #body #amh_group {
  flex: 1;
  margin-right: 1em;
}
#mainDiv.survey #body .btn {
  margin-top: auto;
}
#mainDiv.survey.start #body {
  opacity: 0;
  animation: showBody 0.2s linear forwards;
  animation-delay: 8.75s;
}
#mainDiv.survey.start #animation {
  box-sizing: border-box;
  position: absolute;
  padding: 0 30px;
  z-index: 30;
  width: 100vw;
  height: 100%;
  animation: hideAnim 0.2s linear forwards;
  animation-delay: 8s;
}
@media (min-width: 768px) {
  #mainDiv.survey.start #animation {
    width: 768px;
  }
}
#mainDiv.survey.start #animation .bodyTitle {
  margin-top: 70px;
  opacity: 0;
  animation: titleFadeIn 2s ease-in-out forwards;
  animation-delay: 4s;
}
#mainDiv.survey.start #animation .bodyTitle .font-size-large-2 {
  font-size: 2em;
}
#mainDiv.survey.start #animation #humanShape {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  z-index: 50;
}
#mainDiv.survey.start #animation #humanShape svg {
  /* Default transform property */
  transform: translate(-50%, -50%);
  /* Vendor prefixes for better browser support */
  -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
  -moz-transform: translate(-50%, -50%); /* Firefox */
  -ms-transform: translate(-50%, -50%); /* Internet Explorer */
  -o-transform: translate(-50%, -50%); /* Opera */
  width: 100%;
}
#mainDiv.survey.start #animation #humanShape svg path {
  stroke-dasharray: 500;
  animation: humanMale 5s linear forwards;
}
#mainDiv.survey.start #animation #heart {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  z-index: 100;
  animation: heartMovement 1.2s ease 0s forwards;
  animation-delay: 6s;
}
#mainDiv.survey.start #animation #heart svg {
  /* Default transform property */
  transform: translate(-50%, -50%);
  /* Vendor prefixes for better browser support */
  -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
  -moz-transform: translate(-50%, -50%); /* Firefox */
  -ms-transform: translate(-50%, -50%); /* Internet Explorer */
  -o-transform: translate(-50%, -50%); /* Opera */
  width: 100%;
  animation: blur 4s ease 0s forwards;
  animation-delay: 3s;
  opacity: 0;
}
#mainDiv.survey.start #animation #text {
  position: absolute;
  z-index: 300;
  width: 4em;
  top: 80%;
  left: 50%;
  /* Default transform property */
  transform: translate(-50%, -50%);
  /* Vendor prefixes for better browser support */
  -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
  -moz-transform: translate(-50%, -50%); /* Firefox */
  -ms-transform: translate(-50%, -50%); /* Internet Explorer */
  -o-transform: translate(-50%, -50%); /* Opera */
  font-size: 2em;
  color: #000;
}
#mainDiv.survey.start #animation #text div {
  width: 4em;
  position: relative;
  display: flex;
  overflow: hidden;
}
#mainDiv.survey.start #animation #text div span {
  /* Default transform property */
  transform: scale(0) translateX(-1000%);
  /* Vendor prefixes for better browser support */
  -webkit-transform: scale(0) translateX(-1000%); /* Safari and Chrome */
  -moz-transform: scale(0) translateX(-1000%); /* Firefox */
  -ms-transform: scale(0) translateX(-1000%); /* Internet Explorer */
  -o-transform: scale(0) translateX(-1000%); /* Opera */
}
#mainDiv.survey.start #animation #text div span:nth-child(1) {
  animation: textFlewIn 1s linear forwards;
  animation-delay: 4.5s;
}
#mainDiv.survey.start #animation #text div span:nth-child(2) {
  animation: textFlewIn 1s linear forwards;
  animation-delay: 4s;
}
#mainDiv.survey.start #animation #text div span:nth-child(3) {
  animation: textFlewIn 1s linear forwards;
  animation-delay: 3.5s;
}
#mainDiv.survey.start #animation #text div span:nth-child(4) {
  animation: textFlewIn 1s linear forwards;
  animation-delay: 3s;
}
#mainDiv.survey_start #body {
  opacity: 0;
  animation: showBody 0.2s linear forwards;
  animation-delay: 8.75s;
}
#mainDiv.survey_start #body p label {
  display: block;
  text-align: justify;
}
#mainDiv.survey_start #animation {
  position: absolute;
  box-sizing: border-box;
  padding: 0 30px;
  width: 100vw;
  height: 100%;
  animation: hideAnim 0.2s linear forwards;
  animation-delay: 8s;
}
@media (min-width: 768px) {
  #mainDiv.survey_start #animation {
    width: 768px;
  }
}
#mainDiv.survey_start #animation .bodyTitle {
  margin-top: 70px;
  opacity: 0;
  animation: titleFadeIn 2s ease-in-out forwards;
  animation-delay: 4s;
}
#mainDiv.survey_start #animation .bodyTitle .font-size-large-2 {
  font-size: 2em;
}
#mainDiv.survey_start #animation #humanShape {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  z-index: 50;
}
#mainDiv.survey_start #animation #humanShape svg {
  /* Default transform property */
  transform: translate(-50%, -50%);
  /* Vendor prefixes for better browser support */
  -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
  -moz-transform: translate(-50%, -50%); /* Firefox */
  -ms-transform: translate(-50%, -50%); /* Internet Explorer */
  -o-transform: translate(-50%, -50%); /* Opera */
  width: 100%;
}
#mainDiv.survey_start #animation #humanShape svg path {
  stroke-dasharray: 500;
  animation: humanFemale 5s linear forwards;
}
#mainDiv.survey_start #animation #heart {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  z-index: 100;
  animation: heartMovement 1.2s ease 0s forwards;
  animation-delay: 6s;
}
#mainDiv.survey_start #animation #heart svg {
  /* Default transform property */
  transform: translate(-50%, -50%);
  /* Vendor prefixes for better browser support */
  -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
  -moz-transform: translate(-50%, -50%); /* Firefox */
  -ms-transform: translate(-50%, -50%); /* Internet Explorer */
  -o-transform: translate(-50%, -50%); /* Opera */
  width: 100%;
  animation: blur 4s ease 0s forwards;
  animation-delay: 3s;
  opacity: 0;
}
#mainDiv.survey_start #animation #text {
  position: absolute;
  z-index: 300;
  width: 4em;
  top: 80%;
  left: 50%;
  /* Default transform property */
  transform: translate(-50%, -50%);
  /* Vendor prefixes for better browser support */
  -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
  -moz-transform: translate(-50%, -50%); /* Firefox */
  -ms-transform: translate(-50%, -50%); /* Internet Explorer */
  -o-transform: translate(-50%, -50%); /* Opera */
  font-size: 2em;
  color: #000;
}
#mainDiv.survey_start #animation #text div {
  width: 4em;
  position: relative;
  display: flex;
  overflow: hidden;
}
#mainDiv.survey_start #animation #text div span {
  /* Default transform property */
  transform: scale(0) translateX(-1000%);
  /* Vendor prefixes for better browser support */
  -webkit-transform: scale(0) translateX(-1000%); /* Safari and Chrome */
  -moz-transform: scale(0) translateX(-1000%); /* Firefox */
  -ms-transform: scale(0) translateX(-1000%); /* Internet Explorer */
  -o-transform: scale(0) translateX(-1000%); /* Opera */
}
#mainDiv.survey_start #animation #text div span:nth-child(1) {
  animation: textFlewIn 1s linear forwards;
  animation-delay: 4.5s;
}
#mainDiv.survey_start #animation #text div span:nth-child(2) {
  animation: textFlewIn 1s linear forwards;
  animation-delay: 4s;
}
#mainDiv.survey_start #animation #text div span:nth-child(3) {
  animation: textFlewIn 1s linear forwards;
  animation-delay: 3.5s;
}
#mainDiv.survey_start #animation #text div span:nth-child(4) {
  animation: textFlewIn 1s linear forwards;
  animation-delay: 3s;
}
#mainDiv.survey_result #body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#mainDiv.survey_result #body > label {
  color: #ee7524;
}
#mainDiv.survey_result #body #surveyScore {
  margin-top: 2em;
  text-align: center;
  font-family: "Arial Black", Arial, sans-serif;
}
#mainDiv.survey_result #body #surveyScore #score {
  font-weight: bold;
  font-size: 5em;
}
#mainDiv.survey_result #body #surveyScore #unit {
  font-size: 2em;
  font-weight: bold;
}
#mainDiv.survey_result #body #suggestion {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  border-radius: 1em;
}
#mainDiv.survey_result #body #suggestion p {
  display: flex;
  align-items: center;
  font-size: 2em;
  font-weight: bold;
  color: #c50000;
  margin: 0;
}
#mainDiv.survey_result #body .btn {
  width: 100%;
}
#mainDiv.member_benefit #benefitInfo .btn {
  width: 100%;
  max-width: 260px;
  margin: 1.5em 0;
}
#mainDiv.member_benefit #benefitInfo .btn button {
  background-color: #ee7524;
}
#mainDiv.member_benefit #benefitInfo ul {
  max-width: 80%;
  list-style: none;
  padding-left: 0;
}
#mainDiv.member_benefit #benefitInfo ul li {
  line-height: 1.5;
}
#mainDiv.member_benefit #footer {
  box-sizing: border-box;
  position: absolute;
  padding: 5px 30px;
  bottom: 0;
  display: flex;
  height: 80px;
  width: 100%;
  max-width: 768px;
  justify-content: space-between;
  background-color: #ee7524;
}
#mainDiv.member_benefit #footer .left button,
#mainDiv.member_benefit #footer .right button {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: unset;
  border: 0;
}
#mainDiv.member_benefit #footer .left button img,
#mainDiv.member_benefit #footer .right button img {
  width: 50px;
}
#mainDiv.member_benefit #footer .left button span,
#mainDiv.member_benefit #footer .right button span {
  color: #fff;
}
#mainDiv.member_benefit #footer .left .goPrevA,
#mainDiv.member_benefit #footer .right .goPrevA {
  position: absolute;
  text-decoration: none;
  margin-top: -2.7em;
}
#mainDiv.member_benefit #footer .left .goPrevA .goPrevBtn,
#mainDiv.member_benefit #footer .left .goPrevA .goNextBtn,
#mainDiv.member_benefit #footer .right .goPrevA .goPrevBtn,
#mainDiv.member_benefit #footer .right .goPrevA .goNextBtn {
  padding: 0;
  cursor: pointer;
  height: 40px;
  width: 40px;
  border: 0;
  border-radius: 100%;
  color: white;
  background-color: #ee7524;
  font-size: 34px;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}
#mainDiv.member_benefit #footer .middle {
  margin-top: -4em;
}
#mainDiv.member_benefit #footer .middle button {
  width: 5.5em;
  height: 5.5em;
  margin: 0 30px;
  border-radius: 50%;
  border: 7px solid #ffcfaf;
  background-color: #ee7524;
  color: #fff;
  font-size: 1.25em;
}
#mainDiv.test_amh_result #body {
  padding-bottom: 130px;
}
#mainDiv.test_amh_result #body input {
  height: 40px;
}
#mainDiv.test_amh_result #body #result.bad_color {
  color: #ff6c2d;
}
#mainDiv.test_amh_result #body #result.warning_color {
  color: #e2b700;
}
#mainDiv.test_amh_result #body #result.good_color {
  color: #00a254;
}
#mainDiv.test_amh_result #footer {
  box-sizing: border-box;
  position: absolute;
  padding: 5px 30px;
  bottom: 0;
  display: flex;
  height: 80px;
  width: 100%;
  max-width: 768px;
  justify-content: space-between;
  background-color: #ee7524;
}
#mainDiv.test_amh_result #footer .left button,
#mainDiv.test_amh_result #footer .right button {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: unset;
  border: 0;
}
#mainDiv.test_amh_result #footer .left button img,
#mainDiv.test_amh_result #footer .right button img {
  width: 50px;
}
#mainDiv.test_amh_result #footer .left button span,
#mainDiv.test_amh_result #footer .right button span {
  color: #fff;
}
#mainDiv.test_amh_result #footer .left .goPrevA,
#mainDiv.test_amh_result #footer .right .goPrevA {
  position: absolute;
  text-decoration: none;
  margin-top: -2.7em;
}
#mainDiv.test_amh_result #footer .left .goPrevA .goPrevBtn,
#mainDiv.test_amh_result #footer .left .goPrevA .goNextBtn,
#mainDiv.test_amh_result #footer .right .goPrevA .goPrevBtn,
#mainDiv.test_amh_result #footer .right .goPrevA .goNextBtn {
  padding: 0;
  cursor: pointer;
  height: 40px;
  width: 40px;
  border: 0;
  border-radius: 100%;
  color: white;
  background-color: #ee7524;
  font-size: 34px;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}
#mainDiv.test_amh_result #footer .middle {
  margin-top: -4em;
}
#mainDiv.test_amh_result #footer .middle button {
  width: 5.5em;
  height: 5.5em;
  margin: 0 30px;
  border-radius: 50%;
  border: 7px solid #ffcfaf;
  background-color: #ee7524;
  color: #fff;
  font-size: 1.25em;
}
#mainDiv.poss_want_frozen #body #chartGroup, #mainDiv.poss_have_frozen #body #chartGroup {
  display: flex;
  flex-wrap: wrap;
}
#mainDiv.poss_want_frozen #body #chartGroup .chart, #mainDiv.poss_have_frozen #body #chartGroup .chart {
  width: 50%;
}
#mainDiv.poss_want_frozen #body #chartGroup .chart > div, #mainDiv.poss_have_frozen #body #chartGroup .chart > div {
  position: relative;
  display: flex;
  width: 100%;
  padding-top: 100%;
}
#mainDiv.poss_want_frozen #body #chartGroup .chart > div div[id^=chart], #mainDiv.poss_have_frozen #body #chartGroup .chart > div div[id^=chart] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}
#mainDiv.poss_want_frozen #body #chartGroup .chart h3, #mainDiv.poss_have_frozen #body #chartGroup .chart h3 {
  text-align: center;
  width: 100%;
  margin-bottom: 0;
}
#mainDiv.poss_want_frozen #body #chartGroup p, #mainDiv.poss_have_frozen #body #chartGroup p {
  margin: 1em auto;
}
#mainDiv.poss_how_many #body .select h3.font-size-medium {
  width: 6em;
  min-width: 9em;
}
#mainDiv.tracking_calendar #body {
  position: relative;
  order: 3;
  padding: 5px 10px;
}
#mainDiv.tracking_calendar #body .modalDialog input[type=radio] + label span {
  background-color: #ffd37c;
}
#mainDiv.tracking_calendar #body .statusBox {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff5ea;
  border-radius: 10px;
  margin-bottom: 1em;
}
#mainDiv.tracking_calendar #body .statusBox .boxTitle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5em;
}
#mainDiv.tracking_calendar #body .statusBox .boxTitle h3 {
  width: 5em;
  margin: 0;
  display: inline-block;
}
#mainDiv.tracking_calendar #body .statusBox .boxTitle h3 .flower {
  font-size: 1.2em;
  margin: 0 0.75em;
}
#mainDiv.tracking_calendar #body .statusBox .boxTitle h3 label {
  word-break: keep-all;
  font-size: 1.25em;
  margin-left: 0.5em;
}
#mainDiv.tracking_calendar #body .statusBox .boxTitle h3 + * {
  flex: 1;
}
#mainDiv.tracking_calendar #body .statusBox .boxDetail {
  width: 100%;
  padding: 0.5em;
  border-bottom: 1px solid #ffcfaf;
}
#mainDiv.tracking_calendar #body .statusBox .boxDetail .select h3 {
  color: #807c7c;
  font-size: 1.25em;
  margin: 0 0.75em;
  width: 3em;
  min-width: 3em;
}
#mainDiv.tracking_calendar #body .statusBox #result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  font-size: 1em;
  border: 0;
  border-radius: 10px;
  background-color: #fff5ea;
  color: #ee7524;
  height: 100%;
  margin: 0;
}
#mainDiv.tracking_calendar #body .statusBox a {
  position: relative;
  text-align: right;
}
#mainDiv.tracking_calendar #body .statusBox a button {
  position: absolute;
  top: 50%;
  right: 1em;
  /* Default transform property */
  transform: translateY(-50%);
  /* Vendor prefixes for better browser support */
  -webkit-transform: translateY(-50%); /* Safari and Chrome */
  -moz-transform: translateY(-50%); /* Firefox */
  -ms-transform: translateY(-50%); /* Internet Explorer */
  -o-transform: translateY(-50%); /* Opera */
  width: 25px;
  height: 25px;
  background-color: #ee7524;
  color: #fff;
  border-radius: 50%;
  border: 0;
  font-size: 1em;
}
#mainDiv.tracking_calendar #body #datepicker + .btn {
  padding-top: 5px;
}
#mainDiv.tracking_calendar #body #datepicker + .btn button {
  background-color: #fff5ea;
}
#mainDiv.tracking_calendar #body #datepicker + .btn button label {
  color: #ee7524;
}
#mainDiv.tracking_calendar #body #viewBox {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px 0;
}
#mainDiv.tracking_calendar #body #viewBox > .boxTitle {
  display: flex;
  color: #ee7524;
  text-align: center;
  padding: 0.5em;
}
#mainDiv.tracking_calendar #body #viewBox > .boxTitle h3 {
  margin: 0 auto;
}
#mainDiv.tracking_calendar #body #viewBox > .boxTitle button {
  border: 0;
  background-color: unset;
  font-size: 1em;
}
#mainDiv.tracking_calendar #body #viewBox > .boxTitle button#prevDay:before {
  content: "\f053";
  font-family: "Font Awesome 6 Free";
}
#mainDiv.tracking_calendar #body #viewBox > .boxTitle button#nextDay:before {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 10px;
  flex: 1;
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent .statusBox {
  background-color: #fff;
  margin: 0;
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent .statusBox input {
  height: 1.5em;
  text-align: center;
  color: #ee7524;
  font-size: 1.15em;
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent .statusBox .boxDetail {
  position: relative;
  display: flex;
  margin: 0.5em;
  background-color: #fff5ea;
  border: 0;
  border-radius: 10px;
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent .statusBox .boxDetail h3 {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 1.75em;
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent .statusBox .boxDetail h3 .flower {
  margin-right: 1em;
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent .statusBox .boxDetail div[contenteditable] {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: #fff;
  font-size: 1.15em;
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent .statusBox .boxDetail a#humanBody {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent .statusBox:last-child {
  flex-direction: column;
  flex: 1;
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent .statusBox:last-child .boxTitle {
  width: unset;
  flex: 0 0 auto;
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent .statusBox:last-child .boxDetail {
  width: unset;
  flex: 1 0 0;
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent #bodyContainer {
  flex: 1;
  display: flex;
  min-height: 300px;
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent #bodyContainer .canvasContainer {
  width: 100%;
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent #bodyContainer .canvasContainer canvas {
  width: 100%;
  height: 100%;
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent #loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.5);
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent #loading .ring {
  position: relative;
  width: 150px;
  height: 150px;
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent #loading .ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 120px;
  height: 120px;
  margin: 12px;
  border: 12px solid #ee7524;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #ee7524 transparent transparent transparent;
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent #loading .ring div:nth-child(1) {
  animation-delay: -0.45s;
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent #loading .ring div:nth-child(2) {
  animation-delay: -0.3s;
}
#mainDiv.tracking_calendar #body #viewBox > .boxContent #loading .ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#mainDiv.tracking_calendar #body #editModal .modalDialog {
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
}
#mainDiv.tracking_calendar #body #editModal .modalDialog .modalTitle {
  position: relative;
  background-color: #ee7524;
  color: #fff;
}
#mainDiv.tracking_calendar #body #editModal .modalDialog .modalTitle .closeBtn {
  position: absolute;
  color: #fff;
  top: 50%;
  right: 15px;
  /* Default transform property */
  transform: translateY(-50%);
  /* Vendor prefixes for better browser support */
  -webkit-transform: translateY(-50%); /* Safari and Chrome */
  -moz-transform: translateY(-50%); /* Firefox */
  -ms-transform: translateY(-50%); /* Internet Explorer */
  -o-transform: translateY(-50%); /* Opera */
}
#mainDiv.tracking_calendar #body #editModal .modalDialog .modalBody {
  background-color: #fff;
  padding: 15px;
}
#mainDiv.tracking_calendar #body #editModal .modalDialog .modalBody #dischargeSelects {
  width: 100%;
}
#mainDiv.tracking_calendar #body #editModal .modalDialog .modalBody #dischargeSelects .select h3 {
  margin: 1em 0;
}
#mainDiv.tracking_calendar #body #editModal .modalDialog .modalBody #dischargeSelects .select select {
  background-color: #fff5ea;
  color: #ee7524;
}
#mainDiv.tracking_calendar #body #editModal .modalDialog .modalBody #bleedingSelects {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#mainDiv.tracking_calendar #body #editModal .modalDialog .modalBody #bleedingSelects .bleedingItem {
  width: 20%;
  text-align: center;
}
#mainDiv.tracking_calendar #body #editModal .modalDialog .modalBody #bleedingSelects .bleedingItem input {
  display: none;
}
#mainDiv.tracking_calendar #body #editModal .modalDialog .modalBody #bleedingSelects .bleedingItem input + label {
  cursor: pointer;
}
#mainDiv.tracking_calendar #body #editModal .modalDialog .modalBody #bleedingSelects .bleedingItem input + label .itemContent {
  position: relative;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 100%;
  background-color: #fff5ea;
  border-radius: 50%;
}
#mainDiv.tracking_calendar #body #editModal .modalDialog .modalBody #bleedingSelects .bleedingItem input + label .itemContent .imgBox {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#mainDiv.tracking_calendar #body #editModal .modalDialog .modalBody #bleedingSelects .bleedingItem input + label .itemContent .imgBox img {
  width: 70%;
  height: 70%;
}
#mainDiv.tracking_calendar #body #editModal .modalDialog .modalBody #bleedingSelects .bleedingItem input:checked + label .itemContent {
  border: 1px solid #ee7524;
  background-color: #ffe9bd;
}
#mainDiv.tracking_calendar #body #editModal .modalDialog .modalFooter {
  padding: 10px 15px;
  background-color: #fff;
}
#mainDiv.tracking_calendar #body #editModal .modalDialog .modalFooter button {
  background-color: #fff5ea;
}
#mainDiv.tracking_calendar #body #editModal .modalDialog .modalFooter button label {
  color: #ee7524;
}
#mainDiv.tracking_calendar #body #predictModal .modalDialog {
  padding: 0;
  overflow: hidden;
}
#mainDiv.tracking_calendar #body #predictModal .modalDialog .modalTitle {
  background-color: #ee7524;
  color: #fff;
}
#mainDiv.tracking_calendar #body #predictModal .modalDialog .modalTitle .closeBtn {
  position: absolute;
  top: 50%;
  right: 1em;
  /* Default transform property */
  transform: translateY(-50%);
  /* Vendor prefixes for better browser support */
  -webkit-transform: translateY(-50%); /* Safari and Chrome */
  -moz-transform: translateY(-50%); /* Firefox */
  -ms-transform: translateY(-50%); /* Internet Explorer */
  -o-transform: translateY(-50%); /* Opera */
  color: #fff;
}
#mainDiv.tracking_calendar #body #predictModal .modalDialog .modalBody {
  background-color: #fff;
  padding: 10px;
}
#mainDiv.tracking_calendar #body #predictModal .modalDialog .modalBody .textGroup {
  padding: 0 10px;
  background-color: #fff5ea;
  border-radius: 10px;
  margin-bottom: 0.5em;
}
#mainDiv.tracking_calendar #body #predictModal .modalDialog .modalBody .textGroup h3 {
  margin: 0;
}
#mainDiv.tracking_calendar #body .btn a.small {
  margin-right: auto;
}
#mainDiv.tracking_calendar #footer {
  height: 40px;
  order: 2;
  padding: 10px;
}
#mainDiv.ovulation_predict #body {
  padding: 5px 10px;
}
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background-color: #fff5ea;
}
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-header {
  opacity: 1;
  padding: 0.5em 0;
  background-color: #ee7524;
  color: #fff;
  border: 0;
  border-radius: 10px 10px 0 0;
}
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-header .ui-datepicker-next,
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
  text-align: center;
  top: 50%;
  /* Default transform property */
  transform: translateY(-50%);
  /* Vendor prefixes for better browser support */
  -webkit-transform: translateY(-50%); /* Safari and Chrome */
  -moz-transform: translateY(-50%); /* Firefox */
  -ms-transform: translateY(-50%); /* Internet Explorer */
  -o-transform: translateY(-50%); /* Opera */
  height: 1em;
}
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon,
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon {
  background-image: none;
}
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-header .ui-datepicker-next:before,
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before {
  color: #fff;
}
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-header .ui-datepicker-next {
  color: red;
}
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-header .ui-datepicker-next:before {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
}
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
  color: red;
}
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before {
  content: "\f053";
  font-family: "Font Awesome 6 Free";
}
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-calendar {
  opacity: 1;
  table-layout: fixed;
  margin: 15px 0;
}
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-calendar thead th {
  color: #ee7524;
}
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-calendar tbody tr td {
  position: relative;
  text-align: center;
  vertical-align: top;
}
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-calendar tbody tr td .ui-state-default {
  font-weight: bold;
  margin: 0 auto;
  border: 0;
  color: #ee7524;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  border-radius: 50%;
  text-align: center;
  background-color: #fff5ea;
}
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-calendar tbody tr td .ui-state-default.ovulation {
  background-color: #fff;
}
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-calendar tbody tr td .ui-state-default.trace, #mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-calendar tbody tr td .ui-state-default.less, #mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-calendar tbody tr td .ui-state-default.medium, #mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-calendar tbody tr td .ui-state-default.mass {
  color: #fff;
}
#mainDiv.ovulation_predict #body #datepicker .ui-datepicker .ui-datepicker-calendar tbody tr td.ui-state-disabled {
  opacity: 1;
}
#mainDiv.ovulation_predict #body .textGroup {
  margin-top: 10px;
  background-color: #fff5ea;
  border-radius: 10px;
  padding: 5px;
}
#mainDiv.ovulation_predict #body .textGroup h3 {
  margin: 0;
  width: 11em;
  color: #ee7524;
  font-size: 1.2em;
}
#mainDiv.ovulation_predict #body .textGroup .backTitle {
  font-size: 1.2em;
}
#mainDiv.ovulation_predict #body .textGroup input {
  margin: 0;
  text-align: center;
  color: #ee7524;
  font-size: 1.2em;
  background-color: #fff5ea;
}
#mainDiv.ovulation_predict #footer {
  height: 40px;
  order: 2;
  padding: 10px;
}
#mainDiv.physiological_tracking_main #header #loginGroup {
  display: flex;
}
#mainDiv.physiological_tracking_main #body {
  display: flex;
  flex-direction: column;
}
#mainDiv.physiological_tracking_main #body #pageTitle {
  color: #ee7524;
  border-bottom: 2px solid #ee7524;
  text-align: center;
}
#mainDiv.physiological_tracking_main #body .descBox {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  flex: 1;
  border-radius: 10px;
  background-color: #fff5ea;
  min-height: 265px;
  overflow: hidden;
}
#mainDiv.physiological_tracking_main #body .descBox .boxTitle {
  background-color: #ee7524;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}
#mainDiv.physiological_tracking_main #body .descBox .boxTitle h3 {
  margin: 0;
}
#mainDiv.physiological_tracking_main #body .descBox .boxContent {
  flex: 1;
  padding: 10px 0;
}
#mainDiv.physiological_tracking_main #body .descBox .boxContent .contentWrapper {
  margin: 0 auto;
  max-width: 14em;
  text-align: left;
}
#mainDiv.physiological_tracking_main #body .descBox .boxContent .contentWrapper h3 {
  margin: 0;
}
#mainDiv.physiological_tracking_main #body .descBox .boxContent .contentWrapper p {
  margin: 0;
}
#mainDiv.physiological_tracking_main #body .descBox .boxContent .contentWrapper ul {
  list-style: none;
  padding: 0;
}
#mainDiv.physiological_tracking_main #body .descBox .boxContent a {
  position: absolute;
  bottom: 8px;
  right: 8px;
  text-decoration: none;
}
#mainDiv.physiological_tracking_main #body .descBox .boxContent a .goPrevBtn,
#mainDiv.physiological_tracking_main #body .descBox .boxContent a .goNextBtn {
  padding: 0;
  cursor: pointer;
  height: 40px;
  width: 40px;
  border: 0;
  border-radius: 100%;
  color: white;
  background-color: #ee7524;
  font-size: 34px;
}
#mainDiv.physiological_tracking_main #footer {
  display: none;
}
#mainDiv.body #header #saveBtn {
  padding: 0 0.5em;
  background-color: #ee7524;
  color: #fff;
  margin-right: 15px;
  border: 0;
  height: 40px;
  border-radius: 10px;
  font-size: 1.25em;
  align-self: center;
}
#mainDiv.body #body {
  position: relative;
}
#mainDiv.body #body #bodyContainer {
  position: relative;
  width: 100%;
  height: 100%;
}
#mainDiv.body #body #bodyContainer .canvas-container {
  margin: 0 auto;
}
#mainDiv.body #body #bodyContainer .canvas-container canvas {
  box-sizing: border-box;
  width: 100%;
}
#mainDiv.body #body #zoomBtnGroup {
  position: absolute;
  display: flex;
  flex-direction: column;
  right: 40px;
  bottom: 10px;
}
#mainDiv.body #body #zoomBtnGroup button {
  margin: 3px 0;
  color: #807c7c;
  border: 0;
  font-size: 1.25em;
  font-weight: normal;
}
#mainDiv.body #body #zoomBtnGroup button#zoomIn {
  border-radius: 15px 15px 0 0;
}
#mainDiv.body #body #zoomBtnGroup button#zoomOut {
  border-radius: 0 0 15px 15px;
}
#mainDiv.body #footer .middle {
  font-size: 1.2em;
}
#mainDiv.body #footer #deleteBtn {
  opacity: 0;
  user-select: none;
  background-color: unset;
  border: 0;
}
#mainDiv.body #footer #deleteBtn img {
  height: 35px;
}
#mainDiv.body_all #body {
  overflow-x: hidden;
  padding: 5px 0;
}
#mainDiv.body_all #body #bodyContainer {
  width: 100%;
  height: 100%;
  display: flex;
}
#mainDiv.body_all #body #bodyContainer .canvasContainer {
  position: relative;
  width: 50%;
  height: calc(100% - 3em);
}
#mainDiv.body_all #body #bodyContainer .canvasContainer canvas {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
#mainDiv.body_all #body #bodyContainer .canvasContainer a {
  display: block;
  padding-top: 1em;
  width: 100%;
  text-align: center;
  text-decoration: none;
  font-size: 1.2em;
}
#mainDiv.body_all #body #bodyContainer .canvasContainer a button {
  width: 1.25em;
  height: 1.25em;
  font-size: 1em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #ee7524;
  color: #fff;
}

#header {
  background-color: #fff3eb;
}

/*# sourceMappingURL=style_physiological_tracking.css.map */