@charset "utf-8";

/*theme-bg 背景色*/
.theme-bg{background:#ffffff; background-image: url(../img/bg.jpg); }

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

/**************************************************
= header 上方登入選單
********************/
header{background-color:#eaeaea}
header,
header a,
header button { color:#545454;}
header>a, header>div{;color:#545454;}
header .fontsize button { color: #ffffff; background-color:rgba(0, 77, 161,0.7); }
header .fontsize button:hover { background-color:rgba(0, 77, 161,1);}
header .dropdown svg { fill:#545454;}
header a:hover,
header>div:hover{ background:none;color:#004da1;}
header .dropdown:hover svg{ fill:#545454;}
header .dropdown-content{background:#6e8895; color:#ffffff;} 
header .dropdown-content a{ color:#ffffff;}
header .dropdown-content a:hover{ background-color:#51656f; color:#ffffff;}
.logo,.logo a { font-size: 2rem;  color:#545454;}

@media (max-width :767px){
.logo{border-bottom: 1px solid #004da1;}
}

/**************************************************
= theme 上方主圖
********************/
.theme{ background:#ffffff; }

h1 strong{ position: relative;}
h1 strong.picshow { position: absolute; top: -900px;}

/**************************************************
= navbar 橫式選單模組
********************/
.navbar { background-color:#004da1;}
.navbar ul{ max-width: 1500px;}
.navbar li a{color:#ffffff}
.navbar li:hover a {color:#96c8ff;}
.navbar li:hover .navbar-svg { fill:#96c8ff;}
.navbar li:hover ul a,.navbar ul li a:focus + .navrwd + .menuhidden{ background-color: #004da1; color: #ffffff;}
.navbar li:hover ul a:hover { background-color:#2982e3;}
.navbar li .menuhidden.navbar-menu a { background-color: #004da1; color: #ffffff;}
.navbar li .menuhidden.navbar-menu a:hover { background-color:#2982e3;}
.navbar li ul li + li { border-top: 1px solid #053161;}
.navrwd-svg {fill:#ff853b}
.navbar li ul li a{min-width:max-content;}

@media screen and (min-width: 768px){
.navbar ul { padding: 5px 15px; justify-content: center;}
.navbar ul li ul { padding: 5px 0 0;}
}
@media screen and (min-width: 992px){
.navbar>ul>li { padding: 0 30px;}
}
@media (max-width: 991px) and (min-width: 768px){
.navbar>ul>li { padding: 0 20px;}
}
@media screen and (max-width: 767px) {
.navbar ul li, .navbar li a { background: #004da1; color: #ffffff;}
.navbar li:hover a{ color:#88c1ff;}
.navbar ul li{ border-bottom:1px solid #123458;}
.navbar .show-menu{color: #0d56a6; background: initial;}
.navbar .show-menu .ct-hamburger svg { fill:#004da1;}
.navbar li:hover ul a { background:#2f81da; color: #ffffff;}	
.navbar li:hover ul a:hover { background-color:#f8a630;}
.navrwd-svg{ background:rgb(39, 118, 203); border: none;}
.navrwd-svg svg{ fill: #ffffff;}
.navrwd-svg svg{ fill: #ffffff;}
.navbar li ul li { border: 0;}
}

/**************************************************
= breadcrumb 麵包屑
********************/
.breadcrumb-item + .breadcrumb-item::before {border-left:8px solid #afafaf;}
.breadcrumb-item.active {color:#ff8e3b;}
.breadcrumb a{color:#545454;}
.breadcrumb a:hover{color:#ff8e3b;}

/**************************************************
= footer 最下方聯絡資訊
********************/
.footerbg{color: #ffffff; background:#004da1;}
.footerbg a {color: rgba(255,255,255,0.6);}
.connect-links,.connect .text.connect-explorer{ color: rgba(255,255,255,0.6);}
.connect-links:hover{text-decoration: none;color: #5596b2;}.footer-right{ border-left: none;}
.qr-code{ position: absolute; right: 10px; top: 10px;}
.qr-code img{ width: 100px;}
@media only screen and (max-width: 992px){
.qr-code{ position: relative;}
}

/**************************************************
= module title 模組標題
********************/
.module-title-bg { border-bottom:3px solid #004da1;}
.module-title { color:#545454;}


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

/* tab頁簽 ********************/
.nav-tabs {border-bottom-color:#ffffff;}
.nav-tabs .nav-item a{ background:#919191; color: #ffffff;  border-color: #919191;}
.nav-pills .nav-item a{ background:#919191; color: #ffffff;}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover { background:#ff6c00; color: #ffffff; border-color:#ff6c00;}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link { background: #004da1; color: #ffffff; border-color: #004da1;}
.nav-pills .nav-link:focus,
.nav-pills .nav-link:hover {background:#ff6c00; color: #ffffff;}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {background: #004da1; color: #ffffff;}
.nav-tabs .nav-link.disabled,
.nav-pills .nav-link.disabled {color:#c9c9c9; border-bottom-color: #ffffff;}
.ct-dropdown-menu { background-color: #fff; border:1px solid #004da1;}
.ct-dropdown-item {color: #3a92e9;}
.nav-tabs .nav-item .ct-dropdown-menu a{ background:#ffffff; color:#004da1;}
.nav-tabs .nav-item .ct-dropdown-menu :focus,
.nav-tabs .nav-item .ct-dropdown-menu :hover {background-color:#e7f2ff;}


/* 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:#004da1; background-color: #ffffff; border-top: none; border-bottom: 1px solid #004da1;}
.ct-table .thead-dark th { color: #ffffff;  background-color:#004da1; border-color:#004da1;}
.table-bordered {border-color: #e9ecef;}
.table-bordered th,.table-bordered td {border-color:#ccc;}
.table-hover tbody tr:hover { background-color:#e4f1ff;}

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

/* nav-Vertical 直式選單 ********************/
.nav-Vertical ul li .sub-menu-item{ background:#ffedc0; color:#004da1; border-bottom-color:#ffc431;}
.nav-Vertical ul li .sub-menu-item:hover { background: #2982e3; color: #ffffff; }
.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:active,
.nav-Vertical ul li .sub-menu-item .active,
.nav-Vertical ul li .sub-menu-item:hover a{color:#ffffff;}
.nav-Vertical ul li .secmenu-item:hover a{color:#545454;}
.nav-Vertical ul li .menu-arrow svg{ fill:#545454;}
.nav-Vertical>ul>li>.sub-menu-item:hover .menu-arrow svg{ fill: #ffffff;}
.nav-Vertical ul li ul li .sub-menu-item{ background:#ffffff;}
.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: #ffefe3; color:#ff6c00; border-left-color: #ff6c00;}
.vertical-hamburger { background:#004da1;}
.vertical-hamburger svg { fill: #ffffff;}

/* sitemap 導覽頁 ********************/
.ct-sitemap{background:#ffffff;}
.sitemap-title { background:#2982e3; color: #ffffff;}
.sitemap-block { background: #ffffff;}
.sitemap-item { border: 1px solid #afafaf;}
.sitemap-item a { color: #545454; border-left-color:#ff6c00; background: #f0f0f0;}
.sitemap-item a:hover,
.sitemap-item a:focus{ background:#ff6c00; border-left-color:#ff6c00; color: #ffffff}
.sitemap-icon svg {fill: #ffffff;}


/**************************************************
= topbtn fb及校刊按鈕 ********************/
.schoolbtn-block{ margin-top: 50px; margin-right: 10px; text-align: right;}
.schoolbtn{ position: relative; padding:6px 0px 6px 30px; background: #ffffff; color:#004da1; border-radius: 2px; font-size:1rem; font-weight: 600; letter-spacing: 0.1rem;transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
.schoolbtn-block a + a{ margin-left:30px}
.schoolbtn:hover{ color:#ff6c00}
.schoolbtn .topicon{ position: absolute; left: -5px; top: 2px; width:30px;height: 30px;background-repeat: no-repeat; }
.schoolbtn.btn1 .topicon{ background-image: url(../img/topicon2.svg);}
.schoolbtn.btn2 .topicon{ background-image: url(../img/topicon1.svg);}
.schoolbtn.btn3 .topicon{ background-image: url(../img/topicon3.svg);}

@media (max-width:767px){
.schoolbtn-block{ margin-top: 10px;margin-left: 15px; text-align: left}
.schoolbtn-block a + a { margin-left: 20px;}
}
@media (max-width: 500px){
.schoolbtn-block {height: 155px;}
.schoolbtn-block a:nth-child(3) {margin-left: 0;}
.schoolbtn.btn2 { margin-top: 5px; display: block;}
.schoolbtn{ letter-spacing:0rem}
}

/**************************************************
= hotkeyicon 快捷列 ********************/
.hotkeyicon { width: 100%; padding: 0 15px; background-color:#ffffff; color:#5596b2; font-size: 1rem; font-weight: 600;}
.hotkeyicon .btnicon{position: relative;  float: left; width: 20%; height: 120px; margin: 0 auto; padding: 4px; cursor: pointer; background: #ffffff; border:1px solid #cee4ff; transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
.hotkeyicon .btnicon+.btnicon{ border-left: none; }
.hotkeyicon .btnicon:hover{ padding-top: 3px;background: #eef8ff;}
.hotkeyicon .btnicon + .btnicon~.btnicon-block{ border-left: none;}
.hotkeyicon .icon-svg1,.hotkeyicon .icon-svg2,.hotkeyicon .icon-svg3,
.hotkeyicon .icon-svg4,.hotkeyicon .icon-svg5,.hotkeyicon .icon-svg6,
.hotkeyicon .icon-svg7,.hotkeyicon .icon-svg8,.hotkeyicon .icon-svg9,
.hotkeyicon .icon-svg10,.hotkeyicon .icon-svg11,.hotkeyicon .icon-svg12,
.hotkeyicon .icon-svg13,.hotkeyicon .icon-svg14,.hotkeyicon .icon-svg15{
margin: 0 auto;width:85px; height: 75px; max-width: 100%; background-repeat: no-repeat; background-position: center}
.hotkeyicon .icon-svg1{background-image: url(../img/hoticon1.svg)}
.hotkeyicon .icon-svg2{background-image: url(../img/hoticon2.svg);}
.hotkeyicon .icon-svg3{background-image: url(../img/hoticon3.svg);}
.hotkeyicon .icon-svg4{background-image: url(../img/hoticon4.svg);}
.hotkeyicon .icon-svg5{background-image: url(../img/hoticon5.svg);}
.hotkeyicon .icon-svg6{background-image: url(../img/hoticon6.svg);}
.hotkeyicon .icon-svg7{background-image: url(../img/hoticon7.svg);}
.hotkeyicon .icon-svg8{background-image: url(../img/hoticon8.svg);}
.hotkeyicon .icon-svg9{background-image: url(../img/hoticon9.svg);}
.hotkeyicon .icon-svg10{background-image: url(../img/hoticon10.svg);}
.hotkeyicon .icon-svg11{background-image: url(../img/hoticon11.svg);}
.hotkeyicon .icon-svg12{background-image: url(../img/hoticon12.svg);}
.hotkeyicon .icon-svg13{background-image: url(../img/hoticon13.svg);}
.hotkeyicon .icon-svg14{background-image: url(../img/hoticon14.svg);}
.hotkeyicon .icon-svg15{background-image: url(../img/hoticon15.svg);}
.hotkeyicon .icon-title,.hotkeyicon .icon-title a{ text-align: center;color:#004da1; }

@media only screen and (max-width: 1400px){
.hotkeyicon .btnicon { height: 125px;}
}
@media only screen and (max-width: 1200px){
.hotkeyicon .icon-svg1,.hotkeyicon .icon-svg2,.hotkeyicon .icon-svg3,
.hotkeyicon .icon-svg4,.hotkeyicon .icon-svg5,.hotkeyicon .icon-svg6,
.hotkeyicon .icon-svg7,.hotkeyicon .icon-svg8,.hotkeyicon .icon-svg9,
.hotkeyicon .icon-svg10,.hotkeyicon .icon-svg11,.hotkeyicon .icon-svg12,
.hotkeyicon .icon-svg13,.hotkeyicon .icon-svg14,.hotkeyicon .icon-svg15{
width: 60px;height: 50px;}
.hotkeyicon .btnicon { height: 105px;}
}
@media (min-width: 768px) and (max-width: 900px){
.hotkeyicon {font-size: 0.9rem;}
}
@media only screen and (max-width: 520px){
.hotkeyicon .btnicon{ width: 33.3333%;}
}
/**************************************************
= theme-sbanner 主題小banner ********************/
.sbanner-block { display: inline-block; width: 32.33333%; padding-bottom: 5px;}
.sbannerimg{padding: 2px; text-align: center;}
.sbannerimg img { max-width: 100%; }
@media only screen and (max-width: 992px){
.sbanner-block {width: 48.33333%;}
}

/**************************************************
= photo button********************/
.photobutton{ position: relative; margin:4px;  font-size: 1.6rem;font-weight: 600; text-align: center;color: #ffffff; cursor:pointer }
.photobutton a{ color: #ffffff;}
.photobutton .button-title{ position:absolute;z-index: 2; width:100%; top:45%; letter-spacing:0.1rem;  }
.photobutton .button-cover1,.photobutton .button-cover2,.photobutton .button-cover3,.photobutton .button-cover4{ position: absolute;z-index: 1; margin:0px;height: 100%; width:100%;  opacity: 0.8; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
.photobutton .button-cover1{ background: #004da1; }
.photobutton .button-cover2{  background: #1ea0e6; }
.photobutton .button-cover3{ background: #ff6c00; }
.photobutton .button-cover4{ background: #3f3f3f; }
.photobutton:hover .button-cover1,.photobutton:hover .button-cover2,.photobutton:hover .button-cover3,.photobutton:hover .button-cover4{ opacity: 0.2; }
.photobutton .button-block{  position: relative; height: 200px; max-width: 100% ;z-index: 0;}
.photobutton .button-block.photobutton1{ background: url(../img/photobtn1.jpg) ;background-position: center;}
.photobutton .button-block.photobutton2{ background: url(../img/photobtn2.jpg);background-position: center;}
.photobutton .button-block.photobutton3{ background: url(../img/photobtn3.jpg);background-position: center;}
.photobutton .button-block.photobutton4{ background: url(../img/photobtn4.jpg);background-position: center;}
@media only screen and (max-width:1400px){
.photobutton .button-block.photobutton1{ background-position:center right;}	
}
@media only screen and (max-width:767px){
.photobutton .button-block{ height: 150px;}
}

/******模組************************************/
/*span-color-ga003*/
.span-color-ga003,a.span-color-ga003{color:#004da1;}
a.span-color-ga003:hover,a.span-color-ga003:focus {color:#0a74c7;}

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

/*線上報修button-ga009********************/
.repair-basicset .btn-primary { color: #ffffff;  background-color:#004da1;  border-color:#004da1;  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:#ff6c00;}
.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:#ff6c00;}

/* CGA001 圖文公告換色 ********************/
.ct-focusslider .focus-content .textblock.notice-color{background:#edeeef; color: #545454;  border-bottom: 4px solid #ffc127;}
.notice-color-change .text { color: #767676;}

/*CGA001 圖文公告箭頭顏色*/
.ct-focusslider .focus-controls .focus-arrow{ fill:#004da1; }
.ct-focusslider .focus-controls .focus-arrow:hover { fill: #2982e3;}
.ct-focusslider .focus-controls .focus-arrow.focus-end{ fill: rgba(175, 175, 175, 1);}

/* GA017 全文檢索*******************/
.cmgch-google .btn-all{ color: #ffffff; background-color:#ff6c00; border-color:#ff6c00; 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:#f8a630;  border-color:#f8a630; 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:#ff6c00;} 
.cmgch-google .form-group-m .bar::before {background:#ff6c00;}

/* GA013 文字連結模組 ********************/
.ga013_title:before{ color:#004da1;}

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

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

/*ALT+C 導盲磚 *******************/
#center {color: #545454;}


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