@charset "utf-8";
/* CSS Document */

body{
 font-family: "Open Sans", 微軟正黑體, cwTeXHei, "Noto Sans TC", sans-serif !important ;
 font-weight: 400;
 background: #fff;
 position: relative;
 color:#333;

 background:url("../img/bg.png") top no-repeat;
  background-size:cover;

}

h3{
	color:#212121;	
	}
h4{
	    margin-top: 20px;
		color:#337ab7;
	}
	h5{
		font-size:20px;
	}
a{
	color:#544f41;
	}
hr{
	border-top: 1px solid #CCC;
}
p{
line-height: 30px;
}

.panel-default {
    border-color: #FFF;
	border:0px;
}

.content{
	position:relative;
	min-height:690px;
	}
	.content h3{
		color:#aa8828;
	}


/******幻燈片**********/
.navbar-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
/* Carousel base class */
.carousel {
  margin-bottom: 20px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 1;
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
	padding-top:26px;
}
@media screen and (max-width: 800px) {
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
	padding-top:80px;
}
 }
@media screen and (max-width: 441px) {
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
	padding-top:120px;
}
 }

/****/
.navbar{
 background:#FFF;
 margin-bottom: 0px;
 padding: 10px 0;
 border-bottom: 1px soild #CCC;
 /*white-space: nowrap;*/

}
@media screen and (max-width: 441px) {
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
	padding-top:80px;
}
 }
.navbar-inverse .navbar-nav>li>a {
    color: #000;
	font-size:18px;
}
.navbar-brand {
    height:auto;
    padding: 5px 15px;
}
.navbar-default .navbar-nav>li>a {
    color: #000;
    font-size: 18px;
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
    color: #fff ;
    background-color: #20b39d;
}

    .navbar-brand-centered {
        position: absolute;
        left: 50%;
        display: block;
        width: 160px;
        text-align: center;
        background-color: transparent;
    }
    .navbar>.container .navbar-brand-centered, 
    .navbar>.container-fluid .navbar-brand-centered {
        margin-left: -80px;
    }
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
    color: #000;
    background-color: #fbeecb;
}
.navbar-nav>li>.dropdown-menu {
    margin-top: 17px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
    color: #555;
    background-color: #f7eac5;
}
.dropdown-menu {
    min-width: 160px;
	 min-height:60px;
    padding: 0px 0;
    border-radius:0px;
}
.dropdown-menu>li>a {
    padding: 12px 24px;
}

/*====================
======首頁新聞列表====
========================*/



.nav-pills{
	margin-top:36px;
	
}

.nav-pills>li>a {
    border-radius: 0px;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
    font-size: 18px;
}
.well {
    min-height: 0px;
    padding: 19px;
    margin-bottom: 20px;
    background-color:transparent; 
     border:0px solid #e3e3e3; 
    border-radius: 0px; 
    -webkit-box-shadow:none; 
    box-shadow:none; 
}


/*====================
======麵包穴====
========================*/
.breadcrumb{
 margin-bottom: 0px;
 padding: 6px 30px;
 margin-top:84px;
 background-color: #ffffff;
 /*border-top: 1px solid #CCC;*/
 border-bottom: 1px solid #EEE;
 border-radius: 0px;
 font-size: 15px;
 position:relative;
}
.breadcrumb ul, ol{
 margin-bottom: 0px;
}
.breadcrumb > .active{
 color:#2098d1;
}
@media (max-width: 768px) {
.breadcrumb{
 font-size: 13px;
}
}
/*====================
======響應toggle====
========================*/

.navbar-toggle {
    margin-top: 15px;
}


/*====================
======提早響應====
========================*/

@media (max-width:1200px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}


@media (max-width:1200px) {
.navbar-default .navbar-left .navbar-nav>li>a {
	text-align:left;
}

}


@media (max-width: 1200px) {

.navbar-brand img{
	margin-left:3px;
	margin-top:6px;
	max-width:278px;
	}

}

@media (max-width: 375px) {

.navbar-brand img{
	margin-left:3px;
	margin-top:10px;
	max-width:200px;
	}


}

/*====================
======footer====
========================*/
.footer {
	background:#f3f3f3;
    margin-top: 20px;
	padding-bottom: 15px;
	padding-top: 15px;
	position: relative;
	width: 100%;
	border-bottom: 1px solid #CCCCCC;
	border-top: 1px solid #DDDDDD;
	
}
.footer img {
	max-width: 100%;
}
.footer h5 {
 margin-bottom: -10px;
}
.footer ul {
	font-size: 13px;
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
	margin-top: 15px;
	color: #000;
}
.footer ul li a {
	padding: 0 0 5px 0;
	display: block;
}
.footer a {
	color: #78828D
}
.footer p {
	margin: 0;
	line-height:20px;
	text-align:center;
}

@media (max-width: 412px) {

.footer h5 {
 margin-bottom: -10px;
 font-size:16px;
}

}
@media (max-width: 375px) {

.footer h5 {
 margin-bottom: -10px;
 font-size:14px;
}
.footer p {

 font-size:12px;
}
.footer ul li {
 font-size:12px;
}

}

/***圖表***/

.bg-lightgray, .skillData-Wrapper {
    background-color: #ddd;
}
.skillData-Wrapper {
    width: 100%;
}

