/* ########################################################################################################################################################## 
	cmn[01]page
########################################################################################################################################################## */


/*====== cmn[01]page-01.外框架*/
.page-maincontent{}

.page-flex{ display:flex; flex-wrap:wrap; }


/*====== cmn[01]page-01.外框架-詳細頁(有限寬) */
.page-maincontent.view-pd{
	max-width:1000px;
	margin:0 auto;
	padding-top:15px;
}





/*====== cmn[01]page-02.左右頁面布局 */
.sidebar-flex{ display:flex; flex-wrap:wrap; }
.sidebar-flex-left{ width:200px; margin-right:40px; }
.sidebar-flex-right{ width:calc( 100% - 240px ); }








/*====== cmn[01]page-03.主標題列*/
.main-headline-bar{ margin:30px 0; }

.main-headline-bar .pheading .text{
	display:block;
	margin:3px 0;
	font-weight:600;
	
	color:#0E429B;
	color:var(--darker-color);
	
	text-align:center;
}
.main-headline-bar .pheading.main .text{
	font-size:1.5em;
}
.main-headline-bar .pheading.sub .text{
	font-size:1em;
	/*text-transform:uppercase;*/
	border-top:1px solid #ccc;
	padding-top:5px;
	opacity:0.8;
}





/*====== cmn[01]page-03.分類主標題列 */
.cate-headline-bar{}







/*====== cmn[01]page-04.搜尋區塊*/
.search-bar{ margin-bottom:30px; }
.search-item{}

.search-item form{
	position:relative;
    width:100%;
    background:#fff;
	border:1px solid #ccc;
	padding-right:40px;
	overflow:hidden;
}

.search-input , .search-btn{
	height:35px;
	background:#fff;
	border:1px solid transparent; border-radius:0;
	line-height:1; 
}
.search-input{
	width:100%;
	background:#fff;
	color:#333;
	font-size:16px;
	padding:7px 10px;
}
.search-input:focus{ border-color:transparent; }

