@charset "UTF-8";
/*字體*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap");
/* 針對桌面版進行設定 */
@media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    /* 避免顯示偏移 */
  }
}
body {
  font-family: "Noto Sans TC", sans-serif;
}

a {
  color: #fff;
  text-decoration: none;
}
a:hover {
  color: #FACD00;
}

.nav-link {
  color: #004E42;
}
.nav-link:focus, .nav-link:hover {
  color: #FACD00;
}

@media (min-width: 768px) {
  .navbar-brand {
    margin-right: 10rem;
  }
}

.dropdown-menu {
  background: transparent;
  border: none;
}

.dropdown-item {
  color: #004E42;
}
.dropdown-item:focus, .dropdown-item:hover {
  color: #FACD00;
  background-color: transparent;
}

.navbar-toggler {
  border: none;
}
.navbar-toggler:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.languageBox {
  color: #fff;
}
.languageBox a {
  color: #FFF;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.languageBox a:hover {
  color: #FACD00;
}

#mainNavbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
#mainNavbar svg {
  fill: #004E42;
}
#mainNavbar .cls-1 {
  -webkit-transition: fill 0.5s ease;
  transition: fill 0.5s ease;
  /* 添加動畫效果 */
}

.navbar {
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.navbar-nav .nav-item {
  padding: 0 0.5rem;
}
.navbar-nav .nav-link {
  position: relative;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: #FACD00;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  border: none;
}
.navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.focus::after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-transform-origin: left;
          transform-origin: left;
}
.navbar-nav .dropdown-menu {
  background-color: transparent;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
.navbar-nav .dropdown-menu .dropdown-item {
  position: relative;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.navbar-nav .dropdown-menu .dropdown-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: #FACD00;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.navbar-nav .dropdown-menu .dropdown-item:hover::after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-transform-origin: left;
          transform-origin: left;
}

.banner {
  background: url(../image/bn-bg.png) right;
  position: relative;
  height: 30rem;
  overflow: hidden;
}
.banner .eTINPO-bn {
  position: absolute;
  right: -186%;
  top: 0;
  z-index: 1;
}
@media (min-width: 768px) {
  .banner .eTINPO-bn {
    right: -60%;
    top: 0;
  }
}
@media (min-width: 992px) {
  .banner .eTINPO-bn {
    right: 0;
    top: 0;
  }
}
.banner .banner01 {
  position: relative;
  z-index: 2;
}
.banner .banner02 {
  position: absolute;
  max-width: 90%;
  top: 15rem;
  left: 1rem;
  z-index: 3;
}
@media (min-width: 768px) {
  .banner .banner02 {
    position: absolute;
    z-index: 4;
    top: 30%;
    left: 5%;
    max-width: 20rem;
  }
}
@media (min-width: 1024px) {
  .banner .banner02 {
    left: 20%;
    max-width: 37rem;
  }
}
.banner .banner03 {
  position: absolute;
  max-width: 5rem;
  left: 1rem;
  bottom: 3rem;
}
@media (min-width: 768px) {
  .banner .banner03 {
    position: absolute;
    z-index: 3;
    bottom: 5%;
    left: 70%;
    max-width: 10rem;
  }
}
@media (min-width: 1024px) {
  .banner .banner03 {
    left: 60%;
    bottom: 10%;
    max-width: 17rem;
  }
}

.bannerTechs {
  background-image: url("../image/techs-bg.png");
  min-height: 45vh;
  position: relative;
  overflow: hidden;
}
.bannerTechs .bannerText {
  position: relative;
}
.bannerTechs .banner02 {
  position: absolute;
  left: 2rem;
  top: 6rem;
  width: 50%;
}
@media (min-width: 768px) {
  .bannerTechs .banner02 {
    left: 2rem;
    top: 6rem;
    width: auto;
  }
}
@media (min-width: 1140px) {
  .bannerTechs .banner02 {
    right: 6rem;
    top: 6rem;
  }
}
.bannerTechs .banner03 {
  position: absolute;
  right: 2rem;
  top: 9rem;
  width: 300px;
}
@media (min-width: 768px) {
  .bannerTechs .banner03 {
    right: 2rem;
    top: 4rem;
    width: auto;
  }
}
@media (min-width: 1140px) {
  .bannerTechs .banner03 {
    right: 13rem;
    top: 7rem;
  }
}

.bannerProduct {
  background: url("../image/product-bg-100.jpg") right bottom;
  background-size: cover;
}
.bannerProduct .ProductSlogan {
  position: relative;
  overflow: hidden;
  color: #FFF;
  min-height: 45vh;
}
.bannerProduct .ProductSlogan .ProductBn {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: -100%;
  width: auto;
}
@media (min-width: 768px) {
  .bannerProduct .ProductSlogan .ProductBn {
    top: 0;
    right: 0;
  }
}
@media (min-width: 1024px) {
  .bannerProduct .ProductSlogan .ProductBn {
    top: 0;
    right: 0;
  }
}
.bannerProduct .bannerText {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  position: absolute;
  bottom: 0;
  margin-left: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .bannerProduct .bannerText {
    margin-left: 5rem;
    margin-bottom: 2rem;
  }
}
.bannerProduct .bannerText p {
  font-size: 0.8rem;
  padding-top: 1rem;
}

.bannerAbout {
  background: url("../image/about-bn-bg.png") right top #DADADA;
  background-size: cover;
  min-height: 45vh;
  max-height: 560px;
}
.bannerAbout .AboutSlogan {
  position: relative;
  overflow: hidden;
  color: #FFF;
  height: 60vh;
}
.bannerAbout .AboutSlogan .AboutBn {
  position: absolute;
  top: 0;
  left: -25%;
  height: auto;
}
@media (min-width: 768px) {
  .bannerAbout .AboutSlogan .AboutBn {
    left: 0;
  }
}
.bannerAbout .bannerText {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  position: absolute;
  bottom: 0;
  margin-left: 1rem;
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  .bannerAbout .bannerText {
    margin-left: 3rem;
    margin-bottom: 10rem;
  }
}
.bannerAbout .bannerText p {
  font-size: 0.8rem;
  padding-top: 1rem;
}

.feature {
  background: #C6C6C6;
  color: #323232;
  padding: 4rem 2rem;
}
@media (min-width: 768px) {
  .feature {
    padding: 4rem 0;
  }
}
.feature .featureTheme {
  max-width: 50rem;
  margin: 3rem auto;
  letter-spacing: 2px;
}
.feature .featureTheme .featureText h4 {
  font-size: 1.2rem;
}
@media (min-width: 768px) {
  .feature .featureTheme .featureText h4 {
    font-size: 1.5rem;
  }
}
.feature .featurePhoto {
  padding-right: 1rem;
}
@media (min-width: 768px) {
  .feature .featurePhoto {
    padding-right: 3rem;
  }
}
.feature .featurePhoto img {
  width: 70px;
}
@media (min-width: 768px) {
  .feature .featurePhoto img {
    width: auto;
  }
}
.feature h4 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: #004E42;
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  .feature h4 {
    font-size: 2rem;
  }
}
.feature span {
  color: #FFF;
  font-size: 13px;
  padding-left: 5px;
}
.feature p {
  padding-top: 0.1rem;
  text-align: justify;
  font-size: 0.8rem;
}

