@charset "utf-8";


/* ======================================
	Category:
	01. base style overrides
	02. 表單元件基本設定 
	03. 其他基本設定
	04. 註冊、登入等填表設定
	05. 表單套包設定
	06. 主框架
	07. 左側列之選單設定 
	08. 小螢幕時選單設定
	09. 分頁設定
	10. 頁面共同設定
	11. 登入後進入的第一頁-歡迎頁 member_center.php 
	12. 我的活動記事-參與過歷史活動 m_events_history.php
	13. 作伙探夥伴中心-我的熱銷商品 m_pd_pick.php
	14. 作伙探夥伴中心-商品推廣 m_pd.php
	15. 作伙探夥伴中心-活動快訊 m_news.php
	16. 賺錢資訊-最新賺錢資訊 m_money.php
	17. money_go.php
	18. 我的預約

====================================================================================================================================== */





/* ======================================
	01. base style overrides
====================================================================================================================================== */
* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}


/* == reset ======== */
html, body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button,textarea, p, th, td {
	margin: 0;
	padding: 0;
}
img {border: 0;}
:focus {outline: 0;}
h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight:100;}
input, button, textarea,select, optgroup, option {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
}
input, button, textarea, select {*font-size: 100%;} /*purpose To enable resizing for IE */
ol, ul, li {list-style: none;}
:link, :visited , ins {text-decoration: none;}
news, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block;}


/* == Basic Set ======== */
html , body{
	height:100%;
	min-height:100%;
	width:100%;
	font-family:微軟正黑體, "Microsoft JhengHei", MingLiU, arial, verdana, helvetica, tahoma, sans-serif;
}
body{
	background:#FFF;
	
	font-size:16px;
	line-height:1.8;
	letter-spacing:1px;
}


/* == Basic Layout ======== */
.wrapper{
	position:relative;
	height:auto;
	width:100%;
	min-height:100%;
	overflow:hidden;
	margin-left:auto; 
	margin-right:auto;
}

.container{
	position:relative;
	margin:0 auto;
	max-width:1170px;
	width:94%;
	margin-right: auto;
	margin-left: auto;
}
.container:before, .container:after{ display:table; content:" " }
.container:after{ clear:both }


.container-fluid{
	position:relative;
	margin:0 auto;
	max-width:1250px;
	width:100%%;
	margin-right: auto;
	margin-left: auto;
	padding-left:15px;
	padding-right:15px;
}
.container-fluid:before, .container-fluid:after{ display:table; content:" " }
.container-fluid:after{ clear:both }






