/* 績效總覽ove */
@media screen and (max-width: 991px) {
  .ove_area .content {
    order: 1;
  }
  .ove_area .col-md-5 {
    order: 2;
  }
  .nav-item:first-child {
    padding-left: 11rem;
  }
}

/* 能源與溫室氣體管理env_ene */
.ove_area .content_bg {
  padding: 0 1.5rem;
  margin: 1rem 0;
  border-radius: 1em;
  background-color: var(--mainColor2);
}
.ove_area .content_bg .sec_title {
  margin-top: 1.5rem;
  color: var(--mainColor);
}
@media screen and (max-width: 991px) {
  .ove_area .content_bg {
    width: 94%;
    margin: 1rem auto;
  }
  .ove_area .nav-pills {
    justify-content: center !important;
  }
  .ove_area .nav-pills .nav-link {
    width: 300px;
  }
}

/* 廢棄物管理env_wes */
/* .wes_area.pic_bg {
  position: relative;
  background: url(../images/cg_bi_bg.jpg) bottom no-repeat;
  background-size: contain;
}
.wes_area.pic_bg::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 40%,
    rgba(255, 255, 255, 0.4)
  );
  z-index: -1;
}
.wes_area.pic_bg:has(.col-12) {
  z-index: 1;
} */

.wes_area .content_box {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 2rem 1.5rem;
  margin: 2rem 0 1rem;
  counter-reset: section;
}
.wes_area .content_box li {
  position: relative;
  width: calc(100% / 3 - 1.5rem);
  border-radius: 1em;
  border: 1px solid var(--black20);
  background-color: var(--whiteColor);
  transition: all 0.3s ease;
}
.wes_area .content_box li::before {
  counter-increment: section;
  content: counter(section);
  position: absolute;
  width: 80px;
  height: 80px;
  font-size: 2rem;
  font-weight: 700;
  left: 50%;
  margin-left: -40px;
  margin-top: -45px;
  color: var(--whiteColor);
  line-height: 80px;
  text-align: center;
  background-color: var(--orangeColor);
  border: 2px solid var(--orangeColor);
  border-radius: 50%;
  transition: 0.4s;
  z-index: 2;
}
.wes_area .content_box li:hover {
  border-color: var(--orangeColor);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.wes_area .content_box li:hover::before {
  color: var(--orangeColor);
  background-color: var(--whiteColor);
}
.wes_area .content_box li h4 {
  position: relative;
  top: 0rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  padding: 3.25rem 1.5rem 1.75rem;
  border-radius: inherit;
  background-color: var(--orangeColor2);
}
.wes_area .content_box li p {
  padding: 1rem 1.5rem 1.5rem;
  margin-bottom: 0;
}

.wes_area .content_box li:nth-of-type(odd)::before {
  background-color: var(--greenColor);
  border: 2px solid var(--greenColor);
}
.wes_area .content_box li:nth-of-type(odd):hover {
  border-color: var(--greenColor);
}
.wes_area .content_box li:nth-of-type(odd):hover::before {
  color: var(--greenColor);
  background-color: var(--whiteColor);
}
.wes_area .content_box li:nth-of-type(odd) h4 {
  background-color: var(--greenColor2);
}

.wes_area .wes_data .item_container {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.wes_area .wes_data .item_container .item {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}
.wes_area .wes_data .light {
  width: fit-content;
  padding: 0.5rem 2rem;
  margin: 2rem auto;
  color: var(--whiteColor);
  border-radius: 1em;
  background-color: var(--blueColor);
}
@media screen and (max-width: 991px) {
  .wes_area .content_box {
    flex-wrap: wrap;
    gap: 3rem 1.5rem;
  }
  .wes_area .content_box li {
    width: 100%;
  }
}

/* 董事會cg_bi */
.bi_area .bi_org {
  margin: 0 auto;
}
.bi_area .bi_org h3 {
  position: relative;
  top: 4rem;
  width: 60%;
  padding: 1rem 3rem;
  margin: 0 auto;
  text-align: center;
  color: var(--whiteColor);
  border-radius: 0.5em;
  background-color: var(--mainColor);
  z-index: 1;
}
.bi_area .bi_org ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 2rem auto 3rem;
  padding: 4.5rem 2rem 1.5rem;
  gap: 1.5rem 2rem;
  border-radius: 1em;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
}
.bi_area .bi_org ul li {
  width: calc(100% / 3 - 1.5rem);
}
.bi_area .bi_org ul li h4 {
  position: relative;
  line-height: 1;
  margin-bottom: 0.75rem;
  padding-left: 0.75rem;
}
.bi_area .bi_org ul li h4::before {
  content: "";
  position: absolute;
  left: 0;
  width: 3px;
  height: 100%;
  border-radius: 0.5em;
  background-color: var(--mainColor);
}
.bi_area .bi_org ul li p {
  margin-bottom: 0;
}

.bi_area.pic_bg {
  position: relative;
  padding: 8rem 0;
  border-bottom-right-radius: 8em;
  background: url(../images/cg_bi_bg.jpg) bottom no-repeat;
  background-size: contain;
}
.bi_area.pic_bg::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(to bottom, var(--whiteColor), transparent); */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 40%,
    rgba(255, 255, 255, 0.4)
  );
  z-index: -1;
}
.bi_area.pic_bg:has(.col-12) {
  z-index: 1;
}

