@charset "UTF-8";
.wrapper {
  width: 100%;
}

a {
  text-decoration: none;
}

p {
  font-size: 18px;
}

/*** Button ***/
.btn {
  font-weight: 500;
  transition: 0.5s;
}

.btn.btn-primary,
.btn.btn-outline-primary:hover {
  color: #FFFFFF;
}

.btn-square {
  width: 38px;
  height: 38px;
}

.btn-sm-square {
  width: 32px;
  height: 32px;
}

.btn-lg-square {
  width: 48px;
  height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
}

.btn-outline-body {
  color: var(--primary);
  border-color: #777777;
}

.btn-outline-body:hover {
  color: #FFFFFF;
  background: var(--primary);
  border-color: var(--primary);
}

.CustomBTNColor {
  background-color: #13bcc2;
  border: none;
  transition: background-color 0.5s ease;
  font-size: 18px;
  line-height: 24.52px;
  font-weight: 400;
  color: rgb(255, 255, 255);
}
.CustomBTNColor:hover {
  background-color: #c25270;
}

.CustomBTNColor.active {
  background-color: #c25270 !important;
  color: #fff;
}

.TopTwoBTNArea {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(1, 1fr);
  justify-content: center;
  gap: 10px;
}
@media (max-width: 430px) {
  .TopTwoBTNArea {
    /* gap: 80px; */
    /* gap: 0; */
    display: flex;
    justify-content: space-around;
  }
}
@media (max-width: 360px) {
  .TopTwoBTNArea {
    gap: 8px;
  }
}

.TopTreeBTNArea {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(1, 1fr);
  justify-content: center;
  gap: 40px;
}
@media (max-width: 820px) {
  .TopTreeBTNArea {
    /* grid-template-columns: repeat(2, auto); */
        /* gap: 12px; */
    display: flex;
    /* justify-content: space-around; */
    flex-wrap: wrap;
    gap: 20px;
  }
}
@media (max-width: 376px) {
  .TopTreeBTNArea {
    gap: 12px;
  }
}

@media (max-width: 430px) {
  .MobileTopBTNArea {
    display: flex;
  }
}

.MobileTopBTN {
  font-size: 18px;
  padding: 12px;
}

@media screen and (max-width: 767px){
  .MobileTopBTN{
    padding: 10px 22px !important;
    margin: 12px 0px !important;
  }
  .MobileTopBTNk span.btn.btn-primary, .MobileTopBTN a.btn.btn-primary{
    padding: 8px 22px;
    margin: 12px 0px;
}
}

@media (max-width: 460px) {
  .MobileTopBTN {
    margin: 0px !important;
  }
}
@media (max-width: 376px) {
  .MobileTopBTN {
    font-size: 18px !important;
    padding: 14px 22px  !important;
  }
}
@media (max-width: 344px) {
  .MobileTopBTN {
    padding: 16px !important;
    margin: 4px  0px!important;
  }
}

.CustomBTNType01 {
  width: 10%;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #DCD2CC;
  background-color: #F7F7F5;
  color: #594748;
  text-align: center;
  padding: 8px 16px;
  display: flex;
  justify-content: center;
}
.CustomBTNType01:hover {
  border: 1px solid #FFB6AC;
  background-color: #c25270;
  color: #fff;
}
.CustomBTNType01:hover p, .CustomBTNType01:hover h6, .CustomBTNType01:hover span {
  color: #fff; /* 設置文字顏色 */
}
.CustomBTNType01:hover .CustomIconColor {
  color: #fff; /* 設置圖標顏色 */
}
@media (max-width: 1650px) {
  .CustomBTNType01 {
    width: 12%;
  }
}
@media (max-width: 1440px) {
  .CustomBTNType01 {
    width: 18%;
  }
}
@media (max-width: 1000px) {
  .CustomBTNType01 {
    width: 22%;
  }
}
@media (max-width: 800px) {
  .CustomBTNType01 {
    width: 32%;
  }
}
@media (max-width: 540px) {
  .CustomBTNType01 {
    width: 40%;
  }
}
@media (max-width: 430px) {
  .CustomBTNType01 {
    width: 60%;
  }
}

/* ------------------------頂部連結-----Start------------------- */
@media screen and (max-width: 767px) {
  .pageLink{
      justify-content:space-around;
  }
  .pageLink span.btn.btn-primary, .pageLink a.btn.btn-primary{
      padding: 8px 22px;
      margin: 12px 0px;
  }
}
/* ------------------------頂部連結--------End---------------- */

.relatedLinkBTN {
  width: 20%;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #DCD2CC;
  background-color: #F7F7F5;
  color: #594748;
  text-align: center;
  padding: 8px 16px;
  display: flex;
  justify-content: center;
}
.relatedLinkBTN:hover {
  border: 1px solid #FFB6AC;
  background-color: #c25270;
  color: #fff;
}
.relatedLinkBTN:hover p, .relatedLinkBTN:hover h6, .relatedLinkBTN:hover span {
  color: #fff; /* 設置文字顏色 */
}

.relatedLinkBTN .active {
  border-radius: 10px;
  background-color: #c25270 !important;
  color: #fff;
}

.relatedLinkBTN .active i,
.relatedLinkBTN .active h6,
.relatedLinkBTN .active span {
  color: #fff;
}

