/**
* Template Name: Dewi - v4.7.0
* Template URL: https://bootstrapmade.com/dewi-free-multi-purpose-html-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
#s33{
	width:31%;
	padding:1%;
	float:left;
}
#s33 img{
	width:100%;
}
#p{}
#m{display:none;}
.map-img{
	
	width:100%;
}
#co-s{
width:1320px;margin-left:auto;margin-right:auto;
padding-top:20px;
}


@media screen and (max-width: 1400px) {
#co-s{
width:100%;margin-left:auto;margin-right:auto;
padding-top:30px;padding-left:3.5%;padding-right:3.5%;padding-bottom:0px;

}
}
@media screen and (max-width: 1200px) 
{
	#co-s{
width:100margin-left:0%;margin-right:0%;
padding-top:30px;
}
	
}
@media screen and (max-width: 992px) {
	#s33{
	width:98%;
	clear:both;
	margin-left:auto;
	margin-right:auto;
}

	#co-s{
padding-top:30px;}

.hd-accesskey{
		display:none;
	}
	
	#p{display:none;}
#m{display: flex;}

}

nav a:hover,
nav a:focus,
nav a:focus-visible{
	font-weight: 600;
}
.th {
    background-color: #02718d;color: #fff;font-weight: bold;
}
.video-container {
    width: 100%;           /* 寬度填滿父元素 */
         /* (可選) 限制最大寬度，避免在大螢幕上太巨大 */
    margin: 0 auto;        /* 居中 */
}

.video-container video {
    width: 100%;           /* 影片寬度 100% */
    height: auto;          /* 高度自動，維持比例 */
    aspect-ratio: 16 / 9;  /* 強制設定為 16:9 比例 (現代瀏覽器支援) */
    display: block;
    background: #000;      /* 載入前的背景色 */
}
/* 鍵盤 focus 明顯 */
.transport-tags-detail{margin:10px 0 14px;display:flex;flex-wrap:wrap;gap:8px;}
.transport-tag-detail{display:inline-block;padding:5px 5px;border-radius:10px;background:#ffffff;border:1px solid #ffffff;color:#02718d;text-decoration:none;font-size:0.8em;}

.transport-tag-detail:hover,
.transport-tag-detail:focus,
.transport-tag-detail:focus-visible{background:#17696b;color:#fff;border:1px solid #479799;}
.transport-tags{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;}
.transport-tag{
	display:inline-block;
	padding:3px 6px;
	border-radius:5px;
	background:#efefef;
	color:#158aad;
	font-size:0.8em;
	line-height:1.6;
	cursor:pointer;
	border:1px solid #dedede;
	text-decoration:none;}
	

.transport-tag:hover,
.transport-tag:focus,
.transport-tag:focus-visible
{background:#158aad;color:#ffffff;}


#cardCarousel {
    position: relative;
}

#selected-tag-bar{margin:0 0 18px;padding:14px 16px;background:#f7fbff;border:1px solid #d7e8fb;border-radius:14px;}
.selected-tag-title{font-size:1em;font-weight:700;color:#2457a6;margin-bottom:8px;}
.selected-tag-list{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.selected-tag-item{display:inline-block;padding:5px 12px;border-radius:999px;background:#eef5ff;border:1px solid #cddffb;color:#1a5fb4;font-size:1em;}
.selected-tag-clear{margin-left:6px;color:#b42318;text-decoration:none;font-size:1em;}
.selected-tag-clear:hover{text-decoration:underline;}

#cardCarousel .custom-arrow{
    width:50px;
    height:50px;
    background:#000;
    border-radius:50%;
    top:50%;
    transform:translateY(-50%);
    opacity:0.8;
}

#cardCarousel .carousel-control-prev{
    left:-25px;
}

#cardCarousel .carousel-control-next{
    right:-25px;
}
#selected-tag-bar{margin:0 10px 18px;padding:14px 16px;background:#efefef;border:1px solid #efefef;border-radius:10px;width:95%;}
.selected-tag-title{font-size:1em;font-weight:500;color:#158aad;margin-bottom:8px;}
.selected-tag-list{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.selected-tag-item{display:inline-block;padding:5px 12px;border-radius:999px;background:#158aad;border:1px solid #ffffff;color:#ffffff;font-size:0.9em;}
.selected-tag-clear{margin-left:6px;color:#08873e;text-decoration:none;font-size:0.9em;}
.selected-tag-clear:hover{text-decoration:underline;}
#none{
	display:none;
}
#cardCarousel .custom-arrow{
    width:48px;
    height:48px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
    top:50%;
    transform:translateY(-50%);
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
    filter: invert(1);
}
#app-title{
	border-radius: 20px;
	background-color: #02718d;
	padding-left:0.8em;
	padding-right:0.8em;
	padding-top:0.5em;
	padding-bottom:0.5em;
	color:#ffffff;
	margin-top:0.6em;
	width:auto;
}
.form-control:focus,
button:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* 錯誤訊息 */
.error-message {
  color: #d93025;
  font-size: 1.1em;
  margin-top: 5px;
}

/* label 間距 */
.form-label {
  font-weight: 600;
  margin-bottom: 5px;
  display: inline-block;
}
/* 基本表格樣式 */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5em;
  font-size: 1em;
}

.responsive-table th,
.responsive-table td {
  border: 1px solid #ddd;
  padding: 0.75em 1em;
  text-align: left;
}

.responsive-table th {
  background-color: #02718d;
  color: #fff;
  font-weight: bold;
}

.responsive-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.responsive-table tr:hover {
  background-color: #e0f0f5;
}

/* 小螢幕 RWD：卡片式表格 */
@media(max-width: 768px) {
  .responsive-table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr {
    display: block;
  }
    .hd-accesskey{
	  color:#fff;font-size:1px;
  }

  .responsive-table thead tr {
    display: none; /* 隱藏表頭 */
  }

  .responsive-table tr {
    margin-bottom: 1em;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.5em;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }

  .responsive-table td {
    border: none;
    padding: 0.5em 0;
    position: relative;
    padding-left: 10%;
  }

  .responsive-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 1em;
    font-weight: bold;
    white-space: nowrap;
  }
}


#year{
	padding:0.5em;
	font-size:1em;
	color:#ffffff;
	background-color:#02718d;
	border-radius: 20px;
	width:20%;
	float:left;
	both:clear;
	text-align:center;
	margin-right:70%;
	margin-left:1em;
	margin-top:1em;
}
@media screen and (max-width: 1400px) {
	
	
	
		#app-title{
	border-radius: 20px;
	background-color: #02718d;
	padding-left:0.8em;
	padding-right:0.8em;
	padding-top:0.5em;
	padding-bottom:0.5em;
	color:#ffffff;
	margin-top:1em;
		margin-bottom:1em;
}
	
	
#year{
	padding:0.5em;
	font-size:1em;
	color:#ffffff;
	background-color:#02718d;
	border-radius: 20px;
	width:30%;
	float:left;
	both:clear;
	text-align:center;
	margin-right:60%;
	margin-left:1em;
	margin-top:1em;
}
	}

#list-up{
	width:73%;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
	padding-top:0.5em;
	padding-bottom:0.5em;
	float:left;font-size:1.2em;
	
}
#list-up h3{
	color:#ffffff;
	padding-bottom:0px;
	font-size:1.6em;
	text-align:left;
}
#a30{width:32%;margin-left:0.5%;margin-right:0.5%;float:left;}
@media screen and (max-width: 1200px) {
	
	
	#a30{width:100%;margin-bottom:1em;}
	
	
	#list-up h3{
	color:#ffffff;
	padding-bottom:0px;
	font-size:1.2em;
	line-height:1.4em;
	text-align:left;
}
	
}
@media(max-width: 768px) {
	#list-up h3{
	color:#ffffff;
	padding-bottom:0px;
	font-size:1.2em;
	text-align:left;
}
	
}

.list-up-title{
	color:#e6eda0;
	
}
#fea-left{
	width:48%;
	float:left;
	margin-left:2%;	border-right-width: 1px;
	border-right-style: dashed;
	border-right-color: #CCC;
}


#fea-text{
font-size:1.1em;
text-align:left;
color:#fff;
line-height: 2em;

padding-top:0.8em;
padding-bottom:0.8em;
}
#fea-text1{
padding-top:1em;
padding-bottom:1em;
padding-left:2em;
padding-right:2em;
width:95%;
background-color:#80b0b4;
margin-bottom:1em;border-radius: 10px;box-sizing: border-box;overflow-x: hidden;
}
#fea-right{
	width:48%;
	float:left;
	margin-left:2%;}

#fea-title{
 font-size:1.5em;
 padding-bottom:1em;
}

.card-img-top{
width: 100%;
    height: 300px; /* 你要的固定高度 */
    object-fit: cover; /* 重點 */
    object-position: center; /* 顯示中間 */}
#news-co0{
padding-top:1em;
padding-bottom:1em;
font-size:1.1em;
line-height:2em;}
#co2{
width:80%;
margin-left:auto;
margin-right:auto;
both:clear;
padding-bottom:2em;}

.card{margin-bottom:1em;}
#left-30{width:39%;float:left;margin-right:2%;margin-bottom:1em;}
#left-70{width:55%;float:left;margin-left:1%;margin-bottom:1em;margin-top:0.6em;}
.blue{color:#000000;font-weight: 600;}
.cola{
width:25%;
float:left;
color:#ffffff;
font-size:1.2em;	border-right-width: 1px;
	border-right-style: dashed;
	border-right-color: #CCC;padding:1em;

}

@media screen and (max-width: 1490px) {
	
	
	
	.cola{
width:70%;
float:right;
color:#ffffff;
font-size:1.2em;	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;padding:1em;
	border-right-width: 0px;
	border-right-style: dashed;
	border-right-color: #CCC;padding:0.5em;

}



}

@media screen and (max-width: 768px) {
	#fea-left{
	width:95%;
	float:none;
	margin-left:auto;	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
	border-right-width: 0px;
	border-right-style: dashed;
	border-right-color: #CCC;
}
	#fea-right{
	width:95%;
	float:none;
	margin-left:auto;	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
	border-right-width: 0px;
	border-right-style: dashed;
	border-right-color: #CCC;
}
}
.cola1{
width:250px;
height:250px;
background-color:#ffffff;
float:left;
border-radius: 300px;
padding:1em;border: 10px solid #2a7779;
    box-shadow: 0px -6px 13px 0px rgba(0, 0, 0, 0.1);
margin-right:2em;
margin-top:-4em;  display: flex;
  align-items: center;     /* 垂直置中 */
  justify-content: center; /* 水平置中（可選） */
}


.cola2{
width:250px;
height:250px;
background-color:#ffffff;
float:left;
border-radius: 0px;
padding:1em;border: 0px solid #efefef;
    box-shadow: 0px -6px 13px 0px rgba(0, 0, 0, 0);
margin-right:2em;
margin-top:0em;  display: flex;
  align-items: center;     /* 垂直置中 */
  justify-content: center; /* 水平置中（可選） */
}



@media screen and (max-width: 1400px) {
	.cola1{
		width:200px;
		height:200px;
		background-color:#ffffff;
		float:left;
		border-radius: 300px;
		padding:1em;border: 10px solid #2a7779;
		box-shadow: 0px -6px 13px 0px rgba(0, 0, 0, 0.1);
		margin-right:2em;
		margin-top:-5em;  display: flex;
		align-items: center;     /* 垂直置中 */
		justify-content: center; /* 水平置中（可選） */
	}

	#list-up {
		width: 70%;
		border-bottom-width: 1px;
		border-bottom-style: dashed;
		border-bottom-color: #CCC;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		float: right;
		font-size: 1.2em;
	}
}
@media screen and (max-width: 1200px) {
	.cola1{
		width:200px;
		height:200px;
		background-color:#ffffff;
		float:left;
		border-radius: 300px;
		padding:1em;border: 10px solid #2a7779;
		box-shadow: 0px -6px 13px 0px rgba(0, 0, 0, 0.1);
		margin-right:2em;
		margin-top:-4em;  display: flex;
		align-items: center;     /* 垂直置中 */
		justify-content: center; /* 水平置中（可選） */
	}

	#list-up {
		width: 70%;
		border-bottom-width: 1px;
		border-bottom-style: dashed;
		border-bottom-color: #CCC;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		float: right;
		font-size: 1em;
	}
	#news-co0 {
    padding-top: 1em;
    padding-bottom: 3em;
    font-size: 1em;
    line-height: 2em;
}
#news-say {
	 font-size: 0.9em;
    width: 100%;
    text-align: center;
    color: #1a6659; line-height: 1.4em;
}
}




