@charset "utf-8";
/* CSS Document */
html, body{
	width: 100%;
	height: 100%;
	position: relative;
	font-size: 1rem;
	line-height: 1.5rem;
	font-family: 'Noto Sans TC', 'Arial', '微軟正黑體', sans-serif;
	font-weight: 300;
}


a{	color: inherit;}
a:focus,a:hover{ text-decoration: none;color:#007e91;}


.c-001769{color:#001769;}
.c-222b4c{color:#222b4c;}
.c-007e91{color:#007e91;}
.c-00e5b9{color:#00e5b9;}
.c-59b6a4{color:#59b6a4;}
.c-84909c{color:#84909c;}
.c-4f5600{color:#4f5600;}
.c-989b01{color:#989b01;}
.c-ffffff{color:#ffffff;}

.bg-001769{background-color:#001769;}
.bg-222b4c{background-color:#222b4c;}
.bg-007e91{background-color:#007e91;}
.bg-00e5b9{background-color:#00e5b9;}
.bg-59b6a4{background-color:#59b6a4;}
.bg-84909c{background-color:#84909c;}
.bg-4f5600{background-color:#4f5600;}
.bg-989b01{background-color:#989b01;}
.bg-ffffff{background-color:#ffffff;}
.bg-1f7b78{background-color:#1f7b78;}
.bg-ededed{background-color:#ededed;}


.btn-000000{background-color: #000000;color: #ffffff;}
.btn-000000:focus,.btn-000000:hover{color:#ffffff!important;}

.btn-59b6a4-00e5b9{background-color: #59b6a4;color: #ffffff;}
.btn-59b6a4-00e5b9:focus,.btn-59b6a4-00e5b9:hover{background-color: #00e5b9;color:#ffffff!important;}

.btn-59b6a4-007e91{background-color: #59b6a4;color: #ffffff;}
.btn-59b6a4-007e91:focus,.btn-59b6a4-007e91:hover{background-color: #007e91;color:#ffffff!important;}

.btn-1f7b78{background-color: #1f7b78;color: #ffffff;}
.btn-1f7b78:focus,.btn-1f7b78:hover{background-color: #001769;color:#ffffff!important;}

.fw-400{font-weight: 400;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}

.max-100{max-width: 100%;}






/*wrap&footer =======================================================*/
.wrap{
	width: 100%;
	min-height: 100%;
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

.footer{
	width: 100%;
	display: block;
	position: relative;
	margin: 0;
	padding:0;
}
.footer a{
	text-decoration: none;
	transition: .3s .03s;
}
.footer .copyright{
	width: 100%;
	display: block;
	padding:.5rem 0;
	background-color: #222b4c;
	color: #ffffff;
}
.footer .footer-content{
	width: 100%;
	display: block;
	padding: 1.5rem 0;
	background-color: #f9f9f9;
}

.footer .footer-content .footer-info>ul{
	width: 100%;
	display: block;
	position: relative;
	margin:.5rem 0;
	padding:0;
	list-style: none;
}
.footer .footer-content .footer-info>ul>li{
	display: block;
	position: relative;
	margin:0;
	padding: .2rem 0 .2rem 1.5rem;
}
.footer .footer-content .footer-info>ul>li>i.bi{
	width: 1rem;
	height: 1rem;
	display: block;
	position: absolute;
	left: 0;
	top: 0;bottom:0;
	margin:auto 0;
	transform: translateY(-.25rem);
	color:#001769;
	transition: .3s .03s;
}
.footer .footer-content .footer-info>ul>li:hover>i.bi{
	color:#59b6a4;
}
.footer .footer-content .footer-info>ul>li>span{
	display: inline-block;
}

.footer .footer-content .footer-socialBTN-list{
	width: 100%;
	padding:.5rem 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.footer .footer-content .footer-socialBTN-list .footer-socialBTN{
	display: block;
	padding:.25rem;
	font-size: 2.4rem;
	color:#001769;
	transition: .3s .03s;
}
.footer .footer-content .footer-socialBTN-list .footer-socialBTN:hover{
	color:#00e5b9;
}
@media (min-width: 768px) {
	.footer .footer-content .footer-socialBTN-list{
		justify-content: flex-end;
	}
}








/*header&banner ============================================================*/
.header{
	width: 100%;
	display: block;
	position: fixed;
	background-color: rgba(255, 255, 255, .98);
	left: 0;
	top: 0;
	z-index: 500;
	box-shadow: 0 0 3px rgba(0,0,0,.2);
}

.header .navbar{
	padding:.6rem 0;
}
.header .navbar-nav .nav-link{
	color:#001769;
	font-size: 1.125rem;
	font-weight: 400;
	transition:  .3s .03s;
}
.header .navbar-nav .nav-link.active{
	color: #1f7b78;
}
.header .navbar-nav .nav-link:hover{
	color:#59b6a4;
}
.header .navbar-brand img{
	max-width: 100%;
	max-height: 50px;
}
@media (min-width: 992px) {
	.header .navbar{
		padding:.8rem 0;
	}
}


.banner-title{
	width: 100%;
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	height: 35vh;
	max-height: 380px;
	background-size: cover;
	background-position: center center;
}
.banner-title.index{
	height: 50vh;
	max-height: 500px;
}
.banner-title:after{
	content:'';
	width: 130px;
	height: 120px;
	display: block;
	position: absolute;
	right: -1px;
	bottom: -1px;
	background-image: url(../images/banner-deco.png);
	background-size: 100% 100%;
	background-position: right bottom;
	z-index: 5;
}
@media (min-width: 992px) {
	.banner-title{
		height: 42vh;
		max-height: 380px;
	}
	.banner-title.index{
		height: 85vh;
		max-height: 600px;
	}
	.banner-title:after{
		width: 261px;
		height: 240px;
	}
}
.banner-content{
	width: 100%;
}







/*共用 =====================================================================*/
.side-btn{
	position: fixed;
	display: block;
	right: -60px;
	bottom:60px;
	transition: .3s;
	z-index: 500;
}
.side-btn.show{
	right: 5px;
}
.side-btn .btn-goTop{
	width: 100%;
	height: 100%;
	font-size: 1.75rem;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #003f65;
	color: #ffffff;
	transition: .3s .03s;
	opacity: .5;
}
.side-btn .btn-goTop:hover{
	opacity: 1;
	transform: scale(1.1);
}
/*.side-btn .btn-goTop:focus{
	opacity: .5;
	transform: scale(1);
}*/


.pager .pagination .page-item .page-link{
	color:#666666;
	transition: .3s .03s;
}
.pager .pagination .page-item .page-link:hover{
	color:#00e5b9;
	background-color: #ffffff;
}
.pager .pagination .page-item.active .page-link,
.pager .pagination .page-item .page-link:focus{
	color:#59b6a4;
	background-color: #ffffff;
	border-color:#dee2e6;
}















/*index ==============================================================*/
.index-block{
	width: 100%;
	position: relative;
}
.index-block.block-blue{
	background-color: #222b4c;
	color:#ffffff;
	padding:2rem 0;
	position: relative;
}
.index-block.block-blue:after{
	content:'';
	width: 81px;
	height: 74px;
	display: block;
	position: absolute;
	left: -1px;
	top: -73px;
	background-image: url(../images/blue-deco.png);
	background-size: 100% 100%;
	background-position: right bottom;
	z-index: 5;
}
@media (min-width: 992px) {
	.index-block.block-blue:after{
		width: 162px;
		height: 149px;
		top: -148px;
	}
}
.block-shareCase{
	background-color: #ededed;
	position: relative;
}















/*shareCase-list ============================================================*/
.shareCase-slick-list{
	width: 100%;
	display: block;
	padding:1rem 40px;
	position: relative;
}
.shareCase-slick-list .shareCase-item{
	width: 100%;
	padding:.5rem;
}
.shareCase-slick-list .slick-arrow{
	width: 30px;
	height: 30px;
	display: block;
	font-size: 0;
	border:0;
	background-color: transparent;
	position: absolute;
	top: 0;bottom: 0;
	margin: auto 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	transition: .3s .03s;
}
.shareCase-slick-list .slick-arrow.slick-prev{
	left: 5px;
	background-image: url(../images/prev.png);
}
.shareCase-slick-list .slick-arrow.slick-next{
	right: 5px;
	background-image: url(../images/next.png);
}
.shareCase-slick-list .slick-arrow.slick-prev:hover{
	left: -5px;
}
.shareCase-slick-list .slick-arrow.slick-next:hover{
	right: -5px;
}



.shareCase-item .card .card-img-top{
	width: 100%;
	padding-bottom: 60%;
	overflow: hidden;
	position: relative;
}
.shareCase-item .card .card-img-top>span{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	left: 0;right: 0;top: 0;bottom: 0;
	margin:auto;
	background-size: cover;
	background-position: center center;
	transition: .3s .03s;
	background-repeat: no-repeat;
}
.shareCase-item .card:hover .card-img-top>span{
	transform: scale(1.1);
}
.shareCase-item .card .card-title{
	width: 100%;
	display: block;
	font-size: 1.125rem;
	font-weight: bold;
	text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: .3s .03s;
  margin: .5rem 0;
}
.shareCase-item .card .card-text{
	width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.shareCase-item .card .product-type-list{
	width: 100%;
	/*display: block;*/
	position: relative;
	margin:.5rem 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.shareCase-item .card .product-type-list>a.btn{
	display: inline-block;
	color:#007e91;
	border-color: #007e91;
	margin-bottom: .2rem;
}
.shareCase-item .card .product-type-list>a.btn:hover{
	color:#ffffff;
	background-color: #007e91;
}
.shareCase-item .card .btn-readMore{
	text-align: right;
	text-decoration: none;
	display: inline-block;
	color:#00e5b9;
	transition: .3s .03s;
}
.shareCase-item .card .btn-readMore:hover{
	color:#001769;
	padding-right: 1rem;
}







.case-item .card .card-img-top{
	width: 100%;
	padding-bottom: 60%;
	overflow: hidden;
	position: relative;
}
.case-item .card .card-img-top>span{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	left: 0;right: 0;top: 0;bottom: 0;
	margin:auto;
	background-size: cover;
	background-position: center center;
	transition: .3s .03s;
	background-repeat: no-repeat;
}
.case-item .card:hover .card-img-top>span{
	transform: scale(1.1);
}
.case-item .card .card-title{
	width: 100%;
	display: block;
	text-decoration: none;
	font-size: 1.125rem;
	font-weight: bold;
  transition: .3s .03s;
  margin: .5rem 0;
}
.case-item .card .card-text{
	width: 100%;
}
.case-item .card .product-type-list{
	width: 100%;
	display: block;
	position: relative;
	margin:.5rem 0;
}
.case-item .card .product-type-list>a.btn{
	display: inline-block;
	color:#007e91;
	border-color: #007e91;
	margin-bottom: .2rem;
}
.case-item .card .product-type-list>a.btn:hover{
	color:#ffffff;
	background-color: #007e91;
}
.case-item .card .btn-readMore{
	text-align: right;
	text-decoration: none;
	display: inline-block;
	color:#00e5b9;
	transition: .3s .03s;
}
.case-item .card .btn-readMore:hover{
	color:#001769;
	padding-right: 1rem;
}
.case-item .card .product-keywords-list{
	width: 100%;
	display: block;
  margin-bottom: .5rem;
	color:#59b6a4;
}
.case-item .card .product-keywords-list>a{
	text-decoration: none;
	font-size: .875rem;
	color:#59b6a4;
	transition: .3s .03s;
}
.case-item .card .product-keywords-list>a:before{
	content: '#';
}
.case-item .card .product-keywords-list>a:hover{
	color:#00e5b9;
}
@media (min-width: 768px) {
	.case-item .card .card-title{
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  transition: .3s .03s;
	  margin: .5rem 0;
	}
	.case-item .card .card-text{
		height: 4.5rem;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 3;
	  overflow: hidden;
	}
	.case-item .card .product-type-list{
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
	  overflow: hidden;
	}
	.case-item .card .product-keywords-list{
		width: 100%;
		height: 4.5rem;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 3;
	  overflow: hidden;
	  margin-bottom: .5rem;
		color:#59b6a4;
	}
}




























/*case ==========================================================*/
.hotKeywords-BTN{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: .5rem;
	font-size: 1.125rem;
	font-weight: bold;
	color:#001769;
	border-bottom: 2px solid #59b6a4;
	text-decoration: none;
	transition: .3s .03s;
}
.hotKeywords-BTN>i.bi{
	transition: .3s;
}
.hotKeywords-BTN[aria-expanded="true"]>i.bi{
	transform: rotateZ(45deg);
}
@media (min-width: 992px) {
	#collapseKeywords{
		display: block;
	}
	.hotKeywords-BTN{
		pointer-events: none;
	}
	.hotKeywords-BTN>i.bi{
		display: none;
	}
}
.hotKeywords-list{
	width: 100%;
	padding:.5rem 0;
}
.hotKeywords-list>a{
	text-decoration: none;
	display: inline-block;
	color:#84909c;
	margin:0 .3rem .3rem 0;
	transition: .3s .03s;
}
.hotKeywords-list>a:before{
	content:'#';
}
.hotKeywords-list>a:hover{
	color:#59b6a4;
}
.hotKeywords-list>a.active{
	color:#001769;
	font-weight: 400;
}
@media (min-width: 992px) {
	.hotKeywords-list>a{
		display: block;
	}
}


















/*report ==================================================================*/
.report-item .card .card-img-top{
	width: 100%;
	padding-bottom: 60%;
	overflow: hidden;
	position: relative;
}
.report-item .card .card-img-top>a{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	left: 0;right: 0;top: 0;bottom: 0;
	margin:auto;
	background-size: cover;
	background-position: center center;
	transition: .3s .03s;
}
.report-item .card:hover .card-img-top>a{
	transform: scale(1.1);
}
.report-item .card .card-body{
	padding:.25rem 1rem 1rem;
}
.report-item .card .card-title{
	width: 100%;
	display: block;
	text-decoration: none;
	font-size: 1.125rem;
	font-weight: bold;
  transition: .3s .03s;
  padding:.25rem 0;
}
.report-item .card .card-time{
	width: 100%;
	display: block;
	margin-bottom: .5rem;
}
.report-item .card .card-text{
	width: 100%;
}
.report-item .card .btn-readMore{
	text-align: right;
	text-decoration: none;
	display: inline-block;
	color:#00e5b9;
	transition: .3s .03s;
}
.report-item .card .btn-readMore:hover{
	color:#001769;
	padding-right: 1rem;
}
@media (min-width: 768px) {
	.report-item .card .card-title{
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  margin: .5rem 0;
	}
	.report-item .card .card-text{
		height: 3rem;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
	  overflow: hidden;
	}
}


























/*faqs =================================================================*/
.faq-list{
	width: 100%;
	display: block;
	position: relative;
}
.faq-list .faq-item{
	width: 100%;
	display: block;
	margin-bottom: 1rem;
}
.faq-list .faq-item .card-header{
	border-bottom: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background-color: transparent;
	text-decoration: none;
	transition: .3s .03s;
}
.faq-list .faq-item .card-header[aria-expanded="true"]{
	background-color: rgba(89, 182, 164, 0.05);
	color:#007e91;
}
.faq-list .faq-item .card-header i.bi{
	transition: .3s;
	font-size: 1.5rem;
	margin-right: .5rem;
}
.faq-list .faq-item .card-header[aria-expanded="true"] i.bi{
	transform: rotateZ(45deg);
}






















/*product ===============================================================*/
.products-types-list{
	width: 100%;
	display: block;
	padding:.5rem 0;
	text-align: center;
	margin-bottom: 1rem;
}
.products-types-list .product-type-item{
	border-color: #001769;
	color: #001769;
	margin:.15rem 0;
}
.products-types-list .product-type-item:hover{
	border-color: #59b6a4;
	color:#59b6a4!important;
}
.products-types-list .product-type-item.active{
	border-color: #001769;
	background-color: #001769;
	color:#ffffff!important;
}

.product-list{
	width: 100%;
	display: block;
	position: relative;
	padding:1rem 0;
}
.product-list .product-item{
	width:100%;
	display: block;
	position: relative;
	text-decoration: none;
	transition: .3s .03s;
}
.product-list .product-item .img{
	width: 100%;
	padding-bottom: 100%;
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	transition: .3s;
}
.product-list .product-item:hover .img{
	transform: scale(0.95);
}
.product-list .product-item .product-name{
	width: 100%;
	display: block;
	position: relative;
	padding:.5rem;
	font-weight: normal;
	text-align: center;
	border-top:1px solid #59b6a4;
}
.product-list .product-item:hover .product-name{
	border-top:1px solid #00e5b9;
}

.product-type-info{
	width: 100%;
	display: block;
	padding: 1.5rem;
	background-color: #fafafa;
}

.product-content{
	width: 100%;
	display: block;
	position: relative;
}

.product-content .product-img .carousel-inner .carousel-item .img{
	width: 100%;
	padding-bottom: 100%;
	display: block;
	position: relative;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}
.product-content .product-img .carousel-control-prev{
	background-image: url(../images/prev.png);
	background-repeat: no-repeat;
	background-position: center center;
}
.product-content .product-img .carousel-control-next{
	background-image: url(../images/next.png);
	background-repeat: no-repeat;
	background-position: center center;
}


.product-content .product-type{
	width: 100%;
	display: block;
	margin-bottom: 1.5rem;
}
.product-content .product-type>strong{
	width: 100%;
	padding: .5rem 0;
	margin-bottom: .8rem;
	display: block;
	position: relative;
	border-bottom: 2px solid #59b6a4;
}
.product-content .product-type-list{
	width: 100%;
	display: block;
	position: relative;
	margin:.5rem 0;
}
.product-content .product-type-list>a.btn{
	display: inline-block;
	color:#001769;
	border-color: #001769;
	margin-bottom: .2rem;
}
.product-content .product-type-list>a.btn:hover{
	color:#ffffff;
	background-color: #001769;
}




















/*member ========================================================*/
.members-list{
	width: 100%;
	display: block;
	position: relative;
}
.members-list .member-item{
	padding: 1rem .5rem;
	display: block;
	position: relative;
	font-weight: 600
}
.members-list .member-item .member-block{
	width: 100%;
	display: block;
	background-color: #ffffff;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	text-align: center;
	padding:1rem;
}
.members-list .member-item .member-block .member-photo>img{
	max-width: 100%;
	width: 150px;
	margin-bottom: 1rem;
}
.members-list .member-item .member-block .member-name>strong{
	display: block;
	font-size: 1.125rem;
}
.members-list .member-item .member-block .member-name>small{
	display: block;
	color:#353535;
}
.members-list .member-item .member-block .member-title{
	color:#8c7a73;
	min-height: 3rem;
	margin-bottom: .5rem;
}











/*awards =====================================================*/
.awards-block{
	background-color: #ededed;
	position: relative;
}
.awards-slick-list{
	width: 100%;
	display: block;
	padding:1rem 40px;
	position: relative;
}
.awards-slick-list .awards-item{
	width: 100%;
	padding:.5rem;
}
.awards-slick-list .slick-arrow{
	width: 30px;
	height: 30px;
	display: block;
	font-size: 0;
	border:0;
	background-color: transparent;
	position: absolute;
	top: 0;bottom: 0;
	margin: auto 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	transition: .3s .03s;
}
.awards-slick-list .slick-arrow.slick-prev{
	left: 5px;
	background-image: url(../images/prev.png);
}
.awards-slick-list .slick-arrow.slick-next{
	right: 5px;
	background-image: url(../images/next.png);
}
.awards-slick-list .slick-arrow.slick-prev:hover{
	left: -5px;
}
.awards-slick-list .slick-arrow.slick-next:hover{
	right: -5px;
}



.awards-item .card a.card-img{
	width: 100%;
	padding-bottom: 100%;
	display: block;
	overflow: hidden;
	position: relative;
}
.awards-item .card .card-img>span{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	left: 0;right: 0;top: 0;bottom: 0;
	margin:auto;
	background-size: cover;
	background-position: center center;
	transition: .3s .03s;
	background-repeat: no-repeat;
}
.awards-item .card:hover .card-img>span{
	transform: scale(1.1);
}
.awards-item .card .card-title{
	width: 100%;
	display: block;
	font-size: 1.125rem;
	font-weight: bold;
	text-decoration: none;
  	overflow: hidden;
  	text-overflow: ellipsis;
  	white-space: nowrap;
  	transition: .3s .03s;
  	margin: 1rem 0;
}
.awards-item .card .card-text{
	width: 100%;
  	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color:#8c7a73;
}

@media (min-width: 768px) {
	.awards-item .card .card-title{
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	}
	.awards-item .card .card-text{
		height: 3rem;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
	  overflow: hidden;
	}
}























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


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


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



}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}