@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600&display=swap');

@font-face {
  font-family:'Pigeon-font';
  src:url('../fonts/Pigeon-font-Regul.ttf');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'Pigeon-font';
  src:url('../fonts/Pigeon-font-Bold.ttf');
  font-weight:bold;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'Source Han Sans';
  src:url('../fonts/SourceHanSansCN-Regular.ttf');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'Source Han Sans';
  src:url('../fonts/SourceHanSansCN-Medium.ttf');
  font-weight:bold;
  font-style:normal;
  font-display:swap;
}





/* ======================================
	01. 其他基本設定
	02. 表單元件基本設定
	03. 分頁設定
	04. 回頂端按紐
	05. 頁首header設定
	06. 小螢幕時選單設定
	07. 頁尾footer設定
	08. 全頁面共同設定
====================================== */



/* ===================================================================================================================
	01. 其他基本設定
=================================================================================================================== */
html { scroll-behavior: auto !important; } /*修正 bootstrap 造成回頂端流暢不順*/

html, body {
	font-family:'Pigeon-font', 'Source Han Sans', '微軟正黑體', sans-serif;
	/*font-weight:400;
	font-size:13px;
	line-height:1.5;
	color:#222;*/
}

.wrapper {
	position:relative;
	width:100%;
	height:auto;
	min-height:100%;
	overflow:hidden;
	background-size:100% auto;
	background:#ebeff5;
}

h1, h2, h3, h4, h5, h6 { font-weight:bold; }