.bi_area .bi_ope {
  padding: 1.5rem;
  border-radius: 1em;
  background-color: var(--grayColor);
}
.bi_area .bi_ope .item_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.bi_area .bi_ope .item_container .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% / 4 - 1.5rem);
  padding: 0.75rem 1.5rem;
  border-radius: 4em;
  border: 1px solid var(--mainColor);
  transition: 0.3s all ease;
}
.bi_area .bi_ope .item_container .item:hover {
  background-color: var(--mainColor2);
}
.bi_area .bi_ope .item_container .item h4 {
  font-size: 1rem;
  margin-bottom: 0;
}
.bi_area .bi_ope .item_container .item p {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0;
}
.bi_area .bi_ope .item_container .item p strong {
  font-size: 1.75rem;
  color: var(--mainColor);
  padding-right: 0.5rem;
}

.bi_area .bi_pol .item_container {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 2rem;
  gap: 2rem 1.5rem;
}
.bi_area .bi_pol .item_container .item {
  border-radius: 1em;
  border: 1px solid var(--black20);
  background-color: var(--whiteColor);
}
.bi_area .bi_pol .item_container .item h3 {
  text-align: center;
  margin-bottom: 0;
  padding: 1rem 1.5rem;
  border-radius: inherit;
  /* color: var(--whiteColor); */
  background-color: var(--orangeColor2);
}
.bi_area .bi_pol .item_container .item p {
  padding: 1rem 1.5rem 0;
  margin-bottom: 0;
}
.bi_area .bi_pol .item_container .item h4 {
  /* display: flex;
  align-items: center; */
  width: fit-content;
  text-align: center;
  margin: 0.5rem auto 1rem;
  padding: 0.5rem 1.5rem;
  color: var(--black60);
  border-radius: 0.5em;
  /* background-color: var(--grayColor); */
}
.bi_area .bi_pol .item_container .item strong {
  font-size: 2rem;
  padding: 0 0.5rem;
  color: var(--greenColor);
}

