@charset "utf-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:700);


* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body,
div,
a,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
input,
button,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent;
  font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, "微軟正黑體", sans-serif;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

ul,
ol,
li {
  list-style: none;
}

.body_bg1 {
  background-color: #FFF;
}

th,
td {
  font-size: 16px;
  line-height: 1.42857em;
}

image {
  border: 0;
}

/*-------*/

header[role="banner"] {
  text-align: center;
}

.topPic {
  background: url(/images/logo_v2015.jpg) no-repeat 0 0;
  background-size: cover;
  font-size: 12px;
  max-width: 1020px;
  height: 165px;
  margin: 0 auto;
  text-align: right;
  padding: 6px;
  box-sizing: border-box;
  position: relative;
}

.topPic h1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: left;
  font-size: 24px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  padding: 0;
  color: #333;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  height: 40px;
  line-height: 38px;
}

.E2 {
  float: left;
  color: #71B9DF;
  margin-right: 10px;
  margin-left: 2px;
  border: solid 2px #71B9DF;
  background-color: #FFF;
  padding: 0 8px;
  height: 39px;
  line-height: 38px;
  border-radius: 6px;
  font-weight: bold;
}

.hdd1 {
  background-color: #71B9DF;
  margin-left: 49px;
  margin-right: 2px;
  height: 39px;
  border-radius: 6px;
}

.funcLink a {
  color: #999;
  text-decoration: none;
}

.funcLink a:hover {
  color: #46BF5B;
}

#container {
  margin: 0 auto;
  max-width: 1020px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  background-color: #FFF;
  position: relative;
  overflow: visible;
  display: flex;
}

#container::after {
  content: '';
  clear: both;
  display: block;
}

#container .smenu {
  display: none;
  position: absolute;
  top: 0;
  display: block;
  height: 36px;
  width: 36px;
  background: #FFFFDE;
  font-size: 20px;
  text-align: center;
  line-height: 36px;
  cursor: pointer;
  z-index: -3;
}

footer#ft_wrap {
  clear: both;
  padding: 0 0 30px 0;
  margin: 12px auto 0 auto;
  max-width: 1020px;
}

p#copyright {
  font-family: Georgia, "Times New Roman", Times, serif;
  background: url(/images/NCFB-logo_s.jpg) no-repeat 80px 15px;
  background-size: 269px;
  padding-left: 360px;
  padding-top: 12px;
  height: 100px;
  color: #888;
}

.qrcode-wrap {
  display: block;
  margin: 20px auto 20px;
  width: 160px;
  height: 180px;
  padding: 0;
  border: dashed 3px #6CC;
}

.qrcode-wrap img {
  width: 155px;
  height: 155px;
  display: block;
}

.qrcode-txt {
  position: relative;
  top: -10px;
  text-align: center;
  padding: 0 0 5px;
}

.top {
  position: fixed;
  bottom: 20px;
  right: 25px;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 4px;
  background: rgba(0, 153, 255, 0.8);
  z-index: 9696;
  cursor: pointer;
  text-align: center;
  color: #FFF;
}

.top:hover {
  background: #0099ff;
}

.top a {
  color: #FFF;
  text-decoration: none;
}

p#copyright span {
  display: block;
  margin-top: 6px;
}

nav {
  margin: -4px auto 0 auto;
  background: url(../images/nav_bg1.png) repeat #71B9DF;
  max-width: 1020px;
  overflow: visible;
  text-align: right;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

nav .bmenu {
  display: block;
  position: absolute;
  top: 5px;
  left: -999px;
  background-color: rgba(255, 255, 255, .45);
  border-radius: 4px;
  border: solid 1px #999;
}

nav .bmenu i {
  display: block;
  height: 36px;
  width: 44px;
  text-align: center;
  cursor: pointer;
  line-height: 36px;
}

nav .bmenu:hover {
  background-color: #738DB5;
}

#navrow a {
  margin-left: -4px;
  display: inline-block;
  width: 120px;
  text-align: center;
  padding: 0 12px;
  text-decoration: none;
  color: #333;
  text-shadow: 0px -1px 0px rgba(255, 255, 255, .45);
  line-height: 40px;
  position: relative;
  -webkit-transition: color .25s, background .25s;
  -moz-transition: color .25s, background .25s;
  -ms-transition: color .25s, background .25s;
  -o-transition: color .25s, background .25s;
  transition: color .25s, background .25s;
  position: relative;
}

#navrow a:hover {
  color: #FFF;
  background: #D381D3;
  transition: color .25s, background .25s;
  box-shadow: -1px -1px 6px rgba(0, 0, 0, .75);
}

#navrow a::after {
  content: '';
  position: absolute;
  top: 2px;
  left: -1px;
  height: 36px;
  width: 1px;
  background: #777;
}

#navrow a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: #A02C5E;
  transition: width .5s;
  width: 0;
}

#navrow a:hover::before {
  width: 0;
}

