.investorInformationArea .investorInformationItem .Txt .infoRow span,
.investorInformationArea .investorInformationItem .Txt .infoRow a, .investorInformationArea .investorInformationItem, .investorDataArea .investorDataItem .cardBox .card .cardList li a::after, .investorServicesArea .investorServicesItem .title, .investorServicesArea .investorServicesItem .no, .investorServicesArea .investorServicesItem, .contentBox .rightBox {
  transition: all 0.5s ease-in-out;
}

body.investorPage .outerWrap {
  overflow-x: clip;
  overflow-y: clip;
}

.mainArea {
  background-color: #ffffff;
  padding-bottom: 0 !important;
}
.mainArea.insPage {
  background-color: #fafafa;
}
.mainArea .titleBox {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  text-align: left;
}
.mainArea .titleBox .icon-title-top {
  width: 64px;
  height: 18px;
  flex-shrink: 0;
}
.mainArea .titleBox .title {
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .mainArea .titleBox .title {
    padding: 10px 0 20px;
  }
}
.mainArea .titleBox .title .enTitle {
  display: block;
  color: #000;
  font-size: clamp(32px, 2.5vw, 48px);
  font-weight: 700;
  letter-spacing: 2.48px;
  line-height: 1.1;
}
@media (max-width: 768px) {
  .mainArea .titleBox .title .enTitle {
    display: none;
  }
}
.mainArea .titleBox .title .twTitle {
  display: block;
  color: #00a84d;
  font-size: clamp(26px, 1.9792vw, 38px);
  font-weight: 400;
  letter-spacing: 2.28px;
  line-height: 1.2;
}
.mainArea .text {
  color: #666666;
  font-size: clamp(16px, 0.9375vw, 18px);
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  line-height: 1.71;
  letter-spacing: 0.85px;
}

