@charset "UTF-8";

.fontsize-4,
footer>div .linkPage,
footer>div a:not(.guidePoint, .linkPage) {
  font-size: 0.75rem;
}

.fontsize-2,
.formColumn button,
footer,
header .getMainBtn {
  font-size: 0.875rem;
}

.fontsize0,
.modal .modalBox .modalContent p,
.modal .modalBox .modalContent ul,
.btns button,
.formColumn label+p span,
.formColumn label+dd span,
.formColumn dt+p span,
.formColumn dt+dd span {
  font-size: 1rem;
}

.fontsize2,
.en .home .card>div:nth-last-of-type(1) ul li,
.formColumn .note,
.formColumn ol,
.formColumn ul {
  font-size: 1.125rem;
}

.fontsize4,
.modal .modalBox .modalHeader,
input,
select,
.formColumn label+p,
.formColumn label+dd,
.formColumn dt+p,
.formColumn dt+dd,
.formColumn label,
.formColumn dt {
  font-size: 1.25rem;
}

.fontsize6,
.en .subTitle p,
.en .search,
.en header .time,
.text.textEn,
.warning>div p,
.home .card>div:nth-last-of-type(1) ul li,
header .time {
  font-size: 1.375rem;
}

.fontsize8,
.en .text,
.en .search.disable+.time,
.en header .link button {
  font-size: 1.5rem;
}

.fontsize10,
.en .home .card>div:nth-last-of-type(1) p,
.en .home .card>div:nth-of-type(1) p,
table,
.text,
.subTitle p,
.home .card>div:nth-of-type(1) p,
header .link button {
  font-size: 1.625rem;
}

.fontsize12 {
  font-size: 1.75rem;
}

.fontsize14,
.en .home .card>div:nth-of-type(1) h2,
.warning>div h2,
.phone,
.home .card>div:nth-last-of-type(1) p {
  font-size: 1.875rem;
}

.fontsize18 {
  font-size: 2.22rem;
}

.fontsize20,
.en .subTitle h2 {
  font-size: 2.25rem;
}

.fontsize30,
.search.disable+.time,
.home .card>div:nth-of-type(1) h2 {
  font-size: 2.438rem;
}

.fontsize32,
.subTitle h2,
.search {
  font-size: 3rem;
}

.fontsize42 {
  font-size: 3.33rem;
}

.textLeft {
  text-align: center !important;
}

.textCenter {
  text-align: center !important;
}

.textRight {
  text-align: center !important;
}

.block {
  width: 100% !important;
}

.blod {
  font-weight: bold !important;
}

.pointer {
  cursor: pointer !important;
}

.textRed {
  color: #DF1500 !important;
}

.textBlack {
  color: #000 !important;
}

* {
  font-family: Arial, "LiHei Pro", "儷黑 Pro", SimHei, "黑體", sans-serif;
}

html {
  font-size: 1.063rem;
}

@media (max-width: 768px) {
  html {
    font-size: 0.875rem;
  }
}

@media (max-width: 360px) {
  html {
    font-size: 0.75rem;
  }
}

body {
  font-size: 1.063rem;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background-color: #f6f6ec;
}

@media (max-width: 768px) {
  body {
    font-size: 0.875rem;
  }
}

@media (max-width: 360px) {
  body {
    font-size: 0.75rem;
  }
}

body::before {
  content: "";
  position: absolute;
  top: 5.75rem;
  right: 0;
  z-index: 0;
  width: 10em;
  height: 10em;
  background: url("../img/bg_top.png") no-repeat top center/cover;
}

body::after {
  content: "";
  position: absolute;
  bottom: 4.25rem;
  left: 0;
  z-index: 0;
  width: 10em;
  height: 10em;
  background: url("../img/bg_bottom.png") no-repeat top center/cover;
}

* {
  box-sizing: border-box;
}

*:focus {
  /*cursor: pointer;*/
  outline: 4px solid #5e1233;
}

/* 20251028 Focus 修復 for Safari */
a:hover,
a:focus,
a:focus-visible,
a:active {
  outline: 4px solid #5e1233 !important;
}

/*跳到中央內容區*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

a.skip-main {
  position: fixed;
  top: 0;
}

a.skip-main:focus {
  background-color: #000;
  position: fixed;
  top: -10px;
  left: 9.5%;
  z-index: 99999999 !important;
  width: 15%;
  height: 35px;
  line-height: 35px;
  overflow: hidden;
  color: #fff;
  font-size: 1.2rem !important;
  text-align: center;
  text-decoration: none;
  margin: 10px auto;
  padding: 0;
  border-radius: 50px;
  border: 2px solid #000;
  outline: 0px dashed #000 !important;
}

.anchor-center-home {
  display: block;
  float: left;
  height: 125px;
  /*same height as header*/
  margin-top: -66px;
  font-size: .0em;
  color: transparent !important;
}

header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  background: #ce407e;
  padding: 1rem 2rem;
}

