/* global.css */
body {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 16px;
  color: var(--text-color);
  background-color: var(--bg-color);
  margin: 0;
  margin-top: 60px!important;
  padding: 0;
}
body, button, input, select, textarea, a {
  color: #000;
  -webkit-appearance: none;
  appearance: none;
  text-decoration: none;
}
a:hover {
  color: #000;
}
button {
  color: #000;
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
}
input, select, textarea {
  color: #000;
  -webkit-appearance: none;
  appearance: none;
}


/* 其他全站通用樣式 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.custom-tx-rosePink {
  color: #e66f75;
}
.custom-tx-blushPink {
  color: #f5aeae;
}
.custom-tx-peachyNude {
  color: #eec0b0;
}
.custom-tx-vibrantOrange {
  color: #f57c02;
}
.custom-tx-softCyan {
  color: #c5e6eb;
}
.custom-tx-tealBlue {
  color: #5ba1ac;
}
.custom-tx-creamBeige {
  color: #fef4ea;
}
.custom-tx-lightGray {
  color: #B3B3B3;
}
.custom-tx-gray {
  color: #757575;
}
.custom-tx-darkGray {
  color: #444444;
}
.custom-tx-ashBrown {
  color: #7c7471;
}
.custom-tx-fireOrange {
  color: #f24822;
}
.custom-tx-mistyPink {
  color: #fbdfdf;
}
.custom-tx-goldenHoney {
  color: #E6C037;
}
.custom-tx-white {
  color: #ffffff;
}
.custom-tx-black {
  color: #000000;
}
.custom-bg-rosePink {
  background-color: #e66f75;
}
.custom-bg-blushPink {
  background-color: #f5aeae;
}
.custom-bg-peachyNude {
  background-color: #eec0b0;
}
.custom-bg-vibrantOrange {
  background-color: #f57c02;
}
.custom-bg-softCyan {
  background-color: #c5e6eb;
}
.custom-bg-tealBlue {
  background-color: #5ba1ac;
}
.custom-bg-creamBeige {
  background-color: #fef4ea;
}
.custom-bg-white {
  background-color: #ffffff;
}
.custom-bg-line {
  background-color: #3ace01;
}
.custom-bg-mistyPink {
  background-color: #fbdfdf;
}
.custom-bg-goldenHoney {
  background-color: #E6C037;
}
.custom-bg-lightGray {
  background-color: #B3B3B3;
}
.custom-bg-gray {
  background-color: #757575;
}
.custom-bg-darkGray {
  background-color: #444444;
}
.custom-hover-rosePink:hover,
.custom-hover-rosePink:focus-visible {
  background-color: #e66f75;
}
.custom-hover-blushPink:hover,
.custom-hover-blushPink:focus-visible {
  background-color: #f5aeae!important;
}
.custom-hover-peachyNude:hover,
.custom-hover-peachyNude:focus-visible {
  background-color: #eec0b0!important;
}
.custom-hover-vibrantOrange:hover,
.custom-hover-vibrantOrange:focus-visible {
  background-color: #f57c02!important;
}
.custom-hover-softCyan:hover,
.custom-hover-softCyan:focus-visible {
  background-color: #c5e6eb!important;
}
.custom-hover-tealBlue:hover,
.custom-hover-tealBlue:focus-visible {
  background-color: #5ba1ac!important;
}
.custom-hover-creamBeige:hover,
.custom-hover-creamBeige:focus-visible {
  background-color: #fef4ea!important;
}
.custom-hover-white:hover,
.custom-hover-white:focus-visible {
  background-color: #ffffff!important;
}
.custom-hover-lightGray:hover,
.custom-hover-lightGray:focus-visible {
  background-color: #d3d3d3!important;
}
.custom-hover-line:hover,
.custom-hover-line:focus-visible {
  background-color: #288b00!important;
}
.custom-hover-mistyPink:hover,
.custom-hover-mistyPink:focus-visible {
  background-color: #fbdfdf!important;
}
.custom-hover-goldenHoney:hover,
.custom-hover-goldenHoney:focus-visible {
  background-color: #E6C037!important;
}
.custom-hover-lightGray:hover,
.custom-hover-lightGray:focus-visible {
  background-color: #B3B3B3!important;
}
.custom-hover-gray:hover,
.custom-hover-gray:focus-visible {
  background-color: #757575!important;
}
.custom-hover-darkGray:hover,
.custom-hover-darkGray:focus-visible {
  background-color: #444444!important;
}
.custom-hover-bold:hover,
.custom-hover-bold:focus-visible {
  font-weight: bold!important;
}
.custom-shadow {
  box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.2);
}
.hover-scale-up {
  transition: transform 0.2s ease-in-out;
}
.hover-scale-up:hover {
  transform: scale(1.05);
}
.hover-scale-down {
  transition: transform 0.2s ease-in-out;
}
.hover-scale-down:hover {
  transform: scale(0.95);
}
.custom-fw-900 {
  font-weight: 900;
}
.custom-fs-18 {
  font-size: 18px;
}
.custom-fs-15 {
  font-size: 15px;
}
.full-section {
  /* min-height: calc(100vh - 60px); */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flex-item {
  flex: 1;
  text-align: center;
}
.hr-with-text {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 10px 0;
}
.hr-with-text::before,
.hr-with-text::after {
  content: "";
  flex: 1;
  border-bottom: 3px solid #e66f75;
}
.hr-with-text:not(:empty)::before {
  margin-right: 0.75em;
}
.hr-with-text:not(:empty)::after {
  margin-left: 0.75em;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-notAllowed {
  cursor: not-allowed;
}
.custom-responsive-width,
.custom-responsive-width500 {
  width: 90%;
}
.isAbove768,
.isAbove768Flex,
.isAbove992,
.isAbove992Flex,
.isAbove1024,
.isAbove1024Flex {
  display: none;
}
.isBelow768,
.isBelow992,
.isBelow1024 {
  display: block;
}
.isBelow768Flex,
.isBelow992Flex,
.isBelow1024Flex {
  display: flex;
}
@media (min-width: 768px) {
  .isAbove768 {
    display: block;
  }
  .isAbove768Flex {
    display: flex;
  }
  .isBelow768,
  .isBelow768Flex {
    display: none;
  }
}
@media (min-width: 992px) {
  .isAbove992 {
    display: block;
  }
  .isAbove992Flex {
    display: flex;
  }
  .isBelow992,
  .isBelow992Flex {
    display: none;
  }
}
@media (min-width: 1024px) {
  .isAbove1024 {
    display: block;
  }
  .isAbove1024Flex {
    display: flex;
  }
  .isBelow1024,
  .isBelow1024Flex {
    display: none;
  }
}

/* 彈跳視窗-S */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 30px;
  width: 90%;
  max-height: 95%;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.custom-modal-input {
  box-sizing: border-box;
  border: 3px solid #eec0b0;
  border-radius: 30px;
  padding: 1rem;
  padding-left: 1.5rem;
  width: 100%;
}
@media (min-width: 501px) {
  .custom-responsive-width500 {
    width: 500px;
  }
}
@media (min-width: 601px) {
  .custom-responsive-width {
      width: 600px;
  }
}
@media (min-width: 768px) {
  .modal-content {
    width: 530px;
  }
}
/* 彈跳視窗-E */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgb(255 255 255 / 50%);
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* checkbox-S */
.checkbox-rosePink,
.checkbox-peachyNude,
.checkbox-tealBlue {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #eec0b0;
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
  vertical-align: sub;
  position: relative;
}
.checkbox-rosePink {
  border: 2px solid #e66f75;
}
.checkbox-tealBlue {
  border: 2px solid #5ba1ac;
}
.checkbox-rosePink:checked {
  background-color: #e66f75;
  border-color: #e66f75;
}
.checkbox-peachyNude:checked {
  background-color: #eec0b0;
  border-color: #eec0b0;
}
.checkbox-tealBlue:checked {
  background-color: #5ba1ac;
  border-color: #5ba1ac;
}
/* 預設狀態不顯示任何符號 */
.checkbox-rosePink::after,
.checkbox-peachyNude::after,
.checkbox-tealBlue::after {
  content: '';
}
/* 只有勾選時才顯示 ✔ */
.checkbox-rosePink:checked::after,
.checkbox-peachyNude:checked::after,
.checkbox-tealBlue:checked::after {
  content: '✔';
  color: white;
  font-size: 14px;
  position: absolute;
  left: 2px;
  top: -3px;
}
/* checkbox-E */