* {
    box-sizing: border-box;
}

body { 
    margin:0; 
    font:12pt "Microsoft JhengHei", "微軟正黑體", 細明體, Arial, sans-serif;
    background: #f5f5f5;
}

form { margin:0; }

.error { font:9pt 細明體; color:#aa3333; margin:5px 0 5px 0; }
.title { font:16pt 標楷體; margin:5px 0 5px 0; }
.blink { text-decoration:blink; color:Red; }

#pnLogin { text-align:center; margin-top:10px; }
#pnLogin table     { background:#eeeeee; border:1px solid #3333aa; }
#pnLogin th        { padding:5px; font-weight:normal; background:#cccccc; }
#pnLogin td        { padding:5px; vertical-align:middle; background:#dddddd; text-align:left; }
#pnLogin #edID     { font:12pt 細明體; width: 6em; padding:3px; }
#pnLogin #edPW     { font: 6pt 細明體; width:20em; padding:3px; }
#pnLogin #bnSubmit { font:12pt 細明體; padding:4px 1px 1px 1px; }

#Title { border-bottom:0px solid #FFFFFF; background:#ffffff; padding:0px 0px 0px 0px; background-color:#FFFFFF; }
#Title #TI     { }
#Title #TI .sysName { font:24pt 標楷體; cursor:pointer; }
#Title #LI     { float:right; font:9pt 細明體; border:0px solid #FFFFFF; padding:0px 0px 0px 0px; width:10em; height:160px; background-color:#333366; }
#Title #LI .kn { color:#FFFFFF; }
#Title #LI .kv { color:#FFFFFF; }
#Title a { text-decoration:none; font:9pt 細明體; padding:2px 3px 0px 5px; color:#FFFFFF; border:1px solid #cccccc; }
#Title a:link,   #Title a:visited { background:#ffeeee; }
#Title a:active, #Title a:hover   { background:#ffcccc; }

#Action { float:left; border-right:1px solid #FFFFFF; padding:0px 0px 5px 5px; width:120px; text-align:center; }
#Action ul { list-style-type:none; margin:0; position:absolute; left:-20px; font:9pt 細明體; }
#Action a
{
	display:inline-block;
	text-decoration:none;
	text-align:center;
	margin-top:3px;
	margin-bottom:3px;
	padding:3px 7px 2px 5px;
	width:5em;
	border:1px solid #3333aa;
}
#Action a:link,   #Action a:visited { background:#cccccc; color:#1111dd; }
#Action a:active, #Action a:hover   { background:#eeffee; color:#aa3333; }

#ADBar { float:right; border-left:1px solid #FFFFFF; padding:0px 5px 5px 15px; width:104px; }

#Content { 
    margin:0 115px 0 115px; 
    padding:0px 5px 2px 5px; 
    min-height:600px; 
    width:100%; 
    max-width:1280px;
}

/* 響應式設計 - 平板 */
@media (max-width: 1024px) {
    #Content {
        margin: 0 50px;
        padding: 10px;
    }
}

/* 響應式設計 - 手機 */
@media (max-width: 768px) {
    #Content {
        margin: 0;
        padding: 10px;
        min-height: auto;
    }
    
    #pnLogin table {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
    
    #pnLogin #edPW {
        width: 100%;
        max-width: 20em;
    }
}

#pnFooter { clear:both; border-top:1px solid #FFFFFF; background:#eeeeee; margin:0; padding:5px; font:9pt 細明體; color:#555555; text-align:center; }
#pnFooter .sysName { }
#pnFooter .sysVer  { }
#pnFooter .RDTeam  { font-weight:bold; }

#LogonRec { text-align:left; }
#LogonRec #cond { border-top:1px solid #3333aa; border-bottom:1px solid #3333aa; padding:5px; margin:5px 0 10px 0; background:#eeffee; }
#LogonRec table { border:1px solid #3333aa; background:#ffffff; font:11pt 細明體;}
#LogonRec th { text-align:center; font-weight:normal; background:#FF6633; color:#ffffff; padding:3px 5px 3px 5px; cursor:pointer; }
#LogonRec td { text-align:left; background:#EEEEEE; padding:3px 5px 3px 5px; }
#LogonRec input { font:11pt 細明體; padding:1px 5px 1px 3px; }
#LogonRec #edDateS { width:5em; }
#LogonRec #edDateE { width:5em; }
#LogonRec #edIP    { width:7.5em; }
#LogonRec #edID    { width:6em; }
#LogonRec #bnQuery { padding:3px 1px 1px 1px; }

