@charset "UTF-8";
.linkArea .linkList .Txt .text, .linkArea .linkList .Txt .title, .linkArea .linkList .icon, .linkArea .linkList .Img img, .linkArea .linkList .item::after, .digitalArea .text, .digitalArea .title, .digitalArea .Txt::before, .digitalArea .item, .bannerArea .scrollDown .icon, .bannerArea .scrollDown .text, .bannerArea .scrollDown, .bannerArea .bannerDots .slick-dots li button, .arrowBox .arrow svg, .popWindowArea .close::before, .popWindowArea .close::after, .popWindowArea .close {
  transition: all 0.5s ease-in-out;
}

.popWindowArea {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 500;
  width: 100%;
  height: 100vh;
  /*以防有不支援dvh的瀏覽器*/
  height: 100dvh;
  line-height: 1.8;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.7s;
}
.popWindowArea .popWindowMask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: all 0.7s;
}
.popWindowArea .popWindowBox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50%);
  width: 800px;
  max-width: 90%;
  height: 75vh;
  /*以防有不支援dvh的瀏覽器*/
  height: 75dvh;
  opacity: 0;
  background-color: #fff;
  transition: all 0.7s;
}
.popWindowArea .popWindowContent {
  height: 100%;
  overflow-y: auto;
  overflow-x: clip;
}
.popWindowArea .popWindowContent::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
  background-color: #f1f1f1;
}
.popWindowArea .popWindowContent::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #f1f1f1;
}
.popWindowArea .popWindowContent::-webkit-scrollbar-thumb {
  background: #1D9E75;
}
.popWindowArea .popWindowContent p:last-child {
  margin-bottom: 0;
}
.popWindowArea img {
  display: block;
  max-width: 100%;
  height: auto;
  backface-visibility: hidden;
}
.popWindowArea .Txt {
  padding: 30px;
}
.popWindowArea .Txt .popTitle {
  font-size: clamp(18px, 1.302vw, 22px);
  margin-bottom: 25px;
}
.popWindowArea .close {
  width: 46px;
  height: 46px;
  background-color: #1D9E75;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.popWindowArea .close::before, .popWindowArea .close::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 23px;
  width: 25px;
  height: 1px;
  background-color: #fff;
}
.popWindowArea .close::before {
  transform: rotate(45deg);
}
.popWindowArea .close::after {
  transform: rotate(-45deg);
}
@media (min-width: 1181px) {
  .popWindowArea .close:hover {
    background-color: #1D9E75;
  }
  .popWindowArea .close:hover::before {
    transform: rotate(-30deg);
  }
  .popWindowArea .close:hover::after {
    transform: rotate(30deg);
  }
}
.popWindowArea.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.popWindowArea.show .popWindowMask,
.popWindowArea.show .popWindowBox {
  opacity: 1;
}
.popWindowArea.show .popWindowBox {
  transform: translate(-50%, -50%);
}

