@charset "utf-8";
@import url("reset.css");
/* CSS Document */

body { background-image:url(../images/bg_all.gif); background-repeat:repeat; margin:0; font-family: Arial,"新細明體";}

.TOPBG { width:100%; height:182px; background-image:url(../images/bg_top.gif); background-position:top center; background-repeat:repeat-x;}
.TOPBG .TOP { width:680px; height:182px; background-image:url(../images/fra_top.png); background-position:bottom; background-repeat:no-repeat; margin:0 auto; position:relative;}
.TOPBG .TOP h1 { display:block; width:505px; height:152px; background-image:url(../images/slogan.png); position:absolute; left:15px; top:10px; text-indent:-9999px;}
.TOPBG .TOP a { width:194px; height:195px; background-image:url(../images/img_01.png); position:absolute; left:480px; top:3px; text-indent:-9999px;}
.TOPBG .TOP a:hover { top:1px;}

.TOPBG .TOP2 { width:600px; height:182px; background-image:url(../images/fra2_top.png); background-position:bottom; background-repeat:no-repeat; margin:0 auto; position:relative;}
.TOPBG .TOP2 h1 { display:block; width:505px; height:152px; background-image:url(../images/slogan.png); position:absolute; left:-15px; top:10px; text-indent:-9999px;}
.TOPBG .TOP2 a { width:194px; height:195px; background-image:url(../images/img_01.png); position:absolute; left:420px; top:3px; text-indent:-9999px;}
.TOPBG .TOP2 a:hover { top:1px;}


.MIDBG { width:100%; background-image:url(../images/bg_mid.gif); background-position:top center; background-repeat:repeat;}
.MIDBG .MID { width:680px; height:450px; background-image:url(../images/fra_mid.png); background-repeat:repeat-y; margin:0 auto;}
.MIDBG .MID .LEFT { width:214px; margin-left:12px; float:left; position:relative;}
.MIDBG .MID .LEFT h3 { width:226px; height:53px; background-image:url(../images/img_02.png); text-indent:-9999px; position:absolute; top:-29px;}
.MIDBG .MID .LEFT a.BA1 { width:226px; height:295px; position:absolute; top:0px;}
.MIDBG .MID .LEFT a.BA2 { width:226px; height:100px; position:absolute; top:300px;}

