@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');

:root {
  --development: #F8B62D; /* 永續發展 */
  --goverance: #920783; /* 公司治理 */
  --risk: #036EB8; /* 風險管理 */
  --environment: #14AB39; /* 永續環境 */
  --workplace: #E4007F; /* 友善職場 */
  --social: #EA5514; /* 社會共榮 */
}

/* Base Start */
html {
  font-family: 'Noto Sans TC', sans-serif;
}
body {
    padding: 0;
    margin: 0;
    color: #444;
}
a {
  color: #428bca;
}
a:hover {
  color: #9eccf4;
  text-decoration: none;
}
h1, h2, h3, h4, h5, h6 { 
  font-weight: normal; 
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
p {
  text-indent: 32px; /* 文字首行縮排 */
  text-align: justify; /* 左右對齊 */
}
/* 圖片說明 */
.img-text {
  color: #4d4d4d;
  font-size: 13px;
  text-align: center;
  padding: 8px 0;
}
/* 圖片圓角 */
.img-radius img {
  border-radius: 20px 2px 20px 2px;
}
ul.disc > li {
  list-style-type: disc; /*實心圓形符號*/
  margin-left: 15px;
}
ul.decimal > li {
  list-style-type: decimal; /*阿拉伯數字*/
  margin-left: 15px;
}
ul.first-level {
  margin-left: 50px;
}
/* 數字階層 */
ul.first-level > li {
  list-style-type: decimal; /*阿拉伯數字*/
}
ul.second-level {
  margin-left: 15px;
}
ul.second-level > li {
  counter-increment: my-counter;
  /* 段落首行縮排 */
  text-indent: -1em;
}
ul.second-level > li::before {
  content: "("counter(my-counter) ")";
}
/* 內縮 */
ul.desc li {
  padding-left: 15px;
} 
ul.desc-20 li {
  padding-left: 20px;
} 
/* Base End */

/* 版型共用 Start */

/* Preloader Start */
#preloder {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  background: #ffffff;
}
.loader {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -13px;
  margin-left: -13px;
  border-radius: 60px;
  animation: loader 0.8s linear infinite;
  -webkit-animation: loader 0.8s linear infinite;
}
/* 關鍵影格 */
@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border: 4px solid #4272d7;
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border: 4px solid #9B9EA3;
    border-left-color: transparent;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border: 4px solid #4272d7;
    border-left-color: transparent;
  }
}
@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    border: 4px solid #4272d7;
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    border: 4px solid #9B9EA3;
    border-left-color: transparent;
  }
  100% {
    -webkit-transform: rotate(360deg);
    border: 4px solid #4272d7;
    border-left-color: transparent;
  }
}
/* Preloader End */

/* Header Start */
#header {
  background: #fff;
  z-index: 997;
  height: 70px;
  transition: all 0.5s;
  padding: 10px 0;
}
/* #header.header-scrolled {
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
} */
#header .logo img {
  padding: 0;
  margin: 0;
  max-height: 44px;
}
/* Nav Start */
/* Desktop */
.nav, .nav * {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav > ul > li {
  position: relative;
  white-space: nowrap;
  float: left;
}
.nav a {
  display: block;
  position: relative;
  color: #5c768d;
  padding: 12px 15px;
  transition: 0.3s;
  font-size: 16px;
  font-weight: 600;
}
.nav a:hover, .nav .active > a, .nav li:hover > a {
  color: #036EB8;
  text-decoration: none;
}
.nav .drop-down ul {
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  padding: 10px 0;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: ease all 0.3s;
}
.nav .drop-down:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}
.nav .drop-down li {
  min-width: 180px;
  position: relative;
}
.nav .drop-down ul a {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #103453;
}
.nav .drop-down ul a:hover, .nav .drop-down ul .active > a, .nav .drop-down ul li:hover > a {
  color: #0099ff;
}
.nav .drop-down > a:after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 5px;
}
.nav .drop-down .drop-down ul {
  top: 0;
  left: 100%;
}
.nav .drop-down .drop-down:hover > ul {
  opacity: 1;
  top: 0;
}
.nav .drop-down .drop-down > a {
  padding-right: 35px;
}
.nav .drop-down .drop-down > a:after {
  content: "\eaa0";
  font-family: IcoFont;
  position: absolute;
  right: 15px;
}
@media (max-width: 1366px) {
  .nav .drop-down .drop-down ul {
    left: -90%;
  }
  .nav .drop-down .drop-down:hover > ul {
    left: -100%;
  }
  .nav .drop-down .drop-down > a:after {
    content: "\ea9d";
  }
}

/* Mobile */
.mobile-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 9999;
  overflow-y: auto;
  left: -260px;
  width: 260px;
  padding-top: 18px;
  background: #036EB8;
  transition: 0.4s;
}
.mobile-nav * {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mobile-nav a {
  display: block;
  position: relative;
  color: #e3f0fc;
  padding: 10px 20px;
  font-weight: 500;
}
.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {
  color: #9eccf4;
  text-decoration: none;
}
.mobile-nav .drop-down > a:after {
  content: "\ea99";
  font-family: IcoFont; 
  padding-left: 10px;
  position: absolute;
  right: 15px;
}
.mobile-nav .active.drop-down > a:after {
  content: "\eaa0";
}
.mobile-nav .drop-down > a {
  padding-right: 35px;
}
.mobile-nav .drop-down ul {
  display: none;
  overflow: hidden;
}
.mobile-nav .drop-down li {
  padding-left: 20px;
}
.mobile-nav-toggle {
  position: fixed;
  right: 15px;
  top: 20px;
  z-index: 9998;
  border: 0;
  background: none;
  font-size: 24px;
  transition: all 0.4s;
  outline: none !important;
  line-height: 1;
  cursor: pointer;
  text-align: right;
}
.mobile-nav-toggle i {
  color: #5c768d;
}
.mobile-nav-overly {
  width: 100%;
  height: 100%;
  z-index: 9997;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(31, 53, 72, 0.7);
  overflow: hidden;
  display: none;
}
.mobile-nav-active {
  overflow: hidden;
}
.mobile-nav-active .mobile-nav {
  left: 0;
}
.mobile-nav-active .mobile-nav-toggle i {
  color: #fff;
}
/* Nav End */
/* Header End */

/* Scroll top Start */
.scroll-top {
  position: fixed;
  right: 20px;
  bottom: 50px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #007bff;
  color: #fff;
  transition: 0.3s;
  z-index: 999556;
  cursor: pointer;
  display: none;
}
.scroll-top:hover {
  background: #66b0ff;
}
@media (max-width: 768px) {
  .scroll-top {
    bottom: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    line-height: 35px;
  }
}
/* Scroll top End */

/* Footer Start */
#footer {
  background-color: #1B2C51;
  color: #fff;
  font-size: 14px;
  padding: 60px 0 30px 0;
}
#footer .wahlee-info {
  margin-bottom: 30px;
}
#footer .wahlee-info h3 {
  font-size: 24px;
  margin: 0 0 20px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-weight: 700;
}
#footer .wahlee-info p {
  font-size: 14px;
  color: #fff;
  line-height: 24px;
  margin-bottom: 0;
}
#footer h4 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  position: relative;
  padding-bottom: 12px;
}
#footer .footer-links {
  margin-bottom: 30px;
}
#footer .footer-links ul i {
  padding: 0 5px;
  color: #9eccf4;
  font-size: 12px;
  /*line-height: 1;*/
}
#footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}
#footer .footer-links ul li:first-child {
  padding-top: 0;
}
#footer .footer-links ul a {
  color: #fff;
  transition: 0.3s;
  display: inline-block;
  /*line-height: 1;*/
}
#footer .footer-links ul a:hover {
  color: #9eccf4;
}
#footer .copyright {
  border-top: 1px solid #c0c0c0;
  padding: 20px 0;
}
/* Footer End */
/* 版型共用 End */

