@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Noto+Serif+TC:wght@600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Chango&display=swap");
@font-face {
  font-family: "FakePearl-Regular";
  src: url(https://cdn.jsdelivr.net/gh/max32002/FakePearl@1.1/webfont/FakePearl-Regular.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/max32002/FakePearl@1.1/webfont/FakePearl-Regular.woff) format("woff");
}
@font-face {
  font-family: "YuPearl-Regular";
  src: url(https://cdn.jsdelivr.net/gh/max32002/YuPearl@1.011/webfont/YuPearl-Regular.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/max32002/YuPearl@1.011/webfont/YuPearl-Regular.woff) format("woff");
}
/* reset */
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-family: "Noto Sans TC", "PingFang SC", "微軟正黑體", sans-serif;
  font-size: 16px;
  font-weight: 400;
  vertical-align: baseline;
}

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

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

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

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

/*自訂*/
a {
  text-decoration: none;
  outline: none;
}

body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  color: #000000;
  letter-spacing: 1px;
}

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

input {
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: none;
  outline: none;
  border-radius: none;
}

/*HTML5 tag*/
section, article, aside, footer, header, nav, main {
  display: block;
}

/*Input reset*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s; /*透明*/
}

input[type=submit],
input[type=reset],
input[type=button],
input[type=text],
input[type=password],
input[type=file],
input[type=checkbox],
textarea,
select {
  -webkit-appearance: none; /* Chrome, Safari */
  -moz-appearance: none; /* Firefox */
  appearance: none;
  outline: none;
  color: #000;
}

button {
  outline: none;
  border: none;
  background-color: none;
}

input[type=file] {
  cursor: pointer;
}

input[type=checkbox] {
  cursor: pointer;
}

html {
  font-size: 16px;
}

