@charset "UTF-8";
@import 'notosanstc.css';
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
.contact-wrap {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin: 5rem auto 10rem auto;
}
.contact-wrap .contact-block {
  position: relative;
  width: 24%;
  border: 1px solid #999999;
  padding: 1rem 1.25rem;
  padding-bottom: 8rem;
  border-radius: 15px;
  -ms-border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  -o-border-radius: 15px;
  box-sizing: border-box;
  text-align: center;
}
.contact-wrap .contact-block h2 {
  font-size: 1.375rem;
  margin: 1rem auto;
  text-align: left;
  font-weight: bold;
}
.contact-wrap .contact-block p {
  text-align: justify;
}
.contact-wrap .contact-block a {
  position: absolute;
  display: inline-block;
  color: #333333;
  border: 1px solid #333333;
  font-size: 1rem;
  padding: 0.5rem 3rem;
  border-radius: 5px;
  -ms-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  text-align: center;
  transition: color 0.5s, background 0.5s, border 0.5s;
  padding: 0.5rem 0;
  bottom: 2rem;
  margin: auto;
  width: 10rem;
  left: 0;
  right: 0;
}
@media only screen and (min-width: 1025px) {
  .contact-wrap .contact-block a:hover {
    cursor: pointer;
    background: #07B53B;
    color: #FFF;
    border-color: #07B53B;
  }
}

