* { font-family: 微軟正黑體; }

html {
	height: 100%;
	_height:100%;
}

body {
	margin: 0;
	padding: 0;
	height: 100%;
	_height:100%;
}

a:hover { text-decoration: none; }


div { word-wrap: break-word; word-break: normal; }

/* Header */
header {
    padding: 0px 0px;
    width: 100%;
    background-color: #FFFFFF;
}

.header-center {
    text-align: center;
}

/* navbar */
nav {
    z-index: 1;
}

/* 設定上方選單的文字顏色為白色-正常狀態 */
#top-nav ul li a {
	color: #ffffff;
	text-align: left;
}

/* 設定上方選單的文字-被選擇之後 */
#top-nav ul li.active a {
	color: #ffffff;
	background: #0B4C5F;	
}

.navbar .nav.pull-center {
	float: none;
	margin: 0 auto;
	display:inline-block;
	*display:inline; /* ie7 fix */
	*zoom:1; /* hasLayout ie7 trigger */
	vertical-align: top;
}

.navbar-inner {
	text-align:center;
}

/* 選單按鈕樣式-收摺之後 */
.navbar-toggle {
	color: #ffffff;
	border: 0px;
}

/* 選單樣式 - 更新為 Bootstrap 4 相容 */
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus {
  color: #ffffff;
  background-color: #146E8A;
}

/* 縮小時，選單按鈕樣式 - 更新為 Bootstrap 4 相容 */
.navbar .navbar-toggler:hover,
.navbar .navbar-toggler:focus {
	color: #ffffff;
	border: 0px;
	background-color: #0B4C5F;
}

.navbar-toggle.hover {	
	background-color: #0B4C5F;
}

.dropdown-menu { z-index: 1; }

/* 左側下拉式選單(第二層選單) */
.dropdown-menu > li {
  padding-top:6px; padding-bottom:6px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #ffffff;
  background-color: #146E8A;
}

.dropdown-menu > li:hover,
.dropdown-menu > li:focus {
  color: #ffffff;
  background-color: #146E8A;
}


/* 左側選單樣式 */
#sidebar-wrapper {
  top: 120px;
  left: -200px;
  width: 200px;  
  background-color: #ECF6CE;
  color: #333333;
  position: fixed;
  height: 100%;
  z-index: 1;
}

.sidebar-nav {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  width: 250px;
  list-style: none;
}

/* Images Link */
#id_footer {
	margin: 0px auto;
    /* 設定footer的高度 */
    min-height: 180px;
    box-sizing: border-box;
    /* 設定footer絕對位置在底部 */
    /*position: absolute;*/
    /*bottom: 0;*/
    /* 展開footer寬度 */
    width: 100%;
	color: #030303;
	background-color: #D1D3E8;
	text-align:center;
}

#id_iconbox {
	margin: 0px auto;
    /*height: 80px;*/
    box-sizing: border-box;
    width: 100%;
	background-color: #FFFFFF;
	text-align: center;
}

#id_iconbox a {
	padding-left: 10px;
}

.ic_facebook{
	/*width: 80%;*/
	height: 80px;
	border-radius: 5px;
	padding:5px;
	background: url('./images/ic_facebook.png') no-repeat left center, #3b5998 ;
	border: 2px solid #4477cd;
	/*font-family: "微軟正黑體";*/
	color: #fff;
}

/* Footer */
#id_footer div div a {
	color: #0174DF;
}

.footer-spliter {
	color: #666666;
}

/* Calendar */
.act_cal {
	text-align:center;
	padding: 3px 3px;
}

