@charset "utf-8";
/**************************************************
= theme
********************/
body { margin: 0; padding: 0;}

/*theme-bg 背景色*/
.theme-bg { background: #ffffff;}

/*module*/
.center-module-bg{}

/**************************************************
= header 上方登入選單
********************/
header { position: absolute !important; top: 0px;  right: 0px; z-index: 1; vertical-align: middle; text-align: right; font-size: .8rem;}
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; 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; }
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: 0px; cursor: default;}
header .fontsize button { margin: 0 2px; width:auto;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 { height:132px; width: 100%;}
.theme::before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: url(../img/headerbg.jpg); background-repeat: no-repeat; background-position:top right;}
.logo { 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; color: inherit; height: 132px; padding-left: 100px;}
.logo img { position: relative; max-height: 100px; height: auto;}
.logo a { z-index:1; color:#545454;}

@media (max-width: 1199px) {
.logo { padding-left:15px;margin-top:10px;}
.logo img { max-height: 70px; }
}
@media (max-width: 767px){
.logo img { max-height: 60px;}
}
@media (max-width: 520px) {
.logo { font-size: 1.6rem;}
}

/**************************************************
= 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; }
.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;}
.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: inline;}
.navbar .menu-web{ display: none;}
.navbar .menu-mobile{ display: block;}
}

/**************************************************
= breadcrumb 麵包屑
********************/
.breadcrumb { position: relative; font-size: 0.8rem;}

/**************************************************
= footer 最下方聯絡資訊
********************/
.footerbg { position: relative; margin: 20px 0 0; padding: 0; line-height: 1.6em; font-size: 0.9rem; height: auto; min-height:383px;}
.footerbg::after { content: ""; display: block; clear: both;}
.footerbg img { margin: 0; padding: 0;}
.footerbg .connect { margin: auto; list-style: none; padding-top:10px;}
.footerbg .connect .freego { padding: 5px 0;}
.footerbg .connect .footername{ padding-left: 20px;}
.footerbg .connect .text { padding-left: 20px; font-size: 0.9rem; line-height: 1.8rem; text-align: center}
.footerbg .connect-links { text-decoration: underline; font-size: 0.9rem;}
.footerbg .connect-links:hover { text-decoration: none;}
.footerbg .copyright { padding: 5px 15px; letter-spacing: 0.01rem; font-size: 0.8rem; text-align: right; position: absolute; bottom: 0; width: 100%}
.footername h1{ font-size: 1.3rem; margin: 10px 0 0;letter-spacing: 0.1rem; font-weight: 600;}
.footername h2{font-size: 0.96rem; margin: 10px 0; letter-spacing: 0.08rem;  font-weight: 600;}	
.footerbg .connect-explorer{ font-size: 0.9rem; line-height: 1.8rem;    padding-left: 20px;}
.footerbg .connect>.connect-bg>.text { padding-left:0;}
@media (max-width:520px){
.footerbg{ min-height:550px;}
}
/**************************************************
= module title 模組標題
********************/
.module-title { color: #0d6566; font-weight: 600; height: 40px; padding-top: 8px; font-size: 1rem;}
.module-title-bg { padding-left: 35px;}

/**************************************************
= tab頁簽
********************/
.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: 1px solid #2bb3b1;}
.ct-table tbody + tbody { border-top: 2px solid #ddd;}
.table-striped tbody tr:nth-of-type(odd) { background-color: #f8f9fa;}
.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: 1px;}
.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; padding: 10px 15px;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 a{ color: #0d6566;}
.nav-Vertical ul li .menu-arrow svg { width: 1rem; height: 1rem;}
.nav-Vertical ul li .menu-arrow:hover svg { fill: #fff;}
.nav-Vertical ul li ul li .sub-menu-item { 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 { border-left: 4px solid #0d6566;}

/**************************************************
= sitemap 導覽頁
********************/
.ct-sitemap li { list-style: none;}
.sitemap-title {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-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 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;}