/* a鏈結字 */
a                { color:#285cb5; text-decoration:none !important; }
a:hover, a:focus { color:#db0f0f; }

ul, li, ol { margin:0px; padding:0px; list-style:none; }

.gen      { font-size:1.05rem; }
.genmed   { font-size:1.1rem; font-weight:bold; }
.genbig   { font-size:1.15rem; }
.gensmall { font-size:0.95rem; }

.coco     { font-family:'Lato', sans-serif; }
code, kbd { font:1rem 'Roboto Mono', 'monospace', 'Source Han Sans', sans-serif !important; word-break:break-all; white-space:pre-wrap; }
pre       { font-family:'Pigeon-font', 'Source Han Sans'; font-size:1em; margin-bottom:0; }

.col-p-0 >  [class*=col-], .col-p-0 >  [class*=topic-item-y] { padding:0       !important; }
.col-p-1 >  [class*=col-], .col-p-1 >  [class*=topic-item-y] { padding:0.25rem !important; }
.col-p-2 >  [class*=col-], .col-p-2 >  [class*=topic-item-y] { padding:0.5rem  !important; }
.col-p-3 >  [class*=col-], .col-p-3 >  [class*=topic-item-y] { padding:1rem    !important; }
.col-p-4 >  [class*=col-], .col-p-4 >  [class*=topic-item-y] { padding:1.5rem  !important; }

.col-px-0 > [class*=col-], .col-px-0 > [class*=topic-item-y] { padding-left:0       !important; padding-right:0       !important; }
.col-px-1 > [class*=col-], .col-px-1 > [class*=topic-item-y] { padding-left:0.25rem !important; padding-right:0.25rem !important; }
.col-px-2 > [class*=col-], .col-px-2 > [class*=topic-item-y] { padding-left:0.5rem  !important; padding-right:0.5rem  !important; }
.col-px-3 > [class*=col-], .col-px-3 > [class*=topic-item-y] { padding-left:1rem    !important; padding-right:1rem    !important; }
.col-px-4 > [class*=col-], .col-px-4 > [class*=topic-item-y] { padding-left:1.5rem  !important; padding-right:1.5rem  !important; }

.col-py-0 > [class*=col-], .col-py-0 > [class*=topic-item-y] { padding-top:0       !important; padding-bottom:0       !important; }
.col-py-1 > [class*=col-], .col-py-1 > [class*=topic-item-y] { padding-top:0.25rem !important; padding-bottom:0.25rem !important; }
.col-py-2 > [class*=col-], .col-py-2 > [class*=topic-item-y] { padding-top:0.5rem  !important; padding-bottom:0.5rem  !important; }
.col-py-3 > [class*=col-], .col-py-3 > [class*=topic-item-y] { padding-top:1rem    !important; padding-bottom:1rem    !important; }
.col-py-4 > [class*=col-], .col-py-4 > [class*=topic-item-y] { padding-top:1.5rem  !important; padding-bottom:1.5rem  !important; }

.col-pb-0 > [class*=col-], .col-pb-0 > [class*=topic-item-y] { padding-bottom:0       !important; }
.col-pb-1 > [class*=col-], .col-pb-1 > [class*=topic-item-y] { padding-bottom:0.25rem !important; }
.col-pb-2 > [class*=col-], .col-pb-2 > [class*=topic-item-y] { padding-bottom:0.5rem  !important; }
.col-pb-3 > [class*=col-], .col-pb-3 > [class*=topic-item-y] { padding-bottom:1rem    !important; }
.col-pb-4 > [class*=col-], .col-pb-4 > [class*=topic-item-y] { padding-bottom:1.5rem  !important; }

.col-pt-0 > [class*=col-], .col-pt-0 > [class*=topic-item-y] { padding-top:0       !important; }
.col-pt-1 > [class*=col-], .col-pt-1 > [class*=topic-item-y] { padding-top:0.25rem !important; }
.col-pt-2 > [class*=col-], .col-pt-2 > [class*=topic-item-y] { padding-top:0.5rem  !important; }
.col-pt-3 > [class*=col-], .col-pt-3 > [class*=topic-item-y] { padding-top:1rem    !important; }
.col-pt-4 > [class*=col-], .col-pt-4 > [class*=topic-item-y] { padding-top:1.5rem  !important; }


.col-m-0 >  [class*=col-], .col-m-0 >  [class*=topic-item-y] { margin:0       !important; }
.col-m-1 >  [class*=col-], .col-m-1 >  [class*=topic-item-y] { margin:0.25rem !important; }
.col-m-2 >  [class*=col-], .col-m-2 >  [class*=topic-item-y] { margin:0.5rem  !important; }
.col-m-3 >  [class*=col-], .col-m-3 >  [class*=topic-item-y] { margin:1rem    !important; }
.col-m-4 >  [class*=col-], .col-m-4 >  [class*=topic-item-y] { margin:1.5rem  !important; }

.col-mx-0 > [class*=col-], .col-mx-0 > [class*=topic-item-y] { margin-left:0       !important; margin-right:0       !important; }
.col-mx-1 > [class*=col-], .col-mx-1 > [class*=topic-item-y] { margin-left:0.25rem !important; margin-right:0.25rem !important; }
.col-mx-2 > [class*=col-], .col-mx-2 > [class*=topic-item-y] { margin-left:0.5rem  !important; margin-right:0.5rem  !important; }
.col-mx-3 > [class*=col-], .col-mx-3 > [class*=topic-item-y] { margin-left:1rem    !important; margin-right:1rem    !important; }
.col-mx-4 > [class*=col-], .col-mx-4 > [class*=topic-item-y] { margin-left:1.5rem  !important; margin-right:1.5rem  !important; }

.col-my-0 > [class*=col-], .col-my-0 > [class*=topic-item-y] { margin-top:0       !important; margin-bottom:0       !important; }
.col-my-1 > [class*=col-], .col-my-1 > [class*=topic-item-y] { margin-top:0.25rem !important; margin-bottom:0.25rem !important; }
.col-my-2 > [class*=col-], .col-my-2 > [class*=topic-item-y] { margin-top:0.5rem  !important; margin-bottom:0.5rem  !important; }
.col-my-3 > [class*=col-], .col-my-3 > [class*=topic-item-y] { margin-top:1rem    !important; margin-bottom:1rem    !important; }
.col-my-4 > [class*=col-], .col-my-4 > [class*=topic-item-y] { margin-top:1.5rem  !important; margin-bottom:1.5rem  !important; }

.col-mb-0 > [class*=col-], .col-mb-0 > [class*=topic-item-y] { margin-bottom:0       !important; }
.col-mb-1 > [class*=col-], .col-mb-1 > [class*=topic-item-y] { margin-bottom:0.25rem !important; }
.col-mb-2 > [class*=col-], .col-mb-2 > [class*=topic-item-y] { margin-bottom:0.5rem  !important; }
.col-mb-3 > [class*=col-], .col-mb-3 > [class*=topic-item-y] { margin-bottom:1rem    !important; }
.col-mb-4 > [class*=col-], .col-mb-4 > [class*=topic-item-y] { margin-bottom:1.5rem  !important; }

.col-mt-0 > [class*=col-], .col-mt-0 > [class*=topic-item-y] { margin-top:0       !important; }
.col-mt-1 > [class*=col-], .col-mt-1 > [class*=topic-item-y] { margin-top:0.25rem !important; }
.col-mt-2 > [class*=col-], .col-mt-2 > [class*=topic-item-y] { margin-top:0.5rem  !important; }
.col-mt-3 > [class*=col-], .col-mt-3 > [class*=topic-item-y] { margin-top:1rem    !important; }
.col-mt-4 > [class*=col-], .col-mt-4 > [class*=topic-item-y] { margin-top:1.5rem  !important; }

/*.topic-item-y:last-child { margin-bottom:0 !important; padding-bottom:0 !important;}*/

.mt-co2 { margin-top:-0.5rem !important; }
.mt-co3 { margin-top:-1rem !important; }


/*文字行數*/
.line-clamp-1 { -webkit-line-clamp:1; }
.line-clamp-2 { -webkit-line-clamp:2; }
.line-clamp-3 { -webkit-line-clamp:3; }
.line-clamp-4 { -webkit-line-clamp:4; }
.line-clamp-5 { -webkit-line-clamp:5; }
.line-clamp-6 { -webkit-line-clamp:6; }
.line-clamp-7 { -webkit-line-clamp:7; }
.line-clamp-8 { -webkit-line-clamp:8; }
.line-clamp-9 { -webkit-line-clamp:9; }

[class*=line-clamp-] { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }

/*方形圖設定*/
.img-thumbnail { padding:0.15rem !important; }


hr.hr1 { position:relative; margin:20px 0;        border-style:dashed; border-color:#666; }
hr.hr2 { position:relative; margin:17px 0;        border-style:dashed; border-color:#666; }
hr.hr3 { position:relative; margin:25px 0 30px 0; border-style:dashed; border-color:#666; }

[class*=hr1-] { position:relative; border-style:solid;  border-color:#888;  /*opacity:1;*/ }
[class*=hr2-] { position:relative; border-style:dotted; border-color:#888; /*opacity:1;*/ }
[class*=hr3-] { position:relative; border-style:dashed; border-color:#888; /*opacity:1;*/ }
hr.hr1-0 { margin:0;         }
hr.hr1-1 { margin:0.25rem 0; }
hr.hr1-2 { margin:0.5rem 0;  }
hr.hr1-3 { margin:0.75rem 0; }
hr.hr1-4 { margin:1rem 0;    }
hr.hr1-5 { margin:1.25rem 0; }
hr.hr1-6 { margin:1.5rem 0;  }

hr.hr2-0 { margin:0;         }
hr.hr2-1 { margin:0.25rem 0; }
hr.hr2-2 { margin:0.5rem 0;  }
hr.hr2-3 { margin:0.75rem 0; }
hr.hr2-4 { margin:1rem 0;    }
hr.hr2-5 { margin:1.25rem 0; }
hr.hr2-6 { margin:1.5rem 0;  }

hr.hr3-0 { margin:0;         }
hr.hr3-1 { margin:0.25rem 0; }
hr.hr3-2 { margin:0.5rem 0;  }
hr.hr3-3 { margin:0.75rem 0; }
hr.hr3-4 { margin:1rem 0;    }
hr.hr3-5 { margin:1.25rem 0; }
hr.hr3-6 { margin:1.5rem 0;  }

.w1p   { width:  1%; }
.w2p   { width:  2%; }
.w3p   { width:  3%; }
.w4p   { width:  4%; }
.w5p   { width:  5%; }
.w6p   { width:  6%; }
.w7p   { width:  7%; }
.w8p   { width:  8%; }
.w9p   { width:  9%; }
.w10p  { width: 10%; }
.w15p  { width: 15%; }
.w20p  { width: 20%; }
.w25p  { width: 25%; }
.w30p  { width: 30%; }
.w35p  { width: 35%; }
.w40p  { width: 40%; }
.w45p  { width: 45%; }
.w50p  { width: 50%; }
.w55p  { width: 55%; }
.w60p  { width: 60%; }
.w65p  { width: 65%; }
.w70p  { width: 70%; }
.w75p  { width: 75%; }
.w80p  { width: 80%; }
.w85p  { width: 85%; }
.w90p  { width: 90%; }
.w95p  { width: 95%; }
.w100p { width:100%; }

.w1em  { width: 1em; }
.w2em  { width: 2em; }
.w3em  { width: 3em; }
.w4em  { width: 4em; }
.w5em  { width: 5em; }
.w6em  { width: 6em; }
.w7em  { width: 7em; }
.w8em  { width: 8em; }
.w9em  { width: 9em; }
.w10em { width:10em; }

.max-w1em  { max-width: 1em; }
.max-w2em  { max-width: 2em; }
.max-w3em  { max-width: 3em; }
.max-w4em  { max-width: 4em; }
.max-w5em  { max-width: 5em; }
.max-w6em  { max-width: 6em; }
.max-w7em  { max-width: 7em; }
.max-w8em  { max-width: 8em; }
.max-w9em  { max-width: 9em; }
.max-w10em { max-width:10em; }
.max-w11em { max-width:11em; }
.max-w12em { max-width:12em; }
.max-w13em { max-width:13em; }
.max-w14em { max-width:14em; }
.max-w15em { max-width:15em; }

.max-w40p  { max-width: 40%; }
.max-w45p  { max-width: 45%; }
.max-w50p  { max-width: 50%; }
.max-w55p  { max-width: 55%; }
.max-w60p  { max-width: 60%; }
.max-w65p  { max-width: 65%; }
.max-w70p  { max-width: 70%; }
.max-w75p  { max-width: 75%; }
.max-w80p  { max-width: 80%; }
.max-w85p  { max-width: 85%; }
.max-w90p  { max-width: 90%; }
.max-w95p  { max-width: 95%; }
.max-w100p { max-width:100%; }

.min-w40p  { min-width: 40%; }
.min-w45p  { min-width: 45%; }
.min-w50p  { min-width: 50%; }
.min-w55p  { min-width: 55%; }
.min-w60p  { min-width: 60%; }
.min-w65p  { min-width: 65%; }
.min-w70p  { min-width: 70%; }
.min-w75p  { min-width: 75%; }
.min-w80p  { min-width: 80%; }
.min-w85p  { min-width: 85%; }
.min-w90p  { min-width: 90%; }
.min-w95p  { min-width: 95%; }
.min-w100p { min-width:100%; }

.max-h40vh  { max-height: 40vh; }
.max-h45vh  { max-height: 45vh; }
.max-h50vh  { max-height: 50vh; }
.max-h55vh  { max-height: 55vh; }
.max-h60vh  { max-height: 60vh; }
.max-h65vh  { max-height: 65vh; }
.max-h70vh  { max-height: 70vh; }
.max-h75vh  { max-height: 75vh; }
.max-h80vh  { max-height: 80vh; }
.max-h85vh  { max-height: 85vh; }
.max-h90vh  { max-height: 90vh; }
.max-h95vh  { max-height: 95vh; }
.max-h100vh { max-height:100vh; }

.min-h10vh  { min-height: 10vh; }
.min-h15vh  { min-height: 15vh; }
.min-h20vh  { min-height: 20vh; }
.min-h25vh  { min-height: 25vh; }
.min-h30vh  { min-height: 30vh; }
.min-h35vh  { min-height: 35vh; }
.min-h40vh  { min-height: 40vh; }
.min-h45vh  { min-height: 45vh; }
.min-h50vh  { min-height: 50vh; }
.min-h55vh  { min-height: 55vh; }
.min-h60vh  { min-height: 60vh; }
.min-h65vh  { min-height: 65vh; }
.min-h70vh  { min-height: 70vh; }
.min-h75vh  { min-height: 75vh; }
.min-h80vh  { min-height: 80vh; }
.min-h85vh  { min-height: 85vh; }
.min-h90vh  { min-height: 90vh; }
.min-h95vh  { min-height: 95vh; }
.min-h100vh { min-height:100vh; }

.d-table {
  border-collapse: collapse;
}

.v-middle {
  vertical-align: middle;
}



.main-box {
	padding:10px;
	background:#ebf9fe;
	background:linear-gradient(to right, #ebf9fe, #eff9fe, #f5fbfe, #fafdfe, #f5fbfe, #eff9fe, #ebf9fe);
	border:solid 1px #c8e8f0;
	border-radius:5px;
}


.row-F.row { --bs-gutter-x:0; }

.outline-0 { outline:0 !important; }


/*自定義滾動條*/
.container ::-webkit-scrollbar-track { background:#d6e7ff; }
.container ::-webkit-scrollbar       { width:0.5em; height:0.5em; }
.container ::-webkit-scrollbar-thumb { background:#aeddfd; border-radius:0.5em; }
/* ===================================================================================================================
	02. 表單元件基本設定
=================================================================================================================== */

img { max-width:100%; vertical-align:middle; border-width:0; }
textarea { resize:none; }
form { margin:0px; display:inline; }


input, select, textarea, .input, .select, .textarea {
    padding:3px;
    color:#333;
    background-color:#fff;
    border:1px solid #ccc;
	border-radius:0.25rem;
	/*vertical-align:middle;*/
    transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

/*表單欄位提示 placeholder */
input::placeholder, select::placeholder, textarea::placeholder { font-family:'Pigeon-font', 'Source Han Sans', '微軟正黑體', sans-serif; font-size:1rem; color:#bbb !important; }

textarea:focus, input:focus, select:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

textarea.posting-textarea { width:100%; max-width:100%; resize:vertical; }

label { cursor: pointer; }
label:hover { color:#e50; }


/* ===================================================================================================================
	03. 分頁設定 page
=================================================================================================================== */
.page-box { display:inline-flex; align-items:flex-end; }
.page-box .page-btn, .page-box .page-btn:hover {
	display:inline-block;
	padding:4px;
	color:#fff;
	text-align:center;
	overflow:hidden;
	background:#537083;
	border:1px solid #4f5c62;
}

.page-box a, .page-box strong {
	display:inline-block;
	min-width:30px;
	padding:4px;
	margin:0 2px;
	vertical-align:middle;
	text-align:center;
	color:#333;
	border:1px solid #c3c9cd;
	border-radius:3px;
	box-shadow:1px 1px 2px #e0e0e1;
	background:#f6f8f9;
	background:linear-gradient(#f6f8f9, #f1f4f6, #edf1f3);
}

.page-box strong {
	min-width:30px;
	font-weight:bold;
	color:#fff;
	border:1px solid #4f5c62;
	background:#5c7485;
	background:linear-gradient(#5c7485, #4e606c, #4b5a63);
}

.page-box a:hover {
	color:#f60;
	background:#c5e4f1;
	background:linear-gradient(#c5e4f1, #bae0f5, #a2d6f2);
}

.page-box .page-dots { vertical-align:-0.45em; letter-spacing:-2px; }
.page-box .page-sep { display:none; }

.page-box.small a { min-width:25px; padding:2px; }



/* ===================================================================================================================
	04. 回頂端按紐
=================================================================================================================== */
#scrolltop {
    display:none;
    padding:8px;
	line-height:0;
	position:fixed;
	/*z-index:999;*/
    right:10px;
    bottom:20px;
    cursor:pointer;
	background:#56a8f0;
	background:radial-gradient(#56a8f0, #2d74c1, #31577e);
    border:2px solid #fff;
    border-radius:50%;
}

#scrolltop.show { display:block; opacity:0.7; }
#scrolltop.show:hover { opacity:1; background:#f22f2f; background:radial-gradient(#f22f2f, #c01f1f, #861515); }

#scrolltop img { animation:scroll-show 1.2s infinite; }
#scrolltop:hover img { animation:scroll-show paused; }

@keyframes scroll-show {
	0%   { opacity:0; transform:translateY(6px); }
	20%  { opacity:1; transform:translateY(4px); }
	40%  { opacity:1; transform:translateY(2px); }
	60%  { opacity:1; transform:translateY(0px); }
	80%  { opacity:1; transform:translateY(-5px); }
	100% { opacity:0; transform:translateY(-10px); }
}



/* ===================================================================================================================
	05. 頁首header設定
=================================================================================================================== */

header {
	background-size:100% auto;
	margin-bottom:15px;
	z-index:1;
}

.mobile-fixed-bar {
	display:none;
	width:100%;
	position:fixed;
	/*z-index:100;*/
	bottom:0;
	left:0;
	background:#e2f2fb;
	box-shadow:0 -2px 5px rgba(0,0,0,0.2);
}
.mobile-fixed-list { display:flex; flex-wrap:wrap; align-items:center; }
.mobile-fixed-list > li { width:25%; }


.mobile-fixed-item a {
	display:block;
	padding:13px 5px;
	line-height:1;
	text-align:center;
	position:relative;
	/*z-index:60;*/
	border-right:1px solid #c1d9f4;
	border-top:1px solid #c1d9f4;
}
.mobile-fixed-item .title {
	display:block;
	font-weight:bold;
	font-size:18px;
	color:#000;
	line-height:1;
	letter-spacing:0;
}


.fixed-menu-toggle-wrap { position:relative; }


/*---小螢幕時底部選單--------------*/
/*
.fixed-menu-trigger {
	display:block;
	padding:13px 5px;
	text-align:center;
	line-height:1;
	position:relative;
	z-index:60;
	background:#e2f2fb;
	border-right:1px solid #c1d9f4;
	border-top:1px solid #c1d9f4;
}

.fixed-menu-trigger .toggle-trigger-txt {
	display:block;
	font-weight:bold;
	font-size:18px;
	color:#000;
	line-height:1;
	letter-spacing:0;
}

.fixed-menu-trigger.opened { background:#f7830f; }
.fixed-menu-trigger.opened .toggle-trigger-txt { color:#fff; }
*/
/*---------------------------*/

.fixed-menu-toggle-contnet {
	width:100%;
	min-width:140px;
	padding-bottom:45px;
	position:absolute;
	/*z-index:59;*/
	bottom:0;
	right:0;
	background:#e2f2fb;
	box-shadow:-1px -2px 5px rgba(0,0,0,0.2);
	visibility:hidden;
	opacity:0;
}
.fixed-menu-toggle-contnet.opened {
	display:block;
	visibility:visible;
	opacity:1;
}


.fixed-menu-list { position:relative; /*z-index:5;*/ display:flex; flex-wrap:wrap; }
.fixed-menu-list li { width:100%; }
.fixed-menu-list li a {
	display:block;
	padding:16px 5px;
	position:relative;
	font-size:17px;
	color:#000;
	text-align:center;
	line-height:1.5;
	letter-spacing:0;
	border-bottom:1px solid #c1d9f4;
}
.fixed-menu-list li:last-child a { border-bottom-width:0px; }
.fixed-menu-list li a .title { display:block; }


.header-top-bar { padding:0; }

.header-top-flex {
	display:flex;
	padding:20px;
	margin:0;
	flex-wrap:wrap;
	align-items:stretch;
	background:#fff;
}

.header-top-flex .flex-col-logo    { width:50%; }
.header-top-flex .flex-col-banner  { width:50%; }
.header-top-flex .flex-col-social  { width:50%; display:flex; align-items:center; justify-content:flex-end; }
.header-top-flex .flex-col-login   { width:50%; }
.header-top-flex .flex-col-trigger { display:none; }

.logo { display:block; position:relative; /*z-index:2;*/ display:block; max-width:350px; }


.tiny-item {
	text-align:center;
	letter-spacing:0;
	border:1px solid #fff;
	border-radius:5px;
	overflow:hidden;
	box-shadow:1px 1px 1px rgba(0,0,0,0.1);
	transition:All 0.15s ease;
}
.tiny-item.item-register 	{ background:#388cd3; }
.tiny-item.item-login 		{ background:#950095; }
.tiny-item.item-auction 	{ background:#d25306; }

.tiny-item a { display:block; font-family:'Source Han Sans', '微軟正黑體', sans-serif; font-weight:bold; font-size:calc(1rem + 0.2vw); color:#fff; }

.tiny-item:hover {
	box-shadow:1px 1px 3px rgba(0,0,0,0.5);
}


/*登入、註冊*/
.header-login-list { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }
.header-login-list li { margin-right:8px; }
.header-login-list li:last-child { margin-right:0; }
.header-login-list .tiny-item { width:100px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid #fff; }

/*社群*/
.header-social-list { display:flex; /*flex-wrap:wrap; align-items:center; justify-content:flex-end;*/ }
.header-social-list li { margin-right:16px; }
.header-social-list li:last-child { margin-right:0; }
.header-social-list li.mobile-show { display:none; }

.header-social-list .social-item { width:64px; height:64px; }
.header-social-list .social-item a {display:block; }



.main-menu {
	height:50px;
	position:relative;
	z-index:10;
}





/* ===================================================================================================================
	06. 主選單設定
=================================================================================================================== */

/*選單*/
.main-menu-list {
	display:table;
	width:100%;
	font-family:'Source Han Sans', '微軟正黑體', sans-serif;
	text-align:center;
}

/*選單-第一層*/
.main-menu-list > li {
	position:relative;
	width:calc( 100% / 9 );
	display:table-cell;
	padding:0;
	line-height:45px;
	/*font-weight:bold;*/
	font-size:1.30rem;
	color:#fff;
	border-right:1px solid #3cc1d0;
	background:#068989;
	background:linear-gradient(#01908f, #01908f, #068989, #029b9a, #029b9a);
}

.main-menu-list > li:last-child { border-right:0; }

.main-menu-list a { display:block; color:#fff; }

.main-menu-list > li.active,
.main-menu-list > li:hover { color:#ff0; }

.main-menu-list > li a:hover, .main-menu-list li > li:hover, .main-menu-list > li.active > a { color:#ff0; }

.main-menu-list > li:hover li { color:#fff; }

/*選單-第一層滑鼠移過秀出第二層 ul 區塊*/
.main-menu-list > li:hover > ul {
	visibility:visible;
	opacity:1;
	-moz-transform:translateY(0);
	-webkit-transform:translateY(0);
	-o-transform:translateY(0);
	-ms-transform:translateY(0);
	transform:translateY(0);
}

/*選單-第二層*/
.main-menu-list ul {
	width:100%;
	position:absolute;
	/*z-index:5;*/
	left:0;
	background:#f5f9fd;
	background:linear-gradient(#01908f, #01908f, #068989, #029b9a, #029b9a);
	box-shadow:0 2px 5px rgba(0, 0, 0, 0.1);
	visibility:hidden;
	opacity:0;
	-webkit-transition:opacity 0.5s ease, transform 0.5s ease;
	transition:opacity 0.5s ease, transform 0.5s ease;
	-moz-transform:translateY(5px);
	-webkit-transform:translateY(5px);
	-o-transform:translateY(5px);
	-ms-transform:translateY(5px);
	transform:translateY(5px);
}

.main-menu-list ul > li a { font-weight:bold; font-size:1.25rem; color:#fff; border-top:1px solid #b3cce4; }
.main-menu-list ul > li:hover { background:#029b9a; color:#ff0; }
.main-menu-list ul > li a:hover { color:#ff0; }



/*選單-第二層滑鼠移過秀出第三層 ul 區塊*/
.main-menu-list > li > ul > li:hover > ul {
	visibility:visible;
	opacity:1;
	/*z-index:99;*/
	-moz-transform:translateY(0);
	-webkit-transform:translateY(0);
	-o-transform:translateY(0);
	-ms-transform:translateY(0);
	transform:translateY(0);
}

/*選單-第三層*/
.main-menu-list ul > li > ul {
	left:100%;
	top:0;
	position:absolute;
	/*z-index:6;*/
	background:#f5f9fd;
	background:linear-gradient(#01908f, #01908f, #068989, #029b9a, #029b9a);
	box-shadow:0 2px 5px rgba(0, 0, 0, 0.1);
	visibility:hidden;
	opacity:0;
	-webkit-transition:opacity 0.5s ease, transform 0.5s ease;
	transition:opacity 0.5s ease, transform 0.5s ease;
	-moz-transform:translateX(5px);
	-webkit-transform:translateX(5px);
	-o-transform:translateX(5px);
	-ms-transform:translateX(5px);
	transform:translateX(5px);
}

.main-menu-list ul > li > ul > li a { border-top:1px solid #b3cce4; color:#fff; font-weight:bold; font-size:1.25rem; }
.main-menu-list ul > li > ul > li a:hover { background:#029b9a; color:#ff0; }





/* ===================================================================================================================
	06. 小螢幕時選單設定
=================================================================================================================== */
/*小螢幕時選單鈕*/
.menu-trigger {
	display:none;
	width:32px;
	margin-left:calc(100% - 32px);
}

.menu-trigger-icon {
	padding:calc(3px + 0.3vw) 0;
	position:relative;
	color:#fff;
	text-align:center;
	background:#333;
	border-radius:3px;
	overflow:hidden;
}

.menu-trigger-txt { margin-top:4px; font-size:calc(13px + 0.3vw); color:#a00; line-height:1; text-align:center; }


/*小螢幕時選單*/
.mobile-menu {
	display:none;
	width:280px;
	max-width:100%;
	height:100%;
	height:100vh;
	padding:15px;
	position:fixed;
	top:0;
	bottom:0;
	right:-280px;
	z-index:9999;
	background:#dcf5fe;
	overflow-y:auto;
	overflow-x:hidden;
	box-shadow:0 4px 10px rgba(0, 0, 0, 0.2);
	-webkit-transition:transform 0.5s ease;
	-moz-transition:transform 10.5s ease;
	transition:transform 0.5s ease;
}
.mobile-menu.opened {
	-webkit-transform:translateX(-280px);
	-moz-transform:translateX(-280px);
	-ms-transform:translateX(-280px);
	-o-transform:translateX(-280px);
	transform:translateX(-280px);
}

/*mobile選單*/
.mobile-menu-list { font-family:'Source Han Sans', '微軟正黑體', sans-serif; margin-top:10px; margin-bottom:30px; }
.mobile-menu-list li { position:relative; display:block; }
.mobile-menu-list li a { display:block; padding:10px 20px 10px 10px; position:relative; font-size:20px; color:#000; border-bottom:1px solid rgba(0, 0, 0, 0.2); }
.mobile-menu-list li a:hover { color:#2483bc; }


/*第一層*/
.mobile-menu-list > li > a { font-weight:bold; }
.mobile-menu-list > li:first-child a { border-top:1px solid rgba(0, 0, 0, 0.2); }

/*第二層之後的層級收縮*/
.mobile-menu-list ul {
	display:none;
	width:100%;
	position:relative;
	top:0;
	left:0;
}

/*第二層*/
.mobile-menu-list ul li a {
	padding-left:25px;
	font-size:1.2rem; /*第二層之後的文字字級*/
}

/*第三層*/
.mobile-menu-list ul ul li a { padding-left:42px; opacity:0.8; }


/*第四層*/
.mobile-menu-list ul ul ul li a { padding-left:58px; opacity:0.6; }


/*第一層有下層點開之後變化*/
.mobile-menu-list > li.current { background:#badbfc; }
.mobile-menu-list > li.current > a { background:#0f497d; color:#fff !important; }
.mobile-menu-list > li.current a { border-bottom:1px solid rgba(255, 255, 255, 0.8); }
.mobile-menu-list > li.current > a .submenu-button:before { border-right-color:#fff; border-bottom-color:#fff;  }

/*第二層之後有下層點開之後變化*/
.mobile-menu-list li li.current li { background:#87e9ff; }
.mobile-menu-list li li.current > a { color:#d12921 !important; }
.mobile-menu-list li li.current > a .submenu-button:before { border-right-color:#d12921; border-bottom-color:#d12921;  }


.mobile-menu-header-area { text-align:center; }

/*關閉選單按鈕*/
.menu-close-trigger { display:flex; align-items:center; justify-content:center; }
.close-trigger-icon, .close-trigger-txt {
	display:inline-block;
}
.close-trigger-icon {
	position:relative;
	height:30px;
}
.close-trigger-icon:before, .close-trigger-icon:after {
	width:3px;
	height:100%;
	position:absolute;
	left:30px;
	top:0;
	content:"";
	background:#a40018;
}
.close-trigger-icon:before {
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
}
.close-trigger-icon:after {
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

.close-trigger-txt { margin-left:50px; font-size:15px; color:#a40018; text-transform:uppercase; }





/*有下層之提示圖樣*/
.submenu-bottom {
	display:inline-block;
	width:7px;
	height:7px;
	position:relative;
	top:-5px;
	left:7px;
}
.submenu-bottom:before {
	width:7px;
	height:7px;
	position:absolute;
	border-right:2px solid #ccc;
	border-bottom:2px solid #ccc;
	content:"";
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}

.mobile-menu-list > li.current > a > .submenu-bottom:before {
	border-right:2px solid #fff;
	border-bottom:2px solid #fff;
}

/*滑鼠移入動畫*/
.main-menu-list > li:hover .submenu-bottom {
	-webkit-transition:opacity 0.3s ease, transform 0.3s ease;
	transition:opacity 0.3s ease, transform 0.3s ease;
	-moz-transform:translateY(10px);
	-webkit-transform:translateY(10px);
	-o-transform:translateY(10px);
	-ms-transform:translateY(10px);
	transform:translateY(10px);
}



/*有右層之提示圖樣*/
.submenu-right {
	display:inline-block;
	width:7px;
	height:7px;
	position:relative;
	top:-3px;
	left:7px;
}
.submenu-right:before {
	width:7px;
	height:7px;
	position:absolute;
	border-right:2px solid #fff;
	border-bottom:2px solid #fff;
	content:"";
	transform: rotate(315deg);
}

/*滑鼠移入動畫*/
.main-menu-list > li > ul > li:hover .submenu-right {
	-webkit-transition:opacity 0.3s ease, transform 0.3s ease;
	transition:opacity 0.3s ease, transform 0.3s ease;
	-moz-transform:translateX(10px);
	-webkit-transform:translateX(10px);
	-o-transform:translateX(10px);
	-ms-transform:translateX(10px);
	transform:translateX(10px);
}





/* ===================================================================================================================
	07. 頁尾footer設定
=================================================================================================================== */
.footer { position:relative; padding-top:3rem; padding-bottom:1rem; color:#a00; }

.footer-flex { display:flex; flex-wrap:wrap; }
.footer-flex-left { width:35%; }
.footer-flex-center { width:35%; }
.footer-flex-right { width:30%; }

.footer, .footer a { }

.footer-info li { font-size:1.05rem; text-align:center; }
.footer-info li span, .footer-info li a { color:#a00; letter-spacing:0.03rem; }
.footer-info-item { display:inline-block; }
.footer .content, .footer .content a { padding-top:20px }

.footer-info.right-side { text-align:right; margin-bottom:5px; }
.footer-info.right-side  li span { margin-right:0; margin-left:6px; }

.footer-blod { font-weight:bold; font-size:20px; color:#5fb; padding-bottom:10px }

.copyright { width:100%; font-size:15px; margin:0 auto; text-align:center; }
.copyright-left { width:50%; }
.copyright-right { width:50%; }
.copyright { color:#333; }
.copyright-right a { color:#368ad2 !important; }
.copyright-right a:hover { color:#c00 !important; }

.copyright p:nth-child(2) { margin-top:10px; }

.social-list { display:block; /*margin-top:10px;*/ }
.social-list li {
	display:inline-block;
	width:115px;
	margin:3px 5px 3px 10px;
	overflow:hidden;
}
.social-list li img { display:block; max-width:100%; height:auto; border:5px solid #fff; }
.social-list li:hover {
	background:#f78716;
	opacity:1;
}

.social-list li.social-fb { background:#385693; }
.social-list li.social-line { background:#2bac37; }
.social-list li.social-wechat { background:#4fbd33; }

.mobile-show { display:none; }


.footer .social-item { text-align: center; }
.footer .social-item img { width:64px; height:64px; margin:0 0.5rem; }

/* ===================================================================================================================
	08. 全頁面共同設定
=================================================================================================================== */

.main-content { padding:0 0 30px 0; }

.page-flex       { display:flex; flex-wrap:wrap; }
.page-flex-left  { order:1; width:260px; margin-right:1.5rem; }
.page-flex-right { order:2; width:calc(100% - 260px - 1.5rem); }


main {
	min-height:calc(40vh);
	padding:20px !important;
	background:#fff;
	border-radius:5px;
	box-shadow:2px 2px 10px rgba(0, 0, 0, 0.3);
}

.section {
    display:block;
    padding:15px 0;
    position:relative;
    overflow:hidden;
}

.heading { position:relative; margin-bottom:20px; text-align:center; }
.heading:before {
	width:100%;
	height:4px;
	margin-top:-2px;
	position:absolute;
	top:50%;
	left:0;
	content:"";
	border-radius:5px;
	background:#1464b4;
	background:linear-gradient(to right, transparent, #1464b4 30%, #1464b4 70%, transparent );
}

.heading .title {
	display:inline-block;
	padding:0 20px;
	position:relative;
	color:#1464b4;
	background:#fff;
}


.time { color:#a00; }
.calendar { color:#999; }

.contact_form {
	padding:30px;
	margin-bottom:15px;
	border:1px solid #ccc;
	border-radius:5px;
	box-shadow:0 0 8px rgba(0, 0, 0, 0.3);
	background:#ebf9fe;
	background:linear-gradient(to right, #ebf9fe, #eff9fe, #f5fbfe, #fafdfe, #f5fbfe, #eff9fe, #ebf9fe);
}


.font-red { color:red !important; }

.color-000 { color:#000 !important; }
.color-003 { color:#003 !important; }
.color-006 { color:#006 !important; }
.color-009 { color:#009 !important; }
.color-00c { color:#00c !important; }
.color-00f { color:#00f !important; }
.color-030 { color:#030 !important; }
.color-033 { color:#033 !important; }
.color-036 { color:#036 !important; }
.color-039 { color:#039 !important; }
.color-03c { color:#03c !important; }
.color-03f { color:#03f !important; }
.color-060 { color:#060 !important; }
.color-063 { color:#063 !important; }
.color-066 { color:#066 !important; }
.color-069 { color:#069 !important; }
.color-06c { color:#06c !important; }
.color-06f { color:#06f !important; }
.color-090 { color:#090 !important; }
.color-093 { color:#093 !important; }
.color-096 { color:#096 !important; }
.color-099 { color:#099 !important; }
.color-09c { color:#09c !important; }
.color-09f { color:#09f !important; }
.color-0c0 { color:#0c0 !important; }
.color-0c3 { color:#0c3 !important; }
.color-0c6 { color:#0c6 !important; }
.color-0c9 { color:#0c9 !important; }
.color-0cc { color:#0cc !important; }
.color-0cf { color:#0cf !important; }
.color-0f0 { color:#0f0 !important; }
.color-0f3 { color:#0f3 !important; }
.color-0f6 { color:#0f6 !important; }
.color-0f9 { color:#0f9 !important; }
.color-0fc { color:#0fc !important; }
.color-0ff { color:#0ff !important; }

.color-300 { color:#300 !important; }
.color-303 { color:#303 !important; }
.color-306 { color:#306 !important; }
.color-309 { color:#309 !important; }
.color-30c { color:#30c !important; }
.color-30f { color:#30f !important; }
.color-330 { color:#330 !important; }
.color-333 { color:#333 !important; }
.color-336 { color:#336 !important; }
.color-339 { color:#339 !important; }
.color-33c { color:#33c !important; }
.color-33f { color:#33f !important; }
.color-360 { color:#360 !important; }
.color-363 { color:#363 !important; }
.color-366 { color:#366 !important; }
.color-369 { color:#369 !important; }
.color-36c { color:#36c !important; }
.color-36f { color:#36f !important; }
.color-390 { color:#390 !important; }
.color-393 { color:#393 !important; }
.color-396 { color:#396 !important; }
.color-399 { color:#399 !important; }
.color-39c { color:#39c !important; }
.color-39f { color:#39f !important; }
.color-3c0 { color:#3c0 !important; }
.color-3c3 { color:#3c3 !important; }
.color-3c6 { color:#3c6 !important; }
.color-3c9 { color:#3c9 !important; }
.color-3cc { color:#3cc !important; }
.color-3cf { color:#3cf !important; }
.color-3f0 { color:#3f0 !important; }
.color-3f3 { color:#3f3 !important; }
.color-3f6 { color:#3f6 !important; }
.color-3f9 { color:#3f9 !important; }
.color-3fc { color:#3fc !important; }
.color-3ff { color:#3ff !important; }

.color-600 { color:#600 !important; }
.color-603 { color:#603 !important; }
.color-606 { color:#606 !important; }
.color-609 { color:#609 !important; }
.color-60c { color:#60c !important; }
.color-60f { color:#60f !important; }
.color-630 { color:#630 !important; }
.color-633 { color:#633 !important; }
.color-636 { color:#636 !important; }
.color-639 { color:#639 !important; }
.color-63c { color:#63c !important; }
.color-63f { color:#63f !important; }
.color-660 { color:#660 !important; }
.color-663 { color:#663 !important; }
.color-666 { color:#666 !important; }
.color-669 { color:#669 !important; }
.color-66c { color:#66c !important; }
.color-66f { color:#66f !important; }
.color-690 { color:#690 !important; }
.color-693 { color:#693 !important; }
.color-696 { color:#696 !important; }
.color-699 { color:#699 !important; }
.color-69c { color:#69c !important; }
.color-69f { color:#69f !important; }
.color-6c0 { color:#6c0 !important; }
.color-6c3 { color:#6c3 !important; }
.color-6c6 { color:#6c6 !important; }
.color-6c9 { color:#6c9 !important; }
.color-6cc { color:#6cc !important; }
.color-6cf { color:#6cf !important; }
.color-6f0 { color:#6f0 !important; }
.color-6f3 { color:#6f3 !important; }
.color-6f6 { color:#6f6 !important; }
.color-6f9 { color:#6f9 !important; }
.color-6fc { color:#6fc !important; }
.color-6ff { color:#6ff !important; }

.color-900 { color:#900 !important; }
.color-903 { color:#903 !important; }
.color-906 { color:#906 !important; }
.color-909 { color:#909 !important; }
.color-90c { color:#90c !important; }
.color-90f { color:#90f !important; }
.color-930 { color:#930 !important; }
.color-933 { color:#933 !important; }
.color-936 { color:#936 !important; }
.color-939 { color:#939 !important; }
.color-93c { color:#93c !important; }
.color-93f { color:#93f !important; }
.color-960 { color:#960 !important; }
.color-963 { color:#963 !important; }
.color-966 { color:#966 !important; }
.color-969 { color:#969 !important; }
.color-96c { color:#96c !important; }
.color-96f { color:#96f !important; }
.color-990 { color:#990 !important; }
.color-993 { color:#993 !important; }
.color-996 { color:#996 !important; }
.color-999 { color:#999 !important; }
.color-99c { color:#99c !important; }
.color-99f { color:#99f !important; }
.color-9c0 { color:#9c0 !important; }
.color-9c3 { color:#9c3 !important; }
.color-9c6 { color:#9c6 !important; }
.color-9c9 { color:#9c9 !important; }
.color-9cc { color:#9cc !important; }
.color-9cf { color:#9cf !important; }
.color-9f0 { color:#9f0 !important; }
.color-9f3 { color:#9f3 !important; }
.color-9f6 { color:#9f6 !important; }
.color-9f9 { color:#9f9 !important; }
.color-9fc { color:#9fc !important; }
.color-9ff { color:#9ff !important; }

.color-c00 { color:#c00 !important; }
.color-c03 { color:#c03 !important; }
.color-c06 { color:#c06 !important; }
.color-c09 { color:#c09 !important; }
.color-c0c { color:#c0c !important; }
.color-c0f { color:#c0f !important; }
.color-c30 { color:#c30 !important; }
.color-c33 { color:#c33 !important; }
.color-c36 { color:#c36 !important; }
.color-c39 { color:#c39 !important; }
.color-c3c { color:#c3c !important; }
.color-c3f { color:#c3f !important; }
.color-c60 { color:#c60 !important; }
.color-c63 { color:#c63 !important; }
.color-c66 { color:#c66 !important; }
.color-c69 { color:#c69 !important; }
.color-c6c { color:#c6c !important; }
.color-c6f { color:#c6f !important; }
.color-c90 { color:#c90 !important; }
.color-c93 { color:#c93 !important; }
.color-c96 { color:#c96 !important; }
.color-c99 { color:#c99 !important; }
.color-c9c { color:#c9c !important; }
.color-c9f { color:#c9f !important; }
.color-cc0 { color:#cc0 !important; }
.color-cc3 { color:#cc3 !important; }
.color-cc6 { color:#cc6 !important; }
.color-cc9 { color:#cc9 !important; }
.color-ccc { color:#ccc !important; }
.color-ccf { color:#ccf !important; }
.color-cf0 { color:#cf0 !important; }
.color-cf3 { color:#cf3 !important; }
.color-cf6 { color:#cf6 !important; }
.color-cf9 { color:#cf9 !important; }
.color-cfc { color:#cfc !important; }
.color-cff { color:#cff !important; }

.color-f00 { color:#f00 !important; }
.color-f03 { color:#f03 !important; }
.color-f06 { color:#f06 !important; }
.color-f09 { color:#f09 !important; }
.color-f0c { color:#f0c !important; }
.color-f0f { color:#f0f !important; }
.color-f30 { color:#f30 !important; }
.color-f33 { color:#f33 !important; }
.color-f36 { color:#f36 !important; }
.color-f39 { color:#f39 !important; }
.color-f3c { color:#f3c !important; }
.color-f3f { color:#f3f !important; }
.color-f60 { color:#f60 !important; }
.color-f63 { color:#f63 !important; }
.color-f66 { color:#f66 !important; }
.color-f69 { color:#f69 !important; }
.color-f6c { color:#f6c !important; }
.color-f6f { color:#f6f !important; }
.color-f90 { color:#f90 !important; }
.color-f93 { color:#f93 !important; }
.color-f96 { color:#f96 !important; }
.color-f99 { color:#f99 !important; }
.color-f9c { color:#f9c !important; }
.color-f9f { color:#f9f !important; }
.color-fc0 { color:#fc0 !important; }
.color-fc3 { color:#fc3 !important; }
.color-fc6 { color:#fc6 !important; }
.color-fc9 { color:#fc9 !important; }
.color-fcc { color:#fcc !important; }
.color-fcf { color:#fcf !important; }
.color-ff0 { color:#ff0 !important; }
.color-ff3 { color:#ff3 !important; }
.color-ff6 { color:#ff6 !important; }
.color-ff9 { color:#ff9 !important; }
.color-ffc { color:#ffc !important; }
.color-fff { color:#fff !important; }

.color-a00 { color:#a00 !important; }
.color-0a0 { color:#0a0 !important; }
.color-00a { color:#00a !important; }
.color-aa0 { color:#aa0 !important; }
.color-0aa { color:#0aa !important; }
.color-a0a { color:#a0a !important; }
.color-aaa { color:#aaa !important; }

.color-e00 { color:#e00 !important; }
/*.font-ccc { color:#ccc !important; }
.font-cc0 { color:#cc0 !important; }
.font-c0c { color:#c0c !important; }
.font-c00 { color:#c00 !important; }
.font-0cc { color:#0cc !important; }
.font-0c0 { color:#0c0 !important; }
.font-00c { color:#00c !important; }
.font-999 { color:#999 !important; }
.font-990 { color:#990 !important; }
.font-909 { color:#909 !important; }
.font-900 { color:#900 !important; }
.font-099 { color:#099 !important; }
.font-090 { color:#090 !important; }
.font-009 { color:#009 !important; }*/

.none { display:none; }
.background-none { background:none !important; }

/*訊息盒*/
.desc { padding:30px 20px; position:relative; background:#c4e6f4; border:1px solid #c4e6f4; border-radius:25px 0px 25px 0px; }
.desc .btnmain { margin-right:15px; }
.desc .btnmain:last-child { margin-right:0; }

.error { color:#e00; font-weight:bold; font-size:1.1em; }

/* ===================================================================================================================
	目前頁面導覽
=================================================================================================================== */
.page-title-link { margin-bottom:30px; font-size:1.15em; }
.page-title-link li { display:inline; position:relative; }
.page-title-link li span { margin:0 0 0 11px; }
.page-title-link li a { margin:0 0 0 11px; }
.page-title-link li:nth-child(1) a { margin-left:0; }
.page-title-link li a:hover {  }
.page-title-link li::after { background:#fcbf02; bottom:5px; content:""; height:2px; margin-left:2px; position:absolute; width:12px; }
.page-title-link li:last-child::after { content:""; width:0; height:0; }




/* ===================================================================================================================
	按鈕
=================================================================================================================== */
.btnfile, a.btnfile {
    font-size: 0.85rem;
    cursor: pointer;
    padding: 2px 2px;
}

.btn-light { padding:8px 25px; font-size:20px; font-weight:bold; color:#fff; background:#207bb3; border-radius:10px 0 10px 0; white-space:nowrap; }
.btn-light:hover, .btn-light:focus { color:rgba(255, 255, 255); background:#2767ad; }

.btn-topic a { padding:5px 10px; display:inline-block; white-space:nowrap; font-size:18px; font-weight:bold; color:#fff; background:#207bb3; border-radius:10px 0; }
.btn-topic a:hover, .btn-topic a:focus { color:rgba(255, 255, 255); background:#2767ad; border-radius:0 10px; }

.button-big, a.button-big, .button-big2, a.button-big2, .button-small, a.button-small {
	display:inline-block;
	font-weight:bold;
	color:#fff;
	white-space:nowrap;
	text-shadow:1px 1px 1px #000;
	border:2px solid #fff;
	border-radius:5px;
	box-shadow:0 0 3px #222;
	cursor:pointer;
	position:relative;
	/*z-index:2;*/
}

.button-big,   a.button-big   { padding:5px 8px; font-size:1.1rem; }
.button-big2,  a.button-big2  { padding:5px 8px; font-size:1.1rem; }
.button-small, a.button-small { padding:2px 5px; font-size:1.0rem; }

.button-big:hover, .button-big2:hover, .button-small:hover, a.button-big:hover, a.button-big2:hover, a.button-small:hover { color:#ff0; box-shadow:1px 1px 5px #333; }

.post_img, .reply_img, .edit_img { background:#1b659c; }

.delete_img { background:#cd1d1d; }

.submit,
.reset,
.cancel,
.edit,
.del,
.change,
.faq,
.add,
.view,
.updata,
.buy,
.buy_over,
.bid_now,
.buy_now, .mark_now, .unmark_now, /*定價展售用*/
.qna,
.move,
.manager,
.mark {
	display:inline-block;
	padding:5px 8px;
	margin-top:5px;
	margin-bottom:5px;
	margin-right:10px;
	font-weight:bold;
	font-size:1.1rem;
	color:#fff;
	white-space:nowrap;
	text-shadow:1px 1px 1px #000;
	border:2px solid #fff;
	border-radius:5px;
	box-shadow:0 0 2px #555;
	cursor:pointer;
	position:relative;
	/*z-index:2;*/
}

.bid_now, .buy_now, .mark_now, .unmark_now { cursor:not-allowed; }

.edit, .del, .move, .manager, .mark {
	padding:2px 5px;
	margin-right:4px;
	font-size:1rem;
}

.submit:hover,
.reset:hover,
.cancel:hover,
.edit:hover,
.del:hover,
.change:hover,
.faq:hover,
.add:hover,
.view:hover,
.updata:hover,
.buy:hover,
.buy_over:hover,
.bid_now:hover,
.buy_now:hover, .mark_now:hover, .unmark_now:hover, /*定價展售用*/
.qna:hover,
.move:hover,
.manager:hover,
.mark:hover { color:#ff0; box-shadow:1px 1px 5px #333; }

a.submit, a.reset, a.cancel, a.edit, a.del, a.change, a.faq, a.add, a.view, a.buy, a.qna, a.move, a.manager, a.mark { color:#fff; }

.submit    { background:#072; }
.reset     { background:#853; }
.cancel    { background:#888; }
.edit      { background:#909; }
.del       { background:#c00; }
.faq       { background:#c0c; }
.add       { background:#00c; }
.move      { background:#080; }
.manager   { background:#059; }
.mark      { background:#853; }
.updata    { background:#e60; }

.qna       { background:#099; padding: 5px  8px; margin:5px; }
.view      { background:#072; padding:10px 15px; margin:5px; }
.buy       { background:#c00; padding:10px 15px; margin:5px; }
.buy_over  { background:#aaa; padding:10px 15px; margin:5px; cursor:not-allowed; }
.bid_now   { background:#888; padding: 8px 15px; margin:5px; font-size:1.15rem; }
.buy_now, .mark_now, .unmark_now   { background:#888; padding: 8px 15px; margin:5px; font-size:1.15rem; } /*定價展售用*/

.bid-poppup .submit, .bid-poppup .add { padding:6px 10px; margin:5px; }
.buy-poppup .submit, .buy-poppup .add { padding:6px 10px; margin:5px; } /*定價展售用*/

.button-072 { background:#072 !important; }
.button-853 { background:#853 !important; }
.button-888 { background:#888 !important; }
.button-909 { background:#909 !important; }
.button-c00 { background:#c00 !important; }
.button-c0c { background:#c0c !important; }
.button-00c { background:#00c !important; }
.button-080 { background:#080 !important; }
.button-059 { background:#059 !important; }
.button-099 { background:#099 !important; }
.button-f60 { background:#f60 !important; }

/* ===================================================================================================================
	index 首頁使用
=================================================================================================================== */
.block-item { margin-bottom:2.5rem; border-radius:0.25rem; }
.block-item-box { padding:1rem; box-shadow:0 0 8px #ddd; }

.block_title { padding-bottom:0.25rem; margin-bottom:0.25rem; border-radius:0.25em 0.25em 0 0; border-bottom:3px solid #068989; }
.more        { padding-top:0.5rem; margin-top:0.5rem; text-align:right; border-top:1px dotted #ddd; }

.block_body   { word-wrap:break-word; word-break:break-all; border-radius:0.25em; }
.block_body.radius0  { border-top-left-radius:0; border-top-right-radius:0; }

.block_body .about-item { margin-top:1rem; margin-bottom:1rem; background:#fff; box-shadow: 0 0 3px rgb(0 0 0 / 50%); border-radius:5px; }

.block_body .topic-item { margin-top:1rem; margin-bottom:1rem; background:#fff; box-shadow:0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%); }

.pic-item { border-bottom:4px solid #068989; }
.text-item { /*border-left:5px solid #068989;*/ }

.block-item .img-thumbnail { padding:0 !important; border:0 !important; }
.topic-item .img-thumbnail {
	border:0;
	border-bottom:1px solid #fff;
	padding:0 !important;
	border-radius:0;
}


.body_flex       { display:flex; flex-wrap:wrap; justify-content: flex-end; align-items:center; }
.body_flex-left  { width:calc(100% - 150px - 1rem); }
.body_flex-right { width:150px; margin-left:1rem; }

.block_body .topic_title, .block_body .topic_text { display:-webkit-box; /*-webkit-box-orient:vertical;*/ overflow:hidden; }
.block_body .topic_title { -webkit-line-clamp:2; } /*主題行數*/
.block_body .topic_text { -webkit-line-clamp:5; } /*文章行數*/

.forum-iframe { overflow-y:hidden; overflow-x:hidden; }
.forum-iframe:hover, .forum-iframe:focus { overflow-y:auto; }
.forum-iframe::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0); background-color:#eaf9fb; } /*捲軸底色*/
.forum-iframe::-webkit-scrollbar { width: 6px; } /*捲軸寬度*/
.forum-iframe::-webkit-scrollbar-thumb { background-color:#47bdd6; } /*捲軸本體顏色*/

.index_auction_block h5, .index_commerce_block h5 { font-size:1.1rem; }
.index_auction_block h5 .coco, .index_commerce_block h5 .coco { font-size:1.15rem; }
.index_auction_block p, .index_commerce_block p { margin-bottom:0.5rem; }
.index_auction_block .sub_title, .index_commerce_block .sub_title { font-size:1.05rem; color:#52979c; }
.index_auction_block .coco, .index_commerce_block .coco { font-size:1.05rem; color:#c00; letter-spacing:1px; }

hr.hr-dotted, .hr-dotted {
    border: 0;
    height: 0;
    margin-top: 15px;
    margin-bottom: 15px;
    border-bottom: dotted 1px #eee;
}





/* ===================================================================================================================
	ICON 文字
=================================================================================================================== */
.row-fluid .fa-lg   { position:relative; font-size:1.35em; top:32px; left:5px; }
.row-fluid label    { position:relative; left:40px; padding:3px 0; }
.fa-user            { color:#16c; } /*帳號*/
.fa-key             { color:#c22; } /*密碼*/
.fa-id-card         { color:#e50; } /*姓名*/
.fa-map-marker-alt  { color:#33f; } /*地址*/
.fa-mobile-alt      { color:#909; } /*手機*/
.fa-line            { color:#3c0; } /*LINE*/
.fa-question-circle { color:#c00; } /*問號*/
.fa-facebook-square { color:#37a; } /*FB*/
.fa-house-chimney   { color:#e70; } /*網站*/
.fa-circle-user     { color:#940; } /*暱稱*/
.fa-birthday-cake   { color:#c1c; } /*生日*/
.fa-trash-alt       { color:#c00; } /*垃圾桶*/
.fa-envelope        { color:#199; } /*Email*/
.fa-comment-dots    { color:#a18; } /*私訊*/
.fa-restroom        { color:#2ac; font-size:1.3em !important; } /*性別*/

.show_pass { color:#666; position:relative; left:calc(100% - 60px); top:32px; /*z-index:2;*/ cursor:pointer; } /*檢視密碼*/

.row-fluid input.form-control { padding-left:35px; padding-right:12px; color:#000; }

.avast-pam-login, .avast-pam-pass_gen { display:none !important; opacity:0 !important; } /*清除火狐瀏覽器+Avast登入及密碼框key提示*/



ul.ucp-menu, ul.ucp-menu > li, ul.mcp-menu, ul.mcp-menu > li { position:relative; }

ul.ucp-menu ul, ul.mcp-menu ul {
	display:none;
	min-width:220px;
	margin-top:10px;
	position:absolute;
	left:calc(50% - 110px);
	z-index:1;
}

ul.ucp-menu ul li, ul.mcp-menu ul li {
    padding: 10px 0;
	margin-top: -1px;
    font-weight: bold;
    font-size: 1.1em;
    color: #212;
	background: #f5f9fd;
	background: linear-gradient(to right, #d0e5f9, #f5f9fd, #d0e5f9);
	border: 1px solid #b3cce4;
}

ul.ucp-menu ul li a, ul.mcp-menu ul li a { display: block; }





/* ===================================================================================================================
	發文、PM、刊登商品之 BBCode按鈕
=================================================================================================================== */
.bbcode-line {
	width:0;
	height:24px;
	margin-right:2px;
	display:inline-block;
	vertical-align:-6px;
	border-left:1px #aaa dotted;
}

.btnbbcode {
	min-width:30px;
	padding:5px;
	margin:0 0 5px -2px;
	color:#333;
	text-align:center;
	box-shadow:0 0 1px #487688;
	background:#fff;
	border:solid 1px #79c2e3;
	white-space:nowrap;
	border-radius:3px;
	cursor:pointer;
	font-family: "FontAwesome";
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: var(--fa-display, inline-block);
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-rendering: auto;
	font-size: 0.875em;
	vertical-align: 0.05357em;
}

.btnbbcode:hover { background:#fffac8; }

.btnbbcode.b-B::before		   { content: "\f032"; }
.btnbbcode.b-I::before		   { content: "\f033"; }
.btnbbcode.b-U::before		   { content: "\f0cd"; }
.btnbbcode.b-Quote::before	   { content: "\f10e"; color:#709; }
.btnbbcode.b-Pre::before	   { content: "\f08d"; color:#d30; }
.btnbbcode.b-Code::before	   { content: "\f121"; color:#08b; }
.btnbbcode.b-List::before	   { content: "\f0ca"; color:#600; }
.btnbbcode.b-List1::before	   { content: "\f0cb"; color:#600; }
.btnbbcode.b-li::before		   { content: "\f069"; color:#600; }
.btnbbcode.b-Img::before	   { content: "\f03e"; color:#090; }
.btnbbcode.b-Url::before	   { content: "\f0c1"; color:#00c; }
.btnbbcode.b-YouTube::before   { content: "\f16a"; color:#c00; }
.btnbbcode.b-fontsize::before  { content: "\f25c"; }
.btnbbcode.b-fontcolor::before { content: "\f576"; color:#c0c; }
.btnbbcode.b-highlight::before { content: "\f5aa"; color:#f60; }
.btnbbcode.b-Center::before, .btnbbcode.b-center::before { content: "\f037"; }
.btnbbcode.b-Hr::before,     .btnbbcode.b-hr::before     { content: "\f068"; }
.btnbbcode.b-Right::before,  .btnbbcode.b-right::before  { content: "\f038"; }
.btnbbcode.b-Hidden::before, .btnbbcode.b-hidden::before { content: "\f070"; color:#888; }

.b-fontsize { position:relative; }
.bbcode-fontsize-box { background:#fff; display:none; position:absolute; top:-8px; left:30px; font-size:1rem; font-family:'Source Han Sans', '微軟正黑體', sans-serif; text-align:left; border:1px solid #ccc; box-shadow:#888 0 0 3px; }
.bbcode-fontsize-box li { padding:3px 5px; display:inline-block; }
.bbcode-fontsize-box li:hover { background:#eee; }

.bbcode-color-box { display:none; }


#helpline { padding:2px; margin:2px 0 5px 0; position:relative; font-weight:bold; font-size:1rem; }

#helpline kbd { display:block; padding:2px; margin:2px 0 5px 0; position:absolute; font-weight:normal; font-size:0.95em; white-space:nowrap; }

#helpline kbd > span      { color:#0ff; }
#helpline kbd > span span { color:#f00; }





/* ===================================================================================================================
	發文、PM、刊登商品之 YouTube 自動縮放
=================================================================================================================== */
.block_body iframe { width:100%; }

.videobox {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
}

.videobox iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}