@charset "utf-8";

/*====================================================================
 導入字型
 ====================================================================*/

@font-face {
  font-family:'Pigeon-font';
  src:url('../font/Pigeon-font.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
  -webkit-font-smoothing: antialiased; /* for safari & chrome */
  -moz-osx-font-smoothing: grayscale; /* for firefox */
}

@font-face {
  font-family:'NotoSerifTC';
  src:url('../font/NotoSerifTC-Regular.otf') format('opentype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
  -webkit-font-smoothing: antialiased; /* for safari & chrome */
  -moz-osx-font-smoothing: grayscale; /* for firefox */
}

@font-face {
  font-family:'NotoSerifSC';
  src:url('../font/NotoSerifSC-Regular.otf') format('opentype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
  -webkit-font-smoothing: antialiased; /* for safari & chrome */
  -moz-osx-font-smoothing: grayscale; /* for firefox */
}

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

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

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

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



/*====================================================================
 css 歸零
 ====================================================================*/
html,
body,
div,
span,
applet,
object,
iframe,
h1, h2, h3, h4, h5, h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub, sup,
tt,
var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
}

body { line-height:1; }

ol, ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
	content:'';
	content:none;
}

:focus { outline:0; }

ins { text-decoration:none; }

del { text-decoration:line-through; }

table { border-collapse:collapse; }





/*====================================================================
 基本元件

 字體
 MingLiU 新細明體
 MingLiU-ExtB 細明體
 DFKai-SB 標楷體
 NSimSun 新宋體
 SimSun 宋體
 sans-serif 無襯線體
 ====================================================================*/
body {
	min-width:1240px;
	margin:0;
	font-family:'Pigeon-font', 'NotoSerifTC', 'NotoSerifSC', '新細明體', 'MingLiU', 'MingLiU-ExtB', 'DFKai-SB', 'NSimSun', 'SimSun', sans-serif;
	font-weight:normal;
	font-size:16px;
	color:#000;
	letter-spacing:0.03em;
	background:#ddd;
}

a       { color:#00c; text-decoration:none; }
a:hover { color:#f00; }

hr    { height:0; margin:10px auto; border:0; border-top:1px solid #ccc; }
table { border-spacing:0; }
td    { padding:5px; vertical-align:middle; }
th    { background:#d28b44; color:#fff; padding:8px; vertical-align:middle; }
img   { vertical-align:middle; border-width:0px; }

form { margin:0px; padding:0; display:inline; }

input.upper { text-transform:uppercase; } /*自動轉換成大寫*/
input[type=file] { cursor:pointer; }

input, textarea, select {
	padding:5px;
	border:0;
	resize:none;
	font-family:'Pigeon-font', 'NotoSerifTC', 'NotoSerifSC', '新細明體', 'MingLiU', 'MingLiU-ExtB', 'DFKai-SB', 'NSimSun', 'SimSun', sans-serif;
	font-weight:normal;
	font-size:1.03rem;
	line-height:1.15;
	color:#000;
	letter-spacing:0.03em;
	background:#fff;
}

select { padding-left:0; font-size:1rem; }
select.f_size13 { padding:5px 0; }

option { font-family:'Pigeon-font', 'NotoSerifTC', 'NotoSerifSC', '新細明體', 'MingLiU', 'MingLiU-ExtB', 'DFKai-SB', 'NSimSun', 'SimSun', sans-serif; }

/*== 欄位聚焦 ==*/
.outline       { border:0; outline:1px solid #ccc; border-radius:3px; }
.outline:hover { outline:1px solid #77b4ea; }
.outline:focus {
	outline:1px solid #1e74c1;
	box-shadow:inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 6px rgba(90, 150, 233, 1);
	-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 6px rgba(90, 150, 233, 1);
}






#din-wrapper { margin:0 10px; background:#fff; }

header { height:137px; }
nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }

#banner { height:100px; background:#157193 url('../images/banner.jpg') no-repeat; }
#banner div { padding:15px; color:#fff; text-align:right; font-size:2.3rem; letter-spacing:1px; line-height:1.15; }

#din-body { font-size:1.05rem; }

.flex-block { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }





/*====================================================================
 選單
 ====================================================================*/
.menu-left   { width:calc(100% - 160px); }
.menu-left a { float:left; }
.menu-right  { width:150px; margin-right:10px; text-align:right; }

.menu {
	height:35px;
	white-space:nowrap;
	border-top:1px solid #fff;
	border-bottom:1px solid #444;
	background:#f1895e;
	background:-webkit-gradient(linear, left top, left bottom, from(#f1895e), to(#dd551c));
	background:-webkit-linear-gradient(top, #f1895e, #dd551c, #f1895e);
	background:   -moz-linear-gradient(top, #f1895e, #dd551c, #f1895e);
	background:    -ms-linear-gradient(top, #f1895e, #dd551c, #f1895e);
	background:     -o-linear-gradient(top, #f1895e, #dd551c, #f1895e);
 	background:        linear-gradient(top, #f1895e, #dd551c, #f1895e);
}

.menu a {
	display:inline-block;
	width:80px;
	height:35px;
	font:bold 1.2em/35px 'Microsoft JhengHei';
	color:#fff;
	letter-spacing:3px;
	text-align:center;
	text-shadow:0 0 3px #000;
	border-left:1px solid #ff9f0f;
	border-right:1px solid #d27e00;
}

.menu a:hover {
	color:#ff0;
	background:#951195;
	background:-webkit-gradient(linear, left top, left bottom, from(#951195), to(#e954e9));
	background:-webkit-linear-gradient(top, #951195, #e954e9, #951195);
	background:   -moz-linear-gradient(top, #951195, #e954e9, #951195);
	background:    -ms-linear-gradient(top, #951195, #e954e9, #951195);
	background:     -o-linear-gradient(top, #951195, #e954e9, #951195);
	background:        linear-gradient(top, #951195, #e954e9, #951195);
}

.menu a.menu_on {
	color:#ff0;
	border-left:1px solid #6578e4;
	border-right:1px solid #2843d9;
	background:#115cb0;
	background:-webkit-gradient(linear, left top, left bottom, from(#115cb0), to(#4193ed));
	background:-webkit-linear-gradient(top, #115cb0, #4193ed, #115cb0);
	background:   -moz-linear-gradient(top, #115cb0, #4193ed, #115cb0);
	background:    -ms-linear-gradient(top, #115cb0, #4193ed, #115cb0);
	background:     -o-linear-gradient(top, #115cb0, #4193ed, #115cb0);
	background:        linear-gradient(top, #115cb0, #4193ed, #115cb0);
}

/*== 副選單 ==*/
.menu-list { display:flex; flex-wrap:wrap; text-align:center; }
.menu-list > li { position:relative; width:220px; padding:0; }
.menu-list li a { display:block; }

/*== 選單-第二、三之後 層 ==*/
.menu-list ul {
	position:absolute;
	z-index:5;
	width:180px;
	left:10px;
	visibility:hidden;
	opacity:0;
}

/*== 選單-第二、三之後 層 - 鼠標滑過 ul顯現 ==*/
.menu-list li:nth-child(1) ul { background:#2a6; }
.menu-list li:nth-child(2) ul { background:#0ae; }
.menu-list li:hover > ul {
	visibility:visible;
	opacity:1;
	text-shadow:1px 1px 2px #000;
}

.menu-list ul > li a { border-top:1px solid #eee; padding:10px 0; font:bold 18px 'Microsoft JhengHei', sans-serif; color:#fff; line-height:1.5; }
.menu-list ul > li a:hover { background:#bf66b5; color:#ff0; }





.table       { display:table; margin:0 auto; }
.td          { display:inline-block; vertical-align:middle; }
.center      { text-align:center !important; margin:0 auto !important; }
.left        { text-align:left !important; }
.right       { text-align:right !important; }
.float_left  { float:left; display:inline; }
.float_right { float:right; display:inline; }
.text_top    { vertical-align:top; }
.ps          { color:#888; font-size:13px; }
.bold        { font-weight:bold; }
.search_block .bold { color:#00f; }
.f_size12 { font-size:12px !important; }
.f_size13 { font-size:13px !important; }
.f_size15 { font-size:15px !important; }
.f_size16 { font-size:16px !important; }
.f_size17 { font-size:17px !important; }
.f_size18 { font-size:18px !important; }
.f_size19 { font-size:19px !important; }
.f_size20 { font-size:20px !important; }
.f_size21 { font-size:21px !important; }
.f_size22 { font-size:22px !important; }
.f_size23 { font-size:23px !important; }
.f_size24 { font-size:24px !important; }
.f_size25 { font-size:25px !important; }
.f_size26 { font-size:26px !important; }
.f_size27 { font-size:27px !important; }
.f_size28 { font-size:28px !important; }
.f_size29 { font-size:29px !important; }
.f_size30 { font-size:30px !important; }
.f_size31 { font-size:31px !important; }
.f_size32 { font-size:32px !important; }
.F        { color:#00d; }
.M        { color:#d00; }
.number   { font-weight:bold; letter-spacing:0.05em; white-space:nowrap; }

/***** 簡易資料 父母鴿牽引線 1 *****/
.g_arrow1 { margin-left:4px;  height:1px;   border-top:2px solid #000; }
.g_arrow2 { margin-right:4px; height:150px; border:2px solid #000; border-right:0; }
/***** 簡易資料 父母鴿牽引線 0 *****/





/*====================================================================
 訊息方塊
 ====================================================================*/
.message-block {
	width:600px;
	padding:3px;
	margin:20px auto;
	background:#fff;
	border:1px solid #4ad;
	border-radius:5px;
	box-shadow:5px 5px 10px #888;
	position:relative;
	z-index:2;
}
.message-title {
	padding:5px 0;
	background:#4ad;
	font:bold 1.3em 'Microsoft JhengHei';
	color:#ff0;
	text-align:center;
	text-shadow:1px 1px 2px #000;
	border-radius:5px 5px 0 0;
	position:relative;
	z-index:2;
}

.message-body {
	width:100%;
	padding:3px 0;
	line-height:2;
	color:#000;
	text-align:center;
}

.message-button {
	width:100%;
	padding:5px 0;
	background:#c9effc;
	text-align:center;
	border-radius:0 0 5px 5px;
	position:relative;
	z-index:2;
}





/*====================================================================
 表格方塊
 ====================================================================*/
.title1, .title2, .title3, .title4 { width:30%; padding:8px; border:1px solid #aaa; text-align:center; white-space:nowrap; }
.body1 , .body2 , .body3 , .body4  { width:70%; padding:8px; border:1px solid #aaa; text-align:left; }
.title1 { background:#fbeecc; }
.body1  { background:#fefbf1; }
.title2 { background:#f9cccc; }
.body2  { background:#fdecec; }
.title3 { background:#d7f9e0; }
.body3  { background:#f2fdf5; }
.title4 { background:#b5ddf4; }
.body4  { background:#e3f2fb; }

.title, .titleF, .titleM { text-align:center; padding:10px; white-space:nowrap; }
.title  { background:#f7e2c1; }
.body   { background:#fdf9f0; padding:10px; }
.titleF { background:#a6beff; }
.bodyF  { background:#d5e0ff; padding:10px; }
.titleM { background:#ffa8a8; }
.bodyM  { background:#ffdfdf; padding:10px; }
.body:hover, .body1:hover, .body2:hover, .body3:hover, .body4:hover, .bodyF:hover, .bodyM:hover  { background:#ffffbf; }





/*====================================================================
 按鈕
 ====================================================================*/
.submit,
.reset,
.cancel,
.edit,
.del,
.change,
.sub_menu1,
.sub_menu2,
.sub_menu3,
.sub_menu4,
.sub_menu5,
.sub_menu6,
.sub_menu7 {
	padding:3px 8px;
	margin:0 10px;
	font:bold 1.1em 'Microsoft JhengHei', sans-serif;
	color:#fff;
	white-space:nowrap;
	border:2px solid #fff;
	border-radius:5px;
	text-shadow:1px 1px 2px #000;
	box-shadow:0px 0px 3px #000;
	cursor:pointer;
	position:relative;
	z-index:2;
}

.submit:hover,
.reset:hover,
.cancel:hover,
.edit:hover,
.del:hover,
.change:hover,
.sub_menu1:hover,
.sub_menu2:hover,
.sub_menu3:hover,
.sub_menu4:hover,
.sub_menu5:hover,
.sub_menu6:hover,
.sub_menu7:hover {
	color:#ff0;
	border:2px solid #fff;
	box-shadow:1px 1px 6px #000;
}

.submit    { background:#072; }
.reset     { background:#853; }
.cancel    { background:#888; }
.edit      { background:#909; }
.del       { background:#c00; }
.change    { background:#00c; padding:1px 8px; }
.sub_menu1 { background:#a62; padding:5px 8px; }
.sub_menu2 { background:#a2a; padding:5px 8px; }
.sub_menu3 { background:#26a; padding:5px 8px; }
.sub_menu4 { background:#2a6; padding:5px 8px; }
.sub_menu5 { background:#e60; padding:5px 8px; }
.sub_menu6 { background:#0ae; padding:5px 8px; }
.sub_menu7 { background:#aa3; padding:5px 8px; }
.on        { color:#ff0; font-size:1.3em; }

/*== 圖片開關按鈕 ==*/
.pic_sw {
	padding:1px 3px;
	margin:0 10px;
	background:#828;
	font:bold 0.9em 'Microsoft JhengHei', sans-serif;
	color:#fff;
	letter-spacing:2px;
	border:2px solid #fff;
	border-radius:5px;
	text-shadow:1px 1px 2px #000;
	box-shadow:0px 0px 3px #000;
	cursor:pointer;
	position:relative;
	z-index:2;
}
.pic_sw:hover {
	border:2px solid #fff;
	color:#ff0;
	box-shadow:1px 1px 6px #000;
}

/*== 所見即所得常用字詞按鈕 ==*/
.word_sw {
	display:inline-block;
	width:25px;
	padding:3px;
	margin:0;
	margin-right:5px;
	background:#acedfd;
	font-family:'Pigeon-font', sans-serif;
	font-weight:bold;
	font-size:1em;
	color:#061;
	line-height:1.1;
	text-align:center;
	border-radius:5px;
	box-shadow:1px 1px 3px #000;
	cursor:pointer;
	position:relative;
	z-index:2;
}





/*====================================================================
 提示
 ====================================================================*/
/***** 錯誤提示 *****/
.error_block {
	margin-top:10px;
	font-weight:bold;
	font-size:1.1rem;
	color:#e22;
	text-align:center;
	vertical-align:middle;
}

/***** 移動提示 *****/
.move_text {
	font-weight:bold;
	font-size:1.1rem;
	color:#c22;
	text-align:center;
	vertical-align:middle;
}





.big_table    { width:100%; margin:0 auto; }
.big_table td { height:30px; border:1px solid #da9a3a; }
.upload_block td { border:0; padding:0; }

/***** 查詢資料陳列 1 *****/
.list_table, .list_table1, .list_table2, .list_table3 { width:100%; margin:0 auto; }

.list_table th,
.list_table1 th,
.list_table2 th,
.list_table3 th {
	font:bold 1.05em 'Microsoft JhengHei', sans-serif;
	color:#83250a;
	white-space:nowrap;
	text-shadow:0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
	border:1px solid #da9a3a;
}

.list_table1_title,
.list_table2_title,
.list_table3_title {
	height:45px;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	font:bold 1.3em 'Microsoft JhengHei', sans-serif;
	color:#fff;
	text-shadow:1px 1px 3px #000, 1px 1px 3px #000, 1px 1px 3px #000, 1px 1px 3px #000;
	border-radius:25px 25px 0 0;
}
.list_table1_title { background:#ecb146; border:1px solid #da9a3a; border-bottom:0; }
.list_table2_title { background:#5580ff; border:1px solid #0b129f; border-bottom:0; }
.list_table3_title { background:#ff5555; border:1px solid #a00a0e; border-bottom:0; }

.list_table  th { background:#f4d59f; }
.list_table1 th { background:#f5d9a3; border:1px solid #da9a3a; }
.list_table2 th { background:#99b3ff; border:1px solid #0b129f; }
.list_table3 th { background:#ffa8a8; border:1px solid #a00a0e; }

.list_table  td { text-align:center; border:1px solid #da9a3a; }
.list_table1 td { text-align:center; border:1px solid #da9a3a; }
.list_table2 td { text-align:center; border:1px solid #0b129f; }
.list_table3 td { text-align:center; border:1px solid #a00a0e; }

.list_table1 .row1 { background:#fef7e2; }   .list_table1 .row2	{ background:#fffef9; }
.list_table2 .row1 { background:#e1e9ff; }   .list_table2 .row2	{ background:#f4f4ff; }
.list_table3 .row1 { background:#ffe1e1; }   .list_table3 .row2	{ background:#fff4f4; }
/***** 查詢資料陳列 0 *****/


.self_text { line-height:140%; }
.F_table   { width:100%; margin:0 auto; border:1px solid #00c; background:#f0f8ff; border-radius:5px; text-align:center; position:relative; z-index:2; }
.M_table   { width:100%; margin:0 auto; border:1px solid #c00; background:#fff0f0; border-radius:5px; text-align:center; position:relative; z-index:2; }
.F_table .title,
.M_table .title {
	padding:8px;
	font:bold 1.1em 'Microsoft JhengHei', sans-serif;
	color:#fff;
	text-shadow:1px 1px 2px #000;
	border-radius:5px 5px 0 0;
	position:relative;
	z-index:2;
}
.F_table .title  { border-bottom:1px solid #00c; background:#73bcff; }
.M_table .title  { border-bottom:1px solid #c00; background:#ff7376; }

.F_table .body,
.M_table .body   { min-height:50px; padding:15px; background:transparent; line-height:150%; }

.pic_block {
	padding:2px;
	margin:5px;
	background:#fff;
	border:1px solid #ccc;
	border-radius:5px;
	box-shadow:3px 3px 5px #888;
}

.search_block {
	width:600px;
	margin:20px auto;
	background:#fff;
	border:1px solid #ccc;
	box-shadow:5px 5px 8px #888;
	position:relative;
	z-index:2;
}
.search_block .tr1 { background:#faeabe; border-bottom:1px solid #ccc; }
.search_block .tr2 { background:#fdfeef; border-bottom:1px solid #ccc; }
.search_block .tr1:hover, .search_block .tr2:hover { background:#ffffbf; }
.search_block td   { height:32px; line-height:32px; vertical-align:middle; white-space:nowrap; }
.search_block strong { display:inline-block; width:10%; letter-spacing:1px; font-weight:bold; font-size:1.05em; text-shadow:1px 1px 0px #fff;  }
.search_block input  { margin-right:5px; }


.row1 { background:#fcf7e7; }
.row2 { background:#f9fffd; }
.row3 { background:#f5b478; }
.row4 { background:#b6dff5; }

.row1:hover, .row2:hover, .row3:hover, .row4:hover { background:#ffffbf; }
.row1 .edit, .row1 .del, .row2 .edit, .row2 .del { font-size:1.05em; padding:1px 8px; }
.on_td, .on_td:hover { background:#ffe1e1; }
.row1.on_td, .row1.on_td:hover, .row2.on_td, .row2.on_td:hover, .row2.on_td, .row2.on_td:hover { background:#fff757; }

.st { padding:0px; }
.error { font-size:1em; color:#e22; }

.pagination {
	padding:3px 6px;
	background:#eef;
	font:bold 1em 'Pigeon-font', sans-serif;
	color:#03c;
	border:1px solid #03c;
	border-radius:5px;
	box-shadow:2px 2px 5px #888;
}
.pagination:hover {
	background:#ff8;
	color:#a00;
	border:1px solid #a00;
}
.on_pagination {
	padding:3px 8px;
	background:#36b;
	font:bold 1em 'Pigeon-font', sans-serif;
	color:#fff;
	border:2px solid #fff;
	border-radius:5px;
	box-shadow:0px 0px 3px #000;
}

.TaP       { width:1050px; margin:0px; padding:0px; margin:0 auto 20px auto; clear:none; } /* 整體區塊位置 */
.TaP ul    { color:#050; text-align:center; }       /* 連結點位置 */
.TaP ul li {
	list-style:none;
	padding:5px 10px;
	margin:0px 5px;
	background:#f4f9f4;
	float:left;
	font:bold 1.1em 'Microsoft JhengHei', sans-serif;
	border:solid 1px #1c5e27;
	border-radius:5px 5px 0 0;
	position:relative;
	top:1px;
	left:10px;
	cursor:pointer;
} /* 連結點屬性 */
.TaP .TaPTH, .TaP a li:hover { color:#f00; background:#c7f8c2; }									/* 按下類 連結點滑鼠移過的屬性 */
.TaP .TaPTS { color:#fff; background:#486C42; text-shadow:1px 1px 2px #000; }						/* 當前連結的區塊 */
.TaPCG      { clear:both; border:solid 1px #888; border-radius:5px; box-shadow:5px 5px 10px #888; }	/* 說明內容框 */
.TaPC       { color:#000; font-size:1em; padding:10px; }											/* 說明內容 */

.pic_box    { border:1px solid #aaa; padding:3px; background:#fff; border-radius:5px; }

/***** 查詢列表之概述框 1 *****/

.pop {
	clear:both;
	display:none;
	width:450px;
	margin-top:-197px;
	margin-left:-452px;
	font-size:1em;
	text-align:left;
	letter-spacing:1px;
	line-height:1.3;
	border-radius:5px;
	box-shadow:-5px -3px 10px #888;
	position:absolute;
	z-index:2;
}


.sex1_block { background:#f0f9ff; border:2px solid #43a9fc; }
.sex2_block { background:#ffeeee; border:2px solid #ff6266; }
.sex0_block { background:#f6f6f6; border:2px solid #a8a9a7; }

.sex1_block::before, .sex2_block::before, .sex0_block::before { position:absolute; border:20px solid transparent; border-right:0; top:165px; left:452px; content:''; }

.sex1_block::before { border-left:1.65vw solid #43a9fc; }
.sex2_block::before { border-left:1.65vw solid #ff6266; }
.sex0_block::before { border-left:1.65vw solid #a8a9a7; }

.list_title             { height:35px; line-height:35px; padding:0 5px; border-radius:5px 5px 0 0; position:relative; z-index:2;   }
.sex1_block .list_title { background:#cfe7fe; }
.sex2_block .list_title { background:#fed1d5; }
.sex0_block .list_title { background:#dfdfdf; }

.list_title strong { font-size:19px; font-weight:bold; }

.list_body { height:250px; min-height:30px; padding:0 5px; margin:3px 0; overflow-y:auto; overflow-x:hidden; }

.sex1_block .list_body::-webkit-scrollbar-track, .mm_box .list_body::-webkit-scrollbar-track { background-color:#ddeaf4; }
.sex1_block .list_body::-webkit-scrollbar,       .mm_box .list_body::-webkit-scrollbar       { width:8px; background-color:#88badb; }
.sex1_block .list_body::-webkit-scrollbar-thumb, .mm_box .list_body::-webkit-scrollbar-thumb { background-color:#b1d2e7; }

.sex2_block .list_body::-webkit-scrollbar-track, .vv_box .list_body::-webkit-scrollbar-track { background-color:#f4ddde; }
.sex2_block .list_body::-webkit-scrollbar,       .vv_box .list_body::-webkit-scrollbar       { width:8px; background-color:#dc8789; }
.sex2_block .list_body::-webkit-scrollbar-thumb, .vv_box .list_body::-webkit-scrollbar-thumb { background-color:#e8b0b1; }

.ss_box .list_body::-webkit-scrollbar-track { background-color:#f4eddd; }
.ss_box .list_body::-webkit-scrollbar       { width:8px; background-color:#ddb486; }
.ss_box .list_body::-webkit-scrollbar-thumb { background-color:#e9d1af; }

/***** 查詢列表之概述框 0 *****/
.search_keyword { text-align:center; font-weight:bold; font-size:1.1em; color:#909; }

/***** 檢視完整血統 表格 1 *****/
.complete_table  { width:100%; height: 630px; border-collapse:separate; }
.complete_table5 { width:100%; height:2560px; display:table; }

.complete_table td { word-break:break-all; padding:0; }

.mm_box .number a { color:#00d; }
.vv_box .number a { color:#d00; }

.complete_table .x_line_F   { height:1px; border-top:2px solid #00c; }
.complete_table .x_line_M   { height:1px; border-top:2px solid #c00; }

.complete_table .ss_box, .complete_table5 .ss_box {                  background:#fcf8f1; outline:2px solid #d93; }
.complete_table .mm_box, .complete_table5 .mm_box { min-height:50px; background:#fbfdff; outline:2px solid #00c; }
.complete_table .vv_box, .complete_table5 .vv_box { min-height:50px; background:#fffbfb; outline:2px solid #c00; }

.complete_table .ss_box, .complete_table .mm_box, .complete_table .vv_box,
.complete_table5 .ss_box, .complete_table5 .mm_box, .complete_table5 .vv_box
{ line-height:1.3; vertical-align:top; word-break:break-all; box-shadow:3px 3px 5px #888; border-radius:5px; }

.complete_table .number, .complete_table5 .number { font-size:19px; }

.complete_table .list_body { height:auto; }

.complete_table td > ul > li:nth-child(1), .complete_table5 div > ul > li:nth-child(1) { height:29px; line-height:29px; padding:0 5px; border-bottom:solid 1px #d93; }
.complete_table .mm_box > ul > li:nth-child(1), .complete_table5 .mm_box > ul > li:nth-child(1) { border-bottom:solid 1px #00c; }
.complete_table .vv_box > ul > li:nth-child(1), .complete_table5 .vv_box > ul > li:nth-child(1) { border-bottom:solid 1px #c00; }

.div_1, .div_2, .div_3, .div_4, .div_5, .div_6, .div_7 { display:table-cell; vertical-align:top; }

.div_1, .div_3, .div_5, .div_7 { width:25%; }
.div_2, .div_4, .div_6         { width:22px; }

.complete_table5 .div_2_s { line-height:1270px; }
.complete_table5 .div_4_s { line-height: 630px; }
.complete_table5 .div_6_s { line-height: 310px; }

.line_x { width:22px; height:160px; display:inline-block; vertical-align:middle; border-bottom:solid 2px #c00; border-top:solid 2px #00c; }
.div_2 .line_x, .div_4 .line_x { height:320px; }

.line_y_top                 { width:1px; height:20px; margin:0 auto; border-left:solid 2px #00c; }
.line_y_bottom, .line_y_bot { width:1px; height:20px; margin:0 auto; border-left:solid 2px #c00; }

.ss_box                        { height:800px; }
.div_1 .mm_box, .div_1 .vv_box { height:860px; }
.div_3 .mm_box, .div_3 .vv_box { height:630px; }
.div_5 .mm_box, .div_5 .vv_box { height:310px; }
.div_7 .mm_box, .div_7 .vv_box { height:150px; }

.ss_box .list_body                                   { height:764px; }
.div_1 .mm_box .list_body, .div_1 .vv_box .list_body { height:824px; }
.div_3 .mm_box .list_body, .div_3 .vv_box .list_body { height:594px; }
.div_5 .mm_box .list_body, .div_5 .vv_box .list_body { height:274px; }
.div_7 .mm_box .list_body, .div_7 .vv_box .list_body { height:114px; }

/***** 檢視完整血統 表格 0 *****/

/*** 凸顯近親用(環號欄位加重底色) ***/
.f_repeat0 { background:#dcf0ffa0; background:rgba(220, 240, 255, 0.6); border-radius:6px 6px 0 0; }
.f_repeat1 { background:#dcfff0a0; background:rgba(220, 255, 240, 0.6); border-radius:6px 6px 0 0; }
.f_repeat2 { background:#dcffffa0; background:rgba(220, 255, 255, 0.6); border-radius:6px 6px 0 0; }
.f_repeat3 { background:#bedcffa0; background:rgba(190, 220, 255, 0.6); border-radius:6px 6px 0 0; }
.f_repeat4 { background:#beffdca0; background:rgba(190, 255, 220, 0.6); border-radius:6px 6px 0 0; }
.f_repeat5 { background:#beffffa0; background:rgba(190, 255, 255, 0.6); border-radius:6px 6px 0 0; }
.f_repeat6 { background:#ffffd2a0; background:rgba(255, 255, 210, 0.6); border-radius:6px 6px 0 0; }
.f_repeat7 { background:#ffff96a0; background:rgba(255, 255, 150, 0.6); border-radius:6px 6px 0 0; }

.m_repeat0 { background:#fbd5d5a0; background:rgba(255, 230, 230, 0.6); border-radius:6px 6px 0 0; }
.m_repeat1 { background:#fbcefaa0; background:rgba(255, 220, 255, 0.6); border-radius:6px 6px 0 0; }
.m_repeat2 { background:#fbe0cea0; background:rgba(255, 230, 200, 0.6); border-radius:6px 6px 0 0; }
.m_repeat3 { background:#f0d6f3a0; background:rgba(255, 210, 210, 0.6); border-radius:6px 6px 0 0; }
.m_repeat4 { background:#ffddd0a0; background:rgba(255, 200, 240, 0.6); border-radius:6px 6px 0 0; }
.m_repeat5 { background:#f5d3eba0; background:rgba(255, 210, 160, 0.6); border-radius:6px 6px 0 0; }
.m_repeat6 { background:#f5e6d3a0; background:rgba(245, 240, 220, 0.6); border-radius:6px 6px 0 0; }
.m_repeat7 { background:#ffcaffa0; background:rgba(245, 220, 245, 0.6); border-radius:6px 6px 0 0; }

.demo_box > div { width:300px; height:431px; padding:8.8px; margin:0 auto; font-size:16px; background:#fff; line-height:1; border:solid 1px #eee; box-shadow:2px 2px 3px #aaa; overflow:hidden; }
.demo_box .LE_W { width:390px; height:300px; }
.demo_box .A4_W { width:431px; height:300px; }

.demo_block { position:relative; }
.demo_body { width:250%; transform:scale(0.4) translate(-75%, -75%); position:relative; top:0; left:0; bottom:0; right:0; content:''; }
.demo_body img { max-width:100%; }


.DEMO_bg    { padding:20px; background:#f6f6f6; font-size:16px; }
#DEMO    { padding:18px; margin:0 auto; background:#fff; font-size:0.6em; border:1px solid #ccc; box-shadow:0 0 5px #aaa; overflow:hidden; }
#DEMO img, #demo_pic img { width:100%; }
#top_pic { margin-bottom:5px; text-align:center; }
#bot_pic { margin-top:5px; text-align:center; }
#bot_txt { margin-top:5px; font-weight:bold; font-size:1.02em; text-align:center; letter-spacing:0; white-space:nowrap; }

#DEMO #top_pic                 { margin-bottom:4px; }
#DEMO #bot_pic, #DEMO #bot_txt { margin-top:4px; letter-spacing:1px; }
#DEMO .st_top_block   { font-size:0.9em; letter-spacing:0.02em; }
#DEMO .st_table       { background:#fff; position:relative; z-index:1; font-size:16px; line-height:2; }
#DEMO .st_table:after { position:absolute; top:0; left:0; bottom:0; right:0; content:''; z-index:-1; opacity:0.2; }

#DEMO .ss_box { outline:solid 2px #060; }

.demo_bg { position:relative; }
.demo_bg::after { position:absolute; top:0; left:0; bottom:0; right:0; content:''; opacity:0.2; }

.st_top_block { padding:2px 0; margin-bottom:3px; display:-webkit-flex; display:flex; align-items:center; font:0.65em/1.2 'Pigeon-font', 'NotoSerifTC', 'NotoSerifSC', sans-serif; z-index:1; }
.st_top_left  { flex-grow:1; letter-spacing:0.3em; white-space:nowrap; text-align:left; }
.st_top_right { flex-grow:1; letter-spacing:0.15em; white-space:nowrap; text-align:right; }
.demo_top_pic { display:block; padding-bottom:6px; text-align:center; }
.demo_bot_pic { display:block; padding-top:6px; text-align:center; }
.demo_bot_txt { display:block; padding-top:6px; font:bold 1em 'Pigeon-font', 'NotoSerifTC', 'NotoSerifSC'; color:#000; letter-spacing:1px; text-align:center; white-space:nowrap; }

.A4_W .demo_top_pic, .LE_W .demo_top_pic, .LE_W .demo_bot_pic, .LE_W .demo_bot_txt { display:none; }
.A4_W .demo_bot_pic img { width:70%; }





/*====================================================================
 小圖示
 ====================================================================*/
/*== 錯誤圖示 ==*/
.icon-error {
	display:inline-block;
	width:18px;
	height:18px;
	background:linear-gradient(#ea7171, #ea7171, #ec4242, #ec4242, #6b1416);
	position:relative;
	top:3px;
	right:5px;
	border:solid 1px #b82327;
	border-radius:100%;
	box-shadow:1px 1px 1px #555;
}
.icon-error:before {
	width:10px;
	height:2px;
	background:#fff;
	content:'';
	position:absolute;
	top:8px;
	right:4px;
	transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
.icon-error:after {
	width:10px;
	height:2px;
	background:#fff;
	content:'';
	position:absolute;
	top:8px;
	left:4px;
	transform:rotate(135deg);
	-ms-transform:rotate(135deg);
	-moz-transform:rotate(135deg);
	-webkit-transform:rotate(135deg);
	-o-transform: rotate(135deg);
}


/*== 完成圖示 ==*/
.icon-success {
	display:inline-block;
	width:18px;
	height:18px;
	background:linear-gradient(#a2d724, #a2d724, #a9dd31, #a9dd31, #66c029);
	position:relative;
	top:3px;
	right:5px;
	border:solid 1px #82c848;
	border-radius:100%;
	box-shadow:1px 1px 1px #555;
}
.icon-success:before {
	width:6px;
	height:2px;
	background:#fff;
	content:'';
	position:absolute;
	top:11px;
	right:10px;
	transform:rotate(35deg);
	-ms-transform:rotate(35deg);
	-moz-transform:rotate(35deg);
	-webkit-transform:rotate(35deg);
	-o-transform:rotate(35deg);
}
.icon-success:after {
	width:13px;
	height:2px;
	background:#fff;
	content:'';
	position:absolute;
	top:8px;
	left:4px;
	transform:rotate(130deg);
	-ms-transform:rotate(130deg);
	-moz-transform:rotate(130deg);
	-webkit-transform:rotate(130deg);
	-o-transform: rotate(130deg);
}


/*== 刪除圖示 ==*/
.icon-del {
	display:inline-block;
	width:25px;
	height: 4px;
	position:relative;
	top:0;
	right:0;
	cursor:pointer;
	background: #c00;
	border:1px solid #400;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}
.icon-del:before {
	width:25px;
	height: 4px;
	position: absolute;
	background: #c00;
	border:1px solid #400;
	content:'';
	top:0;
	left:-1px;
	transform: rotate(90deg);
	-ms-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-o-transform:rotate(90deg);
}
.icon-del:after {
	width:5px;
	height:6px;
	position: absolute;
	background: #c00;
	content:'';
	border-top:1px solid #c00;
	border-bottom:1px solid #c00;
	top:-2px;
	left:10px;
	transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-o-transform:rotate(90deg);
}
.icon-del:hover, .icon-del:hover:before, .icon-del:hover:after { background: #e00; }
.icon-del:hover:after { border-top:1px solid #e00; border-bottom:1px solid #e00; }


/*== 警告圖示 ==*/
.icon-warning {
	display:inline-block;
	width:18px;
	height:18px;
	background:linear-gradient(#e26418, #e26418, #ea7833, #ea7833, #cb7d1f);
	position:relative;
	top:3px;
	right:5px;
	border:solid 1px #d2691c;
	border-radius:100%;
	box-shadow:1px 1px 1px #555;
}
.icon-warning:before {
	width:2px;
	height:2px;
	background:#fff;
	content:'';
	position:absolute;
	top:14px;
	right:8px;
}
.icon-warning:after {
	width:2px;
	height:9px;
	background:#fff;
	content:'';
	position:absolute;
	top:3px;
	left:8px;
}


/*== 放大鏡圖示 ==*/
.icon-view {
	display:inline-block;
	cursor:pointer;
    position:relative;
    width:14px;
    height:14px;
    border:1px solid #888;
    border-radius: 14px;
    box-shadow:inset 1px 1px 10px rgba(100, 190, 250, .2), 0 0 5px #888;
}
.icon-view:before {
	width:10px;
	height:10px;
    border:1px solid #8cc0db;
    border-radius:10px;
	content:'';
	position:absolute;
	top:1px;
	right:1px;
    box-shadow:inset 1px 1px 10px rgba(100, 190, 250, .4), 0 0 5px #98d2ef;
}
.icon-view:after {
    content:'';
    position:absolute;
    width:6px;
    height:3px;
    right:-4px;
    bottom:-4px;
    background:#df7d11;
	border:1px solid #777;
    border-radius:5px 0 0 5px;
    box-shadow:1px 1px 3px #888;
    -webkit-transform:rotate(230deg);
    -moz-transform:rotate(230deg);
    -ms-transform:rotate(230deg);
    -o-transform:rotate(230deg);
    transform:rotate(230deg);
}


/*== 關閉圖示 ==*/
.pop-close {
	display:block;
	width:30px;
	height:20px;
	background:linear-gradient(#ea7171, #ea7171, #ec4242, #ec4242, #6b1416, #6b1416);
	border:0;
	border:solid 1px #fff;
	box-shadow:1px 1px 3px #000;
	position:absolute;
	top:7px;
	right:10px;
	cursor:pointer;
}
.pop-close:before {
	width: 43%;
	position: absolute;
	height: 3px;
	background: #fff;
	content: "";
	top: 7px;
	right: 8px;
	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(134deg);
	-ms-transform: rotate(134deg);
	-moz-transform: rotate(134deg);
	-webkit-transform: rotate(134deg);
	-o-transform: rotate(134deg);
}
.pop-close:hover { background:linear-gradient(#ec4242, #ec4242, #ea7171, #ea7171, #b10e12, #b10e12); box-shadow:1px 1px 5px #000; }


/*== 排序箭頭上圖示 ==*/
.up {
	display:inline-block;
	height:0;
	margin-right:5px;
	vertical-align:middle;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-bottom:8px solid #00c;
}


/*== 排序箭頭下圖示 ==*/
.dw {
	display:inline-block;
	height:0;
	margin-left:5px;
	vertical-align:middle;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-top:8px solid #00c;
}