.arrowBox {
  display: flex;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  gap: clamp(5px, 0.8vw, 14px);
  pointer-events: none;
}
.arrowBox .arrow {
  --w: clamp(40px, 3vw, 57px);
  width: var(--w);
  height: var(--w);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  pointer-events: auto;
  color: #fff;
  background-color: #1D9E75;
  background-image: linear-gradient(90deg, #008CD7 0%, #0ABAB5 16.67%, #2FB54B 33.33%, #1D9E75 66.67%, #1D9E75 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  border: 1px solid #1D9E75;
  transition: background-position 0.5s ease-in-out, border-color 0.5s ease-in-out;
}
.arrowBox .arrow svg {
  aspect-ratio: 17/13;
  width: clamp(16px, 1.5vw, 25px);
  display: block;
}
@media (min-width: 1181px) {
  .arrowBox .arrow:hover {
    background-position: 0 0;
    border-color: transparent;
    color: #fff;
  }
  .arrowBox .arrow:hover svg {
    transform: translateX(3px);
  }
}
.arrowBox .arrow.prev {
  transform: scaleX(-1);
}

.mainArea {
  padding: 0;
}

.bannerArea .bannerBox {
  position: relative;
}
.bannerArea .bannerList {
  position: relative;
  z-index: 1;
}
.bannerArea .bannerList.slick-dotted {
  margin-bottom: 0;
}
.bannerArea .bannerItem .Txt {
  max-width: 1560px;
  padding: clamp(50px, 6.25vw, 120px) 50px 90px;
}
@media (max-width: 1180px) {
  .bannerArea .bannerItem .Txt {
    padding: 40px 20px;
  }
}
@media (max-width: 640px) {
  .bannerArea .bannerItem .Txt {
    padding: 40px 50px 40px 20px;
  }
}
.bannerArea .bannerItem .Txt .textBox {
  display: flex;
  flex-direction: column;
  width: 55%;
  margin-left: 0;
}
@media (max-width: 768px) {
  .bannerArea .bannerItem .Txt .textBox {
    width: 70%;
  }
}
@media (max-width: 640px) {
  .bannerArea .bannerItem .Txt .textBox {
    width: 100%;
  }
}
.bannerArea .bannerItem .Txt .enTitle {
  color: #FFF;
  font-family: "Archivo", "Noto Sans TC", sans-serif;
  font-size: clamp(36px, 3.646vw, 70px);
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.3;
  opacity: 0;
}
@media (max-width: 1280px) {
  .bannerArea .bannerItem .Txt .enTitle {
    font-size: clamp(36px, 3.45vw, 44px);
  }
}
@media (max-width: 480px) {
  .bannerArea .bannerItem .Txt .enTitle {
    font-size: clamp(25px, 7.083vw, 34px);
  }
}
.bannerArea .bannerItem .Txt .enTitle .light {
  color: #1D9E75;
  display: inline-block;
}
.bannerArea .bannerItem .Txt .title {
  color: #FFF;
  font-size: clamp(20px, 2.24vw, 43px);
  font-weight: 700;
  letter-spacing: 0.3px;
  opacity: 0;
  margin-top: clamp(10px, 1.25vw, 24px);
}
@media (max-width: 1440px) {
  .bannerArea .bannerItem .Txt .title {
    margin-top: 0;
  }
}
@media (max-width: 1280px) {
  .bannerArea .bannerItem .Txt .title {
    font-size: clamp(20px, 2.24vw, 26px);
  }
}
.bannerArea .bannerItem .Txt .text {
  color: #CBCBCB;
  font-size: clamp(16px, 1vw, 18px);
  font-weight: 500;
  opacity: 0;
  line-height: 1.65;
  margin-top: clamp(10px, 1.458vw, 28px);
  width: 75%;
}
@media (max-width: 1440px) {
  .bannerArea .bannerItem .Txt .text {
    margin-top: 10px;
  }
}
@media (max-width: 768px) {
  .bannerArea .bannerItem .Txt .text {
    width: 85%;
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  .bannerArea .bannerItem .Txt .text {
    width: 100%;
  }
}
.bannerArea .bannerItem .Txt .btnBox {
  min-width: 220px;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: clamp(20px, 3vw, 56px);
  opacity: 0;
}
.bannerArea .bannerItem .Img img {
  min-height: 500px;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 360px) {
  .bannerArea .bannerItem .Img img {
    min-height: 450px;
  }
}
.bannerArea .slick-current .Txt .enTitle {
  animation: slideUpAnimation 0.8s ease-in-out forwards;
}
.bannerArea .slick-current .Txt .title {
  animation: slideUpAnimation 0.8s 0.4s ease-in-out forwards;
}
.bannerArea .slick-current .Txt .text {
  animation: slideUpAnimation 0.8s 0.8s ease-in-out forwards;
}
.bannerArea .slick-current .Txt .btnBox {
  animation: slideUpAnimation 0.8s 1.2s ease-in-out forwards;
}
.bannerArea .bannerDots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  position: absolute;
  top: 50%;
  right: clamp(20px, 4.948vw, 95px);
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: none;
}
@media (max-width: 1180px) {
  .bannerArea .bannerDots {
    right: 20px;
    gap: 16px;
  }
}
@media (max-width: 480px) {
  .bannerArea .bannerDots {
    right: 12px;
  }
}
.bannerArea .bannerDots .currentNum,
.bannerArea .bannerDots .totalNum {
  color: #fff;
  font-family: "Archivo", "Noto Sans TC", sans-serif;
  font-size: clamp(16px, 1.1vw, 20px);
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1;
}
.bannerArea .bannerDots .currentNum {
  color: #8ED4C8;
}
.bannerArea .bannerDots .bannerDotsList {
  pointer-events: auto;
}
.bannerArea .bannerDots .slick-dots {
  position: static;
  bottom: auto;
  right: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  margin: 0;
  padding: 0;
}
.bannerArea .bannerDots .slick-dots li {
  --dot-w: clamp(18px, 1.31vw, 25px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dot-w);
  height: var(--dot-w);
  margin: 0;
  padding: 0;
}
.bannerArea .bannerDots .slick-dots li button {
  box-sizing: border-box;
  width: 9px;
  height: 9px;
  margin: 0;
  padding: 0;
  border: 1px solid #B1B1B1;
  border-radius: 50%;
  background: transparent;
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
  outline: none;
}
.bannerArea .bannerDots .slick-dots li button::before, .bannerArea .bannerDots .slick-dots li button::after {
  content: none !important;
  display: none !important;
}
.bannerArea .bannerDots .slick-dots li.slick-active button {
  --dot-w: clamp(8px, 0.58vw, 11px);
  width: var(--dot-w);
  height: var(--dot-w);
  border: 0;
  background-color: #fff;
  outline: 1px solid #8ED4C8;
  outline-offset: 6px;
}
@media (max-width: 1180px) {
  .bannerArea .bannerDots .slick-dots li.slick-active button {
    outline-offset: 4px;
    width: 9px;
    height: 9px;
  }
}
.bannerArea .scrollDown {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: absolute;
  bottom: clamp(30px, 2.604vw, 50px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: #fff;
}
@media (max-width: 1180px) {
  .bannerArea .scrollDown {
    display: none;
  }
}
.bannerArea .scrollDown .text {
  display: block;
  color: currentColor;
  font-family: "Archivo", "Noto Sans TC", sans-serif;
  font-size: clamp(14px, 0.85vw, 16px);
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap;
}
.bannerArea .scrollDown .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 19px;
  color: currentColor;
  animation: bannerScrollDownBounce 1.6s ease-in-out infinite;
}
.bannerArea .scrollDown .icon svg {
  display: block;
  width: 13px;
  height: 19px;
  transform: rotate(180deg);
}
@media (min-width: 1181px) {
  .bannerArea .scrollDown:hover {
    color: #8ED4C8;
  }
  .bannerArea .scrollDown:hover .icon {
    animation-play-state: paused;
  }
}

.aboutArea {
  padding-top: 95px;
  overflow-x: clip;
  position: relative;
  z-index: 5;
}
@media (max-width: 1280px) {
  .aboutArea {
    padding-top: 60px;
  }
}
@media (max-width: 840px) {
  .aboutArea {
    padding-top: clamp(30px, 4.77vw, 40px);
  }
}
.aboutArea .wrap {
  max-width: 100%;
  padding: 0;
}
.aboutArea .aboutBox {
  display: flex;
  align-items: flex-end;
  gap: 0;
}
@media (max-width: 840px) {
  .aboutArea .aboutBox {
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0;
  }
}
.aboutArea .Img {
  width: 37.9%;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: clamp(-104px, -5.521vw, -50px);
  z-index: 2;
}
@media (max-width: 1280px) {
  .aboutArea .Img {
    width: 32%;
  }
}
@media (max-width: 1180px) {
  .aboutArea .Img {
    margin-bottom: -50px;
  }
}
@media (max-width: 840px) {
  .aboutArea .Img {
    margin-left: 30px;
    margin-bottom: -120px;
    margin-right: auto;
    width: 50%;
  }
}
@media (max-width: 640px) {
  .aboutArea .Img {
    width: 60%;
    margin-left: 20px;
    margin-bottom: -60px;
  }
}
@media (max-width: 414px) {
  .aboutArea .Img {
    width: 100%;
    margin-left: 0;
    padding: 0 20px;
  }
}
.aboutArea .Img img {
  width: 100%;
  height: auto;
  display: block;
  display: block;
}
.aboutArea .infoBox {
  --margin-left: 21.8vw;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: clamp(50px, 5.3vw, 100px);
  gap: clamp(20px, 4.167vw, 78px) 0;
  margin-left: calc(var(--margin-left) * -1);
  height: 100%;
  position: relative;
  isolation: isolate;
}
@media (max-width: 1280px) {
  .aboutArea .infoBox {
    padding-bottom: clamp(50px, 5.3vw, 60px);
    gap: clamp(20px, 4.167vw, 48px) 0;
  }
}
.aboutArea .infoBox::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(47, 181, 75, 0.18) 5.98%, rgba(10, 186, 181, 0.18) 50.72%, rgba(0, 140, 215, 0.18) 95.45%);
  clip-path: inset(0 0 calc(var(--infoWipe, 0) * 1%) 0);
  pointer-events: none;
}
@media (max-width: 1180px) {
  .aboutArea .infoBox {
    --margin-left: 12vw;
  }
}
@media (max-width: 840px) {
  .aboutArea .infoBox {
    padding-top: 80px;
  }
}
.aboutArea .Img2 {
  width: clamp(200px, 20vw, 314px);
  max-width: 100%;
  align-self: flex-end;
  margin-top: -95px;
  margin-right: 11.3vw;
}
@media (max-width: 1280px) {
  .aboutArea .Img2 {
    width: clamp(180px, 15.625vw, 200px);
    margin-top: -65px;
  }
}
@media (max-width: 840px) {
  .aboutArea .Img2 {
    width: clamp(150px, 25vw, 200px);
    margin-top: -35px;
    margin-right: 28px;
  }
}
@media (max-width: 640px) {
  .aboutArea .Img2 {
    display: none;
  }
}
.aboutArea .Img2 img {
  width: 100%;
  height: auto;
  display: block;
}
.aboutArea .Txt {
  width: calc(100% - var(--margin-left));
  align-self: flex-end;
  padding: 0 15vw 0 7.2vw;
}
@media (max-width: 1680px) {
  .aboutArea .Txt {
    padding: 0 10vw 0 5vw;
  }
}
@media (max-width: 1440px) {
  .aboutArea .Txt {
    padding: 0 clamp(50px, 5.6vw, 80px);
  }
}
@media (max-width: 1180px) {
  .aboutArea .Txt {
    padding: 0 30px;
  }
}
@media (max-width: 640px) {
  .aboutArea .Txt {
    padding: 0 20px;
  }
}
.aboutArea .Txt .titleBox {
  text-align: left;
  margin-bottom: clamp(10px, 3vw, 50px);
}
.aboutArea .Txt .bottomBox {
  width: 78.5%;
  margin-left: auto;
}
@media (max-width: 1440px) {
  .aboutArea .Txt .bottomBox {
    width: 90%;
  }
}
@media (max-width: 640px) {
  .aboutArea .Txt .bottomBox {
    width: 100%;
  }
}
.aboutArea .Txt .text {
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.5;
  font-weight: 500;
  color: #626262;
}
.aboutArea .Txt .btnBox {
  margin-top: clamp(20px, 2.813vw, 54px);
}