@media screen and (max-width: 992px) {
	
	#app-title{
	border-radius: 20px;
	background-color: #02718d;
	padding-left:0.8em;
	padding-right:0.8em;
	padding-top:0.5em;
	padding-bottom:0.5em;
	color:#ffffff;
	margin-top:1em;
		margin-bottom:1em;
}


	.cola1{
		width:200px;
		height:200px;
		background-color:#ffffff;
		
		border-radius: 300px;
		padding:1em;border: 10px solid #2a7779;
		box-shadow: 0px -6px 13px 0px rgba(0, 0, 0, 0.1);
		margin-right:auto;
		margin-left:auto;
		clear:both;
		float:none;
		margin-top:-5em;  display: flex;
		align-items: center;     /* 垂直置中 */
		justify-content: center; /* 水平置中（可選） */
	}
	#list-up {
        width: 95%;
        border-bottom-width: 1px;
        border-bottom-style: dashed;
        border-bottom-color: #CCC;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        margin-left:auto;
		margin-right:auto;
		clear:both;
        font-size: 1.1em;
		float:none;
    }

}


.photosize{
width: 100%;

    object-fit: cover; /* 重點 */
    object-position: center;
	padding-top:0%;
	border-radius:100px; max-height: 100%;
	
}
.card-title{
font-size:1.2em;line-height: 1.3em;    
height:50px;
display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;color:#000000;
}
#left-70 h3{
font-size:1.7em;
text-align:left;
color:#02718d;
line-height: 1.3em;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
padding-top:0.7em;
padding-bottom:0.4em;
}
@media screen and (max-width: 1400px) {

#left-70 h3{
font-size:1.5em;
text-align:left;
color:#02718d;
line-height: 1.3em;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
padding-top:1em;
padding-bottom:0.5em;
}
	
	
	#left-70 #list{
font-size:1em;
text-align:left;
color:#000000;
line-height: 1.2em;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
padding-top:0.5em;
padding-bottom:0.5em;
}
}


#left-70 #list{
font-size:1.05em;
text-align:left;
color:#000000;

	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
padding-top:0.5em;
padding-bottom:0.5em; line-height:1.6em;
}

#com-ok{
background-color:#efefef;border-radius: 30px;padding-top:1em;padding-bottom:2em;padding-left:2em;padding-right:2em;line-height:1.8em;font-size:1.1em;}
#com-ok #title{
font-size:3em;font-weight: 300;
}

#com-ok2{
background-color:#ffffff;border-radius: 30px;padding-top:1em;padding-bottom:1em;padding-left:2em;padding-right:2em;line-height:1.8em;font-size:1.1em;}
#com-ok2 #title{
font-size:3em;font-weight: 300;line-height:1em;
}
#com-ok2 #title2{
font-size:1.5em;font-weight: 300;text-align:center;width:100%;color:#02718d;font-weight: 600;
}
#com-ok3{
background-color:#02718d;border-radius: 30px;padding-top:1em;padding-bottom:1em;padding-left:2em;padding-right:2em;margin-bottom:2em;}
#com-ok3 #title{
font-size:3em;font-weight: 300;color:#ffffff;
}

#com-ok4{
background-color:#2a7779;border-radius: 10px;padding-top:1em;padding-bottom:1em;padding-left:2em;padding-right:2em;margin-bottom:2em;color:#ffffff;}
#com-ok4 #title2{
font-size:1.1em;color:#ffffff;text-align:left;margin-bottom:0.3em;font-weight:bold;line-height:1.3em;
}
#com-ok5{        margin-left: auto;
        margin-right: auto;
background-color:#80b0b4;border-radius: 10px;padding-top:1em;padding-bottom:1em;padding-left:2em;padding-right:2em;margin-bottom:2em;color:#ffffff;}
#com-ok5 #title2{
font-size:2em;color:#2a7779;text-align:left;margin-bottom:0.3em;font-weight:bold;line-height:1.3em;
}
#com-ok5 #title {
    font-size: 3em;
    font-weight: 300;
    color: #ffffff;
}



#com-ok4 #title{
font-size:3em;font-weight: 300;color:#ffffff;
}
#com-ok4 .col{
color:#ffffff;
font-size:1.2em;	border-right-width: 1px;
	border-right-style: dashed;
	border-right-color: #CCC;padding:1em;
}

#news-photo{
width:100%;
float:left;margin-right:2em;
margin-bottom:2em;


}
#news-photo2{
width:45%;
float:left;margin-right:1.5em;
margin-bottom:2em;


}
@media screen and (max-width: 1400px) {
	#com-ok #title{
		font-size:2.3em;font-weight: 300;
	}

	#com-ok2 #title{
		font-size:2.3em;font-weight: 300;line-height:1em;
	}
	#com-ok3 #title{
		font-size:2.3em;font-weight: 300;color:#ffffff;
	}
	
	#com-ok5 #title {
    font-size: 2.3em;
    font-weight: 300;
    color: #ffffff;
}
#com-ok4 #title{
font-size:2.3em;font-weight: 300;color:#ffffff;
}
}
@media screen and (max-width: 768px) {
	
#news-photo{
width:100%;
float:none;
margin-right:auto;
margin-left:auto;
clear:both;
margin-bottom:2em;


}	
#news-photo2{
width:100%;
float:none;
margin-right:auto;
margin-left:auto;
clear:both;
margin-bottom:2em;


}
	
}
#news-say{
width:100%;
text-align:center;
color:#1a6659;}
.news-photo{
width:100%;

border-radius: 30px;
height:auto;

border: 10px solid #FFF;
 box-shadow: 0px -6px 13px 0px rgba(0, 0, 0, 0.1);

}


.bp{border-radius: 30px;
height:auto;
width:100%;
border: 10px solid #FFF;
 box-shadow: 0px -6px 13px 0px rgba(0, 0, 0, 0.1);
}

.container2 {
    max-width: 1320px;
    margin: auto;
    position: relative;
}


@media screen and (max-width: 1400px) {

.container2{
width:96%;
margin-left:auto;
margin-right:auto;
both:clear;}


#co2{
width:90%;
margin-left:auto;
margin-right:auto;
both:clear;}

}



@media screen and (max-width: 1200px) 
{
	
	.container2{
width:95%;
margin-left:auto;
margin-right:auto;
both:clear;}





	
}

@media screen and (max-width: 1200px) {
#co2{
width:100%;
margin-left:auto;
margin-right:auto;
clear:both;}


}

@media screen and (max-width: 996px) {
	



	#co2{
width:85%;
margin-left:auto;
margin-right:auto;
clear:both;}
}
#lista{
width:100%;
padding-top:0.5em;
border-bottom-width: 1px;
	border-bottom-style: dotted;
padding-top:0.7em;
padding-bottom:0.7em;
}

#icon-left{
width:50px;
height:50px;
text-align: center;
background-color:#02718d;
padding-left:7px;
float:left;display: flex; align-items: center;border-radius: 30px;}

#icon-right{font-size:1.2em;margin-left:1em;height:50px;
float:left;display: flex; align-items: center;}

#font{
font-size:1.1em;
line-height: 2em;
}
/*--------------------------------------------------------------
# post
--------------------------------------------------------------*/

.page-item.active .page-link

{
background-color:#1a6f84;
}
.page-link{
color:#1a6f84;
}
#search-list-s{
	width:100%;
	padding:0.5em;
}
h3{text-align:left;color:#2a7779;font-size:2em;padding-bottom:1em;}
.search-list-s input{padding-right:1em; width:1.2em;}
#post-font{
	color:#4c4c4c;
	line-height:2em;
	font-size:1.3em;
	padding-bottom:1em;
}
#title{
	font-size:1.5em;
	color:#02718d;
	margin-bottom:0em;
	margin-top:0.5em;
	font-weight: 800;text-align:center;
	height:100px;
	
}

#big{
	padding-top:1em;	padding-bottom:1em; text-align:left; font-size:1em;color:#000;letter-spacing: 0.1em;
}
p{
	font-size:1em;
	line-height:1.7em;
	margin-bottom:0em;
}
@media screen and (max-width: 1200px) {
	p{
	font-size:1em;
	line-height:2em;
	margin-bottom:0em;
}
}


@media screen and (max-width: 768px) {
p{
	font-size:1em;
	line-height:2em;
	margin-bottom:2em;
}

}
.digital-img{
	width:100%;
	border-radius: 20px;
	margin-bottom:1.5em;
	
}

thead,th{
	
	color:#ffffff;
	font-size:1.1em;
	padding:1em;
	text-align:center;
}



td{
	padding:1em;
	font-size:1.1em;
	 border-bottom: 1px solid #ccc; /* 灰色底線 */
}

table{
	margin-bottom:2em;
}

@media screen and (max-width: 1400px) {
	thead,th{
		
		color:#ffffff;
		font-size:1em;
		padding:0.5em;
		text-align:center;
	}
}



@media screen and (max-width: 1400px) {


td{
	padding:0.7em;
	font-size:1.1em;
	 border-bottom: 1px solid #ccc; /* 灰色底線 */
}

}


#cost{
	
	width:48%;
	margin-left:1%;
	margin-right:1%;
	float:left;
}

@media screen and (max-width: 1200px) {
	
	#cost{
	
	width:95%;
	margin-left:2.5%;
	margin-right:2.5%;
	both:clear;
}

	
	
}
/*--------------------------------------------------------------
# smart start
--------------------------------------------------------------*/


/* checkbox 容器 */
.search-list-s{
    display:block;
    margin-bottom:10px;
    position:relative;
	
}




/* 隱藏原始checkbox (保留螢幕閱讀器可讀) */
.search-list-s input[type="checkbox"]{
    position:absolute;
    opacity:0;
    width:1px;
    height:1px;
}

/* label 外觀 */
.search-list-s label{
    display:block;
    padding:14px 18px;
    border:1px solid #ffffff;
    border-radius:8px;
    background:#ffffff;
    cursor:pointer;
    font-size:1.2em;
    transition:all .2s;
    position:relative;
 box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.15);
}

/* hover */
.search-list-s label:hover{
    border-color:#1b7f8e;
    background:#eef8fa;
    color:#1b7f8e;
}

@media screen and (max-width: 1200px) {
	
	/* label 外觀 */
.search-list-s label{
    display:block;
    padding:14px 18px;
    border:1px solid #ffffff;
    border-radius:8px;
    background:#ffffff;
    cursor:pointer;
    font-size:1em;
    transition:all .2s;
    position:relative;
 box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.15);
}

/* hover */
.search-list-s label:hover{
    border-color:#1b7f8e;
    background:#eef8fa;
    color:#1b7f8e;
}
	
}
/* 勾選 */
.search-list-s input[type="checkbox"]:checked + label{
    background:#1b7f8e;
    border-color:#1b7f8e;
    color:#ffffff;
}

/* 勾勾 icon */
.search-list-s label:after{
    content:"✓";
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    font-size:1.2em;
    opacity:0;
}

.search-list-s input[type="checkbox"]:checked + label:after{
    opacity:1;
}

/* 鍵盤 focus */
.search-list-s input[type="checkbox"]:focus + label{
    outline:3px solid #ffbf47;
    outline-offset:2px;
}


.container2{
max-width:1320px;
margin:auto;
position:relative;
}

#cardCarousel{
position:relative;
}

/* 左右箭頭 */
.carousel-control-prev-icon{
	background-image:images/next.svg}

#cardCarousel .custom-arrow{
width:48px;
height:48px;
background:#fff;
border-radius:50%;
box-shadow:0 4px 12px rgba(0,0,0,0.2);
top:50%;
transform:translateY(-50%);
position:absolute;
z-index:5;
border:0;
}

