/*----------------------------------------------------------------------
	#breadcrumb-nav：導覽路徑
-------------------------------- */
.breadcrumb-nav{
	position:relative;
	text-align:center;
}
@media (min-width:992px){
	.breadcrumb-nav{
		text-align:right;
	}
}

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

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

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



/*----------------------------------------------------------------------
	#sidebar:側邊攔
-------------------------------- */
.sidebar{}
.sidebar_row{
	display:flex; flex-wrap:wrap;
}
.sidebar-left{
	width:100%;
}
.sidebar-right{
	position:relative;
	width:100%;
	margin-top:2rem;
}
@media (min-width:992px){
	.sidebar-left{
		width:200px;
		margin-right:80px;
	}
	.sidebar-right{
		width:calc( 100% - 280px );
		margin-top:0;
	}
	.sidebar-right:before{
		position:absolute; top:0; left:-40px; content:"";
		width:1px; height:100%;
		background:#eee;
	}
}



/*----------------------------------------------------------------------
	#mtree:base
-------------------------------- */
.mtree{}

.mtree li{ position:relative; }

.mtree li a{
	position:relative;
	display:block;
	
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: rgba(0,0,0,0.2);
	
	font-size:var(--text-base); font-weight:600;
	color:#333;
	padding:var(--spacing-sm);
	padding-right:var(--spacing-md);
}

.mtree li a:hover{
	color: var(--color-accent);
}

.mtree > li:last-child > a{ border-bottom-width:1px ; }

.mtree li ul{
	padding-left:var(--spacing-sm);
}

/*===== 有下一層選項的項目設定(>號) */
/*.mtree li.mtree-node > a:before{
	position:absolute; z-index:4; top:50%; right:10px; content:"";
	width:6px; height:6px;
	
	border-width:2px 2px 0 0;
	border-style:solid;
	border-color:#333;
	
	transform:rotate(45deg);
	transition:transform 0.5s ease , margin-top 0.5s ease;
}
.mtree li.mtree-closed > a:before{
	margin-top:-2px;
	transform:rotate(45deg);
}
.mtree li.mtree-open > a:before{
	margin-top:-4px;
	transform:rotate(135deg);
}*/

/*===== 因active 項目開關是相反的*/
/*.mtree li.active.mtree-closed > a:before{
	margin-top:-4px;
	transform:rotate(135deg);
}
.mtree li.active.mtree-open > a:before{
	margin-top:-2px;
	transform:rotate(45deg);
}*/


/*===== 有下一層選項的項目設定(+號)[ before-直線，after-橫線 ] */
.mtree li.mtree-node > a:before, 
.mtree li.mtree-node > a:after{
	position:absolute; z-index:4; top:50%; right:12px; content:"";
	width:2px; height:12px;
	background:#333;
	margin-top:-6px;
	transition:transform 0.3s ease-in-out;
}
.mtree  li.mtree-node > a:after{transform:rotate(90deg);  }


/*===== 打開有次選單項目時之文字設定*/
.mtree li.mtree-open > a{
	color:var(--color-accent);
}
.mtree li.mtree-open > a:before, 
.mtree li.mtree-open > a:after{
	background:var(--color-accent);
}
.mtree li.mtree-open > a:before{ transform:rotate(45deg); }
.mtree li.mtree-open > a:after{ transform:rotate(125deg); }

/*因active 項目開關是相反的*/
.mtree li.active.mtree-closed > a:before{ transform:rotate(45deg); }
.mtree li.active.mtree-closed > a:after{ transform:rotate(125deg); }
.mtree li.active.mtree-open > a:before{ transform:rotate(0); }
.mtree li.active.mtree-open > a:after{ transform:rotate(90deg); }

.mtree li.active > a{
	color:var(--color-accent);
}
.mtree li.active > a:before,
.mtree li.active > a:after{
	background: var(--color-one);
}


/*====== 選中的項目有標記(圓圈)之設定 */
.mtree li:after{
	position: absolute; top:17px; left: 0px; content: "";
	width:8px; height:8px;
	margin-top: -1px;
	background-color:var(--color-accent);
	border-radius:50%;
	opacity:0;
}
.mtree li.active:after{
	opacity:1;
}



/*----------------------------------------------------------------------
	#menu_sidebar：頁面左側多層menu(套用mtree)
-------------------------------- */
.menu_sidebar{
    display:none;
}
@media (min-width:992px){
	.menu_sidebar{ display:block; }
}

.menu_sidebar li a:hover:before, 
.menu_sidebar li a:hover:after{
	background: var(--color-accent);
}



/*----------------------------------------------------------------------
	#nav
-------------------------------- */
/* .navbar{
	display:flex; flex-wrap:wrap;
} */



/*----------------------------------------------------------------------
	#category：分類
-------------------------------- */
.category_box{
	display:none;
	margin-bottom:var(--spacing-md);
}
@media (min-width:992px){
	.category_box{
		display:block;
	}
}

.category_list{
	text-align:center;
	margin:var(--spacing-md) auto;
}
.category_list li{
	display:inline-block;
	text-align:center;
	margin:var(--spacing-md) var(--spacing-xs);
}
.category_list li a{
	position:relative;
	color:#333;
	font-size:var(--text-base); font-weight:600;
	border:1px solid #ccc;
	padding:var(--spacing-xs) var(--spacing-md);
}
.category_list li a:before{
	position:absolute; bottom:-3px; left:0; content:"";
	width:0; height:3px;
	background:var(--color-one);
	transition: width 0.5s ease;
}
.category_list li a:hover:before,
.category_list li.active a:before{
	width:100%;
}
.category_list li.active a{
	border-color:var(--color-one);
	color:var(--color-one);
}



/*----------------------------------------------------------------------
	#分類-下拉選單式
-------------------------------- */
.formbox_cateselect{
	position:relative; z-index:2;
	max-width:400px;
	margin:var(--spacing-md) auto;
}
.formbox_cateselect .input_group{
	align-items:center;
}
.formbox_cateselect .form-label{
	margin-bottom:0;
}
@media (min-width:992px){
	.formbox_cateselect .form-select{
		flex:1 1 auto;
		width:1%; min-width:0;
		
		font-size:var(--text-sm);
		border:1px solid #ccc;
	}
}
@media (min-width:992px){
	
	/* in timeline */
	.formbox_cateselect_timeline{
		max-width:200px;
		margin:0 0 5px 0;
	}

	/* in franchiser_albums 、 franchiser_albums_view */
	.formbox_cateselect_franchiser_albums{
		margin-left:0; margin-right:0;
	}

	/* in designer_pic */
	.formbox_cateselect_designer{
		margin-left:0; margin-right:0;
	}
		
}








/*----------------------------------------------------------------------
	#searchbar：搜尋
-------------------------------- */
.searchbar{
	margin-bottom: var(--spacing-lg);
}
.search{
	border: 1px solid #ccc;
}

.search-input{
	display:block;
	width:100%;
	background-color:#fff;
	background-clip:padding-box;
	border-width:0px;
	border-radius:0;
	color:#212529;
	padding:0.5rem 0.25rem 0.5rem 0.5rem;

	-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 img{
	display:block;
	width:22px;
}
.search-btn:hover{
	background:var(--color-accent);
}
.search-btn:hover img{
	filter:brightness(0) invert(1);
}

.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;
}





/*----------------------------------------------------------------------
	#itembox：分隔區塊
		.itembox_maintop：主內容上列 [in page]
		.itembox_pagenote：頁面提示說明 [in page]
		.itembox_redmark：紅字-提示 [in page]
		
		.tembox_intro：編輯區 [in view]
		.tembox_about_figure：關於我們-相片集 [in view]
		.tembox_map：地圖 [in view]
		.itembox_video：影片 [in view]
		.itembox_view_figure：相片集 [in view]
		.itembox_view_albums：相簿 [in view]
		.itembox_article_sub：知識庫(側邊) [in view]
		.itembox_view_extended：知識庫-延伸閱讀 [in view]
		.itembox_view_interest：知識庫-您可能有興趣 [in view]
		
		.itembox_view_addcart：代理商品-頁尾購買區 [in agent_pd_view]
		
		.itembox_mainbtm：主內容區-頁尾 [in view]
		
-------------------------------- */
.itembox{
	position:relative;
	margin:var(--spacing-sm) 0;
}
.itembox_row{
	display:grid;
}





/*----------------------------------------------------------------------
	#iconcate：圖標分類
-------------------------------- */
.iconcate_box{ display:none; }
@media (min-width:992px){
	.iconcate_box{ display:block; }
}

.iconcate_list{
	display:flex; flex-wrap:wrap;
	gap:var(--spacing-md);
}
.iconcate_list li{ width:100%; }

.iconcate{}
.iconcate_row{
	display:flex; flex-wrap:wrap;
	align-items:center;
}
.iconcate_row .iconsvg,
.iconcate_row .iconcate-text{
	position:relative; z-index:2;
	display:block;
	margin:0 1px;
}
.iconcate .iconsvg{
	width:22px; height:22px;
}
.iconcate .iconsvg:before{
	background-color:#333;
}
.iconcate_row .iconcate-text{
	font-size:1rem; font-weight:600;
	color:#333;
}



/*----------------------------------------------------------------------
	#result-box：搜尋結果
-------------------------------- */
.search_result_bar{
	margin:0 0 var(--spacing-2xl) 0;
}

.search_result{
	position:relative;
	
	display:flex; flex-wrap:wrap;
	align-items:center;
	
	background:rgba(0,0,0,0.05);
	border-radius:18px;
	padding:0.1rem 1rem;
}
.search_result .iconsvg{
	width:25px; height:25px;
	margin-right:var(--spacing-sm);
}
.search_result .iconsvg:before{
	background-color:#999;
}
.search_result-text{
	flex:1 1 auto;
    width:1%; min-width:0;
	
	font-size:var(--text-xl); font-weight:600;
}



/*----------------------------------------------------------------------
	#page：頁碼
-------------------------------- */
.page{
	font-size:var(--text-sm); font-weight:600;
	text-align:center;
	color:#666;
	margin-top:var(--spacing-xl);
}
/*.page br:nth-of-type(1){
	display:none;
}*/
.page a ,
.page span{
	display:inline-block;
	min-width:38px;
	background:#fff;
	border:1px solid #999;
	border-bottom-width:3px;
	border-radius:2px;
	color:var(--color-one);
	font-size:var(--text-sm);
	padding:var(--spacing-xs) var(--spacing-sm);
	text-align:center;
	margin:var(--spacing-xs) var(--spacing-2xs);
}
.page span{
	background: var(--color-one);
	border-color: var(--color-one);
	color: #fff;
}
.page a:hover{
	border-color: var(--color-accent);
	color:var(--color-one);
}

/* ===== in itembox */
/*.itembox .page,
.consult .page{
	margin:var(--spacing-md) 0 var(--spacing-base) 0;
}*/










/*----------------------------------------------------------------------
	#main
-------------------------------- */
.secbox_page,
.secwrap_contact{
	padding:var(--spacing-sm) 0 var(--spacing-2xl) 0;
}


/* ===== in index */
.secbox_idx .secbox_bg{
	padding: var(--spacing-xl) 0;
}


.secbox_pd .secbox_inner{
	max-width:1100px;
	margin-left:auto; margin-right:auto;
}


/* ===== in contact */
.secbox_contact{
	margin:var(--spacing-2xl) 0;
}
.secbox_contact:first-child{
	margin-top: 0;
}


/* ===== 填表諮詢：in idx/contact */
.secbox_inquire .secbox_inner {
	background:rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: var(--spacing-xl) var(--spacing-lg);
	
    box-shadow: -4px -4px 10px 0 rgb(0 0 0 / 10%), 
				4px 4px 10px 0 rgb(0 0 0 / 20%);
	
}





/*----------------------------------------------------------------------
	#index：首頁
-------------------------------- */

/* ===== 首頁大標 */
.heading_sec{
	position:relative;
	padding-left:var(--spacing-md);
	margin-bottom:var(--spacing-lg);
}
.heading_sec:before{
	position:absolute; top:15%; left:0px; content:"";
	width:5px; height:70%;
	background:var(--color-one);
}
.heading_sec .heading-text{
	color:var(--color-one);
	font-weight:600; line-height:1.5;
	margin:0;
}
.heading_sec .heading-subtext{
	display:none;
}


/* ===== 首頁大標：置中型 */
.heading_centerline{
	text-align:center;
	margin-bottom:var(--spacing-lg);	
}
.heading_centerline .heading-text{
	position:relative;
	color:var(--color-one);
	padding-bottom:var(--spacing-sm);
}
.heading_centerline .heading-text:before{
	position:absolute; bottom:0; left:50%; content:"";
	width:36px; height:5px;
	transform:translate(-50%, 0);
	background:var(--color-one);
}


/* ===== 首頁more按鈕列 */
.btnbar_idxmore{
	margin-top:var(--spacing-xl);
}

.btn_idxmore{
	border-color:#999;
	padding:12px 52px 12px 52px;
}
.btn_idxmore .btn-text{
	position:relative; z-index:2;
	color:#666;
}
.btn_idxmore .iconsvg{
	position:absolute; z-index:0; top:50%; left:10px;
	width:80px; height:80px;
	margin-top:-40px;
	
	opacity:0.3;
	transition: opacity 0.3s ease-in-out,
				left 0.3s ease-in-out;
}
.btn_idxmore .iconsvg:before{
	background-color:#ccc;
}