.digitalArea {
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: #fff;
  background: url("../../images/tw/digital_bg.jpg") no-repeat;
  background-size: cover;
}
.digitalArea .wrap {
  max-width: 100%;
  padding-left: clamp(20px, 3.1vw, 56px);
  padding-right: clamp(20px, 3.1vw, 48px);
}
.digitalArea .digitalBox {
  position: relative;
  z-index: 1;
}
.digitalArea .digitalList .slick-list {
  overflow: visible;
}
.digitalArea .digitalList .slick-list .slick-track {
  display: flex;
  align-items: stretch;
}
.digitalArea .digitalList .slick-list .slick-track .slick-slide {
  height: auto !important;
}
.digitalArea .digitalList .slick-list .slick-track .slick-slide > div,
.digitalArea .digitalList .slick-list .slick-track .slick-slide .digitalItem,
.digitalArea .digitalList .slick-list .slick-track .slick-slide .item {
  height: 100% !important;
}
.digitalArea .item {
  --padding-inline: clamp(15px, 2.813vw, 54px);
  display: flex;
  min-height: clamp(280px, 22.86vw, 439px);
  padding: clamp(135px, 10.313vw, 198px) var(--padding-inline) 40px;
  border-left: 1px solid rgba(182, 182, 182, 0.8);
  box-sizing: border-box;
}
@media (max-width: 1440px) {
  .digitalArea .item {
    --padding-inline: clamp(20px, 2.1vw, 30px);
  }
}
@media (max-width: 840px) {
  .digitalArea .item {
    padding: 80px var(--padding-inline) 40px;
    min-height: unset;
  }
}
@media (min-width: 1181px) {
  .digitalArea .item:hover .Txt::before {
    background-color: #8ED4C8;
    height: 100%;
  }
  .digitalArea .item:hover .title {
    color: #8ED4C8;
  }
}
.digitalArea .Txt {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vw, 26px);
  position: relative;
}
.digitalArea .Txt::before {
  content: "";
  position: absolute;
  left: calc(var(--padding-inline) * -1 - 1.5px);
  top: 8px;
  width: 2px;
  height: clamp(40px, 2vw, 49px);
  background-color: #fff;
  pointer-events: none;
}
@media (max-width: 1180px) {
  .digitalArea .Txt::before {
    top: 0px;
  }
}
@media (max-width: 480px) {
  .digitalArea .Txt::before {
    display: none;
  }
}
.digitalArea .title {
  font-family: "Archivo", "Noto Sans TC", sans-serif;
  font-size: clamp(46px, 3.4vw, 65px);
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1;
  color: #fff;
}
@media (max-width: 1280px) {
  .digitalArea .title {
    font-size: clamp(38px, 3.3vw, 42px);
  }
}
@media (max-width: 480px) {
  .digitalArea .title {
    font-size: clamp(32px, 10.5vw, 42px);
  }
}
.digitalArea .text {
  font-family: "Noto Sans TC", sans-serif;
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 500;
  line-height: 1.5;
  color: #f2f2f2;
}
@media (max-width: 480px) {
  .digitalArea .text {
    font-size: clamp(13px, 3.8vw, 14px);
  }
}

