@charset "utf-8";

:root {
	
	--color-one: #00aaa3; /*藍綠*/
	--color-one-dark:#2e5954;
	--color-one-dark-rgb:46,89,84;
	
	--color-two:#7dd1c9; /*淺藍*/
	--color-two-rgb:125,209,201;
	
	--color-three:#ffead5; /*淺黃*/
	--color-three-dark:#ffc758;
	
	--color-four:#f26868; /*紅粉*/
	--color-four-rgb:242,104,104;
	
	--color-accent: #fb7c04;
	
	
	--color-modify:#446EB6;
	--color-cancel:#ED9E48;
	--color-finish:#27A675;
}



/* a鏈結字 */
a { color:#333;}
a:hover,
a:focus {
	color:var(--color-accent);
	text-decoration:none;
}





/*-------------------------------------------------------------------------------------------

	#page

-------------------------------- */
.page{
	margin:var(--space-xl) 0 0 0;
	font-size:var(--font-sm);
	text-align:center;
	color:#666;
}
.page a,
.page span{
	display:inline-block;
	min-width:40px;
	border:2px solid var(--color-one);
	color:var(--color-one);
	background:#fff;
	text-align:center;
	padding:var(--space-xxs) var(--space-sm);
	margin:var(--space-xs) var(--space-xxs);
}
.page span{
	background:var(--color-accent);
	color:#fff;
	border-color:var(--color-accent);
}
.page a:hover{
	border-color:var(--color-accent);
	color:var(--color-accent);
}





/*-------------------------------------------------------------------------------------------

	#scrolltop

-------------------------------- */
.scrolltop{
	position: fixed; z-index:500; right:20px; bottom:70px;
    
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
	
	width:44px; height:44px;
    
	background:var(--color-one);
	border:2px solid rgba(255,255,255,0.6);
	border-radius:50%;

	cursor:pointer;
	opacity:0;
}
@media (min-width:992px){
	.scrolltop{
		bottom:30px;
	}
}
.scrolltop-text{
	position:relative;
	display:block;
	color:#fff;
	font-size:12px;
	padding-top:6px;
	text-align:center;
}
.scrolltop-text:before{
	position:absolute; top:0; left:50%; content:"";
	width:0; height:0;
	margin-left:-6px;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-bottom:6px solid #fff;
}
.scrolltop.show{ opacity:1; }





/*-------------------------------------------------------------------------------------------

	#header

-------------------------------- */
.header_relief{
	z-index:905;
	background:var(--color-one) url(../images/web-01.png) no-repeat center;
	padding-top:var(--space-md);
	overflow:hidden;
}
.header_relief .header_row{
	align-items:center;
}

.header_relief .header-one{
	order:1;
	flex:1 1 auto;
	width:1%; min-width:0;
}
.header_relief .header-two{
	position:relative;
	order:3;
	width:100%;
	margin-top:var(--space-md);
}
.header_relief .header-two:before{
	position:absolute; top:0; left:50%; content:"";
	width:1600px; height:100%;
	background:rgba(0,0,0,0.1);
	transform:translate(-50%, 0);
}

.header_relief .header-three,
.header_relief .header-four{
	display:none;
}
.header_relief .header-five{
	order:2;
	width:60px;
}

@media (min-width:768px){
	.header_relief{
		padding:var(--space-md) 0;
	}
	.header_relief .header-one{
		order:1;
		flex:none;
		width:auto;
		margin-right:var(--space-unit);
	}
	.header_relief .header-two{
		order:2;
		flex:1 1 auto;
		width:1%; min-width:0;
		margin-top:0;
	}
	.header_relief .header-two:before{
		display:none;
	}
}
@media (min-width:1200px){
	.header_relief .header-col{
		margin-right:var(--space-lg);
	}
	.header_relief .header-col:last-child{
		margin-right:0;
	}
	
	.header_relief .header-one{
		order:1;
		flex:none;
		width:auto;
	}
	.header_relief .header-two{
		order:2;
		flex:none;
		width:auto;
		margin:0 var(--space-unit) 0 var(--space-xl);
	}
	.header_relief .header-three{
		order:3;
		display:block;
		flex:1 1 auto;
		width:1%; min-width:0;
	}
	.header_relief .header-four{
		order:4;
		display:block;
		width:auto;
		margin:0;
	}
	.header_relief .header-five{
		display:none;
	}
}





/*-------------------------------------------------------------------------------------------

	#logo

-------------------------------- */
.logo{
	max-width:320px;
}
.logo img{
	display:block; max-width:100%; height:auto;
}





/*-------------------------------------------------------------------------------------------

	#Header_fixed [is-sticky]：卷軸下捲時固定

-------------------------------- */
.header_fixed.is-sticky{
	position:fixed; z-index:900; top:-300px; left:0;
	width:100%; height:auto;

	box-shadow:0 2px 6px rgba(0,0,0,0.3);
	padding:var(--space-xxxs) 0;
	transition:transform 0.6s ease-in-out;
}
.header_fixed.is-sticky.is-scroll{
	transform:translateY(300px);
}





/*-------------------------------------------------------------------------------------------

	#Navbar_toggler [in header]：側邊隱藏區塊-觸發鈕

-------------------------------- */
.navbar_toggler{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:flex-end;
	
	width: 50px;
	margin: 0 0 0 auto;
	
	/*取消連結的醒目點選標示*/
	-webkit-tap-highlight-color: transparent;
}
.navbar_toggler .navbar_toggler-icon,
.navbar_toggler .navbar_toggler-text{
	display:block;
	line-height:1;
}
.navbar_toggler .navbar_toggler-icon{
	width:32px; height:36px;
}
.navbar_toggler .sign_hamburger:before, 
.navbar_toggler .sign_hamburger:after, 
.navbar_toggler .sign_hamburger-line{
	height:4px;
	background:#fff;
}
.navbar_toggler .navbar_toggler-text{
	font-size:var(--font-md); font-weight:600;
	color:var(--color-one);
}
/* ---end--- */





/*-------------------------------------------------------------------------------------------

	#Offside

-------------------------------- */
.offside_inner{
	background:var(--color-one) url(../images/web-07.png) no-repeat left bottom;
	background-size:cover;
}

.offside_header{
	padding: var(--space-md) 0;
}


.offside_header .logo{
	max-width:320px;
	margin:0 auto var(--space-md) auto;
}





/*-------------------------------------------------------------------------------------------

	#Menu_offside 側邊區塊選單

-------------------------------- */
.menu_offside{
	margin-bottom:var(--space-xl);
}
.menu_offside li a{
	color:#fff;
}


/* ===== menu_offside [文字 at 第一層] */
.menu_offside > li > a{
	color:#fff;
}


/* ===== menu_offside [is 打開下層選單之提醒] */
.menu_offside li a:before{
	background: var(--color-accent);
}
.menu_offside li a.is-current{
	background: #fff;
	color: var(--color-accent);
}


/* ===== menu_offside [is 有下層之提示圖樣- 第一層] */
.menu_offside > li > a .menu-subbtn.is-open:before,
.menu_offside > li > a .menu-subbtn.is-open:after,
.menu-subbtn.is-open:before,
.menu-subbtn.is-open:after{
	background: var(--color-accent);
}





/*-------------------------------------------------------------------------------------------

	#footer

-------------------------------- */
.footer{
	margin-top:var(--space-lg);
}

.footer_inner{
	border-top:2px solid var(--color-one-dark);
	padding:var(--space-lg) 0;
}

.footer .row{
	align-items:center;
}

.logo_footer{
	margin:0 auto;
}
@media (min-width:992px){
	.logo_footer{
		margin:0;
	}
}





/*-------------------------------------------------------------------------------------------

	#navbar_social：社群

-------------------------------- */
.infolist_footer{
	/*font-size:var(--font-sm);*/
}
.infolist_footer .info{
	width:100%;
	justify-content:center;
	text-align:center;
}
.infolist_footer span{
	display:none;
}
@media (min-width:992px){
	.infolist_footer .info{
		justify-content:flex-start;
		text-align:left;
	}
	
	.infolist_footer br{
		display:none;
	}
	.infolist_footer span{
		display:block;
	}
}


.info_copyright{
	color:#666;
	font-size:var(--font-sm);
	margin-top:0.5rem;
}



.info_needs_admin{
	display:block;
	width:100%;
	text-align:center;
}
@media (min-width:992px){
	.info_needs_admin{
		text-align:right;
	}
}

.offside .info_needs_admin a{
	display:inline-block;
	border:1px solid rgba(255,255,255,0.5);
	border-radius:20px;
	color:#fff;
	padding:var(--space-xs) var(--space-md);
}
.offside .info_needs_admin a:hover{
	background:#fff;
	color:var(--color-accent);
}




.info_webdesigner{
	display:block;
	width:100%;
	font-size:var(--font-sm);
	margin-top:var(--space-xs);
	text-align:center;
}
@media (min-width:992px){
	.info_webdesigner{
		text-align:right;
	}
}
.info_webdesigner,
.info_webdesigner a{
	color:#666;
}
.info_webdesigner a:hover{
	color:var(--color-accent);
}





/*-------------------------------------------------------------------------------------------

	#navbar_social：社群

-------------------------------- */
.navbar_social{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
	
	margin-bottom:var(--space-unit);
}
@media (min-width:992px){
	.navbar_social{
		justify-content:flex-end;
	}
}
.navbar_social > li{
	margin-right:var(--space-unit);
}
.navbar_social > li:last-child{ margin-right:0; }

.icon-fb:before{ background-color:#385591; }
.icon-line:before{ background-color:#22AA38; }

.navbar_social a{
	display:block;
	transition:transform 0.3s ease;
}
.navbar_social a:hover{
	transform: translateY(-5px);  
}





/*-------------------------------------------------------------------------------------------

	#secbox

-------------------------------- */
.secbox{
	margin:var(--space-xl) 0;
}





/*-------------------------------------------------------------------------------------------

	#secbox_page：內頁

-------------------------------- */
.secbox_page{
	margin: var(--space-md) 0 var(--space-lg) 0;
}
@media (min-width:992px){
	.secbox_minh{
		min-height:550px;
	}
}


.itembox_maintop .minirow{
	align-items:center;
}

.itembox_maintop_needs .col-two{
	display:none;
}
@media (min-width:992px){
	.itembox_maintop_needs .col-two{
		display:block;
	}
}





/*-------------------------------------------------------------------------------------------

	#Breadcrumb-nav：導覽路徑

-------------------------------- */
.breadcrumb-nav{
	position:relative;
}

.breadcrumb li{ display:inline-block; }
.breadcrumb li:after{
	content:"/";
	color:#333;
	font-size:var(--font-xs);
	margin-left:var(--space-xxxxs);
}
.breadcrumb li:last-child:after{ display:none; }

.breadcrumb li{
	display:inline-block; vertical-align:middle;
	font-size:var(--font-unit); line-height:1.5; letter-spacing:0;
}

.breadcrumb li,
.breadcrumb li a{
	color:#666;
}
.breadcrumb li a:hover{
	color:var(--color-accent);
}





/*-------------------------------------------------------------------------------------------

	#heading_module：內頁大標

-------------------------------- */
.headingbar_main{
	position:relative;
	background:rgba(var(--color-two-rgb),0.3);
	border:1px solid rgba(var(--color-two-rgb),0.3);
	border-radius:10px;
	padding:var(--space-md) var(--space-xxs);
	margin-top:var(--space-xs);
	overflow:hidden;
}
.headingbar_main:before,
.headingbar_main:after{
	position:absolute; z-index:2; top:50%; left:15px; content:"";
	width:80px; height:80px;
	transform:translate(0, -50%);
}	
.headingbar_main:before{
	z-index:2;
	background:url(../images/heading-07.png) no-repeat bottom left;
	background-size:contain;
	opacity:0.4;
}
.headingbar_main:after{
	z-index:1;
	background:url(../images/web-05.png) no-repeat bottom left;
	background-size:contain;
}
@media (min-width:992px){
	.headingbar_main{
		padding:var(--space-lg) 200px;
	}
	.headingbar_main:before,
	.headingbar_main:after{
		width:100px; height:100px;
		opacity:1;
	}
}


.headingbar_news:before{
	top:53%;
	background-image:url(../images/heading-01.png);
	transform:rotate(-10deg) translate(0, -50%);
}
.headingbar_needs:before{
	top:auto; bottom:0;
	background-image:url(../images/heading-02.png);
	transform:translate(0, 0);
}
.headingbar_location:before{
	background-image:url(../images/heading-03.png);
}
.headingbar_qa:before{
	background-image:url(../images/heading-04.png);
}
.headingbar_download:before{
	background-image:url(../images/heading-05.png);
}
.headingbar_contact:before{
	background-image:url(../images/heading-06.png);
}




.heading_module{
	position:relative; z-index:3;
	text-align:center;
	font-size: var(--font-lg);
	color:var(--color-one);
}
@media (min-width:992px){
	.heading_module{
		font-size: var(--font-xxl);
	}
}

/*.heading_module.text-sm{
	font-size: var(--font-lg);
}
@media (min-width:992px){
	.heading_module.text-sm{
		font-size: var(--font-lg);
	}
}*/



/*in needs 志工媒合*/
.heading-tagbar{
	font-size: var(--font-lg);
}
.heading-taglist{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
}
.heading-taglist li:after{
	content:"/";
	margin:0 var(--space-xs);
}
.heading-taglist li:first-child:after,
.heading-taglist li:last-child:after{
	display:none;
}

.heading-tagbar .heading-divide{
	width:100%; height:2px;
	background:rgba(var(--color-two-rgb),0.2);
	margin:var(--space-sm) 0;
}




.heading_note{
	position:relative; z-index:3;
	display:block;
	font-size: var(--font-sm); font-weight:600;
	color:#333;
	text-align:center;
	margin-top:var(--space-sm);
}













/*-------------------------------------------------------------------------------------------

	#category：分類

-------------------------------- */
.category_list{
}
@media (min-width:992px){
	.category_list{
		display:flex; flex-wrap:wrap;
		align-items:center;
		margin-top:-20px;
		padding:0;
	}
	.category_list > li{
		margin:20px var(--space-md) 0 0;
	}
	

	.category_list.side{
		margin:0;
	}
	.category_list.side > li{
		width:100%;
		margin:0; margin-bottom: var(--space-xs);
	}
}



.catelink{
	display:flex; flex-wrap:wrap;
	align-items:center;
	
	border-width:0 0 1px 0;
	border-style:solid;
	border-color:#ccc;
}
.category_list > li:last-child .catelink{
	border-width:0;
}
.catelink a{
	display:block;
}
@media (min-width:992px){
	.catelink{
		border-width:1px;
		border-radius:3px;
	}
	.category_list > li:last-child .catelink{
		border-width:1px;
	}
	.catelink a:hover{
		background:rgba(255,255,255,0.2);
	}
}


.catebtn-map{
	border-right:1px solid #ccc;
	width:70px;
}
.catebtn-map .iconsvg{
	width:36px; height:46px;
	margin:0 auto;
}
.catebtn-map .iconsvg:before{
	background-color:#000;
	
	-webkit-mask-size: 60% 60%;
    		mask-size: 60% 60%;
}
.catebtn-map:hover .iconsvg:before{
	background-color:var(--color-one);
}
@media (min-width:992px){
	.catebtn-map{
		width:50px;
	}
}


.catebtn-text{
	flex:1 1 auto;
	width:1%; min-width:0;
	
	font-size: var(--font-unit);
	font-weight: 600;
	padding:var(--space-sm);
}

.category_list > li.active .catelink{
	background:var(--color-four) url(../images/web-03.png) no-repeat left bottom;
	background-size:cover;
	border-color:var(--color-four);
}
.category_list > li.active .catelink .catebtn-map{
	border-right-color:#fff;
}
.category_list > li.active .catelink .catebtn-map .iconsvg:before{
	background-color:#fff;
}
.category_list > li.active .catelink .catebtn-text{
	color:#fff;
}





/*-------------------------------------------------------------------------------------------

	#Sidebar：側邊攔

-------------------------------- */
.sidebar{
	margin-top:var(--space-lg);
}
@media (min-width:992px){
	.sidebar{
		display:flex; flex-wrap:wrap;
	}
	.sidebar-left{
		width:200px;
		margin-right:52px;
		margin-bottom:0;
	}
	.sidebar-right{
		width:calc( 100% - 252px );
	}
}





/*-------------------------------------------------------------------------------------------

	#dropdown_cate

-------------------------------- */

.dropdown_cate{
	margin:var(--space-lg) 0;
}

.sidebar .dropdown_cate{
	margin-top:0;
}



/* ===== 觸發區塊*/
.dropdown_cate .dropdown_trigger{
}

.dropdown_trigger{
	position:relative;
	display:block;
	background:#fff;
	border:1px solid #ccc;
	border-radius:5px;
	color:#333;
	line-height:1;
	padding: var(--space-sm) var(--space-md);
	text-align:center;
}
.dropdown_trigger:before{
	position:absolute; top:50%; right:12px; content:"";
	width:0; height:0;
	margin-top:-2px;
	
	border-width:6px 6px 0 6px;
	border-style:solid;
	border-color:transparent;
	
	border-top-color:#333;
}

.dropdown_trigger-text{
	font-size:var(--font-md); font-weight:600; line-height:1;
	padding-right:12px;
}

.dropdown_trigger:focus{
	color:#333;
}

.dropdown_trigger.is-open{
	border-color:var(--color-one);
	color:var(--color-one);
	border-radius:5px 5px 0 0;
}
.dropdown_trigger.is-open:before{
	transform:scaleY(-1);
	border-top-color:var(--color-one);
}


.dropdown_content{
	display:none;
	width:100%;
	border:1px solid var(--color-one);
	border-top-width:0;
	margin-bottom:var(--space-lg);
}
.dropdown_content.is-open{
	display:block;
}
@media (min-width:992px){
	.dropdown_trigger{
		display:none;
	}

	.dropdown_content{
		display:block;
		border-width:0;
		padding:0;
	}
}





/*-------------------------------------------------------------------------------------------

	#menu_sidebar 頁面多層menu

-------------------------------- */
.menu_sidebar > li:last-child{
	margin-bottom:0;
}
.menu_sidebar > li a{
	position:relative;
	display:block;
	
	border-width:0 0 1px 0;
	border-style:solid;
	border-color:#ccc;
	
	color:var(--color-one-dark);
	font-size:var(--font-unit); font-weight:600;
	padding:var(--space-sm);
}
@media (min-width:992px){
	.menu_sidebar > li{
		margin-bottom:var(--space-xs);
	}
	.menu_sidebar > li a{
		border-width:1px;
		border-radius:3px;
	}
	
	.menu_sidebar > li a:hover{
		border-color:var(--color-one);
		color:var(--color-one);
	}

}

.menu_sidebar > li.active a{
	background:var(--color-four)url(../images/web-03.png) no-repeat left bottom;
	background-size:cover;
	border-color:var(--color-four);
	color:#fff;
}





/*-------------------------------------------------------------------------------------------

	#Searchbar：搜尋

-------------------------------- */
.searchbar{
	margin-bottom:var(--space-lg);
}
.search{
	border:1px solid var(--color-one);
	border-radius: 3px;
	overflow:hidden;
}

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

	border-width:0px;
	border-radius:0;
	
	font-size:var(--font-sm); font-weight:400; line-height:1.5;
	color:#212529;
	
	padding:var(--space-xxs) 5px var(--space-xxs) var(--space-sm);

	-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;
	background:#fff;
	border-width:0px;
	border-radius:0;
}
.search-btn .iconsvg{
	width:40px; height:40px;
}
.search-btn .iconsvg:before{
	background-color:var(--color-one);
	
	-webkit-mask-size: 60% 60%;
    		mask-size: 60% 60%;
}

.search-btn:hover{
	background:var(--color-one);
}
.search-btn:hover .iconsvg:before{
	background-color:#fff;
}


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


/*.searchbar{
	margin-bottom: var(--space-lg);
}
.search{
	border: 1px solid #ccc;
}
.search-input{
	padding:var(--space-xs) var(--space-xxxs) var(--space-xs) var(--space-sm);
}
.search-btn:hover{
	background:var(--color-accent);
}*/



/*.searchbar{
	margin-bottom: 2rem;
}
.search{
	width:100%;
	background:#fff;
	border: 1px solid #ccc;
	overflow:hidden;
	margin-left:auto;
}
.search-input{
	background:#fff;
	color:#333;
	padding:0.6rem 5px 0.6rem 0.75rem;
}
input.search-input::-moz-placeholder{
	color:#333;
	font-size:1rem;
}
input.search-input::placeholder{
	color:#333;
	font-size:1rem;
}

.search-btn{
	width:40px;
}

.search-btn .iconsvg{
	width:40px; height:40px;
}

.search-btn .iconsvg:before{
	background-color:var(--color-one);
	
	-webkit-mask-size: 50% 50%;
    		mask-size: 50% 50%;
}

.search-btn:hover{
	background:var(--color-accent);
}

.search-btn:hover .iconsvg:before{
	background-color:#fff;
}*/





/*-------------------------------------------------------------------------------------------

	#formbox

-------------------------------- */
/*.formbox .btn_submit{
	background:var(--color-one) url(../images/web-03.png) no-repeat left bottom;
	background-size:cover;
	border-color:var(--color-one);
	border-radius:5px;
	color:#fff;
	padding: var(--space-sm) var(--space-md);
}
.formbox .btn_submit:hover{
	background-color:var(--color-accent);
	border-color:var(--color-accent);
	color:#fff;
}*/


.formbox_user_view .form-taglist{
	display:flex; flex-wrap:wrap;
	align-items:center;
	margin-top:-0.5rem;
}
.formbox_user_view .form-taglist li{
	margin-top:0.5rem;
	margin-right:1rem;
}

.formbox_user_view .form-tag{
	background:var(--color-three);
	border:1px solid var(--color-three-dark);
	border-radius:5px;
	color:#834e17;
	font-weight:600;
	padding:var(--space-xxxxs) var(--space-xxs);
}



.photo-delete{
	display:flex; flex-wrap:wrap;
	align-items:center;
}
.photo-delete a{
	display:block;
	margin-right:var(--space-md);
}
.photo-delete a:last-child{
	margin-right:0;
}

.photo-delete .sign_close{
	width:20px; height:20px;
}
.photo-delete a:hover .sign_close:before,
.photo-delete a:hover .sign_close:after{
	background:var(--color-accent);
}



.btnbar_submit{
	margin-top:var(--space-lg);
}




/*表單-我有需求*/ 
.formbox_sm{
	max-width:400px;
	margin:var(--space-lg) auto;
}

.formbox_md{
	max-width:600px;
	margin:var(--space-lg) auto;
}

.formbox_lg{
	max-width:1000px;
	margin:var(--space-lg) auto;
}





/*-------------------------------------------------------------------------------------------

	#Btn
		.btn_mainbd：主色-邊框
		.btn_main：主色-底色白字
		.btn_markbd：提醒-邊框
		.btn_markbd：提醒-底色白字

-------------------------------- */

.btn_mainbd,
.btn_main,
.btn_markbd,
.btn_markbd{
	border-radius:30px;
	padding: var(--space-unit) var(--space-lg);
}


.btn_mainbd{
	border:2px solid var(--color-one);
	color:var(--color-one);
}
.btn_mainbd:hover{
	background:var(--color-one);
	border-color:var(--color-two);
	color:#fff;
}

.btn_main{
	background:var(--color-one) url(../images/web-03.png) no-repeat left bottom;
	background-size:cover;
	border-color:var(--color-one);
	color:#fff;
}
.btn_main:hover{
	background-color:var(--color-accent);
	border-color:var(--color-accent);
	color:#fff;
}


.btn_markbd{
	border:2px solid var(--color-four);
	color:var(--color-four);
}
.btn_markbd:hover{
	background:var(--color-four);
	border-color:var(--color-four);
	color:#fff;
}

.btn_mark{
	background:var(--color-four) url(../images/web-03.png) no-repeat left bottom;
	background-size:cover;
	border-color:var(--color-four);
	color:#fff;
}
.btn_mark:hover{
	background-color:var(--color-accent);
	border-color:var(--color-accent);
	color:#fff;
}


.btn_lg{
	border-width:2px;
	font-size:var(--font-md);
	padding: var(--space-unit) var(--space-lg);
	border-radius:35px;
}










/*-------------------------------------------------------------------------------------------

	#card_needs：志工需求

-------------------------------- */
.card_needs{
	border:1px solid #ccc;
	border-left-width:5px;
	border-left-color:#EF4444;
	border-radius:10px;
	padding:var(--space-xs); padding-left:var(--space-unit);
}

.card_needs.status_finish{
	border-left-color:#22C55E;
}


/*狀態*/
.card_needs .info_status{
	color:#EF4444;
	font-size:var(--font-lg); font-weight:600;
}
.card_needs .info_status .iconsvg{
	width:24px; height:24px;
	margin-right:3px;
}
.card_needs .info_status .iconsvg:before{
	background-color:#EF4444;
}

.card_needs .info_status.status_finish{
	color:#22C55E;
}
.card_needs .info_status.status_finish .iconsvg:before{
	background-color:#22C55E;
}


.card_needs .card-name{
	margin-bottom:var(--space-unit);
}




.info_tag{
	display:flex; flex-wrap:wrap;
	font-weight:600;
	margin-bottom:4px;
}
@media (min-width:768px){
	.info_tag{
		margin-bottom:0;
	}
}

.card_needs .info_tag .iconsvg{
	width:20px; height:20px;
	margin:2px 3px 0 0;
}

.card_needs .info_tag .iconsvg:before{
	background-color:var(--color-one);
}


.card_needs .info_tag .info-title{
	/*width: 120px;
    margin-right: 10px;
    text-align: justify;
    text-align-last: justify;
    text-justify: inter-word;*/
	
	padding-right:20px;
}
.card_needs .info_tag .info-title:after {
    position: absolute; top: 0; right: 0; content: "：";
    color: #333;
}

.card_needs .info_tag .info-content{
	flex:1 1 auto;
	width:1%; min-width:0;
}

.card_needs .info_tag .info-content span{
	display:inline-block; vertical-align:middle;
	background:var(--color-three);
	border:1px solid var(--color-three-dark);
	border-radius:5px;
	color:#834e17;
	font-size:var(--font-sm);
	padding:var(--space-xxxxs) var(--space-xxs);
	margin:var(--space-xxxs); margin-top:0;
}

.card_needs .info_tag .info-content a{
	text-decoration:underline;
}


.card_needs .line_separate{
	width:100%; height:1px;
	border-top:1px dashed #ccc;
	margin:var(--space-sm) 0;
}



.card_needs .btnbar{
	display:block;
	margin:0;
}
.card_needs .btnbar > .minirow{
	justify-content:center;
}
@media (min-width:768px){
	.card_needs .btnbar{
		justify-content:flex-end;
	}
	
	.card_needs .btnbar > .minirow{
		justify-content:flex-end;
	}
}

.card_needs .btnbar_end{
	margin:var(--space-md) 0 var(--space-sm) 0;
}

.card_needs .btn_func{
	width:100%;
	background:#fff;
	border:1px solid #333;
	color:#333;
	margin:0;
	padding:var(--space-sm) var(--space-xxxxs);
}
.card_needs .btn_func:hover{
	background:var(--color-one) url(../images/web-03.png) no-repeat left bottom;
	background-size:cover;
	border-color:var(--color-one);
	color:#fff;
}
.card_needs .btn_func:hover .iconsvg:before{
	background-color:#fff;
}
@media (min-width:768px){
	.card_needs .btn_func{
		width:100%;
		margin:0;
	}
}

.card_needs .btn_func.btn_need_join{
	background:var(--color-one) url(../images/web-03.png) no-repeat left bottom;
	border-color:var(--color-one);
	background-size:cover;
	color:#fff;
}
.card_needs .btn_func.btn_need_join:hover{
	background-color:var(--color-accent);
	border-color:var(--color-accent);
	color:#fff;
}


.card_needs .btn_func.btn_modify{
	border-color:var(--color-modify);
	color:var(--color-modify);
}
.card_needs .btn_func.btn_modify:hover{
	background-color:var(--color-modify);
	color:#fff;
}


.card_needs .btn_func.btn_cancel{
	border-color:var(--color-cancel);
	color:var(--color-cancel);
}
.card_needs .btn_func.btn_cancel:hover{
	background-color:var(--color-cancel);
	color:#fff;
}


.card_needs .btn_func.btn_finish{
	border-color:var(--color-finish);
	color:var(--color-finish);
}
.card_needs .btn_func.btn_finish:hover{
	background-color:var(--color-finish);
	color:#fff;
}




.card_needs .card-thumbnail{
}
.card_needs .card-thumbnail-inner{
	max-width:600px;
}



.card_needs .card-note{
}
.card-note-title{
	font-weight:600;
	margin-bottom:var(--space-sm);
}





/* 志工-簽到 / 簽退*/
.signin-wrap{
	background:#f0fdfa;
	border-radius: 10px;
	padding:1rem;
	
	--signin-primary: #0284c7;
	--signin-success: #10b981;
	
	--tag-bg-id: #f1f5f9;
	--tag-text-id: #475569;
	--tag-bg-age: #fff7ed;
	--tag-text-age: #c2410c;
	--tag-bg-diet: #ecfdf5;
	--tag-text-diet: #047857;
	--tag-bg-role: #e7f2ff;
	--tag-text-role: #1d4ed8;
	
	--radius-md: 12px;
	--radius-sm: 8px;
	--radius-pill: 9999px;
}

.signin-heading{
	border-bottom:1px solid rgba(0,0,0,0.1);
	padding-bottom:1rem;
	margin:1rem 0;
}
.signin-heading-text{
	font-size: var(--font-md); font-weight: 600;
	text-align:center;
}
.signin-heading-text .badge-num{
	background:var(--signin-primary);
	border-radius:20px;
	color:#fff;
	font-size:0.875rem;
	padding:0.25rem 0.75rem;
	margin-left:0.5rem;
}
@media (min-width:992px){
	.signin-heading{
		margin:0.5rem 0 1.5rem 0;
	}
	.signin-heading-text{
		text-align:left;
	}
}




/*簽到人員*/
.singinbox {
	position:relative;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	padding-bottom:1rem;
	margin-bottom:1rem;
	padding-left:32px;
}

.singinbox-index{
	position:absolute; top:3px; left:0; 
	display: flex;
	align-items: center;
	justify-content: center;
	
	width: 24px; height: 24px;
	background-color: var(--signin-primary);
	border-radius: 50%;
	color: white;
	font-size: 0.875rem; font-weight: bold;
}


.singinbox-header {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	flex-wrap: wrap;
	gap: 12px;
}
.singinbox-profile{ order:1; }
.singinbox-tags{ order:3; width:100%; }
.singinbox-phone{ order:2; }
@media (min-width:992px){
	.singinbox-profile{ order:1; }
	.singinbox-tags{ order:2; width:auto; }
	.singinbox-phone{ order:3; }
}

.singinbox-profile {
}
.singinbox-profile .name {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width:90px;
	
	color: #000;
	font-size: var(--font-base); font-weight: 700;
}
.singinbox-profile .gender {
	font-size: 0.9rem;
	font-weight: normal;
	color: #333;
}

.singinbox-phone {
	display: flex;
	align-items: center;
	gap: 6px;
	
	background:rgba(255,255,255,0.3);
	border:1px solid #eee;
	border-radius: var(--radius-pill);
	color: var(--text-muted);
	font-size: 0.95rem;
	padding: 6px 12px;
	margin-left:auto;
}
.singinbox-phone .iconsvg{
	width:16px; height:16px;
}



.singinbox-tags {
	display:flex; flex-wrap:wrap;
	align-items: center;
	gap: 0.5rem;
}
@media (min-width:992px){
	.singinbox-tags {
		margin-left:0.5rem;
	}
}
.tag {
	font-size: 0.85rem;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	display: inline-block;
}

.tag-id { background-color: var(--tag-bg-id); color: var(--tag-text-id); }
.tag-age { background-color: var(--tag-bg-age); color: var(--tag-text-age); }
.tag-diet { background-color: var(--tag-bg-diet); color: var(--tag-text-diet); }
.tag-role { background-color: var(--tag-bg-role); color: var(--tag-text-role); }



/*時間戳*/
@media (min-width:992px){
	.singinbox-timestamps {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
}
.singinbox-timestamps .time-item {
	position:relative;
	font-size: 0.85rem;
	color: #333;
	padding-left:16px;
}
.singinbox-timestamps .time-item:before {
	position:absolute; top:50%; left:0; content: "";
	width: 8px;
	height: 8px;
	margin-top:-4px;
	border-radius: 50%;
}
.singinbox-timestamps .time-item.checked:before {
	background-color: var(--signin-success);
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.singinbox-timestamps .time-item.empty:before {
	background-color: #cbd5e1;
}



/*用餐統計*/
.meal-total{
	display:flex; flex-wrap:wrap;
	align-items:center;
	gap:1.5rem;
	
	color:#000;
	font-weight:600;
}
.meal-total .title{
	background:var(--signin-primary);
	border-radius:var(--radius-pill);
	color:#fff;
	padding: 4px 12px;
}
.meal-total span{
	display: inline-block;
	color:red;
	font-size: 1.25rem; font-weight: 600;
}