@charset "UTF-8";

/* Global Styles */

/* ----------- 1. General ----------------------------------------------------*/
html,
body {
 height: 100%;
  position: relative;
  direction: ltr;
  color: #282828;
  font: 500 13px/1.6 "微軟正黑體",Arial, Helvetica, sans-serif;
  background-color: #ffffff;
  /*overflow-x: hidden;*/
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
	 border: 0px solid #F0F;
}

/* Required padding for .navbar-fixed-top.*/
body { padding-top: 130px; } 

@media screen and (max-width: 767px) {
	body { padding-top:50px; }
}


body.edge {
  padding: 5px;

}

@media screen and (min-width: 768px) {
  body.edge {
    padding: 10px;
  }
}

@media screen and (min-width: 992px) {
  body.edge {
    padding: 15px;
  }
}

/* 內頁框架------*********************************************/
.inner {
  margin: 0;
  padding: 20px 0 40px 0;
	  border: 0px solid #F0F;
}
.main-content {
  margin: 0;
  padding: 0 0 40px 40px;
	  border: 0px solid #F0F;
}
.main-content-alone {
  margin: 0;
  padding: 0 0px 40px 0px;
	  border: 0px solid #F0F;
}
.form-area {                /*form框架-*/
  padding: 0px 0 0px 0;
	  border: 0px solid #F0F;
}

@media screen and (max-width: 767px) {
	.inner { padding: 0px 0 80px 0;}
	.main-content  { padding: 0 0 0 0px;}
	.main-content-alone  { padding: 0 0 0 0px;}
	.form-area { padding: 0px 0 0px 0; }	
}

::-moz-selection {
  background-color: #A6D107;
  color: #fff;
}

::selection {
  background-color: #A6D107;
  color: #fff;
}

/* ----------- 2. Typography -------------------------------------------------*/

/*=======================================================


主色系*********************
background-color: #A6D107; -----未連結
background-color: #FF7F7D; -----連結中

同類色
background-color: #F2F7E3; -----淺1
background-color: #EDF6CD; -----淺2
background-color: #D9EF7D; -----淺3

background-color: #a3cd07; -----深1
background-color: #9dc607; -----深2

近似色
background-color: #86B171; -----深1
background-color: #689D4D; -----深2
background-color: #4E7639; -----深3

輔助色
color: #FF7F7D; -----連結中
color: #cd856f;
color: #842100; -----

互補色
color: #9F3A83; -----


無色彩*********************
文字
color: #F5F5F5; -----淺灰1
color: #CECECE; -----淺灰2
color: #BCBCBC; -----淺灰3
color: #8E8E8E; -----淺灰4
color: #6d6d6d; -----淺灰5

color: #5B5B5B; -----深灰1
color: #282828; -----深灰2
color: #1b1b1b; -----深灰3


框線
border-bottom: 1px solid #F6F6F6; -----淺灰1
border-bottom: 1px solid #F9F9F9; -----淺灰2
border-bottom: 1px solid #E5E5E5; -----淺灰3

border-bottom: 1px solid #D8D8D8; -----深灰1
border-bottom: 1px solid #CECECE; -----深灰2
border-bottom: 1px solid #C1C1C1; -----深灰3

背景
background-color: #FCFCFC; -----淺灰1
background-color: #F3F3F3; -----淺灰2
background-color: #EFEFEF; -----淺灰3

background-color: #686868; -----深灰1
background-color: #515151; -----深灰2
background-color: #3A3A3A; -----深灰3


=========================================================*/
/* Elements Typography */
a {
  color: #A6D107;
  text-decoration: none;
  transition: color 0.4s;
}

