.wrap {
  max-width: 1590px;
}

footer {
  position: relative;
  z-index: 2;
}

.mainArea > .wrap {
  max-width: 1500px;
}
.mainArea:not(:has(.aboutArea)) .wrap {
  display: flex;
  flex-wrap: wrap;
}
.mainArea:not(:has(.aboutArea)) .leftBox {
  width: 250px;
}
@media (max-width: 1023px) {
  .mainArea:not(:has(.aboutArea)) .leftBox {
    width: 100%;
  }
}
.mainArea:not(:has(.aboutArea)) .rightBox {
  flex: 1;
  padding-left: 30px;
}
@media (max-width: 1023px) {
  .mainArea:not(:has(.aboutArea)) .rightBox {
    flex: unset;
    width: 100%;
    padding: 0;
  }
}
.mainArea:has(.aboutArea) {
  padding: 0;
}

.aboutArea {
  padding: 31px 0 120px;
}
@media (max-width: 1023px) {
  .aboutArea {
    padding: 40px 0 80px;
  }
}
@media (max-width: 767px) {
  .aboutArea {
    padding: 60px 0;
  }
}
.aboutArea .aboutBox {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 1023px) {
  .aboutArea .aboutBox {
    flex-wrap: wrap;
  }
}
.aboutArea .Txt {
  padding: 11px 0;
  width: 46.5%;
}
@media (max-width: 1540px) {
  .aboutArea .Txt {
    padding: 0;
  }
}
@media (max-width: 1023px) {
  .aboutArea .Txt {
    width: 100%;
    margin-bottom: 20px;
  }
}
.aboutArea .Txt .titleBox {
  margin-bottom: 54px;
}
@media (max-width: 1540px) {
  .aboutArea .Txt .titleBox {
    margin-bottom: 40px;
  }
}
@media (max-width: 1350px) {
  .aboutArea .Txt .titleBox {
    margin-bottom: 20px;
  }
}
.aboutArea .Txt .textBox {
  border-left: 3px solid #0971ce;
  padding-left: 26px;
  padding-bottom: 5px;
}
@media (max-width: 1540px) {
  .aboutArea .Txt .textBox {
    padding-left: 20px;
  }
}
@media (max-width: 1350px) {
  .aboutArea .Txt .textBox {
    padding-left: 15px;
  }
}
@media (max-width: 1023px) {
  .aboutArea .Txt .textBox {
    border-left: none;
    padding: 0;
  }
}
.aboutArea .Txt .subtitle {
  font-size: 24px;
  color: #000000;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 1px;
  margin: 0 0 10px;
}
@media (max-width: 1540px) {
  .aboutArea .Txt .subtitle {
    font-size: 22px;
    letter-spacing: 0.8px;
  }
}
@media (max-width: 1350px) {
  .aboutArea .Txt .subtitle {
    font-size: 20px;
    letter-spacing: 0.6px;
  }
}
@media (max-width: 767px) {
  .aboutArea .Txt .subtitle {
    font-size: 18px;
    letter-spacing: 0.4px;
  }
}
@media (max-width: 480px) {
  .aboutArea .Txt .subtitle {
    font-size: 17px;
    letter-spacing: 0.2px;
  }
}
.aboutArea .Txt .text {
  font-size: 16px;
  color: #4c4c4c;
  font-weight: 500;
  letter-spacing: 0.76px;
  margin: 0 0 14px;
}
@media (max-width: 1540px) {
  .aboutArea .Txt .text {
    font-size: 15px;
    letter-spacing: 0.56px;
  }
}
@media (max-width: 1350px) {
  .aboutArea .Txt .text {
    font-size: 14px;
    letter-spacing: 0.36px;
  }
}
.aboutArea .Txt .text:last-child {
  margin: 0;
}
.aboutArea .Img {
  overflow: hidden;
}
@media (min-width: 1024px) {
  .aboutArea .Img {
    width: calc(53.5% - 24px);
  }
}
@media (min-width: 1024px) {
  .aboutArea .Img:hover img {
    transform: scale(1.05);
  }
}
.aboutArea .Img img {
  transition: all 0.5s;
}
.aboutArea:not(.show) .titleBox .decoTitle {
  opacity: 0;
  transform: translateY(20px);
}
.aboutArea:not(.show) .titleBox .title {
  opacity: 0;
  transform: translateY(20px);
}
.aboutArea:not(.show) .textBox {
  opacity: 0;
  transform: translateY(20px);
}
.aboutArea:not(.show) .Img {
  opacity: 0;
  transform: translateX(20px);
}
.aboutArea.show .titleBox .decoTitle {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s;
}
.aboutArea.show .titleBox .title {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s 0.2s;
}
.aboutArea.show .textBox {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s 0.4s;
}
.aboutArea.show .Img {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.6s 0.6s;
}

