@charset "utf-8";

/**************************************************
= header 上方登入選單
********************/
/*theme-bg 背景色*/
.theme-bg{ background:#fff;/*background-image: url(../img/bg.jpg);*/ background-repeat: repeat; position: relative;}

/*模組背景色*/
div#main_top,.breadcrumb,div#left,div#middle,div#main_right,div#main_bottom{ background: none;}
.center-module-bg{background: none;}

div#main_top .module,div#left .module,div#middle .module,div#main_right .module,div#main_bottom .module,.module{ background:#ffffff; box-shadow: 0px 0px 5px 0px #e0dadc; border-radius: 5px;}
:not(.module-content).module-padding.module-bg { background:#ffffff; box-shadow: 0px 0px 5px 0px #e0dadc; border-radius: 5px;}

/**************************************************
= header 上方登入選單
********************/
.login .top-space header{ margin-top: 45px;}
header{ background: rgba(6, 89, 152, 0.8);border: 1px solid #244383;/*border-radius: 50px;*/ top: 10px; right: 30px; z-index: 2;}
header>a,header>div{color:#ffffff;}
header .fontsize button {color: #17336f; background-color:rgba(251, 244, 233, 0.9); border:1px solid #17336f; border-radius: 50px; box-shadow: none; padding:0; }
header .fontsize button:hover {background-color: #17336f; color: #ffffff; }
header .dropdown svg { fill: #ffffff;}
header a:hover,
header>div:hover{ color:#e8f0ff; }
header .dropdown:hover svg{ fill: #1f0e05;}
header .dropdown-content a:hover{ color: #ffffff; background-color: #3e5cbc; }
.logo,.logo a { font-size: 2rem;  color: #ffffff;}
.focusable{ opacity: 0;}
.focusable:focus{ opacity: 1;}

@media screen and (max-width: 767px) {
.login .top-space header{ margin-top: 0px;}
header {border: none;}
header, header a, header button, header .dropdown-content a { border-radius: 0px; top:0px; left:0px;}
header>a,header>div{ color:#1f0e05; }
header a:hover, header>div:hover { color: #1f0e05;}
header .dropdown svg{ fill:#1f0e05; }
header .dropdown-content a:hover { color: #bc8ce4; background-color: rgb(246, 235, 255);}
.theme-bg { background-position: -550px 30px;}
}

@media screen and (max-width:520px){
.theme-bg { background-position: -880px 0px;}
}

/**************************************************
= theme 上方主圖
********************/
h1 strong { position: relative;}
h1 strong.picshow { position: absolute; top: -600px;}

/**************************************************
= navbar 橫式選單模組
********************/
.navbar { background-color:#244383;}
.navbar ul{ max-width: 1500px; }
.navbar li a{ color:#ffffff; }
.navbar li:hover a {color:#dedede;}
.navrwd-svg svg { fill: #ffffff;}
.navbar li:hover ul a,.navbar ul li a:focus + .navrwd + .menuhidden{ background-color:#ffffff; color:#000;}
.navbar li:hover ul a:hover { background-color:#ed8b00; color:#fff;}
.navbar li .menuhidden.navbar-menu a { background-color:#ffffff; color:#18346d;}
.navbar li .menuhidden.navbar-menu a:hover { background-color:#ed8b00; color:#fff;}
.navbar li ul li a{ border-bottom:1px solid #efd9ce; min-width:max-content;}

@media screen and (max-width: 767px) {
.navbar li { width: 100%; background: #18346d;}
.navbar ul { /*background: #ffffff; color: #ffffff;*/}
.navbar li a { /*background: #18346d; */color: #ffffff;}
.navbar ul li{border-bottom: 1px solid #879289;}
.navbar li:hover a{ color: #dedede;}
.navbar li:hover ul a {  background-color:#ffffff; color:#18346d;}	
.navbar li:hover ul a:hover {  background-color:#ed8b00; color:#fff;}
.navbar li .menuhidden.navbar-menu a{ background-color:#ffffff; color:#18346d;}
.navbar li .menuhidden.navbar-menu a:hover { background-color:#ed8b00; color:#fff;}
.navbar .show-menu{ color: #bc8ce4;background:#ffffff}
.navbar .show-menu .ct-hamburger svg { fill:#18346d;}
.navrwd-svg{ background: rgba(255,255,255,0.8); border: none;}
.navrwd-svg svg{ fill: #18346d;}
.navbar li ul li { border: 0;}
}

@media screen and (min-width: 1680px){
.navbar>ul>li { padding: 0 18px;}
}

@media screen and (min-width: 992px) and (max-width: 1679px){
.navbar>ul>li {padding: 0 8px;}
}

@media screen and (min-width: 768px) and (max-width: 991px){
.navbar>ul>li {padding: 0 5px;}
}

/**************************************************
= breadcrumb 麵包屑
********************/
.breadcrumb-item + .breadcrumb-item::before {border-left: 8px solid #1c3d81;}
.breadcrumb-item.active {color:#17336f;}
.breadcrumb a{color:#17336f;}
.breadcrumb a:hover{color:#03235e;}

/**************************************************
= footer 最下方聯絡資訊
********************/
.footerbg{ background-color: unset; color: #244383; background-image: url(../img/footer.png); background-repeat: no-repeat;min-height: 380px; padding-top: 0px;}
.footerbg a {color: #fff;}
.connect-links,.connect .text.connect-explorer{ color: #fff;}
.connect-links:hover{text-decoration: none;color: #244383;}
.copyright { color: #ffffff; background-color: #244383; box-shadow: 0px -1px 3px 0px #6d6d6d;}

/**************************************************
= module title 模組標題
********************/
.module-title { color: #17336f;}

/**************************************************
= color
********************/

/* tab頁簽 ********************/
.nav-tabs {border-bottom-color:#ffffff;}
.nav-tabs .nav-item,.nav-pills .nav-item{margin-right: 2px;}
.nav-tabs .nav-item a,
.nav-pills .nav-item a{ color: #17336f; background: #ffffff; border-color: #1c3d81  #1c3d81  #1c3d81 ;border-radius: 0;}
.nav-pills .nav-item a{ border-bottom: 1px solid #f4ffd4;}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {  color: #0f3979; background: #ccdbf0; border-color: #1c3d81 #1c3d81 #1c3d81;}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {color: #ffffff; background: #1c3d81; border-color: #1c3d81 #1c3d81 #1c3d81; border-radius: 0;}
.nav-pills .nav-link:focus,
.nav-pills .nav-link:hover { color: #ffffff; background-color: #ed96af;}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {color: #fff;background-color:#18346d;}
.nav-tabs .nav-link.disabled,
.nav-pills .nav-link.disabled {color: #868e96;}
.ct-dropdown-menu { background-color: #fff;  border: 1px solid #18346d;}
.ct-dropdown-item { color: #3a92e9;}
.nav-tabs .nav-item .ct-dropdown-item, .nav-tabs .nav-item .ct-dropdown-item{ border: 0; background: #ffffff; border-top: 1px solid #ededed; color: #9a654a;}
.nav-tabs .nav-item .ct-dropdown-item:focus,
.nav-tabs .nav-item .ct-dropdown-item:hover { color: #ed96af; background-color: #fdf1f4;}



/* table表格 ********************/
.ct-table th,.ct-table td {border-top-color:#ccc;}
.ct-table tbody + tbody {border-top-color:#ccc;}
.table-striped tbody tr:nth-of-type(odd) { background-color:#f3f3f4;}
.ct-table .thead-light th { color: #ffffff; background-color: #1c3d81; border-color: #ffffff; border-bottom: 1px solid #ffffff;}
.ct-table .thead-dark th { color: #ffffff; background-color: #07245e; border-color: #07245e;}
.table-bordered {border-color: #e9ecef;}
.table-bordered th,.table-bordered td {border-color:#ccc;}
.table-hover tbody tr:hover { background-color:#f9f5f6;}

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

/* nav-Vertical 直式選單 ********************/
.nav-Vertical ul li .sub-menu-item{ background: #f6f5f9; color: #373737; border-bottom-color: #ffffff;}
.nav-Vertical ul li .sub-menu-item:hover { background:#1c3d81; color: #ffffff;}


.nav-Vertical ul li .sub-menu-item a{color:#F39800;}
.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{color:#545454;}
.nav-Vertical ul li .sub-menu-item:hover a{color:#ffffff;}

.nav-Vertical ul li .menu-arrow svg{ fill:#1c3d81;}
.nav-Vertical ul li .menu-arrow:hover svg{ fill: #ffffff;}
.nav-Vertical ul li ul li .sub-menu-item:hover a{color:#1d3859;}
.nav-Vertical ul li ul li .sub-menu-item{ background:#ffffff;border-bottom-color: #f6f5f9;}
.nav-Vertical ul li ul li ul li .sub-menu-item{ background:#eefefd;}
.nav-Vertical ul li ul li .sub-menu-item:hover,
.nav-Vertical ul li ul li ul li .sub-menu-item:hover { background: #ffffff; color: #375ba4; border-left-color: #afa7c7;}
.vertical-hamburger { background:#1c3d81;}
.vertical-hamburger svg { fill:#ffffff;}

.ct-sitemap{background:#ffffff;}
.sitemap-title { background: #34569c; color: #ffffff;}
.sitemap-block { background: #ffffff;}
.sitemap-item a { color: #505050; border-left-color: #2fd49c; background: #f5f5f5;}
.sitemap-item a:hover,
.sitemap-item a:focus{background: #fdfaf0; color: #3c2117; border-left-color: #f2c685;}
.sitemap-icon svg {fill: #ffffff;}

/*span-color-ga003*/
.span-color-ga003,a.span-color-ga003{color: #17336f;}
a.span-color-ga003:hover,a.span-color-ga003:focus {color:#17336f;}

/*span-color-ga007*/
.span-color-ga007,a.span-color-ga007{color: #17336f;}
a.span-color-ga007:hover,a.span-color-ga007:focus {color:#17336f;}

/*線上報修button-ga009********************/
.repair-basicset .btn-primary { color: #ffffff;  background-color:#1c3d81;  border-color:#1c3d81;  fill: #ffffff;}
.repair-basicset .btn-primary:hover,.repair-basicset .btn-primary:focus,.repair-basicset .btn-primary:active,.repair-basicset .btn-primary.active,.repair-basicset .open .ct-dropdown-toggle.btn-primary,.repair-basicset .btn-primary:active:focus,.repair-basicset .btn-primary:active:hover,.repair-basicset .btn-primary.active:hover,.repair-basicset .btn-primary.active:focus{background:#862c00;}
.repair-basicset .btn-primary.active.focus,.repair-basicset .btn-primary.active:focus,.repair-basicset .btn-primary.active:hover,.repair-basicset .btn-primary:active.focus,.repair-basicset .btn-primary:active:focus,.repair-basicset .btn-primary:active:hover,.repair-basicset .open>.ct-dropdown-toggle.btn-primary.focus,.repair-basicset .open>.ct-dropdown-toggle.btn-primary:focus,.repair-basicset .open>.ct-dropdown-toggle.btn-primary:hover{ background:#862c00;}

/* CGA001 圖文公告換色 ********************/
.ct-focusslider .focus-content .textblock{ background:#fafbfe; color: #545454; border-bottom: 4px solid #4488b4;}
.ct-focusslider .focus-content .textblock.notice-color{background:#f5f6f9; color: #545454;  border-bottom: 4px solid #4488b4;}
/*CGA001 圖文公告箭頭顏色*/
.ct-focusslider .focus-controls .focus-arrow{ fill:#4488b4; }
.ct-focusslider .focus-controls .focus-arrow:hover { fill: #ebb700;}
.ct-focusslider .focus-controls .focus-arrow.focus-end{ fill: rgba(175, 175, 175, 1);}
/*CGA004、CGA008、CGA009電子報系列*/
.ct-epaper .btn-primary{color: #ffffff; background-color:#4b77a7; border-color:#4b77a7; fill: #ffffff;}
.ct-epaper .btn-primary:hover{color: #ffffff; background-color:#0d62c0;  border-color:#0d62c0; fill: #ffffff;}
.ct-epaper .yearnav ul li{ background: #f4ffd4; color: #17336f; border-bottom: 1px solid #4488b4;}
.ct-epaper .yearnav ul li:hover { background: #17336f; color: #ffffff;}

/* GA017 全文檢索*******************/
.cmgch-google .btn-all{ color: #ffffff; background-color:#1c3d81; border-color:#1c3d81; fill: #ffffff;}
.cmgch-google .btn-all:hover,.cmgch-google .btn-all:focus,.cmgch-google .btn-all:active,.cmgch-google .btn-all.active,.cmgch-google .btn-all:active:focus,.cmgch-google .btn-all:active:hover,.cmgch-google .btn-all.active:hover,.cmgch-google .btn-all.active:focus { color: #ffffff; background-color:#862c00;  border-color:#862c00; fill: #ffffff;}
.cmgch-google .btn-advanced{ color: #ffffff; background-color: #797979; border-color: #797979; fill: #ffffff;}
.cmgch-google .btn-advanced:hover,.cmgch-google .btn-advanced:focus,.cmgch-google .btn-advanced:active,.cmgch-google .btn-advanced.active,.cmgch-google .btn-advanced:active:focus,.cmgch-google .btn-advanced:active:hover,.cmgch-google .btn-advanced.active:hover,.cmgch-google .btn-advanced.active:focus { color: #ffffff; background-color: #676767;  border-color: #676767; fill: #ffffff;}
.cmgch-google .form-group-m input { caret-color:#1c3d81;} 
.cmgch-google .form-group-m .bar::before {background:#1c3d81;}

/*ALT+C 導盲磚 *******************/
.text-secondary {color: #656769;}

/*freeze btn overflow *******************/
#noticeview_to_print .ct-btn {white-space: normal;}

/*權限scrollbar *******************/
.select-menu-container.select-visible .select-menu {overflow-y: scroll; height: 150px;}

.theme { background-image: none; background-color: #fff; height: 100px; }
.logo img { max-width: 400px; max-height: inherit; }
.logo { padding-left: 40px; height: 100px; }
header { border: 0; background-color: #004EA2; top: 0; border-radius: 0 0 10px 10px; }
.ct5abf2d91aa93092cee58cebc { background: transparent !important; box-shadow: none !important; padding: 40px !important;}
.ct-table .thead-light th { background-color: #004EA2; }
.footerbg { color: #fff; background-image: none; background-color: #004ea2; position: relative; }
.footerbg::before { position: absolute; content: ""; width: 25%; height: 100%;background-color: #fff; top: 0; left: 0; opacity: 0.8; }
.footerbg::after { position: absolute; content: ""; height: 300px; width: 261px; background-image: url(../img/logo-footer.png); background-position: center; background-repeat: no-repeat;background-size: contain; top: 50%; left: calc((25% - 261px) / 2); transform: translateY(-50%); }
.navbar li a { color: #fff; }
.navrwd-svg { fill: #fff; }
.navbar li:hover a { color: #000; }
.navbar li:hover .navrwd-svg { fill: #000; }
.navbar li ul li + li { border: 0; }
.navbar ul li ul { background-color: #fff2db; }
.navbar li:hover ul a, .navbar ul li a:focus + .navrwd + .menuhidden { background-color: #fff2db; padding: 5px 20px; }
.navbar ul { box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
header .fontsize button { color: #004EA2; background-color: #fff; border: 1px solid #fff; }
header .fontsize button:hover { background-color: transparent; color: #fff; }
.navbar { background-color: #ed8b00; }
header > a, header > div { color: #fff; }
header .dropdown svg { fill: #fff; }
header a:hover, header > div:hover { color: #F39800; }
header .dropdown:hover svg { fill: #F39800; }
header .dropdown-content a:hover { background-color: #F39800; color: #fff; }
.list-complete-item { padding: 0 40px; }
:not(.module-content).module-padding, .module { box-shadow: 0; border-radius: 20px;  }
.module-title { font-size: 1.7rem; color: #444; position: relative; width: fit-content; margin-left: auto; margin-right: auto; padding-left: 0; }
.module-title::before { position:absolute; content:""; width: 30px; height: 30px; background-image: url(../img/logo2.png); left: -40px; bottom: 50%; transform: translateY(50%); background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; }
.module-title-bg { background-image: none; }
/* .module-title::after { width: 35px; height: 35px; background-image: url(../img/title-blue.svg); right: -35px; left: inherit; bottom: 50%; transform: translateY(50%); background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; } */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background-color: #F39800; border-color: #F39800; color: #fff; }
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { background-color: #F39800; border-color: #F39800; color: #fff; }
.ct-table .thead-light th { color: #fff; }
.htmldisplay { overflow: visible !important; }
#carouselExampleCaptions { margin: 0 -40px; }
div#main_top .module, div#left .module, div#middle .module, div#main_right .module, div#main_bottom .module, .module { background: rgba(255,255,255,0.9); }
.theme-bg { background-image: none; background-color: #fafafa; }
div#main_top, .breadcrumb, div#left, div#middle, div#main_right, div#main_bottom { background: transparent; }
.theme { display: flex; align-items: flex-end; justify-content: space-between; padding-right: 40px; }
.header_identity { list-style: none; margin: 0 20px 0 0; display: flex; }
.header_identity li { margin-left: 20px; }
.header_identity li a { font-size: 14px; }
.header_search { display: flex; align-items: center; height: 40px; border-radius: 10px; background-color: #f1f1f1; }
.header_search input { border: 0; padding: 0 10px; width: 150px; background-color: transparent; height: 100%; }
.header_search button { border: 0; width: 40px; background-color: #004EA2; border-radius: 0 10px 10px 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.header_search button img { width: 60%; }
.header_right { display: flex; align-items: center; padding: 0 0 15px; }
.navbar ul li ul.noItem { top: 100%; background-color: #fff2db; }
.nav-Vertical ul li .sub-menu-item { background-color: #fff9f1; border-bottom-color: #f4e3cc; }
.theme-bg { background-color: #fff; }
.nav-Vertical ul li .sub-menu-item:hover { background-color: #F39800; color: #fff; }
.nav-Vertical ul li .sub-menu-item:hover a { color: #fff; }
.navbar li a { height: 50px; padding-top: 15px; padding-bottom: 15px; }
.navbar li .menuhidden.navbar-menu a { background-color: #fff9f1; color: #868686; }
.footer_link { text-align: right; }

@media screen and (min-width: 1200px) {
    .gd-offset-lg1 {
        margin: 0;
        padding: 0;
    }
    .gd-lg10 {
        width: 100%;
    }
}

@media screen and (min-width: 768px) {
    .navbar ul {
        padding-top: 0;
        padding-bottom: 0;
    }
}

@media screen and (max-width: 767px) {
    .header_right {
        display: block;
        padding: 0;
    }
    .theme {
        align-items: center;
        padding-right: 20px;
    }
    .header_search {
        width: fit-content;
        margin: 10px 0 0 auto;
    }
    .header_identity {
        margin: 0;
    }
    .logo {
        padding-left: 20px;
    }
    .logo img {
        max-width: 250px;
    }
    .footerbg::before {
        display: none;
    }
    .footerbg::after {
        display: none;
    }
    .navbar ul li, .navbar li a {
        background-color: #fff9f1;
    }
    .navbar li a {
        color: #444;
    }
    .navrwd-svg svg {
        fill: #fff;
    }
    .navrwd-svg {
        background: #F39800;
    }
    .navbar ul li + li {
        border-color: #f4e3cc;
    }
}

@media screen and (max-width: 575px) {
    .theme {
        flex-direction: column;
        height: auto;
        padding: 15px;
    }
    .logo {
        padding: 0;
        height: auto;
        margin-bottom: 15px;
    }
    .logo h1 {
        margin: 0;
    }
    .header_right {
        width: 100%;
    }
    .header_identity {
        justify-content: center;
        padding: 0;
    }
    .header_identity li:first-child {
        margin-left: 0;
    }
    .header_search {
        margin: 10px auto 0;
    }
}

/* icon */
.icon {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-sizing: border-box;
}

.icon>* {
    box-sizing: border-box;
}

.icon_item {
    width: calc(100% / 6);
    /* margin: 0 10px; */
}

.icon_link {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 3px solid #004EA2;
    position: relative;
    text-decoration: none;
    margin: 0 auto;
    transition: 0.3s;
}

.icon_link::before {
    position: absolute;
    content: "";
    width: 145px;
    height: 145px;
    border-radius: 50%;
    border: 1px solid #F39800;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon_link:hover {
    transform: translateY(10px);
}

.icon_link img {
    width: 65px !important;
    height: 65px !important;
    margin-bottom: 5px;
}

.icon_ch {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 2px;
    color: #000;
    text-align: center;
    font-family: "微軟正黑體";
    width: 100%;
    display: block;
}

.icon_en {
    font-size: 12px;
    font-weight: normal;
    margin: 0;
    color: #8E8E8E;
    text-align: center;
    font-family: "微軟正黑體";
    width: 100%;
    display: block;
}

@media screen and (max-width: 1100px) {
    .icon_item {
        width: calc(100% / 3);
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 767px) {
    .ct5abf2d91aa93092cee58cebc {
        padding: 40px 20px !important;
    }
}

@media screen and (max-width: 575px) {
    .icon_item {
        width: 50%;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 450px) {
    .icon_link {
        width: 130px;
        height: 130px;
    }
    .icon_link::before {
        width: 115px;
        height: 115px;
    }
    .icon_link img {
        width: 50px !important;
        height: 50px !important;
    }
    .icon_link>img {
        width: 50px;
    }
    .icon_ch {
        font-size: 14px;
    }
    .list-complete-item {
        padding: 0 20px;
    }
    .ct5abf2d91aa93092cee58cebc {
        padding: 40px 0 !important;
    }
    #carouselExampleCaptions {
        margin: 0 -20px;
    }
}

/* nav */
.nav {
    background-color: #F39800;
}

.nav ul {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav a {
    color: #fff;
    padding: 10px;
    text-decoration: none;
    font-size: 16px;
    font-family: "微軟正黑體";
    display: block;
    transition: 0.3s;
}

.nav a:hover {
    background-color: rgba(255,255,255,0.2);
}