.relatedLinkBTN:hover .CustomIconColor {
  color: #fff; /* 設置圖標顏色 */
}
@media (max-width: 1280px) {
  .relatedLinkBTN {
    width: 32%;
  }
}
@media (max-width: 540px) {
  .relatedLinkBTN {
    width: 100%;
  }
}
@media (max-width: 360px) {
  .relatedLinkBTN a {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.toTopBTN {
  padding: 12px 16px;
}

.NewsLabel {
  margin-bottom: 24px;
  display: flex;
}
@media (max-width: 992px) {
  .NewsLabel {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}
@media (max-width: 430px) {
  .NewsLabel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}
@media (max-width: 340px) {
  .NewsLabel {
    width: 100%;
  }
}

.tabFront {
  color: #594748;
  font-size: 20px;
}
.tabFront:hover {
  color: #fff;
}
@media (max-width: 430px) {
  .tabFront {
    font-size: 16px;
  }
}
@media (max-width: 330px) {
  .tabFront {
    font-size: 14px;
    padding-left: 0 !important;
  }
}

.tabBack {
  color: #594748;
  font-size: 20px;
}
.tabBack:hover {
  color: #fff;
}
@media (max-width: 430px) {
  .tabBack {
    font-size: 16px;
  }
}
@media (max-width: 330px) {
  .tabBack {
    font-size: 14px;
  }
}

.TabRWD {
  width: 80%;
  margin: 0 auto;
  display: flex;
  gap: 80px;
  justify-content: center;
  align-items: center;
}
@media (max-width: 1600px) {
  .TabRWD {
    gap: 60px;
  }
}
@media (max-width: 992px) {
  .TabRWD {
    gap: 40px;
    width: 100%;
  }
}
@media (max-width: 540px) {
  .TabRWD {
    gap: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 330px) {
  .TabRWD {
    gap: 4px;
  }
}

.TabNewsRWD {
  width: 52%;
  display: grid;
  gap: 20px;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1600px) {
  .TabNewsRWD {
    gap: 18px;
  }
}
@media (max-width: 1280px) {
  .TabNewsRWD {
    width: 70%;
  }
}
@media (max-width: 992px) {
  .TabNewsRWD {
    width: 100%;
    gap: 16px;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .TabNewsRWD {
    gap: 12px;
  }
}
@media (max-width: 360px) {
  .TabNewsRWD {
    gap: 8px;
  }
}

.CustomIconColor {
  color: #CCAFA5;
}
@media (max-width: 330px) {
  .CustomIconColor {
    margin-right: 0 !important;
  }
}

.CustomIconColor2 {
  color: #fff;
}

.CustomIconColor3 {
  color: #FFB6AC;
}

.CustomIconColor4 {
  color: #13BCC2;
}

.CustomIconColor5 {
  color: #13BCC2;
}

.CustomIconColor6 {
  color: #FFB6AC;
}

.CustomIconHover {
  border: 1px solid rgb(172, 196, 214);
  border-radius: 5px;
}
.CustomIconHover:hover {
  background-color: rgb(229, 127, 132);
}
.CustomIconHover:hover i {
  color: rgb(255, 255, 255);
}

/*** ============================================================================================== loading動畫 Spinner ***/
#spinner {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
  z-index: 99999;
}

#spinner.show {
  transition: opacity 0.5s ease-out, visibility 0s linear 0s;
  visibility: visible;
  opacity: 1;
}

/*** Topbar ***/
.TopbarCustomColor {
  background-color: #261F20;
}

/*** ============================================================================ 頁首 Navbar ***/
.navbar.sticky-top {
  top: -100px;
  transition: 0.5s;
}

.navbar .navbar-nav .nav-link {
  margin-left: 30px;
  padding: 25px 0;
  color: var(--dark);
  font-weight: 400;
  text-transform: uppercase;
  outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
  color: var(--primary);
}
.navbar .navbar-nav .nav-item.nav-link i,
.navbar .navbar-nav .nav-link i {
    margin-right: 5px;
}
.navbar .dropdown-toggle::after {
  border: none;
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  vertical-align: middle;
  margin-left: 8px;
}

.navbar .nav-item .dropdown-menu {
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
}

@media (max-width: 991.98px) {
  .navbar .navbar-nav .nav-link {
    margin-left: 0;
    padding: 10px 0;
  }
  .navbar .navbar-nav {
    margin-top: 25px;
    border-top: 1px solid #EEEEEE;
  }
}
@media (min-width: 992px) {
  .navbar .nav-item .dropdown-menu {
    display: block;
    border: none;
    margin-top: 0;
    top: 150%;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
  }
  .navbar .nav-item:hover .dropdown-menu {
    top: 100%;
    visibility: visible;
    transition: 0.5s;
    opacity: 1;
  }
  .dropdown .dropdown-menu a:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
  }
}
/* 頁首Header圖片調整尺寸 */
@media (max-width: 430px) {
  .CustomNav {
    flex-direction: row;
  }
}

.CustomNavLogo {
  display: block;
  width: 100%;
}
@media (max-width: 430px) {
  .CustomNavLogo {
    width: 60%;
  }
}

.navbar-light .navbar-nav .nav-link::before {
  position: absolute;
  content: "";
  width: 0;
  height: 2px;
  bottom: -1px;
  left: 50%;
  background: var(--bs-primary);
  transition: 0.5s;
}

.navbar-light .navbar-nav .nav-link {
  position: relative;
  display: inline-block; /* 使元素成为行内块 */
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--bs-primary) !important;
}

/*** ========================================================== Footer ***/
.footer {
  color: #999999;
}

.footer .btn.btn-link {
  display: block;
  margin-bottom: 5px;
  padding: 0;
  text-align: left;
  color: #999999;
  font-weight: normal;
  text-transform: capitalize;
  transition: 0.3s;
}

.footer .btn.btn-link::before {
  position: relative;
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #999999;
  margin-right: 10px;
}

.footer .btn.btn-link:hover {
  color: var(--light);
  letter-spacing: 1px;
  box-shadow: none;
}

.footer .copyright {
  padding: 25px 0;
  font-size: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer .copyright a {
  color: var(--light);
}

.footer .copyright a:hover {
  color: var(--primary);
}

/*** =======================================  頁尾 footer ======================================***/
.footerLink {
  color: #FAF9FB;
}
.footerLink a {
  text-decoration: none;
  font-size: 18px;
  line-height: 27.64px;
  font-weight: 400;
  color: #FAF9FB;
}

.footer .btn.btn-link {
  color: #FAF9FB;
}

.footer .btn.btn-link::before {
  color: #FFB6AC;
}

.footerColor {
  background-color: #261F20;
  color: #FAF9FB;
}

.footerAREA {
  margin-top: 0;
}

.footerLink {
  text-decoration: none;
  transition: color 0.5s ease, letter-spacing 0.5s ease;
}
.footerLink:hover {
  letter-spacing: 2px;
  color: var(--bs-primary);
}

.footerTitle {
  color: #fff;
}

.footerBottom {
  font-size: 18px;
  line-height: 21.78px;
  font-weight: 400;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
@media (max-width: 430px) {
  .footerBottom {
    font-size: 12px;
  }
}

.FooterText {
  text-align: center;
}

/*** ========================= 自製 margin ***/
.M-LR-0 {
  margin-left: 0;
  margin-right: 0;
}

.M-LR-12 {
  margin-left: 12px;
  margin-right: 12px;
}

.M-T-0 {
  margin-top: 0;
}

.M-T-20 {
  margin-top: 20px;
}

.M-T-30 {
  margin-top: 30px;
}

.M-T-40 {
  margin-top: 40px;
}

@media (max-width: 475px) {
  .M-T-Mobile40 {
    margin-top: 40px;
  }
}

@media (max-width: 992px) {
  .M-T-Pad40 {
    margin-top: 40px;
  }
}

.M-T-60 {
  margin-top: 60px;
}

.M-T-80 {
  margin-top: 80px;
}

.M-D-0 {
  margin-bottom: 0;
}

.M-D-6 {
  margin-bottom: 6px;
}

.M-D-10 {
  margin-bottom: 10px;
}

.M-D-16 {
  margin-bottom: 16px;
}

.M-D-20 {
  margin-bottom: 20px;
}

.M-D-30 {
  margin-bottom: 30px;
}

.M-D-32 {
  margin-bottom: 32px;
}

.M-D-40 {
  margin-bottom: 40px;
}

.M-D-60 {
  margin-bottom: 60px;
}

.M-D-80 {
  margin-bottom: 80px;
}

.M-R-6 {
  margin-right: 6px;
}

.M-R-12 {
  margin-right: 12px;
}

/*** =================================== 自製 Padding***/
.P-TB-8040 {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (max-width: 768px) {
  .P-TB-8040 {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.P-LR-0 {
  padding-left: 0;
  padding-right: 0;
}

.P-LR-4 {
  padding-left: 4px;
  padding-right: 4px;
}

.P-LR-8 {
  padding-left: 8px;
  padding-right: 8px;
}

.P-LR-12 {
  padding-left: 12px;
  padding-right: 12px;
}

.P-LR-16 {
  padding-left: 16px;
  padding-right: 16px;
}

.P-LR-20 {
  padding-left: 20px;
  padding-right: 20px;
}

.P-R-0 {
  padding-right: 0;
}

.P-L-0 {
  padding-right: 0;
}

.P-L-12 {
  padding-left: 12px;
}

.P-T-0 {
  padding-top: 0;
}

.P-T-30 {
  padding-top: 30px;
}

.P-T-40 {
  padding-top: 40px;
}

.P-T-80 {
  padding-top: 80px;
}

.P-D-40 {
  padding-bottom: 40px;
}

.P-D-80 {
  padding-bottom: 80px;
}

.P-TD-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.P-TD-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.P-D-8040 {
  padding-bottom: 80px;
}
@media (max-width: 768px) {
  .P-D-8040 {
    padding-bottom: 40px;
  }
}

.P-T-8040 {
  padding-top: 80px;
}
@media (max-width: 768px) {
  .P-T-8040 {
    padding-top: 40px;
  }
}

.PageTitle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.PageH6Title {
  font-size: 16px;
  line-height: 19.36px;
  font-weight: 500;
  color: rgb(38, 31, 32);
}
@media (max-width: 475px) {
  .PageH6Title {
    font-size: 18px;
  }
}

.PageH1Title {
  font-size: 40px;
  line-height: 57.92px;
  font-weight: 500;
  color: rgb(89, 71, 72);
}
@media (max-width: 475px) {
  .PageH1Title {
    font-size: 30px;
    line-height: 30px;
  }
}
@media (max-width: 376px) {
  .PageH1Title {
    font-size: 26px;
  }
}

.heading-section .subheading {
  font-weight: 400;
  font-size: 18px;
  display: block;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #000000;
  position: relative;
}

.heading-section .subheading.subheading-with-line:after {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: rgb(220, 210, 204);
  z-index: -1;
}

.heading-section.heading-section-with-line {
  position: relative;
}

.heading-section.heading-section-with-line:after {
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: #0033c7;
}

.heading-section.heading-section-white .subheading {
  color: rgba(255, 255, 255, 0.7);
}

.heading-section.heading-section-white h2 {
  font-size: 40px;
  color: #fff;
}

.heading-section.heading-section-white p {
  color: rgba(255, 255, 255, 0.9);
}

/* 網頁 中標題 */
.WebMidTitle {
  position: relative;
  padding-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  color: #5e5ca0;
  width: 100%;
  font-size: 32px;
}
.WebMidTitle::before {
  content: "";
  position: absolute;
  display: block;
  height: 1px;
  right: 0;
  left: 0;
  bottom: 1px;
  /* background-color: rgb(220, 210, 204); */
  background-color: rgb(219, 215, 213);
}
.WebMidTitle::after {
  content: "";
  position: absolute;
  display: block;
  width: 80px;
  height: 2px;
  left: 0;
  bottom: 1px;
  background-color: rgb(191, 164, 155);
}
@media (max-width: 992px) {
  .WebMidTitle {
    font-size: 26px;
    width: 100%;
  }
}
@media (max-width: 768px) {
  .WebMidTitle {
    font-size: 24px;
  }
}

/*** ========================= 自製 blank ***/
.blank10 {
  height: 10px;
}

.blank20 {
  height: 20px;
}

.blank30 {
  height: 30px;
}

.blank40 {
  height: 40px;
}

.blank50 {
  height: 50px;
}

.blank60 {
  height: 60px;
}

.blank70 {
  height: 70px;
}

.blank80 {
  height: 80px;
}

.blank90 {
  height: 90px;
}

.blank100 {
  height: 100px;
}

/*** ======================================================================= 中標題 ===========================***/
.section-title {
  max-width: 900px;
  text-align: center;
  margin: 0 auto;
}

.section-title .sub-style {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  color: #80D0C7;
}

.section-title .sub-style::before {
  content: "";
  width: 70px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  margin-top: 8px;
  margin-left: -70px;
  border: 1px solid rgb(194, 82, 112) !important;
}

.section-title .sub-style::after {
  content: "";
  width: 50px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  margin-bottom: 5px;
  margin-left: -50px;
  border: 1px solid rgb(194, 82, 112) !important;
}

.sub-title {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  color: rgb(229, 127, 132);
  padding-right: 16px;
  padding-left: 16px;
  margin-bottom: 0;
}

.sub-title::before {
  content: "";
  width: 70px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  margin-top: 8px;
  margin-right: -70px;
  border: 1px solid rgb(194, 82, 112) !important;
}

.sub-title::after {
  content: "";
  width: 50px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  margin-bottom: 8px;
  margin-right: -50px;
  border: 1px solid rgb(194, 82, 112) !important;
}

@media (max-width: 375px) {
  .section-title .sub-style::before {
    width: 50px;
    left: 20px;
  }
  .section-title .sub-style::after {
    width: 30px;
    left: 20px;
  }
  .sub-title::before {
    width: 50px;
    right: 20px;
  }
  .sub-title::after {
    width: 30px;
    right: 20px;
  }
}
.TopPoint {
  background-color: rgb(194, 82, 112);
  border: 1px solid rgb(255, 255, 255);
}

.TopPoint h1 {
  line-height: 52px;
  font-weight: 900;
}

@media (max-width: 430px) {
  .TopPoint h1 {
    font-size: 28px;
    line-height: 30px;
  }
}
@media (max-width: 360px) {
  .TopPoint h1 {
    font-size: 24px;
  }
}

.TopPoint h3 {
  line-height: 36px;
  font-size: 30px;
  font-weight: 700;
}

@media (max-width: 430px) {
  .TopPoint h3 {
    font-size: 24px;
    line-height: 28px;
  }
}
@media (max-width: 360px) {
  .TopPoint h3 {
    font-size: 20px;
  }
}

.TopPoint h5 {
  line-height: 30px;
  font-weight: 700;
}

@media (max-width: 430px) {
  .TopPoint h5 {
    font-size: 17px;    
  }
}
@media (max-width: 360px) {
  .TopPoint h5 {
    font-size: 16px;
  }
}

/********** Template CSS **********/
:root {
  --primary: #e57f84;
  --secondary: #0f8b99;
  --light: #acc4d6;
  --dark: #2c4270;
}

body {
  font-family: "Noto Sans TC", sans-serif, Helvetica, Arial, sans-serif, "微軟正黑體", Heiti TC, "メイリオ";
}

.back-to-top {
  position: fixed;
  display: none;
  right: 30px;
  bottom: 30px;
  z-index: 99;
}

.light-background {
  --background-color: #f7f7f5;
  --surface-color: #ffffff;
}

/*** Global Sections ***/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 30px 0;
  /*  scroll-margin-top: 100px;*/
  overflow: clip;
}

@media (max-width: 1199px) {
  section,
  .section {
    scroll-margin-top: 66px;
  }
}
/*===================== ======================================= 首頁 上方輪播 Carousel Start in  index.html top    ================================*/
/*** Header ***/
.carousel-caption {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  text-align: start;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1;
}

/* 上方輪播按鈕 */
/* 隱藏carousel按鈕在430px以下 */
@media (max-width: 430px) {
  .carousel-control-prev,
  .carousel-control-next {
    display: none;
  }
}
.carousel-control-prev,
.carousel-control-next {
  width: 15%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 4rem;
  height: 4rem;
  background-color: rgba(44, 66, 112);
  border: 15px solid var(--dark);
  border-radius: 35px;
}

.carousel-caption .breadcrumb-item + .breadcrumb-item::before {
  content: "\f111";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--primary);
}

@media (max-width: 768px) {
  #header-carousel .carousel-item {
    position: relative;
    min-height: 450px;
  }
  #header-carousel .carousel-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    border-width: 12px;
  }
}
@media (max-width: 540px) {
  #header-carousel .carousel-item {
    min-height: 220px;
  }
}
.page-header {
  background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/carousel-1.jpg) center center no-repeat;
  background-size: cover;
}

.page-header .breadcrumb-item + .breadcrumb-item::before {
  color: #999999;
}

/* 客製化輪播 */
/* 客製化輪播按鈕父層 */
.CustomPlayBTN {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
}
@media (max-width: 430px) {
  .CustomPlayBTN {
    display: none;
  }
}