.solutionArea {
  background: url(../../images/tw/about/bg.jpg) no-repeat center/cover;
  padding: 113px 0 51px;
}
@media (max-width: 1540px) {
  .solutionArea {
    padding: 90px 0 51px;
  }
}
@media (max-width: 1023px) {
  .solutionArea {
    padding: 80px 0;
  }
}
@media (max-width: 767px) {
  .solutionArea {
    padding: 60px 0;
  }
}
.solutionArea .titleBox {
  text-align: center;
  margin-bottom: 48px;
}
@media (max-width: 1540px) {
  .solutionArea .titleBox {
    margin-bottom: 40px;
  }
}
@media (max-width: 1350px) {
  .solutionArea .titleBox {
    margin-bottom: 20px;
  }
}
.solutionArea .titleBox .title {
  display: block;
  padding: 0 0 0 8px;
  letter-spacing: 1.5px;
}
.solutionArea .titleBox .title::before {
  display: none;
}
.solutionArea .titleBox .text {
  padding-top: 10px;
}
.solutionArea .solutionList {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -13px;
}
@media (max-width: 1023px) {
  .solutionArea .solutionList {
    margin: 0 -8px;
  }
}
.solutionArea .solutionList .solutionItem {
  width: 33.33%;
  padding: 0 13px;
  margin-bottom: 28px;
}
@media (max-width: 1023px) {
  .solutionArea .solutionList .solutionItem {
    padding: 0 8px;
  }
}
@media (max-width: 767px) {
  .solutionArea .solutionList .solutionItem {
    width: 100%;
    margin-bottom: 20px;
  }
}
.solutionArea .solutionList .solutionItem .Img {
  overflow: hidden;
}
@media (min-width: 1024px) {
  .solutionArea .solutionList .solutionItem .Img:hover img {
    transform: scale(1.05);
  }
}
.solutionArea .solutionList .solutionItem .Img img {
  transition: all 0.5s;
}
.solutionArea .solutionList .solutionItem .Txt {
  padding: 18px 0 0;
  text-align: center;
}
@media (max-width: 1023px) {
  .solutionArea .solutionList .solutionItem .Txt {
    padding: 10px 0 0;
  }
}
.solutionArea .solutionList .solutionItem .title {
  font-size: 20px;
  color: #000000;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 0 0 7px;
}
@media (max-width: 1540px) {
  .solutionArea .solutionList .solutionItem .title {
    font-size: 18px;
    letter-spacing: 0.8px;
  }
}
@media (max-width: 1350px) {
  .solutionArea .solutionList .solutionItem .title {
    font-size: 16px;
    letter-spacing: 0.6px;
  }
}
.solutionArea .solutionList .solutionItem .textEditor {
  font-size: 16px;
  letter-spacing: 0.8px;
  font-weight: 500;
}
@media (max-width: 1540px) {
  .solutionArea .solutionList .solutionItem .textEditor {
    font-size: 15px;
    letter-spacing: 0.6px;
  }
}
@media (max-width: 1350px) {
  .solutionArea .solutionList .solutionItem .textEditor {
    font-size: 14px;
    letter-spacing: 0.4px;
  }
}
.solutionArea .textContentBox {
  position: relative;
  margin: 56px 0;
  padding: 29px 0;
}
@media (max-width: 1540px) {
  .solutionArea .textContentBox {
    margin: 40px 0;
    padding: 20px 0;
  }
}
@media (max-width: 1350px) {
  .solutionArea .textContentBox {
    margin: 20px 0;
    padding: 15px 0;
  }
}
.solutionArea .textContentBox::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - 150px);
  height: 100%;
  background: #0971ce;
  z-index: 1;
}
@media (max-width: 1540px) {
  .solutionArea .textContentBox::before {
    width: 100%;
  }
}
.solutionArea .textContentBox .textEditor {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
  font-size: 28px;
  letter-spacing: 1.35px;
  padding: 0 34px 0 43px;
  font-family: "Noto Sans TC", "Noto Sans", "Noto Sans JP", "Microsoft JhengHei", sans-serif;
}
@media (max-width: 1540px) {
  .solutionArea .textContentBox .textEditor {
    font-size: 26px;
    letter-spacing: 1.2px;
  }
}
@media (max-width: 1350px) {
  .solutionArea .textContentBox .textEditor {
    font-size: 24px;
    letter-spacing: 1px;
  }
}
@media (max-width: 1023px) {
  .solutionArea .textContentBox .textEditor {
    font-size: 22px;
    letter-spacing: 0.8px;
    padding: 0 20px;
  }
}
@media (max-width: 767px) {
  .solutionArea .textContentBox .textEditor {
    font-size: 20px;
    letter-spacing: 0.6px;
    padding: 0 15px;
  }
}
@media (max-width: 480px) {
  .solutionArea .textContentBox .textEditor {
    font-size: 18px;
    letter-spacing: 0.4px;
  }
}
.solutionArea .textContentBox .textEditor p:last-child {
  margin: 0;
}
.solutionArea .dataBox {
  padding: 35px 0;
  position: relative;
}
@media (max-width: 1540px) {
  .solutionArea .dataBox {
    padding: 30px 0;
  }
}
@media (max-width: 1350px) {
  .solutionArea .dataBox {
    padding: 20px 0;
  }
}
.solutionArea .dataBox::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: url(../../images/tw/about/line.png) repeat-x center/contain;
  position: absolute;
  top: 179px;
  left: 0;
  z-index: 0;
}
@media (max-width: 1540px) {
  .solutionArea .dataBox::before {
    top: 167px;
  }
}
@media (max-width: 1350px) {
  .solutionArea .dataBox::before {
    top: 147px;
  }
}
@media (max-width: 1023px) {
  .solutionArea .dataBox::before {
    top: 0;
    width: 2px;
    height: calc(100% - 30px);
    background: url(../../images/tw/about/line_ph.png) repeat-y center/contain;
  }
}
.solutionArea .dataBox .triangle {
  position: absolute;
  right: -20px;
  top: 173px;
  display: flex;
  align-items: center;
  gap: 4px;
}
@media (max-width: 1540px) {
  .solutionArea .dataBox .triangle {
    top: 161px;
  }
}
@media (max-width: 1350px) {
  .solutionArea .dataBox .triangle {
    top: 142px;
  }
}
@media (max-width: 1023px) {
  .solutionArea .dataBox .triangle {
    display: block;
    top: auto;
    right: auto;
    left: -4px;
    bottom: 0;
  }
}
.solutionArea .dataBox .triangle::before, .solutionArea .dataBox .triangle::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 9px;
}
@media (max-width: 1023px) {
  .solutionArea .dataBox .triangle::before, .solutionArea .dataBox .triangle::after {
    display: block;
    border-width: 9px 6px 0 6px;
  }
}
.solutionArea .dataBox .triangle::before {
  border-color: transparent transparent transparent #c9dced;
  animation: slideRightAnimation 1s linear infinite;
}
@media (max-width: 1023px) {
  .solutionArea .dataBox .triangle::before {
    border-color: #c9dced transparent transparent transparent;
    margin-bottom: 4px;
    animation: slideDownAnimation 1s 0.8s linear infinite;
  }
}
.solutionArea .dataBox .triangle::after {
  border-color: transparent transparent transparent #1e88e5;
  animation: slideRightAnimation 1s 0.8s linear infinite;
}
@media (max-width: 1023px) {
  .solutionArea .dataBox .triangle::after {
    border-color: #1e88e5 transparent transparent transparent;
    animation: slideDownAnimation 1s linear infinite;
  }
}
.solutionArea .dataList {
  display: flex;
  flex-wrap: wrap;
}
.solutionArea .dataList .dataItem {
  width: 33.33%;
  padding: 0 13px;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
@media (max-width: 1540px) {
  .solutionArea .dataList .dataItem {
    margin-bottom: 20px;
  }
}
@media (max-width: 1350px) {
  .solutionArea .dataList .dataItem {
    margin-bottom: 15px;
  }
}
@media (max-width: 1023px) {
  .solutionArea .dataList .dataItem {
    width: 100%;
    margin-bottom: 20px;
  }
}
.solutionArea .dataList .dataItem .Img {
  width: 108px;
  height: 108px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid #b5d4f0;
  background-color: #fff;
  margin: 0 auto 36px;
  overflow: hidden;
}
@media (max-width: 1540px) {
  .solutionArea .dataList .dataItem .Img {
    margin: 0 auto 30px;
  }
}
@media (max-width: 1350px) {
  .solutionArea .dataList .dataItem .Img {
    margin: 0 auto 20px;
  }
}
@media (min-width: 1024px) {
  .solutionArea .dataList .dataItem .Img:hover img {
    transform: scale(1.05);
  }
}
.solutionArea .dataList .dataItem .Img img {
  width: 60px;
  transition: all 0.5s;
}
.solutionArea .dataList .dataItem .Txt {
  text-align: center;
  position: relative;
}
.solutionArea .dataList .dataItem .Txt::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: #f4b334;
  margin: -4px auto 31px;
}
@media (max-width: 1540px) {
  .solutionArea .dataList .dataItem .Txt::before {
    margin: -4px auto 25px;
  }
}
@media (max-width: 1350px) {
  .solutionArea .dataList .dataItem .Txt::before {
    margin: -4px auto 15px;
  }
}
@media (max-width: 1023px) {
  .solutionArea .dataList .dataItem .Txt::before {
    position: absolute;
    top: -4px;
    left: -15px;
    z-index: 1;
    margin: 0;
  }
}
.solutionArea .dataList .dataItem .topTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 9px;
}
.solutionArea .dataList .dataItem .topTitle .number {
  font-size: 27px;
  color: #0971ce;
  font-weight: 600;
  letter-spacing: 1px;
  margin-right: 8px;
  line-height: 0.8;
}
@media (max-width: 1540px) {
  .solutionArea .dataList .dataItem .topTitle .number {
    font-size: 25px;
    letter-spacing: 0.8px;
  }
}
@media (max-width: 1350px) {
  .solutionArea .dataList .dataItem .topTitle .number {
    font-size: 23px;
    letter-spacing: 0.6px;
  }
}
.solutionArea .dataList .dataItem .title {
  font-size: 20px;
  color: #000000;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 0 0 7px;
}
@media (max-width: 1540px) {
  .solutionArea .dataList .dataItem .title {
    font-size: 18px;
    letter-spacing: 0.8px;
  }
}
@media (max-width: 1350px) {
  .solutionArea .dataList .dataItem .title {
    font-size: 16px;
    letter-spacing: 0.6px;
  }
}
.solutionArea .dataList .dataItem .textEditor {
  font-size: 16px;
  letter-spacing: 0.8px;
  font-weight: 500;
}
@media (max-width: 1540px) {
  .solutionArea .dataList .dataItem .textEditor {
    font-size: 15px;
    letter-spacing: 0.6px;
  }
}
@media (max-width: 1350px) {
  .solutionArea .dataList .dataItem .textEditor {
    font-size: 14px;
    letter-spacing: 0.4px;
  }
}
.solutionArea:not(.show) .titleBox .title {
  opacity: 0;
  transform: translateY(20px);
}
.solutionArea:not(.show) .titleBox .text {
  opacity: 0;
  transform: translateY(20px);
}
.solutionArea:not(.show) .solutionBox {
  opacity: 0;
  transform: translateY(20px);
}
.solutionArea:not(.show) .textContentBox {
  opacity: 0;
  transform: translateY(20px);
}
.solutionArea:not(.show) .dataBox {
  opacity: 0;
  transform: translateY(20px);
}
.solutionArea.show .titleBox .title {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s;
}
.solutionArea.show .titleBox .text {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s 0.2s;
}
.solutionArea.show .solutionBox {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s 0.4s;
}
.solutionArea.show .textContentBox {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s 0.6s;
}
.solutionArea.show .dataBox {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s 0.8s;
}