.contentBox {
  display: grid;
  grid-template-columns: 0.9fr 3.1fr;
}
@media (max-width: 1180px) {
  .contentBox {
    grid-template-columns: minmax(0, 1fr);
  }
}
.contentBox.single, .contentBox.compare {
  grid-template-columns: minmax(0, 1fr);
}
.contentBox .topBox .newsInfoBox {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
@media (max-width: 480px) {
  .contentBox .topBox .newsInfoBox {
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
  }
}
.contentBox .leftBox {
  padding: 0 62px 0 0;
  align-self: start;
}
@media (min-width: 1181px) {
  .contentBox .leftBox {
    position: sticky;
    top: 130px;
  }
}
@media (min-width: 1441px) {
  .contentBox .leftBox {
    top: 150px;
  }
}
@media (max-width: 1180px) {
  .contentBox .leftBox {
    padding: 0 0 30px 0;
    position: static;
    top: auto;
  }
}
.contentBox .rightBox.ajaxDisabled {
  opacity: 0.15;
  pointer-events: none;
}
.contentBox .rightBox .classNote {
  padding: 0 0 15px 0;
}

.investorServicesArea {
  position: relative;
  padding: 0 0 clamp(40px, 2.6042vw, 50px);
  background-color: #fff;
}
.investorServicesArea .cellBox .cellImg-2 {
  position: absolute;
  width: clamp(100px, 7.5521vw, 145px);
  bottom: -10%;
  right: 2.5%;
}
.investorServicesArea .cellBox .cellImg-3 {
  position: absolute;
  width: clamp(100px, 7.5521vw, 145px);
  top: -10%;
  left: -2.5%;
}
.investorServicesArea .topBox {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(20px, 1.7188vw, 33px);
}
@media (max-width: 640px) {
  .investorServicesArea .topBox {
    flex-direction: column;
  }
}
.investorServicesArea .titleBox {
  flex: 1;
}
@media (max-width: 640px) {
  .investorServicesArea .titleBox {
    width: 100%;
  }
}
.investorServicesArea .titleBox .text {
  max-width: 704px;
  padding-top: 20px;
}
@media (max-width: 768px) {
  .investorServicesArea .titleBox .text {
    padding-top: 0;
  }
}
.investorServicesArea .publicBox {
  flex-shrink: 0;
  width: 100%;
  max-width: 280px;
  text-align: left;
  padding: clamp(20px, 1.7188vw, 33px) clamp(20px, 2.1354vw, 41px) clamp(20px, 1.9271vw, 37px);
  background-color: #fafafa;
}
@media (max-width: 640px) {
  .investorServicesArea .publicBox {
    max-width: 100%;
  }
}
.investorServicesArea .publicBox .publicLabel {
  color: #000;
  font-size: clamp(16px, 0.9375vw, 18px);
  font-weight: 500;
  letter-spacing: 0.8px;
  line-height: 1.5;
  margin-bottom: 4px;
}
.investorServicesArea .publicBox .publicCode {
  color: #00b2b3;
  font-size: clamp(48px, 2.8125vw, 54px);
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 1;
}
.investorServicesArea .publicBox .btnBox {
  margin-left: 1px;
  margin-top: 11px;
}
.investorServicesArea .publicBox .btnBox .btn.color {
  min-width: 198px;
}
.investorServicesArea .investorServicesList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.investorServicesArea .investorServicesItem {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: calc(50% - 10px);
  border-bottom: 1px solid #d0d0d0;
  padding: clamp(20px, 1.8229vw, 35px) clamp(20px, 2.0833vw, 40px);
  gap: 20px;
}
@media (max-width: 480px) {
  .investorServicesArea .investorServicesItem {
    width: calc(50% - 5px);
    padding: clamp(20px, 1.8229vw, 35px) 0;
    gap: 10px;
  }
}
.investorServicesArea .investorServicesItem .link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
@media (min-width: 641px) {
  .investorServicesArea .investorServicesItem .link {
    display: none;
  }
}
.investorServicesArea .investorServicesItem .left,
.investorServicesArea .investorServicesItem .right {
  display: flex;
  align-items: center;
}
.investorServicesArea .investorServicesItem .left {
  gap: 11px;
}
@media (max-width: 768px) {
  .investorServicesArea .investorServicesItem .left {
    gap: 5px;
  }
}
.investorServicesArea .investorServicesItem .no {
  color: #00624f;
  font-size: clamp(16px, 1.0417vw, 20px);
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1;
}
.investorServicesArea .investorServicesItem .title {
  color: #00624f;
  font-size: clamp(16px, 1.0417vw, 20px);
  font-weight: 500;
  letter-spacing: 1.2px;
  line-height: 1.4;
}
.investorServicesArea .investorServicesItem .btnBox {
  margin-top: 0;
}
.investorServicesArea .investorServicesItem .btnBox .btn.color {
  min-width: 198px;
  line-height: 1.34;
}
@media (max-width: 1180px) {
  .investorServicesArea .investorServicesItem .btnBox .btn.color {
    min-width: 150px;
  }
}
@media (max-width: 768px) {
  .investorServicesArea .investorServicesItem .btnBox .btn.color {
    min-width: 120px;
  }
}
@media (max-width: 640px) {
  .investorServicesArea .investorServicesItem .btnBox .btn.color {
    min-width: 35.5px;
  }
}
.investorServicesArea .investorServicesItem .btnBox .btn.color::after {
  display: none;
}
@media (max-width: 640px) {
  .investorServicesArea .investorServicesItem .btnBox .btn.color .btnText {
    display: none;
  }
}
@media (max-width: 480px) {
  .investorServicesArea .investorServicesItem .btnBox .btn.color .icon-btnArrow {
    width: 10px;
  }
}
@media (min-width: 1181px) {
  .investorServicesArea .investorServicesItem:hover {
    background-color: #00b2b3;
  }
  .investorServicesArea .investorServicesItem:hover .no,
  .investorServicesArea .investorServicesItem:hover .title {
    color: #fff;
  }
  .investorServicesArea .investorServicesItem:hover .btnBox .btn.color {
    border-color: #fff;
  }
  .investorServicesArea .investorServicesItem:hover .btnBox .btn.color .btnText {
    color: #fff;
  }
  .investorServicesArea .investorServicesItem:hover .btnBox .icon-btnArrow {
    color: #fff;
  }
}

.investorDataArea {
  position: relative;
  padding: clamp(40px, 2.6042vw, 50px) 0;
}
.investorDataArea .cellBox .cellImg-1 {
  position: absolute;
  width: clamp(100px, 7.5521vw, 145px);
  top: 35%;
  left: 2.5%;
}
.investorDataArea .cellBox .cellImg-1.sec {
  position: absolute;
  width: clamp(100px, 10.9375vw, 210px);
  top: auto;
  bottom: 0%;
  left: auto;
  right: 0%;
}
.investorDataArea .cellBox .cellImg-5 {
  position: absolute;
  width: clamp(50px, 4.6875vw, 90px);
  top: 28%;
  left: 8%;
}
.investorDataArea .cellBox .cellImg-5.sec {
  position: absolute;
  width: clamp(50px, 4.6875vw, 90px);
  top: auto;
  bottom: 10%;
  left: auto;
  right: 10%;
}
.investorDataArea .investorDataList {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (max-width: 1180px) {
  .investorDataArea .investorDataList {
    gap: 30px;
  }
}
@media (max-width: 768px) {
  .investorDataArea .investorDataList {
    gap: 20px;
  }
}
.investorDataArea .investorDataItem {
  display: grid;
}
@media (max-width: 1024px) {
  .investorDataArea .investorDataItem {
    display: block;
  }
}
.investorDataArea .investorDataItem:nth-child(even) .Img {
  justify-self: end;
}
.investorDataArea .investorDataItem:nth-child(even) .cardBox {
  justify-self: start;
}
.investorDataArea .investorDataItem .Img,
.investorDataArea .investorDataItem .cardBox {
  grid-area: 1/1;
}
.investorDataArea .investorDataItem .Img {
  width: 72.6%;
  max-width: 1020px;
  height: auto;
  aspect-ratio: 1020/460;
  justify-self: start;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .investorDataArea .investorDataItem .Img {
    width: 100%;
    max-width: 100%;
  }
}
.investorDataArea .investorDataItem .Img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.investorDataArea .investorDataItem .cardBox {
  position: relative;
  width: 34.3%;
  max-width: 480px;
  justify-self: end;
  padding-top: clamp(20px, 2.1875vw, 42px);
  z-index: 1;
}
@media (max-width: 1024px) {
  .investorDataArea .investorDataItem .cardBox {
    width: 100%;
    max-width: 100%;
    padding-top: 0;
  }
}
.investorDataArea .investorDataItem .cardBox .card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 90.5%;
  background-color: #00b2b3;
  padding: clamp(20px, 1.5625vw, 30px) 0 clamp(20px, 1.5625vw, 30px) clamp(20px, 2.0833vw, 40px);
}
.investorDataArea .investorDataItem .cardBox .card .cardTitle {
  color: #fff;
  font-size: clamp(20px, 1.25vw, 24px);
  font-weight: 500;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  letter-spacing: 1.25px;
  line-height: 1.4;
}
.investorDataArea .investorDataItem .cardBox .card .cardList {
  position: relative;
  margin-top: clamp(20px, 1.25vw, 24px);
  padding-top: clamp(20px, 1.0417vw, 20px);
}
.investorDataArea .investorDataItem .cardBox .card .cardList::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  display: block;
  background-color: rgba(255, 255, 255, 0.5);
}
.investorDataArea .investorDataItem .cardBox .card .cardList::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 120px;
  height: 2px;
  display: block;
  background-color: #fff;
}
.investorDataArea .investorDataItem .cardBox .card .cardList li {
  position: relative;
  padding-left: 24px;
  color: #fff;
  font-size: clamp(14px, 0.9375vw, 18px);
  line-height: 1.8;
  letter-spacing: 0.85px;
  margin-bottom: clamp(5px, 0.3906vw, 7.5px);
}
.investorDataArea .investorDataItem .cardBox .card .cardList li::before {
  content: "";
  position: absolute;
  display: block;
  width: 3px;
  height: 3px;
  background-color: #fff;
  border-radius: 50%;
  top: clamp(10px, 0.7813vw, 15px);
  left: 6px;
}
.investorDataArea .investorDataItem .cardBox .card .cardList li a {
  position: relative;
  display: inline-block;
  color: #fff;
}
.investorDataArea .investorDataItem .cardBox .card .cardList li a::after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 1px;
  background-color: #fff;
  bottom: 0;
  left: 0;
}
@media (min-width: 1181px) {
  .investorDataArea .investorDataItem .cardBox .card .cardList li a:hover::after {
    width: 100%;
  }
}