.carousel-control-prev{
left:0px;
}

.carousel-control-next{
right:0px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
filter: invert(1);
}

/* 卡片 */

.card{
border:none;
border-radius:12px;
overflow:hidden;
transition:.3s;
}

.card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}
.card:focus{
	border:2px;
}
.card-img-top{
width: 100%;
    height: 250px; /* 你要的固定高度 */
    object-fit: cover; /* 重點 */
    object-position: center; /* 顯示中間 */
}

.card-title{
font-size:1.3em;
font-weight:600;
}

.card-title a{
text-decoration:none;
color:#222;
}

.card-title a:focus{
outline:3px solid #005fcc;
}

.card-text{
font-size:1.1em;
color:#555;
line-height:1.6;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}


@media screen and (max-width: 1200px) {
	
	
	.card-title{
font-size:1.2em;
font-weight:600;
line-height:1.3;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

	.card-text{
font-size:0.95em;
color:#555;
line-height:1.5;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
}
	

/* focus */

.carousel-control-prev:focus,
.carousel-control-next:focus{
outline:3px solid #ffffff;
}

/* 播放控制 */

.carousel-control-box{
text-align:right;
margin-bottom:10px;
}

.featured-cases-home .carousel-item .col-lg-4 > a,
.featured-case-list__link{
	display:block;
	width:100%;
	height:100%;
	text-decoration:none;
	color:inherit;
}

.featured-cases-home .featured-case-card,
.featured-case-list .featured-case-card{
	display:flex;
	flex-direction:column;
	width:100%;
	height:100%;
	border:1px solid rgba(24,78,73,0.06);
	border-radius:10px;
	overflow:hidden;
	box-shadow:0 12px 26px rgba(18,56,52,0.08);
	background:#ffffff;
	transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}

.featured-cases-home .carousel-item .col-lg-4 > a:hover .featured-case-card,
.featured-cases-home .carousel-item .col-lg-4 > a:focus .featured-case-card,
.featured-cases-home .carousel-item .col-lg-4 > a:focus-visible .featured-case-card,
.featured-case-list__link:hover .featured-case-card,
.featured-case-list__link:focus .featured-case-card,
.featured-case-list__link:focus-visible .featured-case-card{
	transform:translateY(-14px);
	box-shadow:0 28px 48px rgba(18,56,52,0.24);
	border-color:rgba(24,78,73,0.18);
}

.featured-cases-home .featured-case-card__image,
.featured-case-list .featured-case-card__image{
	width:100%;
	height:252px;
	object-fit:cover;
	object-position:center;
	flex-shrink:0;
	transition:transform .26s ease, filter .26s ease;
}

.featured-cases-home .carousel-item .col-lg-4 > a:hover .featured-case-card__image,
.featured-cases-home .carousel-item .col-lg-4 > a:focus .featured-case-card__image,
.featured-cases-home .carousel-item .col-lg-4 > a:focus-visible .featured-case-card__image,
.featured-case-list__link:hover .featured-case-card__image,
.featured-case-list__link:focus .featured-case-card__image,
.featured-case-list__link:focus-visible .featured-case-card__image{
	transform:scale(1.08);
	filter:brightness(1.08) saturate(1.05);
}

.featured-case-card__body{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	padding:1rem 1rem 1.08rem;
	min-height:182px;
	gap:0.55rem;
}

.featured-case-card__body #date{
	display:flex;
	align-items:center;
	gap:0.4rem;
	min-height:2.5em;
	margin:0;
	font-size:0.92rem;
	line-height:1.35;
	color:#6a7a80;
}

.featured-case-card__body #date img{
	width:20px;
	height:20px !important;
	flex:0 0 20px;
}

.featured-cases-home .featured-case-card__title,
.featured-case-list .featured-case-card__title{
	margin:0;
	font-size:1.18rem;
	line-height:1.38;
	font-weight:700;
	color:#18353a;
	display:-webkit-box !important;
	-webkit-line-clamp:2;
	line-clamp:2;
	-webkit-box-orient:vertical !important;
	overflow:hidden;
	height:2.76em;
	min-height:2.76em;
	max-height:2.76em;
	transition:color .26s ease;
}

.featured-cases-home .carousel-item .col-lg-4 > a:hover .featured-case-card__title,
.featured-cases-home .carousel-item .col-lg-4 > a:focus .featured-case-card__title,
.featured-cases-home .carousel-item .col-lg-4 > a:focus-visible .featured-case-card__title,
.featured-case-list__link:hover .featured-case-card__title,
.featured-case-list__link:focus .featured-case-card__title,
.featured-case-list__link:focus-visible .featured-case-card__title{
	color:#0f6d66;
}

.featured-cases-home .featured-case-card__text,
.featured-case-list .featured-case-card__text{
	margin:0;
	font-size:0.96rem;
	line-height:1.65;
	color:#5f7077;
	display:-webkit-box !important;
	-webkit-line-clamp:3;
	line-clamp:3;
	-webkit-box-orient:vertical !important;
	overflow:hidden;
	height:4.95em;
	min-height:4.95em;
	max-height:4.95em;
	transition:color .26s ease;
}

.featured-cases-home .carousel-item .col-lg-4 > a:hover .featured-case-card__text,
.featured-cases-home .carousel-item .col-lg-4 > a:focus .featured-case-card__text,
.featured-cases-home .carousel-item .col-lg-4 > a:focus-visible .featured-case-card__text,
.featured-case-list__link:hover .featured-case-card__text,
.featured-case-list__link:focus .featured-case-card__text,
.featured-case-list__link:focus-visible .featured-case-card__text{
	color:#43555c;
}

@media screen and (max-width: 1200px) {
	.featured-case-card__image{
		height:232px;
	}
	.featured-case-card__body{
		padding:0.95rem 0.95rem 1rem;
		min-height:172px;
	}
	.featured-case-card__title{
		font-size:1.08rem;
		height:2.76em;
		min-height:2.76em;
		max-height:2.76em;
	}
	.featured-case-card__text{
		font-size:0.92rem;
	}
}

@media screen and (max-width: 992px) {
	.featured-cases-home .carousel-item .row{
		row-gap:1rem;
	}
	.featured-case-card__image{
		height:214px;
	}
	.featured-case-card__body{
		min-height:164px;
	}
}

@media screen and (max-width: 576px) {
	.featured-case-card__image{
		height:198px;
	}
	.featured-case-card__body{
		padding:0.9rem 0.9rem 0.95rem;
		min-height:154px;
	}
	.featured-case-card__title{
		font-size:1rem;
		height:2.76em;
		min-height:2.76em;
		max-height:2.76em;
	}
	.featured-case-card__text{
		font-size:0.9rem;
		height:4.95em;
		min-height:4.95em;
		max-height:4.95em;
	}
	.featured-case-card__body #date{
		font-size:0.86rem;
	}
}

#carouselToggle1{
border:0px solid #ccc;
background:#212626;
padding:6px 14px;
border-radius:6px;
cursor:pointer;
color:#ffffff;
display:inline-block;
text-decoration:none;
}
#carouselToggle1:hover,
#carouselToggle1:focus,
#carouselToggle1:focus-visible{
outline:1px solid #2a7779;
background-color:#2a7779;
}

@media screen and (max-width: 1200px) {
	
#carouselToggle1{
border:0px solid #ccc;
background:#212626;
padding:6px 14px;
border-radius:6px;
cursor:pointer;
color:#ffffff;
display:inline-block;
text-decoration:none;
font-size:0.9em;
}	
}

/* 指示器 */

.carousel-indicators [data-bs-target]{
background-color:#fff;
}
#h2{
	font-size: 2em;
	color:#000000;
	float:left;
	font-weight:600;
	padding-bottom:1em;
}
#h3{
	font-size: 2em;
	color:#000000;
	float:left;
	font-weight:600;
	padding-bottom:0em;
}
#h2-2{
	font-size: 1em;
	color:#000000;
	float:left;
	font-weight:600;
	padding-bottom:1em;
}
#h2-1{
	font-size: 3em;
	color:#000000;
	padding-top:1em;
	width:100%;
	text-align:center;
	padding-bottom:1em;
}
@media screen and (max-width: 768px) 
{

#h2{
	font-size: 2em;
	color:#000000;
	float:left;
	padding-bottom:1em;
}
}

#search-co{
width:98%;
margin-left:auto;
margin-right:auto;
clear:both;
}

#search-b3{
width:100%;
margin-left:auto;
margin-right:auto;
clear:both;
background-color:#2f9a94;
margin-bottom:1em;
padding:1em;border-radius: 10px;
color:#ffffff;}
@media screen and (max-width: 1200px) 
{
	
#search-b3{
width:95%;
margin-left:auto;
margin-right:auto;
clear:both;
background-color:#2f9a94;
margin-bottom:1em;
padding:1em;border-radius: 10px;
color:#ffffff;}
}



#search-b3 label{
display:block;
font-weight:700;
margin-bottom:0.45rem;
}

.search1{
width:100%;
min-height:48px;
padding:0.75em 0.9em;
border:1px solid rgba(255,255,255,0.9);
border-radius:8px;
margin-bottom:0.9em;
background:#ffffff;
color:#163b3d;
box-shadow:0 1px 2px rgba(0,0,0,0.08);
}
.search1::placeholder{
color:#6f7d86;
opacity:1;
}
.search1:focus,
.search1:focus-visible{
outline:3px solid rgba(255,255,255,0.38);
outline-offset:2px;
border-color:#ffffff;
box-shadow:0 0 0 3px rgba(16,88,94,0.22);
}
.search-action-button{
width:100%;
position:relative;
display:flex;
align-items:center;
justify-content:flex-start;
gap:0.9rem;
min-height:60px;
padding:0.95rem 1rem;
text-align:left;
color:#ffffff;
font:inherit;
font-weight:700;
background:linear-gradient(180deg,#1f7f89 0%,#165f68 100%);
border:1px solid rgba(255,255,255,0.35);
border-radius:10px;
box-shadow:0 8px 18px rgba(0,0,0,0.18);
cursor:pointer;
transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.search-action-text{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:0.18rem;
min-width:0;
width:100%;
}
.search-action-button:hover{
background:linear-gradient(180deg,#238b95 0%,#1a6972 100%);
box-shadow:0 10px 22px rgba(0,0,0,0.2);
}
.search-action-button:active{
transform:translateY(1px);
box-shadow:0 5px 12px rgba(0,0,0,0.18);
}
.search-action-button:focus,
.search-action-button:focus-visible{
outline:3px solid rgba(255,255,255,0.55);
outline-offset:2px;
box-shadow:0 0 0 3px rgba(16,88,94,0.22), 0 10px 22px rgba(0,0,0,0.2);
}
.search-action-main{
display:block;
line-height:1.35;
}
.search-action-sub{
display:block;
font-size:0.88rem;
font-weight:600;
color:rgba(255,255,255,0.86);
}
/*--------------------------------------------------------------
# smart over
--------------------------------------------------------------*/

#date{
	padding-bottom:1em;
}
#date img{
	margin-right: 0.5em;
}

@media screen and (max-width: 1200px) {
	
	#date{
	padding-bottom:0.7em;
}
#date img{
	margin-right: 0.5em;
}

}
/*--------------------------------------------------------------
# smart 小框開始
--------------------------------------------------------------*/
#o2{
width:49%;
padding-top:1.5em;
padding-bottom:1.5em;
padding-left:1.5em;
padding-right:1.5em;
float:left;
border: 1px solid #dfdfdf;
margin-left:1%; box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.15);
border-radius: 10px;
height:330px;
margin-bottom:1em;

}

