@charset "utf-8";
/**************************************************
= theme
  color: #064a4a;
  color: #0d6566;
  color: #2bb3b1; rgba(43, 179, 177);
  color: #a3e5e3;
  color: #e9f9f9;
   line: #86ceca;
  color: #f8f9fa;
   line: #ddd;
********************/
body { margin: 0; padding: 0;}

/*theme-bg 背景色*/
.theme-bg { background: #fff;}

/*module*/
.center-module-bg{}

/**************************************************
= header 上方登入選單
********************/
header {
position: absolute !important;
top: 0;
right: 0px;
z-index: 1;
vertical-align: middle;
text-align: right;
font-size: .8rem;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 2%, rgba(255,255,255,0) 3%, rgba(255,255,255,0.5) 100%); 
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 2%,rgba(255,255,255,0) 3%,rgba(255,255,255,0.5) 100%); 
background: linear-gradient(to right, rgba(255,255,255,0) 2%,rgba(255,255,255,0) 3%,rgba(255,255,255,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80ffffff',GradientType=1 ); 
}
header,
header a,
header button,
header .dropdown-content a { color: #333;}
header > a,
header > div { display: inline-block; position: relative; padding: 5px 15px; line-height: 1.3em; cursor: pointer; -moz-transition: all 200ms ease-in; -webkit-transition: all 200ms ease-in; -o-transition: all 200ms ease-in; transition: all 200ms ease-in;}
header > a::before { content: ""; position: absolute; top: 5px; bottom: 5px; right: 0; width: 1px; background-color: #333; opacity: 0.5;}

header a,
header button,
header button:active,
header button:hover,
header button:focus { text-decoration: none; border: none;}
header .dropbtn { padding: 0; background: none; border: none; cursor: pointer;}

header .dropdown { display: inline-block; position: relative;}
header .dropdown i { padding: 0 0 0 7px;}
header svg { width: 1.2em; height: 1.2em; vertical-align: middle; opacity: 0.5;}
header .dropdown svg { width: 1em; height: 1.2em; margin-left: 5px; vertical-align: middle;}
header .dropdown-content { display: none; position: absolute; left: -5px; z-index: 1; min-width: 90px; margin-top: 5px; background-color: #fff; border: 1px solid rgba(0,0,0,.15);}
header .dropdown-content a { display: block; padding: 5px; text-align: center; text-decoration: none;}
header .dropdown-content a:hover { background-color: rgba(0,0,0,0.05);}
header .dropdown:hover .dropdown-content { display: block;}
header .dropdown.active .dropdown-content { display: block !important;}

header .fontsize { display: inline-block; padding-left: 0; padding-right: 0; cursor: default;}
header .fontsize button { margin: 0 2px; width:24px;height:23px; line-height: 1.2em; letter-spacing: 0em; font-weight: 600; background-color: inherit; border: 1px solid #333; border-radius: 2px; opacity: 0.5; cursor: pointer;}
header .fontsize button:hover { opacity: 1;}

@media screen and (max-width: 767px) {
header { right: 0;}
header > a,
header > div { padding-left: 10px; padding-right: 10px;}
header .dropdown-content { left: auto; right: 5px;}
header .fontsize { display: none;}
}

/**************************************************
= theme 上方主圖
********************/
.theme { position: relative; margin: 0; padding: 10px 0; background-color: #00a8ff;}
.logo {
	height: 100px;
	padding: 0;
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-align: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
	font-size: 2rem;
	margin: 15px 30px 0 30px;
}
.logo img { position: relative; max-height: 70px; margin-right: 15px;}
.logo a { color:#ffffff; z-index:1; }
.logo p{ position: relative;}


@media screen and (max-width: 767px) {
.theme { padding-top: 30px; padding-bottom: 30px;}
.logo { height: 40px; font-size: 1.6rem;margin-top: 0px;}
.logo img { max-width: 90%;}
}

/**************************************************
= navbar 橫式選單
********************/
.navbar li a { height: 45px; }
.navbar ul{ max-width: 1600px; justify-content: center;}
.navbar li ul li a{ line-height: 2.2em; display:block;}
.navbar ul li ul{ display: block; visibility:hidden; opacity:0; width: 0; text-align: center; background: #ffffff; }
.navbar ul li:hover ul, 
.navbar ul li a.active+.navrwd+.menuhidden, 
.navbar ul li a.active:hover+.navrwd+.menuhidden, 
.navbar ul li.navbar-item.active a:focus+.navrwd+.menuhidden, 
.navbar ul li.navbar-item.active a:active+.navrwd+.menuhidden{ display: table; max-width:200px; visibility: visible; opacity:1; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.navbar ul li ul.noItem,
.navbar ul li a.active+.navrwd+.menuhidden.noItem,
.navbar ul li a.active:hover+.navrwd+.menuhidden.noItem,
.navbar ul li.navbar-item.active a:focus+.navrwd+.menuhidden.noItem,
.navbar ul li.navbar-item.active a:active+.navrwd+.menuhidden.noItem{ background: transparent; display: none;}
.navbar ul li a:hover+.navrwd+.menuhidden, .navbar .menuhidden:hover{ display: table;}
.navbar .menu-web{ display: block;}
.navbar .menu-web a:last-child{ border-bottom: none;}
.navbar .menu-mobile{ display: none;}
.navbar ul li ul.menuhidden.overflowRight {
  right: 0;
}

@media screen and (max-width: 767px) {
.navbar ul li ul{ display: none; visibility: visible; opacity:1;}
.navbar ul li:hover ul{ height: auto; visibility: visible; opacity:1; padding: 0px; display: none;}
.navbar ul li a.active+.navrwd+.menuhidden, 
.navbar ul li a.active:hover+.navrwd+.menuhidden, 
.navbar ul li.navbar-item.active a:focus+.navrwd+.menuhidden, 
.navbar ul li.navbar-item.active a:active+.navrwd+.menuhidden,.navbar .menuhidden.navbar-menu{ display: inline;}
.navbar .menu-web{ display: none;}
.navbar .menu-mobile{ display: block;}
}


/**************************************************
= breadcrumb 麵包屑
********************/
.breadcrumb { position: relative; font-size: 0.8rem;}
.breadcrumb,
.breadcrumb-item.active,
.breadcrumb a { color: #0d6566;}
.breadcrumb a { opacity: 0.7;}
.breadcrumb a:hover { opacity: 1;}
.breadcrumb-item + .breadcrumb-item::before { display: inline-block; content: ""; margin-bottom: -1px; margin-left: 0.4rem; border: 6px solid transparent; border-left-color: #0d6566; opacity: 0.5;}
.breadcrumb-item.active { font-weight: 700;}

/**************************************************
= footer 最下方聯絡資訊
********************/
.footerbg { position: relative; margin: 20px 0 0; padding: 0; line-height: 1.6em; font-size: 0.9rem; background-color: #a3e5e3;}
.footerbg::after { content: ""; display: block; clear: both;}
.footerbg,
.footerbg a { color: #0d6566;}
.footerbg img { margin: 0; padding: 0;}
.footerbg .connect { max-width: 1480px; margin: auto; padding: 30px 0; list-style: none;}
.footerbg .connect .freego { padding: 5px 0;}
.footerbg .connect .text { float: left; padding-left: 20px;}
.footerbg .connect .text .title {}
.footerbg .connect-links { text-decoration: underline}
.footerbg .connect-links {}
.footerbg .connect-links:hover { text-decoration: none;}
.footerbg .copyright { clear: both; padding: 5px 15px; text-align: right; letter-spacing: 0.01rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); background-color: #0d6566;}

@media screen and (max-width: 767px) {
.footerbg { font-size: 0.8rem;}
.footerbg .connect > .text { margin-top: 20px;}
}

/**************************************************
= module title 模組標題
********************/
.module-title { color: #0d6566; font-weight: 600; font-size: 1.1rem; height: 40px; padding-top: 8px;padding-bottom: 5px;}
.module-title-bg { /*clear: both;*/ position: relative; height: inherit; margin-top: 0; margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 42px;}

/**************************************************
= tab頁簽
********************/
.nav-tabs { border-bottom: 1px solid #2bb3b1;}
.nav-tabs .nav-item a,
.nav-pills .nav-item a { color: #2bb3b1;}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover { color: #2bb3b1; background-color: rgba(43, 179, 177, 0.05); border-color: rgba(43, 179, 177, 0.5); border-bottom-color: #2bb3b1;}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link { color: #2bb3b1; background-color: #e9f9f9; border-color: #2bb3b1 #2bb3b1 #fff;}
.nav-pills .nav-link:focus,
.nav-pills .nav-link:hover { color: #2bb3b1;}
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:focus,
.nav-pills .nav-link.active:hover,
.nav-pills .show > .nav-link { color: #fff; background-color: #2bb3b1;}
.nav-tabs .nav-link.disabled,
.nav-pills .nav-link.disabled { color: #868e96 !important; background-color: transparent !important; border-color: transparent !important; cursor: not-allowed;}
.ct-dropdown-toggle::after { display: inline-block; width: 0; height: 0; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent;}
.ct-dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 10rem; padding: 0; margin: 0.125rem 0 0; font-size: 1rem; color: #212529; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(43, 179, 177, 0.5); border-radius: 0.25rem;}
.ct-dropdown-item { display: block; width: 100%; padding: 3px 1.5rem; clear: both; font-weight: 400; color: #292b2c; text-align: inherit; white-space: nowrap; background: 0 0; border: 0;}
.ct-dropdown-item:focus,
.ct-dropdown-item:hover { color: #4670bb; text-decoration: none; background-color: #e9f9f9;}

/**************************************************
= table表格
********************/
.ct-table { width: 100%; max-width: 100%; margin-bottom: 1rem; background-color: transparent;}
.ct-table th,
.ct-table td { padding: 0.75rem; vertical-align: top; border-top: 1px solid #ddd;}
.ct-table thead th { vertical-align: bottom; border-bottom: 2px solid #2bb3b1;}
.ct-table tbody + tbody { border-top: 2px solid #ddd;}
.table-striped tbody tr:nth-of-type(odd) { background-color: #f8f9fa;}
.ct-table .thead-light th { color: #2bb3b1; background-color: #e9f9f9; border-color: #86ceca;}
.ct-table .thead-dark th { color: #fff; background-color: #2bb3b1; border-color: #86ceca;}
.table-bordered { border: 1px solid #e9ecef;}
.table-bordered th,
.table-bordered td { border: 1px solid #ddd;}
.table-bordered thead th,
.subpage .table-bordered thead td { border-bottom-width: 2px;}
.table-hover tbody tr:hover { background-color: #e9f9f9;}
.table-sm th,
.subpage .table-sm td { padding: 0.3rem;}

@media only screen and (max-width: 575px) {
.table-responsive .ct-table td::before,
.table-responsive .ct-table th::before { color: #2bb3b1;}
}

/**************************************************
= nav-Vertical 直式選單
********************/
.nav-Vertical ul { list-style: none; margin: 0; padding: 0;}
.nav-Vertical ul li .sub-menu-item { display: block; background-color: #a3e5e3; padding: 10px 15px; color: #0d6566; text-decoration: none; border-bottom: 1px solid #86ceca; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -ms-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear; cursor: pointer;}
.nav-Vertical ul li .sub-menu-item:hover { background-color: #0d6566; color: #fff;}
.nav-Vertical ul li .sub-menu-item a{ color: #545454;}
.nav-Vertical ul li .sub-menu-item a:hover,
.nav-Vertical ul li .sub-menu-item a:focus,
.nav-Vertical ul li .sub-menu-item a:active,
.nav-Vertical ul li .sub-menu-item .active,
.nav-Vertical ul li .sub-menu-item:hover a { color: #fff;}
.nav-Vertical ul li .menu-arrow svg { fill: #0d6566; width: 1rem; height: 1rem;}
.nav-Vertical ul li .menu-arrow:hover svg { fill: #fff;}
.nav-Vertical ul li ul li .sub-menu-item { background-color: #e9f9f9; border-left: 4px solid transparent; padding: 10px 15px 10px 20px;}
.nav-Vertical ul li ul li ul li .sub-menu-item { background-color: #eefefd; border-left: 4px solid transparent; padding: 10px 20px 10px 30px;}
.nav-Vertical ul li ul li .sub-menu-item:hover,
.nav-Vertical ul li ul li ul li .sub-menu-item:hover { background-color: #2bb3b1; color: #fff; border-left: 4px solid #0d6566;}

/**************************************************
= sitemap 導覽頁
********************/
.ct-sitemap { background-color: #e9f9f9;}
.ct-sitemap li { list-style: none;}
.sitemap-top { line-height: 1.8em;}
.sitemap-title { background-color: #2bb3b1; color: #fff; padding-left: 15px; font-weight: bold;}
.sitemap-title span { line-height: 25px; padding: 0 8px 0 0;}
.sitemap-block { box-shadow: 3px 3px 0px rgb(202, 207, 216, 0.5); background-color: #fff; letter-spacing: 0.06em;}
.sitemap-block a { display: block;}
.sitemap-item {}
.sitemap-item a { color: inherit; display: inline-block; width: 100%; border-left: 2px solid #86ceca; background-color: #f8f9fa; padding: 6px; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}
.sitemap-item a:hover,
.sitemap-item a:focus { background-color: #e9f9f9;}
.sitemap-item ul ul { padding-left: 25px;}
.sitemap-item ul li { padding: 7px 0 0;}
.sitemap-item ul li span { padding: 0 10px 0 5px;}
.sitemap-icon svg { padding-top: 5px; width: 18px; height: 20px; fill: #fff;}