/*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");

/* CSS Document */
html, body { position: relative; height: 100%; font-family: 'Noto Sans TC', sans-serif; margin: 0; padding: 0;}
html { scroll-behavior: smooth;}
h1 {font-weight: 900!important;}
.logo img { width: 250px; height: auto; max-width: none; margin: 5px;}

/* HTML: */
.loader {
  width: 120px;
  height: 60px;
  border-radius: 200px 200px 0 0;
  -webkit-mask: repeating-radial-gradient(farthest-side at bottom ,#0000 0,#000 1px 12%,#0000 calc(12% + 1px) 20%);
  background:
   radial-gradient(farthest-side at bottom,#514b82 0 95%,#0000 0) bottom/0% 0% no-repeat
   #ddd;
  animation: l10 2s infinite steps(6);
}
@keyframes l10 {
    100% {background-size:120% 120%}
}
.ellipsis{ overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; height: 15px; 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; height: 25px; 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; height: 40px; overflow: hidden;}
.text-vertical {-webkit-writing-mode: vertical-lr ; writing-mode: vertical-lr}
.silder-img .owl-dots { position: absolute; width:100%; bottom:0; left:0;}

#section-A{ background: url('../img/about-01.jpg'); background-size: cover; background-repeat: no-repeat;}
#section-B{ background: url('../img/about-02.jpg'); background-size: cover; background-repeat: no-repeat;}
#section-C{ background: url('../img/about-03.jpg'); background-size: cover; background-repeat: no-repeat;}
#section-D{ background: url('../img/about-04.jpg'); background-size: cover; background-repeat: no-repeat;}
/*md*/
@media only screen and  (max-width: 768px) {
#section-A{ background: url('../img/about-01mb.jpg'); background-size: cover; background-repeat: no-repeat;}
#section-B{ background: url('../img/about-02mb.jpg'); background-size: cover; background-repeat: no-repeat;}
#section-C{ background: url('../img/about-03mb.jpg'); background-size: cover; background-repeat: no-repeat;}
#section-D{ background: url('../img/about-04mb.jpg'); background-size: cover; background-repeat: no-repeat;}
}

.menu li.active { background: #ffce14;}

/* FCK Box */
.fck-box {color:#696969; }
.fck-box p,.fck-box span {line-height: 2;}
.fck-box img { max-width: 100%; height: auto !important; display: inline-block; margin-left: auto; margin-right: auto;  margin-top: 1rem; 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 li, .fck-box p{ margin-bottom: 1rem; }
.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) {

}
    
/*md*/
@media only screen and  (max-width: 768px) {

}

/*sm*/
@media only screen and  (max-width: 480px) {
  .swiper-container-vertical > .swiper-pagination-bullets { right: 5px; }
.logo img { width: 200px; height: auto; max-width:100%;}
  }
  