@import "all.min.css";
@import "bootstrap.min.css";
@import "flatpickr.min.css";
@import "default.css";
@import "content.css";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;700&display=swap');

/* 共用變數 */
:root {
	--green-primary-100:rgba(0, 124, 105, 1);
	--green-active-100:rgba(5, 217, 184, 1); 
	--green-heavy-100:rgba(0, 95, 81, 1);
	--green-heavy2-100:rgba(0, 55, 47, 1);
	--green-heavy-80:rgba(0, 95, 81, .8);
	--green-heavy-50:rgba(0, 95, 81, .5);
	--green-cositive:rgba(235, 250, 247, 1);
	--green-cositive2:rgba(245, 252, 251, 1);
	--green-active2-100:#00FFD7; 
	--border:#eee;
	--textshadow-02: 0px 5px 15px rgba(0, 0, 0, 0.1);
}

body, td, th, table, caption, tbody, tfoot, thead, tr, th,
td, img, ul, li, ol, dl, dt, dd, span, fieldset, form, label,
legend, input, textarea, select, button, form {
	border: none;
	outline: none;
	margin: 0;
	padding: 0;
	font-family: Arial, '微軟正黑體', Microsoft JhengHei, '新細明體', MingLiU, sans-serif;
}
section{
	position: relative;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
	font-family: Arial, '微軟正黑體', Microsoft JhengHei, '新細明體', MingLiU, sans-serif;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	image-rendering: -webkit-optimize-contrast;
}

button{
    border-radius: 5px;
}
.btn-primary,.detail .btn.btn-primary{
	background-color: var(--green-primary-100);
}
.btn-outline-primary,.detail .btn.btn-outline-primary {
    color: var(--green-primary-100)!important;
    background-color: rgba(255,255,255,1);
    background-image: none;
    border-color: var(--green-primary-100);
}
.btn-primary:hover,.detail .btn.btn-primary:hover{
    background-color: var(--green-active-100);
    border-color: var(--green-active-100);
    color: #fff;
}
.btn-outline-primary:hover,.detail .btn.btn-outline-primary:hover {
    background-color: #fff;
    border-color: var(--green-active-100);
    color: var(--green-active-100) !important;
}
@media (max-width: 576px) {
	.btnBlk .btn {
		min-width: 7em;
		transition: all .5s;
	}
}
body {
	font-size: 1rem;
	line-height: inherit;
	position: relative;
	background-color: #fff;
	background-position: top center;
	background-repeat: no-repeat;
	background-size:100% auto ;
	/* background-image: url(../images/web-bg.png); */
}
li {
	line-height: inherit;
}

img {
	border: 0 none;
	max-width: 100%;
	-ms-interpolation-mode: bicubic;
}
a {
    text-decoration: none;
}
::-webkit-input-placeholder {
	color: #afafaf;
}

::-moz-placeholder {
	color: #afafaf;
}

:-ms-input-placeholder {
	color: #afafaf;
}

input:-moz-placeholder {
	color: #afafaf;
}

input[type="text"]::-ms-clear,
input[type="text"]::-ms-reveal {
	display: none;
}

a:focus,
select:focus,
input:focus,
button:focus,
textarea:focus {
	border: 2px dotted orange;
	outline: none;
}

.sr-only-focusable:focus{
	position: absolute;
}
.sr-only {
	z-index: 999;
}

a.sr-only {
	color: #fff !important;
}

[class*='div_'] {
	position: absolute;
	left: 0;
}

[class*='div_'] a {
	color: #d2d2d2;
}

.div_u {
	top: 27px;
	left: 0px;
}

.div_l{
	top: 0px;
}
.div_c{
	top: 140px;
	z-index: 10;
}
#index .div_c{
	top: 0px;
	left: -10px;
}
/* 布局 */
.wrapper {
	margin: 0 auto;
	width: 100%;
	position: relative;
	max-width: 1024px;
}
.wrapper.detail:has(.filter-search) {
	max-width: inherit;
}
/* .contentContainer,#contentContainer{
	max-width: 1024px;
	margin: 0 auto;
} */
@media (max-width: 1200px) {
	.wrapper{
		padding: 0 1rem;
	}
	.wrapper.detail,
	.wrapper.jspBlock,
	.wrapper:has(.wrapper.jspBlock),
	.wrapper:has(.detail){
		padding: 0;
	}
}
main{
	position: relative;	
	padding: 0 0 60px;
	min-height: calc(100vh - 123px);
}
/* title */
.collection-title{
	width: 100%;
	max-width: 1024px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin: 40px auto 20px;
	padding: 0 10px;
}
#index .collection-title{
	margin: 60px auto 30px;
}
.collection-title .title-h3{
	position: relative;
	padding: 0 0 0 25px;
}
.collection-title .title-h3 p{
	font-size: 2rem;
	line-height: 1.25;
	font-weight: 600;
	transition: all .5s;
}
.collection-title .title-h3 span{
	font-size: 1rem;
	line-height: 1.2;
	color: #757575;
	text-transform: uppercase;
	transition: all .5s;
	letter-spacing: -0.5px;
}
.collection-title .title-h3::before {
	content: '';
    display: inline-block;
    width: 11px;
    height: 28px;
    background-color: var(--green-active-100);
    display: block;
    transform: skew(-20deg);
    margin: 0 0.5rem 0 0.25rem;
    position: absolute;
    top: 5px;
    left: 0;
}
/* 內頁標題 */
.page-title{
	background-repeat: no-repeat;
	background-position:center;
	background-size: 100% auto;
	height: 240px;
	padding: 70px 0 0 0;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.page-title::before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .5);
}
.page-title .h2{
	font-size: 2.25rem;
	font-weight: 600;
	color: #fff;
	margin: 0;
	position: relative;
	z-index: 1;
	text-align: center;
	line-height: 1;
}
/* 社群分享 */
.share-box{
	display: flex;
	align-items: center;
	padding: 0 0 3px;
}
.share-box>p{
	padding: 0 0 0 20px;
	background: url(../images/icon-svg/icon-eye.svg) left center no-repeat;
	color: #333;
	margin: 0 00px 0 0;
}
.share-box>.share{
	display: flex;
}
.share-box>.share>a{
	display: flex;
	font-size: 0;
	border-radius: 100%;
	background-color: var(--green-heavy-100);
	margin: 0 0 0 8px;
	width: 38px;
	height: 38px;
	opacity: .8;
	background-position: center;
	background-repeat: no-repeat;
	transition: all .5s;
}
.share-box>.share>a:hover{
	opacity: 1;
	background-color: var(--green-active-100);
}
.share-box>.share>a.print{
	background-image: url(../images/icon-svg/icon-print.svg);
	background-size: 24px auto;
}
.share-box>.share>a.facebook{
	background-image: url(../images/icon-svg/icon-facebook.svg);
	background-size: auto 24px;
}
.share-box>.share>a.line{
	background-image: url(../images/icon-svg/icon-line.svg);
	background-size: 23px auto;
}
.share-box>.share>a.link{
	background-image: url(../images/icon-svg/icon-link.svg);
	background-size: 18px auto;
}