/* 首頁  Start */
/* Index Banner Start */
#index-banner {
  display: table;
  width: 100%;
  height: 80vh;
  background: #000;
}
#index-banner .carousel-item {
  width: 100%;
  height: 80vh; /* 可視範圍高度百分比 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#index-banner .carousel-item::before {
  content: '';
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
#index-banner .carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
#index-banner .carousel-content {
  text-align: center;
}
/* @media (max-width: 768px) {
  #index-banner .carousel-content {
    padding-left: 20px;
  }
} */
#index-banner h2 {
  color: #fff;
  margin-bottom: 30px;
  font-size: 48px;
  font-weight: 700;
}
@media (max-width: 768px) {
  #index-banner h2 {
    font-size: 28px;
  }
}
#index-banner p {
  width: 80%;
  margin: 0 auto 30px auto;
  color: #fff;
}
@media (min-width: 1024px) {
  #index-banner p {
    width: 100%;
  }
}
#index-banner .carousel-fade .carousel-inner .carousel-item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
#index-banner .carousel-fade .carousel-inner .carousel-item,
#index-banner .carousel-fade .carousel-inner .active.carousel-item-left,
#index-banner .carousel-fade .carousel-inner .active.carousel-item-right {
  opacity: 0;
}
#index-banner .carousel-fade .carousel-inner .active,
#index-banner .carousel-fade .carousel-inner .carousel-item-next.carousel-item-left,
#index-banner .carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right {
  opacity: 1;
  transition: 0.5s;
}
#index-banner .carousel-fade .carousel-inner .carousel-item-next,
#index-banner .carousel-fade .carousel-inner .carousel-item-prev,
#index-banner .carousel-fade .carousel-inner .active.carousel-item-left,
#index-banner .carousel-fade .carousel-inner .active.carousel-item-right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#index-banner .carousel-control-prev, #index-banner .carousel-control-next {
  width: 10%;
}
@media (min-width: 1024px) {
  #index-banner .carousel-control-prev, #index-banner .carousel-control-next {
    width: 5%;
  }
}
#index-banner .carousel-control-next-icon, #index-banner .carousel-control-prev-icon {
  background: none;
  font-size: 32px;
  line-height: 1;
}
#index-banner .carousel-indicators li {
  cursor: pointer;
}
#index-banner .btn-readmore {
  /* font-family: "Montserrat", sans-serif; */
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 32px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  color: #fff;
  background: #036EB8;
}
#index-banner .btn-readmore:hover {
  background: #fff;
  color: #036EB8;
}
/* Index Banner End */

/* 標題 */
.index-heading {
  display: block;
  margin: 0 0 20px 0;
  border-bottom: 1px dotted #d2d2d2;
  font-size: 24px;
}
.index-heading h5 {
  margin: 0 0 -2px 0;
  padding-bottom: 15px;
  display: inline-block;
  border-bottom: 2px solid #036EB8;
}

/* 永續績效亮點 Start */
.esg-light-container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin: 0 auto;
  overflow-x: hidden;
}
@media (min-width: 1400px) {
  .esg-light-container {
    max-width: 1280px;
  }
}
@media (min-width: 1200px) {

}
@media (min-width: 992px) {

}
@media (min-width: 768px) {

}
@media (min-width: 576px) {

}
.esg-light .row + .row {
  margin-top: 50px;
}
.esg-light .row img {
  border-radius: 7px;
}
.esg-light ul i {
  padding-right: 5px;
}
.esg-light ul li {
  padding-bottom: 10px;
}
.esg-light .circle-bg {
  width: 30px;
  height: 30px;
  /*background: #33cc33;*/
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  color: #fff;
  font-size: 16px;
  /*font-weight: bold;*/
}
.esg-light .environmental i {
  color:#33cc33;
}
.esg-light .social i {
  color:#ffa31a;
}
.esg-light .governance i {
  color:#291aff;
}
.esg-light .environmental .circle-bg {
  background:#59a54b;
}
.esg-light .social .circle-bg {
  background:#d77131;
}
.esg-light .governance .circle-bg {
  background:#3e7bb4;
}
/* 永續績效亮點 End */

/* 營運績效 Start */
.counts .count-box {
  font-size: 24px;
  /* box-shadow: 0px 0 16px rgba(0, 0, 0, 0.1); */
  padding: 20px;
  background: #fff;
}
.counts .count-box i {
  display: block;
  font-size: 56px;
  margin-bottom: 15px;
  color: #428bca;
}
.counts .count-box .number {
  font-size: 38px;
  font-weight: 700;
  color: #1c5c93;
}
.counts .count-box .desc {
  font-size: 14px;
}
/* 營運績效 End */

/* 永續報告書 Start */
.esg-report .desc {
  padding: 20px;
}
.esg-report h1 {
  color: #2f3883;
}
.esg-report p {
  color: #9B9EA3;
}
.esg-report .desc .row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.esg-report .desc .col-md-6 {
  margin-top: 20px;
  padding-left: 5px !important;
}
.esg-report .desc .col-md-6 span {
  font-size: 20px;
}
.esg-report .desc .one {
  border: 0;
  border-left: 4px solid var(--development);
}
.esg-report .desc .one > a {
  color: var(--development);
}
.esg-report .desc .two {
  border: 0;
  border-left: 4px solid var(--goverance);
}
.esg-report .desc .two > a {
  color: var(--goverance);
}
.esg-report .desc .three {
  border: 0;
  border-left: 4px solid var(--risk);
}
.esg-report .desc .three > a {
  color: var(--risk);
}
.esg-report .desc .four {
  border: 0;
  border-left: 4px solid var(--environment);
}
.esg-report .desc .four > a {
  color: var(--environment);
}
.esg-report .desc .five {
  border: 0;
  border-left: 4px solid var(--workplace);
}
.esg-report .desc .five > a {
  color: var(--workplace);
}
.esg-report .desc .six {
  border: 0;
  border-left: 4px solid var(--social);
}
.esg-report .desc .six > a {
  color: var(--social);
}
/* 永續報告書 End */

/* 活動輪播 Start */
.event-carousel .event-item {
  /* width: auto;
  display: inline-block;
  padding: 0 4px; */
  border: 1xp solid #999999;
  text-align: center;
}
.event .owl-nav, .event .owl-dots {
  margin-top: 5px;
  text-align: center;
}
.event .owl-dot.active {
  background-color: #68A4C4 !important;
}
.event .owl-dot {
  display: inline-block;
  margin: 0 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ddd !important;
}
/* 活動輪播 End */


/* 內頁共用 Start */

/* 現在位置 Start */
.breadcrumb-area {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 255px;
}
@media (max-width: 768px) {
  .breadcrumb-area {
    height: 180px;
  }
}
.breadcrumb-content {
  /* padding-left: 60px; */
  padding-top: 60px;
  position: absolute;
  z-index: 999;
}
.breadcrumb-content h2 {
  color: #ffffff;
  font-size: 30px;
  display: block;
}
.breadcrumb-content .breadcrumb {
  background-color: transparent;
  padding: 0;
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .breadcrumb-content h2 {
    padding-left: 50px;
  }
  .breadcrumb-content h2 {
    font-size: 24px;
  }
  .breadcrumb-content .breadcrumb {
    background-color: transparent;
    padding: 0 0 0 50px;
    margin-bottom: 0;
  }
}
.breadcrumb-content .breadcrumb .breadcrumb-item:before {
  color: #ffffff;
}
.breadcrumb-content .breadcrumb .breadcrumb-item.active {
  color: #000000;
  font-size: 16px;
  font-weight: 600;
}
.breadcrumb-content .breadcrumb .breadcrumb-item a {
  font-size: 16px;
  color: #ffffff;
  font-weight: 600;
}
.breadcrumb-content .breadcrumb .breadcrumb-item a:hover {
  color: #000000;
}
/* 現在位置 End */

/* 內頁標題 Start */
.page-head {
  display: block;
  margin: 0 0 20px 0;
  border-bottom: 1px dotted #d2d2d2;
  font-size: 15px;
}
.page-head h5 {
  margin: 0 0 -2px 0;
  padding-bottom: 8px;
  display: inline-block;
  border-bottom: 2px solid #036EB8;
}
/* 內頁小標題 */
.page-sub-head {
  font-size: 12px;
}
/* 內頁標題 End */

/* 內頁 Banner */
.page-banner {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 160px 0 200px;
}
/* 漸層效果框 */
.page-banner::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  /* background-image: linear-gradient(to right, rgb(48, 148, 249), transparent); */
}
/* 表格 */
.table {
  font-size: 13px;
}
.table-sub-text {
  float: right;
}
/* 內頁共用 End */

/* 永續發展管理架構 Start */

/* 永續發展共用 Start */
.development .page-banner::before {
  background-image: linear-gradient(45deg, #0073e6 0%, transparent 40%);
}
.development .page-head h5 {
  border-bottom: 2px solid var(--development);
}
.development .page-sub-head {
  color: var(--development);
}
/* 表格 Start */
.development .table-bordered {
  border: 2px solid var(--development) !important;
}
.development .table thead th {
  background-color: #fcdc9c;
}
.development .table tbody td {
  padding: .5rem .75rem;
}
.development .table thead th, .development .table tbody th, .development .table tbody td {
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--development) !important;
}
.development .table tr:nth-child(odd) {
  /* background-color: #fdedce; */
}
.development .table i {
  font-size: 22px;
  color: var(--development);
}
.development .value-chain-desc i {
  color: var(--development);
}
/* 表格 End */