#navrow a .newPic {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 888;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .75);
  transition: height .5s;
  height: 0;
  overflow: hidden;
}

#navrow a:hover .newPic {
  height: 90px;
  display: block;
}

#menu_wrap {
  width: 230px;
  background-color: #FFFFDE;
  vertical-align: top;
  flex: 0 0 230px;
}

#menu_wrap.toFloat {
  position: absolute;
  top: 0;
  left: 0;
  float: none;
  background-color: #FFFFDE;
  z-index: 5;
  box-shadow: 1px 1px 5px #999;
}

.open>a {
  background-color: #B8B800;
  color: #FFF;
}

.external {
  border-top: dotted 1px #E0ABDB;
  text-align: right;
  padding: 5px;
}

.external a {
  color: #369;
  font-size: 12px;
  text-decoration: none;
}

.external a:hover {
  text-decoration: underline;
}

#main {
  padding: 10px;
  background: #FFF;
  overflow: auto;
  vertical-align: top;
  flex: 1 1 auto;
}

#main h3 {
  font-style: italic;
  color: #AAA;
  margin: 2px 0 6px 0;
}

.leftCol {
  padding-right: 5px;
  border-right: dotted 1px #CCC;
  width: 555px;
  float: left;
}

.rightCol {
  float: left;
  width: 210px;
  padding: 5px;
  text-align: center;
}

.sBox {
  box-sizing: border-box;
  padding: 0 0 18px 0;
  margin-top: 6px;
  position: relative;
  overflow: visible;
  line-height: 1.6em;
}

.sBox::after {
  content: '';
  clear: both;
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 0;
  border-bottom: dotted 1px #CCC;

}

.sBox.fixed1 {
  height: 310px;
  overflow: hidden;
}

.sBox p {
  margin: 8px 8px 8px 22px;
  text-indent: 0;
}

.boxInner {
  margin-left: 1.5em;
  overflow: auto;
}

.sHeader {
  font-family: 'Droid Serif', "微軟正黑體", serif;
  text-shadow: 0 1px 0 #BBB, 1px 0 0 #BBB;
  font-size: 20px;
  color: #339;
  position: relative;
  line-height: 36px;
}

.sHeader span {
  color: #008BCE;
  text-shadow: none;
}

.sHeader2 {
  font-family: "Comic Sans MS", Arial, "新細明體", sans-serif, serif;
  font-size: 18px;
  font-weight: 700;
  color: #6F8853;
  margin: 0;
  margin-bottom: 4px;
}

.sHeader3 {
  display: block;
  font-size: 18px;
  font-weight: 500;
  color: #16A59D;
  text-shadow: 1px 0 1px #999;
  line-height: 32px;
  margin-bottom: 8px;
}

.sym1::before {
  content: '\2724';
  padding-right: 5px;
}

.sym2::before {
  content: '\2721';
  padding-right: 5px;
}

.sym3::before {
  content: '\2711';
  padding-right: 5px;
}

.sym4::before {
  content: "\265f";
  padding-right: 5px;
}

.sym5::before {
  content: "\2706";
  padding-right: 5px;
  font-size: 20px;
}

p.indent1 {
  text-indent: -30px;
  margin-left: 45px;
}

p.indent2 {
  text-indent: -19px;
  margin-left: 40px;
}

p.indent3 {
  text-indent: 2em;
}

p.margin1 {
  margin-left: 5em;
}

#newsList {
  margin-top: 5px;
  margin-bottom: 10px;
}

#newsList .news-full {
  color: #333;
  margin: 0;
  padding: 6px 2px 10px 2px;
  border-bottom: solid 1px #DCEDDD;

}

#newsList .shrt {
  color: #333;
  margin: 0;
  padding: 6px 2px 10px 2px;
  border-bottom: solid 1px #DCEDDD;
  padding-left: 14px;
  position: relative;
  overflow: visible;
}

#newsList .shrt p{
  margin: 0;
}

#newsList .shrt::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 3px;
  width: 4px;
  height: 4px;
  background-color: #639;
}

#newsList.viewAll {
  height: auto;
  overflow: visible;
}

#newsList .news-full:first-child {
  border-top: dotted 1px #DCEDDD;
}

#newsList .news-full:hover,
#newsList .shrt:hover {
  background: #FEF8FD;
}

.ntable {
  display: table;
}

.ntable-row {
  display: table-row;
}

.ntable-row:hover {
  background: #FEF8FD;
}

.ntable-row>div {
  display: table-cell;
  padding: 5px 0 10px 0;
  border-bottom: solid 1px #DCEDDD;
}

.ntable-date {
  min-width: 95px;
  padding: 3px;
}

.ntable-title {
  background: #F6FFBB;
  border-top: solid 2px #888888;
}

.newsTbar {
  background-color: #FEFEE9;
  border-bottom: solid 1px #999;
  border-top: solid 2px #999;
  padding: 4px 0;
  line-height: 1.1em;
}

.txtalg_Cnter {
  text-align: center;
}