/* ===== 首頁區塊:hover 首頁more按鈕列 */
.secbox_idx:hover .btn_idxmore{
	border-color:var(--color-accent);
}
.secbox_idx:hover .btn_idxmore .iconsvg{
	opacity:0.2;
}
.secbox_idx:hover .btn_idxmore .iconsvg:before{
	background-color:var(--color-accent);
}
.secbox_idx:hover .btn_idxmore .btn-text{
	color:var(--color-accent);
}


/* ===== 首頁more按鈕列:hover */
.btn_idxmore:hover .iconsvg{
	left:0;
	opacity:0.4;
}
.btn_idxmore:hover .iconsvg:before{
	background-color:#fff;
}
.btn_idxmore:hover .btn-text{
	color:#fff;
}

.secbox_idx:hover .btn_idxmore:hover{
	border-color:var(--color-accent);
}
.secbox_idx:hover .btn_idxmore:hover .iconsvg:before{
	background-color:#fff;
}
.secbox_idx:hover .btn_idxmore:hover .btn-text{
	color:#fff;
}





/*----------------------------------------------------------------------
	#page：表列頁
-------------------------------- */

/* ===== 模組大標 */
.heading_module{
	border-bottom:1px solid #ccc;
}
.heading_module .heading-text,
.heading_module .heading-subtext{
	display:block;
	margin:var(--spacing-2xs) 0;
	font-weight:600;
	
	text-align:center;
}
.heading_module .heading-text{
	color:var(--color-dark);
	margin-bottom:var(--spacing-xs);
}
.heading_module .heading-subtext{
	font-size:var(--text-sm);
	text-transform:uppercase;
	padding-top:var(--spacing-xs);
	opacity:0.8;
	color:rgba(var(--color-one-rgb),0.7);
}


/* ===== 表列頁大標 */
.heading_main{
	margin: var(--spacing-xs) 0 var(--spacing-lg) 0;
	text-align: center;
}
.heading_main .heading-text{
	color: var(--color-one);
}
.heading_main .heading-intro{
	font-weight:600;
	color:rgba(0,0,0,0.6);
	margin-top:var(--spacing-md); 
}

/* ===== 表列頁大標 [in product] */
.heading_main.product{
	text-align: left;
	margin: 0 0 var(--spacing-md) 0;
}


/* ===== 主內容上列 */
.itembox_maintop{
	margin: var(--spacing-xs) 0 var(--spacing-md) 0;
}
@media (min-width: 992px){
	.itembox_maintop{
		margin: var(--spacing-lg) 0 var(--spacing-md) 0;
	}
}

/* ===== 頁面提示說明 */
.itembox_pagenote{
	min-height:200px;
	color:#333;
	font-weight:600;
	text-align:center;
	margin:var(--spacing-lg) 0;
}


/* ===== 頁面紅字-提示 */
.itembox_redmark{
	font-size:var(--text-lg); font-weight:600;
	color:red;
}





/*----------------------------------------------------------------------
	#view：詳細頁
-------------------------------- */

/* ===== 詳細頁大標 */
.heading_pageview{
	text-align:center;
	margin-bottom:var(--spacing-xl);
}
.heading_pageview .heading-text{
	position: relative;
	color:var(--color-one);
}

/* ===== 詳細頁大標 [in product] */
.heading_pageview_product{
	text-align:left;
	margin:0 0 var(--spacing-md) 0;
}


/* ===== 日期 */
.info_view_date{
	display:block;
	font-size:var(--text-sm); font-weight:600;
	color:#666;
	text-align:center;
	margin-top:var(--spacing-sm);
}


/* ===== 地圖 */
.itembox_map{
	background:#fff;
	border:1px solid #cccc;
	border-radius:5px;
	text-align:center;
	padding:var(--spacing-2xs);
}
.itembox_map iframe{
	width:100%;
	max-height:250px;
}


/* ===== 影片 */
.itembox_video{
	text-align:center;
}
.itembox_video iframe{
	max-width:100%;
}


/* ===== 相片集 */
.itembox_view_figure{
	margin:var(--spacing-xl) 0;
}
.itembox_view_figure .row{
	justify-content:center;
}

/* ===== 相片集-大標 */
.heading_figure{
	margin:var(--spacing-md) 0 var(--spacing-lg) 0;
	color:rgba(var(--color-one-rgb), 0.3);
	text-align:center;
	overflow:hidden;
}
.heading_figure .heading-text{
	position:relative;
	display:inline-block;
	 font-size:var(--text-lg); 
	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(--color-one-rgb), 0.3);
}
.heading_figure .heading-text:before{ left:-1010px; }
.heading_figure .heading-text:after{ right:-1010px; }


/* ===== 關於我們-相片集 */
.itembox_about_figure{
}
.itembox_about_figure .itembox_inner{
	max-width:900px;
	margin:0 auto;
}


/* ===== 相簿 */
.itembox_view_albums{
	margin:var(--spacing-xl) 0;
}


/* ===== 按鈕-問題諮詢 */
.btn_consult{
	background:#fff;
	border:1px solid #CC3333;
	border-radius:40px;
	color:#CC3333;
	overflow:hidden;
}
.btn_consult .iconsvg{
	position:absolute; right:-5px; top:50%;
	width:64px; height:64px;
	margin-top:-32px;
	opacity:0.2;
	transform:rotate(10deg);
}
.btn_consult .iconsvg:before{
	background-color:#CC3333;
}
.btn_consult:hover{
	box-shadow:1px 1px 3px rgba(0,0,0,0.3);
} 
@media (min-width: 992px){
	 .btn_consult{
		border-radius:22px;
	}
	.btn_consult .iconsvg{
		width:54px; height:54px;
		margin-top:-28px;
	}
}

.btn_consult:hover{
	border-color:var(--color-accent);
}
.btn_consult:hover .iconsvg{
	opacity:0.5;
}



/* ===== 主內容區-頁尾 */
.itembox_mainbtm{
	border-top:1px solid rgba(var(--color-one-rgb), 0.2);
	padding-top:var(--spacing-md);
	margin-top:var(--spacing-md);
}

@media (min-width:768px){
	.itembox_mainbtm .itembox_row{
		display:grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	} 
}
.itembox_mainbtm .itembox-left{ order:3; }
.itembox_mainbtm .itembox-right{ order:2; }
.itembox_mainbtm .itembox-center{ order:1; }

@media (min-width:768px){
    .itembox_mainbtm .itembox-left{ order:1;}
	.itembox_mainbtm .itembox-center{ order:2; }
	.itembox_mainbtm .itembox-right{ order:3;}
}



/* ===== 社群分享 Widget */
.sharelink_bar{
	text-align:center;
}
.sharelink{
	display:inline-block;
}
@media (min-width:992px){
	.itembox_mainbtm .sharelink_bar{ text-align:right; }
}


/* ===== 按鈕-返回 */
@media (min-width:992px){
	.btnbar_pageback{
		justify-content:flex-start;
	}
}
.btn-pageback{
	min-width:auto;
	padding:var(--spacing-xs);
	border-width:0;
	box-shadow:none;
}
.btn-pageback:hover{
	background:transparent;
	color:var(--color-accent);
}
.btn-pageback:hover .iconsvg:before{
	background-color:var(--color-accent);
}










/*----------------------------------------------------------------------
	#page-237_設計師(使用者) #designer
		  331_個人介紹
-------------------------------- */

/* ===== 按鈕：預約/參加會議 */
.btn_reserve{
	width:100%; max-width:200px;
	border-color:var(--color-reserve);
	overflow:hidden;
}
.btn_reserve:before{
	position:absolute; top:0; left:0; content:"";
	width:0; height:100%;
	background:var(--color-reserve);
	transition:width 0.2s ease;
}

.btn_reserve .iconsvg:before{
	background-color:var(--color-reserve);
}
.btn_reserve .btn-text{
	color:var(--color-reserve);
}

.btn_reserve:hover{ 
	background:#fff; 
	border-color:var(--color-reserve); 
}
.btn_reserve:hover:before{
	width:100%;
}
.btn_reserve:hover .btn-text{
	color:#fff;
}



/* ===== popup:base-用於設計師視訊列表、首頁app下載 */
.popupbox{
	position:fixed; z-index:-2; top:0; left:0;
	width:100%; height:100vh;
	background:rgba(0,0,0,0.85);
	overflow:hidden;
	padding:0 10px;
	
	opacity:0;
	pointer-events:none;
	visibility:hidden;
	
	transform:scale(0.95);
	transition: opacity 0.5s, 
				visibility 0.5s,
				transform 0.5s;
}
.popupbox.is-open{
	z-index:1100;
	opacity:1;
	pointer-events:auto;
	visibility:visible;
	
	transform:scale(1);
}

body.popup-hidden{ overflow:hidden; }


/* ===== 關閉 */
.popup_close{
	position:absolute; top:20px; right:20px;
	width:50px; height:50px;
	border-radius:5px;
	padding:15px;
	background:rgba(255,255,255,0.2);
}
.popup_close .sign_close{
	width:100%; height:100%;
}


/* ===== 置中 */
.popup_row{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
	width:100%; height:100vh;
}
.popup_limit{
	width:100%; height:calc( 100% - 80px );
	overflow:hidden;
	margin-top:80px;
}
.popup_main{
	width:100%; height:100%;
	overflow-y:scroll;
}


/* ===== 標題 */
.heading_popup{
	text-align:center;
	margin-bottom:var(--spacing-lg);
}
.heading_popup .heading-icon,
.heading_popup .heading-text{
	display:inline-block; vertical-align:middle;
}
.heading_popup .heading-icon + .heading_popup .heading-text{
	margin:0 5px;
}



/* ===== 視訊會議(套用popup):[in designer meeting] */
.popupbox_meeting .popup_limit{
	background:#fff;
	border-radius:10px;
}
.popupbox_meeting .popup_main{
	width:100%; height:100%;
	padding:var(--spacing-lg);
}
@media (min-width:992px){
	.popupbox_meeting .popup_limit{
		width:80%; height:70%;
	}
}



/* ===== app下載(套用popup)[in appdownload] */
@media (min-width:992px){
	.popupbox_appdownload .popup_limit{
		height:auto;
		margin-top:0;
	}
	.popupbox_appdownload .popup_main{
		height:auto;
		overflow-y:auto;
	}
}
.heading_popup_appdownload .heading-icon{
	width:60px;
}
.heading_popup_appdownload .heading-text{
	font-size:var(--text-2xl);
	color:#fff;
}





/*----------------------------------------------------------------------
	#page-453_代理產品 #agent_pd
-------------------------------- */

/* ===== pricebar:base-價錢組 */
.pricebar{}

.price{
	display:inline-block;
	font-weight:600; line-height:1;
	font-family:'Notosans2', 'Open-Sans', Roboto, 'Noto Sans TC', sans-serif;
	color:#666;
	margin:var(--spacing-xs) var(--spacing-2xs);
	text-align:center;
}

.price_unit,
.price_period,
.price_original{
	font-size:var(--text-lg);
}
.price_sale{
	font-size:var(--text-4xl); font-weight:600;
	color:#cc3333;
}
.price_original{
	text-decoration:line-through;
}



/* ===== 立即申請 & 立即購買 */
.btn_apply,
.btn_addcart{
	border-radius:20px;
	color:#fff;
	
	transition:box-shadow 0.1s ease;
}
.btn_apply .iconsvg:before,
.btn_addcart .iconsvg:before{
	background-color:#fff;
}
.btn_apply{
	background: var(--color-apply);
	border-color:var(--color-apply);
}
.btn_addcart{
	background: var(--color-addcart);
	border-color:var(--color-addcart);
}

.btn_apply:hover,
.btn_addcart:hover{
	color:#fff;
	box-shadow:1px 1px 3px rgba(0,0,0,0.3);
	
	-webkit-animation:goto 2s linear infinite;
	   -moz-animation:goto 2s linear infinite;
		 -o-animation:goto 2s linear infinite;
			animation:goto 2s linear infinite;
}



/* ===== 價錢與購物 [in agent_pd_view] */

/* addcartbox：price + btnbar */
.addcartbox{
	position:relative;
    display:flex; flex-wrap:wrap;
	align-items:center;
    width:100%;
	border-top:1px solid rgba(var(--color-one-rgb), 0.2);
	border-bottom:1px solid rgba(var(--color-one-rgb), 0.2);
	padding:var(--spacing-sm);
}
.addcartbox .pricebar{
	position:relative;
    flex:1 1 auto;
    width:1%;
    min-width:0;
}
.addcartbox .btnbar{
	width:140px;
	margin:0;
	padding:0;
}
.addcartbox .btnbar .btn{
	width:100%;
	padding-left:var(--spacing-xs);
	padding-right:var(--spacing-xs);
	margin:0;
}



/* ===== 於內容尾購買 */
.itembox_view_addcart{
	max-width:500px;
	border:2px solid rgba(var(--color-one-rgb), 0.2);
	border-radius:7px;
	padding:var(--spacing-sm);
	margin:var(--spacing-xl) auto;
}
.itembox_view_addcart .heading_pageview{
	margin-bottom:var(--spacing-md);
}
@media (min-width:992px){
	.itembox_view_addcart{
		padding:var(--spacing-md);
	}
}

.itembox_view_addcart .addcartbox{
	border-bottom-width:0;
	margin-top:var(--spacing-md);
	padding-top:var(--spacing-md);
	padding-bottom:0;
}