.coreArea {
  background: url(../../images/tw/about/bg2.jpg) no-repeat center/cover;
  padding: 114px 0 116px;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .coreArea {
    padding: 80px 0;
  }
}
@media (max-width: 767px) {
  .coreArea {
    padding: 60px 0;
  }
}
.coreArea .wrap {
  position: relative;
}
.coreArea .topTitle {
  display: flex;
  justify-content: space-between;
  position: relative;
}
@media (max-width: 1023px) {
  .coreArea .topTitle {
    display: block;
  }
}
.coreArea .topTitle .titleBox {
  flex: 1;
}
.coreArea .topTitle .titleBox .decoTitle {
  line-height: 0.9;
  letter-spacing: 2.5px;
  margin: 0 0 6px;
  width: 100%;
  max-width: 434px;
}
@media (max-width: 1023px) {
  .coreArea .topTitle .titleBox .decoTitle {
    max-width: unset;
  }
}
.coreArea .topTitle .text {
  width: 480px;
  padding-left: 20px;
  font-size: 24px;
  color: #000000;
  font-weight: 500;
  font-family: "Noto Sans TC", "Noto Sans", "Noto Sans JP", "Microsoft JhengHei", sans-serif;
  letter-spacing: 1.3px;
  line-height: 1.3;
}
@media (max-width: 1540px) {
  .coreArea .topTitle .text {
    font-size: 22px;
    letter-spacing: 1.1px;
  }
}
@media (max-width: 1350px) {
  .coreArea .topTitle .text {
    font-size: 20px;
    letter-spacing: 0.9px;
  }
}
@media (max-width: 1023px) {
  .coreArea .topTitle .text {
    width: 100%;
    padding-left: 0;
    margin-bottom: 20px;
  }
}
.coreArea .topTitle .logo {
  position: absolute;
  right: 0;
  top: -20%;
  opacity: 0.08;
  width: 70.8%;
}
.coreArea .imgBox {
  width: 41.7%;
  margin: -2.6% auto 0;
  position: relative;
}
@media (max-width: 1023px) {
  .coreArea .imgBox {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 20px;
  }
}
.coreArea .imgBox .Img {
  padding: 4.8% 4.6%;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(9, 113, 206, 0.3);
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.8s linear;
  overflow: hidden;
}
.coreArea .imgBox .Img:not(:first-child) {
  position: absolute;
  inset: 0;
}
.coreArea .imgBox .Img.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease;
}
.coreArea .imgBox .Img img {
  border: 1px solid rgba(9, 113, 206, 0.8);
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 1024px) {
  .coreArea .dataBox {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    padding: 0 50px;
    display: flex;
    align-items: end;
  }
}
.coreArea .dataList {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: end;
  height: 77.6%;
}
@media (max-width: 1023px) {
  .coreArea .dataList {
    height: auto;
    display: block;
  }
  .coreArea .dataList:not(.slick-slider) {
    display: flex;
  }
  .coreArea .dataList:not(.slick-slider) .dataItem {
    width: 100%;
  }
  .coreArea .dataList:not(.slick-slider) .dataItem:not(:first-child) {
    display: none;
  }
}
.coreArea .dataList .dataItem {
  width: 50%;
}
@media (min-width: 1024px) {
  .coreArea .dataList .dataItem:nth-of-type(odd) {
    text-align: right;
    padding-right: 20.85%;
  }
  .coreArea .dataList .dataItem:nth-of-type(odd) .Txt {
    padding-right: 26.2%;
  }
}
@media (min-width: 1024px) and (max-width: 1540px) {
  .coreArea .dataList .dataItem:nth-of-type(odd) .Txt {
    padding-right: 20%;
  }
}
@media (min-width: 1024px) and (max-width: 1350px) {
  .coreArea .dataList .dataItem:nth-of-type(odd) .Txt {
    padding-right: 14%;
  }
}
@media (min-width: 1024px) {
  .coreArea .dataList .dataItem:nth-of-type(odd) .dot {
    right: -17px;
  }
  .coreArea .dataList .dataItem:nth-of-type(odd) .title {
    padding-right: 20px;
  }
  .coreArea .dataList .dataItem:nth-of-type(odd) .title:before {
    right: 0;
  }
  .coreArea .dataList .dataItem:nth-of-type(even) {
    padding-left: 20.85%;
  }
  .coreArea .dataList .dataItem:nth-of-type(even) .Txt {
    padding-left: 26.2%;
  }
}
@media (min-width: 1024px) and (max-width: 1540px) {
  .coreArea .dataList .dataItem:nth-of-type(even) .Txt {
    padding-left: 20%;
  }
}
@media (min-width: 1024px) and (max-width: 1350px) {
  .coreArea .dataList .dataItem:nth-of-type(even) .Txt {
    padding-left: 14%;
  }
}
@media (min-width: 1024px) {
  .coreArea .dataList .dataItem:nth-of-type(even) .dot {
    left: -17px;
  }
  .coreArea .dataList .dataItem:nth-of-type(even) .title {
    padding-left: 20px;
  }
  .coreArea .dataList .dataItem:nth-of-type(even) .title:before {
    left: 0;
  }
}
.coreArea .dataList .dataItem .item {
  position: relative;
}
@media (min-width: 1024px) {
  .coreArea .dataList .dataItem .item:hover .dot {
    border-color: #f4b334;
  }
  .coreArea .dataList .dataItem .item:hover .dot:before {
    background-color: #f4b334;
  }
}
.coreArea .dataList .dataItem .dot {
  border: 1px solid rgba(0, 0, 0, 0);
  width: 31px;
  height: 31px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -3px;
  z-index: 1;
  transition: border-color 0.5s;
}
@media (max-width: 1023px) {
  .coreArea .dataList .dataItem .dot {
    display: none;
  }
}
.coreArea .dataList .dataItem .dot:before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  background-color: #0971ce;
  transition: background-color 0.5s;
  position: relative;
  z-index: 1;
}
.coreArea .dataList .dataItem .dot:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9vw;
  height: 1px;
  background: url("../../images/tw/about/line2.png") repeat-x center;
  z-index: 0;
}
@media (max-width: 1540px) {
  .coreArea .dataList .dataItem .dot:after {
    width: 8vw;
  }
}
@media (max-width: 1350px) {
  .coreArea .dataList .dataItem .dot:after {
    width: 6vw;
  }
}
.coreArea .dataList .dataItem .Txt {
  height: 179px;
}
@media (max-width: 1540px) {
  .coreArea .dataList .dataItem .Txt {
    height: 160px;
  }
}
@media (max-width: 1350px) {
  .coreArea .dataList .dataItem .Txt {
    height: 140px;
  }
}
@media (max-width: 1023px) {
  .coreArea .dataList .dataItem .Txt {
    height: auto;
  }
}
.coreArea .dataList .dataItem .title {
  font-size: 22px;
  color: #0971ce;
  position: relative;
  line-height: 1.3;
  letter-spacing: 0.6px;
  margin: 0 0 3px;
  font-weight: 500;
}
@media (max-width: 1540px) {
  .coreArea .dataList .dataItem .title {
    font-size: 20px;
  }
}
@media (max-width: 1350px) {
  .coreArea .dataList .dataItem .title {
    font-size: 18px;
  }
}
@media (max-width: 1023px) {
  .coreArea .dataList .dataItem .title {
    padding-left: 10px;
  }
}
.coreArea .dataList .dataItem .title:before {
  content: "";
  display: block;
  width: 4px;
  height: 21px;
  background-color: #0971ce;
  position: absolute;
  top: 2px;
}
@media (max-width: 1540px) {
  .coreArea .dataList .dataItem .title:before {
    height: 19px;
  }
}
@media (max-width: 1350px) {
  .coreArea .dataList .dataItem .title:before {
    height: 17px;
  }
}
@media (max-width: 1023px) {
  .coreArea .dataList .dataItem .title:before {
    left: 0;
  }
}
.coreArea .dataList .dataItem .subtitle {
  font-size: 16px;
  color: #191919;
  font-weight: 500;
  letter-spacing: 0.6px;
  margin: 0 0 9px;
}
@media (min-width: 1024px) {
  .coreArea .dataList .dataItem .subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 1540px) {
  .coreArea .dataList .dataItem .subtitle {
    font-size: 15px;
  }
}
@media (max-width: 1350px) {
  .coreArea .dataList .dataItem .subtitle {
    font-size: 14px;
  }
}
.coreArea .dataList .dataItem .text {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.7px;
  line-height: 1.5;
}
@media (min-width: 1024px) {
  .coreArea .dataList .dataItem .text {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 1540px) {
  .coreArea .dataList .dataItem .text {
    font-size: 15px;
  }
}
@media (max-width: 1350px) {
  .coreArea .dataList .dataItem .text {
    font-size: 14px;
  }
}
.coreArea:not(.show) .titleBox .title {
  opacity: 0;
  transform: translateY(20px);
}
.coreArea:not(.show) .titleBox .text {
  opacity: 0;
  transform: translateY(20px);
}
.coreArea:not(.show) .topTitle .text {
  opacity: 0;
  transform: translateY(20px);
}
.coreArea:not(.show) .imgBox {
  opacity: 0;
  transform: translateY(20px);
}
.coreArea:not(.show) .dataBox {
  opacity: 0;
  transform: translateY(20px);
}
.coreArea.show .titleBox .title {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s;
}
.coreArea.show .titleBox .text {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s 0.2s;
}
.coreArea.show .topTitle .text {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s 0.4s;
}
.coreArea.show .imgBox {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s 0.6s;
}
.coreArea.show .dataBox {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s 0.8s;
}

.qualityArea {
  padding: 110px 0 94px;
}
@media (max-width: 1023px) {
  .qualityArea {
    padding: 80px 0;
  }
}
@media (max-width: 767px) {
  .qualityArea {
    padding: 60px 0;
  }
}
.qualityArea .titleBox {
  text-align: center;
}
@media (min-width: 1541px) {
  .qualityArea .titleBox {
    margin-bottom: 50px;
  }
}
.qualityArea .titleBox .title {
  display: block;
  padding: 0 0 0 8px;
  letter-spacing: 1.8px;
}
.qualityArea .titleBox .title::before {
  display: none;
}
.qualityArea .titleBox .text {
  width: 100%;
  padding-top: 12px;
  margin: 0 auto;
  max-width: 1033px;
}
.qualityArea .qualityBox {
  padding: 0 135px;
  position: relative;
}
@media (max-width: 1540px) {
  .qualityArea .qualityBox {
    padding: 0 110px;
  }
}
@media (max-width: 1350px) {
  .qualityArea .qualityBox {
    padding: 0 80px;
  }
}
@media (max-width: 1023px) {
  .qualityArea .qualityBox {
    padding: 0 50px;
  }
}
.qualityArea .qualityBox .slickBtnBox {
  position: absolute;
  top: calc(50% - 18px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: calc(100% + 9px);
}
@media (max-width: 1540px) {
  .qualityArea .qualityBox .slickBtnBox {
    width: 100%;
  }
}
.qualityArea .qualityBox .qualityList:not(.slick-slider) {
  display: flex;
}
.qualityArea .qualityBox .qualityList:not(.slick-slider) .qualityItem {
  width: 16.6666666667%;
}
.qualityArea .qualityBox .qualityList:not(.slick-slider) .qualityItem:not(:first-child) {
  display: none;
}
.qualityArea .qualityBox .qualityList .qualityItem {
  padding: 0 22px;
}
@media (max-width: 1540px) {
  .qualityArea .qualityBox .qualityList .qualityItem {
    padding: 0 15px;
  }
}
@media (max-width: 1350px) {
  .qualityArea .qualityBox .qualityList .qualityItem {
    padding: 0 10px;
  }
}
.qualityArea .qualityBox .qualityList .Img {
  padding: 20px;
  border-radius: 50%;
  border: 1px solid #0971ce;
  margin: 0 0 13px;
}
@media (max-width: 1023px) {
  .qualityArea .qualityBox .qualityList .Img {
    padding: 15px;
  }
}
@media (max-width: 767px) {
  .qualityArea .qualityBox .qualityList .Img {
    padding: 10px;
    width: 100%;
    max-width: 150px;
    margin: 0 auto 13px;
  }
}
.qualityArea .qualityBox .qualityList .Txt {
  font-size: 17px;
  color: #191919;
  text-align: center;
  font-family: "Noto Sans TC", "Noto Sans", "Noto Sans JP", "Microsoft JhengHei", sans-serif;
}
@media (max-width: 1540px) {
  .qualityArea .qualityBox .qualityList .Txt {
    font-size: 16px;
  }
}
@media (max-width: 1350px) {
  .qualityArea .qualityBox .qualityList .Txt {
    font-size: 15px;
  }
}
.qualityArea:not(.show) .titleBox .title {
  opacity: 0;
  transform: translateY(20px);
}
.qualityArea:not(.show) .titleBox .text {
  opacity: 0;
  transform: translateY(20px);
}
.qualityArea:not(.show) .qualityBox {
  opacity: 0;
  transform: translateY(20px);
}
.qualityArea.show .titleBox .title {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s;
}
.qualityArea.show .titleBox .text {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s 0.2s;
}
.qualityArea.show .qualityBox {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s 0.4s;
}

.cooperationArea {
  position: relative;
  z-index: 1;
}
.cooperationArea .wrap {
  max-width: 1869px;
}
.cooperationArea .cooperationBox {
  position: relative;
  min-height: 23.23vw;
  display: flex;
  align-items: center;
  padding: 30px 0 37px;
}
@media (max-width: 1540px) {
  .cooperationArea .cooperationBox {
    padding: 25px 0;
  }
}
@media (max-width: 1350px) {
  .cooperationArea .cooperationBox {
    padding: 20px 0;
  }
}
@media (max-width: 1023px) {
  .cooperationArea .cooperationBox {
    height: 117.3vw;
    align-items: start;
    padding-top: 40px;
  }
}
@media (min-width: 1024px) {
  .cooperationArea .cooperationBox:hover img {
    transform: scale(1.05);
  }
}
.cooperationArea .Img {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.cooperationArea .Img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.5s linear;
}
.cooperationArea .Txt {
  position: relative;
  z-index: 1;
  padding: 0 0 0 139px;
  width: 100%;
  max-width: 657px;
}
@media (max-width: 1540px) {
  .cooperationArea .Txt {
    padding-left: 100px;
    max-width: 600px;
  }
}
@media (max-width: 1350px) {
  .cooperationArea .Txt {
    padding-left: 80px;
    max-width: 500px;
  }
}
@media (max-width: 1023px) {
  .cooperationArea .Txt {
    padding: 0 20px;
    max-width: unset;
  }
}
.cooperationArea .Txt .title {
  color: #fff;
  font-size: 26px;
  letter-spacing: 1.2px;
  margin: 0 0 12px;
  font-weight: 500;
}
@media (max-width: 1540px) {
  .cooperationArea .Txt .title {
    font-size: 24px;
    letter-spacing: 1px;
  }
}
@media (max-width: 1350px) {
  .cooperationArea .Txt .title {
    font-size: 22px;
    letter-spacing: 0.8px;
  }
}
@media (max-width: 1023px) {
  .cooperationArea .Txt .title {
    font-size: 26px;
    letter-spacing: 1.2px;
  }
}
@media (max-width: 767px) {
  .cooperationArea .Txt .title {
    font-size: 24px;
    letter-spacing: 1px;
  }
}
@media (max-width: 480px) {
  .cooperationArea .Txt .title {
    font-size: 22px;
    letter-spacing: 0.8px;
  }
}
.cooperationArea .Txt .textEditor {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  font-family: "Noto Sans TC", "Noto Sans", "Noto Sans JP", "Microsoft JhengHei", sans-serif;
  line-height: 1.5;
  letter-spacing: 1px;
}
@media (max-width: 1540px) {
  .cooperationArea .Txt .textEditor {
    font-size: 15px;
    letter-spacing: 0.8px;
  }
}
@media (max-width: 1350px) {
  .cooperationArea .Txt .textEditor {
    font-size: 14px;
    letter-spacing: 0.6px;
  }
}
@media (max-width: 1023px) {
  .cooperationArea .Txt .textEditor {
    font-size: 16px;
    letter-spacing: 1px;
  }
}
@media (max-width: 767px) {
  .cooperationArea .Txt .textEditor {
    font-size: 15px;
    letter-spacing: 0.8px;
  }
}
@media (max-width: 480px) {
  .cooperationArea .Txt .textEditor {
    font-size: 14px;
    letter-spacing: 0.6px;
  }
}
.cooperationArea .Txt .btnBox {
  margin-top: 46px;
}
@media (max-width: 1540px) {
  .cooperationArea .Txt .btnBox {
    margin-top: 40px;
  }
}
@media (max-width: 1350px) {
  .cooperationArea .Txt .btnBox {
    margin-top: 20px;
  }
}
.cooperationArea:not(.show) .title {
  opacity: 0;
  transform: translateY(20px);
}
.cooperationArea:not(.show) .textEditor {
  opacity: 0;
  transform: translateY(20px);
}
.cooperationArea:not(.show) .btnBox {
  opacity: 0;
  transform: translateY(20px);
}
.cooperationArea.show .title {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s;
}
.cooperationArea.show .textEditor {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s 0.2s;
}
.cooperationArea.show .btnBox {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s 0.4s;
}

.globalArea {
  position: relative;
  z-index: 0;
}
.globalArea .mapBox {
  position: absolute;
  bottom: 0;
  right: 14.4vw;
  z-index: 1;
  transform: translate(-12.6%, 23%);
  width: 84.8vw;
  pointer-events: none;
}
@media (max-width: 1023px) {
  .globalArea .mapBox {
    bottom: auto;
    top: -50vw;
    width: 100vw;
    transform: translate(8.6%, 23%);
  }
}
.globalArea .mapBox img {
  width: 100%;
}
.globalArea .mapBox .countryItem {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
}
.globalArea .mapBox .countryItem.taiwan {
  bottom: 47%;
  left: 68.2%;
}
.globalArea .mapBox .countryItem.china {
  bottom: 46.7%;
  right: 38.65%;
  flex-direction: row-reverse;
}
.globalArea .mapBox .countryItem.china .text {
  padding: 0 17px 0 0;
}
@media (max-width: 1540px) {
  .globalArea .mapBox .countryItem.china .text {
    padding: 0 10px 0 0;
  }
}
@media (max-width: 1350px) {
  .globalArea .mapBox .countryItem.china .text {
    padding: 0 5px 0 0;
  }
}
.globalArea .mapBox .countryItem.vietnam {
  bottom: 42%;
  left: 47.6%;
}
.globalArea .mapBox .countryItem .dot {
  width: 7px;
  height: 7px;
  background-color: #f4b334;
  position: relative;
}
.globalArea .mapBox .countryItem .dot::before, .globalArea .mapBox .countryItem .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #f4b334;
  z-index: 1;
  animation: dotAni 1.5s ease-out infinite;
}
.globalArea .mapBox .countryItem .dot::after {
  animation-delay: 0.75s;
}
@keyframes dotAni {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
.globalArea .mapBox .countryItem .text {
  font-size: 14px;
  color: #404040;
  padding: 0 0 0 17px;
  letter-spacing: 0.8px;
  font-weight: 500;
}
@media (max-width: 1540px) {
  .globalArea .mapBox .countryItem .text {
    font-size: 13px;
    letter-spacing: 0.6px;
    padding: 0 0 0 10px;
  }
}
@media (max-width: 1350px) {
  .globalArea .mapBox .countryItem .text {
    font-size: 12px;
    letter-spacing: 0.4px;
    padding: 0 0 0 5px;
  }
}
.globalArea .wrap {
  min-height: 27.8vw;
  display: flex;
  justify-content: end;
}
@media (max-width: 1023px) {
  .globalArea .wrap {
    min-height: auto;
    display: block;
    padding-top: 60vw;
    padding-bottom: 80px;
  }
}
@media (max-width: 767px) {
  .globalArea .wrap {
    padding-bottom: 60px;
  }
}
.globalArea .globalBox {
  width: 35.573vw;
  max-width: 575px;
  padding: 0 0 6px;
  font-weight: 500;
  font-family: "Noto Sans TC", "Noto Sans", "Noto Sans JP", "Microsoft JhengHei", sans-serif;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 1023px) {
  .globalArea .globalBox {
    width: 100%;
    max-width: unset;
    padding: 0;
  }
}
@media (max-width: 767px) {
  .globalArea .globalBox {
    width: 100%;
    max-width: unset;
  }
}
.globalArea .globalBox .title {
  font-size: 24px;
  color: #000000;
  letter-spacing: 1px;
  margin: 0 0 9px;
}
@media (max-width: 1540px) {
  .globalArea .globalBox .title {
    font-size: 22px;
    letter-spacing: 0.8px;
  }
}
@media (max-width: 1350px) {
  .globalArea .globalBox .title {
    font-size: 20px;
    letter-spacing: 0.6px;
  }
}
.globalArea .globalBox .textEditor {
  font-size: 16px;
  padding: 0 0 0 2px;
  letter-spacing: 0.65px;
  line-height: 1.5;
}
@media (max-width: 1540px) {
  .globalArea .globalBox .textEditor {
    font-size: 15px;
    letter-spacing: 0.4px;
  }
}
@media (max-width: 1350px) {
  .globalArea .globalBox .textEditor {
    font-size: 14px;
    letter-spacing: 0.2px;
  }
}
.globalArea:not(.show) .title {
  opacity: 0;
  transform: translateY(20px);
}
.globalArea:not(.show) .textEditor {
  opacity: 0;
  transform: translateY(20px);
}
.globalArea.show .title {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s;
}
.globalArea.show .textEditor {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s 0.2s;
}

.albumList {
  margin: 0 -20px;
}
.albumList .albumItem {
  cursor: pointer;
  padding: 0 20px;
}
.albumList .albumItem img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 1023px) {
  .albumList {
    margin: 0 -15px;
  }
  .albumList .albumItem {
    padding: 0 15px;
  }
}
@media (max-width: 480px) {
  .albumList {
    margin: 0 -8px;
  }
  .albumList .albumItem {
    padding: 0 8px;
  }
}