@charset "UTF-8";
body {
  font-family: "Noto Sans TC", sans-serif, "微軟正黑體", "Microsoft JhengHei", "Verdana", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial";
  font-size: 1rem;
  line-height: 1.6;
}

form {
  -webkit-margin-after: 0em;
  margin-block-end: 0em;
}

.bg-white {
  background-color: #fff;
}

.bg-gray {
  background-color: #F7F9FD;
}

.color-primary {
  color: #FFD600;
}

.color-secondly {
  color: #0D0C22;
}

.color-dark {
  color: #596269;
}

.fs-7 {
  font-size: 14px;
}

.pt-6 {
  padding-top: 6rem;
}

.vh-25 {
  margin-top: 25vh;
}
@media (max-width: 768px) {
  .vh-25 {
    margin-top: 0;
  }
}

.layout-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.layout-main {
  flex: 1;
}

.layout-footer {
  flex: 0;
}

.btn-primary {
  --bs-btn-color: #0D0C22;
  --bs-btn-bg: #FFD600;
  --bs-btn-border-color: #FFD600;
  --bs-btn-hover-color: #0D0C22;
  --bs-btn-hover-bg: #FFEB66;
  --bs-btn-hover-border-color: #FFEB66;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #0D0C22;
  --bs-btn-active-bg: #FFEB66;
  --bs-btn-active-border-color: #FFEB66;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0D0C22;
  --bs-btn-disabled-bg: #FFD600;
  --bs-btn-disabled-border-color: #FFD600;
  border-radius: 4px;
}

.btn-outline-secondary {
  --bs-btn-color: #0D0C22;
  --bs-btn-bg: #FFF;
  --bs-btn-border-color: #3B3E40;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0D0C22;
  --bs-btn-hover-border-color: #0D0C22;
  --bs-btn-focus-shadow-rgb: 108,117,125;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0D0C22;
  --bs-btn-active-border-color: #0D0C22;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0D0C22;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0D0C22;
  --bs-gradient: none;
  border-radius: 4px;
}

.btn-text {
  color: #FF9000;
}
.btn-text:hover {
  color: #0D0C22;
}

.form-check-input:checked {
  background-color: #FFD600;
  border-color: #FFD600;
}

@media (max-width: 768px) {
  .mobile-nav-btn {
    border: 1px solid #AFBDCF;
  }
}

.brand-logo {
  max-width: 180px;
}

.footer-logo {
  max-width: 140px;
}

.hero {
  height: 62vh;
  background-image: url(../images/banner-arrow.svg), linear-gradient(102.16deg, #425460 15.79%, rgba(76, 90, 99, 0) 62.01%), linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/banner-hero.jpg);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: right 5% bottom, center, center, center;
  background-size: contain, cover, cover, cover;
  color: #fff;
  align-items: center;
  -webkit-animation: move 0.65s cubic-bezier(0.1, 0.7, 0.55, 1.05) normal;
          animation: move 0.65s cubic-bezier(0.1, 0.7, 0.55, 1.05) normal;
}
@media (max-width: 768px) {
  .hero {
    height: 40vh;
    margin-top: 3.5rem;
  }
}
@-webkit-keyframes move {
  0% {
    background-position: left -100% bottom, center, center, center;
    opacity: 0.7;
  }
  100% {
    background-position: right 5% bottom, center, center, center;
    opacity: 1;
  }
}
@keyframes move {
  0% {
    background-position: left -100% bottom, center, center, center;
    opacity: 0.7;
  }
  100% {
    background-position: right 5% bottom, center, center, center;
    opacity: 1;
  }
}

.banner-demander {
  height: 50vh;
  background-image: url(../images/banner-arrow.svg), linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/banner-demander.jpg);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left 5% bottom, center, center;
  background-size: contain, cover, cover;
  color: #fff;
  align-items: center;
}
@media (max-width: 768px) {
  .banner-demander {
    height: 240px;
    margin-top: 3.5rem;
  }
}

