@charset "UTF-8";
/*
    自定義在最下面
*/
/* Font Weight */
/* Width */
/* Height */
/* Display */
/* Margin */
/* Padding */
/* Cursor */
/* Background Color */
/* Color */
/* Text Limit */
/* 毛玻璃 */
/******************  自定義  ******************/
/* Color */
/* Background Color */
/* Font Size */
/* Heading Desktop */
/* Heading Mobile */
/* Extra Large */
/* Large */
/* Medium */
/* Regular */
/* Small */
/* Small */
/* Button */
.banner-top {
  background: url("/images/aboutus/desktop-banner.jpg") no-repeat center top;
  height: 640px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner-top .text {
  font-size: var(--text-hd-h1) !important;
  line-height: var(--text-hd-h1--line-height);
  font-weight: bold;
  color: var(--wc-50) !important;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.2509803922);
}

.intro-wrap {
  background: var(--wc-50) !important;
  border: 1px solid var(--nc-100);
  padding: var(--spacing-16);
  border-radius: var(--spacing-8);
}
.intro-wrap .img-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.intro-wrap .img-wrap img {
  width: 100%;
}
.intro-wrap .text-wrap {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
}
.intro-wrap .text-wrap .title {
  font-size: var(--text-hm-h3) !important;
  line-height: var(--text-hm-h3--line-height);
  font-weight: bold;
  color: var(--pc-800) !important;
}
.intro-wrap .text-wrap .content {
  font-size: var(--text-md) !important;
  line-height: var(--text-md--line-height);
  color: var(--nc-500) !important;
  line-height: 160%;
}
.intro-wrap .text-wrap .highlight {
  font-size: var(--text-lg) !important;
  line-height: var(--text-lg--line-height);
  font-weight: bold;
  color: var(--pc-500) !important;
}
@media (max-width: 992px) {
  .intro-wrap {
    width: 768px;
  }
}
@media (max-width: 768px) {
  .intro-wrap {
    width: 576px;
  }
}
@media (max-width: 576px) {
  .intro-wrap {
    width: 100%;
  }
  .intro-wrap .text-wrap > .title {
    font-size: var(--text-hm-h5) !important;
    line-height: var(--text-hm-h5--line-height);
    font-weight: bold;
  }
  .intro-wrap .text-wrap > .content {
    font-size: var(--text-base) !important;
    line-height: var(--text-base--line-height);
    line-height: 160%;
  }
}

.feature-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
}
.feature-wrap .feature-box {
  width: calc((100% - var(--spacing-16) * 3) / 4);
}
.feature-wrap .feature-container {
  background: var(--wc-50) !important;
  border-radius: var(--spacing-8);
  border: 1px solid var(--nc-100);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-24);
}
.feature-wrap .feature-container .text-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  text-align: center;
}
.feature-wrap .feature-container .text-wrap .title {
  font-size: var(--text-md) !important;
  line-height: var(--text-md--line-height);
  font-weight: bold;
  color: var(--nc-900) !important;
}
.feature-wrap .feature-container .text-wrap .subtitle {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--nc-500) !important;
  text-align: center;
}
@media (max-width: 992px) {
  .feature-wrap {
    width: 768px;
  }
}
@media (max-width: 768px) {
  .feature-wrap {
    width: 576px;
  }
  .feature-wrap .feature-box {
    width: calc((100% - var(--spacing-16)) / 2);
  }
}
@media (max-width: 576px) {
  .feature-wrap {
    width: 100%;
  }
  .feature-wrap .feature-box > .feature-container {
    padding: var(--spacing-16) var(--spacing-12);
  }
}