/*----------------------------------------------------------------------
	#page-523_陳情案件 #case
-------------------------------- */

/* ===== 搜尋  */
.searchbar_case{
	margin:0;
}
.searchbar_case .heading_search{
	color:var(--color-dark);
	font-size:var(--text-sm); font-weight:600;
	margin-bottom:var(--spacing-sm);
}
@media (min-width:992px){
	.searchbar_case{
		border-top:1px dashed rgba(var(--color-two-rgb),0.6);
		margin:var(--spacing-lg) 0;
		padding:var(--spacing-lg) 0 0 0;
	}
}



/* ===== 圖標分類 [in case] */
.iconcate_box_case{
	border-top: 1px solid #eee;
	margin: var(--spacing-lg) 0;
	padding: var(--spacing-lg) 0 0 0;
}

/*陳情-我要陳情*/
.iconcate_petition{ display:none; }
@media (min-width:992px){
	.iconcate_petition{ display:block; }
}
.iconcate_petition .iconsvg{
	width:40px; height:40px;
}
.iconcate_petition .iconsvg:before{
	background-color:var(--color-case-petition);
}
.iconcate_petition .iconcate-text{
	color:var(--color-case-petition);
}

.iconcate:hover .iconsvg:before{
	background-color:var(--color-accent);
}
.iconcate:hover .iconcate-text{
	color:var(--color-accent);
}

/*陳情-成果*/
.iconcate_case_result:hover .iconsvg:before,
.iconcate_case_result.active .iconsvg:before{
	background-color:var(--color-case-result);
}
.iconcate_case_result:hover .iconcate-text,
.iconcate_case_result.active .iconcate-text{
	color:var(--color-case-result);
}

/*陳情-進行中*/
.iconcate_case_goon:hover .iconsvg:before,
.iconcate_case_goon.active .iconsvg:before{
	background-color:var(--color-case-goon);
}
.iconcate_case_goon:hover .iconcate-text,
.iconcate_case_goon.active .iconcate-text{
	color:var(--color-case-goon);
}

/*陳情-已完成*/
.iconcate_case_finish:hover .iconsvg:before,
.iconcate_case_finish.active .iconsvg:before{
	background-color:var(--color-case-finish);
}
.iconcate_case_finish:hover .iconcate-text,
.iconcate_case_finish.active .iconcate-text{
	color:var(--color-case-finish);
}



/* ===== 案件大標 */
.heading_case_goon .iconsvg,
.heading_case_finish .iconsvg,
.heading_case_result .iconsvg,
.heading_petition .iconsvg{
	width:36px; height:36px;
}
.heading_case_goon .heading-text,
.heading_case_finish .heading-text,
.heading_case_result .heading-text,
.heading_petition .heading-text{
	background:none;
}

/*案件-進行中*/
.heading_case_goon .heading-icon:before{
	background-color:var(--color-case-goon);
}
.heading_case_goon .heading-text{
	color:var(--color-case-goon);
	-webkit-text-fill-color:var(--color-case-goon);
}

/*案件-已完成*/
.heading_case_finish .heading-icon:before{
	background-color:var(--color-case-finish);
}
.heading_case_finish .heading-text{
	color:var(--color-case-finish);
	-webkit-text-fill-color:var(--color-case-finish);
}

/*案件-成果*/
.heading_case_result .iconsvg:before{
	background-color:var(--color-case-result);
}
.heading_case_result .heading-text{
	color:var(--color-case-result);
	-webkit-text-fill-color:var(--color-case-result);
}

/*我要陳情*/
.heading_petition .iconsvg:before{
	background-color:var(--color-case-petition);
}
.heading_petition .heading-text{
	color:var(--color-case-petition);
	-webkit-text-fill-color:var(--color-case-petition);
}

.heading_case_goon .heading-text,
.heading_case_finish .heading-text,
.heading_case_result .heading-text,
.heading_petition .heading-text{
	background-image:none;
}



/* ===== 案件狀態 */

/*案件-進行中*/
.info_case_goon .iconsvg:before{
	background-color:var(--color-case-goon);
}
.info_case_goon .info-text{
	color:var(--color-case-goon);
	font-weight:600;
}

/*案件-已完成*/
.info_case_finish .iconsvg:before{
	background-color:var(--color-case-finish);
}
.info_case_finish .info-text{
	color:var(--color-case-finish);
	font-weight:600;
}



/* ===== 案件追蹤 [in case-track] */
.infolist_case_track{
	display:flex; flex-wrap:wrap;
	align-items:flex-end;
	
	margin-bottom:var(--spacing-xl);
}
.infolist_case_track > li{
	width:100%;
	border-bottom:1px dashed #ccc;
	padding:var(--spacing-sm) 0;
}
.infolist_case_track > li:first-child{
	padding-top:0;
}

.infolist_case_track .info{
    align-items:center;
	font-weight:600;
}
.infolist_case_track .info-title{
	width:100%;
	color:#666;
}
.infolist_case_track .info-text{
	padding-left:var(--spacing-sm);
}
.infolist_case_track .info_status .info-text{
	padding-left:0;
}
@media (min-width:992px){
	.infolist_case_track li.infoline_status{ width:50%; order:2; }
	.infolist_case_track li.infoline_serialnum{ width:50%; order:1; }
	.infolist_case_track li.infoline_subject{ order:3; }
	.infolist_case_track li.infoline_reply{ order:4; }
	
	.infolist_case_track .info{
		display:flex; flex-wrap:wrap;
	}
	.infolist_case_track .info-title{
		position:relative;
		width:120px;
		margin-right:10px;
		padding-right:20px;
		
		/*文字左右對齊*/
		text-align:justify;
		text-align-last:justify;
		text-justify:inter-word;
	}
	.infolist_case_track .info-title:after{
		position:absolute; top:0; right:0; content:"：";
		color:#333;
	}
	.infolist_case_track .info .info-text{
		flex:1 1 auto;
		width:1%;
		min-width:0;
		
		padding-left:0;
	}
	
	.infolist_case_track .info_status{
		justify-content:flex-end;
	}
	.infolist_case_track .info_status .info-text{
		flex:none;
		width:auto;
	}
}



/* ===== 登入[in case_login、case_petition_a] */
.formbox_case_login,
.formbox_petition_login{
	max-width:450px;
	margin:var(--spacing-xl) auto;
}



/* ===== 填寫資料[in case_petition_b] */
@media (min-width:992px){
	.formbox_petition{
		max-width:1200px;
		margin:var(--spacing-xl) auto;
	}

	.formlist_petition > li{
		width:calc((100% - 1.5rem) / 2);
	}
	.formlist_petition > li.formline_subject,
	.formlist_petition > li.formline_cate,
	.formlist_petition > li.formline_gender,
	.formlist_petition > li.formline_message,
	.formlist_petition > li.formline_file,
	.formlist_petition > li.formline_verifycode,
	.formlist_petition > li.formline_submit{
		width:100%;
	}
}





/*----------------------------------------------------------------------
	#page-609_數據中心 
			news,uninews,life,article的詳細頁：1-相關字  3-您可能有興趣
			
			uniarticle 詳細頁：1-相關字  2-延伸閱讀  3-您可能有興趣
							  右側-側邊列
							  
-------------------------------- */

/* ===== 側邊box */
.itembox_article_sub{
}
.itembox_article_sub:first-child{
	margin-top:0;
}

.heading_article_sub{
	position:relative;
	padding-left:var(--spacing-sm);
	margin-bottom:var(--spacing-md);
}
.heading_article_sub:before{
	position:absolute; top:15%; left:0px; content:"";
	width:5px; height:70%;
	background:var(--color-dark);
}
.heading_article_sub .heading-text{
	color:var(--color-dark);
}



/* ===== 1-相關字 */
.itembox_view_keyword{
	margin:var(--spacing-xl) 0;
}
@media (min-width:1200px){
	.itembox_view_keyword{
		background:rgba(var(--color-one-rgb),0.05);
		padding:var(--spacing-lg);
	}
}
.heading_view_keyword{
	display:flex; flex-wrap:wrap;
	align-items:center;
	
	border-bottom:2px solid var(--color-accent);
	padding-bottom:var(--spacing-xs);
	margin-bottom:var(--spacing-md);
	overflow:hidden;
}
.heading_view_keyword .iconsvg{
	display:block;
	width:40px; height:40px;
	margin-right:var(--spacing-xs);
}
.heading_view_keyword .iconsvg:before{
	background-color:var(--color-accent);
}
.heading_view_keyword .heading-text{
	display:block;
	color:var(--color-accent);
	line-height:1;
	margin:0;
	padding:0;
}
@media (min-width:1200px){
	.heading_view_keyword{
		border-bottom-width:0;
		margin-bottom:var(--spacing-lg);
	}
}



/* ===== 2-延伸閱讀 */
.itembox_view_extended{
	position:relative;
	border:1px solid rgba(var(--color-one-rgb),0.6);
	padding:var(--spacing-base);
	margin:var(--spacing-lg) 0;
}
.heading_view_extended{
	margin-bottom:var(--spacing-md);
}
.heading_view_extended .heading-text{
	color:var(--color-dark);
}
@media (min-width:1200px){
	.itembox_view_extended{
		padding:var(--spacing-lg);
	}
}



/* ===== 3-您可能有興趣 */
.itembox_view_interest{
	margin:var(--spacing-lg) 0;
}
.heading_view_interest{
	border-bottom:2px solid var(--color-dark);
	margin-bottom:var(--spacing-md);
}
.heading_view_interest .heading-text{
	color:var(--color-dark);
}
@media (min-width:1200px){
	.itembox_view_interest{
		margin:var(--spacing-xl) 0;
	}
	.heading_view_interest{
		margin-bottom:var(--spacing-lg);
	}
}










/*-------------------------------------------------------------------------------
	#card
---------------------------------------------------------------------------------- */

.card{
	background:#fff;
	border:1px solid #ccc;
	border-radius:0;
}
@media (min-width:992px){
	.card:hover{
		border-color:var(--color-accent);
	}
}



/* ===== 名稱 */
.card-name{
	font-size: var(--text-base);
	line-height: 1.4;
}
 @media (min-width: 1400px){
	.card-name{
		font-size: var(--text-lg);
	}
} 

.card-name,
.card-name a{
	color:var(--color-one);
}
.card:hover .card-name a{
	color:var(--color-dark);
}
.card-name a:hover,
.card:hover .card-name a:hover{
	color:var(--color-accent);
}



/* ===== 介紹文字 */
.card-text{
	font-size: var(--text-sm);
	line-height: 1.6;
}



/* ===== 資訊列 */
.card-info{
    font-size: var(--text-sm); line-height: 1;
}
.card-info,
.card-info a{}
.card-info a:hover{
	color: var(--color-accent);
}

.card_job .card-info .card-info-text,
.card_store .card-info .card-info-text{
	flex:1 1 auto;
    width:1%; min-width:0;
}



/* ===== 按鈕-base */
.card-btnbar{
	position:relative; z-index:5;
	justify-content:center;
}
.card-btn{
	background:#fff;
	border:1px solid var(--color-one);
	color:var(--color-one);
}
.card-btn .iconsvg:before{
	background-color:var(--color-one);
}

.card-btn:hover{
	border-color:var(--color-accent);
	background:var(--color-accent);
	color:#fff;
}
.card-btn:hover .iconsvg:before{
	background-color:#fff;
}



/* ===== 按鈕-預約/會議 */
.card-btn_reserve,
.card-btn_meeting{
	overflow:hidden;
}

.card-btn_reserve{ border-color:var(--color-reserve); }
.card-btn_meeting{ border-color:var(--color-meeting); }

.card-btn_reserve .iconsvg:before{ background-color:var(--color-reserve); }
.card-btn_meeting .iconsvg:before{ background-color:var(--color-meeting); }

.card-btn_reserve .card-btn-text{ color:var(--color-reserve); }
.card-btn_meeting .card-btn-text{ color:var(--color-meeting); }

.card-btn_reserve:before,
.card-btn_meeting:before{
	position:absolute; z-index:0; top:0; left:0; content:"";
	width:0; height:100%;
	background:#999;
	transition:width 0.2s ease;
}
.card-btn_reserve:before{ background:var(--color-reserve); }
.card-btn_meeting:before{ background:var(--color-meeting); }

.card-btn_reserve:hover,
.card-btn_meeting:hover{
	background:transparent;
}
.card-btn_reserve:hover{ border-color:var(--color-reserve); }
.card-btn_meeting:hover{ border-color:var(--color-meeting); }

.card-btn_reserve:hover:before,
.card-btn_meeting:hover:before{
	width:100%;
}

.card-btn_reserve:hover .card-btn-text,
.card-btn_meeting:hover .card-btn-text{
	color:#fff;
}





/*----------------------------------------------------------------------
	#effect
-------------------------------- */

/* ===== effect:圖片:hover顯現more */
.effect_photo-more{
	background:transparent;
	border-width:0;
	text-align:center;
}
.effect_photo-more .card-photo{ 
	border-color:#ccc;
}
.effect_photo-more .card-text{
	display:none;
}

