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, 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, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-weight:normal;}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}

audio,canvas,progress,video {display: inline-block;vertical-align: baseline;}
audio:not([controls]) {display: none;height: 0;}
ul, li, dl, dt, dd, ol {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}

table {border-collapse: collapse;border-spacing: 0;}

border{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

a{text-decoration: none; color: inherit;}
a:active,a:hover {outline: 0;}
b,strong {font-weight: bold;}

img{max-width: 100%;height: auto;border: 0;}
 *:focus {outline: none;}

input, select {vertical-align: middle;line-height: normal;}
button,input,optgroup,select,textarea {color: inherit; font: inherit; margin: 0;}
button{cursor: pointer;overflow: visible;border: 0;}
input[type="radio"],input[type="checkbox"] {vertical-align: text-bottom;box-sizing: border-box;padding: 0;}
input,button,select,textarea{outline:none;border: 1px solid #ccc;padding: .5rem;line-height: 1.5;}
button[disabled],html input[disabled] {cursor: default;}
button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0;}
textarea {overflow: auto;}


.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}


/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/


html,body{width: 100%;height: 100%;-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
html{font-family: Helvetica,arial,Microsoft JhengHei,"微軟正黑體",sans-serif;font-size: 16px;}
body{font-size:1rem;word-break: break-all;word-wrap: break-word;background-color:#fff;}

hr{display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1rem 0;padding: 0;}
.float{float: left;}
.clear{clear: both;}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/

button{border-radius: .5rem;padding: .2rem .6rem;}
a:hover{opacity: .7;}
h3{font-size: 1rem;font-weight: bold;width: 100%;border-bottom: 1px solid #eee;padding-bottom: .5rem;}


table{box-sizing: border-box;text-align: left;margin: 1rem 0;line-height: 1.5;}
td,th{vertical-align: text-top;padding: .5rem;}
td input,td textarea,th input,th textarea,td img ,th img{vertical-align: text-top;}
table select{height: 40px;}
table ul li input[type="checkbox"]{vertical-align: middle;margin-right: .5rem;}
table a{text-decoration: underline;}
table .tip{margin: .5rem;color: #ccc;font-size: .875rem;}
table p.noimages{margin: .5rem;color: #ccc;font-size: .875rem;display: inline-block;}
.redtip{margin: .5rem;color: #c60741;}
.redtip a{font-weight: bold;text-decoration: underline;}

.list{width: 100%;margin: 1rem 0;text-align: left;}
.list td,.list th{padding: 1rem;border: 1px solid #eee;}
.list th{color: #eee;background-color: #666;}
.t100{width: 100px;}
.t50{width: 50px;}
.t150{width: 150px;}
input.order{width: 50px;}
.list button{margin: .3rem;}
.editor{width: 100%;min-height: 500px;}

.unreset th { font-weight: bolder; text-align: center; }
.unreset caption { text-align: center; }
.unreset h1 { font-size: 2em; margin: .67em 0; }
.unreset h2 { font-size: 1.5em; margin: .75em 0; }
.unreset h3 { font-size: 1.17em; margin: .83em 0; }
.unreset h4, .unreset p,
.unreset blockquote, .unreset ul,
.unreset fieldset, .unreset form,
.unreset ol, .unreset dl, .unreset dir,
.unreset menu { margin: 1.12em 0; }
.unreset h5 { font-size: .83em; margin: 1.5em 0; }
.unreset h6 { font-size: .75em; margin: 1.67em 0; }
.unreset h1, .unreset h2, .unreset h3, .unreset h4,
.unreset h5, .unreset h6, .unreset b,
.unreset strong { font-weight: bolder; }
.unreset blockquote { margin-left: 40px; margin-right: 40px; }
.unreset i, .unreset cite, .unreset em,
.unreset var, .unreset address{ font-style: italic; }
.unreset pre, .unreset tt, .blogArticle code,
.unreset kbd, .unreset samp { font-family: monospace; }
.unreset pre { white-space: pre; }
.unreset big { font-size: 1.17em; }
.unreset small, .unreset sub, .unreset sup { font-size: .83em; }
.unreset sub { vertical-align: sub; }
.unreset sup { vertical-align: super; }
.unreset table { border-spacing: 0px; border-collapse:separate; }
.unreset thead, .unreset tbody,
.unreset tfoot { vertical-align: middle; }
.unreset td, .unreset th, .unreset tr      { vertical-align: inherit; }
.unreset s, .unreset strike, .unreset del  { text-decoration: line-through; }
.unreset hr { border: 1px inset; }
.unreset ol, .unreset ul, .unreset dir,
.unreset menu, .unreset dd { margin-left: 40px; }
.unreset ol { list-style-type: decimal; }
.unreset ul { list-style-type: disc; }
.unreset ol ul, .unreset ul ol,
.unreset ul ul, .unreset ol ol{ margin-top: 0; margin-bottom: 0; }
.unreset figure {margin: 1em 40px;}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/



header{z-index: 10; width: 100%;box-sizing: border-box;background-color: #000;color: #eee;overflow: hidden;position: fixed;top: 0;left: 0;height: 4rem;line-height: 4rem;padding: 0 1rem;}
header h1{float: left;font-size: 1.125rem;text-indent: 3.5rem;}
header span{float: right;color: #888;}
header span button{margin-left: 1rem;}
button.signout{background-color: #4a1a75;color: #fff;height: normal;line-height: normal;border: 0;}

nav{box-sizing: border-box; background-color: #333;height: 100vh;width: 12rem;box-sizing: border-box;padding: 5rem 1rem;color: #999;overflow: auto;position: fixed;top: 0;left: 0;}
nav ul li{padding: .5rem 0;}
nav ul li.here{color: #fff}
nav ul li i{margin-right: .4rem;}
nav ul li a{display: block;}

footer{color: #eee;font-size: .875px;position: absolute;bottom: .8rem;right: .8rem;}


section{position: fixed; box-sizing: border-box;margin: 5rem 1rem 2rem 13rem;height: calc(100% - 8rem);width: calc(100% - 14rem);padding-right: 2rem;overflow-y: scroll;}


.submenu li{display: inline-block;padding: .5rem 1rem;border: 1px solid #eee;border-radius: .5rem;color: #222;margin:0 .5rem .5rem 0;}
.submenu li.here{background-color: #222;color: #eee;}

.breadcrumb{padding: 1rem;border: 1px solid #eee;margin: 1rem 0;background-color: #eee;}
.breadcrumb a:after{content: "/";padding: 0 .5rem;}
.breadcrumb a:last-child:after{content: "";padding: 0 .5rem;}

.main{padding-left: 1rem;overflow: auto;}
.btns{padding: 2rem 0;border-top: 1px solid #eee;text-align: right;}
.btns button{margin-right: .5rem;padding: 1rem 1.5rem;background-color: #eee;}
.btns button.tip{color: #eee; background-color: #666;}
button.uploadimg{color: #827d7d;background-color: #ccc;width: 200px; height: 200px;border-radius: unset;vertical-align: text-top;}


.searchbox{margin-bottom:1rem;}
.searchbox select{margin: 0 1rem;height: 40px;width: 100px;}

.pagenumber{text-align: center;}
.pagenumber li{display: inline-block;padding: .5rem .7rem;border: 1px solid #eee;}
.pagenumber li.here{background-color: #222;color: #eee;}




.m_menu{position: fixed;z-index: 10;left: .7rem; top: .7rem;padding: .8rem;background-color: #666;color: #fff;border-radius: 50%;}
#ckb{display: none;}
#ckb:checked~nav{display: none;}
#ckb:checked~section{width: calc(100% - 2rem);margin: 5rem 1rem 2rem 1rem;}


.login_testnumber input{margin-right: 1rem;margin-bottom: 1rem;}
.login_testnumber a{vertical-align: text-top;line-height: 40px;margin-left: 1rem;}


/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/


@media only screen and (max-width:767px){
    /* Force table to not be like tables anymore */
	.list table, 
	.list thead, 
	.list tbody, 
	.list th, 
	.list td, 
	.list tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	.list thead tr { 
		display: none;
	}
 
	.list tr { border: 1px solid #ccc; }
 
	.list td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 40%; 
		white-space: normal;
		text-align:left;
	}
 
	.list td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0;
		left: 0;
		width: 30%; 
		white-space: nowrap;
		text-align:left;
        background-color: #ccc;
        display: block;
        height: 100%;
        padding: 1rem;
        box-sizing: border-box;
        
	}
 
	/*
	Label the data
	*/
	.list td:before { content: attr(data-title); }

    
    nav{box-sizing: border-box; background-color: #333;height: 100vh;width: 12rem;box-sizing: border-box;padding: 5rem 1rem;color: #999;overflow: auto;position: fixed;top: 0;left: 0;}
    
    section{position: fixed; box-sizing: border-box;margin: 5rem 1rem 2rem 13rem;height: calc(100% - 8rem);overflow: auto;width: calc(100% - 14rem);padding-right: 1rem;}
    
nav{display: none;}
section{width: calc(100% - 2rem);margin: 5rem 1rem 2rem 1rem;}    
#ckb:checked~nav{display: block;z-index: 9;}  
}

@media only screen and (max-height:700px){

}


@media only screen and (max-width:767px),(max-height:500px){

}