a {
  display: inline-block;
  width: 100%;
  height: 100%;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

.l-wrapper {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
}
.l-wrapper--narrow {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

.l-footer {
  background-color: #0e0d0d;
}

.bg-repeat--polly {
  background-image: url("../img/bg_repeat.jpg");
  background-size: 100%;
  background-position: 0 0;
  background-repeat: repeat-y;
}

.l-button {
  border-radius: 5px;
  background-color: #597cdf;
  padding: 2.2% 2.5%;
  text-align: center;
  color: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.l-button:hover {
  background-color: #edf3ff;
  color: #597cdf;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.event-banner {
  margin: 0 auto -2%;
}

.fixed-decoration {
  position: relative;
  z-index: 1;
}

.disabled {
  pointer-events: none;
  background-color: #f0f0f0 !important;
  color: #999;
}

.displayNone {
  display: none;
}

.login {
  width: 100%;
  -webkit-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid #c5e2ff;
  background-color: #fff;
}
.login__block {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 10px 15px;
}
.login__button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
  cursor: pointer;
  color: #f38989;
  border: 1px solid #f38989;
  max-width: 100px;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 5px;
}
.login__button:hover {
  background-color: #f38989;
}
.login__button:hover .login__text {
  color: #fff;
}
.login__button.is-hidden {
  display: none;
}
.login__information {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: none;
}
.login__information.is-visible {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-animation: fadeIn 0.3s ease;
          animation: fadeIn 0.3s ease;
}
@media screen and (max-width: 540px) {
  .login__information {
    width: 100%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.login__icon {
  width: 40px;
  margin: 5px 3.5% 0 0;
}
.login__text {
  font-size: 15px;
}
@media screen and (max-width: 540px) {
  .login__text {
    margin: 0 0 2% 0;
  }
}
.login__text--logOut {
  width: 100px;
  text-align: center;
  margin: 0 0 0 5%;
  border: 1px solid #f38989;
  padding: 3%;
  border-radius: 5px;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
  color: #f38989;
  cursor: pointer;
}
.login__text--logOut:hover {
  background-color: #f38989;
  color: #fff;
}
@media screen and (max-width: 540px) {
  .login__text--logOut {
    margin: 0 0 0 0;
    padding: 2%;
  }
}

.event-title {
  font-size: 18px;
  color: #597cdf;
  margin: 0 0 10px 0;
}

.event-signup {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 2% 0;
}
.event-signup__wrap {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 7.3%;
  background-color: #fff;
  border: 1px solid #c5e2ff;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(197, 226, 255, 0.35);
          box-shadow: 0px 0px 10px 0px rgba(197, 226, 255, 0.35);
}
.event-signup__title {
  font-size: 33px;
  text-align: center;
  color: #597cdf;
  margin: 2% 0;
}
.event-signup__field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 20px 0;
}
.event-signup__field-Images img:nth-child(even) {
  margin: 5px 0;
}
.event-signup__label {
  font-size: 18px;
  color: #597cdf;
  margin: 0 0 10px 0;
}
.event-signup__label span {
  color: #fe5a59;
}
.event-signup__input {
  width: 100%;
  padding: 2.2% 2.9%;
  font-size: 16px;
  background-color: #edf3ff;
  border-radius: 5px;
}
.event-signup__input--phone {
  width: 74%;
}
.event-signup__input-calendar {
  position: absolute;
  top: 50%;
  right: 15px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.event-signup__input-decorate {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  top: 0;
  left: 0;
}
.event-signup__input-wrap {
  position: relative;
}
.event-signup__select-wrap {
  width: 25%;
  position: relative;
}
.event-signup__select-wrap--address {
  width: calc(33.3333333333% - 5px);
}
.event-signup__select-wrap--widest {
  width: 100%;
}
.event-signup__select {
  width: 100%;
  background-color: #edf3ff;
  padding: 9.7%;
  font-size: 16px;
  border-radius: 5px;
  border: none;
}
.event-signup__select-arrow {
  position: absolute;
  top: 45%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 15px;
  pointer-events: none;
}
.event-signup__select-arrow .fas {
  vertical-align: text-top;
}
.event-signup__select--inherit {
  padding: 2.2% 2.5%;
}
.event-signup__phone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.event-signup__warning {
  margin: 10px 0 2px;
  text-align: right;
  font-size: 13px;
  color: #fe5a59;
  line-height: 16px;
}
.event-signup__address {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 0 10px 0;
}
.event-signup__textarea {
  min-width: 100%;
  max-width: 100%;
  min-height: 150px;
  width: 680px;
  padding: 2.2% 2.9%;
  font-size: 16px;
  background-color: #edf3ff !important;
  border-radius: 5px;
  border: none;
}
.event-signup__group {
  position: relative;
}
.event-signup__group-checkbox {
  display: block;
  padding: 2.2% 2.5%;
  border-radius: 5px;
  background-color: #edf3ff;
  cursor: pointer;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  margin: 5px 0;
}
.event-signup__group-checkbox > label {
  font-size: 1rem;
  color: #000;
}
.event-signup__group-checkbox.active {
  background-color: #597cdf;
}
.event-signup__group-checkbox.active label {
  color: #fff;
}
.event-signup__group-checkbox:hover {
  background-color: #597cdf;
}
.event-signup__group-checkbox:hover label {
  color: #fff;
}
@media screen and (max-width: 540px) {
  .event-signup {
    width: 97%;
    padding: 2% 0 4%;
  }
  .event-signup__input {
    padding: 4.2% 2.9%;
  }
  .event-signup__input-choose {
    padding: 5.7% 2.9%;
  }
  .event-signup__select {
    padding: 17.7%;
  }
  .event-signup__select--inherit {
    padding: 4.2% 2.9%;
  }
  .event-signup__warning {
    text-align: left;
  }
  .event-signup__group-checkbox {
    padding: 4.2% 2.9%;
  }
}
@media screen and (max-width: 480px) {
  .event-signup__phone {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .event-signup__phone .event-signup__select-wrap {
    width: 100%;
  }
  .event-signup__phone .event-signup__select {
    padding: 4.2% 2.9%;
  }
  .event-signup__phone .event-signup__input {
    width: 100%;
    margin: 0.5rem 0;
  }
  .event-signup__address {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .event-signup__address .event-signup__select {
    padding: 4.2% 2.9%;
    width: 100%;
    margin: 0.2rem 0;
  }
  .event-signup__address .event-signup__select-wrap--address {
    width: 100%;
  }
}

.event-rules__wrap {
  margin: 10px 0;
}
.event-rules-item {
  font-size: 13px;
  line-height: 1.6;
}

.event-rules-item + .event-rules-item {
  margin-top: 0.2em;
}

.btn-submit {
  display: block;
  width: 100%;
  font-size: 16px;
}
@media screen and (max-width: 540px) {
  .btn-submit {
    padding: 4.7% 2.9%;
  }
}

.image-wrapper {
  border: 1px solid #597cdf;
  margin: 15px 0;
}

.delete-btn {
  width: 100%;
  padding: 2.2% 2.5%;
  color: #fff;
  background-color: #597cdf;
  cursor: pointer;
}

.event-signup__link {
  color: #597cdf;
  display: inline-block;
  width: auto;
  height: auto;
  font-size: inherit;
}

.event-info-item {
  font-size: 16px;
  line-height: 1.6;
}

.event-info-item + .event-info-item {
  margin-top: 0.2em;
}