@media (max-width: 991px) {
	.collection-title .title-h3 p{
		font-size: 1.65rem;
	}
	.collection-title .title-h3 span{
		font-size: .8rem;
	}
	.collection-title .title-h3::before {
		width: 8px;
		height: 23px;
		top: 4px;
		left: 0;
	}
	.page-title{
		height: 200px;
		padding: 60px 0 0 0;
	}
	.collection-title .title-h3 {
		padding: 0 0 0 20px;
	}
}
@media (max-width: 768px) {
	.share-box>.share>a{
		margin: 0 0 0 7px;
		width: 35px;
		height: 35px;
	}
	.share-box>.share>a.print{
		background-size: 20px auto;
	}
	.share-box>.share>a.facebook{
		background-size: auto 20px;
	}
	.share-box>.share>a.line{
		background-size: 19px auto;
	}
	.share-box>.share>a.link{
		background-size: 16px auto;
	}
	.collection-title .title-h3 {
		/* padding: 0 0 0 20px; */
	}
	/* .collection-title .title-h3 p{
		font-size: 1.5rem;
	} */
	.collection-title .title-h3 span{
		/* font-size: .875rem; */
	}
	.collection-title .title-h3::before {
		/* width: 8px;
		height: 20px;
		top: 4px;
		left: 0; */
	}
	.page-title{
		height: 180px;
		padding: 60px 0 0 0;
	}
	.page-title .h2 {
		font-size: 1.725rem;
	}
}
@media (max-width: 576px){
	.collection-title {
		margin: 40px auto 20px;
	}
	.collection-title:has(.share-box) {
		flex-flow: column;
		align-items: flex-start;
	}
	.collection-title .title-h3 {
		/* padding: 0 0 0 18px; */
	}
	.collection-title .title-h3 p{
		/* font-size: 1.375rem; */
	}
	.collection-title .title-h3::before {
		/* width: 7px;
		height: 18px;
		top: 4px;
		left: 0; */
	}
	.share-box{
		align-items: flex-end;
		justify-content: space-between;
		margin-top: 10px;
		padding: 15px 5px 0;
		border-top: 1px solid #ddd;
		align-items: center;
		width: 100%;
	}
	.share-box>p {
		padding: 0 0 0 17px;
		margin: 0 ;
		background-size: 14px auto;
	}
	.page-title{
		height: 150px;
		padding: 50px 0 0 0;
	}
	.page-title .h2 {
		font-size: 1.5rem;
	}
}
@media (max-width: 414px){
	.collection-title {
		margin: 40px auto 20px;
	}
}
/* see more */
.see-more{
	display: flex;
	align-items: center;
	color: #000;
	height: 36px;
	line-height: 35px;
	padding: 0 23px 0 0;
	border-bottom: 1px solid #000;
	background: url(../images/icon-svg/icon-arrow-b.svg) right center no-repeat;
	background-size: 18px auto;
	margin: 0 0 5px 0;
	width: auto;
}
.see-more:hover{
	color: var(--green-active-100);
	text-decoration: none;
	border-bottom: 1px solid var(--green-active-100);
	background: url(../images/icon-svg/icon-arrow-ga.svg) right center no-repeat;
}

.see-more-s{
	height: 23px;
	line-height: 22px;
	background-size: 13px auto;
	padding: 0 18px 0 0;
	border-bottom: 1px solid var(--green-active-100);
	float: right;
	display: block;
}
.see-more-s:hover{
	color: var(--green-active-100);
	text-decoration: none;
	border-bottom: 1px solid var(--green-active-100);
	background: url(../images/icon-svg/icon-arrow-ga.svg) right center no-repeat;
	background-size: 13px auto;
}


@media (max-width: 1080px){
	.see-more{
		margin: 0 20px 5px 0;
	}
	.see-more-s{
		margin: 0 ;
	}
}
/* header */
header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	border-bottom: 1px solid rgba(255, 255, 255, .2);
	/* border-bottom: 1px solid rgba(0, 124, 105, .5); */
	transition: all .5s;
}
#index header{
	background: rgba(0, 0, 0, 0);
	border-bottom: 1px solid rgba(0, 101, 85, 0);
}
#index header::before {
	content: '';
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 110px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
}

header.sticky {
	position: fixed;
	background-color: rgb(0 95 81 / 90%);
}
#index header.sticky{
	background-color: rgb(0 95 81 / 90%);
}
#index header.sticky::before {
	width: 100%;
	height: 80px;
	/* background: rgba(0, 0, 0, 0.2); */
	background: rgba(0, 0, 0, 0);
}
header.sticky::before {
	content: '';
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 70px;
	/* background: rgba(0, 0, 0, 0.2); */
	background: rgba(0, 0, 0, 0);
}
header>.wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: inherit;
	height: 70px;
}
#index header>.wrapper {
	height: 80px;
}
/* logo */
.logoBlk{
	padding: 0px 0 0 30px;
	height: 100%;
	display: flex;
	align-items: center;
}
.logoBlk h1{
	line-height: 1;
	display: flex;
}
.toggleBlk {
	display: none;
}

/* nav */
nav {
	display: flex;
	height: 100%;
}
.navBlk {
	display: flex;
	align-items: center;
}
.navBlk{
	margin: 1px 0 0;
	height: 100%;
}
.navBlk>ul{
	display: flex;
	list-style-type: none;
	height: 100%;
	align-items: center;
}
.navBlk>ul>li{
	height: 100%;
}
.navBlk>ul>li>a{
	text-decoration: none;
	color: #fff;
	height: 100%;
}
.navBlk>ul>li>a{
	display: flex;
	padding: 0 15px;
	align-items: center;
	font-size: 1.125rem;
	background-color: rgba(0, 101, 85, 0);
}
.navBlk>ul>li.search-btn>a{
	text-indent: -200vw;
	background: rgba(0, 101, 85, .9) url(../images/icon-svg/icon-search.svg) center no-repeat;
	width: 70px;
}
#index .navBlk>ul>li.search-btn>a{
	background-color: rgba(0, 101, 85, 0);
	width: 80px;
}
#index .navBlk>ul>li.search-btn>a:hover{
	background-color:rgba(0, 0, 0, 0.2);
}
#index header.sticky .navBlk>ul>li.search-btn>a,header.sticky .navBlk>ul>li.search-btn>a{
	background-color: rgba(0, 0, 0, .1025);
}
#index header.sticky .navBlk>ul>li.search-btn>a:hover,header.sticky .navBlk>ul>li.search-btn>a:hover{
	background-color: rgba(0, 0, 0, .2);
}
.navBlk>ul>li>a:hover{
	background-color:rgba(0, 0, 0, 0.2);
	color: #fff;
}
.navBlk>ul>li.search-btn>a:hover{
	background-color:var(--green-heavy-80);
}

@media (max-width: 1320px) {
	header>.wrapper {
		padding: 0;
	}
}
@media (max-width:991px) {
	[class*='div_'] {
		visibility: hidden;
	}

	header {
		height: auto;
		/* border-bottom: 1px solid rgba(0, 124, 105, 1); */
	}

	header>.wrapper,#index header>.wrapper{
		height: 60px;
		/* box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%); */
	}
	#index header.sticky::before,header.sticky::before {
		height: 60px;
	}
	.logoBlk {
		padding: 0px 0 0 10px;
	}
	.logoBlk h1 img{
		height: 30px;
		width: auto;
	}

	.toggleBlk,
	.toggleBlk a,
	header nav.active {
		display: block;
	}

	.toggleBlk {
		position: absolute;
		right: 0;
		top: 0px;
		z-index: 9999;
	}

	.toggleBlk>a {
		display: block;
		padding: 20px 15px;
		width: 60px;
		height: 60px;
		text-indent: -9999px;
		font-size: 0;
		background-color: var(--green-heavy-80);
	}

	.toggleBlk .icon-bar {
		display: block;
		width: 30px;
		height: 2px;
		border-radius: 1px;
		background-color: #fff;
	}

	.toggleBlk .icon-bar+.icon-bar {
		margin-top: 6px;
	}

	.toggleBlk a.active .icon-bar {
		margin-top: 0;
	}

	.toggleBlk a.active .icon-bar:nth-child(1) {
		transform: translateY(9px) rotate(135deg);
		-moz-transform: translateY(9px) rotate(135deg);
		-webkit-transform: translateY(9px) rotate(135deg);
		top: 6px;
	}
	.toggleBlk a.active .icon-bar:nth-child(2) {
		display: none;
	}
	.toggleBlk a.active .icon-bar:nth-child(3) {
		transform: translateY(6px) rotate(-135deg);
		-moz-transform: translateY(6px) rotate(-135deg);
		-webkit-transform: translateY(6px) rotate(-135deg);
		top: 6px;
		margin-top: 1px;
	}

	.toggleBlk a.active {
		border: none;
	}	
	header nav {
		display: none;
		width: 65%;
		height: 100vh;
		/* background: linear-gradient(0deg, rgba(0, 26, 61, 1) 0%, rgba(0, 116, 221, 1) 100%); */
		background: #62C7B5;
		position: absolute;
		top: 0;
		right: 0vw;
		background-color: rgb(0 95 81 / 96%);
		filter: drop-shadow(15px 0px 25px rgba(0, 0, 0, 0.5));
	}
	header nav.active {
		display: block;
		padding-bottom: 15px;
		transition: all 0.25s ease-in;
	}
	.navBlk {
		width: 100%;
		margin-top: 60px;
		border-top: 1px solid rgb(0 119 102);
	}
	.navBlk>ul{
		flex-flow: column;
		width: 100%;
	}
	.navBlk>ul>li{
		height: auto;
		width: 100%;
		border-bottom: 1px solid rgb(0 119 102);
	}
	.navBlk>ul>li a{
		padding: 15px;
		justify-content: center;
	}
	.navBlk>ul>li.search-btn>a {
		/* text-indent: -0; */
		background: url(../images/icon-svg/icon-search.svg) center no-repeat;
		width: 100%;
		margin: 0 auto;
		height: 50px;
	}
	.navBlk>ul>li.search-btn>a:hover {
		background-color: rgba(0, 0, 0, 0.2);
	}
	#index header.sticky .navBlk>ul>li.search-btn>a, header.sticky .navBlk>ul>li.search-btn>a{
		background-color: rgba(0, 0, 0, 0);
	}
	#index .navBlk>ul>li.search-btn>a{
		width: 100%;
	}
}
@media (max-width: 768px){
	[class*='div_'] {
		display: none;
	}
	.navBlk {
		margin-top: 50px;
	}
	header>.wrapper,#index header>.wrapper{
		height: 50px;
		/* box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%); */
	}
	#index header.sticky::before,header.sticky::before {
		height: 50px;
	}
	.toggleBlk>a {
		padding: 15px 10px;
		width: 50px;
		height: 50px;
	}

	.toggleBlk .icon-bar {
		width: 30px;
	}
}
@media (max-width: 576px){
	
}
@media (max-width:414px) {
}

/* index banner*/
section.banner{
	position: relative;
	z-index: 1;
	filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.1));
}
section.banner>img{
	width: 100%;
	height: auto;
}
.search-box{
	height: 100%;
	width: 50%;
	background: url(../images/banner-mask.svg) right center no-repeat;
	background-size: auto 100%;
	position: absolute;
	right: 0;
	top: 0;
	display: flex;
	flex-flow: column;
	align-items: flex-end;
	padding: 0 40px 0 0 ;
	transition: all .5s;
}
.search-info {
	margin-top: 38%;
	width: 64%;
}
.search-info .search-title{
	color: rgb(255 255 255 / 86%);
	font-size: 1.125rem;
	margin-bottom: 1.25rem;
	padding: 0 0 0 10px;
	position: relative;
}
.search-info .search-title>div:has(span){
	margin:  10px 0 0;
}
.search-info .search-title .title-text{
	color: rgb(255 255 255 / 86%);
}
.search-info .search-title .title-text>span{
	letter-spacing: 0.02em;
	font-weight: 700;
	font-size: 3.125rem;
	line-height: 1;
	color: var(--green-active2-100);
	margin-right: 10px;
}
.banner-input{
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid var(--green-active-100);
	border-radius: 30px;
	width: 100%;
	display: flex;
	height: 50px;
	position: relative;
}
.banner-input input[type="text"]{
	background-color: transparent;
	background-image: url(../images/icon-svg/icon-search-g.svg);
	background-position: left 15px center;
	background-size: 27px auto;
	background-repeat: no-repeat;
	padding: 5px 0 0 50px;
	color: #333;
	border: 0;
	width: 82%;
	border-radius: 30px;
}
.banner-input input[type="text"]::placeholder{
	color: #333;
	font-size: 1rem;
}
.banner-input input[type="text"]:focus{
	border: 2px dotted orange;
}
.banner-input .search{
	background-color: transparent;
	color: var(--green-heavy-100);
	width: 18%;
	height: 100%;
	border-radius: 30px;
	cursor: pointer;
	padding: 5px 0 0;
	position: absolute;
    top: 0;
    right: 0;
}
.banner-input .search:hover{
	background-color:var(--green-active-100) ;
	color: #fff;
}
.search-tag{
	margin: 20px 0 0;
	padding: 0 0 0 15px;
}
.search-tag>ul{
	display: flex;
	list-style-type: none;
	flex-wrap: wrap;
}
.search-tag>ul>li{
	color: #fff;
	margin: 0 0 5px 0;
}
.search-tag>ul>li:first-child{
	margin: 0 5px 5px 0;
}
.search-tag>ul>li>a{
	color: #fff;
}
.search-tag>ul>li:has(a)::after{
	content: '、';
}
.search-tag>ul>li:last-child:has(a)::after{
	content: '';
}
.search-box .button{
	display: flex;
	justify-content: flex-end;
	margin-top: 60px;
}
.search-box .button .see-more{
	color: #fff;
	background: url(../images/icon-svg/icon-arrow.svg) right center no-repeat;
	border-bottom: 1px solid var(--green-active-100);
	background-size: 18px auto;
}
.search-box .button .see-more:hover{
	color: var(--green-active-100);
	border-bottom: 1px solid var(--green-active-100);
	background: url(../images/icon-svg/icon-arrow-ga.svg) right center no-repeat;
}
@media (max-width: 1320px) {
	.search-info {
		margin-top: 30%;
		width: 67%;
	}
}
@media (max-width: 1200px) {
	.search-info {
		margin-top: 30%;
		width: 80%;
	}
	.search-box {
		height: 100%;
		width: 50%;
		background: url(../images/banner-mask.svg) right center no-repeat;
		background-size: 100% auto;
		padding: 0 40px;
	}
	.search-box .button{
		margin-top: 40px;
	}
	.search-tag>ul>li:first-child {
		margin: 0 0 10px 0;
		width: 100%;
	}
}
@media (max-width: 991px) {
	/* .search-tag>ul>li:first-child{
		width: 100%;
		margin-bottom: 10px;
	} */
	
	.search-box {
		width: 60%;
	}
	.search-info {
		margin-top: 20%;
		width: 100%;
	}
	.search-box {
		height: 100%;
		width: 100%;
		/* background: url(../images/banner-mask.svg) right center no-repeat;
		background-size: 0 ; */
		display: flex;
		flex-flow: column;
		justify-content: center;
		background: rgba(0, 55, 46, 0.5);
		padding: 0 20%;
	}
	.search-box .button{
		justify-content: center;
	}
	.search-tag {
		padding: 0;
	}
	.search-tag>ul {
		justify-content: center;
	}
	section.banner {
		width: 100%;
		padding: 0 0 65% 0;
		height: 0;
		overflow: hidden;
	}
	section.banner>img {
		width: auto;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		max-width: inherit;
	}
	.search-tag>ul>li:first-child {
		margin: 0 5px 0 0;
		width: auto;
	}
}
@media (max-width: 768px) {
	.search-info .search-title{
		font-size: 1.125rem;
	}
	.search-info .search-title .title-text>span {
		font-size: 2.5rem;
	}
	.search-box {
		padding: 0 10%;
	}
	section.banner {
		padding: 0 0 75% 0;
	}
}
@media (max-width: 576px){
	
	.search-title{
	/*	display: none;*/
	}
	.search-box {
		padding: 0 5%;
	}
	section.banner {
		padding: 0 0 85% 0;
	}
	.search-box .button {
		width: 100%;
	}
	.search-info .search-title {
		font-size: 1rem;
	}
	.search-info .search-title .title-text>span {
		font-size: 2rem;
	}
	.search-info .search-title {
		margin-bottom: .5rem;
	}
}
@media (max-width: 414px){
	section.banner {
		padding: 0 0 105% 0;
	}
	.search-info {
		margin-top: 15%;
	}
	.search-box .button {
		margin-top: 20px;
	}
	.search-box .see-more {
		margin: 0 0;
	}
}

/* card */
.content-card{
	display: flex;
	flex-wrap: wrap;
}
.content-card .card-box{
	width: 25%;
	padding: 0 15px;
	margin: 0 0 40px;
	transition: all .5s;
}
#index .content-card .card-box2{
	width: 100%;
	padding: 0 10px;
	margin: 5px 0 20px;
}
.content-card .card-box2{
	width: calc(100% / 3);
	padding: 0 10px;
	margin: 5px 0 30px;
}

.card-box a{
	display: block;
	background-color:var(--green-cositive2);
	border-radius: 30px;
	position: relative;
	color: #333;
	transition: all .5s;
	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0));
	border: 1px solid transparent;
	height: 100%;
}
.catalog .card-box a{
	background-color:#fbfbfb;
}
.card-box a:focus{
	outline: 2px dotted orange;
}
.card-box .card-img{
	display: block;
	border-radius: 30px;
	overflow: hidden;
	/* filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.1)); */
	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.05));
	position: relative;
	padding: 0 0 100%;
	height: 0;
}
.card-box .card-img>img{
	position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
	transition: all .5s;
	width: auto;
	height: 150%;
	max-width: inherit;
}
.card-box .card-illustrate{
	display: flex;
	justify-content: space-between;
	padding: 15px 15px;
	align-items: flex-start;
}

.card-box .card-illustrate .h6{
    font-size: 1.15rem;
    line-height: 1.2;
    color: var(--green-heavy-100);
    margin: 0;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    /* width: 60%; */
    /* display: -webkit-box; */
    /* -webkit-box-orient: vertical; */
    /* -webkit-line-clamp: 2;*/
}
.card-box.card-box2 .card-illustrate .h6{
	white-space: wrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.card-box .card-illustrate:has(.tag) .h6
/* ,.card-box .card-illustrate:has(.total) .h6 */
{
	width: calc(100% - 70px);
}
.card-box a:hover .card-illustrate .h6{
	color: var(--green-active-100);
}
.card-box .card-illustrate span.total{
	font-size: .875rem;
	color: #666;
	display: block;
	line-height: 1.3;
	width: 100%;
}
.card-box .card-illustrate:has(.total){
	flex-wrap: wrap;
	padding: 15px 20px 10px;
}
.card-box .card-illustrate:has(.total) .h6{
	/* line-height: 1; */
}
.card-box a:hover{
	text-decoration: none;
	position: relative;
	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.1));
	border: 1px solid var(--green-active-100);
	background-color: #fff;
}
.card-box a:hover .card-img{
	/* border: 1px solid var(--green-active-100); */
	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0));
	transition: all .5s;
}
.card-box a:hover .card-img>img{
	width: auto;
	height: 160%;
	max-width: inherit;
}

#index .content-card .card-box:nth-of-type(20)~.card-box{
	display: none;
}
#index .content-card .card-box:nth-of-type(20)~.card-box.active{
	display: block !important;
}
#index .content-card .read-more {
    text-align: center;
    margin: 0 auto;
    padding: 1rem 0;
    width: 100%;
}
#index .content-card  .read-more button {
    background-color: initial;
    border: none;
    color: var(--green-primary-100);
    cursor: pointer;
    font-size: 1.125rem;
}
#index .content-card  .read-more button:hover {
    color: var(--green-active-100);
}
#index .card-box2 a{
	background-color: var(--green-cositive2);
}
.card-box2 .card-img{
	position: relative;
	/* padding: 0 0 67%; */
	padding: 0 0 75%;
	background-color: var(--green-cositive2);
}
.card-box2 a:hover .card-img{
	background-color: #fff;
}
.card-box2 .card-img>img{
	width: 120%;
	height: auto;
	/* max-width: 400px; */
}
.card-box2 a:hover .card-img>img{
	width: 130%;
	height: auto;
	/* max-width: 450px; */
}
.card-box2:has(.card-text) .card-illustrate{
	padding: 20px 20px 5px;
}
.card-box2 .card-illustrate{
	padding: 15px 20px;
}
.card-box2 a:hover,#index .card-box2 a:hover{
	background-color: #fff;
}
.card-box2 a:hover .see-more-s{
	color: var(--green-active-100);
    text-decoration: none;
    border-bottom: 1px solid var(--green-active-100);
    background: url(../images/icon-svg/icon-arrow-ga.svg) right center no-repeat;
    background-size: 13px auto;
}

.card-box .card-text{
	padding: 0 20px ;
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-height: 1.5;
	margin-bottom: 15px;
}
.card-box .card-text p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-height: 1.5;
	height: 3rem;
	padding: 5px 0 0;
	margin: 0 0 10px;
}
.card-box .card-text .day{
	font-size: .875rem;
	display: block;
	color: #666;
	line-height: 1;
	/* color: var(--green-heavy-80); */
}
/* 
.content-card2 .card-box2 .card-illustrate{
	padding: 20px 20px 10px;
} */

/* 推薦輪播卡片 */
.content-card.sliderbox-card2 .card-box{
	width: 100%;
	margin: 0;
	padding: 0 10px;
	margin: 5px 0 20px;
}
.sliderbox.sliderbox-card2 .owl-nav {
    top: 45%;
}

/* 藏品list */
.content-list{
	padding: 0 15px;
	margin: 0 auto 40px;
}
.content-list table{
	width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
}
.content-list table .w-5{
	width: 5%;
	text-align: center;
}
.content-list table .w-10{
	width: 10%;
	text-align: center;
}
.content-list table .change-day{
	width: 110px;
	text-align: center;
}
.content-list table thead th{
	padding: 15px 10px;
	background-color: var(--green-primary-100);
	color: #fff;
}
.content-list table tbody td {
	padding: 12px 10px;
	text-align: center;
}
.content-list table tbody td .h6 {
    font-size: 1.075rem;
    color: var(--green-heavy-100);
    margin: 0;
	text-align: left;
}
.content-list table tbody td img{
	width: 60px;
	height: auto;
}
.content-list table tbody tr{
	border-bottom: 1px solid #eee;
}
.content-list table tbody tr:nth-child(even){
	background-color: #fbfbfb;
}
.content-list table tbody tr:hover,.content-list table tbody tr:nth-child(even):hover{
	background-color:rgba(235, 250, 247, 0.5);
}
.change-link{
	/* display: flex; */
	font-size: 0;
	margin: 0 auto;
	width: 100%;
    height: 30px;
    display: block;
    background: url(../images/icon-img/link.png) center no-repeat;
    background-size: 24px auto;
}
.change-link:hover{
	opacity: .5;
}
.card-filter{
	display: flex;
	justify-content: space-between;
	margin: 60px auto 40px;
	padding: 0 10px;
	align-items: center;
}
.card-filter>p{
	line-height: 30px;
}
.card-filter>p>span{
	padding: 0 0 0 5px ;
	font-weight: 900;
	color: var(--green-primary-100);
}
.card-filter .array-list{
	display: flex;
}
.card-filter .array-list>div{
	display: flex;
	position: relative;
}
.card-filter .array-list a{
	margin: 0 2px;
	display: block;
	font-size: 1.025rem;
	line-height: 1;
	padding: 5px 9px;
	color: #444444;
	border: 1px solid #eee;
	border-radius: 20px;
	text-decoration: none;
}
.card-filter .array-list a:focus{
	outline: 2px dotted orange;
}
/* .card-filter .array-list a.WaterFall{
	background: url(../images/icon-svg/icon-imgmode-b.svg) 11px 7px  no-repeat;
	background-size: 11px auto;
}
.card-filter .array-list a.List{
	background: url(../images/icon-svg/icon-listmode-b.svg) 11px 7px  no-repeat;
	background-size: 11px auto;
} */
.card-filter .array-list a.active,
.card-filter .array-list a.active:hover{
	border: 1px solid var(--green-primary-100);
	color: var(--green-primary-100);
	font-weight: 600;
	background-color: #fff;
}
.card-filter .array-list a:hover{
	color: var(--green-heavy-100);
	background-color: var(--green-cositive);
	border: 1px solid var(--green-cositive);
}
/* .card-filter .array-list a.WaterFall.active,.card-filter .array-list a.WaterFall.active:hover{
	background: url(../images/icon-svg/icon-imgmode-g.svg) 11px 7px  no-repeat;
	background-size: 11px auto;
	background-color: #fff;
}
.card-filter .array-list a.List.active,.card-filter .array-list a.List.active:hover{
	background: url(../images/icon-svg/icon-listmode-g.svg) 11px 7px  no-repeat;
	background-size: 11px auto;
	background-color: #fff;
} */
.card-filter .array-list a.List:hover,.card-filter .array-list a.WaterFall:hover{
	background-color: var(--green-cositive);
}
/* .content-card .card-box a .card-img::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color:var(--green-heavy-80);
	background-image: url(../images/icon-svg/icon-arrow.svg);
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 30px;
	z-index: 10;
	opacity: 0;
}
.content-card .card-box a:hover .card-img::before{
	opacity: 1;
} */

@media (max-width:1320px) {
	
}
@media (max-width:1200px) {
	.content-card .card-box{
		width: calc(100% / 3);
		margin: 0 0 30px;
	}
	#index .content-card .card-box2{
		width: 100%;
	}
	#index .content-card .card-box:nth-of-type(8)~.card-box{
		display: none;
	}
	#index .content-card .card-box:nth-of-type(8)~.card-box.active{
		display: block !important;
	}
}
@media (max-width:992px) {
	.content-list table .w-5 {
		width: 10%;
	}
	.card-box .card-illustrate .h6{
		font-size: 1.125rem;
	}
	.card-box .card-illustrate {
		padding: 12px 18px;
	}
	.card-box2:has(.card-text) .card-illustrate{
		padding: 20px 20px 5px;
	}
	.content-card .card-box2{
		width: calc(100% / 2);
		padding: 0 10px;
		margin: 0 0 20px;
	}
}
@media (max-width: 768px){
	.content-card .card-box{
		width: calc(100% / 2);
		padding: 0 10px;
		margin: 0 0 20px;
	}
	#index .content-card .card-box2{
		width: 100%;
	}
	.card-box .card-illustrate .h6 {
		font-size: 1.125rem;
	}
	.card-illustrate .tag{
		margin: 0;
	}
	.card-box .card-illustrate {
		padding: 10px 15px;
	}
	.card-box .card-illustrate span.total {
		font-size: .875rem;
	}
	.card-box a {
		border-radius: 15px;
	}
	.card-box .card-img {
		border-radius: 15px;
	}
	.card-filter{
		flex-flow: column;
		margin: 60px auto 30px;
	}
	.tag-list.search-tag ~ .card-filter{
		margin: 20px auto 30px;
	}
	.card-filter>p{
		margin-bottom: 10px;
	}
	.card-box2 .card-illustrate{
		padding: 15px 15px ;
	}
	.card-box2:has(.card-text) .card-illustrate {
		padding: 20px 15px 5px;
	}
	.card-box .card-text {
		padding: 0 15px ;
	}
	
	#index .card-box2:has(.card-text) .card-illustrate{
		padding: 20px 15px 5px;
	}
	#index .card-box2 .card-text {
		padding: 0 15px 0;
	}
}
@media (max-width: 576px){
	.content-card .card-box2{
		width: calc(100% / 1);
	}
	.content-list table thead th{
		padding: 10px 5px;
	}
	.content-list table tbody td {
		padding: 10px 5px;
	}
	.content-list table .change-day{
		width: 100px;
	}
	.content-list{
		padding: 0;
	}
	.content-list table .w-5 {
		width: 12%;
	}
	.content-list table .w-10 {
		width: 15%;
	}
	.content-list table tbody td .h6 {
		font-size: 1rem;
	}
	.card-box .card-illustrate {
		padding: 10px 15px;
	}
	.card-filter{
		padding: 0;
		margin: 40px auto 20px;
	}
}
@media (max-width: 486px){
	.content-card .card-box{
		width: 100%;
		/* padding: 0 5px; */
		margin: 0 0 20px;
	}
}
@media (max-width:414px) {
	.card-filter{
		margin: 40px auto 20px
	}
	.card-filter .array-list a {
		padding: 5px 7px;
	}
	/* .card-filter .array-list>div:first-child>a {
		padding: 5px 7px 5px 24px;
	} */
}

/* 頁數 */

.page {
    margin: 2.25rem 0 10px 0;
}

.page ul {
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
}

.page ul li {
    border: none;
    padding: 0;
    text-indent: initial;
    margin: 0;
}

.page ul li::before {
    display: none;
}

.page ul li a {
	display: block;
    width: auto;
    height: 32px;
    font-size: 0.875rem;
    line-height: 22px;
    color: #464646;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
	padding: 0 0.5rem;
	min-width: 32px
}

.page ul li a:hover {
    background-color: #F2FCFA;
	color: #464646;
	text-decoration: none;
}

.page ul li a.active {
    background-color: var(--green-primary-100);
    color: #fff;
}

.page ul li a i::before {
    vertical-align: middle;
}

.page-display {
    text-align: center;
    color: #757574;
    font-size: .875rem;
    margin-top: 1.5rem;
}


/* .pagesnumber{
    margin: 10px auto 40px;
    display: flex;
    justify-content: center;
}
.pagesnumber ul{
    display: flex;
    justify-content: center;
    padding: 0;
	margin: 0;
	list-style-type: none;
}
.pagesnumber ul li{
	margin: 0 1px;
}
.pagesnumber ul li a{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #333;
	padding: 15px;
	line-height: 1;
	height: 40px;
	text-decoration: none;
	transition: all .1s;
}
.pagesnumber ul li a:hover{
	background-color: var(--green-cositive);
	border-radius: 100%;
}
.pagesnumber ul li a.pagesnumber-arrive{
	background-color: var(--green-primary-100);
	color: #fff;
	width: 40px;
	border-radius: 100%;
}
.pagesnumber ul li a:focus {
    border: 2px dashed orange;
    outline: none;
}
.pagesnumber ul li a.pagesnumber-btn{
	display: block;
	width: 40px;
	height: 40px;
	background-position: center;
	background-repeat: no-repeat;
}
.pagesnumber ul li a.pagesnumber-btn:hover{
}
.pagesnumber ul li a.pagesnumber-prev{
	background-image: url(../images/icon-svg/icon-page-arrow.svg);
	transform: rotate(180deg);
}
.pagesnumber ul li a.pagesnumber-next{
	background-image: url(../images/icon-svg/icon-page-arrow.svg);
}
.pagesnumber ul li a.pagesnumber-first{
	background-image: url(../images/icon-svg/icon-page-arrow-last.svg);
	transform: rotate(180deg);
}
.pagesnumber ul li a.pagesnumber-last{
	background-image: url(../images/icon-svg/icon-page-arrow-last.svg);
}
@media (max-width: 768px) {
	.pagesnumber ul li a{
		padding: 10px;
		height: 30px;
	}
	.pagesnumber ul li a.pagesnumber-arrive{
		width: 30px;
	}
	.pagesnumber ul li a.pagesnumber-btn{
		width: 30px;
		height: 30px;
	}
} */

/* tag */
.card-illustrate .tag{
	font-size: .875rem;
	color: var(--green-primary-100);
	background-color: #fff;
	border-radius: 10px;
	border: 1px solid var(--green-active-100);
	padding: 0 5px;
	line-height: 18px;
	font-weight: 600;
}