#skillgraphWrapper-break {
  display: inline-block;
  position: relative;
  width: 100%; }

#skillgraphWrapper-break:after {
  margin-left: 85px;
  content: '';
  position: absolute;
  height: 100%;
  width: -moz-calc(100% - 85px + 15px);
  width: -webkit-calc(100% - 85px + 15px);
  width: calc(100% - 85px + 15px);
  top: 0;
  left: 0;
  background: linear-gradient(to right, #000 2px, transparent 2px);
  background-size: 10%;
  background-color: rgba(255, 0, 0, 0.2); }

#skillgraph {
  padding: 1em; }

.skill-row-break {
  border-color: red;
  border-width: 2px;
  border-style: solid; }

.skill-row {
  margin: 0 0 20px 0; }

.skillLabel {
  float: left;
  width: 100%;
  color: black; }

.skillData, .skillData-Wrapper {
  line-height: 0.1 0.7em;
  height: 0.1 0.7em;
  width: .1em;
  float: left;
  color: white;
  text-align: center; }

.skillData-Wrapper {
  width: 100%; }

.bg-blue {
  background-color: #0f434c; }

.bg-red {
  background-color: red; }
 
 .bg-rust {
    background-color: #33a4c9;
}
  
 /* section classes */
.sectionTitle {
    padding: 0 0 0px 70px;
    margin: 10px 0;
    position: relative;
}

.sectionTitle:before {
    background-color: #33a4c9;
    border-radius: 25px;
    content: ' ';
    display: block;
    height: 50px;
    left: 0;
    position: absolute;
    top: 0px;
    width: 50px;
}

.sectionTitle-font, .sectionTitle {
    font-size: 2.5rem;
}

section {
    font-size: 1.8rem;
}

/**/
.morris-hover{position:absolute;z-index:1000}.morris-hover.morris-default-style{border-radius:10px;padding:6px;color:#666;background:rgba(255,255,255,0.8);border:solid 2px rgba(230,230,230,0.8);font-family:sans-serif;font-size:12px;text-align:center}.morris-hover.morris-default-style .morris-hover-row-label{font-weight:bold;margin:0.25em 0}
.morris-hover.morris-default-style .morris-hover-point{white-space:nowrap;margin:0.1em 0}

/*獨立幻燈片-照片瀏覽*/
#quote-carousel 
{
  padding: 0 0px 30px 0px;
  margin-top: 20px;
}

#quote-carousel .carousel-control
{
  background: none;
  color: #222;
  font-size: 2.3em;
  text-shadow: none;
  margin-top: 30px;
}

#quote-carousel blockquote {
	padding:0px;
	}

#quote-carousel .carousel-indicators 
{
  top: auto;
  bottom: 0px;
}

#quote-carousel .carousel-indicators li 
{
  background: rgba(0,0,0,.5);
}
#quote-carousel .carousel-indicators .active 
{
  background: rgba(0, 0, 0, 0.25);
}

#quote-carousel img
{
  left: 0;
}

.item blockquote {
    border-left: none; 
    margin: 0;
}
/*獨立幻燈片02-快速連結*/
/* carousel */
.media-carousel 
{
  margin-bottom: 0;
  padding: 0 40px 30px 40px;
  margin-top: 30px;
}
/* Previous button  */
.media-carousel .carousel-control.left 
{
  left: -12px;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 25px
}
/* Next button  */
.media-carousel .carousel-control.right 
{
  right: -12px !important;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 25px
}
/* Changes the position of the indicators */
.media-carousel .carousel-indicators 
{
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li 
{
  background: #c0c0c0;
}
.media-carousel .carousel-indicators .active 
{
  background: #333333;
}

/* End carousel */


/*總計%*/
span.perc {
    font-size: 26px !important;
}


.treat th{
	text-align:center;
	}
	
.btn_grow a{
	

	}


/*圈型百分比*/
#jquery-script-menu {
position: fixed;
height: 90px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #316594;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
padding: 10px 0;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}

.jquery-script-center {
width: 960px;
margin: 0 auto;
}
.jquery-script-center ul {
width: 212px;
float:left;
line-height:45px;
margin:0;
padding:0;
list-style:none;
}
.jquery-script-center a {
	text-decoration:none;
}
.jquery-script-ads {
width: 728px;
height:90px;
float:right;
}
.jquery-script-clear {
clear:both;
height:0;
}

.progress-bar {
  position: relative;
  height: 200px;
  background:#FFF;
  color:#333;
  font-size:36px;
  margin-left:30px;
  margin-bottom:60px;
}

.progress-bar div {
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
}

.progress-bar div span {
  position: absolute;
  line-height: 175px;
  height: 175px;
  width: 175px;
  left: 12.5px;
  top: 12.5px;
  text-align: center;
  border-radius: 50%;
  background-color: white;
}

.progress-bar .background { background-color: #b3cef6; }

.progress-bar .rotate {
  clip: rect(0 100px 200px 0);
  background-color: #4b86db;
}

.progress-bar .left {
  clip: rect(0 100px 200px 0);
  opacity: 1;
  background-color: #b3cef6;
}

.progress-bar .right {
  clip: rect(0 100px 200px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #4b86db;
}
 @keyframes 
toggle {  0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}