@media (min-width:992px){

	.effect_photo-more .card-photo{
		overflow:hidden;
	}
	.effect_photo-more .card-photo a:before{
		position:absolute; z-index:1; top:-25%; left:-25%; content:"";
		width:150%; height:150%;
		
		background:rgba(var(--color-one-rgb), 0.4);
		
		border-radius:50%;
	}
	.effect_photo-more .card-photo a:after{
		position:absolute; z-index:1; top:50%; left:50%; content:"+";
		width:40px; height:40px;
		margin-top:-20px; margin-left:-20px;
	
		background:var(--color-one);
		
		border:1px solid #fff; border-radius:50%;
		font-size:22px; font-weight:600; line-height:36px;
		color:#fff;
		text-align:center;
	}

	.effect_photo-more .card-photo a:before,
	.effect_photo-more .card-photo a:after{
		opacity:0;
		transform:scale(0);
		transition:transform 0.5s ease;
	}
	.effect_photo-more .card-photo a:after{
		transition-delay:0.2s;
	}
		
	.effect_photo-more:hover .card-photo a:before,
	.effect_photo-more:hover .card-photo a:after{
		opacity:1;
		transform:scale(1);
	}
}



/* ===== effect:人物介紹 */
.effect_profile{
	padding:var(--spacing-sm);
	text-align:center;
}
@media (min-width:992px){
	.effect_profile{
		text-align:left;
	}
}

.effect_profile .card-photo{
	display:block;
	max-width:200px;
	background:rgba(255,255,255,0.6);
	border-color:#ccc;
	border-radius:50%;
	margin:0 auto;
	overflow:hidden;
}
@media (min-width:992px){
	.effect_profile .card-photo{
		margin:0;
	}
}
.effect_profile .fitimg{
	-webkit-object-fit: cover;
	   -moz-object-fit: cover;
		    object-fit: cover;
}


/* ===== designer(套用effect_profile) */
.card_designer .card-info{
	justify-content:center;
	font-size:var(--text-sm);
	text-align:center;
	padding:0 var(--spacing-2xs);
}
.card_designer .card-btnbar{
	padding:0;
	margin:var(--spacing-sm) 0 0 0;
}
@media (min-width:992px){
	.card_designer .card-info{
		justify-content:flex-start;
	}
	.card_designer .card-btnbar{
		justify-content: flex-end;
	}
}


/* ===== people(套用effect_profile) */
.card_people .card-name{
	margin:var(--spacing-xs) 0;
}

.card_people .card-text{
	margin-top:var(--spacing-xs);
}

.card_people .card-info{
    font-size:var(--text-sm);
	color:#666;
	margin:0;
	text-align:center;
}

.card_people .card-slogan{
	background:rgba(var(--color-one-rgb), 0.1);
	color:#333;
	font-size:var(--text-sm);
	padding:var(--spacing-xs);
}

.card_people .card-footer .card-text{
	font-size:var(--text-sm);
}

.card_people .card-infolist{
	border-top:1px dashed #ccc;
	margin-top:var(--spacing-xs);
	padding:var(--spacing-2xs) 0 0 0;
}
@media (min-width:992px){
	.card_people .card-info{
		text-align:right;
	}
	.card_people .card-infolist{
		text-align:right;
	}
	.card_people .card-infolist > li{
		display:inline-block; vertical-align:middle;
		margin-left:var(--spacing-sm);
	}
}










/*----------------------------------------------------------------------
	219_關於我們 #about
-------------------------------- */
.card_about_one,
.card_about_two{
	background:transparent;
}

/* ===== in idx */
.card_about_one .card-name,
.card_about_two .card-name{
	display:none;
}

.card_about_one .card-text,
.card_about_two .card-text{
	font-size:var(--text-lg);
	margin-top:0;
}

.card_about_one .card-text, .card_about_one .card-text a,
.card_about_two .card-text, .card_about_two .card-text a{
	color:#333;
}
.card_about_one .card-text a:hover
.card_about_two .card-text a:hover{
	color:var(--color-accent);
}


/* ===== 多則之第一則 [in idx] */
.idx_about_one{
	position:relative;
	padding-bottom:var(--spacing-md);
}

.card_about_one{
	max-width:1000px;
	border-width:0;
	margin:0 auto;
}
.card_about_one .card-photo{
	background:rgba(255,255,255,0.3);
	margin-bottom:var(--spacing-md);
}
.card_about_one .card-photo img{
	margin-left:auto; margin-right:auto;
	/* 圖片小於限定區塊時，圖片置中 */
}

.card_about_one .card-btnbar{
	justify-content: center;
	margin-top:var(--spacing-md);
}

.idx_about_one-figure{
	position:relative;
}
.idx_about_one-figure-inner{
	max-width:1000px;
	margin:0 auto;
}

.card_about_one_figure{
	border-width:0;
}
.card_about_one_figure .card-text{
	text-align:center;
}


/* ===== 多則之第二則以後 [in idx] */
.card_about_two{
	border-width:0;
}

.idx_about_two-figure .row{
	justify-content:center;
}

.card_about_two_figure{
	max-width:1000px;
	border-width:0;
	margin:var(--spacing-lg) auto 0 auto;
}



/*----------------------------------------------------------------------
	220_相簿管理 #albums
-------------------------------- */



/*----------------------------------------------------------------------
	293_文件下載 #download
-------------------------------- */
.card_download{
	padding:var(--spacing-xs);
}
@media (min-width:640px){
	.card_download{
		padding:var(--spacing-sm);
	}
}

.card_download .card-name{
    margin-top: 0;
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px dashed #ccc;
}

.card_download .card-btnbar{
	justify-content: flex-end;
	margin:var(--spacing-xs) 0 0 0;
	padding:0;
}





/*----------------------------------------------------------------------
	225_常見問題 #qa (套用#accordion)
-------------------------------- */

/* ===== accordion.js:base:手風琴效果-常見問題、會員管理套用 */
.accordion{
}
.accordion-trigger{
    cursor:pointer;
}

.accordion-collapse{
	display:none;
	margin-bottom:var(--spacing-lg);
}
.accordion-collapse.is-visible{ display:block; }

.accordionPart > li{
	position:relative; z-index:1;
	border-top: 1px solid #e5e5e5;
}
.accordionPart > li:last-child {
    border-bottom: 1px solid #e5e5e5;
}


/* ===== 常見問題 */
.card_qa{
	position:relative; z-index:2;
	background:#fff;
	margin:0;
}

.card_qa .card-info_sign{ display:none; }

.card_qa .card-info_open{
	position:absolute; top:50%; right:10px;
	width:30px; height:30px;
	margin-top:-15px;
}

.card_qa .card-info_open:before,
.card_qa .card-info_open:after{
    position:absolute; left:50%; top:50%; content:"";
	width:2px; height:12px;
    margin-left:-1px; margin-top:-6px;
	background:#333;
	
	border-radius:2px;
    transition:transform 0.4s ease-in-out;
}
.card_qa .card-info_open:before{ transform:rotate(90deg); }


.accordion-trigger.is-open .card_qa .card-info_open{
	background:var(--color-accent);
	opacity:1;
}
.accordion-trigger.is-open .card_qa .card-info_open:before,
.accordion-trigger.is-open .card_qa .card-info_open:after{
	background:#fff;
}
.accordion-trigger.is-open .card_qa .card-info_open:before{
	transform:rotate(135deg);
}
.accordion-trigger.is-open .card_qa .card-info_open:after{
	transform:rotate(45deg);
}	

.card_qa .btn-bar{ text-align:right; }


.card_qa .card-header{
	position:relative;
	background:#fff;
	color:#333;
	cursor:pointer;
	padding:var(--spacing-lg) var(--spacing-xl);
}
.card_qa .card-header:before{
	position:absolute; top:0; left:0; content:"";
	width:100%; height:100%;
	
	background-color:var(--color-one); 
	
	opacity:0;
}
.card_qa .card-header:hover:before{
	opacity:0.05;
}

.card_qa .card-info_q{
	position:absolute; top:50%; left:10px;
    display:block;
    width:36px; height:36px;
    margin-top: -18px;
	
	background:var(--color-one); 
	
	border-radius:50%;
}
.card_qa .card-info_q:before{
	position:absolute; top:0; left:0; content:"";
	width:100%; height:100%;
	background-color:#fff; 

    -webkit-mask-position:center;
    mask-position:center;
    
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    
    -webkit-mask-size:65% 65%;
    mask-size:65% 65%;
	
	-webkit-mask-image:url(../images/icon/icon_q.svg);
    mask-image:url(../images/icon/icon_q.svg);
}
.card_qa .card-info_q:after{
	position:absolute; z-index:1; bottom:1px; right:-12px; content:"";
	width:0; height:0;
	
	border-left:8px solid var(--color-one);

	transform:rotate(21deg);
}
.accordion-trigger.is-open .card_qa .card-info_q{
	background:var(--color-accent);
}	
.accordion-trigger.is-open .card_qa .card-info_q:after{
	border-left-color:var(--color-accent);
}	


.card_qa .card-info_a{
	display:none;
}

.card_qa .card-name{
	color:#333;
	padding:0;
	margin:0;
}
.card_qa .card-header:hover .card-name{
	color:var(--color-one); 
}

.card_qa .card-body {
	background:#fff;
	border-top:1px dashed #ccc;
	color:#777;
	padding:var(--spacing-sm);
	margin-top:0;
}

.accordion-trigger.is-open .card_qa .card-header{
	/*background:var(--color-two);
	border-color:var(--color-two);*/
}
.accordion-trigger.is-open .card_qa .card-name{
	color:var(--color-accent);
}

.card_qa .card-text{
	color:#333;
}





/*----------------------------------------------------------------------
	244_會員管理 #member (套用#accordion)
-------------------------------- */
.card_member .card-tr{
    display:flex; flex-wrap:wrap;
    align-items:center;
}
.card_member .card-td{
    flex:1 1 auto;
    width:1%;
    min-width:0;
	padding:var(--spacing-2xs) var(--spacing-xs);
}

.card_member .card-td_jobtitle{ display:none; }
.card_member .card-td_company{ width:40%; }
.card_member .card-td_name{ width:30%; }
.card_member .card-td_moreinfo{ width:30%; text-align:right; }
@media (min-width:992px){
	.card_member .card-td_jobtitle{ display:block; width:15%; }
	.card_member .card-td_company{ width:35%; }
	.card_member .card-td_name{ width:20%; }
	.card_member .card-td_moreinfo{ width:30%; }
}


/* ===== 標題列*/
.card_member_headline{
	font-size:var(--text-sm);
	color:#666;
	padding:0 var(--spacing-sm) var(--spacing-xs) var(--spacing-sm);
}


/* ===== 觸發列*/
.card_member .card-header{
	position:relative;
    padding:var(--spacing-sm) var(--spacing-xs);
}
.card_member .card-header h3{
	font-size:var(--text-base);
}
.card_member .card-header:before{
	position:absolute; top:0; left:0; content:"";
	width:100%; height:100%;
	
	background-color:var(--color-one); 
	
	opacity:0;
}

/*觸發列 hover*/
.card_member .card-header:hover:before{
	opacity:0.1;
}

/*觸發列 開啟*/
.accordion-trigger.is-open .card_member .card-header{
	background:var(--color-one); 
	color:#fff;
}

/* .card_member_top .card-info{
	font-size:var(--text-base); font-weight:600;
} */


/* ===== 詳細-箭頭*/
.card_member .card-info_open{
    position:relative;
    display:inline-block;
    padding-right:16px;
	font-size:var(--text-sm); line-height:1;
    color:#999;
}
.card_member .card-info_open:before{
	position:absolute; top:50%; right:0; content:"";
	width:0; height:0;
    
    border-width:5px 5px 0 5px;
    border-style:solid;
    border-color:#999 transparent transparent transparent;
	
	margin-top:-3px;
}


/*觸發列 開啟-詳細tag箭頭*/
.accordion-trigger.is-open .card_member .card-header .card-info{
    color:#fff;
}
.accordion-trigger.is-open .card_member .card-info_open:before{
    border-top-width:0;
    border-top-color:transparent;
    
    border-bottom-width:5px;
    border-bottom-color:#fff;
}


/* ===== 開啟區塊*/
.card_member_btm{
	border:2px solid var(--color-one); 
	padding:20px;
}

.card_member .card_row{
	display:flex; flex-wrap:wrap;
}


/* ===== 開啟區塊-相片*/
.card_member .card-photo{
	max-width:400px; margin:0 auto;
}


/*開啟區塊-資訊組*/
.card_member .card-infolist .card-info,
.card_member .card-infolist .card-info a{
	color:#333;
}
.card_member .card-infolist a{
	text-decoration:underline;
}
.card_member .card-infolist .card-info a:hover{
	color:var(--color-accent); 
}

.card_member .card-infolist .card-info{
	padding:5px 0;
    border-bottom:1px dashed #ccc;
}
.card_member .card-infolist .card-info-title{
	width:100%;
    color:var(--color-dark);
	font-size:var(--text-sm); font-weight:600;
}
.card_member .card-infolist .card-info-text{
    padding-left:16px;
}
@media (min-width:576px){

    .card_member .card-infolist .card-info-title{
        position:relative;
        width:120px;
        margin-right:var(--spacing-sm);
        text-align:right;
        padding-right:15px;
		margin-top:var(--spacing-2xs);
    }
    .card_member .card-infolist .card-info-title:after{
        position:absolute; top:2px; right:0; content:"/";
        line-height:1;
    }
    .card_member .card-infolist .card-info-text{
        padding-left:0;
    }
}


/* ===== 個人介紹-標題*/
.card_member .card-text-heading{
    display:block;
	border-bottom:1px dashed #ccc;
    
    color:var(--color-dark);
	
	font-size:var(--text-sm); font-weight:600;
    text-align:center;
    padding:var(--spacing-2xs) 0;
    margin:var(--spacing-lg) 0 var(--spacing-sm) 0;
}