.investorInformationArea {
  padding: clamp(40px, 2.6042vw, 50px) 0;
}
.investorInformationArea .investorInformationList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
  .investorInformationArea .investorInformationList {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .investorInformationArea .investorInformationList {
    grid-template-columns: 1fr;
  }
}
.investorInformationArea .investorInformationItem {
  padding: clamp(20px, 1.8229vw, 35px) clamp(20px, 1.5625vw, 30px);
}
@media (max-width: 1280px) {
  .investorInformationArea .investorInformationItem {
    padding: clamp(15px, 1.8229vw, 35px) 10px;
  }
}
@media (min-width: 1181px) {
  .investorInformationArea .investorInformationItem:hover {
    background-color: #fafafa;
  }
}
.investorInformationArea .investorInformationItem .title {
  color: #000;
  font-size: clamp(16px, 0.9375vw, 18px);
  font-weight: 500;
  letter-spacing: 0.9px;
  line-height: 1.25;
}
.investorInformationArea .investorInformationItem .Txt {
  display: flex;
  flex-direction: column;
  margin-top: 17px;
  padding-top: 19px;
  border-top: 1px solid #00a84d;
}
.investorInformationArea .investorInformationItem .Txt .subtitle {
  color: #000000;
  font-size: clamp(14px, 0.8333vw, 16px);
  letter-spacing: 0.8px;
  line-height: 1.5;
  margin-bottom: 9px;
}
@media (max-width: 1180px) {
  .investorInformationArea .investorInformationItem .Txt .subtitle {
    letter-spacing: 0.4px;
  }
}
.investorInformationArea .investorInformationItem .Txt .infoRow {
  display: flex;
  align-items: flex-start;
  gap: clamp(5px, 0.7813vw, 15px);
  color: #212121;
  font-size: clamp(14px, 0.9375vw, 18px);
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  line-height: 1.6;
  letter-spacing: 0.3px;
  padding-left: 4px;
}
.investorInformationArea .investorInformationItem .Txt .infoRow + .infoRow {
  margin-top: 5px;
}
.investorInformationArea .investorInformationItem .Txt .infoRow span,
.investorInformationArea .investorInformationItem .Txt .infoRow a {
  word-break: break-all;
  color: #212121;
  letter-spacing: 0.9px;
}
@media (max-width: 1180px) {
  .investorInformationArea .investorInformationItem .Txt .infoRow span,
  .investorInformationArea .investorInformationItem .Txt .infoRow a {
    letter-spacing: 0.6px;
  }
}
@media (min-width: 1181px) {
  .investorInformationArea .investorInformationItem .Txt .infoRow span:hover,
  .investorInformationArea .investorInformationItem .Txt .infoRow a:hover {
    color: #00b2b3;
  }
}
.investorInformationArea .investorInformationItem .Txt .infoRow svg {
  flex-shrink: 0;
  margin-top: 4px;
}
.investorInformationArea .investorInformationItem .Txt .infoRow.emailBox svg {
  width: 18px;
  height: 14px;
}
.investorInformationArea .investorInformationItem .Txt .infoRow.emailBox span,
.investorInformationArea .investorInformationItem .Txt .infoRow.emailBox a {
  font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.investorInformationArea .investorInformationItem .Txt .infoRow.phoneBox svg {
  width: 16px;
  height: 16px;
}
.investorInformationArea .investorInformationItem .Txt .infoRow.phoneBox span,
.investorInformationArea .investorInformationItem .Txt .infoRow.phoneBox a {
  font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.investorInformationArea .investorInformationItem .Txt .infoRow.addressBox svg {
  width: 15px;
  height: 19px;
}
.investorInformationArea .investorInformationItem .Txt .infoRow.addressBox span,
.investorInformationArea .investorInformationItem .Txt .infoRow.addressBox a {
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

.downloadBox {
  margin-top: 40px;
  padding-top: 20px;
}
.downloadBox > .sectionTitle {
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 15px;
  border-bottom: 2px solid #333;
}
.downloadBox .documentList {
  margin-top: 0;
}
.downloadBox .documentItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
}
.downloadBox .documentItem:nth-child(odd) {
  background-color: #f8f9fa;
}
.downloadBox .documentItem.documentHeader {
  background-color: #00A84D;
  border-bottom: none;
}
.downloadBox .documentItem.documentHeader .docTitle,
.downloadBox .documentItem.documentHeader .downloadLink {
  color: #fff;
  font-weight: bold;
  font-size: 15px;
}
.downloadBox .documentItem .docTitle {
  flex: 1;
  font-size: 15px;
  font-weight: normal;
  margin: 0;
}
.downloadBox .documentItem .docTitle a {
  color: #2b2b2b;
  text-decoration: none;
  transition: color 0.3s;
}
.downloadBox .documentItem .docTitle a:hover {
  color: #00A84D;
}
.downloadBox .documentItem .downloadLink {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #2b2b2b;
  text-decoration: none;
  transition: color 0.3s;
}
.downloadBox .documentItem .downloadLink:hover {
  color: #00A84D;
}