.swiper {
  width: 100%;
  height: auto;
  padding-top: 2rem;
}

.swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.icon {
  width: 80px;
  height: 80px;
  -webkit-transition: -webkit-transform 0.5s, -webkit-filter 0.5s;
  transition: -webkit-transform 0.5s, -webkit-filter 0.5s;
  transition: transform 0.5s, filter 0.5s;
  transition: transform 0.5s, filter 0.5s, -webkit-transform 0.5s, -webkit-filter 0.5s;
}

.swiper-slide-active .icon {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}

.swiper-slide .icon {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

.swiper-button-prev,
.swiper-button-next {
  width: 10px;
  /* 設定箭頭的寬度 */
  height: 40px;
  /* 設定箭頭的高度 */
  background-size: 100% 100%;
  /* 確保背景圖充滿容器 */
  color: #004E42;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 20px !important;
}

.slogan {
  background: url(../image/bg.png) #C6C6C6;
  background-size: cover;
  padding: 4rem 1rem;
}
.slogan img {
  max-width: 100%;
  -webkit-filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.5));
          filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.5));
}
@media (min-width: 768px) {
  .slogan img {
    max-width: 495rem;
    -webkit-filter: none;
            filter: none;
  }
}

.technology {
  padding: 5rem 4rem;
  letter-spacing: 0.1rem;
  text-align: justify;
  /*img {
      max-width: 100%;

      @include b768 {
          max-width: 434rem;
      }
  }*/
}
@media (min-width: 768px) {
  .technology {
    padding: 5rem 0.1rem;
  }
}
.technology .technologyPhoto {
  padding-bottom: 3rem;
}
@media (min-width: 768px) {
  .technology .technologyPhoto {
    padding-bottom: 0;
  }
}
.technology .technologyText {
  font-size: 0.8rem;
  text-align: center;
}
.technology .technologyText p {
  font-size: 0.8rem;
}
@media (min-width: 768px) {
  .technology .technologyText {
    font-size: 1rem;
    text-align: justify;
  }
}