/*
 * 首頁核心優勢
 * 設計稿基準：wrap 內容寬 1399px、logo 圓 493px。所有尺寸與位置都換算成 --logoBox-w
 * 的倍率，要整體縮放只改 --logoBox-w 即可。item 的水平位移由 Blade 算好，
 * 以 inline 的 --arc-x 帶進來（見 partials/marqueepic_advantage.blade.php 的 $arcSet）。
 */
.advantageArea {
  --logoBox-w: min(493px, calc((100vw - 100px) * 0.3521), calc((100vh - 140px) / 1.6));
  --bgW: calc(var(--logoBox-w) * 1.7);
  --leftShift: 0px;
  --imgBox: calc(var(--logoBox-w) * 0.23);
  --rowH: calc(var(--logoBox-w) * 0.3);
  overflow-x: clip;
}
@media (max-width: 1180px) {
  .advantageArea {
    --logoBox-w: min(493px, calc((100vw - 30px) / 2.4), calc((100vh - 140px) / 1.6));
    --leftShift: max(0px, calc(var(--logoBox-w) * 2.82556 - (100vw - 30px)));
    overflow-x: clip;
  }
}
@media (max-width: 840px) {
  .advantageArea {
    --bgW: calc(var(--logoBox-w) * 1.3);
    --logoBox-w: min(340px, 81.5vw);
    --leftShift: 0px;
    --imgBox: clamp(64px, 9.5vw, 84px);
  }
}
@media (max-width: 480px) {
  .advantageArea {
    --bgW: calc(var(--logoBox-w) * 1.15);
  }
}
.advantageArea .wrap {
  max-width: 1566px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 1180px) {
  .advantageArea .wrap {
    padding-left: 0;
  }
}
@media (max-width: 840px) {
  .advantageArea .wrap {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    padding-left: 30px;
  }
}
@media (max-width: 768px) {
  .advantageArea .wrap {
    padding-left: 20px;
  }
}
.advantageArea .titleBox {
  width: 100%;
  margin-bottom: 24px;
}
.advantageArea .titleBox .text {
  margin-top: clamp(10px, 1.667vw, 32px);
}
@media (max-width: 840px) {
  .advantageArea .titleBox {
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
  }
}
.advantageArea .advantageMain {
  width: 100%;
  display: flex;
  align-items: center;
}
@media (max-width: 840px) {
  .advantageArea .advantageMain {
    flex-direction: column;
    align-items: center;
  }
}
.advantageArea .leftBox {
  --bgScale: 0.95;
  width: var(--bgW);
  margin-left: calc(var(--leftShift) * -1);
  aspect-ratio: 1;
  flex: none;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.advantageArea .leftBox::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0, 140, 215, 0.15) -0.43%, rgba(10, 186, 181, 0.15) 49.56%, rgba(47, 181, 75, 0.15) 99.56%);
  transform: scale(var(--bgScale));
  pointer-events: none;
  will-change: transform;
}
.advantageArea .arcLine {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--logoBox-w) * var(--svg-w) / 493);
  height: calc(var(--logoBox-w) * var(--svg-h) / 493);
  overflow: visible;
  pointer-events: none;
}
.advantageArea .arcLine .arcRing {
  fill: none;
  stroke: #d5d5d5;
  stroke-width: 2;
}
.advantageArea .arcLine .arcEnd {
  fill: #a0a0a0;
}
.advantageArea .arcLine .arcLink {
  fill: none;
  stroke: #2fb54b;
  stroke-width: 1.5;
}
.advantageArea .arcLine .arcDot {
  fill: #fff;
  stroke: #1D9E75;
  stroke-width: 1;
}
.advantageArea .arcLine .arcDotIn {
  fill: #2fb54b;
}
@media (max-width: 840px) {
  .advantageArea .arcLine {
    display: none;
  }
}
.advantageArea .advantageBox {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
@media (max-width: 840px) {
  .advantageArea .advantageBox {
    width: 100%;
    flex: none;
  }
}
@media (max-width: 840px) {
  .advantageArea .advantageList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 36px) clamp(20px, 3vw, 30px);
    align-items: start;
  }
}
@media (max-width: 640px) {
  .advantageArea .advantageList {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
}
.advantageArea .advantageItem {
  display: flex;
  align-items: center;
  min-height: var(--rowH);
  margin-left: calc(var(--logoBox-w) * var(--arc-x) - var(--imgBox) / 2 + var(--logoBox-w) * 0.89757 - var(--bgW) / 2);
}
@media (max-width: 840px) {
  .advantageArea .advantageItem {
    min-height: 0;
    margin-left: 0;
  }
}
.advantageArea .logoBox {
  --ringSize: 1;
  --photoSize: calc(var(--logoBox-w) - 50px);
  --photoBorder: 14px;
  --logoFrame: calc(var(--logoBox-w) - 112px);
  --logoPad: calc(var(--logoBox-w) * 0.1);
  width: calc(var(--logoBox-w) * var(--ringSize));
  height: calc(var(--logoBox-w) * var(--ringSize));
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  position: relative;
  flex: none;
  background: linear-gradient(90deg, rgba(0, 140, 215, 0.8) -0.43%, rgba(10, 186, 181, 0.8) 49.56%, rgba(47, 181, 75, 0.8) 99.56%);
}
.advantageArea .logoBox::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--photoSize);
  height: var(--photoSize);
  border-radius: 50%;
  background: url(../../images/tw/advantage_bg.jpg) no-repeat;
  background-size: cover;
  z-index: 2;
  border: var(--photoBorder) solid #fff;
  pointer-events: none;
}
.advantageArea .logoBox img {
  width: var(--logoFrame);
  height: var(--logoFrame);
  -o-object-fit: contain;
     object-fit: contain;
  position: relative;
  z-index: 3;
  padding: var(--logoPad);
}
@media (max-width: 840px) {
  .advantageArea .logoBox {
    --ringSize: 0.9;
    --photoSize: calc(var(--logoBox-w) * 0.8);
    --photoBorder: calc(var(--logoBox-w) * 0.0284);
    --logoFrame: calc(var(--logoBox-w) - 112px);
    --logoPad: clamp(10px, 5vw, 30px);
  }
}
@media (max-width: 480px) {
  .advantageArea .logoBox {
    --ringSize: 0.8;
    --photoSize: calc(var(--logoBox-w) * 0.7);
    --photoBorder: calc(var(--logoBox-w) * 0.02);
  }
}
.advantageArea .item {
  display: flex;
  align-items: center;
  gap: calc(var(--logoBox-w) * 0.05274);
}
@media (max-width: 840px) {
  .advantageArea .item {
    align-items: flex-start;
    gap: 14px;
  }
}
@media (max-width: 640px) {
  .advantageArea .item {
    align-items: center;
  }
}
.advantageArea .Img {
  --w: calc(var(--imgBox) * 0.88034);
  width: var(--imgBox);
  height: var(--imgBox);
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.advantageArea .Img img {
  width: calc(var(--imgBox) * 0.52143);
  height: calc(var(--imgBox) * 0.52143);
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
@media (max-width: 1280px) {
  .advantageArea .Img img {
    width: calc(var(--imgBox) * 0.44286);
    height: calc(var(--imgBox) * 0.44286);
  }
}
.advantageArea .Img::before {
  content: "";
  pointer-events: none;
  width: var(--w);
  height: var(--w);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: -1;
  border-radius: inherit;
}
.advantageArea .Img::after {
  content: "";
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0, 140, 215, 0.8) -0.43%, rgba(10, 186, 181, 0.8) 49.56%, rgba(47, 181, 75, 0.8) 99.56%);
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  pointer-events: none;
}
.advantageArea .Txt {
  flex: 1;
  min-width: 0;
  max-width: 550px;
}
.advantageArea .Txt .title {
  color: #1D9E75;
  font-size: clamp(16px, 1.3vw, 22px);
  font-weight: 500;
  letter-spacing: 0.5px;
}
.advantageArea .Txt .text {
  color: #626262;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 500;
  margin-top: 5px;
}
@media (max-width: 840px) {
  .advantageArea .Txt {
    max-width: none;
  }
  .advantageArea .Txt .text {
    margin-top: 6px;
  }
}