.nDate {
  display: block;
  float: left;
  width: 90px;
  margin-top: 4px;
}

.nCnt {
  display: block;
  margin-left: 91px;
}

.pdate {
  color: #999;
  border-radius: 4px;
  padding: 2px 4px;
}

.linkTbl {
  border-collapse: collapse;
  table-layout: auto;
}

.linkTbl tr {
  border-bottom: solid 1px #FFF;
}

.linkTbl td {
  margin: 0;
  padding: 5px 4px;
  line-height: 24px;
}

.linkTbl td p {
  margin: 0;
  padding: 0;
}

ol.letList {
  margin: 5px 0 10px 45px;
}

ol.letList li {
  list-style: upper-alpha outside;
  padding: 5px;
  line-height: 22px;
}

ol.pubList {
  margin: 10px 0 10px 28px;
}

ol.pubList li {
  list-style: decimal outside;
}

.downtbl1 {
  border-radius: 4px;
  border: solid 1px #C7C8C4;
  background-color: #F1F5E2;
  width: 560px;
  border-collapse: collapse;
  margin: 0 auto;
  padding: 2px;
}

.downtbl1 td {
  padding: 6px 2px;
}

.f_navy {
  color: navy;
}

.f_brown {
  color: brown;
}

.f_red {
  color: red;
}

.sectionLinks {
  min-width: 130px;
}

.icoList {
  text-align: right;
  height: 24px;
  line-height: 24px;
}

.icoList img {
  vertical-align: middle;
}

ul.eduList {
  margin: 5px 0 8px 1.6em;
}

ul.eduList li {
  margin: 6px 0;
  line-height: 24px;
}

.wrkshpTbl {
  border-collapse: collapse;
}

.wrkshpTbl th {
  background-color: #799476;
  color: #FFF;
  padding: 4px 3px;
  margin: 0;
  border-right: solid 1px #F7F7F7;
}

.wrkshpTbl td {
  padding: 4px 3px;
  margin: 0;
}

.mbrTbl {
  border-collapse: collapse;
}

.mbrTbl td {
  border: solid 1px #333;
  padding: 4px 2px;
}

.mbrTbl tr:nth-child(even) {
  background-color: #fff;
}

.sBox blockquote {
  margin-left: 2.5em;
}

table.ulintbl {
  border-collapse: collapse;
}

table.ulintbl td {
  border-bottom: solid 1px #ccc;
  padding: 4px 6px;
}

.cornImg {
  border-radius: 4px;
}

.arrow {
  position: relative;
}

.arrow.UP::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -6px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px;
  border-color: transparent transparent #FFF transparent;
}

.arrow.DWN::before {
  content: '';
  position: absolute;
  top: 3px;
  left: -6px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px;
  border-color: #FFF transparent transparent transparent;
}

.sitemap {
  padding: 20px 10px;
}

.stmap_main {
  margin-left: 24px;
  border-left: dotted 1px #999;
}

.stmap_box {
  line-height: 1.4em;
  font-size: 18px;
  padding: 5px 0;
  position: relative;
}

.stmap_box:last-child:after {
  content: '';
  position: absolute;
  top: 24px;
  left: -1px;
  width: 0;
  height: 100%;
  border-left: solid 1px white;
}

.stmap_box ul {
  margin-left: 3.5em;
  /* border-left: dotted 1px #999; */
  margin-bottom: 5px;
  padding-top: 3px;
}

.stmap_box ul li {
  padding-left: 1em;
  position: relative;
  margin-bottom: 4px;
}

.stmap_box ul li a {
  text-decoration: none;
  background-color: #D8F1F1;
  display: inline-block;
  padding: 3px 8px;
}

.stmap_box ul li:before {
  content: '';
  position: absolute;
  top: 15px;
  left: 0;
  border-bottom: dotted 1px #999;
  width: 18px;
}

.stmap_box ul li:after {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  border-left: dotted 1px #999;
  width: 1px;
  height: 34px;
  z-index: 99;
}

.stmap_box ul li:last-child:after {
  height: 19px;
}

.stmap_shd {
  font-size: 18px;
  text-shadow: 1px 1px 0px #9ACDDC;
  position: relative;
  padding-left: 28px;
}

.stmap_shd a {
  text-decoration: none;
  background-color: #F7F8C7;
  display: inline-block;
  padding: 4px 8px;
}

.stmap_shd::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 0;
  border-bottom: dotted 1px #999;
  width: 28px;
}

.sm_lab {
  background-color: #6CC;
  padding: 4px;
  font-size: 20px;
  color: #FFF;
}

.contact_box {
  padding: 10px;
  color: #333;
  line-height: 1.2em;
}

.feetbl td {
  border-bottom: solid 1px #333;
}

.feetbl tr:last-child td {
  border-bottom: none;
}

.style3 {
  color: brown;
  font-weight: bold;
}

.style5 {
  color: brown;
}

.tbl-TMBD td.sectionLinks {
  text-align: right;
}