.application {
  background: #DADADA;
  padding: 2rem;
}
.application h4 {
  color: #004E42;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 1.7rem;
  padding: 2rem 0 1rem 0;
  line-height: 2rem;
}
.application h4 span {
  font-size: 0.9rem;
  color: #FFF;
  letter-spacing: 1px;
}
.application p {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-align: justify;
}
@media (min-width: 768px) {
  .application p {
    text-align: center;
  }
}
.application .techItem {
  margin: 2rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: left;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.application .techItem .techItemText {
  padding-left: 2rem;
}
@media (min-width: 768px) {
  .application .techItem .techItemText {
    padding-left: 0;
  }
}
@media (min-width: 768px) {
  .application .techItem {
    display: block;
    text-align: center;
  }
}
.application .techItem h5 {
  color: #004E42;
  padding: 0.5rem 0 0.2rem;
}
.application .techItem p {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  max-width: 230px;
  margin: auto;
  text-align: justify;
}

.product {
  background: #DADADA;
  padding: 5rem 4rem;
  letter-spacing: 0.1rem;
  text-align: center;
  font-size: 0.8rem;
  /*img {
      max-width: 100%;

      @include b768 {
          max-width: 414rem;
      }
  }*/
}
@media (min-width: 768px) {
  .product {
    padding: 5rem 0.1rem;
    max-width: 414rem;
    text-align: justify;
    font-size: 1rem;
  }
}
.product .productText p {
  font-size: 0.8rem;
}

.technologies {
  background: #C6C6C6;
  padding: 5rem 4rem;
}
@media (min-width: 768px) {
  .technologies {
    padding: 5rem 0;
  }
}
.technologies .techsTheme {
  text-align: center;
}
.technologies .techsTheme h4 {
  color: #004E42;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 1.7rem;
  padding: 2rem 0 1rem 0;
}
.technologies .techsTheme h4 span {
  font-size: 0.9rem;
  color: #FFF;
  letter-spacing: 1px;
}
.technologies .techsTheme p {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-align: justify;
}
@media (min-width: 768px) {
  .technologies .techsTheme p {
    text-align: center;
  }
}

.advantage {
  background: #DADADA;
  padding: 5rem 2rem;
  text-align: center;
}
@media (min-width: 768px) {
  .advantage {
    padding: 5rem 0;
  }
}
.advantage h4 {
  color: #004E42;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.8rem;
  padding: 2rem 0 2rem 0;
}
.advantage h4 span {
  font-size: 1.2rem;
  color: #004E42;
  letter-spacing: 1px;
  font-weight: 800;
}
.advantage h4 span.left {
  padding-bottom: 2rem;
  padding-right: 1rem;
}
.advantage h4 span.right {
  padding-top: 2rem;
  padding-left: 1rem;
}
.advantage .featurePhoto img {
  border-radius: 50%;
  max-height: 630px;
}
.advantage .featureItem h5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 1.8rem;
  color: #004E42;
  line-height: 2.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.advantage .featureItem h5 span {
  color: #fff;
  font-size: 1rem;
  line-height: 1rem;
  padding-top: 0.5rem;
}
.advantage .featureItem p {
  color: #000;
  font-size: 1rem;
  max-width: 30rem;
  margin: 3rem auto;
}
.advantage .feature-swiper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.advantage .feature-swiper h4 {
  padding: 2rem 0 0 0;
}
.advantage .feature-swiper p {
  margin: 0.8rem auto;
  font-size: 0.8rem;
  max-width: 35rem;
}

.contact {
  background: #C6C6C6;
  color: #004E42;
  padding-top: 80px;
}
.contact .contactTheme {
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 1024px) {
  .contact .contactTheme {
    height: 70vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: left;
  }
}
.contact .contactTheme .contactText {
  padding: 1rem 0 3rem;
}
@media (min-width: 1024px) {
  .contact .contactTheme .contactText {
    position: relative;
    height: 35vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 0;
  }
}
.contact .contactTheme .contactText p {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
.contact .contactTheme .contactText .contact-bottom {
  padding-top: 2rem;
}

.Material {
  background: #C6C6C6;
  padding: 5rem 0;
  position: relative;
}
.Material .col-12 {
  padding: 0;
}
.Material h4 {
  color: #004E42;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  letter-spacing: 1px;
  font-weight: 700;
  font-size: 1.8rem;
}
.Material h4 span {
  color: #FFF;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 1px;
}
.Material p {
  font-size: 0.9rem;
  text-align: center;
  font-weight: 500;
  line-height: 1.5rem;
  padding: 2rem 2rem;
}
@media (min-width: 768px) {
  .Material p {
    padding: 2rem 0;
  }
}
.Material .matFab {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  height: 385px;
}
.Material .matFab .fabPhoto {
  position: absolute;
  height: 385px;
  right: 0;
}
@media (min-width: 768px) {
  .Material .matFab .fabPhoto {
    right: 0;
    left: 0;
    margin: auto;
  }
}
.Material .matIconbg {
  max-width: 60rem;
  margin: auto;
}
.Material .matIcon {
  text-align: center;
}
.Material .matIcon p {
  font-size: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 0.5rem;
}
.Material .arrowicon {
  position: absolute;
  bottom: -15px;
  right: 0;
  left: 0;
  margin: auto;
}

.purpose {
  background: #C6C6C6;
  padding: 8rem 2rem 0;
}
@media (min-width: 768px) {
  .purpose {
    padding-top: 8rem;
  }
}
.purpose h4 {
  color: #004E42;
  font-size: 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 420px;
  margin: auto;
}
.purpose h4 span {
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 1.5rem;
}
.purpose p {
  padding: 3rem 0;
  max-width: 520px;
  margin: auto;
  font-weight: 500;
}
.purpose .purposeitem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2rem 0;
}
.purpose .purposeitem .img-fluid {
  max-width: 50%;
}
@media (min-width: 768px) {
  .purpose .purposeitem .img-fluid {
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  .purpose .purposeitem:nth-child(odd) {
    margin-left: 10%;
  }
  .purpose .purposeitem:nth-child(even) {
    margin-right: 10%;
  }
}
.purpose .purposeitem .purposeText {
  margin-left: 2rem;
}
.purpose .purposeitem .purposeText h5 {
  letter-spacing: 2px;
  font-size: 1.2rem;
}
.purpose .purposeitem .purposeText p {
  padding: 0.7rem 0;
  max-width: 290px;
  font-size: 0.9rem;
}
.purpose .purposeitem .purposeBtn button {
  background: #004E42;
  color: #fff;
  border-radius: 25px;
  padding: 0.5rem 1rem;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 0.8rem;
}
@media (min-width: 768px) {
  .purpose .purposeitem .purposeBtn button {
    font-size: 1rem;
  }
}
.purpose .purposeitem .purposeBtn button .arrow {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #FACD00;
  /* 定義圖標的顏色 */
  -webkit-mask-image: url("../image/more-arrow.svg");
          mask-image: url("../image/more-arrow.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

.garment {
  background: #DADADA;
  padding: 2rem 2rem 100px 2rem;
  text-align: center;
  letter-spacing: 1px;
}
@media (min-width: 768px) {
  .garment {
    padding: 100px 0;
  }
}
.garment .container {
  max-width: 600px;
}
.garment h4 {
  color: #004E42;
  font-size: 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: auto;
  padding: 1.5rem 0;
}
.garment p {
  font-size: 0.8rem;
}
.garment img {
  margin: 0 0.3rem;
  padding-bottom: 2rem;
  width: 34px;
}
@media (min-width: 768px) {
  .garment img {
    margin: 0 0.5rem;
    padding-bottom: 2rem;
    width: 60px;
  }
}
.garment .clean {
  text-align: left;
}
.garment .clean h5 {
  font-size: 1.5rem;
  font-weight: 600;
  padding-top: 2rem;
}

.newtechnology {
  background: #DADADA;
  padding: 4rem 0;
}
.newtechnology .new-technology {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 2rem;
}
@media (min-width: 768px) {
  .newtechnology .new-technology {
    padding: 0;
  }
}
.newtechnology h4 {
  color: #004E42;
  font-size: 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 430px;
  margin: auto;
}
.newtechnology h4 span {
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
}
.newtechnology p {
  padding: 0.7rem 0;
  max-width: 430px;
  font-size: 0.9rem;
  margin: auto;
  font-weight: 500;
  text-align: justify;
  line-height: 1.5rem;
}
.newtechnology .overviewPhoto {
  padding: 0 2rem 2rem;
}
.newtechnology .overviewPhoto img {
  border-radius: 50%;
}

.eco {
  background: #C6C6C6;
  padding: 8rem 1rem 6rem;
}
.eco h4 {
  color: #004E42;
  font-size: 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 430px;
  margin: auto;
}
.eco h4 span {
  padding-top: 1rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
}
.eco p {
  padding: 3rem 0;
  max-width: 430px;
  font-size: 0.9rem;
  margin: auto;
  font-weight: 500;
  text-align: justify;
  line-height: 1.5rem;
}

.principles {
  background: #DADADA;
  padding: 8rem 0 2rem;
}
.principles .principlesitem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-bottom: 2rem;
}
.principles .principlesitem h4 {
  color: #004E42;
  font-size: 1.8rem;
  font-weight: 700;
  padding-top: 0.5rem;
  text-align: center;
}
.principles .principlesitem p {
  font-size: 0.9rem;
  font-weight: 500;
  text-align: justify;
  padding-top: 0.5rem;
  max-width: 290px;
  line-height: 1.5rem;
}

.fiveActions {
  background: #C6C6C6;
  color: #fff;
  padding: 5rem 0;
}
.fiveActions h4 {
  color: #004E42;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}
.fiveActions .operation {
  text-align: center;
  position: relative;
  margin: 2rem 0;
}
.fiveActions .operation p {
  font-weight: 300;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  margin-bottom: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  max-width: 290px;
}

.YearinReview {
  text-align: center;
  padding: 3rem 2rem;
}
@media (min-width: 768px) {
  .YearinReview {
    padding: 5rem 0;
  }
}
.YearinReview p {
  font-size: 0.8rem;
  padding-top: 3rem;
  line-height: 1.5rem;
}
.YearinReview .year {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: left;
  padding-bottom: 2rem;
}
.YearinReview .year .yearimg {
  border-radius: 50%;
  width: 50%;
}
@media (min-width: 768px) {
  .YearinReview .year .yearimg {
    width: auto;
  }
}
.YearinReview .year h5 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
}
.YearinReview .year p {
  padding-top: 0;
}
@media (min-width: 768px) {
  .YearinReview .year p {
    padding-top: 3rem;
    width: 160px;
  }
}
.YearinReview .arrow-left,
.YearinReview .arrow-right {
  margin: 0 1rem;
}
@media (min-width: 768px) {
  .YearinReview .arrow-left,
  .YearinReview .arrow-right {
    margin: 0 2rem;
  }
}
.YearinReview .arrow-left {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

footer {
  background: #9C9C9D;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 1px;
}
footer .footerBtn {
  padding-bottom: 1rem;
  padding-top: 1rem;
}
@media (min-width: 768px) {
  footer .footerBtn {
    padding-bottom: 1rem;
  }
}
footer .footerBtn a {
  padding: 0 0.5rem;
}
footer .footerLocation {
  border-bottom: 1px solid #fff;
}
@media (min-width: 768px) {
  footer .footerLocation {
    border: none;
  }
}
footer .footerLink {
  letter-spacing: 2px;
}
footer .copyRight {
  background: #004E42;
  text-align: center;
  padding: 10px;
  letter-spacing: 1px;
}/*# sourceMappingURL=style.css.map */