@charset "UTF-8";
* {
  --brand-color1: #8CC53E;
  --brand-color2: #548D73;
  --brand-color3: #349812;
  --brand-color4: #EDF7E0;
  --brand-color5: #009029;
  --text-primary: #000000;
  --text-secondary: #7A7F84;
  --surface-default:#F1F1F1;
  --gray-1:#2E2E2E;
  --gray-2:#898989;
  --gray-3:#B3B3B3;
  --gray-4:#DADADA;
}

* {
  --heder-bg: url('../images/banners/banner-聯絡我們.jpg');
}
@media (max-width: 768px) {
  * {
    --heder-bg: url('../images/banners/phone-banner-聯絡我們.jpg');
  }
}

.contact-wrapper {
  width: 100%;
}
.contact-wrapper section {
  position: relative;
}
.contact-wrapper section p.desc {
  margin-bottom: clamp(24px, 1.875vw, 36px);
}
.contact-wrapper section .bottom-form {
  width: 100%;
  z-index: 2;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  background-color: white;
  padding: clamp(24px, 3.13vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 21.6px;
  margin-bottom: clamp(30px, 2.6vw, 50px);
}
.contact-wrapper section .bottom-form .red {
  color: #FF3F3D;
}
@media (max-width: 990px) {
  .contact-wrapper section .bottom-form {
    max-width: 640px;
    margin: 0 auto clamp(30px, 2.6vw, 50px);
  }
}
@media (max-width: 768px) {
  .contact-wrapper section .bottom-form {
    flex-direction: column;
    justify-content: flex-start;
  }
}
.contact-wrapper section .bottom-form p.note {
  font-size: clamp(16px, 0.94vw, 18px);
  font-weight: 400;
  line-height: 1;
  width: 100%;
  text-align: start;
  color: #5CAC26;
  margin-bottom: clamp(12px, 1.25vw, 24px);
}
.contact-wrapper section .bottom-form .input-box {
  width: 100%;
  display: flex;
  gap: clamp(12px, 1.88vw, 36px);
  margin-bottom: clamp(36px, 3.13vw, 60px);
}
@media (max-width: 990px) {
  .contact-wrapper section .bottom-form .input-box {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
}
.contact-wrapper section .bottom-form .input-box .flex-1 {
  flex: 1;
}
.contact-wrapper section .bottom-form .input-box .input-box-left,
.contact-wrapper section .bottom-form .input-box .input-box-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: clamp(12px, 0.94vw, 18px);
}
@media (max-width: 990px) {
  .contact-wrapper section .bottom-form .input-box .input-box-left,
  .contact-wrapper section .bottom-form .input-box .input-box-right {
    width: 100%;
  }
}
.contact-wrapper section .bottom-form .input-box .input-box-left .item,
.contact-wrapper section .bottom-form .input-box .input-box-right .item {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
}
.contact-wrapper section .bottom-form .input-box .input-box-left .item label,
.contact-wrapper section .bottom-form .input-box .input-box-right .item label {
  width: 100%;
  text-align: start;
  color: black;
  font-size: clamp(16px, 0.94vw, 18px);
  font-weight: 400;
}
.contact-wrapper section .bottom-form .input-box .input-box-left .item input,
.contact-wrapper section .bottom-form .input-box .input-box-left .item select,
.contact-wrapper section .bottom-form .input-box .input-box-left .item textarea,
.contact-wrapper section .bottom-form .input-box .input-box-right .item input,
.contact-wrapper section .bottom-form .input-box .input-box-right .item select,
.contact-wrapper section .bottom-form .input-box .input-box-right .item textarea {
  width: 100%;
  outline: none;
  border: 1px solid #7A7F84;
  border-radius: 2.7px;
  padding: 8px;
  font-size: 16px;
  --placeHoder-color: #DADADA;
}
.contact-wrapper section .bottom-form .input-box .input-box-left .item input:focus,
.contact-wrapper section .bottom-form .input-box .input-box-left .item select:focus,
.contact-wrapper section .bottom-form .input-box .input-box-left .item textarea:focus,
.contact-wrapper section .bottom-form .input-box .input-box-right .item input:focus,
.contact-wrapper section .bottom-form .input-box .input-box-right .item select:focus,
.contact-wrapper section .bottom-form .input-box .input-box-right .item textarea:focus {
  border: 1px solid var(--brand-color2);
}
.contact-wrapper section .bottom-form .input-box .input-box-left .item input::-moz-placeholder, .contact-wrapper section .bottom-form .input-box .input-box-left .item select::-moz-placeholder, .contact-wrapper section .bottom-form .input-box .input-box-left .item textarea::-moz-placeholder, .contact-wrapper section .bottom-form .input-box .input-box-right .item input::-moz-placeholder, .contact-wrapper section .bottom-form .input-box .input-box-right .item select::-moz-placeholder, .contact-wrapper section .bottom-form .input-box .input-box-right .item textarea::-moz-placeholder {
  color: var(--placeHoder-color);
}
.contact-wrapper section .bottom-form .input-box .input-box-left .item input::placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-left .item select::placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-left .item textarea::placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-right .item input::placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-right .item select::placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-right .item textarea::placeholder {
  color: var(--placeHoder-color);
}
.contact-wrapper section .bottom-form .input-box .input-box-left .item input::-webkit-input-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-left .item select::-webkit-input-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-left .item textarea::-webkit-input-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-right .item input::-webkit-input-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-right .item select::-webkit-input-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-right .item textarea::-webkit-input-placeholder {
  color: var(--placeHoder-color);
}
.contact-wrapper section .bottom-form .input-box .input-box-left .item input::-moz-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-left .item select::-moz-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-left .item textarea::-moz-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-right .item input::-moz-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-right .item select::-moz-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-right .item textarea::-moz-placeholder {
  color: var(--placeHoder-color);
}
.contact-wrapper section .bottom-form .input-box .input-box-left .item input:-ms-input-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-left .item select:-ms-input-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-left .item textarea:-ms-input-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-right .item input:-ms-input-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-right .item select:-ms-input-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-right .item textarea:-ms-input-placeholder {
  color: var(--placeHoder-color);
}
.contact-wrapper section .bottom-form .input-box .input-box-left .item input:-moz-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-left .item select:-moz-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-left .item textarea:-moz-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-right .item input:-moz-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-right .item select:-moz-placeholder,
.contact-wrapper section .bottom-form .input-box .input-box-right .item textarea:-moz-placeholder {
  color: var(--placeHoder-color);
}
@media (max-width: 1536px) {
  .contact-wrapper section .bottom-form .input-box .input-box-left .item textarea,
  .contact-wrapper section .bottom-form .input-box .input-box-right .item textarea {
    aspect-ratio: 5/1;
  }
}
@media (max-width: 480px) {
  .contact-wrapper section .bottom-form .input-box .input-box-left .item textarea,
  .contact-wrapper section .bottom-form .input-box .input-box-right .item textarea {
    aspect-ratio: 1/1;
  }
}
.contact-wrapper section .bottom-form .input-box .input-box-left .item select,
.contact-wrapper section .bottom-form .input-box .input-box-right .item select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  background-image: url("../images/icons/arrow_down_gray.png");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
}
.contact-wrapper section .bottom-form .input-box .input-box-left .item select:invalid,
.contact-wrapper section .bottom-form .input-box .input-box-right .item select:invalid {
  color: var(--placeHoder-color);
}
.contact-wrapper section .bottom-form .input-box .input-box-left .item select option,
.contact-wrapper section .bottom-form .input-box .input-box-right .item select option {
  color: black;
}
.contact-wrapper section .bottom-form .input-box .input-box-left .item .captcha-wrapper,
.contact-wrapper section .bottom-form .input-box .input-box-right .item .captcha-wrapper {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}
.contact-wrapper section .bottom-form .input-box .input-box-left .item .captcha-wrapper input,
.contact-wrapper section .bottom-form .input-box .input-box-right .item .captcha-wrapper input {
  flex: 1;
  min-width: 120px;
}
.contact-wrapper section .bottom-form .input-box .input-box-left .item .captcha-wrapper img,
.contact-wrapper section .bottom-form .input-box .input-box-right .item .captcha-wrapper img {
  width: 129px;
}
.contact-wrapper section .bottom-form .input-box .input-box-left .item .captcha-wrapper button,
.contact-wrapper section .bottom-form .input-box .input-box-right .item .captcha-wrapper button {
  width: 28px;
  aspect-ratio: 1/1;
  background-color: white;
  border-radius: 3.3px;
  border: 1px solid var(--gray-3);
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
}
.contact-wrapper section .bottom-form .input-box .input-box-left .item .captcha-wrapper button img,
.contact-wrapper section .bottom-form .input-box .input-box-right .item .captcha-wrapper button img {
  width: 14px;
}
.contact-wrapper section .bottom-form .btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 1.88vw, 36px);
}
.contact-wrapper section .deco-pic {
  position: absolute;
  width: 88.85vw;
  max-width: 1706px;
  right: 0;
  bottom: 0;
  transform: translate(var(--main-horizon-padding), 0);
  z-index: -1;
}
@media (max-width: 1200px) {
  .contact-wrapper section .deco-pic {
    display: none;
  }
}
.contact-wrapper section .deco-green-square {
  display: none;
  position: absolute;
  width: calc(100% + var(--main-horizon-padding) * 2 + 220px + var(--pageWrapper-gap));
  height: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #EDF7E0;
  z-index: -1;
  transform: translateX(calc(-220px - var(--main-horizon-padding) - var(--pageWrapper-gap)));
}
@media (max-width: 1200px) {
  .contact-wrapper section .deco-green-square {
    display: block;
  }
}
@media (max-width: 990px) {
  .contact-wrapper section .deco-green-square {
    width: calc(100% + var(--main-horizon-padding) * 2);
    transform: translateX(calc(0px - var(--main-horizon-padding)));
  }
}