.MIDBG .MID .RIGHT { width:422px; float:right; margin-right:13px; position:relative;}
.MIDBG .MID .RIGHT h2 { display:block; width:422px; height:42px; background-image:url(../images/img_03.png); position:absolute; top:-18px; text-indent:-9999px;}
.MIDBG .MID .RIGHT .FF { width:422px; position:absolute; top:35px;}
/*帳密登入區*/
table.login_table { width:422px; background-color:#f9f8f8;}
td.BB { font-size:15px; }
table.login_table td { padding:4px; }
/*忘記密碼按鈕*/
a.btn_pwForget { display:block; float:right; width:75px; height:17px; background-image:url(../images/btn_forget02.jpg); text-indent:-9999px; display:inline; margin:5px 20px 0 0;}
a.btn_pwForget:hover { position:relative; top:1px; }
/*帳密登入區-input外觀設定*/
input.input-text { width:230px; height:25px; -webkit-box-shadow:#FFFFFF 0 1px 1px; background-attachment:initial; background-clip:initial; background-color:#FFFFFF; background-image:url(../images/input-bg.png); background-origin:initial; background-position:0 0; background-repeat:no-repeat; border-bottom-color:#BBBBBB; border-bottom-left-radius:2px 2px; border-bottom-right-radius:2px 2px; border-bottom-style:solid; border-bottom-width:1px; border-left:#BBBBBB solid 1px; border-right:#BBBBBB solid 1px; border-top-color:#BBBBBB; border-top-left-radius:2px 2px; border-top-right-radius:2px 2px; border-top-style:solid; border-top-width:1px; color:#777777; display: inline; font-family: Arial,"新細明體";; margin:0 5px 0 0; line-height:25px; padding:0 5px; text-shadow:#FFFFFF 0 0 1px; font-size:15px; letter-spacing:1px; }
input:focus, textarea:focus { -webkit-box-shadow:rgba(0, 0, 0, 0.0976563) 0 1px 3px inset, rgba(82, 168, 236, 0.597656) 0 0 8px; border-bottom-color:rgba(82, 168, 236, 0.796875); border-left-color:rgba(82, 168, 236, 0.796875); border-right-color:rgba(82, 168, 236, 0.796875); border-top-color:rgba(82, 168, 236, 0.796875); box-shadow:rgba(0, 0, 0, 0.0976563) 0 1px 3px inset, rgba(82, 168, 236, 0.597656) 0 0 8px; outline-color:initial; outline-style:initial; outline-width:0; }
/*帳密登入區-input外觀設定*/
input.input-text2 { width:250px; height:25px; -webkit-box-shadow:#FFFFFF 0 1px 1px; background-attachment:initial; background-clip:initial; background-color:#FFFFFF; background-image:url(../images/input-bg.png); background-origin:initial; background-position:0 0; background-repeat:no-repeat; border-bottom-color:#BBBBBB; border-bottom-left-radius:2px 2px; border-bottom-right-radius:2px 2px; border-bottom-style:solid; border-bottom-width:1px; border-left:#BBBBBB solid 1px; border-right:#BBBBBB solid 1px; border-top-color:#BBBBBB; border-top-left-radius:2px 2px; border-top-right-radius:2px 2px; border-top-style:solid; border-top-width:1px; color:#777777; display: inline; font-family: Arial,"新細明體";; margin:0 10px 0 0; padding:3px 8px; text-shadow:#FFFFFF 0 0 1px; letter-spacing:1px; font-size:15px; line-height:25px; }
input.input-text2:focus { -webkit-box-shadow:rgba(0, 0, 0, 0.0976563) 0 1px 3px inset, rgba(82, 168, 236, 0.597656) 0 0 8px; border-bottom-color:rgba(82, 168, 236, 0.796875); border-left-color:rgba(82, 168, 236, 0.796875); border-right-color:rgba(82, 168, 236, 0.796875); border-top-color:rgba(82, 168, 236, 0.796875); box-shadow:rgba(0, 0, 0, 0.0976563) 0 1px 3px inset, rgba(82, 168, 236, 0.597656) 0 0 8px; outline-color:initial; outline-style:initial; outline-width:0; }
/*帳密登入區-重整認證碼按鈕*/
#refresh { display:inline-block; width:20px; height:17px; background-image:url(../images/btn_refresh.jpg); background-repeat:no-repeat; text-indent:-9999px; }
#refresh:hover { position:relative; top:1px; }
/*帳密登入區-記住我的帳號&自動登入*/
td.smallWord { font-size:13px; color:#999;}
td.smallWord input { margin-right:3px;}
/*帳密登入區-Easy Tooltip */
#autoLogin { color:#005ae2; text-decoration: none; }
#easyTooltip { padding:2px 5px; border:1px solid #ababab; background:#fffcd9; color:#636363; margin:20px 10px; font-size:12px; }
#easyTooltip2 { padding:4px 10px 10px; border:1px solid #ababab; background:#fffcd9; color:#636363; margin:20px 10px; width:250px; line-height:18px; font-size:12px; }
#easyTooltip2 h4, #easyTooltip2 p { margin:.25em 0;}

.MIDBG .MID .RIGHT .BTN { width:422px; position:absolute; top:222px;}

.MIDBG .LINKSBG { width:680px; background-image:url(../images/fra_mid.png); background-repeat:repeat-y; margin:0 auto; }
.MIDBG .LINKSBG .LINK { width:654px; height:80px; margin-left:13px; position:relative;}
.MIDBG .LINKSBG .LINK img { position:absolute; top:25px;}
.MIDBG .LINKSBG .LINK a {
	display:block;
	height:61px;
	position:absolute;
	top:44px;
	text-indent:-9999px;
}
.MIDBG .LINKSBG .LINK a:hover { top:34px;}
.MIDBG .LINKSBG .LINK a.LI1 {
	width:106px;
	background-image:url(../images/link_1.png);
	left:100px;
}
.MIDBG .LINKSBG .LINK a.LI2 {
	width:87px;
	background-image:url(../images/link_2.png);
	left:250px;
}
.MIDBG .LINKSBG .LINK a.LI3 {
	width:172px;
	background-image:url(../images/link_3.png);
	left:390px;
}
.MIDBG .LINKSBG .LINK a.LI4 {
	width:112px;
	background-image:url(../images/link_4.png);
	left:547px;
}
.MIDBG .LINKSBG .LINK a.LI5 {
	width:84px;
	background-image:url(../images/link_5.png);
	left:512px;
}

.MIDBG .MID2 { width:600px; height:406px; background-image:url(../images/fra2_mid.png); background-repeat:repeat-y; margin:0 auto;}
.MIDBG .MID2 .CON { width:576px; position: relative; left:12px;}
.MIDBG .MID2 .CON h2 { display:block; width:576px; height:42px; background-image:url(../images/img_04.png); position:absolute; top:-18px; text-indent:-9999px;}
.MIDBG .MID2 .CON .FFF { width:576px; position:absolute; top:35px; background-color:#f9f8f8;}
table.no_table { width:576px; height:54px; background-image:url(../images/img_05.gif); margin:10px 0;}
/*防盜密碼*/
table.code_table { margin:10px auto;}
table.code_table td { padding:7px;}
/*防盜卡遺失按鈕*/
a.btn_codeLost { display:block; width:90px; height:17px; background-image:url(../images/btn_codeLost.jpg); text-indent:-9999px; margin:0 auto;}
a.btn_codeLost:hover { position:relative; top:1px; }
/*無法登入按鈕*/
a.btn_codeLost2 { display:block; width:81px; height:17px; background-image:url(../images/btn_codeLost2.jpg); text-indent:-9999px; margin:0 auto;}
a.btn_codeLost2:hover { position:relative; top:1px; }

.LINE { margin-top:225px;}

table.BBTN { margin:0 auto; margin-top:5px;}
a.BBTN1 { display:block; width:240px; height:72px; background-image:url(../images/btn_01.png); text-indent:-9999px; margin:6px auto;}
a.BBTN1:hover { background-position:bottom;}
a.BBTN2 { display:block; width:185px; height:49px; background-image:url(../images/btn_02.png); text-indent:-9999px;}
a.BBTN2:hover { background-position:bottom;}
a.BBTN3 { display:block; width:185px; height:49px; background-image:url(../images/btn_03.png); text-indent:-9999px;}
a.BBTN3:hover { background-position:bottom;}
a.BBTN4 { display:block; width:185px; height:49px; background-image:url(../images/btn_04.png); text-indent:-9999px;}
a.BBTN4:hover { background-position:bottom;}
a.BBTN5 { display:block; width:185px; height:49px; background-image:url(../images/btn_05.png); text-indent:-9999px;}
a.BBTN5:hover,a.BBTN6:hover { background-position:bottom;}
a.BBTN6 { display:block; width:185px; height:49px; background-image:url(../images/btn_06.png); text-indent:-9999px;}
.fontbg{ margin: 20px 0 5px 0;}

.BOTBG { clear:both; width:100%; background-image:url(../images/bg_bot.gif); background-position:top center; background-repeat:repeat-x;}
.BOTBG .BOT { width:680px; background-image:url(../images/fra_bot.png); background-position:top; background-repeat:no-repeat; margin:0 auto;}
.BOTBG .BOT ul.ATT{ width:640px; margin:0 auto; padding-top:38px;}

.BOTBG .BOT2 { width:600px;  background-image:url(../images/fra2_bot.png); background-position:top; background-repeat:no-repeat; margin:0 auto;}
.BOTBG .BOT2 ul.ATT{ width:560px; margin:0 auto; padding-top:38px;}

ul.ATT p { font-size:15px; font-weight:bold; padding-bottom:5px;}
ul.ATT li { font-size:13px; font-family: Arial,"新細明體"; line-height:22px; padding-left:20px; background-repeat:no-repeat;}
ul.ATT li a { color:#900; text-decoration:underline;}
li.LI1 { background-image:url(../images/icon1.png);}
li.LI2 { background-image:url(../images/icon2.png);}
li.LI3 { background-image:url(../images/icon3.png);}
li.LI4 { background-image:url(../images/icon4.png);}
li.LI5 { background-image:url(../images/icon5.png);}
li.LI6 { background-image:url(../images/icon6.png);}
li.LI7 { background-image:url(../images/icon7.png);}
li.LI8 { background-image:url(../images/icon8.png);}
li.LI9 { background-image:url(../images/icon9.png);}

.RED { color:#900 }