#o2:hover{
	transform:translateY(-5px);
	box-shadow:0 18px 32px rgba(18,56,52,0.12);
	border-color:rgba(24,78,73,0.25);
}
#o2:focus,
#o2:focus-visible{
	outline:3px solid rgba(9,105,92,0.25);
	outline-offset:3px;
}
@media screen and (max-width: 1200px) {
#o2{
width:49%;
padding-top:1.5em;
padding-bottom:1.5em;
padding-left:1.5em;
padding-right:1.5em;
float:left;
border: 1px solid #dfdfdf;
margin-left:1%; box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.15);
border-radius: 10px;
height:330px;
margin-bottom:1em;

}	
}
#co00{
text-align:center;}
.smart-img{
width:60%;
margin-left:auto;
margin-right:auto;
clear:both;

}
.ellipsis{
font-size:1.4em;
text-align:left;
line-height:1.4em;
color:#242427;
font-weight: 600;display: -webkit-box;        /* Flex 盒子模式 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    -webkit-line-clamp: 2;       /* 顯示 2 行 */
    overflow: hidden;             /* 超出隱藏 */
    text-overflow: ellipsis;      /* 超出用省略號 */}
	
	.ellipsis:hover
	.ellipsis:focus,
	.ellipsis:focus-visible{
		
		color:#7d6b52;
	}

.ellipsis2{
margin-top:1em;
margin-bottom:1em;
font-size:1em;
line-height:1.7em;
text-align:left;
color:#000000;
display: -webkit-box;        /* Flex 盒子模式 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    -webkit-line-clamp: 3;       /* 顯示 2 行 */
    overflow: hidden;             /* 超出隱藏 */
    text-overflow: ellipsis;      /* 超出用省略號 */}
/*--------------------------------------------------------------
# smart 小框結束
--------------------------------------------------------------*/

/* 分頁區塊居中 */
#page-total {
    text-align: center;
    margin: 30px 0;
    font-size: 1em;
}

@media screen and (max-width: 1400px) {
	#page-total {
    text-align: center;
    margin-top: 30px;
    font-size: 1em;
}
	
}
/* 分頁按鈕樣式 */
#page-total span {
    display: inline-block;
    margin: 0 5px;
}

#page-total a {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    background-color: #fff;
    color: #1b7f8e;
    text-decoration: none;
    transition: all 0.2s;
}

#page-total a:hover {
    background-color: #1b7f8e;
    color: #fff;
    border-color: #1b7f8e;
}

/* 當前頁樣式 */
#page-total a.y {
    background-color: #1b7f8e;
    color: #fff;
    border-color: #1b7f8e;
    pointer-events: none; /* 不能點擊 */
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
h1{
float:left;margin-right:1em;}
body {
  font-family: "Open Sans", sans-serif;
  color: #444444;
}

a {
	color: #2a7779;
	text-decoration: none;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

a:hover,
a:focus,
a:focus-visible {
  color: #7d6b52;
  text-decoration: none;

  
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", sans-serif;
}
#co{
width:1300px;margin-left:auto;margin-right:auto;
padding-top:20px;
}
#co-2026{
width:100%;margin-left:auto;margin-right:auto;
padding-top:0px; background-color:#e5e5e5;
padding-bottom:10px;padding-left:3%;padding-right:3%;
}

@media screen and (max-width: 1400px) {
#co-2026{
width:100%;margin-left:auto;margin-right:auto;
padding-top:20px; background-color:#e5e5e5;
padding-left:3%;padding-right:3%;padding-bottom:10px;
}


}

@media screen and (max-width: 576px) {
#co-2026{
width:100%;margin-left:auto;margin-right:auto;
padding-top:0px; background-color:#e5e5e5;
padding-left:1%;padding-right:1%;padding-bottom:10px;
}


}


#co3{
width:80%;margin-left:auto;margin-right:auto;
padding-top:0px;padding-bottom:2em;
}
#co4{
width:80%;margin-left:auto;margin-right:auto;
padding-top:1em;
}
@media screen and (max-width: 1400px) {
#co{
width:100%;margin-left:auto;margin-right:auto;
padding-top:30px;padding-left:1%;padding-right:1%;
padding-top:30px;padding-left:1%;padding-right:1%;
}
#co3{
width:90%;margin-left:auto;margin-right:auto;
padding-top:0px;padding-bottom:2em;
}
#co4{
width:90%;margin-left:auto;margin-right:auto;
padding-top:1em;
}

}


@media screen and (max-width: 1200px) 
{
	#co{
width:98%;margin-left:1%;margin-right:1%;
padding-top:0px;
}
	
}


#bg-all{
	background-color:#efefef;
	padding:2em 4%;
	margin-top:0em;
}

#bg-all2{
background-color:#efefef;padding-top:2em;padding-left:2em;padding-right:2em;padding-bottom:1em;}
#bg-all3{
background-color:#98a675;padding:0.5em;padding-bottom:3em;}
#bg-all4{
background-color:#ffffff;padding:0em;padding-bottom:3em;}
#bg-all5{
	background:linear-gradient(180deg,#f7faf8 0%,#ffffff 100%);
	padding-top:3.2em;
	padding-bottom:1em;
	border-top:1px solid rgba(27,61,56,0.08);
	border-bottom:1px solid rgba(27,61,56,0.08);
	    padding-left: 4%;
    padding-right: 4%;
}


@media screen and (max-width: 576px) {
	#bg-all{
	background-color:#efefef;
	padding:2em 1.3em;
	margin-top:0em;
}

}
.container2.smart-solutions-home,
.container2.featured-cases-home{
	width:100%;
	max-width:1300px;
	padding-left:0;
	padding-right:0;
	box-sizing:border-box;
}
.smart-solutions-home{
	position:relative;
}
.smart-solutions-home__header{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:1.5rem;
	margin-bottom:1.8rem;
}
.smart-solutions-home__headline{
	max-width:760px;
}
.smart-solutions-home__lead{
	margin:0.65rem 0 0;
	font-size:1.05rem;
	line-height:1.8;
	color:#51646a;
	clear:both;
}
.smart-solutions-home__actions{
	margin-bottom:0;
	flex-shrink:0;
}
.smart-solutions-home__grid{
	box-sizing:border-box;
}
.smart-solutions-directory .smart-solutions-home__grid{
	justify-content:flex-start;
}
.smart-solution-tile{
	display:block;
	width:100%;
	height:100%;
	text-decoration:none;
	color:inherit;
}
.smart-solution-tile:focus,
.smart-solution-tile:focus-visible{
	outline:3px solid rgba(9,105,92,0.25);
	outline-offset:3px;
	border-radius:16px;
}
.smart-solution-card{
	display:flex;
	flex-direction:column;
	width:100%;
	height:100%;
	border:1px solid rgba(24,78,73,0.06);
	border-radius:10px;
	overflow:hidden;
	box-shadow:0 12px 26px rgba(18,56,52,0.08);
	background:#ffffff;
	transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.smart-solution-tile:hover .smart-solution-card,
.smart-solution-tile:focus .smart-solution-card,
.smart-solution-tile:focus-visible .smart-solution-card{
	transform:translateY(-14px);
	box-shadow:0 28px 48px rgba(18,56,52,0.24);
	border-color:rgba(24,78,73,0.18);
}
.smart-solutions-home .smart-solution-card__image{
	width:100%;
	height:252px;
	object-fit:cover;
	object-position:center;
	flex-shrink:0;
	background-color:#e8f0ed;
	transition:transform .26s ease, filter .26s ease;
}
.smart-solution-tile:hover .smart-solution-card__image,
.smart-solution-tile:focus .smart-solution-card__image,
.smart-solution-tile:focus-visible .smart-solution-card__image{
	transform:scale(1.08);
	filter:brightness(1.08) saturate(1.05);
}
.smart-solutions-home .smart-solution-card__body{
	display:flex;
	flex-direction:column;
	min-height:92px;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:1rem 1rem 1.08rem;
}
.smart-solutions-home .smart-solution-card__title{
	margin:0;
	font-size:1.18rem;
	line-height:1.38;
	font-weight:700;
	color:#18353a;
	display:-webkit-box !important;
	-webkit-box-orient:vertical !important;
	-webkit-line-clamp:2;
	line-clamp:2;
	overflow:hidden;
	text-align:center;
	min-height:auto;
	height:auto;
	transition:color .26s ease;
}
.smart-solution-tile:hover .smart-solution-card__title,
.smart-solution-tile:focus .smart-solution-card__title,
.smart-solution-tile:focus-visible .smart-solution-card__title{
	color:#0f6d66;
}
@media screen and (max-width: 1200px) {
	#bg-all5{
		padding:1em 0.8em;
	}
	.smart-solutions-home__grid{
		padding:0 0.5%;
	}
	.smart-solution-tile{
		width:24%;
		height:170px;
	}
}
@media screen and (max-width: 992px) {
	.smart-solutions-home__grid{
		padding:0;
		justify-content:flex-start;
		gap:0.85rem 1.25%;
	}
	.smart-solution-tile{
		width:calc((100% - 1.25%) / 2);
		margin:0;
	}
}
@media screen and (max-width: 768px) {
	#bg-all5{
		padding:2.2em 1em;
	}
	.smart-solutions-home__header{
		flex-direction:column;
		align-items:flex-start;
		margin-bottom:1.4rem;
		padding-left: 1em;
        padding-right: 1em;
	}
	.smart-solutions-home__lead{
		font-size:1rem;
		line-height:1.7;
	}
	.smart-solution-tile{
		width:calc((100% - 1.25%) / 2);
		height:190px;
		margin:0;
		padding:2rem 3rem;
		border-radius:20px;
	}
	.smart-solution-tile__icon{
		width:64px;
		height:64px;
		border-radius:18px;
	}
	.smart-solution-tile__icon img{
		max-width:44px;
		max-height:44px;
	}
	.smart-solution-tile__title{
		font-size:1.05rem;
	}
}
@media screen and (max-width: 576px) {
	.smart-solutions-home__grid{
		padding:0;
	}
	.smart-solution-tile{
		width:100%;
		height:150px;
		min-height:150px;
		margin:0 2% 0rem;
		padding-left:2rem;
		border-radius:10px;
	}
	.smart-solution-tile__icon{
		width:58px;
		height:58px;
		margin-bottom:0.85rem;
	}
	.smart-solution-tile__icon img{
		max-width:40px;
		max-height:40px;
	}
	.smart-solution-tile__title{
		font-size:1.3rem;
		line-height:1.3;
		margin-bottom:0rem;
	}
	.smart-solution-tile__meta{
		font-size:0.88rem;
		line-height:1.45;
		padding-top:0.8rem;
	}
	#card-4{
		width:90%;
		margin-left:5%;
		margin-right:5%;
		margin-bottom:0.85rem;
		height:190px;
		clear:both;
	}
}
/* Smart Solutions cards now reuse the Featured Cases card pattern: image above, title below. */
.smart-solutions-home .smart-solutions-home__grid{
	gap:0 !important;
}
.smart-solutions-home .smart-solution-tile{
	width:100% !important;
	height:100% !important;
	min-height:0 !important;
	margin:0 !important;
	padding:0 !important;
	border-radius:10px !important;
}
.smart-solutions-home .smart-solution-card__body{
	min-height:92px !important;
}

#clear{margin-left:auto;margin-right:auto;clear:both;}

h2{
width:80%;text-align:center;padding:0.5em;font-size:3em;margin-left:10%;margin-right:10%;}

@media screen and (max-width: 1400px) {
h2{
width:90%;text-align:center;padding:0.5em;font-size:2.5em;margin-left:5%;margin-right:5%;}

}
.video-text{
	color:#000000;
}
.video-text:hover{
	color:#02718d;
}
@media screen and (max-width: 992px) {
	
	#icon-right {
    font-size: 1em;
    margin-left: 1em;
    height: 50px;
    float: left;
	width:70%;
    display: flex;
    align-items: center;
}

	
	.video-text{
	color:#000000;        display: inline-block;   /* 讓文字可以換行 */
        word-break: break-word;  /* 遇到長單字或無空格文字時換行 */
        white-space: normal;     /* 避免一行文字被強制不換行 */
        max-width: 100%;         /* 文字不超出父容器 */
        overflow-wrap: break-word; /* 舊版瀏覽器相容 */
}
.video-text:hover{
	color:#02718d;
}
	
	#com-ok2 #title {
    font-size: 2em;
    font-weight: 300;
	height:auto;
	padding-bottom:0.5em;line-height:1em;
}

#com-ok4 #title {
    font-size: 2em;
    font-weight: 300;
    color: #ffffff;
     height:auto;
	 margin-bottom:1em;
}

