body {overflow: hidden; background:url(https://i.imgup.co/yIArs.jpg); background-attachment: fixed; background-position:left top; margin: 0; padding: 0; font-family: Arial, sans-serif; font-size: 14px; line-height: 100%; }
.mbg { max-height: 1200px; margin: 0 auto; position: absolute; z-index: 20;} .Eng {display: none; }
nav, .menu-toggle, .omit {display: none;} a {color: #deb887; text-shadow: 1px 1px #000; text-decoration: none; font-family: '微軟正黑體';} .pinyin {font-size: 1px; color: black;}
.editor { display: inline; float: right; opacity: 10%;  font-size: 1;}  .editor, a:hover { cursor: pointer; opacity: 1; color: white;}
#logo1 {float: left; display:relative; max-height:35px; width: auto;}
.mbg { background: rgba( 178, 34, 34,0.7) url(https://i.imgup.co/y6Ems.png); float: left; margin-left: 0%; width: 100%; vertical-align: top; height:35px; }
.ddm a { color: rgb(255, 255, 255 ); }
.ddm, .ddm ul { list-style: none; padding: 0; margin: 0; box-shadow: 2px 2px 5px #555555; }
.ddm a { padding: 11px 8px; display:inline-block; text-decoration: none; }
.ddm li { position: relative;}
.ddm > li { display: inline-block; vertical-align: top; margin-left: 16px;}
.ddm li a:hover { background:rgb(0, 0, 0) url(https://i.imgup.co/y6Ems.png); width: 100%; text-shadow: 1px 1px 3px #666;}
.ddm > li > ul { display: none; background: rgba(95, 158, 160,0.85) url(https://i.imgup.co/pmtVl.png); position: absolute; top: 100%; left: 0; width: 200px; list-style: none;}
.ddm > li:hover > ul { display: block; }
.ddm ul > li > a:hover { background: rgb(143, 188, 143) url(https://i.imgup.co/pmtVl.png); width: 184PX; color: rgb(0, 0, 0); text-shadow: 1px 1px 3px #666;}
.ddm > li > ul > li > ul { display: none; background: rgba(100, 149, 237,0.85) url(https://i.imgup.co/pmtVl.png); position: absolute; top: 0; left: 100%; width: 200px; list-style: none;}
.ddm > li > ul > li:hover > ul { display: block; }
.ddm ul > li > ul > li > a:hover { background: rgb(102, 102, 102) url(https://i.imgup.co/pmtVl.png); width: 184PX; color: rgb(127, 255, 212); text-shadow: 1px 1px 3px #666;}
.ddm > li > ul > li > ul > li > ul { display: none; background: rgba(128, 0, 128,0.85) url(https://i.imgup.co/y6rDZ.png); position: absolute; top: 0; left: 100%; width: 200px; list-style: none;}
.ddm > li > ul > li > ul > li:hover > ul { display: block; }
.ddm ul > li > ul > li > ul > li > a:hover { background: rgb(218, 112, 214) url(https://i.imgup.co/y6rDZ.png); width: 184PX; color: rgb(255, 255, 0); text-shadow: 1px 1px 3px #666;}
.background_TB{width: 80%; height: auto; left: 2%; transition: 0.5s; transition-delay: 0.4s;}
.toggle_TB {top: 50px; left: 5%; width: 40px; height: 20px; display: block; background-color: #000; border-radius: 10px; cursor: pointer; position: relative; transition: 0.2s; filter: drop-shadow(12px 6px 6px black);  border: outset rgba(222, 184, 135);}
.circle {position: absolute; width: 16px; height: 16px; left: 0px; transition: 0.5s; background-color: rgba(222, 184, 135); border-radius: 1000px; margin: 2px;}
#table-sd {position: absolute; top: 145px; width:100%; max-height: 380px; overflow-y: auto; display: none; box-shadow: 0 0 1px 1px rgb(169, 169, 169); table-layout:fixed; line-height: 30px;}
th {white-space: nowrap; text-align: left; filter: drop-shadow(8px 4px 4px black); text-shadow: 1px 2px 1px #300505; background: rgba(222, 184, 135,0.6);}
td {padding-left:1px; Padding-top: 3px; border-width: 1px; border-color:rgb(222, 184, 135);}
thead {position: sticky; top: 0; z-index:18; box-shadow: 1px 2px #dcdcdc; background-image:url(https://i.imgup.co/pmtVl.png);}
.title {position: sticky; top: 80px; text-align: center; color: rgb(222, 184, 135); font-size: 22px; text-shadow: 1px 1px 1px #333; filter: drop-shadow(4px 2px 2px black); font-weight: 600; z-index: 5; }  .table-striped{-o-table-baseline: 0 px;}
.hor {height:20px; background:rgb(102, 102, 102) url(https://i.imgup.co/yPqU0.png);}
.zec {height:20px; background:rgb(160, 160, 160) url(https://i.imgup.co/yPqU0.png);}
.editor, .editor a, .editorT, .editorT a { display: inline; float: right; opacity: 0.1; font-size:1px; position: sticky; top: 0;}  .editor,.editorT, a:hover { cursor: pointer; opacity: 1; color: white; text-decoration: none;}
table {border-collapse: collapse; border-width: 0;}
.dataTables_filter {text-align: right; margin-top: 20px; margin-right: 80px;}
.dataTables_length { color: rgb(222, 184, 135) !important; filter: drop-shadow(4px 2px 2px black);}
.dataTables_wrapper .dataTables_filter label { color: rgb(222, 184, 135); filter: drop-shadow(8px 4px 4px black); text-shadow: 1px 2px 1px #300505 !important;} 
.dataTables_wrapper .dataTables_paginate .paginate_button {color: rgb(222, 184, 135) !important; filter: drop-shadow(4px 2px 2px black)!important;}
.dataTables_filter input {width: 150px; padding: 5px;}

.scroll-wrapper::-webkit-scrollbar { display: none;}
.responsive-cell {max-width: 0;}

@media (max-width:960px)
{
html, body { margin: 0;padding: 0;font-family: helvetica, sans-serif; font-size: 18px; overflow-y:auto;}
#logo2 {float: left; padding: 0 20px; max-height:35px; width: auto;}
.editor, .editorT, .mbg { display: none;} nav {display: block;} .Eng {display: inline; }
#table-sd {position: absolute; top: 188px; max-height: 400px;} #example {overflow:auto;}  #sdTable {margin-left: 5%;}
.item ul, nav input[type="checkbox"] { display: none; }
.multi-level, .item input:checked ~ ul, .omit {display: block;}
.arrow {display: block;width: 12px;height: 14px;float: left; z-index: 0;margin: 17px 10px 0 5px;}
.item input + .arrow {transform: rotate(-90deg);transition: 0.1s;}
.item input:checked + .arrow {
transform: rotate(0deg); transition: 0.1s;}
label:hover { cursor: pointer; }
label {width: 100%;display: block;z-index: 3;position: relative;}
.menu-toggle {display: inline; cursor: pointer;font-size: 24px; line-height: 50px;width:100%;float:right;
text-align: right;padding: 0 20px;color: white;background: black; position: relative; top: -50px; z-index: 20; }
nav {position: relative;left:0; top: -50px; scroll-behavior: none;transition:0.5s;
width: 100%;background: rgba(95, 158, 160,0.85);overflow-x: hidden;
height: calc(100vh + 150px); position: relative; z-index: 100; }
nav.active { left: -100%; } li { text-shadow: 1px 1px #666;} #table-cont {max-height: 500px; width: 100%; position: absolute; top:88px; }
nav ul, nav ul li, nav ul li a {position: relative;line-height: 50px;
margin: 0;padding: 0 10px;list-style: none;text-decoration: none;
color: rgb(255, 255, 255); font-weight: 500;width: 100%;top: 0px;
border-bottom: 1px solid rgba(0,0,0,.2);}
nav ul li:hover {background: rgba(0, 0, 0,0.85);
color: rgb(255, 255, 255); }
nav ul li ul li a { padding: 0 -20px; width: 100%;}
nav ul li ul li:hover, nav ul li ul li a:hover { background: rgba(143, 188, 143,0.85);
color: rgb(0, 0, 0); width:100%;}
nav ul li ul li ul li:hover, nav ul li ul li ul li a:hover {background: rgba(102, 102, 102,0.85);
color: rgb(127, 255, 212); width:100%;}
nav ul li ul li ul li ul li:hover, nav ul li ul li ul li ul li a:hover {background: rgba(218, 112, 214,0.85);
color: rgb(255, 255, 0); width:100%;}
.dataTables_filter { margin-right: 0px;}
#flip, #panel {position: relative; top: -978px;margin: 20px auto; z-index: 20;} .title {position: relative; top: -960px;}
#sdTable_wrapper, .background_TB {position: absolute; top: 88px; max-height: 500px;}
.scroll-wrapper {display: block; overflow-x: auto; white-space: nowrap; background: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(210,210,210,0.3),rgba(0,0,0,0.5)); padding: 7px; border-collapse: collapse; text-shadow: 1px 1px #000;}
}
@media (min-width:500px) and (max-width:960px) {
#flip, #panel { position: relative; top: -1180px;}
.title { position: relative; top: -1140px;}
}