@charset "UTF-8"; /* # Reset
================================================== */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center
, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form
, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu
, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary
, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video 
{ margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 
body { line-height: 1; } 
ol, ul { list-style: none; } 
blockquote, q { quotes: none; } 
    blockquote:after, blockquote:before, q:after, q:before { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; } 
input::-moz-focus-inner { border: 0; padding: 0; } 
button::-moz-focus-inner { padding: 0; border: 0; }
a.button::-moz-focus-inner { border: 0; padding: 0; }

/* # General styles
================================================== */

html, body { height: 100%;width: 100%;-webkit-text-size-adjust:none; font-smooth:always; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */}
::-moz-selection{ color: #fff; background: #275b7a; }
::selection { color: #fff; background: #275b7a; }
body { font-family:微軟正黑體, "Microsoft JhengHei", Arial, Verdana, Helvetica, sans-serif;font-size: 14px;line-height: 20px;color: #333;background: #fff;}
h1,h2,h3,h4,h5,h6 { margin-bottom: 10px; font-weight: normal;}
h1 { font-size:32px;line-height: 38px;}
h2 { font-size:28px;line-height: 34px;}
h3 { font-size:24px;line-height: 26px;}
h4 { font-size:20px;line-height: 22px;}
h5 { font-size:16px;line-height: 21px;}
h6 { font-size:14px;line-height: 17px;}
h5.lead { font-size:15px;line-height: 21px; font-weight: bold;}
p { margin-bottom: 10px;}
p:last-child { margin-bottom: 0;}
.no-bottom{ margin-bottom:0px; }
em { font-style: italic; }
strong, b { font-weight: bold; }
a {outline:none;color: #36c;font-family:微軟正黑體, "Microsoft JhengHei", Arial, Verdana, Helvetica, sans-serif;}
a:hover { text-decoration: none;}
img, iframe {margin:0; padding:0 !important}
.alignleft { float:left;}
.alignright { float:right; }
.aligncenter { display: block;margin: 10px auto 10px auto; }
.divider { float: left;width: 100%;height: 70px;}
.red { color: #c00; }
.green { color: #6faa39; }
.grey { color: #aaa; }
.gold { color: #ae923c; }
.burgundy { color: #900; }
.blue { color: #33c; }
.white {color:#fff !important;}
.clear { clear: both; display: block; }
.note { font-size: 12px;}
.eType { font-family: Verdana, Arial, Helvetica, sans-serif; }
.border { border: 2px solid #bbb;}
.upper { text-transform:uppercase; }

/* === Text alignment === */
.textL { text-align: left!important; }
.textC { text-align: center!important; }
.textR { text-align: right; }

/* === Device class === */
.pc-only { display:block;}
.pc-hidden, .pad-only, .mobile-only, .mobile-350, .mobile-480{ display: none;}

/* === List === */
.faq-holder ol, .cc-form ol{  list-style: decimal; padding-left: 30px;}
.faq-holder ol li, .cc-form ol li{  list-style: decimal; border:none; margin:0;}
.faq-holder ul.disc { list-style: disc; padding-left: 30px;}

/* === List styles === */
.disc { list-style: disc; padding-left: 12px; margin-bottom: 10px;}
ol { list-style: decimal; padding-left: 32px; margin-bottom: 10px;}

/* # Header
================================================== */
#header { height: 100px; padding:0; border-bottom: 4px solid #fff100; position:absolute; top:0; width:100%;z-index:9; }
#header-wrapper { width: 960px; margin: 0 auto 0; position:relative; }
.logo-wrapper { float: left; width: 430px; margin: 10px 0 0 14px; }
    .logo-wrapper > a {
        text-decoration:none;
    }
#logo img {width: 210px; margin:0;}

/* # logout_message
================================================== */
.logout_message{ width:298px; height:476px; z-index:100; display:block; background:#f3f3f3; position:absolute; top:38px; left:0px;
box-sizing:border-box; -moz-box-sizing:border-box;-webkit-box-sizing:border-box; border:5px solid #01aa4d; padding:15px;
font-size:16px; line-height:28px;text-align:center;}

.logout_message .buttonD{width:100px; margin-left:76px; margin-top:20px; height:30px; padding:0px; text-decoration:none;}
.logout_message .text_green{ font-weight:bold; text-decoration:none; color:#008852;}
.logout_message .text_red{ font-weight:bold; text-decoration:none; color:#F00;}

/* # Navigation
================================================== */
#topnav{ width: 100%; background: #00a94f;font-size: 12px;color: #fff;}
.topnav { width: 960px; padding: 0 ; margin: 0 auto 0; }
.topnav ul{ float:right; }
.topnav li{ float:left; margin: 0 0 0 12px; list-style:none; padding: 2px 0;font-family:微軟正黑體, "Microsoft JhengHei", Arial, Verdana, Helvetica, sans-serif;}
.topnav li a{ color: #fff; float:left; text-decoration:none;}
.topnav li a:hover{ color: #FFF437; text-decoration:none;}

/* # Wrapper
================================================== */
#body-wrapper { min-height:100%; position:relative; }

#wrapper { width: 100%; margin: 0 auto 0; overflow: hidden;}
#home-wrapper { width: 100%; margin: 0 auto 0;overflow: hidden; position:relative; padding:104px 0 146px 0; }
#content-wrapper, #banner-wrapper { width: 960px; padding: 0 ; margin: 10px auto 0; position:relative; min-height: 500px; }
#box-wrapper { width: 960px; padding: 0; margin: 0 auto 0; position:relative;}

/* # Structure
================================================== */
.col-s a{
   font-size:14px;
}

.col-s li{
  text-indent: 0px!important;
}

.col-full {
    position:relative;
    clear:both;
    float:left;
    width:100%;
    overflow:hidden;
    background: #fff;
    border: 1px solid #cdcdcd;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
    margin: 10px 0 30px;
}
.col-inner {width: 85%; margin: 0 auto 0;}
.col-subnav { width: 192px; float:left; position: relative; display:block;}
.col-subcontent { width: 768px; float:left; position: relative; display:block;}
.col-mask { background: #fff url(../images/bg-content.png) top left repeat-y;}
/*.col-mask { position:relative; clear:both; float:left; width:100%; overflow:hidden; background: url(../images/bg-content.png) top repeat-y; border: 1px solid #cdcdcd; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); margin: 10px 0 30px; }
.col-left { float:left; width:100%; position:relative;}
.col1, .col2{ float:left; position:relative; padding:0 0 1em 0; overflow:hidden;}
.col-main .col-left { right:80%;}
.col-main .col1 { width:80%; left:100%;}
.col-main .col2 { width:20%; left:0;}*/

/* # Grids
================================================== */
.fluid { width: 100%; *zoom: 1; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; }
.fluid:before, .fluid:after { display: table; content: ""; }
.fluid:after { clear: both; }
.fluid .rtl-inputs [class*="grid"] { float: right; }
.fluid [class*="grid"] { display: block; width: 100%; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; float: left; margin-left: 2.127659574%; *margin-left: 2.0744680846382977%; }
.fluid [class*="grid"]:first-child { margin-left: 0; }

.fluid .grid12 { width: 99.99999998999999%; *width: 99.94680850063828%;}
.fluid .grid11 { width: 91.489361693%; *width: 91.4361702036383%; }
.fluid .grid10 { width: 82.97872339599999%; *width: 82.92553190663828%; }
.fluid .grid9 { width: 74.468085099%; *width: 74.4148936096383%; }
.fluid .grid8 { width: 65.95744680199999%; *width: 65.60425531263828%; }
.fluid .grid7 { width: 57.446808505%; *width: 57.3936170156383%; }
.fluid .grid6 { width: 48.93617020799999%; *width: 48.88297871863829%; }
.fluid .grid5 { width: 40.425531911%; *width: 40.3723404216383%; }
.fluid .grid4_1 { width: 37.914893614%; *width: 37.6617021246383%; margin-left: 1.127659574%; margin-top: 0.8%; }
.fluid .grid4 { width: 31.914893614%; *width: 31.6617021246383%; }
.fluid .grid3 { width: 23.404255317%; *width: 23.3510638276383%; }
.fluid .grid2 { width: 14.89361702%; *width: 14.8404255306383%; }
.fluid .grid1_1 { width: 9.55%; *width: 9.55%; margin-left: 0.5%; *margin-left: 0.5%;}
.fluid .grid1 { width: 6.382978723%; *width: 6.329787233638298%; }

/* # login_area
================================================== */
ul.login_area{}
ul.login_area li{ height:40px; line-height:40px;background:url(../images/itemsList.png) repeat-x right 0px; color:#fff;width:50%; float:left; border-right:1px solid #ad2e00;border-bottom:1px solid #ad2e00;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;}
ul.login_area li:first-child{border-left:1px solid #ad2e00;}
ul.login_area li a{ text-decoration:none;color:#fff; width:78px; height:40px; display:inline-block; font-size:15px; font-weight:bold;background:url(../images/leftArrow.png) no-repeat 10px center; text-indent:17px; padding-left:5px;}
ul.login_area li a:hover{ color:#fff437;background:url(../images/leftArrow_hover.png) no-repeat 10px center;}

/* # Subnav
================================================== */
#submenu li{  margin:0; padding:0;}
#submenu .toggler{
    cursor:pointer;
    background:url(../images/menu-collapse.png) no-repeat right 0px;
    display: block;
    color: #333;
    border-bottom: 1px solid #e1e1e1;
    position: relative;
    padding: 0px 16px 0px 12px;
    height:40px;
    line-height:40px;
    font-weight:bold;
    color:#004b31;
}
#submenu .first-child { border-top-left-radius: 3px; -webkit-border-radius-topleft: 3px; -moz-border-radius-topleft: 3px;}
#submenu .toggler:hover{background:url(../images/menu-collapse.png) no-repeat right -40px; color:#FFF;}
#submenu .toggler div.submenuIcon{ display:none;}
#submenu .toggler div.submenuTitle{ position:relative;width: 156px;}
#submenu .toggler div.submenuTitle img{ position:relative; vertical-align: middle; margin-right: 10px; margin-top: -2px;}
#submenu .container{ display:none;border-bottom: 1px solid #e1e1e1; padding-top:6px; padding-bottom:7px; background:#f7f7f7;}
#submenu .container a{ font-size: 13px; height:30px; line-height:30px; display: block; padding: 0px 5px 0px 40px; color: #004b31; border-bottom: none; position: relative; background: url(../images/rightArrowLight2.png) no-repeat 25px center; text-decoration:none; font-weight:bold;}
#submenu .container a:hover{ background: url(../images/rightArrowLight.png) no-repeat 25px center; color:#008852;}
#submenu .container li a.current{ background: url(../images/rightArrowLight-green.png) no-repeat 25px center;color:#008852;}

.msubmenu { display:block;}
.msubmenu-holder { width: 100%; text-align: center; position: absolute; margin-top: -10px; z-index:2; }
.msubmenu-trigger { margin: 0 auto 0; padding: 6px; color: #fff; display:block; width: 120px; text-decoration:none; height: 20px;
    border-bottom-right-radius: 3px;
    -webkit-border-radius-bottomright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-bottom-left-radius: 3px;
    -webkit-border-radius-bottomleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    background: #eeeeee;
    background: -moz-linear-gradient(top, #333333 0%, #999999 80% ,#999999 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#999999));
    background: -webkit-linear-gradient(top,  #333333 0%, #999999 80% ,#999999 100%);
    background: -o-linear-gradient(top,  #333333 0%, #999999 80% ,#999999 100%);
    background: -ms-linear-gradient(top, #333333 0%, #999999 80% ,#999999 100%);
    background: linear-gradient(top,  #eeeeee 0%,#dfdfdf 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#999999',GradientType=0 );
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.37);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.37);
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.37);
}

/* # Main content
================================================== */
.content-holder, .event-holder { padding: 25px;}
.content-row, .event-row { margin: 15px 0 0 0;}
.mt15 {margin-top:15px !important;}
.bgGrey {
    padding: 5px 0;
    display: block;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background: #eeeeee;
    background: -moz-linear-gradient(top,  #eeeeee 0%, #dfdfdf 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#dfdfdf));
    background: -webkit-linear-gradient(top,  #eeeeee 0%,#dfdfdf 100%);
    background: -o-linear-gradient(top,  #eeeeee 0%,#dfdfdf 100%);
    background: -ms-linear-gradient(top,  #eeeeee 0%,#dfdfdf 100%);
    background: linear-gradient(top,  #eeeeee 0%,#dfdfdf 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dfdfdf',GradientType=0 );
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.27);
    -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.27);
    -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.27);
}
.bottom-links  { margin: 0px 0 10px; text-align:center;}
.bottom-links  a{ text-decoration: none;}
.content-title { border-left: 6px solid; padding: 30px 0 0 10px; margin-top: -25px; margin-bottom: 20px; text-shadow: 1px 1px 5px rgba(0,0,0,.24);}
.content-title-full { padding: 5px 0 0 0px; margin-bottom: 20px; text-shadow: 1px 1px 5px rgba(0,0,0,.24);}
.sborder {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border:4px solid #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.17);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.17);
    -webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.17);
}
.sborder:hover {
    border:4px solid #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.37);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.37);
    -webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.37);
}
/* === List content === */
.latest-news, .usual-list { margin: 0; padding:0;}
.latest-news li, .usual-list li { border: 1px solid #efefef; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.17); padding: 10px 20px; margin-bottom: 10px;  background: #f4f4f4; }
.latest-news li a{ color: #666; font-size: 16px; font-weight:bold; text-decoration:none; }
.latest-news li a:hover{ color: #000; text-decoration: underline; }
.news-meta {width: 100%;}
.news-date {float: left; font-size: 12px;  margin-top: 10px; color:#999;}
.news-icon {float: right;}
.usual-list li strong {font-weight: bold; font-size: 15px;}
.usual-content {display: block;}
.usual-list li ol{ margin-top: 10px;}
.usual-list li li{ border: none; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; padding: 0px ; margin-bottom: 2px;  background:none; }

/* === Service intro === */
.intro-nav { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ccc; position:relative;}
.intro-nav-row { display:block;}
.intro-nav-item {
    border: 1px solid #efefef;
    border-left: 5px solid #f4f4f4;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.17);
    padding: 5px 5%;
    margin-bottom: 5px;
    background: #f4f4f4;
    color: #666;
    font-size: 13px;
    font-weight:bold;
    text-decoration:none;
    display: block;
}
.intro-nav-item:hover{ border: 1px solid #ccc; border-left: 5px solid #ccc; color: #000; }
.intro-nav-item.active{ border: 1px solid #bbb; border-left: 5px solid; background: #999; color: #fff; }
.intro-nav-item.active:hover{ border: 1px solid #bbb; border-left: 5px solid #33a02b; background: #666; color: #fff; }
.intro-box-holder { position:relative; }
.intro-box{ margin:0; width: 598px; padding: 0 60px 60px 60px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: inset 0 0 12px 1px rgba(0, 0, 0, 0.17); -moz-box-shadow:inset 0 0 12px 1px rgba(0, 0, 0, 0.17); -webkit-box-shadow: inset 0 0 12px 1px rgba(0, 0, 0, 0.17); }
.intro-slider { width: 598px; }
.intro-box-top{ margin:0 0 20px 0; padding:0; width: 100%;}
.intro-box-order { font-size: 32px; font-weight: bold; color: #fff; display:block; margin: 0; padding: 35px 15px 15px; float: left;}
.intro-box-title { margin: 20px 0 0 20px; float: left; font-size: 15px; width: 480px; display:block; }
.intro-screen { padding: 4px;}

/* # FAQ accordions
================================================== */

#faqmenu li{  margin:0 0 10px 0; padding:0;}
#faqmenu .toggler{
    cursor:pointer;
    background: #fafafa;
    background: -moz-linear-gradient(top,  #fafafa 0%, #eeeeee 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#eeeeee));
    background: -webkit-linear-gradient(top,  #fafafa 0%,#eeeeee 100%);
    background: -o-linear-gradient(top,  #fafafa 0%,#eeeeee 100%);
    background: -ms-linear-gradient(top,  #fafafa 0%,#eeeeee 100%);
    background: linear-gradient(top,  #fafafa 0%,#eeeeee 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#eeeeee',GradientType=0 );
    display: block;
    color: #333;
    font-weight: bold;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.17);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.17);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.17);
    position: relative;
    padding: 12px 16px 0 12px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border: 1px solid #efefef;
}
#faqmenu .toggler:hover{ background: #efefef;}
#faqmenu .toggler div.faqmenuIcon{ position:relative; padding: 0; float:right; }
#faqmenu .toggler div.faqmenuTitle{ position:relative; margin: 2px 0 0 0; padding-bottom: 12px; float:left; font-size: 15px; line-height:20px;  width: 600px;}
#faqmenu .container{ display:none; padding:15px; color: #000; box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.27); -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.27); -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.27); }
#faqmenu .container ol { list-style:decimal; margin: 15px 20px;}
#faqmenu .container ul { list-style:disc; margin: 15px 20px;}
#faqmenu .container ol li, #faqmenu .container ul li{ margin:0 0 2px 0;}
.faqControl {position:absolute; right:24px; top:35px;}

/* # Font resize
================================================== */

.fontResize { position: absolute; right: 0px; top: 10px; z-index:99;}
.fontsizeM, .fontsizeD, .fontsizeP{ margin: 0; padding:0; width: 20px; height: 20px; float:left; text-indent: -9999px; overflow: hidden; opacity:0.6;}
.fontsizeM:hover, .fontsizeD:hover, .fontsizeP:hover {opacity: 1.0;}
.fontsizeM { background: url(../images/font-resize.png) no-repeat 0 -40px;}
.fontsizeD { background: url(../images/font-resize.png) no-repeat 0 -20px;}
.fontsizeP { background: url(../images/font-resize.png) no-repeat 0 0px;}
.fontsizeM, .fontsizeD, .fontsizeP{ border-left: 1px solid #aaaaaa; }

/* # Homepage
================================================== */
.promo-col { width: 660px; height: 545px; float: left; margin:0; padding:0; position: relative; overflow:hidden;}
.signin-col {
    width: 298px;
    height: 543px;
    float: right;
    margin:0;
    padding:0;
    position: relative;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    border-bottom-right-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;
    border-left:1px solid #c2c2c2;
    border-right:1px solid #c2c2c2;
    border-bottom:1px solid #c2c2c2;
    box-shadow: 0 0 3px rgba(0,0,0,.3); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3); -moz-box-shadow: 0 0 3px rgba(0,0,0,.3); -o-box-shadow: 0 0px 3px rgba(0,0,0,.3); zoom: 1;
}
.signin-bottom {
    width: 100%; height: 90px; position: absolute; bottom: 0; z-index:1;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    border-bottom-right-radius: 3px;
}
.signin-bottom h3{ font-size: 20px;font-weight:normal; padding-left: 42px; margin-top: 0px;color:#666;font-family:微軟正黑體, "Microsoft JhengHei", Arial, Verdana, Helvetica, sans-serif;}

.promo-bottom {
    width: 100%; height:35px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-bottom-left-radius: 3px;
    background: #a6a6a6 ;
    background: -moz-linear-gradient(top,  #888888 0%, #a6a6a6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#888888), color-stop(100%,#a6a6a6));
    background: -webkit-linear-gradient(top,  #888888 0%,#a6a6a6 100%);
    background: -o-linear-gradient(top,  #888888 0%,#a6a6a6 100%);
    background: -ms-linear-gradient(top,  #888888 0%,#a6a6a6 100%);
    background: linear-gradient(top,  #888888 0%,#a6a6a6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#a6a6a6',GradientType=0 );
    box-shadow: inset 0 3px 3px rgba(0,0,0,.35); -webkit-box-shadow: inset 0 3px 3px rgba(0,0,0,.35); -moz-box-shadow: inset 0 3px 3px rgba(0,0,0,.35);
}

/* === Signin box === */
.signin-title {color: #fff; font-size: 16px; font-weight: bold;  letter-spacing: 6px; text-align: center; margin: 10px 0 5px 6px; display:block;}
.go-english { font-family:微軟正黑體, "Microsoft JhengHei", Arial, Verdana, Helvetica, sans-serif; position: absolute; padding: 3px 10px; background: #333; background: rgba(0,0,0,.4); right: 8px; top: 8px; color: #fff; font-size: 12px; text-decoration:none;border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
.go-english:hover {background: #000;}
.signin-wrapper { margin:0; float: left; width: 100%; display: block;}
.mode-switch {margin:0 0 0 0; float: left; width: 100%; display: block; position:relative;}
.mode-switch ul{ margin:0; padding: 0 2px;clear:left; float:left; list-style:none; position:relative; }
.mode-switch ul li{ margin:0 3px; padding: 5px 0 0; float: left; display:block; list-style:none; position:relative; }
.mode-switch ul li.last { margin:0;}
.mode-switch ul li a{ background: url(../images/bg-tab.png) repeat-x bottom; font-size: 13px; font-weight: bold;  margin:0; padding: 5px 10px 5px; width: 123px;  float: left; color: #004b31; text-align:center; text-decoration:none; display: block; border-top-left-radius: 3px;  -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-right-radius: 3px;  -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px;}
.mode-switch ul li a.active{ border-top-left-radius: 3px; -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-right-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px;  box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; zoom: 1;}
.mode-switch ul li a:hover, .mode-switch ul li a.active:hover{color:#00A94F;}

.signin-icon img {vertical-align: middle; margin-bottom:0; position:absolute; left: 10px;}
.ml30 { margin-left:30px;}
/*.signin-content { height: 410px;}*/
.signin-content { height: 471px;}
.signin-form { padding: 10px 25px; }
.signin-form label { color:#333; padding: 0 0 0 2px;display: block;font-weight:bold;}
.signin-form .text, .signin-form .text-short, .signin-form .text-mini { font-size:20px; line-height: 30px; font-family: Verdana, 微軟正黑體, "Microsoft JhengHei", Arial, Helvetica, sans-serif; padding: 0 12px 0; width: 222px; height: 30px; border: 1px solid;}
.signin-form .text.capslock, .signin-form .text-short.capslock, .signin-form .text-mini.capslock { background: #fff url(../images/ico-capslock.png) right center no-repeat;}
.signin-form .text.placeholder{color:Gray; font-size: 12px;}
.signin-form .text-short.placeholder{color:Gray; font-size: 12px;}
.signin-form .text-short { width: 180px;}
.signin-form .text-mini { width: 95px; border: 2px solid #900;}
.signin-form .text-low { padding: 4px 12px 3px; }
.signin-form .selector, .signin-form .selector-low { width: 248px; padding: 6px 12px 8px; border: 1px solid; height: 34px;}
.signin-form .selector-low { padding: 4px 12px 4px; height: 26px; font-size:12px; }
input { outline:none; }
input:focus, select:focus, .selector:focus { border-color: #00A94F!important;}
.plaintext { color:#333; text-shadow: none;text-decoration: none;font-size:12px;font-weight:bold;background: url(../images/login-icon.png) no-repeat 0px 8px;padding-left:10px;}
.plaintext:hover{ color: #00A94F; text-shadow: none; }

.keypad { position:absolute; opacity: .85; filter: alpha(opacity=85); background: url(../images/form-keypad.png) no-repeat; width: 21px; height:29px; text-indent:-99999px; overflow:hidden;}
.keypad:hover { opacity: 1; filter: alpha(opacity=100); }
.keypad-offset { margin-left:15px;}

.signin-row { margin: 8px 0; position:relative;}
.signin-row-alt { margin: 2px 0;}
.signin-row-alt .left{ width: 121px; float:left; display:inline-block; margin-right: 5px;}
.signin-submit { width: 245px; height: 78px; border: 1px solid #bababa; margin: 15px 0 0 0; background: url(../images/bg-submit.png) no-repeat center; box-shadow: inset 0 0 6px 1px rgba(0, 0, 0, 0.17); -moz-box-shadow:inset 0 0 6px 1px rgba(0, 0, 0, 0.17); -webkit-box-shadow:inset  0 0 6px 1px rgba(0, 0, 0, 0.17); }
.signin-submit-alt { width: 245px; height: 46px; border: 1px solid #bababa; margin: 10px 0 0 0; background: url(../images/bg-submit.png) no-repeat center; box-shadow: inset 0 0 6px 1px rgba(0, 0, 0, 0.17); -moz-box-shadow:inset 0 0 6px 1px rgba(0, 0, 0, 0.17); -webkit-box-shadow:inset  0 0 6px 1px rgba(0, 0, 0, 0.17); }
.signin-submit-alt2 { width: 245px; height: 33px; border: 1px solid #bababa; margin: 5px 0 0 0; background: url(../images/bg-submit.png) no-repeat center; box-shadow: inset 0 0 6px 1px rgba(0, 0, 0, 0.17); -moz-box-shadow:inset 0 0 6px 1px rgba(0, 0, 0, 0.17); -webkit-box-shadow:inset  0 0 6px 1px rgba(0, 0, 0, 0.17); }
.signin-links { padding: 0px ; text-align: center; margin-top:0px; }
.signin-links a{ color: #333;text-decoration: none;font-weight:bold;background: url(../images/login-icon.png) no-repeat 0px 8px;padding-left:10px;}
.signin-links a:hover{ color: #00A94F; text-shadow:none; text-decoration:none;}
.signinPos { position: absolute;}
.oldbank a{color: #333; text-decoration:none;font-weight:bold;}
.oldbank a:hover {color:#00A94F;}

.signin-note { padding: 0px 25px; color:#333; font-size:11px; line-height:13px;}
.disc { list-style: disc; margin-left: 16px;}

.signin-error {
    position:absolute;
    background: url(../images/bg-error.png) repeat;
    border: 1px solid #990000;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    z-index:59;
    padding: 6px 20px 4px 20px;
    width: 248px;
    top: 5px;
    left: 5px;
    box-shadow: 0 0 22px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 22px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 22px rgba(0, 0, 0, 0.35);
}
.signin-error p{ margin-bottom: 2px !important; color: #fff; font-weight: bold; text-shadow: 1px 1px 0 rgba(0,0,0,.8);}
.signin-error a.error-closed { top:0px; right: 0px; width: 34px; height: 34px; position:absolute; background: url(../images/icon-close-small-light.png) no-repeat;}

.capslock-msg {
    position:absolute;
    background: #fff;
    border: 1px solid #999;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    z-index: 58;
    padding: 6px 6px 4px;
    width: 100px;
    top: 152px;
    right: 280px;
    box-shadow: 0 0 22px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 22px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 22px rgba(0, 0, 0, 0.35);
}
.capslock-msg p{ margin-bottom: 2px !important;}
.arrow-capslock { right: -10px; top: 25px; width: 10px; height:16px; position:absolute; z-index:59; background: url(../images/arrow-capslock.png) no-repeat;}
.capslock-msg a.remove { top:-4px; right: -4px; width: 34px; height: 34px; position:absolute; background: url(../images/icon-close-small.png) no-repeat;}

/* === Banner box === */
.banner-slider {
    margin: 0 0 40px;
    background: #fff;
    border: 5px solid #efefef;
    position: relative;
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    border-top-left-radius: 3px;
    zoom: 1;
}
@media only screen and (min-width: 767px) {
.flexslider .slides img{height:400px;}
.advertise{height:400px;}
}
@media only screen and (min-width: 479px) and (max-width: 767px) {
.advertise{height: 295px;}
}
@media only screen and (max-width: 479px){
.flexslider .slides img{height:220px;}
.advertise{height: 220px;}
 }
/* === Feature box === */
.feature-box {
    border: 1px solid #cfcfcf;
    border-right:0px;
    border-radius: 0px 0px 0px 3px;
    -moz-border-radius: 0px 0px 0px 3px;
    -webkit-border-radius: 0px 0px 0px 3px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    margin-top: 0px;
    height:97px;
    background: #efefef ;
    background: -moz-linear-gradient(top,  #ffffff 0%, #efefef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#efefef 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#efefef 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#efefef 100%);
    background: linear-gradient(top,  #ffffff 0%,#efefef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 );
}
.feature-box h3{ font-size: 20px;font-weight:normal; padding-left: 42px; margin-top: 10px;color:#666;font-family:微軟正黑體, "Microsoft JhengHei", Arial, Verdana, Helvetica, sans-serif;}
.feature-box a{ color:#333;font-family:微軟正黑體, "Microsoft JhengHei", Arial, Verdana, Helvetica, sans-serif;}
.express-box { background: url(../images/ico-feature.png) no-repeat 10px 0;}
.service-box { background: url(../images/ico-feature.png) no-repeat  10px -26px;}
.news-box { background: url(../images/ico-feature.png) no-repeat  10px -52px;}
.event-box { background: url(../images/ico-feature.png) no-repeat  10px -78px;}
.faq-box { background: url(../images/ico-feature.png) no-repeat  10px -104px;}

.green-render {}
.title-banner {	box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); }

/* === Promotion express === */
ul.express-slides { margin:0; padding:0;  position: relative;}
ul.express-slides li{ margin: 5px 0 0 0; padding:0; float:left; width:100%;}
.express-left { width: 265px; float: left; padding: 0 0 20px 20px; display:block; position:relative;}
.express-left img { border: 6px solid #fff; box-shadow: 0 0 8px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.35); display: block; float: left; }
.express-right { width: 300px; float:right; display: block; margin-right: 20px;}
.express-right h2 a { text-decoration:none; color:#666;}
.express-right h2 a:hover { text-decoration:underline; color:#000;}

.express-bottom { width: 300px; /*position:absolute; bottom:20px; z-index:6;*/}

ul.social-share {margin: 0; padding:0; width: 100px; float:left; }
ul.social-share li { margin: 0; padding: 0; width: 29px;}
ul.social-share li a{ width: 24px ; height: 23px; display:block; float:left; text-indent:-9999px; overflow: hidden; margin: 8px 5px 0 0;  }
ul.social-share li a.facebook { background: url(../images/ico-facebook.png) no-repeat;}
ul.social-share li a.twitter { background: url(../images/ico-twitter.png) no-repeat;}
ul.social-share li a.plurk { background: url(../images/ico-plurk.png) no-repeat;}

.express-more {float: right;}

/* === Online services === */
.service-row { width: 94%; padding: 0 3%; display: block; }
.apply-online { position:absolute; right:0; top: 55px; background: #555; background: rgba(0,0,0,.4); padding: 10px 50px 10px 20px; color:#fff;  text-shadow: 1px 1px 3px #000; }
.apply-online:hover { background: #333; background: rgba(0,0,0,.6);-webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;}
.apply-online a { color:#fff; text-decoration:none;}
.apply-online h4 { font-weight: bold;margin-bottom:5px;}

.orange { color: #f90; display:block;}
.darkorange {color: #c30;}
.bService {
    display:block;
    font-size: 14px;
    padding : 10px 0 10px 24%;
    margin:  2px 0;
    text-decoration: none;
    width: 76%;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border: 1px solid #c3c3c3; box-shadow: inset 0 1px 2px #fff; -webkit-box-shadow: inset 0 1px 2px #fff; -moz-box-shadow: inset 0 1px 2px #fff; color: #333 ;
    /*background: #e8e8e8;
    background: -moz-linear-gradient(top,  #f8f8f8 0%, #e8e8e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#e8e8e8));
    background: -webkit-linear-gradient(top,  #f8f8f8 0%,#e8e8e8 100%);
    background: -o-linear-gradient(top,  #f8f8f8 0%,#e8e8e8 100%);
    background: -ms-linear-gradient(top,  #f8f8f8 0%,#e8e8e8 100%);
    background: linear-gradient(top,  #f8f8f8 0%,#e8e8e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#e8e8e8',GradientType=0 );*/
}
.bService:hover { border: 1px solid #666; }
.rate-query { background: url(../images/ico-service.png) no-repeat -4px 0px;}
.fund-query { background: url(../images/ico-service.png) no-repeat -4px -48px;}
.purchase-reader { background: url(../images/ico-service.png) no-repeat -4px -96px;}
.cathay-finance { background: url(../images/ico-service.png) no-repeat -4px -144px;}
.newsletter { background: url(../images/ico-service.png) no-repeat -4px -192px;}
.spreadsheet { background: url(../images/ico-service.png) no-repeat -4px -240px;}
.holiday { background: url(../images/ico-service.png) no-repeat -4px -336px;}
.finance-plan { background: url(../images/ico-service.png) no-repeat -4px -288px;}

/* === News === */
ul.news-list { margin: 5px 30px; position:absolute;}
ul.news-list li{ margin: 0 3px; border-top: 1px dotted #ccc;}
ul.news-list li:first-child{ border-top: none;}
ul.news-list li a{ padding: 8px 0 8px 12px;display:block; text-decoration: none;font-family:微軟正黑體, "Microsoft JhengHei", Arial, Verdana, Helvetica, sans-serif;color: #000;
font-size:14px;}
ul.news-list li a:hover{ color: #000; text-decoration:underline; }
.feature-more{ margin: 0 10px; display: block; position:absolute; bottom:15px; right:10px;}

/* === Event banners === */
.banner-row { width: 94%; padding: 0 3%; display: block; }
.feature-banner{ margin: 0 0 5px 0; display: block; width: 94%; padding: 3%; border: 1px solid #fff; background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.25); }
.feature-banner:hover{ border: 1px solid #999; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;}
.feature-banner img{ display: block; max-width: 100%;}

/* === FAQ === */
.servicelnk {
    display:block;
    font-size: 18px;
    padding: 15px 0 0 80px;
    margin: 10px 0 0 0;
    height: 32px;
    text-decoration: none;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border: 1px solid #c3c3c3; box-shadow: inset 0 1px 2px #fff; -webkit-box-shadow: inset 0 1px 2px #fff; -moz-box-shadow: inset 0 1px 2px #fff; color: #333 ;
    /*background: #e8e8e8;
    background: -moz-linear-gradient(top,  #f8f8f8 0%, #e8e8e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#e8e8e8));
    background: -webkit-linear-gradient(top,  #f8f8f8 0%,#e8e8e8 100%);
    background: -o-linear-gradient(top,  #f8f8f8 0%,#e8e8e8 100%);
    background: -ms-linear-gradient(top,  #f8f8f8 0%,#e8e8e8 100%);
    background: linear-gradient(top,  #f8f8f8 0%,#e8e8e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#e8e8e8',GradientType=0 );*/
}
.servicelnk:hover { border: 1px solid #666; }
.faq-stop { background: url(../images/bg-faq-stop.png) no-repeat  -10px center;}
.faq-envelop { background: url(../images/bg-faq-envelop.png) no-repeat  -10px center;}
.faq-compass { background: url(../images/bg-faq-compass.png) no-repeat  -10px center;}

/* # Event page
================================================== */
#event-banner img{ border-top-left-radius: 3px; -webkit-border-radius-topleft: 3px; -moz-border-radius-topleft: 3px; border-top-right-radius: 3px; -webkit-border-radius-topright: 3px; -moz-border-radius-topright: 3px; max-width: 100%; display:block;}

/* === event menu === */
#enav{ font-size:16px; margin:0; padding:0; width: 100%; float:left; position:relative; background:#254400; zoom: 1; }
ul.enav{ text-align: center; clear:left; float:left; list-style:none; position:relative; left:50%; margin: 0 auto 0; padding: 8px 0;}
ul.enav li{ display:block; float:left; list-style:none; margin:0 4px 0 4px; padding:0; position:relative; right:50%; border: 2px solid #8cc63e; white-space: nowrap; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background: rgba(255,248, 154, .95);}
ul.enav li a { display: block; text-align: center; cursor:pointer; color: #000; font-weight:bold; text-shadow: 1px 1px 1px #fff; float: left; padding: 5px 20px 3px; text-decoration: none; }
ul.enav li.current{ background: rgba(255,248, 154, .25);}
ul.enav li.current a{ color: #fff; text-shadow: 1px 1px 1px #000; }
ul.enav li:hover{ background: rgba(255,248, 154, .45);}
ul.enav li a:hover{ color: #fff; text-shadow: 1px 1px 1px #000; }
ul.enav li:active { background: rgba(255,248, 154, .12);}

/* === award box === */
.award-box {border: 1px solid #cdcdcd; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15); padding:0; width: 100%; overflow: hidden;}
.award-title, .award-pict, .award-total, .award-function{ padding: 5px 10px; text-align: center; }
.award-title {
    padding-top: 10px;
    background: #ffffff;
    background: -moz-linear-gradient(top,  #dddddd 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #dddddd 0%,#ffffff 100%);
    background: -o-linear-gradient(top,  #dddddd 0%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #dddddd 0%,#ffffff 100%);
    background: linear-gradient(top,  #dddddd 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#ffffff',GradientType=0 );
}
.award-title h4 { font-weight: bold; margin-bottom: 0;  }
.award-total{ height: 60px; }
.award-total .note{ display: block; font-size: 12px; }
.award-total strong{ display: block;}
.award-function {
    padding: 10px;
    background: #af0000;
    background: -moz-linear-gradient(top,  #af0000 0%, #820000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#af0000), color-stop(100%,#820000));
    background: -webkit-linear-gradient(top,  #af0000 0%,#820000 100%);
    background: -o-linear-gradient(top,  #af0000 0%,#820000 100%);
    background: -ms-linear-gradient(top,  #af0000 0%,#820000 100%);
    background: linear-gradient(top,  #af0000 0%,#820000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af0000', endColorstr='#820000',GradientType=0 );
    border-bottom-left-radius: 3px; -webkit-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px;
    border-bottom-right-radius: 3px; -webkit-border-radius-bottomright: 3px; -moz-border-radius-bottomright: 3px;
    height: 105px;
}
.award-function a{ text-decoration:none; font-size: 15px; font-weight: bold;}
.award-function .note{ text-shadow: 1px 1px 3px #000; color: #fff; line-height: 16px;}

/* # Credit card page
================================================== */
#content-banner img{ border-top-left-radius: 3px; -webkit-border-radius-topleft: 3px; -moz-border-radius-topleft: 3px; border-top-right-radius: 3px; -webkit-border-radius-topright: 3px; -moz-border-radius-topright: 3px; max-width: 100%; display:block;}
.cc-form{
    margin:0 0 50px 0;
    width: 88%;
    padding: 20px 6% 45px;
    position:relative;
    border-bottom-left-radius: 3px; -webkit-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; -webkit-border-radius-bottomright: 3px; -moz-border-radius-bottomright: 3px;
    background: #a6a6a6 ;
    background: -moz-linear-gradient(top,  #888888 0%, #a6a6a6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#888888), color-stop(100%,#a6a6a6));
    background: -webkit-linear-gradient(top,  #888888 0%,#a6a6a6 100%);
    background: -o-linear-gradient(top,  #888888 0%,#a6a6a6 100%);
    background: -ms-linear-gradient(top,  #888888 0%,#a6a6a6 100%);
    background: linear-gradient(top,  #888888 0%,#a6a6a6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#a6a6a6',GradientType=0 );
    box-shadow: inset 0 3px 3px rgba(0,0,0,.35); -webkit-box-shadow: inset 0 3px 3px rgba(0,0,0,.35); -moz-box-shadow: inset 0 3px 3px rgba(0,0,0,.35);
}
.cc-btn{ margin: 0; width: 99%; padding: 2px 0.5%; text-align: right; background: #666; box-shadow: inset 0 0 12px 1px rgba(0, 0, 0, 0.37); -moz-box-shadow:inset 0 0 12px 1px rgba(0, 0, 0, 0.37); -webkit-box-shadow: inset 0 0 12px 1px rgba(0, 0, 0, 0.37); }
.cc-row {width: 100%; padding: 20px 0; }
.cc-form label { padding: 0; text-shadow: 1px 1px 1px rgba(0,0,0,.15); float:left;}
.cc-form .text { margin-top: 2px; padding: 10px 2% 8px; width: 96%; border: 1px solid #ccc; box-shadow: inset 0 3px 3px rgba(0,0,0,.25); -webkit-box-shadow: inset 0 3px 3px rgba(0,0,0,.25); -moz-box-shadow: inset 0 3px 3px rgba(0,0,0,.25);}
.cc-submit { width: 100%; height: 85px; margin: 0 auto 0; background: #555 url(../images/bg-submit.png) no-repeat center; background: rgba(0,0,0,.1) url(../images/bg-submit.png) no-repeat center; box-shadow: inset 0 0 6px 1px rgba(0, 0, 0, 0.17); -moz-box-shadow:inset 0 0 6px 1px rgba(0, 0, 0, 0.17); -webkit-box-shadow:inset  0 0 6px 1px rgba(0, 0, 0, 0.17); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
.cc-note { background: rgba(255,255,255,.5); padding: 3%; width: 94%; margin: 20px 0 0 0;box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.17); -moz-box-shadow:0 0 3px 1px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.17); }
.cc-password-wrapper { background: rgba(0,0,0,.36); padding: 3% 3% ; width: 94%; margin: 20px 0 0 0; color:#fff; box-shadow: inset 0 0 6px 1px rgba(0, 0, 0, 0.17); -moz-box-shadow:inset 0 0 6px 1px rgba(0, 0, 0, 0.17); -webkit-box-shadow:inset  0 0 6px 1px rgba(0, 0, 0, 0.17); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }

/* # Footer
================================================== */

#footer {
    font-family: 微軟正黑體, "Microsoft JhengHei", Arial, Verdana, Helvetica, sans-serif;
    width: 100%;
    position: absolute;
    bottom:0;
    font-size: 13px;
    color: #fff;
    border-top: 8px solid #fff100;
    background: #49b134 url(../images/footer-bg.jpg) no-repeat left top;
    padding: 0;
}
.footer-wrapper { margin: auto auto; width: 960px; overflow:hidden; height:118px; line-height:20px;margin-top:20px;}
.footer-wrapper img{ vertical-align:middle; margin-right:6px;}
.footer-wrapper a{ color:#fff;}

/* # UI
================================================== */

/* === Buttons === */
.buttonL, .buttonM, .buttonS, .buttonXL { margin: 2px; font-weight: 400; display: inline-block; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; text-decoration: none; }
.buttonS { padding: 2px 6px; font-size: 13px; }
.buttonM { padding: 4px 12px; }
.buttonL, input.buttonL { padding: 8px 16px; } 
.buttonCRO, input.buttonCRO { padding: 8px 16px 8px 36px; }
.buttonXL { padding: 9px 25px; font-size: 15px; }
.buttonD { padding: 6px 12px; }
.buttonY { padding: 8px 16px; }
.buttonC { padding: 2px 16px; font-size: 13px; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .buttonL, input.buttonL { padding: 8px 16px 9px; }
    .buttonCRO, input.buttonCRO { padding: 8px 16px 9px 36px; }
}

.bDefault{font-family:微軟正黑體, "Microsoft JhengHei", Arial, Verdana, Helvetica, sans-serif;
    border: 1px solid #c3c3c3;
    box-shadow: inset 0 1px 2px #fff; -webkit-box-shadow: inset 0 1px 2px #fff; -moz-box-shadow: inset 0 1px 2px #fff;
    color: #333 ;
    background: #f8f8f8;
    background: -moz-linear-gradient(top,  #f8f8f8 0%, #e8e8e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#e8e8e8));
    background: -webkit-linear-gradient(top,  #f8f8f8 0%,#e8e8e8 100%);
    background: -o-linear-gradient(top,  #f8f8f8 0%,#e8e8e8 100%);
    background: -ms-linear-gradient(top,  #f8f8f8 0%,#e8e8e8 100%);
    background: linear-gradient(top,  #f8f8f8 0%,#e8e8e8 100%);
}
.bDefault:hover{ background: #eee; color: #000; border-color: #999; box-shadow: 0 0 5px #e2e2e2 inset, 0 1px 1px #999; -webkit-box-shadow: 0 0 5px #e2e2e2 inset, 0 1px 1px #999; -moz-box-shadow: 0 0 5px #e2e2e2 inset, 0 1px 1px #999;}
.bDefault:active{ background: #eee; color: #000; border-color: #555; box-shadow: 0 0 8px #999 inset, 0 1px 1px #999; -webkit-box-shadow: 0 0 8px #999 inset, 0 1px 1px #999; -moz-box-shadow: 0 0 8px #999 inset, 0 1px 1px #999;}
.bDefault span { text-shadow: none; }

.bBlue {  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
    color:#fff;
    border: 1px solid #3e76af;
    box-shadow: 0 1px 2px 0 #66b2d2 inset; -webkit-box-shadow: 0 1px 2px 0 #66b2d2 inset; -moz-box-shadow: 0 1px 2px 0 #66b2d2 inset;
    background: #5ba5cb url(../images/sprite.png);
    background: url(../images/sprite.png), -moz-linear-gradient(top,  #5ba5cb 0%, #3a70ab 100%);
    background: url(../images/sprite.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba5cb), color-stop(100%,#3a70ab));
    background: url(../images/sprite.png), -webkit-linear-gradient(top,  #5ba5cb 0%,#3a70ab 100%);
    background: url(../images/sprite.png), -o-linear-gradient(top,  #5ba5cb 0%,#3a70ab 100%);
    background: url(../images/sprite.png), -ms-linear-gradient(top,  #5ba5cb 0%,#3a70ab 100%);
    background: url(../images/sprite.png), linear-gradient(top,  #5ba5cb 0%,#3a70ab 100%);
}
.bBlue:hover { opacity: 0.85; filter: alpha(opacity=85); -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; }
.bBlue:active { box-shadow: 0 0 2px #707070 inset, 0 1px 0 #333; -webkit-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #333; -moz-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #333; }

.bYellow {
    margin: 0 10px 10px;
    display:block;
    border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
    border: 3px solid #820000;
    color: #000;
    box-shadow: inset 0 1px 2px #fff; -webkit-box-shadow: inset 0 1px 2px #fff; -moz-box-shadow: inset 0 1px 2px #fff;
    
    background: #ffc952 ;
    background: -moz-linear-gradient(top,  #f8f8f8 0%, #ffc952 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#ffc952));
    background: -webkit-linear-gradient(top,  #f8f8f8 0%,#ffc952 100%);
    background: -o-linear-gradient(top,  #f8f8f8 0%,#ffc952 100%);
    background: -ms-linear-gradient(top,  #f8f8f8 0%,#ffc952 100%);
    background: linear-gradient(top,  #f8f8f8 0%,#ffc952 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#ffc952',GradientType=0 );
}
.bYellow:hover { opacity: 0.85; filter: alpha(opacity=85); -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; }
.bYellow:active { box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff; -webkit-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff; -moz-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff; }

.bSignin {
    display:block;
    border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;
    border: 1px solid #006a40;
    color: #fff;
    padding-left: 25px;
    font-family:微軟正黑體, "Microsoft JhengHei", Arial, Verdana, Helvetica, sans-serif;
    position:absolute;
    margin-top:5px;
    margin-left:5px;
    background: url(../images/btn-signin.png) no-repeat -5px;
    cursor:pointer;
    font-weight:bold;
    font-size:15px;
    box-shadow:0 0 4px rgba(0,0,0,.3); -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3);
}
.bSignin:hover { border-color: #000; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; }
.bSignin:active { border-color: #000; box-shadow: 0 0 2px #707070 inset, 0 1px 0 #333; -webkit-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #333; -moz-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #333; }

.atm{
    margin: 10px 25px;
    display: inline-block;
    float: left;
    border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;
    border: 1px solid #666;
    color: #fff;
    width: 121px;
    height: 30px;
    background: url(../images/btn-atm.png) no-repeat left;
    text-decoration: none;
    padding: 15px 0 0 125px;
    color: #333;
    text-shadow: #ccc 1px 1px 0;
    font-size: 15px;
    letter-spacing:5px;
    box-shadow:0 0 5px rgba(0,0,0,.5); -webkit-box-shadow: 0 0 5px rgba(0,0,0,.5); -moz-box-shadow: 0 0 5px rgba(0,0,0,.5);
}

.atm:hover{ color: #333; border-color: #000; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; box-shadow:0 0 12px rgba(0,0,0,.9); -webkit-box-shadow: 0 0 12px rgba(0,0,0,.9); -moz-box-shadow: 0 0 12px rgba(0,0,0,.9);}
.atm:active{ color: #333; border-color: #000; box-shadow: 0 0 5px #e2e2e2 inset, 0 1px 1px #fff; -webkit-box-shadow: 0 0 5px #e2e2e2 inset, 0 1px 1px #fff; -moz-box-shadow: 0 0 5px #e2e2e2 inset, 0 1px 1px #fff; text-shadow: 0 -1px 1px #f1f1f1; }
.atm span { text-shadow: none; }

/* ===== Tipsy ===== */
.tipsy { padding: 4px; font-size: 11px; position: absolute; z-index: 1000; }
.tipsy-inner { padding: 2px 10px 2px 10px; background-color: #1d1d1d; color: white; max-width: 200px; text-align: center; }
.tipsy-inner { border-radius: 2px; -moz-border-radius:2px; -webkit-border-radius:2px; }
.tipsy-arrow { position: absolute; background: url('../images/tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s { margin-top: -5px; }
.tipsy-w { margin-left: 5px; }
.tipsy-e { margin-right: -5px; }
.tipsy-n { margin-top: 5px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }

/* ===== Notification messages ===== */
.nNote { /*cursor: pointer;*/  margin: 0 0 10px 0;  padding: 8px 66px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
.nNote p { padding: 0px; margin: 0px; font-size: 13px; text-shadow: 0 1px 0 #fff; }
.nWarning {
border: 1px solid #f2d083; color: #826200; box-shadow: 0 1px 2px #fff0c7 inset, 0 1px 1px #dfdfdf; -webkit-box-shadow: 0 1px 2px #fff0c7 inset, 0 1px 1px #dfdfdf; -moz-box-shadow: 0 1px 2px #fff0c7 inset, 0 1px 1px #dfdfdf;
background: #ffedbc url(../images/bg-nWarning.png);
background-image: url(../images/bg-nWarning.png), -moz-linear-gradient(top,  #ffedbc 0%, #fbe5a8 100%);
background-image: url(../images/bg-nWarning.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffedbc), color-stop(100%,#fbe5a8));
background-image: url(../images/bg-nWarning.png), -webkit-linear-gradient(top,  #ffedbc 0%,#fbe5a8 100%);
background-image: url(../images/bg-nWarning.png), -o-linear-gradient(top,  #ffedbc 0%,#fbe5a8 100%);
background-image: url(../images/bg-nWarning.png), -ms-linear-gradient(top,  #ffedbc 0%,#fbe5a8 100%);
background-image: url(../images/bg-nWarning.png), linear-gradient(top,  #ffedbc 0%,#fbe5a8 100%);
background-repeat: no-repeat, repeat;
background-position: 24px center, 0 0;
}

.nSuccess {
box-shadow: 0 1px 2px #e3f4bf inset, 0 1px 1px #dfdfdf; -webkit-box-shadow: 0 1px 2px #e3f4bf inset, 0 1px 1px #dfdfdf; -moz-box-shadow: 0 1px 2px #e3f4bf inset, 0 1px 1px #dfdfdf; border: 1px solid #c1d779; color: #4f7307;
background: #d6efa1 url(../images/bg-nSuccess.png);
background-image: url(../images/bg-nSuccess.png), -moz-linear-gradient(top,  #d6efa1 0%, #d0e69d 100%);
background-image: url(../images/bg-nSuccess.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6efa1), color-stop(100%,#d0e69d));
background-image: url(../images/bg-nSuccess.png), -webkit-linear-gradient(top,  #d6efa1 0%,#d0e69d 100%);
background-image: url(../images/bg-nSuccess.png), -o-linear-gradient(top,  #d6efa1 0%,#d0e69d 100%);
background-image: url(../images/bg-nSuccess.png), -ms-linear-gradient(top,  #d6efa1 0%,#d0e69d 100%);
background-image: url(../images/bg-nSuccess.png), linear-gradient(top,  #d6efa1 0%,#d0e69d 100%);
background-repeat: no-repeat, repeat;
background-position: 24px center, 0 0;
}

.nFailure {
box-shadow: 0 1px 2px #fbb5b5 inset, 0 1px 1px #dfdfdf; -webkit-box-shadow: 0 1px 2px #fbb5b5 inset, 0 1px 1px #dfdfdf; -moz-box-shadow: 0 1px 2px #fbb5b5 inset, 0 1px 1px #dfdfdf; border: 1px solid #dfa59b; color: #660007;
background: #f0b5a1 url(../images/bg-nFailure.png);
background-image: url(../images/bg-nFailure.png), -moz-linear-gradient(top,  #f0b5a1 0%, #de9d8a 100%);
background-image: url(../images/bg-nFailure.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0b5a1), color-stop(100%,#de9d8a));
background-image: url(../images/bg-nFailure.png), -webkit-linear-gradient(top,  #f0b5a1 0%,#de9d8a 100%);
background-image: url(../images/bg-nFailure.png), -o-linear-gradient(top,  #f0b5a1 0%,#de9d8a 100%);
background-image: url(../images/bg-nFailure.png), -ms-linear-gradient(top,  #f0b5a1 0%,#de9d8a 100%);
background-image: url(../images/bg-nFailure.png), linear-gradient(top,  #f0b5a1 0%,#de9d8a 100%);
background-repeat: no-repeat, repeat;
background-position: 24px center, 0 0;
}
.nFailure > p { text-shadow: 0 1px 0 #DDD; }

.nInformation {
box-shadow: 0 1px 2px #e9f3fb inset, 0 1px 1px #dfdfdf; -webkit-box-shadow: 0 1px 2px #e9f3fb inset, 0 1px 1px #dfdfdf; -moz-box-shadow: 0 1px 2px #e9f3fb inset, 0 1px 1px #dfdfdf;
border: 1px solid #bcd9f3; color: #4579aa;
background: #deedf9 url(../images/bg-nInformation.png);
background-image: url(../images/bg-nInformation.png), -moz-linear-gradient(top,  #deedf9 0%, #cde5f7 100%);
background-image: url(../images/bg-nInformation.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#deedf9), color-stop(100%,#cde5f7));
background-image: url(../images/bg-nInformation.png), -webkit-linear-gradient(top,  #deedf9 0%,#cde5f7 100%);
background-image: url(../images/bg-nInformation.png), -o-linear-gradient(top,  #deedf9 0%,#cde5f7 100%);
background-image: url(../images/bg-nInformation.png), -ms-linear-gradient(top,  #deedf9 0%,#cde5f7 100%);
background-image: url(../images/bg-nInformation.png), linear-gradient(top,  #deedf9 0%,#cde5f7 100%);
background-repeat: no-repeat, repeat;
background-position: 24px center, 0 0;
}

/* # Overview panel
================================================== */

.functionContainer{ border-top: 1px solid #ccc; padding-bottom:20px; }
.functionRow { padding:0; }
.liArrow { padding-left: 16px;  }
.liArrow li { background: url(../images/subnav_arrow.png) no-repeat 0 8px; padding: 0 0 0 12px;  }
.liArrow li a{ text-decoration: underline; }
.functionRow .liArrow{ padding-left:0; padding: 10px 0; border-top: 1px solid #ccc; margin-bottom: 10px; }
.functionRow .liArrow a{ text-decoration:none; color: #666; }
.functionRow .liArrow a:hover{ color: #000; }
.functionBox {
    background: #f9f9f9;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    margin-top: 20px;
    border: 1px solid #eee;
    position: relative;
}
.functionBox h4 {
    border-bottom: 1px solid #cdcdcd;
    box-shadow: 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 0 #fff;
    -moz-box-shadow: 0 1px 0 #fff;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-topleft: 3px;
    position: relative;
    display: block;
    padding: 7px 14px 6px 16px;
    font-size: 15px;
    font-weight: bold;
    color: #636363;
    text-shadow: 0 1px #fff;
    background: #f8f8f8;
    background: -moz-linear-gradient(top,  #f8f8f8 0%, #e8e8e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#e8e8e8));
    background: -webkit-linear-gradient(top,  #f8f8f8 0%,#e8e8e8 100%);
    background: -o-linear-gradient(top,  #f8f8f8 0%,#e8e8e8 100%);
    background: -ms-linear-gradient(top,  #f8f8f8 0%,#e8e8e8 100%);
    background: linear-gradient(top,  #f8f8f8 0%,#e8e8e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#e8e8e8',GradientType=0 );
}
.functionBox h5 { font-size: 15px; color: #999; }
.functionList { padding: 12px; }

/* # Data table
================================================== */

.datatbl {
    margin:0px;padding:0px;
    width:100%;
    border:1px solid #ccc;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-bottom-left-radius:0px;
    border-bottom-left-radius:0px;
    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;
    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;
    -moz-border-radius-topleft:0px;
    -webkit-border-top-left-radius:0px;
    border-top-left-radius:0px;
}
.datatbl table{
    width:100%;
    height:100%;
    margin:0px;padding:0px;
}
.datatbl tr:last-child td:last-child {
    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;
}
.datatbl table tr:first-child td:first-child {
    -moz-border-radius-topleft:0px;
    -webkit-border-top-left-radius:0px;
    border-top-left-radius:0px;
}
.datatbl table tr:first-child td:last-child {
    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;
}
.datatbl tr:last-child td:first-child{
    -moz-border-radius-bottomleft:0px;
    -webkit-border-bottom-left-radius:0px;
    border-bottom-left-radius:0px;
}
.datatbl tr:hover td{
}
.datatbl tr:nth-child(odd){ background-color:#efefef; }

.datatbl tr:nth-child(even){ background-color:#ffffff; }
.datatbl td{
    vertical-align:middle;
    border:1px solid #ccc;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:7px;
    font-weight:normal;
    color:#000000;
}
.datatbl tr:last-child td{
    border-width:0px 1px 0px 0px;
}
.datatbl tr td:last-child{
    border-width:0px 0px 1px 0px;
}
.datatbl tr:last-child td:last-child{
    border-width:0px 0px 0px 0px;
}
.datatbl tr:first-child td{
    background:-o-linear-gradient(bottom, #efefef 5%, #cecece 100%);
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #efefef), color-stop(1, #cecece) );
    background:-moz-linear-gradient( center top, #efefef 5%, #cecece 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#efefef", endColorstr="#cecece");
    background: -o-linear-gradient(top,#efefef,#cecece);
    background-color:#efefef;
    border:0px solid #ccc;
    text-align:center;
    border-width:0px 0px 1px 1px;
    font-size:14px;
    font-weight:bold;
    color:#000000;
    
}
.datatbl tr:first-child td:first-child{
    border-width:0px 0px 1px 0px;
}
.datatbl tr:first-child td:last-child{
    border-width:0px 0px 1px 1px;
}
.ivory {background: #e8dbd2;}

/* # Scroll to top
================================================== */

#toTop{display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:45px;height:45px;border:none;text-indent:100%;background:url(../images/ui.totop.png) no-repeat left top; z-index:9999;}
#toTopHover {background:url(../images/ui.totop.png) no-repeat left -45px;width:45px;height:45px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0; filter:alpha(opacity=0);}
#toTop:active, #toTop:focus {outline:none;}

/* # Style picker
================================================== */

#style-picker { position: fixed; left: -125px; top: 140px; font-size: 11px;color: #000; z-index:60; }
#style-picker .handler {
    position: absolute;
    right: -39px;
    width: 39px;
    height: 34px;
    top: 0;
    border: 1px solid #e9ead1;
    border-left: 0;
    cursor: pointer;
    background: #fafaf8 url(../images/ico-close.png) no-repeat 10px 6px;
    -webkit-border-radius: 0 22px 22px 0;
    -moz-border-radius: 0 22px 22px 0;
    border-radius: 0 22px 22px 0;
    -webkit-box-shadow: rgba(0,0,0,0.3) 3px 3px 2px;
    -moz-box-shadow: rgba(0,0,0,0.3) 3px 3px 2px;
    box-shadow: rgba(0,0,0,0.3) 3px 3px 2px;
    z-index:60;
 }
#style-picker .handler.closed {background: #fafaf8 url(../images/ico-color.png) no-repeat 10px 6px;}
#style-picker .bg-changer {width: 100px;padding: 15px 10px;border: 1px solid #e9ead1;background: #fafaf8;-webkit-box-shadow: rgba(0,0,0,0.3) 3px 3px 2px;-moz-box-shadow: rgba(0,0,0,0.3) 3px 3px 2px;box-shadow: rgba(0,0,0,0.3) 3px 3px 2px;}
#style-picker .bg-changer:after {content: '';visibility: hidden;display: block;clear: both;height: 0;}
#style-picker .bg-changer .skins {float: left;width: 100%;}
#style-picker .bg-changer .skins ul {margin-left: -5px;*zoom: 1;}
#style-picker .bg-changer .skins li {float: left;margin: 5px 0 0 5px;}
#style-picker .bg-changer .skins li a {display: block;width: 24px;height: 24px;border: 3px solid #ccc;}
#style-picker .bg-changer .skins li a:hover {border: 3px solid #fff;}
#style-picker .bg-changer .skins li.active a {border-color: #333;}

.skin-default {background:#00a850;}
.skin-blue {background:#4095a4;}
.skin-cream {background:#898354;}
.skin-silver {background:#aaaaaa;}
.skin-olive {background:#608866;}
.skin-orange {background:#c05b18;}
.skin-purple {background:#8c7494;}
.skin-tealgreen {background:#36948c;}
.skin-red {background:#cf3f5b;}

/* # Virtual keypad
================================================== */
.virtual-keypad {
    position:absolute;
    width: 150px;
    z-index:9999;
    padding: 6px;
    top:195px;
    right: 20px;
    background: #cdcdcd;
    border: 1px solid #cacaca;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    box-shadow: 0 0 22px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 22px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 22px rgba(0, 0, 0, 0.35);
}
.virtual-keypad a{ font-size: 19px; text-decoration:none; color:#666; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; }
.virtual-keypad a.clearTW{ 微軟正黑體, "Microsoft JhengHei", Arial, Verdana, Helvetica, sans-serif; font-size: 16px; }
.virtual-keypad a:hover{ color:#000; }
.virtual-keypad .keypad-header{ position: relative; border-bottom: 1px solid #aaa; padding: 1px 0 6px; margin: 0 0 6px 0;}
.virtual-keypad .keypad-header h4{ text-align:center; font-size: 14px; line-height: 18px; padding:0; margin:0; font-weight:bold; }
.virtual-keypad .keypad-header a.keypad-closed { top:-8px; right: -6px; width: 34px; height: 34px; position:absolute; background: url(../images/icon-close-small.png) no-repeat;}
.virtual-keypad .keypad-holder .bDefault{ display: block!important; 	border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
.virtual-keypad .keypad-row{ padding: 2px 0; display: block; clear: left; }

/* # Virtual keypad
================================================== */
.virtual-keyboard {
    position:absolute;
    width: 280px;
    z-index:9999;
    padding: 6px;
    top:140px;
    right: 20px;
    background: #cdcdcd;
    border: 1px solid #cacaca;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    box-shadow: 0 0 22px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 22px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 22px rgba(0, 0, 0, 0.35);
}
.virtual-keyboard a{ font-size: 14px; text-decoration:none; color:#666; font-family:Arial, Helvetica, sans-serif; font-weight:bold; }
.virtual-keyboard a.clearTW{ font-family:微軟正黑體, "Microsoft JhengHei", Arial, Verdana, Helvetica, sans-serif; font-size: 16px; }
.virtual-keyboard a:hover{ color:#000;}
.virtual-keyboard .keypad-header{ position: relative; border-bottom: 1px solid #aaa; padding: 1px 0 6px; margin: 0 0 6px 0;}
.virtual-keyboard .keypad-header h4{ text-align:center; font-size: 14px; line-height: 18px; padding:0; margin:0; font-weight:bold; }
.virtual-keyboard .keypad-header a.keypad-closed { top:-8px; right: -6px; width: 34px; height: 34px; position:absolute; background: url(../images/icon-close-small.png) no-repeat;}
.virtual-keyboard .keypad-holder .bDefault{ display: block!important; 	border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
.virtual-keyboard .keypad-row{ padding: 1px 0; display: block; clear: left; }

/* # Modal box
================================================== */
.half { width: 49%; margin-right: 1%; float: left; }
.modalOverlay { background-color: #000; cursor: wait; }
.modalLarge, .modalMedium, .modalSmall { display: none; position: fixed; top: 17%; left: 50%; color: #333; background: #fff; border: 1px solid #666; }
.modalSmall { margin-left: -200px; width: 400px; }
.modalMedium { margin-left: -300px; width: 600px; }
.modalLarge { margin-left: -400px; width: 800px; }
.modalClose { background: url(../images/icon-close-small.png) no-repeat; width: 34px; height: 34px; display: inline; z-index: 3200; position: absolute; right: 0; top: 0; cursor: pointer; border-left: 1px solid #ccc; text-indent: 9999px; overflow: hidden; }
.modelHead { width: 100%; border-bottom: 1px solid #ccc; position: absolute; }
    .modelHead h6 { float: left; display: block; padding: 7px 14px 0; font-size: 15px; font-weight: 700; }
.modalContainer { padding: 18px; margin-top: 30px; }
    .modalContainer h3 { margin-bottom: 5px; }
    .modalContainer .modalController { margin-top: 20px; text-align: center; }
    .modalContainer ol, .modalContainer ul { padding-left: 26px; margin: 15px 0; }
.modalScroll { height: 400px; overflow-y: scroll; }

/* ==========  Correction classes ========== */
.nomargin { margin: 0!important; }
.nopadding { padding: 0!important; }
.noborder { border: none!important; }
.divborder { padding: 10px 0 10px; margin-top: 15px; border-top: 1px solid #ccc;}

/* + Correction margins + */
.ma10 { margin: 10px; }
.ma15 { margin: 15px; }
.ma20 { margin: 20px; }
.ma30 { margin: 30px; }

.m10 { margin: 10px 0; }
.m15 { margin: 15px 0; }
.m20 { margin: 20px 0; }
.m30 { margin: 30px 0; }

.mr5 { margin-right: 5px; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
.mr25 { margin-right: 25px; }
.mr30 { margin-right: 30px; }
.mr35 { margin-right: 35px; }
.mr40 { margin-right: 40px; }
.mr55 { margin-right: 55px; }

.mb0 { margin-bottom: 0; }
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }

.mt0 { margin-top: 0!important; }
.mt5 { margin-top: 5px; }
.mt8 { margin-top: 8px; }
.mt10 { margin-top: 10px; }
.mt12 { margin-top: 12px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt25 { margin-top: 25px; }
.mt30 { margin-top: 30px; }
.mt35 { margin-top: 35px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }

.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }
.ml25 { margin-left: 25px; }
.ml30 { margin-left: 30px; }
.ml35 { margin-left: 35px; }
.ml40 { margin-left: 40px; }

.mr5 { margin-right: 5px; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
.mr25 { margin-right: 25px; }
.mr30 { margin-right: 30px; }

/* + Correction paddings + */
.pb0 { padding-bottom: 0!important; }
.pb5 { padding-bottom: 5px; }
.pb10 { padding-bottom: 10px; }
.pb15 { padding-bottom: 15px; }
.pb20 { padding-bottom: 20px; }
.pb25 { padding-bottom: 25px; }
.pb30 { padding-bottom: 30px; }

.pt0 { padding-top: 0; }
.pt5 { padding-top: 5px; }
.pt10 { padding-top: 10px; }
.pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }
.pt25 { padding-top: 25px; }
.pt30 { padding-top: 30px; }

/* video iframe css */
.demo-bg {
    display: none;
}
.demo-box {
    position: absolute;
    left: 50%;
    top: 122px;
    margin-left: -481px;
    width: 962px;
    height: 548px;
    z-index:9998;
    padding: 0px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}
.demo-box iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}
a.demo-close {
    position: absolute;
    width: 28px;
    height: 28px;
    background: url(../images/demo-close.png) no-repeat;
    display: block;
    text-indent: -9999px;
    z-index:9999;
    right: 10px;
    top: 10px;
}
a.demo-tag {
    position: absolute;
    width: 35px;
    height: 149px;
    padding: 10px 0 0 10px;
    background: url(../images/demo-tag.png) no-repeat;
    display: block;
    z-index:9999;
    left: -50px;
    top: 123px;
    color: #fff;
    font-size: 22px;
    line-height: 22px;
    letter-spacing: 5px;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
}
a.demo-tag:hover {
    background: url(../images/demo-tag.png) 0 -160px no-repeat;
}
a {
    -webkit-transition:all 0s ease 0s;
    -moz-transition:all 0s ease 0s;
    -o-transition:all 0s ease 0s;
    outline:none;
}
@media only screen and (max-width: 959px) {
.demo-bg {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url(../images/bg-grey.png) repeat;
z-index: 9990;
}
a.demo-close {
position: relative;
background: url(../images/demo-close-white.png) no-repeat;
top:0px;
right:0px;
float :right;
margin: 0 3px 3px 0;
}
.demo-box {
width: 750px;
height: 427px;
top: 52px;
left: 50%;
margin-left: -375px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.demo-box {
width: 420px;
height: 385px;
top: 12px;
margin-left: -210px;
}
}
@media only screen and (max-width: 479px) {
.demo-bg {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url(../images/bg-grey.png) repeat;
z-index: 9990;
}
a.demo-close {
position: relative;
background: url(../images/demo-close-white.png) no-repeat;
top:0px;
right:0px;
float :right;
margin: 0 3px 3px 0;
}
.demo-box {
width: 320px;
height: 320px;
margin-left:-160px;
top: 12px;
}
}

/* ==========  login sub-menu (_login_PromoCol) ========== */
#sub-menu { background: url(../images/sub-menu-bg.jpg) repeat-x 0 0 transparent; font-weight: bold;height:35px }
#sub-menu .center { height:35px; }
#sub-menu ul.first-level { max-width: 100%; display: block; height: 35px; position: relative; border:1px solid #cecece; border-right:0px;}
#sub-menu ul.first-level li {float: left; display: block; white-space: nowrap; text-align: center; vertical-align: middle; padding: 0 40px; position: relative; }
#sub-menu ul.first-level li.border { border-right: 1px solid #c0c0c0; border-left: 1px solid #ececec; display: block; height: 25px; margin-top:4px; width: 0; padding: 0; }
#sub-menu ul.first-level a {color:#004a2f;text-decoration:none; font-size:16px;line-height: 35px; display: block; height:35px; font-weight:bold; }
#sub-menu ul.first-level a:hover { color: #12AF5B; }
#sub-menu ul.first-level.column-3 li {width:24.7%;padding:0px; }
#sub-menu ul.first-level.column-3 li.border {width: 0; padding: 0; }
#sub-menu ul.first-level .sf-mega { display: none; z-index: 5; position: relative; height: 150px; top:-187px;left: 0; border: 1px solid #c3c4c2; background: #f6f6f6; padding: 0px 0px 0 20px; border-radius:3px 3px 0 0; -moz-border-radius:3px 3px 0 0; -webkit-border-radius:3px 3px 0 0;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);}
#sub-menu ul.first-level .sf-mega3 { display: none; z-index: 5; position: relative; height: 100px; top:-137px;left: 0; border: 1px solid #c3c4c2; background: #f6f6f6; padding: 0px 0px 0 20px; border-radius:3px 3px 0 0; -moz-border-radius:3px 3px 0 0; -webkit-border-radius:3px 3px 0 0;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);}
#sub-menu ul.first-level ul.sf-sub { margin: 0px; height: 150px; }
#sub-menu ul.first-level ul.sf-sub li { display: inline-block; position: relative; height: 50px; padding: 0; text-align: left; width: 167px; }
#sub-menu ul.first-level ul.sf-sub li a { font-size:15px; height: 100%; line-height: 50px; display:block; z-index:1000;}
#sub-menu ul.first-level ul.sf-sub li a .icon-caret-right { color: #b2b2b2; margin-right: 0px; margin-left: 0px; }
#sub-menu ul.first-level ul.sf-sub li a .border { bottom: 0; left: 0; content: "."; text-indent: -999em; width: 70%; height: 0; display: block; position: absolute; border-bottom: 1px solid #c0c0c0; border-top: 1px solid #ececec; }


/* 2019_08_13 */
img.w__rwd_m{
    max-width:100%;
    width:30%;
    margin:10px 5px;  
}
img.w__rwd_pc{
    max-width:100%;
    width:100%;
    margin:10px 10px;
    border:2px solid #a5a1a1;
}
ol.m_mobile{
    list-style:none;
    padding:0 15px;
}
ol.m_mobile .tit{
    background:#fafafa;
    padding: 5px;
    color: #33b361;
    display: block;
    width: 70px;
    text-align: center;
    margin-bottom: 5px;
    font-weight:600;    
}
.item{
    width: 30px;
    height: 30px;
    display: inline-block;
    background: #00994e;
    color: #fff;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    margin-right:5px;  
}
.s_txet{
    margin:5px 0; 
}
.container.m{
    margin-left:10px; 
}

@media only screen and (max-width:640px) {
.content-holder{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
ol.m_mobile{
    padding:0;
}
ol.m_mobile li.imgcenter{
    text-align:center; 
}
img.w__rwd_pc{
    margin:10px 0;
}
img.w__rwd_m{
    max-width:100%;
    width:50%;
    margin:10px 10px;  
}
.container.m{
    margin-left:0px; 
}
}