@font-face {
  font-family: "Roboto";
  src: url('/css/Roboto-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans TC";
  src: url('/css/NotoSansTC-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root * {
  font-family: Roboto, "Noto Sans TC", Arial, sans-serif;
  letter-spacing: .01rem;
}

hr {
  opacity: 1;
}

.home-section {
  position: absolute;
  bottom: 0;
  margin-bottom: 80px;
}

.info-box {
  padding-top: 8rem;
  padding-bottom: 3rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.title-ch {
  font-size: 8vmin;
  line-height: 1.4;
  transform: translateY(-80%);
}

.main-title {
  font-size: 8vmin;
  line-height: 1.4;
}

.sub-title {
  font-size: 3vmin;
  line-height: 1.4;
}

.title-en {
  font-size: 7vmin;
  line-height: 1.4;
  transform: translateY(-60%);
}

.main-title-en {
  font-size: 7vmin;
  line-height: 1.4;
}

.btn-home {
  position: absolute;
  bottom: 0;
  margin-bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  border: 3px solid #FFF;
  padding: .8rem 2rem;
  border-radius: .358rem;
  font-weight: 500;
  line-height: 1.25;
  z-index: 1040;
}

.btn-section {
  position: relative;
  border: 3px solid #FFF;
  padding: .8rem 2rem;
  border-radius: .358rem;
  font-weight: 500;
  line-height: 1.25;
  margin-top: 50px;
  z-index: 1040;
}

.nav-link h5, h5.detail {
  font-size: 1.07rem;
}

.title-1 {
  position: absolute;
  font-size: 32px;
  top: 224px;
  left: 167px;
  letter-spacing: 1.6px;
}

.title-2 {
  position: absolute;
  font-size: 50px;
  top: 331px;
  left: 167px;
  letter-spacing: 2.5px;
  max-width: 530px;
}

.title-2-3 {
  max-width: 700px;
}

.title-3 {
  position: absolute;
  font-size: 32px;
  top: 400px;
  left: 167px;
  letter-spacing: 2.5px;
}

.title-4 {
  position: absolute;
  font-size: 17px;
  top: 627px;
  left: 162px;
}

.title-1-en {
  position: absolute;
  font-size: 32px;
  top: 217px;
  left: 162px;
  line-height: 1.4;
}

.title-2-en {
  position: absolute;
  font-size: 50px;
  top: 326px;
  left: 160px;
  line-height: 1.4;
  max-width: 540px;
}

.title-2-3-en {
  max-width: 600px;
}

.title-3-en {
  position: absolute;
  font-size: 25px;
  top: 469px;
  left: 160px;
  max-width: 600px;
  line-height: 1.4;
}

.title-4-en {
  position: absolute;
  font-size: 17px;
  top: 627px;
  left: 162px;
  line-height: 1.4;
}

.title-4-2-en {
  max-width: 600px;
}

@media only screen and (max-width: 1200px) {
  .info-box {
    padding-left: 0;
    padding-right: 0;
  }
  .title-1 {
    font-size: 28px;
    top: 217px;
    left: 97px;
    letter-spacing: 1.4px;
  }
  .title-2 {
    font-size: 45px;
    top: 325px;
    left: 97px;
    letter-spacing: 2.25px;
    max-width: 515px;
  }
  .title-2-3 {
    max-width: 700px;
  }
  .title-3 {
    font-size: 25px;
    top: 400px;
    left: 97px;
    letter-spacing: 1.25px;
  }
  .title-4 {
    top: 516px;
    left: 110px;
  }
  .title-1-en {
    font-size: 28px;
    top: 216px;
    left: 99px;
    letter-spacing: 0.56px;
  }
  .title-2-en {
    font-size: 40px;
    top: 318px;
    left: 97px;
  }
  .title-2-3-en {
    max-width: 650px;
  }
  .title-3-en {
    font-size: 22px;
    top: 431px;
    left: 97px;
  }
  .title-4-en {
    top: 567px;
    left: 99px;
  }
}

@media only screen and (max-width: 680px) {
  .title-1 {
    font-size: 22px;
    top: 150px;
    left: 10%;
    letter-spacing: 1.1px;
  }
  .title-2 {
    font-size: 25px;
    top: 75vh;
    left: 10%;
    right: 10%;
    letter-spacing: 1.25px;
    max-width: 400px;
  }
  .title-2-2 {
    top: 65vh;
  }
  .title-2-3 {
    max-width: 400px;
  }
  .title-3 {
    font-size: 17px;
    top: 73vh;
    left: 10%;
    right: 10%;
    max-width: 500px;
  }
  .title-4 {
    top: 90vh;
    left: 10%;
    right: 10%;
  }
  .title-4-2 {
    top: 83vh;
  }
  .title-1-en {
    font-size: 22px;
    top: 136px;
    left: 10%;
  }
  .title-2-en {
    font-size: 28px;
    top: 55vh;
    left: 10%;
    right: 10%;
    letter-spacing: 0.56px;
    max-width: 400px;
  }
  .title-2-2-en {
    top: 40vh;
  }
  .title-2-3-en {
    top: 75vh;
    max-width: 500px;
  }
  .title-3-en {
    font-size: 20px;
    top: 58vh;
    left: 10%;
    right: 10%;
    letter-spacing: 0.56px;
    max-width: 500px;
  }
  .title-4-en {
    top: 87vh;
    left: 10%;
    right: 10%;
  }
  .title-4-2-en {
    top: 73vh;
    font-size: 15px;
  }
  .title-4-3-en {
    top: 90vh;
  }
  .bg-cus1 {
    background-position: 80% 56px !important;
  }
}

@media (min-width: 768px) {
  .fs-md-5 {
    font-size: 1.25rem !important;
  }
}

.home-footer {
  background-color: #FFF;
  padding: 50px 25px;
}

.text-cus-green {
  color: #93c002;
}

.cus-h5 {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.7;
}

.tbl-h5 {
  font-size: 1.125rem;
  word-wrap: break-word;
  font-weight: 400;
  line-height: 1.7;
}

.btn-contact-cus {
  background-color: #93c002;
  border: 1px solid #93c002;
  color: #FFF;
  padding: 0.5rem 2.5rem
}

.btn-contact-cus:hover {
  background-color: #93c002;
  border: 1px solid #93c002;
  color: #FFF;
  box-shadow: 0 8px 25px -8px #93c002;
}

.card-shadow-cus {
  box-shadow: 0 4px 24px 0 rgba(34,41,47,.1);
}

.carousel-item img {
  aspect-ratio: 227 / 100;
}

.page-link:focus {
  box-shadow: none;
}

.cus-pagination .page-link {
  background-color: #f3f2f7;
  color: #6e6b7b;
  padding: .5rem .85rem;
  font-size: 14px;
  border: none;
  transition: none;
}

.cus-pagination .page-link:hover {
  color: #04aaeb;
}

.cus-pagination .active .page-link {
  background-color: #93c002;
  color: #ffffff;
  border-radius: 50%;
}

.cus-pagination .disabled .page-link {
  background-color: #f3f2f7;
  color: #b9b9c3;
}

.cus-pagination .page-item {
  background-color: #f3f2f7;
}

.cus-pagination .page-item:nth-child(1) {
  margin-right: .35rem;
  border-radius: 50%;
}

.cus-pagination .page-item:nth-last-child(1) {
  margin-left: .35rem;
  border-radius: 50%;
}

.cus-pagination .page-item:nth-child(1) .page-link,
.cus-pagination .page-item:nth-last-child(1) .page-link{
  border-radius: 50%;
}

.cus-pagination .page-item:nth-child(1) .page-link:hover,
.cus-pagination .page-item:nth-last-child(1) .page-link:hover{
  background-color: #04aaeb;
  color: #ffffff;
}

.cus-pagination .page-item:nth-child(2),
.cus-pagination .page-item:nth-child(2) .page-link {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

.cus-pagination .page-item:nth-last-child(2),
.cus-pagination .page-item:nth-last-child(2) .page-link {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.container-mx {
  max-width: 1440px;
}

.tool-li-en {
  font-size: 18px;
  line-height: 1.7;
}