/*0 #382214 1 #927055  2 #e6cdb9 3 #efe2d9 */

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600&family=Noto+Sans+TC:wght@400;700;900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
/* CSS Document */
/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(farthest-side,#FFF 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,#FFF);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation: l13 1s infinite linear;
}
@keyframes l13{ 
  100%{transform: rotate(1turn)}
}
body {font-family: '微软雅黑', '微軟正黑體', 'Noto Sans TC', sans-serif;}

.libre {
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  font-style: normal;
}

.logo img { width: 250px; height: auto; max-width: none; margin: 5px;}
 header { background-color: white;}
 header.fixed-nav { position: fixed!important;top:0; left: 0; width: 100%; z-index: 9999;}


.ellipsis{ overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; overflow: hidden;}
.ellipsis-evn{ overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;overflow: hidden;}
.ellipsis-odd{ overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal;overflow: hidden;}

/* effect */
.svg {display: block; width: 100%}
.text-stroke { -webkit-text-stroke: 2px #CCCCCC; paint-order: stroke fill;}
.text-stroke-gray { -webkit-text-stroke: 2px #03466e; paint-order: stroke fill;}

#silder {width: 100%; overflow: hidden;}
#silder.owl-carousel .owl-dots { position: absolute; right:0; top:80px; width: 60px; display: flex; flex-flow: column; justify-content: center; align-items: center; }
#silder.owl-carousel .owl-dots .owl-dot {margin:15px; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; }
#silder.owl-carousel .owl-dots .owl-dot span {  width: 8px; height: 8px; background: #fbe64c; }
#silder.owl-carousel .owl-dots .owl-dot.active {border-radius:50%; border:1px solid #fbe64c; padding: 2px; }
#silder.owl-carousel .owl-nav{display: none;}
#silder.owl-carousel:hover .owl-nav button.owl-prev,
#silder.owl-carousel:hover .owl-nav button.owl-next {opacity:1; }
#silder img.banner-text {max-width: 100%!important; width: auto!important;}

#educate.owl-carousel .owl-dots {display: none;}
#educate.owl-theme .owl-nav {position: absolute; top: -100px; right:0;}
#educate.owl-carousel .owl-nav button.owl-prev,
#educate.owl-carousel .owl-nav button.owl-next { background: transparent!important; }
#educate.owl-carousel .owl-nav button.owl-prev span,
#educate.owl-carousel .owl-nav button.owl-next span { font-size: 5rem; color:#009e96; line-height: 0; padding: 10px;}

#link.owl-carousel .owl-dots {display: none;}
/* FCK Box */
.fck-box {color:#57534e; }
.fck-box p,.fck-box span {line-height: 2;}
.fck-box p:not(:last-child) { margin-bottom: 1rem; }
.fck-box iframe { margin: 1rem auto ; max-width: 100% !important; }
.fck-box ul { list-style-type: disc; list-style-position: outside; padding-left: 20px;}
.fck-box ol { list-style-type:decimal; list-style-position: outside; padding-left: 20px;}
.fck-box table  {width: 100%; max-width: 100%; margin: 1rem auto;}
.fck-box table>tbody>tr:nth-of-type(odd) { background-color: #f9f9f9;}
.fck-box table>tbody>tr>td,
.fck-box table>tbody>tr>th,
.fck-box table>tfoot>tr>td,
.fck-box table>tfoot>tr>th,
.fck-box table>thead>tr>td,
.fck-box table>thead>tr>th { padding: 8px; line-height: 1.5; border: 1px solid #ccc;}
/*---------------------------
          responsive
----------------------------*/
/*2xl*/
@media only screen and  (max-width: 1536px) {
    
}

/*xl*/
@media only screen and  (max-width: 1280px) {

}

/*lg*/
@media only screen and (max-width: 1024px) {
  #silder img.banner-text {max-width: 100%!important; width: 300px!important;}
}
    
/*md*/
@media only screen and  (max-width: 768px) {
 #silder img.banner-text {max-width: 100%!important; width: 250px!important;}
  #educate.owl-theme .owl-nav { position: absolute; top: -130px;  right: 0;}
}

/*sm*/
@media only screen and  (max-width: 480px) {
  #educate.owl-theme .owl-nav { position: absolute; top: -160px;  right: 0;}
  #silder img.banner-text {max-width: 100%!important; width: 150px!important;}
  #silder.owl-carousel .owl-dots { position: absolute; right:0; top:40px; width: 60px; display: flex; flex-flow: column; justify-content: center; align-items: center; }
  }

/* 2025-07-29 */
@media only screen and  (max-width: 480px) {
  .menu { height: calc(100vh - 64px); overflow-y: auto;}
}

.advantage-items:hover img { transform: rotateY(180deg);}

.strategy-bg .mask-image {
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
  -webkit-mask-image: url('../img/logo-svg.svg');
  mask-image: url('../img/logo-svg.svg');
}

/* 2025-11-11 - SVG animate */
@keyframes fillAnimation {
  0% { opacity: 1; transform: scale(100%); }
  100% { opacity: 0; transform: scale(110%); }
}

.fill-animation {
  animation: fillAnimation 2s infinite;
}

.btn-polygon { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }