:root {
    --primary-color: #754D4B; /*主色*/
    --primary-rgb: 117,77,75; /*主色*/
	
	--secondary-color: #8195B0; /*輔色*/
	--secondary-rgb: 129,149,176; /*輔色*/
	
	--light-color: #CEB7AD; /*淡色*/
	--light-rgb: 206,183,173; /*淡色*/
	
    --accent-color: #F4791C; /*強調色*/
}


.wrapper{ background:url(../images/web-bg.png) repeat; }



/* 後台編輯器 a連結 */
.editor{
	color:#333;
}
.editor a{
	color:rgba(0,0,238,1); /*預設藍*/
}
.editor a:hover{
	color:var(--accent-color);
}



/*------------------------------------------------------------------------------------------- #page-overlay[glob-01] */
/*---- #page-overlay[glob-01] 跳出隱藏區塊時 內容區覆蓋變暗 */
.page-overlay{ 
	position:fixed; z-index:1000; top:0; left:0; 
	width:100%; height:100vh;
	overflow:hidden;
    
    opacity:0;
    pointer-events:none;
    visibility:hidden;
}
.page-overlay.is-open{
	display:block;
	background:rgba(0,0,0,0.85);
    
    opacity:1;
    pointer-events:auto;
    visibility:visible;
}


/*跳出隱藏區塊時 內容區卷軸*/
body.overflow-hidden{ overflow:hidden; }

@media (min-width:992px){
	.page-overlay.is-open{
        opacity:0;
        pointer-events:auto;
        visibility:hidden;
    }
    
    body.overflow-hidden{
        overflow:auto;
    }
}















/*------------------------------------------------------------------------------------------- #webside-item[glob-02] */
/*---- #webside-item[glob-02] */

.scrolltop{
	cursor:pointer;
}


/*-----大螢幕時-右側固定列*/
.webside-bar{
	display:none;
	position:fixed; z-index:90; right:5px; bottom:100px;
}
@media (min-width:992px){
	.webside-bar{ display:block; }
}


.webside-list > li{
	margin:5px;
}



/*-----小螢幕時-底部固定列*/
.quickly-bar{
	position:fixed; z-index:990; bottom:0; left:0;
	width:100%; height:auto;
	background:#fff;
	box-shadow:0 -3px 4px 0 rgb(0,0,0,0.2);
}

@media (min-width:992px){
	.quickly-bar{ display:none; }
}
.quickly-list{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:flex-end;
}
.quickly-list > li{
	flex:1 1 auto;
    width:1%;
    min-width:0;
}
.quickly-list > li.quickly-scrolltop{
	width:100px;
	flex:none;
}



/*基本項目*/
.webside-item{ 
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
	
	font-size:14px; font-weight:600; letter-spacing:0px;
	text-align:center;
}
.webside-item span{ display:block; }



/* 基本項目-----(in右側固定列) */
.webside-bar .webside-item{
	width:40px; height:40px;
	background:var(--primary-color);
	border:1px solid #fff;
	border-radius:3px;
	color:#333;
	padding:5px;
	box-shadow:1px 1px 2px rgba(0,0,0,0.3);
}
.webside-bar .webside-item .iconsvg{
	width:20px; height:20px;
	/*animation:scroll-act1 3s infinite;*/
}
.webside-bar .webside-item .iconsvg:before{
	background-color:#fff;
}

.webside-bar .webside-text{
	display:none;
}
.webside-bar .webside-item.scrolltop .iconsvg{
	width:25px; height:25px;
}
.webside-bar .webside-item.scrolltop:hover{
	background-color:var(--accent-color);
}
.webside-bar .webside-item.scrolltop:hover .iconsvg:before{
	background-color:#fff;
}





/* 基本項目-----(in底部固定列) */
.quickly-bar .webside-item{
	width:100%;
	padding:8px 0;
	background:var(--secondary-color);
	color:#fff;
	text-align:center;
}
.quickly-bar .webside-item .iconsvg{
	width:30px; height:30px;
	margin:0 auto 1px auto;
	
	/*animation:scroll-act1 3s infinite;*/
}
.quickly-bar .webside-item .iconsvg:before{
	background-color:#fff;
}



/*@keyframes scroll-act1{
	0% {
		opacity:0;
		transform:translateY(12px);
	}
	50% {
		opacity:1;
		transform:translateY(0px) scale(1);
	}
	
	100% {
		opacity:0;
		transform:translateY(-10px) scale(1);
	}
}
*/















/*------------------------------------------------------------------------------------------- #logo[glob-03] */
/*---- #logo[glob-03] */
.logo{
}
.logo a{
	display:inline-block;
	max-width:180px;
}
.logo img{
	display:block; max-width:100%; height:auto;
}

@media (min-width:992px){
	.logo{
		text-align:center;
		margin:1rem 0;
	}
	.logo a{
		max-width:300px;
	}
}














/*------------------------------------------------------------------------------------------- #page-search[glob-04] 搜尋 */
/*---- #page-search[glob-04] 搜尋 */
.page-search{
}
.page-search-item{
	background-color:rgba(var(--light-rgb),0.1);
	border:2px solid rgba(var(--light-rgb),0.5);
	border-radius:5px;
	overflow:hidden;
}

.search-input{
	display:block;
	width:100%;
	
	background-color:transparent;
	background-clip:padding-box;

	border-width:0px;
	border-radius:0;
	
	font-size:1rem; font-weight:400; line-height:1.5;
	color:#333;
	
	padding:0.375rem 5px 0.375rem 0.75rem;

	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;

	transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.search-btn{
	position:relative; z-index:2;
	
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
	
	width:35px; height:35px;
	background:transparent;
	border-width:0px;
	border-radius:0;
}

.search-btn .iconsvg{
	width:100%; height:100%;
}
.search-btn .iconsvg:before{
	-webkit-mask-size: 65% 65%;
    mask-size: 65% 65%;
}

.page-search form{
	position:relative;
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    width:100%;
}
.page-search .search-input{
    position:relative;
    flex:1 1 auto;
    width:1%;
    min-width:0;
}


.header-main .page-search{
	display:none;
}
@media (min-width:992px){
	.header-main .page-search{
		display:block;
	}
}














/*------------------------------------------------------------------------------------------- #nav[glob-05] */
/*---- #nav[glob-05] */

.nav{ display:flex; flex-wrap:wrap; }
/*-----  base end =-----*/



/*.nav-icon(社群)*/
/*.nav-icon{
	justify-content:center;
}
.nav-icon li{ margin:0.2rem; }
.nav-icon li:first-child{ margin-left:0; }
.nav-icon li:last-child{ margin-right:0; }

.nav-icon .nav-link{
	display:block;
	padding:0;
}

.nav-icon .nav-text{ display:none; }

.nav-icon .iconsvg{
    width:30px; height:30px;
	background:var(--primary-color);
    border:1px solid rgba(255,255,255,0.1);
	border-radius:50%;
	overflow:hidden;
	transition:transform 0.3s ease;
}
.nav-icon .nav-link .iconsvg:before{
	background-color:#fff;
	
	-webkit-mask-size:65% 65%;
    mask-size:65% 65%;
}
.nav-icon .nav-link:hover .iconsvg{
	background:var(--accent-color);
}*/


/*社群 in footer*/
/*.page-footer-main .nav-icon{
	justify-content:center;
	margin-top:1rem;
}*/







/*.nav-menu(選單)*/
.nav-menu{
	/* display:flex; flex-wrap:wrap; */
}
.nav-menu li{
	position:relative;
	display:inline-block;
	margin:2px 0;
}

.nav-menu > li{
	/* width:calc( 100% / 5 ); */
}
/* .nav-menu > li:last-child{ width:calc( 100% / 16 * 2 ); } */

.nav-menu li a{
	display:block;
	border-radius:4px;
	font-size:0.875rem; font-weight:600;
	
	color:var(--primary-color);
	
	/* padding:4px 5px; */
	padding:4px 20px;
	text-align:center;
}

.nav-menu ul{
	display:none;
	
	position:absolute; z-index:5;
	width:100%;
	background:#fff;
	box-shadow:2px 2px 4px rgba(0, 0, 0, 0.2);
	
	max-height:400px;
	overflow-y:auto;
	overflow-x:hidden;
	
	/*firefox scrollbar beauty*/
	scrollbar-width:thin;
	scrollbar-color:var(--primary-color) transparent;
}

/*chrome scrollbar beauty*/
.nav-menu ul::-webkit-scrollbar,
.nav-menu ul ul::-webkit-scrollbar{ width:5px; }

.nav-menu ul::-webkit-scrollbar-track,
.nav-menu ul ul::-webkit-scrollbar-track{ border-radius:2px; }

.nav-menu ul::-webkit-scrollbar-thumb,
.nav-menu ul ul::-webkit-scrollbar-thumb{
	border-radius:4px;
	
	background:var(--primary-color);
}

/*選單-第二層*/
.nav-menu ul{ top:100%; left:0; }


/*選單-第三之後層*/
.nav-menu ul ul{
	position:relative; top:auto; left:auto;
	width:100%;
	padding:0; padding-left:15px;
	
	visibility:inherit;
	opacity:1;
	transform:translateY(0);
	box-shadow:none;
	
	height:100%;
	max-height:100%;
}


/*有下層之提示圖樣*/
.navsub-btn{
	display:block;
	position:absolute; z-index:1; top:-3px; right:-5px;
	width:6px; height:6px;
	/*margin-top:-10px;*/
}
.navsub-btn:before{
	position:absolute; top:0; left:0; content:"";
	width:5px; height:5px;
	
	border-width:0 2px 2px 0;
	border-style:solid;
	border-color:rgba(var(--bg-text-color), 0.8);

	transform:rotate(45deg);
}


/*選單-第一層的文字*/
.nav-menu > li:before{
	position:absolute; top:50%; right:0; content:"";
	width:1px; height:16px;
	margin-top:-8px;
	background:var(--primary-color);
	opacity:0.4;
}
.nav-menu > li > a{
	text-align:center;
}
.nav-menu > li > a span{
	display:inline-block;
	position:relative;
	/*padding-right:10px;*/
}

.nav-menu > li > a{
	/*padding:0.5rem 0.8rem;
	margin:0.2rem 0.2rem;
	text-align:center;
	font-size:1rem; line-height:1;
	border-radius:30px;*/
}
.nav-menu > li:has(ul) > a{
	padding-right:1.2rem;
}

.nav-menu > li > a:hover,
.nav-menu > li:hover > a{
	background:var(--secondary-color);
	
	color:#fff;
}
.nav-menu > li > a:hover .navsub-btn:before{
	border-color:#fff;
}


/*選單-第二、三之後 層的選單文字*/
.nav-menu ul > li a,
.nav-menu ul ul > li a{
	border-bottom:1px solid #eee;
	padding:10px 12px;
}

.nav-menu ul > li > a:hover{
	color:var(--accent-color);
}

/*.nav-menu{
	display:flex; flex-wrap:wrap;
}
.nav-menu li{
	position:relative;
	display:block;
	margin:2px 0;
}

.nav-menu > li{
	width:calc( 100% / 16 );
}
.nav-menu > li:last-child{ width:calc( 100% / 16 * 2 ); }

.nav-menu li a{
	display:block;
	border-radius:4px;
	font-size:0.875rem; font-weight:600;
	
	color:var(--primary-color);
	
	padding:4px 5px;
	text-align:center;
}
.nav-menu li a:hover{
	background:var(--secondary-color);
	color:#fff;
}*/





/*.nav-sidetabs(temple_view menu)*/
.nav-sidetabs{}

.nav-sidetabs li{
    width:50%;
    padding:5px;
}
.nav-sidetabs li a{
	display:block;
	border:2px solid var(--secondary-color);
	border-radius:4px;
	font-weight:600;
	padding:0.5rem 0.3rem;
    color:var(--secondary-color);
	text-align:center;
}
.nav-sidetabs li.active a{
	border-color:#eee;
	color:#ccc;
}














/*------------------------------------------------------------------------------------------- #header flex[glob-06] */
/*---- #header flex[glob-06] */
.header-row{
	display:flex; flex-wrap:wrap;
	align-items:center;
}
.header-left,
.header-right{
	width:100%;
}
/*-----  base end =-----*/



.page-header{
	position:relative;
	background:rgba(206,183,173,0.1);
}

.header-main{
	padding:0.5rem 1rem;
}
.header-main .header-left{
	flex:1 1 auto;
    width:1%; min-width:0;
}
.header-main .header-center{
	width:80px;
}

.header-main .header-right{
	display:none;
}

@media (min-width:992px){
	.page-header{
		padding-bottom:25px;
	}
	.page-header:before{
		position:absolute; bottom:0; right:20px; content:"";
		width:90px; height:40px;
		background:url(../images/web-05.png) no-repeat center;
		background-size:cover;
	}
	
	.header-main{
		padding:1rem;
	}
	.header-main .header-left{
		margin-left:20%;
	}
	.header-main .header-center{
		width:20%;
	}
	.header-main .header-right{
		display:block;
		width:100%;
	}
}





/*卷軸下捲時*/
.header-main.is-sticky{
	position:fixed; z-index:900; top:-300px; left:0;
	width:100%; height:auto;
	background:#fff url(../images/web-bg.png) repeat;
	box-shadow:0 2px 6px rgba(0,0,0,0.1);
	
	transition:transform 0.6s ease-in-out;
}
.header-main.is-sticky .header-left,
.header-main.is-sticky .header-center{
	display:block;
}
.header-main.is-sticky .header-right{
	display:none;
}


.header-main.is-sticky.is-scroll{
	transform:translateY(300px);
}

@media (min-width:992px){
	.header-main.is-sticky{
		padding:0.2rem 1rem;
	}
	
	.header-main.is-sticky .header-left,
	.header-main.is-sticky .header-center{
		display:none;
	}
	.header-main.is-sticky .header-right{
		display:block;
	}
	
	.header-main.is-sticky .nav-menu li a{
		padding:2px 10px;
	}
}














/*------------------------------------------------------------------------------------------- #toggler[glob-07] */
/*---- #toggler[glob-07] 選單觸發鈕 */

/*【三】圖樣*/
.icon-hamburger{
	position:relative;
	display:block;
	width:100%; height:100%;
}
.icon-hamburger:before , .icon-hamburger:after , .icon-hamburger-line{
	position:absolute; left:0; top:0; content:"";
	width:100%; height:2px;
	margin-top:-1px;
	background:#333;
	border-radius:2px;
	transition:top 0.3s ease-in-out , transform 0.3s ease-in-out;
}
.icon-hamburger:before{ top:20%; }
.icon-hamburger:after{ top:80%; }
.icon-hamburger-line{ top:50%; }

.icon-hamburger.is-open:before{
	top:50%;
	-webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}
.icon-hamburger.is-open:after{
	top:50%;
	-webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
}
.icon-hamburger.is-open .icon-hamburger-line{ opacity:0; }

.hamburger-text{
	color:#fff;
	font-size:1rem; font-weight:600; line-height:1;
}



/*【X】關閉圖樣*/
.icon-close{
	position:relative;
	display:block;
	width:30px; height:30px;
}
.icon-close:before , .icon-close:after{
	position:absolute; left:50%; top:0; content:"";
	width:3px; height:100%;
	background:#fff;
	border-radius:2px;
	margin-left:-1px;
}
.icon-close:before{ transform:rotate(45deg); }
.icon-close:after{ transform:rotate(-45deg); }

/*-----  base end =-----*/



/*側邊隱藏區塊-觸發鈕*/
.navbar-toggler.header{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:flex-end;
	
	width:100%;
	margin:0 auto;
    padding:10px;
}
.navbar-toggler.header .toggler-icon,
.navbar-toggler.header .toggler-text{
	display:block;
	line-height:1;
}
.navbar-toggler.header .toggler-icon{
	width:18px; height:18px;
	margin-right:3px;
}
.navbar-toggler.header .icon-hamburger:before, 
.navbar-toggler.header .icon-hamburger:after , 
.navbar-toggler.header .icon-hamburger-line{
	background:var(--primary-color);
}
.navbar-toggler.header .toggler-text{
	font-size:1.1rem; font-weight:600;
	color:var(--primary-color);
}
@media (min-width:992px){
	.navbar-toggler.header{
		display:none;
	}
}



/*側邊隱藏區塊-關閉鈕*/
.offside-close-btn{
	position:fixed; z-index:1102; top:0; left:0;
	
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
	
	width:90px; height:100%;
}
.offside-close-btn .icon-close{
	margin:0 auto 4px auto;
}
.offside-close-btn .icon-close:before ,
.offside-close-btn .icon-close:after{
	background:#fff;
}

.offside-close-text{
	width:100%;
	color:#fff;
	font-size:0.75rem; font-weight:600; letter-spacing:3px;
	margin-left:3px;
	text-align:center;
}
















/*------------------------------------------------------------------------------------------- #offside-box[glob-08] */
/*---- #offside-box[glob-08] */
.offside-box{
	position:fixed; z-index:1000; top:0; left:0;
	width:100%; height:100vh;
	
	overflow:hidden;
	
	opacity:0;
    pointer-events:none;
    visibility:hidden;

	transition:opacity 0s, 
			   visibility 0s,
			   transform 0s;
}
.offside-box.is-open{ 
    opacity:1;
    pointer-events:auto;
    visibility:visible;

	transition:opacity 0.7s, 
			   visibility 0.7s,
			   transform 0.7s;
}

@media (min-width:992px){
	.offside-box{ display:none; }
}

.offside-inner{
	width:calc( 100% - 90px ); height:100vh;

	background:#EFEAE5;
	
	margin-left:auto;
	padding-bottom:90px;
	
	overflow-y:auto;
	overflow-x:hidden;
}

.offside-header{
	padding:2rem;
}

/*.offside-body{
	margin-top:1rem;
}*/










/*------------------------------------------------------------------------------------------- #offside-menu[glob-09] */
/*---- #offside-menu[glob-09] 側邊區塊選單 */
.offside-menu{}

.offside-menu li{
	border-width:0 0 1px 0;
	border-style:solid;
	border-color:rgba(var(--light-rgb),0.6);
}
.offside-menu li a{
	position:relative;
	display:block;
	
	color:var(--primary-color);
	
	font-size:1.1rem; font-weight:600; letter-spacing:0;
	padding:0.9rem 80px 0.9rem 32px;
	text-decoration:none;
}


/*.offside-menu > li{
	border-color:rgba(255,255,255,0.2);
}*/
.offside-menu > li:first-child{ border-top-width:1px; }
/*.offside-menu > li > a{
	color:#fff;
}*/

/*打開下層選單之提醒*/
/*.offside-menu li a:before{
	position:absolute; top:50%; left:10px; content:"";
	width:8px; height:8px;
	margin-top:-4px;

	background:var(--primary-color);
	
	border-radius:2px;
    transform:rotate(45deg);
	opacity:0;
}*/
.offside-menu li a.is-current{
	background:#fff;
	
	color:var(--accent-color);
}
.offside-menu li a.is-current:before{
	opacity:1;
}



/*有下層之提示圖樣*/
.submenu-btn{
	display:block;
	position:absolute; z-index:1; top:0; right:0;
	width:70px; height:100%;
	/*background:var(--primary-color);*/
	cursor:pointer;
}
.submenu-btn:before,
.submenu-btn:after{
    position:absolute; z-index:2; right:50%; top:50%; content:"";
	width:2px; height:10px;
    margin-right:-1px; margin-top:-5px;
	background:var(--primary-color);
	border-radius:2px;
	outline:0;
	transform-origin:center;
	transition:transform 0.4s ease-in-out;
}
.submenu-btn:before{ transform:rotate(90deg); }

/*有下層之提示圖樣- 第一層*/
.offside-menu > li > a .submenu-btn{
	border-left-color:var(--primary-color);
}
.offside-menu > li > a .submenu-btn:before,
.offside-menu > li > a .submenu-btn:after{
	background:var(--primary-color);
}


.offside-menu > li > a .submenu-btn.is-open{
	border-left-color:rgba(0,0,0,0.2);
}
.offside-menu > li > a .submenu-btn.is-open:before,
.offside-menu > li > a .submenu-btn.is-open:after,
.submenu-btn.is-open:before,
.submenu-btn.is-open:after{
	background:var(--accent-color);
}
.submenu-btn.is-open:before{ transform:rotate(45deg); }
.submenu-btn.is-open:after{ transform:rotate(-45deg); }	



/*第二層之後的層級收縮*/
.offside-menu ul{
	display:none;
	position:relative; top:0; left:0;
	width:100%;
	border-top:1px solid rgba(0,0,0,0.2);
	padding-left:15px;
	background:#fff;
}
.offside-menu ul.is-visible{ display:block; }

.offside-menu ul li:last-child{
	border-bottom-width:0;
}

















/*------------------------------------------------------------------------------------------- #dropdown[glob-10] */
/*---- #dropdown[glob-10] 下拉式選單 */

.dropdown{
	position:relative;
	display:block;
}
.dropdown-trigger{
	display:block;
	background:#fff;
	border:1px solid #eee;

	color:var(--primary-color);
	
	border-radius:3px;
	line-height:1;
	padding:0.4rem 1rem;
	text-align:center;
}
.dropdown-trigger-text{
	position:relative;
	display:inline-block;
	font-size:0.875rem; font-weight:600; line-height:1;
	padding-right:10px;
}
.dropdown-trigger-text:before{
	position:absolute; top:50%; right:0; content:"";
	width:0; height:0;
	margin-top:-2px;
	
	border-width:4px;
	border-style:solid;
	border-color:transparent;
	
	border-top-color:var(--primary-color);
}

/*.dropdown-trigger:hover{
	border-color:#ccc;
}*/

.dropdown-trigger.is-open{
	/*border-color:var(--accent-color);*/
	
	color:var(--accent-color);
}
.dropdown-trigger.is-open .dropdown-trigger-text:before{
	/*border-width:4px;*/
	border-top-color:transprent;
	
	border-bottom-color:#F28F13;
	border-bottom-color:var(--accent-color);
}

.dropdown-menu{
	display:none;
	position:absolute; z-index:2; left:0; bottom:100%;
	width:100%;
	background:#fff;
	padding:1rem;
	border-radius:5px 5px 0 0;
	box-shadow:1px -1px 4px rgba(0, 0, 0, 0.1);
}

.dropdown-menu.is-open{
	display:block;
}
/*-----  base end =-----*/



.dropdown-article-view .dropdown-trigger{
	display:block;
	background:rgba(255,255,255,0.05);
	border:1px solid rgba(255,255,255,0.5);
	padding:0.8rem 0.2rem;
}
.dropdown-article-view .dropdown-trigger-text{
	color:var(--secondary-color);
	font-size:1rem;
	padding-right:14px;
}
.dropdown-article-view .dropdown-trigger-text:before{
	border-width:6px;
	margin-top:-9px;
	border-top-color:transparent;
	border-bottom-color:var(--secondary-color);
}

.dropdown-article-view .dropdown-trigger.is-open{
	background:#fff;
	border-top-color:#999;
}
.dropdown-article-view .dropdown-trigger.is-open .dropdown-trigger-text:before{
	margin-top:-3px;
	border-top-color:var(--accent-color);
	border-bottom-color:transparent;
}
.dropdown-article-view .dropdown-trigger.is-open .dropdown-trigger-text{
	color:var(--accent-color);
}
















/*------------------------------------------------------------------------------------------- #infolist[glob-11] */
/*---- #infolist[glob-11] 資訊 */
.infolist{}
.infolist > li{ margin:4px 0; }

.info-item{
    display:inline-block; vertical-align:middle;
	padding:2px 0;
}


.info-item .iconsvg, 
.info-item .info-icon,
.info-item .info-title,
.info-item .info-text{
    display:inline-block; vertical-align:middle;
}

.info-item .info-text{
	word-break:break-all;
	word-wrap:break-word;
}
/*-----  base end =-----*/



.info-item.view-date{
	display:block;
	color:#666;
	font-size:0.875rem; font-weight:600;
	text-align:center;
	margin-top:10px;
}















/*------------------------------------------------------------------------------------------- #footer[glob-12] */
/*---- #footer[glob-12] */
.footer-row{
	display:flex; flex-wrap:wrap;
	align-items:center;
}
.footer-left,
.footer-center,
.footer-right{
	width:100%;
}
/*-----  base end =-----*/


.page-footer{ position:relative; /*margin-top:3rem;*/ padding:2rem 0 6rem 0; }
.page-footer:before{
	position:absolute; top:1px; left:0; content:"";
	width:100%;height:1px;
	background:rgba(177,140,127,0.6);
}

@media (min-width:992px){
	.page-footer{ padding:3rem 0; }
	.footer-left{ width:60%; }
	.footer-right{ width:40%; }
}


.page-footer,
.page-footer a{
	font-size:0.875rem;
	color:#754D4B;
}
.page-footer a:hover{ color:#F4791C; }

.footer-info-list{ margin-bottom:13px; }
.footer-info-list li span{ display:inline-block; margin-right:6px; }
.footer-info-list li a{ display:inline-block; }

@media (min-width:992px){
	.copyright{ text-align:right;}
	
	.footer-info-list.right-side{ text-align:right; margin-bottom:5px; }
	.footer-info-list.right-side  li span{ margin-right:0; margin-left:6px; }
}



.social-list{
}
.social-list li{ 
	display:inline-block;
	margin:1rem 0.3rem;
}
.social-list li:first-child{ margin-left:0; }
.social-list li:last-child{ margin-right:0; }

.social-list li .iconsvg{
	display:block;
	width:35px; height:35px;
	border:1px solid var(--primary-color);
	border-radius:50%;
	text-align:center;
	overflow:hidden;
}
.social-list li .iconsvg:before{
	background-color:var(--primary-color);
	
	-webkit-mask-size: 65% 65%;
    mask-size: 65% 65%;
	
}
.social-list li a:hover .iconsvg{
	border-color:var(--accent-color);
}
.social-list li a:hover .iconsvg:before{
	background-color:var(--accent-color);
}

@media (min-width:992px){
	.social-list{ text-align:right; }
}




















/*====== # common =======================================================================================================================================*/






.main{ padding-bottom:3rem; }












/*------------------------------------------------------------------------------------------- #page-leading-bar[cmn-01] */
/*---- #page-leading-bar[cmn-01] */
.page-leading-bar{
	position:relative;
	border-bottom:3px dashed #7889A0;
	padding:0 0 5px 70px;
	margin:45px 0 30px 0;
}
.page-leading-bar:before{
	position:absolute; bottom:0; left:0; content:"";
	width:60px; height:60px;
	background:url(../images/web-04.png) no-repeat center;
	background-size:cover;
}
/*.page-leading-bar:after{
	position:absolute; bottom:0; left:0; content:"";
	width:100%; height:3px;
	background:#7889A0;
	border-radius:2px;
}*/

.page-leading-list{ }
.page-leading-list li{ position:relative; display: inline-block; margin-right:16px; }
.page-leading-list li:after{
	position:absolute; top:50%; right:-14px; content:"";
	width:0; height:0;
	margin-top:-5px;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	border-left:5px solid #8195B0;
}
.page-leading-list li:last-child:after{ display: none; }

.page-leading-list li .text{ font-size:22px; font-weight:600; color:#8195B0; }

.page-leading-list li a:hover .text{ color:#F4791C; }















/*------------------------------------------------------------------------------------------- #breadcrumb-nav[cmn-02] */
/*---- #breadcrumb-nav[cmn-02] 導覽路徑 */
.breadcrumb-nav{ margin:5px 0; }

.breadcrumb{ text-align:right; }
.breadcrumb li{ display: inline-block; }
.breadcrumb li:after{ content:"/"; font-size: 10px; margin-left: 5px; }
.breadcrumb li:last-child:after{ display: none; }

.breadcrumb-item .iconfont , .breadcrumb-item .text{
	display:inline-block; vertical-align:middle;
	font-size: 12px; line-height: 1.5;
	color:#999;
}
.breadcrumb-item .iconfont{ font-size:16px; }

.breadcrumb-item a:hover .iconfont , .breadcrumb-item a:hover .text{
	color:#E28E44;
}
.breadcrumb-item.active .text{
	color:#8195B0;
	font-weight:600;
}


/*內頁接連在縣市區導引列下時的設定*/
.page-leading-bar + .breadcrumb-nav{ margin:-30px 0 30px 0; }


/*在村里詳細頁的右側內容里時的設定*/
.tab-right-content .breadcrumb-nav{ margin:-20px -15px 10px 0; }















/*------------------------------------------------------------------------------------------- #category-area[cmn-03] */
/*---- #category-area[cmn-03] 分類 */
.category-area{
	margin:2rem 0;
}
.category-list{
	text-align:center;
}
.category-list li{
	display:inline-block;
	text-align:center;
	margin:0.5rem;
}
.category-list li a{
	position:relative;
	display:block;
	z-index:2;
	border:2px solid var(--secondary-color);
	border-radius:4px;
	color:var(--secondary-color);
	font-size:14px; font-weight:600; line-height:1.4;
	padding:0.4rem 1rem;
	text-align:center;
}

.category-list li a:hover{
	border-color:#EB9243;
	color:#EB9243;
}

.category-list li.active a{
	background:#EB9243;
	border-color:#EB9243;
	color:#fff;
}


.tab-right-content .category-area{
	margin:-1.5rem 0 3rem 0;
}

















/*------------------------------------------------------------------------------------------- #tabs[cmn-04] */
/*---- #tabs[cmn-04] 詳細頁-分頁 */
.tab-wrapper{}

.tab-row{
	position:relative;
	display:flex; flex-wrap:wrap;
}
.tab-left{ display:none; }
.tab-right{width:100%; }

@media (min-width:992px){
	.tab-left{ 
		display:block;
		width:95px;
	}
	.tab-right{
		width:calc(100% - 95px);
	}
}

.tab-right-content{
	min-height:400px;
	padding:30px;
	background:#fff;
	box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.1);
	overflow:hidden;
}



/*詳細頁-分頁-左側項目 */
.tabs-list{ position:relative; z-index:5; display:flex; flex-wrap:wrap; /*padding:10px 0;*/ }
.tabs-list li{ width:100%; margin-bottom:10px; }
.tabs-list li a{
	position:relative;
	display:block; 
	padding:4px 20px 4px 5px;
	font-size:0.875rem; font-weight:600;
	color:#666;
	text-align:right;
}
.tabs-list li a:hover{ color:#8195B0; }
.tabs-list li a .title{ display:block; }
.tabs-list li.active a{
	background:#fff;
	color:#F4791C;
	/*font-size:16px; font-weight:600;*/
	padding-top:7px; padding-bottom:7px;
	box-shadow:-4px 4px 3px 0px rgba(0, 0, 0, 0.1);
	cursor:default;
}
.tabs-list li.active a:before{ opacity:1; }














/*------------------------------------------------------------------------------------------- #heading[cmn-05] */
/*---- #heading[cmn-05] 標題 */
.heading{}

.heading-icon, 
.heading-text{
	display:inline-block; vertical-align:middle;
}
.heading-icon img{
	display:block; max-width:100%; height:auto;
}

.heading-text{
	font-size:1.2rem; font-weight:600;
}
/*-----  base end =-----*/




/*村里詳細頁-tab區塊標題*/
.heading-village-view{
	margin-bottom:3rem;
	text-align:center;
}
.heading-village-view .heading-text{
	display:block;
	font-size:1.4rem;
	color:var(--primary-color);
	
}



/*詳細頁-大標*/
.heading-submain{
	text-align:center;
	margin-bottom:3rem;
}
.heading-submain .heading-text{
	color:var(--primary-color);
	font-size:1.3rem;
}

.heading-submain.product{
	text-align:left;
	margin:0 0 1rem 0;
}
@media (min-width:992px){
	.heading-submain .heading-text{
		font-size:1.5rem;
	}
}





/*heading(in figure 相片集)*/
.heading-figure{
	margin:1rem 0 2rem 0;
	color:rgba(var(--primary-rgb), 0.3);
	text-align:center;
	overflow:hidden;
}
.heading-figure .heading-text{
	position:relative;
	font-size:1.1rem;
	letter-spacing:10px;
	text-transform:uppercase;
}
.heading-figure .heading-text:before, 
.heading-figure .heading-text:after{
	position:absolute; top:50%; content:"";
	width:1000px; height:1px;
	background:rgba(var(--primary-rgb), 0.3);
}
.heading-figure .heading-text:before{ left:-1010px; }
.heading-figure .heading-text:after{ right:-1010px; }















/*------------------------------------------------------------------------------------------- #itembox[cmn-04] */
/*---- #itembox[cmn-04] 分隔區塊 */
.itembox{
	position:relative;
	margin:2rem 0;
}

.itembox-row{
	display:flex; flex-wrap:wrap;
}

.itembox-row > .itembox-left,
.itembox-row > .itembox-center,
.itembox-row > .itembox-right{
	width:100%;
}
/*-----  base end =-----*/



.itembox.village-view{
   /* padding-bottom:2rem;*/
    margin:2rem 0 6rem 0;
    /*border-bottom:1px dashed #ccc;*/
}





/*主內容區-頁尾*/
.itembox.mainbtm{
	border-top:1px solid rgba(var(--primary-rgb), 0.2);
	padding-top:1rem;
	margin-top:4rem;
	margin-bottom:0;
}
.itembox.mainbtm .itembox-row{ align-items:center; } 
.itembox.mainbtm .itembox-left{ order:3; }
.itembox.mainbtm .itembox-right{ order:2; margin:30px 0; }
.itembox.mainbtm .itembox-center{ order:1; }

@media (min-width:768px){
	.itembox.mainbtm{ padding-top:10px; }
    .itembox.mainbtm .itembox-left{ order:1; width:30%; }
	.itembox.mainbtm .itembox-center{ order:2; width:40%; }
	.itembox.mainbtm .itembox-right{ order:3; width:30%; margin:0; }
	
}














/*------------------------------------------------------------------------------------------- #page[cmn-05] */
/*---- #page[cmn-05] 頁碼 */

.page{
	font-size:12px; line-height:1.3;
	color:#666;
	margin:30px 0 45px 0;
	text-align:center;
}
.page a , .page span{
	display:inline-block;
	min-width:30px;
    background:#fff;
	border:1px solid #8195B0;
	/*border-bottom-width:3px;*/
    color:#8195B0;
	font-size:14px; font-weight:600; line-height:1.1;
	border-radius:2px;
	padding:6px 6px;
	margin:5px 3px;
}
.page span{
    background:#8195B0;
    color:#fff;
    border-color:#8195B0;
}
.page a:hover{
    border-bottom-color:#604b29;
    color:#604b29;
    border-color:#604b29;
}
















/*------------------------------------------------------------------------------------------- #page-select[cmn-06] */
/*---- #page-select[cmn-06] 下拉式選單 */
.page-select{
	display:flex; flex-wrap:wrap;
	align-items:center;
	
	/*max-width:300px;*/
	width:100%;
	margin:0 auto 3rem auto;
}

.input-group-text{
	color:#666;
	font-size:0.875rem;
}

.page-select .form-select{
	flex:1 1 auto;
    width:1%;
    min-width:0;
	
	/*border-radius:0;*/
	font-size:0.875rem;
	border:1px solid #ccc;
}

@media (min-width:992px){
	
	/*下拉式選單(in 村里相簿剪影)*/
	.page-select.village-albums{
		max-width:400px;
	}
	.page-select.village-albums form{
		display:block;
		width:100%;
	}
		
}













/*------------------------------------------------------------------------------------------- #base-slick[cmn-03] */
/*---- #base-slick[cmn-07] 輪播基礎 */

/*為解決因圖片過多，load時會出現圖片爆框問題*/
.base-slick{
    opacity:0;
    visibility:hidden;
    transition:opacity 1s ease-in-out;
    -webkit-transition:opacity 1s ease-in-out;
}
.base-slick.slick-initialized{ visibility:visible; opacity:1; }



/* slick 項目 */
.base-slick{ overflow:hidden; }
.base-slick .slick-slide{
    position:relative;
    overflow:hidden;
}
.base-slick .slick-slide img{
	display:block; max-width:100%; height:auto;
    margin:0 auto;
}


/* slick 輪播基礎-左右按鈕 */
.base-arrow .slick-prev, 
.base-arrow .slick-next{
	position:absolute; z-index:11; top:0;
	display:block;
	width:50px; height:100%;
	background:rgba(255,255,255,0.1);
	border:none;
	color:transparent;
	font-size:0;
	cursor:pointer;
	transition:opacity 0.7s ease , transform 0.7s ease;
}
.base-arrow .slick-prev{ left:0; transform:translateX(-70px); }
.base-arrow .slick-next{ right:0; transform:translateX(70px); }

.base-arrow .slick-prev:before, 
.base-arrow .slick-next:before{
	position:absolute; top:50%; left:50%; content:"";
	width:10px; height:10px;
	border:4px solid #fff;
	margin-top:-6px; margin-left:-6px;
	transform:rotate(45deg);
}
.base-arrow .slick-prev:before{ border-top-width:0; border-right-width:0; }
.base-arrow .slick-next:before{ border-left-width:0; border-bottom-width:0; }

.base-arrow .slick-prev:hover:before, 
.base-arrow .slick-next:hover:before{
    border-color:var(--accent-color);
}
.base-slick.base-arrow:hover .slick-prev, 
.base-slick.base-arrow:hover .slick-next{
	transform:translateX(0);
}



/* slick 輪播基礎--底下圓圈 */
.base-dots .slick-dots{
	position:relative; z-index:12;
	display:flex; flex-wrap:wrap; justify-content:center;
	width:100%;
	background:transparent;
	padding:0 5px;
}
.base-dots .slick-dots li{
	font-size:0;
	margin:8px 5px;
}
.base-dots .slick-dots li button{
	width:20px; height:4px;
	background:#ccc;
	border:1px solid #fff;
	/*border-radius:10px;*/
	font-size:0;
	cursor:pointer;
}
.base-dots .slick-dots li button:hover{
	background:var(--accent-color);
}
.base-dots .slick-dots li.slick-active button{
    background:var(--primary-color);

	opacity:1;
}
@media (min-width:992px){
	.base-dots .slick-dots li button{
		width:30px; height:8px;
	}
}















/*------------------------------------------------------------------------------------------- #btnbar[cmn-08] */
/*---- #btnbar[cmn-08] */
.btnbar{
    margin:5px 0;
	text-align:center;
}

/*(in card)*/
.card .btnbar{
	display:none; /*-----預設 card按鈕列隱藏*/
    margin:15px 0 5px 0;
}

/*----- base end -----*/


/*詳細頁-返回*/
@media (min-width:992px){
	.btnbar.pageback{
		text-align:left;
	}
}


.btnbar.village-view-more{
	margin-top:2rem;
}










/*------------------------------------------------------------------------------------------- #btn[cmn-09] */
/*---- #btn[cmn-09] */
.btn, 
.card-btn{
	position:relative;
	background:#fff;
	border:2px solid rgba(var(--primary-rgb),0.5);
	border-radius:3px;
	color:var(--primary-color);
	
	font-size:0.875rem; font-weight:600; line-height:1;
    padding:0.5rem 1.5rem 0.5rem 1.5rem;
	margin:0.5rem 0.2rem;
}
.btn .btn-text, 
.card-btn .btn-text{
	line-height:1;
}
.btn-row{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
}
.btn-row > .iconsvg,
.btn-row > .iconsvg,
.btn-row > .btn-text{
	position:relative; z-index:2;
	display:block;
	margin:0 1px;
}
.btn .iconsvg,
.card-btn .iconsvg{
	width:20px; height:20px;
}
.btn .iconsvg:before,
.card-btn .iconsvg:before{
	background-color:var(--primary-color);
}
/*-----  base end =-----*/



/*.btn[00]-返回*/
.btn-pageback{
	background:transparent;
	border-width:0;
	padding:0;
}




/*.btn[00]-村里詳細-更多*/
.btn-village-more{
	border-color:rgba(var(--secondary-rgb), 0.4);
	color:var(--secondary-color);
	font-size:1rem; font-weight:600;
	padding:12px 52px 12px 52px;
}
.btn-village-more .btn-text{
	position:relative;
	z-index:2;
}
.btn-village-more .iconsvg{
	position:absolute; z-index:0; top:50%; left:10px;
	width:80px; height:80px;
	margin-top:-40px;
	
	opacity:0.1;
	transition:opacity 0.3s ease-in-out,
				left 0.3s ease-in-out;
}
.btn-village-more .iconsvg:before{
	background-color:var(--secondary-color);
}






/*------------------------------------------------------------------------------------------- #btn:hover[cmn-18] */
/*---- #btn:hover[cmn-18] */
.btn:hover,
.card-btn:hover{
	border-color:var(--accent-color);
	background:var(--accent-color);
	color:#fff;
}
.btn:hover .iconsvg:before,
.card-btn:hover .iconsvg:before{
	background-color:#fff;
}
/*-----  base end =-----*/


.btn-pageback:hover{
	background:transparent;
	color:var(--accent-color);
}
.btn-pageback:hover .iconsvg:before{
	background-color:var(--accent-color);

}





/*.btn[00]-村里詳細-更多*/
.btn-village-more:hover .iconsvg{
	left:0;
	opacity:0.4;
}
.btn-village-more:hover .iconsvg:before{
	background-color:#fff;
}