@charset "utf-8";

body {
 overflow-x: hidden;
 overflow-y: auto;
 color: #333;
}
input.text {
 color: #C00;
 font-size: 14px;
 border: 1px solid #09F;
 padding: 4px;
 box-shadow: 2px 2px 3px 0px #999 inset; 
}
/**背景區域**/
#pagebg {
 overflow-x: hidden;
 overflow-y: auto;
}
#pagebg header {
 width: 100%;
 height: 6em;
 padding: 0.5em;
 /*border: #0F0 1px solid;*/
}
#pagebg header ul.logo, #pagebg header ul.lang {
 float: left;
 margin-left: 1%;
 /*border: #F00 1px solid;*/
}
#pagebg header ul.logo {
 margin-left: 5%;
 width: 45%;
 height: 90px;
 background-image: url(../../../images/lib_logo.png);
 background-repeat: no-repeat;
 background-position: left center;  
}
#pagebg header ul.lang {
 margin-top: 3.5em;
 margin-left: 30%;
}
#pagebg header ul.lang li {
 float: left;
 padding: 0.5em;
}
#pagebg section {
 float: left;
 display: block;
 background-image: url(../../../images/login-reader-bg.png);
 background-repeat: no-repeat;
 background-position: center bottom;
 width: 100%;
 height: 260px;
 background-color: #2FA8D7;
 border-top: 1px solid #369;
 border-bottom: 1px solid #369;
}
/**歡迎及登入區域**/
div.house {
 float: left;
 margin-top: 4.75em;
 width : 61%;
 height: 194px;
 /*opacity: 0.2;*/
 background-image: url(../../../images/house.png);
 background-repeat: no-repeat;
 background-position: right bottom;
 /*border: 1px solid #FFF;*/
}
div.middle {
 float: left;
 margin-top: -17.75em; 
 width : 100%;
 height: 260px;
}
ul.welcome, ul.login, ul.qrcode {
 float: left;
 margin-left: 2%;
 /*border: 1px solid #FFF; */
}
/*20131216 增加手機Qrcode 的連結*/
ul.qrcode {
 margin-top: 3em;
 /*width: 23%;*/
 width: 15%;
 /*border: #FFF 1px solid;*/
}
ul.qrcode li {
 text-align: center;
 padding: 2px 4px;
}
ul.qrcode li.bg  {
 height: 158px;
 background-image: url(../../../images/qrcode_s.png);
 background-repeat: no-repeat;
 background-position: center center;
/* border: 1px solid #FFF;*/
}
ul.qrcode li.applink  {
 /*background-color: #FFF;*/
 background: linear-gradient(to right, rgba(255,255,255,0) 5%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 95%);
}
/*20131216 增加手機Qrcode 的連結*/

ul.welcome {
 margin-top: 1.5em;
 padding: 0.5em 0;
 width: 32%;
 background: linear-gradient(to right, rgba(255,255,255,0) 20%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 80%);
 border-radius: 5px;
}
ul.welcome li {
 font-size: 1em;
 text-align: center;
 padding:  0.5em 0.25em;
}
/*ul.login {
 margin-top: 1.25em;
 padding: 0.5em;
 width: auto;
 background-color: rgba(255,255,255,0.8);
 box-shadow: 0px 0px 15px #333;
 border-radius: 5px;
}*/
ul.login {
 float: none;
 position: absolute;
 top: 7em; 
 left: 48%;
 margin-top: 1.25em;
 padding: 0.5em;
 width: auto;
 background-color: rgba(255,255,255,0.8);
 box-shadow: 0px 0px 15px #333;
 border-radius: 5px;
}
ul.login li {
 padding: 6px;
}
ul.login li span {
 padding: 0px 5px;
}

/**20220101 東海 SSO openid 認證**/
ul.login_openid {
 float: left;
 margin-left: 2%;
 margin-top: 35px;
 /*width: 48%;*/
	width: auto;
	padding: 0.75em 0.5em;
	background-color: rgba(255,255,255,0.8);
	border: #06C 1px solid;
	border-radius: 5px;
 box-shadow: 2px 2px 8px #666;	
}
ul.login_openid li {
	text-align: center;
	color: #00F;
	font-size: 1.25em;
	font-weight: bold;
 padding: 0.5em;
}
ul.login_openid li span {
 padding: 5px;
}
/**20220101 東海 SSO openid 認證**/

a.authimg {
 background-image: url(../../../images/reload.png);
 background-repeat: no-repeat;
 background-position: center center;
 color: #333;
 margin-left: 5px;
 padding: 2px 7px;
 cursor: pointer;
}
a.authimg-over {
 background-image: url(../../../images/reload-over.png);
 background-repeat: no-repeat;
 background-position: center center;
 color: #333;
 margin-left: 5px;
 padding: 2px 7px;
 cursor: pointer;
}
input.text {
 width: 180px;
}
/**歡迎及登入區域**/

div.shadow {
 float: left;
 width: 100%;
 height: 34px;
 background-image: url(../../../images/shadow.png);
 background-repeat: no-repeat;
 background-position: center top;
 /*border: #F00 1px solid;*/ 
}

/**頁面的範圍**/
#pagearea {
 top: 45px;
 left: 0px;
 width: 100%;
 height: auto;
}
section.loginarea {
 width : 96%;
 height: 220px;
 margin: 0 auto;
 /*border: 1px solid #00F;*/
}