/* 客製化輪播按鈕 */
.CustomBTNType02 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #13bcc2;
}
.CustomBTNType02:hover {
  background-color: #13bcc2;
}
.CustomBTNType02:hover .CustomIconColor4 {
  color: #fff;
}
.CustomBTNType02:hover {
  color: #fff;
}

/* 首頁最上方輪播標題文字 */
.sloGanArea {
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.SloGan {
  text-align: center;
  font-weight: 700;
  line-height: 136.2px;
  font-size: 100px;
  text-shadow: 0px 4px 7px rgba(0, 0, 0, 0.25);
}
@media (max-width: 1440px) {
  .SloGan {
    font-size: 75px;
    line-height: 80px;
  }
}
@media (max-width: 770px) {
  .SloGan {
    font-size: 50px;
  }
}
@media (max-width: 540px) {
  .SloGan {
    font-size: 40px;
    line-height: 70px;
  }
}
@media (max-width: 480px) {
  .SloGan {
    font-size: 32px;
    line-height: 60px;
  }
}
@media (max-width: 360px) {
  .SloGan {
    font-size: 28px;
    line-height: 60px;
  }
}

.SloGanSub {
  text-align: center;
  font-weight: 700;
  line-height: 34.05px;
  font-size: 25px;
  text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
}
@media (max-width: 992px) {
  .SloGanSub {
    font-size: 24px;
  }
}
@media (max-width: 430px) {
  .SloGanSub {
    width: 100%;
    line-height: 24px;
    font-size: 20px;
    line-height: 36px;
  }
}
@media (max-width: 360px) {
  .SloGanSub {
    font-size: 18px;
    line-height: 28px;
  }
}

/***================== 通用麵包屑  =========================***/
/* ======================= 麵包屑 ====================*/
/*** Single Page Hero Header Start ***/
.bg-breadcrumb {
  padding: 60px 0 60px 0;
}

.bg-breadcrumb h3 {
  font-weight: 700;
}

.bg-breadcrumb .breadcrumb-item a {
  color: var(--bs-white) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #a3becc;
}

.breadcrumbContent {
  padding: 48px 12px;
}
@media (max-width: 430px) {
  .breadcrumbContent {
    padding: 24px 6px;
  }
}

.WebBreadCrumbs {
  font-size: 20px;
  font-weight: 400;
  line-height: 34.05px;
  text-align: center;
}
@media (max-width: 820px) {
  .WebBreadCrumbs {
    line-height: 28px;
  }
}
@media (max-width: 430px) {
  .WebBreadCrumbs {
    /* 這裡可以放置其他樣式，如有 */
  }
}

.WebIntro {
  font-size: 100px;
  font-weight: 700;
  line-height: 136.2px;
  text-shadow: 0 4px 7px rgba(0, 0, 0, 0.25);
}
@media (max-width: 1440px) {
  .WebIntro {
    font-size: 85px;
    line-height: 100px;
  }
}
@media (max-width: 1280px) {
  .WebIntro {
    font-size: 70px;
    line-height: 80px;
  }
}
@media (max-width: 992px) {
  .WebIntro {
    font-size: 60px;
  }
}
@media (max-width: 820px) {
  .WebIntro {
    font-size: 50px;
  }
}
@media (max-width: 550px) {
  .WebIntro {
    font-size: 40px;
    line-height: 60px;
  }
}
@media (max-width: 430px) {
  .WebIntro {
    font-size: 32px;
    line-height: 40px;
  }
}

.WebIntroSub {
  font-size: 25px;
  font-weight: 400;
  line-height: 34.05px;
  text-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
}
@media (max-width: 992px) {
  .WebIntroSub {
    width: 80%;
    text-align: center;
  }
}
@media (max-width: 820px) {
  .WebIntroSub {
    width: 100%;
    font-size: 20px;
    line-height: 28px;
  }
}
@media (max-width: 550px) {
  .WebIntroSub {
    width: 80%;
  }
}
@media (max-width: 430px) {
  .WebIntroSub {
    width: 100%;
    margin-bottom: 14px !important;
  }
}

.WebBreadTitle {
  font-size: 60px;
  font-weight: 700;
  text-shadow: 0 4px 7px rgba(0, 0, 0, 0.25);
  margin-bottom: 24px;
}
@media (max-width: 992px) {
  .WebBreadTitle {
    font-size: 40px;
  }
}
@media (max-width: 430px) {
  .WebBreadTitle {
    margin-bottom: 12px;
  }
}

/*====================================  首頁 服務項目 Service Start ===================================*/
.services .service-item {
  background-color: var(--surface-color);
  border: 1px solid rgb(220, 210, 204);
  height: 100%;
  padding: 30px;
  transition: 0.3s;
  border-radius: 10px;
  display: flex;
  align-items: center;
}
@media (max-width: 430px) {
  .services .service-item {
    padding: 20px;
  }
}

.serviceText {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
@media (max-width: 430px) {
  .serviceText h3 {
    margin-top: 12px;
  }
  .serviceText p {
    width: 100%;
  }
}

.services .service-item .icon {
  font-size: 32px;
  border-radius: 10px;
  position: relative;
  margin-right: 25px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 160px;
  flex-shrink: 0;
  object-fit: cover;
}
@media (max-width: 430px) {
  .services .service-item .icon {
    margin-right: 0;
    width: 100%;
    height: auto;
  }
}

/* 服務項目RWD排版調整 */
@media (max-width: 430px) {
  .services .service-item {
    display: flex;
    flex-direction: column;
  }
}

.services .service-item .icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services .service-item h3 {
  transition: 0.3s;
  font-weight: 500;
  font-size: 22px;
  color: rgb(143, 86, 120);
  line-height: 31.86px;
}

.services .service-item p {
  margin-bottom: 0;
  color: rgb(89, 71, 72);
  font-weight: 400;
  line-height: 23.17px;
  transition: 0.3s;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* 显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5em; /* 根据需要调整行高 */
  max-height: 6em; /* 4行 * 1.5em 行高 */
}

.services .service-item .read-more {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  transition: 0.3s;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.79px;
  color: rgb(0, 149, 166);
}
.services .service-item .read-more:hover {
  color: rgb(194, 82, 112);
}
@media (max-width: 430px) {
  .services .service-item .read-more {
    font-size: 20px;
  }
}

.services .service-item .read-more i {
  margin-left: 5px;
}

.services .service-item.item-cyan .icon {
  color: rgba(133, 210, 208, 0.2);
  border: 1px solid rgb(19, 188, 194);
  background: rgba(133, 210, 208, 0.2);
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  height: 160px;
}

.services .service-item.item-red .icon {
  color: rgba(255, 182, 172, 0.2);
  border: 1px solid rgb(229, 127, 132);
  background: rgba(255, 182, 172, 0.2);
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  height: 160px;
}

.services .service-item.item-orange .icon {
  color: #fd7e14;
  border: 1px solid #fd7e14;
  background: rgba(253, 126, 20, 0.1);
}

.services .service-item.item-teal .icon {
  color: #20c997;
  border: 1px solid #20c997;
  background: rgba(32, 201, 151, 0.1);
}

.services .service-item.item-indigo .icon {
  color: #6610f2;
  border: 1px solid #6610f2;
  background: rgba(102, 16, 242, 0.1);
}

.services .service-item.item-pink .icon {
  color: #f3268c;
  border: 1px solid #f3268c;
  background: rgba(243, 38, 140, 0.1);
}

.services .service-item:hover {
  box-shadow: 0 2px 25px rgba(0, 0, 0, 0.1);
}

.services .service-item:hover h3 {
  color: var(--heading-color);
}

.services .service-item:hover p {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

/*** =================================  首頁 線上影音 Video Start ================================= ***/
.VideoCardArea {
  overflow: visible;
  position: static;
}

@media (max-width: 430px) {
  .VideoCardArea .video .VideoCardArea .video {
    width: 100%; /* 確保在小螢幕上卡片佔據整個寬度 */
  }
}

.video-item {
	width: 100%;
	padding: 15px;
	padding-bottom: 0;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	min-height: 300px;
  cursor: pointer;
}

@media (max-width: 430px) {
  .video-item {
    padding: 12px;
    min-height: 280px;
  }
}
.video:nth-child(odd) .video-item {
  border: 1px solid rgb(19, 188, 194);
  background: rgba(133, 210, 208, 0.1);
}
.video:nth-child(odd) .video-item:hover {
  border: 1px solid rgb(204, 175, 165);
  background: rgb(255, 255, 255);
}

.video:nth-child(even) .video-item {
  border: 1px solid rgb(229, 127, 132);
  background: rgba(255, 182, 172, 0.1);
}
.video:nth-child(even) .video-item:hover {
  border: 1px solid rgb(204, 175, 165);
  background: rgb(255, 255, 255);
}

.owl-item:nth-child(odd) .video-item {
  border: 1px solid #13bcc2;
  background: rgba(133, 210, 208, 0.1);
}

.owl-item:nth-child(even) .video-item {
  border: 1px solid #e57f84;
  background: rgba(255, 182, 172, 0.1);
}
.video .video-item:hover {
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}
.owl-stage-outer{
	padding-top: 10px;
	padding-bottom: 15px;
}

/* 單數卡片的圖示樣式 */
.owl-item:nth-child(odd) .fa-calendar-days {
  color: #13BCC2; /* CustomIconColor5 */
}

/* 雙數卡片的圖示樣式 */
.owl-item:nth-child(even) .fa-calendar-days {
  color: #FFB6AC; /* CustomIconColor6 */
}
.video-img {
  height: 160px;
  border-radius: 10px;
  overflow: hidden;
}
@media (max-width: 430px) {
  .video-img {
    height: 140px;
  }
}
.video-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
/*
  max-width: 100%;
  max-height: 100%;
*/
}

.video-text {
  width: 100%;
  transition: 0.5s;
  flex-grow: 1;
  color: #261F20;
}
@media (max-width: 430px) {
  .video-text {
    font-size: 12px;
  }
}

.video-text a {
  color: #261F20;
  width: 100%;
  display: block;
}

.video-text span {
  font-size: 18px;
  font-weight: 400;
  line-height: 21.78px;
  margin-left: 5px;
}
@media (max-width: 360px) {
  .video-text span {
    font-size: 16px;
  }
}

/* 针对单数卡片 */
.owl-item:nth-child(odd) .video-text span {
  color: rgb(0, 149, 166); /* 单数卡片 span 的颜色 */
}

/* 针对双数卡片 */
.owl-item:nth-child(even) .video-text span {
  color: rgb(194, 82, 112); /* 双数卡片 span 的颜色 */
}

.video-text h5 {
  line-height: 27.24px; /* 調整行高，與字體大小相匹配 */
  font-size: 20px; /* 字體大小 */
  max-height: 54.48px; /* 限制顯示兩行的最大高度 */
  overflow: hidden; /* 隱藏多餘的內容 */
  text-overflow: ellipsis; /* 添加省略號 */
  display: -webkit-box; /* 必須結合 -webkit-line-clamp 使用 */
  -webkit-line-clamp: 2; /* 限制顯示兩行 */
  -webkit-box-orient: vertical; /* 垂直排版 */
  margin-top: 8px;
}
@media (max-width: 430px) {
  .video-text h5 {
    font-size: 18px;
    max-height: 50.75px; /* 限制顯示兩行的最大高度 */
    -webkit-line-clamp: 2; /* 限制顯示兩行 */
  }
}

.video-item:hover .video-text {
  width: 100%;
}

.video-text * {
  transition: 0.5s;
}

.video-item:hover .video-text * {
  letter-spacing: 2px;
}

/*** ============================== 首頁上方的紅色方塊 ***/
.PhotoCard {
  width: 205px;
  height: 205px;
  padding-bottom: 10px;
  padding-right: 10px;
}

@media (max-width: 768px) {
  .PhotoCard {
    width: 50%;
    height: 40%;
  }
}
@media (max-width: 430px) {
  .PhotoCard {
    top: -14px;
  }
}

.marginBTN {
  margin: 0 auto;
  padding-top: 8px;
}

/*** ===================================== 六大品質政策 QUALITY POLICY Start  ===============================***/
.QualityCardArea {
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 1280px) {
  .QualityCardArea {
    gap: 20px;
  }
}
@media (max-width: 1768px) {
  .QualityCardArea {
    gap: 0px;
  }
}

.QualityCardCenter {
  justify-items: center;
}

.QualityCardMO {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 192px;
  width: 100%;
}
.QualityCardMO p {
  font-weight: 700;
  font-size: 20px;
  color: #261F20;
  line-height: 24.2px;
  margin-top: 8px;
}

.QualityCardCH {
  width: 100%;
  height: 100%;
  list-style: none;
  display: block;
  text-align: center;
  border-radius: 10px;
  border: 2px solid #CCAFA5;
  padding: 16px;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
}
@media (max-width: 430px) {
  .QualityCardCH {
    height: auto;
    width: 100%;
    padding: 8px;
  }
}
.QualityCardCH p {
  color: #261F20;
  font-size: 18px;
  line-height: 24.2px;
  font-weight: 700;
  margin-bottom: 0;
}
.QualityCardCH img {
  display: block;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  object-fit: cover;
}

/*** ======================================== 服務項目  ***/
.ServiceItemTitle {
  font-weight: 500;
  font-size: 22px;
  color: rgb(143, 86, 120);
  line-height: 31.86px;
}

/*===================== ======================================= 首頁  index.html End    ================================*/
/*===================== ======================================= 公司介紹  aboutUs.html     ================================*/
@media (max-width: 430px) {
  .aboutUsImgArea {
    padding-left: 0;
    padding-right: 0;
  }
}

.aboutImgArea {
  padding: 48px 0px 0px 48px;
}
@media (max-width: 992px) {
  .aboutImgArea {
    padding: 32px 0px 0px 32px;
  }
}
@media (max-width: 430px) {
  .aboutImgArea {
    padding: 12px 0px 0px 12px;
  }
}
@media (max-width: 360px) {
  .aboutImgArea {
    padding: 0px 0px 0px 0px;
  }
}

@media (max-width: 992px) {
  .aboutArea03 {
    flex-direction: column-reverse;
  }
}

@media (max-width: 430px) {
  .aboutPhoto {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 430px) {
  .aboutGap {
    margin-top: 0;
  }
}

/*** ========================================================== 負擔費用 bearCost.html ***/
/*** ================================================================================= 最新消息列表 與 首頁最新消息 區域 使用之 News CSS Start***/
.NewsAPoint {
  display: flex;
  align-items: center; 
  justify-content: center; 
  width: 100%; /* 填滿 li 的寬度 */
  height: 100%; /* 填滿 li 的高度 */
  text-decoration: none; /* 移除底線 */
  position: relative; /* 確保元素位置 */
  z-index: 10; /* 增加層級 */
  padding: 10px 0px;
}

.NewsAPoint.active {
  border-radius: 10px;
  background-color: #c25270 !important;
  color: #fff;
}

.NewsAPoint.active h6,
.NewsAPoint.active span {
  color: #fff; /* 設置文字顏色 */
}

.NewsAPoint.active .CustomIconColor {
  color: #fff; /* 設置圖標顏色 */
}

.newsAlink {
  text-decoration: none;
}

.CustomNewsBTNType01 {
  width: 100%;
  /* height: 50px; */
  
  line-height: 50px;
  border-radius: 10px;
  border: 1px solid #DCD2CC;
  background-color: #F7F7F5;
  color: #594748;
  text-align: center;
  cursor: pointer;
  display: block;
  align-items: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.CustomNewsBTNType01:hover {
  border: 1px solid #FFB6AC;
  background-color: #c25270;
  color: #fff;
}
.CustomNewsBTNType01:hover p, .CustomNewsBTNType01:hover h6, .CustomNewsBTNType01:hover span {
  color: #fff; /* 設置文字顏色 */
}
.CustomNewsBTNType01:hover .CustomIconColor {
  color: #fff; /* 設置圖標顏色 */
}
@media (max-width: 360px) {
  /* .CustomNewsBTNType01 {
    padding: 4px 8px;
  } */
}

.NewsLayout {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (max-width: 430px) {
  .NewsLayout {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.NewsAREA {
  width: 100%;
}
.nav-pills .nav-link i{
  padding-right: 12px;
}
.NewsContent {
  display: flex;
  gap: 8px;
  justify-content: start;
  align-items: center;
  cursor: pointer;
  margin-top: 24px;
  height: auto;
  font-size: clamp(14px, 2vw, 18px); /* 字體大小隨容器調整 */
  align-items: stretch; /* 子元素等高 */
  position: relative;
}
.NewsContent:hover {
  background-color: #fff8f7;
  border-radius: 10px;
}
.NewsContent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
}

@media (max-width: 767px) {
  .NewsContent {
    height: auto;
    flex-direction: column;
  }
}
@media (max-width: 430px) {
  .NewsContent {
    height: auto;
  }
}

.NewsTextContent {
  overflow: hidden; /* 隱藏超出範圍的內容 */
  text-overflow: ellipsis; /* 多餘文字顯示省略號 */
  word-wrap: break-word; /* 強制換行 */
  max-height: 230px;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly; /* 當摘要文字沒有出現的時候會置中 */
}
@media (max-width: 767px) {
  .NewsTextContent {
    max-height: 240px;
  }
}

.NewsText {
  color: #B2B8BF;
  margin-bottom: 0;
  line-height: 19.36px;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 430px) {
  .NewsText {
    font-size: 16px;
    line-height: 24px;
  }
}

.NewsText:hover {
  color: #BFA49B;
}
.NewsText:nth-child(odd) {
  color: rgb(178, 184, 191); /* 單數項目的顏色 */
}
.NewsText:nth-child(even) {
  color: rgb(191, 164, 155); /* 雙數項目的顏色 */
}

.row.g-4:nth-child(odd) .NewsText {
  color: rgb(191, 164, 155);
  /* 單數項目的顏色 */
}

.row.g-4:nth-child(even) .NewsText {
  color: rgb(178, 184, 191);
  /* 雙數項目的顏色 */
}

.tab-pane > .row:nth-child(odd) .NewsContent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  border-bottom: 1px dashed rgb(191, 164, 155); /* 單數項目的虛線顏色 */
}

.tab-pane > .row:nth-child(even) .NewsContent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  border-bottom: 1px dashed rgb(178, 184, 191); /* 雙數項目的虛線顏色 */
}

.NewsTime {
  width: 86px;
  height: 86px;
  padding: 4px 10px;
  border-radius: 10px;
  gap: 4px;
  background: linear-gradient(to bottom, #C25270, #FB8DA0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.NewsTime p{
  color: #FFF !important;
}
@media (max-width: 767px) {
  .NewsTime {
    display: none;
    /* flex-direction: column;
    height: 66px; */
  }
}

.NewsRealeseYear {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 24px;
}
.NewsRealeseYear span {
  font-size: 20px;
  line-height: 24.2px;
  font-weight: 700;
  margin-bottom: 0;
}
.NewsRealeseYear p {
  margin-bottom: 0;
  color: #fff;
  line-height: 24px;
}
@media (max-width: 430px) {
  .NewsRealeseYear p {
    font-size: 16px;
  }
}

.NewsRealeseDay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 24px;
}
.NewsRealeseDay span {
  color: #fff;
  font-size: 20px;
  line-height: 24.2px;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 24px;
}
@media (max-width: 540px) {
  .NewsRealeseDay span {
    font-size: 16px;
  }
}

.NewsTitle {
  display: flex;
  font-size: 18px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
@media (max-width: 767px) {
  .NewsTitle {
    display: none;
    gap: 4px;
    flex-direction: column;
  }
}
.NewsTitle p:first-child {
  width: 18%;
  height: 37px;
  line-height: 21.78px;
  color: rgb(194, 82, 112);
  font-weight: 400;
  border-radius: 10px;
  background-color: rgba(255, 182, 172, 0.3019607843);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 992px) and (max-width: 1200px)  {
  .NewsTitle p:first-child {
    width: 30%;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .NewsTitle p:first-child {
    width: 25%;
  }
}
/*
@media (max-width: 415px) {
  .NewsTitle p:first-child {
    width: 30%;
  }
}
*/

.NewsTitle p {
  margin-bottom: 0;
  color: #594748;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* 显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 430px) {
  .NewsTitle p {
    font-size: 12px;
    line-height: 18px;
  }
}

/* 最新消息手機板特殊設定 */
.NewsMobile {
  display: none;
}
@media (max-width: 767px) {
  .NewsMobile {
    display: block;
    display: flex;
  }
}

.NewsTimeMobile {
  width: 86px;
  height: 86px;
  padding: 4px 10px;
  border-radius: 10px;
  gap: 4px;
  background: linear-gradient(to bottom, #C25270, #FB8DA0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (max-width: 430px) {
  .NewsTimeMobile {
    width: 70px;
    height: 76px;
    padding: 4px 8px;
  }
}

.NewsTitleMobile {
  display: flex;
  font-size: 18px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  width: 100%;
  font-weight: 400;
  line-height: 21.78px;
  color: rgb(89, 71, 72);
}

/*
@media (max-width: 767px) {
  .NewsTitleMobile {
    gap: 8px;
    flex-direction: column;
    align-items: start;
    margin-left: 8px;
  }
}
*/
@media (max-width: 767px) {
  .NewsTitleMobile {
    gap: 4px;
    flex-direction: column;
    align-items: start;
    margin-left: 8px;
  }
  .news p {
    margin: 0px;
  }
}
.NewsTitleMobile p:first-child {
/*  width: 15%;*/
  height: 37px;
  border-radius: 10px;
  background-color: rgba(255, 182, 172, 0.3019607843);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*
@media screen and (min-width: 992px) and (max-width: 1200px)  {
  .NewsTitleMobile p:first-child {
    width: 30%;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px){
  .NewsTitleMobile p:first-child {
    width: 40%;
  }
}
*/
@media screen and (max-width: 767px){
  .NewsTitleMobile p:first-child {
    width: 80%;
  }
}
.NewsTitleMobile p {
  margin-bottom: 0;
  color: #594748;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.NewsMobile .NewsTimeMobile .NewsRealeseYear p{
  color: #FFF;
}
@media (max-width: 767px) {
  .NewsTitleMobile p {
    font-size: 18px;
    line-height: 20px;
  }
  .news p{
    margin-top: 0px  !important;
    margin-bottom: 0px  !important;
    line-height: 20px !important;

  }
  .NewsText{
    font-size: 16px !important;
  }

}
/* @media (max-width: 321px) {
  .NewsTitleMobile p {
    font-size: 16px;
  }
} */

.NEWS4BTN {
  display: flex;
  align-items: center;
  justify-content: start;
}


/*----------     最新消息 news End   ----------*/

/*** ================================================================================= 最新消息列表 與 首頁最新消息 區域 使用之 News CSS End***/
/*** ================================================================================= 最新消息內容  Start***/
.newsContantTime {
  text-align: left;
  color: #000;
  font-size: 18px;
}
@media (max-width: 992px) {
  .newsContantTime {
    font-size: 16px;
  }
}

/*** ================================================================================= 最新消息內容  End***/
/*** ==============================  index.html 關係企業連結 企業卡牌區 COMPANIES  Start ============================== ***/
.CompaniesCardArea {
  display: grid;
  grid-template-columns: repeat(5, 240px);
  padding-left: 0;
  width: 100%;
  justify-content: center;
  justify-items: center;
}
@media (max-width: 1600px) {
  .CompaniesCardArea {
    gap: 24px;
    grid-template-columns: repeat(3, 240px);
    width: 100%;
  }
}
@media (max-width: 1080px) {
  .CompaniesCardArea {
    grid-template-columns: repeat(2, 200px);
    gap: 12px;
  }
}
@media (max-width: 430px) {
  .CompaniesCardArea {
    grid-template-columns: repeat(2, 1fr);
  }
}

.CompaniesCard {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-align: center;
  border-radius: 10px;
  border: 2px solid #CCAFA5;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  padding: 12px;
}
@media (max-width: 1400px) {
  .CompaniesCard {
    width: 100%;
  }
}
@media (max-width: 430px) {
  .CompaniesCard {
    margin: 0 auto;
    padding: 8px;
  }
}
.CompaniesCard:hover {
  background-color: #E57F84;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
  border: 2px solid rgb(229, 127, 132);
  color: rgb(255, 182, 172);
}
.CompaniesCard:hover p {
  color: #fff;
}
.CompaniesCard p {
  width: 100%;
  color: #261F20;
  font-size: 18px;
  line-height: 21.78px;
  font-weight: 700;
  word-break: break-all;
  display: -webkit-box;
  /* -webkit-line-clamp: 3; 顯示的行數 */
  -webkit-box-orient: vertical;
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  margin-top: 8px;
  margin-bottom: 0;
}
@media (max-width: 430px) {
  .CompaniesCard p {
    font-size: 18px;
  }
}
@media (max-width: 375px) {
  .CompaniesCard p {
    font-size: 14px;
  }
}
.CompaniesCard img {
  display: block;
  margin: 0 auto;
  object-fit: cover;
  width: 100%;
}
.CompaniesCard a {
  display: block;
  width: 100%;
  height: 100%;
}

.CompaniesCard:nth-child(3) {
  cursor: default;
}

.CompaniesCard:nth-child(5) {
  cursor: default;
}

@media (max-width: 1400px) {
  .CompaniesCardArea {
    align-items: center;
    margin: 0 auto;
    gap: 16px;
  }
}
.text-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 顯示的行數 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.COMCardAREA {
  display: flex;
  justify-content: center;
  align-items: center;
}

.no-hover:hover {
  background-color: initial;
  border: 2px solid rgb(204, 175, 165);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  cursor: default;
}
.no-hover:hover p {
  color: initial;
}

/*** ==============================  relatedLinks.html 關係企業連結 企業卡牌區 COMPANIES  Start ============================== ***/
.CompaniesCardArea2 {
  display: grid;
  grid-template-columns: repeat(5, 240px);
  padding-left: 0;
  width: 100%;
  justify-content: center;
  justify-items: center;
  gap: 20px;
}
@media (max-width: 1600px) {
  .CompaniesCardArea2 {
    gap: 24px;
    grid-template-columns: repeat(3, 240px);
    width: 100%;
  }
}
@media (max-width: 1080px) {
  .CompaniesCardArea2 {
    grid-template-columns: repeat(2, 200px);
    gap: 12px;
  }
}
@media (max-width: 430px) {
  .CompaniesCardArea2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*** ==============================  index.html 關係企業連結 企業卡牌區 COMPANIES  End ============================== ***/
/*** ========================================================================== serviceIntro.html 使用的css start  ***/
.ServiceIntroCardArea {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 40px;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 1280px) {
  .ServiceIntroCardArea {
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}
@media (max-width: 769px) {
  .ServiceIntroCardArea {
    width: 100%;
    gap: 8px;
  }
}

.ServiceIntroCard {
  /* width: 100%; */
  height: 200px;
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(255, 182, 172, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media (max-width: 769px) {
  .ServiceIntroCard {
    padding: 12px;
  }
}
@media (max-width: 430px) {
  .ServiceIntroCard {
    padding: 4px;
    /* height: 220px; */
  }
}
.ServiceIntroCard i {
  font-size: 32px;
}
.ServiceIntroCard h4 {
  font-size: 20px;
  margin-top: 12px;
}
@media (max-width: 430px) {
  .ServiceIntroCard h4 {
    font-size: 18px;
  }
}
.ServiceIntroCard p {
  margin-bottom: 0;
}
@media (max-width: 430px) {
  .ServiceIntroCard p {
    font-size: 16px;
  }
}

.ServiceBasicTitle {
  display: flex;
  justify-content: space-around;
}
@media (max-width: 541px) {
  .ServiceBasicTitle {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    justify-items: center;
  }
}
.ServiceBasicTitle h4 {
  font-size: 20px;
  font-weight: 500;
}
@media (max-width: 430px) {
  .ServiceBasicTitle h4 {
    font-size: 16px;
  }
}

/* 服務項目 小標 */
.ServiceSmallTitle h4{
  font-size: 22px;
  font-weight: 500;
  line-height: 32px;
  text-align: left;
}

@media (max-width: 430px) {
  .ServiceSmallTitle h4 {
    font-size: 18px;
  }
}

/*** 基本服務 流程項目 ***/
.feature .feature-item {
  position: relative;
  display: flex;
  border: 1px solid var(--bs-primary);
  border-radius: 10px;
  background: var(--bs-light);
  transition: 0.5s;
  text-align: center;
}

@media (max-width: 992px) {
  .feature .feature-item {
    padding: 18px !important;
  }
}
@media (max-width: 430px) {
  .feature .feature-item {
    padding: 14px !important;
  }
}
@media (max-width: 344px) {
  .feature .feature-item {
    padding: 4px !important;
  }
}
.feature .feature-item::before {
  width: 0;
  height: 100%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px;
  transition: 0.5s;
}

.feature .feature-item:hover::before {
  width: 100%;
  background: var(--bs-primary);
}

.feature .feature-item .feature-icon {
  display: inline-flex;
  border-radius: 10px;
  transition: 0.5s;
}

.feature .feature-item .feature-number {
  display: inline-flex;
  padding: 20px 30px;
  border-radius: 50%;
  background-color: #c25270;
  transition: 0.5s;
}

.feature .feature-item:hover .feature-icon,
.feature .feature-item:hover .feature-number {
  position: relative;
  z-index: 2;
}

.feature .feature-item:hover .feature-content {
  position: relative;
  color: var(--bs-white);
  z-index: 2;
}

.feature .feature-item:hover .feature-content h5 {
  color: var(--bs-dark);
}

.feature .feature-content p {
  /* overflow: hidden; */
  /* 隱藏超出部分 */
  /* display: -webkit-box; */
  /* 設定為彈性盒模型 */
  /* -webkit-line-clamp: 2; */
  /* 限制行數 */
  /* -webkit-box-orient: vertical; */
  /* 設定排列方向 */
  font-size: 14px;
}

@media (max-width: 344px) {
  .feature .feature-content p {
    -webkit-line-clamp: none;
  }
}
.featureTitle {
  /* 這裡可以放置其他樣式，如有 */
}

@media (max-width: 430px) {
  .featureTitle {
    font-size: 16px;
    width: 100%;
  }
}
.featureProLicense {
  margin-bottom: 40px !important;
  font-size: 24px !important;
}

.featureIconCustom {
  font-size: 48px;
  color: rgb(172, 196, 214);
}

@media (max-width: 992px) {
  .featureIconCustom {
    font-size: 32px;
  }
}
@media (max-width: 430px) {
  .featureIconCustom {
    font-size: 28px;
  }
}
@media (max-width: 360px) {
  .featureIconCustom {
    font-size: 32px;
  }
}
.JobProcessCard {
  display: flex;
  align-items: center;
  width: 80%;
  justify-content: space-around;
}
@media (max-width: 430px) {
  .JobProcessCard {
    width: 100%;
  }
}

.JobProcessBox {
  padding: 12px !important;
  font-size: 48px;
}

@media (max-width: 992px) {
  .JobProcessBox {
    padding: 8px !important;
    font-size: 32px;
  }
}
@media (max-width: 430px) {
  .JobProcessBox {
    padding: 4px !important;
    font-size: 24px;
  }
}
.TeamSmallIcon {
  /* 其他樣式如有 */
}

@media (max-width: 430px) {
  .TeamSmallIcon {
    font-size: 40px;
  }
}
.TeamSmallText {
  font-size: 20px !important;
}

@media (max-width: 430px) {
  .TeamSmallText {
    font-size: 16px !important;
  }
}
.feature .feature-item:hover .JobProcessBox .TeamSmallIcon {
  color: #fff; /* 將 i 標籤變成白色 */
}

/*** ============================================================= 負擔費用表格 ***/
.CutomTable {
  width: 100%;
}
.CutomTable td {
  padding-top: 12px;
  padding-bottom: 12px;
}

.TableLayOut {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 40px;
  align-items: center;
  justify-content: center;
}

.CutomTableFirstTR {
  background-color: rgb(194, 82, 112);
  border-bottom: 2px solid black;
  border-top: 2px solid black;
}

.CutomTable01TR {
  background-color: #ebecee;
}

.TDTitle {
  font-size: 24px;
}
@media (max-width: 992px) {
  .TDTitle {
    font-size: 20px;
  }
}
@media (max-width: 540px) {
  .TDTitle {
    font-size: 16px;
  }
}

.TBToptd {
  width: 20%;
}

.TBToptd10 {
  width: 10%;
}
@media (max-width: 540px) {
  .TBToptd10 {
    width: 20%;
  }
}

.TBLeftTitle {
  font-size: 22px;
}
@media (max-width: 992px) {
  .TBLeftTitle {
    font-size: 18px;
  }
}
@media (max-width: 540px) {
  .TBLeftTitle {
    font-size: 14px;
  }
}

.TBInnerText {
  font-size: 20px;
}
@media (max-width: 992px) {
  .TBInnerText {
    font-size: 16px;
  }
}
@media (max-width: 540px) {
  .TBInnerText {
    font-size: 14px;
  }
}

.CutomTable02TR {
  background-color: rgb(247, 247, 245);
}

.TableBorderTDTR {
  background-color: #fff;
  border-bottom: 3px solid black;
  border-top: 3px solid black;
}

.TableSubTitle01 {
  background-color: #dbdee2;
}

.TableSubTitle02 {
  background-color: #ebecee;
}

.tableTipText {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-wrap: wrap;
}

.tableTipText p {
  display: flex;
  text-align: left; /* 文本水平居中 */
  margin: 0; /* 移除默认的段落外边距 */
  height: 100%; /* 让段落高度填满格子 */
  font-size: 16px;
}

/*** ========================================================================== serviceIntro.html 使用的css End  ***/
/*** ======================================================================================== service.html 服務項目***/
.serviceListIMG img {
  width: 50%;
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}
@media (max-width: 541px) {
  .serviceListIMG img {
    width: 80%;
  }
}

.service4TextAreaLayout {
  display: grid;
  align-items: center;
  justify-items: start;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
}

.service4TextAreaLayout div {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
}

.service2TextAreaLayout {
  display: grid;
  align-items: start; /* 确保所有内容都在网格顶部对齐 */
  justify-items: start;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px; /* 添加一些间距 */
  width: 100%;
}
.service p{
	margin-bottom: 16px;
    text-align: justify;
    font-size: 18px;
    line-height: 24px;
    font-weight: 300;
    color: #594748;	
}
.service ul{
	list-style: disc;
}
.service li{
	margin-top: 6px;
	margin-bottom: 6px;
    text-align: justify;
    font-size: 18px;
    line-height: 24px;
    font-weight: 300;
    color: #594748;	
}
.service ol{
	list-style: decimal;
}

@media (max-width: 768px) {
  .service2TextAreaLayout {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
  }
}

.service2TextAreaLayout div {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between; /* 使内容在垂直方向上均匀分布 */
}

.service3TextAreaLayout {
  display: grid;
  align-items: start; /* 确保所有内容都在网格顶部对齐 */
  justify-items: start;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px; /* 添加一些间距 */
  width: 100%;
}
.service3TextAreaLayout li {
  list-style: none;
}
.service3TextAreaLayout ul {
  padding-left: 0;
}
@media (max-width: 768px) {
  .service3TextAreaLayout {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
  }
}

.service3TextAreaLayout div {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between; /* 使内容在垂直方向上均匀分布 */
}

/*** ======================================================================================== service.html 服務項目  End ***/
/*** ================================================================================= 線上影音列表 使用之 CSS Start***/
.videoListCardArea {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
}
@media (max-width: 1280px) {
  .videoListCardArea {
    gap: 32px;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 992px) {
  .videoListCardArea {
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .videoListCardArea {
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 430px) {
  .videoListCardArea .videoList .videoListListCardArea .videoList {
    width: 100%; /* 確保在小螢幕上卡片佔據整個寬度 */
  }
}

.videoList-item {
  width: 100%;
  padding: 15px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  cursor: pointer;
}
@media (max-width: 430px) {
  .videoList-item {
    padding: 12px;
    min-height: 280px;
  }
}

.videoList:nth-child(odd) .videoList-item {
  border: 1px solid #13bcc2;
  background: rgba(133, 210, 208, 0.1);
}

.videoList:nth-child(even) .videoList-item {
  border: 1px solid rgb(229, 127, 132);
  background: rgba(255, 182, 172, 0.1);
}

.owl-item:nth-child(odd) .videoList-item {
  border: 1px solid #13bcc2;
  background: rgba(133, 210, 208, 0.1);
}

.owl-item:nth-child(even) .videoList-item {
  border: 1px solid #e57f84;
  background: rgba(255, 182, 172, 0.1);
}

/* 單數卡片的圖示樣式 */
.owl-item:nth-child(odd) .fa-calendar-days {
  color: #13BCC2; /* CustomIconColor5 */
}

/* 雙數卡片的圖示樣式 */
.owl-item:nth-child(even) .fa-calendar-days {
  color: #FFB6AC; /* CustomIconColor6 */
}

.videoList-img {
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
}
@media (max-width: 375px) {
  .videoList-img {
    height: 140px;
  }
}

.videoList-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
}

.videoList-text {
  width: 100%;
  transition: 0.5s;
  flex-grow: 1;
  color: #261F20;
}
.videoList-text span {
  font-size: 18px;
  font-weight: 400;
  line-height: 21.78px;
  margin-left: 5px;
}
@media (max-width: 360px) {
  .videoList-text span {
    font-size: 16px;
  }
}
.videoList-text i {
  width: 18.38px;
  height: 21px;
}
@media (max-width: 430px) {
  .videoList-text {
    font-size: 12px;
  }
}

.videoList-text h5 {
  line-height: 27.24px; /* 調整行高，與字體大小相匹配 */
  font-size: 20px; /* 字體大小 */
  max-height: 54.48px; /* 限制顯示兩行的最大高度 */
  overflow: hidden; /* 隱藏多餘的內容 */
  text-overflow: ellipsis; /* 添加省略號 */
  display: -webkit-box; /* 必須結合 -webkit-line-clamp 使用 */
  -webkit-line-clamp: 2; /* 限制顯示兩行 */
  -webkit-box-orient: vertical; /* 垂直排版 */
  margin-bottom: 0;
  color: rgb(38, 31, 32);
}
@media (max-width: 430px) {
  .videoList-text h5 {
    font-size: 18px;
    max-height: 49px; /* 限制顯示兩行的最大高度 */
    -webkit-line-clamp: 2; /* 限制顯示兩行 */
  }
}

.videoList-item:hover .videoList-text {
  width: 100%;
}

.videoList-text * {
  transition: 0.5s;
}

.videoList-item:hover .videoList-text * {
  letter-spacing: 2px;
}

.videoList:nth-child(odd) .videoList-item {
  border: 1px solid rgb(19, 188, 194);
  background: rgba(133, 210, 208, 0.1);
}
.videoList:nth-child(odd) .videoList-item:hover {
  border: 1px solid rgb(204, 175, 165);
  background: rgb(255, 255, 255);
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}

.videoList:nth-child(even) .videoList-item {
  border: 1px solid rgb(229, 127, 132);
  background: rgba(255, 182, 172, 0.1);
}
.videoList:nth-child(even) .videoList-item:hover {
  border: 1px solid rgb(204, 175, 165);
  background: rgb(255, 255, 255);
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}

/* 單數卡片的圖示樣式 */
.videoList:nth-child(odd) .fa-calendar-days {
  color: #13BCC2; /* CustomIconColor5 */
}

/* 雙數卡片的圖示樣式 */
.videoList:nth-child(even) .fa-calendar-days {
  color: #FFB6AC; /* CustomIconColor6 */
}

/* 针对单数卡片的样式 */
.videoList:nth-child(odd) .videoList-text i {
  color: rgb(19, 188, 194);
}

.videoList:nth-child(odd) .videoList-text span {
  color: rgb(0, 149, 166);
}

/* 针对双数卡片的样式 */
.videoList:nth-child(even) .videoList-text i {
  color: rgb(255, 182, 172);
}

.videoList:nth-child(even) .videoList-text span {
  color: rgb(194, 82, 112);
}

/*** ================================================================================= 線上影音列表 使用之 CSS End***/
/*** ================================================================================== 首頁 線上影音lightBox-影音圖文介紹設定 Start ======================***/
.modal {
  --bs-modal-width: 650px;
}

.modal {
  --bs-modal-width: 768px;
}
@media (max-width: 769px) {
  .modal {
    --bs-modal-width: 540px;
  }
}

.modal-header {
  padding: 5px 0;
  display: flex;
  justify-content: center;
  color: #fff;
  background-color: #15a9a9;
}

.modal-title {
  width: 90%;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  /*    background-color: #ccc;*/
}

.modal-body {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 24px;
}

.modalPic {
  background-color: #ccc;
}

.modalPic img {
  max-width: 100%;
  height: auto;
}

.modalInfo {
  padding-left: 20px;
}

.modalBnBname {
  font-size: 20px;
  line-height: 32px;
  color: #6a39b6;
  font-weight: 400;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modalBnBtel {
  font-size: 18px;
  line-height: 32px;
  color: #424242;
  font-weight: 300;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modalBnBaddress {
  font-size: 18px;
  line-height: 32px;
  color: #424242;
  font-weight: 300;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.modalBnBwebsite {
  font-size: 18px;
  line-height: 32px;
  color: #424242;
  font-weight: 300;
}

.modalBnBwebsite a {
  text-decoration: underline;
  color: #007d99;
}

.modalBnBwebsite a:hover {
  text-decoration: none;
  color: #d96c89;
}

.modalBrief {
  margin-top: 20px;
  font-size: 18px;
  line-height: 28px;
  color: #424242;
  font-weight: 300;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.modal-footer {
  justify-content: center;
  padding-top: 0;
  border-top: none;
}

.modal-header {
  padding: 5px 0;
}

.modal-title {
  width: 90%;
}

.modalInfo {
  padding-left: 0;
}

.modalBnBname {
  font-size: 18px;
  line-height: 28px;
}

.modalBnBtel {
  font-size: 16px;
  line-height: 28px;
}

.modalBnBaddress {
  font-size: 16px;
  line-height: 28px;
}

.modalBnBwebsite {
  font-size: 16px;
  line-height: 28px;
}

.modalBrief {
  margin-top: 10px;
  font-size: 16px;
  line-height: 24px;
}

@media screen and (max-width: 767px) {
  .modal {
    --bs-modal-width: 360px;
  }
  .modal-header {
    padding: 5px 0;
  }
  .modal-title {
    width: 90%;
  }
  .modalInfo {
    padding-left: 0;
  }
  .modalBnBname {
    font-size: 18px;
    line-height: 28px;
  }
  .modalBnBtel {
    font-size: 16px;
    line-height: 28px;
  }
  .modalBnBaddress {
    font-size: 16px;
    line-height: 28px;
  }
  .modalBnBwebsite {
    font-size: 16px;
    line-height: 28px;
  }
  .modalBrief {
    margin-top: 10px;
    font-size: 16px;
    line-height: 24px;
  }
}
.closeBtn {
  padding: 0 20px 2px;
  text-align: center;
  font-size: 20px;
  line-height: 40px;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(to bottom, #29c2c2 0%, #15a9a9 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border-top: 1px solid #28b3b3;
  border-right: 2px solid #15a9a9;
  border-bottom: 2px solid #15a9a9;
  border-left: 1px solid #15a9a9;
  box-shadow: 2px 2px 3px rgba(51, 51, 51, 0.7);
}

.closeBtn:hover,
.closeBtn:active,
.closeBtn:focus {
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(to bottom, #cc526a 0%, #d96c89 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border-top: 1px solid #db8597;
  border-right: 2px solid #9c3e52;
  border-bottom: 2px solid #9e465c;
  border-left: 1px solid #d77388;
  box-shadow: 2px 2px 3px rgba(51, 51, 51, 0.7);
}

a.xClose01 {
  width: 10%;
  text-align: center;
  display: block;
  text-decoration: none;
  color: #fff;
  /*    background-color: #000;*/
}

a.xClose01 i {
  font-size: 36px;
}

@media screen and (max-width: 767px) {
  .video .video-item .project-img {
    height: 150px;
  }
  .modal {
    --bs-modal-width: 360px;
  }
  .modal-header {
    padding: 5px 0;
  }
  .modal-title {
    width: 90%;
  }
  a.xClose01 {
    width: 10%;
  }
  a.xClose01 i {
    font-size: 36px;
  }
}
/*** ========================================================= 首頁 線上影音lightBox-影音圖文介紹設定 End ======================***/
/*** ============================================ contactUs.html 聯絡我們 美化的Select下拉框設定 Start ============***/
.nice-select {
  position: relative;
  display: inline-block;
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
  text-align: left !important;
  font-weight: 300;
  /*	font-family:"ITC Avant Garde Gothic","微軟正黑體";*/
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-box-shadow: 0px 2px 3px rgba(51, 51, 51, 0.5);
  box-shadow: 0px 2px 3px rgba(51, 51, 51, 0.5);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.nice-select:after {
  position: absolute;
  display: block;
  /*
      width: 20px;
      height: 47px;
  	font-size:24px;
  	line-height:45px;
      margin-top: -23px;
      right: 8px;
  */
  top: 50%;
  content: "\f0d7";
  font-family: FontAwesome;
  font-weight: normal;
  text-align: center;
  pointer-events: none;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.nice-select.open:after {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.nice-select.open .list {
  opacity: 1;
  background-color: #fff;
  pointer-events: auto;
  -webkit-transform: scale(1) translateY(0);
  -ms-transform: scale(1) translateY(0);
  transform: scale(1) translateY(0);
}

.nice-select.wide {
  width: 100%;
}

.nice-select.wide .list {
  /*
      left: 0 !important;
      right: 0 !important;
  */
}

.nice-select.right {
  float: right;
}

.nice-select.right .list {
  left: auto;
  right: 0;
}

.nice-select .list {
  /*
      top: 100%;
      left: 0;
      margin-top: 0;
  */
  position: absolute;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  color: #58658c;
  box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
  box-sizing: border-box;
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scale(0.75) translateY(-21px);
  -ms-transform: scale(0.75) translateY(-21px);
  transform: scale(0.75) translateY(-21px);
  -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  -moz-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  -ms-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  z-index: 10;
}

.nice-select .list:hover .option:not(:hover) {
  color: #58658c;
  background-color: transparent !important;
}

.nice-select .option {
  min-height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: left;
  list-style: none;
  line-height: 40px;
  cursor: pointer;
  outline: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
  color: #fff;
  background-color: #9374c2;
}

.nice-select .option.selected {
  color: #fff;
  background-color: #9374c2;
}

.nice-select .option.disabled {
  background-color: transparent;
  color: #999;
  cursor: default;
}

.no-csspointerevents .nice-select .list {
  display: none;
}

.no-csspointerevents .nice-select.open .list {
  display: block;
}

.selectIndigo {
  border-radius: 10px;
  height: 47px;
  font-size: 20px;
  line-height: 45px;
  color: #fff;
  border: 1px solid #3b47ab;
  background-color: #3b47ab;
}

.selectPurple {
  border-radius: 10px;
  height: 47px;
  font-size: 20px;
  line-height: 45px;
  color: #fff;
  border: 1px solid #6a39b6;
  background-color: #6a39b6;
}

.selectOne {
  border-radius: 10px;
  height: 47px;
  font-size: 18px;
  line-height: 45px;
  color: #363e59;
  border: 1px solid #455a64;
  background-color: #fff;
}

.selectIndigo.nice-select.wide .list,
.selectPurple.nice-select.wide .list,
.selectOne.nice-select.wide .list {
  left: 0;
  right: 0;
}

.nice-select:hover .selectIndigo {
  color: #fff;
  border: 1px solid #3b47ab;
}

.selectPurple .nice-select:hover {
  color: #fff;
  border: 1px solid #6a39b6;
}

.selectOne .nice-select:hover {
  color: #363e59;
  border: 1px solid #455a64;
}

.selectIndigo .nice-select:active,
.nice-select .selectIndigo.open,
.selectIndigo .nice-select:focus {
  color: #fff;
  border: 1px solid #3b47ab;
  background-color: #3b47ab;
}

.selectPurple .nice-select:active,
.selectPurple .nice-select.open,
.selectPurple .nice-select:focus {
  color: #fff;
  border: 1px solid #6a39b6;
  background-color: #6a39b6;
}

.selectOne .nice-select:active,
.selectOne .nice-select.open,
.selectOne .nice-select:focus {
  color: #363e59;
  border: 1px solid #455a64;
  background-color: #fafafa;
}

.selectIndigo .nice-select:after,
.selectIndigo .nice-select:hover:after,
.selectPurple .nice-select:after,
.selectPurple .nice-select:hover:after {
  color: #fff;
}

.selectIndigo.nice-select:after,
.selectPurple.nice-select:after {
  color: #fff;
  width: 20px;
  height: 47px;
  font-size: 24px;
  line-height: 45px;
  margin-top: -23px;
  right: 8px;
}

.selectOne.nice-select:after {
  color: #363e59;
  width: 20px;
  height: 47px;
  font-size: 24px;
  line-height: 45px;
  margin-top: -23px;
  right: 8px;
}

.selectIndigo.nice-select.open:after,
.selectPurple.nice-select.open:after {
  color: #fff;
}

.selectOne.nice-select.open:after {
  color: #363e59;
}

.selectIndigo.nice-select.wide .list {
  top: 100%;
  left: 0;
  margin-top: 0;
  border: 1px solid #5762c2;
  background-color: #fff;
}

.selectPurple.nice-select .list {
  top: 100%;
  left: 0;
  margin-top: 0;
  border: 1px solid #9374c2;
  background-color: #fff;
}

.selectOne.nice-select .list {
  top: 100%;
  left: 0;
  margin-top: 0;
  border: 1px solid #363e59;
  background-color: #fff;
}

.selectIndigo.nice-select .option:hover,
.selectIndigo.nice-select .option.focus,
.selectIndigo.nice-select.option.selected.focus {
  color: #fff;
  background-color: #5762c2;
}

.selectPurple.nice-select .option:hover,
.selectPurple.nice-select .option.focus,
.selectPurple.nice-select .option.selected.focus {
  background-color: #9374c2;
}

.selectOne.nice-select .option:hover,
.selectOne.nice-select .option.focus,
.selectOne.nice-select .option.selected.focus {
  background-color: rgb(194, 82, 112);
}

.selectIndigo.nice-select .option.selected {
  background-color: #5762c2;
}

.selectPurple.nice-select .option.selected {
  color: #fff;
  background-color: #9374c2;
}

.selectOne.nice-select .option.selected {
  color: #fff;
  background-color: #58658c;
}

/*** ============================================ contactUs.html 聯絡我們 美化的Select下拉框設定 end ============***/
/*** ========================================================= 聯絡我們 Contact Start =================================================***/
.contact {
  /* background: linear-gradient(rgba(21, 185, 217, 0.9), rgba(21, 185, 217, 0.9)), url(../img/carousel-1.jpg); */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.contact .contact-form .btn.btn-light {
  box-shadow: inset 0 0 0 0 var(--bs-primary);
}

.contact .contact-form .btn.btn-light:hover {
  box-shadow: inset 600px 0 0 0 var(--bs-primary) !important;
  color: var(--bs-white) !important;
}

.contact .contact-form .form-floating input,
.contact .contact-form .form-floating textarea,
.contact .contact-form .form-floating label {
  color: var(--bs-light);
}

.CustomInputBox {
  border-radius: 10px !important;
  box-shadow: 0px 2px 3px rgba(51, 51, 51, 0.5) !important;
  font-size: 18px !important;
  font-weight: 300;
  -webkit-appearance: none;
}
.CustomInputBox:focus {
  background-color: #FAF9FB !important;
  border: 1px solid #FFA726 !important;
}

/* Testimonial Section Title Start */
.contact .section-title {
  max-width: 900px;
  text-align: center;
  margin: 0 auto;
}

.contact .section-title .sub-style {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  color: var(--bs-primary);
}

.contact .section-title .sub-style::before {
  content: "";
  width: 100px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  margin-top: 8px;
  margin-left: -100px;
  border: 1px solid var(--bs-white) !important;
}

.contact .section-title .sub-style::after {
  content: "";
  width: 50px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  margin-bottom: 5px;
  margin-left: -50px;
  border: 1px solid var(--bs-white) !important;
}

.contact .section-title .sub-title {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  color: var(--bs-primary);
}

.contact .section-title .sub-title::before {
  content: "";
  width: 100px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  margin-top: 8px;
  margin-right: -100px;
  border: 1px solid var(--bs-white) !important;
}

.contact .section-title .sub-title::after {
  content: "";
  width: 50px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  margin-bottom: 8px;
  margin-right: -50px;
  border: 1px solid var(--bs-white) !important;
}

.TeamContactUsText p {
  font-size: 20px;
  text-align: center;
}
@media (max-width: 430px) {
  .TeamContactUsText p {
    font-size: 18px;
  }
}

.contact .info-item i {
  font-size: 38px;
  line-height: 1.2;
  color: var(--accent-color);
  color: black;
}

.contact .info-item .FAX i {
  line-height: auto;
}

.contact .info-item h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  margin: 10px 0 10px 0;
}

.contact .info-item p {
  padding: 0;
  width: 100%;
  line-height: 1.3;
  font-size: 18px;
  margin-bottom: 0;
  text-wrap: wrap;
  word-break: break-word;
  word-spacing: normal;
  font-weight: 300;
}

@media (max-width: 375px) {
  .contact .info-item p {
    font-size: 14px;
  }
}
.contact .info-item span {
  padding: 0;
  width: 100%;
  line-height: 1.3;
  font-size: 18px;
  margin-bottom: 0;
  text-wrap: wrap;
  word-break: break-word;
  word-spacing: normal;
}

@media (max-width: 375px) {
  .contact .info-item span {
    font-size: 14px;
  }
}
.contact .php-email-form {
  background: color-mix(in srgb, var(--default-color), transparent 96%);
  /* padding: 30px; */
  height: 100%;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 4px;
  background-color: #13bcc2;
  border: none;
  transition: background-color 0.5s ease;
  color: #fff;
}
.contact .php-email-form button[type=submit]:hover {
  background-color: #c25270 !important;
}
@media (max-width: 430px) {
  .contact .php-email-form button[type=submit] {
    width: 40%;
  }
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/* 聯絡我們 */
.fmColW18R1 {
  width: 18%;
  margin-right: 1%;
}

#navItem01 {
  padding-right: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100px;
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  #navItem01 {
    padding-right: 12px;
    width: 100%;
    height: 80px;
  }
}
/* 相關連結 */
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  margin-top: 30px;
  padding: 16px;
  background-color: rgba(255, 182, 172, 0.3);
  height: 190px;
  border-radius: 16px;
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.relatedLinks .nav-pills{
	justify-content: center;
}

@media (max-width: 1199px) {
  .contact .info-item {
    padding: 8px;
  }
}
@media (max-width: 767px) {
  .contact .info-item {
    padding: 25px 0px 0px 8px;
    margin-top: 0;
  }
}
@media (max-width: 430px) {
  .contact .info-item {
    padding: 12px;
    margin-top: 0;
  }
}
.ContactCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/*** ========================================= contactUs.html 聯絡我們 輸入欄位 ==============================================***/
@media screen and (min-width: 992px) and (max-width: 1200px) {
	.contact .info-item {
    	margin-top: 0;
		height: 220px;
		}
}
@media screen and (max-width: 767px){
	.contact .info-item {
    	margin-top: 0;
		height: 220px;
		}
}

.CustomInputBox {
  border-radius: 10px !important;
  box-shadow: 0px 2px 3px rgba(51, 51, 51, 0.5) !important;
  font-size: 18px !important;
  font-weight: 300;
}
.CustomInputBox:focus {
  background-color: #FAF9FB !important;
  border: 1px solid #FFA726 !important;
}

/*** ========================================= contactUs.html 聯絡我們 提交驗證碼按鈕 ==============================================***/
.CustomSubBTN {
  background-color: #13bcc2;
  border: none;
  transition: background-color 0.5s ease;
}
.CustomSubBTN:hover {
  background-color: #c25270 !important;
}

@media (min-width: 768px) {
  /* .VerifyCode .VerifyCodeImg {
      margin-right: 16px;
  } */
  /* .VerifyCode .RePlaceIMGBTN {
      margin-left: 16px;
  } */
}

/*** ========================================= contactUs.html 聯絡我們 驗證碼 ==============================================***/
.VerifyCode {
  border-radius: 10px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
@media (max-width: 430px) {
  .VerifyCode {
    flex-direction: column;
  }
}

/* @media (max-width: 414px) {
  .VerifyCode {
    margin-right: 12px;
    margin-left: 12px;
  }
} */

.VerifyCodeImgArea {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 430px) {
  .VerifyCodeImgArea {
    margin-top: 20px;
  }
}

.verofyCodeInput {
  width: 100%;
  margin-right: 40px;
}

@media (max-width: 430px) {
  .verofyCodeInput {
    width: 100%;
    margin-right: 0;
  }
}

.veriftSubmitBTN {
  background-color: #13bcc2;
  border: none;
  transition: background-color 0.5s ease;
  font-size: 18px;
  line-height: 24.52px;
  font-weight: 400;
  color: rgb(255, 255, 255);
}
.veriftSubmitBTN:hover {
  background-color: #c25270;
}

.RePlaceIMGBTN {
  background-color: #13bcc2;
  border: none;
  transition: background-color 0.5s ease;
  font-size: 18px;
  line-height: 24.52px;
  color: rgb(255, 255, 255);
  font-weight: 400;
  width: 100%;
  padding: 40px;
  margin: 0;
}
.RePlaceIMGBTN:hover {
  background-color: #c25270;
}
@media (max-width: 768px) {
  .RePlaceIMGBTN {
    padding: 20px !important;
  }
}
@media (max-width: 540px) {
  .RePlaceIMGBTN {
    padding: 12px !important;
  }
}

@media (max-width: 768px) {
  .VerifyCodeImgBTN {
    text-align: right !important;
    width: 30%;
  }
}

/*** ============================================ contactUs.html 聯絡我們 End ============***/

/*# sourceMappingURL=style.css.map */

/* ------------------------------------------------最新消息 Start-------------------------------*/

.news {
    
}  
.nav-pills{
	justify-content: start;
  
}
.nav-pills .nav-link {
	margin: 0 24px 16px;
	padding: 12px 24px;
	border: 1px solid #ccb8c7;
	font-size: 22px;
	font-weight: 400;
	color: #594748;
	background-color: #F7F7F5;
	border-radius: 10px;
}
.nav-pills .nav-link i {
	font-size: 30px;
	color: #CCaFa5;
	padding-right: 12px;
	vertical-align: text-bottom;
}
.nav-pills .nav-link:hover{
	border: 1px solid #c25270;
}
.nav-pills .nav-link:hover i{
	color: #c25270;
}
.nav-pills .nav-link.active {
	color: #fff;
	border: 0;
	background: #c25270;
}
.nav-pills .nav-link.active i, .nav-pills .nav-link:hover.active{
	color: #fff;
}
a.newsLine{
    display: block;
    padding: 16px 12px;
    text-decoration: none;
}
a.newsLine:nth-child(odd){
    border-bottom: 1px dashed #a9aca9;
}
a.newsLine:nth-child(even){
	border-bottom: 1px dashed #ba9790;
}
a.newsLine:hover, a.newsLine:active{
    background-color: #fffaf0;
}
.newsList{
    display: flex;
    justify-content: space-between;
    align-items: center;
	margin-bottom: 6px;
}
.newsDate{
   /* margin-right: 12px;*/
	padding: 8px 12px; 
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    font-family: Arial, Helvetica;
	text-align: center;
	background: linear-gradient(to bottom, #C25270, #FB8DA0);
  border-radius: 8px;
  
  /* width: 86px;
  height: 86px;
  padding: 4px 10px;
  border-radius: 10px;
  gap: 4px;
  background: linear-gradient(to bottom, #C25270, #FB8DA0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; */
}
.newsDate i{
    padding-right: 4px;
    font-size: 20px;
}
a.newsLine:nth-child(odd) .newsDate{
    color: #FFF;
	/* border: 1px solid #88d1c5; */
}
a.newsLine:nth-child(odd) .newsDate i{
    /* color: #50c5b7; */
    color: #FFF;
}
a.newsLine:nth-child(even) .newsDate{
    color: #FFF;
	/* border: 1px solid #ccb8c7; */
}
a.newsLine:nth-child(even) .newsDate i{
    color: #FFF;
}
.newsClass{
    width: 212px;
/*    margin-right: 12px;*/
    padding: 8px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    border-radius: 10px;
}
a.newsLine:nth-child(odd) .newsClass{
    color: rgb(194, 82, 112);
    background-color: rgba(255, 182, 172, 0.3019607843);;
}
a.newsLine:nth-child(even) .newsClass{
    color: rgb(194, 82, 112);
    background-color: rgba(255, 182, 172, 0.3019607843);;
}
.newsTitle{
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    color: #332c25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
/*    background-color: #ccc;*/
}
.newsBrief {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    display: -webkit-box;
    -webkit-box-orient: vertical;    
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;    
}
a.newsLine:nth-child(odd) .newsBrief {
    
    color: #ba9790;
}
a.newsLine:nth-child(even) .newsBrief {
  color: #a9aca9;
}
.newsBox{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.newsBox .newsDate{
	padding: 6px 8px 6px 0; 
    font-size: 18px;
    font-family: Arial, Helvetica;
    color: #549f93;
    background-color: transparent;
}
.newsBox .newsDate i{
    padding-right: 4px;
    font-size: 20px;
    color: #50c5b7;
}
.newsBox .newsClass{
    margin-left: 12px;
    padding: 6px 8px 6px 6px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    border-radius: 10px; 
    color: #549f93;
    background-color: #e1f2ef;
}
.newsInnerContent ol ul, .newsInnerContent ul ol{
	margin-bottom: 20px;
}
.news ul, .news ol{
	margin-left: 0;
}
.news li{
	margin-top: 8px;
	margin-bottom: 8px;
    text-align: justify;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    color: #594a43;	
}
.news ol ul, .news ul ol{
	margin-bottom: 20px;
}
.newsInnerContent p{
	margin-top: 6px;
	margin-bottom: 12px;
    text-align: justify;
    font-size: 18px;
    line-height: 28px;
    font-weight: 300;
    color: #594748;	
} 
.newsInnerContent li{
	margin-top: 8px;
	margin-bottom: 8px;
    text-align: justify;
    font-size: 18px;
    line-height: 28px;
    font-weight: 300;
    color: #594748;	
}
/*
.newsInnerContent ol, .newsInnerContent ul{
    margin-left: 20px;
}
*/
@media screen and (min-width: 992px) and (max-width: 1200px) {
	.nav-pills .nav-link {
		margin: 0 12px 16px;
		padding: 12px 20px;

	}
	.nav-pills .nav-link i {
		padding-right: 6px;
	}
	.newsClass{
    	width: 150px;
	}
  .NewsText {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    font-size: 16px !important;
  }
  .NewsTitle p{
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	.NewsText {
    	margin-bottom: 0px !important;
 	 }
	.nav-pills .nav-link {
		margin: 0 6px 16px;
		padding: 12px 15px;
	}
	.nav-pills .nav-link i {
		padding-right: 5px;
	}
/*
	.nav-pills{
		padding-left: 12px;
		display: flex;
		justify-content:space-around;
	}
  .news .nav-pills{
		padding: 0px;
    	margin: 0px;
		display: flex;
		justify-content:start;
	}
	.nav-pills .nav-link {
		margin: 0 5px;
		padding: 12px 10px;
	}
*/
	.newsClass{
    	width: 160px;
	}
}

@media screen and (max-width: 767px){
  .news ul{
    margin-bottom: 0px;
  }
	.nav-pills{
		padding-left: 12px;
		display: flex;
		justify-content:space-around;
	}
	.nav-pills .nav-item{
		width: 48%;
		margin-left: auto;
		margin-right: auto;
    
	}
	.nav-pills li button{
		font-size: 16px;
	}
	.nav-pills .nav-link {
		width: 100%;
		padding: 12px 6px;
		margin: 0 0 16px;
		font-size: 20px;
	}
	.nav-pills .nav-link i {
		font-size: 24px;
	}
	.tab-content{
		padding: 0 12px;
	}	
	a.newsLine{
		display: block;
		padding: 16px 12px;
		text-decoration: none;
	}	
	.newsList{
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-bottom: 6px;
	}
	.newsDate{
		margin-right: 12px;
	}	
	.newsClass{
		width: 50%;
	}
	.newsTitle{
		margin-top: 8px;
		font-size: 18px;
		line-height: 26px;
		font-weight: 400;
		color: #332c25;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}	
}
/*----------     最新消息 news End   ----------*/
/* 回上一頁 */
.backbtn a:hover {
  background-color: #c25270;
  border-color: #c25270;
}
/* 回上一頁 */

/* 分頁 */

.pagination {
  display: flex; /* 使用彈性盒子模型來排列項目 */
  justify-content: center; /* 置中對齊 */
  margin: 20px 0; /* 上下邊距 */
}

.pagination li {
  display: inline-block;
  margin: 0 5px; /* 左右邊距 */
  padding: 10px 15px; /* 增加內邊距 */
  border: 1px solid #e2e2e2; /* 邊框顏色 */
  border-radius: 5px; /* 圓角邊框 */
  background: #f8f8f8; /* 背景顏色 */
  transition: background 0.3s; /* 背景顏色過渡效果 */
}

.pagination li:hover {
  background: #e0e0e0; /* 滑鼠懸停時的背景顏色 */
}

.pagination li.active {
  background: #009688; /* 活動項目的背景顏色 */
  color: #fff; /* 活動項目的文字顏色 */
  border: 1px solid #009688; /* 活動項目的邊框顏色 */
}

.pagination li a {
  display: block;
  text-align: center;
  text-decoration: none; /* 移除連結下劃線 */
  color: inherit; /* 繼承父元素的文字顏色 */
  font-weight: bold; /* 加粗文字 */
}