.contact-form-wrap,
.sheet-form-wrap,
.module-form-wrap {
  width: 50%;
  margin: 5rem auto;
}
.contact-form-wrap p.title,
.sheet-form-wrap p.title,
.module-form-wrap p.title {
  margin-bottom: 1.5rem;
}
.contact-form-wrap .notice,
.sheet-form-wrap .notice,
.module-form-wrap .notice {
  margin: 2rem auto;
  text-align: justify;
}
.contact-form-wrap .notice p.title,
.sheet-form-wrap .notice p.title,
.module-form-wrap .notice p.title {
  font-size: 1.375rem;
  text-align: left;
  margin-bottom: 1rem;
}
.contact-form-wrap .notice a,
.sheet-form-wrap .notice a,
.module-form-wrap .notice a {
  color: #377ff3;
  text-decoration: underline;
}
.contact-form-wrap form > div,
.sheet-form-wrap form > div,
.module-form-wrap form > div {
  margin: 1rem auto;
}
.contact-form-wrap input,
.contact-form-wrap textarea,
.sheet-form-wrap input,
.sheet-form-wrap textarea,
.module-form-wrap input,
.module-form-wrap textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.contact-form-wrap .select-wrap,
.sheet-form-wrap .select-wrap,
.module-form-wrap .select-wrap {
  width: 100%;
}
.contact-form-wrap .select-wrap select,
.sheet-form-wrap .select-wrap select,
.module-form-wrap .select-wrap select {
  position: relative;
  padding: 0.75rem 1.25rem;
  width: 100%;
  margin: 0;
  border-color: #999999;
}
.contact-form-wrap input.form-price,
.contact-form-wrap input.form-quantity,
.sheet-form-wrap input.form-price,
.sheet-form-wrap input.form-quantity,
.module-form-wrap input.form-price,
.module-form-wrap input.form-quantity {
  width: 43%;
}
.contact-form-wrap label,
.sheet-form-wrap label,
.module-form-wrap label {
  display: block;
  margin: 1rem 0;
}
.contact-form-wrap input[type=radio] + label,
.sheet-form-wrap input[type=radio] + label,
.module-form-wrap input[type=radio] + label {
  margin: 0.5rem 0 0 1rem;
}
.contact-form-wrap .multiSelect label,
.sheet-form-wrap .multiSelect label,
.module-form-wrap .multiSelect label {
  display: inline-block;
  margin: 0.5rem 0;
  margin-right: 1.5rem;
  padding-left: 1.75rem;
}
.contact-form-wrap .multiSelect input[type=checkbox] + label span,
.sheet-form-wrap .multiSelect input[type=checkbox] + label span,
.module-form-wrap .multiSelect input[type=checkbox] + label span {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 1px;
}
.contact-form-wrap .multiChoiceType-inner,
.sheet-form-wrap .multiChoiceType-inner,
.module-form-wrap .multiChoiceType-inner {
  padding: 1rem;
  border: 1px solid #999999;
  border-radius: 5px;
  -ms-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
}
.contact-form-wrap .promocode > div,
.sheet-form-wrap .promocode > div,
.module-form-wrap .promocode > div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.contact-form-wrap .promocode > div input,
.sheet-form-wrap .promocode > div input,
.module-form-wrap .promocode > div input {
  flex: 1 0 0;
}
.contact-form-wrap .promocode.codeSuccess input,
.sheet-form-wrap .promocode.codeSuccess input,
.module-form-wrap .promocode.codeSuccess input {
  border-color: #07B53B !important;
  background: url("../img/icon/icon-check-circle.svg") no-repeat right 1rem center;
  background-size: auto 50%;
}
.contact-form-wrap .promocode,
.contact-form-wrap div.required,
.sheet-form-wrap .promocode,
.sheet-form-wrap div.required,
.module-form-wrap .promocode,
.module-form-wrap div.required {
  position: relative;
}
.contact-form-wrap .promocode::before,
.contact-form-wrap div.required::before,
.sheet-form-wrap .promocode::before,
.sheet-form-wrap div.required::before,
.module-form-wrap .promocode::before,
.module-form-wrap div.required::before {
  display: none;
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0.75rem 1.25rem 0.75rem;
  border-color: transparent transparent #c86d57 transparent;
  bottom: 2.5rem;
  left: 1.25rem;
}
.contact-form-wrap .promocode::after,
.contact-form-wrap div.required::after,
.sheet-form-wrap .promocode::after,
.sheet-form-wrap div.required::after,
.module-form-wrap .promocode::after,
.module-form-wrap div.required::after {
  display: none;
  content: "本欄位為必填欄位";
  position: relative;
  background: #CCC;
  padding: 0.75rem 1.25rem;
  line-height: 150%;
  color: #FFF;
  background: #c86d57;
  margin-top: 1rem;
  box-sizing: border-box;
  border-radius: 5px;
  -ms-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
}
.contact-form-wrap .promocode.typeOne::after,
.contact-form-wrap div.required.typeOne::after,
.sheet-form-wrap .promocode.typeOne::after,
.sheet-form-wrap div.required.typeOne::after,
.module-form-wrap .promocode.typeOne::after,
.module-form-wrap div.required.typeOne::after {
  content: "面額須為5的倍數";
}
.contact-form-wrap .promocode.typeFormat::after,
.contact-form-wrap div.required.typeFormat::after,
.sheet-form-wrap .promocode.typeFormat::after,
.sheet-form-wrap div.required.typeFormat::after,
.module-form-wrap .promocode.typeFormat::after,
.module-form-wrap div.required.typeFormat::after {
  content: "格式錯誤";
}
.contact-form-wrap .promocode.checkBox::after,
.contact-form-wrap div.required.checkBox::after,
.sheet-form-wrap .promocode.checkBox::after,
.sheet-form-wrap div.required.checkBox::after,
.module-form-wrap .promocode.checkBox::after,
.module-form-wrap div.required.checkBox::after {
  content: "您尚未同意隱私權政策條款。";
}
.contact-form-wrap .promocode.checkBox.multiSelect::after,
.contact-form-wrap div.required.checkBox.multiSelect::after,
.sheet-form-wrap .promocode.checkBox.multiSelect::after,
.sheet-form-wrap div.required.checkBox.multiSelect::after,
.module-form-wrap .promocode.checkBox.multiSelect::after,
.module-form-wrap div.required.checkBox.multiSelect::after {
  content: "本欄位為必填欄位";
}
.contact-form-wrap .promocode.codeNo::after,
.contact-form-wrap div.required.codeNo::after,
.sheet-form-wrap .promocode.codeNo::after,
.sheet-form-wrap div.required.codeNo::after,
.module-form-wrap .promocode.codeNo::after,
.module-form-wrap div.required.codeNo::after {
  content: "此序號不存在";
}
.contact-form-wrap .promocode.codeUsed::after,
.contact-form-wrap div.required.codeUsed::after,
.sheet-form-wrap .promocode.codeUsed::after,
.sheet-form-wrap div.required.codeUsed::after,
.module-form-wrap .promocode.codeUsed::after,
.module-form-wrap div.required.codeUsed::after {
  content: "此序號已使用過";
}
.contact-form-wrap .promocode.alert input,
.contact-form-wrap .promocode.alert select,
.contact-form-wrap .promocode.alert textarea,
.contact-form-wrap .promocode.alert input[type=checkbox] + label span,
.contact-form-wrap div.required.alert input,
.contact-form-wrap div.required.alert select,
.contact-form-wrap div.required.alert textarea,
.contact-form-wrap div.required.alert input[type=checkbox] + label span,
.sheet-form-wrap .promocode.alert input,
.sheet-form-wrap .promocode.alert select,
.sheet-form-wrap .promocode.alert textarea,
.sheet-form-wrap .promocode.alert input[type=checkbox] + label span,
.sheet-form-wrap div.required.alert input,
.sheet-form-wrap div.required.alert select,
.sheet-form-wrap div.required.alert textarea,
.sheet-form-wrap div.required.alert input[type=checkbox] + label span,
.module-form-wrap .promocode.alert input,
.module-form-wrap .promocode.alert select,
.module-form-wrap .promocode.alert textarea,
.module-form-wrap .promocode.alert input[type=checkbox] + label span,
.module-form-wrap div.required.alert input,
.module-form-wrap div.required.alert select,
.module-form-wrap div.required.alert textarea,
.module-form-wrap div.required.alert input[type=checkbox] + label span {
  border-color: #c86d57;
}
.contact-form-wrap .promocode.alert::before, .contact-form-wrap .promocode.alert::after,
.contact-form-wrap div.required.alert::before,
.contact-form-wrap div.required.alert::after,
.sheet-form-wrap .promocode.alert::before,
.sheet-form-wrap .promocode.alert::after,
.sheet-form-wrap div.required.alert::before,
.sheet-form-wrap div.required.alert::after,
.module-form-wrap .promocode.alert::before,
.module-form-wrap .promocode.alert::after,
.module-form-wrap div.required.alert::before,
.module-form-wrap div.required.alert::after {
  display: block;
}
.contact-form-wrap .promocode.multiChoiceType.alert .multiChoiceType-inner,
.contact-form-wrap div.required.multiChoiceType.alert .multiChoiceType-inner,
.sheet-form-wrap .promocode.multiChoiceType.alert .multiChoiceType-inner,
.sheet-form-wrap div.required.multiChoiceType.alert .multiChoiceType-inner,
.module-form-wrap .promocode.multiChoiceType.alert .multiChoiceType-inner,
.module-form-wrap div.required.multiChoiceType.alert .multiChoiceType-inner {
  border: 1px solid #c86d57;
}
.contact-form-wrap .promocode.multiChoiceType.alert input[type=checkbox] + label span,
.contact-form-wrap div.required.multiChoiceType.alert input[type=checkbox] + label span,
.sheet-form-wrap .promocode.multiChoiceType.alert input[type=checkbox] + label span,
.sheet-form-wrap div.required.multiChoiceType.alert input[type=checkbox] + label span,
.module-form-wrap .promocode.multiChoiceType.alert input[type=checkbox] + label span,
.module-form-wrap div.required.multiChoiceType.alert input[type=checkbox] + label span {
  border-color: #333333;
}
.contact-form-wrap .contact-submit-block,
.sheet-form-wrap .contact-submit-block,
.module-form-wrap .contact-submit-block {
  text-align: center;
  margin: 3rem auto;
}
.contact-form-wrap .contact-submit-block .contact-submit,
.contact-form-wrap .contact-submit-block .contact-back,
.sheet-form-wrap .contact-submit-block .contact-submit,
.sheet-form-wrap .contact-submit-block .contact-back,
.module-form-wrap .contact-submit-block .contact-submit,
.module-form-wrap .contact-submit-block .contact-back {
  display: inline-block;
  width: auto;
  color: #333333;
  border: 1px solid #333333;
  font-size: 1rem;
  padding: 0.5rem 3rem;
  border-radius: 5px;
  -ms-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  text-align: center;
  transition: color 0.5s, background 0.5s, border 0.5s;
  margin: 0 0.5rem;
}
@media only screen and (min-width: 1025px) {
  .contact-form-wrap .contact-submit-block .contact-submit:hover,
  .contact-form-wrap .contact-submit-block .contact-back:hover,
  .sheet-form-wrap .contact-submit-block .contact-submit:hover,
  .sheet-form-wrap .contact-submit-block .contact-back:hover,
  .module-form-wrap .contact-submit-block .contact-submit:hover,
  .module-form-wrap .contact-submit-block .contact-back:hover {
    cursor: pointer;
    background: #07B53B;
    color: #FFF;
    border-color: #07B53B;
  }
}
.contact-form-wrap .contact-submit-block .contact-back,
.sheet-form-wrap .contact-submit-block .contact-back,
.module-form-wrap .contact-submit-block .contact-back {
  color: #838383;
  border: 1px solid #838383;
  font-size: 1rem;
  padding: 0.5rem 3rem;
  border-radius: 5px;
  -ms-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  text-align: center;
  transition: color 0.5s, background 0.5s, border 0.5s;
}
@media only screen and (min-width: 1025px) {
  .contact-form-wrap .contact-submit-block .contact-back:hover,
  .sheet-form-wrap .contact-submit-block .contact-back:hover,
  .module-form-wrap .contact-submit-block .contact-back:hover {
    cursor: pointer;
    background: #07B53B;
    color: #FFF;
    border-color: #07B53B;
  }
}
.contact-form-wrap .contact-submit-block .contact-submit,
.sheet-form-wrap .contact-submit-block .contact-submit,
.module-form-wrap .contact-submit-block .contact-submit {
  color: #07B53B;
  border-color: #07B53B;
}
.contact-form-wrap .contact-submit-block p,
.sheet-form-wrap .contact-submit-block p,
.module-form-wrap .contact-submit-block p {
  margin-bottom: 1rem;
}