#com-ok5 #title {
    font-size: 2em;
    font-weight: 300;
    color: #ffffff;
     height:auto;
	 line-height: 1em;
}
#com-ok,#com-ok2{	width:95%;
	margin-left:auto;
	margin-right:auto;}
#com-ok4 {
    background-color: #2a7779;
    border-radius: 10px;
    padding-top: 1em;
    padding-bottom: 2em;
    padding-left: 2em;
    padding-right: 2em;
	margin-top:2em;
    margin-bottom: 1em;
	width:95%;
	margin-left:auto;
	margin-right:auto; line-height:1.6em;
}
#com-ok5 {
    background-color: #80b0b4;
    border-radius: 10px;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 2em;
    padding-right: 2em;
	margin-top:2em;
    margin-bottom: 2em;
	width:95%;
	margin-left:auto;
	margin-right:auto;
}
#com-ok #title {
    font-size: 2em;
    font-weight: 300;
	margin-bottom:1em;
	height:auto;
}

h2{
font-size:2em;padding-bottom:1em;}

#co{
padding-top:10px;}
}
.py-5{
padding-top:0rem!importan}
.pricing .box {
    padding: 20px;
    background: #fff;
    text-align: center;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.card-body {
	flex: 1 1 auto;
	padding: 1.5em;
	height: auto;
}

.si{
	height:35px;
	margin-bottom:1.5em;}
@media screen and (max-width: 1200px) {
.card-body {
	flex: 1 1 auto;
	padding: 1em;
	height: auto;
}	

.si{
	height:30px;
	margin-bottom:1.5em;}
}


@media screen and (max-width: 992px) {
.card-body {
	flex: 1 1 auto;
	padding: 1.5em;
	height: auto;
}	
}
.banner-2{
 width:100%;margin-left:auto;margin-right:auto;clear:both;border-radius: 30px;margin-top:1em;box-shadow: inset 0px 0px 13px 3px rgba(0, 0, 0, 0.5);
}
/*--------------------------------------------------------------
# logo
--------------------------------------------------------------*/
#logo{
width:80%;margin-left:auto;margin-right:auto;margin-top:20px;margin-bottom:10px;}
.logo{
	height:70px; padding-right:1em;
}

@media screen and (max-width: 1200px) 
{
#logo{ width:90%;margin-left:auto;margin-right:auto;margin-top:20px;margin-bottom:10px;



}

}


@media screen and (max-width: 1200px) {
	.cola{
width:70%;
float:right;
color:#ffffff;
font-size:1em;	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;padding:1em;
	border-right-width: 0px;
	border-right-style: dashed;
	border-right-color: #CCC;padding:0.5em;

}
#com-ok {
    background-color: #efefef;
    border-radius: 30px;
    padding-top: 1em;
    padding-bottom: 2em;
    padding-left: 2em;
    padding-right: 2em;
    line-height: 1.8em;
    font-size: 1em;
}
#com-ok2 {
    background-color: #ffffff;
    border-radius: 30px;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 2em;
    padding-right: 2em;
    line-height: 1.8em;
    font-size: 1em;
}
#title {
    font-size: 1.5em;
    color: #02718d;
    margin-bottom: 0em;
    margin-top: 0.5em;
    font-weight: 800;
    text-align: center;
    height: 80px;
}	
#post-font {
    color: #4c4c4c;
    line-height: 2em;
    font-size: 1em;
    padding-bottom: 1em;
}
}

@media screen and (max-width: 992px) 
{

#footer .footer-top {display:none;}
#logo{ display:none;



}
.none{ display:none;



}

.cola{
	width:100%;

border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #CCC;
border-right-width: 0px;
    border-right-style: dashed;
    border-right-color: #CCC;
}



}
.name{height:25px;}
.fixed-top{position: fixed;
    top: 0;
    right: 0;
    left: 0;}

#right{float:right;padding-left:1em;padding-top:0.5em;}
.up-icon{height:40px;padding-top:0px;padding-right:1em;float:right;}


/*--------------------------------------------------------------
# 4格卡片
--------------------------------------------------------------*/

#card-4{
width:23.75%;
margin-left:0.5%;
margin-right:0.5%;
padding:0em;
float:left;
margin-bottom:1.5em;
height:170px;
border-radius: 10px;
}
#card-4:hover,
{
 margin-top:-1em;


}
#card-4:focus,
#card-4:focus-visible{
	
outline:3px solid rgba(9,105,92,0.25);
	outline-offset:3px;	
}
#card-41{
width:24%;
margin-left:0.5%;
margin-right:0.5%;
padding:0em;
float:left;
margin-bottom:1.5em;
height:280px;
border-radius: 10px;
border: 1px solid #cfcfcf;
}
#card-41:hover{
 margin-top:-1em;


}
#listb {
    width: 100%;
    
    
    padding-top: 0.7em;
    padding-bottom: 0em;
}

#co-2026 .co-2026-layout{
	display:flex;
	align-items:center;
	gap:1.5%;
	width:100%;
}
#co-2026 .co-2026-left{
	width:26.5%;
}
#co-2026 .co-2026-right{
	width:72%;
}
#co-2026 .co-2026-cards{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:0;
	width:100%;
}
#co-2026 .co-2026-cards #card-5{
	width:24%;
	margin-left:0;
	margin-right:0;
	float:none;
	aspect-ratio:1 / 1;
	height:auto;
	min-height:0;
	padding:0.2em 0;
	box-sizing:border-box;
}
#co-2026 .co-2026-cards #card-5 #number,
#co-2026 .co-2026-cards #card-5 #title-a,
#co-2026 .co-2026-cards #card-5 #s-font,
#co-2026 .co-2026-cards #card-5 #number-2026{
	width:84%;
}
#co-2026 .co-2026-cards #card-5 #number{
	font-size:1.65em;
	padding-top:16px;
}


#co-2026 .co-2026-cards #card-5 #title-a{
	font-size:1em;
	min-height:auto;
	margin-bottom:0.8em;
}
#co-2026 .co-2026-cards #card-5 #s-font{
	font-size:0.74em;
	line-height:1.45em;
	margin-bottom:0.8em;
}
#co-2026 .co-2026-cards #card-5 #number-2026{
	font-size:0.82em;
	margin-bottom:16px;
}

@media screen and (max-width: 1440px) {
	
	#co-2026 .co-2026-cards #card-5 #number{
	font-size:1.5em;
	padding-top:10px;
}
#co-2026 .co-2026-cards #card-5 #title-a {
    font-size: 0.9em;
    min-height: auto;
    margin-bottom: 0em;
}
}

#h21

 {	font-weight:700;
    font-size: 1.7em;
    color: #000000;
line-height: 1.2em; 
	width:100%;
	text-align:left;
	padding-bottom:0.25em;
}

#h22

 {
    font-size: 0.9em;
    color: #273e4a;

	width:100%;
	text-align:left;
	margin-bottom:0;
	line-height:1.6em;
}

@media screen and (max-width: 1200px) {
	#co-2026 .co-2026-layout{
		flex-direction:column;
		align-items:stretch;
		gap:1.5em;
	}
	#co-2026 .co-2026-left,
	#co-2026 .co-2026-right{
		width:100%;
	}
	#co-2026 .co-2026-left{
		max-width:760px;
		margin:0 auto;
		text-align:center;
	}
	#co-2026 .co-2026-left #h21,
	#co-2026 .co-2026-left #h22{
		text-align:center;
		margin-left:auto;
		margin-right:auto;
	}
	#co-2026 .co-2026-left #h22{
		max-width:720px;
	}
	#co-2026 .co-2026-cards{
		gap:1%;
	}
	#co-2026 .co-2026-cards #card-5{
		width:24.25%;
	}
}

@media screen and (max-width: 992px) {
	#co-2026 .co-2026-layout{
		gap:1.25em;
	}
	#co-2026 .co-2026-left{
		max-width:640px;
		margin:0 auto 0.55em;
	}
	#co-2026 .co-2026-cards{
		justify-content:flex-start;
		gap:0.85rem 1.25%;
	}
	#co-2026 .co-2026-cards #card-5{
		width:calc((100% - 1.25%) / 2);
		min-height:220px;
		height:auto;
		margin-bottom:0;
		border-radius:10px;
		aspect-ratio:auto;
	}
	#h21{
		font-size:1.65em;
		line-height:1.25em;
		text-align:center;
		padding-bottom:0.18em;
		margin-bottom:0;
	}
	#h22{
		font-size:0.95em;
		line-height:1.65em;
		width:88%;
		max-width:32rem;
		text-align:center;
		margin:0 auto 0.55em;
	}
}

@media(max-width: 768px) {
	#co-2026 .co-2026-layout{
		flex-direction:column;
		gap:1.1em;
	}
	#co-2026 .co-2026-left,
	#co-2026 .co-2026-right{
		width:100%;
	}
	#co-2026 .co-2026-left{
		max-width:600px;
		margin:0 auto 0.45em;
	}
	#co-2026 .co-2026-cards{
		justify-content:flex-start;
		gap:0.85rem 1.25%;
	}
	#co-2026 .co-2026-cards #card-5{
		width:calc((100% - 1.25%) / 2);
		min-height:210px;
		margin-bottom:0;
	}
	#h21

 {
    font-size: 1.7em;
    color: #000000;
line-height: 1.2em; 
	width:100%;
	text-align:center;
	padding-bottom:0.12em;
}
	#h22

 {
    font-size: 0.95em;
    color: #273e4a;

	width:86%;
	max-width:30rem;
	text-align:center;
	margin-bottom:0.35em;
	margin-left:auto;
	margin-right:auto;
	line-height:1.65em;
}
}

@media screen and (max-width: 992px) {
	#card-4{
		width:46%;
		margin-left:2%;
		margin-right:0;
		height:220px;
		margin-bottom:0.85rem;
	}
}

@media screen and (max-width: 768px) {
	#card-4{
		width:46%;
		margin-left:2%;
		margin-right:0;
		height:190px;
		margin-bottom:0.85rem;
	}
}

@media(max-width: 576px) {
	#co-2026 .co-2026-left{
		max-width:92%;
		margin:0 auto 0.35em;
	}
	#co-2026 .co-2026-cards{
		gap:0;
	}
	#co-2026 .co-2026-cards #card-5{
		width:100%;
		margin:0 4% 0.85rem;
		min-height:auto;
	}
	#h21{
		font-size:1.45em;
		line-height:1.2em;
	}
	#h22{
		font-size:0.9em;
		width:100%;
		margin:0 auto 0.35em;
		line-height:1.55em;
	}
	#card-4{
		width:88%;
		margin-left:5%;
		margin-right:5%;
		margin-bottom:0.85rem;
		height:190px;
		clear:both;
	}
}
#bg-all31{
	
	width:70%;
	margin-left:auto;
	margin-right:auto;
	clear:both;
	font-weight: 300;
	
}

#bg-2026{
		width:100%;
	margin-left:auto;
	margin-right:auto;
	clear:both;
	padding-top:30px;
	padding-bottom:30px;
	background-color:#b3bcc4;
}
#card-5{
width:24%;
margin-left:0.5%;
margin-right:0.5%;
padding:0em;
float:left;
margin-bottom:1.5em;
height:auto;
border-radius: 15px;
height:255px;
display: flex;
  flex-direction: column; 
}
#card-6{
width:24%;
margin-left:0.5%;
margin-right:0.5%;
padding:0em;
float:left;
margin-top:1em;
margin-bottom:0em;
height:auto;
border-radius: 10px;
text-align:center;
display: flex;
  flex-direction: column; 
}
#card-6 #title-a{
	font-weight: 400;
    color: #fff;
	font-size:1.5em;
	text-align:center;
  padding-top:1em;
  padding-bottom:1em;
	width:80%;	margin-left:auto;
	margin-right:auto;
	clear:both;
	
}
@media screen and (max-width: 1400px) {
	#card-6 #title-a{
	font-weight: 400;
    color: #fff;
	font-size:1.2em;
	text-align:center;
  padding-top:1em;
  padding-bottom:1em;
	width:80%;	margin-left:auto;
	margin-right:auto;
	clear:both;
	
}
}
#co-2026 .co-2026-cards #card-5 #number{
	font-weight: 500;
    color: #fff;
	font-size:1.8em;text-align:left; font-family: "Barlow Condensed", sans-serif;
	width:80%;	margin-left:auto;
	margin-right:auto;
	clear:both;
	text-align:left;
	clear:both;
	padding-top:20px;text-shadow: 3px 3px 6px rgba(39, 62, 74, 0.6);
	}