/* 分隔線 */
section.featured::before{
	content: '';
	width: 100%;
	height: 6px;
	display: block;
	background-color: #F6F6F6;
	border-top: 1px solid #D9D9D9;
	margin: 40px 0 0;
}

/* 輪播 */
.owl-theme .owl-nav [class*=owl-]{
    font-size: 0rem;
    margin: 0 0 0 0;
    padding: 0 0;
    color: rgba(255,255,255,0);
    display: block;
    cursor: pointer;
    border-radius: 22px;
    width: 44px;
    height: 44px;
    position: absolute;
    top: 0px;
    text-align: center;
    border: 2px solid rgba(255,255,255,0);
    background-position: center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    pointer-events: auto;
    opacity: 1;
}

.slider-photo .owl-nav [class*=owl-] {
    top: -10px;
}
.owl-theme .owl-nav .owl-prev,.owl-theme .owl-nav .owl-next {
    left: -15px;
    background-color: var(--green-heavy-80);
	background-image: url(../images/icon-svg/icon-prev.svg);
	background-size: 10px auto;
	filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.1));
}
.owl-theme .owl-nav .owl-prev.disabled,.owl-theme .owl-nav .owl-next.disabled{
    background-color: rgba(238, 238, 238, 0.9);
	background-image: url(../images/icon-svg/icon-prev-g.svg);
	filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.1));
}
.owl-theme .owl-nav .owl-prev:focus,.owl-theme .owl-nav .owl-next:focus {
	border: 2px dotted orange;
    outline: none;
}
.owl-theme .owl-nav .owl-next{
	right: -15px;
	transform: rotate(180deg);
	left: inherit;
}
.owl-theme .owl-nav .owl-next.disabled{
	transform: rotate(180deg);
}
.owl-theme .owl-nav [class*=owl-]:hover{
	background-color: var(--green-active-100);
    text-decoration: none;
    transition: background-color .5s;
    border: 2px solid rgba(255,255,255,0);
}
.owl-theme .owl-nav [class*=owl-].disabled:hover{
	background-color: rgba(238, 238, 238, 0.9);
}
.sliderbox .owl-nav,.slideBlk .owl-nav{
    position: absolute;
    top: 50%;
    right: 00px;
    width: 100%;
    height: 44px;
    transform: translate(0%,-50%);
    pointer-events: none;
    margin: 0;
}
.sliderbox .owl-dots{
	width: 100%;
	display: flex;
	justify-content: center;
	margin: 20px auto 60px ;
}
.owl-dot{
	margin: 0 .25rem;
	display: block;
	width: 15px;
	height: 8px;
	border-radius: 8px;
	background-color: #D9D9D9;
	font-size: 0;
}
.owl-dot.active{
	width: 30px;
	background-color: var(--green-primary-100);
}
.owl-dot:hover{
	background-color: var(--green-active-100);
}
@media (max-width: 1380px) {
	/* .owl-theme .owl-nav .owl-prev,.owl-theme .owl-nav .owl-next {
		left: 20px;
	}
	.owl-theme .owl-nav .owl-next{
		right: 20px;
		left: inherit;
	} */
}
/* 麵包屑 */
.bread-crumbs{
    width: 100%;
	margin: 0 auto;
	background-color: #FBFBFB;
	padding: 8px 30px;
}
.bread-crumbs .crumbs{
    width: 100%;
    /* max-width: 1240px; */
    margin: 0 auto;
    display: flex;
    line-height: 1.5rem;
	flex-wrap: wrap;
	list-style-type: none;
}
.bread-crumbs .crumbs li{
    line-height: 1.5rem;
    position: relative;
    line-height: 1.5rem;
}
.bread-crumbs .crumbs li::after{
    content: '/';
    color: #ddd;
    margin:0 6px;
}
.bread-crumbs .crumbs li:last-child::after{
    content: '';
    margin: 0;
}
.bread-crumbs .crumbs li a{
    line-height: 1.5rem;
    text-decoration: none;
    /* color: #444444; */
    color: var(--green-primary-100);
}
.bread-crumbs .crumbs li a:hover{
    text-decoration: underline; 
}
.bread-crumbs .crumbs li.crumbs-home{
    padding: 0 0 0 18px;
}
.bread-crumbs .crumbs li.crumbs-home a{
	color: var(--green-primary-100);
}
.bread-crumbs .crumbs li.crumbs-home::before{
    content: '';
    width: 16px;
    height: 15px;
    background: url(../images/icon-svg/icon-home.svg) center no-repeat;
    background-size: 16px 15px;
    position: absolute;
    left: 0;
    top: 4px;
}
@media (max-width:992px) {
	.bread-crumbs{
		padding: 8px 15px;
	}
}

/* 進階篩選條件 */
.filter-search{
	background-color: #FBFBFB;
	border-top: 1px solid #ddd;
	padding: 35px 0 0;
}
.filter-search::after {
    content: '';
    width: 100%;
    height: 6px;
    display: block;
    background-color: #F6F6F6;
    border-top: 1px solid #D9D9D9;
    margin: 0 0 0;
}
.filter-search .form-content{
	width: 60%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
#filtersearch  .form-content{
	width: 80%;
}
.filter-search .form-content .form-group{
	display: flex;
	align-items: center;
	margin: .5rem 0;
	padding: 0 .5rem;
	width: 100%;
}
.form-group .w-10{
	width: 10%;
	flex: 0 0 90px;
}
.form-group .w-90{
	width: 90%;
	display: flex;
	justify-content: space-between;
}
.form-group .w-90>select {
    width: 49%;
}
.form-group .w-90.radio-group{
	justify-content: flex-start;
}
.filter-search .check-item input[type=checkbox], 
.filter-search .check-item input[type=radio] {
    width: 20px;
    height: 20px;
	margin: 0;
}
.filter-search  .check-item {
    width: initial;
	height: 38px;
	align-items: center;
	display: flex;
}
.filter-search  .check-item label {
    margin: 0 1rem  0 .5rem;
    padding: 0;
	line-height: 20px;
}
.form-control.datepicker {
	background: #fff url(../images/icon-img/Today.png) right 10px center no-repeat;
    background-size: 16px auto;
	position: relative;
}
.tag-list.search-tag{
	margin-top: 60px;
	padding: 0 15px 30px;
	border-bottom: 1px solid #eee;
	flex-wrap: wrap;
	justify-content: center; 
}
.tag-list.search-tag>a{
	margin: 0 10px 10px 0;
}
.tag-list.search-tag>a:focus{
	outline: 2px dotted orange;
}
.filter-search .tag-list.search-tag{
	margin-top: 0;
	padding: 0 0;
	border-bottom: 0px solid #eee;
    justify-content: flex-start;
}
.filter-search .tag-list.search-tag>.tag{
	margin: 5px 10px 5px 0;
	color: var(--green-primary-100);
    background-color: var(--green-cositive);
    border: 1px solid var(--green-active-100);
}
/* .filter-search .tag-list.search-tag>.tag:hover {
    background-color: var(--green-active-100);
    color: #fff;
} */
.filter-search .tag-list.search-tag>.tag.active,
.filter-search .tag-list.search-tag>.tag:hover{	
	background-color: var(--green-primary-100);
	border-color: var(--green-primary-100);
	color: #fff;
}
/* .filter-search .tag-list.search-tag>a{
	margin: 5px 10px 5px 0;
	background-color: var(--green-primary-100);
	border-color: var(--green-primary-100);
	color: #fff;
}
.filter-search .tag-list.search-tag>a.tag.collapsed{
	color: var(--green-primary-100);
    background-color: var(--green-cositive);
    border: 1px solid var(--green-active-100);
} */
/* .filter-search .form-content .form-group:has(.search-tag){	
	margin: 0 0 30px;
} */
.filter-search .discipBlk{
	padding: 0 0 30px;
}
.filter-search .factorBlk{
	border-top: 1px solid #f1f1f1;
	position: relative;
}
.filter-search .factorBlk::before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
    background-color: #fff;
	background-color: var(--green-cositive2);
	opacity: .5;
}
.filter-search .factorBlk .wrapper{
	padding: 25px 0 15px;
}
/* .filter-search .factorBlk{
	margin: 0 0 15px;
} */
.filter-search .factorBlk .btnBlk {
    padding: 20px 0 25px;
}
@media (max-width:1200px) {
	.filter-search .factorBlk .wrapper {
		padding: 20px 1rem 15px;
	}
}
@media (max-width:991px) {
	.filter-search .form-content{
		width: 80%;
	}
	.filter-search .form-content .form-group {
		align-items: stretch;
		flex-direction: revert;
		padding: 0;
	}
	.form-group .w-10{
		width: 15%;
		display: flex;
		align-items: flex-start;
		padding: 12px 0 0;
		flex: 0 0 auto;
	}
	.form-group .w-90{
		width: 85%;
		display: flex;
		flex-flow: column;
	}
	.form-group .w-90>select{
		width: 100%;
	}
	.form-group .w-90>select:first-child{
		margin-bottom: 10px;
	}
	.form-group .w-90.radio-group{
		flex-flow: row;
		flex-wrap: wrap;
	}
}
@media (max-width:768px) {
	.filter-search .form-content,
	#filtersearch  .form-content{
		width: 95%;
	}
	.search-tag{
		margin-top: 20px;
		padding: 0 15px 20px;
		justify-content: center;
	}
	.search-tag>a{
		margin: 0 5px 10px;
	}
}
@media (max-width:576px) {
	.filter-search{
		margin: 0px 0 0;
	}
	.form-group .w-10{
		width: 20%;
	}
	.form-group .w-90{
		width: 80%;
	}
	.filter-search .tag-list.search-tag>a {
		margin: 5px 6px 5px 0;
	}
}
@media (max-width:425px) {
	.search-tag {
		margin-top: 15px;
		padding: 0 0 0;
	}
	.form-group .w-10{
		width: 25%;
	}
	.form-group .w-90{
		width: 75%;
	}
}
@media (max-width:360px) {
	.filter-search .btnBlk{
		display: flex;
		width: 95%;
		justify-content: space-between;
		margin: 0 auto;
	}
	.filter-search .btnBlk>button{
		width: 48%;
		min-width: auto;
	}
	.filter-search .btnBlk:after{
		display: none;
	}
}