/*====== cmn[01]page-04.搜尋區塊 - 搜尋按鈕 */
.search-btn{ position:absolute; top:0; right:1px; padding:0 7px; cursor:pointer; }
.search-btn:hover{ border:1px solid #eee; }




/*====== cmn[01]page-04.搜尋區塊 - 搜尋結果 */
.search-result-bar{ margin-bottom:30px; }
.search-result-bar .namebar{ position:relative; background:rgba(0,0,0,0.05); padding:2px 7px; }

.search-result-bar .namebar .iconfont ,
.search-result-bar .namebar .text{
	display:inline-block; vertical-align:middle;
}
.search-result-bar .namebar .iconfont{ font-size:22px; color:#999; }
.search-result-bar .namebar .text{ font-size:24px; font-weight:600; }



/*====== cmn[01]page-04.搜尋區塊 - 無資料列 */
.search-noresult-bar{
	font-size:18px; font-weight:600;
	color:red;
	text-align:center;
	margin:20px 0 40px 0;
}






/*====== cmn[01]page-05.側邊-多層分類 */
.submenu-area{}



/*====== cmn[01]page-05.側邊-多層分類-標題 */
.submenu-heading{}



/*====== cmn[01]page-05.側邊-多層分類 */
.side-nav{ position:relative; margin-bottom:60px; }
.side-nav li{ position:relative; }
.side-nav li a{ 
	position:relative;
	display:block;
	/*background:#f3f3f3;*/
	
	border-width:1px 0 0 0;
	border-style:solid;
	border-color:rgba(204,204,204, 0.7);
	
	font-size:16px; font-weight:600;
	color:#333;
	padding:7px 25px 7px 12px;
}
.side-nav > li:last-child > a{ border-bottom-width:1px; }

.side-nav li ul{
	padding-left:17px;
	
	border-width:1px 0 0 1px;
	border-style:solid;
	border-color:rgba(204,204,204, 0.7);
}
.side-nav ul li:first-child > a{
	border-top-width:0;
}


/*====== cmn[01]page-05.側邊-多層分類-有下一層選項的項目設定(箭頭) */
ul.mtree li.mtree-node > a:before{
	position:absolute; z-index:4; top:50%; right:10px; content:"";
	width:4px; height:4px;
	
	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;
}
ul.mtree li.mtree-closed > a:before{ margin-top:-2px; transform:rotate(45deg); }
ul.mtree li.mtree-open > a:before{ margin-top:-4px; transform:rotate(135deg); }

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



/*====== cmn[01]page-05.側邊-多層分類-hover設定 */
.side-nav li a:hover{
	color:#f6b26b;
	color:var(--accent-color);
}
ul.mtree li a:hover:before , ul.mtree li a:hover:after{
	border-color:#f6b26b;
	border-color:var(--accent-color);
}


/*====== cmn[01]page-05.側邊-多層分類-點開有下層之項目變化設定 */
.side-nav li.mtree-open > a{
	color:#245A9B;
    color:var(--primary-color);
}
ul.mtree li.mtree-open > a:before{
	border-color:#245A9B;
    border-color:var(--primary-color);
}


/*====== cmn[01]page-05.側邊-多層分類-選中的項目有標記(圓圈)之設定 */
.side-nav li:after{
	position:absolute; top:18px; left:0px; content:"";
	width:8px; height:8px;
	margin-top:-4px; margin-left:-2px;
	
	background:#ffaa1f;
	background:var(--accent-color);
	
	border-radius:50%;
	opacity:0;
}


/*====== cmn[01]page-05.側邊-多層分類-選中的項目-有背景變化之設定 */
.side-nav li.active > a{
	color:#245A9B;
    color:var(--primary-color);
	
	/*border-width:1px 0 1px 0;
	border-color:#fff;*/
	/*color:#fff;*/
    cursor:default;
}
.side-nav li.active:after{ opacity:1; }
ul.mtree li.active > a:before{ border-color:#fff; }






/*====== cmn[01]page-05.單層分類套在右側 side-nav */
.side-nav li .cate-item > a{ position:relative; }
.side-nav li .cate-item > a:after{
	position:absolute; top:50%; left:0px ;content:"";
	width:10px; height:10px;
	margin-top:-4px;
	margin-left:-5px;
	
	background:#ffaa1f;
	background:var(--accent-color);
	
	border-radius:50%;
	opacity:0;
}
.side-nav li .cate-item > a:hover{
	color:#f6b26b;
	color:var(--accent-color);
}

.side-nav li.active .cate-item > a{
	background:#245A9B;
    background:var(--primary-color);
	
    color:#fff;
    cursor:default;
}
.side-nav li.active .cate-item > a:after{ opacity:1; }








/*====== cmn[01]page-06.導覽路徑 */
.breadcrumb-nav{
	position:relative;
	
	border-bottom:3px solid #ffaa1f;
	border-bottom:3px solid var(--accent-color);
	
	padding-bottom:3px;
	margin-bottom:30px;
}
.breadcrumb-nav:before{
	position:absolute; z-index:0; top:100%; left:0; content:"";
	width:50px; height:3px;
	
	background:#466BAA;
	background:var(--primary-color);
}

.breadcrumb{}
.breadcrumb li{ display:inline-block; }
.breadcrumb li:after{ content:">"; color:#666; font-size:10px; margin-left:2px;  }
.breadcrumb li:last-child:after{ display:none; }

.breadcrumb-item .iconfont , .breadcrumb-item .text{
	display:inline-block; vertical-align:middle;
	font-size:15px; font-weight:600; line-height:1.5;
	color:#666;
}

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

.breadcrumb-item.active .text{
	color:#466BAA;
	color:var(--primary-color);
}










/*====== cmn[01]page-07.單層分類 */
.category-bar{}

.category-list{ text-align:center; margin:0 auto 30px auto; max-width:1000px; }
.category-list li{ display:inline-block; text-align:center; margin:0 15px 15px 15px; }
.category-list li a{
	position:relative;
	
	color:#466BAA;
	color:var(--primary-color);
	
	border:1px solid #466BAA;
	border:1px solid var(--primary-color);
	
	border-radius:5px;
	padding:3px 30px 4px 30px;
}
.category-list li a:before{
	position:absolute; top:100%; left:0; content:"";
	width:100%; height:12px;
	background:url(../images/iocn-fb-shadow.png) no-repeat center top;
	background:contain;
	opacity:0;
}
.category-list li.active a:before{ opacity:1; }
.category-list li a:hover , .category-list li.active a{
	background:#466BAA;
	background:var(--primary-color);
	
	color:#fff;
}
.category-list li.active a{ font-size:1.05em; font-weight:600; cursor:default; }








/*====== cmn[01]page-08.上下功能列 */
.main-function-area{}
.main-function-area .func-flex{ display:flex; flex-wrap:wrap; }

.main-function-area.two-average{}
.main-function-area.two-average .func-flex .flex-left , 
.main-function-area.two-average .func-flex .flex-right{ width:50%; }


/*====== cmn[01]page-08.上下功能列 - 詳細頁最頁尾 */
.main-function-area.view-page-end{ border-top:1px solid #ccc; margin-top:30px; padding-top:15px; }










/*====== cmn[01]page-09.頁碼 */
.page{ margin:40px 0 60px 0; text-align:center; font-size:12px; color:#666; }
.page a , .page span{
	display:inline-block;
	min-width:36px;
	border:1px solid #333;
	border-radius:2px;
	color:#333;
	font-size:14px;
	padding:4px 4px;
	margin:6px 2px;
}
.page span{ background:#ccc; border-color:#ccc; color:#fff; }
.page a:hover{
	background:#466BAA;
	background:var(--primary-color);
	
	color:#fff;
	
	border-color:#466BAA;
	border-color:var(--primary-color);
}







/*====== cmn[01]page-09.頁碼 - 說明( in contact_mail ) */
.page-note-area{
	margin:30px 0 60px 0;
	text-align:center;
	color:#000;
}

.page-note-area.redmark{
	margin:30px 0 60px 0;
	text-align:center;
	font-size:18px; font-weight:600;
	color:red;
}















/* ########################################################################################################################################################## 
	cmn[02]btn-按鈕
########################################################################################################################################################## */






/*====== cmn[02]btn-00.按鈕之基本 */
.btn-bar{}

.btn-heading{ display:inline-block; }

.btn{
    display:inline-block;
    padding:5px 5px;
    margin:5px 3px;
	text-align:center;
}

.btn .icon , .btn .iconfont , .btn .text{
	display:inline-block;
	font-size:14px; line-height:1;
	margin:0 2px;
}

.btn .btn-flex{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
	line-height:1;
}
.btn .btn-flex .icon , .btn .btn-flex .iconfont , .btn .btn-flex .text{
	display:block;
}








/*====== cmn[02]btn-01.首頁-more */
.btn-idx-more{
	position:relative;
	width:100%; max-width:200px;
	
	border:1px solid #0E429B;
	border:1px solid var(--darker-color);
	
	border-bottom-width:0px;
	padding:10px 10px 15px 10px;
}
.btn-idx-more:before , .btn-idx-more:after{
	position:absolute; bottom:0; content:"";
	width:50%; height:4px;
}
.btn-idx-more:before{
	left:0;
	background:#0E429B;
	background:var(--darker-color);
}
.btn-idx-more:after{
	right:0;
	background:#ffaa1f;
	background:var(--accent-color);
}

.btn-idx-more .text{
	font-size:16px; font-weight:600;
	
	color:#0E429B;
	color:var(--darker-color);
}

.btn-idx-more:hover{
	background:#0E429B;
	background:var(--darker-color);
	
	border-color:#0E429B;
	border-color:var(--darker-color);
}
.btn-idx-more:hover .text{ color:#fff; }



/*====== cmn[02]btn-01.首頁-more列(in首頁) */
.btn-bar.idx-more{ text-align:center; margin-top:45px; }








/*====== cmn[02]btn-02.檔案下載 */
.btn-download{
	display:inline-block;
	background:#fff;
	border:1px solid #666; border-radius:30px;
	padding:8px 20px;
	text-align:center;
}
.btn-download .iconfont , .btn-download .text{
	color:#666;
}
.btn-download .iconfont{ font-size:20px; }
.btn-download .text{ font-weight:600; }

.btn-download:hover{
	border-color:#5f91ce;
	border-color:var(--accent-color); 
	
	background:#5f91ce;
	background:var(--accent-color); 
	
	box-shadow:2px 2px 5px rgba(0,0,0,0.3);
}
.btn-download:hover .iconfont , .btn-download:hover .text{
	color:#fff;
} 


/*====== cmn[02]btn-02.檔案下載(in詳細頁) */
.btn-bar.view-download{ text-align:center; margin:30px 0; }

/*====== cmn[02]btn-02.檔案下載(in常見問題) */
.btn-bar.qa-download{ text-align:center; margin:30px 0 0 0; }
.btn-bar.qa-download .btn-download{
	padding:5px 10px;
}









/*====== cmn[02]btn-03.首頁-立即申請(代理商品buy) */
.btn-addcart{
	display:block;
    width:100%; min-width:150px;
	
	border:1px solid #466BAA;
	border:1px solid var(--primary-color);

	overflow:hidden;
}
.btn-addcart .text{
	position:relative; z-index:2;
	display:block;
	
	color:#466BAA;
	color:var(--primary-color);
    
	font-weight:600; line-height:1;
	text-align:center;
	padding:5px 12px;
	transition:color 0.5s ease-out;
}
.btn-addcart .text:before , .btn-addcart .text:after{
	position:absolute; z-index:-1; top:50%; content:"";
	width:50px; height:60px;
	margin-top:-30px;
	
	background:#466BAA;
	background:var(--primary-color);
	
	transform-origin:bottom;
	transform:skewX(20deg);
	
	transition:width 0.4s ease-out;
}
.btn-addcart .text:before{ left:-20px; }
.btn-addcart .text:after{ right:-40px; }

.btn-addcart:hover .text{ color:#fff; }
.btn-addcart:hover .text:before , .btn-addcart:hover .text:after{ width:100%; }



/*====== cmn[02]btn-03.首頁-立即申請(in首頁) */
.btn-bar.idx-addcart{ margin-top:20px; }

/*====== cmn[02]btn-03.首頁-立即申請(in詳細頁) */
.btn-bar.view-addcart{ margin:20px 0; }
.btn-bar.view-addcart .text{ padding:10px; }










/*====== cmn[02]btn-04.返回 */
.btn-pageback{
	display:inline-block;
	border:1px solid #666;
	padding:6px 12px;
	text-align:center;
}
.btn-pageback .iconfont , .btn-pageback .text{
	color:#666;
}
.btn-pageback .iconfont{ }
.btn-pageback .text{ font-weight:600; }

.btn-pageback:hover{
	border-color:#ffaa1f;
	border-color:var(--accent-color); 
	
	background:#ffaa1f;
	background:var(--accent-color); 
}
.btn-pageback:hover .iconfont , .btn-pageback:hover .text{
	color:#fff;
} 


/*====== cmn[02]btn-04.返回(in詳細頁) */
.btn-bar.pageback{ /*text-align:left;*/ }








/*====== cmn[02]btn-05.預約 */
.btn-reservation{
	display:inline-block;
	background:#F27622;
	padding:10px 40px;
	text-align:center;
}
.btn-reservation .iconfont , .btn-reservation .text{
	color:#fff;
}
.btn-reservation .iconfont{ font-size:20px; }
.btn-reservation .text{ font-weight:600; }

.btn-reservation:hover{
	background:#D72626;
}
.btn-reservation:hover .iconfont , .btn-reservation:hover .text{
	color:#fff;
} 


/*====== cmn[02]btn-05.預約(in詳細頁) */
.btn-bar.view-reservation{ text-align:center; margin:15px 0; }








/*====== cmn[02]btn-06.閱讀更多 */
.btn-readmore{
	/* display:inline-block;
	padding:2px;
	margin:0;
	text-align:center; */
}
/* .btn-readmore .text{ font-size:14px; font-weight:600; color:#999; }
.btn-readmore:hover .text{
	color:#5f91ce;
	color:var(--accent-color); 
} */







/*====== cmn[02]btn-07.設計師詳細-summary 預約與視訊按鈕 */
.btn-designer-summary{
	display:block;
	background:#F27622;
	padding:10px 5px;
	text-align:center;
	margin:0 0 15px 0;
}
.btn-designer-summary .iconfont , .btn-designer-summary .text{
	color:#fff;
}
.btn-designer-summary .iconfont{ font-size:20px; }
.btn-designer-summary .text{ font-weight:600; }

.btn-designer-summary:hover{
	background:#D72626;
}
.btn-designer-summary:hover .iconfont , .btn-designer-summary:hover .text{
	color:#fff;
} 

/*預約按鈕*/
.btn-designer-summary.reserve{ background:#EA972B; }

/*視訊按鈕*/
.btn-designer-summary.video{background:#4FAE5C; }


.btn-designer-summary:hover{ background:#D72626; }




















/* ########################################################################################################################################################## 
	cmn[03]item-card 項目 
########################################################################################################################################################## */



/*====== cmn[03]item */
.photobox img{ display:block; max-width:100%; height:auto; }





/*====== cmn[03]item-card-00.基本 */
.item-card{ border:1px solid #ccc; padding:10px; }

.item-card .photobox , .item-card .videobox { background:#fff; border:1px solid #eee; margin-bottom:15px; }
.item-card .photobox a{ display:block; }

.item-card .mask-item , .item-card .card-morebar{ display:none; }

.item-card:hover{
	background:rgba(70, 107, 170, 0.1);
	background:rgba(calc( var(--primary-color-r) ), calc( var(--primary-color-g) ), calc( var(--primary-color-b) ), 0.1);
}





/*====== cmn[03]item-card-01.影片 */
.item-card .videobox {
	position:relative;
    width:100%; height:0;
    padding-bottom:70%;
}
.item-card .videobox iframe {
    position:absolute; top:0; left:0;
    width:100%; height:100%;
}




/*====== cmn[03]item-card-02.主標 */
.item-card .namebar{ margin:10px 0; line-height:1.5; }
.item-card .namebar .text{
	display:block;
	font-size:18px;
	font-weight:600;
}
.item-card .namebar.limit .text{
	height:82px;
	color:#333;
	
	overflow:hidden;
	display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
}

.item-card .namebar a:hover .text{
	color:#ffaa1f;
	color:var(--accent-color);
}





/*====== cmn[03]item-card-03.圖標+短資訊 */
.item-card .infometa-list{}
.item-card .infometa-list li{ margin:6px 0; }

.item-card .infometa{ /*display:inline-block;*/ }

.item-card .infometa-flex{
	display:flex; flex-wrap:wrap; align-items:center;
	line-height:1;
}

.item-card .infometa .icon{ display:block; }
.item-card .infometa .icon img{ display:block; max-width:100%; height:auto; }

.item-card .infometa .iconfont , .item-card .infometa .text{
	display:block;
	line-height:1.3;
	color:#666;
	font-size:14px;
	margin:0 1px;
}
.item-card .infometa .iconfont{ font-size:15px; }








/*====== cmn[03]item-card-04.介紹 */
.item-card .descripbox{
	font-size:16px; line-height:1.4;
	color:#666;
	margin-bottom:10px;
}

/*====== cmn[03]item-card-04.介紹-限行數( in life , people ) */
.life-card .descripbox , .people-card .descripbox{
	max-height:67px;
	display:-webkit-box;
	text-overflow:ellipsis;
	overflow:hidden;
	
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	white-space:normal;
}







/*====== cmn[03]item-card-05.活動資訊 */
.event-info-list{ margin-top:15px;  }
.event-info-list li{ margin-top:10px; }

.event-info{ display:flex; flex-wrap:wrap; align-items:flex-start; }
.event-info .title , .event-info .text{ display:block; font-size:14px; line-height:1.4; }

.event-info .title{
	width:82px;
	margin-right:8px;
	border:1px solid #ccc;
	font-size:12px; font-weight:600; letter-spacing:0;
	color:#666;
	padding:1px;
	text-align:center;
}
.event-info .text{ width:calc( 100% - 90px ); margin-top:1px; }










/* ---------------------------------------------------------------------------------------------------------------------- cmn[03]07.點按跳出置中畫面 */
/*====== cmn[03]07.點按跳出置中畫面 */

/*====== cmn[03]07-1.點按跳出置中畫面 - 跳出區塊 */
.fixedpopup-area{
	display:none;
	position:fixed; z-index:1005; top:0; left:0;
	width:100%; height:100vh;
	background:rgba(0,0,0,0.9);
	overflow:hidden;
	padding:0 30px;
}
.fixedpopup-area.is-open{ display:block; }

.fixedpopup-closebar{ position:absolute; top:20px; right:20px; }

.fixedpopup-flex{
	width:100%; height:100vh;
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
}

/*====== cmn[03]07-1.點按跳出置中畫面 - 跳出區塊(at 視訊) */
.fixedpopup-area.video-conf .fixedpopup-centerbox{
	width:80%; height:70%;
	background:#fff;
	border-radius:10px;
	overflow:hidden;
}
.fixedpopup-area.video-conf .fixedpopup-inner{
	height:100%;
	padding:20px;
	overflow-y:scroll;
}




/*====== cmn[03]07-2.點按跳出置中畫面 - 大標 */
.fixedpopup-headline-bar{ margin:10px 0 30px 0; }
.fixedpopup-headline-bar .pheading.main{
	text-align:center;
}
.fixedpopup-headline-bar .pheading.main .icon ,
.fixedpopup-headline-bar .pheading.main .text{
	display:inline-block; vertical-align:middle;
	margin:4px;
}

.fixedpopup-headline-bar .pheading.main .icon{}
.fixedpopup-headline-bar .pheading.main .icon img{
	display:block; max-width:100%; height:auto;
}

.fixedpopup-headline-bar .pheading.main .text{
	font-size:20px; font-weight:600;
}


/*====== cmn[03]07-2.點按跳出置中畫面 - 大標(at 視訊) */
.fixedpopup-headline-bar.video-conf{}
.fixedpopup-headline-bar.video-conf .pheading.main .text{
	font-size:20px; color:#999;
}

/*====== cmn[03]07-2.點按跳出置中畫面 - 大標(at app download) */
.fixedpopup-headline-bar.appdownload{ margin-bottom:45px; }
.fixedpopup-headline-bar.appdownload .pheading.main .icon{
	width:80px;
}
.fixedpopup-headline-bar.appdownload .pheading.main .text{
	font-size:26px; color:#fff;
}


























/* ########################################################################################################################################################## 
	cmn[04]view 詳細頁
########################################################################################################################################################## */






/*====== cmn[04]view-01.文章頁首列 */
.view-header{ text-align:center; margin-bottom:45px; }

/*文章頁首列(in 商品與代理之詳細)*/
.view-header.view-pro{ text-align:left; margin-bottom:15px; }

/*文章頁首列(in 商品與代理 結合價錢組 at 頁尾)*/
.view-header.view-end-pro{ text-align:center; margin-bottom:15px; }
.view-header.view-end-pro  .view-name .text{ font-size:1.4rem; }




/*====== cmn[04]view-01.文章頁首列 - 文章名稱 h1 */
.view-name{}
.view-name .text{
	font-size:1.7rem; font-weight:600; line-height:1.4;
	
	color:#2160AD;
	color:var(--primary-color);
}



/*====== cmn[04]view-01.文章頁首列 - 日期 */
.view-date{}
.view-date .icon{}
.view-date .text{ font-weight:600; font-size:12px;}




/*====== cmn[04]view-02.介紹 */
.view-intro{ }





/*====== cmn[04]view-03.影片 */
.view-video{ position:relative; text-align:center; margin:30px 0; }
.view-video iframe{ max-width:100%;}





/*====== cmn[04]view-04.相片集 */
.figure-area{ margin:30px 0; }

.figure-list{ margin:0 -10px; }
.figure-list > li{ padding:0 10px; margin-bottom:20px; }


.figure-card{ border-width:0px; padding:0; }

.figure-card .photobox{ position:relative; border:1px solid #ccc; margin:0; overflow:hidden; }
.figure-card .photobox img{ display:block; max-width:100%; height:auto; }

.photo-caption{
	color:#999;
	font-size:14px; line-height:1.4;
	margin:8px 0;
	text-align:center;
}

/*相片集(in 關於我們)*/
.figure-area.about{}

/*相片集(in 詳細頁)*/
.figure-area.view{
	border-width:1px 0;
	border-style:solid;
	border-color:#ccc;
	padding:40px 0 20px 0;
}
.figure-area.view .page{ margin-bottom:0; }

/*設計師詳細頁 designer_pic -相片與最後列相鄰時設定 */
.figure-area.view + .main-function-area.view-page-end{ border-top-width:0; padding-top:0; }






/*====== cmn[04]view-05.social link */
.social-link-area{ text-align:right; }
.social-link-content{ display:inline-block; }






/*====== cmn[04]view-06.tool-bar */
.tool-bar{}
.tool-item{
	position:relative;
	display:inline-block; vertical-align:middle;
	background-color:#fff;
	border:1px solid #ccc;
	line-height:1;
	margin:5px 0;
	overflow:hidden;
}

.tool-item select , .tool-item input, .tool-item button, .tool-item a{
	height:32px;
	background-color:#fff;
	border:1px solid #fff;
	font-size:15px;
	padding:6px;
}

.tool-item select{ cursor:pointer; padding-right:25px; }
.tool-item select{
	padding-right:25px;
	
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;/*移除箭頭樣式*/
	
	background:url(../images/selt-arrow.png) no-repeat right 7px center;/*改變右邊箭頭樣式*/
}

.tool-item a{
	display:flex; flex-wrap:wrap; align-items:center;
	line-height:32px;
}
.tool-item .icon , .tool-item .title{ display:block; line-height:1; margin:0 2px; }
.tool-item .icon{ width:18px; }
.tool-item .icon img{ display:block; max-width:100%; height:auto; }


.tool-item input{ width:100%; }
.tool-item input[type="submit"]{ cursor:pointer; }

.tool-item button{ display:block; cursor:pointer; }
.tool-button-item:hover{ box-shadow:0 1px 2px rgba(0,0,0,0.5); }

.tool-txt-item{ width:200px; }


.tool-txt-btn-item{ width:100%; padding-right:35px; }
.tool-txt-btn-item .btnbox{ position:absolute; top:0; right:0; }


.tool-item.tool-love-item a:hover .title{ color:red; }
.tool-item.tool-collect-item a:hover .title{ color:#FF9700; }
.tool-item.tool-pageback-item a:hover .title{ color:#319EBE; }
.tool-item.tool-reservation-item a:hover .title{ color:#18C666; }
.tool-item.tool-question-item a:hover .title{ color:#5FB3C8; }
.tool-item.tool-gift-item a:hover .title{ color:red; }
.tool-item.tool-download-item a:hover .title{ color:#164BC4; }



.sidebar-search-tool{ margin-top:0; margin-bottom:30px; }














/* ---------------------------------------------------------------------------------------------------------------------- cmn[05].question 詳細頁-問題諮詢 */
/*====== cmn[05].question 詳細頁-問題諮詢 */
.qa-consult-area{ margin:45px 0; }



/*======  cmn[05]question-01.按鈕 */
.btn-bar.qa-consult{ text-align:center; margin:10px 0; }

.btn-question{
	display:inline-block;
	border:1px solid #999;
	border-radius:20px;
	padding:7px 20px;
}
.btn-question .iconfont , .btn-question .text{ }
.btn-question .iconfont{
	width:26px; height:26px;
	background:#fff;
	border-radius:50%;
	color:#CC3333;
	font-size:18px; line-height:26px;
	text-align:center;
	padding-left:1px;
}
.btn-question .text{ color:rgba(0,0,0,0.8); font-size:16px; font-weight:600; font-weight:600; }

.btn-question:hover{
	background:#fff;
	box-shadow:2px 2px 4px rgba(0, 0, 0, 0.3);
}
.btn-question:hover .iconfont{ background:#B84646; color:#fff; }
.btn-question:hover .text{ color:#B84646; }



/*======  cmn[05]question-02.問題列表-大框 */
.qa-consult-box{
	background:#f7f7f7;
	margin-top:30px;
	padding:20px;
	text-align:left;
}
.qa-consult-list > li{ margin-bottom:20px; }


/*======  cmn[05]question-02.問題項目 */
.qa-consult-card{ border-bottom:1px dashed rgba(0,0,0,0.3); padding-bottom:20px; }


/*======  cmn[05]question-02.問題列之設定 */
.qa-consult-card .card-line{
	position:relative;
	padding:9px 5px 7px 65px;
}

.qa-consult-card .card-line .tag{
	position:absolute; top:10px; left:5px;
	font-family: Helvetica, sans-serif; line-height:1;
	padding:2px 5px;
	min-width:40px;
	text-align:center;
}
.qa-consult-card .card-line .tag .sign , .qa-consult-card .card-line .tag .num{
	display:inline-block; vertical-align:middle;
	line-height:1;
	color:#666;
}

.qa-consult-card .card-line .text , .qa-consult-card .descripbox{
	margin:0;
	color:#333;
}


.qa-consult-card .card-line.q-bar{ background:rgba(255,255,255,0.1); }
.qa-consult-card .card-line.q-bar .tag{
	border:1px solid #666;
	min-width:50px;
}
.qa-consult-card .card-line.q-bar .text{ font-weight:600; }


.qa-consult-card .card-line.a-bar{}
.qa-consult-card .card-line.a-bar .tag{
	margin-left:10px;
	
	background:#ffaa1f;
    background:var(--accent-color);
}
.qa-consult-card .card-line.a-bar .tag .sign ,
.qa-consult-card .card-line.a-bar .tag .num{
	color:#fff;
}


/*======  cmn[05]question-04.頁碼 */
.qa-consult-box .page{ margin:0; }





















/* ########################################################################################################################################################## 
	cmn[06]effect 效果(結合 item card)
########################################################################################################################################################## */



/*====== cmn[06]effect-01.goto */
@keyframes goto {
  0% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  5% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  10% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  15% {
	-moz-transform:translateX(-3px);
	-webkit-transform:translateX(-3px);
	-o-transform:translateX(-3px);
	-ms-transform:translateX(-3px);
	transform:translateX(-3px);
  }
  20% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  25% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  30% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  
  100% {
    -moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
}

/* Firefox */
@-moz-keyframes goto {
  0% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  5% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  10% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  15% {
	-moz-transform:translateX(-3px);
	-webkit-transform:translateX(-3px);
	-o-transform:translateX(-3px);
	-ms-transform:translateX(-3px);
	transform:translateX(-3px);
  }
  20% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  25% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  30% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  
  100% {
    -moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
}


/* Safari和Chrome */
@-webkit-keyframes goto {
  0% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  5% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  10% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  15% {
	-moz-transform:translateX(-3px);
	-webkit-transform:translateX(-3px);
	-o-transform:translateX(-3px);
	-ms-transform:translateX(-3px);
	transform:translateX(-3px);
  }
  20% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  25% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  30% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  
  100% {
    -moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
}

/* Opera */
@-o-keyframes goto {
  0% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  5% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  10% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  15% {
	-moz-transform:translateX(-3px);
	-webkit-transform:translateX(-3px);
	-o-transform:translateX(-3px);
	-ms-transform:translateX(-3px);
	transform:translateX(-3px);
  }
  20% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  25% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  30% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  
  100% {
    -moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
}