#co-2026 .co-2026-cards #card-5 #title-a{
	text-transform:uppercase;
	font-weight: 600;
    color: #fff;
	font-size:0.9em;
	text-align:left;
	min-height:30px;
	width:80%;	margin-left:auto;
	margin-right:auto;
	clear:both;
	line-height: 1.3em;
	margin-bottom:1em;
}
#co-2026 .co-2026-cards #s-font{width:80%;	margin-left:auto;
	margin-right:auto;
	clear:both;
	font-weight: 300;
	color: #d8ebdc;
	font-size:0.8em;
	
	   margin-bottom:10px;
	
}
#number-2026{
	margin-left:auto;
	margin-right:auto;
	clear:both;
	font-weight: 300;
	color: #d8ebdc;
	font-size:0.9em;

	margin-top: auto;
	margin-bottom:20px;
	

	
}


@media screen and (max-width:992px) {
	#card-5{
        width: 47%;
        margin-left: 1%;
        margin-right: 1%;
        margin-bottom: 1em;
height:auto;
border-radius: 20px;
height:370px;
display: flex;
  flex-direction: column; 
}
	#card-6{
        width: 47%;
        margin-left: 1%;
        margin-right: 1%;
        
height:auto;
border-radius: 20px;

display: flex;
  flex-direction: column; 
}
}
@media screen and (max-width: 992px) {
#co-2026 .co-2026-cards #card-5 #number{
	font-weight: 500;
    color: #fff;
	font-size:2.5em;text-align:left; font-family: "Barlow Condensed", sans-serif;
	width:80%;	margin-left:auto;
	margin-right:auto;
	clear:both;
	text-align:left;
	clear:both;
	padding-top:10px;text-shadow: 3px 3px 6px rgba(39, 62, 74, 0.6);
	}
#co-2026 .co-2026-cards #card-5 #title-a{
	font-weight: 500;
    color: #fff;
	font-size:1.15em;
	text-align:left;
   font-family: "Barlow Condensed", sans-serif;
	width:80%;	margin-left:auto;
	margin-right:auto;
	clear:both;	min-height:30px;
	line-height: 1.35em;
	margin-bottom:0.6em;
}
#co-2026 .co-2026-cards  #card-5 #s-font{width:80%;	margin-left:auto;
	margin-right:auto;
	clear:both;
	font-weight: 300;
	color: #d8ebdc;
	font-size:0.8em;text-transform: uppercase;
	line-height:1.5em;
	margin-bottom:16px;
	
}
#co-2026 .co-2026-cards  #card-5 #number-2026{
	margin-left:auto;
	margin-right:auto;
	clear:both;
	font-weight: 300;
	color: #d8ebdc;
	font-size:0.82em;

	margin-top: auto;
	margin-bottom:16px;
	

	
}
#card-6 #title-a{
	
	font-size:1.2em;
	
	
}
}



@media screen and (max-width: 576px) {
	#card-5{
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
height:auto;
border-radius: 20px;
height:auto;
display: flex;
  flex-direction: column; 
}
	#card-6{
        width: 94%;
        margin-left: 3%;
        margin-right: 3%;
height:auto;
border-radius: 10px;
height:auto;
display: flex;
  flex-direction: column; 
}
		
}

.card-color{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#258f70+8,0c5753+63,0c5753+63 */
background: linear-gradient(135deg,  rgba(37,143,112,1) 8%,rgba(12,87,83,1) 63%,rgba(12,87,83,1) 63%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */


}

.card-color2{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0c5753+19,0c5753+19,258f70+68 */
background: linear-gradient(45deg,  rgba(12,87,83,1) 19%,rgba(12,87,83,1) 19%,rgba(37,143,112,1) 68%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */




}
.card-color3{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#258f70+8,258f70+14,6a895f+79 */
background: linear-gradient(45deg,  rgba(37,143,112,1) 8%,rgba(37,143,112,1) 14%,rgba(106,137,95,1) 79%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.card-color4{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6a895f+52,a4b78a+99 */
background: linear-gradient(45deg,  rgba(106,137,95,1) 52%,rgba(164,183,138,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

@media screen and (max-width: 992px) 
{
#card-4{
width:47%;
margin-left:1%;
margin-right:1%;
margin-bottom:0.85rem;
}
}

@media screen and (max-width: 768px)
{
#card-4{
width:47%;
margin-left:1%;
margin-right:1%;
margin-bottom:0.85rem;
height:190px;
overflow:hidden;
}
}

@media screen and (max-width: 576px) 
{
#card-4{
width:90%;
margin-left:5%;
margin-right:5%;
margin-bottom:0.85rem;
height:150px;
overflow:hidden;
clear:both;

}
}


#img-up{width:80%;margin-left:auto;margin-right:auto;text-align:center;padding:0.6em;}


@media screen and (max-width: 992px) {
	
	#img-up{width:55%;margin-left:auto;margin-right:auto;text-align:center;padding:1em;}
	
}
.img{width:;}
.bg1{
	color: #FFFFFF;
	background-image: url(../../images/a001.jpg);
	background-position: center -70px;
	


}
.bg2{
	color: #FFFFFF;
	background-image: url(../../images/a002.jpg?20261);
	background-position: center -20px;
	


}
.bg3{
	color: #FFFFFF;
	background-image: url(../../images/a003.jpg?20261);
	background-position: center -100px;
	


}
.bg4{
	color: #FFFFFF;
	background-image: url(../../images/a004.jpg?20261);
	background-position: center -50px;
	


}



@media screen and (max-width: 1200px) {
	
	.bg1{
	color: #FFFFFF;
	background-image: url(../../images/a001.jpg);
	background-position: center -60px;
	


}
.bg2{
	color: #FFFFFF;
	background-image: url(../../images/a002.jpg?20261);
	background-position: center -20px;
	


}
.bg3{
	color: #FFFFFF;
	background-image: url(../../images/a003.jpg?20261);
	background-position: center -100px;
	


}
.bg4{
	color: #FFFFFF;
	background-image: url(../../images/a004.jpg?20261);
	background-position: center -40px;
	


}
	
	
	
	
}


@media screen and (max-width: 576px) {
	
	.bg1{
	color: #FFFFFF;
	background-image: url(../../images/a001.jpg);
	background-position: center -60px;
	


}
.bg2{
	color: #FFFFFF;
	background-image: url(../../images/a002.jpg?20261);
	background-position: center -20px;
	


}
.bg3{
	color: #FFFFFF;
	background-image: url(../../images/a003.jpg?20261);
	background-position: center -100px;
	


}
.bg4{
	color: #FFFFFF;
	background-image: url(../../images/a004.jpg?20261);
	background-position: center -40px;
	


}
	
	
	
	
}
.color-w{color:#FFFFFF;}
#card-word{ width:95%;margin-left:auto;margin-right:auto;text-align:center;padding:0.5em;font-size:1em;line-height:1.2em}

.date{
font-size:4em;padding-left:0.3em;color:#000000;  font-family: "Poppins", sans-serif; float:left;
}
.year{float: left;}
.mon{float: left;}


#breadcrumb-bg{
	width:100%;padding-top:1em;padding-bottom:0.2em;
	background-color:#e9e7e7;margin-left:auto;margin-right:auto;clear:both;
	padding-left:13%;padding-right:13%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e3e3e3;
		border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #e3e3e3;
}

#smart-1{
width:25%;

background-color: rgba(0,0,0,0);
color:#ffffff;
padding:1em;
text-align:center;
font-size:1.2em;
float:left;border-radius: 0px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: dashed;
	border-left-style: dotted;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
}
#smart-1 img{
width:35%;padding-bottom:1em;}
#smart-1:hover{background-color: rgba(0,0,0,0.4);}


@media screen and (max-width: 1200px) 
{
#smart-1{
width:33%;font-size:1.2em;
}
#breadcrumb-bg {
    width: 100%;
    padding-top: 0.em;
    padding-bottom: 0em;
	font-size:0.9em;
    background-color: #efefef;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    padding-left: 6%;
    padding-right: 6%;
}
}
@media screen and (max-width: 992px) 
{
#smart-1{
width:100%;font-size:1em;margin-left:auto;margin-right:auto;both:clear;border-bottom-width: 1px;
	border-left-width: 0px;
	border-bottom-style: dashed;
	border-left-style: dotted;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
}
.col-3{
display:none;}
.col-9{width:100%;}
#left-30
 {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 0em;
}#left-70
 {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 1em;
}
#left-70 h3

 {
    font-size: 1.4em;
    text-align: left;
    color: #02718d;
    line-height: 1.3em;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #CCC;
    padding-top: 1em;
    padding-bottom: 1em;
}

#co4 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0em;
}
#o2 {
    width: 95%;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    float: left;
    border: 1px solid #dfdfdf;
    margin-left: 1%;
    box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    height: auto;
    margin-bottom: 1em;
}
#breadcrumb-bg
 {
    width: 100%;
    padding-top: 1em;
    padding-bottom: 0.2em;
    background-color: #efefef;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    padding-left: 3%;
    padding-right: 3%;
}
h3{
font-size:1.5em;
line-height: 1.5em;
 padding-bottom: 0.2em;
}

}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 0px;
  bottom: 10%;
  z-index: 996;
  background: #2a7779;
  width: 50px;
  height: 50px;
  -webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
  transition: all 0.4s;
}
.back-to-top i {
  font-size: 2em;
  color: #fff;
  line-height: 0;
}
.back-to-top:hover {
  background: #ff6a40;
  color: #fff;
}
.back-to-top.active {
  visibility: visible;
  opacity: 1;
}




.back-to-web {
  position: fixed;
 
  opacity: 1;
  right: 0px;
  bottom: 15%;
  z-index: 996;
  background: #000;
  width: 50px;
  height: 50px;
  -webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
  transition: all 0.4s;
z-index:999999999;
}
.back-to-web i {
  font-size: 1em;
  color: #fff;
  line-height: 0;
}
.back-to-web:hover {
  background: #ff6a40;
  color: #fff;
}
.back-to-web.active {
  visibility: visible;
  opacity: 1;
}

@media(max-width: 768px) {
.back-to-web {
  position: fixed;
 
  opacity: 1;
  right: 0px;
  bottom: 17.5%;
  z-index: 996;
  background: #000;
  width: 50px;
  height: 50px;
  -webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
  transition: all 0.4s;
z-index:999999999;
}

}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #2a7779;
  border-top-color: #ffe9e3;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 0.5s linear infinite;
  animation: animate-preloader 0.5s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  transition: all 0.5s;
  z-index: 997;
padding-top:0em;
padding-bottom:0em;

}
#header.header-scrolled, #header.header-inner-pages {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#02718d+0,357e77+54,6ecb8e+100 */
background-color:#fff; 
 margin-top:0px;
  padding: 1em;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

@media(max-width:992px){
	#header.header-scrolled, #header.header-inner-pages {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#02718d+0,357e77+54,6ecb8e+100 */
background-color:#000; 
 margin-top:0px;
  padding: 0.5em;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
}
}
#header .logo {
 
  height:60px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 2px;
}
#header .logo a {
  color: #fff;
}
#header .logo img {
  max-height: 40px;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}
