@import url(font-awesome.min.css);
html, body{font-size:0.9375rem;color:#596060;height:100%;font-family: Tahoma, "儷黑 Pro", "LiHei Pro",'微軟正黑體','Microsoft JhengHei', "標楷體", DFKai-SB, 'Simsun';}

body{}
h1,h2,h3,h4,h5,h6{font-family: Tahoma, "儷黑 Pro", "LiHei Pro",'微軟正黑體','Microsoft JhengHei', "標楷體", DFKai-SB, 'Simsun';color: #212129; font-weight: 600;}
a{ color:#2185c5;/*transition: all .3s ease.3s;*/}
a:hover{ color:#ba68c8; /*transition: all .3s ease .3s;*/} 
.callout input[type="checkbox"], .callout input[type="radio"], table input[type="checkbox"]{ width: 18px; height: 18px; margin-bottom: 0;}

/*---------------   Layout   -----------------------------------------------------------------------------------------*/
.wrapper{ min-height:100%; height:100%; height:auto !important;}
header{height: 140px}
.contentwrapper{margin:1em auto;background-color: #fff;} 
.contentwrapperInner{ padding:2em; text-decoration:}
header.container{/* Permalink - use to e
.Inner{ margin:1em;}dit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+92,f5f5f5+98,cccccc+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 92%, rgba(245,245,245,1) 98%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 92%,rgba(245,245,245,1) 98%,rgba(204,204,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 92%,rgba(245,245,245,1) 98%,rgba(204,204,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
padding:0 1em;border-bottom:1px solid #f4f4f4;-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);}
footer{ background:#e6e6e6; border-top:1px solid #dcdcdc;/* 設定footer絕對位置在底部 */
position: fixed; !important;
width: 100%;
bottom: 0;
z-index: 5;
background-repeat:repeat-x;
_position:absolute;
_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);
height: 70px;
}
.push{height: 70px;}
.mainpage-footer-logo{margin-bottom: 0.6%; height: 5%; width: 5%}

/*-------  Button   ----------------------------------------------------------------------------------------------------*/
.button{ border-radius: 3px; -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3); background-color:#2185c5;}
.button:hover{ background-color:#7ecefd;}
.button.secondary {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f5f5f5+25,d2d2d2+95,ffffff+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f5f5f5 25%, #d2d2d2 95%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f5f5f5 25%,#d2d2d2 95%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#f5f5f5 25%,#d2d2d2 95%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
color: #212121; border:1px solid #ccc; font-weight: bold; }
.button.secondary:hover, .button.secondary:focus {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d4d4d4+0,f5f5f5+97,fafafa+100 */background: #d4d4d4; /* Old browsers */
background: -moz-linear-gradient(top,  #d4d4d4 0%, #f5f5f5 97%, #fafafa 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #d4d4d4 0%,#f5f5f5 97%,#fafafa 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #d4d4d4 0%,#f5f5f5 97%,#fafafa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4d4d4', endColorstr='#fafafa',GradientType=0 ); /* IE6-9 */color:#212121;}


/*-------  LINK   ------------------------------------------------------------------------------------------------------*/
table.datatable a, table.datatable02 a{ color:#2185c5;}
table.datatable a:hover, table.datatable02 a:hover{ color: #ba68c8;}
.label.warning{background-color:#eebd27;color:#fff}

.version{ background-color: #ececec;}
.version a{ display: block;padding:10px;}
.version a:hover{ color: #333 }
.version a.selected{background-color: #fff; border-top:4px solid #2185c5; padding-top:6px;}

/*---------------   Font Setting   ------------------------------------------------------------------------------------*/
header h1.title {color:#555;font-size:1.875rem;padding-top:50px;font-family: Tahoma, "儷黑 Pro", "LiHei Pro",'微軟正黑體','Microsoft JhengHei', "標楷體", DFKai-SB, 'Simsun';font-weight:bold;}
header h1 .subtitle{font-size:1rem;font-weight:bold;}
footer .copyinfo{ padding:1em; font-size: 0.8125rem;}
footer .copyinfo .lab{margin-bottom:5px;}
.platform{margin-top:.75em; text-align:center;}
.platform h1{font-size:1.25em;color:#212129;}

/*---------------   infoBox   ---------------------------------------------------------------------------------------*/
.reveal{ background-color:#fff;}
.reveal .card{ border:1px solid #ececec;}
.reveal .card .card-divider{ background-color: #7ecefd; font-weight: bold; border-bottom:5px solid #ccecff; padding:.5em 1em .3em;}
.reveal .card .card-divider h6{ color: #ffffff;}
.reveal .close-button{ margin-top:10px; margin-right: 10px; color: #fff;}
.reveal .input-group-label{background-color: #fff;}


.home{background:url(../home/images/digital.jpg) center center fixed no-repeat;-moz-background-size:cover;background-size:cover;}
.page{background-color:#fafafa;}

ul.list {margin:0;padding:0 0.5em;list-style:none;}
ul.list li{border-bottom:1px dashed #ccc;padding:.5em 0;background:url(../home/images/square.gif) left 16px no-repeat; padding-left:15px;}
ul.list li:last-child{border-bottom:none;}
ul.list li h6{margin-bottom:0;}
ul.list li .fa-2x{margin-left:8px;margin-bottom:5px;font-size:18px;vertical-align:middle;}
ul.list li a .fa-2x{color:#888;-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);border-radius:90px;padding:5px 5px 2px 5px;}
ul.list li a:hover .fa-2x{background-color:#7ecefd;color:#fff;}

ul.list ul{margin:.8em 0}
ul.list li li{border-bottom:none;padding:.1em 0;padding-left:1em;background-position:left 13px;}

 
.loginBox{margin:2em 0;}
.loginBox h1.title{font-size:28px;}
.loginBox .callout{padding-top:2.5em;background: rgba(255,255,255,0.7); box-shadow: 0 5px 20px rgba(10, 10, 10, 0.5);border:5px solid #fff;border-radius:5px}



/*---------------   Navigation   ---------------------------------------------------------------------------------------*/
.topnav{display: table;margin: 7px 0 0 auto;}
.topnav li a{color:#555}
.topnav li a:hover{color:#2185c5}
.user{color:#ffffff;}
.navigation{background-color:#003377; padding:5px 0 0 ;}
.navigation ul.menu{/*display: table;margin: 0 auto;*/}
.navigation ul.menu a{color:#fff;margin:0 1px; font-size: 15px;padding:7px 15px; }
.navigation ul.menu a:hover, .navigation ul.menu a.selected{background-color:#fff;color:#2185c5;border-radius:3px;}
.navigation ul.menu li li a{ color: #2185c5; text-align: left;}
.navigation ul.menu li li a:hover{color: #ba68c8;}

.message{padding-top:.6em;letter-spacing:2px;}
.message a.label{background-color:#07a0c3;color:#fff;border-radius:6px;padding-top:3px;padding-bottom:5px;}
.message a.label:hover{background-color:#f14c84;}

.number{color:#c00;font-family:arial;font-weight:bold;font-size:20px;}
.fa-cloud-upload{color:#ccc}

.accordion-title { font-size: 1rem; color: #2185c5;padding: .7rem 1rem;}
.accordion-title .date{ color:#999;font-size:13px;font-weight:bold;padding-left:1.5em;}
.accordion-content a.text{ color: #595959;}
.accordion-content a.text:hover{color:#ba68c8; text-decoration: underline;}
.accordion-content .mar_top{ margin-top: 10px; }

.card .fa-question-circle-o{font-size:1.25rem}

ul.vertical li{border-bottom:1px dotted #ccc;}
ul.vertical li:last-child{border-bottom:none;}
ul.vertical li a:hover, ul.vertical li a.selected{ background-color: #f5f5f5; color:#596060;}

/*--- breadcrumbs ---*/
.breadcrumbs li {text-transform: none;}

/*---   Tabs   ---*/
.tabs-title > a { padding: 0.8125rem 1.5rem;font-size: 0.9375rem;color:#444}


/* tools
-----------------------------------------------------------------------------------------------------------------------------------------------------------*/
.tools{ border-collapse: collapse;text-align: center; width:871px; height:140px;margin:0 auto}
.tools ul{ z-index:100; margin: 0; padding: 0; list-style-type: none; display:inline-block;}
.tools ul li{ float: left;}/*Top level list items*/
.tools ul li a{ margin: 0px; padding: 0; height:140px;background: url(../home/images/db-construction-process.png) no-repeat left top; display:inline-block; overflow: hidden;}/*Top level menu link items style*/

#nav01 a{ width:  147px; background-position:       0   0;}
#nav02 a{ width:  170px; background-position:  -147px   0;}
#nav03 a{ width:  153px; background-position:  -317px   0;}
#nav04 a{ width:  203px; background-position:  -470px   0;}
#nav05 a{ width:   75px; background-position:  -673px   0;}
#nav06 a{ width:   56px; background-position:  -748px   0;}
#nav07 a{ width:   67px; background-position:  -804px   0;}

#nav01 a.selected{ background-position:      0   -140px;}
#nav02 a.selected{ background-position:  -147px  -140px;}
#nav03 a.selected{ background-position:  -317px  -140px;}
#nav04 a.selected{ background-position:  -470px  -140px;}
#nav05 a.selected{ background-position:  -673px  -140px;}
#nav06 a.selected{ background-position:  -748px  -140px;}
#nav07 a.selected{ background-position:  -804px  -140px;}

#nav01 a:hover{ background-position:      0    -140px;}
#nav02 a:hover{ background-position:  -147px   -140px;}
#nav03 a:hover{ background-position:  -317px   -140px;}
#nav04 a:hover{ background-position:  -470px   -140px;}
#nav05 a:hover{ background-position:  -673px   -140px;}
#nav06 a:hover{ background-position:  -748px   -140px;}
#nav07 a:hover{ background-position:  -804px   -140px;}
.hidden{ text-indent: -5000px;}


/*---      ---*/
.datatable .label{border-radius:99px;font-size: 1rem;padding:8px 20px;font-weight: 100}
.datatable .data01{background-color:#23c0ba;}
.datatable .data02{background-color:#F4AC45;}

a.des{background-color: #ccc; color:#555; padding:2px 10px; border-radius:3px;}
a:hover.des{background-color: #c00; color: #fff;}

/*   SiteMap   */
.sitemap-navigation {
  display: inline-block;
  width: 900px;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  /* Put all this in a media query. Don't forget to style a simple mobile version */
}
.sitemap-navigation ul,
.sitemap-navigation li {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.sitemap-navigation a {
  display: inline-block;
}
.sitemap-navigation .menu-item::before,
.sitemap-navigation > .menu-item-has-children > .sub-menu::before {
  content: '';
  display: block;
  position: relative;
  left: 50%;
  margin-left: -2px;
  width: 100%;
  border-left: #ececec solid 4px;
  height: 2em;
}
.sitemap-navigation > .menu-item-has-children::before {
  display: none;
}
.sitemap-navigation > .menu-item-has-children > .sub-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-top:#ececec solid 4px;
  margin-top: 2em;
}
.sitemap-navigation > .menu-item-has-children > .sub-menu::before {
  position: absolute;
  top: -2em;
  margin-top: -4px;
}
.sitemap-navigation > .menu-item-has-children > .sub-menu > .menu-item {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  margin-top: -4px;
  padding-left: 0.2em;
  padding-right: 0.2em;
}
.sitemap-navigation > .menu-item-has-children > .sub-menu > .menu-item:first-child::before, .sitemap-navigation > .menu-item-has-children > .sub-menu > .menu-item:last-child::before {
  background: #fefeff;
}
.sitemap-navigation > .menu-item-has-children > .sub-menu > .menu-item:first-child::before {
  left: auto;
  right: 50%;
  width: 100%;
  border-left: none;
  border-right: #ececec solid 4px;
}

.sitemap-wrapper {
  padding: 0;
  text-align: center;
}

.sitemap-navigation a {
  background: #0044BB;
  border-radius: 0.25em;
  color: white;
  text-decoration: none;
  padding: 1em;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}
.sitemap-navigation a:hover {
  background: #0000AA;
}
.sitemap-navigation > .menu-item-has-children > a {
  background: #008866;
  font-size: 1.2rem;
}
.sitemap-navigation > .menu-item-has-children > a:hover {
  #background: #b45f77;
}
.sitemap-navigation > .menu-item-has-children > .sub-menu > .menu-item > a {
  background:#e6e6e6;
  font-weight: 700;
  color: black;
  cursor: default;
}
.sitemap-navigation > .menu-item-has-children > .sub-menu > .menu-item > a:hover {
#   background: #a98551;
}