@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
	v2.0 | 20110126
	License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500&display=swap");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.05rem;
  font-weight: normal;
  font-weight: 400;
  font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, Helvetica, Sans-Serif;
  vertical-align: baseline;
  color: #444;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

* {
  box-sizing: border-box;
  font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, Helvetica, Sans-Serif;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

strong {
  font-weight: bold;
  color: inherit;
}

a {
  text-decoration: none;
}

input {
  padding: 0px;
  margin: 0px;
  border: none;
}

button {
  padding: 0px;
  margin: 0px;
  border: none;
  background-color: transparent;
}

em {
  font-style: normal;
}

/*清除浮動*/
.wrap::after,
.clearfix::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/*
@mixin scroll{
    &::-webkit-scrollbar {
    width: 4px;
    margin-right: 5px;
    }

    &::-webkit-scrollbar-button {
    background: transparent;
    border-radius: 4px;
    }

    &::-webkit-scrollbar-track-piece {
        background-color: rgba(0, 0, 0, 0.4);
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: #FF6147;
    }

    &::-webkit-scrollbar-track {
    box-shadow: transparent;
    }
}
*/
/*
@mixin scroll{
    &::-webkit-scrollbar {
    width: 4px;
    margin-right: 5px;
    }

    &::-webkit-scrollbar-button {
    background: transparent;
    border-radius: 4px;
    }

    &::-webkit-scrollbar-track-piece {
        background-color: rgba(0, 0, 0, 0.4);
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: #FF6147;
    }

    &::-webkit-scrollbar-track {
    box-shadow: transparent;
    }
}
*/
/*
@mixin scroll{
    &::-webkit-scrollbar {
    width: 4px;
    margin-right: 5px;
    }

    &::-webkit-scrollbar-button {
    background: transparent;
    border-radius: 4px;
    }

    &::-webkit-scrollbar-track-piece {
        background-color: rgba(0, 0, 0, 0.4);
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: #FF6147;
    }

    &::-webkit-scrollbar-track {
    box-shadow: transparent;
    }
}
*/
html {
  overflow-x: hidden;
  width: 100vw;
}

body {
  font-size: 1rem;
  line-height: 1.8em;
  letter-spacing: 0.5px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  -moz-overflow-scrolling: touch;
  -o-overflow-scrolling: touch;
  -ms-overflow-scrolling: touch;
  background-color: #ffffff;
  color: #707070;
  width: 100vw;
}

.wrap {
  width: 100%;
  max-width: 1440px;
  margin: auto;
}
@media screen and (max-width: 1480px) {
  .wrap {
    max-width: calc(100% - 40px);
  }
}
@media screen and (max-width: 1024px) {
  .wrap {
    max-width: calc(100% - 30px);
  }
}
@media screen and (max-width: 400px) {
  .wrap {
    max-width: calc(100% - 20px);
  }
}

.wrap-small {
  width: 1280px;
  margin: auto;
}
@media screen and (max-width: 1024px) {
  .wrap-small {
    width: 100%;
  }
}
.wrap-small .back-btn {
  top: 75px;
  left: 0;
  margin-left: 280px;
}

h1, .h1 {
  font-size: 2.2rem;
  line-height: 2.6rem;
  font-weight: 700;
  margin-bottom: 25px;
  color: #597834;
  font-family: "Noto Serif TC", serif;
  letter-spacing: 1px;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}
@media screen and (max-width: 767px) {
  h1, .h1 {
    font-size: 1.5rem;
    line-height: 1.5em;
    margin-bottom: 15px;
  }
}

h2, .h2 {
  font-size: 1.9rem;
  line-height: 2.1em;
  color: #e45a15;
  font-weight: 500;
  margin-bottom: 15px;
  letter-spacing: 1px;
  -webkit-font-smoothing: antialiased;
}
@media screen and (max-width: 767px) {
  h2, .h2 {
    font-size: 1.3rem;
    line-height: 1.5em;
    margin-bottom: 10px;
  }
}
.model-index h2, .model-index .h2 {
  color: #434A5A;
}
@media screen and (max-width: 1000px) {
  .model-index h2, .model-index .h2 {
    text-align: center;
  }
}

h3, .h3 {
  font-size: 1.5rem;
  line-height: 1.8em;
  color: #597834;
  margin-bottom: 0.5em;
  letter-spacing: 1px;
  position: relative;
}
@media screen and (max-width: 767px) {
  h3, .h3 {
    font-size: 1.2rem;
    line-height: 1.6em;
  }
}

h4, .h4 {
  font-size: 1.3rem;
  line-height: 1.8em;
  color: #9D9165;
  margin-bottom: 0.5em;
  letter-spacing: 1px;
}
h4::before, .h4::before {
  content: "";
  border-left: 4px solid #9D9165;
  padding-left: 10px;
  left: 0;
}
@media screen and (max-width: 768px) {
  h4, .h4 {
    font-size: 1.1rem;
    line-height: 1.6em;
  }
}

h5, .h5 {
  font-size: 1.2rem;
  line-height: 1.6em;
  font-weight: 600;
  font-weight: 500;
  margin-bottom: 15px;
}
h5::before, .h5::before {
  content: "";
  border-left: 4px solid;
  padding-left: 10px;
  left: 0;
}

h6, .h6 {
  font-size: 1.125rem;
  line-height: 1.6em;
}

small {
  font-size: 0.9rem;
}

p {
  margin-bottom: 1em;
}

span {
  font-weight: inherit;
  color: inherit;
}
span.orange {
  color: #FF6A1D;
}

a {
  color: #2D2D2D;
  /*
  @include min-width(1025px){
      &:hover{
          color: $color-main-darkorange;
      }
      &:focus{
          color: $color-main-darkorange;
          outline: none;
          box-shadow: 0 0 0 0.2rem $color-orange;
      }
  }
  */
}
a > span {
  color: inherit;
}
a:active {
  color: #e45a15;
}
a.external-link::after {
  content: "\f35d";
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  margin-left: 5px;
}

abbr {
  text-decoration: none;
}

input[type=text],
input[type=file],
input[type=password],
input[type=number],
select {
  display: inline-block;
  line-height: 1em;
  border-width: 1px;
  border-color: #AEAEAE;
  border-style: solid;
  background-color: #fff;
  border-radius: 15px;
  padding: 3px 15px;
  margin: 1px;
  font-size: 1rem;
  width: 100%;
  height: 50px;
}
@media screen and (min-width: 1025px) {
  input[type=text]:focus,
  input[type=file]:focus,
  input[type=password]:focus,
  input[type=number]:focus,
  select:focus {
    color: #597834;
    outline: none;
    box-shadow: 0 0 0 0.2rem #DA3705;
  }
}
@media screen and (max-width: 1024px) {
  input[type=text],
  input[type=file],
  input[type=password],
  input[type=number],
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}

textarea {
  display: block;
  line-height: 1.4em;
  border-width: 1px;
  border-color: #CCD1D9;
  border-style: solid;
  padding: 7px;
  margin: 1px;
  font-size: 1rem;
}
textarea::-moz-placeholder {
  color: #aeb5bf;
}
textarea::placeholder {
  color: #aeb5bf;
}
@media screen and (min-width: 1025px) {
  textarea:focus {
    outline-color: #DA3705;
  }
}
@media screen and (max-width: 1024px) {
  textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}

input[type=submit],
input[type=reset],
input[type=button] {
  display: inline-block;
  line-height: 1em;
  border-width: 1px;
  border-color: #CCD1D9;
  border-style: solid;
  margin: 1px;
  cursor: pointer;
}
@media screen and (max-width: 1024px) {
  input[type=submit],
  input[type=reset],
  input[type=button] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}

.search-submit-btn {
  display: inline-block;
  width: 35px;
  height: 35px;
  padding: 0px;
  margin: 0px;
  background-color: #597834;
  background-image: url("../../images/icon/search_white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25px;
  border: none;
  text-align: center;
  font-size: 0rem;
  text-indent: -9999px;
  color: #ffffff;
}
@media screen and (min-width: 1025px) {
  .search-submit-btn:hover {
    background-color: #e45a15;
    color: #ffffff;
  }
  .search-submit-btn:focus {
    background-color: #e45a15;
    outline-color: #DA3705;
    color: #ffffff;
  }
}

.radio-select {
  display: inline-block;
}
.radio-select > input[type=radio] {
  opacity: 0;
  width: 0px;
  top: 0px;
}
.radio-select > input[type=radio] + label {
  display: inline-block;
  border-width: 1px;
  border-color: transparent;
  border-style: solid;
  line-height: 1em;
  padding: 5px 20px;
  cursor: pointer;
}
.radio-select > input[type=radio]:checked + label, .radio-select > input[type=radio]:focus + label {
  border-color: #DA3705;
  color: #DA3705;
}

ul.radioGroup {
  display: flex;
  flex-wrap: wrap;
}
.content ul.radioGroup {
  list-style: none;
  padding-left: 0px;
  margin-bottom: 0px;
}

.radio-normal, .cssRdo li {
  display: inline-block;
}
.radio-normal > input[type=radio], .cssRdo li > input[type=radio] {
  opacity: 0;
  width: 0px;
  position: absolute;
}
.radio-normal > input[type=radio] + label, .cssRdo li > input[type=radio] + label {
  cursor: pointer;
}
.radio-normal > input[type=radio] + label::before, .cssRdo li > input[type=radio] + label::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: #CCD1D9;
  display: inline-block;
  margin-right: 10px;
}
.radio-normal > input[type=radio]:checked + label::before, .radio-normal > input[type=radio]:focus + label::before, .cssRdo li > input[type=radio]:checked + label::before, .cssRdo li > input[type=radio]:focus + label::before {
  background-color: #FF7247;
}

.cssRdo.four-lang-only li {
  width: 100%;
}

.form-group ul.cssRdo {
  padding-left: 0;
}
.form-group ul.cssRdo li {
  margin-right: 20px;
}

.checkbox-normal > input[type=checkbox] {
  opacity: 0;
  width: 0px;
  position: absolute;
}
.checkbox-normal > input[type=checkbox] + label {
  cursor: pointer;
}
.checkbox-normal > input[type=checkbox] + label::before {
  content: "";
  width: 15px;
  height: 15px;
  background-color: #CCD1D9;
  display: inline-block;
  margin-right: 10px;
}
.checkbox-normal > input[type=checkbox]:checked + label::before, .checkbox-normal > input[type=checkbox]:focus + label::before {
  background-color: #FF7247;
}

ul.radioTabsGroup {
  display: flex;
  flex-wrap: wrap;
}
.content ul.radioTabsGroup {
  list-style: none;
  padding-left: 0px;
  margin-top: 1em;
  margin-bottom: 1em;
}
ul.radioTabsGroup > li {
  width: 50%;
}
@media screen and (min-width: 768px) {
  ul.radioTabsGroup > li:nth-child(odd) .radio-tabs > input[type=radio] + label {
    border-radius: 10px 0px 0px 10px;
  }
  ul.radioTabsGroup > li:nth-child(even) .radio-tabs > input[type=radio] + label {
    border-radius: 0px 10px 10px 0px;
  }
}
@media screen and (max-width: 767px) {
  ul.radioTabsGroup > li {
    width: 100%;
    margin-bottom: 1em;
  }
  ul.radioTabsGroup > li:last-child {
    margin-bottom: 0px;
  }
  ul.radioTabsGroup > li .radio-tabs > input[type=radio] + label {
    border-radius: 10px;
  }
}
ul.radioTabsGroup .radio-tabs {
  display: block;
}
ul.radioTabsGroup .radio-tabs > input[type=radio] {
  opacity: 0;
  width: 0px;
  position: absolute;
}
ul.radioTabsGroup .radio-tabs > input[type=radio] + label {
  padding: 5px 10px;
  display: block;
  text-align: center;
  font-weight: bold;
  color: #237f8d;
  background-color: #ffffff;
  cursor: pointer;
  border-width: 1px;
  border-color: #237f8d;
  border-style: solid;
}
ul.radioTabsGroup .radio-tabs > input[type=radio]:checked + label, ul.radioTabsGroup .radio-tabs > input[type=radio]:focus + label {
  color: #ffffff;
  background-color: #237f8d;
}

.side-left {
  float: left;
}

.side-right {
  float: right;
}

/* 按鈕 */
.btn {
  font-size: 1.5rem;
  display: inline-block;
  line-height: 1em;
  border-width: 1px;
  border-color: #CCD1D9;
  border-style: solid;
  color: #656D78;
  padding: 10px 50px;
  margin: 1px;
  text-align: center;
}
@media screen and (max-width: 540px) {
  .btn {
    padding: 10px 35px;
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 1025px) {
  .btn:hover {
    border-color: #30B8A1;
    background-color: #30B8A1;
    color: #ffffff;
  }
  .btn:focus {
    border-color: #30B8A1;
    background-color: #30B8A1;
    color: #ffffff;
    outline-color: #DA3705;
  }
}
.btn.btn-primary {
  border-radius: 10px;
  border-color: #3984CA;
  background-color: #3984CA;
  color: #ffffff;
}
@media screen and (min-width: 1025px) {
  .btn.btn-primary:hover, .btn.btn-primary:focus {
    border-color: #1ca992;
    background-color: #1ca992;
    color: #ffffff;
  }
}
.btn.btn-other {
  font-size: 1.3rem;
  font-weight: 500;
  border-radius: 10px;
  border-color: #23B4E1;
  background-color: #23B4E1;
  color: #fff;
  box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 0px 3px;
}
@media screen and (min-width: 1025px) {
  .btn.btn-other:hover, .btn.btn-other:focus {
    border-color: #e45a15;
    background-color: #e45a15;
    color: #ffffff;
  }
}
.btn.btn-cancel {
  border-radius: 10px;
  border-width: 1px;
  border-color: #CCD1D9;
  border-style: solid;
  background-color: #fff;
  color: #fff;
}
@media screen and (min-width: 1025px) {
  .btn.btn-cancel:hover, .btn.btn-cancel:focus {
    border-color: #F36C36;
    background-color: #F36C36;
    color: #000;
  }
}
.btn.btn-confirm {
  border-radius: 10px;
  border-color: #F36C36;
  background-color: #F36C36;
  color: #ffffff;
}
@media screen and (min-width: 1025px) {
  .btn.btn-confirm:hover, .btn.btn-confirm:focus {
    border-color: #FF6A1D;
    background-color: #FF6A1D;
    color: #ffffff;
  }
}
.btn.btn-back {
  border-color: #854E39;
  background-color: #854E39;
  color: #ffffff;
}
@media screen and (min-width: 1025px) {
  .btn.btn-back:hover, .btn.btn-back:focus {
    border-color: #9D9165;
    background-color: #9D9165;
    color: #ffffff;
  }
}

.form-sent-box {
  margin-top: 50px;
}
.form-sent-box .btn {
  font-size: 1.2rem;
  padding: 15px 30px;
  line-height: 1.5rem;
}
.form-sent-box .btn-primary {
  width: 280px;
}
.form-sent-box .btn-cancel {
  width: 280px;
}
.form-sent-box .btn-auto {
  width: auto;
}

/* 表格 */
table {
  width: 100%;
}
table tr {
  word-break: initial;
}
table tr th, table tr td {
  padding: 10px;
  vertical-align: middle;
  border-width: 1px;
  border-style: solid;
  border-color: #CCD1D9;
  word-wrap: break-word;
  word-break: break-all;
  border-radius: 20px 20px 0 0;
}
table tr th {
  background-color: #e45a15;
  border-radius: 20px 20px 0 0;
  color: #fff;
  border-color: #e45a15;
  border: none;
}
@media screen and (min-width: 1024px) {
  table.authorize-movie th {
    min-width: 150px;
  }
}

.left-title-faketable {
  margin: 20px 0;
}
.left-title-faketable .one-row {
  display: flex;
  border-bottom: 1px solid #fff;
}
.left-title-faketable .one-row:nth-child(1) .right-content {
  border-top: 1px solid #AEAEAE;
}
.left-title-faketable .one-row .left-title {
  background-color: #EFE8D9;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 15px;
}
.left-title-faketable .one-row .right-content {
  flex: 4;
  padding: 15px;
  border-right: 1px solid #AEAEAE;
  border-bottom: 1px solid #AEAEAE;
}
.left-title-faketable .main-title {
  display: block;
  text-align: center;
  background-color: #EFE8D9;
  padding: 15px;
}

/* 暫時的 */
table[border] tr th, table[border] tr td,
.bilingual-table tr th,
.bilingual-table tr td,
.form-table tr th,
.form-table tr td,
.footable tr th,
.footable tr td {
  vertical-align: middle;
  padding: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: #CCD1D9;
  word-break: initial;
}
table[border] tr th,
.bilingual-table tr th,
.form-table tr th,
.footable tr th {
  background-color: #F3ECDB;
  color: #444444;
}
table[border].word-break tr th, table[border].word-break tr td,
.bilingual-table.word-break tr th,
.bilingual-table.word-break tr td,
.form-table.word-break tr th,
.form-table.word-break tr td,
.footable.word-break tr th,
.footable.word-break tr td {
  word-break: break-word;
}

/* Footable */
.footable .footable-row-detail-name {
  font-weight: 500;
  padding-bottom: 10px;
}
.footable .footable-row-detail-value {
  padding-bottom: 10px;
}

.footable.breakpoint > tbody > tr > td > span.footable-toggle::before {
  content: "" !important;
  width: 25px;
  height: 25px;
  display: block;
  margin-bottom: -5px;
  background-image: url(../../images/icon/plus-brown.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}

.footable.breakpoint > tbody > tr.footable-detail-show > td > span.footable-toggle::before {
  content: "" !important;
  width: 25px;
  height: 25px;
  display: block;
  margin-bottom: -5px;
  background-image: url(../../images/icon/minus-brown.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}

/* lightGallery */
body .lg-outer,
body .lg-backdrop {
  z-index: 5050;
  width: 70vw;
  height: 70vh;
  margin-left: 15vw;
  margin-top: 15vh;
}
@media screen and (max-width: 540px) {
  body .lg-outer,
  body .lg-backdrop {
    width: 100vw;
    height: 80vh;
    margin-left: 0vw;
    margin-top: 0vh;
  }
}

.lg-video {
  padding-bottom: 65vh !important;
}

.lg-outer .lg-video-cont {
  max-width: 65vw !important;
}

.lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html {
  position: absolute;
}

/* 格狀排版 Grid */
.grid {
  display: flex;
  flex-wrap: wrap;
}
.grid > li {
  width: 100%;
  padding: 0px 0.5em;
}
.grid.grid-100 > li {
  width: 100%;
}
.grid.grid-50 > li {
  width: 50%;
}
.grid.grid-50 > li:nth-child(2n) {
  padding-left: 20px;
}
@media screen and (max-width: 540px) {
  .grid.grid-50 > li:nth-child(2n) {
    padding-left: 0;
  }
}
.grid.grid-33 > li {
  width: 33.3%;
}
.grid.grid-25 > li {
  width: 25%;
}
.grid.grid-left {
  flex-direction: row;
}
.grid.grid-left > li:nth-child(odd) {
  width: 40%;
  padding-left: 0px;
}
.grid.grid-left > li:nth-child(even) {
  width: 60%;
  padding-right: 0px;
}
.grid.grid-right {
  flex-direction: row-reverse;
}
.grid.grid-right > li:nth-child(odd) {
  width: 40%;
  padding-right: 0px;
}
.grid.grid-right > li:nth-child(even) {
  width: 60%;
  padding-left: 0px;
}
@media screen and (max-width: 900px) {
  .grid.grid-left, .grid.grid-right {
    flex-direction: row;
  }
  .grid.grid-left > li:nth-child(odd), .grid.grid-right > li:nth-child(odd) {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
  }
  .grid.grid-left > li:nth-child(even), .grid.grid-right > li:nth-child(even) {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media screen and (max-width: 540px) {
  .grid > li {
    padding: 0px;
  }
  .grid.grid-100 > li {
    width: 100%;
  }
  .grid.grid-50 > li {
    width: 100%;
  }
  .grid.grid-33 > li {
    width: 100%;
  }
  .grid.grid-25 > li {
    width: 100%;
  }
}

/*align*/
@media screen and (min-width: 1024px) {
  .align {
    width: 100%;
    margin: 2.25rem auto !important;
    display: flex;
    flex-wrap: wrap;
  }
  .align > li {
    width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .align > li.col-100 {
    /*
    @else {
        width: $width%;
    }
    */
  }
  .align > li.col-80 {
    /*
    @else {
        width: $width%;
    }
    */
  }
  .align > li.col-75 {
    /*
    @else {
        width: $width%;
    }
    */
  }
  .align > li.col-66 {
    width: 66.66%;
    /*
    @else {
        width: $width%;
    }
    */
  }
  .align > li.col-60 {
    /*
    @else {
        width: $width%;
    }
    */
  }
  .align > li.col-50 {
    /*
    @else {
        width: $width%;
    }
    */
  }
  .align > li.col-40 {
    /*
    @else {
        width: $width%;
    }
    */
  }
  .align > li.col-33 {
    width: 33.33%;
    /*
    @else {
        width: $width%;
    }
    */
  }
  .align > li.col-25 {
    /*
    @else {
        width: $width%;
    }
    */
  }
  .align > li.col-20 {
    /*
    @else {
        width: $width%;
    }
    */
  }
  .align > li:before {
    display: none !important;
  }
  .align.align-left {
    flex-direction: row;
  }
  .align.align-left > li:nth-child(odd) {
    padding-left: 0px;
  }
  .align.align-left > li:nth-child(even) {
    padding-right: 0px;
  }
  .align.align-left.culture-desc > li:nth-child(odd) {
    padding-right: 0px;
    padding-left: 0px;
    width: 45.75%;
  }
  .align.align-left.culture-desc > li:nth-child(even) {
    padding-left: 1rem;
    padding-right: 0px;
    width: 54.25%;
  }
}
@media screen and (min-width: 1024px) and (min-width: 1280px) {
  .align.align-left.culture-desc > li:nth-child(even) {
    padding-left: 3rem;
  }
}
@media screen and (min-width: 1024px) {
  .align.align-left.culture-desc h2 {
    color: #597834;
    border-bottom: 3px solid #F3ECDB;
    padding-bottom: 0.15rem;
    margin-top: 0.15rem;
    margin-bottom: 1rem;
    font-size: 1.75rem;
  }
}
@media screen and (min-width: 1024px) and (min-width: 1280px) {
  .align.align-left.culture-desc h2 {
    border-bottom: 5px solid #F3ECDB;
    padding-bottom: 0.35rem;
    margin-top: 0.35rem;
    margin-bottom: 1.3rem;
    font-size: 2rem;
  }
}
@media screen and (min-width: 1024px) {
  .align.align-left.culture-desc p {
    font-size: 1rem;
  }
}
@media screen and (min-width: 1024px) and (min-width: 1280px) {
  .align.align-left.culture-desc p {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 1024px) {
  .align.align-right {
    flex-direction: row-reverse;
  }
  .align.align-right > li:nth-child(odd) {
    padding-right: 0px;
  }
  .align.align-right > li:nth-child(even) {
    padding-left: 0px;
  }
  .align.align-center {
    align-items: center;
  }
}
.align > li:before {
  display: none !important;
}

/* jQuery UI 的日期選擇器 */
#ui-datepicker-div span {
  color: #707070;
}
#ui-datepicker-div th {
  background-color: #CCD1D9;
}

/* iframe尺寸 */
.iframebox {
  width: 100%;
  height: 0px;
  padding-bottom: 67%;
  position: relative;
}
.iframebox > iframe, .iframebox video {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  left: 0px;
  top: 0px;
}

.embedbox {
  width: 100%;
  height: 0px;
  padding-bottom: 67%;
  position: relative;
  margin: 20px 0;
}
.embedbox > iframe, .embedbox embed {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  left: 0px;
  top: 0px;
}

.content .text-idtn-1 {
  list-style: none;
  padding-left: 0px;
  margin-bottom: 1em;
}
.content .text-idtn-1 > li {
  padding-left: 2em;
  text-indent: -2em;
}
.content .text-idtn-1 > li:nth-child(n+11) {
  padding-left: 3em;
  text-indent: -3em;
}

.content .text-idtn-2 {
  list-style: none;
  padding-left: 0px;
  margin-bottom: 1em;
}
.content .text-idtn-2 > li {
  padding-left: 3em;
  text-indent: -3em;
}
.content .text-idtn-2 > li:nth-child(n+11) {
  padding-left: 5em;
  text-indent: -5em;
}

.text-idtn-3 {
  padding-left: 35px;
  margin-bottom: 1em;
  list-style: decimal;
}
.text-idtn-3 > li {
  text-indent: 0px;
}
.text-idtn-3 > li > ol {
  list-style: none;
}

.content .common-list {
  list-style: none;
  padding-left: 35px;
  margin-bottom: 1em;
}
.content .common-list > li {
  position: relative;
}
.content .common-list > li::before {
  content: "";
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 100%;
  background-color: #854E39;
  position: absolute;
  top: 15px;
  left: -20px;
}

/*iframe元件*/
.iframebox {
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  position: relative;
}
.iframebox iframe {
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  left: 0;
  top: 0;
}

/* 錯誤頁 */
.model-error {
  background-color: #F9F7F3;
}
.model-error > form {
  padding-top: 0px;
}
.model-error .content > .wrap {
  max-width: 800px;
}
@media screen and (max-width: 830px) {
  .model-error .content > .wrap {
    max-width: calc(100% - 30px);
  }
}
@media screen and (max-width: 540px) {
  .model-error .content > .wrap {
    max-width: calc(100% - 20px);
  }
}
.model-error .error-logo {
  width: 350px;
  height: 80px;
  display: block;
  line-height: 1em;
  font-size: 0rem;
  padding: 0px;
  margin: 0px;
  position: relative;
  margin: 30px 0 0 50px;
}
@media screen and (max-width: 540px) {
  .model-error .error-logo {
    margin: auto;
    width: 80%;
  }
}
.model-error .error-logo a {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
  font-size: 0rem;
  text-indent: -9999px;
  background-image: url(../../images/logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.model-error .error-main {
  padding: 50px 30px;
}
@media screen and (max-width: 767px) {
  .model-error .error-main {
    padding: 30px;
  }
}
@media screen and (max-width: 540px) {
  .model-error .error-main {
    padding: 20px 15px;
  }
}
@media screen and (max-width: 400px) {
  .model-error .error-main {
    padding: 20px 10px;
  }
}
.model-error .error-caption {
  font-size: 1.3rem;
  line-height: 1.8em;
  font-weight: bold;
  color: #008773;
  line-height: 1.2em;
  margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
  .model-error .error-caption {
    font-size: 1.1rem;
    line-height: 1.6em;
    line-height: 1.2em;
  }
}
.model-error .error-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #AEAEAE;
}
.model-error .error-header .error-title {
  text-align: center;
  max-width: calc(100% - 80px);
}
.model-error .error-header .error-title p {
  color: #597834;
}
@media screen and (max-width: 540px) {
  .model-error .error-header .error-title {
    max-width: calc(100% - 60px);
  }
}
.model-error .error-header .error-title h1 {
  color: #597834;
  font-size: 3rem;
}
.model-error .error-header .error-title .error-caption {
  margin-bottom: 0px;
}
@media screen and (max-width: 540px) {
  .model-error .error-header .error-title .error-caption {
    font-size: 1.2rem;
  }
}
.model-error .error-body {
  width: 100%;
  max-width: 590px;
  margin: auto;
  text-align: center;
}
.model-error .error-body p {
  text-align: left;
  font-size: 1.2rem;
}

/* Form */
body > form {
  padding-top: 185px;
}
@media screen and (max-width: 1024px) {
  body > form {
    padding-top: 60px;
  }
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}

.logo-btn {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 140px;
  height: 60px;
  font-size: 0;
  background-image: url(../../common/images/LOGO.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.logo-btn span {
  font-size: 0;
}

.index .logo-btn {
  display: none;
}

.main-menu {
  position: absolute;
  width: 100%;
  display: flex;
  flex-flow: wrap;
  bottom: 0;
  left: 0;
  z-index: 5;
  background-color: #FF6147;
  height: 85px;
  text-align: center;
  font-weight: 600;
}
@media screen and (max-height: 650px) {
  .main-menu {
    height: 75px;
  }
}
.main-menu .copy {
  font-size: 0.5rem;
  width: 100%;
  position: absolute;
  text-align: center;
  top: 0;
  margin-top: -30px;
  font-weight: 500;
  color: #fff;
}
@media screen and (max-height: 650px) {
  .main-menu .copy {
    display: none;
  }
}
.main-menu ul {
  display: flex;
  width: 100%;
}
.main-menu ul li {
  flex: 1;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.main-menu ul li a {
  color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}
.main-menu ul li a::before {
  content: "";
  display: block;
  width: 100%;
  height: 40px;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-size: contain;
  background-position: center;
  margin-bottom: 0px;
}
@media screen and (max-height: 650px) {
  .main-menu ul li a::before {
    height: 30px;
  }
}
.main-menu ul li a span {
  font-size: 0.9rem;
}
.main-menu ul li:nth-child(1) a::before {
  background-image: url(../../common/images/icon01.svg);
}
.main-menu ul li:nth-child(2) a::before {
  background-image: url(../../common/images/icon02.svg);
}
.main-menu ul li:nth-child(3) a::before {
  background-image: url(../../common/images/icon03.svg);
}
.main-menu ul li:nth-child(4) a::before {
  background-image: url(../../common/images/icon04.svg);
}

.btn-box {
  margin: 20px 0;
}
.btn-box .btn {
  margin: 0 5px;
}
.btn-box.two-btn .btn {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.back-btn {
  position: absolute;
  right: 15px;
  top: 15px;
  width: 50px;
  height: 50px;
  font-size: 0;
  background-image: url(../../common/images/back-btn.svg);
  background-size: 95%;
  background-repeat: no-repeat;
  background-position: center;
}
.back-btn span {
  font-size: 0;
  text-shadow: -99999px;
}

.top-lottery-time {
  background-color: #fff;
  padding: 10px 15px 10px 50px;
  border-radius: 30px;
  position: absolute;
  right: 70px;
  top: 15px;
}
.top-lottery-time::before {
  position: absolute;
  content: "";
  background-image: url(../../common/images/gametime.svg);
  display: block;
  width: 35px;
  height: 35px;
  left: 0;
  bottom: 0;
  margin-left: 10px;
  margin-bottom: 7px;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-size: contain;
  background-position: center;
}
.top-lottery-time span {
  margin: 0 5px;
  color: #da1d00;
}

/*loading*/
.loading-bd {
  z-index: 1000;
  background-image: url(../../common/images/stone-texture.jpg);
  background-position: center;
  background-repeat: repeat;
  left: 0;
  top: 0;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  flex-flow: column;
}

.loading-img {
  width: 250px;
  text-align: center;
  margin-bottom: 25px;
}
@media screen and (max-width: 540px) {
  .loading-img {
    width: 175px;
  }
}
.loading-img img {
  width: 100%;
}

.loading-text {
  height: 20px;
  width: 250px;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.loading-text .loader--text {
  position: absolute;
  width: 250px;
  margin: auto;
  font-size: 1.8rem;
  color: #AF9483;
}
.loading-text .loader--text:after {
  content: "Loading";
  font-weight: bold;
  animation-name: loading-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
@keyframes loading-text {
  0% {
    content: "Loading";
  }
  25% {
    content: "Loading.";
  }
  50% {
    content: "Loading..";
  }
  75% {
    content: "Loading...";
  }
}

.simplebar-scrollbar:before {
  background: #FF6A1D !important;
}

#app {
  text-align: center;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
}

/*首頁*/
.main-content {
  display: flex;
  justify-content: center;
  background-color: #fff;
  position: relative;
}
.main-content.desktop {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  display: none;
  z-index: 2000;
}
@media screen and (min-width: 570px) {
  .main-content.desktop {
    display: block;
  }
}
.main-content.desktop .main-box {
  position: relative;
  display: flex;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}
.main-content.desktop .main-box .desktop-page {
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: #23B4E1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
}
.main-content.desktop .main-box .desktop-page img {
  width: 200px;
}
.main-content.desktop .main-box .desktop-page p {
  color: #fff;
}

.main-box {
  position: relative;
  display: flex;
  width: 550px;
  height: 100vh;
  height: 100dvh;
}

.index-page {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(100vh - 85px);
  height: calc(100dvh - 85px);
  background-image: url(../../common/images/index_bd.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  animation: index-page 1s;
}
@media screen and (max-height: 650px) {
  .index-page {
    height: calc(100vh - 75px);
    height: calc(100dvh - 75px);
  }
}

@keyframes index-page {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/*題目內頁*/
.qa-page {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(100vh - 85px);
  height: calc(100dvh - 85px);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.qa-page.qa1 {
  background-image: url(../../common/images/qa1_bd.png);
}
.qa-page.qa2 {
  background-image: url(../../common/images/qa2_bd.png);
}
.qa-page.qa3 {
  background-image: url(../../common/images/qa3_bd.png);
}
.qa-page.qa4 {
  background-image: url(../../common/images/qa4_bd.png);
}
.qa-page.qa5 {
  background-image: url(../../common/images/qa5_bd.png);
}
.qa-page.qa6 {
  background-image: url(../../common/images/qa6_bd.png);
}
.qa-page.qa7 {
  background-image: url(../../common/images/qa7_bd.png);
}
@media screen and (max-height: 650px) {
  .qa-page {
    height: calc(100vh - 75px);
    height: calc(100dvh - 75px);
  }
}

.bigweb-icon {
  width: 280px;
  height: 50px;
  left: 15px;
  background-image: url(../../common/images/bigweb-logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 100%;
  font-size: 0;
  top: 10px;
  display: inline-block;
  position: absolute;
}

.index-title {
  position: relative;
  width: 70%;
  height: 200px;
  background-image: url(../../common/images/LOGO.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 50px auto;
  padding: 40px 0;
  animation: index-title 1s;
}
@media screen and (max-width: 540px) {
  .index-title {
    width: 80vw;
    background-size: 95%;
  }
}
@media screen and (max-width: 550px) {
  .index-title {
    margin: 30px auto;
  }
}
.index-title p {
  font-size: 1.5rem;
  color: #bb5004;
  font-weight: 600;
  letter-spacing: 2px;
}
@media screen and (max-width: 540px) {
  .index-title p {
    font-size: 1.1rem;
    margin: 25px 0 0 0;
  }
}

.index-img {
  animation: index-img 2s infinite, index-img-run 2s;
  position: absolute;
  bottom: 125px;
}
@media screen and (max-height: 650px) {
  .index-img {
    bottom: 65px;
  }
}
.index-img img {
  width: 80%;
}
@media screen and (max-width: 550px) {
  .index-img img {
    width: 70%;
  }
}

@keyframes index-title {
  0% {
    opacity: 0;
    transform: scale(1.1);
    top: -50px;
  }
  100% {
    transform: scale(1);
    opacity: 1;
    top: 0px;
  }
}
@keyframes index-img-run {
  0% {
    opacity: 0;
    transform: scale(0.8);
    bottom: 125px;
  }
  50% {
    transform: scale(1);
    opacity: 1;
    bottom: 125px;
  }
}
@media screen and (max-height: 650px) {
  @keyframes index-img-run {
    0% {
      opacity: 0;
      transform: scale(0.8);
      bottom: 65px;
    }
    50% {
      transform: scale(1);
      opacity: 1;
      bottom: 65px;
    }
  }
}
@keyframes index-img {
  0% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}
.index-button {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: 70px;
  display: flex;
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
}
@media screen and (max-height: 650px) {
  .index-button {
    margin-bottom: 30px;
  }
}
.index-button a {
  margin: 0 20px;
  animation: scale 2s infinite, index-button 1s;
}

@keyframes index-button {
  0% {
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
/*上稿頁*/
.in-page {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(100vh - 85px);
  height: calc(100dvh - 85px);
  background-image: url(../../common/images/inpage.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  padding-bottom: 90px;
}
@media screen and (max-height: 650px) {
  .in-page {
    height: calc(100vh - 75px);
    height: calc(100dvh - 75px);
  }
}
.in-page.taiwanmap {
  background-image: url(../../common/images/taiwanmap_bd.png);
}
.in-page .inpage-title {
  width: 80%;
  margin: auto;
  font-size: 2.35rem;
  color: #fff;
  font-weight: 500;
  margin-top: 90px;
  margin-bottom: 25px;
  letter-spacing: 2px;
}
.in-page .text-line {
  border-bottom: 1px solid #d0d0d0;
  width: 100%;
  margin: 25px 0;
}
.in-page ul {
  text-align: left;
}
.in-page ul ol {
  padding-left: 10px;
}

/*獎項說明頁*/
.price-box p {
  width: 80%;
  margin: auto;
}
.price-box .price-title {
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.6;
}
.price-box .price-number {
  color: #3984CA;
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 10px;
}
.price-box .price-img {
  position: relative;
  overflow: hidden;
  text-align: center;
  display: block;
  width: 80%;
  max-height: 150px;
  padding-bottom: 55%;
  margin: 10px auto;
}
.price-box .price-img img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  float: none;
  margin: auto;
  width: auto !important;
  height: 100% !important;
  -o-object-fit: cover;
  object-fit: cover;
}

.color-change {
  color: #e45a15;
}

/*吉祥物介紹*/
.animalinf-swiper .animalinf-box .animal-img {
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 66%;
  width: 90%;
  margin: 20px auto;
  margin-top: 0;
  margin-bottom: 10px;
}
.animalinf-swiper .animalinf-box .animal-img img {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0;
  right: 0;
  float: none;
  width: auto !important;
  height: 100% !important;
  margin: auto;
  -o-object-fit: cover;
  object-fit: cover;
}
.animalinf-swiper .animalinf-box .animal-title {
  color: #F36C36;
  font-size: 1.6rem;
  margin: 15px 0;
}
.animalinf-swiper .animalinf-box .animal-text {
  text-align: left;
}

.animalinf-control-btn {
  position: absolute;
  width: 100%;
  top: calc(40% - 20px);
  left: 0;
  z-index: 2;
}
.animalinf-control-btn a {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  font-size: 0rem;
  text-indent: -9999px;
  position: absolute;
}
.animalinf-control-btn a:nth-child(1) {
  left: 20px;
  background-image: url(../../common/images/animal-left.svg);
}
.animalinf-control-btn a:nth-child(2) {
  right: 20px;
  background-image: url(../../common/images/animal-right.svg);
}

.self-finished {
  background-color: rgba(0, 0, 0, 0.85);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  animation: in 0.5s;
  position: absolute;
  flex-flow: column;
  z-index: 5;
}
.self-finished .main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  flex-flow: column;
}
.self-finished .title {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  font-size: 1.8rem;
  color: #fff;
  font-weight: 500;
  margin-bottom: 20px;
  margin-top: 20px;
  line-height: 1.2;
}
.self-finished p {
  color: #fff;
}

/*地圖頁*/
.taiwanmap-main {
  width: 90%;
  height: calc(100vh - 250px);
  height: calc(100dvh - 250px);
  margin-top: 120px;
  display: inline-block;
  background-image: url(../../common/images/taiwanmap.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: relative;
  animation: in 0.5s;
}
.taiwanmap-main .intoqa-btn {
  position: absolute;
  color: #fff;
  font-weight: 500;
  background-color: #FF781E;
  padding: 2px 15px;
  border-radius: 10px;
  left: 0;
  top: 0;
}
.taiwanmap-main .intoqa-btn.play_finished::before {
  content: "";
  position: absolute;
  width: 45px;
  height: 50px;
  left: -30px;
  top: -10px;
  z-index: 2;
  background-position: center;
  background-size: 100%;
  background-image: url(../../common/images/icon_play_finished.svg);
}
.taiwanmap-main .intoqa-btn span {
  font-size: 1.1rem;
}
.taiwanmap-main .intoqa-btn.qa1 {
  margin-left: 49%;
  margin-top: -9%;
}
.taiwanmap-main .intoqa-btn.qa2 {
  margin-left: 22%;
  margin-top: 9%;
}
.taiwanmap-main .intoqa-btn.qa3 {
  margin-left: 10%;
  margin-top: 25%;
}
.taiwanmap-main .intoqa-btn.qa4 {
  margin-left: 5%;
  margin-top: 45%;
}
.taiwanmap-main .intoqa-btn.qa5 {
  margin-left: 8%;
  margin-top: 94%;
}
.taiwanmap-main .intoqa-btn.qa6 {
  margin-left: 69%;
  margin-top: 89%;
}
.taiwanmap-main .intoqa-btn.qa7 {
  margin-left: 70%;
  margin-top: 55%;
}

/*問題頁-開頭小動物*/
.opening-animal {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  position: relative;
}
.opening-animal .talkbox {
  background-color: rgba(0, 0, 0, 0.75);
  padding: 10px;
  width: 70%;
  border-radius: 20px;
  color: #fff;
  font-weight: 500;
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: 45vh;
  margin-left: 15%;
  font-size: 1.1rem;
  animation: in 1s;
}
.opening-animal .animal-box {
  width: 70%;
  padding-bottom: 70%;
  position: absolute;
  right: 0;
  bottom: 0;
  margin-bottom: 10px;
  animation: animal-right 1s;
}
.opening-animal .animal-box img {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0;
  right: 0;
  float: none;
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover;
  object-fit: cover;
}

@keyframes animal-right {
  0% {
    margin-right: -70%;
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    margin-left: 0;
  }
}
@keyframes in {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*流程說明頁*/
.directions-page {
  width: 100%;
}

.directions-lightbox {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-flow: wrap;
  padding-top: 80px;
  animation: in 0.5s;
}
.directions-lightbox .directions-main {
  width: 80%;
  height: calc(100vh - 250px);
  height: calc(100dvh - 250px);
  display: flex;
  justify-content: flex-start;
  flex-flow: column;
  max-height: 600px;
  padding-right: 20px;
}
.directions-lightbox .directions-title {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  font-size: 2.2rem;
  color: #fff;
  font-weight: 500;
  margin-bottom: 20px;
  margin-top: 20px;
  line-height: 1.2;
}
.directions-lightbox .one-step {
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 15px;
}
.directions-lightbox .one-step:nth-child(4) {
  border: none;
}
.directions-lightbox .one-step .small-title {
  color: #FFB16D;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 5px;
}
.directions-lightbox .one-step .step-box {
  width: 100%;
  display: flex;
  justify-content: center;
}
.directions-lightbox .one-step .step-box .left {
  flex: 2;
  color: #fff;
}
.directions-lightbox .one-step .step-box .left .special {
  color: #F2BF3D;
  padding-left: 2px;
  font-size: 1.2rem;
}
.directions-lightbox .one-step .step-box .right {
  flex: 1;
  display: flex;
  justify-content: center;
}
.directions-lightbox .one-step .step-box .right img {
  width: 80%;
  max-height: 60px;
}
.directions-lightbox .btn-box {
  margin: 0;
  margin-top: -40px;
}

/*問題頁-問題*/
.qa-lightbox {
  background-color: rgba(0, 0, 0, 0.65);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 100px;
  animation: in 0.5s;
  /*回答後*/
}
.qa-lightbox .qa-main {
  width: 80%;
  height: calc(100vh - 250px);
  height: calc(100dvh - 250px);
  display: flex;
  justify-content: center;
  flex-flow: column;
  /*問題圖片*/
  /*問題主要部分*/
}
.qa-lightbox .qa-main .qa-img {
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 150px;
  width: 100%;
  margin: 20px auto;
  margin-top: 0;
  margin-bottom: 10px;
  overflow: hidden;
}
.qa-lightbox .qa-main .qa-img img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  float: none;
  max-width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  margin: 0px auto 20px;
}
.qa-lightbox .qa-main .qa-question {
  padding: 20px;
  background-color: #fff;
  border-radius: 20px;
  max-height: 600px;
  height: 65vh;
  z-index: 1;
}
.qa-lightbox .qa-main .qa-question .qa-title {
  text-align: left;
  line-height: 1.5;
  font-size: 1rem;
}
.qa-lightbox .qa-main .question-part {
  margin: 10px 0;
  position: relative;
  /*
  .btn-box{
      margin-bottom: 0;
      margin-top: 10px;
      a{
          position: absolute;
          bottom: 50px;
          left: 0;
          margin-left: calc(50% - 60px);
          z-index: 20;
          //margin-bottom: 90px;
      }
  }
  */
}
.qa-lightbox .qa-main .question-part .questionList {
  width: 100%;
  display: flex;
  list-style: none;
  margin-bottom: 0;
  padding: 0;
  flex-flow: wrap;
}
.qa-lightbox .qa-main .question-part .questionList li {
  display: inline-block;
  width: 100%;
  margin: 5px;
}
.qa-lightbox .qa-main .question-part input[type=checkbox],
.qa-lightbox .qa-main .question-part input[type=radio] {
  width: 0px;
  height: 0px;
  padding: 0px;
  margin: 0px;
  opacity: 0;
  position: absolute;
  z-index: -1;
}
.qa-lightbox .qa-main .question-part input[type=checkbox] + label,
.qa-lightbox .qa-main .question-part input[type=radio] + label {
  display: block;
  line-height: 1.4em;
  margin-bottom: 7px;
  border-width: 1px;
  border-color: #F36C36;
  border-style: solid;
  border-radius: 8px;
  color: #fff;
  background-color: #F36C36;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
  font-size: 1rem;
}
@media screen and (min-width: 1025px) {
  .qa-lightbox .qa-main .question-part input[type=checkbox] + label,
  .qa-lightbox .qa-main .question-part input[type=radio] + label {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media screen and (min-width: 1280px) {
  .qa-lightbox .qa-main .question-part input[type=checkbox] + label,
  .qa-lightbox .qa-main .question-part input[type=radio] + label {
    line-height: 1em;
    padding-left: 20px;
    padding-right: 20px;
    border-color: transparent;
  }
}
.qa-lightbox .qa-main .question-part input[type=checkbox]:checked + label,
.qa-lightbox .qa-main .question-part input[type=radio]:checked + label {
  border-width: 1px;
  border-color: #3984CA;
  border-style: solid;
  border-color: #3984CA;
  color: #fff;
  background-color: #3984CA;
}
.qa-lightbox .qa-main .question-part input[type=checkbox]:checked + label span.number,
.qa-lightbox .qa-main .question-part input[type=radio]:checked + label span.number {
  color: #fff;
}
.qa-lightbox .qa-main .question-hint a {
  position: relative;
  font-size: 0;
  display: block;
  background-image: url(../../common/images/icon-hint.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  padding: 0px;
  width: 35px;
  height: 35px;
  bottom: 0;
  left: 0;
}
.qa-lightbox .qa-main .btn-box {
  z-index: 2;
  margin: 0;
  margin-top: -20px;
}
.qa-lightbox.after-answer .answer-title {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  font-size: 2.2rem;
  color: #fff;
  font-weight: 500;
  margin-bottom: 30px;
  margin-top: 30px;
  line-height: 1.2;
}
.qa-lightbox.after-answer .answer-img {
  position: relative;
  padding-bottom: 255px;
  width: 100%;
  max-width: 250px;
  margin: 10px auto;
}
.qa-lightbox.after-answer .answer-img img {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0;
  right: 0;
  float: none;
  max-width: 250px;
  max-height: 255px;
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover;
  object-fit: cover;
}
.qa-lightbox.after-answer .btn-box {
  z-index: 2;
  margin: 0;
}

/*loading*/
.loading-page {
  position: fixed;
  z-index: 20;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  animation: in 0.5s;
}
.loading-page p {
  color: #fff;
  font-size: 1.3rem;
}
.loading-page img {
  margin-top: -100px;
  margin-bottom: 15px;
  width: 70px;
  opacity: 0.7;
}

/*結束頁*/
.end-page {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url(../../common/images/taiwanmap_bd.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  padding-bottom: 85px;
}
@media screen and (max-height: 650px) {
  .end-page {
    padding-bottom: 70px;
  }
}
.end-page .end-main {
  width: 80%;
  height: calc(100vh - 250px);
  height: calc(100dvh - 250px);
  display: flex;
  justify-content: center;
  flex-flow: column;
}
.end-page .end-lightbox {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 100px 20px 20px 20px;
}
.end-page .end-lightbox .end-title {
  text-align: center;
}
.end-page .end-lightbox .end-title img {
  width: 70%;
}
.end-page .end-lightbox p {
  color: #fff;
}
.end-page .end-lightbox .end-second {
  font-size: 2rem;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 20px;
}
.end-page .end-lightbox .end-img {
  text-align: center;
  max-width: 250px;
  margin: auto;
}
.end-page .end-lightbox .end-img img {
  max-height: 200px;
}
.end-page .end-lightbox .yes-send a {
  background-color: #FFCA28;
  color: #A8540A;
}

.end-check-box {
  margin: auto;
  width: 80%;
  font-size: 0.8rem;
}
.end-check-box input {
  margin-right: 5px;
}

.main-box .white-box {
  padding: 20px;
  border-radius: 20px;
  background-color: #fff;
  width: 90%;
  left: 5%;
  margin: auto;
  position: absolute;
  overflow-x: hidden;
  padding-right: 15px;
  animation: in 0.5s;
}
.main-box .white-box .bar-control-box {
  max-height: 500px;
  height: 53vh;
  padding-right: 20px;
}
.main-box .white-box.login-box {
  display: flex;
  flex-flow: column;
  height: auto;
  max-height: inherit;
  animation: none;
}
.main-box .white-box.login-box .login-btn {
  padding: 10px;
  border-radius: 30px;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 20px;
}
.main-box .white-box.login-box .google-btn {
  background-color: #375AB9;
}
.main-box .white-box.login-box .fb-btn {
  background-color: #DC4E41;
}
.main-box .white-box.login-box .line-btn {
  background-color: #68B82B;
}
.main-box .white-box .otherlogin-box .three-login-btn {
  display: flex;
  width: 100%;
  text-align: center;
  align-items: top;
  flex-flow: column;
}
.main-box .white-box .otherlogin-box .three-login-btn .btn {
  position: relative;
  width: 250px;
  margin: 10px auto;
  border-radius: 10px;
  border: none;
}
.main-box .white-box .otherlogin-box .three-login-btn .btn.google-box {
  background-color: #DC4E41;
}
.main-box .white-box .otherlogin-box .three-login-btn .btn.fb-box {
  background-color: #375AB9;
}
.main-box .white-box .otherlogin-box .three-login-btn .btn.line-box {
  background-color: #68B82B;
}
.main-box .white-box .otherlogin-box .three-login-btn .icon-title {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  padding: 5px 0;
}
.main-box .white-box .otherlogin-box .three-login-btn .icon-login {
  position: absolute;
  height: 100% !important;
  width: 100% !important;
  opacity: 0 !important;
  left: 0;
  top: 0;
}
.main-box .white-box .otherlogin-box .three-login-btn .icon-facebook span {
  position: absolute;
  height: 100% !important;
  width: 100% !important;
  opacity: 0 !important;
  left: 0;
  top: 0;
}
.datepicker::after {
  content: "";
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  top: calc((100% - 30px) / 2);
  right: 20px;
  background-color: #ffffff;
  background-image: url(../../common/images/icon/qa.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  border-radius: 5px;
  box-sizing: border-box;
}

button.ui-datepicker-trigger {
  height: 50px;
  border-left: none;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

/* 內頁-分頁選項-上一頁下一頁回列表 */
.page-pagination {
  margin: 30px 0;
  text-align: center;
  position: relative;
  width: 100%;
  display: inline-block;
  height: 50px;
}
.page-pagination .btn {
  padding: 12px 24px 12px 24px;
}
@media screen and (max-width: 540px) {
  .page-pagination .btn {
    font-size: 1rem;
    padding: 10px 20px 10px 20px;
    width: 100%;
  }
}
.page-pagination .prev-page {
  padding: 12px 24px 12px 12px;
  left: 0;
  display: inline-block;
  vertical-align: middle;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .page-pagination .prev-page {
    position: relative;
    padding: 10px 20px 10px 10px;
  }
}
.page-pagination .prev-page::before {
  content: "";
  width: 30px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  background-image: url(../../images/icon/arrow-left_brown.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  margin-top: -5px;
}
@media screen and (max-width: 540px) {
  .page-pagination .prev-page::before {
    position: absolute;
    margin-top: 0;
    left: 0;
  }
}
.page-pagination .prev-page:hover::before {
  background-image: url(../../images/icon/arrow-left_white.svg);
}
.page-pagination .back {
  margin: auto 0;
  position: relative;
}
@media screen and (max-width: 540px) {
  .page-pagination .back {
    position: relative;
    display: block;
  }
}
.page-pagination .next-page {
  padding: 12px 12px 12px 24px;
  right: 0;
  display: inline-block;
  vertical-align: middle;
  position: absolute;
}
@media screen and (max-width: 540px) {
  .page-pagination .next-page {
    position: relative;
    padding: 10px 10px 10px 20px;
    display: block;
  }
}
.page-pagination .next-page::after {
  content: "";
  width: 30px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  background-image: url(../../images/icon/arrow-right_brown.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  margin-top: -5px;
}
@media screen and (max-width: 540px) {
  .page-pagination .next-page::after {
    position: absolute;
    margin-top: 0;
    right: 0;
  }
}
.page-pagination .next-page:hover::after {
  background-image: url(../../images/icon/arrow-right_white.svg);
}

/* 下方標註項目（最後更新日期/瀏覽人次） */
.lastupdated {
  margin-top: 20px;
  padding: 10px 0px;
  font-size: 1rem;
  line-height: 1.1em;
  text-align: right;
}
.lastupdated .d-inline {
  display: inline;
}
.lastupdated .d-inline > span {
  color: #DA3705;
}
@media screen and (max-width: 767px) {
  .lastupdated {
    text-align: left;
  }
  .lastupdated .d-inline {
    display: block;
    line-height: 1.6em;
  }
}

/* 相簿 */
.album-list li:nth-child(n+2), .video-list li:nth-child(n+2) {
  display: none;
}
.album-list .graphic-link, .video-list .graphic-link {
  text-decoration: none;
  display: block;
  margin-bottom: 0px;
}
.album-list .graphic-link .graphic-img, .video-list .graphic-link .graphic-img {
  width: 100%;
  height: 0px;
  padding-bottom: 67%;
  position: relative;
  overflow: hidden;
  background-color: #f3f3f3;
}
.album-list .graphic-link .graphic-img > img, .video-list .graphic-link .graphic-img > img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  float: none;
  width: auto !important;
  height: 100% !important;
  -o-object-fit: cover;
     object-fit: cover;
}
.album-list .graphic-link .graphic-title, .video-list .graphic-link .graphic-title {
  display: block;
  font-size: 1rem;
  text-align: center;
  color: #707070;
}
@media screen and (min-width: 1025px) {
  .album-list .graphic-link:hover .graphic-title, .album-list .graphic-link:focus .graphic-title, .video-list .graphic-link:hover .graphic-title, .video-list .graphic-link:focus .graphic-title {
    color: #d30000;
  }
}

/* 分頁選項 */
.pagination {
  margin: 20px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination .blk {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 5px;
}
@media screen and (max-width: 540px) {
  .pagination .blk {
    min-width: 100px;
  }
}
.pagination a {
  display: block;
  text-align: center;
  text-decoration: none;
}
.pagination a.btn {
  line-height: 1.3em;
  margin: 1px 3px;
}
.pagination a.btn.is-disable {
  cursor: no-drop;
}
.pagination a.first-page {
  background-image: url(../../images/icon/icon-leftto-black.svg);
}
.pagination a.prev-page {
  background-image: url(../../images/icon/icon-left-black.svg);
}
.pagination a.next-page {
  background-image: url(../../images/icon/icon-right-black.svg);
}
.pagination a.last-page {
  background-image: url(../../images/icon/icon-rightto-black.svg);
}
.pagination .page-blk > a, .pagination .prev-blk > a, .pagination .next-blk > a {
  min-width: 40px;
  width: auto;
  height: 40px;
  line-height: 40px;
  margin: 0px 5px;
  padding: 0px 2px;
  background-color: #F3EEE3;
}
.pagination .page-blk > a.current, .pagination .prev-blk > a.current, .pagination .next-blk > a.current {
  background-color: #854E39;
  color: #ffffff;
}
@media screen and (min-width: 1025px) {
  .pagination .page-blk > a:hover, .pagination .page-blk > a:focus, .pagination .prev-blk > a:hover, .pagination .prev-blk > a:focus, .pagination .next-blk > a:hover, .pagination .next-blk > a:focus {
    background-color: #854E39;
    color: #ffffff;
  }
}
.pagination .prev-blk a, .pagination .next-blk a {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40%;
  border: none;
  font-size: 0;
}
@media screen and (max-width: 767px) {
  .pagination .first-page,
  .pagination .last-page {
    display: none;
  }
}
@media screen and (max-width: 540px) {
  .pagination .page-blk a:nth-child(n+4) {
    visibility: hidden;
    width: 0;
    margin: 0;
    border: none;
    display: none;
  }
}

/*手機板選單展開*/
@media screen and (max-width: 540px) {
  .phone .search-part-box {
    background-color: #fff;
    position: fixed;
    top: 50px;
    height: 100%;
    left: 0;
    right: 0;
    padding: 20px 20px 0 20px;
    z-index: 10;
    height: calc(100% - 50px);
    overflow: scroll;
  }
}

.form-article {
  margin-bottom: 1rem;
}
@media screen and (max-width: 540px) {
  .form-article {
    margin-bottom: 0;
  }
}
.form-article.theme-gray {
  background-color: #F9F7F3;
  padding: 1.5rem 1rem;
  margin-bottom: 3rem;
}
@media screen and (min-width: 1024px) {
  .form-article.theme-gray {
    padding: 3rem;
  }
}
.form-article .is-center {
  text-align: center;
}
.form-article .fieldset {
  margin-bottom: 1rem;
}
.form-article .fieldset.is-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}
.form-article .fieldset.is-row .form-title {
  width: 100%;
}
.form-article .fieldset.is-row .form-input {
  flex: 1;
}
.form-article .fieldset.is-row .invalid-feedback {
  width: 100%;
}
.form-article .fieldset .control-input {
  width: 100%;
  position: relative;
}
.form-article .fieldset.file-image {
  margin-bottom: 0 !important;
}
.form-article .fieldset.file-image .form-title {
  display: block;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 0;
}
.form-article .fieldset.file-image .form-title label {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s;
  font-weight: 600;
}
.form-article .fieldset.file-image .form-title label:before {
  content: "";
  display: block;
  width: 151px;
  height: 138px;
  margin-bottom: 12px;
  background: url(../../images/icon/icon-add-photo.svg) no-repeat center/contain;
}
.form-article .fieldset.file-image .form-title label:hover {
  opacity: 0.8;
}
.form-article .fieldset.file-image .form-input {
  width: 0;
  height: 0;
  opacity: 0;
  margin-bottom: 0;
}
.form-article .fieldset.file-image .form-input input[type=file] {
  position: relative;
  top: -9999px;
}
.form-article .row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
  width: 100%;
}
.form-article .row.align-center {
  display: block;
  text-align: center;
}
.form-article .row.align-left {
  display: block;
  text-align: left;
}
.form-article .row.align-right {
  display: block;
  text-align: right;
}
@media screen and (max-width: 767px) {
  .form-article .row .btn {
    margin: 0.5em 0px;
  }
}
.form-article .row:last-child {
  margin-bottom: 0px;
}
.form-article .fieldset {
  width: 100%;
  margin-bottom: 0.3em;
}
.form-article .fieldset.forget-password {
  display: none;
  padding-top: 10px;
  border-top: 1px solid #AEAEAE;
}
.form-article .fieldset.col-100 {
  width: 100%;
}
.form-article .fieldset.col-66 {
  width: 66.66%;
}
@media screen and (min-width: 768px) {
  .form-article .fieldset.col-66 {
    padding: 10px 0 10px 7px;
  }
}
.form-article .fieldset.col-50 {
  width: 50%;
}
@media screen and (min-width: 768px) {
  .form-article .fieldset.col-50:nth-child(odd) {
    padding-right: 7px;
  }
  .form-article .fieldset.col-50:nth-child(even) {
    padding-left: 7px;
  }
}
.form-article .fieldset.col-33 {
  width: 33.33%;
}
@media screen and (min-width: 768px) {
  .form-article .fieldset.col-33 {
    padding-right: 7px;
  }
}
.form-article .fieldset.col-33:nth-child(4) {
  padding-right: 0;
}
.form-article .fieldset.col-25 {
  width: 25%;
}
@media screen and (min-width: 768px) {
  .form-article .fieldset.col-25 {
    padding-right: 7px;
  }
}
.form-article .fieldset.col-btn {
  display: flex;
  width: 45px;
  align-items: flex-end;
  padding-left: 5px;
}
@media screen and (max-width: 768px) {
  .form-article .fieldset.col-btn {
    width: 100%;
    padding: 0;
  }
}
.form-article .fieldset.col-btn .btn {
  font-size: 0;
  background-color: #B7AC83;
  background-image: url(../../images/icon/search_white.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  padding: 20px;
  width: 45px;
  height: 45px;
}
@media screen and (max-width: 768px) {
  .form-article .fieldset.col-btn .btn {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .form-article .fieldset.col-66 {
    width: 100%;
  }
  .form-article .fieldset.col-50 {
    width: 100%;
  }
  .form-article .fieldset.col-33 {
    width: 50%;
    padding-right: 7px;
  }
  .form-article .fieldset.col-33 + .col-33 {
    padding-right: 0px;
  }
  .form-article .fieldset.col-25 {
    width: 50%;
    padding-right: 7px;
  }
  .form-article .fieldset.col-25 + .col-25 {
    padding-left: 7px;
    padding-right: 0px;
  }
}
@media screen and (max-width: 540px) {
  .form-article .fieldset.col-33 {
    width: 100%;
    padding-right: 0px;
  }
  .form-article .fieldset.col-33 + .col-33 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .form-article .fieldset.col-25 {
    width: 100%;
    padding-right: 0px;
  }
  .form-article .fieldset.col-25 + .col-25 {
    padding-left: 0px;
    padding-right: 0px;
  }
}
.form-article .fieldset label,
.form-article .fieldset .fake-label-title {
  width: 100%;
  display: block;
  margin-bottom: 0.3em;
  font-weight: 600;
}
.form-article .fieldset label em,
.form-article .fieldset .fake-label-title em {
  color: #E12D3C;
  font-style: initial;
  display: inline-block;
  margin-right: 5px;
}
.form-article .fieldset label.col-self-20,
.form-article .fieldset .fake-label-title.col-self-20 {
  width: 18%;
  display: inline-block;
}
.form-article .fieldset input[type=text],
.form-article .fieldset input[type=file],
.form-article .fieldset input[type=password],
.form-article .fieldset input[type=number],
.form-article .fieldset .item-part-btn,
.form-article .fieldset select {
  width: 100%;
  min-height: 45px;
  line-height: 40px;
}
.form-article .fieldset input[type=text].col-self-100,
.form-article .fieldset input[type=file].col-self-100,
.form-article .fieldset input[type=password].col-self-100,
.form-article .fieldset input[type=number].col-self-100,
.form-article .fieldset .item-part-btn.col-self-100,
.form-article .fieldset select.col-self-100 {
  width: 100%;
}
.form-article .fieldset input[type=text].col-self-100.datepicker,
.form-article .fieldset input[type=file].col-self-100.datepicker,
.form-article .fieldset input[type=password].col-self-100.datepicker,
.form-article .fieldset input[type=number].col-self-100.datepicker,
.form-article .fieldset .item-part-btn.col-self-100.datepicker,
.form-article .fieldset select.col-self-100.datepicker {
  width: calc(100% - 50px);
}
.form-article .fieldset input[type=text].col-self-80,
.form-article .fieldset input[type=file].col-self-80,
.form-article .fieldset input[type=password].col-self-80,
.form-article .fieldset input[type=number].col-self-80,
.form-article .fieldset .item-part-btn.col-self-80,
.form-article .fieldset select.col-self-80 {
  width: 80%;
}
.form-article .fieldset input[type=text].col-self-75,
.form-article .fieldset input[type=file].col-self-75,
.form-article .fieldset input[type=password].col-self-75,
.form-article .fieldset input[type=number].col-self-75,
.form-article .fieldset .item-part-btn.col-self-75,
.form-article .fieldset select.col-self-75 {
  width: 75%;
}
.form-article .fieldset input[type=text].col-self-50,
.form-article .fieldset input[type=file].col-self-50,
.form-article .fieldset input[type=password].col-self-50,
.form-article .fieldset input[type=number].col-self-50,
.form-article .fieldset .item-part-btn.col-self-50,
.form-article .fieldset select.col-self-50 {
  width: calc(50% - 7px);
}
.form-article .fieldset input[type=text].col-self-30,
.form-article .fieldset input[type=file].col-self-30,
.form-article .fieldset input[type=password].col-self-30,
.form-article .fieldset input[type=number].col-self-30,
.form-article .fieldset .item-part-btn.col-self-30,
.form-article .fieldset select.col-self-30 {
  width: 150px;
}
.form-article .fieldset input[type=text].col-self-25,
.form-article .fieldset input[type=file].col-self-25,
.form-article .fieldset input[type=password].col-self-25,
.form-article .fieldset input[type=number].col-self-25,
.form-article .fieldset .item-part-btn.col-self-25,
.form-article .fieldset select.col-self-25 {
  width: 25%;
}
.form-article .fieldset input[type=text].col-self-small,
.form-article .fieldset input[type=file].col-self-small,
.form-article .fieldset input[type=password].col-self-small,
.form-article .fieldset input[type=number].col-self-small,
.form-article .fieldset .item-part-btn.col-self-small,
.form-article .fieldset select.col-self-small {
  width: 80px;
  margin-bottom: 0.5em;
}
.form-article .fieldset input[type=text].col-self-20,
.form-article .fieldset input[type=file].col-self-20,
.form-article .fieldset input[type=password].col-self-20,
.form-article .fieldset input[type=number].col-self-20,
.form-article .fieldset .item-part-btn.col-self-20,
.form-article .fieldset select.col-self-20 {
  width: 110px;
}
.form-article .fieldset input[type=text].col-self-small-half,
.form-article .fieldset input[type=file].col-self-small-half,
.form-article .fieldset input[type=password].col-self-small-half,
.form-article .fieldset input[type=number].col-self-small-half,
.form-article .fieldset .item-part-btn.col-self-small-half,
.form-article .fieldset select.col-self-small-half {
  width: calc(100% - 110px);
}
@media screen and (max-width: 767px) {
  .form-article .fieldset input[type=text].col-self-50,
  .form-article .fieldset input[type=file].col-self-50,
  .form-article .fieldset input[type=password].col-self-50,
  .form-article .fieldset input[type=number].col-self-50,
  .form-article .fieldset .item-part-btn.col-self-50,
  .form-article .fieldset select.col-self-50 {
    width: 100%;
  }
  .form-article .fieldset input[type=text].col-self-25,
  .form-article .fieldset input[type=file].col-self-25,
  .form-article .fieldset input[type=password].col-self-25,
  .form-article .fieldset input[type=number].col-self-25,
  .form-article .fieldset .item-part-btn.col-self-25,
  .form-article .fieldset select.col-self-25 {
    width: 100%;
  }
  .form-article .fieldset input[type=text].col-self-20,
  .form-article .fieldset input[type=file].col-self-20,
  .form-article .fieldset input[type=password].col-self-20,
  .form-article .fieldset input[type=number].col-self-20,
  .form-article .fieldset .item-part-btn.col-self-20,
  .form-article .fieldset select.col-self-20 {
    width: 80px;
  }
  .form-article .fieldset input[type=text].col-self-small,
  .form-article .fieldset input[type=file].col-self-small,
  .form-article .fieldset input[type=password].col-self-small,
  .form-article .fieldset input[type=number].col-self-small,
  .form-article .fieldset .item-part-btn.col-self-small,
  .form-article .fieldset select.col-self-small {
    width: 80px;
  }
  .form-article .fieldset input[type=text].col-self-small-half,
  .form-article .fieldset input[type=file].col-self-small-half,
  .form-article .fieldset input[type=password].col-self-small-half,
  .form-article .fieldset input[type=number].col-self-small-half,
  .form-article .fieldset .item-part-btn.col-self-small-half,
  .form-article .fieldset select.col-self-small-half {
    width: calc(100% - 90px);
  }
}
.form-article .fieldset input[type=file] {
  height: auto;
  line-height: 1em;
  cursor: pointer;
}
.form-article .fieldset textarea {
  width: 100%;
  height: 120px;
}
.form-article .fieldset small {
  font-size: 1rem;
  margin-left: 10px;
  display: inline-block;
}
.form-article .fieldset small.invalid-feedback {
  width: 100%;
  color: #E12D3C;
}
@media screen and (max-width: 540px) {
  .form-article .fieldset small {
    display: block;
    margin-left: 0px;
  }
}
.form-article .fieldset.is-invalid .invalid-feedback {
  display: block;
}
.form-article .fieldset.is-invalid input[type=text],
.form-article .fieldset.is-invalid input[type=file],
.form-article .fieldset.is-invalid input[type=password],
.form-article .fieldset.is-invalid input[type=number],
.form-article .fieldset.is-invalid select {
  border-color: #E12D3C;
  outline-color: #DF1111;
}
.form-article .fieldset .radio-normal {
  margin-right: 10px;
}
.form-article .fieldset.fieldset-inline label {
  display: inline;
}
.form-article .form-btn {
  margin-bottom: 1rem;
}
@media screen and (min-width: 1024px) {
  .form-article .form-btn {
    margin-bottom: 0px;
  }
}

.form-title {
  margin-bottom: 10px;
  text-align: left;
  font-size: 1.2rem;
  font-weight: 600;
}
.form-title em {
  color: #e45a15;
}
.form-title.form-article-title {
  font-weight: 600;
  color: #e45a15;
  margin-bottom: 2rem;
}
.form-title.form-article-title label {
  color: inherit;
}
.form-title.is-hide {
  display: none;
}
@media screen and (min-width: 1024px) {
  .form-title.d-inline {
    width: auto;
    display: inline-block;
  }
}
.form-title.has-icon::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 36px;
  height: 36px;
  margin-right: 11px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.form-title.icon-message::before {
  background-image: url(../../images/icon/icon-dialogbox-black.svg);
}

.form-prompt {
  display: block;
  line-height: 1.4em;
}
.form-prompt.is-notice {
  color: #e45a15;
}
@media screen and (min-width: 1024px) {
  .form-prompt {
    display: inline;
  }
  .form-prompt.is-notice {
    display: block;
  }
}

.form-input {
  display: block;
  margin-bottom: 1rem;
}
@media screen and (min-width: 1024px) {
  .form-input.d-inline {
    width: auto;
    display: inline-block;
  }
}
.form-input.is-invalid {
  margin-bottom: 0px;
}
.form-input.is-invalid ~ .invalid-feedback {
  display: block;
}
.form-input.is-invalid input[type=text],
.form-input.is-invalid input[type=password],
.form-input.is-invalid input[type=number],
.form-input.is-invalid input[type=email],
.form-input.is-invalid input[type=file],
.form-input.is-invalid input[type=date],
.form-input.is-invalid select,
.form-input.is-invalid textarea {
  border-color: #e45a15;
}
.form-input.is-invalid input[type=text]:focus,
.form-input.is-invalid input[type=password]:focus,
.form-input.is-invalid input[type=number]:focus,
.form-input.is-invalid input[type=email]:focus,
.form-input.is-invalid input[type=file]:focus,
.form-input.is-invalid input[type=date]:focus,
.form-input.is-invalid select:focus,
.form-input.is-invalid textarea:focus {
  box-shadow: 0 0 0 0.13rem rgba(225, 45, 60, 0.6);
}
.form-input.has-icon {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.form-input.has-icon:before {
  content: "";
  display: inline-block;
  width: 25px;
  min-width: 25px;
  max-width: 25px;
  height: 25px;
  min-height: 25px;
  max-height: 25px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.form-input.has-icon.icon-member:before {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  border-radius: 50%;
  margin-right: 36px;
  background-image: url(../../images/icon/icon-circle-green-member-white.svg);
}
.form-input.has-icon.location:before {
  content: "";
  display: inline-block;
  vertical-align: text-bottom;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  margin-left: 18px;
  background-image: url(../../images/icon/icon-loaction-gray.svg);
}
.form-input.choose-theme {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 0;
}
.form-input.choose-theme input[type=text] {
  height: 50px;
  border: 0;
  background-color: inherit;
  border-radius: 10px;
}
.form-input.choose-theme input[type=text]:focus {
  box-shadow: none;
}

.News-Search .mx-datepicker {
  width: 100%;
}

.mx-table-date td, .mx-table-date th {
  border: none;
  font-size: 1rem;
}

.mx-table-date td div {
  font-size: 0.9rem;
}

.form-list > li {
  display: inline-block;
  margin-bottom: 1rem;
}
.form-list > li:before {
  display: none !important;
}
.form-list.is-block > li {
  display: block;
}
.form-list .select-radio,
.form-list .select-check {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
}
.form-list .select-radio label,
.form-list .select-check label {
  cursor: pointer;
  white-space: nowrap;
}
.form-list .select-radio label em,
.form-list .select-check label em {
  color: #e45a15;
}
@media screen and (max-width: 540px) {
  .form-list .select-radio.is-mobile-input-block,
  .form-list .select-check.is-mobile-input-block {
    flex-wrap: wrap;
  }
  .form-list .select-radio.is-mobile-input-block input[type=text],
  .form-list .select-radio.is-mobile-input-block input[type=password],
  .form-list .select-radio.is-mobile-input-block input[type=number],
  .form-list .select-radio.is-mobile-input-block input[type=email],
  .form-list .select-radio.is-mobile-input-block input[type=file],
  .form-list .select-radio.is-mobile-input-block input[type=date],
  .form-list .select-radio.is-mobile-input-block select,
  .form-list .select-check.is-mobile-input-block input[type=text],
  .form-list .select-check.is-mobile-input-block input[type=password],
  .form-list .select-check.is-mobile-input-block input[type=number],
  .form-list .select-check.is-mobile-input-block input[type=email],
  .form-list .select-check.is-mobile-input-block input[type=file],
  .form-list .select-check.is-mobile-input-block input[type=date],
  .form-list .select-check.is-mobile-input-block select {
    display: block;
    margin-top: 10px;
    margin-left: 45px;
  }
}
.form-list.is-invalid .select-radio input[type=checkbox] + label:before,
.form-list.is-invalid .select-check input[type=checkbox] + label:before {
  border-color: #e45a15;
}
.form-list.is-invalid ~ .invalid-feedback {
  display: block;
}

.captcha-img {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 1rem;
  margin-left: 0.5rem;
}
.captcha-img > img {
  height: 45px !important;
  margin: 0px;
}
@media screen and (min-width: 1024px) {
  .captcha-img > img {
    height: 50px !important;
  }
}

.invalid-feedback {
  display: none;
  color: #f72e20;
  margin-bottom: 1rem;
}

.confirmation-item {
  width: 100%;
  padding: 0 0.5rem;
  margin-bottom: 1rem;
  color: #000000;
}
.confirmation-item.is-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
.confirmation-item.is-row .confirmation-title {
  display: inline-block;
}
.confirmation-item.is-row .confirmation-content {
  display: inline-block;
}
.confirmation-item .invalid-feedback {
  display: none;
  font-size: 1.25rem;
}
.confirmation-item.is-invalid .invalid-feedback {
  display: inline-block;
  margin-bottom: 0;
  font-size: inherit;
}
.confirmation-item > span {
  color: inherit;
}/*# sourceMappingURL=main.css.map */