.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}
.navbar li {
  position: relative;
}
.navbar > ul > li {
  white-space: nowrap;
  padding: 8px 12px;
}
.navbar a, .navbar a:focus {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: space-between;
  padding: 0 3px;
  font-size: 1.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  transition: 0.3s;
}
.navbar a i, .navbar a:focus i {
  font-size: 1em;
  line-height: 0;
  margin-left: 5px;
}
.navbar > ul > li > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -6px;
  left: 0;
  background-color: #fff;
  visibility: hidden;
  width: 0px;
  transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before, .navbar li:hover > a:before, .navbar .active:before {
  visibility: visible;
  width: 100%;
}
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  color: #fff;
}
.navbar .getstarted, .navbar .getstarted:focus {
  padding: 8px 25px;
  margin-left: 30px;
  border-radius: 4px;
  color: #fff;
  border: 2px solid #fff;
}
.navbar .getstarted:hover, .navbar .getstarted:focus:hover {
  color: #fff;
  background: #fd3800;
  border-color: #02718d;
}
.navbar > ul > li > .getstarted:before {
  visibility: hidden;
}
.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}
.navbar .dropdown ul li {
  min-width: 200px;
}
.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 1.1em;
  text-transform: none;
  color: #15222b;
  font-weight: 400;
}
.navbar .dropdown ul a i {
  font-size: 1em;
}
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: #2a7779;
}
.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}
.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}
@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }
  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #fff;
  font-size: 2em;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }
}
.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(4, 7, 9, 0.9);
  transition: 0.3s;
  z-index: 999;
}
.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}
.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  border-radius: 10px;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}
.navbar-mobile a, .navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 1.1em;
  color: #15222b;
}
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #2a7779;
}
.navbar-mobile .getstarted, .navbar-mobile .getstarted:focus {
  margin: 15px;
}
.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li {
  min-width: 200px;
}
.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
  font-size: 1em;
}
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: #2a7779;
}
.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: 100vh;
  background: url("../img/hero-bg.jpg") top center;
  background-size: cover;
  position: relative;
  padding: 0;
}
#hero:before {
  content: "";
  background: rgba(13, 20, 26, 0.7);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
#hero .hero-container {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
#hero h1 {
  margin: 0 0 10px 0;
  font-size: 5em;
  font-weight: 700;
  line-height: 56px;
  text-transform: uppercase;
  color: #fff;
}
#hero h2 {
  color: #eee;
  margin-bottom: 50px;
  font-size: 2em;
}
#hero .btn-get-started {
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1.1em;
  display: inline-block;
  padding: 10px 35px 10px 35px;
  border-radius: 4px;
  transition: 0.5s;
  color: #fff;
  background: #2a7779;
  border: 2px solid #2a7779;
}
#hero .btn-get-started:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
#hero .btn-watch-video {
  font-size: 1.1em;
  display: inline-block;
  transition: 0.5s;
  margin-left: 25px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#hero .btn-watch-video i {
  line-height: 0;
  color: #fff;
  font-size: 4em;
  transition: 0.3s;
  margin-right: 8px;
}
#hero .btn-watch-video:hover i {
  color: #2a7779;
}
@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}
@media (max-width: 768px) {
  #hero h1 {
    font-size: 3em;
    line-height: 36px;
  }
  #hero h2 {
    font-size: 1.5em;
    line-height: 24px;
    margin-bottom: 30px;
  }
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden;
}

.section-bg {
  background-color: #f0f4f8;
}

.section-title {
  padding-bottom: 40px;
}
.section-title h2 {
  font-size: 1.1em;
  font-weight: 500;
  padding: 0;
  line-height: 1px;
  margin: 0 0 5px 0;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #5c8eb0;
  font-family: "Poppins", sans-serif;
}
.section-title h2::after {
  content: "";
  width: 120px;
  height: 1px;
  display: inline-block;
  background: #ff8664;
  margin: 4px 10px;
}
.section-title p {
  margin: 0;
  margin: 0;
  font-size: 3em;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "Poppins", sans-serif;
  color: #263d4d;
}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about .container {
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  padding-bottom: 15px;
}
.about .count-box {
  padding: 60px 0;
  width: 100%;
}
.about .count-box i {
  display: block;
  font-size: 4em;
  color: #a1bdd1;
  float: left;
  line-height: 0;
}
.about .count-box span {
  font-size: 3em;
  line-height: 25px;
  display: block;
  font-weight: 700;
  color: #365870;
  margin-left: 60px;
}
.about .count-box p {
  padding: 5px 0 0 0;
  margin: 0 0 0 60px;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-size: 1.1em;
  color: #2e4b5e;
}
.about .count-box a {
  font-weight: 600;
  display: block;
  margin-top: 20px;
  color: #2e4b5e;
  font-size: 1.1em;
  font-family: "Poppins", sans-serif;
  transition: ease-in-out 0.3s;
}
.about .count-box a:hover {
  color: #477392;
}
.about .content {
  font-size: 1.1em;
}
.about .content h3 {
  font-weight: 700;
  font-size: 2em;
  color: #263d4d;
}
.about .content ul {
  list-style: none;
  padding: 0;
}
.about .content ul li {
  padding-bottom: 10px;
  padding-left: 28px;
  position: relative;
}
.about .content ul i {
  font-size: 2em;
  color: #2a7779;
  position: absolute;
  left: 0;
  top: -2px;
}
.about .content p:last-child {
  margin-bottom: 0;
}
.about .play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(#2a7779 50%, rgba(255, 74, 23, 0.4) 52%);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
  overflow: hidden;
}
.about .play-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.about .play-btn::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation: pulsate-btn 2s;
  animation: pulsate-btn 2s;
  -webkit-animation-direction: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid rgba(255, 74, 23, 0.7);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}
.about .play-btn:hover::after {
  border-left: 15px solid #2a7779;
  transform: scale(20);
}
.about .play-btn:hover::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  -webkit-animation: none;
  animation: none;
  border-radius: 0;
}

@-webkit-keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

@keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}
/*--------------------------------------------------------------
# About Boxes
--------------------------------------------------------------*/
.about-boxes {
  background: url("../img/about-boxes-bg.jpg") center top no-repeat fixed;
  background-size: cover;
  padding: 60px 0 30px 0;
  position: relative;
}
.about-boxes::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  z-index: 9;
}
.about-boxes .container, .about-boxes .container-fluid {
  position: relative;
  z-index: 10;
}
.about-boxes .card {
  border-radius: 3px;
  border: 0;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}