a:hover,
a:focus {
  color: #FF7F7D;
  text-decoration: none;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
h7, .h7 {
  font-family: inherit;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}

h1 small, .h1 small,
h2 small, .h2 small,
h3 small, .h3 small,
h4 small, .h4 small,
h5 small, .h5 small,
h6 small, .h6 small {
  font-family: inherit;
  font-weight: normal;
  line-height: 1;
  color: #777;
}

h1 small, .h1 small,
h2 small, .h2 small,
h3 small, .h3 small {
  font-size: 65%;
}

h4 small, .h4 small,
h5 small, .h5 small,
h6 small, .h6 small {
  font-size: 75%;
}
p {  
  color: inherit;
  text-align: left;
}
/* 文字間距 ------*/
span.block { display: block; }
span.gap-s { padding: 0 4px; }
span.gap-m { padding: 0 5px; }
span.gap-l { padding: 0 12px; }

/* 文字粗細 ------*/
.strong, .bold {
  font-weight: bold;
}

/* 文字顏色 ------*/
.text-warning {color: #FF7F7D; }
.text-primary {color: #ff9ece; }


/* 尺寸固定的文字 ------*/
.h7 {
  font-size: 12px;
}

/* 圖片 和 圖說------*/
.img-space {
  padding: 2px;  
}
.img-hover:hover {
  opacity: 0.6;
}
.caption {
  margin: 5px 0 10px 0;
  line-height: 1.4;  
  font-weight: 500;
  text-align: left;
}

/* 狀態顯示 */
.table.status i.fa { font-size:25px;} /* 狀態圖示大小 ------*/
i.status {padding: 0 5px;}
i.status-yes {color: #A6D107;}
i.status-no {color: #e2e2e2;}

/* section ************************************************/
section {
  margin: 0px auto;
  padding: 0;
  	border: 0px solid #F0F; 
}
/* section 刊頭------*/
.section-header {
  margin: 0 0 20px 0;
  padding: 0;
  color: #282828;  
  line-height: 1.2; 
  font-weight: 700;
  text-align: left;
}
/* 大分段標題 ------*/
.chapter {
  margin: 0;
  padding: 0;
  line-height: 1;
  color: #333333; 
  font-weight: 700;
  text-align: left;
  letter-spacing: 3px;
}
.chapter-bg {
  margin: 0;
  padding: 10px 0;
  line-height: 1;
  color: #FFFFFF; 
  font-weight: 700;
  text-align: center;
  letter-spacing: 5px;
  background-color: #A6D107;
}
.chapter-sub-bg {
  margin: 0;
  padding: 10px 0;
  line-height: 1;
  color: #282828; 
  font-weight: 700;
  text-align: center;
  letter-spacing: 0px;
  background-color: #EDF6CD;
}


/* ul 注意事項 解說 ************************************************/
ul.spot {
	clear: both;
  	border: 0px solid #F0F;  
} 
ul.spot > li  {       /* 解說前方點點設定 ------*/
  color: #CFCFCF;
  font-size: 15px;
  line-height: 1;
  font-weight: 500; 
} 
ul.spot > li > p {    /* 解說文字設定 ------*/
  margin-bottom: 10px;
  padding-left: 5px;
  color: #282828;
  font-size: 17px;
  line-height: 1.3;
}
ul.spot > li.text-warning,
ul.spot > li.text-warning p {
  color: #FF7F7D;
} 
ul.spot  li.bold p,
ul.spot > li.text-warning.bold p {
  font-weight: 700; 
} 

/* explanation ------*/
ul.explanation {
  margin: 20px 0 20px 0;
  padding: 0 10px 0 20px; 
}   

ul.explanation.explanation-setFront {
  margin: 0px 0 20px 0;
  padding: 0 10px 0 20px; 
}   


/* fancy ------*/
ul.fancy > li  {
  color: #A6D107;
}  



/* 距離設定 ------*/
.separate,
.box.separate,
.chapter.separate,
.chapter-bg.separate {
  margin-top: 40px;
}

.category,
.box.category,
.chapter.category,
.chapter-bg.category {
  margin-bottom: 20px;
}

.mt0 {margin-top: 0px;}
.mb0 {margin-bottom: 0px;}
.mt20 {margin-top: 20px;}
.mb20 {margin-bottom: 20px;}
.mt40 {margin-top: 40px;}
.mb40 {margin-bottom: 40px;}
 
.nowrap { white-space:nowrap;} /* 強制不換行 ------*/
.float-left { float: left;}
.float-right { float: right;}
.img-center img { margin-left: auto; margin-right: auto;} /* 圖片置中 ------*/
.deform { display: inline-block;} /* 在桌機為 inline 在手機為 block ------*/


/* 內頁刊頭 ************************************************/
.page-header {
  color: #9F3A83;  
  line-height: 1.2; 
  font-weight: 700;
  text-align: left;
  border: none;
}
.page-header.line-bottom {
  border-bottom: 1px solid #CECECE;
}
.page-header.pl5 {
  padding-left: 5px;
}
.page-header.mt0 {
  margin-top: 0px;
}
.page-header.mb0 {
  margin-bottom: 0px;
}
.page-header .btn-group {
  float: right;
  margin-top: -5px;
}
.page-header .btn-group .btn {
  padding-left: 12px;
  padding-right: 12px;
}
.page-header .btn-group .btn.btn-primary {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* 內頁刊頭-副刊頭 ------*/
.page-header-sub, .page-header-sub-alone {
  font-size: 20px;
  color: #777777;  
  line-height: 1.2; 
  font-weight: 700;
  text-align: left;
  border: 0px solid #F0F;
}
.page-header-sub-alone {
  margin: 20px 0 20px 0;
}

/* table 設定 *************************************************************************/
/* .table------*/
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 15px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
.table > thead > tr > th > p,
.table > tbody > tr > th > p,
.table > tfoot > tr > th > p,
.table > thead > tr > td > p,
.table > tbody > tr > td > p,
.table > tfoot > tr > td > p {
  margin: 0;
  padding: 0;
}

.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.table > tbody + tbody {
  border-top: 2px solid #ddd;
}
.table .table {
  background-color: #fff;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;
}
.table-bordered {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}

/* .table-data ------*/
.table-data {
  border: 1px solid #E5E5E5;
}
.table-data > thead > tr > th,
.table-data > tbody > tr > th,
.table-data > tfoot > tr > th,
.table-data > thead > tr > td,
.table-data > tbody > tr > td,
.table-data > tfoot > tr > td {
 padding: 8px;
  border: 1px solid #E5E5E5;
  vertical-align:middle;
}
.table-data > thead > tr > th,
.table-data > tbody > tr > th,
.table-data > tfoot > tr > th {
  background-color: #F3F3F3;
}
.table-data > thead > tr > th > p,
.table-data > tbody > tr > th > p,
.table-data > tfoot > tr > th > p {
  text-align: center;
}
.table-data > thead > tr > td,
.table-data > tbody > tr > td,
.table-data > tfoot > tr > td {
  background-color: #FCFCFC;
}
.table-data > thead > tr > td.comment,
.table-data > tbody > tr > td.comment,
.table-data > tfoot > tr > td.comment {
  border: 1px solid transparent;
}
.table-data > thead > tr > td.comment div,
.table-data > tbody > tr > td.comment div,
.table-data > tfoot > tr > td.comment div {
  margin: 10px 0 20px 0px;
}



caption {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: left;
  font-weight: 700;
}

/* no-border ------*/
.table > thead > tr > th.no-border,
.table > tbody > tr > th.no-border,
.table > tfoot > tr > th.no-border,
.table > thead > tr > td.no-border,
.table > tbody > tr > td.no-border,
.table > tfoot > tr > td.no-border {	
  border-top: none; 
}

/* table-middle ------*/
.table-middle > thead > tr > th,
.table-middle > tbody > tr > th,
.table-middle > tfoot > tr > th,
.table-middle > thead > tr > td,
.table-middle > tbody > tr > td,
.table-middle > tfoot > tr > td {	
	text-align: center;
	vertical-align: middle;
}
.table-middle > thead > tr > th.text-left,
.table-middle > tbody > tr > th.text-left,
.table-middle > tfoot > tr > th.text-left,
.table-middle > thead > tr > td.text-left,
.table-middle > tbody > tr > td.text-left,
.table-middle > tfoot > tr > td.text-left {	
	text-align: left;
}

/* table 分隔線為直欄分隔線------*/
.table-vertical,
.table-vertical > thead > tr > th,
.table-vertical > tbody > tr > th,
.table-vertical > tfoot > tr > th,
.table-vertical > thead > tr > td,
.table-vertical > tbody > tr > td,
.table-vertical > tfoot > tr > td {	
  border-top: 0px solid #ddd;
  border-left: 1px dotted #d1d1d1; 
}

.table-vertical,
.table-vertical > thead > tr > th:first-child,
.table-vertical > tbody > tr > th:first-child,
.table-vertical > tfoot > tr > th:first-child,
.table-vertical > thead > tr > td:first-child,
.table-vertical > tbody > tr > td:first-child,
.table-vertical > tfoot > tr > td:first-child {	
  border: none; 
}






@media screen and (max-width: 767px) {
	h1 {font-size: 30px; margin-top: 20px; margin-bottom: 15px; }
	h2 {font-size: 20px; margin-top: 10px; margin-bottom: 15px; }
	h3 {font-size: 15px; margin-top: 10px; margin-bottom: 10px; }
	h4 {font-size: 15px; margin-top: 4px; margin-bottom: 4px; }
	h5 {font-size: 13px; margin-top: 2px; margin-bottom: 2px; }
	h6 {font-size: 12px; margin-top: 1px; margin-bottom: 1px; }
	small {padding-left: 5px; }
	p {font-size: 15px; line-height: 1.8; margin-bottom: 15px; }
	span.gap-s { padding: 0 2px; }
	span.gap-m { padding: 0 3px; }
	span.gap-l { padding: 0 8px; }
	ul > li > p {margin-bottom: 10px; }
	ul.spot > li  { font-size: 12px; } 
	ul.spot > li > p { font-size: 15px; }
    .deform { display: block;}
	
	.page-header { margin: 20px 0 10px 0; font-size: 20px; }	
	.page-header.line-bottom { padding-bottom: 10px; margin-bottom: 20px;}
	.page-header.pl5 { padding-left: 5px;}
	.page-header.mt0, .page-header.xs-mt0  { margin-top: 0px;}
	.page-header.mb0 { margin-bottom: 0px;}
	.page-header .btn-group .btn { padding-left: 10px; padding-right: 10px;font-size: 15px;}

	.page-header-sub, .page-header-sub-alone {margin: 8px 0 20px 0; font-size: 14px;}
	.page-header-sub-alone {margin: 15px 0 15px 0;}

	
	.h1 {font-size: 28px; }
	.h2 {font-size: 25px; }
	.h3 {font-size: 20px; }
	.h4 {font-size: 18px; }
	.h5 {font-size: 14px; }
	.h6 {font-size: 12px; }
	.caption {font-size: 14px; margin: 4px 0 10px 0; }
	.control-label{font-size: 15px; line-height: 1.3; }
	
	.table > thead > tr > th,
	.table > tbody > tr > th,
	.table > tfoot > tr > th,
	.table > thead > tr > td,
	.table > tbody > tr > td,
	.table > tfoot > tr > td { font-size: 14px; padding: 15px 5px;}
	
	.table > thead > tr > th > p,
	.table > tbody > tr > th > p,
	.table > tfoot > tr > th > p,
	.table > thead > tr > td > p,
	.table > tbody > tr > td > p,
	.table > tfoot > tr > td > p { font-size: 14px; line-height: 1.4;}
}
@media screen and (min-width: 768px) {
	h1 {font-size: 32px; margin-top: 25px; margin-bottom: 20px; }
	h2 {font-size: 24px; margin-top: 25px; margin-bottom: 20px; }
	h3 {font-size: 18px; margin-top: 15px; margin-bottom: 10px; }
	h4 {font-size: 16px; margin-top: 6px; margin-bottom: 6px; }
	h5 {font-size: 14px; margin-top: 3px; margin-bottom: 3px; }
	h6 {font-size: 13px; margin-top: 2px; margin-bottom: 2px; }
	small {padding-left: 5px; }
	p {font-size: 16px; line-height: 1.8; margin-bottom: 25px; }
	ul > li > p {margin-bottom: 10px; }
	ul.spot > li  { font-size: 12px; } 
	ul.spot > li > p { font-size: 15px; }
	span.gap-s { padding: 0 3px; }
	span.gap-m { padding: 0 4px; }
	span.gap-l { padding: 0 10px; }

	.page-header { margin: 25px 0 15px 0; font-size: 24px; }	
	.page-header.line-bottom { padding-bottom: 12px; margin-bottom: 22px;}
	.page-header.pl5 { padding-left: 5px;}
	.page-header.mt0 { margin-top: 0px;}
	.page-header.mb0 { margin-bottom: 0px;}
	.page-header .btn-group .btn {  font-size: 16px;}
	
	.page-header-sub, .page-header-sub-alone {margin: 10px 0 20px 0; font-size: 16px;}
		
	.h1 {font-size: 30px; }
	.h2 {font-size: 28px; }
	.h3 {font-size: 22px; }
	.h4 {font-size: 20px; }
	.h5 {font-size: 15px; }
	.h6 {font-size: 14px; }
	.caption {font-size: 14px; margin: 4px 0 10px 0; }
	.control-label{font-size: 16px; line-height: 1.3; }

	.table > thead > tr > th,
	.table > tbody > tr > th,
	.table > tfoot > tr > th,
	.table > thead > tr > td,
	.table > tbody > tr > td,
	.table > tfoot > tr > td { font-size: 15px;}
	
	.table > thead > tr > th > p,
	.table > tbody > tr > th > p,
	.table > tfoot > tr > th > p,
	.table > thead > tr > td > p,
	.table > tbody > tr > td > p,
	.table > tfoot > tr > td > p { font-size: 15px; line-height: 1.5;}
}
@media screen and (min-width: 992px) {
	h1 {font-size: 34px; margin-top: 25px; margin-bottom: 20px; }
	h2 {font-size: 28px; margin-top: 25px; margin-bottom: 20px; }
	h3 {font-size: 20px; margin-top: 20px; margin-bottom: 15px; }
	h4 {font-size: 17px; margin-top: 8px; margin-bottom: 8px; }
	h5 {font-size: 15px; margin-top: 4px; margin-bottom: 4px; }
	h6 {font-size: 14px; margin-top: 3px; margin-bottom: 3px; }
	small {padding-left: 8px; }
	p {font-size: 16px; line-height: 1.8; margin-bottom: 25px; }
	ul > li > p {margin-bottom: 15px; }
	ul.spot > li  { font-size: 13px; } 
	ul.spot > li > p { font-size: 16px; }
	
	.page-header { margin: 25px 0 18px 0; font-size: 28px; }	
	.page-header.line-bottom { padding-bottom: 13px; margin-bottom: 25px;}
	.page-header.pl5 { padding-left: 5px;}
	.page-header.mt0 { margin-top: 0px;}
	.page-header.mb0 { margin-bottom: 0px;}	
	.page-header .btn-group .btn {  font-size: 18px;} 
	
	.page-header-sub, .page-header-sub-alone {margin: 15px 0 20px 0; font-size: 18px;}
	
	.h1 {font-size: 38px; }
	.h2 {font-size: 30px; }
	.h3 {font-size: 24px; }
	.h4 {font-size: 20px; }
	.h5 {font-size: 18px; }
	.h6 {font-size: 14px; }
	.caption {font-size: 16px; margin: 5px 0 10px 0; }
	.control-label{font-size: 16px; line-height: 1.3; }

	.table > thead > tr > th,
	.table > tbody > tr > th,
	.table > tfoot > tr > th,
	.table > thead > tr > td,
	.table > tbody > tr > td,
	.table > tfoot > tr > td { font-size: 16px;}
	
	.table > thead > tr > th > p,
	.table > tbody > tr > th > p,
	.table > tfoot > tr > th > p,
	.table > thead > tr > td > p,
	.table > tbody > tr > td > p,
	.table > tfoot > tr > td > p { font-size: 16px; line-height: 1.5;}
}
@media screen and (min-width: 1200px) {
	h1 {font-size: 36px; margin-top: 25px; margin-bottom: 20px; }
	h2 {font-size: 30px; margin-top: 25px; margin-bottom: 20px; }
	h3 {font-size: 22px; margin-top: 20px; margin-bottom: 15px; }
	h4 {font-size: 18px; margin-top: 10px; margin-bottom: 10px; }
	h5 {font-size: 16px; margin-top: 5px; margin-bottom: 5px; }
	h6 {font-size: 14px; margin-top: 3px; margin-bottom: 3px; }	
	small {padding-left: 10px; }	
	p {font-size: 17px; line-height: 1.8; margin-bottom: 30px; }
	ul > li > p {margin-bottom: 15px; }
	ul.spot > li  { font-size: 14px; } 
	ul.spot > li > p { font-size: 17px; }

	.page-header { margin: 30px 0 20px 0; font-size: 30px; }	
	.page-header.line-bottom { padding-bottom: 15px; margin-bottom: 30px;}
	.page-header.pl5 { padding-left: 5px;}
	.page-header.mt0 { margin-top: 0px;}
	.page-header.mb0 { margin-bottom: 0px;}	
	.page-header-sub, .page-header-sub-alone {margin: 15px 0 20px 0; font-size: 18px;}
	
	.h1 {font-size: 40px; }
	.h2 {font-size: 34px; }
	.h3 {font-size: 26px; }
	.h4 {font-size: 22px; }
	.h5 {font-size: 18px; }
	.h6 {font-size: 15px; }
	.caption {font-size: 16px; margin: 5px 0 10px 0; }
	.control-label{font-size: 17px; line-height: 1.3; }
	
	.table > thead > tr > th,
	.table > tbody > tr > th,
	.table > tfoot > tr > th,
	.table > thead > tr > td,
	.table > tbody > tr > td,
	.table > tfoot > tr > td { font-size: 17px;}
	
	.table > thead > tr > th > p,
	.table > tbody > tr > th > p,
	.table > tfoot > tr > th > p,
	.table > thead > tr > td > p,
	.table > tbody > tr > td > p,
	.table > tfoot > tr > td > p { font-size: 17px; line-height: 1.5;}
}


/* ----------- 3. Header ----------------------------------------------------*/
/* header-top -----------------------*/
.header-top { 
  background-color: #f4f4f4;
}
/* header-inner ---------------------*/
.header-inner {
  background-color: #f4f4f4;
}
/* header-bottom --------------------*/
.header-bottom {
  background-color: #4c4c4c;
}
@media screen and (max-width: 767px) {
  .header-bottom {
    height: 50px;
  	background-color: #4c4c4c;
  }
}

/* input-group-inline ------*/
.input-group-inline .form-control {
	display: inline-block;
	width: auto;
	vertical-align: middle;
	border-radius: 0px;		
	border-color: #CECECE;
	border-right: 0px;	
}
	
/* header-top-tool ------*/
.header-top-tool {
  margin: 0;
  padding: 0;
}
.header-top-tool li {
  margin-right: -5px;
  padding: 0;
  border-left: 1px solid #CECECE;
}
.header-top-tool li a {
  display: inline-block;
  margin: 0;
  padding: 0 15px 0 15px;
  color: #5B5B5B;
  text-decoration: none;
}
.header-top-tool li a:hover ,.header-top-tool li a:focus {
  background-color: #A6D107;
  color: #FFFFFF;
}
.header-top-tool li:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 1px solid #CECECE;
}
.header-top-tool li i {
	padding-right: 3px;	
}
@media screen and (max-width: 1200px) {
	.header-top-tool li span {
		display: none;
	}
	.header-top-tool li i.fa-globe {
		padding-left: 5px;
		padding-right: 15px;	
	}
}

/* header-inner-tool ------*/
.header-inner-tool {
  margin: 13px 0 0 0;
  padding: 0;
	border: 0px solid #F0F; 
}
.header-inner-tool li {
  float: right;
  margin-right: -1px;
  padding: 0;
	border: 0px solid #F0F;  	
}
.header-inner-tool li:last-child {
  margin-right: 0;
  padding-right: 0;
}
.header-inner-tool li i {
  padding-right: 3px;	
}
.header-inner-tool li.login {
  margin: 0px 20px 0 0;
}
.header-inner-tool li.login a {
  display: block;
  margin: 0px 0 0 0;
  padding: 0px 10px 10px 10px;
  font-size: 15px;
  height: 30px;
  line-height: 30px;
  font-weight: 700;	
  vertical-align: top;
  color: #fff;
  background-color: #A6D107;
  text-decoration: none;
  border: 1px solid #A6D107;
	border-radius: 30px;
}
.header-inner-tool li.login a:hover, .header-inner-tool li.login a:focus {
  background-color: transparent;
  color: #A6D107;
}
.header-inner-tool li.login i {
  margin: 0;
  padding: 0;
  font-size: 25px;
  padding-right: 5px;	
}
.header-inner-tool li.login span {
  display: inline-block;
  vertical-align: top;
  margin: 0;
  padding: 0 0 0 0;
  height: 25px;
  line-height: 25px;
	border: 0px solid #F0F;
}

/* site-brand ---------------------------------------------*/
.site-brand {
  float: left;
  position: relative;
  width: 360px;
  margin-top: -15px;
  margin-bottom: 5px;
  color: #5B5B5B;
  	border: 0px solid #F0F;
}
.site-brand a {
  display: inline-block;
  color: #5B5B5B;
  text-decoration: none;
}
.site-brand a:hover, .site-brand a:focus {
  color: #A6D107;
}
.site-brand img.site-logo {
  width: auto;
  height: 70px;
}

.site-brand p.site-name {
  position: absolute;
  z-index: 100;
  /*top: 12px;
  left: 110px;*/
  font-size: 30px;
  line-height: 1.5;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
	.site-brand {
	  width: auto;
	}
	.site-brand p.site-name {
		font-size: 15px;
	}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.site-brand { width: 350px;}
	.site-brand p.site-name { font-size: 28px; top: 15px;}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.site-brand { width: 400px;}
	.site-brand p.site-name { font-size: 30px; top: 12px;}
}
@media screen and (min-width: 1200px) {
	.site-brand { width: 450px;}
	.site-brand p.site-name { font-size: 32px; top: 10px;}
}


/* brands ---------------------------------------------*/
.brands {
  margin: 0px;
  padding: 0px;
  	border: 0px solid #F0F;
}
.brands a {
  float: left;
  display: inline-block;
  height: 50px;
  margin: 0 0 10px 0;	
  padding: 10px 20px 10px 0;
  color: #BCBCBC;
  text-decoration: none;
	border: 0px solid #F0F;
}
.brands a.active {
  color: #1b1b1b;
  text-decoration: none;
}
.brands a:hover, .brands a:focus {
  color: #A6D107;
}
.brands img {
  width: 30px;
  height: auto;
  vertical-align:middle;
	border: 0px solid #F0F;
}
.brands p, .brands a span.menuTitle {
  display:inline;
  vertical-align:middle;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  	border: 0px solid #F0F;
}
.brands span {
  display: inline;
}

@media screen and (max-width: 319px) {
	.brands a {
	  height: 50px;
	  margin: 0;
	  padding: 12px 1px 0 0;
	}
	.brands a.active {
	  color: #FFFFFF;
	}
	.brands img {
	  width: 20px;
	  height: auto;
	}
	.brands p, .brands a span.menuTitle {
	  font-size: 14px;
	}
	.brands span { display: none;}
}

@media screen and (min-width: 320px) and (max-width: 639px) {
	.brands a {
	  height: 50px;
	  margin: 0;
	  padding: 10px 18px 0 0;
	}
	.brands a.active {
	  color: #FFFFFF;
	}
	.brands img {
	  width: 30px;
	  height: auto;
	}
	.brands p, .brands a span.menuTitle {
	  font-size: 17px;
	}
	.brands span { display: none;}
}

@media screen and (min-width: 640px) and (max-width: 767px) {
	.brands a {
	  height: 50px;
	  margin: 0;
	  padding: 10px 18px 0 0;
	}
	.brands a.active {
	  color: #FFFFFF;
	}
	.brands img {
	  width: 30px;
	  height: auto;
	}
	.brands p, .brands a span.menuTitle {
	  font-size: 17px;
	}
	.brands span { display: inline;}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.brands p, .brands a span.menuTitle { font-size: 20px;}
	.brands span { display: none;}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.brands p, .brands a span.menuTitle { font-size: 20px;}
}
@media screen and (min-width: 1200px) {
	.brands p, .brands a span.menuTitle { font-size: 22px;}
}


/* Portrait 手機拿直*/
@media screen and (max-device-width: 767px) and (orientation:portrait) {
	.brands a {
	  height: 50px;
	  margin: 0;
	  padding: 12px 1px 0 0;
	}
	.brands a.active {
	  color: #FFFFFF;
	}
	.brands img {
	  width: 20px;
	  height: auto;
	}
	.brands p, .brands a span.menuTitle {
	  font-size: 14px;
	}
	.brands span { display: none;}
}
@media screen and (min-width: 768px) and (orientation:portrait) {

}

/* Landscape 手機拿橫 */
@media screen and (max-device-width: 767px) and (orientation: landscape) {
	.brands a {
	  height: 50px;
	  margin: 0;
	  padding: 10px 18px 0 0;
	}
	.brands a.active {
	  color: #FFFFFF;
	}
	.brands img {
	  width: 30px;
	  height: auto;
	}
	.brands p, .brands a span.menuTitle {
	  font-size: 17px;
	}
	.brands span { display: none;}
}



/* navbar **************************************************************************************************/

.navbar {
  z-index: 200;
  margin-bottom: 0px;
  border: 0px solid transparent; /*主選單底線*/
}
.navbar .container {
	padding-bottom: 0px;
	margin-bottom: 0px;
		border: 0px solid #F0F;	
}

@media screen and (min-width: 768px) {
  .navbar {
    border-radius: 0px;
  }
}

.navbar-header{
  display: inline-block;
  width: 100%;
	border: 0px solid #F0F;		
}
.navbar-collapse {
  border-top: 0px solid transparent; /*主選單上方線*/
			border: 0px solid #F0F;	
}


/* navbar-nav ------*/
.navbar-nav {
  margin: 0 -15px;
  padding-bottom: 0px;
  		border: 0px solid #F0F;	
}
@media screen and (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
	padding-bottom: 0px;
  }
  .navbar-nav > li {
    float: left;
  }
}

.navbar-nav > li > a {
  		border: 0px solid #F0F;	
}
@media screen and (max-width: 767px) {
  .navbar-nav > li > a {
    padding: 10px 15px 10px 15px;
	font-size: 16px;
	line-height: 30px;
  }
  .navbar-nav > li > a > i {
    padding-right: 10px;
	font-size: 20px;
	line-height: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav > li > a {
    padding: 15px 6px 15px 6px;
	font-size: 15px;
	line-height: 20px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .navbar-nav > li > a {
    padding: 15px 13px 15px 14px;
	font-size: 17px;
	line-height: 20px;
  }
}
@media screen and (min-width: 1200px) {
  .navbar-nav > li > a {
    padding: 15px 23px 15px 24px;
	font-size: 18px;
	line-height: 20px;
  }
}

/* navbar-brand ------*/
.navbar-header a.navbar-brand {
  float: left;
  height: 50px;
  padding: 0px 0px;
  color: #F5F5F5;
  font-size: 18px;
  line-height: 50px; 
  font-weight: 700; 
  white-space:nowrap;
	border: 0px solid #F0F;  
}
.navbar-header a.navbar-brand:hover,
.navbar-header a.navbar-brand:focus {
  text-decoration: none;
}
.navbar-header a.navbar-brand > img {
  display: block;
  float: left;
  margin: 5px 5px 0 0; 
  width: auto;
  height: 40px;
}

/* navbar-toggle ------*/
.navbar-toggle {
  float: left;
  margin: 0px 0px 0px 5px;
  line-height: 50px;
  height: 50px;  
}
.navbar-toggle .icon-bar {
  display: block;
  width: 23px;
  height: 4px;
  border-radius: 2px;
}
.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}
.navbar-inverse .navbar-toggle {
  border-color: transparent;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: transparent;
}
.navbar-inverse .navbar-toggle .icon-bar {  
  background-color: #A6D107;
}
.navbar-inverse .navbar-toggle:hover .icon-bar,
.navbar-inverse .navbar-toggle:focus .icon-bar {
  background-color: #CECECE;
}

/* navbar-inverse */
.navbar-inverse {
  background-color: transparent;
  border-color: transparent;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: transparent;
}
.navbar-inverse .navbar-brand {
  color: #A6D107;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #A6D107;
  background-color: transparent;
}
.navbar-inverse .navbar-text {
   color: #FCFCFC;
}
.navbar-inverse .navbar-nav > li > a {
  color: #FCFCFC;
  font-weight: 700;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #FCFCFC;
  background-color: #A6D107;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #FCFCFC;
  background-color: #A6D107;
}
.navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .navbar-nav > .disabled > a:hover,
.navbar-inverse .navbar-nav > .disabled > a:focus {
  color: #3A3A3A;
  background-color: transparent;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
   color: #FCFCFC;
  background-color: #A6D107;
}

@media screen and (max-width: 767px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
    border-color: #0A0A0A;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
    background-color: #0A0A0A;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #3A3A3A;
	background-color: #D9EF7D;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #3A3A3A;
    background-color: #f5f5f5;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #FCFCFC;
    background-color: #0A0A0A;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #3A3A3A;
    background-color: transparent;
  }
}

/* dropdown-menu ------*/
.dropdown-menu {
  width: 100%; 
  min-width: inherit;
  padding: 0px 0;
  margin: 0px 0 0;
  border-radius: 0px;
  background-color: #D9EF7D;
}

.dropdown-menu > li {
  margin: 0;
  padding: 0;
}

.dropdown-menu > li > a {
  display: block;
  padding: 10px 10px;
  clear: both;
  font-weight: normal;
  line-height: 1.5;
  color: #3A3A3A;
  font-size: 15px;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  text-decoration: none;

}

/* header-top-dropdown-menu ------*/
.dropdown-menu li.header-top-dropdown-menu {
  margin: 0 0 0 0;
  padding: 0;
  	border: 0px solid #F0F;	
}
.dropdown-menu li.header-top-dropdown-menu + li:before{
  content: '';	
}
.dropdown-menu li.header-top-dropdown-menu a {
  padding: 8px 10px;
  font-size: 12px;
	 border: 0px solid #000;
}

@media screen and (max-width: 767px) {
	.dropdown-menu > li > a,
	.dropdown-menu li.header-top-dropdown-menu a { 
		padding: 10px 10px;
		font-size: 15px;
	}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.dropdown-menu > li > a { font-size: 14px;}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.dropdown-menu > li > a { font-size: 15px;}
}
@media screen and (min-width: 1200px) {
	.dropdown-menu > li > a { font-size: 16px;}
}

@media screen and (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
	padding: 0 0 2px 0;
	background-color: #D9EF7D;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 10px 15px 10px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}

@media screen and (min-width: 768px) {
  .navbar-right .dropdown-menu {
    right: auto;
    left: 0;
  }
}

/* nav-left & nav-right for mobile phone ------*/
@media screen and (max-width:767px){
	.mobile-phone-navbar{
		position: fixed;
		background-color: #4c4c4c; /* 黑底 */
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		width: 70%;
		top: 50px;
		z-index: 201;
		height: calc(100vh - 50px);
		transition: 1s;
					border: 0px solid #F0F; 
	}
	.mobile-phone-navbar .navbar-nav{
		margin: 0;
	}
	.mobile-phone-navbar .navbar-form{
		margin: 0;
	}
	.leftIn{
		left: -100%;
	}
	.rightIn{
		right: -100%;
	}
	.mobile-phone-navbar.leftIn.open{
		left: 0;
	}
	.mobile-phone-navbar.rightIn.open{
		right: 0;
	}
	
	/* nav-right ------*/
	.navbar-toggle.nav-right {
		position:absolute;
		top: 5px;
		right: 15px;
		margin: 0;
		padding: 0;
			border: 0px solid #F0F;
	}
	.nav-right i {
		font-size: 30px;
		color: #A6D107;
	}
	.navbar-toggle.nav-right:hover i,
	.navbar-toggle.nav-right:focus i {
		color: #CECECE;
	}
}


/* 路徑 *************************************************************************************/
.breadcrumb {
  margin: 0px 0 10px 0;
  padding: 0;
  list-style: none;
  background-color: transparent;
  border-radius: 4px;
}
.breadcrumb > li {
  display: inline-block;
}
.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #CECECE;;
  content: "/\00a0";
}
.breadcrumb > .active {
  color: #5B5B5B;
}

.breadcrumb > li > a {
  color: #8E8E8E;
}

.breadcrumb > li > a:hover,
.breadcrumb > li > a:focus {
  color: #FF7F7D;
}


@media screen and (max-width: 767px) {
	.breadcrumb {
	  margin: 3px 0 3px 0;
	}
}



/* footer *************************************************************************************/
footer {
  margin: 0;
  padding: 0;
  background-color: transparent;
  background-color: #F3F3F3;
	border: 0px solid #F0F;
}
footer p {
  margin: 0;
  padding: 0;
  color: #5B5B5B;
  font-size: 14px;
  line-height: 1.5;
}
footer i {
  margin: 0 10px 0 0;
}

footer small {
  margin: 0 0 0 10px;
}

/* 門診時間 -------*/  
footer .business-hours {
  margin: 0;
  padding: 5px 0 5px 0;
  border-top: 1px solid #E5E5E5;
}
footer .business-hours p {
   font-size: 13px;
}
footer .business-hours p.week span,
footer .business-hours p.weekend span{
  white-space:nowrap;
}
footer .business-hours p.weekend {
   text-align: right;
}

footer .copyRight p {
  display: inline;
  font-size: 13px;
}

/* footer-top -----------*/
.footer-top {
  margin: 0;
  padding: 5px 0; 
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .03);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .03);
	border: 0px solid #F0F;
}

.footer-top button.related-btn {
  display: inline-block;
  padding: 6px 10px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  border-radius: 30px;
	 float: right;
}
.footer-top button.related-btn span{
  display: block;
  padding: 0;
  margin: 0;
}

/* footer-bottom -----------*/
.footer-bottom {
  padding: 3px 0;
  background-color: #E5E5E5;
  border: 0px solid #E5E5E5;
	border: 0px solid #F0F;
}