@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('../../index/fonts/Pigeon-font-Regul.ttf');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

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

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

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






/*form             { margin:0px; display:inline }
textarea         { padding:2px; font-size:16px; resize: none; border:1px solid #aaa; background:#fafafa; border-radius:3px }*/
/*input            { display:inline; padding:5px; font-size:16px; border:1px solid #aaa; background:#fafafa; border-radius:3px }*/
/*input[type=file] { font-size:13px; width:60%; cursor:pointer; padding:2px; background:#fff; }
.on_block input[type=file] { width:50%; }*/
input.upper      { text-transform:uppercase; } /*自動轉換成大寫*/

input, select, textarea { padding:3px; font-size:16px; border:1px solid #aaa; border-radius:0.25rem; }

/*sub   { vertical-align:sub !important; font-size:70% !important; line-height: 0 !important; }*/ /*下標字*/
/*sup   { vertical-align:super !important; font-size:70% !important; line-height: 0 !important; }*/ /*上標字*/




/***** 按鈕 1 *****/
.submit,
.reset,
.cancel,
.add,
.edit,
.del,
.change,
.view,
.move,
.manager {
	padding:8px 8px;
	margin:0 5px;
	font-weight:bold;
	line-height: 1;
	color:#fff;
	border:2px solid #fff;
	border-radius:5px;
	box-shadow:0 0 2px #555;
	cursor:pointer;
	position:relative;
	text-shadow:0 0 3px #000;
	/*box-sizing: border-box;*/
	white-space: nowrap;
}

.submit:hover,
.reset:hover,
.cancel:hover,
.add:hover,
.edit:hover,
.del:hover,
.change:hover,
.view:hover,
.move:hover,
.manager:hover { color:#ff0; box-shadow:1px 1px 5px #333; }

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

.submit  { background:#072; }
.reset   { background:#853; }
.cancel  { background:#888; }
.add     { background:#00c; }
.edit    { background:#909; }
.del     { background:#c00; }
.change  { background:#c00; }
.view    { background:#072; }
.move    { background:#e80; }
.manager { background:#e80; }

.on_block button { border:0; cursor:pointer; }

/*.tr1 .edit, .tr1 .del, .tr1 .change, .tr1 .view, .tr1 .move, .tr2 .edit, .tr2 .del, .tr2 .change, .tr2 .view, .tr2 .move { margin:0 2px; }*/

.up-on,
.dw-on,
.up-off,
.dw-off,
.icon-edit,
.icon-del,
.icon-move,
.icon-reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25em;
	height: 1.25em;
	font-size:1rem;
	margin:0 1px;
	background:#fff;
	border-radius:50%;
	box-shadow:0 1px 2px #666;
	text-shadow:none;
	cursor:pointer;
}

.up-off, .dw-off { color:#bbb; cursor:not-allowed; }
.up-on, .dw-on   { color:#0af; }
.icon-edit       { color:#0b0; }
.icon-del        { color:#e00; }
.icon-move       { color:#f80; }
.icon-reset      { color:#2d1; }

.border0 { border:0; background:none; }

.img-SEX1 { color:#00e; font-style:normal; font-weight:bold; } /*公*/
.img-SEX2 { color:#e00; font-style:normal; font-weight:bold; } /*母*/

.item .img-SEX1, .item .img-SEX2 { text-shadow:-1px 1px 1px #fff; }
/***** 按鈕 0 *****/





.avatar      { width:100%; }


/* ---------- left ----------- */
.left_block { height: 100%; padding:10px; border-radius:0.8rem; background: #eee; overflow: hidden; word-wrap:break-word; word-break:break-all; }
.left_menu  { margin-bottom:2rem; }
.left_menu:last-child  { margin-bottom:0; }
.sub_title  { padding:0.5rem; font-weight: bold; font-size:1.15rem; color:#fff; text-align:center; text-shadow:0 0 3px #000; border-radius:0.5rem 0.5rem 0 0; }
.sub_body, .pigeon_body  { font-size:1.05rem; background:#fff; border:1px #ccc solid; border-radius:0 0 0.5rem 0.5rem; }

.sub_body li, .pigeon_body li { padding:10px; border-bottom:1px #ccc dotted; }
.sub_body a:last-child li, .pigeon_body a:last-child li { border-bottom:0; }
.sub_body li:hover, .pigeon_body li:hover { background: #ffe; }
.sub_body a:last-child li:hover, .pigeon_body a:last-child li:hover { background: #ffe; border-radius:0 0 0.5rem 0.5rem; }

.hr_ball { height:0; margin:8px 0; border-bottom:1px #ccc dotted; }

.error { color:#d00; font-weight:bold; }


td.f-td { color:#000099; padding:5px; text-align:left }
td.m-td { color:#aa0000; padding:5px; text-align:left }

/*文字行數*/
.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; }



/*********** pigeon list *************/
.pigeon-shadow {
    padding: 1rem;
    margin-bottom: 1.5rem;
	text-align:center;
    background: #fff;
    box-shadow: 0 0 5px #ccc;
    border-radius: 0.25rem;
}

.pigeon-shadow .title { padding:5px; margin:5px 0; background:#6e759f; font-size:1.1rem; color:#fff; text-shadow:1px 1px 2px #000; }

.pigeon-shadow img { max-width:100%; }

.pigeon-shadow .img-SEX1, .pigeon-shadow .img-SEX2 { color:#fff; }





/************* add box **************/
.action_block { padding:20px 0; margin:15px 0; text-align:center; background:#fff4f7; border-bottom:solid 1px #ccc; }

/*
.hidden_block           { display:none; font-size:16px; }
.on_block td            { padding:5px; border:1px solid #ccc; vertical-align:middle; }
.hidden_block td.title  { text-align:center; background:#366130; color:#fff; line-height:150%; }
.hidden_block td.body   { background:#cfe6cc }
.hidden_block td.title1 { text-align:center; background:#2b3166; color:#fff; line-height:150%; }
.hidden_block td.body1  { background:#e2e4f3 }
**/

/*.edit_show img:hover { max-width:120px; }
.edit_pic_block a {  float:right; }*/





.pic_text { margin-bottom:1rem; font-size:1.1rem; text-align:left; }

/*.score_title1 { background:#fcddfd; }
.score_title2 { background:#ddeffd; }*/
.score_body1  { background:#ffefff; }
.score_body2  { background:#effbfe; }





/** ------- 管理表格 --------- **/
.adm      { font-size:16px }
.adm th   { padding:5px; border:solid 1px #aeb7aa; background:#4267b2; font-weight:bold; color:#fff; text-align:center; }
.adm td   { padding:5px; border:solid 1px #aeb7aa; vertical-align:middle; }
.adm .tr1 { background:#f0fdf1; }
.adm .tr2 { background:#eaf0fd; }
.adm .tr1:hover, .adm .tr2:hover { background:#ffffb9; }

.adm tr .title { padding:8px; background:#295f30; text-align:center; color:#fff }
.adm tr .body  { padding:8px; background:#cbefcf; line-height:80%; }



/* ======================================
	自適應表格設定
=================================================================================================================== */
.rwd-table { width:100%; background:#fff; overflow:hidden; }

.rwd-table tr:nth-of-type(2n)   { background:#f0fdf1; }
.rwd-table tr:nth-of-type(2n+1) { background:#eaf0fd; }

.rwd-table th { font-weight:bold; color:#fff; text-align:center; background:#4267b2; text-shadow:1px 1px 2px #000; }
.rwd-table th, .rwd-table td { display:table-cell; padding:0.5rem 0.25rem; border:1px #ccc solid; }

.rwd-table .data-th { display:none; }

.action-block { width:100%; }
.action-block .row { margin:0; }
.action-block .row > [class*=col-] { padding:0; margin:1px 0; text-align:center; }







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

html, body {
	font-family:'Pigeon-font', 'Source Han Sans', '微軟正黑體', sans-serif;
}

.wrapper {
	position:relative;
	overflow:hidden;
}

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

main {
	padding:15px;
	border-radius:0.5rem;
}


footer  { position:relative; overflow:hidden; }

.copyright { padding:20px; margin-top:15px; color:#fff; line-height:2; box-shadow:0 3px 5px #888; text-shadow:1px 1px 2px #000; }

.system  { font-size:0.95rem; }

footer a  { color:#fff; }



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; }
button { margin:0px; padding:0px; border:0; background: inherit; }

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

input[type=file] { padding:1px; font-size:0.85rem; }
.form-control, .form-select { padding:0.15rem 0.25rem !important; }

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

/** ------- 頁面配色1 --------- **/
.BG_0057a4 { background:#0057a4; } /*配色__藍*/
.BG_b1001b { background:#b1001b; } /*配色__紅*/
.BG_00ab2b { background:#00ab2b; } /*配色__綠*/
.BG_db6700 { background:#db6700; } /*配色__橘*/
.BG_00999e { background:#00999e; } /*配色__青*/
.BG_7400ad { background:#7400ad; } /*配色__紫*/
.BG_662401 { background:#662401; } /*配色__褐*/
.BG_927d07 { background:#927d07; } /*配色__土*/
.BG_a6bb00 { background:#a6bb00; } /*配色__金*/
.BG_4f4f4f { background:#4f4f4f; } /*配色__黑*/
/** ------- 頁面配色0 --------- **/

#loft_banner {
	padding:15px 20px;
	margin-bottom:20px;
	box-shadow:0 5px 10px #666;
}

#loft_banner.BG_0057a4 { border:solid 2px #36b2e8; }
#loft_banner.BG_b1001b { border:solid 2px #e20d61; }
#loft_banner.BG_00ab2b { border:solid 2px #0ce210; }
#loft_banner.BG_db6700 { border:solid 2px #f49100; }
#loft_banner.BG_00999e { border:solid 2px #0ce2af; }
#loft_banner.BG_7400ad { border:solid 2px #ea51fb; }
#loft_banner.BG_662401 { border:solid 2px #ce1d09; }
#loft_banner.BG_927d07 { border:solid 2px #c07b14; }
#loft_banner.BG_a6bb00 { border:solid 2px #e2c20d; }
#loft_banner.BG_4f4f4f { border:solid 2px #aaaaaa; }

.banner_block { min-height:200px; position:relative; overflow:hidden; padding:5px; background:#fff; box-shadow:0 3px 10px #000; border-radius:5px; }
.banner_block img { width:100%; border-radius:5px; }
.banner_block span { position:absolute; left: 20px; font-size:calc(1.5rem + 1vw); color:#ff0; text-shadow:1px 1px 3px #000; }



/***** 主選單 1 *****/
.main-menu {
	height:40px;
	position:relative;
	z-index:1;
}

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

/*選單-第一層*/
.main-menu-list > li {
	display:block;
	position:relative;
	padding:0;
    float: left;
    color: #fff;
    line-height: 40px;
    font-weight: bold;
    font-size: 1.2rem;
    border-right: 1px solid #eee;
}

.main-menu-list > li.adm {
	float:right;
	border-left:1px solid #eee;
	border-right:0;
}

.main-menu-list li:hover { background:#ff702b; }

.main-menu-list a { display:block; padding: 0 15px; color:#fff; text-shadow:1px 1px 2px #000; }


/*選單-第一層滑鼠移過秀出第二層 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 {
	position:absolute;
	white-space:nowrap;
	top:40px;
	right:0;
	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 { position:relative; }
.main-menu-list ul > li a { display:block; padding:3px 15px; font-weight:bold; color:#fff; border-top:1px solid #b3cce4; }
.main-menu-list ul > li:hover { background:#fd6802; }



/*選單-第二層滑鼠移過秀出第三層 ul 區塊*/
.main-menu-list > li > ul > 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 > li > ul {
	position:absolute;
	white-space:nowrap;
	top:0;
	right:100%;
	background:#3475b6;
	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);
}



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

.menu-trigger-icon {
	height:34px;
	line-height:34px;
	position:relative;
	color:#c00;
	text-align:center;
	background:#fff;
	border-radius:3px;
	overflow:hidden;
}

/*.menu-trigger-txt { margin-top:4px; font-size:15px; color:#fff; 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:#fefffb;
	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; color:#000; }
.mobile-menu-list li a { display:block; padding:10px 0.5rem; position:relative; font-size:20px; color:#000; border-bottom:1px solid #ccc; }
.mobile-menu-list li a:hover { color:#e00; }


/*第一層*/
.mobile-menu-list > li > a { font-weight:bold; }
.mobile-menu-list > li:first-child a { border-top:1px solid #ccc; }

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

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

/*第三層*/
.mobile-menu-list ul ul li a { padding-left:1.5rem; }


/*第四層*/
.mobile-menu-list ul ul ul li a { padding-left:2rem; }


/*第一層有下層點開之後變化*/
.mobile-menu-list > li.current { background:#f0fdf1; }
.mobile-menu-list > li.current > a { background:#d2f9d4; color:#c00 !important; }
.mobile-menu-list > li.current a { border-bottom:1px solid #ccc; }
.mobile-menu-list > li.current > a .submenu-button:before { border-right-color:#888; border-bottom-color:#888;  }

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



/*關閉選單按鈕*/
.menu-close-trigger { display:flex; align-items:center; justify-content:center; color:#e00; }

.close-trigger-icon {
	position:relative;
	height:30px;
	margin-right:50px;
}
.close-trigger-icon:before, .close-trigger-icon:after {
	width:3px;
	height:100%;
	position:absolute;
	left:30px;
	top:0;
	content:"";
	background:#e00;
}
.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);
}



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

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

/*滑鼠移入動畫*/
.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);
}



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

/*滑鼠移入動畫*/
.main-menu-list > li > ul > li:hover .submenu-left {
	-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);
}




/* ===================================================================================================================
	04. 回頂端按紐
=================================================================================================================== */
#scrolltop {
	display:none;
	padding:8px;
	line-height:0;
	position:fixed;
	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); }
}





/*主內容外陰影*/
.box-shadow_0057a4 { box-shadow:0 3px 10px #0057a4; }
.box-shadow_b1001b { box-shadow:0 3px 10px #b1001b; }
.box-shadow_00ab2b { box-shadow:0 3px 10px #00ab2b; }
.box-shadow_db6700 { box-shadow:0 3px 10px #db6700; }
.box-shadow_00999e { box-shadow:0 3px 10px #00999e; }
.box-shadow_7400ad { box-shadow:0 3px 10px #7400ad; }
.box-shadow_662401 { box-shadow:0 3px 10px #662401; }
.box-shadow_927d07 { box-shadow:0 3px 10px #927d07; }
.box-shadow_a6bb00 { box-shadow:0 3px 10px #a6bb00; }
.box-shadow_4f4f4f { box-shadow:0 3px 10px #4f4f4f; }

/*主內容切割*/
.page-flex       { display: flex; flex-wrap: wrap; padding:10px 0; }
.page-flex-left  { order: 1; width: 260px; margin-right: 1.5rem; }
.page-flex-right { order: 2; width: calc(100% - 260px - 1.5rem); }


/*大標題*/
.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;
}





.loft_about   { font-size:1.1rem; word-wrap:break-word; word-break:break-all; }
.loft_about * { max-width:100% !important; }

.loft_about .bb_table { width:100%; background: #fcfcfc; }
.loft_about .bb_table td { height:25px; border:1px solid #ccc; padding:3px; }
/* ===================================================================================================================
	發文、PM、刊登商品之 YouTube 自動縮放
=================================================================================================================== */
.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%;
}

/*訊息盒*/
.desc { padding:30px 20px; position:relative; background:#c4e6f4; border-radius:25px 0px 25px 0px; }

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





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

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



.bg1 { background:#f0fdf1; }
.bg2 { background:#eaf0fd; }
.bg1:hover, .bg2:hover { background:#ffffb9; }

/* ===================================================================================================================
	popup 視窗
=================================================================================================================== */
.pop-box { position:relative; }

 .add-pop,
 .edit-pop,
 .del-pop {
	max-width:100%;
	display:none;
	background:#f5f5f5;
	position:absolute;
	top:1rem;
	/*left:calc(50% - 500px);*/
	left:0;
	z-index:2;
 }

 .pop-block {
	padding:2px;
	border:1px solid #278;
	border-radius:5px;
	box-shadow:2px 2px 10px #278;
 }

 .pop-title {
	padding:8px 0;
	background:#278;
	font:bold 1.2rem 'Source Han Sans';
	color:#ff0;
	text-align:center;
	letter-spacing:3px;
	border-radius:5px;
	text-shadow:2px 2px 2px #000;
 }

 .pop-body { background:#fffcf7; }
 .pop-button { padding:5px 0; background:#eff; text-align:center; border-radius:5px; }


 .ok-pop     { display:none; position:absolute; top:1rem; background:#f5f5f5; z-index:2; color:#601; }
 .ok-message { font-weight:bold; font-size:1.2rem; color:#909; text-align:center; }

.ajax_error  { display:none; padding-bottom:0.5rem; margin-top:-1rem; text-align:center; font-weight:bold; font-size:1.1rem; color:#c00; }

 .pop-close {
	display:block;
	width:30px;
	height:20px;
	background:linear-gradient(#ea7171, #ea7171, #ec4242, #ec4242, #6b1416);
	border:0;
	border:solid 1px #fff;
	box-shadow:1px 1px 3px #000;
	position:absolute;
	top:12px;
	right:10px;
	cursor:pointer;
 }
 .pop-close:before {
	width: 43%;
	position: absolute;
	height: 3px;
	background: #fff;
	content: "";
	top: 7px;
	right: 7px;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
 }
 .pop-close:after {
	width: 43%;
	position: absolute;
	height: 3px;
	background: #fff;
	content: "";
	top: 7px;
	left: 8px;
	transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-o-transform: rotate(135deg);
 }
 .pop-close:hover { background:linear-gradient(#ec4242, #ec4242, #ea7171, #ea7171, #6b1416); box-shadow:1px 1px 5px #000; }





/* ===================================================================================================================
	04. 建立種鴿頁面
=================================================================================================================== */
.accordion      { list-style:none; margin:0px 0px 0px; padding:0px; width:100%; }
.accordion > li .st ~ .holder { display:none; }
.accordion > li { display:block; list-style:none; width:100%; }
.accordion > li h6 {
	display:block;
	width:100%;
	padding:5px;
	margin:1px 0px 0px;
	font-weight:bold;
	font-size:1.2em;
	letter-spacing:10px;
	text-indent:10px;
	color:#ff0;
	text-shadow:1px 1px 2px #000;
	background:#2767ad;
	position:relative;
}

.accordion > li h6.st { cursor:pointer; }

.accordion .holder {
    padding: 0 0.75rem;
    margin: 0px;
    background: #ebf9fe;
    background: linear-gradient(to right, #ebf9fe, #eff9fe, #f5fbfe, #fafdfe, #f5fbfe, #eff9fe, #ebf9fe);
}

.accordion .title {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top:5px;
	padding-bottom:5px;
	margin:2px 0;
	font-weight:bold;
	font-size:1.05em;
	background:#c8dcf2;
}
.accordion .title1 { background:#c8dcf2; }
.accordion .title2 { background:#c8f2c8; }

.accordion .body { margin:2px 0; }
.accordion .row-hr { border-bottom:solid 1px #c8e8f0; }
.accordion .col-hr { margin:3px 0; border-bottom:1px dotted #ccc; }

/*
.pigeon_data td.title0, .pigeon_data td.title1, .pigeon_data td.title2 { font-weight:bold; font-size:1rem; color:#fff; text-align:center; text-shadow:1px 1px 3px #222; }
.pigeon_data td.title0 { background:#3da760; }
.pigeon_data td.body0  { background:#eef9f1; }
.pigeon_data td.title1 { background:#5584d0; }
.pigeon_data td.body1  { background:#edf2fa; }
.pigeon_data td.title2 { background:#ac54d1; }
.pigeon_data td.body2  { background:#f4eaf9; }
*/

/* ======================================================
	04. 建立種鴿頁面 圖片檢視放大鏡
====================================================== */
.cloudzoom { max-width:100%; }

/* CSS for lens */
.cloudzoom-lens {
    border:2px solid #888;
    width:30% !important;
    height:30% !important;
    box-shadow: 0 0 5px rgba(0,0,0,0.40);
    cursor:crosshair;
    z-index: 9999;
}
/* CSS for zoom window. */
.cloudzoom-zoom {
    border:1px solid #888;
	width:400px !important;
    max-width:100% !important;
    height:300px !important;
    max-height:80vh !important;
	background:#fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.40);
	z-index: 9999;
}
/* CSS for zoom window in 'inside' mode. */
.cloudzoom-zoom-inside {
    border:none;
    box-shadow:none;
	z-index: 9999;
}

/* CSS for captions */
.cloudzoom-caption {
    display:none;   /* CSS captions should be hidden initially */
    text-align: left;
    background-color:#000;
    color:#fff;
    font-weight:bold;
    padding:10px;
    font-family: sans-serif;
    font-size:12px;
}

.cloudzoom-blank .cloudzoom-lens ~ div { display:none !important; }
/****建立種鴿頁面 0 *****/