/* 詳細頁 */
.detail-info{
	display: flow-root;
	padding: 0 10px;
	margin-bottom: 80px;
}
.detail-info .w-70{
	width: 55%;
	padding: 0 30px 0 0;
	float: left;
}
.detail-info .w-30{
	width: 45%;
	float: right;
}
.collection-detail{
	width: 100%;
	border-radius: 30px;
	padding: 40px 30px;
	background-color: #F9F9F9;
}
.detail-title{
	font-size: 1.625rem;
    padding: 0 20px 20px;
    border-bottom: 1px solid #ddd;
    position: relative;
    font-weight: 600;
	margin-bottom: 10px;
	line-height: 1;
}
.detail-title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 20px;
    background-color: var(--green-active-100);
    display: block;
    transform: skew(-20deg);
    margin: 0 0.5rem 0 0.25rem;
    position: absolute;
    top: 3px;
    left: 0;
}
.detail-info .detail-txt{
	/* margin-top: 25px; */
	padding: 10px 5px;
	display: flex;
	/* justify-content: space-between; */
	align-items: baseline;
	border-bottom: 1px solid #eee;
}
.detail-info .detail-txt .h6{
	font-size: .95rem;
	margin-bottom: 0;
	/* color:var(--green-heavy-100); */
	color: #666;
	display: block;
	width: 40%;
	line-height: 1.5rem;
}
.detail-info .detail-txt p,.detail-info .detail-txt p a{
	font-size: 1rem;
	color:#000;
	line-height: 1.5;
	width: 60%;
	/* text-align: right; */
	letter-spacing: .5px;
	font-weight: 500;
}
.detail-info .detail-txt p a{
	/* text-decoration: underline;
	font-weight: 600; */
	color:var(--green-primary-100);
}
.detail-info .detail-txt p a:hover{
	color: var(--green-active-100);
	text-decoration: none;
}
.tag-list{
	display: flex;
}
.tag-list .tag{
	display: flex;
	color: var(--green-primary-100);
	background-color: var(--green-cositive);
	border-radius: 5px;
	border: 1px solid var(--green-active-100);
	padding: 6px 8px;
	line-height: 1;
	font-size: 1rem;
	text-decoration: none;
	font-weight: 400;
}
.tag-list .tag:hover{
	background-color: var(--green-active-100);
	color: #fff;
}
.tag-list .tag:focus{
    outline:  2px dotted orange;
}
.recommend{
	width: 100%;
}
.recommend::before {
    content: '';
    width: 100%;
    height: 6px;
    display: block;
    background-color: #F6F6F6;
    border-top: 1px solid #D9D9D9;
    margin: 40px 0 0;
}

/* 詳細頁圖片 */
.detail-img{
	margin-bottom: 40px;
}
.detail-info .owl-carousel .owl-stage-outer{
	border-radius: 30px;
	overflow: hidden;
}
.sliderbox.detail-img .owl-dots{
	margin: 30px auto 0;
}
.detail-imgbox{
	width: 100%;
}
.detail-imgbox a{
	display: block;
}