.bi_area .bi_audit .item_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
  gap: 2rem 1.5rem;
}
.bi_area .bi_audit .item_container .item {
  position: relative;
  width: calc(100% / 3 - 1.5rem);
  border-radius: 0.5em;
  background-color: var(--whiteColor);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.bi_area .bi_audit .item_container .item h4 {
  text-align: center;
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  /* color: var(--mainColor); */
  border-radius: 0;
  background-color: var(--mainColor2);
}
.bi_area .bi_audit .item_container .item::before {
  content: "\e661";
  font-family: "themify";
  position: absolute;
  top: 30%;
  right: -9%;
  text-align: center;
  width: 60px;
  line-height: 60px;
  border-radius: 50%;
  color: var(--whiteColor);
  background-color: var(--mainColor);
  z-index: 1;
}
.bi_area .bi_audit .item_container .item:nth-child(3):before,
.bi_area .bi_audit .item_container .item:nth-child(6):before {
  display: none;
}
.bi_area .bi_audit .item_container .item p {
  margin-bottom: 0;
  padding: 1rem;
  text-align: center;
}
@media screen and (max-width: 991px) {
  .bi_area.pic_bg {
    padding: 4rem 0 8rem;
  }
  .bi_area .bi_org h3 {
    width: 90%;
  }
  .bi_area .bi_org ul {
    margin: 2rem auto 1rem;
    padding: 4.5rem 1rem 1.5rem;
  }
  .bi_area .bi_org ul li {
    width: 100%;
  }
  .bi_area .bi_pol .item_container {
    flex-wrap: wrap;
  }
  .bi_area .bi_pol .item_container .item strong {
    display: block;
  }
}

/* 誠信經營cg_int */
.int_area .content_box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3.5rem 1.5rem;
  margin: 4rem 0 1rem;
  counter-reset: section;
}
.int_area .content_box li {
  position: relative;
  width: calc(100% / 4 - 1.5rem);
  padding: 3rem 1rem 1rem;
  text-align: center;
  border-radius: 1em;
  border: 1px solid var(--black20);
  background-color: var(--grayColor);
  transition: all 0.3s ease;
}
.int_area .content_box li::before {
  counter-increment: section;
  content: counter(section);
  position: absolute;
  top: -2.5rem;
  left: 50%;
  width: 80px;
  height: 80px;
  font-size: 2rem;
  font-weight: 700;
  margin-left: -40px;
  color: var(--whiteColor);
  line-height: 80px;
  background-color: var(--greenColor);
  border: 2px solid var(--greenColor);
  border-radius: 50%;
  transition: 0.4s;
  z-index: 2;
}
.int_area .content_box li:hover {
  border-color: var(--greenColor);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.int_area .content_box li:hover::before {
  color: var(--greenColor);
  background-color: var(--whiteColor);
}
.int_area .content_box li:nth-child(n + 5)::before {
  background-color: var(--orangeColor);
  border: 2px solid var(--orangeColor);
}
.int_area .content_box li:nth-child(n + 5):hover {
  border-color: var(--orangeColor);
}
.int_area .content_box li:nth-child(n + 5):hover::before {
  color: var(--orangeColor);
  background-color: var(--whiteColor);
}
.int_area .content_box li:nth-child(n + 5) h4 {
  background-color: var(--orangeColor2);
}

.int_area .int_pol {
  margin-top: 2rem;
  padding: 1rem 2rem;
  border-radius: 1em;
  border: 1px solid var(--mainColor);
  background-color: var(--whiteColor);
}
.int_area .int_pol h2 {
  position: relative;
  top: -3rem;
  width: fit-content;
  padding: 1rem 3rem;
  margin: 0 auto;
  color: var(--whiteColor);
  border-radius: 0.5em;
  background-color: var(--mainColor);
}

.int_area .int_rep .item_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 2rem;
  gap: 2rem 1.5rem;
}
.int_area .int_rep .item_container .item {
  position: relative;
  width: calc(100% / 3 - 1.5rem);
  border-radius: 0.5em;
  background-color: var(--whiteColor);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.int_area .int_rep .item_container .item h4 {
  text-align: center;
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  /* color: var(--mainColor); */
  border-radius: 0;
  background-color: var(--mainColor2);
}
.int_area .int_rep .item_container .item::before {
  content: "\e661";
  font-family: "themify";
  position: absolute;
  top: 40%;
  right: 0;
  text-align: center;
  width: 55px;
  line-height: 55px;
  margin-right: 0.5rem;
  border-radius: 50%;
  color: var(--whiteColor);
  background-color: var(--mainColor);
  transform: translateX(100%);
  z-index: 1;
}
.int_area .int_rep .item_container .item:nth-child(3):before,
.int_area .int_rep .item_container .item:nth-child(6):before {
  display: none;
}
.int_area .int_rep .item_container .item p {
  margin-bottom: 0;
  padding: 1rem;
  text-align: center;
}

.int_area .bg_o {
  padding: 1rem;
  border-radius: 1em;
}

@media screen and (max-width: 991px) {
  .int_area .content_box li {
    width: 100%;
  }
  .int_area .int_pol {
    width: 94%;
    margin: 2rem auto 0;
    padding: 1.5rem;
  }
  .int_area .int_pol h2 {
    padding: 1rem;
  }
  .int_area .int_rep .item_container {
    gap: 3rem 1.5rem;
  }
  .int_area .int_rep .item_container .item {
    width: 100%;
  }
  .int_area .int_rep .item_container .item::before {
    top: auto;
    bottom: -3rem;
    right: auto;
    left: 50%;
    transform: rotate(90deg) translateY(50%);
  }
}

/* 資訊安全cg_safe */
.safe_area .safe_info .item_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
  gap: 2rem 1.5rem;
}
.safe_area .safe_info .item_container .item {
  width: calc(100% / 4 - 1.5rem);
  padding: 1rem;
  border-top: 5px solid var(--mainColor);
  /* border-right: 1px solid var(--black20);
  border-top: 1px solid var(--black20);
  border-bottom: 1px solid var(--black20); */
  border-radius: 0 0.5em 0.5em 0;
  background-color: var(--whiteColor);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.safe_area .safe_info .item_container .item h4 {
  margin-bottom: 0.5rem;
}
.safe_area .safe_info .item_container .item p {
  margin-bottom: 0;
}
@media screen and (max-width: 991px) {
  .safe_area .safe_info .item_container .item {
    width: 100%;
  }
}

/* 產品與服務cg_pro */
.pro_area .pro_step .item_container {
  display: flex;
  flex-flow: wrap;
  margin: 1.5rem 0 2rem;
  gap: 2rem;
}
.pro_area .pro_step .item_container .item {
  display: flex;
  align-items: center;
  position: relative;
  width: calc(100% / 2 - 1rem);
  border-radius: 0.5em;
  gap: 1rem;
}
.pro_area .pro_step .item_container .item:nth-child(1) {
  order: 1;
} /* 需求確認 */
.pro_area .pro_step .item_container .item:nth-child(2) {
  order: 3;
} /* 討論與解決方案確立 */
.pro_area .pro_step .item_container .item:nth-child(3) {
  order: 5;
} /* 測試與數據收集分析 */
.pro_area .pro_step .item_container .item:nth-child(4) {
  order: 2;
} /* 調整與修改 */
.pro_area .pro_step .item_container .item:nth-child(5) {
  order: 4;
} /* 正式施行 */
.pro_area .pro_step .item_container .item:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 1.65rem;
  width: 1px;
  height: 40px;
  background-color: #666;
}
.pro_area .pro_step .item_container .item:nth-child(3)::after,
.pro_area .pro_step .item_container .item:last-child::after {
  display: none;
}
.pro_area .pro_step .item_container .item:hover::after {
  background-color: var(--mainColor);
}
.pro_area .pro_step .item_container .item img {
  display: flex;
  width: 60px !important;
  height: 60px;
  padding: 1rem;
  border-radius: 50%;
  background-color: var(--black60);
}
.pro_area .pro_step .item_container .item:hover img {
  background-color: var(--mainColor);
}
.pro_area .pro_step .item_container .item h4 {
  margin-bottom: 0;
}
.pro_area .pro_step .item_container .item:hover h4 {
  color: var(--mainColor);
}