/**iframe**/
#bulletin, #status {
 float: left;
 margin-top: -1em;
 height: 320px; 
 border-radius: 5px;
 box-shadow: 0px 0px 5px #666;
 padding: 0px 10px 10px 10px;
 background-color: #FFF;
}
#bulletin {
 width: 44%;
 margin-left: 2%;
 border: 1px solid #69C;
}
#status {
 width: 46%;
 margin-left: 2%;
 border: 1px solid #990;
}
footer {
 float: left;
 margin-top: 1.25em;
 width: 100%;
 background-color: #09c;
}
ul.contact {
 margin-top: 0px;
 padding: 4px 0;
 text-align: center;
 border-top: 1px solid #999;
 border-bottom: 1px solid #999;
 background-color: rgba(255,255,255,0.5);
}
ul.contact li {
 display: inline;
}
ul.contact li span {
 padding: 0px 5px;
}
/**iframe**/

/**最新消息，及空間狀態**/
section.status, div.bulletin, section.statusKiosk {
 height: 320px;
 padding: 0px;
}
section.status, section.statusKiosk {
 overflow: auto;
}
section.status h4, div.bulletin h4 {
 line-height: 28px;
 text-align: center;
 background-repeat: repeat-x;
 background-position: center top;
}
section.statusKiosk {
 font-size: 1.25em;
 height: 700px;
 padding: 0px;
 line-height: 29px;
}
section.status h4 {
 background-color: #C03;
 color: #FEF;
 background-image: url(../../../images/warn-bg.png);
 border-bottom: 1px solid #900;
}
div.bulletin h4 {
 background-color: #69C;
 color: #EFF;
 background-image: url(../../../images/news-bg.png);
 border-bottom: 1px solid #036;
}
div.bulletin li {
 padding: 3px 2px;
}
div.bulletin li:nth-child(even) {
 background-color: #EEE;
}
tr:nth-child(odd) {
 background-color: #EEE;
}
div.bulletin ul {
 font-size: 13px;
 height: 275px; 
 overflow: auto;
}
section.status ul, section.statusKiosk ul {
 font-size: 13px;
 height: auto;
 overflow: auto;
}
section.status li, section.statusKiosk li {
 float: left;
 width: 90%;
}
section.status table, section.statusKiosk table {
 border-collapse: collapse;
 width: 100%;
}
section.status th, section.statusKiosk th {
 background-image: url(../../../images/dt-bg.png);
 background-repeat: repeat-x;
 background-position: left center;
 height: 30px;
}
section.statusKiosk th {
 height: 40px;
 background-image: none;
 border-bottom: 1px solid #C90;
 background-color: #FC6;
}
section.status td, section.statusKiosk td {
 padding: 2px 2px;
 overflow: hidden;
}
section.status td span, section.statusKiosk td span {
 padding-left: 10px;
}

div.funarea {
 padding-left: 70px;
}
/**自動更新圖文認證**/
#secTime, span.update {
 color: #C00;
}
/**20130624**/
#QandA {
 color: #FFF;
 background-image: url(../../../images/qa-32.png);
 background-repeat: no-repeat;
 background-position: center center;
 height: 28px;
 width: 28px;
 margin-left: 5px;
 padding: 6px 15px 6px 13px;
 cursor: pointer;
}
#QandA:hover {
 background-image: url(../../../images/qa-over-32.png); 
}
#QandA-note {
 display: none;
 position: absolute;
 top: 14em;
 left: 10%;
 width: 80%;
 padding: 1%;
 background-color: rgba(255,255,255,0.9);
 border-radius: 5px;
 box-shadow: 2px 2px 5px 0px #999 inset;
 border: 1px solid #06C;
}
#QandA-note dt {
 color: #03F;
 font-size: 1.25em;
 font-weight: bold;
 padding: 0.25em 0;
}
#QandA-note dd {
 color: #333;
 font-size: 1em;
 padding: 0.25em 0;
 /*background-color: #EEF;*/
}
#QandA-close {
 color: #FFF;
 position: absolute;
 background-image: url(../../../images/closex-32.png);
 background-repeat: no-repeat;
 background-position: center center;
 top: 5px;
 right: 5px;
 height: 32px;
 width: 32px;
 padding: 0px;
 cursor: pointer;
}
#QandA-close:hover {
 background-image: url(../../../images/closex-over-32.png);
}

/*20200228 新冠病毒疫情公告*/
dl.COVID-19 {
 display: block;
 position: absolute;
 padding: 1em;
 width: 50%;
 left: 25%;
 top: 7em;
 height: auto;
 border: #C00 0.5em solid;
 border-radius: 0.5em;
 background-color: rgba(255,255,255,0.9);
 box-shadow: 3px 3px 8px 0px #999 inset;
}
dl.COVID-19 dt {
 color: #000;
 font-size: 1.25em;
 font-weight: bold;
 padding: 0.375em;
}
dl.COVID-19 dd {
 text-align: center;
 padding: 0.25em;
}
dl.COVID-19 button {
 color: #FFF;
 font-family: "微軟正黑體", "新細明體", "標楷體";
 font-size: 1.25em;
 padding: 0.125em 0.25em;
 border-radius: 5px;
 border-width: 1px;
 cursor: pointer;
}
/*藍色*/
button.blue {
 background: #00F;
 border: 1px solid #0000CC;
}
button.blue:hover {
 background: #33F;
 box-shadow: 0px 0px 7px 0px #06F;
}