header .getMainBtn {
  position: absolute;
  top: 1px;
  left: 2px;
  display: block;
  text-decoration: none;
  color: transparent;
  border: none;
  background-color: transparent;
  /*outline: none;*/
}

header .getMainBtn:focus,
header .getMainBtn:hover {
  color: #000;
  outline: 4px solid #5e1233;
  margin: 0.5rem;
  padding: 0.3rem;
}

header .logo {
  width: 65px;
  height: 65px;
  display: block;
  background: url("../img/logo.png") no-repeat center/contain;
}

header .logo p {
  opacity: 0;
}

header .logo+aside {
  width: calc(100% - 65px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

header .link {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

header .link button {
  font-weight: bold;
  color: #ce407e;
  border-radius: 50px;
  background: #FFFFFF;
  cursor: pointer;
  margin-right: 1rem;
  padding: 5px 1.5rem;
}

header .link button:hover {
  outline: 4px solid #5e1233;
}

header .time {
  text-align: right;
  font-weight: bold;
  color: #ffffff;
  margin: 0 0 0 auto;
}

footer {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 4.25rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: #ce407e;
  padding: 1.125rem 3.33rem;
}

footer>div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

footer>div a:not(.guidePoint, .linkPage) {
  text-decoration: none;
  font-weight: bold;
  color: #ffff;
  border: 2px solid #ffff;
  border-radius: 10px;
  margin: 0 5px;
  padding: 5px 8px;
}

footer>div a:focus,
footer>div a:hover {
  outline: 4px solid #5e1233;
}

footer>div a:not(.guidePoint, .linkPage):focus:after,
footer>div a:not(.guidePoint, .linkPage):hover:after {
  right: 1rem;
}

footer>div .linkPage {
  text-decoration: none;
  font-weight: bold;
  color: #ffff;
  margin: 0 5px;
  padding: 5px 8px;
}

footer>div .linkPage:focus,
footer>div .linkPage:hover {
  outline: 4px solid #5e1233;
}

footer>div .linkPage:focus:after,
footer>div .linkPage:hover:after {
  right: 1rem;
}

main {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  -ms-flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 2rem;
}

main.justIndex {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  -ms-flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  padding: 0 2rem 2rem 2rem;
}

.contentLayout {
  /* min-height: calc(66.3vh - 1px); */
  display: flex;
  align-items: center;
}

.indexLeft {
  width: 45%;
  margin-right: 4%;
}

.indexLeft img {
  width: 100%;
}

.indexRight {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  /* 移除 auto 或百分比外距 */
  float: left;
  /* 或者保持 flex 裡靠左就好 */
  position: relative;
  /* 預設即可，確保不被絕對定位影響 */
  top: 0;
}

.home,
.mainCenter {
  display: block;
  /* 或保持原本，但不要有 align-items:center */
  align-items: flex-start;
  /* 如果一定要 flex，就改成靠上 */
  justify-content: flex-start;
}

@media (max-width: 1600px) {
  .indexRight {
    margin-left: 0;
    margin-right: 0;
    float: left;
  }
}

.indexRight .cardlist {
  display: flex;
  gap: 1rem;
  /* 卡片間距，可調整 */
  justify-content: space-between;
}

.indexRight .cardlist>div {
  /* width: 30%;*/
  flex: 1 1 0;
  /* 等分伸縮 */
  max-width: calc((1200px - 2rem) / 3);
  /* 若 3 欄，計算 max width (1200 減 gap) */
  box-sizing: border-box;
}

@media all and (max-width: 800px) {
  .home {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .indexRight .cardlist {
    flex-direction: column;
    gap: 0.5rem;
  }

  .indexRight .cardlist>div {
    max-width: 100%;
  }
}

.indexRight .cardlist>div:not(:last-child) {
  margin-right: 1rem;
}

.indexRight .cardlist>div .card {
  width: 100%;
  text-decoration: none;
}

.indexRight .cardlist>div>div {
  margin-top: 1rem;
}

.indexRight .cardlist>div>div p {
  margin-top: 0.5rem;
}

/*.home {
  min-height: calc(50vh - 1px);
  margin: 0 10%;
}*/

.home {
  max-width: 1100px;
  /* 整個區塊在桌機最大寬度 */
  margin: 0 auto 40px;
  /* 置中（取代 margin: 0 10%） */
  padding: 0 1rem;
  /* 小內距，避免貼邊 */
}

.home .card {
  position: relative;
  display: flex;
  height: calc(100% - 2rem - 2.5rem);
  flex-direction: column;
  align-items: stretch;
  border-radius: 30px;
  box-shadow: 6px 6px 7px 0 rgba(255, 255, 255, 0.3);
  cursor: default;
  padding: 15px 10px 0;
}

.home .card>div {
  text-align: center;
  margin-bottom: 1rem;
}

.home .card>div:nth-of-type(1) {
  -ms-flex: 0 0 auto;
}

.home .card>div:nth-of-type(1) p {
  text-align: center;
  font-weight: bold;
  color: #FFFFFF;
}

.home .card>div:nth-of-type(1) img {
  width: 40%;  
  margin-top: -1rem;
  margin-bottom: -1rem;
}

.home .card>div:nth-of-type(1) h2 {
  font-weight: bold;
  color: #FFFFFF;
}

.home .card>div:nth-last-of-type(1) {
  flex: 1;
  -ms-flex: 0 0 auto;
  border-radius: 20px;
  background: #FFFFFF;
  padding: 0.5rem 0.5rem 1.5rem 0;
}

.home .card>div:nth-last-of-type(1) p {
  font-weight: bold;
}

.home .card>div:nth-last-of-type(1) ul {
  list-style: disc;
  margin: 0.5rem 0 0 2rem;
}

/* 調整卡片內 ul li 的字體大小與行距 */
.home .card>div:nth-last-of-type(1) ul li {
  text-align: left;
  font-weight: bold;
  color: #000;
  font-size: 1.2rem;
  /* 字體大小 */
  line-height: 2rem;
  /* 行距 */
}

.home .card.r {
  background: #ba238e;
}

.home .card.r>div:nth-last-of-type(1) p {
  color: #ba238e;
}

.home .card.a {
  background: #387baf;
}

.home .card.a>div:nth-last-of-type(1) p {
  color: #387baf;
}

.home .card.o {
  background: #927211;
}

.home .card.o>div:nth-last-of-type(1) p {
  color: #927211;
}

.home .card.g {
  background: #1e8637;
}

.home .card.g>div:nth-last-of-type(1) p {
  color: #1e8637;
}

.home .card.pointer:focus,
.home .card.pointer:hover {
  outline: 4px solid #5e1233;
  cursor: pointer;
}

.home .card.disable:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  border-radius: 30px;
  background: rgba(26, 26, 26, 0.6);
}

.phone {
  position: relative;
  text-align: right;
  text-decoration: none;
  font-weight: bold;
  color: #000;
  float: right;
  margin: 1.5rem 0 1.5rem auto;
}

.phone::before {
  content: "";
  width: 2.25rem;
  height: 2.25rem;
  display: inline-block;
  vertical-align: sub;
  background: url("../img/phone.png") no-repeat center left/contain;
  margin-right: 5px;
}

.search {
  font-weight: bold;
  color: white;
  /*border-bottom: 6px solid #ce407e;*/
  margin-top: 2rem;
  padding: 2px 10px;
  background-color: #fff;
}

.search+.time {
  display: none;
}

.search.disable {
  color: #767676;
  border: 0;
  margin-bottom: -1rem;
  background-color: transparent;
}

.search.disable+.time {
  display: block;
  font-weight: bold;
  color: #767676;
}

.search:not(.disable):hover {
  cursor: pointer;
  outline: 4px solid #5e1233;
}

.subTitle h2 {
  max-width: 7em;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: bold;
  color: #DF1500;
  /*border-bottom: 6px solid #DF1500;*/
  /*無障礙規定：文字沒有連結不能有底線*/
  margin: 0 auto 1.5rem;
  padding: 2px 10px;
}

.subTitle p {
  text-align: center;
  font-weight: bold;
  color: #DF1500;
  margin: -0.5rem 0 2rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  margin: -1px;
  padding: 0;
}

.formColumn {
  margin: 0 auto;
}

.formColumn>form label+p {
  max-width: calc(100% - 20em - 2rem);
}

.formColumn .item {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.formColumn .item>div {
  width: calc(100% - 20em - 2rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}

.formColumn .item>div>div {
  width: 100%;
  display: flex;
  margin-bottom: 1rem;
}

.formColumn .item>div>div:nth-last-of-type(1) {
  margin-bottom: 0;
}

.formColumn .item.fitWidth p,
.formColumn .item.fitWidth dd {
  width: calc(100% - 20em - 2rem + 4em);
}

.formColumn ol,
.formColumn ul {
  text-align: left;
  color: #B6452A;
  margin-bottom: 2rem;
}

.formColumn ol li,
.formColumn ul li {
  font-weight: 900;
  margin: 5px 0 5px 1.5rem;
}

.formColumn ol.noList,
.formColumn ul.noList {
  list-style: none;
}

.formColumn ol.noList li,
.formColumn ul.noList li {
  margin-left: 0;
}

.formColumn label,
.formColumn dt {
  width: 20.5em;
  text-align: right;
  font-weight: bold;
  color: #3e3a39;
  margin-right: 1.5rem;
}

.formColumn label+p,
.formColumn label+dd,
.formColumn dt+p,
.formColumn dt+dd {
  min-width: 270px;
  text-align: left;
  color: #3e3a39;
}

.formColumn label+p.done,
.formColumn label+dd.done,
.formColumn dt+p.done,
.formColumn dt+dd.done {
  font-weight: bold;
  color: #DF1500;
}

.formColumn label+p.done::before,
.formColumn label+dd.done::before,
.formColumn dt+p.done::before,
.formColumn dt+dd.done::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  vertical-align: sub;
  background: url("../img/success.png") no-repeat center/contain;
  margin-right: 10px;
}

.formColumn label+p span,
.formColumn label+dd span,
.formColumn dt+p span,
.formColumn dt+dd span {
  position: relative;
  display: block;
  font-weight: bold;
  padding-left: 22px;
}

.formColumn label+p span:before,
.formColumn label+dd span:before,
.formColumn dt+p span:before,
.formColumn dt+dd span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
}

.formColumn label+p span.success,
.formColumn label+dd span.success,
.formColumn dt+p span.success,
.formColumn dt+dd span.success {
  color: #DF1500;
}

.formColumn label+p span.success:before,
.formColumn label+dd span.success:before,
.formColumn dt+p span.success:before,
.formColumn dt+dd span.success:before {
  background: url("../img/success.png") no-repeat center center/contain;
}

.formColumn label+p span.fail,
.formColumn label+dd span.fail,
.formColumn dt+p span.fail,
.formColumn dt+dd span.fail {
  color: #767676;
}

.formColumn label+p span.fail:before,
.formColumn label+dd span.fail:before,
.formColumn dt+p span.fail:before,
.formColumn dt+dd span.fail:before {
  background: url("../img/fail.png") no-repeat center center/contain;
}

.formColumn button {
  width: 6.5rem;
  font-weight: bold;
  color: #FFFFFF;
  border-radius: 30px;
  cursor: pointer;
  margin-left: 1rem;
  padding: 10px 1rem;
}

.formColumn button.g {
  background: #008481;
}

.formColumn button.r {
  background: #DF1500;
}

.formColumn button.add::before {
  content: "";
  width: 1rem;
  height: 1rem;
  display: inline-block;
  vertical-align: sub;
  background: url("../img/add.png") no-repeat center/contain;
  margin-right: 3px;
}

.formColumn button.delete::before {
  content: "";
  width: 1rem;
  height: 1rem;
  display: inline-block;
  vertical-align: sub;
  background: url("../img/delete.png") no-repeat center/contain;
  margin-right: 3px;
}

.formColumn button.indent {
  width: 5.5rem;
  display: block;
  margin: 0 0 0 auto;
  padding: 12px 1rem;
}

.formColumn button:focus,
.formColumn button:hover {
  outline: 4px solid #5e1233;
}

.formColumn .note {
  position: relative;
  width: 100%;
  text-align: left;
  font-weight: bold;
  color: #DF1500;
  margin-top: 5px;
  padding-left: 1rem;
}

.formColumn .note::before {
  content: "* ";
  position: absolute;
  top: 0;
  left: 0;
}

.formColumn .note.mlLabel {
  width: calc(100% - 26.25rem + 5px);
  margin-top: -1rem;
  margin-left: calc(24.75rem - 2px);
}

.formColumn .inline {
  display: flex;
  align-items: flex-start;
}

.formColumn .inline img {
  width: 3.5em;
  margin-right: 1em;
}

.formColumn .flex1 {
  width: calc(100% - 6em);
  flex: 1;
  -ms-flex: 0 0 auto;
}

.warning {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
}

.warning img {
  width: 7rem;
  margin: 0 auto;
}

.warning>div {
  text-align: center;
}

.warning>div h2 {
  font-weight: bold;
  margin: 1rem 0;
}

.warning>div img {
  width: 30em;
  margin-top: 2rem;
}

.hr {
  border-bottom: 8px solid #FFFFFF;
  margin-bottom: 2rem !important;
  padding-bottom: 1rem !important;
}

.btns {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem auto;
}

.btns button {
  min-width: 9em;
  font-weight: bold;
  color: #FFFFFF;
  border-radius: 5px;
  background: #DF1500;
  cursor: pointer;
  margin: 0 10px;
  padding: 10px 2rem;
}

.btns button.gray {
  background: #3e3a39;
}

.btns button:focus,
.btns button:hover {
  outline: 4px solid #5e1233;
}

.text {
  font-weight: bold;
  color: #3e3a39;
  margin: 1rem 0;
}

.text.textEn {
  margin-top: 0;
}

table {
  width: 100%;
  border-top: 3px solid #ff6857;
  border-bottom: 3px solid #ff6857;
  margin-top: 2rem;
}

table caption {
  text-align: center;
  font-weight: bold;
  color: #3e3a39;
  border-top: 3px solid #ff6857;
  padding: 5px;
}

table th,
table td {
  width: 60%;
  text-align: center;
  font-weight: bold;
  color: #3e3a39;
  padding: 5px;
}

table tr:nth-of-type(even) {
  background: rgba(255, 104, 87, 0.2);
}

select {
  width: 100%;
  border-radius: 30px;
  color: #3e3a39;
  background: url("../img/select.png") no-repeat center right 1.5em/12px, #FFFFFF;
  padding: 0.5rem 2.5rem 0.5rem 1.5rem;
}

input {
  width: 100%;
  border-radius: 30px;
  background: #FFFFFF;
  padding: 0.5rem 1.5rem;
}

input[type=number] {
  -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input:focus {
  cursor: pointer;
  outline: 4px solid #5e1233;
}

input::-moz-placeholder {
  color: #969696;
}

input::placeholder {
  color: #969696;
}

input::-webkit-input-placeholder {
  color: #969696;
}

input:-ms-input-placeholder {
  color: #969696;
}

input::-moz-placeholder {
  color: rgba(62, 58, 57, 0.5);
  opacity: 1;
}

.guidePoint {
  width: 26px;
  float: left;
  /*vertical-align: middle;*/
  font-size: 1.25rem;
  text-decoration: none;
  line-height: 2rem;
  color: #3b3a3a;
  padding: 0;
}

.guidePoint:focus,
.guidePoint:hover {
  cursor: pointer;
  outline: 4px solid #5e1233;
}

.modal {
  position: fixed;
  top: 130vh;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  transition: top 0.3s;
}

.modal .modalBox {
  position: absolute;
  width: 80vw;
  max-width: 520px;
  top: 50%;
  left: 50%;
  overflow: hidden;
  border-radius: 20px;
  background: #FFFFFF;
  transform: translate(-50%, -50%);
}

.modal .modalBox .modalHeader {
  font-weight: bold;
  color: #FFFFFF;
  background: #ff6857;
  padding: 1rem 1.5rem;
}

.modal .modalBox .modalContent {
  min-height: 8rem;
  padding: 2rem 1.5rem 1.5rem;
}

.modal .modalBox .modalContent ul {
  width: 100%;
  color: #3e3a39;
  margin-left: 1rem;
}

.modal .modalBox .modalContent p {
  color: #3e3a39;
}

.modal.show {
  top: 0;
}

.modal.show+.blackBg {
  display: block;
}

.blackBg {
  display: none;
  opacity: 0.5;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000000;
  z-index: 3;
}

.likeTable {
  display: table;
  margin: 0 auto;
}

.likeTable .item {
  display: table-row;
}

.likeTable .item>p,
.likeTable .item>dd {
  padding-left: 2rem;
}

.likeTable .item>label,
.likeTable .item>p,
.likeTable .item>dt,
.likeTable .item>dd {
  display: table-cell;
  padding-bottom: 1.5rem;
}

.mobileShow {
  width: 100%;
  display: none;
}

.en header .link button {
  margin-right: 0.5rem;
  padding: 5px 1rem;
}

.en .search {}

.en .search.disable {
  color: #5A5A5A;
  border: 0;
  margin-bottom: 0;
}

.en .search.disable+.time {
  color: #5A5A5A;
}

.en .indexLeft {
  width: 45%;
  margin-right: 1rem;
}

.en .formColumn {
  /* width: calc(72% - 1rem); */
}

.en .formColumn>form label+p {
  max-width: calc(100% - 19em - 1rem);
}

.en .formColumn .item>div {
  width: calc(100% - 19em - 1rem);
}

.en .formColumn .item.fitWidth p,
.en .formColumn .item.fitWidth dd {
  width: calc(100% - 19em - 1rem + 4em);
}

.en .formColumn label,
.en .formColumn dt {
  width: 19em;
  margin-right: 1rem;
}

.en .formColumn .note.mlLabel {
  margin-left: calc(23.25rem - 5px);
}

.en .likeTable .item>p,
.en .likeTable .item>dd {
  padding-left: 1rem;
}

.en .subTitle h2 {
  max-width: 18em;
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
  .home {
    min-height: calc(54.5vh - 1px);
  }
}

@media all and (max-width: 1340px) {
  .en header .logo+aside {
    flex-wrap: wrap;
    justify-content: center;
  }

  .en header .logo+aside .time {
    margin: auto;
  }
}

@media all and (max-width: 1180px) {
  header .link {
    position: relative;
    flex-wrap: wrap;
    padding-left: 2rem;
  }

  header .link .guidePoint {
    position: absolute;
    top: 0;
    left: 0;
  }

  header .link button {
    margin-bottom: 5px;
  }

  .contentLayout {
    flex-direction: column;
  }

  .indexLeft {
    width: 100%;
    display: flex;
    -ms-flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-right: 0;
  }

  .indexLeft h1 {
    width: 70%;
    margin-right: 2rem;
  }

  .indexRight {
    width: 100%;
    -ms-flex: 0 0 auto;
    margin: 2rem 0;
  }

  .warning {
    max-width: 800px;
    flex-direction: column;
    align-items: center;
    margin: 6rem auto 0;
  }

  .warning>div {
    text-align: left;
    margin-left: 2rem;
  }

  .warning>div p:nth-of-type(1) {
    margin: 0 0 1rem;
  }

  .en .indexLeft {
    width: 100%;
    margin-right: 0;
  }

  .en .formColumn {
    width: 100%;
  }

  .en .warning {
    width: 100%;
    flex-direction: inherit;
    margin: 2rem;
  }
}

@media all and (max-width: 820px) {
  .formColumn button {
    width: 7rem;
  }
}

@media all and (max-width: 800px) {
  main {
    display: block;
    padding: 2rem;
  }

  .contentLayout {
    min-height: calc(74vh - 1px);
  }

  .home .indexRight {
    margin-bottom: 0;
  }

  .home .cardlist {
    flex-direction: column;
  }

  .home .cardlist>div {
    width: 100%;
    -ms-flex: 0 0 auto;
  }

  .home .cardlist>div .card {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-right: 1.5rem;
    padding-bottom: 10px;
  }

  .home .cardlist>div .card>div:nth-of-type(1) {
    width: 45%;
  }

  .home .cardlist>div .card>div:nth-of-type(1) img {
    width: 40%;
  }

  .home .cardlist>div .card>div:nth-last-of-type(1) {
    width: 55%;
    margin: 0;
  }

  .home .cardlist>div>div {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0 2rem;
  }
}

@media all and (max-width: 700px) {
  body::before {
    top: 8em;
  }
}

@media all and (max-width: 630px) {
  .warning {
    width: 90%;
    flex-direction: column;
    align-items: center;
  }

  .warning>div {
    text-align: center;
    margin-left: 0;
  }

  .warning>div p:nth-of-type(1) {
    margin: 1rem 0;
  }

  .formColumn .item {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .formColumn .item>div {
    width: 100%;
  }

  .formColumn label,
  .formColumn dt {
    width: 100%;
    text-align: left;
    margin-bottom: 5px;
  }

  .formColumn label+p,
  .formColumn label+dd,
  .formColumn dt+p,
  .formColumn dt+dd {
    width: 100% !important;
  }

  .formColumn .note.mlLabel {
    width: 100%;
    margin-left: 0;
  }

  .likeTable {
    display: initial;
  }

  .likeTable .item {
    display: flex;
  }

  .likeTable .item>label,
  .likeTable .item>p,
  .likeTable .item>dt,
  .likeTable .item>dd {
    max-width: 100%;
    display: initial;
    padding-bottom: 0;
    padding-left: 0;
  }

  .en .formColumn>form label+p {
    max-width: 100%;
  }

  .en .formColumn .item>div {
    width: 100%;
  }

  .en .formColumn .item.fitWidth p,
  .en .formColumn .item.fitWidth dd {
    width: 100%;
  }

  .en .formColumn label,
  .en .formColumn dt {
    width: 100%;
    margin-right: 0;
  }

  .en .formColumn .note.mlLabel {
    width: 100%;
    margin-left: 0;
  }

  .en .likeTable .item>p,
  .en .likeTable .item>dd {
    padding-left: 0;
  }
}

@media all and (max-width: 550px) {
  header {
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem 0.5rem;
  }

  header .logo+aside {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  header .link {
    width: 100%;
    justify-content: center;
    margin: 0.5rem 0 0;
  }

  header .link button {
    margin-right: 0.5rem;
    padding: 5px 1rem;
  }

  header .time {
    width: 100%;
    text-align: center;
  }

  footer {
    justify-content: center;
    padding: 1.125rem;
  }

  .indexLeft h1 {
    width: 80%;
    margin-right: 0;
  }

  .home .cardlist {
    flex-wrap: wrap;
  }

  .home .cardlist>div .card {
    flex-wrap: wrap;
    flex-direction: column;
    display: block;
    padding: 1rem !important;
  }

  .home .cardlist>div .card>div:nth-of-type(1) {
    width: 100%;
    margin-bottom: 1rem;
  }

  .home .cardlist>div .card>div:nth-of-type(1) img {
    width: 40%;
  }

  .home .cardlist>div .card>div:nth-last-of-type(1) {
    width: 100%;
    margin-bottom: 1rem;
  }

  .home .cardlist>div>div {
    flex-direction: column;
  }

  .indexRight .subTitle {
    margin: 0 auto;
  }

  .indexRight .subTitle h2 {
    font-size: 2rem;
  }

  .indexRight .subTitle p {
    font-size: 1.125rem;
  }

  .mobileShow {
    display: block;
  }

  .en .home .card {
    flex-direction: column;
    flex-wrap: wrap;
  }

  .en .home .card>div:nth-of-type(1) {
    width: 100%;
  }

  .en .home .card>div:nth-last-of-type(1) {
    width: 100%;
  }

  .en footer>div {
    flex-wrap: wrap;
    justify-content: center;
  }

  .en footer>div a {
    margin-bottom: 3px;
  }

  .en footer>div .linkPage {
    width: 70%;
  }
}

@media all and (max-width: 520px) {
  .home .card>div:nth-of-type(1) h2 span {
    display: block;
    width: 2em;
    margin: auto;
  }
}

@media all and (max-width: 400px) {
  .en footer>div {
    flex-direction: column;
  }

  .en footer>div .linkPage {
    width: auto;
  }
}

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

/*20250920 首頁主標重寫 和 header*/
ul.topNav {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

ul.topNav li {
  margin: 0;
  padding: 0;
  list-style: none none;
  display: inline-block;
}

ul.topNav li a {
  font-size: 1.4rem;
  font-weight: bold;
  color: #ce407e;
  border-radius: 50px;
  background: #FFFFFF;
  margin: 0 10px 0 0;
  padding: 5px 20px;
  text-decoration: none;
  text-align: center;
  display: block;
}

ul.topNav li a:hover,
ul.topNav li a:focus {
  outline: 4px solid #5e1233 !important;
}

.enT {
  font-size: 1.2rem !important;
}

.mainCenter {
  width: 100%;
  padding: 0px 0;
  margin: 0px auto 40px auto;
  background-color: #eb6ea5;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.leftBOX {
  width: 25%;
  box-sizing: border-box;
}

.rightBOX {
  width: 85%;
  box-sizing: border-box;
}

.btnBox {
  padding: 12px 10px;
  margin: 15px 0 20px 0;
  width: 100%;
  position: relative;
  right: 0;
}

.homeBtn {
  background-color: #fff;
  color: #ce407e;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  border-radius: 10px;
  border: 4px solid #ce407e;
  padding: 15px 0;
  margin: 0;
  width: 100%;
  cursor: pointer;
  display: block;
}

.disabledBox {
  background-color: #fff;
  color: #ce407e;
  font-size: 1.5rem !important;
  font-weight: 700;
  text-align: center;
  border-radius: 10px;
  padding: 15px 20px;
  margin: 0;
  width: 260px;
  position: relative;
  right: -5%;
}

.disabledBox a {
  text-decoration: none;
}

.disabledBox a:hover,
.disabledBox a:focus {
  outline: 4px solid #5e1233 !important;
}

.disabledBox .dateOpen {
  font-size: 1.5rem;
  color: #ce407e !important;
  line-height: 30px;
  border-radius: 10px;
  border: 4px solid #ce407e;
  padding: 15px 10px;
  margin: 0;
}

.entype {
  font-size: 1.2rem !important;
}

img.cashLogo {
  max-width: 35%;
  /* 25% */
  height: auto;
  display: block;
  position: relative;
  top: 0;
  right: -16%;
  /* -22% */
}

ul.noList_number {
  margin: 0;
  padding: 0;
}

ul.noList_number li {
  margin: 0 0 0 30px;
  padding: 0;
  list-style: none outside decimal;
}

.addType {
  margin: 10px 0;
  line-height: 30px;
  font-size: 1.2rem;
  text-align: left;
}

.addBox {
  margin: 30px auto 60px auto;
  padding: 0;
  width: 65%;
  display: inline-flexbox;
}

.addDM {
  width: 50%;
  float: left;
  display: block;
}

.QRcode {
  width: 50%;
  display: inline-block;
}

.QRcode img {
  width: 260px;
  height: 260px;
}

.QRcode p {
  margin: 20px 0 0 0;
  line-height: 30px;
  font-size: 1.2rem;
  text-align: center;
}

@media (max-width: 768px) {
  .home .card>div:nth-last-of-type(1) ul li {
    font-size: 1.375rem !important;
    line-height: 2rem;
  }

  .link {
    text-align: center;
  }

  ul.topNav {
    display: inline-block;
    margin: 0 auto 20px auto;
  }

  ul.topNav li {
    margin: 10px 15px 10px 0;
    padding: 0;
    list-style: none none;
    display: inline-block;
  }

  ul.topNav li a {
    font-size: 1.2rem;
    margin: 0;
    padding: 5px 15px;
    display: block;
    width: 140px;
  }

  .enMBw li a {
    width: auto !important;
    padding: 5px 15px !important;
  }

  .mainCenter {
    width: 100%;
    margin: 0 auto 20px auto;

    flex-direction: column;
    /* 改為上下 */
  }

  .leftBOX {
    width: 100% !important;
    float: none;
    order: 2;
    /* 原本在左邊的改放下面 */
  }

  .rightBOX {
    display: flex;
    justify-content: center;
    /* 水平置中 */
    align-items: center;

    width: 100% !important;
    float: none;
    order: 1;
    /* 原本在右邊的改放上面 */
  }

  .btnBox {
    position: static;
    /* 取消原本 relative 與 right 位移 */
    right: auto;
    display: block;
    margin: 20px auto 40px auto;
    width: 100%;
    text-align: center;
  }

  .disabledBox {
    position: static;
    /* 取消原本 relative 與 right 位移 */
    right: auto;
    display: block;
    margin: 20px auto 40px auto;
    width: 55%;
    padding: 10px 10px;
  }

  .disabledBox p.time {
    font-size: 1.5rem;
  }

  img.cashLogo {
    position: static;
    /* 取消原本 relative/right */
    display: block;
    margin: 0 auto;
    max-width: 80%;
  }

  .addDM {
    width: 100%;
    float: none;
    margin: 0 0 30px 0;
  }

  .QRcode {
    width: 100%;
  }

  .QRcode img {
    width: 235px;
    height: 235px;
  }
}

@media (min-width: 767px) and (max-width: 991px) {
  .home .card>div:nth-last-of-type(1) ul li {
    font-size: 1.375rem !important;
    line-height: 2rem;
  }

  ul.topNav {
    display: inline-block;
    margin: 0 auto 20px auto;
  }

  ul.topNav li {
    margin: 10px 15px 10px 0;
    padding: 0;
    list-style: none none;
    display: inline-block;
  }

  ul.topNav li a {
    font-size: 1.2rem;
    margin: 0;
    padding: 5px 15px;
    display: block;
    width: 120px;
  }

  .enMBw li a {
    width: auto !important;
    padding: 5px 15px !important;
  }

  .mainCenter {
    margin: 0 auto 10px auto;
    flex-direction: row;
  }

  .leftBOX {
    width: 45%;
    order: 1;
  }

  .rightBOX {
    width: 55%;
    order: 2;
  }

  .btnBox {
    margin: 30px auto 0px auto;
  }

  .disabledBox {
    position: static;
    /* 取消原本 relative 與 right 位移 */
    right: auto;
    display: block;
    margin: 20px auto;
    width: 80%;
  }

  .disabledBox p.time {
    font-size: 1.5rem;
  }

  img.cashLogo {
    max-width: 80%;
  }

  .addBox {
    margin: 30px 0 100px 0;
  }

  .addDM {
    width: 50%;
    float: left;
    margin: 0 0 0 0;
  }

  .QRcode {
    width: 50%;
    display: inline-block;
  }

  .QRcode img {
    width: 235px;
    height: 235px;
  }
}

/*iPad air*/
@media only screen and (min-device-width: 820px) and (max-device-width: 820px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  .home .card>div:nth-last-of-type(1) ul li {
    font-size: 1.1rem !important;
    line-height: 2rem;
  }

  ul.topNav {
    display: inline-block;
    margin: 0 auto 20px auto;
  }

  ul.topNav li {
    margin: 10px 10px 10px 0;
    padding: 0;
    list-style: none none;
    display: inline-block;
  }

  ul.topNav li a {
    font-size: 1.2rem;
    margin: 0;
    padding: 5px 10px;
    display: block;
    width: 125px;
  }

  .enMBw li a {
    width: auto !important;
  }

  .mainCenter {
    margin: 0 auto 10px auto;
    flex-direction: row;
  }

  .leftBOX {
    width: 45%;
    order: 1;
  }

  .rightBOX {
    width: 55%;
    order: 2;
  }

  .btnBox {
    margin: 30px auto 0px auto;
  }

  .disabledBox {
    position: static;
    /* 取消原本 relative 與 right 位移 */
    right: auto;
    display: block;
    margin: 10px auto;
    width: 80%;
  }

  img.cashLogo {
    position: static;
    /* 取消原本 relative/right */
    display: block;
    margin: 0 auto;
    max-width: 65%;
  }
}

@media only screen and (min-width: 834px) and (max-width: 1194px) {
  .home .card>div:nth-last-of-type(1) ul li {
    font-size: 1rem !important;
    line-height: 2rem;
  }

  ul.topNav {
    display: inline-block;
    margin: 0 auto 20px auto;
  }

  ul.topNav li {
    margin: 10px 15px 10px 0;
    padding: 0;
    list-style: none none;
    display: inline-block;
  }

  ul.topNav li a {
    font-size: 1.2rem;
    margin: 0;
    padding: 5px 15px;
    display: block;
    width: 160px;
  }

  .enMBw li a {
    width: auto !important;
  }

  .mainCenter {
    margin: 0 auto 10px auto;
    flex-direction: row;
  }

  .leftBOX {
    width: 45%;
    order: 1;
  }

  .rightBOX {
    width: 55%;
    order: 2;
  }

  .btnBox {
    position: static;
    /* 取消原本 relative 與 right 位移 */
    right: auto;
    display: block;
    margin: 40px auto 0px auto;
  }

  .disabledBox {
    position: static;
    /* 取消原本 relative 與 right 位移 */
    right: auto;
    display: block;
    margin: 20px auto;
    width: 80%;
  }

  img.cashLogo {
    position: static;
    /* 取消原本 relative/right */
    display: block;
    margin: 0 auto;
    max-width: 60%;
  }
}

/*2025-11-12 新增*/
.onlineService a {
  font-size: 1.875rem;
  position: relative;
  text-align: right;
  text-decoration: none;
  font-weight: bold;
  color: #000;
  float: right;
  margin: 1.5rem 0 1.5rem auto;
}

.onlineService a:hover,
.onlineService a:focus {
  outline: 4px solid #5e1233 !important;
}

.onlineService a::before {
  content: "";
  width: 2.25rem;
  height: 2.25rem;
  display: inline-block;
  vertical-align: sub;
  background: url("../img/onlineService.png") no-repeat center left/contain;
  margin-right: 5px;
}