.pro_area .pro_ser .item_container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin-top: 2rem;
  gap: 2rem 1.5rem;
}
.pro_area .pro_ser .item_container .item {
  width: calc(100% / 3 - 1.5rem);
  border-radius: 1em;
  background-color: var(--whiteColor);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.pro_area .pro_ser .item_container .item h4 {
  width: fit-content;
  color: var(--whiteColor);
  margin-bottom: 0;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 0.5em 0;
  background-color: var(--mainColor);
}
.pro_area .pro_ser .item_container .item ul {
  padding: 1rem 1.5rem 1.5rem;
  margin-bottom: 0;
}

.pro_area .pro_fit .item_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
  gap: 2rem 1.5rem;
}
.pro_area .pro_fit .item_container .item {
  width: calc(100% / 4 - 1.5rem);
  padding: 1rem;
  border-top: 5px solid var(--mainColor);
  border-radius: 0 0.5em 0.5em 0;
  background-color: var(--whiteColor);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.pro_area .pro_fit .item_container .item h4 {
  margin-bottom: 0.5rem;
}
.pro_area .pro_fit .item_container .item p {
  margin-bottom: 0;
}

.pro_area .pro_new .item_container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin-top: 2rem;
  gap: 2rem 1.5rem;
}
.pro_area .pro_new .item_container .item {
  width: calc(100% / 2 - 1.5rem);
  border-radius: 1em;
  background-color: var(--whiteColor);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.pro_area .pro_new .item_container .item h4 {
  width: fit-content;
  color: var(--whiteColor);
  margin-bottom: 0;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 0.5em 0;
  background-color: var(--mainColor);
}
.pro_area .pro_new .item_container .item ul {
  padding: 1rem 1.5rem 1.5rem;
  margin-bottom: 0;
}
@media screen and (max-width: 991px) {
  .pro_area .pro_step .item_container {
    flex-direction: column;
  }
  .pro_area .pro_step .item_container .item {
    width: 100%;
  }
  .pro_area .pro_step .item_container .item:nth-child(1) {
    order: 1;
  } /* 需求確認 */
  .pro_area .pro_step .item_container .item:nth-child(2) {
    order: 1;
  } /* 討論與解決方案確立 */
  .pro_area .pro_step .item_container .item:nth-child(3) {
    order: 3;
  } /* 測試與數據收集分析 */
  .pro_area .pro_step .item_container .item:nth-child(4) {
    order: 4;
  } /* 調整與修改 */
  .pro_area .pro_step .item_container .item:nth-child(5) {
    order: 5;
  } /* 正式施行 */
  .pro_area .pro_step .item_container .item:nth-child(3)::after {
    display: block;
  }
  .pro_area .pro_ser .item_container {
    flex-wrap: wrap;
  }
  .pro_area .pro_ser .item_container .item {
    width: 100%;
  }
  .pro_area .pro_fit .item_container .item {
    width: 100%;
  }
  .pro_area .pro_new .item_container {
    flex-wrap: wrap;
  }
  .pro_area .pro_new .item_container .item {
    width: 100%;
  }
}

/* 風險管理與TCFD cg_risk */
.risk_area .risk_cli .item_container_box {
  display: flex;
  align-items: center;
  margin: 2rem 0;
}
.risk_area .risk_cli .item_container {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  gap: 1.5rem;
}
.risk_area .risk_cli .item_container .item {
  /* width: calc(100% / 2 - 1.5rem); */
  min-height: 221px;
  padding: 1rem;
  border-top: 5px solid var(--mainColor);
  border-radius: 0 0.5em 0.5em 0;
  background-color: var(--whiteColor);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.risk_area .risk_cli .item_container .item h4 {
  margin-bottom: 0.5rem;
}
.risk_area .risk_cli .item_container .item p {
  margin-bottom: 0;
}

.risk_area .risk_pro .item_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 2rem 0;
  gap: 2rem 1.5rem;
}
.risk_area .risk_pro .item_container .item {
  position: relative;
  width: calc(100% / 3 - 1.5rem);
  border-radius: 0.5em;
  background-color: var(--whiteColor);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.risk_area .risk_pro .item_container .item h4 {
  text-align: center;
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  /* color: var(--mainColor); */
  border-radius: 0;
  background-color: var(--mainColor2);
}
.risk_area .risk_pro .item_container .item::before {
  content: "\e661";
  font-family: "themify";
  position: absolute;
  top: 40%;
  right: 0;
  text-align: center;
  width: 55px;
  line-height: 55px;
  margin-right: 0.5rem;
  border-radius: 50%;
  color: var(--whiteColor);
  background-color: var(--mainColor);
  transform: translateX(100%);
  z-index: 1;
}
.risk_area .risk_pro .item_container .item:nth-child(3):before,
.risk_area .risk_pro .item_container .item:nth-child(6):before {
  display: none;
}
.risk_area .risk_pro .item_container .item p {
  margin-bottom: 0;
  padding: 1rem;
  text-align: center;
}

.risk_area .ope_risk .item_container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin-top: 2rem;
  gap: 2rem 1.5rem;
}
.risk_area .ope_risk .item_container .item {
  width: calc(100% / 2 - 1.5rem);
  border-radius: 1em;
  background-color: var(--whiteColor);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.risk_area .ope_risk .item_container .item h4 {
  width: fit-content;
  color: var(--whiteColor);
  margin-bottom: 0;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 0.5em 0;
  background-color: var(--mainColor);
}
.risk_area .ope_risk .item_container .item ul {
  padding: 1rem 1.5rem 1.5rem;
  margin-bottom: 0;
}
@media screen and (max-width: 991px) {
  .risk_area .risk_cli .item_container_box {
    flex-wrap: wrap;
  }
  .risk_area .risk_pro .item_container {
    gap: 3rem 1.5rem;
  }
  .risk_area .risk_pro .item_container .item {
    width: 100%;
  }
  .risk_area .risk_pro .item_container .item::before {
    top: auto;
    bottom: -3rem;
    right: auto;
    left: 50%;
    transform: rotate(90deg) translateY(50%);
  }
  .risk_area .ope_risk .item_container {
    flex-wrap: wrap;
  }
  .risk_area .ope_risk .item_container .item {
    width: 100%;
  }
}

/* cg_sup */
.sup_area .sup_man .item_container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin-top: 2rem;
  gap: 2rem 1.5rem;
}
.sup_area .sup_man .item_container .item {
  width: calc(100% / 2 - 1.5rem);
  border-radius: 1em;
  background-color: var(--whiteColor);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.sup_area .sup_man .item_container .item h4 {
  width: fit-content;
  color: var(--whiteColor);
  margin-bottom: 0;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 0.5em 0;
  background-color: var(--mainColor);
}
.sup_area .sup_man .item_container .item p {
  padding: 1rem 1.5rem 1.5rem;
  margin-bottom: 0;
}

.sup_area .sup_cou .item_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
  gap: 2rem 1.5rem;
}
.sup_area .sup_cou .item_container .item {
  width: calc(100% / 4 - 1.5rem);
  padding: 1rem;
  border-top: 5px solid var(--mainColor);
  border-radius: 0 0.5em 0.5em 0;
  background-color: var(--whiteColor);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.sup_area .sup_cou .item_container .item h4 {
  margin-bottom: 0.5rem;
}
.sup_area .sup_cou .item_container .item p {
  margin-bottom: 0;
}

.sup_area .sup_com {
  padding: 1.5rem;
  border-radius: 1em;
  background-color: var(--grayColor);
}
.sup_area .sup_com .item_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.sup_area .sup_com .item_container .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  border-radius: 4em;
  border: 1px solid var(--mainColor);
  transition: 0.3s all ease;
}
.sup_area .sup_com .item_container .item:hover {
  background-color: var(--mainColor2);
}
.sup_area .sup_com .item_container .item h4 {
  font-size: 1rem;
  margin-bottom: 0;
}
.sup_area .sup_com .item_container .item p {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  margin-left: 1rem;
}
.sup_area .sup_com .item_container .item p strong {
  font-size: 1.75rem;
  color: var(--mainColor);
  padding: 0 0.5rem;
}
@media screen and (max-width: 991px) {
  .sup_area .sup_man .item_container {
    flex-wrap: wrap;
  }
  .sup_area .sup_man .item_container .item {
    width: 100%;
  }
  .sup_area .sup_com {
    width: 94%;
    margin: 0 auto;
    padding: 1rem;
  }
  .sup_area .sup_com .item_container .item {
    width: 100%;
    flex-direction: column;
  }
  .sup_area .sup_com .item_container .item p {
    margin-bottom: 0;
  }
}

/* 友善職場 em_fri */
.fri_area.gray_bg {
  position: relative;
}
.fri_area.gray_bg::before {
  content: "";
  position: absolute;
  top: 0;
  right: auto;
  left: 50%;
  width: 70px;
  height: 50px;
  border-top: 50px solid var(--whiteColor);
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  transform: translate(-48%, 0);
}
.fri_area .item_container {
  display: grid;
  grid-template-columns: 30% 36% 30%;
  grid-template-rows: auto auto;
  gap: 1.5rem 2rem;
  grid-template-areas:
    "item1 large item3"
    "item4 large item5";
  margin: 5rem 0 2rem;
}
.fri_area .item_container .item {
  text-align: center;
  border-radius: 1em;
  background-color: var(--whiteColor);
}
.fri_area .item_container .item a {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 2rem 1.5rem;
}
.item_container li:nth-child(1) {
  grid-area: item1;
}
.item_container li:nth-child(2) {
  grid-area: large;
}
.item_container li:nth-child(3) {
  grid-area: item3;
}
.item_container li:nth-child(4) {
  grid-area: item4;
}
.item_container li:nth-child(5) {
  grid-area: item5;
}
.fri_area .item_container .item.large {
  height: 100%;
  grid-row-end: span 2;
  grid-column: 2;
}
.fri_area .item_container .item img {
  width: 100px !important;
  padding: 1rem;
  border-radius: 50%;
  background-color: var(--grayColor);
}
.fri_area .item_container .item h4 {
  margin: 1rem 0 0;
}
@media screen and (max-width: 991px) {
  .fri_area .item_container {
    display: flex;
    flex-direction: column;
  }
  .fri_area .item_container .item a {
    padding: 1.5rem 1rem;
  }
}

/* 人才策略與發展 em_rec */
.rec_area .rec_wel .item_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
  gap: 2rem 1.5rem;
}
.rec_area .rec_wel .item_container .item {
  width: calc(100% / 4 - 1.5rem);
  padding: 1rem;
  border-top: 5px solid var(--mainColor);
  border-radius: 0 0.5em 0.5em 0;
  background-color: var(--whiteColor);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.rec_area .rec_wel .item_container .item h4 {
  margin-bottom: 0.5rem;
}
.rec_area .rec_wel .item_container .item p {
  margin-bottom: 0;
}

.rec_area .rec_ret .item_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
  gap: 2rem 1.5rem;
}
.rec_area .rec_ret .item_container .item {
  width: calc(100% / 3 - 1.5rem);
  border-radius: 1em;
  background-color: var(--whiteColor);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.rec_area .rec_ret .item_container .item h4 {
  width: fit-content;
  color: var(--whiteColor);
  margin-bottom: 0;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 0.5em 0;
  background-color: var(--mainColor);
}
.rec_area .rec_ret .item_container .item p {
  padding: 1rem 1.5rem 1.5rem;
  margin-bottom: 0;
}

.rec_area .rec_tra ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 3rem 0 2rem;
  gap: 2rem 1.5rem;
  counter-reset: item;
}
.rec_area .rec_tra ul li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  position: relative;
  width: calc(100% / 4 - 1.5rem);
  text-align: center;
  padding: 1.5rem 1rem 1rem;
  border-top: 5px solid var(--mainColor);
  border-radius: 0 0.5em 0.5em 0;
  background-color: var(--whiteColor);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  counter-increment: item;
}
.rec_area .rec_tra ul li::before {
  content: counter(item) " ";
  position: absolute;
  top: -1.5rem;
  font-size: 1.2rem;
  font-weight: bold;
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  color: var(--whiteColor);
  background-color: var(--mainColor);
}
.rec_area .rec_tra ul li h4 {
  margin-bottom: 0.5rem;
}
@media screen and (max-width: 991px) {
  .rec_area .rec_wel .item_container {
    gap: 1rem 1.5rem;
  }
  .rec_area .rec_wel .item_container .item {
    width: 100%;
  }
  .rec_area .rec_ret .item_container .item {
    width: 100%;
  }
  .rec_area .rec_tra ul li {
    width: 100%;
  }
}