.card_member .card-text{
	font-size:var(--text-base);
}





/*----------------------------------------------------------------------
	227_經銷地區 #location
-------------------------------- */
.card_location .card-iframe{
	position:relative; z-index:3;
	padding-bottom:50%;
}
.card_location .card-body{
	padding:0 var(--spacing-sm);
}
.card_location .card-btnbar{
	position:relative; z-index:3;
}





/*----------------------------------------------------------------------
	230_產品管理 #product
-------------------------------- */

/* ===== 商品詳細頁 */
.pro-view-area{
	border-bottom:1px dashed #ccc;
	padding-bottom:var(--spacing-sm);
	margin-bottom:var(--spacing-md);
}

.pro-view-row{ display: flex; flex-wrap: wrap; }
.pro-view-left{ width: 100%; }
.pro-view-right{ width: 100%; padding-top: var(--spacing-sm); }

@media (min-width: 992px){
	.pro-view-left{ width: 45%; }
	.pro-view-right{ width: 55%; padding-left: 60px; }
}

.sync-thum-slide .slide-photo .fitimg{
	-webkit-object-fit: cover;
	   -moz-object-fit: cover;
		    object-fit: cover;
}


/* ===== 圖輪播*/
.sync-slide{
	border: 1px solid #ccc;
	margin-bottom: var(--spacing-md);
}
.sync-slide .slick-prev , .sync-slide .slick-next{
	position: absolute; z-index: 1; top: 0;
	display: block;
	width: 70px; height: 100%;
	background: transparent;
	font-size: 0;
	color: transparent;
	border: none;
	cursor: pointer;

	-webkit-transition: opacity 0.7s ease , transform 0.7s ease;
			transition: opacity 0.7s ease , transform 0.7s ease;
}

.sync-slide .slick-prev{ left: 0; transform: translateX(-70px); }
.sync-slide .slick-next{ right: 0; transform: translateX(70px); }

.sync-slide .slick-prev:before , .sync-slide .slick-next:before{
	position: absolute; top: 50%; left: 50%; content: "";
	width: 10px; height: 10px;
	margin-top: -7px; margin-left: -7px;
	
	border-width: 3px;
	border-style: solid;
	border-color: #fff;
	
	transform: rotate(45deg);
}

.sync-slide .slick-prev:before{ border-top-width: 0; border-right-width: 0; }
.sync-slide .slick-next:before{ border-left-width: 0; border-bottom-width: 0; }

.sync-slide:hover .slick-prev , .sync-slide:hover .slick-next{
	transform: translateX(0);
}

.sync-slide .slick-prev:hover , .sync-slide .slick-next:hover{
	background: linear-gradient(top, transparent, rgba(255, 255, 255, 0.35), transparent);
	background: -moz-linear-gradient(top, transparent, rgba(255, 255, 255, 0.35), transparent);
	background: -webkit-linear-gradient(top, transparent, rgba(255, 255, 255, 0.35), transparent);
	background: -o-linear-gradient(top, transparent, rgba(255, 255, 255, 0.35), transparent);
	background: -ms-linear-gradient(top, transparent, rgba(255, 255, 255, 0.35), transparent);
}

.sync-slide .slick-prev.slick-disabled,
.sync-slide .slick-next.slick-disabled{ opacity: 0.2; cursor: default; }


/* ===== 縮圖輪播*/
.sync-thum-slide .slide-photo .item-fitimg:before{
    padding-bottom: 75%;
}

.sync-thum-slide .slick-slide{
	margin: 0 var(--spacing-xs);
	border: 3px solid rgba(255,255,255,0.1);
	cursor: pointer;
	
	transition: border-color 0.7s ease;
}
.sync-thum-slide .slick-slide:hover{
	border-color: var(--color-two);
}
.sync-thum-slide .slick-slide.slick-current{
	border-color: var(--color-accent);
	
	opacity: 1; cursor: default;
}





/*----------------------------------------------------------------------
	453_代理產品 #agent_pd
-------------------------------- */
.card_agent_pd .pricebar{
	position:relative;
	
	border-width:1px 0 ;
	border-style:solid;
	border-color:#e5e5e5;
	
	padding:var(--spacing-xs) 0;
}
.card_agent_pd .pricebar:before {
    position:absolute; top:0; right:0px; content:"";
    widows:0; height:0;
    border-top:11px solid #e5e5e5;
    border-left:12px solid transparent;
}
.card_agent_pd .price_sale {
    font-size:var(--text-xl);
}


/* ===== in idx(套用slick) */
.item-slide-agent{
	padding:0 var(--spacing-sm);
}
.item-slide-agent .slick-slide{
	padding:var(--spacing-sm);
}

.item-slide-agent .slick-prev,
.item-slide-agent .slick-next{
	top: 50%;
	width: 50px; height: 50px;
	margin-top: -25px;
	background: #fff;
	border: 2px solid #fff;
	border-radius: 50%;
}
.item-slide-agent .slick-prev{
	left: 3px; transform: translateX(0);
	box-shadow: 4px 0 6px rgb(0 0 0 / 30%);
}
.item-slide-agent .slick-next{
	right: 3px; transform: translateX(0);
	box-shadow: -4px 0 6px rgb(0 0 0 / 30%);
}

.item-slide-agent .slick-prev:before, 
.item-slide-agent .slick-next:before{
	border-color: var(--color-one);
}
.item-slide-agent .slick-prev:hover, 
.item-slide-agent .slick-next:hover{
	background: var(--color-accent);
}
.item-slide-agent .slick-prev:hover:before, 
.item-slide-agent .slick-next:hover:before{
	border-color: #fff;
}

.card_agent_pd_idx{
	background:#fff;
	border:1px solid #ccc;
}





/*----------------------------------------------------------------------
	235_作品管理 #works
-------------------------------- */



/*----------------------------------------------------------------------
	237_設計師(使用者) #designer
	331_個人介紹
-------------------------------- */

/* ===== 會議列表 */
.meeting-list > li{
	margin-bottom:var(--spacing-md);
}

.card_meeting{
	border:1px solid #ccc;
	padding:var(--spacing-sm);
	box-shadow:none;
}

.card_meeting .card-name{
	background:#f3f3f3;
	color:#000;
	padding:var(--spacing-xs);
	margin-top:0;
}

.card_meeting .card-info,
.card_meeting .card-info a{
	color:#333;
}
.card_meeting .card-info a:hover{
	color:var(--color-dark);
}
.card_meeting .card-info .iconsvg:before{
	background-color:#333;
}


/* ===== 允許(in designer meeting) */
.card_meeting .card-btnbar{
	position:relative; z-index:5;
}
.card_meeting .card-btn_allow_meet{
	width:100%;
	background:#fff;
	border:1px solid var(--color-meeting);
	border-radius:0;
	color:var(--color-meeting);
	text-align:center;
	font-size:var(--text-sm); font-weight:600; line-height:1;
	padding:var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-md);
}
.card_meeting .card-btn_allow_meet .iconsvg{
	width:16px; height:16px;
}
.card_meeting .card-btn_allow_meet .iconsvg:before{
	background-color:var(--color-meeting);
}
.card_meeting .card-btn_allow_meet:hover{
	background:var(--color-meeting);
	border-color:var(--color-meeting);
	color:#fff;
}
.card_meeting .card-btn_allow_meet:hover .iconsvg:before{
	background-color:#fff;
}


/* ===== 不允許(in designer meeting) */
.card_meeting .card-info_noallow{
	width:100%;
	justify-content:center;
	border:1px solid red;
	border-radius:0;
	color:red;
    font-size:var(--text-sm); font-weight:600; line-height:1;
	padding:var(--spacing-xs) var(--spacing-md);
}
.card_meeting .card-info_noallow .iconsvg,
.card_meeting .card-info_noallow .card-info-text{
	margin:0 var(--spacing-2xs);
}

.card_meeting .card-info_noallow .iconsvg{
    display:block;
	width:20px; height:20px;
}
.card_meeting .card-info_noallow .iconsvg:before{
	background-color:red;
}
.card-info_noallow:hover{
    cursor:no-drop;
}