/* 永續發展共用 End */

/* 經營者的話 Start  */
.environmental .leader-sub-head {
  background: var(--environment);
}
.workplace .leader-sub-head {
  background: var(--workplace);
}
.social .leader-sub-head {
  background: var(--social);
}
.goverance .leader-sub-head {
  background: var(--goverance);
}
.leader-sub-head {
  width: 30px;
  height: 30px;
  background: var(--environment);
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  color: #fff;
  font-size: 16px;
}
/* 經營者的話 End */

/* 永續發展策略 Start */

/* 永續發展委員會及功能小組 Start */
.strategy-org-chart {
  position: relative;
  width: 100%;
  height: 700px;
  overflow-x: auto;
}
.strategy-org-chart .org-level1, .strategy-org-chart .org-level2, .strategy-org-chart .org-level3,
.strategy-org-chart .org-level4, .strategy-org-chart .org-level5 {
  position: relative;
  height: 80px;
}
.strategy-org-chart .org-level6, .strategy-org-chart .org-level7, .strategy-org-chart .org-level8 {
  position: relative;
  height: 70px;
}
/* 定位 */
/* 董事長室、永續發展委員會、執行長室 */
.strategy-org-chart .org-level1 .box1, .strategy-org-chart .org-level2 .box1, .strategy-org-chart .org-level3 .box1 {
  position: absolute;
  left: 200px;
  top: 0px;
}
/* 資訊接露/永續報告書 投資人關係部 */
.strategy-org-chart .org-level4 .box1 {
  position: absolute;
  left: 380px;
  top: -20px;
}
/* 公司治理組 財務部 */
.strategy-org-chart .org-level5 .box1 {
  position: absolute;
  left: 0px;
  top: 0px;
}
/* 環境永續組 營運支援部 */
.strategy-org-chart .org-level5 .box2 {
  position: absolute;
  left: 200px;
  top: 0px;
}
/* 企業社會責任組 */
.strategy-org-chart .org-level5 .box3 {
  position: absolute;
  left: 400px;
  top: 0px;
}
/* 風險管理小組 */
.strategy-org-chart .org-level6 .box1 {
  position: absolute;
  left: 50px;
  top: 0px;
}
/* 勞工、人權、員工相關 人力資源部 | 客戶、供應商 策略規劃處 | 社區參與 投資人關係部 */
.strategy-org-chart .org-level6 .box3, .strategy-org-chart .org-level7 .box3, .strategy-org-chart .org-level8 .box3 {
  position: absolute;
  left: 450px;
  top: 0px;
}
/* 組織項目容器 */
.strategy-org-chart .org-box {
  position: relative;
  height: 80px;
}
.strategy-org-chart .org-body {
  position: absolute;
  left: 50px;
  top: 20px;
  font-size: 14px;
}
/* 組織項目漸層背景 */
.strategy-org-chart .org-body .item-body-bg {
  background: linear-gradient(90deg, #fff09f, #fac96c);
}
/* 組織項目(大) */
.strategy-org-chart .org-body .item-body-l {
  width: 180px;
  height: 60px;
  display: flex; /* 彈性排版 */
  align-items: center; /* 垂直置中 */
  justify-content: center; /* 水平置中 */
}
/* 組織項目(大) */
.strategy-org-chart .org-body .item-body-m {
  width: 160px;
  height: 60px;
  display: flex; /* 彈性排版 */
  align-items: center; /* 垂直置中 */
  justify-content: center; /* 水平置中 */
}
/* 組織項目(小) */
.strategy-org-chart .org-body .item-body-s {
  width: 180px;
  height: 50px;
  display: flex; /* 彈性排版 */
  align-items: center; /* 垂直置中 */
  justify-content: center; /* 水平置中 */
}
/* 組織項目(小) */
.strategy-org-chart .org-body .item-body-xs {
  width: 160px;
  height: 50px;
  display: flex; /* 彈性排版 */
  align-items: center; /* 垂直置中 */
  justify-content: center; /* 水平置中 */
}
/* 組織項目(圓弧) */
.strategy-org-chart .org-body .two-radius {
  border-radius: 20px 2px 20px 2px;
}
/* 連接線 */
/* 董事長室、永續發展委員會 */
.strategy-org-chart .org-level1 .org-box:after, .strategy-org-chart .org-level2 .org-box:after {
  position: absolute;
  content: '';
  height: 30px;
  left: 130px;
  top: 80px;
  border-left: 2px solid #fac96c;
}
/* 執行長室 */
.strategy-org-chart .org-level3 .org-box:after {
  position: absolute;
  content: '';
  height: 80px;
  left: 130px;
  top: 80px;
  border-left: 2px solid #fac96c;
}
/* 資訊揭露/永續報告書 投資人關係部 */
.strategy-org-chart .org-level4 .org-box:after {
  position: absolute;
  content: '';
  width: 100px;
  left: -50px;
  top: 50px;
  border-top: 2px solid #fac96c;
}
/* 公司治理組 財務部  | 環境永續組 營運支援部 | 企業社會責任組 */
.strategy-org-chart .org-level5 .org-box:after {
  position: absolute;
  content: '';
  width: 200px;
  height: 20px;
  left: 130px;
  top: 0px;
  border-left: 2px solid #fac96c;
  border-top: 2px solid #fac96c;
}
/* 企業社會責任組 */
.strategy-org-chart .org-level5 .box3 .org-box:after {
  position: absolute;
  content: '';
  width: 0px;
}
/* 風險管理小組 | 勞工、人權、員工相關 人力資源部 | 客戶、供應商 策略規劃處 | 社區參與 投資人關係部 */
.strategy-org-chart .org-level6 .org-box::before, .strategy-org-chart .org-level7 .org-box:before, .strategy-org-chart .org-level8 .org-box:before {
  position: absolute;
  content: '';
  width: 30px;
  left: 20px;
  top: 50px;
  border-bottom: 2px solid #fac96c;
}
.strategy-org-chart .org-level6 .org-box:after {
  position: absolute;
  content: '';
  height: 50px;
  left: 20px;
  top: 0px;
  border-left: 2px solid #fac96c;
}
.strategy-org-chart .org-level7 .org-box:after, .strategy-org-chart .org-level8 .org-box:after {
  position: absolute;
  content: '';
  height: 70px;
  left: 20px;
  top: -20px;
  border-left: 2px solid #fac96c;
}
/* 組織項目標題 */
.strategy-org-chart .org-body .item-body-head {
  color: #000000;
  text-align: center;
  font-weight: bold;
}
/* 永續發展委員會及功能小組 End */

/* 永續發展策略 End */

/* 利害關係人議和 Start */
.stakeholders-box {
  width: 100%;
  padding: 10px;
  position: relative;
  overflow: hidden;
  margin: 5px;
  background: #ffffff;
  /* box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1); */
  transition: all 0.3s ease-in-out;
  /* border-radius: 15px; */
  text-align: center;
}
.stakeholders-box:hover {
  transform: translateY(-5px);
  border-color: var(--development);
}
.stakeholders-box .icon {
  border-bottom: 3px solid var(--development);
  margin-bottom: 15px;
}
.stakeholders-box .icon i {
  font-size: 35px;
  line-height: 1;
  margin: 15px 0;
  color: #333333; 
}
.stakeholders-box .title {
  font-weight: 700;
  font-size: 15px;
}
/* 利害關係人議和 End */

/* 重大主題鑑別 Start */
/* 步驟 */
.step-box {
  padding-bottom: 15px;
  margin-bottom: 0px;
}
.step-box .step {
  height: 60px;
  display: flex; /* 彈性排版 */
  align-items: center; /* 垂直置中 */
  border-radius: 20px 2px 20px 2px;
  /* background: #f8b62d; */
  background: linear-gradient(90deg, #fff09f, #fac96c);
  font-size: 14px;
  font-weight: bold;
  color: #000000;
}
.step-box span {
  display: inline-block;
  background: #fff9ce;
  border-radius: 40px;
  padding: 8px 12px;
  margin-right: 10px;
}
.step-box .step-desc {
  border: 1px solid #f8b62d;
  padding:  10px;
}
.step-box h5 {
  font-size: 18px;
  font-weight: 700;
  color: #364146;
  margin-bottom: 10px;
}
.step-box:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
.step-box:last-child:after {
  display: none;
}
/* .step-frame {
  position: relative;
}
.step-frame .step1 {
  position: absolute;
  top: 20px;
}
.step-frame .step2 {
  position: absolute;
  top: 200px;
}
.step-frame .step3 {
  position: absolute;
  top: 380px;
}
.step-frame .step-box {
  position: relative;
}
.step-frame .step-box .step-number {
  position: absolute;
  z-index: 20;
  top: -20px;
  left: -10px;
  border-radius: 20%;
  background-color: var(--development);
  box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.5);
  padding: 10px 15px;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
}
.step-frame .step-box .step-title {
  position: absolute;
  z-index: 10;
  width: 400px;
  height: 40px;
  top: 5px;
  left: -10px;
  border-radius: 5px;
  background: linear-gradient(90deg, #f1d742, #fac96c);
  padding: 10px;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  color: #000000;
}
.step-frame .step-box .step-content {
  position: absolute;
  z-index: 5;
  top: 30px;
  left: 10px;
  border: 1px solid var(--development);
  padding: 30px 20px 20px 20px;
} */


/* 重大主題鑑別 End */

/* 永續發展管理架構 End */

/* 公司治理 Start */

/* 公司治理共用 Start */
.goverance .page-banner::before {
  background-image: linear-gradient(45deg, #0059b3 0%, transparent 40%);
}
.goverance .page-head h5 {
  border-bottom: 2px solid var(--goverance);
}
.goverance .page-sub-head {
  color: var(--goverance);
}
.goverance i {
  padding-right: 5px;
  color: var(--goverance);
}
/* 表格 Start */
.goverance .table-bordered {
  border: 2px solid var(--goverance) !important;
}
.goverance .table thead th, .goverance .table tbody .goverance-bg {
  background-color: var(--goverance);
  border: 1px solid #ffffff !important;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
}
.goverance .table thead td {
  border: 1px solid var(--goverance) !important;
  text-align: center;
  vertical-align: middle;
  /* padding: .5rem .75rem; */
}
.goverance .table tbody td {
  border: 1px solid var(--goverance) !important;
  text-align: center;
  vertical-align: middle;
  padding: .5rem .75rem;
}
.goverance .table i {
  font-size: 16px;
  color: var(--goverance);
}
.goverance .table .purple {
  background-color: var(--goverance) !important;
  color: #ffffff !important;
}
/* 表格 End */

/* 公司治理共用 End */

/* 公司簡介 Start */

/* 營運據點 */
.global-bg {
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  padding: 4em 0;
}
.location-section {
  padding: 20px 0px 20px;
}
.location-item {
  margin-bottom: 20px;
  background-color: #ffffff;
}
.location-item img {
  border-right: 10px solid #f6f5f1;
}
.location-desc {
  padding: 20px 10px;
}
.location-name {
  font-size: 18px;
  /* border-bottom: 3px solid #103453;
  margin: 10px 50px; */
}
.location-info {
  font-size: 15px;
  text-align: left !important;
}
.location-box {
  position: relative;
  overflow: hidden;
}
.location-img {
  border: 1px solid #000000;
}
.location-box .location-box-overlay {
  position: absolute;
  top: 70%;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  margin-top: 0;
  color: #103453;
  /* background: rgba(250, 250, 250, 0.5); */
  transition: 350ms;
  text-align: center;
  border: 1px solid #103453;
}

/* 股權結構 */
.chart {
  width: 100%; 
  min-height: 380px;
}

/* 主要產品與服務 */
.service-box {
  background: #fff;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}
.service-box .img img {
  border-radius: 4px 4px 0 0;
}
.service-box h2 {
  color: #000;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  padding: 0;
  margin: 20px 0 12px 0;
}
.service-box .desc {
  font-size: 14px;
  line-height: 24px;
  color: #333;
  margin-bottom: 0;
  padding: 0 20px 20px 20px;
}
/* 公司簡介 End */

/* 公司治理 Start */

/* 公司組織圖 Start */
.company-org-chart {
  position: relative;
  width: 100%;
  height: 700px;
  overflow-x: auto;
}
.company-org-chart .org-level1, .company-org-chart .org-level2, .company-org-chart .org-level3,
.company-org-chart .org-level4, .company-org-chart .org-level6, .company-org-chart .org-level7 {
  position: relative;
  height: 70px;
}
/* 稽核室 */
.company-org-chart .org-level5 {
  position: relative;
  height: 70px;
}
/* 新事業開發部.... */
.company-org-chart .org-level8 {
  position: relative;
  height: 200px;
}
/* 股東大會、董事會 */
.company-org-chart .org-level1 .box1, .company-org-chart .org-level2 .box1 {
  position: absolute;
  left: 500px;
  top: 0px;
}
/* 董事長室 */
.company-org-chart .org-level5 .box1 {
  position: absolute;
  left: 500px;
  top: -80px;
}
/* 執行長室 */
.company-org-chart .org-level6 .box1 {
  position: absolute;
  left: 500px;
  top: -50px;
}
/* 財務處 */
.company-org-chart .org-level7 .box2  {
  position: absolute;
  left: 500px;
  top: -20px;
}
/* 審計委員會 */
.company-org-chart .org-level3 .box1 {
  position: absolute;
  left: 620px;
  top: 0px;
}
/* 薪酬委員會 */
.company-org-chart .org-level3 .box2 {
  position: absolute;
  left: 740px;
  top: 0px;
}
/* 永續發展委員會 */
.company-org-chart .org-level3 .box3 {
  position: absolute;
  left: 860px;
  top: 0px;
}
/* 稽核室 */
.company-org-chart .org-level4 .box1 {
  position: absolute;
  left: 350px;
  top: -30px;
}
/* 策略規劃處 */
.company-org-chart .org-level7 .box1 {
  position: absolute;
  left: 160px;
  top: -20px;
}
/* 總經理室 */
.company-org-chart .org-level7 .box3 {
  position: absolute;
  left: 840px;
  top: -20px;
}
/* 新事業開發部 */
.company-org-chart .org-level8 .box1 {
  position: absolute;
  left: 5px;
  top: 0px;
}
/* 法務課 */
.company-org-chart .org-level8 .box2 {
  position: absolute;
  left: 55px;
  top: 0px;
}
/* 營運作業管理部 */
.company-org-chart .org-level8 .box3 {
  position: absolute;
  left: 105px;
  top: 0px;
}
/* 資訊部 */
.company-org-chart .org-level8 .box4 {
  position: absolute;
  left: 155px;
  top: 0px;
}
/* 策略投資部 */
.company-org-chart .org-level8 .box5 {
  position: absolute;
  left: 205px;
  top: 0px;
}
/* 投資管理部 */
.company-org-chart .org-level8 .box6 {
  position: absolute;
  left: 255px;
  top: 0px;
}
/* 經營企劃部 */
.company-org-chart .org-level8 .box7 {
  position: absolute;
  left: 305px;
  top: 0px;
}
/* 人力資源部 */
.company-org-chart .org-level8 .box8 {
  position: absolute;
  left: 355px;
  top: 0px;
}
/* 投資人關係部 */
.company-org-chart .org-level8 .box9 {
  position: absolute;
  left: 495px;
  top: 0px;
}
/* 會計部 */
.company-org-chart .org-level8 .box10 {
  position: absolute;
  left: 545px;
  top: 0px;
}
/* 財務部 */
.company-org-chart .org-level8 .box11 {
  position: absolute;
  left: 595px;
  top: 0px;
}
/* 物流管理部 */
.company-org-chart .org-level8 .box12 {
  position: absolute;
  left: 785px;
  top: 0px;
}
/* 營運支援部 */
.company-org-chart .org-level8 .box13 {
  position: absolute;
  left: 835px;
  top: 0px;
}
/* 電子構裝事業部 */
.company-org-chart .org-level8 .box14 {
  position: absolute;
  left: 885px;
  top: 0px;
}
/* 光電事業部 */
.company-org-chart .org-level8 .box15 {
  position: absolute;
  left: 935px;
  top: 0px;
}
/* 工程塑膠事業部 */
.company-org-chart .org-level8 .box16 {
  position: absolute;
  left: 985px;
  top: 0px;
}
/* 半導體事業部 */
.company-org-chart .org-level8 .box17 {
  position: absolute;
  left: 1035px;
  top: 0px;
}
/* 股東大會 */
.company-org-chart .org-level1 .org-box {
  position: relative;
  height: 70px;
}
/* 董事會 */
.company-org-chart .org-level2 .org-box {
  position: relative;
  height: 70px;
}
/* 審計委員會 | 薪酬委員會 | 永續發展委員會 */
.company-org-chart .org-level3 .org-box {
  position: relative;
  height: 70px;
}
/* 董事長室 */
.company-org-chart .org-level5 .org-box {
  position: relative;
  height: 70px;
}
/* 稽核室 */
.company-org-chart .org-level4 .org-box {
  position: relative;
  height: 70px;
}
/* 執行長室 */
.company-org-chart .org-level6 .org-box {
  position: relative;
  height: 70px;
}
/* 策略規劃處 | 財務處 | 總經理室 */
.company-org-chart .org-level7 .org-box {
  position: relative;
  height: 70px;
}
/* 新事業開發部 | 法務課 | 營運作業管理部 | 資訊部 | 策略投資部 | 投資管理部 | 經營企劃部 | 人力資源部 | 投資人關係部 | 會計部 | 財務部
 | 物流管理部 | 營運支援部 | 電子構裝事業部 | 光電事業部 | 工程塑膠事業部 | 半導體事業部 */
.company-org-chart .org-level8 .org-box {
  position: relative;
  height: 150px;
}
.company-org-chart .org-body {
  position: absolute;
  left: 50px;
  top: 20px;
}
/* 組織項目背景 */
.company-org-chart .org-body .item-body-bg {
  background-color: var(--goverance);
}
.company-org-chart .org-body .item-body-bg2 {
  background-color: #ffb3d9;
}
/* 組織項目(大) */
.company-org-chart .org-body .item-body-b {
  width: 120px;
  height: 50px;
  display: flex; /* 彈性排版 */
  align-items: center; /* 垂直置中 */
  justify-content: center; /* 水平置中 */
}
/* 組織項目(小) */
.company-org-chart .org-body .item-body-s {
  width: 100px;
  height: 50px;
  display: flex; /* 彈性排版 */
  align-items: center; /* 垂直置中 */
  justify-content: center; /* 水平置中 */
}
/* 組織項目(縱向) */
.company-org-chart .org-body .item-body-thin {
  width: 30px;
  height: 150px;
  display: flex; /* 彈性排版 */
  justify-content: top; /* 水平置中 */
  align-items: center; /* 垂直置中 */
  color: #000000;
  padding-top: 10px;
  -webkit-writing-mode: vertical-lr; /* 直書 */
  writing-mode: vertical-lr;
}
/* 組織項目標題 */
.company-org-chart .org-body .item-body-head {
  color: #ffffff;
  text-align: center;
  font-weight: bold;
}
/* 圓弧 */
.company-org-chart .org-body .two-radius {
  border-radius: 20px 2px 20px 2px;
}
/* 連接線 */
/* 股東大會 */
.company-org-chart .org-level1 .box1 .org-box:after {
  position: absolute;
  content: '';
  height: 50px;
  left: 110px;
  top: 60px;
  border-left: 2px solid var(--goverance);
}
/* 董事會 */
.company-org-chart .org-level2 .box1 .org-box:before {
  position: absolute;
  content: '';
  width: 360px;
  left: 100px;
  top: 40px;
  border-top: 2px solid var(--goverance);
}
.company-org-chart .org-level2 .box1 .org-box:after {
  position: absolute;
  content: '';
  height: 120px;
  left: 110px;
  top: 60px;
  border-left: 2px solid var(--goverance);
}
/* 審計委員會 | 薪酬委員會 | 永續發展委員會 */
.company-org-chart .org-level3 .org-box:after {
  position: absolute;
  content: '';
  height: 50px;
  left: 100px;
  top: -30px;
  border-left: 2px solid var(--goverance);
}
/* 董事長室 */
.company-org-chart .org-level5 .org-box:after {
  position: absolute;
  content: '';
  height: 80px;
  left: 110px;
  top: 50px;
  border-left: 2px solid var(--goverance);
}
/* 稽核室 */
.company-org-chart .org-level4 .org-box:before {
  position: absolute;
  content: '';
  width: 160px;
  left: 100px;
  top: 0px;
  border-top: 2px solid var(--goverance);
}
.company-org-chart .org-level4 .org-box:after {
  position: absolute;
  content: '';
  height: 30px;
  left: 100px;
  top: 0px;
  border-left: 2px solid var(--goverance);
}
/* 執行長室、財務處 */
.company-org-chart .org-level6 .box1 .org-box:after, .company-org-chart .org-level7 .box2 .org-box:after {
  position: absolute;
  content: '';
  height: 60px;
  left: 110px;
  top: 50px;
  border-left: 2px solid var(--goverance);
}
/* 策略規劃處 | 財務處 */
.company-org-chart .org-level7 .box1 .org-box:after, .company-org-chart .org-level7 .box2 .org-box:after {
  position: absolute;
  content: '';
  width: 340px;
  height: 20px;
  left: 110px;
  top: 0px;
  border-left: 2px solid var(--goverance);
  border-top: 2px solid var(--goverance);
}
/* 總經理室 */
.company-org-chart .org-level7 .box3 .org-box:before {
  position: absolute;
  content: '';
  height: 20px;
  left: 110px;
  top: 0px;
  border-left: 2px solid var(--goverance);
}
/* 總經理室 */
.company-org-chart .org-level7 .box3 .org-box:after {
  position: absolute;
  content: '';
  width: 0px;
}
/* 新事業開發部 | 法務課 | 營運作業管理部 | 資訊部 | 投資管理部 | 經營企劃部 | 人力資源部 | 投資人關係部 | 財務部
 | 物流管理部 | 營運支援部 | 光電事業部 | 工程塑膠事業部 | 半導體事業部 */
.company-org-chart .org-level8 .org-box:after {
  position: absolute;
  content: '';
  height: 20px;
  left: 65px;
  top: 0px;
  border-left: 2px solid var(--goverance);
}
/* 新事業開發部 | 法務課 | 營運作業管理部 | 資訊部 | 投資管理部 | 經營企劃部 | 投資人關係部 | 會計部
 | 物流管理部 | 營運支援部 | 電子構裝事業部 | 光電事業部 | 工程塑膠事業部 */
.company-org-chart .org-level8 .org-box:after {
  position: absolute;
  content: '';
  width: 50px;
  left: 65px;
  top: 0px;
  border-top: 2px solid var(--goverance);
}
/* 策略投資部 | 會計部 | 電子構裝事業部 */
.company-org-chart .org-level8 .box5 .org-box:before, .company-org-chart .org-level8 .box10 .org-box:before, .company-org-chart .org-level8 .box14 .org-box:before {
  position: absolute;
  content: '';
  height: 40px;
  left: 65px;
  top: -20px;
  border-left: 2px solid var(--goverance);
}
/* 人力資源部 | 財務部 | 半導體事業部 */
.company-org-chart .org-level8 .box8 .org-box:after, .company-org-chart .org-level8 .box11 .org-box:after, .company-org-chart .org-level8 .box17 .org-box:after {
  position: absolute;
  content: '';
  width: 0px;
}
/* 公司組織圖 End */

.directors-box {
  width: 100%;
  padding: 10px;
  position: relative;
  overflow: hidden;
  margin: 5px;
  background: #ffffff;
  /* box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1); */
  transition: all 0.3s ease-in-out;
  /* border-radius: 15px; */
  text-align: center;
  /* border-bottom: 3px solid #fff; */
  /*border: 1px solid #f8b62d;*/
  /* border-bottom: 2px solid var(--goverance); */
}
.directors-box:hover {
  transform: translateY(-5px);
  border-color: var(--goverance);
}
.directors-box .icon {
  border-bottom: 3px solid var(--goverance);
  margin-bottom: 15px;
}
.directors-box .icon i {
  font-size: 40px;
  line-height: 1;
  margin: 10px 0;
  color: #333333;
}
.directors-box .title {
  font-weight: 700;
  font-size: 15px;
}
/* 公司治理 End */


/* 客戶服務管理 Start */
.customer-case-box {
  padding: 30px;
  margin: 15px 0px;
  min-height: 150px;
  border: 1px solid var(--goverance);
  border-radius: 10px;
  /* -webkit-box-shadow: 0px 2px 25px -16px rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0px 2px 25px -16px rgba(0, 0, 0, 0.26);
  box-shadow: 0px 2px 25px -16px rgba(0, 0, 0, 0.26); */
}
.customer-case-box h4 {
  color: var(--goverance);
  font-weight: bold;
}
/* .customer-case-box.case {
  background-color: rgba(250, 250, 250, 0.1);
}
.customer-case-box.case-d {
  background-color: rgba(146, 7, 131, 0.6);
}
.customer-case-box.case-l {
  background-color: rgba(204, 153, 255, 0.6);
} */

.customer-case-box.case1 {
  /* background: #afd3ce; */
  background-color: rgba(103, 218, 250, 0.3);
}
.customer-case-box.case2 {
  background: #ebd2b4;
}
.customer-case-box.case3 {
  background: #c1bebe;
}
.customer-case-box.case4 {
  background: #afd3ce;
}
.customer-case-box h4 {
  font-size: 18px;
  font-weight: 700;
}
.customer-case-box .case-desc {
  font-size: 13px;
}
/* 客戶服務管理 End */

/* 供應鏈管理 Start */

/* 供應、協力商管理流程圖 Start */
.supply-process {
  position: relative;
  width: 100%;
  height: 650px;
  overflow-x: auto;
}
.supply-process .process-box {
  position: relative;
  height: 80px;
}
.supply-process .process-dept {
  position: absolute;
  width: 120px;
  left: 0;
  top: 20px;
}
.supply-process .process-dept span {
  color: var(--goverance);
  font-weight: bold;
}
.supply-process .process-chapter {
  position: absolute;
  left: 140px;
  top: 0;
  color: #ff00ff;
}
.supply-process .process-body {
  position: absolute;
  width: 150px;
  left: 140px;
  top: 20px;
}
.supply-process .process-doc {
  position: absolute;
  width: 230px;
  left: 310px;
  top: 20px;
}
.supply-process .process-doc .disc {
  font-size: 14px;
}
.supply-process .item-head {
  color: #ffffff;
  background: linear-gradient(90deg, #E4007F, #993366);
  height: 40px;
  padding-top: 8px;
  text-align: center;
  border-radius: 20px 2px 20px 2px;
}
.supply-process .item-body {
  color: #ffffff;
  background: linear-gradient(90deg, #ffb3ff, #ff66ff);
  height: 40px;
  padding-top: 8px;
  text-align: center;
}
.supply-process .item-body.all-radius {
  border-radius: 20px;
}
.supply-process .item-body.two-radius {
  border-radius: 20px 2px 20px 2px;
}
/* 連接虛線 */
.supply-process .process-box:after {
  position: absolute;
  content: '';
  height: calc(100% - 40px);
  left: 215px;
  top: 60px;
  border-left: 2px dashed #ff66ff;
}
.supply-process.process-box:first-child:after, .process-box:last-child:after {
  display: none;
}
/* 供應、協力商管理流程圖 End */

/* 供應鏈管理 End */

/* 專欄 Start */
.video-bg {
  background-image: url("../images/column-2-2.jpg");
  background-repeat: no-repeat;
  width: 700px;
  height: 365px;
  padding: 170px 320px;
  float: right;
}
.video-icon {
  width: 70px;
  height: 70px;
  background: #ffffff;
  opacity: 80%;
  border-radius: 50%;
  padding: 20px 25px;
}
.video-bg i {
  color: #444444;
  font-size: 28px;
  
}
/* 專欄 End */

/* 公司治理 End */


/* 風險管理 Start */
/* 風險管理共用 Start */
.risk .page-banner::before {
  background-image: linear-gradient(to right, #0086b3 0%, transparent 40%);
}
.risk .page-head h5 {
  border-bottom: 2px solid var(--risk);
}
.risk .page-sub-head {
  color: var(--risk);
}
/* 表格 Start */
.risk .table-report {
  width: 40%;
}
@media (max-width: 768px) {
  .risk .table-report {
    width: 100%;
  }
}
.risk .table-bordered {
  border: 2px solid var(--risk) !important;
}
.risk .table thead th, .risk .table tbody .risk-bg {
  background-color: var(--risk);
  border: 1px solid #ffffff !important;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
}
.risk .table td {
  border-color: var(--risk) !important;
  text-align: center;
  vertical-align: middle;
  padding: .5rem .75rem;
}
.risk .table .gray-blue {
  background-color: #80aaff;
  color: #ffffff;
}
/* 表格 End */

.risk i {
  padding-right: 5px;
  color: var(--risk);
}
/* 風險管理共用 End */

/* 品質保證 Start */
.certi-wrapper {
  position: relative;
  height: 650px;
}
.certi-1 {
  position: absolute;
  z-index: 2; 
  left: 0px;
  top: 0px;
}
.certi-1 img, .certi-2 img {
  width: 280px;
  height: 400px;
  border: 1px solid #000;
  padding: 2px;
}
.certi-2 {
  position: absolute;
  z-index: 3;
  left: 200px;
  top: 230px;
}
.certi-3 img {
  width: 455px;
  height: 650px;
  border: 1px solid #000;
  padding: 2px;
}
.certi-box {
  border: 1px solid var(--risk);
}
.certi-box .certi-title {
  padding: 10px;
  background-color: var(--risk);
  color: #ffffff;
}
.certi-box .certi-desc {
  padding: 10px;
}

/* 品質保證 End */


/* 資訊安全與客戶隱私 Start */
.is-org-chart {
  position: relative;
  width: 100%;
  height: 360px;
  overflow-x: auto;
}
.is-org-chart .org-level1, .is-org-chart .org-level2, .is-org-chart .org-level3 {
  position: relative;
  height: 80px;
}
.is-org-chart .org-level1 .box1, .is-org-chart .org-level2 .box1 {
  position: absolute;
  left: 200px;
  top: 0px;
}
.is-org-chart .org-level3 .box1 {
  position: absolute;
  left: -40px;
  top: 20px;
}
.is-org-chart .org-level3 .box2 {
  position: absolute;
  left: 110px;
  top: 20px;
}
.is-org-chart .org-level3 .box3 {
  position: absolute;
  left: 270px;
  top: 20px;
}
.is-org-chart .org-level3 .box4 {
  position: absolute;
  left: 430px;
  top: 20px;
}
.is-org-chart .org-box {
  position: relative;
  height: 80px;
}
.is-org-chart .org-body {
  position: absolute;
  left: 50px;
  top: 20px;
}
.is-org-chart .org-body .item-body-bg {
  background: linear-gradient(90deg, #80aaff, #002b80);

}
.is-org-chart .org-body .item-body-bg2 {
  background: linear-gradient(90deg, #80aaff, #3377ff);
}
/* 召集人 | 執行秘書 */
.is-org-chart .org-body .item-body-s {
  width: 130px;
  height: 60px;
}
/* 政策規劃小組 | 資安推動小組 | 資安執行小組 | 資安稽核小組 */
.is-org-chart .org-body .item-body-b {
  width: 130px;
  height: 110px;
}
.is-org-chart .org-body .item-body-head {
  width: 130px;
  height: 35px;
  display: flex; /* 彈性排版 */
  align-items: center; /* 垂直置中 */
  justify-content: center; /* 水平置中 */
  color: #ffffff;
  font-weight: bold;
}
.is-org-chart .org-body .item-body-subhead {
  width: 130px;
  display: flex; /* 彈性排版 */
  align-items: center; /* 垂直置中 */
  justify-content: center; /* 水平置中 */
  font-size: 12px;
  color: #ffffff;
}
/* 圓弧 */
.is-org-chart  .org-body .two-radius {
  border-radius: 20px 2px 20px 2px;
}
/* 連接線 */
/* 召集人 | 執行秘書 */
.is-org-chart .org-level1 .org-box:after, .is-org-chart .org-level2 .org-box:after {
  position: absolute;
  content: '';
  height: 20px;
  left: 110px;
  top: 80px;
  border-left: 2px solid #002b80;
}
/* 政策規劃小組 | 資安推動小組 | 資安執行小組 */
.is-org-chart .org-level3 .org-box:before {
  position: absolute;
  content: '';
  width: 160px;
  height: 20px;
  left: 130px;
  top: 0px;
  border-left: 2px solid #002b80;
  border-top: 2px solid #002b80;
}
/* 資安稽核小組 */
.is-org-chart .org-level3 .box4 .org-box:before {
  position: absolute;
  content: '';
  width: 0px;
}
/* End */


/* 法令遵循 Start */
.anti-corruption  {
  /* border: 2px solid var(--risk); */
}
.anti-corruption .caption {
  color: #103453;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding: 20px 0;
}
/* 法令遵循 End */


/* 風險管理 End */

/* 永續環境 Start */
/* 永續環境共用 Start */
.environment .page-banner::before {
  background-image: linear-gradient(45deg, #13a036 0%, transparent 40%);
}
.environment .page-head h5 {
  border-bottom: 2px solid var(--environment);
}
.environment .page-sub-head {
  color: var(--environment);
}
/* 表格 Start */
.environment .table {
  text-align: center;
  border: 2px solid var(--environment) !important;
}
.environment .table th, .environment .table tbody .environment-bg {
  background-color: var(--environment);
  border: 1px solid #ffffff !important;
  color: #ffffff;
  vertical-align: middle;
}
.environment .table td {
  border: 1px solid var(--environment) !important;
  vertical-align: middle;
  padding: .5rem .75rem;
}
.environment .thead tr {
  background-color: #e6ffcc;
  color: var(--environment);
}
/* 表格 End */

.environment .text-g {
  color: var(--environment);
}
/* 永續環境共用 End */

/* 專欄 Start */

/* 製冷劑生命週期 */
.life-cycle-frame {
  position: relative;
  width: 100%;
  overflow-x: auto;
}
.border-box {
  width: 380px;
  height: 380px;
  margin: 50px;
}
.border-bg {
  padding: 20px;
  background: linear-gradient(to top left, #99ff66, #14AB39);
  border-radius: 50%;
}
.life-cycle {
  position: relative;
  width: 340px;
  height: 340px;
  background: #ffffff;
  border-radius: 50%;
}
/* circle */
.life-cycle .circle-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
}
.life-cycle .circle-front-box {
  position: absolute;
  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
  background: rgb(248, 240, 200);
  width: 76px;
  height: 76px;
  left: 10px;
  top: 10px;
  border-radius: 50%;
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
}
.life-cycle .circle-front-box .title {
  width: 76px;
  height: 76px;
  display: flex; /* 彈性排版 */
  align-items: center; /* 垂直置中 */
  justify-content: center; /* 水平置中 */
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}
.life-cycle .circle-back-box {
  position: absolute;
  z-index: 2;
  /* background: lightgreen; */
  background: linear-gradient(to top left, #99ff66, #14AB39);
  width: 100px;
  height: 100px;
  left: 0px;
  top: 0px;
  opacity: 0.9;
  border-radius: 50%;
}
.life-cycle .circle-center-box {
  background: linear-gradient(125deg, #b8fb96, #68c780);
  width: 100px;
  height: 100px;
  left: 0px;
  top: 0px;
  /* opacity: 0.9; */
  border-radius: 50%;
  box-shadow: 10px 5px 15px rgba(0, 0, 0, 0.2);
}
.life-cycle .circle-center-box .title {
  width: 100px;
  height: 100px;
  display: flex; /* 彈性排版 */
  align-items: center; /* 垂直置中 */
  justify-content: center; /* 水平置中 */
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  color: #000000;
}
/* 可重複使用包裝 */
.life-cycle .circle-wrapper.box1 {
  position: absolute;
  left: 120px;
  top: -50px;
}
/* 銷售運輸 */
.life-cycle .circle-wrapper.box2 {
  position: absolute;
  left: 280px;
  top: 20px;
}
/* 製冷劑的使用 */
.life-cycle .circle-wrapper.box3 {
  position: absolute;
  left: 300px;
  top: 170px;
}
/* 回收 */
.life-cycle .circle-wrapper.box4 {
  position: absolute;
  left: 210px;
  top: 290px;
}
/* 運輸 */
.life-cycle .circle-wrapper.box5 {
  position: absolute;
  left: 50px;
  top: 290px;
}
/* 提純分離 */
.life-cycle .circle-wrapper.box6 {
  position: absolute;
  left: -40px;
  top: 170px;
}
/* 回收後的製冷劑 */
.life-cycle .circle-wrapper.box7 {
  position: absolute;
  left: -30px;
  top: 20px;
}
/* 製冷劑生命週期 */
.life-cycle .circle-wrapper.box8 {
  position: absolute;
  left: 125px;
  top: 125px;
}
/* 投入 PCR 塑膠再生料開發 攜手客戶往低碳目標前進 */
.pcr-banner {
  position: relative;
  /* width: 100%;
  height: 100%; */
  width: 100%;
  height: 300px; 
  background: url('../images/pcr-bg.jpg') no-repeat right center / cover;
}
.pcr-text {
  position: absolute;
  width: 54%;
  left: 40px;
  top: 30px;
  color: #ffffff;
  line-height: 28px;
}

@media (max-width: 992px) {
  .pcr-text {
    display: none;
  }
}
@media (max-width: 768px) {
  .pcr-text {
    display: none;
  }
}
@media (max-width: 576px) {
  .pcr-text {
    display: none;
  }
}

/* 專欄 End */


/* 永續環境 End */

/* 友善職場 Start */
/* 友善職場共用 Start */
.workplace .page-banner::before {
  background-image: linear-gradient(45deg, #ff80c6 0%, transparent 40%);
}
.workplace .page-head h5 {
  border-bottom: 2px solid var(--workplace);
}
.workplace .page-sub-head {
  color: var(--workplace);
}
/* 圖片說明 */
.workplace .img-border {
  border-top: 2px solid var(--workplace);
  padding-top: 2px;
  color: var(--workplace);
}
/* 表格 Start */
.workplace .table-bordered {
  border: 2px solid var(--workplace) !important;
}
.workplace .table thead th, .workplace .table tbody .workplace-bg {
  background-color: var(--workplace);
  border: 1px solid #ffffff !important; 
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
}
.workplace .table tbody td {
  border-color: var(--workplace) !important;
  text-align: center;
  vertical-align: middle;
  padding: .5rem .75rem;
}
.workplace .table tbody td.no-border {
  border: none;
}
.workplace .table tbody td.no-right-border {
  border-right: none;
} 
.workplace .table tbody td.no-both-border {
  border-left: none;
  border-right: none;
} 
/* .workplace .table .pink {
  background-color: var(--workplace) !important;
  color: #ffffff !important;
}
.workplace .table .light-pink {
  background-color: #ffccdd !important;
} 
*/

/* .table tbody .risk-border {
  border-top: 2px solid #fff !important;
} */

/* 表格 End */

/* 頁籤 Start */
.workplace .tab .nav-tabs .nav-item.show .nav-link, .workplace .tab .nav-tabs .nav-link.active {
  color: var(--workplace);
  background-color: transparent;
  border-color: transparent transparent #f3f3f3;
  border-bottom: 3px solid !important;
  font-size: 16px;
  font-weight: bold;
}
.workplace .tab .nav-link {
  color: #c2c2c2;
  font-size: 16px;
  font-weight: 600;
}
.workplace .tab .nav-link:hover {
  border-color: transparent transparent #f3f3f3;
}
.workplace .tab .tab-pane {
  padding: 10px;
}
/* 頁籤 End */

.workplace i {
  padding-right: 5px;
  color: var(--workplace);
}
/* 友善職場共用 End */

/*活動照片*/
.act .box {
  position: relative;
  padding: 25px 10px;
}
.act img {
  border-radius: 20px 2px 20px 2px;
}
.act .carousel-indicators {
  /* margin-left: 25px; */
  margin: 0 auto;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  bottom: -25px;
}
.act .carousel-indicators li {
  color: #ffffff;
  width: 10px;
  height: 10px;
  opacity: 1;
  border-radius: 100%;
  background-color: #ffb3d9;
}
.act .carousel-indicators li.active {
  background-color: var(--workplace);
}

/* 人才培訓 */
.performance-title {
  margin: 20px 60px;
  border-bottom: 3px solid #007bff;
  text-align: center;
}
.performance-item {
  border: 1px solid var(--workplace);
  min-height: 90px;
  margin-bottom: 10px;
}
.item-title {
  color: #ffffff;
  background-color: var(--workplace);
}
.item-desc {
  font-size: 13px;
  padding: 10px;
}

/* 人才培育發展四大面向 */
.employee-training {
  margin-top: 80px;
}
.employee-training .item {
  position: relative;
  width: 250px;
  height: 200px;
  /* padding: 20px; */
  margin: 10px;
  border: 1px solid var(--workplace);
  border-radius: 20%;
  background-color: #ffffff;
  box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
}
.employee-training .item-title {
  position: absolute;
  width: 100px;
  height: 100px;
  top: -70px;
  left: -20px;
  border-radius: 20%;
  padding: 20px 10px;
  /* font-size: 16px; */
  font-weight: bold;
  text-align: center;
  
  background-color: var(--workplace);
  color: #ffffff;
}
.employee-training .item-content {
  position: absolute;
  padding: 40px 20px 20px 20px;
  font-size: 13px;
  color: #333333; 
}

/* 職業安全與健康 */
.health-box {
  position: relative;
  overflow: hidden;
}
.health-box .health-box-overlay {
  position: absolute;
  top: 80%;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  margin-top: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  transition: 350ms;
  text-align: center;
}
/* .health-box:hover .health-box-overlay {
  top: 0;
  padding-top: 50px;
} */
.health-box .health-title {
  font-size: 16px;
}
.pink-bg {
  background-color: var(--workplace);
  color: #ffffff;
  text-align: center;
}
.pink-border {
  border: 1px solid var(--workplace);
  /* padding: 5px; */
}
.pink-border > div {
  padding: 5px;
}


/* 職業安全衛生委員會組織架構 Start */
.safety-org-chart {
  position: relative;
  width: 100%;
  height: 400px;
  overflow-x: auto;
}
.safety-org-chart .org-level1, .safety-org-chart .org-level2, .safety-org-chart .org-level3 {
  position: relative;
  height: 100px;
}
.safety-org-chart .org-level1 .box1, .safety-org-chart .org-level2 .box1 {
  position: absolute;
  left: 195px;
  top: 0px;
}
.safety-org-chart .org-level3 .box1 {
  position: absolute;
  left: -50px;
  top: 20px;
}
.safety-org-chart .org-level3 .box2 {
  position: absolute;
  left: 50px;
  top: 20px;
}
.safety-org-chart .org-level3 .box3 {
  position: absolute;
  left: 195px;
  top: 20px;
}
.safety-org-chart .org-level3 .box4 {
  position: absolute;
  left: 295px;
  top: 20px;
}
.safety-org-chart .org-level3 .box5 {
  position: absolute;
  left: 395px;
  top: 20px;
}
.safety-org-chart .org-box {
  position: relative;
  height: 100px;
}
.safety-org-chart .org-body {
  position: absolute;
  left: 50px;
  top: 20px;
}
/* 組織項目背景 */
.safety-org-chart .org-body .item-body-bg {
  background-color: #e60073;
}
.safety-org-chart .org-body .item-body-bg2 {
  background: linear-gradient(90deg, #f575b5, #e60073);
}
.safety-org-chart .org-body .item-body-b {
  width: 130px;
  height: 80px;
}
.safety-org-chart .org-body .item-body-m {
  width: 100px;
  height: 80px;
}
.safety-org-chart .org-body .item-body-s {
  width: 80px;
  height: 100px;
}
.safety-org-chart .org-body .item-body-b .item-body-head {
  width: 130px;
  height: 80px;
  display: flex; /* 彈性排版 */
  align-items: center; /* 垂直置中 */
  justify-content: center; /* 水平置中 */
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.safety-org-chart .org-body .item-body-m .item-body-head {
  width: 100px;
  height: 80px;
  display: flex; /* 彈性排版 */
  align-items: center; /* 垂直置中 */
  justify-content: center; /* 水平置中 */
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.safety-org-chart .org-body .item-body-s .item-body-head {
  width: 80px;
  height: 100px;
  display: flex; /* 彈性排版 */
  align-items: center; /* 垂直置中 */
  justify-content: center; /* 水平置中 */
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
/* 圓弧 */
.safety-org-chart .org-body .two-radius {
  border-radius: 20px 2px 20px 2px;
}
/* 連接線 */
.safety-org-chart .org-box:after {
  position: absolute;
  content: '';
  height: 40px;
  left: 100px;
  top: 100px;
  border-left: 2px solid #ff80bf;
}
.safety-org-chart .org-level3 .box1 .org-box:before {
  position: absolute;
  content: '';
  width: 120px;
  height: 20px;
  left: 100px;
  top: 0px;
  border-left: 2px solid #ff80bf;
  border-top: 2px solid #ff80bf;
}
.safety-org-chart .org-level3 .box2 .org-box:before {
  position: absolute;
  content: '';
  width: 130px;
  height: 20px;
  left: 120px;
  top: 0px;
  border-left: 2px solid #ff80bf;
  border-top: 2px solid #ff80bf;
}
.safety-org-chart .org-level3 .box3 .org-box:before {
  position: absolute;
  content: '';
  width: 100px;
  left: 100px;
  top: 0px;
  border-top: 2px solid #ff80bf;
}
.safety-org-chart .org-level3 .box4 .org-box:before {
  position: absolute;
  content: '';
  width: 100px;
  height: 20px;
  left: 100px;
  top: 0px;
  border-left: 2px solid #ff80bf;
  border-top: 2px solid #ff80bf;
}
.safety-org-chart .org-level3 .box5 .org-box:before {
  position: absolute;
  content: '';
  height: 20px;
  left: 100px;
  top: 0px;
  border-left: 2px solid #ff80bf;
}
.safety-org-chart  .org-level3 .org-box:after {
  display: none;
}
/* 職業安全衛生委員會組織架構 End */

/* 緊急事件準備與應變管理程序之作業流程圖 Start */
.emergency-process {
  position: relative;
  width: 100%;
  height: 700px;
  overflow-x: auto;
}
.emergency-process .process-box {
  position: relative;
  height: 70px;
}
.emergency-process .process-doc {
  position: absolute;
  width: 250px;
  left: 0px;
  top: 20px;
}
.emergency-process .process-doc .disc {
  font-size: 14px;
}
.emergency-process .process-chapter {
  position: absolute;
  width: 170px;
  left: 260px;
  top: 0;
  text-align: right;
  font-size: 13px;
}
.emergency-process .process-body {
  position: absolute;
  width: 170px;
  left: 270px;
  top: 20px;
}
.emergency-process .process-dept {
  position: absolute;
  width: 120px;
  left: 460px;
  top: 20px;
}
.emergency-process .process-dept span {
  color: var(--goverance);
  font-weight: bold;
}
.emergency-process .item-head {
  color: #ffffff;
  background-color: #E4007F;
  height: 40px;
  padding-top: 8px;
  text-align: center;
  border-radius: 10px;
}
.emergency-process .process-doc .item-body {
  /* height: 62px; */
  padding: 5px 5px 5px 10px;
  line-height: 18px;
  border: 1px solid #E4007F;
}
.emergency-process .process-body .item-body {
  color: #ffffff;
  background-color: #ff33a3;
  /* height: 40px; */
  padding: 5px;
  text-align: center;
}
.emergency-process .process-dept .item-body {
  /* height: 40px; */
  padding: 5px;
  text-align: center;
  border: 1px solid #E4007F;
}
.emergency-process .radius-20 {
  border-radius: 20px;
}
.emergency-process .radius-10 {
  border-radius: 10px;
}
/* 連接虛線 */
.emergency-process .process-box:after {
  position: absolute;
  content: '';
  height: 40px;
  left: 355px;
  top: 55px;
  border-left: 2px dashed #ff66ff;
}
.emergency-process .process-box:first-child:after, .process-box:last-child:after {
  display: none;
}
/* 緊急事件準備與應變管理程序之作業流程圖 End */

/* 友善職場 End */

/* 社會共榮 Start */
/* 社會共榮共用 Start */
.social .page-banner::before {
  background-image: linear-gradient(to right, #f1885b 0%, transparent 40%);
}
.social .page-head h5 {
  border-bottom: 2px solid var(--social);
}
.social .page-sub-head {
  color: var(--social);
}
.social i {
  padding-right: 5px;
  color: var(--social);
}
/* 圖片說明 */
.social .img-border {
  border-top: 2px solid var(--social);
  padding-top: 2px;
  color: var(--social);
}
/* 表格 Start */
.social .table {
  text-align: center;
  border: 2px solid var(--social) !important;
}
.social .table thead th {
  background-color: var(--social);
  border: 1px solid #ffffff !important;
  color: #ffffff;
}
.social .table td {
  border: 1px solid var(--social) !important;
  text-align: left;
  vertical-align: middle;
  padding: .5rem .75rem;
}
.social .thead tr {
  background-color: #ffe6cc;
  color: var(--social);
}
.social tbody th {
  background-color: #ff8533;
  color: #000000;
  text-align: left;
}
/* 表格 End */
/* 社會共榮共用 End */

/* 社會共榮 End */

/* 網站地圖 Start */
.sitemap .page-banner::before {
  background-image: linear-gradient(to right, #c9a063, transparent);
}
.sitemap .page-head h5 {
  border-bottom: 2px solid #C9A063;
}
.sitemap .card {
  border-radius: 0;
}
.sitemap .card .card-header {
  border-radius: 0;
  background: #C9A063;
  color: #ffffff;
  text-align: center;
}
.sitemap .card .card-body {
  padding: 10px 15px !important;
}
.sitemap .card li {
  line-height: 30px;
  border-bottom: 1px dotted #c2c2c2;
}
.sitemap .card li:last-child {
  border-bottom: 0px;
}
.sitemap .card li a {
  font-size: 14px;
  color: #666666;
}
.sitemap .card li a:hover {
  color: #C9A063;
}
/* 網站地圖 End */

/* 報告書下載 Start */
.report .page-banner::before {
  background-image: linear-gradient(to right, #333333, transparent);
  /* background-image: linear-gradient(to right, #8391f9, transparent); */
}
.report .page-head h5 {
  border-bottom: 2px solid #333333;
}
/* 報告書下載 End */

/* Layout Start */
.overlay-bg {
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.overlay-bg:before {
  /* background-color: rgba(32,32,32,0.8); */
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  z-index: -1;
}
.overlay-section {
  position: relative;
  z-index: 1;
  padding-top: 110px;
  padding-bottom: 110px;
}
/* Layout End */