/* 人權及友善包容 em_pol */
.pol_area .content_bg {
  padding: 1.5rem;
  margin: 1rem 0;
  border-radius: 1em;
  background-color: var(--mainColor2);
}
.pol_area .content_bg .thr_title {
  margin-top: 0;
  color: var(--mainColor);
}

/* 職場健康與安全 em_hea */
.hea_area .hea_pro .item_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2rem 0;
  gap: 2rem 1.5rem;
}
.hea_area .hea_pro .item_container .item {
  width: calc(100% / 4 - 1.5rem);
  padding: 1rem;
  border-top: 5px solid var(--mainColor);
  border-radius: 0 0.5em 0.5em 0;
  background-color: var(--whiteColor);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.hea_area .hea_pro .item_container .item h4 {
  margin-bottom: 0.5rem;
}
.hea_area .hea_pro .item_container .item p {
  margin-bottom: 0;
}

.hea_area .hea_lab .item_container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin-top: 2rem;
  gap: 2rem 1.5rem;
}
.hea_area .hea_lab .item_container .item {
  width: calc(100% / 2 - 1.5rem);
  border-radius: 1em;
  background-color: var(--whiteColor);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.hea_area .hea_lab .item_container .item h4 {
  width: fit-content;
  color: var(--whiteColor);
  margin-bottom: 0;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 0.5em 0;
  background-color: var(--mainColor);
}
.hea_area .hea_lab .item_container .item ul {
  padding: 1rem 1.5rem 1.5rem;
  margin-bottom: 0;
}

.hea_area .hea_occ {
  position: relative;
  padding: 3.5rem 1rem 1rem;
  margin: 1rem 0 3rem;
  border-radius: 1em;
  background-color: var(--mainColor2);
}
.hea_area .hea_occ h3 {
  position: absolute;
  top: -2rem;
  width: fit-content;
  padding: 0.75rem 2rem;
  margin-top: 0;
  color: var(--whiteColor);
  border-radius: 3em;
  background-color: var(--mainColor);
}
.hea_area .hea_occ h3::before {
  content: "";
  position: absolute;
  bottom: -17px;
  width: 16px;
  height: 20px;
  transform: rotate(-15deg);
  border-top: 16px solid var(--mainColor);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.hea_area .hea_occ ul {
  margin-bottom: 1rem;
}
@media screen and (max-width: 991px) {
  .hea_area .hea_pro .item_container .item {
    width: 100%;
  }
  .hea_area .hea_lab .item_container {
    flex-wrap: wrap;
  }
  .hea_area .hea_lab .item_container .item {
    width: 100%;
  }
}

/* 社區關懷soc_com */
.com_area .com_box {
  position: relative;
  padding: 3.5rem 1rem 1rem;
  margin: 1rem 0 3rem;
  border-radius: 1em;
  background-color: var(--mainColor2);
}
.com_area .com_box h3 {
  position: absolute;
  top: -2rem;
  width: fit-content;
  padding: 0.75rem 2rem;
  margin-top: 0;
  color: var(--whiteColor);
  border-radius: 3em;
  background-color: var(--mainColor);
}
.com_area .com_box h3::before {
  content: "";
  position: absolute;
  bottom: -17px;
  width: 16px;
  height: 20px;
  transform: rotate(-15deg);
  border-top: 16px solid var(--mainColor);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.com_area .com_box ul {
  margin-bottom: 1rem;
}
@media screen and (max-width: 991px) {
  .com_area .com_box {
  }
}

/* 社會公益soc_wel */
.wel_area .wel_box {
  position: relative;
  padding: 3.5rem 1rem 1rem;
  margin: 1rem 0 3rem;
  border-radius: 1em;
  background-color: var(--mainColor2);
}
.wel_area .wel_box h3 {
  position: absolute;
  top: -2rem;
  width: fit-content;
  padding: 0.75rem 2rem;
  margin-top: 0;
  color: var(--whiteColor);
  border-radius: 3em;
  background-color: var(--mainColor);
}
.wel_area .wel_box h3::before {
  content: "";
  position: absolute;
  bottom: -17px;
  width: 16px;
  height: 20px;
  transform: rotate(-15deg);
  border-top: 16px solid var(--mainColor);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.wel_area .wel_box ul {
  margin-bottom: 1rem;
}

.wel_area .wel_main .item_container {
  display: flex;
  align-items: flex-start;
  margin-top: 2rem;
  gap: 1.5rem;
}
.wel_area .wel_main .item_container .item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  width: calc(100% / 3 - 1.5rem);
  min-height: 240px;
  padding: 1rem;
  border-top: 5px solid var(--mainColor);
  border-radius: 0 0.5em 0.5em 0;
  background-color: var(--whiteColor);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.wel_area .wel_main .item_container .item i {
  position: absolute;
  top: -1.5rem;
  font-size: 1.2rem;
  /* font-weight: bold; */
  text-align: center;
  width: 60px;
  line-height: 60px;
  border-radius: 50%;
  color: var(--whiteColor);
  background-color: var(--mainColor);
}
.wel_area .wel_main .item_container .item h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.wel_area .wel_main .item_container .item p {
  margin-bottom: 0;
}
@media screen and (max-width: 991px) {
  .wel_area .wel_main .item_container {
    flex-wrap: wrap;
  }
  .wel_area .wel_main .item_container .item {
    width: 100%;
  }
}

/* 肯定與榮耀 glory */
.glory_area {
  position: relative;
  padding-bottom: 25rem;
  background: url(../images/glory_img1.png) no-repeat;
  background-size: contain;
  background-position: bottom;
}
.glory_area::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0.4)
  );
}
.glory_area:has(.col-12) {
  z-index: 0;
}
.glory_area .item_container .item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  align-content: flex-start;
  text-align: center;
  padding: 2rem 1rem 1rem;
  margin-top: 3rem;
  border-radius: 0.5em;
  border: 2px solid var(--orangeColor);
  background: var(--whiteColor);
  transition: background-color 0.3s, transform 0.3s;
  min-height: 180px;
}
.glory_area .item_container .item:hover {
  background-color: var(--grayColor);
  transform: translateY(-10px);
}
.glory_area .item_container .item::before {
  content: "";
  position: absolute;
  top: -2rem;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translateX(-50%);
  background: url(../images/glory_img2.png) no-repeat;
  background-size: contain;
}
.glory_area .item_container .item h4 {
  margin-bottom: 0.5rem;
}
.glory_area .item_container .item p {
  margin-bottom: 0;
}
.glory_area .swiperBox {
  margin-top: 3rem;
}
@media screen and (max-width: 991px) {
  .glory_area {
    padding-bottom: 15rem;
  }
}