/* 藏品說明 */
.detail-illustrate{
	padding: 25px 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
.detail-illustrate p{
	line-height: 2;
}
@media (max-width: 1320px){
	.detail-info{
		padding: 0 15px;
	}
}
@media (max-width: 1200px){
	.detail-info .w-70 {
		padding: 0 20px 0 0;
	}
}
@media (max-width: 991px){
	.detail-info .w-70 {
		width: 50%;
		padding: 0 20px 0 0;
	}
	.detail-info .w-30 {
		width: 50%;
	}
}
@media (max-width: 768px){
	.detail-info{
		display: flex;
		flex-flow: column;
		padding: 0;
		margin-bottom: 0px;
	}
	
	.detail-info .w-70:has(.detail-illustrate){
		background-color: #F9F9F9;
		margin-bottom: 0px;
	}
	.detail-illustrate {
		padding: 40px 5px 60px;
		border-bottom: 0px solid #eee;
		border-top: 1px solid #ddd;
	}
	.detail-illustrate::before{
		content: '藏品說明';
		display: block;
		width: 100%;
		font-size: 1rem;
		margin-bottom: 10px;
		color: var(--green-heavy2-100);
	}
	.detail-img {
		margin-bottom: 30px;
	}
	.detail-info .w-70 {
		width: 100%;
		padding: 0 20px;
		/* margin-bottom: 40px; */
	}
	.detail-info .w-30 {
		width: 100%;
	}
	.detail-imgbox {
		border-radius: 10px;
	}
	.detail-title {
		padding: 0 20px 15px;
		font-size: 1.5rem;
	}
	.collection-detail{
		border-radius: 0px;
		padding: 40px 20px;
	}
	.detail-info:has(.detail-illustrate) .collection-detail{
		padding: 40px 20px 0px;
	}
	.recommend::before {
		margin: 0;
	}
	.detail-info:has(.detail-illustrate) .detail-txt:last-child{
		border-bottom: 0px solid #eee;
		/* padding: 10px 5px 25px 5px; */
	}
}

@media (max-width: 576px){
	.detail-title {
		font-size: 1.375rem;
		padding: 0 18px 15px;
	}
	.detail-title::before {
		width: 7px;
		height: 18px;
		top: 3px;
		left: 0;
	}
}

/* footer */
footer {
	margin: 0;
	width: 100%;
	position: relative;
}
.footerBlk{
	padding: 1.5rem 0 1rem;
	background-color: #FAFAFA;
}
.copyRightBlk{
	background-color: var(--green-primary-100);
}
.footerBlk .wrapper,.copyRightBlk .wrapper{
	display: flex;
	justify-content: space-between;
}
.footerBlk .wrapper>div{
	display: flex;
	align-items: center;
}
.footerBlk .wrapper ul{
	list-style-type: none;
	display: flex;
	margin: 0 20px;
}
.footerBlk .wrapper ul li{
	padding: 0 10px;
}
.footerBlk .wrapper ul li a{
	color: #333;
}
.footerBlk .wrapper .logo-nmns{
	width: 240px;
}
.footerBlk .wrapper .AA{
	width: 120px;
}
.copyRightBlk .wrapper p{
	color: #fff;
	font-size: .875rem;
	line-height: 40px;
}
.copyRightBlk .wrapper a{
	color: #fff;
	/* text-decoration: underline var(--green-active-100); */
	text-decoration: underline;
	padding: 0.25rem;
}
.copyRightBlk .wrapper a:hover{
	color: var(--green-active-100);
}
.gotop {
	width: 50px;
	height: 50px;
	color: rgba(0, 0, 0, 0);
	background: #fff;
	position: fixed;
	right: 18px;
	bottom: 10%;
	font-family: Verdana, '微軟正黑體', Microsoft JhengHei, '新細明體', MingLiU, sans-serif;
	font-size: 1rem;
	text-align: center;
	border-radius: 100%;
	z-index: 2;
	filter: drop-shadow(0px 4px 15px rgba(98, 98, 98, 0.15));
	background-image: url(../images/icon-svg/icon-prev-g.svg);
	background-size: 10px auto;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(90deg);
}
.gotop:hover {
	background-color: var(--green-primary-100);
	filter: drop-shadow(0px 4px 15px rgba(98, 98, 98, 0.1));
	background-image: url(../images/icon-svg/icon-prev.svg);
	color: rgba(0, 0, 0, 0);
	text-decoration: none;
}
.gotop:focus {
	border: 2px dotted orange;
}
@media (max-width: 991px) {
	.footerBlk .wrapper .AA{
		width: 100px;
	}
}
@media (max-width: 768px) {
	.footerBlk .wrapper>div {
		align-items: flex-start;
		flex-flow: column;
	}
	.footerBlk .wrapper ul{
		margin: 20px 0 0;
	}
	.footerBlk .wrapper ul li {
		padding: 5px 10px 5px 0;
		/* width: 100%; */
		/* text-align: center; */
	}
	.copyRightBlk .wrapper{
		flex-flow: column;
		align-items: center;
		padding: 10px;
	}
	.copyRightBlk .wrapper p{
		line-height: 24px;
		margin: 10px 0 0;
		text-align: center;
	}
	.gotop {
		width: 40px;
		height: 40px;
	}
	.copyRightBlk .wrapper a.copyRight-link{
		display: block;
	}
}
@media (max-width: 576px) {
	.footerBlk .wrapper .logo-nmns{
		width: 200px;
	}
	.footerBlk .wrapper .AA{
		width: 70px;
		position: absolute;
		right: 10px;
		top: 0;
	}
	.footerBlk .wrapper ul{
		flex-wrap: wrap;
		justify-content: center;
	}
	.footerBlk .wrapper ul li {
		padding: 5px 10px 5px 0;
	}
}
/* sitemap */
.Blk-text{
	width: 100%;
	padding: 0 2rem;
	margin: 1rem auto 0;
}
.Blk-text p{
	line-height:2;
}
.Blk-text ul{
	list-style: none;
	margin: 1rem 0;
	display: inline-block;
}
.Blk-text ul li{
	line-height: 34px;
}
.Blk-text kbd {
    background-color:var(--green-cositive);
	border-radius: 0.2rem;
	color:var(--green-primary-100);
	border:1px solid var(--green-active-100);
	border-radius: 5px;
}
.sitemap-box{
	display: flex;
	width: 100%;
	padding: 0 2rem;
	align-items: stretch;
	justify-content: space-between;
}
.sitemap-box>div{
	width: 100%;
}
.sitemap-menu{
	width: 100%;
	list-style: none;
	border: 1px solid #ddd;
	height: 100%;
	padding: 1rem 0;
}
.sitemap-menu li:has(a){
	padding: 0 0 0 1.8rem;
}
.sitemap-menu li a{
	line-height: 2;
	font-size: 1.125rem;
	color:var(--green-primary-100);
	font-weight: 600;
}
.sitemap-menu li a:hover{
	text-decoration: none;
	color:var(--green-active-100);
}
@media (max-width: 992px){
	.Blk-text {
		padding: 0 2rem;
	}
	.sitemap-box{
		flex-flow: column;
		padding: 0 2rem;
	}
	.sitemap-box>div{
		padding: 1rem 0 0;
	}
	.sitemap-box>div{
		width: 100%;
	}
}
.detail button span>i{
	display: none;
}

/* 400 500 */
.block {
	padding: 0px 20px 40px;
}
.block>h1>img{
	height: 50px;
}
.block_inner {
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
	max-width: 1024px;
	margin: 0 auto;
	box-shadow: 0px 6px 14px -6px rgb(24 39 75 / 12%), 0px 10px 32px -4px rgb(24 39 75 / 10%);
	text-align: center;
	padding: 60px 30px 20px;
}

.block_inner h2 {
	font-size: 1.875rem;
	font-weight: bold;
	color: #262626;
	margin:1rem 0 0;				
}

.block_inner p {
	padding: .5rem 0; 
	margin: 0;
	line-height: 2;
}

.block_inner img {
	max-width: 100%;
	height: auto;
}

@media (max-width:576px) {
	.block {
		padding: 0px 10px 40px;
	}
	.block_inner img {
		max-width: 90%;
	}
	.block_inner h2 {
		font-size: 1.75rem;
		line-height: 1.5;
	}
	.block_inner p {
		line-height: 1.5;
	}
}

/* 日曆 flatpickr */
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after{
	display: none;
}
.flatpickr-day{
	border-radius: 0;
}
.flatpickr-months {
    background: #f4f4f4;
}
.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month,
.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year{
	height: 40px;
}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month,
.flatpickr-current-month{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month{
	width: 40px;
	position: inherit;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year{
	padding: 0 .5rem;
	font-weight: 500;    
	font-size: 1rem;
}
.flatpickr-months .flatpickr-prev-month:hover, 
.flatpickr-months .flatpickr-next-month:hover{
    background: #eee;
}
.flatpickr-months .flatpickr-prev-month:hover svg, 
.flatpickr-months .flatpickr-next-month:hover svg{
	fill: var(--green-primary-100);
}
.flatpickr-weekdays {
	height: 35px;
    background: #f7f7f7;
}
span.flatpickr-weekday {
	color: #333;
	font-weight: 600;
}
.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange {
    border-radius: 0;
}

.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange {
    border-radius: 0;
}

/* 日曆table -jquery-ui */
.ui-widget.ui-widget-content{
	border: 1px solid var(--border);
	box-shadow: var(--textshadow-02);
}
.ui-datepicker th{
	background-color: #ddd;
	padding: .3em;
	color: #333;
}
.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default{
	border: 1px solid #fff;	
    text-align: center;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover {
    border: 1px solid transparent;
    background: #ccc;
    font-weight: normal;
    color: #2b2b2b
}
.ui-datepicker td a:hover{
	text-decoration: none;
	color:#fff;
}
.ui-state-highlight, 
.ui-widget-content .ui-state-highlight, 
.ui-widget-header .ui-state-highlight {
    border: 1px solid transparent;
    color: #fff;
}
.ui-datepicker .ui-datepicker-header{
    border: 0px solid #ddd;
    background: #e9e9e9;
}
.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next{
	top: .2em;
	background: rgba(0, 0, 0, 0);
	cursor: pointer;
}