/* ======================================
	02. 表單元件基本設定
====================================================================================================================================== */
input , select , textarea{
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1.2;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
	vertical-align:middle;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
input::-webkit-input-placeholder , select::-webkit-input-placeholder , textarea::-webkit-input-placeholder{ color: rgba(51,51,51, 0.5); font-size:0.95em;}
input::-moz-placeholder , select::-moz-placeholder , textarea::-moz-placeholder { color: rgba(51,51,51, 0.5); font-size:0.95em;}
input::-ms-input-placeholder , select::-ms-input-placeholder , textarea::-ms-input-placeholder { color: rgba(51,51,51, 0.5); font-size:0.95em;}
input::-moz-placeholder , select::-moz-placeholder , textarea::-moz-placeholder { color: rgba(51,51,51, 0.5); font-size:0.95em;}
select{
	padding-right:25px;
	appearance:none;
    -webkit-appearance: none;
    -moz-appearance: none;
	background:url(../images/selt-arrow.png) no-repeat scroll right 5px center transparent;
}
select::-ms-expand { display: none; }
input:focus , select:focus{ 
	border-color: rgba(13,105,231, 0.2);
    box-shadow: 0 1px 1px rgba(13,105,231, 0.075) inset, 0 0 5px rgba(13,105,231, 0.1);
    outline: 0 none;
}
label{ line-height:1; }




/* ======================================
	03. 其他基本設定
====================================================================================================================================== */
body , .wrapper{ color:#333; background:#fff;}


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


/*圖片*/
.pic img{ width:100%; height:auto;}
.maxpic img{ max-width:100%; height:auto;}


/*方形圖設定*/
.item-thumb-frame { position: relative; display: block; width: 100%; overflow: hidden; }
.item-thumb { display: block; max-width: 100%; padding-bottom: 100%; }

.flex-container{ display:flex; flex-wrap:wrap; align-items:center; }


h1, .h1, h2, .h2, h3, .h3 {
    margin-top:20px;
    margin-bottom:10px;
	line-height:1.5;
}
h3, .h3 { font-size: 24px; }
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }

p{ font-size:16px; }





/* ======================================
	04. 註冊、登入等填表設定
====================================================================================================================================== */
/*註冊等頁面最外框*/
.backend-frame{ 
	margin:15px auto 30px auto;
	padding:30px;
	border:1px solid #ccc;
		
	-ms-border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-o-bborder-radius:10px;
	border-radius:10px;

	-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
	-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
}


/*註冊等頁面-導覽路徑*/
.backend-breadcrumb{ font-size:13px; line-height:1.5; text-align:right; margin:10px 0 30px 0; }
.backend-breadcrumb , .backend-breadcrumb a{ color:#999; }
.backend-breadcrumb a:hover{ color:#D0121B; }
.backend-breadcrumb span{ position:relative; display:inline-block; margin-right:0px;}
.backend-breadcrumb span:after{
	content:"/";
	margin-left:2px;
}
.backend-breadcrumb span:last-child:after{display:none;}
.backend-breadcrumb span:last-child{ cursor:default;}



/*註冊等頁面-標題區塊*/
.backend-headline{ 
	font-size:1.4em; 
	font-weight:600; 
	text-align:center; 
	margin:15px 0 15px 0; 
	line-height:1.5; 
}
.backend-frame-title{
	font-size:18px; 
	text-align:center; 
	font-weight:600;
	margin:0 0 20px 0;
}


.backend-content{ /*margin-top:30px;*/ }
.backend-content.center{ text-align:center; }





/* ======================================
	05. 表單套包設定
====================================================================================================================================== */
/*必填提醒*/
.require-remind-line{ width:100%; margin:5px 0; font-size:12px; text-align:right; }
.require-mark{ color:red; display:inline-block; vertical-align:text-top; width:8px; font-size:0.85em; }

.form{ display: flex; flex-wrap:wrap; }
/*.inline-form{ display: flex; flex-wrap:wrap; }*/
.form-line.half-width , .form-inline-line.half-width{ width:49%; margin-right:2%; }
.form-line.second , .form-inline-line.second{ margin-right:0; }

.form-line.third-width , .form-inline-line.third-width{ width:32%; margin-right:2%; }
.form-line.third , .form-inline-line.third{ margin-right:0; }


.form-line , .form-inline-line{ display: flex; flex-wrap:wrap; width:100%; margin-bottom:15px; }/*每列表單設定*/
.form-line .fm-title , .form-inline-line .fm-title{ width:100px; } /*每列標題寬*/
.form-line .fm-title:after , .form-inline-line .fm-title:after{ content:"：";}
.form-line .fm-wrap , .form-inline-line .fm-wrap{ width:calc(100% - 110px); } /*每列減去(標題寬+5px空格)之欄位寬度*/



/*按鈕列*/
.form-btn-line{ width:100%; text-align:center; margin:40px 0 0 0; }


.form-line .fm-title .control-lab , .form-inline-line .fm-title .control-lab{ font-size:15px; }
.form-line .fm-wrap .control-input , .form-line .fm-wrap .control-textarea , 
.form-inline-line .fm-wrap .control-input , .form-inline-line .fm-wrap .control-textarea{
	width:100%; 
	padding:8px 10px;
	-ms-border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-o-bborder-radius:3px;
	border-radius:3px;
}

.control-input{
	/*-ms-border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-o-bborder-radius:3px;
	border-radius:3px;*/
}

.form-line .fm-wrap .control-remind , .form-inline-line .fm-wrap .control-remind{ color:#999; font-size:0.9em; }/*文字欄位說明提醒*/


/*按鈕設定*/
.control-btn{
	display:inline-block;
	padding:5px 30px 6px 30px; 
	color:#333;
	line-height:1;
	cursor:pointer;
	border:1px solid #666;
	font-size:16px;
	
	/*-ms-border-radius:1px;
	-moz-border-radius:1px;
	-webkit-border-radius:1px;
	-o-bborder-radius:1px;
	border-radius:1px;*/
}
.control-btn:hover{ border-color:#D0121B; color:#D0121B; }


/*核取方塊*/
.checkbox-group{ width:100%; text-align:center; }
.checkbox-item{
    position:relative;
	display:inline-block;
    padding-left:18px;
}
.checkbox-item input[type=checkbox] {
    position: absolute;
    top: 3px;
    left: 0;
    bottom:0;
    margin: auto;
}
.checkbox-item input[type=checkbox] + .checkbox-title{ display:inline-block; height:25px; line-height:22px; }
.checkbox-title{ font-size:14px; }



.form-help-wrap{ margin:30px 0 20px 0; text-align:center; width:100%; }
.form-help-wrap a{ 
	display:inline-block; 
	padding:0 15px;
	margin:10px 0;
	color:#999;
	border:1px solid #999;
	font-size:14px;
	margin:0 10px;
	
	-ms-border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	-o-bborder-radius:15px;
	border-radius:15px;
}
.form-help-wrap a:hover{ border-color:#D0121B; color:#D0121B; }






/* ======================================
	06. 主框架
====================================================================================================================================== */
/*主框架*/
.page-flex-wrap{ position:relative; display:flex; flex-wrap:wrap; height:100%; }
.page-flex-left{ 
	width:230px; /*左列內容寬度*/
	border-right:1px solid #ccc;
}
.page-flex-right{ width:calc(100% - 230px); padding:0 20px; }


/*美化卷軸*/
#scroll-wrapper{ width: 100%; height: 100%; }
#scroll-wrapper > .optiscroll-v .optiscroll-vtrack { opacity: 1 }



/*歡迎您與登出之設定*/
.welcome-wrap{ text-align:center; margin:5px 0; font-size:14px; }
.welcome-wrap span , .welcome-wrap a{ margin:0 2px; }

/*登出按鈕*/
.logout-btn{ text-decoration:underline; }





/* ======================================
	07. 左側列之選單設定
====================================================================================================================================== */
.side-menu-area{ border-top:1px solid #ccc; }

/*左側分類*/
.side-nav{}
ul.mtree li{ position:relative; }
ul.mtree li a{ position:relative; display:block; }


/*有下一層選項的項目設定*/
ul.mtree li.mtree-node > a:before{
	position:absolute;
	z-index:4;
	top:50%;
	right:20px;
	width:6px;
	height:6px;
	margin-top:-3px;
	border-right:1px solid #666; 
	border-top:1px solid #666;
	margin-top:-5px;
	content:"";
	
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	
	transition:transform 0.1s ease;
	-webkit-transition:transform 0.1s ease;
	-moz-transition:transform 0.1s ease;
	-o-transition:transform 0.1s ease;
}


/*ul.mtree li li a , ul.mtree li li li a{ padding-left:35px;}*/

/*第二層*/
/*ul.mtree li li a{ padding-left:25px;}*/

/*第三層*/
/*ul.mtree li li li a{ padding-left:40px;}*/

/*第四層*/
/*ul.mtree li li li li a{ padding-left:54px;}*/

.side-nav li li{ padding-left:15px; }
.side-nav li a{ color:#444; padding:6px 30px 6px 20px; font-size:14px; border-bottom:1px solid rgba(204,204,204, 0.5); }
.side-nav li a:after{
	position:absolute;
	top:30%;
	left:10px;
	width:3px;
	height:40%;
	content:"";
	background:tramsparent;
}

.side-nav li a:hover{ color:#E78624; }
.side-nav li.mtree-node:hover > a:before{  }

.side-nav li.mark > a{ background:rgba(255,255,153, 0.8); /*background:rgba(255,255,153, 0.8) url(../images/menu-money-bg.png) no-repeat center; background-size:cover;*/ }
.side-nav li.mark_green > a{ background:rgba(204,255,102, 0.4); /*background:rgba(255,255,153, 0.8) url(../images/menu-money-bg.png) no-repeat center; background-size:cover;*/ }

.side-nav > li{}
.side-nav > li > a{ font-weight:600; /*border-bottom:0px solid #ccc;*/ line-height:1; padding-top:15px; padding-bottom:15px; }
.side-nav > li > a span{ display:inline-block; vertical-align:middle; line-height:1; }
.side-nav > li > a span.icon{ max-width:40px; }
.side-nav > li > a span.icon img{ display:block; max-width:100%; height:auto; }

.side-nav li ul{ border-bottom:1px solid #ccc; }

.side-nav li li a:after{ top:41%; height:20%; background:rgba(0,0,0,0.2); }
.side-nav li li a:hover:after{ background:#E78624; }

.side-nav li.mtree-open{ }
.side-nav li.mtree-open > a{ font-weight:600; color:#D0121B;  }
.side-nav li.mtree-open > a:after{ background:#D0121B; }
.side-nav li.side-current a{ color:#D0121B; }
.side-nav li.side-current a:after{ background:#D0121B; }

.side-nav li.mtree-node.mtree-open > a:before { }
.side-nav li.mtree-node.mtree-open > a:before{
	/*top:19px;*/
	border-right:2px solid #D0121B; 
	border-top:2px solid #D0121B;
	transform:rotate(135deg);
	-moz-transform:rotate(135deg);
	-webkit-transform:rotate(135deg);
	-o-transform:rotate(135deg);
}




/* ======================================
	08. 小螢幕時選單設定
====================================================================================================================================== */
.fixbar{
	display:none; 
	position:fixed;
	z-index:999;
	top:0;
	left:0;
	width:100%;
	background:#FFF;
	padding:7px 15px;
}

.fixbar .welcome-wrap{ text-align:left; height:40px; line-height:38px; }


/*小螢幕時選單鈕*/
.menu-trigger{
	position:absolute;
	top:10px;
	right:15px;
}
.menu-trigger-icon ,
.menu-trigger-txt{ display:inline-block; vertical-align:middle; line-height:1; }
.menu-trigger-icon{
	position:relative;
	width:44px;
	height:44px;
	/*border:1px solid #fff;*/
	background:#070775;

	border-radius:50%;
}
.menu-trigger-icon:before , .menu-trigger-icon:after{
	position:absolute;
	top:50%;
	left:25%;
	width:50%;
	height:3px;
	margin-top:-2px;
	content:"";
	background:#fff;
	border-radius:3px; 
	
	transform-origin:center;
	transition:transform 0.5s ease;
}
.menu-trigger-icon:before{ transform:translate(0,-8px); }
.menu-trigger-icon:after{ transform:translate(0,8px); }

.menu-trigger-icon .iocn-line{
	position:absolute;
	top:50%;
	left:25%;
	width:50%;
	height:3px;
	margin-top:-2px;
	background:#fff;
	border-radius:3px; 
	transform-origin:right bottom;
}
.menu-trigger.opened .menu-trigger-icon { background:#D0121B; }
.menu-trigger.opened .menu-trigger-icon:before{
	-webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.menu-trigger.opened .menu-trigger-icon:after{
	-webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.menu-trigger.opened .menu-trigger-icon .iocn-line{ opacity:0; }
.menu-trigger-txt{ color:#fff; font-weight:bolder; font-size:1.2em; }








/* ======================================
	#quickbar
====================================================================================================================================== */
.quickbar{
	display:block;
	position:fixed;
	z-index:999;
	top:70px;
	left:0;
	width:100%;
	background:#FFF;
	border-top:1px solid #ccc;
	
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
@media (min-width:992px){
	.quickbar{ display:none;}
}

.quicklist{
	display:flex; flex-wrap:wrap;
}
.quicklist li{
	width:calc( 100% / 3);
	padding:0.7rem 0.5rem;
}
.quicklist li a{
	display:block;
	background:rgba(7,7,117,0.1);
	border-radius:4px;
	color:#000;
	text-align:center;
}
.quicklist li a:hover{
	background:#E78624;
	color:#fff;
}












/* ======================================
	09. 分頁設定
====================================================================================================================================== */
.page{
	margin-top:30px;
	margin-bottom:30px;
	text-align:center;
	padding:2px;
	font-size:12px;
	line-height:1.4;
}
.page a , .page span{
	display:inline-block;
	border: 1px solid #999;
	padding: 3px 10px;
    margin: 5px 5px;
	text-decoration: none;
	color:#333;
	font-size:14px;
}
.page span{
	background:transparent;
	color: #fff;
	background:#666;
}
.page a:hover{
	background: #ffffff;
	color:#701414;
	border-color:#701414;
}







/* ======================================
	10. 頁面共同設定
====================================================================================================================================== */
/*登入頁*/
.login-frame{ max-width:400px; }

/*m_order.php*/
/*.order-frame{ max-width:1100px; }*/

/*m_events_history.php*/
/*.events_history-frame{ max-width:800px; }*/

/*m_pd.php*/
.m-pd-frame{ max-width:550px; }
.promotion-frame{ max-width:1000px; }

/*m_pd_pick.php*/
.pd-pick-frame{ max-width:500px; }

/*m_news.php*/
.news-frame{ max-width:800px; }

/*m_qa.php*/
.qa-frame{ max-width:800px; }


/*註冊頁*/
.register-frame{ max-width:700px; }


/*message頁面*/
.message-frame{ max-width:400px; }

.message-icon{ width:50px; margin:15px auto; }



/*按鈕集*/
.group-btn-line{ margin:20px 0; }
.group-btn{
	position:relative;
	display:block;
	border:1px solid #ccc;
	padding:3px 10px;
	
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
}
.group-btn:before{
	position:absolute;
	top:50%;
	right:10px;
	width: 0;
	height: 0;
	content:"";
	margin-top:-7px;
	border-top: 7px solid transparent;
	border-left: 7px solid #ccc;
	border-bottom: 7px solid transparent;
}
.group-btn a{ display:block; }
.group-btn:hover{
	-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.group-btn:hover:before{ border-left-color:#D0121B; }




/*搜尋區塊，包含開始與結束日期*/
.search-box-line{ text-align:center; margin-bottom:10px; }
.search-box-line.mb{ margin-bottom:30px; }
.search-box{ display:inline-block; vertical-align:middle; line-height:1; margin:5px 10px; }

.search-item{ display:inline-block; vertical-align:middle; margin:5px 3px; }





/*三攔*/
.three-cols-list{ display:flex; flex-wrap:wrap; }
.three-cols-list li{ width:31%; margin-right:3.5%; }
.three-cols-list li:nth-child(3n){ margin-right:0; }


















/* ======================================
	11. 登入後進入的第一頁-歡迎頁 member_center.php
====================================================================================================================================== */
.welcome-area{ width:100%; }

.desktop-welcome-txt , .mobile-welcome-txt{
	position:relative;
	width:100%;
	margin:0 auto;
}
.desktop-welcome-txt img , .mobile-welcome-txt img{ display:block; max-width:100%; height:auto; }

.desktop-welcome-txt{ margin-top:150px; max-width:600px; }

.mobile-welcome-txt{ display:none; margin-top:100px; max-width:400px; }


.announcement-wrap{ margin-bottom:30px; }
.announcement-item{
	border:1px solid #ccc;
	padding:15px;
	margin-bottom:20px;
	text-align:left;
	
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
}
.announcement-item .datetime{ margin-bottom:15px; }
.announcement-item .datetime .daytime{ font-size:0.75em; color:#666; margin-right:10px;}
.announcement-item .datetime .tag{ 
	display:inline-block; 
	background:red; 
	color:#fff;
	font-size:0.75em;
	line-height:1; 
	padding:4px 5px; 
	margin:0 5px;
}
.announcement-item .title{ font-weight:600; margin-bottom:5px; color:rgba(246,108,52,1); font-size:1.1em; }
.announcement-item  .content{
	font-size:0.95em;
	color:#666;
}
.announcement-item  .content img{ max-width:100%; height:auto; }

.announcement-item .video{ text-align:center; margin:15px 0; }
.announcement-item .video iframe{ max-width:100%; }

.announcement-thumbnail{ margin:15px 0; text-align:center; }
/*.announcement-thumbnail:before, .announcement-thumbnail:after{ display:table; content:" " }
.announcement-thumbnail:after{ clear:both }*/
.announcement-thumbnail li{ /*float:left;*/display:inline-block; width:29%; margin:0 1%; border:1px solid transparent; }
.announcement-thumbnail li:hover{ border-color:rgba(139,14,14,0.1); }

.element-line{ text-align:center; margin:5px 0;}



/* ======================================
	12. 我的活動記事-參與過歷史活動 m_events_history.php
====================================================================================================================================== */
/*活動區塊*/
.events-box{
	position:relative;
	padding-bottom:20px;
	margin:20px 0;
	border-bottom:1px solid #ccc;
		
	-ms-border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-o-bborder-radius:10px;
	border-radius:10px;
}
.events-heading{ position:relative; padding-left:130px; margin-bottom:15px; }
.events-note{
	position:absolute;
	top:4px;
	left:0;
}
.events-note span{ display:inline-block; vertical-align:middle; margin:0 2px; }
.events-note span.icon{ width:20px; height:20px; }
.events-note span.icon img{ display:block; max-width:100%; height:auto; }

.events-heading .name{ font-weight:600; font-size:22px; }

.events-company{ font-size:12px; color:#666; margin:0 2px; }

.events-date{ position:relative; margin-bottom:10px; font-size:14px; }

.events-view-line{ position:absolute; bottom:30px; right:0; text-align:right; }
.events-view-btn{ position:relative; display:block; padding-left:28px; font-size:14px; margin-top:5px; }
.events-view-btn span.icon{ position:absolute; top:0px; left:0; }






/* ======================================
	13. 作伙探夥伴中心-我的熱銷商品 m_pd_pick.php
====================================================================================================================================== */
/*表格邊線設定*/
.pd-pick-tb tr{ border-width:0px; }
.pd-pick-tb , .pd-pick-tb td{ border:1px solid #999; }
.pd-pick-tb td{ padding:5px 10px; font-size:12px; line-height:1.5; }





/* ======================================
	14. 作伙探夥伴中心-商品推廣 m_pd.php
====================================================================================================================================== */
.promotion-box{
	position:relative;
	display:flex; 
	flex-wrap:wrap;
	border-bottom:1px solid #ccc;
	padding:15px;
	
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
}
.promotion-box:before{
	position:absolute;
	top:5%;
	right:30%;
	width:1px;
	height:90%;
	content:"";
	background:#ccc;
} 

.promotion-left-area{
	order: 1;
	-ms-flex-order: 1;
	width:70%; 
	position:relative;
	padding:0px 20px 0px 135px;
	min-height:120px;
}
.promotion-right-area{ 
	order: 2;
	-ms-flex-order: 2;
	width:30%; 
	padding:0 0 0 20px;
}

.promotion-left-area .item-thumb-frame{
	position:absolute; 
	top:0;
	left:0;
	width:120px;
	height:120px;
}
.promotion-left-area .datetime{ font-size:0.75em; color:#666; margin-bottom:10px;  }
.promotion-left-area .promotion-tag{ display:inline-block; background:red; color:#fff; line-height:1; padding:4px 5px; margin:0 10px; }
.promotion-left-area .promotion1-tag{ display:inline-block; background:#FFEDFF; color:#fff; line-height:1; padding:4px 5px; margin:0 10px; }
.promotion-left-area .promotion-tag-blue{ display:inline-block; background:#6E00FF; color:#fff; line-height:1; padding:4px 5px; margin:0 10px; }
.promotion-left-area .title{ font-weight:600; margin-bottom:5px; }
.promotion-left-area .title a{ color:#333; }
.promotion-left-area .title a:hover{ color:rgba(246,108,52,1); }
.promotion-left-area .price-list{ font-size:0.8em; }
.promotion-left-area .price-list span{ display:inline-block; margin-right:5px; }

.promotion-right-area{ text-align:center; }
.promotion-right-area .heading{ background:rgba(250,181,153,0.4); text-align:center; padding:2px 0; margin-bottom:10px; font-size:0.95em; }
.promotion-right-area .qrcode{ margin-left:auto; margin-right:auto; display:inline-block; }
.promotion-right-area .qrcode img{ display:block;}
.promotion-right-area .info{ font-size:0.7em;}


.share_qrcod, .share_fb, .share_line {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    margin: 5px 0;
}






/* ======================================
	15. 作伙探夥伴中心-活動快訊 m_news.php
====================================================================================================================================== */
.announcement-wrap{ margin-bottom:30px; }
.announcement-item{
	border-bottom:1px solid #ccc;
	padding-bottom:20px;
	margin-bottom:20px;
	text-align:left;
	
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
}
.announcement-item:last-child{ border-bottom-width:0px; }

.announcement-item .datetime{ margin-bottom:15px; }
.announcement-item .datetime .daytime{ font-size:0.75em; color:#666; margin-right:10px;}
.announcement-item .datetime .tag{ 
	display:inline-block; 
	background:red; 
	color:#fff;
	font-size:0.75em;
	line-height:1; 
	padding:4px 5px; 
	margin:0 5px;
}
.announcement-item .title{ font-weight:600; margin-bottom:5px; color:rgba(246,108,52,1); font-size:1.1em; }
.announcement-item  .content{
	font-size:0.95em;
	color:#666;
}
.announcement-item  .content img{ max-width:100%; height:auto; }

.announcement-item .video{ text-align:center; margin:15px 0; }
.announcement-item .video iframe{ max-width:100%; }

.announcement-thumbnail{ margin:15px 0; text-align:center; }
.announcement-thumbnail li{ display:inline-block; width:29%; margin:0 1%; border:1px solid transparent; }
.announcement-thumbnail li:hover{ border-color:rgba(139,14,14,0.1); }

.element-line{ text-align:center; margin:5px 0;}
.download-btn{
	border:1px solid #cccccc;
	-ms-border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-o-bborder-radius:3px;
	border-radius:3px;
	
	color:#666;
	display:inline-block;
	font-size:1em;
	margin:10px 10px;
	padding:0 40px 0 25px;
	text-align:center;
}
.download-btn span{position:relative;}
.download-btn span:before{
	position:absolute;
	right:-15px;
	bottom:50%;
	margin-left:5px;
	margin-bottom:-3px;
	content:"";
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 6px solid #666;
}
.download-btn:hover{color:#8B0E0E; border-color:#8B0E0E;}
.download-btn:hover span:before{border-top-color:#8B0E0E;}


.sale-pd-tag-list{ margin-bottom:10px; }






/* ======================================
	16. 賺錢資訊-最新賺錢資訊 m_money.php
====================================================================================================================================== */
/*FB、LINE分享*/
.social-share-btn-blue{ color:blue; border-color:blue; }
.social-share-btn-blue:hover{ color:#fff; border-color:blue; background:blue; }
.social-share-btn-red{ color:red; border-color:red; }
.social-share-btn-red:hover{ color:#fff; border-color:red; background:red; }
.social-share-btn-green{ color:green; border-color:green; }
.social-share-btn-green:hover{ color:#fff; border-color:green; background:green; }



.social-share-wrap{ margin:30px 0; }
.social-share-item{ 
	position:relative;
	margin-bottom:30px;
	border:1px solid #ccc; 
	background:rgba(255,255,255,0.6);
	padding:15px 200px 15px 20px;
	
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
}

.social-share-line{ margin:5px 0; }

.social-share-point-line{ border-top:1px solid #ccc; margin:10px 0; padding:5px 0; }
.social-share-point-line.has-bt-info{ border-bottom:1px solid #ccc; margin-bottom:10px; padding-bottom:5px; }

.social-share-active-line{
	border:1px solid #ccc;
	margin:10px 0;
	padding:5px 10px; 
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
}
.social-share-active-line.mark{ border:1px solid red; }

.social-share-cate , .social-share-title , .social-share-state , 
.social-share-time , .social-share-link , .social-share-point{ display:inline-block; margin-right:15px; }

.social-share-cate{ font-size:16px; font-weight:600; background:#A72023; color:#fff; padding:1px 10px 2px 10px; margin-bottom:10px; }
.social-share-cate .cate-icon{ display:inline-block;  vertical-align:middle;  width:22px; margin-right:10px; }
.social-share-cate .cate-icon img{ display:block; max-width:100%; height:auto; }
.social-share-cate .cate-title{ display:inline-block; vertical-align:middle;  }

.social-share-title{ font-size:16px; }
.social-share-state{ color:#333; font-size:14px; }
.social-share-time{ font-size:14px; color:#666; }
.social-share-link{ font-size:14px; color:#666; }

.social-share-point{ font-size:14px; }

.pointmark{ color:red; }

.social-share-explain{ color:#666; font-size:14px; }
.social-share-explain img{ max-width:100%; height:auto; }

.social-share-gobtn{ 
	position:absolute;
	top:10%;
	right:20px;
	
	width:120px;
	height:80%;
	border:1px solid #ccc;
	background:#ffe400;
	
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
	
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}

.social-share-gobtn .title{
	display:block;
	color:#A72023;
	font-size:18px;
	font-weight:600;
	/*width:50px;*/
	text-align:center;
}
.social-share-item:hover .social-share-gobtn{ background:#A72023; border:1px solid #ffe400; }
.social-share-item:hover .social-share-gobtn .title{ color:#fff; }

.social-share-gobtn.cancel{ background:#fff; border:1px solid #ccc; }
.social-share-gobtn.cancel .title{ color:#ccc; }
.social-share-item:hover .social-share-gobtn.cancel{ background:#fff; border:1px solid #ccc; cursor:no-drop; }
.social-share-item:hover .social-share-gobtn.cancel .title{ color:#ccc; }







/* ======================================
	17. money_go.php
====================================================================================================================================== */
.money-go-area{ margin:30px 0; padding:0 10px; }
.money-go-heading{ text-align:center; margin-bottom:15px;  }
.money-go-heading .title{ display:inline-block; font-size:16px; color:#CC3300; font-weight:600; }

.money-go-social-box{ 
	max-width:300px; 
	border:1px solid red;
	margin:10px auto;
	padding:15px 15px 30px 15px;
	text-align:center;
	
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
}
.money-go-social-title{ font-size:22px; font-weight:600; color:red; margin:5px 0 30px 0; }


/*收縮內容*/
.social-share-desc-trigger{
	display:block;
	border:1px solid #ccc; 
	text-align:center;
	padding:6px 15px;
	max-width:300px;
	margin:20px auto;
	list-style:none;
	text-decoration:none;
	
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
}
.social-share-desc-trigger .title{ color:#999; font-size:14px; }

.social-share-desc-toggle{ display:none; padding:20px 5px; max-width:1000px; margin:20px auto; border-top:1px solid #ccc; }
.social-share-desc-toggle img{ max-width:100%; height:auto; }
.social-share-desc-toggle.opened{ display:block; }







/* ======================================
	18. 我的預約
====================================================================================================================================== */
.reserve-list{}

.reserve-line-heading{ display:flex; flex-wrap:wrap; align-items:center; }
.reserve-line-heading .flex-left , .reserve-line-heading .flex-center , .reserve-line-heading .flex-right{ margin:5px 0; }
.reserve-line-heading .flex-left{ width:calc(100% - 50% - 220px); }
.reserve-line-heading .flex-center{ width:50%; }
.reserve-line-heading .flex-right{ width:220px; text-align:right; }

.reserve-divide-line{ 
	width:100%; 
	height:1px; 
	border:0;
	border-top:1px dashed #ccc;
	margin:10px 0;
}

.reserve-line-content{ display:flex; flex-wrap:wrap; align-items:center; }
.reserve-line-content .flex-left{ width:calc(100% - 220px); }
.reserve-line-content .flex-right{ width:220px; text-align:center; }

.reserve-bar{ margin:5px 0; }

.reserve-bar .bar-item{ display:inline-block; vertical-align:middle; margin:5px 10px 5px 0; }

.reserve-bar .link-icon{ display:inline-block; vertical-align:middle; margin:5px 10px 5px 0; max-width:130px; }
.reserve-bar .link-icon img{ display:block; max-width:100%; height:auto; }

.mobile-show{ display:none; }






/*收藏設計師*/
.reserce-love-box{ position:relative; /*max-width:400px; margin-left:auto; margin-right:auto;*/ text-align:center; }

.reserce-love-box .box-num{ position:absolute; top:15px; left:15px; font-size:12px; color:#666; }

.reserce-love-heading{ font-size:16px; margin:25px 0 10px 0; }

.reserce-love-name{ font-size:18px; font-weight:600; margin:20px 0; line-height:1.3; word-wrap:break-word; word-break:normal; }

.reserce-love-link a{
	display:inline-block;
	margin:10px;
	border:1px solid #666;
	color:#666;
	line-height:1;
	padding:5px 10px 7px 10px;
	min-width:100px;
	font-size:14px;
}
.reserce-love-link a:hover{
	border-color: #D0121B;
	color: #D0121B;
}

.reserce-love-delete{
	position:absolute;
	top:15px;
	right:15px;
	font-size:12px;
	color:#666;
}


/*預約單列印*/
.reserve-print-box{ position:relative; max-width:900px; margin:30px auto 60px auto; padding:0 15px; }
.print-frame-box{ max-width:900px; margin-left:auto; margin-right:auto; padding:0 15px; }

.print-box-num{ position:absolute; top:0; left:15px; }
.print-box-time{ position:absolute; top:0; right:15px; }
.print-box-heading{ font-size:20px; font-weight:600; margin:20px 0; line-height:1.3; text-align:center; padding-top:40px; margin:30px 0 40px 0; }

.print-box-bar .bar-item{ display:inline-block; vertical-align:middle; margin:5px 10px 5px 0; }