.inquiry-des {
  margin: 5rem auto;
  text-align: center;
}

.inquiry-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 5rem auto;
}
.inquiry-wrap .inquiry-block {
  position: relative;
  width: 47%;
  margin: 1.5%;
  padding: 1.5rem 3rem 5rem 3rem;
  border: 1px solid #999999;
  border-radius: 15px;
  -ms-border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  -o-border-radius: 15px;
  box-sizing: border-box;
  text-align: center;
}
.inquiry-wrap .inquiry-block h2 {
  font-size: 2rem;
  color: #07B53B;
  text-align: left;
}
.inquiry-wrap .inquiry-block p {
  margin: 1.5rem 0;
  text-align: justify;
}
.inquiry-wrap .inquiry-block a {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: #333333;
  border: 1px solid #333333;
  font-size: 1rem;
  padding: 0.5rem 3rem;
  border-radius: 5px;
  -ms-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  text-align: center;
  transition: color 0.5s, background 0.5s, border 0.5s;
  display: inline-block;
}
@media only screen and (min-width: 1025px) {
  .inquiry-wrap .inquiry-block a:hover {
    cursor: pointer;
    background: #07B53B;
    color: #FFF;
    border-color: #07B53B;
  }
}

@media only screen and (max-width: 1024px) {
  .contact-wrap {
    display: block;
  }
  .contact-wrap .contact-block {
    width: 100%;
    margin: 3rem auto;
    padding: 3rem 5rem;
  }
  .contact-wrap .contact-block img {
    width: 50%;
    margin: auto;
  }
  .contact-wrap .contact-block a {
    position: static;
    display: inline-block;
    margin-top: 3rem;
    color: #333333;
    border: 1px solid #333333;
    font-size: 1rem;
    padding: 0.5rem 3rem;
    border-radius: 5px;
    -ms-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    text-align: center;
    transition: color 0.5s, background 0.5s, border 0.5s;
  }
}
@media only screen and (max-width: 1024px) and (min-width: 1025px) {
  .contact-wrap .contact-block a:hover {
    cursor: pointer;
    background: #07B53B;
    color: #FFF;
    border-color: #07B53B;
  }
}
@media only screen and (max-width: 1024px) {
  .contact-form-wrap,
  .sheet-form-wrap,
  .module-form-wrap {
    margin: 3rem auto;
    width: 100%;
  }
  .contact-form-wrap .select-wrap select,
  .sheet-form-wrap .select-wrap select,
  .module-form-wrap .select-wrap select {
    border-radius: 5px;
    -ms-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
  }
  .contact-form-wrap .promocode > div,
  .sheet-form-wrap .promocode > div,
  .module-form-wrap .promocode > div {
    display: block;
  }
  .contact-form-wrap .promocode > div p,
  .sheet-form-wrap .promocode > div p,
  .module-form-wrap .promocode > div p {
    margin-bottom: 0.5rem;
  }
  .inquiry-des {
    margin: 3rem auto;
  }
  .inquiry-wrap {
    display: block;
    margin: 3rem auto 5rem auto;
  }
  .inquiry-wrap .inquiry-block {
    width: 100%;
    margin: 1.5rem 0;
    padding: 1.5rem;
  }
  .inquiry-wrap .inquiry-block h2 {
    font-size: 2rem;
    color: #07B53B;
  }
  .inquiry-wrap .inquiry-block a {
    position: relative;
    bottom: auto;
    left: 0;
    transform: none;
  }
}
@media only screen and (max-width: 480px) {
  .contact-wrap {
    margin: 2.5rem auto 5rem auto;
  }
  .contact-wrap .contact-block {
    margin: 1.5rem auto;
    padding: 2rem;
    padding-top: 1rem;
  }
  .contact-wrap .contact-block img {
    width: 100%;
    margin-top: 3rem;
  }
  .contact-submit-block .contact-submit,
  .contact-submit-block .contact-back {
    margin: 0 0.35rem;
  }
  .inquiry-wrap .inquiry-block h2 {
    font-size: 1.75rem;
  }
}/*# sourceMappingURL=contact.css.map */