.act_cal a { color: #ffffff; text-decoration:none; }

/* Promo Course */
.promo_course_date {
	color:#000; border-bottom:1px #ccc solid;
}

/* white-space: nowrap; */
.promo_course_name {
	height:60px; color:brown; border-bottom:1px #ccc solid; font-weight:bold; overflow:hidden; padding:6px 0px; text-overflow : ellipsis;
}
.promo_course_memo {
	font-size:0.9em; color:#666; height:60px; overflow:hidden; padding:6px 0px; text-overflow : ellipsis;
}

/* Course Query */
.tr1  { border-bottom:1px solid #99ccff; }
.thf1 { font-size:16px; text-align:left; color:#fff; }
.tdf2 { font-size:16px; text-align:left; }
.tdf3 { font-size:16px; text-align:left; line-height:18pt; }
.tdf1 { font-size:16px; text-align:left; color:#000; }
.courseMark { font-size:13px; color:white; background-color:#FA5858; padding:1px 6px 3px 6px; border-radius:5px; }
/* Course Content Table Title */
.thcc2 { color:#02639E; }
 


/* 設定bootstrap table-hover 效果*/
.table-hover > tbody > tr:hover {
  background-color: #DDDDDD;
}

/* RWD */
@media (min-width: 768px) {
  #sidebar-wrapper.sidebar-toggle {
    transition: 0s;
    left: 200px;
  }
  
  #page-wrapper {
    margin-left: 200px;
  }
  
  #block_news_div { height:225px; }
}

/* 手機上不顯示 */
@media only screen and (max-width: 768px) {
  /*LOGO說明-專業技能/證照/公職/培訓中心*/
  #top_logo2 { display:none; }  
  /*活動行事曆*/
  #block_cal { display:none; }
  /*活動專欄*/
  #block_act { display:none; }
  /*最新消息*/
  #block_news { width:100%; }
  #block_news_div { }
}



/* 左側選單樣式 */
.navbar-gray {background-color:#fff;border-color:#eee;margin:0px;}
.navbar-gray .navbar-brand{color:#000;}
.navbar-gray .navbar-brand:hover,.navbar-gray .navbar-brand:focus{color:#000;background-color:transparent}
.navbar-gray .navbar-text{color:#000;}
.navbar-gray .navbar-nav ul{min-width:100%;}
.navbar-gray .navbar-nav li{clear:both;border-bottom-color:white;border-bottom-width:1px;border-bottom-style:solid;width:100%}
.navbar-gray .navbar-nav>li>a{font-size:120%;color:#000;border-left-color:transparent;border-left-width:8px;border-left-style:solid}
.navbar-gray .navbar-nav>li>a:hover,.navbar-gray .navbar-nav>li>a:focus{border-left-color:#00AEC3;border-left-width:8px;border-left-style:solid;color:#00AEC3;background-color:transparent}
.navbar-gray .navbar-nav>.active>a,.navbar-gray .navbar-nav>.active>a:hover,.navbar-gray .navbar-nav>.active>a:focus{border-left-color:#00AEC3;border-left-width:8px;border-left-style:solid;color:#00AEC3;background-color:transparent;background-image:url("../img/navbar-hover.png");background-repeat:no-repeat;background-position:right center}
.navbar-gray .navbar-nav>.disabled>a,.navbar-gray .navbar-nav>.disabled>a:hover,.navbar-gray .navbar-nav>.disabled>a:focus{color:#ccc;background-color:transparent}
.navbar-gray .navbar-toggle{border-color:#FFF;}
.navbar-gray .navbar-toggle:hover,.navbar-gray .navbar-toggle:focus{color:#fff; background-color:#0B4C5F;}
.navbar-gray .navbar-toggle .icon-bar{background-color:#000}
.navbar-gray .navbar-collapse,.navbar-gray .navbar-form{border-color:#eee}
.navbar-gray .navbar-nav{width:100%}
.navbar-gray .navbar-nav>.open>a,.navbar-gray .navbar-nav>.open>a:hover,.navbar-gray .navbar-nav>.open>a:focus{background-color:#eee;color:#AAA}
@media (max-width: 991px){.navbar-gray .navbar-nav .open .dropdown-menu>li>a{color:#000}
.navbar-gray .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-gray .navbar-nav .open .dropdown-menu>li>a:focus{color:#AAA;background-color:transparent}
.navbar-gray .navbar-nav .open .dropdown-menu>.active>a,.navbar-gray .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar-gray .navbar-nav .open .dropdown-menu>.active>a:focus{color:#AAA;background-color:#eee}
.navbar-gray .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-gray .navbar-nav .open .dropdown-menu>.disabled>a:hover,.navbar-gray .navbar-nav .open .dropdown-menu>.disabled>a:focus{color:#ccc;background-color:transparent}}
.navbar-gray .navbar-link{color:#000}
.navbar-gray .navbar-link:hover{color:#AAA}
.navbar-gray .btn-link{color:#000}
.navbar-gray .btn-link:hover,.navbar-gray .btn-link:focus{color:#AAA}
.navbar-gray .btn-link[disabled]:hover,.navbar-gray .btn-link[disabled]:focus,fieldset[disabled] .navbar-gray .btn-link:hover,fieldset[disabled] .navbar-gray .btn-link:focus{color:#ccc}


/* 課程系列頁籤(tab) */
.nav-tabs2 {
  border-bottom: 0px solid #ddd;
}
.nav-tabs2 > li {
  float: left;
  font-size:110%;
  margin-bottom: 0px;
  border-bottom: 1px solid #00AEC3;
}
.nav-tabs2 > li > a {
  color:#000;
  font-weight: bold;
  margin-right: 0px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-bottom: 0px solid #00AEC3;
}
.nav-tabs2 > li > a:hover {
  border-color: transparent #eee #00AEC3;
}
.nav-tabs2 > li.active > a,
.nav-tabs2 > li.active > a:hover,
.nav-tabs2 > li.active > a:focus {
  color: #00AEC3;
  font-weight: bold;
  cursor: default;
  background-color: #fff;
  border: 0px solid transparent;
  padding-bottom: 7px;
  border-bottom: 4px solid #00AEC3;
}


nav.sidebar, .main{
    -webkit-transition: margin 200ms ease-out;
      -moz-transition: margin 200ms ease-out;
      -o-transition: margin 200ms ease-out;
      transition: margin 200ms ease-out;
  }

  .main{
    padding: 10px 10px 0 10px;
  }

 @media (min-width: 765px) {

    .main{
      position: absolute;
      width: calc(100% - 40px); 
      margin-left: 40px;
      float: right;
    }

    nav.sidebar:hover + .main{
      margin-left: 200px;
    }

    nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
      margin-left: 0px;
    }

    nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
      text-align: center;
      width: 100%;
      margin-left: 0px;
    }
    
    nav.sidebar a{
      padding-right: 13px;
    }

    nav.sidebar .navbar-nav > li:first-child{
      border-top: 1px #e5e5e5 solid;
    }

    nav.sidebar .navbar-nav > li{
      border-bottom: 1px #e5e5e5 solid;
    }

    nav.sidebar .navbar-nav .open .dropdown-menu {
      position: static;
      float: none;
      width: auto;
      margin-top: 0;
      background-color: transparent;
      border: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }

    nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
      padding: 0 0px 0 0px;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
      color: #777;
    }

    nav.sidebar{
      width: 200px;
      height: 100%;
      margin-left: -160px;
      float: left;
      margin-bottom: 0px;
    }

    nav.sidebar li {
      width: 100%;
    }

    nav.sidebar:hover{
      margin-left: 0px;
    }

    .forAnimate{
      opacity: 0;
    }
  }
   
  @media (min-width: 1330px) {

    .main{
      width: calc(100% - 200px);
      margin-left: 200px;
    }

    nav.sidebar{
      margin-left: 0px;
      float: left;
    }

    nav.sidebar .forAnimate{
      opacity: 1;
    }
  }

  nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
    color: #CCC;
    background-color: transparent;
  }

  nav:hover .forAnimate{
    opacity: 1;
  }
  section{
    padding-left: 15px;
  }
  
/* RWD Table */
	.rwd-table {
	 background: #fff;
	 overflow: hidden;
	}

	.rwd-table tr:nth-of-type(2n){
	  background: #eee;
	}
	.rwd-table th, 
	.rwd-table td {
	  margin: 0.5em 1em;
	}
	.rwd-table {
	  min-width: 100%;
	}

	.rwd-table th {
	  display: none;
	}

	.rwd-table td {
	  display: block;
	}

	.rwd-table td:before {
	  content: attr(data-th) " : ";
	  font-weight: bold;
	  width: 3.5em;
	  display: inline-block;
	}

	.rwd-table th, .rwd-table td {
	  text-align: left;
	}

	.rwd-table th, .rwd-table td:before {
	  color: #00AEC3;
	  font-weight: bold;
	}

	@media (min-width: 480px) {
	  .rwd-table td:before {
		display: none;		
	  }
	 .rwd-table th {
		color: #ffffff;
		display: table-cell;
		padding: 0.25em 0.25em;
	  }
	 .rwd-table td {
		color: #666666;
		display: table-cell;
		padding: 0.25em 0.25em;
	  }	  
	  .rwd-table th:first-child, 
	  .rwd-table td:first-child {
		padding-left: 0;
	  }
	  .rwd-table th:last-child, 
	  .rwd-table td:last-child {
		padding-right: 0;
	  }
	   .rwd-table th, 
	   .rwd-table td {
		padding: 1em !important;
	  }
	}