#AdmData { text-align:center; }
#AdmData #editor    { border:1px solid #33aa33; background:#ffffff; margin-bottom:10px; }
#AdmData #editor th { font-weight:normal; background:#777777; color:#ffffff; padding:3px 5px 3px 5px; }
#AdmData #editor td { text-align:left; background:#eeeeee; padding:3px 5px 3px 5px; }
#AdmData #list      { border:1px solid #3333aa; background:#ffffff; }
#AdmData #list   tr { background:#eeeeee; }
#AdmData #list   th { font-weight:normal; background:#555555; color:#ffffff; padding:3px 5px 3px 5px; }
#AdmData #list   td { text-align:center; padding:3px 5px 3px 5px; cursor:pointer; }
#AdmData input { font:12pt 細明體; padding:3px 5px 3px 5px; cursor:pointer; }
#AdmData #edID   { width:6em; }
#AdmData #edName { width:4em; }
#AdmData #edPW1  { width:20em; font:6pt 細明體; }
#AdmData #edPW2  { width:20em; font:6pt 細明體; }
#AdmData #bnNew  { padding:3px 3px 1px 1px; }
#AdmData #bnEdit { padding:3px 3px 1px 1px; }

#CorpData { text-align:center; }
#CorpData #editor    { border:1px solid #33aa33; background:#ffffff; margin-bottom:10px; }
#CorpData #editor th { font-weight:normal; background:#777777; color:#ffffff; padding:3px 5px 3px 5px; }
#CorpData #editor td { text-align:left; background:#eeeeee; padding:3px 5px 3px 5px; }
#CorpData #list      { border:1px solid #3333aa; background:#ffffff;  font:9pt 細明體;}
#CorpData #list   tr { background:#eeeeee; }
#CorpData #list   th { font-weight:normal; background:#555555; color:#ffffff; padding:3px 5px 3px 5px; }
#CorpData #list   td { text-align:left; padding:3px 5px 3px 5px; cursor:pointer; }
#CorpData #edPartNo   { width:3em; font:11pt 細明體; }
#CorpData #edPartName { width:20em; font:11pt 細明體; }
#CorpData #edCallName { width:20em; font:11pt 細明體; }
#CorpData #edTelNo    { width:20em; font:11pt 細明體; }
#CorpData #edFaxNo    { width:20em; font:11pt 細明體; }
#CorpData #edAddress  { width:40em; font:11pt 細明體; }
#CorpData #input { font:12pt 細明體; padding:3px 5px 3px 5px; }
#CorpData #list1      { border:1px solid #3333aa; background:#ffffff;  font:12pt 細明體;}
#CorpData #list1   tr { background:#eeeeee; }
#CorpData #list1   th { font-weight:normal; background:#555555; color:#ffffff; padding:3px 5px 3px 5px; }
#CorpData #list1   td { text-align:left; padding:3px 5px 3px 5px; cursor:pointer; }

/* 響應式表格設計 */
@media (max-width: 768px) {
    #LogonRec table,
    #AdmData #list,
    #AdmData #editor,
    #CorpData #list,
    #CorpData #list1,
    #CorpData #editor {
        font-size: 9pt;
        width: 100%;
        overflow-x: auto;
        display: block;
    }
    
    #LogonRec th,
    #LogonRec td,
    #AdmData #list th,
    #AdmData #list td,
    #AdmData #editor th,
    #AdmData #editor td,
    #CorpData #list th,
    #CorpData #list td,
    #CorpData #list1 th,
    #CorpData #list1 td,
    #CorpData #editor th,
    #CorpData #editor td {
        padding: 5px 3px;
        font-size: 9pt;
    }
    
    #CorpData #edPartNo,
    #CorpData #edPartName,
    #CorpData #edCallName,
    #CorpData #edTelNo,
    #CorpData #edFaxNo,
    #CorpData #edAddress {
        width: 100%;
        max-width: 100%;
    }
}

/* 改善按鈕樣式 */
input[type="button"],
input[type="submit"],
button {
    transition: all 0.3s ease;
    cursor: pointer;
}

input[type="button"]:hover,
input[type="submit"]:hover,
button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 改善輸入框樣式 */
input[type="text"],
input[type="password"],
input[type="date"],
select,
textarea {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 5px rgba(102, 126, 234, 0.3);
}