.about-boxes .card-icon {
  text-align: center;
  margin-top: -32px;
}
.about-boxes .card-icon i {
  font-size: 32px;
  color: #fff;
  width: 64px;
  height: 64px;
  padding-top: 5px;
  text-align: center;
  background-color: #2a7779;
  border-radius: 4px;
  text-align: center;
  border: 4px solid #fff;
  transition: 0.3s;
  display: inline-block;
}
.about-boxes .card-body {
  padding-top: 12px;
}
.about-boxes .card-title {
  font-weight: 700;
  text-align: center;
}
.about-boxes .card-title a {
  color: #15222b;

}
.about-boxes .card-title a:hover {
  color: #2a7779;
}
.card-text,.news-text {
  color: #5e5e5e;    display: -webkit-box;
    -webkit-line-clamp: 3;   /* 顯示2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
line-height:1.7em;
font-size:1em;
height:85px;
}
.about-boxes .card-text {
  color: #5e5e5e;    display: -webkit-box;
    -webkit-line-clamp: 2;   /* 顯示2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.about-boxes .card:hover .card-icon i {
  background: #fff;
  color: #2a7779;
}
@media (max-width: 1024px) {
  .about-boxes {
    background-attachment: scroll;
  }
}

/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
.clients {
  background: #f0f4f8;
  padding: 15px 0;
  text-align: center;
}
.clients img {
  max-width: 45%;
  transition: all 0.4s ease-in-out;
  display: inline-block;
  padding: 15px 0;
  filter: grayscale(100);
}
.clients img:hover {
  filter: none;
  transform: scale(1.15);
}
@media (max-width: 768px) {
  .clients img {
    max-width: 40%;
  }
}

/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
.features .nav-tabs {
  border: 0;
}
.features .nav-link {
  border: 1px solid #b5ccdb;
  padding: 15px;
  transition: 0.3s;
  color: #15222b;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.features .nav-link i {
  padding-right: 15px;
  font-size: 4em;
}
.features .nav-link h4 {
  font-size: 1.3em;
  font-weight: 600;
  margin: 0;
}
.features .nav-link:hover {
  color: #2a7779;
}
.features .nav-link.active {
  background: #2a7779;
  color: #fff;
  border-color: #2a7779;
}
@media (max-width: 768px) {
  .features .nav-link i {
    padding: 0;
    line-height: 1;
    font-size: 3em;
  }
}
@media (max-width: 575px) {
  .features .nav-link {
    padding: 15px;
  }
  .features .nav-link i {
    font-size: 2em;
  }
}
.features .tab-content {
  margin-top: 30px;
}
.features .tab-pane h3 {
  font-weight: 600;
  font-size: 2em;
}
.features .tab-pane ul {
  list-style: none;
  padding: 0;
}
.features .tab-pane ul li {
  padding-bottom: 10px;
}
.features .tab-pane ul i {
  font-size: 1.5em;
  padding-right: 4px;
  color: #2a7779;
}
.features .tab-pane p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box {
  margin-bottom: 20px;
  padding: 30px;
  border-radius: 6px;
  background: #fff;
}
.services .icon-box i {
  float: left;
  color: #5c8eb0;
  font-size: 4em;
  line-height: 0;
}
.services .icon-box h4 {
  margin-left: 70px;
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 1.2em;
}
.services .icon-box h4 a {
  color: #365870;
  transition: 0.3s;
}
.services .icon-box .icon-box:hover h4 a {
  color: #2a7779;
}
.services .icon-box p {
  margin-left: 70px;
  line-height: 24px;
  font-size: 1.1em;
}
.services .icon-box:hover h4 a {
  color: #2a7779;
}

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials {
  padding: 80px 0;
  background: url("../img/testimonials-bg.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
}
.testimonials::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(13, 20, 26, 0.7);
}
.testimonials .section-header {
  margin-bottom: 40px;
}
.testimonials .testimonials-carousel, .testimonials .testimonials-slider {
  overflow: hidden;
}
.testimonials .testimonial-item {
  text-align: center;
  color: #fff;
}
.testimonials .testimonial-item .testimonial-img {
  width: 100px;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.15);
  margin: 0 auto;
}
.testimonials .testimonial-item h3 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: #fff;
}
.testimonials .testimonial-item h4 {
  font-size: 1.2em;
  color: #ddd;
  margin: 0 0 15px 0;
}
.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
  color: rgba(255, 255, 255, 0.4);
  font-size: 2em;
}
.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}
.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
}
.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
  color: #eee;
}
@media (min-width: 992px) {
  .testimonials .testimonial-item p {
    width: 80%;
  }
}
.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #a1bdd1;
  opacity: 0.5;
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #2a7779;
  opacity: 1;
}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 25px auto;
  list-style: none;
  text-align: center;
  border-radius: 50px;
}
.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 16px;
  font-size: 1em;
  font-weight: 500;
  line-height: 1;
  color: #444444;
  margin: 0 3px 10px 3px;
  transition: all ease-in-out 0.3s;
  background: #e5edf3;
  border-radius: 4px;
}
.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
  color: #fff;
  background: #2a7779;
}
.portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}
.portfolio .portfolio-item {
  margin-bottom: 30px;
  overflow: hidden;
}
.portfolio .portfolio-item img {
  position: relative;
  top: 0;
  transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: -50px;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: #2a7779;
  padding: 15px 20px;
}
.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 1.3em;
  color: #fff;
  font-weight: 600;
}
.portfolio .portfolio-item .portfolio-info p {
  color: #fff;
  font-size: 1.1em;
  margin-bottom: 0;
}
.portfolio .portfolio-item .portfolio-info .preview-link, .portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 50px;
  font-size: 1.3em;
  top: calc(50% - 18px);
  color: white;
  transition: ease-in-out 0.3s;
}
.portfolio .portfolio-item .portfolio-info .preview-link:hover, .portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: #ffc1b0;
}
.portfolio .portfolio-item .portfolio-info .details-link {
  right: 15px;
}
.portfolio .portfolio-item:hover img {
  top: -30px;
}
.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 0;
}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
  padding-top: 40px;
}
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}
.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #2a7779;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #2a7779;
}
.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px rgba(21, 34, 43, 0.08);
}
.portfolio-details .portfolio-info h3 {
  font-size: 1.3em;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}
.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 1em;
}
.portfolio-details .portfolio-info ul li + li {
  margin-top: 10px;
}
.portfolio-details .portfolio-description {
  padding-top: 30px;
}
.portfolio-details .portfolio-description h2 {
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 20px;
}
.portfolio-details .portfolio-description p {
  padding: 0;
}

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team {
  position: relative;
}
.team .container {
  position: relative;
  z-index: 10;
}
.team .member {
  margin-bottom: 80px;
  position: relative;
}
.team .member .pic {
  overflow: hidden;
}
.team .member .member-info {
  position: absolute;
  bottom: -50px;
  left: 20px;
  right: 20px;
  background: #fff;
  padding: 20px 15px;
  color: #15222b;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: 0.5s;
}
.team .member h4 {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 1.2em;
  color: #15222b;
  position: relative;
  padding-bottom: 10px;
}
.team .member h4::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  background: #7fa5c0;
  bottom: 0;
  left: 0;
}
.team .member span {
  font-style: italic;
  display: block;
  font-size: 1em;
}
.team .member .social {
  position: absolute;
  right: 15px;
  bottom: 15px;
}
.team .member .social a {
  transition: color 0.3s;
  color: #477392;
}
.team .member .social a:hover {
  color: #2a7779;
}
.team .member .social i {
  font-size: 1.2em;
  margin: 0 2px;
}
@media (max-width: 992px) {
  .team .member {
    margin-bottom: 110px;
  }
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
  color: #444444;
  text-align: center;
  box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
  padding: 20px 0 30px 0;
}
.contact .info-box i {
  font-size: 3em;
  color: #2a7779;
  border-radius: 50%;
  padding: 8px;
}
.contact .info-box h3 {
  font-size: 1.3em;
  color: #777777;
  font-weight: 700;
  margin: 10px 0;
}
.contact .info-box p {
  padding: 0;
  line-height: 24px;
  font-size: 1em;
  margin-bottom: 0;
}
.contact .php-email-form {
  box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
  padding: 30px;
}
.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}
.contact .php-email-form .error-message br + br {
  margin-top: 25px;
}
.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}
.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}
.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}
.contact .php-email-form input, .contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 1em;
  border-radius: 4px;
}
.contact .php-email-form input:focus, .contact .php-email-form textarea:focus {
  border-color: #2a7779;
}
.contact .php-email-form input {
  padding: 10px 15px;
}
.contact .php-email-form textarea {
  padding: 12px 15px;
}
.contact .php-email-form button[type=submit] {
  background: #2a7779;
  border: 0;
  padding: 10px 24px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
}
.contact .php-email-form button[type=submit]:hover {
  background: #ff5e31;
}
@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 15px 0;
  background: #f0f4f8;
  min-height: 40px;
  margin-top: 78px;
}
.breadcrumbs h2 {
  font-size: 2em;
  font-weight: 400;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.breadcrumbs ol li + li {
  padding-left: 10px;
}
.breadcrumbs ol li + li::before {
  display: inline-block;
  padding-right: 10px;
  color: #263d4d;
  content: "/";
}
@media (max-width: 992px) {
  .breadcrumbs {
    margin-top: 52px;
  }
  .breadcrumbs .d-flex {
    display: block !important;
  }
  .breadcrumbs ol {
    display: block;
  }
  .breadcrumbs ol li {
    display: inline-block;
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: #121d24;
  padding: 0 0 30px 0;
  color: #fff;
  font-size: 0.9em;
}
#footer .footer-top {
  background: #20323e;
  border-bottom: 1px solid #1d303c;
  padding: 60px 0 30px 0;
}


@media screen and (max-width: 1200px) 
{
#footer .footer-top {}
}
#footer .footer-top .footer-info {
  margin-bottom: 30px;
}
#footer .footer-top .footer-info h3 {
  font-size: 2em;
  margin: 0 0 15px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-weight: 700;
}
#footer .footer-top .footer-info p {
  font-size: 1em;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "Raleway", sans-serif;
  color: #fff;
}
#footer .footer-top .social-links a {
  font-size: 1.3em;
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 4px;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}
#footer .footer-top .social-links a:hover {
  background: #2a7779;
  color: #fff;
  text-decoration: none;
}
#footer .footer-top h4 {
  font-size: 1.3em;
  font-weight: 600;
  color: #fff;
  position: relative;
  padding-bottom: 12px;
line-height: 1.6em;
}


#footer .footer-top h4:hover,
#footer .footer-top h4:focus,
#footer .footer-top h4:focus-visible{
	
	color:#b1da61;
}
#footer .footer-top .footer-links {
  margin-bottom: 30px;
}
#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#footer .footer-top .footer-links ul i {
  padding-right: 2px;
  color: #b1da61;
  font-size: 1.3em;
  line-height: 1;
}
#footer .footer-top .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}
#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}
#footer .footer-top .footer-links ul a {
  color: #fff;
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
line-height: 1.5em;
}

@media screen and (max-width: 1200px) {
#footer .footer-top h4 {
  font-size: 1em;
  font-weight: 600;
  color: #fff;
  position: relative;
  padding-bottom: 12px;
line-height: 1.6em;
}	
#footer .footer-top .footer-links ul a {
  color: #fff;
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
line-height: 1.5em;
font-size:0.9em;
}
}



#footer .footer-top .footer-links ul a:hover,
#footer .footer-top .footer-links ul a:focus,
#footer .footer-top .footer-links ul a:focus-visible {
  color: #b6e48c;
}
#footer .footer-top .footer-newsletter form {
  margin-top: 30px;
  background: #fff;
  padding: 6px 10px;
  position: relative;
  border-radius: 4px;
}
#footer .footer-top .footer-newsletter form input[type=email] {
  border: 0;
  padding: 4px;
  width: calc(100% - 110px);
}
#footer .footer-top .footer-newsletter form input[type=submit] {
  position: absolute;
  top: 0;
  right: -2px;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 1.2em;
  padding: 0 20px;
  background: #2a7779;
  color: #fff;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
}
#footer .footer-top .footer-newsletter form input[type=submit]:hover {
  background: #ff5e31;
}
#footer .copyright {
  text-align: center;
  padding-top: 30px;
}
#footer .credits {
  padding-top: 10px;
  text-align: center;
  font-size: 1em;
  color: #fff;
}
#footer .credits a {
  transition: 0.3s;
}

.info i {
    font-size: 1.3em;
    color: rgb(255, 255, 255);
    float: left;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(2, 113, 141);
    border-radius: 50px;
    transition: 0.3s ease-in-out;
	margin-right:1em;
}

.info-wrap {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 15px;
    padding: 1.2em;background: rgb(255, 255, 255);
}

.php-email-form {
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 24px 0px;
    padding: 30px;
    background: rgb(255, 255, 255);
}

.php-email-form button[type="submit"] {
    color: rgb(255, 255, 255);
    background: #1a6f84;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    padding: 10px 24px;
    transition: 0.4s;
    border-radius: 50px;
}
/* 卡片 */
.news-card{
border:none;
border-radius:12px;
overflow:hidden;
transition:all .3s;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
position:relative;
}

.news-card:hover{
transform:translateY(-8px);
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

/* 圖片 */
.news-img-wrap{
overflow:hidden;
}

.news-img-wrap img{
transition:transform .1s;
}

.news-card:hover img{
transform:scale(1.08);
}

/* 日期浮動 */
.news-date{
position:absolute;
top:15px;
left:15px;
background:#1a6f84;
padding:6px 10px;
border-radius:8px;
display:flex;
align-items:center;
gap:6px;
box-shadow:0 4px 12px rgba(0,0,0,0.15);
z-index:2;
}

.news-date-day{
font-size:2em;
font-weight:700;
line-height:1;
color:#ffffff;
}

.news-date-right{
display:flex;
flex-direction:column;
line-height:1.1;
}

.news-date-mon{
font-size:0.8em;
font-weight:400;
color:#ffffff;
padding-bottom:0.3em;
}

.news-date-year{
font-size:0.8em;
color:#75c892;

}

#soo{
padding-top:1em;
padding-left:0em;
padding-right:0em;
padding-bottom:1em;
line-height:1.8em;
text-align: justify;
border-radius: 10px;
background-color:#fff;
margin-left:1em;
margin-bottom:2em;
  display: flex;
  align-items: center;
  justify-content: center;
  
  overflow: hidden;
}
#soo img{width:80%; 
  height: 100%;
  object-fit: cover;}

#soo-left{float:left;width:28%;text-align:center;}
#soo-right{float:right;width:72%;}

@media screen and (max-width: 1200px) {
#soo{
padding-top:0em;
padding-left:0em;
padding-right:0em;
padding-bottom:1em;
line-height:1.8em;
text-align: left;
border-radius: 10px;
background-color:#fff;
margin-left:1em;
margin-bottom:1em;
  display: flex;
  align-items: center;
  justify-content: center;
  
  overflow: hidden;
}
#soo img{width:80%; 
  height: 100%;
  object-fit: cover;}

#soo-left{float:left;width:0%;text-align:center;}
#soo-right{float:left;width:97%;}

}




/* 標題與內文 */
.news-title{
font-size:1.3em;
font-weight:600;
margin-bottom:8px;
line-height:1.4em;
display: -webkit-box;        /* Flex 盒子模式 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    -webkit-line-clamp: 2;       /* 顯示 3 行 */
    overflow: hidden;             /* 超出隱藏 */
    text-overflow: ellipsis;      /* 超出用省略號 */
height:90px;
	
}
.news-title:hover{
color:#b1da61;
	
}

@media screen and (max-width: 1200px) {
	/* 標題與內文 */
.news-title{
font-size:1.2em;
font-weight:600;
margin-bottom:8px;
line-height:1.4em;
display: -webkit-box;        /* Flex 盒子模式 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    -webkit-line-clamp: 2;       /* 顯示 3 行 */
    overflow: hidden;             /* 超出隱藏 */
    text-overflow: ellipsis;      /* 超出用省略號 */
height:80px;
	
}
	
	.card-text, .news-text {
    color: #5e5e5e;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.7em;
    font-size: 1em;
height:85px;
}
}

/* 左右箭頭 */
.news-carousel{
position:relative;
}

.news-carousel-arrow{
width:48px;
height:48px;
background:#fff;
border-radius:50%;
top:50%;
transform:translateY(-50%);
box-shadow:0 4px 12px rgba(0,0,0,0.2);
opacity:1;
}

.news-carousel .carousel-control-prev{
left:-25px;
}

.news-carousel .carousel-control-next{
right:-25px;
}

.news-carousel .carousel-control-prev-icon,
.news-carousel .carousel-control-next-icon{
filter: invert(1);
}
@media (max-width:1200px){
	/*. Smart Solutions 子頁：手機版只顯示左欄搜尋，不顯示下方分項 */
.col-3[role="group"][aria-label="產業分類篩選"]{
  flex:0 0 100%;
  max-width:100%;
  display:block !important;
  margin-bottom:1rem;
}
.col-3[role="group"][aria-label="產業分類篩選"] #search-b3{
  display:block !important;
  margin-bottom:0;
}
.col-3[role="group"][aria-label="產業分類篩選"] .search-list-s{
  display:none !important;
}
.col-3[role="group"][aria-label="產業分類篩選"] + .col-9{
  flex:0 0 100%;
  max-width:100%;
}
}
/* RWD */
@media (max-width:768px){
.news-date-day{
font-size:0.9em;
}
.news-title{
font-size:1em;
height:70px;
}
.news-text{
font-size:1em;
}

/*. Smart Solutions 子頁：手機版只顯示左欄搜尋，不顯示下方分項 */
.col-3[role="group"][aria-label="產業分類篩選"]{
  flex:0 0 100%;
  max-width:100%;
  display:block !important;
  margin-bottom:1rem;
}
.col-3[role="group"][aria-label="產業分類篩選"] #search-b3{
  display:block !important;
  margin-bottom:0;
}
.col-3[role="group"][aria-label="產業分類篩選"] .search-list-s{
  display:none !important;
}
.col-3[role="group"][aria-label="產業分類篩選"] + .col-9{
  flex:0 0 100%;
  max-width:100%;
}
}