/* color */
/* font */
/* transition */
.productTab li,
.relationList .relationItem,
.relationList .relationItem a,
.relationProduct .imgBox img,
.fileItemDownloadItem {
  transition: all 0.5s ease-in-out;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.productTab {
  display: flex;
  font-size: 22px;
  letter-spacing: 2.2px;
  font-weight: 500;
  text-box-edge: cap alphabetic;
  text-box-trim: trim-end;
}

@media (max-width: 640px) {
  .productTab {
    font-size: 16px;
    letter-spacing: 1.28px;
  }
}

.productTab li {
  padding: 8px 28px;
  color: #036eb8;
}

[data-theme="dark"] .productTab li {
  color: #bec9cd;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .productTab li {
    color: #bec9cd;
  }
}

@media (max-width: 640px) {
  .productTab li {
    padding: 8px 20px;
  }
}

@media (min-width: 1181px) {
  .productTab li:hover {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background-color: #fd7924;
  }

  .productTab li:hover a {
    color: #fff;
  }
}

.productTab li.current {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: #fd7924;
}

.productTab li.current a {
  color: #fff;
}

.productTab li a {
  color: currentColor;
}

.productTabContent {
  display: none;
  background-color: #f0f0f0;
  padding: 20px;
  color: #525252;
  letter-spacing: 1.92px;
  line-height: calc(27/16);
  font-family: "Noto Sans TC", sans-serif;
}

[data-theme="dark"] .productTabContent {
  background-color: rgba(231, 231, 231, 0.6);
  color: #e7e7e7;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .productTabContent {
    background-color: rgba(231, 231, 231, 0.6);
    color: #e7e7e7;
  }
}

.productTable {
  width: 100%;
  margin-top: 40px;
  font-family: "Noto Sans TC", sans-serif;
}

.productTable table {
  width: 100%;
  border-collapse: collapse;
}

.productTable thead {
  background-color: #f0f0f0;
}

.productTable thead th {
  padding: 5px 0;
}

.productTable tbody td {
  padding: 30px 10px;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 2.16px;
  border-bottom: 1px solid #000;
}

[data-theme="dark"] .productTable tbody td {
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .productTable tbody td {
    color: #fff;
  }
}

.contactInfoBox {
  margin-top: 30px;
  margin-bottom: 120px;
  font-family: "Noto Sans TC", sans-serif;
}

.contactInfoBox .contactInfoHeader {
  background-color: #cecece;
  color: #000;
  font-size: 20px;
  letter-spacing: 2.4px;
  padding: 15px 30px;
  font-weight: 700;
}

.contactInfoBox .contactInfoContent {
  padding: 15px 30px;
  background-color: #e7e7e7;
  line-height: calc(24/16);
  font-weight: 500;
  color: #525252;
  letter-spacing: 1.92px;
}

.contactInfoBox .contactInfoContent p {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  word-break: break-all;
  max-width: 100%;
}

.contactInfoBox .contactInfoContent .icon {
  width: 16px;
  height: 16px;
  transform: translateY(2px);
  flex-shrink: 0;
}

.sectionTitle {
  font-size: 24px;
  color: #036eb8;
  font-weight: 600;
  letter-spacing: 2.88px;
  margin-bottom: 10px;
}

[data-theme="dark"] .sectionTitle {
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sectionTitle {
    color: #fff;
  }
}

@media (max-width: 640px) {
  .sectionTitle {
    font-size: 20px;
  }
}

.relationList .relationItem {
  font-size: 24px;
  letter-spacing: 1.92px;
  padding: 16px 60px;
  background-color: #e7e7e7;
  color: #036eb8;
  font-weight: 500;
  margin-bottom: 24px;
  border-radius: 12px;
  text-box-edge: cap alphabetic;
  text-box-trim: trim-end;
}

[data-theme="dark"] .relationList .relationItem {
  color: #fff;
  background-color: #626c79;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .relationList .relationItem {
    color: #fff;
    background-color: #626c79;
  }
}

@media (max-width: 640px) {
  .relationList .relationItem {
    font-size: 18px;
    letter-spacing: 1.44px;
  }
}

@media (min-width: 1181px) {
  .relationList .relationItem:hover {
    background-color: #fd7924;
  }

  [data-theme="dark"] .relationList .relationItem:hover {
    background-color: #bec9cd;
  }
}

@media (min-width: 1181px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .relationList .relationItem:hover {
    background-color: #bec9cd;
  }
}

@media (min-width: 1181px) {
  .relationList .relationItem:hover a {
    color: #fff;
  }

  [data-theme="dark"] .relationList .relationItem:hover a {
    color: #303f50;
  }
}

@media (min-width: 1181px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .relationList .relationItem:hover a {
    color: #303f50;
  }
}

.relationProduct {
  margin-top: 60px;
}

.relationProduct .relationProductList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 40px;
  column-gap: 20px;
}

@media (max-width: 1180px) {
  .relationProduct .relationProductList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 20px;
  }
}

@media (max-width: 640px) {
  .relationProduct .relationProductList {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
}

@media (min-width: 1181px) {
  .relationProduct .relationItem:hover .imgBox img {
    scale: 1.1;
  }

  .relationProduct .relationItem:hover .btn {
    width: 156px;
    padding: 0 30px;
  }

  .relationProduct .relationItem:hover .btn svg {
    left: 85%;
  }

  .relationProduct .relationItem:hover .btn span {
    opacity: 1;
  }
}

.relationProduct .imgBox {
  font-size: 0;
  position: relative;
  overflow: hidden;
}

@media (max-width: 640px) {
  .relationProduct .imgBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.relationProduct .imgBox .btn {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.relationProduct .textBox {
  padding: 20px;
  text-align: center;
  font-weight: 700;
  color: #036eb8;
  font-size: 22px;
  letter-spacing: 1.92px;
}

[data-theme="dark"] .relationProduct .textBox {
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .relationProduct .textBox {
    color: #fff;
  }
}

@media (max-width: 640px) {
  .relationProduct .textBox {
    font-size: 18px;
  }
}

.fileSystem {
  margin-top: 60px;
}

.fileItemDownloadItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 700;
  color: #036eb8;
  font-size: 22px;
  letter-spacing: 1.76px;
  border-bottom: 2px solid #efefef;
  position: relative;
}

[data-theme="dark"] .fileItemDownloadItem {
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fileItemDownloadItem {
    color: #fff;
  }
}

@media (min-width: 1181px) {
  .fileItemDownloadItem:hover {
    background-color: #eaeaea;
  }
}

@media (max-width: 1180px) {
  .fileItemDownloadItem {
    font-size: 18px;
    letter-spacing: 1.08px;
  }
}

@media (max-width: 640px) {
  .fileItemDownloadItem {
    font-size: 16px;
    padding: 12px 20px;
    letter-spacing: 0.96px;
  }
}

.fileItemDownloadItem .fileLink {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.fileItemDownloadBtn .btn {
  background-color: transparent;
}

.fileItemDownloadBtn .btn svg {
  width: 30px;
  height: 30px;
}

[data-theme="dark"] .fileItemDownloadBtn .btn svg {
  filter: brightness(0) invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fileItemDownloadBtn .btn svg {
    filter: brightness(0) invert(1);
  }
}

@media (max-width: 640px) {
  .fileItemDownloadBtn .btn svg {
    width: 20px;
    height: 20px;
  }
}