.banner-supplier {
  height: 50vh;
  background-image: url(../images/banner-arrow.svg), linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/banner-supplier.jpg);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left 5% bottom, center, center;
  background-size: contain, cover, cover;
  color: #fff;
  align-items: center;
}
@media (max-width: 768px) {
  .banner-supplier {
    height: 240px;
    margin-top: 3.5rem;
  }
}

.contact-bg {
  background-image: url(../images/bg-contact.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #fff;
  align-items: center;
}
@media (max-width: 768px) {
  .contact-bg {
    background-image: url(../images/banner-arrow.svg), linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/bg-contact.jpg);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: right 100px top, center, center;
    background-size: 125%, cover, cover;
  }
}

.banner-privacy {
  height: 320px;
  background: url(../images/banner-privacy.png) no-repeat center/cover;
  color: #fff;
  align-items: center;
}
@media (max-width: 768px) {
  .banner-privacy {
    height: 280px;
    padding-bottom: 2rem;
  }
}

.border-area {
  border-top: 2rem solid #FFD600;
  border-right: 2rem solid #FFD600;
  border-left: 2rem solid #FFD600;
}

.footer-area {
  padding: 0.8rem 0 0.5rem 0;
  background-color: #3B3E40;
  color: #FFF;
}
.footer-area p {
  text-align: right;
}
@media (max-width: 768px) {
  .footer-area p {
    text-align: left;
  }
}
.footer-area .footer-link {
  color: #fff;
  font-size: 13px;
  text-decoration: none;
}
.footer-area .footer-link:hover {
  color: #FFD600;
}

.cookies-area {
  position: fixed;
  bottom: 0px;
  right: 0px;
}

.marketer-pic {
  max-width: 350px;
}

.marketer-topic {
  background-color: #fff;
  z-index: 2;
  margin-left: -100px;
  padding: 2rem;
}

.border-mark {
  position: relative;
  z-index: 0;
}
.border-mark::after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 16px;
  z-index: -1;
  content: "";
  background: #FFD600;
}

.border-bar {
  display: inline-block;
  width: 10%;
  border: 4px solid #FFD600;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
  border-radius: 20px;
}
@media (max-width: 768px) {
  .border-bar {
    width: 25%;
  }
}

.contact-form {
  color: #0D0C22;
  background-color: #FFF;
  padding: 1rem;
  box-shadow: 0px 12px 48px -6px rgba(32, 57, 90, 0.38), 0px 3px 18px -2px rgba(28, 55, 90, 0.16);
  border-radius: 8px;
}

.pm-2 {
  padding-left: 3rem;
}
@media (max-width: 992px) {
  .pm-2 {
    padding-top: 2rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
    padding-left: 1rem !important;
  }
}

.note {
  font-size: 14px;
  background-color: #FFD600;
  color: #0D0C22;
  border-radius: 40px;
  padding: 0.5rem 1rem;
  line-height: 1.5;
}

.privacy-area {
  margin-top: -80px;
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 8px;
}
@media (max-width: 768px) {
  .privacy-area {
    width: 95%;
    margin: -100px auto 0;
  }
}

.step {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  text-align: center;
}
.step li {
  position: relative;
  width: 33%;
}
.step li::before {
  content: "";
  width: 64px;
  height: 64px;
  background: url(../images/arrow.svg) no-repeat;
  position: absolute;
  top: 20px;
  left: 80%;
}
.step li:last-child::before {
  content: "";
  display: none;
}

@media (max-width: 768px) {
  .step {
    display: flex;
    flex-direction: column;
  }
  .step li {
    width: 100%;
    padding-bottom: 4rem;
  }
  .step li::before {
    background: url(../images/arrow-down.svg) no-repeat;
    position: absolute;
    top: 78%;
    left: calc(50% - 24px);
  }
  .step li:last-child {
    padding-bottom: 0;
  }
}/*# sourceMappingURL=css.css.map */