@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');
  }
}

.download-wrapper {
  width: 100%;
}
.download-wrapper section {
  position: relative;
}
.download-wrapper section .download-cards-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  --download-card-gap: clamp(24px, 1.875vw, 36px);
  gap: var(--download-card-gap);
  margin-bottom: clamp(30px, 2.7vw, 52px);
}
@media (max-width: 768px) {
  .download-wrapper section .download-cards-wrapper {
    flex-direction: column;
    align-items: center;
  }
}
.download-wrapper section .download-cards-wrapper .download-card {
  width: calc(33% - var(--download-card-gap) * 2 / 3);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  border-radius: 7.2px;
  background-color: white;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  text-decoration: none;
}
@media (max-width: 1200px) {
  .download-wrapper section .download-cards-wrapper .download-card {
    width: calc(50% - var(--download-card-gap) * 1 / 2);
  }
}
@media (max-width: 768px) {
  .download-wrapper section .download-cards-wrapper .download-card {
    width: 100%;
    max-width: 420px;
  }
}
.download-wrapper section .download-cards-wrapper .download-card .img-box {
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 4/3;
  position: relative;
}
.download-wrapper section .download-cards-wrapper .download-card .img-box .role-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: clamp(10px, 0.73vw, 14px);
  border: 2px solid white;
  border-radius: 7.2px;
  background-color: transparent;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: clamp(20px, 1.25vw, 24px);
  opacity: 0;
}
.download-wrapper section .download-cards-wrapper .download-card .img-box .role-button img {
  width: clamp(18px, 1.67vw, 32px);
  margin-top: 2px;
}
.download-wrapper section .download-cards-wrapper .download-card .img-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.download-wrapper section .download-cards-wrapper .download-card .caption {
  padding: clamp(22px, 1.35vw, 26px);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #212121;
  font-weight: 500;
  font-size: clamp(18px, 1.14vw, 22px);
  line-height: 1;
}
.download-wrapper section .download-cards-wrapper .download-card:hover .img-box .role-button {
  opacity: 1;
}
.download-wrapper section .download-cards-wrapper .download-card:hover .img-box img.main {
  filter: brightness(0.5);
}
.download-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) {
  .download-wrapper section .deco-pic {
    display: none;
  }
}
.download-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) {
  .download-wrapper section .deco-green-square {
    display: block;
  }
}
@media (max-width: 990px) {
  .download-wrapper section .deco-green-square {
    width: calc(100% + var(--main-horizon-padding) * 2);
    transform: translateX(calc(0px - var(--main-horizon-padding)));
  }
}/*# sourceMappingURL=download.css.map */