.headquarters-wrapper {
  width: 100%;
}
.headquarters-wrapper .h3-design {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin-bottom: clamp(36px, 2.7vw, 52px);
  --en-text-color: var(--brand-color4);
  --tw-text-color: var(--brand-color2);
}
.headquarters-wrapper .h3-design.color-2 {
  --en-text-color: white;
}
@media (max-width: 768px) {
  .headquarters-wrapper .h3-design.md-hidden {
    display: none;
  }
}
.headquarters-wrapper .h3-design span.en {
  font-family: "Noto Sans", sans-serif;
  font-weight: 900;
  line-height: 1;
  font-size: clamp(60px, 4.7vw, 90px);
  color: var(--en-text-color);
  font-style: italic;
  text-transform: uppercase;
  word-break: break-all;
}
.headquarters-wrapper .h3-design .tw {
  color: var(--tw-text-color);
  font-weight: 700;
  --tw-size: clamp(24px, 1.67vw, 32px);
  line-height: 1;
  font-size: var(--tw-size);
  letter-spacing: calc(var(--tw-size) * 0.05);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -40%);
  width: 100%;
  text-align: center;
}
.headquarters-wrapper .h3-design.mobile {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: none;
}
.headquarters-wrapper .h3-design.mobile .tw {
  position: static;
  transform: none;
}
@media (max-width: 768px) {
  .headquarters-wrapper .h3-design.mobile {
    display: flex;
  }
}
.headquarters-wrapper .card-items-wrapper {
  align-self: stretch;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  --card-items-gap: clamp(22px, 3.02vw, 58px);
  gap: var(--card-items-gap);
  flex-wrap: wrap;
}
.headquarters-wrapper .card-items-wrapper .left,
.headquarters-wrapper .card-items-wrapper .right {
  width: calc(50% - var(--card-items-gap) / 2);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--card-items-gap);
}
.headquarters-wrapper .card-items-wrapper .left .card-item,
.headquarters-wrapper .card-items-wrapper .right .card-item {
  width: 100%;
}
@media (max-width: 768px) {
  .headquarters-wrapper .card-items-wrapper .left,
  .headquarters-wrapper .card-items-wrapper .right {
    display: none;
  }
}
.headquarters-wrapper .card-items-wrapper.left-up .left {
  transform: translateY(-4.68vw);
}
.headquarters-wrapper .card-items-wrapper.right-up .right {
  transform: translateY(-4.68vw);
}
.headquarters-wrapper .card-items-wrapper .mobile {
  display: none;
}
@media (max-width: 768px) {
  .headquarters-wrapper .card-items-wrapper .mobile {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: var(--card-items-gap);
  }
  .headquarters-wrapper .card-items-wrapper .mobile .card-item {
    width: 100%;
    max-width: clamp(460px, 30.2vw, 580px);
  }
}
.headquarters-wrapper .card-item {
  background-color: white;
  --card-item-padding: clamp(24px, 2.08vw, 40px);
  padding: var(--card-item-padding);
}
.headquarters-wrapper .card-item.top {
  width: 100%;
  max-width: clamp(360px, 30.2vw, 580px);
}
@media (max-width: 768px) {
  .headquarters-wrapper .card-item.top {
    max-width: clamp(460px, 30.2vw, 580px);
  }
}
.headquarters-wrapper .card-item h4 {
  margin-bottom: var(--card-item-padding);
  font-weight: 700;
  font-size: clamp(20px, 1.25vw, 24px);
  line-height: 30px;
  color: var(--brand-color2);
}
.headquarters-wrapper .card-item h4.orange {
  color: #FA990E;
}
.headquarters-wrapper .card-item .bottom {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
}
.headquarters-wrapper .card-item .bottom .border-left {
  display: inline-block;
  min-height: 0;
  min-width: 0;
  width: 6px;
  background-color: #8CC53E;
}
.headquarters-wrapper .card-item .bottom ul {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.headquarters-wrapper .card-item .bottom ul li {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0px 8px;
}
@media (max-width: 480px) {
  .headquarters-wrapper .card-item .bottom ul li {
    flex-wrap: wrap;
  }
}
.headquarters-wrapper .card-item .bottom ul li span,
.headquarters-wrapper .card-item .bottom ul li a {
  text-decoration: none;
  color: black;
  font-weight: 400;
  font-size: clamp(16px, 1.04vw, 20px);
  line-height: clamp(24px, 1.67vw, 32px);
}
.headquarters-wrapper .card-item .bottom ul li span.subtitle,
.headquarters-wrapper .card-item .bottom ul li a.subtitle {
  word-break: keep-all;
  white-space: nowrap;
}
.headquarters-wrapper .card-item .bottom ul li span.letter-pacing-3,
.headquarters-wrapper .card-item .bottom ul li a.letter-pacing-3 {
  letter-spacing: 0.3px;
}
.headquarters-wrapper .card-item .bottom ul li span.email,
.headquarters-wrapper .card-item .bottom ul li a.email {
  text-decoration: underline;
}
.headquarters-wrapper .card-item .bottom ul li span.email .no-underline,
.headquarters-wrapper .card-item .bottom ul li a.email .no-underline {
  text-decoration: none !important;
}
.headquarters-wrapper .card-item .bottom ul li .column-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.headquarters-wrapper .card-item .bottom ul li .column-box a {
  word-break: break-all;
  white-space: wrap;
}
.headquarters-wrapper .sec1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
}
.headquarters-wrapper .sec2,
.headquarters-wrapper .sec4 {
  background-color: var(--brand-color4);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}
@media (max-width: 768px) {
  .headquarters-wrapper .sec2,
  .headquarters-wrapper .sec4 {
    align-items: center;
  }
}
@media (max-width: 768px) {
  .headquarters-wrapper .sec4 {
    padding-bottom: 48px;
  }
}
.headquarters-wrapper .sec3 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
@media (max-width: 768px) {
  .headquarters-wrapper .sec3 {
    align-items: center;
  }
}/*# sourceMappingURL=contact.css.map */