/* ===== 視訊日期-起訖(in designer meeting) */
.card_meeting .card-info_date{
	align-items:flex-start;
	font-size:var(--text-sm);
}
.card_meeting .card-info_date .card-info-title{
    width:60px;
	border:1px solid rgba(0,0,0,0.2);
	border-radius:10px;
	text-align:center;
}
.card_meeting .card-info_noallow .card-info-text{
	flex:none;
    width:auto; min-width:auto;
}
.card_meeting .card-info_date_start{ color:#009933; }
.card_meeting .card-info_date_start .card-info-title{
	border-color:#009933;
}


.card_meeting .card-text{ color:#333; }


/* ===== 詳細頁-個人介紹 [in designer_view] */
.card_summary{
	max-width:400px;
	border:1px solid #ccc;
	border-radius:10px;
	margin:0 auto var(--spacing-md) auto;
	overflow:hidden;
	box-shadow:2px 2px 5px rgba(0,0,0,0.1);
}
.card_summary:hover{
	background:transparent;
	border-color:#ccc;
}
.card_summary .col-two,
.card_summary .col-three{
	padding:0 var(--spacing-md); 
}

.card_summary .card-photo .fitimg{
	object-position: top;
}

.card_summary .card-name{
	margin-bottom:var(--spacing-xs);
	padding-bottom:var(--spacing-xs);
	border-bottom:1px solid rgba(0,0,0,0.1);
}

.card_summary .card-btnbar{
	display:grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:1rem;
}
.card_summary .card-btn{
	width:100%;
	padding:var(--spacing-xs) var(--spacing-2xs);
}
.card_summary .card-btn .iconsvg{
	width:24px; height:24px;
}


.card_summary .card-box_qrcode{
    max-width:120px;
    margin:1rem auto;
	text-align:center;
}
.card_summary .card-info_scan{
	justify-content: center;
}
.card_summary .card-info_scan .card-info-text{
	font-size:var(--text-sm); font-weight:600;
}
.card_summary .card-info_scan .iconsvg{
	display:none;
}
.card_summary .card-box_qrcode .card-photo{
	border:1px solid #ccc;
	margin-top:var(--spacing-2xs);
}





/*----------------------------------------------------------------------
	274_相關連結 #link
-------------------------------- */
.card_link{
	background:transparent;
	border-width:0;
}
.card_link .card-name{
	text-align:center;
}

.card_link:hover .card-photo{
	border-color:var(--color-accent);
}





/*----------------------------------------------------------------------
	343_活動管理 #announecment
-------------------------------- */
.card_activity{
	padding:var(--spacing-sm);
}

.card_activity .card-photo{
	background:transparent;
	border-width:0;
}
.card_activity .item-fitimg:before {
    padding-bottom: 70%;
}

.card_activity .card-name{
	position:static;
}

.card_activity .card-text{
	font-size:var(--text-sm);
	color:#333;
}


/* ===== 狀態*/
.card_activity .card-info_status{
	position:relative;
	justify-content:center;
	font-weight:600;
	margin:var(--spacing-sm) 0;
}
.card_activity .card-info_status .card-info-icon,
.card_activity .card-info_status .card-info-text{
	line-height:1;
	margin:0;
}

.card_activity .card-info_status .card-info-icon{
    width:22px; height:22px;
	margin-right:var(--spacing-2xs);
}
.card_activity .card-info_status .card-info-text{
	font-size:var(--text-base);
}


/* ===== 活動資料 */
.card_activity .card-infolist{
	border-width:1px 0 0 0;
	border-style:dashed;
	border-color:#ccc;
	padding:var(--spacing-xs) 0 0 0;
	margin:var(--spacing-sm) 0 0 0;
}
.card_activity .card-infolist li{
	margin:var(--spacing-sm) 0;
}

.card-info_event{
	align-items:flex-start;
	
    font-size:var(--text-sm); font-weight:600;
	color:#333;
	text-align:left;
}
.card-info_event .card-info-title{
	display:block;
	width:120px;
	background:#fff;
	border:1px solid #ccc;
	border-radius:5px;
	color:rgba(0,0,0, 0.7);
	padding:var(--spacing-2xs);
	text-align:center;
}
.card-info_event .card-info-text{
	width:100%;
	padding:10px 0 10px 24px;
}

@media (min-width:992px){
	.card-info_event .card-info-text{
		flex:1 1 auto;
		width:1%; min-width:0;
		
		padding-top:var(--spacing-2xs); padding-left:var(--spacing-xs);
	}
}

.card-info_event .day_sat,
.card-info_event .day_sun{
	display:inline-block;
	width:18px; height:20px;
	background:rgba(255,255,255,1);
	border-radius:50%;
	font-size:var(--text-xs); line-height:20px;
	text-align:center;
}
.card_activity .card-info_event .day_sat{ color:green; }
.card_activity .card-info_event .day_sun{ color:red; }


.card_activity .card-btnbar{
	position:relative; z-index:5;
	display:block;
}
@media (min-width:992px){
	.card_activity .card-btnbar{
		margin-top:0;
		justify-content: flex-end;
	}
}


.calendar_box{
	text-align:center;
	margin:var(--spacing-lg) 0;
}





/*----------------------------------------------------------------------
	406_人才招募 #job
-------------------------------- */
.card_job{
	position:relative;
    border:1px solid rgba(var(--color-one-rgb), 0.5);
	padding:var(--spacing-sm);
	margin:var(--spacing-xl) 0;
}
.card_job:hover{
    border-color:rgba(var(--color-one-rgb), 0.5);
}

.card_job .card-name{
	color:#666;
	
	text-align:center;
	margin-bottom:var(--spacing-lg);
}

.card_job .card-infolist{
	display:grid;
	gap: var(--spacing-2xs);
}
/*.card_job .card-infolist > li{
	width: 100%;
}*/

.card_job .card-info{
	position: relative;
	align-items: flex-start;
	
	border-bottom:1px dashed rgba(var(--color-one-rgb), 0.5);
	
	font-size: var(--text-base);
	color: #333;
	padding: var(--spacing-xs) 0;
}
.card_job .card-info .card-info-title{
	position: relative;
	display: block;
	width: 100%;
	color:var(--color-one);
    font-weight: 600;
	margin-bottom: var(--spacing-2xs);
}
.card_job .card-info .card-info-text{
    padding-left: var(--spacing-sm);
	margin-bottom: var(--spacing-2xs);
}

@media (min-width: 576px){
    .card_job .card-info .card-info-title{
        width: 145px;
        margin-right: var(--spacing-2xs);
        padding-right: var(--spacing-md);
		text-align: right;
    }
    .card_job .card-info .card-info-title:after{
        position: absolute; top: 2px; right: 0; content: "：";
		color:#333;
        line-height: 1;
    }
    .card_job .card-info .card-info-text{
        padding-left: 0;
    }
}

@media (min-width: 992px){
	.card_job{
		padding: var(--spacing-lg);
	}
    .card_job .card-infolist{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .card_job .card-infolist > li.w-100{
		grid-column: span 2 / span 2;
	}
}



/* ====== in idx */
.card_recruit{
	position:relative;
	background:#fff;
	border:1px solid rgba(var(--color-one-rgb), 0.3);
	transition:background 0.3s ease;
}
.card_recruit .col-two{
	border-width:1px 0 0 0;
	border-style:solid;
	border-color:rgba(var(--color-one-rgb), 0.3);
	
	padding:0 var(--spacing-sm);
}
@media (min-width:768px){
	.card_recruit .col-two{
		border-width:0 1px;
	}
}

.card_recruit .card-name{
	text-align:center;
	padding:var(--spacing-sm) 0;
}
	
.card_recruit .card-infolist li{
    margin-bottom:var(--spacing-sm);
}
.card_recruit .card-infolist li:last-child{
	margin-bottom:0;
}
.card_recruit .card-info span{
    width:100%;
}
.card_recruit .card-info .iconsvg{
	display:none;
}
.card_recruit .card-info .card-info-title{
    font-size:var(--text-sm); font-weight:600;
    margin-bottom:var(--spacing-2xs);
}
.card_recruit .card-info .card-info-text{
    padding-left:var(--spacing-md);
    color:#333;
}


.card_recruit .card-btnbar{
	position:relative; z-index:5;
	padding:0 var(--spacing-sm);
	margin:var(--spacing-2xs) 0;
	justify-content:center;
}
.card_recruit .card-btn{
	width:100%;
	margin:0;
}
@media (min-width:768px){
	.card_recruit .card-btn{
		width:auto;
	}	
}





/*----------------------------------------------------------------------
	435_設備資料 #equipment
-------------------------------- */



/*----------------------------------------------------------------------
	454_加盟主活動 #franchiser_event
-------------------------------- */



/*----------------------------------------------------------------------
	455_加盟主資訊 #franchiser
-------------------------------- */
.card_franchiser .card-name{
	margin-top: 0;
}
.card_franchiser .card-body{
	padding: var(--spacing-sm);
}
.card_franchiser .card-info{
	align-items: flex-start;
	margin-bottom: 0;
}
.card_franchiser .card-info .iconsvg{
	display: block;
	margin-top: var(--spacing-2xs);
}
.card_franchiser .card-info{
	font-size: var(--text-sm);
}





/*----------------------------------------------------------------------
	484_時間記事 #timeline
-------------------------------- */
.timeline-event{
    position:relative;
}

@media (min-width:992px){
	.timeline-event{
		padding-bottom:var(--spacing-lg);
		margin:var(--spacing-lg) 0;
	}

	/*中間線*/
	.timeline-event:before{
		position:absolute; top:0; left:50%; content:"";
		width:2px; height:100%;
		
		background:#ccc;
		
		transform:translate(-50%, 0);
	}
	
	/*中間線底的圓圈*/
	.timeline-event:after{
		position:absolute; bottom:0; left:50%; content:"";
		width:12px; height:12px;
		
		background:#ccc;
		
		border-radius:50%;
		transform:translate(-50%, 0);
	}
}

/*年份*/
.timeline-year{
    position: relative; z-index: 2;
    width: 100%;
    margin: var(--spacing-xl) 0 var(--spacing-lg) 0;
    text-align: center;
}

.timeline-year-text{
	position: relative;
	display:inline-block;
    background:#fff;
    border:2px solid #ccc;
    border-radius: 20px;
	color:#333;
	font-size:var(--text-lg); font-weight:600; line-height:1;
	padding:0.75rem 1.5rem;
	margin-left:-1px;
}
.timeline-year-text:before{
	position:absolute; top:100%; left:50%; content:"";
	width:0; height:0;
	margin-left:-10px;
	
	border-width:10px 10px 0 10px;
	border-style:solid;
	border-color:#ccc transparent transparent transparent;
}
@media (min-width:992px){
	.timeline-year-text:before{
		display:none;
	}
}

.timeline-box{
    margin-bottom:var(--spacing-md);
}

.card_timeline{
    background: #fff;
    padding: var(--spacing-xs);
}

.card_timeline .card_row{
    display:flex; flex-wrap:wrap;
	gap:var(--spacing-sm);
}
.card_timeline .card-one{
    order:2;
    width: 140px;
}
.card_timeline .card-two{
    order:1;
    flex:1 1 auto;
	width:1%; min-width:0;
}

/*項目-header */
.card_timeline .card-header{
	border-bottom:1px dashed #ccc;
}
.card_timeline .header_row{
    display:flex; flex-wrap:wrap;
    align-items:center;
	gap:var(--spacing-sm);
}
.card_timeline .header_row > .header-one{
	width:70px;
}
.card_timeline .header_row > .header-two{
	flex:1 1 auto;
	width:1%; min-width:0;
}

/*項目-日期*/
.card_timeline .card-date-box{
	padding:0.25rem;
	border-right:1px dashed #ccc;
}

.card_timeline .card-date-item{
    display:flex; flex-wrap:wrap;
    justify-content:center;
    text-align:center;
}
.card_timeline .card-date-item .card-date{
    display:block;
	color:var(--color-one);
    font-size:var(--text-sm); line-height:1;
    font-family:Helvetica;
    padding:0.25rem 0;
}
.card_timeline .card-date.year{ order:2; }
.card_timeline .card-date.year:after{ content:"-"; }

.card_timeline .card-date.month{ order:3; }

.card_timeline .card-date.day{
	order:1;
    width:100%;
    font-size:26px; font-weight:600;
}
@media (min-width:992px){
	.card_timeline .card-date.day{
		font-size:32px;
	}
}

/*行數限制*/
.card_timeline .card-name{
	display:-webkit-box;
	text-overflow:ellipsis;
	overflow:hidden;
	
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	white-space:normal;
}

@media (min-width:992px){

    /*消除float*/
    .timeline-area{}
    .timeline-area:before, .timeline-area:after{ display:table; content:" " }
    .timeline-area:after{ clear:both }
    
    .timeline-year{
        float:left;
        clear:both;
        margin-top:var(--spacing-sm);
    }
    .timeline-year:nth-child(1){ margin-top:0; }
        
    .timeline-box{
        float:left;
        width:55%;
        padding-right:calc(5% + 60px);
        margin-bottom: var(--spacing-xl);
        margin-top: -80px;
    }
    
    /*中間年份 與 漂浮項目之設定 */
    .timeline-year + .timeline-box{ margin-top:0; }
    
    /*項目-延伸至中間的線條 */
    .card_timeline{
        padding: var(--spacing-sm);
    }
    /*.card_timeline .card-left{
        width: 150px;
    }*/
    .card_timeline:before{
        position:absolute; top:15px; right:-60px; content:"";
        width:60px; height:1px;
		border-top:2px dashed #ccc;
       /* background:#ccc;*/
    }
    .card_timeline:hover:before{ border-top:1px solid var(--color-accent); }
    
    /*項目-延伸至中間的圓圈 */
    .card_timeline:after{
        position:absolute; top:16px; right:-60px; content:"";
        width:14px; height:14px;
        margin-top:-7px;
        margin-right:-8px;
        background:#fff;
        border-radius:50%;
        border:2px solid #ccc;
    }
    .card_timeline:hover:after{ border-color:var(--color-accent); }
    
    
    .timeline-box:nth-of-type(2n){
        float:right;
        padding-left:calc(5% + 60px);
        padding-right:0;
        /*border: 1px solid red;*/
    }
    .timeline-box:nth-of-type(2n) .card_timeline:before{
        left:-60px; right:auto;
    }
    .timeline-box:nth-of-type(2n) .card_timeline:after{
        left:-60px; right:auto;
		margin-left:-8px;
		margin-right:0;
    }
 
}





/*----------------------------------------------------------------------
	490_人物介紹 #people
-------------------------------- */



/*----------------------------------------------------------------------
	512_推薦店家 #store
-------------------------------- */
.card_store{}

.card_store .card-body{
	padding:var(--spacing-xs);
}

.card_store .card-infolist{
	margin:var(--spacing-sm) 0 var(--spacing-xs) 0;
	padding-top:var(--spacing-xs);
	border-top:1px dashed #ccc;
}

.card_store .card-info{
	color:#333;
	margin-top:var(--spacing-sm);
}
.card_store .card-info .iconsvg{
	display:block;
	width:20px; height:20px;
	border:1px solid #ccc;
	border-radius:3px;
	margin-top:1px;
}
.card_store .card-info .iconsvg:before{
	-webkit-mask-size:65% 65%;
			mask-size:65% 65%;
}

.card_store .card-info.location{
	text-align:right;
}
.card_store .card-info.location .iconsvg{
	display:none;
}


/* ===== in store_view ===== */
.card_store_summary{
	max-width:400px;
	border-width:0;
	border-bottom:1px dashed rgba(var(--color-one-rgb),0.3);
	padding-bottom:var(--spacing-lg);
	margin:var(--spacing-lg) auto;
}
.card_store_summary:hover{
	border-color:rgba(var(--color-one-rgb),0.3);
}

.card_store_summary .card-photo{
	border-color:#ccc;
	border-radius:10px;
	overflow:hidden;
}

.card_store_summary .card-map{
	height:200px;
}
.card_store_summary .card-map iframe{
	width:100%; height:100%;
}
@media (min-width:992px){
	.card_store_summary{
		max-width:100%;
	}
	.card_store_summary .card-map{
		height:100%;
	}
}

.card_store_summary .card-infolist{
	padding:var(--spacing-sm) 0;
}
.card_store_summary .card-infolist > li{
	margin-bottom:var(--spacing-sm);
}
@media (min-width:992px){
	.card_store_summary .card-infolist{
		display:flex; flex-wrap:wrap;
		padding:0;
	}
	.card_store_summary .card-infolist > li{
		width:50%;
	}
}

.card_store_summary .card-info{
	font-size:var(--text-base);
}
.card_store_summary .card-info,
.card_store_summary .card-info a{
	color:#333;
}
.card_store_summary .card-info a:hover{
	color:var(--color-accent);
}
.card_store_summary .card-info .iconsvg{
	display:block;
	width:22px; height:22px;
	
    background:var(--color-one);
	
	border-radius:4px;
}
.card_store_summary .card-info .iconsvg:before{
	background-color:#fff;
	
	-webkit-mask-size:65% 65%;
	mask-size:65% 65%;
}

.card_store_summary .card-info .card-info-title{
	position:relative;
	width:86px;
	font-weight:600;
	margin-right:0;
	padding-right:var(--spacing-sm);
	

	/*文字左右對齊*/
	text-align:justify;
	text-align-last:justify;
	text-justify:inter-word;
}
.card_store_summary .card-info .card-info-title:after{
	position:absolute; top:0; right:0; content:"：";
	color:#333;
}


/* ===== 地圖檢視 [in store_map] */
.around-map{
	text-align:center;
	margin:var(--spacing-xl) 0;
}
.around-map-item{
	display:inline-block;
	border:1px solid #ccc;
}





/*----------------------------------------------------------------------
	519_供奉神明 #god
-------------------------------- */
.card_god{
	text-align:center;
	padding:var(--spacing-sm);
}
.card_god:before,
.card_god:after{
	position:absolute; z-index:-1; left:0; content:"";
	width:100%; height:17px;
	
	background-color:#ccc;
	 
	-webkit-mask-image:url(../images/icon/icon_god_frame.svg);
    mask-image:url(../images/icon/icon_god_frame.svg);

    -webkit-mask-position:center;
    mask-position:center;
    
    -webkit-mask-repeat:repeat-x;
    mask-repeat:repeat-x;
    
    -webkit-mask-size:auto 100%;
    mask-size:auto 100%;
	
	opacity:0;
}
.card_god:before{ top:1px; opacity:0; }
.card_god:after{ bottom:1px; opacity:1; }

.card_god .card_row{
	align-items:center;
}

.card_god .card-body{
	padding-bottom:var(--spacing-md);
}
@media (min-width:576px){
	.card_god{
		padding:var(--spacing-lg);
	}
	
	.card_god:before{ opacity:1; }

	.card_god:hover:before,
	.card_god:hover:after{
		background-color:var(--color-accent);
		opacity:0.5;
	}
}

.card_god .card-photo{
	max-width:260px;
	border-radius:50%;
	margin:0 auto;
	overflow:hidden;
}
.card_god .card-photo .fitimg{
	-webkit-object-fit: cover;
	   -moz-object-fit: cover;
		    object-fit: cover;
}


/* ===== in god_view */
.card_god_summary{
	margin:var(--spacing-lg) auto var(--spacing-2xl) auto;
	text-align:center;
}
.card_god_summary .card_row{
	align-items:center;
}
.card_god_summary .heading_submain{
	margin:0;
}
@media (min-width:768px){
	.card_god_summary{
		max-width:240px;
	}
}

.card_god_summary .card-photo{
	border:8px solid #fff;
	border-radius:50%;
	overflow:hidden;
	box-shadow:2px 2px 5px rgba(0,0,0,0.2);
}
.card_god_summary .card-photo .fitimg{
	-webkit-object-fit: cover;
	   -moz-object-fit: cover;
		    object-fit: cover;
}

.card_god_summary .card-name-text{
	position:relative; z-index:2;
	color:#990000;
	font-weight:600;
	margin:0;
	padding:0;
}

.card_god_summary .card-name-text:before{
    position:absolute; z-index:-1; content:attr(data-storke);
    
    -webkit-text-stroke:5px #F6DB82;
			text-stroke:5px #F6DB82;
}





/*----------------------------------------------------------------------
	523_陳情案件 #case
-------------------------------- */

/* ===== 案件[in case] */
.card_case{
	border:1px solid #ccc;
}

.card_case.case-goon{
	border-left:6px solid var(--color-case-goon);
}
.card_case.case-finish{
	border-left:6px solid var(--color-case-finish);
}

.card_case .card-header,
.card_case .card-body{
	padding:0.25rem 0.5rem;
	border-bottom:1px solid #ccc;
}
.card_case .card-footer{
	padding:0.25rem 0.5rem;
}

.card_case .card-infolist{
	display:flex; flex-wrap:wrap;
	align-items:center;
	margin:0;
}
.card_case .card-body .card-infolist li{
	width:100%;
	margin:0.25rem 0;
}
.card_case .card-info{
	font-size:var(--text-base); font-weight:600;
	color:#333;
}
.card_case .card-info .card-info-title{
	position:relative;
	font-size:var(--text-sm); font-weight:600;
	color:#666;
	padding-right:var(--spacing-md);
}
.card_case .card-info .card-info-title:after{
	position:absolute; top:0; right:0; content:"：";
	font-size:var(--text-sm); font-weight:600;
	color:#666;
}

.card_case .card-info.cate .card-info-title{
	display:none;
}

.card_case .card-infolist .card-btnbar{
	margin:0;
	padding:0;
}


	
.card_case .card-btn{
	width:100%;
	display:block;
	background:var(--color-one);
	color:#fff;
	font-size:var(--text-sm);
	padding:var(--spacing-sm);
	margin:0;
	text-align:center;
}
.card_case .card-btn:hover{
	background:var(--color-accent);
	color:#fff;
}

.card_case .info.case-finish{
	font-size:var(--text-xl);
}
.card_case .info.case-finish .iconsvg{
	width:40px; height:40px;
}

.card_case .card-text{
	font-size:var(--text-base);
	color:#333;
}


.card_case .card-body .card-btnbar{
	display:none;
}
.card_case .card-footer .card-btnbar{
	margin:var(--spacing-sm) 0 0 0;
}

@media (min-width:992px){
	.card_case .card-body .card-infolist li{
		width:30%;
		margin:0;
	}
	.card_case .card-body .card-infolist li:last-child{
		width:10%;
	}
	
	.card_case .card-body .card-btnbar{
		display:block;
	}
	.card_case .card-footer .card-btnbar{
		display:none;
	}
}



/* ===== 案件-成果[in case-result] */
.card_case_result{
	background:#fff;
	border:1px solid #ccc;
	border-radius:10px;
	overflow:hidden;
}

.card_case_result .card-name{
	padding:var(--spacing-sm);
	margin:0;
}

/*名稱*/
.card_case_result .card-name-text{
	position:relative; z-index:1;
	display:block;
	color:#fff;
	font-size:var(--text-lg);
	text-align:center;
	
	text-shadow: black 0.1em 0.1em 0.2em;
}

/*進度區塊*/
.card_case_result .card-progress{ margin-top:var(--spacing-sm); }
.card_case_result .card-progress-inner{ padding:var(--spacing-sm); }

.card_case_result .card-info{
	align-items:flex-end;
	font-size:var(--text-base); font-weight:600;
	margin:0.25rem 0;
}
.card_case_result .card-info .card-info-mark{
	display:inline-block;
	font-size:var(--text-lg);
	margin:0 0.25rem;
}

/*結案率*/
.card_case_result .card-info_percentage{
	justify-content:center;
	font-size:var(--text-lg);
	color:#F6781D;
}
.card_case_result .card-info_percentage .card-info-mark{
	font-size:var(--text-xl);
}
@media (min-width:992px){
	.card_case_result .card-name-text{
		font-size:var(--text-xl);
	}
	
	.card_case_result .card-info .card-info-mark{
		font-size:var(--text-xl);
	}
	
	.card_case_result .card-info_percentage{
		font-size:var(--text-xl);
	}
	.card_case_result .card-info_percentage .card-info-mark{
		font-size:var(--text-3xl);
	}
}

/*陳情數*/
.card_case_result .card-info_total{
	justify-content:flex-end;
	color:#2D556D;
}
/*結案數*/
.card_case_result .card-info_finish{
	color:#F6781D;
}

/*進度條*/
.card_case_result .progress{
	position:relative; z-index:0;
	width:100%; height:20px;
	background:#2D556D;
	border-radius:20px;
	overflow:hidden;
}
.card_case_result .progress .progress-bar{
	position:absolute; z-index:1; top:-30px; left:0;
	height:80px;
	background:#F5A517;
	transform:skewX(-12deg);
}
.card_case_result .progress .progress-bar:after{
	position:absolute; z-index:1; top:0; right:0; content:"";
	width:5px; height:100%;
	background:#fff;
}



/* ===== 案件追蹤[in case-track] */
.card_case_track{
	border:1px solid #ccc;
	border-radius:10px;
	overflow:hidden;
}

@media (min-width:992px){
	.card_case_track .card-left{
		width:240px;
		background:var(--color-one);
	}
	.card_case_track .card-center{
		flex:1 1 auto;
		width:1%;
		min-width:0;
	}
	.card_case_track .card-right{
		width:150px;
	}
}

.card_case_track .card-header,
.card_case_track .card-body,
.card_case_track .card-footer{
	padding:var(--spacing-sm);
}
.card_case_track .card-header{
	background:var(--color-one);
}

.card_case_track .card-infolist{
    margin-top: 0;
}
.card_case_track .card-info{
	color:#fff;
	font-size:var(--text-base); font-weight:600;
}
.card_case_track .card-info .card-info-title{
	position:relative;
	padding-right:var(--spacing-md);
}
.card_case_track .card-info .card-info-title:after{
	position:absolute; top:0; right:0; content:"：";
	color:#fff;
}

.card_case_track .card-text{
	color:#333;
	font-size:var(--text-base);
	margin-top:0;
}

/*案件-已完成*/
.card-info_case_finish{
	margin-bottom:var(--spacing-sm);
}
.card-info_case_finish .iconsvg{
	display:block;
	width:30px; height:30px;
}
.card-info_case_finish .iconsvg:before{
	background-color:var(--color-case-finish);
}
.card-info_case_finish .card-info-text{
	font-weight:600;
	color:var(--color-case-finish);
}

/*案件-已進行中*/
.card-info_case_goon{
	margin-bottom:var(--spacing-sm);
}
.card-info_case_goon .iconsvg{
	display:block;
	width:30px; height:30px;
}
.card-info_case_goon .iconsvg:before{
	background-color:var(--color-case-goon);
}
.card-info_case_goon .card-info-text{
	font-weight:600;
	color:var(--color-case-goon);
}



/* ===== 完成陳情[in case_petition_c] */
.petition-success{
	text-align:center;
	color:var(--color-one);
	font-size:var(--text-lg); font-weight:600;
}





/*----------------------------------------------------------------------
	D1_自訂選單 #define
-------------------------------- */





/*----------------------------------------------------------------------
	D2_聯絡我們 #contact
-------------------------------- */
.contact-info_row{ display: flex; flex-wrap: wrap; }

.contact-info-left,
.contact-info-right{ width: 100%; }
.contact-info-right{ margin-top: var(--spacing-lg); }

.contact-mapbox{ height: 200px; }
.contact-mapbox iframe{ height: 100%; }	

@media (min-width: 992px){
	.contact-info-left{
		width: 20%;
	}
	.contact-info-right{
		flex: 1 1 auto;
		width: 1%; min-width: 0;
		
		padding-left: var(--spacing-xl);
		margin-top: 0;
	}
	
	.contact-mapbox{ height: 100%; }	
}



/* ===== 聯絡資料 */
.infolist_contact_company{
	display:flex; flex-wrap:wrap;
	gap:0.5rem;
}
.infolist_contact_company li{
	width:100%;
}
@media (min-width: 992px){
	.infolist_contact_company li{
		width:calc((100% - 0.5rem) / 2);
	}
}
.infolist_contact_company .info{
	display:flex; flex-wrap:wrap;
	font-size:var(--text-base);
}

.infolist_contact_company .info .iconsvg{
	width:28px; height:28px;
	
	background:var(--color-one);

	border-radius:50%;
	margin-right:var(--spacing-xs);
}
.infolist_contact_company .info .iconsvg:before{
	background-color:#fff;
	
	-webkit-mask-size:60% 60%;
	mask-size:60% 60%;
}
.infolist_contact_company .info:hover .iconsvg{
	background:var(--color-accent);
}

.infolist_contact_company .info-title{
	min-width:80px;
	color:var(--color-dark);
	font-weight:600;
	margin-right:24px;

	/*文字左右對齊*/
	text-align:justify;
	text-align-last:justify;
	text-justify:inter-word;
}
.infolist_contact_company .info:hover .info-title{
	color:var(--color-accent);
}

.infolist_contact_company .info-title:after{
	position:absolute; top:0; right:-15px; content:"/";
	color:var(--color-dark);
	font-weight:600;
}

.infolist_contact_company .info .info-text{
	flex:1 1 auto;
	width:1%; min-width:0;
}

.infolist_contact_company .info ,
.infolist_contact_company .info a{
	color:#333;
}
.infolist_contact_company .info a:hover{
	color:var(--color-accent);
}



/* ===== 填表諮詢[in idx & contact] */
.formlist_inquire .form-icon{
	display:none;
}
.formlist_inquire .form-title{
	color:var(--color-one);
}
@media (min-width:992px){
	.formlist_inquire{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.formlist_inquire .formline_subject,
	.formlist_inquire .formline_message,
	.formlist_inquire .formline_verifycode,
	.formlist_inquire .formline_submit{
		grid-column: span 2 / span 2;
	}
}



/* ===== 分店資訊 */
.card_branch{
}

.card_branch .card-iframe{
	height:100%;
    padding-bottom:0;
}
.card_branch .card-iframe iframe{
	position:relative; top:0; left:0;
	width:100%; height:100%;
}

.card_branch .card-body{
	padding:var(--spacing-sm);
}	
.card_branch .card-name{
	margin-top:0;
	margin-bottom:var(--spacing-md);
}

.card_branch .card-infolist > li{
	margin-bottom:var(--spacing-md);
}
.card_branch .card-infolist > li:last-child{
	margin-bottom:0;
}
.card_branch .card-info{
	align-items:flex-start;
	font-size:var(--text-base);
}
.card_branch .card-info,
.card_branch .card-info a{
	color:#333;
}
.card_branch .card-info a:hover{
	color:var(--color-accent);
}

.card_branch .card-info-title{
	min-width:80px;
	border-bottom:1px dashed #ccc;
	color:#000;
	font-weight:600;
	margin-right:var(--spacing-xs);
	padding:0 var(--spacing-2xs);

	/*文字左右對齊*/
	text-align:justify;
	text-align-last:justify;
	text-justify:inter-word;
}
.card_branch .card-info:hover .card-info-title{
	color:var(--color-accent);
}
.card_branch .card-info-text{
	flex:1 1 auto;
	width:1%; min-width:0;
}



/* ===== 問題諮詢 */
.consult{
	background:rgba(var(--color-one-rgb),0.05);
	padding:var(--spacing-md);
	margin: var(--spacing-lg) 0;
}

.consult .page{
	margin:var(--spacing-md) 0 0 0;
}


/*in view*/
.consult_view .consult_inner{
	padding: 100px var(--spacing-md) var(--spacing-sm) var(--spacing-md);
	margin-top:calc(var(--spacing-2xl) * -1);
}

.card-btnbar.consult{
	position: relative; z-index: 2;
	justify-content:center;
}

.consult_list > li{ margin-bottom: var(--spacing-sm); }

.card_consult .card-header,
.card_consult .card-body{
	position: relative;
	padding: var(--spacing-2xs) var(--spacing-2xs) var(--spacing-xs) var(--spacing-xl);
}

.card_consult{
	background:rgba(var(--color-one-rgb),0.1);
	border-width:0;
	padding: var(--spacing-sm);
	transition: background 0.4s ease;
}

.card_consult .card-info_sign{
	position: absolute; top: 0; left: 0;
	width: 36px; height: 36px;
	
	justify-content: center;
	
	background: var(--color-dark);
	
	border-radius: 50%;
	color: #fff;
	font-size: var(--text-sm); line-height: 40px;
    font-family: Helvetica, sans-serif;
	text-align: center;
}

.card_consult .card-body .card-info_sign{ display: none; }
	
.card_consult .card-info-title,
.card_consult .card-info-text{
	margin: 0;
	flex: none;
	width: auto; min-width: auto;
}

.card_consult .card-name{
	color: var(--color-dark);
	
	font-weight: 600;
	margin: 0;
}
.card_consult .card-text{
	color: #333;
	font-size: var(--text-base);
	margin: 0;
}



/* ===== 母子新聞 */
.card_advertise{
	position:relative;
	border:1px solid rgba(var(--color-one-rgb), 0.3);
	padding:var(--spacing-sm);
}
.card_advertise .card_row{ align-items:center; }
.card_advertise .card-left{ width:100px; }
.card_advertise .card-right{
	width:calc( 100% - 100px );
	padding-left:var(--spacing-sm);
	margin:0;
}

.card_advertise .card-photo{
	background:#fff;
}

.card_advertise .card-name{
	font-size:var(--text-sm);
}



/* ===== 電子名片 (in idx & contact ) */

/*首次使用商務夥伴APP(in idx)*/
.btnbar_appdownload{
	justify-content:flex-end;
	margin:var(--spacing-sm) 0;
}
@media (min-width:992px){
	.btnbar_appdownload{
		margin-top:calc(var(--spacing-lg) * -1);
	}
}
.btn_appdownload{
	font-size:var(--text-sm);
	margin:0;
}


.appdownload-list{
    max-width:500px;
    margin:0 auto;
    text-align:center;
}
.appdownload-list > li{
    display:inline-block;
    width:160px;
    margin:var(--spacing-md) var(--spacing-md) 0 var(--spacing-md);
}


.card-app{
	background:transparent;
	border-width:0;
}
.card-app .card-name{ margin-top:var(--spacing-sm); }
.card-app .card-name, 
.card-app .card-name a{
    color:#fff;
}


/*雲端名片*/
.card_namecard{
	border-width:0;
}

.card_qrcode{
	background:transparent;
	border:1px solid rgba(0, 0, 0, 0.1);
	padding:var(--spacing-xs);
	margin:0;
	text-align:center;
	height:100%;
}
@media (min-width:992px){
	.card_qrcode:hover{
		border-color:rgba(0, 0, 0, 0.1);
	}
}

.card_namecard .card-grid div:nth-child(3) .card_qrcode,
.card_namecard .card-grid div:nth-child(4) .card_qrcode{
	border-top-width:0;
}
.card_namecard .card-grid div:nth-child(1) .card_qrcode,
.card_namecard .card-grid div:nth-child(3) .card_qrcode{
	border-right-width:0;
}


.card_qrcode .card-photo{
	max-width:110px;
	margin:0 auto;
	border-width:0;
}

.card_qrcode .card-name{
	font-size:var(--text-sm);
}
.card_qrcode .card-name-text,
.card_qrcode .card-info_jobtitle{
	display:inline-block; vertical-align:middle;
	padding:0;
	margin:0;
}
.card_qrcode .card-name-text{
	color:var(--color-dark);
}

.card_qrcode .card-btn{
	border-radius:5px;
	font-size:var(--text-sm);
	padding:var(--spacing-xs) var(--spacing-xs);
	margin:var(--spacing-2xs);
}
.card_qrcode .card-btn .iconsvg{
	width:16px; height:16px;
}
@media (min-width:992px){
	.card_qrcode .card-name{
		margin:0;
	}
	.card_qrcode .card-btnbar{
		justify-content: flex-end;
		margin:0;
	}
}


/* ===== 加line好友(in idx namecard) */
.card_qrcode .card-info{
	justify-content: center;
    font-weight:600;
}
@media (min-width:992px){
	.card_qrcode .card-info{
		justify-content: flex-start;
	}
}

.card_qrcode .card-info,
.card_qrcode .card-info a{
	color:#333;
}
.card_qrcode .card-info > a{
	padding:var(--spacing-2xs) var(--spacing-xs);
}
.card_qrcode .card-info a:hover{
	color:var(--color-one);
}

.card_qrcode .card-info .card-info-text{
	flex:none;
	width:auto;
}

.card_qrcode .card-info_phone{ margin-bottom:0; }
.card_qrcode .card-info_phone .card-info-title{
    display:none;
}

.card_qrcode .card-info_add span,
.card_qrcode .card-info_linecard span{
    display:inline-block;
    vertical-align:middle;
    margin:0.25rem 0;
}
.card_qrcode .card-info_add .iconsvg,
.card_qrcode .card-info_linecard .iconsvg{
    width:26px; height:26px;
}

.card_qrcode .card-info_lineadd,
.card_qrcode .card-info_lineadd a,
.card_qrcode .card-info_linecard,
.card_qrcode .card-info_linecard a{
   color:var(--color-line);
}
.card_qrcode .card-info_lineadd .iconsvg:before,
.card_qrcode .card-info_linecard .iconsvg:before{
    background-color:var(--color-line);
}

.card_qrcode .card-info_lineadd a:hover span,
.card_qrcode .card-info_linecard a:hover span{
	color:var(--color-accent);
}
.card_qrcode .card-info_lineadd a:hover .iconsvg:before,
.card_qrcode .card-info_linecard a:hover .iconsvg:before{
	background-color:var(--color-accent);
}





/*----------------------------------------------------------------------
	609_數據中心 
		news,uninews,life,article的詳細頁：1-相關字  3-您可能有興趣
		
		uniarticle 詳細頁：1-相關字  2-延伸閱讀  3-您可能有興趣
						  右側-側邊列	
	
-------------------------------- */
.card_post{
}

.card_post .fitimg{
	-webkit-object-fit: cover;
	   -moz-object-fit: cover;
		    object-fit: cover;
	
	object-position: center;
}

.card_post .card-body{
	padding:var(--spacing-xs);
}

@media (min-width:1200px){
	.card_post .item-fitimg:before {
		padding-bottom: 70%;
	}
	.card_post .card-iframe{
		padding-bottom: 70%;
	}
	
	.card_post .card-body{
		padding:var(--spacing-sm);
	}
}


.card_post .card-name{
	margin:0;
}
/*取消將連結擴展至整個card*/
.card_post .card-name a:before{
	display:none;
}

.card_post .card-name-text{
	display:-webkit-box;
	text-overflow:ellipsis;
	overflow:hidden;
	
	-webkit-box-orient:vertical;
	white-space:normal;
	-webkit-line-clamp:3;
}


.card_post .card-infolist{
	margin-top:var(--spacing-xs);
}
.card_post .card-info{
	color:#666;
	font-size:var(--text-sm);
	margin:0;
	padding:var(--spacing-2xs) 0;
}
.card_post .card-info .iconsvg{
	display:block;
	margin-left:0;
}
.card_post .card-info .card-info-text{
	padding:0;
	margin:0;
}


/*分類標籤*/
.card_post .card-info_cate{
	font-size: 0.875rem;
	margin:var(--spacing-xs) 0;
}
.card_post .card-info_cate .iconsvg{
	display:none;
}
.card_post .card-info_cate .card-info-text a{
	display:inline-block;
	background:var(--color-one);
	color:#fff;
	padding:var(--spacing-2xs) var(--spacing-2xs);
	border-radius:2px;
}
.card_post .card-info_cate .card-info-text a:hover{
	background:var(--color-accent);
	color:#fff;
}


/*日期*/
.card_post .card-info_date{
	margin:var(--spacing-xs) 0 0 0;
}



/* ===== 側邊 */
.card_post_sub{
}
@media (min-width:1200px){
	.card_post_sub{
		background:transparent;
		border-width:0;
	}
	.card_post_sub .card-photo{
		border-radius:20px;
		overflow:hidden;
	}
}

.card_post_sub .card-photo .fitimg{
	-webkit-object-fit: cover;
	   -moz-object-fit: cover;
		    object-fit: cover;
}


/*取消將連結擴展至整個card*/
.card_post_sub .card-name a:before{
	display:none;
}
.card_post_sub .card-name-text{
	display:-webkit-box;
	text-overflow:ellipsis;
	overflow:hidden;
	
	-webkit-box-orient:vertical;
	white-space:normal;
	-webkit-line-clamp:3;
}

.card_post_sub .card-body{
	padding:var(--spacing-xs);
}
.card_post_sub .card-name{
	margin:0;
}
@media (min-width: 1200px){
	.card_post_sub .card-body{
		padding:0;
	}
	.card_post_sub .card-name{
		font-size: var(--text-base);
	}
	.card_post_sub .card-name-text{
		-webkit-line-clamp:2;
	}
}


.card_post_sub .card-infolist{
	display:flex; flex-wrap:wrap;
	margin-top:var(--spacing-2xs);
}
.card_post_sub .card-infolist > li{
	margin-right:var(--spacing-xs);
}
.card_post_sub .card-infolist > li:last-child{
	margin-right:0;
}
.card_post_sub .card-info .iconsvg{
	display:none;
}
.card_post_sub .card-info{
	margin:0;
}
.card_post_sub .card-info,
.card_post_sub .card-info a{
	color:#666;
	font-size:var(--text-sm); font-weight:600;
}
.card_post_sub .card-info a:hover{
	color:var(--color-accent);
}


/* ===== 數據中心詳細-延伸閱讀-條列清單 */
.card_listicle{
	background:transparent;
	border-width:0;
	padding-left:20px;
}
.card_listicle:before{
	position: absolute; top: 6px; left: 5px; content: "";
    width: 8px; height: 8px;
    background: var(--color-dark);
    transform: rotate(45deg);
}
.card_listicle .card-name{
	margin:0;
}
@media (min-width: 1400px){
	.card_listicle:before{
		top: 10px;
	}
}





/*----------------------------------------------------------------------
	221_最新消息 #news
-------------------------------- */
.card_news{
	padding:var(--spacing-sm);
}

.card_news .card-photo{
	border-width:0;
	border-bottom-width:1px;
}
.card_news .item-fitimg:before {
    padding-bottom: 70%;
}
.card_news .fitimg{
	-webkit-object-fit: cover;
	   -moz-object-fit: cover;
		    object-fit: cover;
	
	object-position: center;
}

.card_news .card-header{
	margin-bottom:var(--spacing-xs);
}
.card_news .card-date-item{
    display:flex; flex-wrap:wrap;
	align-items:flex-end;
	justify-content:flex-end;
	text-align:right;
}
.card_news .card-date-item .card-date{
    display:block;
	color:#333;
    font-size:var(--text-sm); letter-spacing:2px;
	line-height:1;
    padding:var(--spacing-2xs) 0;
}
.card_news .card-date.year{}
.card_news .card-date.year:after{ content:"/"; }

.card_news .card-date.month{}
.card_news .card-date.month:after{ content:"/"; }

.card_news .card-date.day{
	color:#000;
}


.card_news .card-body{
	padding:var(--spacing-xs) var(--spacing-xs);
}

.card_news .card-text{
	font-size:var(--text-base);
}
@media (min-width:576px){
	.card_news .card-date.month:after{
		display:none;
	}

	.card_news .card-name{
		margin-top:0;
	}

	.card_news .card-date-item{
		justify-content:center;
		text-align:center;
	}
	.card_news .card-date-item .card-date{
		font-size:var(--text-sm);
	}
	.card_news .card-date.day{
		width:100%;
		font-size:3rem;
	}
}

@media (min-width:768px){
	.card_news .card-header{
		border-bottom-width:0;
		margin:0;
	}
}





/*----------------------------------------------------------------------
	223_文章 #article
-------------------------------- */
.card_article{
}
.card_article .item-fitimg:before {
    padding-bottom: 70%;
}
.card_article .fitimg{
	-webkit-object-fit: cover;
	   -moz-object-fit: cover;
		    object-fit: cover;
	
	object-position: center;
}
.card_article .card-body{
	padding:var(--spacing-xs) var(--spacing-sm); 
}





/*----------------------------------------------------------------------
	491_在地新聞 #uninews
-------------------------------- */



/*----------------------------------------------------------------------
	492_在地生活 #life
-------------------------------- */





/*----------------------------------------------------------------------
	相片集 #card_figure
-------------------------------- */
.card_figure,
.card_about_figure{
	border-width:0;
}
.card_figure:hover,
.card_about_figure:hover{
	background:transparent;
}

.card_figure .card-photo,
.card_about_figure .card-photo{
	border-color:#ccc;
	transition:box-shadow 0.1s ease;
}
.card_figure:hover .card-photo,
.card_about_figure:hover .card-photo{
	box-shadow:1px 1px 3px rgba(0,0,0,0.3);
}

.card_figure .card-text,
.card_about_figure .card-text{
	color:#666;
	font-size:var(--text-sm);
	text-align:center;
	margin-top:var(--spacing-2xs);
}