.company-history-wrap-desktop {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  border: 1px solid var(--nc-100);
  border-radius: var(--spacing-8);
  padding: var(--spacing-32) var(--spacing-24);
}
.company-history-wrap-desktop .title {
  font-size: var(--text-hm-h3) !important;
  line-height: var(--text-hm-h3--line-height);
  font-weight: bold;
  color: var(--pc-800) !important;
  text-align: center;
}
.company-history-wrap-desktop .time-line {
  display: flex;
}
.company-history-wrap-desktop .time-line .history {
  width: calc((100% - 40px) / 2);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-24);
  justify-content: center;
}
.company-history-wrap-desktop .time-line .history-title {
  font-size: var(--text-hm-h4) !important;
  line-height: var(--text-hm-h4--line-height);
  font-weight: bold;
  color: var(--pc-800) !important;
}
.company-history-wrap-desktop .time-line .history-content {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--nc-500) !important;
}
.company-history-wrap-desktop .time-line .history-date-wrap {
  display: flex;
}
.company-history-wrap-desktop .time-line .history-date-wrap.right {
  justify-content: end;
}
.company-history-wrap-desktop .time-line .history-date-wrap .date {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--wc-50) !important;
  width: 100px;
  height: 32px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-4) var(--spacing-16);
  background: linear-gradient(90deg, #7AB6E0, #8ACBAF);
}
.company-history-wrap-desktop .time-line .center {
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.company-history-wrap-desktop .time-line .center .line {
  background: var(--pc-100) !important;
  width: 2px;
  height: calc((100% - 40px) / 2);
}
.company-history-wrap-desktop .time-line .center .circle-wrap {
  background: var(--pc-100) !important;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.company-history-wrap-desktop .time-line .center .circle {
  background: var(--pc-300) !important;
  width: 24px;
  height: 24px;
  border-radius: 100%;
}
@media (max-width: 992px) {
  .company-history-wrap-desktop {
    width: 768px;
  }
}
@media (max-width: 768px) {
  .company-history-wrap-desktop {
    width: 576px;
  }
}
@media (max-width: 576px) {
  .company-history-wrap-desktop {
    display: none;
  }
}

.company-history-wrap-mobile {
  width: 100%;
  display: none;
  flex-direction: column;
  gap: var(--spacing-8);
  border: 1px solid var(--nc-100);
  border-radius: var(--spacing-8);
  padding: var(--spacing-32) var(--spacing-24);
}
.company-history-wrap-mobile .title {
  font-size: var(--text-hm-h5) !important;
  line-height: var(--text-hm-h5--line-height);
  font-weight: bold;
  color: var(--pc-800) !important;
  text-align: center;
}
.company-history-wrap-mobile .time-line {
  display: flex;
  gap: var(--spacing-8);
}
.company-history-wrap-mobile .time-line .left {
  width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.company-history-wrap-mobile .time-line .left .line {
  background: var(--pc-100) !important;
  width: 2px;
  height: calc((100% - 20px) / 2);
}
.company-history-wrap-mobile .time-line .left .circle-wrap {
  background: var(--pc-100) !important;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.company-history-wrap-mobile .time-line .left .circle {
  background: var(--pc-300) !important;
  width: 10px;
  height: 10px;
  border-radius: 100%;
}
.company-history-wrap-mobile .time-line .right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-8) 0;
}
.company-history-wrap-mobile .time-line .right-title {
  font-size: var(--text-hm-h6) !important;
  line-height: var(--text-hm-h6--line-height);
  font-weight: bold;
  color: var(--pc-800) !important;
}
.company-history-wrap-mobile .time-line .right-content {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--nc-500) !important;
}
.company-history-wrap-mobile .time-line .right-date-wrap .date {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--wc-50) !important;
  width: 100px;
  height: 32px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-4) var(--spacing-16);
  background: linear-gradient(90deg, #7AB6E0, #8ACBAF);
}
@media (max-width: 576px) {
  .company-history-wrap-mobile {
    display: flex;
  }
}

.map {
  width: 100%;
  height: 656px;
}
.map iframe {
  width: 100%;
  height: 100%;
  border-radius: 16px;
}
@media (max-width: 576px) {
  .map {
    height: 480px;
  }
}/*# sourceMappingURL=aboutus.css.map */