@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://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

#color {
color:#212d59;
color:#0E5DA8;
color:#279EFF;
color:#40F8FF;
color:#D5FFD0;}

/* HTML: <div class="loader"></div> */
.loader {
  width: fit-content;
  font-size: 25px;
  font-family: system-ui,sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: #0000;
  -webkit-text-stroke: 1px #000;
  background: conic-gradient(#000 0 0) 0/0% 100% no-repeat text;
  animation: l1 1s linear infinite;
}
.loader:before {
  content: "Loading";
}
@keyframes l1 {
  to{background-size: 120% 100%}
}

/* CSS Document */
html { scroll-behavior: smooth;}
body {font-family: 'Noto Sans TC', sans-serif;}
h1 {font-weight: 900!important;}
.Comfortaa {  font-family: "Comfortaa", sans-serif;}

.fixed-nav { position: fixed!important;top:0; left: 0; width: 100%; z-index: 9999;}
.fixed-bg { display: none;}
.fixed-nav .fixed-bg{display: block;}
.logo img { width: 260px; transition-duration: 85ms;}
.fixed-nav .logo img { width: 150px;}


.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;}

/* -- ARROW 4      -- */

.arrow-4 {
	/* duplicate the triange */
	position: relative;
	height: 0px; width: 0px;
	border: 10px solid;
	border-color: 
		white
		white
		transparent
		transparent;
	transform: rotate(45deg); 
}

.arrow-4:before, .arrow-4:after {
	content: '';
	display: block;
	position: absolute;
	height: 0; width: 0;
	border: 6px solid;	
}

.arrow-4:before {
	border-color:
		white
		transparent
		transparent
		white;
	display: block;
	top: -1px; right: 0px;
	transform-origin: top right;
	transform: rotate(45deg); 
}

.arrow-4:after {
	border-color:
		transparent
		white
		white
		transparent;
	top: 0px; right: -1px;
	transform-origin: top right;
	transform: rotate(-45deg);
}


.service.owl-carousel .owl-dots {display: none;}
.service.owl-theme .owl-nav {position: absolute; top: -70px; right: 20px;}
.service.owl-carousel .owl-nav button.owl-prev,
.service.owl-carousel .owl-nav button.owl-next { background: transparent!important; }
.service.owl-carousel .owl-nav button.owl-prev span,
.service.owl-carousel .owl-nav button.owl-next span { font-size: 4rem; color:#0E5DA8; line-height: 0; padding: 10px;}

/* 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) {
.logo img { width: 180px; transition-duration: 85ms;}
.fixed-nav .logo img { width: 100px;}
}

/*lg*/
@media only screen and (max-width: 1024px) {
.fixed-bg { display: block;}
.logo img { width: 80px; transition-duration: 85ms;}
.fixed-nav .logo img { width: 80px;}
#slider .jarallax-img {margin-top: 30px!important;}
}
    
/*md*/
@media only screen and  (max-width: 768px) {
.logo img { width: 60px; transition-duration: 85ms;}
.fixed-nav .logo img { width: 60px;}
}

/*sm*/
@media only screen and  (max-width: 480px) {
.service.owl-theme .owl-nav {position: absolute; top: -45px; right: 20px;}
.service.owl-carousel .owl-nav button.owl-prev span,
.service.owl-carousel .owl-nav button.owl-next span { font-size: 3rem; color:#0E5DA8; line-height: 0; padding: 10px;}
  }