/* 永續認證 award */
.award_area .item_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5rem 1.5rem;
}
.award_area .item_container .item {
  width: calc(100% / 3 - 1.5rem);
}
.award_area .item_container .item .img_box {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 0.5em;
  background-color: var(--grayColor);
}
.award_area .item_container .item img {
  width: 80%;
  height: 400px;
  object-fit: contain;
  transform: scale(1);
  transition: all 0.3s ease;
}
.award_area .item_container .item:hover img {
  transform: scale(1.1);
}
.award_area .item_container .item h4 {
  text-align: center;
  margin-top: 1rem;
}
@media screen and (max-width: 991px) {
  .award_area .item_container .item {
    width: 100%;
  }
  .award_area .item_container .item img {
    width: 90% !important;
    height: auto;
  }
}

/* 報告書下載 report */
.report_area .tab-content {
  width: 100%;
  margin-top: 1rem;
}
.report_area .tab-content a {
  position: relative;
  display: block;
  font-weight: 700;
  padding: 1.5rem 1rem;
}
.report_area .report {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 550px;
  margin-bottom: 3rem;
}
.report_area #rep2 .report,
.report_area #rep3 .report {
  margin-bottom: 5rem;
}
.report_area .report .item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 70%;
}
.report_area .report .item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--grayColor);
  clip-path: url(#report_area);
  z-index: -1;
}
.report_area .report .item:hover::after {
  background: var(--mainColor);
}
.report_area .report .item .img_box {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  clip-path: url(#report_area);
}
.report_area .report .item img {
  transform: scale(1.1);
  transition: all 0.3s ease;
}
.report_area .report .item:hover img {
  transform: scale(1.2);
}
.report_area .item_container .item .btn_circle {
  position: absolute;
  right: 0;
  bottom: 0;
}
.report_area .item_container .item .btn_circle i {
  color: var(--whiteColor);
}
.report_area .report .item h4 {
  position: absolute;
  bottom: -4rem;
  text-align: center;
}
.report_area #rep2 .report .item h4,
.report_area #rep3 .report .item h4 {
  bottom: -5.5rem;
}
.report_area .report .item:hover h4 {
  color: var(--mainColor);
}
@media screen and (max-width: 991px) {
  .report_area .report {
    height: auto;
    margin-bottom: 5rem;
  }
  .report_area .report .item {
    width: 80%;
  }
}

/* 網站地圖 sitemap */
.map_area h2 {
  position: relative;
  margin-bottom: 1.5rem;
  padding-left: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--black20);
}
.map_area h2::before {
  content: "";
  position: absolute;
  bottom: -14%;
  left: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--mainColor);
}
.map_area h2::after {
  content: "";
  position: absolute;
  bottom: -6%;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--mainColor);
}
.map_area .main_menu {
  display: flex;
  padding-left: 2rem;
}
.map_area .main_menu .thr_title {
  width: 18%;
  margin: 1.5rem 0;
}
.map_area .main_menu > ul {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
  gap: 1.5rem;
}
@media screen and (max-width: 991px) {
  .map_area .main_menu .thr_title {
    width: 100%;
  }
  .map_area .main_menu {
    flex-direction: column;
    padding-left: 0;
  }
  .map_area .main_menu .thr_title {
    margin: 1.5rem 0 0.5rem;
  }
  .map_area .main_menu > ul {
    gap: 0.75rem;
  }
}