.linkArea {
  padding: clamp(30px, 7.187vw, 138px) 0 40px;
  overflow-x: clip;
  position: relative;
}
@media (max-width: 1280px) {
  .linkArea {
    padding-top: clamp(30px, 7.187vw, 60px);
  }
}
.linkArea::after {
  content: "";
  aspect-ratio: 1920/865;
  background: url(../../images/tw/application_bg.jpg) no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}
.linkArea .wrap {
  padding-left: 80px;
  max-width: 1465px;
}
.linkArea .titleBox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-right: -14px;
  gap: 20px;
  margin-bottom: clamp(20px, 5.729vw, 110px);
}
@media (max-width: 1280px) {
  .linkArea .titleBox {
    margin-bottom: clamp(20px, 5.729vw, 44px);
  }
}
@media (max-width: 1180px) {
  .linkArea .titleBox {
    margin-right: 0;
    gap: 10px;
  }
}
.linkArea .titleBox .right {
  width: 53%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
@media (max-width: 1180px) {
  .linkArea .titleBox .right {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .linkArea .titleBox .right {
    flex-direction: column;
    align-items: flex-start;
  }
}
.linkArea .titleBox .text {
  text-align: left;
}
.linkArea .titleBox .btnBox {
  margin-top: 0;
}
.linkArea .listBox {
  width: calc(50% + 50dvw);
}
.linkArea .slick-list {
  padding-right: 6.458vw;
}
@media (max-width: 1180px) {
  .linkArea .slick-list {
    padding-right: 15vw;
  }
}
@media (max-width: 640px) {
  .linkArea .slick-list {
    padding-right: 150px;
  }
}
@media (max-width: 480px) {
  .linkArea .slick-list {
    padding-right: 50px;
  }
}
@media (max-width: 360px) {
  .linkArea .slick-list {
    padding-right: 30px;
  }
}
.linkArea .linkList {
  --padding: clamp(6px, 0.807vw, 15.5px);
  margin-right: calc(-50dvw + 50%);
  margin-left: calc(-1 * var(--padding));
}
@media (max-width: 480px) {
  .linkArea .linkList.slick-dotted.slick-slider {
    margin-bottom: 20px;
  }
}
.linkArea .linkList .linkItem {
  padding: 0 var(--padding);
}
.linkArea .linkList .item {
  position: relative;
  overflow: hidden;
}
.linkArea .linkList .item::before, .linkArea .linkList .item::after {
  content: "";
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.linkArea .linkList .item::after {
  z-index: 1;
  background: linear-gradient(180deg, rgba(102, 102, 102, 0) 27%, rgba(0, 0, 0, 0.4) 89%);
}
.linkArea .linkList .item::before {
  z-index: 1;
  background: rgba(142, 212, 200, 0.8);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.45s ease;
}
@media (min-width: 1181px) {
  .linkArea .linkList .item:hover::after {
    opacity: 0;
  }
  .linkArea .linkList .item:hover::before {
    clip-path: inset(0 0 0 0);
  }
  .linkArea .linkList .item:hover .Txt .icon {
    background-color: #5D7772;
  }
  .linkArea .linkList .item:hover .Txt .title,
  .linkArea .linkList .item:hover .Txt .text {
    color: #363636;
  }
  .linkArea .linkList .item:hover .Txt .btnBox {
    grid-template-rows: 1fr;
  }
  .linkArea .linkList .item:hover .Txt .btnBox .btnIcon::before {
    opacity: 1;
    animation: rotate 1.5s linear infinite;
  }
}
.linkArea .linkList .Img {
  width: 100%;
  overflow: hidden;
}
.linkArea .linkList .Img img {
  width: 100%;
  height: auto;
  display: block;
}
.linkArea .linkList .icon {
  position: relative;
  z-index: 2;
  aspect-ratio: 126/130;
  width: clamp(40px, 3.281vw, 63px);
  margin-bottom: clamp(10px, 1.021vw, 20px);
  flex-shrink: 0;
  background-color: #fff;
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.linkArea .linkList .icon img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0;
}
.linkArea .linkList .Txt {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: clamp(16px, 1.1vw, 20px) clamp(16px, 1.771vw, 34px) clamp(16px, 1.771vw, 34px);
}
.linkArea .linkList .Txt .linkWrap {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}
.linkArea .linkList .Txt .title {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  color: #fff;
  font-size: clamp(20px, 1.302vw, 25px);
  font-weight: 500;
  letter-spacing: 0.5px;
}
@media (max-width: 1280px) {
  .linkArea .linkList .Txt .title {
    font-size: clamp(18px, 1.72vw, 22px);
  }
}
.linkArea .linkList .Txt .text {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  color: #F1F1F1;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 400;
  line-height: 1.5;
  margin-top: clamp(5px, 0.677vw, 13px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.linkArea .linkList .Txt .btnBox {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  transition: grid-template-rows 0.45s ease;
}
.linkArea .linkList .Txt .btnBox .btnBoxInner {
  overflow: hidden;
  min-height: 0;
}
.linkArea .linkList .Txt .btnBox .btn {
  margin: clamp(5px, 2.083vw, 40px) 0 5px;
  pointer-events: auto;
}
@media (max-width: 1440px) {
  .linkArea .linkList .Txt .btnBox .btn {
    margin: clamp(5px, 1.389vw, 20px) 0 5px;
  }
}
.linkArea .linkList .Txt .btnBox .btn.bgTransparent {
  min-width: 154px;
  width: -moz-fit-content;
  width: fit-content;
}
.linkArea .bottomBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: clamp(20px, 3.125vw, 60px) 0 0 15px;
}
@media (max-width: 1280px) {
  .linkArea .bottomBox {
    margin-top: clamp(20px, 3.125vw, 32px);
  }
}
@media (max-width: 480px) {
  .linkArea .bottomBox {
    justify-content: center;
    margin: 0;
  }
}
.linkArea .bottomBox .dotsBox {
  display: flex;
  align-items: center;
  min-height: 20px;
}
.linkArea .bottomBox .dotsBox .slick-dots {
  position: static;
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 26px;
  width: auto;
  margin: 0;
  padding: 0;
}
@media (max-width: 480px) {
  .linkArea .bottomBox .dotsBox .slick-dots {
    gap: 16px;
  }
}
.linkArea .bottomBox .dotsBox .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}
.linkArea .bottomBox .dotsBox .slick-dots li button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid #B1B1B1;
  border-radius: 50%;
  background: transparent;
  font-size: 0;
  line-height: 0;
}
.linkArea .bottomBox .dotsBox .slick-dots li button::before {
  content: none !important;
  display: none !important;
}
.linkArea .bottomBox .dotsBox .slick-dots li.slick-active button {
  width: 11px;
  height: 11px;
  background-color: #1D9E75;
  border-color: #1D9E75;
}
@media (max-width: 480px) {
  .linkArea .bottomBox .arrowBox {
    display: none;
  }
}

.partnerArea {
  padding: clamp(40px, 7.292vw, 140px) 0 clamp(60px, 4.531vw, 87px);
  position: relative;
}
@media (max-width: 1280px) {
  .partnerArea {
    padding: clamp(40px, 7.292vw, 60px) 0 60px;
  }
}
@media (max-width: 1180px) {
  .partnerArea {
    padding: clamp(30px, 6.78vw, 80px) 0 clamp(30px, 4.8vw, 55px);
  }
}
.partnerArea::after {
  content: "";
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(../../images/tw/partner_bg.jpg) no-repeat;
  background-size: cover;
  z-index: -1;
}
.partnerArea .titleBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 20px;
  text-align: left;
  margin-bottom: clamp(30px, 3.229vw, 50px);
}
@media (max-width: 1280px) {
  .partnerArea .titleBox {
    margin-bottom: clamp(30px, 3.229vw, 36px);
  }
}
@media (max-width: 1180px) {
  .partnerArea .titleBox {
    text-align: center;
  }
}
.partnerArea .titleBox .title {
  width: 35%;
}
@media (max-width: 1180px) {
  .partnerArea .titleBox .title {
    width: 100%;
  }
}
.partnerArea .titleBox .text {
  width: 45.8%;
}
@media (max-width: 1180px) {
  .partnerArea .titleBox .text {
    width: 100%;
  }
}
.partnerArea .partnerBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28.95px;
  overflow: hidden;
  padding-top: 42px;
  --gap: 22.22px;
}
@media (max-width: 1280px) {
  .partnerArea .partnerBox {
    gap: 22px;
  }
}
@media (max-width: 1180px) {
  .partnerArea .partnerBox {
    padding-top: 0px;
  }
}
@media (max-width: 480px) {
  .partnerArea .partnerBox {
    --gap: 15px;
  }
}
@media (min-width: 1181px) {
  .partnerArea .partnerBox:hover .partnerTrack {
    animation-play-state: paused;
  }
}
.partnerArea .partnerTrack {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  --partner-duration: 40s;
}
.partnerArea .partnerTrack.toLeft {
  animation: partnerMarqueeLeft var(--partner-duration) linear infinite;
}
.partnerArea .partnerTrack.toRight {
  animation: partnerMarqueeRight var(--partner-duration) linear infinite;
}
.partnerArea .partnerList {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.partnerArea .partnerItem {
  flex: 0 0 auto;
  margin-right: var(--gap);
}
.partnerArea .item {
  position: relative;
}
.partnerArea .item .linkWrap {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
@media (min-width: 1181px) {
  .partnerArea .item:hover .Img {
    transform: translateY(-26px);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  }
}
.partnerArea .Img {
  aspect-ratio: 250/111;
  width: clamp(200px, 20vw, 252px);
  transition: all 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (max-width: 1280px) {
  .partnerArea .Img {
    width: clamp(180px, 19vw, 200px);
  }
}
@media (max-width: 480px) {
  .partnerArea .Img {
    width: clamp(150px, 42vw, 200px);
  }
}
.partnerArea .Img img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
.partnerArea .btnBox {
  margin-top: clamp(30px, 2.85vw, 54px);
}
.partnerArea .btnBox .btn {
  margin: 0 auto;
}

.ctaArea {
  position: relative;
  padding: clamp(60px, 5.5vw, 104px) 0 88px;
  overflow: hidden;
}
.ctaArea .Img {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.ctaArea .Img img {
  width: 100%;
  height: auto;
  display: block;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.ctaArea .Txt {
  color: #FFF;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.ctaArea .title {
  font-size: clamp(24px, 2.5vw, 40px);
}
@media (max-width: 1280px) {
  .ctaArea .title {
    font-size: clamp(24px, 2.2vw, 26px);
  }
}
.ctaArea .text {
  font-size: clamp(15px, 1.8vw, 17px);
  margin-top: clamp(10px, 1.5vw, 22px);
}
.ctaArea .btnBox {
  position: relative;
  aspect-ratio: 1/1;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 50%;
  border: 1px solid #FFF;
  background: rgba(244, 244, 244, 0.1);
  margin: clamp(30px, 3.5vw, 50px) auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ctaArea .btnBox::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #8ED4C8;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
@media (min-width: 1181px) {
  .ctaArea .btnBox:hover::before {
    opacity: 1;
    animation: rotate 1.5s linear infinite;
  }
}
.ctaArea .btnBox .more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 1.5vw, 25px);
  padding: clamp(20px, 2vw, 36px) clamp(15px, 2vw, 24px) 15px;
}
@media (max-width: 1280px) {
  .ctaArea .btnBox .more {
    gap: clamp(5px, 1.5vw, 16px);
  }
}
.ctaArea .btnBox .more .btnText {
  width: 100%;
  color: #FFF;
  text-align: center;
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 500;
  max-width: clamp(82px, 6.2vw, 115px);
}
.ctaArea .btnBox .more .btnIcon {
  aspect-ratio: 17/13;
  width: clamp(24px, 2vw, 32px);
  height: 100%;
  color: #fff;
}
.ctaArea .btnBox .more .btnIcon svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 1280px) {
  .ctaArea .btnBox .more .btnIcon {
    width: clamp(16px, 1.6vw, 20px);
  }
}
.ctaArea .bottomTxt {
  position: absolute;
  bottom: -15px;
  right: 0;
  left: auto;
  width: -moz-max-content;
  width: max-content;
  white-space: nowrap;
  animation: riverBounceRtl 15s ease-in-out infinite alternate;
  pointer-events: none;
}
@media (max-width: 1280px) {
  .ctaArea .bottomTxt {
    bottom: -10px;
  }
}
@media (max-width: 480px) {
  .ctaArea .bottomTxt {
    animation-duration: 8s;
    bottom: -1.5vw;
  }
}
.ctaArea .bottomTxt .text {
  color: #FFF;
  text-align: right;
  font-family: "Archivo", "Noto Sans TC", sans-serif;
  font-size: clamp(58px, 6.25vw, 120px);
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 0.8;
}
@media (max-width: 1280px) {
  .ctaArea .bottomTxt .text {
    font-size: clamp(52px, 6.25vw, 70px);
  }
}
@media (max-width: 480px) {
  .ctaArea .bottomTxt .text {
    font-size: clamp(36px, 8.5vw, 50px);
  }
}