/*
 Theme Name: 麗山高中 (2025)
 Theme URI: http://www.hischool.com.tw
 Description: 2025 年 06 月  
 Author: 亮怡資訊
 Author URI: http://www.hischool.com.tw
 Version: 4.3
 Tags: 響應式，動態網頁佈局，校園網站
 License: GNU General Public License, v3 (or newer)
 License URI: http://www.gnu.org/licenses/gpl.html

標準色：
	 	背景								  字體	
無	： #FFFFFF	rgba(255,255,255,1)		#545454		rgba(84,84,84,1)
灰	： #595959	rgba(89,89,89,1)		#FFFFFF
紅	： #AC1616	rgba(172,22,22,1)		#FFFFFF
藍	： #175B96	rgba(23,91,150,1)		#FFFFFF
綠	： #006100	rgba(0,97,0,1);			#FFFFFF
黃	： #F9CB33	rgba(249,203,51,1)		#003323
橙	： #FFA500	rgba(255,165,0,1)		#382400
粉紅	： #FFC0CB	rgba(255,192,203)		#333333
棕	： #661A00	rgba(102,26,0,1)		#FFFFFF
紫	： #5900B2	rgba(89,0,178,1)		#FFFFFF
*/

/* @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); */
@import url('css/base.css');
@import url('css/user_style.css');
@import url('css/std_form.css');
@import url('css/mobile.css');
	
/* @import url("css/for_test.css");  */

/**************************************
 For Boostrap 
**************************************/
.container-fluid {
    padding-right: 0;
    padding-left: 0;
}

.container {
    padding-right: 0;
    padding-left: 0;
}

@media only screen and (max-width: 1319px) {
    .container { 
		width: 100%;
	}
}

@media only screen and (min-width: 1320px) {
    .container { 
		width: 1300px;
	 }
}

.row {
    margin-right: 0;
    margin-left: 0;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding: 0 .5em;
}

/**************************************
 For PDF Embedder 外掛
***************************************/
.pdfembAnnotationLayer .linkAnnotation > a:focus {
	outline: 2px solid #FF9933 !important;
	outline-offset: -2px !important;
}

/**************************************
 整體設定
**************************************/
body {
	font-family: "Roboto", "微軟正黑體", arial, sans-serif;
	margin: 0;
	padding: 0;
	color: #111;
	line-height: 1.8;
	font-size: 1.2rem;
/*
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
*/
}

/**************************************
*
* 整體 LAYOUT ( 勿隨意更改 !!! )
*
**************************************/
/*** 每個區塊(左、右側邊欄、主顯示區)之間的間距 ***/
.layout-padding {
	padding-left: .8em;
	padding-right: .8em;
}

/**************************************
 Header
**************************************/
/*** 整個 Header 區塊 ***/
.site-header {
	position: relative;
}

/*** Top Menu 區 ***/
.top_menu_wrap { 
	text-align: right;
/*	margin-bottom: 1em; */
}

.top_menu_wrap.left { text-align: left; }
.top_menu_wrap.center {text-align: center;}
.top_menu_wrap_right {text-align: right; }

.top_menu_box {
	position: relative;
}

/*** Banner 區 ***/
.banner_wrap {
	position: relative;
	padding: 0;
}

.banner_box {
	position: relative;
}

/*** Main Menu 區 ***/
.main_menu_wrap {}
.main_menu_box {
	position: relative;		/* for Accesskey */
}

/**************************************
 MAIN
 
 左側邊欄 .site-box .site-widget.left
 主顯示區 .site-box .site-content
 右側邊欄 .site-box .site-widget.right
**************************************/
/*** 整個 Main box ***/
.site-box {
	display: table;
	table-layout: fixed;
	width: 100%;
	vertical-align: top;
}

.site-box .site-widget,
.site-box .site-content {
	position: relative;		/* for Accesskey */
	padding-top: 2em;		/* for accesskey */
	padding-bottom: 2em;
	display: table-cell;
	vertical-align: top;
}

/*** 側邊欄 (含左、右) ***/
.site-box .site-widget {
	width: 20%;
}

#sidebar-left, 
#sidebar-right {
	min-height: 30em;
}

/**************************************
 目前文章或目錄 ( CURRENT )
**************************************/
.current, 
.current a, 
.current span,
a.current, 
span.current {
	color: #AC1616;
}

.current:hover, 
.current:hover a, 
.current:hover span,
a.current:hover, 
span.current:hover {
    color: #DE1D1D;
}

/**************************************
 Fancy Box
**************************************/
/*** 底部標題 ***/
.fancybox-caption-wrap {
	font-family: "Roboto", "微軟正黑體", arial, sans-serif;   
	text-align: center;
}

.fancybox-caption {
    padding: 1em 0;
    font-size: 100%;
    line-height: 1.6;
}


/**************************************
 沒有文章的提示訊息
**************************************/
ul.no_post {
	min-height: 25em;
	margin: 1em 0;
	border: 1px solid red;
	padding: 10px;
}
ul.no_post li h3 {
	margin-bottom: 15px;
	color: #E84C3D;
}

.empty_box {
	min-height: 25em;
}

@media only screen and (max-width: 767px) {
	.empty_box {
		min-height: inherit ;
		padding-top: 2em;
		padding-bottom: 2em;
		text-align: center;
	}
}


/**************************************
 動畫效果
**************************************/
a,
#top_menu a,
a.gotop {
    -webkit-transition: all 300ms ease-in-out;
       -moz-transition: all 300ms ease-in-out;
		-ms-transition: all 300ms ease-in-out;
		 -o-transition: all 300ms ease-in-out;
    		transition: all 300ms ease-in-out;
}

/**************************************
 breadcrumb
**************************************/
.breadcrumb_wrap {
	margin: 0;
	background: none;
/*	border-bottom: 1px solid rgba(127,127,127,.05);  */
}

.breadcrumb_box {
	padding-top: .5em;
	padding-bottom: .4em;
}


/**************************************
 Pagination
**************************************/
.pagination_box {
	margin: 1em 0;
	background: rgba(204,138,0,.1);
	padding: .5em .5em .3em .5em;
}

.pagination_box span, .pagination_box a {
	display: inline-block;
	white-space: nowrap;
	padding: .2em .6em .1em;
	margin-right: .3em;
	margin-bottom: .2em;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(127,127,127,.5);
	background: rgba(255,255,255,.7);
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
}

.pagination_box a:hover {
	background: #E3E3E3;
	color: #454545;
	border: 1px solid #E3E3E3;
}


/**************************************
*
* 頂部功能表
*
**************************************/
.container-fluid #top_menu {
	padding-right: 2.5em;
}

#top_menu {
	display: inline-block;
	vertical-align: middle;
}

.menu-top-menu-container {
	display: inline-block;
}

#top_menu ul {
	display: inline-block;
}

#top_menu ul li {
	display: inline-block;
	margin: 0;
	padding: .2em 0;
}

#top_menu ul li:after {
	content: "|";
	color: rgba(127,127,127,.5);
	padding-left: .3em;
}

#top_menu ul li:last-of-type:after {
	content: "";
	padding-left: 0;
}

#top_menu ul li a {
	display: inline-block;
	line-height: 2;
	padding: 0 .8em 0 .7em;
	font-size: 110%;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	color: #333;
	background: #FFF;
}

/*** 編輯網頁、發佈公告 按鈕 ***/
#top_menu ul li.add_news a {
	font-size: 80%;
	padding: 0 .5em;
	background: #CFFFBF;
	color: #175C00;
}
#top_menu ul li.add_news.last {
	padding-left: .3em;
}

/*** 登入後的歡迎文字 ***/
#top_menu ul li .user_name,
#footer_menu ul li .user_name {
	display: inline-block;
	font-size: 85%;
	opacity: .5;
	font-weight: 600;
	white-space: nowrap; 
}


@media only screen and (min-width: 992px) and (max-width: 1399px) {
	#top_menu {
		padding-right: 2.5em;
	}
}

/**************************************
*
* popup 登入視窗
*
**************************************/
.popup_login p.status {
	color: #AC1616;
	margin-bottom: .5em;
}

.popup_login .form-row .label_box {
	width: 5em;
}

.std_form li:not(.action).form-row:nth-child(odd),
.std_form li:not(.action).form-row:nth-child(even) {
	background: rgba(221,243,247,1);	/*#DDF3F7;*/
}

/**************************************
*
* Logo & Banner Info
*
**************************************/
.banner_content {
    display: table;
	table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    vertical-align: middle;
}

.banner_content .logo_box,
.banner_content .banner_info_box {
	display: table-cell;
	vertical-align: middle;

	padding-top: .5em;
	padding-bottom: 1em;
}

/*** Logo ***/
.banner_content .logo_box {
    width: 40%;
    text-align: left;
}

.banner_content .logo_box img {
}

/*** Logo ***/
.banner_content .logo_box a:focus img {
    outline: 2px solid #FF9933 !important;
    outline-offset: -2px !important;
}

/*** 網站描述 ***/
.banner_content .logo_box .site_description {
	margin-top: .5em;
}


/*************************
 右側 info box
**************************/
.banner_info_box {
	text-align: center;
	text-align: right;
}

/*** 變換字體大小 ***/
#sr-change-font {
	display: inline-block;
	margin-left: 2%;
}

#sr-change-font a {
	font-size: inherit;
}

/*** 網站導覽按鈕 ***/
.guide-link {
	margin-left: 2% ;
}

/*************************
 主功能表區
**************************/
.main_menu_wrap {
	position: relative;
	z-index: 1000;
         box-shadow: 0 7px 5px -5px rgba(0,0,0,.4);
      -o-box-shadow: 0 7px 5px -5px rgba(0,0,0,.4);
     -ms-box-shadow: 0 7px 5px -5px rgba(0,0,0,.4);
    -moz-box-shadow: 0 7px 5px -5px rgba(0,0,0,.4);
 -webkit-box-shadow: 0 7px 5px -5px rgba(0,0,0,.4);

	background-color: #175b96;	/*** 預設值 ***/
	color: #FFF;
	border-style: solid;
	border-width: 1px 0;
	border-color: rgba(127,127,127,.2);

}

/*** 功能表置頂時的背景色 ***/
.scrollfix-top.main_menu_wrap {
	background: rgba(21, 100, 55, 0.9);	/* #156437;  */
}

/**************************************
* 頁面標題
* <h2 class="page_title">
*	<span class="title">...</span>
* </h2>
**************************************/
/*************
 預設樣式
**************/
.page_title.default {
	position: relative;
	margin-bottom: 1em;
	display: block;
	overflow: hidden;

}

.page_title.default span.title {
	position: relative;
	display: inline-block;
	width: 100%;
	padding-left: 1em;
	padding-bottom: .3em;

	border-style: solid;
	border-width: 0 0 2px 0;
	border-color: rgba(0,128,0,.5);
}

/*** 前方 icon ***/
.page_title.default span.title:before {
	position: absolute;
	content: url(images/icon/title_icon.png);
	margin-right: .5em;
	top: .1em;
	left: 0;
}

.page_title.default span.title:after {
/*
	position: absolute; 
	content: "";
	display: inline-block;
	height: 1px;
	width: 80%;
	top: 50%;
	margin-left: 15px;
	background-image: -webkit-gradient(linear, 0 0, 100% 0, from( rgba(124,124,124,1) ), to( rgba(124,124,124,0)) ); 
	background-image: -webkit-linear-gradient(left, rgba(124,124,124,1), rgba(124,124,124,0) ); 
	background-image: -moz-linear-gradient(left, rgba(124,124,124,1), rgba(124,124,124,0) ); 
	background-image: linear-gradient(to right, rgba(124,124,124,1), rgba(124,124,124,0));	/* IE 11 */
}

/*** 部落格型態、標題，取消後方直線 ***/
.line .page_title.default span.title:after,
.blog .page_title.default span.title:after,
.page_title.default span.title.blog:after {
	background-image: none;
}

/*** 部落格型態標題下方的發表日期 ***/
.page_title .blog_date {
	display: block;
	border-style: dashed;
	border-width: 1px 0 0 0;
	border-color: rgba(127,127,127,.5);
	font-size: 1rem;
	padding-top: .4em;
	margin-top: .2em;
	opacity: .8;
}

.page_title .blog_date i {
	display: inline-block;
	margin-right: .5em;
	color: #175B96;
	opacity: 1;
}

/*** 部落格或 Line 單篇文章下方的發佈日期及作者姓名 ***/
ul.post_meta, ul.post_meta li {
	list-style: none;
}

ul.post_meta li {
	display: inline-block;
	font-size: 1rem;
}

ul.post_meta li + li {
	margin-left: 2em;
}

ul.post_meta .meta_data {
	color: #fb0000;
	font-weight: 500;
}

/*************
 樣式一
*************/
.page_title.style1 {
	position: relative;
	margin-bottom: 1em;
}

.page_title.style1:before {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: rgba(127,127,127,.3);
}

.page_title.style1 span.title {
	position: relative;
	display: inline-block;
	padding-bottom: .1em;
}

.page_title.style1 span.title:before {
	position: absolute;
	content: '';
	bottom: -.2em;
	left: 0;
	width: 100%;
	height: .2em;
	background-color: rgba(127,127,127,1);
}


/**************************************
 側邊欄 - 區塊樣式
 .sb_style01： 標題背景 + Icon font + 框線  
 .sb_style02: 
**************************************/
/*************************
 預設列表區 
*************************/
.sidebar_block .sub_post_box ul li > a,
.sidebar_block .sub_post_box ul li > span,
.sidebar_block .sub_cat_box ul li > a,
.sidebar_block .sub_section_box ul li > a,
.sidebar_block .sub_office_box ul li > a,
.sidebar_block .sub_news_count ul li > a,
.sidebar_block .page_link_box ul li > a {
	display: block;
	padding: .15em .5em;
	font-size: 1rem;
}

.sidebar_block ul li a:hover {
    outline: 2px solid #FF9933 !important;
    outline-offset: -2px !important;
}

/*** 子目錄列表 ***/

/*** 第二層 ***/
.sidebar_block .sub_cat_box ul ul li > a {
	padding-left: 1.5em;
}

/*** 第三層以後 ***/
.sidebar_block .sub_cat_box ul ul ul li > a {
	padding-left: 2.5em;
}

/*** 前置符號 ***/
.sidebar_block .sub_cat_box ul li > a:before {
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f0da";	/* <i class="fas fa-caret-right"></i> */
	padding-right: .4em;
	color: #E74847;
}

/*** 一級單位列表區 ***/
.sidebar_block .unit_box {
}

/*** 二級單位列表區 ***/
.sidebar_block .sub_section_box {
	border-top: 1px dashed rgba(127,127,127,.5);
}

.sidebar_block .sub_section_box ul li > a:before {
	position: relative;
    font-family: 'FontAwesome';
    content: '\f04d'; /* fa-stop */
    font-size: 80%;
    color: #E74847;
    top: -.1em;
    padding-right: .4em;
    opacity: .7;

	font-family: "Font Awesome 5 Free"; 
	content: '\f04d';	/* <i class="fas fa-stop"></i> */
	font-weight: 900;

}

/*******************************
 樣式一 - 單一區塊 (.sb_style01)
*******************************/
.sb_style01 .sidebar_block {
	background: rgba(255,255,255,.5);
	margin-bottom: 2em;
	border-style: solid;
	border-width: 1px 1px 5px 1px;
	border-color: rgba(243,144,95,1) rgba(243,144,95,.8) rgba(243,144,95,.5) rgba(243,144,95,.8);	/* 麗山澄：#F3905F */
}

/*************************
 樣式一 - 主標題
*************************/
.sb_style01 .sidebar_title {
	position: relative;
	padding: .5em .3em .5em 2.65em;
	font-size: 100%;
	background-image: none;
	background-attachment: contain;
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
	background-color: rgba(243,144,95,.95);	/* 麗山澄：#F3905F */
	overflow: hidden;
}

.sb_style01 .sidebar_title .title,
.sb_style01 .sidebar_title .title a {
	color: #000000;
}

/*** 主標題前 icon ***/
.sb_style01 .sidebar_title:before {
	position: absolute;
	content: '';
	background: rgba(0,0,0,.3);
	width: 2.2em;	/*** width #1 ***/
	height: 100%;
	left: 0;
	top: 0;
}

.sb_style01 .sidebar_title:after {
	position: absolute;
	content: url(images/icon/sidebar_default_icon.png);
	width: 2.2em;	/*** width #1 ***/
	left: 0;
	text-align: center;
	top: 50%;
	transform: translateY(-45%);
}

/*************************
 樣式一 - 調整 icon-font 
*************************/
/*** 校園公告 ***/
.sb_style01 .sidebar_block.news .sidebar_title:after,
.sb_style01 .sidebar_block.news_list .sidebar_title:after,
.sb_style01 .sidebar_block.news_count .sidebar_title:after {
	content: url(images/icon/sidebar_news.png);
}

/*** 一級行政單位列表 ***/
.sb_style01 .sidebar_block.office_list.office .sidebar_title:after {
	content: url(images/icon/sidebar_office.png);
}
/*** 教學單位列表 ***/
.sb_style01 .sidebar_block.office_list.department .sidebar_title:after {
	content: url(images/icon/sidebar_office.png);
}

/*** 協力單位列表 ***/
.sb_style01 .sidebar_block.office_list.thirdparty .sidebar_title:after {
	content: url(images/icon/sidebar_thirdparty.png);
}

/*** 二級行政單位列表 ***/
.sb_style01 .sidebar_block.section_list .sidebar_title:after {
	content: url(images/icon/sidebar_section.png);
}

/*** 所有連結頁面 ***/
.sb_style01 .sidebar_block.page_link .sidebar_title:after {
	content: url(images/icon/sidebar_link.png);
}

/*************************
 樣式一 - 調整顏色 
*************************/
/*** 一級單位列表 (橙) ***/
.sb_style01 .sidebar_block.office_list {}
.sb_style01 .sidebar_block.office_list .sidebar_title {}

/* 二級行政單位列表 (綠) */
.sb_style01 .sidebar_block.section_list {}
.sb_style01 .sidebar_block.section_list .sidebar_title {}

/*** 公告統計 - 依單位 (綠) ***/
.sb_style01 .sidebar_block.news_count {}
.sb_style01 .sidebar_block.news_count .sidebar_title {}

/*** 公告統計 - 依公告目錄 (黃) ***/
.sb_style01 .sidebar_block.post_list.news {}
.sb_style01 .sidebar_block.post_list.news .sidebar_title {}


/*******************************
 樣式二 - 單一區塊 (.sb_style02)
*******************************/
.sb_style02 .sidebar_block {
	background: rgba(255,255,255,0);
	margin-bottom: 2em;
	border: none;
}

/*************************
 樣式二 - 主標題
*************************/
.sb_style02 .sidebar_title {
	position: relative;
	font-size: 1.2rem;
	padding: .3em .3em 0 2.2em;
	margin-bottom: .3em;
	background-image: none;
	background-attachment: contain;
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
	background: rgba(255,255,255,.1);
	overflow: hidden;

	border-style: solid;
	border-width: 0 0 2px 0;
	border-color: rgba(173,0,66,.7);	/* 玫紅 #AD0042 */
}

.sb_style02 .sidebar_title .title,
.sb_style02 .sidebar_title .title a {
	color: rgba(173,0,66,1);	/* 玫紅 #AD0042 */
	font-weight: 500;
}

.sb_style02 .sidebar_title:before {
	position: absolute;
	content: url(images/custom_icon/sidebar_icon_red.png);
	left: 0;
}


/*************************
 樣式二 - 列表區
*************************/
.sb_style02 .sidebar_block .sub_post_box ul li > a,
.sb_style02 .sidebar_block .sub_post_box ul li > span,
.sb_style02 .sidebar_block .sub_cat_box ul li > a,
.sb_style02 .sidebar_block .sub_section_box ul li > a,
.sb_style02 .sidebar_block .sub_office_box ul li > a,
.sb_style02 .sidebar_block .sub_news_count ul li > a,
.sb_style02.sidebar_block .page_link_box ul li > a {
	background: none;
}

.sb_style02 ul li {
	position: relative;
}

.sb_style02 ul:not(.no_icon) li a:before {
	position: relative;
	display: inline-block;
	top: -.5em;
	padding-right: .8em;
	font-size: 50%;
	color: rgba(173,0,66,.6);

	font-family: "Font Awesome 5 Free"; 
	content: '\f0c8';
	font-weight: 900;
}

.sb_style02 .sidebar_block ul li a:hover {
/*	background: rgba(173,0,66,.1);	/* 玫紅 #AD0042 */
}


/*******************************
 樣式三 - 單一區塊 (.sb_style03)
*******************************/
.sb_style03 .sidebar_block {
	background: rgba(255,255,255,.5);
	margin-bottom: 2em;
	border-style: solid;
	border-width: 7px 1px 1px 1px;
	border-color: rgba(198,118,5,1) rgba(198,118,5,.5) rgba(198,118,5,.5) rgba(198,118,5,.5);	/* #C67605 */
	border-radius: 5px 5px 3px 3px;
	-webkit-border-radius: 5px 5px 3px 3px;
	-moz-border-radius: 5px 5px 3px 3px;
	-ms-border-radius: 5px 5px 3px 3px;
	-o-border-radius: 5px 5px 3px 3px;

	border-color: rgba(23,91,150,1) rgba(23,91,150,.5) rgba(23,91,150,.5) rgba(23,91,150,.5);
}

/*************************
 樣式三 - 主標題
 background: rgba(198,118,5,.05); #C67605 黃
*************************/
.sb_style03 .sidebar_title {
	position: relative;
	padding: .5em ;
	font-size: 100%;
	background-image: none;
	background-attachment: contain;
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
	overflow: hidden;

	border-style: solid;
	border-width: 0 0 1px 0;

	background: rgba(30,115,190,.05);
	border-color: rgba(30,115,190,.2);
}

.sb_style03 .sidebar_title .title,
.sb_style03 .sidebar_title .title a {
	color: #134B7C;
	font-weight: 600;
}

/*************************
 樣式三 - 列表區
*************************/
.sb_style03 ul li {
	position: relative;
/*	color: rgba(0, 91, 149, 0.95); */
	color: #595959;
}

.sb_style03 ul:not(.no_icon) li a:before {
	position: relative;
	font-size: 105%;
	padding-right: 8px;
	top: 0;
	color: rgba(198,118,5, .8) ; 	/* #C67605;	 */
	font-family: 'FontAwesome';
	content: '\f0a9';	/* fa-arrow-circle-right */

	font-family: "Font Awesome 5 Free"; 
	content: '\f0a9'; /* <i class="fas fa-arrow-circle-right"></i> */
	font-weight: 900;
}

.sb_style03 .sidebar_block ul li a:hover {
/*	background: rgba(198,118,5,.08);	/* #C67605 */
}

@media only screen and (max-width: 767px) {
    .sb_style01 .sidebar_block,
    .sb_style02 .sidebar_block,
    .sb_style03 .sidebar_block {
		margin-bottom: 1em;
    }
}


/*******************************
 樣式四 - 單一區塊 (.sb_style01)
*******************************/
.sb_style04 .sidebar_block {
	background-color: rgba(255,255,255,1);
	margin-bottom: 2em;
	border-style: solid;
	border-width: 1px 1px 7px 1px;
	border-color: rgba(14,129,95,1) rgba(14,129,95,.5) rgba(14,129,95,.3) rgba(14,129,95,.5);	/* #ABD3FE; */
}


/*************************
 樣式四 - 主標題
*************************/
.sb_style04 .sidebar_title {
	position: relative;
	padding: .3em .3em .2em .5em;
	font-size: 1.2rem;
	background-color: rgba(14,129,95,1);	/** #0E815F; **/
}

.sb_style04 .sidebar_title .title,
.sb_style04 .sidebar_title .title a {
	color: #fff;
}

/*** 主標題後方 icon ***/
.sb_style04 .sidebar_title:after {
	position: absolute;
	content: url(images/custom_icon/sidebar_icon_green_light.png);
	right: 5px;
	top: 3px;
}

/*** 文章列表和分類列表之間加上虛線 ***/
.sb_style04 .sub_post_box + .sub_cat_box {
	border-style: dashed;
	border-width: 1px 0 0 0;
	border-color: rgba(127,127,127,.7);
}

/*** 文章列表下方的分類列表，第一個 li 上方 padding ***/
.sb_style04 .sub_post_box + .sub_cat_box li:first-child {
	padding-top: .2em;
}

/*************************
 樣式四 - 調整 icon-font 
*************************/
/*** 行政單位列表 (一級單位前方加 icon ***/
.sidebar_block.office_list .unit_box a:before {
	position: relative;
    font-size: 80%;
    color: #E74847;
    top: -.1em;
    padding-right: .4em;
    opacity: .7;

	font-family: "Font Awesome 5 Free"; 
	content: '\f0c8';	/* <i class="fas fa-square"></i> */
	font-weight: 900;
}

/*** 文章列表 - 各文章標題下方加虛線 ***/
.sidebar_block.post_list .sub_post_box ul > li {
	border-style: dashed;
	border-width: 0 0 1px 0;
	border-color: rgba(127,127,127,.7);
	padding-top: .2em;
	padding-bottom: .2em;
}

.sidebar_block.post_list .sub_post_box ul > li:last-of-type {
	border-width: 0;
}

/**************************************
 側邊欄 - 部落格型態、或 line 型態
**************************************/
.sidebar_block.blog ul li,
.sidebar_block.line ul li {
	border-style: dashed;
	border-width: 0 0 1px 0;
	border-color: rgba(127,127,127,.7);
	padding-top: .2em;
	padding-bottom: .2em;
}

.sidebar_block.blog ul li:last-child,
.sidebar_block.line ul li:last-child {
	border-width: 0;
}

/** 更多連結 **/
.sidebar_block.blog .more_link,
.sidebar_block.line .more_link {
	text-align: right;
	padding: .3em .5em;
	border-style: dashed;
	border-width: 1px 0 0 0;
	border-color: rgba(127,127,127,.5);
}
.sidebar_block.blog .more_link a,
.sidebar_block.line .more_link a {
	display: block;
	font-size: 90%;
	color: #006100;
	font-weight: 600;
}

.sidebar_block.blog .more_link a:hover {
	color: #AC1616;
}

/**************************************
 側邊欄 ' 相關公告列表
**************************************/
.sb_news_list ul li {
	display: block;
	padding: .4em .5em;
	border-bottom: 1px dashed rgba(127,127,127,.5);
	line-height: 1.3;
}

.sb_news_list ul li:last-of-type {
	border-bottom: none;
}

.sb_news_list .news_attr {
	opacity: .8;
	font-size: 95%;
	margin-bottom: .1em;
}

/*** 日期 ***/
.sb_news_list .news_date {
	display: inline-block;
	padding-right: .5em;
	color: #006100;
}

.sb_news_list .news_unit {}

.sb_news_list ul li a,
.sb_news_list ul li .current {
	display: block;
	padding: .2em 0;
}

.sb_news_list ul li a:hover {
    background: none;
}
/*** 統計列 ***/
.sb_news_info {
	display: block;
	padding: .2em .5em;
	border-top: 1px dashed rgba(127,127,127,.5);
}

/**************************************
 側邊欄 部門別公告統計
 get_office_news_count()
**************************************/
ul.news_tree {}
ul.news_tree li.level_1 a {	padding-left: 1.5em; }
ul.news_tree li.level_2 a {	padding-left: 3em; }
ul.news_tree li.level_1 > a:before {
	font-family: 'FontAwesome';
	content: '\f0da'; /* fa-caret-right */
	margin-right: .3em;
	color: #E74847;
	opacity: .8;

	font-family: "Font Awesome 5 Free"; 
	content: '\f0da'; /* <i class="fas fa-caret-right"></i> */
	font-weight: 900;
}

/**************************************
 側邊欄 依公告類別公告統計
 get_office_news_count()
**************************************/
.sidebar_block .sub_cat_box ul li.level_2 > a {
	padding-left: 1.5em;
}
.sidebar_block .sub_cat_box ul li.level_3 > a {
	padding-left: 3em;
}

/**************************************
*
* footer
*
**************************************/
.site-footer {
	position: relative;		/*** For Accesskey ***/
	background: #333;		/*** 預設值 ***/
	padding-top: 1em;
	padding-bottom: 2em;
	color: #FFF;
	border-style: solid;
	border-width: 8px 0 0 0;
	border-color: rgba(127,127,127,.2);
	color: #FFF;
}

/*** 在 .container 內的 box ***/
.footer_box {}

/*******************************
 第一排
*******************************/
.footer_menu_wrap {
	text-align: center;
	margin-bottom: 1em;
}

/*** 底部功能表 ***/
#footer_menu ul {}

#footer_menu ul li {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: .2em .3em;
	border: 0px solid green;
}

#footer_menu ul li:first-of-type {
	padding-left: 0;
}

#footer_menu ul li:before {
	content: "|";
	position: absolute;
	top: 50%;
	transform: translateY(-55%);
	right: -.29em;
	color: rgba(255,255,255,.7);
	
}

#footer_menu ul li:last-of-type:before {
	content: '';
}

.footer_list a.url_link,
.footer_list a.url_link em  {
	color: #FFF;
	opacity: .8;
}

.footer_list a.url_link:hover {
	opacity: 1;
}

#footer_menu ul li a {
	display: inline-block;
	padding: .2em .7em .1em;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	color: #FFF;
}

#footer_menu ul li:first-child a {}

#footer_menu ul li a:hover {
    outline: 2px solid #FF9933 !important;
    outline-offset: -2px !important;
}

/*******************************
 第二排
*******************************/
.footer_content {
	display: table;
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	vertical-align: middle;
}

.footer_content .footer_qrcode,
.footer_content .footer_info,
.footer_content .footer_badge {
	display: table-cell;
	vertical-align: middle;
}

/*** QR Code ***/
.footer_content .footer_qrcode {
	width: 6em;
}

.footer_content .footer_info {
	padding: 0 2em;
}

.footer_info ul {
	border: 0px solid white;
}

.footer_info ul li {
/*
	display: inline-block;
	margin-right: 2em;
	border: 0px solid yellow;
*/
}

.footer_info ul li:last-child {
	margin-right: 0;
}

.footer_info i {
	display: inline-block;
	width: 1.8em;
	color: #FFF;
	opacity: .5;
}

.footer_info a {
	color: #FFC;

}

/*** 3A 標章 ***/
.footer_content .footer_badge {
	width: 8em;
}

.footer_content .footer_badge a {
	background: #333;
	color: #FFF;
}

/*** 版權說明 ***/
.copyright,
.copyright a,
.copyright span {
	color: #FFF;
}

/*** 客戶名稱及連結 ***/
.copyright a.footer_site {}

.copyright a:hover {
	color: #FFFF00;
	background-color: #333;
}

.copyright .powerby {
	opacity: .4;
}

@media only screen and (max-width: 767px) {
	.footer_menu_wrap {
		text-align: left;
		margin-bottom: 1em; 
	}

	/*** 底部功能表 ***/
	#footer_menu ul li {
		display: block;
		padding: .2em 0;
		border-bottom: 1px solid rgba(255,255,255,.1);
	}

	#footer_menu ul li:before {
		content: '';
	}
	
	#footer_menu ul li a {
		display: block;
		padding: 0;
	}
	
	.footer_content .footer_qrcode,
	.footer_content .footer_info,
	.footer_content .footer_badge {
		display: block;
		width: 100%;
		text-align:left;
		padding: 0;
		margin-bottom: .5em;
	}


	/*** QR Code ***/
	.footer_content .footer_qrcode img {
		margin: 0 auto;
		width: 5em;
	}

	.footer_content .footer_info {
		border-style: solid;
		border-width: 1px 0;
		border-color: rgba(255,255,255,.1);
		padding: .5em 0;
	}


	/*** 3A 標章 ***/
	.footer_content .footer_badge {
		text-align: center;
	}

	.footer_content .footer_badge img {}

}


/**************************************
*
* Category
*
**************************************/

/**************************************
 行政單位、教學單位、協力單位列表
 template_part/category/office_list.php
**************************************/
.office_unit {
    display: inline-block;
	float: left; 
	width: 33.33%;			/*** 一排 3 個 ***/
	padding-right: 1.5%;
    margin-bottom: 3%;
}

.office_unit a {
	display: block;
}

/*** 內容區塊 ***/
.office_unit .unit-box {
    border: 1px solid rgba(127,127,127,.5);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
}

/*** 單位名稱 ***/
.unit-box .unit-title {
	font-size: 120%;
	margin: 0;
	padding: .5em 0 .3em;
	text-align: center;
	border-bottom: 1px solid rgba(127,127,127,.3);
	background: rgba(127,127,127,.3);
	color: #111;
	white-space: nowrap;
}

/*** 內容 ***/
.unit-box .unit-desc {
	padding: .3em .5em;
	font-size: 95%;
}

.unit-box:hover {
	border-color: rgba(30,115,190,.5);	 /* nv_info #1E73BE */
}

.unit-box a {
	color: #595959;
}
.unit-box:hover a,
.unit-box a:hover {
	color: rgba(30,115,190,1);	 	/* nv_info #1E73BE */		
}

.unit-box:hover .unit-title {
	background: rgba(30,115,190,1);	 /* nv_info #1E73BE */
	color: #fff;
}

.unit-box:hover .unit-desc  {}

/*** 每排 1 個 ***/
@media only screen and (max-width: 479px) {
    .office_unit {
        display: block;
        float: none;
        width: 100%;
        padding-right: 0;
    }
}

/*** 每排 2 個 ***/
@media only screen and (min-width: 480px) and (max-width: 699px) {
    .office_unit {
        width: 50%;
    }
}

@media only screen and (min-width: 700px) and (max-width: 767px) {
    .office_unit {
        width: 33.33%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .office_unit {
        width: 33.33%;
    }
}

/*** 有側邊欄，一排 2 個 ***/
@media only screen and (min-width: 992px) and (max-width: 1023px) {
    .office_unit {
        width: 50%;
    }
}

/**************************************
 行政單位、教學單位、協力單位歡迎頁
 template_part/category/office_welcome.php
**************************************/
/*** 歡迎頁 ***/
.welcome_box {
	display: block;
	margin-bottom: 3em;
}

/*** 各單位最新消息 ***/
.news_action {
	text-align: right;
	padding: .3em 0;
	border-style: solid;
	border-width: 3px 0 0 0;
	border-color: rgba(0,85,204,.3);
}

/**************************************
 校園公告 Tool bar
 template_part/news_change_form.php
**************************************/
.news_tool_bar {
	background: rgba(204,138,0,.1);
	margin-bottom: 1em;
	padding: .5em;
}

.news_select_box {
	display: flex;
	width: 100%;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

/*** 各搜尋欄位 ***/
.news_select_box .query_item {
	flex: 0 0 31.5%;
	display: inline-block;
	border: 0px solid red;
	padding: 0 1em 0 0; 
}

/*** 搜尋按鈕 ***/
.news_select_box .query_item.submit {
	flex: 0 0 5.5%;
	max-width: 4em;
	padding-right: 0;
	padding-left: .5em;
}

/*** 欄位標籤 ***/
.std_form .query_item label {
	font-weight: 600;
	color: #006100;
}

.query_item select:focus {
    outline: 2px solid #FF9933 !important;
    outline-offset: -2px !important;
}

/*** 關鍵字欄位 ***/
.query_item.keyword {
	text-align: right;
}
.query_item.keyword input {
	max-width: 10.5em;
	padding-top: .3em;
	padding-bottom: .3em;
}

/**************************************
 校園公告列表表格
 template_part/news/news_list.php 
**************************************/
.nt_table thead th {
    background: rgba(0,85,204,.02); 
    color: #039;
	padding: .4em .3em .3em;
    font-weight: 600;
    text-align: center;
	border-style: solid;
	border-width: 5px 0 1px 0;
	border-color: rgba(0,85,204,.5) transparent rgba(0,85,204,.1) transparent;
}

.nt_table td {
	border: none;
	line-height: 1.6;
}

.nt_table td a {
	display: block;
}

.nt_table tbody tr:nth-child(even) td {
    background: rgba(0, 91, 149, .03);
}

/*******************
 for 北一女 BEGIN
*******************/
/*** 標題列顏色 ***/
.nt_table thead th {
	background-color: rgba(0,153,51, .3);	/* #0e815f */
	border-width: 5px 1px 1px 1px;
	border-color: rgba(14,129,95,.7) rgba(0,153,51, .2) rgba(14,129,95,.1) transparent;
	color: #0A563F;
}

/*** 偶數行背景 ***/
.nt_table tbody tr:nth-child(even) td {
    background: rgba(14,129,95, .08);
}
/****************
for 北一女 END 
*****************/

.nt_table tbody tr:hover {
    outline: 2px solid #FF9933 !important;
    outline-offset: -2px !important;
}

.nt_table .nt_date,
.nt_table .nt_category,
.nt_table .nt_unit,
.nt_table .nt_view {
	white-space: nowrap;
	text-align: center;
}

/*** 公告日期 ***/
.nt_table .nt_date {
	width: 6.2em;
}

/*** 公告類別 ***/
.nt_table .nt_category {
	width: 5.1em;
}

/*** 發佈單位 ***/
.nt_table .nt_unit {
	width: 6.2em;
}


/*** 瀏覽次數 ***/
.nt_table .nt_view {
	font-size: 85%;
	opacity: .8;
	width: 4.1em;
}


/*** 公告等級 ***/
.sticky_text,
.nt_table .file_type,
.article_title .file_type {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	font-size: 75%;
	font-weight: normal;
	min-width: 2.5em;
	margin-right: 0.3em;
	padding-left: 0.3em;
	padding-right: 0.3em;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	background-color: #595959;
	color: #FFF;
}

/*** 置頂公告 ***/
.sticky_text {
	background-color: #dc3232;
	color: #fff;
}

/* 公告級別 */
/*** 重要 ***/
.file_type.news_type_1 {
	/* 藍 */
	color: #FFF;
	background-color: rgba(23,91,150,1);	/* #175B96 */
}

/*** 轉知 ***/
.file_type.news_type_2 {
	/*** 綠 ***/
	color: #FFF;
	background-color: rgba(0,97,0,1);	/* #006100 */
}

/*** 急件 ***/
.file_type.news_type_3 {
	/*** 紫 ***/	
	color: #FFF;
	background-color: rgba(114,6,136,1);	/* #720688 */ 

}

/*** 狂賀 ***/
.file_type.news_type_4 {
	/*** 紅 ***/
    color: #FFF;
	background-color: rgba(172,22,22,1);	/* #AC1616 */
}

/*** 預備 (1) ***/
.file_type.news_type_5 {
	/*** 褐 ***/	
	color: #FFF;
	background-color: rgba(128,64,0,1);	/* #175B96 */
}

/*** 預備 (2) ***/
.file_type.news_type_6 {
	/*** 墨綠 ***/
	background-color: #737300;
	color: #FFF;
}

/*********************
 RSS 公告公文轉載
*********************/
/*** 編號 ***/
.nt_table .nt_number {
	width: 4em;
	text-align: center;
}

/*** 連結按鈕 ***/
.nt_table .nt_link {
	width: 8em;
	text-align: center;
}

.nt_table .nt_link a {
	display: inline-block;
	font-size: 80%;
	padding: .2em .5em;
}


@media only screen and (max-width: 599px) {
	.nt_table thead {
		display: none;
	}
    .nt_table tr {
		display: block;
		padding: .3em 0;
		border-bottom: 1px dashed rgba(127,127,127, 1);
	}

	/*** 第一個 ***/
    .nt_table tr:first-of-type {
        border-top: 3px solid rgba(0,85,204,.5);
	}

    .nt_table td {
        display: block;
		width: 100%;
		text-align: left;
		padding: 0;
    }
    .nt_table td a {
        display: inline;
    }

    .nt_table .nt_category,
    .nt_table .nt_unit,
	.nt_table .nt_view {
        text-align: left;
    }

	.nt_table td:not(.nt_link):before {
        content: attr(data-title) '： ';
        color: #090;
        font-weight: 600;
	}

	.nt_table td.nt_link {
		width: 100%;
		text-align: left;
	}
	
	/*** 瀏覽次數 ***/
    .nt_table .nt_view {
        font-size: 100%;
        opacity: 1;
    }

	/*** 下方更多按鈕 ***/
	.news_action {
		border-width: 0;
	}
}

/**************************************
 RSS 訂閱校園公告
 template_part/rss.php
**************************************/
.rss_list {
	list-style: none;
}

.rss_list li {
	display: inline-block;
	float: left;
	margin-right: 2em;
	margin-bottom: .3em;
	vertical-align: middle;
}

.rss_list li img {
	position: relative;
	top: -2px;
	display: inline-block;
	margin-right: .3em;
}

/**************************************
 台北市政府教育局公文公告 RSS
 template_home/home_rss.php 
**************************************/
.rss_table thead th {
    background: rgba(0,85,204,.02); 
    color: #039;
	padding: .4em .3em .3em;
    font-weight: 600;
    text-align: center;
	border-style: solid;
	border-width: 5px 1px 1px 1px;
	border-color: rgba(127,127,127,.3);
}

.rss_table td {
	line-height: 1.4;
}

.rss_table tbody tr:nth-child(even) td {
    background: rgba(0, 91, 149, .03);
}

/*** 項次欄 ***/
.rss_table .rss_item {
	width: 5em;
	text-align: center;
}

/*** 日期欄 ***/
.rss_table .rss_date {
	width: 10em;
	text-align: center;
}

/*** 標題 ***/
.rss_table .rss_title {
	font-size: 105%;
	color: #175B96;
	margin-bottom: .3em;
}
/*** 摘要 ***/
.rss_table .rss_content {
	font-size: 85%;
	height: 3em;
	overflow: hidden;
}

/*** 閱讀全文 ***/
.rss_table .rss_link {
	text-align: center;
}

.action_box {
	text-align: right;
	margin-top: .5em;
}

/*** RSS 訂閱按鈕 ***/
.action_box ul.rss_list {
	display: inline-block;
	float: left;
}


/**************************************
 部落格樣式顯示
 template_part/category/category_blog.php 
**************************************/
.blog_item {
	position: relative;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(127,127,127,.3);
	padding: .5em 1em;
	margin-bottom: 1em;
	border-radius: 4px;
	background: rgba(255,255,255,.9);
}

/*** 置頂文章 ***/
.blog_item.sticky {
	border-color: rgba(255,0,0,.3);
}

/** 標題區 **/
.blog_item .item_title {
	border-style: solid;
	border-width: 0 0 1px 0;
	border-color: rgba(127,127,127,.2);
}

.blog_item .item_title .title_link {
	color: #661A00;
} 

/** 日期 **/
.blog_item .item_date {
	font-size: 85%;
	opacity: .8;
}

/** 內容區 **/
.blog_item .item_content {
	margin-top: 1em;
}

/** 更多按鈕 **/
.blog_item .item_content .more_link {
	font-size: 90%;
	font-weight: 600;
	display: inline-block;
	margin-left: .5em;
}


/**************************************
 單篇部落格文章
 template_part/single.php 
**************************************/
/*** 下方的 上一則 / 下一則 ***/
.blog_nav {
	border-style: dashed;
	border-width: 1px 0 0 0;
	border-color: rgba(127,127,127,.5);
	border-radius: 4px;
	margin: 1em 0;
	padding: .5em 0;
	background: rgba(204,138,0,0);
/*	padding: .5em .5em .3em .5em; */
}

.blog_nav_list li {
	position: relative;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	display: block;
}

.blog_nav_list li.left {
	margin-bottom: .3em;
}

.blog_nav_list li.left:before,
.blog_nav_list li.right:before {
	display: inline-block;
	border-radius: 3px;
	color: #006100;
	font-weight: 600;
	font-size: 80%;
}

.blog_nav_list li.left:before {
	content: '上一篇：';
}

.blog_nav_list li.right:before {
	content: '下一篇：';
}


/*************************************
 活動花絮 (各處室列表)
 template_part/gallery/gallery_cat_list.php
**************************************/
ul.gallery_cat_list{}
ul.gallery_cat_list li {
 display: inline-block;
 width: 33.333%;
 float: left;
 padding: .5em;
 text-align: center;
 border: 0px solid green;
}

ul.gallery_cat_list li:hover {
 outline: 2px solid #FF9933 !important;
 outline-offset: -2px !important;
}

/*** 標題 ***/
ul.gallery_cat_list li .gallery_title {
 display: block;
 text-align: center;
 font-size: 110%;
 color: #175B96;
}

ul.gallery_cat_list li:hover .gallery_title,
ul.gallery_cat_list li .gallery_title:hover {
 color: #AC1616;
}

@media only screen and (max-width:479px) {
 /*** 每排 1 個 ***/
 ul.gallery_cat_list li {
  display: block;
  width: 100%;
  float: none;
  padding: 0;
  margin-bottom: 1em;
 }
}

@media only screen and (min-width:480px) and (max-width:599px) {
 /*** 每排 2 個 ***/
 ul.gallery_cat_list li {
  width: 50%;
 }
}

@media only screen and (min-width:768px) and (max-width:899px) {
 /*** 每排 2 個 ***/
 ul.gallery_cat_list li {
  width: 50%;
 }
}

@media only screen and (min-width:900px) and (max-width:1023px) {
 /*** 每排 3 個 ***/
 ul.gallery_cat_list li {
  width: 33.333%;
 }
}

/***************************************
 活動花絮 (Photo Station 活動集列表)
 template_part/gallery/gallery_post_list.php
****************************************/
/*** 單筆活動花敘 ***/
.gallery_post {
 display: table;
 width: 100%;
 vertical-align: top;
 border-collapse: collapse;
 border-bottom: 1px solid rgba(127,127,127,.5);
 margin-bottom: 1em;
}

.gallery_post .image_box,
.gallery_post .text_box {
 display: table-cell;
 vertical-align: top;
 padding-bottom: 1em;
}

/*** 照片區 ***/
.gallery_post .image_box {
 width: 30%;
}

/*** 文字區 ***/
.gallery_post .text_box {
 padding-left: 5%;
}

/*** 標題 ***/
.gallery_post .title_box {
 font-size: 120%;
 color: #AC1616;
}

/*** 文字區前方 label ***/
.gallery_post .gallery_label {
 color: #006100;
}

/*** 瀏覽照片按鈕 ***/
.gallery_post .link_url {
 margin-top: .5em;
}
.gallery_post .link_url a.link_btn {
 display: inline-block;
 padding: .2em .5em .1em;
 border-radius: 3px;
 background: #175B96;
 color: #FFF;
}
.gallery_post .link_url a.link_btn:hover {
 background: #AC1616;
}

@media only screen and (max-width:479px) {
 .gallery_post,
 .gallery_post .image_box,
 .gallery_post .text_box {
  display: block;
  width: 100%;
 }
 /*** 文字區 ***/
 .gallery_post .text_box {
  padding-left: 0;
 }

}

/***************************************
 校園影音 (YouTube 影片列表)
 template_part/video/video_list.php
****************************************/
.video_list .video_post {
	margin-bottom: 1em;
}

.video_post .text_box {
	margin-top: .3em;
	text-align: center;
	line-height: 1.4;
}

.video_post .text_box .date_box {
	font-size: 90%;
	color: #AC1616;
}

.video_post .text_box .title_box {
	line-height: 1.2;
	overflow: hidden;
	height: 2.5em;
	border: 0px solid green;
}

/**************************************
*
* Single
*
**************************************/

/*********************************
 category list
**********************************/
/*** 每篇文章區塊 ***/
.category_list {
	padding: 1em ;
	margin-bottom: 1.5em;

	border-style: solid;
	border-width: 1px;
	border-color: rgba(127,127,127,.3);
	border-radius: 4px;
	background-color: rgba(255,255,255,.9);
	box-shadow: 0px 0px 2px rgba(0,0,0,.2); 
}

/*** 置頂文章 ***/
.category_list.sticky {
	border-color: rgba(255,0,0,.5);
}

/*** 標題區 ***/
.category_list_header {
	display: block;
	margin-bottom: .8em;
	position: relative;
}

/*** 標題 ***/
.category_list_header .title_box {
	line-height: 1.2;
	border-bottom: 1px solid rgba(102,26,0,.2);
	color: #661A00;
	margin-bottom: .1em;
}

/*** 日期 ***/
.category_list_header .date_box {
	font-size: 80%;
	opacity: .65;
	display: inline-block;
	margin-right: 2em;
}

/*** 發佈單位 (作者 display name) ***/
.category_list_header .author_box {
	font-size: 80%;
	opacity: .65;
	display: inline-block;
}

/*** 使用者編輯按鈕 ***/
.edit-link {
	text-align: right;
	margin-botrtom: .3em;
}

.edit-link a {
	display: inline-block;
	font-size: 80%;
	padding: .2em .5em;
	background: #ABD3FE;
	color: #09365A;
	border-radius: 3px;
}

.edit-link a:hover {
	background: #E74847;
	color: #FFF;
}

/*** 鍵盤按鍵說明按鈕 ***/
.category_list_header .tabshelp{
	position: absolute;
	z-index: 1;
	right: 0;
	top: 1.8em;
}

/*** FOR WCAG 2.0 tabs 說明 ***/
.category_list_header .tabs_desc {
	margin-top: .8em;
}

/*** 文章主要內容 (位於 TABS 內容上方，與 TABS 共存時才需要) ***/
.category_list .page_main_content.have_tabs {
	margin-bottom: 1em;
	padding-bottom: .5em;
	border-style: dashed;
	border-width: 0 0 1px 0;
	border-color: rgba(127,127,127,.5);
}

/**************************************
 單筆校園公告 
 template_part/news/news_single.php
**************************************/
table.single_news {
	width: 100%;
	border-collapse: collapse;
}

table.single_news th.newsth,
table.single_news td.newstd {
	vertical-align: top;
	padding: 1%;
	border-color: rgba(127,127,127,.2);
}

table.single_news th.newsth {
	vertical-align: middle;
    width: 5.5em;
    color: #660000;
    font-weight: 600;
}

/*** 新聞標題 ***/
table.single_news .news_title td.newstd {
	color: #006100;
/*	font-weight: 600; */
}

/*** 新聞內容 ***/
table.single_news .news_content th.newsth {
    vertical-align: top;
}

table.single_news .news_content .content {
	min-height: 10em;
	word-break: break-all;
	line-height: 1.8;
}

/*** 相關附件 ***/
table.single_news .news_attach .file_attach {
	display: inline-block;
	padding: 1% 5% 1% 0;
}

table.single_news .news_attach .file_attach img {
	margin-right: 5px;
}

/*** 聯絡人資訊 ***/
table.single_news .info_label {
	display: inline-block;
	color: #006100;
}

@media only screen and (max-width: 767px) {
	table.single_news {
		width: 100%;
	}
}

/*** 下方的 上一則 / 下一則 ***/
.post_nav {
	border-style: dashed;
	border-width: 0px;
	border-color: rgba(127,127,127,.5);
	border-radius: 4px;
	margin: 1em 0;
	background: rgba(204,138,0,0);
/*	padding: .5em .5em .3em .5em; */
}

.post_nav_list li {
	position: relative;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
}

.post_nav_list li.left {
	margin-bottom: .5em;
}

.post_nav_list li.left:before,
.post_nav_list li.right:before {
	display: inline-block;
	border-radius: 3px;
	color: #006100;
	font-weight: 600;
	font-size: 80%;
}

.post_nav_list li.left:before {
	content: '上一篇：';
}

.post_nav_list li.right:before {
	content: '下一篇：';
}

/*** 日期 ***/
.post_nav_list li .post_nav_date {
	display: inline-block;
	color: #333;
	opacity: .7;
}

@media only screen and (max-width: 767px) {
	.post_nav_list li {
		white-space: normal;
	}
}

/*************************************
 一般頁面 相關檔案區塊 
 顯示 ACF attach_field 內容
**************************************/
.attach_box {
	display: table;
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
	vertical-align: middle;
	margin-top: 3%;
}

.attach_box .box_title,
.attach_box .box_content {
	display: table-cell;
	padding: .5em ;
	text-align: left;
	vertical-align: middle;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(0,97,0,.5);
}

.attach_box .box_title {
	width: 6em;
	white-space: nowrap;
	color: #006100;
	font-weight: 600;
	background: #006100;
	color: #fff; 
	text-align: center;
	border-color: #006100;
}

/**********************************
 單篇公告 - 不使用表格
**********************************/
.article_header {
	margin-bottom: 2em;
}

.article_header .article_title {
	display: block;
	padding: 0 0 .2em 0;
	border-style: solid;
	border-width: 0 0 3px 0;
	border-color: rgba(127,127,127,.5);
	border-color: rgba(255,102,0,.5);	/* #F60; */
	line-height: 1.2;
}

/*** 公告 meta ***/
.article_meta ul {
	list-style: none;
	line-height: 1.4;
	margin-top: .5em;
}
.article_meta ul li {
	list-style: none;
	display: inline-block;
	margin-right: 2em;
}
.article_meta ul li:last-of-type {
	margin-right: 0;
}

.article_meta i {
	display: inline-block;
	color: #006100;
	opacity: .8;
	width: 1.4em;
}

/*** 點閱次數 ***/
.article_meta .news_view {
	color: #E74847;
	font-weight: 600;
}

/*** 相關附件、相關連結、聯絡資訊 ***/
.article_attach,
.article_link,
.article_contact {
	display: block;
	width: 100%;
	margin: 1em 0 0 0;
	padding: .5em 1em;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(127,127,127,.3);
	border-radius: 4px;
}

/*** 標題 ***/
.article_attach .a_title,
.article_link .a_title,
.article_contact .a_title {
	color: #900;
	font-weight: 600;
}

/*** 下方的 上一則 / 下一則 ***/
.post_nav.show_border {
	border-width: 1px 0 1px 0;
	border-color: rgba(127,127,127,.7);
	padding: .5em 0;
}

/**************************************
*
* Page
*
**************************************/

/**************************************
 搜尋結果頁面
 template_part/page/default_search.php
**************************************/
.search_page .category_title {
	margin-bottom: 4%;
}

.search_page .category_title .title {
	color: #333; 
}

ul.search_list li {
	margin-bottom: .5em;
	padding-bottom: .5em;
	border-bottom: 1px dashed rgba(127,127,127,.5);
}

ul.search_list li .search_cat {
	display: inline-block;
	margin-right: .5em;
}

ul.search_list li .search_cat:last-of-type {
/*	margin-right: 1em; */
}

ul.search_list li .search_cat a {
	display: inline-block;
	padding: .1em .5em;
	background: rgba(127,127,127,.15);
	color: #333;
	font-size: 95%;
}

ul.search_list li .search_cat a:hover {
	background: #868686;
	color: #fff;
}

/**************************************
 聯絡我們頁面
 page-contact.php
**************************************/
.sidebar_block.contact {
	background: rgba(127,127,127, 0);
}

.sidebar_block.contact .contact_list {
	padding: .5em;
}

.sidebar_block.contact .iframe_box {
	border: 1px solid rgba(127,127,127,.5);
}

/**************************************
 RSS 列表頁面
 page-rss_list.php
**************************************/
ul.rss_query {
	list-style: none;
	display: table;
	width: 100%;
	border-collapse: collapse;
}

ul.rss_query li {
	display: table-row;
	vertical-align: middle;
	font-size: 105%;
}

/*** 標題列 ***/
ul.rss_query li.list_header {
	background: rgba(127,127,127,.2);
	font-weight: 600;
}


ul.rss_query li.list_header div,
ul.rss_query .rss_item,
ul.rss_query .rss_subscribe {
	text-align: center;
}

ul.rss_query li .rss_subscribe {
	white-space: nowrap;
}

ul.rss_query li .rss_item,
ul.rss_query li .rss_name,
ul.rss_query li .rss_url,
ul.rss_query li .rss_subscribe {
	display: table-cell;
	vertical-align: middle;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(127,127,127,.3);
	padding: .2em .3em;
}

/**************************************
*
* Single 內頁特殊內容
*
**************************************/

/**************************************
 網站導覽
 template_part/template_guide.php 
**************************************/
/**************************************
 Site Map 目錄及文章樹狀列表
 <div class="guide_desc">
    <h3 class="guide-title"><span class="title">網站操作指南</span></h3>

 </div>
 <div class="guide_stru">
    <h3 class="guide-title"><span class="title">網站地圖</span></h3>
    <div class="guide_stru_box">
        <div class="sitemap">
            <div class="h3 stru_title"><span class="title">網站目錄</span></div> 
            <ul class="tree2">
                網站目錄樹狀結構
            </ul>
        </div>
        <div class="pagemap">
            <div class="h3 stru_title"><span class="title">單一網頁</span></div> 
            <ul class="tree2">
                單一頁面列表
            </ul>
        </div>
    </div>        
 </div>	 
**************************************/
/*** 二個區塊 ***/
.guide_desc, .guide_stru {
	display: block;
	margin-bottom: 3em;
}

/*** 每個區塊主標題 ***/
.guide-title {
	position: relative;
/*	text-align: center; */
	padding-bottom: 3px;
	margin-bottom: 2%;
	font-size: 1.3em;
	font-weight: 600;
	color: #661A00; 
}

.guide-title span:before {
	content: url(images/icon/guide_icon.png);
	margin-right: .5em;
}

.guide-title:after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 1px;
    border: 0;
	background: rgba(244,110,39,.3);
}

/**************************************
	網站操作指南 .guide_desc
**************************************/
/*** 各子區塊 ***/
.guide_section {
	margin-bottom: 2em;
}

/*** 子區塊標題 ***/
.guide_section_title {
	color: #006100;
	margin-bottom: .2em;
}

.accesskey-list li {
	margin-bottom: .5em;
}

/**************************************
	網站地圖 .guide_stru
**************************************/
.guide_stru_box {
	position: relative;
	width: 100%;
	border: 0px solid red;
	vertical-align: top;
}

/*** 各子區塊 ***/
.guide_stru_box .sitemap,
.guide_stru_box .pagemap {
	vertical-align: top;
	border: 0px solid green;
	float: left;
	text-align: left;
}

/*** 網站目錄 (左) ***/
.guide_stru_box .sitemap {
	width: 70%;
	padding-right: 1em;
}

/*** 網頁目錄 ***/
.guide_stru_box .pagemap {
	width: 30%;
}

/*** 子區塊標題 ***/
.guide_stru_box .stru_title {
	display: block;
	padding: .3em .5em .2em;
	border-style: solid;
	border-width: 1px;
	border-color: transparent;
	background:  #F9CB33;
	color: #111111;
	margin-bottom: .3em;
}

.sitemap .stru_title {}
.pagemap .stru_title {}

@media only screen and (max-width:1023px) {
	/*** 各子區塊 ***/
	.guide_stru_box .sitemap,
	.guide_stru_box .pagemap {
		display: block;
		width: 100%;
		float: none;
		padding: 0;
		border-style: solid;
		border-width: 0 1px 1px 1px;
		border-color: rgba(127,127,127,.5);
	}

	.guide_stru_box .sitemap {
		margin-bottom: 1em;
	}
}

/**************************************
	樹狀結構 ul.tree2
**************************************/
ul.tree2 {
	margin-left: 2em;
}

ul.tree2 button {
	display: inline-block;
	padding: 0;
	margin: 0 .35em 0 .2em;
	line-height: 1;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	text-align: center;
	opacity: .85;
}

/*** 整個樹狀結構第一個連結 ***/
ul.tree2.level-1 > li:first-child > a {}

ul.tree2 li, 
ul.tree2 li ul li {
	position: relative;
	line-height: 1.7;
}

/*** 第二層以後 ***/
ul.tree2 ul {
	margin-left: 2em;
}

/*** 所有連結 ***/
ul.tree2 a {
	border: 0px solid red;
	padding-top: .2em;
	padding-bottom: .2em; 
}

ul.tree2 a,					/* 一般連結 */
ul.tree2 li.file a:before {	/* 頁面 */
	padding-left: .2em;
	padding-right: .2em;
}

/* 頁面 */
ul.tree2 li.file a {}
ul.tree2 li.file a:before {
	font-family: 'FontAwesome';
	content: '\f016';
	display: inline;
	opacity: .7;
	padding-right: .4em;

	font-family: "Font Awesome 5 Free"; 
	content: '\f15b';	/* <i class="far fa-file"></i>*/
	font-weight: 400;
}

/*** 可展開/收起的節點 ***/ 
ul.tree2 li.hasSubmenu > a {
	border: 0px solid green;
	line-height: 2.2;
}

/*** 目錄連結 ***/
ul.tree2 li:not(.file) > a,
ul.tree2 li.hasSubmenu > a {
	color: #175B96;
	font-weight: 600;
}

/*** 頁面連結 ***/
ul.tree2 li.file a {
	color: inherit;
	overflow: hidden;
}

/*** 橫線 ***/
ul.tree2 li:before {
    position: relative;
    content: "";
    display: inline-block;
    width: 1em;
    height: 0;
    left: 0;
    top: -.4em;
    border-top: 1px dashed;
}

/*** 最後一個連結選項 (上方直線) ***/
ul.tree2 li:last-child button:before {
    position: absolute;
    content: "";
    display: inline-block;
    width: 1px;
    height: .8em;
    left: 0;
    top: 0;
    border-left: 1px dashed;
}

/*** 蓋掉最後一個 li 太長的部份 ***/
ul.tree2 > li:last-child:after,
ul.tree2 li ul li:last-child:after {
    content: '';
    display: block;
    width: 1px;
    height: 51%;
    position: absolute; 
    bottom: 0;
    left: -1px;
	border: 2px solid #FFF;
} 

ul.tree2 li a:hover {
	box-shadow: 0 0 0 2px #FF9933 inset;
}

/**************************************
 組織圖
**************************************/
.flow-chart-wrap {
	text-align: center;
	margin-bottom: 3em;
}
.flow-chart {
	display: inline-block;
}

.flow-chart:before,
.flow-chart:after, 
.flow-chart ul:before,
.flow-chart ul:after {
	display: table;
	content: " ";
}

.flow-chart:after,
.flow-chart ul:after {
	clear: both;
}

/*** 每一層 ***/
.flow-chart ul {
	position: relative;
    padding-top: 1.5em; 	/*** height #1 ***/
	text-align: center;
}

/*** 第一層 ***/
.flow-chart > ul {
	padding-top: 0;
}

/*** 第二層 ***/
.flow-chart ul ul {
	padding-top: 2em;		/*** height #2 ***/
	padding-top: 4em;		/*** 用於有秘書室 ***/
}

/*** 第三層以後 ***/
.flow-chart ul ul ul {
	padding-top: 1.5em;		/*** 同 height #1 ***/
}

/*** 每一層的單位 ***/
.flow-chart li {
	position: relative;
	display: inline-block;
	float: left;
	text-align: center;
	list-style-type: none;
	padding: 0 1em;	
	padding-top: 1.5em;		/*** height #3  ***/
}

/**************************************
 每個單位上方的連接線 
 li:before ( 左上	border 上 )
 li:after  ( 右上	border 上、左 )  
 width: 50%
 height = li padding-top
**************************************/
.flow-chart li:before, 
.flow-chart li:after {
	content: '';
	position: absolute; 
	top: 0; 
	right: 50%;
	width: 50%; 
	height: 1.5em;									/*** height #3 ***/
	border-top: 1px solid rgba(127,127,127,.7);		/*** color #1 ***/
}

.flow-chart li:after {
	right: auto; 
	left: 50%;
	border-left: 1px solid rgba(127,127,127,.7);	/*** color #1 ***/
}

/*Remove left connector from first child and 
right connector from last child*/
.flow-chart li:first-child::before, 
.flow-chart li:last-child::after {
	border: none;
	width: 0;
}

/*** 沒有下層單位 ***/
.flow-chart li:only-child:before, 
.flow-chart li:only-child:after {
	display: none;
}

/*Remove space from the top of single children*/
.flow-chart li:only-child { 
	padding-top: 0;
}

/* Adding back the vertical connector to the last nodes
  最右邊單位補右直線和圓角框
*/
.flow-chart li:last-child:before {
	border-right: 1px solid rgba(127,127,127,.7);		/*** color #1 ***/
	border-radius: 0 3px 0 0;
	-webkit-border-radius: 0 3px 0 0;
	-moz-border-radius: 0 3px 0 0;
    -ms-border-radius: 0 3px 0 0;
    -o-border-radius: 0 3px 0 0;
}

.flow-chart li:first-child:after {
    border-radius: 3px 0 0 0;
    -webkit-border-radius: 3px 0 0 0;
    -moz-border-radius: 3px 0 0 0;
    -ms-border-radius: 3px 0 0 0;
    -o-border-radius: 3px 0 0 0;
}

/*Time to add downward connectors from parents*/
/*** 第二層開始 ul 上方加 直線 ***/
.flow-chart ul ul:before {
	content: '';
	position: absolute; 
	top: 0; 
	left: 50%;
	width: 0; 
	border-left: 1px solid rgba(127,127,127,.7);		/*** color #1 ***/
}

/*** 第二層的上方直線 ***/
.flow-chart ul ul:before {
	height: 2em;		/*** 同 height #2 ***/

	height: 4em;	/*** 用於有秘書室 ***/
}

/*** 第三層以後的上方直線 ***/
.flow-chart ul ul ul:before {
	height: 1.5em;		/*** 同 height #3 ***/
}

.flow-chart li a {
	display: inline-block;
	text-decoration: none;
	max-width: 2.5em; 
	font-size: 1.1em;
	padding: .3em ;
	border: 1px solid #333;
}

.flow-chart li a.start {
	padding-left: .8em;
	padding-right: .8em; 
	max-width: inherit;	
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.flow-chart li a:hover,
.flow-chart li .branch a:hover {
	background: #c8e4f8; 
	color: #000; 
}

/*** 秘書室 (左) ***/
.flow-chart .branch {
	position: absolute;   
	z-index: 2;
	top: 3.06em;			/* = (a 的上、下 padding) + (a 的 font-size * line-height) + (上方距離.3em ):  */
	left: auto;
	right: 50%;
	padding-right: 4em;		/*** width #1 ***/
	padding-left: 0;
}

.flow-chart .branch.right {
	left: 50%;
	right: auto;
	padding-left: 4em;
	padding-right: 0;
}

.flow-chart .branch:after,
.flow-chart .branch.right:before {
	position: absolute; 
	content: '';
	top: 50%;
	right: 0;
	width: 4em;		/*** width #1 ***/
	height: 1px;
	background: rgba(127,127,127,.7);		/*** color #1 ***/
}

.flow-chart .branch.right:after {
	display: none;
}

.flow-chart .branch.right:before {
	right: auto;
	left: 0;
}

.flow-chart .branch a {
	width: auto;
	max-width: none;
	padding: .3em .5em;
	white-space: nowrap;
}

@media only screen and (max-width: 399px) {
    .flow-chart-wrap {
        text-align: left;
    }
    .flow-chart {
        display: block;
    }

    /*** 第二層 ***/
    .flow-chart ul ul {
		padding-top: .5em;
        padding-top: 2.5em;	/*** 用於有秘書室 ***/
		padding-left: 1em;
    }

    .flow-chart ul ul:before {
        left: 2em;
    }

    /*** 每一層的單位 ***/
    .flow-chart li {
		display: block;
        float: none; 
        text-align: left;
		padding-left: 0;
		padding-right: 0;
    }

    .flow-chart li a {
        display: block;
        max-width: inherit;  
        font-size: 1em;
    }

    .flow-chart li:after {
		display: none;
    }

 	.flow-chart li:before,
	.flow-chart li:last-child:before {
        top: 0; 
        left: 2em;
        border: none;
		border-left: 1px solid rgba(127,127,127,.7);
	}

    /*** 秘書室 (左) ***/
    .flow-chart .branch {
        left: 0;
        right: 0;
        padding-left: 4em;
        padding-right: 0;
    }

    .flow-chart .branch:before {
        position: absolute; 
        content: '';
        top: 50%;
        left: 2em;
        width: 2em;		/*** width #1 ***/
        height: 1px;
        background: rgba(127,127,127,.7);		/*** color #1 ***/
    }
	
	.flow-chart .branch:after {
		display: none;	
	}
}

@media only screen and (min-width: 400px) and (max-width: 599px) {

    /*** 每一層的單位 ***/
    .flow-chart li {
		padding-left: .5em;
		padding-right: .5em;
    }

    .flow-chart li a {
		font-size: 1em;
        max-width: 2em; 
    }
}

@media only screen and (min-width: 600px) and (max-width: 767px) {
    /*** 每一層的單位 ***/
    .flow-chart li {
		padding-left: .5em;
		padding-right: .5em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 949px) {
    /*** 每一層的單位 ***/
    .flow-chart li {
		padding-left: .5em;
		padding-right: .5em;
    }

    .flow-chart li a {
		font-size: 1em;
        max-width: 2.3em; 
    }
}

/**************************************
*
* 標準 10 欄式 tabs 整體設定 
* default_first.php
*
**************************************/
/** 鍵盤操作說明按鈕 ***/
.default_first_tabs .tabshelp {
	display: inline-block;
	float: right;
	border-style: solid;
	border-width: 1px;
	border-color: transparent;
	font-size: 70%;
	z-index: 1;
}

/*** tabs 標題說明 ***/
.tabs_desc {
	display: block;
	font-size: 85%;
	font-weight: 500;
	margin-bottom: .5em;
	opacity: .8;
}

/* 關閉 js 時的標題 **/
.no_js_title .title {
	display: inline-block;
	color: #175B96;	/* rgba(23,91,150,1) */
	margin-bottom: 1em;
}

@media only screen and (max-width: 767px ) {
	.default_first_tabs .tabshelp {
		float: none;
		margin-bottom: .5em;
	}
}

/**************************************
 Tabs 按鍵說明
 template_part/tabs_help.php
**************************************/
/* 每個段落 */
.modal_section {
	display: block;
}

.modal_section:not(:last-child) {
	margin-bottom: 1.5em;
}

/* 段落標題 */
.modal_section .title {
	display: inline-block;
	margin-bottom: .3em;
	padding-bottom: .2em;
	border-bottom: 1px solid rgba(127,127,127,.4);
	color: #006100; /* rgba(0,97,0,1) */
}

/* 列表區 */
.modal_section ul li {
	margin-bottom: .5em;
}

/* 按鍵 */
.keycode {
	display: inline-block;
	padding: .2em 0;
	text-align: center;
	min-width: 3.2em;
	background: #595959;
	color: #fff;
	font-size: 80%;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
}


/**************************************
 標準 10 欄式 - Accordion
**************************************/

/**************************************
 Accordion 按鍵說明
 (template_part/accordion_help.php
**************************************/
/** 鍵盤操作說明按鈕 ***/
.accordion_btn {
	display: inline-block;
	float: right;
	border-style: solid;
	border-width: 1px;
	border-color: transparent;
}

@media only screen and (max-width: 767px ) {
	.accordion_btn {
		float: none;
		margin-bottom: .5em;
	}
}

/*** 按鍵說明列表區 ***/
.accordion_modal_list li {
	margin-bottom: .5em;
}
.accordion_modal_list li:last-child {
	margin-bottom: 0;
}


/**************************************
 標準 10 欄式 - 區塊顯示 - 整體設定
 
<div class="page_section">
	<h3 class="page_section_title">
		<span class="title">...</span>
	</h3>
	<div class="page_section_content">

	</div>
</div>	
**************************************/
.page_section {
	margin-bottom: 5%;

	border-radius: 4px 4px 0 0;
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	-o-border-radius: 4px 4px 0 0;
	-ms-border-radius: 4px 4px 0 0;
}

.page_section:last-child,
.site-content .page_section:last-child,
.category_list .page_section:last-child {
	margin-bottom: 0;
}

.page_section .page_section_title {
	margin: 0;
	padding: .6em 1em .5em;
	background: rgba(255,222,189,1);	/* #FFDEBD */
	color: rgba(133,42,0,1);	/* #852A00 */

	border-radius: 4px 4px 0 0;
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	-o-border-radius: 4px 4px 0 0;
	-ms-border-radius: 4px 4px 0 0;
}

.page_section .page_section_title .title {
	display: inline-block;
}

.page_section .page_section_title .title:before {
	font-family: 'FontAwesome';
	content: '\f013';
	padding-right: 8px;
	opacity: .8;

	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f013";	/* <i class="fas fa-cog"></i> */
}

.page_section .page_section_content {
	padding: 1em;
	border-style: solid;
	border-width: 0 1px 1px 1px;
	border-color: rgba(255,222,189,.5);	/* #FFDEBD */
	background: rgba(255,222,189,.1);	/* #FFDEBD */
	
	border-radius: 0 0 4px 4px;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	-o-border-radius: 0 0 4px 4px;
	-ms-border-radius: 0 0 4px 4px;
}

/**************************************
 ul 表格化
 <ul class="table_list w6">
	<li>
		<span class="td"></span><span class="td"></span>
	</li>
 </ul>
**************************************/
.table_list {
	display: table;
	width: 100%;
	border-collapse: collapse;
	vertical-align: middle;
}	

.table_list > li {
	display: table-row;
	vertical-align: middle;
}

.table_list > li:nth-child(2n+1) {
	background: rgba(127,127,127,0);
}

.table_list .td {
	display: table-cell;
	padding: .6em .5em;
	vertical-align: middle;
	border-style: dashed;
	border-width: 1px 0 0 0;
	border-color: rgba(127,127,127,.7);
}

.table_list .td:first-child {
	width: 8em;
	font-weight: 500;
}

.table_list.w4 > li .td:first-child { width: 4em; }
.table_list.w5 > li .td:first-child { width: 5em; }
.table_list.w6 > li .td:first-child { width: 6em; }
.table_list.w7 > li .td:first-child { width: 7em; }
.table_list.w9 > li .td:first-child { width: 9em; }
.table_list.w10 > li .td:first-child { width: 10em; }
.table_list.w12 > li .td:first-child { width: 12em; }
.table_list.w13 > li .td:first-child { width: 13em; }
.table_list.w14 > li .td:first-child { width: 14em; }
.table_list.w15 > li .td:first-child { width: 15em; }
.table_list.w16 > li .td:first-child { width: 16em; }
.table_list.w17 > li .td:first-child { width: 17em; }
.table_list.w18 > li .td:first-child { width: 18em; }
.table_list.w19 > li .td:first-child { width: 19em; }

@media only screen and (max-width: 599px) {
	.table_list .td:first-child {
		width: auto;
	}
}

.table_list.alu .td:first-child {
	color: #006100;
	font-weight: 600;
}

/**************************************
 無障礙網頁專用 ( WCAG 2.0 )
**************************************/
/*** 跳至主顯示區 ***/
.screen-reader-text {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal;
}

.screen-reader-text:focus {
	display: block;
	z-index: 100000; /* Above WP toolbar. */
	width: auto;
	height: auto;
	clip: auto; 
	line-height: normal;
	color: #21759b;
	font-weight: 700;
	top: 5px;
	left: 5px;
	padding: 1em 1.5em .9em;

	background-color: #f1f1f1;

	border-color: transparent;
	text-decoration: none;

	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
	border-radius: 3px;

	-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    -ms-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    -o-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
}

/*** 導盲磚按鈕 ***/
a.sr-text {
	position: absolute;
	display: inline-block;
	line-height: 1.5;
	overflow: hidden;
	z-index: 2;
	font-weight: 700;
	padding: 0 8px 2px;
	text-decoration: none;

	border-style: solid;
	border-width: 1px;
	border-color: #006100;
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
	border-radius: 3px;

    -webkit-transition: none;
       -moz-transition: none;
		-ms-transition: none;
		 -o-transition: none;
    		transition: none;

	background: #006100;
	color: #FFF;

	top: -99999px;
	left: -99999px;
}
/*** 頂部導盲磚 ***/
#sr-top:focus {
	top: 0;
	left: 10%;
}

/*** 主功能表導盲磚 ***/
#sr-menu:focus {
	top: 50%;
	transform: translateY(-50%);
	left: -.2em;
}

/*** 主顯示區 ***/
/*** 單欄式 ***/
.c1 #sr-main:focus {
	top: 0;
	left: 50%;
}

/*** 多欄式 ***/
.c2L #sr-main:focus,
.c2R #sr-main:focus,
.c3 #sr-main:focus {
	top: 0;
	left: .8em;	/* 同 .layout-padding 設定 */
}

/*** 首頁主顯示區 ***/
/*** 單欄式 ***/
body.home .c1 #sr-main:focus {
	top: 0;
	left: 50%;
}

/*** 多欄式 ***/
body.home .c2L #sr-main:focus,
body.home .c2R #sr-main:focus,
body.home .c3 #sr-main:focus {
	top: 0;
	left: .8em;	/* 同 .layout-padding 設定 */
}

/*** 左、右側邊欄導盲磚 ***/
#sr-left, #sr-right  {}
#sr-left:focus, 
#sr-right:focus  {
	top: 0;
	left: .8em;	/* 同 .layout-padding 設定 */
}

/*** 底部導盲磚 ***/
#sr-footer:focus {
	top: 0;
	left: 50%;	/* 同 .layout-padding 設定 */
}

/**************************************
 改變字體大小
**************************************/
#sr-change-font {
	display: inline-block;
	margin: 0 0 0 2em;
	font-family: inherit;
}

/*** 三個按鈕 ***/
#sr-change-font .btn-group .btn {
/*
	background: rgba(0,97,0,1);	
	color: #FFF;
	border: 1px solid rgba(0,97,0,1);
*/
}

.rvfs-1 { font-size: 85%; }
.rvfs-2 { font-size: 90%; }
.rvfs-3 { font-size: 95%; }
.rvfs-4 { font-size: 100%; }
.rvfs-5 { font-size: 108%; }
.rvfs-6 { font-size: 116%; }
.rvfs-7 { font-size: 124%; }


.rvfs-5 .sidebar_title span.title { font-size: 1.2rem;}
.rvfs-6 .sidebar_title span.title { font-size: 1.4rem;}
.rvfs-7 .sidebar_title span.title { font-size: 1.6rem; }


/**************************************
*
* Short Code
*
**************************************/
/***********************
 整體設定 主標題 連結顏色  
***********************/
a.file_link,
a.url_link { 
	font-weight: 500; 
	color: #555;
	color: #134b7d;
	font-size: 100%;
	display: inline;
}

a.file_link:hover{ 
	color: #AC1616;
}

a.file_link.black, a.url_link.black, .img_zoom .img_title.black { color: #666; }
a.file_link.black:hover, a.url_link.black:hover, .img_zoom .img_title.black:hover { color: #AC1616; }

a.file_link.blue, a.url_link.blue, .img_zoom .img_title.blue { color: #134b7d; }
a.file_link.blue:hover, a.url_link.blue:hover, .img_zoom .img_title.blue:hover { color: #134777; }

a.file_link.red, a.url_link.red, .img_zoom .img_title.red { color: #AC1616; }
a.file_link.red:hover, a.url_link.red:hover, .img_zoom .img_title.red:hover { color: #B01717; }

a.file_link.green, a.url_link.green, .img_zoom .img_title.green { color: #006100; }
a.file_link.green:hover, a.url_link.green:hover, .img_zoom .img_title.green:hover { color: #21640B; }

a.file_link.yellow, a.url_link.yellow, .img_zoom .img_title.yellow { color: #695611; }
a.file_link.yellow:hover, a.url_link.yellow:hover, .img_zoom .img_title.yellow:hover { color: #5D4C0E; }

/**************************************
 short code [file ...] 檔案連結，popup 視窗

 <a href="#ID" class="file_link ID_open 顏色">
 <div id="ID" class="my_popup well">
	<div class="modal_header">...</div>
	<div class="modal_content">
		<ul class="modal_list">...</ul>
	</div>
	<div class="modal_footer">...</div>
 </div>
**************************************/

/**************
 popup 視窗 
***************/
.well {
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    display:none;
    margin:1em;
    transform: scale(0.5);
	min-width: 40%; 
	max-width: 100%; 
}

.popup_visible .well {
  transform: scale(1);
}

.modal_header {
	text-align: center;
	padding-bottom: .5em;
}

/*** 主標題 ***/
.file_link em {
	color: #333;
}
/*** popup 視窗 內容區 ***/
.modal_content {
	padding: 1em 0;
	border-style: dashed;
	border-width: 1px 0;
	border-color: rgba(127,127,127,.5);
	min-height: 10em;
}

.modal_content .modal_list {
	list-style: none;
	display: table;
	width: 100%;
	border-collapse: collapse;
}
.modal_content .modal_list li {
	display: table-row;
}

.modal_content .modal_list li span {
	display: table-cell;
	vertical-align: middle;
	padding: .3em 1em;
	border-style: dashed;
	border-width: 0 0 1px 0;
	border-color: rgba(127,127,127,.3);
}

.modal_content .modal_list .modal_size em {
	padding: 0;
	margin: 0;
}

/*** 標題列 ***/
.modal_content .modal_list li.thead {
	background: rgba(127,127,127,.1);
}

.modal_content .modal_list li.thead span {
	color: #134B7C;
	font-weight: 600;
	text-align: center;
	border-width: 1px 0 0 0 ;
	border-style: solid;
	border-color: rgba(127,127,127,.2);
}

/*** 最後一列 ***/
.modal_content .modal_list li:last-child span {
	border-width: 0;
}

/*** 檔案格式 ***/
.modal_content .modal_list li .modal_ext {
	text-align: center;
}
.modal_content .modal_list li .modal_ext img {
	width: 20px;
}

/*** 檔案下載 ***/
.modal_content .modal_list li span.modal_download {
	text-align: right;
}

.modal_footer {
	padding-top: 1em;
}

/*** icon 圖檔 ***/
.modal_icon img {
	width: 16px;
	display: inline-block;
	margin-right: .5em; 
}

@media only screen and (max-width: 767px) {
	.well {
		width: 85%;
	}

    .modal_content .modal_list,
    .modal_content .modal_list li,
    .modal_content .modal_list li span {
		display: block;
		width: 100%;
    }

	/*** 標題列 ***/
    .modal_content .modal_list li.thead {
		display: none;
	} 
    .modal_content .modal_list li {
		border: 1px solid rgba(0,0,0,.3);
		margin-bottom: .5em
	}
    .modal_content .modal_list li span,
	.modal_content .modal_list li .modal_ext,
	.modal_content .modal_list li span.modal_download {
		text-align: left;
		padding: .3em .5em;
	}
    .modal_content .modal_list li span:before {
        content: attr(data-title)'：';
        color: #009933;
        font-weight: 600;
	}
}


/**************************************
 short code [link ...] 網址連結
 <a href="..." class="url_link 顏色" title="...">
 </a>
**************************************/
a.url_link {
	display: inline-block;
	padding: .15em 0;	/**** 同 sidebar_block 設定 ***/
}

/*** 圖檔連結 ***/
a.url_link img {
	max-width: 100%;
	height: auto;
	display: inline-block;
	width: 100%;
}

/**************
 列表 
**************/
ul.file_list {
	list-style: none;
	margin-left: 0;
}

/*** noscript 的列表 ***/
ul.file_list.icon li .nojs_modal_list li {
	padding-left: 1em;
}

ul.file_list.icon li .nojs_modal_list li a:before  {
	content: '';
}

ul.file_list:before,
ul.file_list.c2:before,
ul.file_list.c3:before,
ul.file_list.c4:before,
ul.file_list.inline:before,
ul.file_list:after,
ul.file_list.c2:after,
ul.file_list.c3:after,
ul.file_list.c4:after,
ul.file_list.inline:after {
	display: table;
	content: " ";
}

ul.file_list:after,
ul.file_list.c2:after,
ul.file_list.c3:after,
ul.file_list.c4:after,
ul.file_list.inline:after {
  clear: both;
}

ul.file_list li {
	list-style: none;
	padding-top: .1em;
	padding-bottom: .1em;
}

ul.file_list.margin li {
	margin-bottom: .5em;
}

/*** 寬度設定 ***/
ul.file_list.c2 li,
ul.file_list.c3 li,
ul.file_list.c4 li {
	padding-right: 1em;
/*	margin-bottom: .5em; */
}

ul.file_list.c2 li {
	width: 50%;
	float: left;
}

ul.file_list.c3 li {
	width: 33.333%;
	float: left;
}

ul.file_list.c4 li {
	width: 25%;
	float: left;
}

ul.file_list.inline li {
	display: inline-block;
}

ul.file_list.inline.mr05 li { margin-right: .5em; }
ul.file_list.inline.mr1 li { margin-right: 1em; }
ul.file_list.inline.mr15 li { margin-right: 1.5em; }
ul.file_list.inline.mr2 li { margin-right: 2em; }
ul.file_list.inline.mr25 li { margin-right: 2.5em; }
ul.file_list.inline.mr3 li { margin-right: 3em; }
ul.file_list.inline.mr35 li { margin-right: 3.5em; }
ul.file_list.inline.mr4 li { margin-right: 4em; }
ul.file_list.inline.mr45 li { margin-right: 4.5em; }
ul.file_list.inline.mr5 li { margin-right: 5em; }

/*** 前置 icon ***/
ul.file_list li a:before {
	position: relative;
	content: '';
}

/*** icon 預設 ***/
ul.file_list.icon li a:before {
	top: .15em;
	content: url(images/icon/file_list_icon_default.png);
	margin-right: .5em;
}

/*** icon1 紅色方框 ***/
ul.file_list.icon1 li a:before {
	top: .15em;
	content: url(images/icon/file_list_icon_01.png);
	margin-right: .3em;
}

/*** icon2 藍色右箭頭 ***/
ul.file_list.icon2 li a:before {
	top: .15em;
	content: url(images/icon/file_list_icon_02.png);
	margin-right: .3em;
/*	opacity: .8; */
}

/*** icon3/dot 黑點 ***/
ul.file_list.icon3 li a:before,
ul.file_list.dot li a:before {
	top: .15em;
	content: url(images/icon/file_list_icon_03.png);
	margin-right: .3em;
}

/*** icon4 chrome icon ***/
ul.file_list.icon4 li a:before {
	top: .15em;
	content: url(images/icon/file_list_icon_04.png);
	margin-right: .5em;
}

@media only screen and (max-width: 479px) {
	ul.file_list.c2 li,
	ul.file_list.c3 li,
	ul.file_list.c4 li {
		display: inline-block;
		width: 100%;
		float: none;
		padding-right: 0;
	}
}

@media only screen and (min-width: 480px) and (max-width: 599px) {
	/*** 每排 2 個 ***/
	ul.file_list.c3 li,
	ul.file_list.c4 li {
		width: 50%;
	}
}

@media only screen and (min-width: 600px) and (max-width: 767px) {
	/*** 每排 3 個 ***/
	ul.file_list.c4 li {
		width: 33.333%;
	}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	/*** 每排 2 個 ***/
	ul.file_list.c3 li,
	ul.file_list.c4 li {
		width: 50%;
	}
}

/**************************************
 short code [image ...] 點擊放大圖檔
 
 <div class="img_zoom">
    <a href="..." data-fancybox="group" data-caption="1999市民熱線" title="點擊放大">
        <div class="img_box">
        	<img class="img-thumbnail" src="..." alt="1999市民熱線">
            <div class="title">1999市民熱線</div>
        </div>
    </a>
 </div>
**************************************/
.image_zoom_list {}

.img_zoom {
	margin-bottom: 1em;
}

/*** 一排一個 ***/
.img_zoom.single {
	display: inline-block;
	padding-right: .5em;
	padding-bottom: .2em;
	margin-bottom: 0; 
}

.img_zoom img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}

/*** 圖檔 + 標題 box ***/
.img_zoom .img_box {
	display: inline-block;
	text-align: center;

	border-style: solid;
	border-width: 2px;
	border-color: transparent;
}

/*** 標題 ***/
.img_zoom .img_title {
	padding: .3em 0;
	line-height: 1.4;
}

/******************
 新的寫法
 <a class="img_zoom eqh_item" href="..." data-fancybox="group-xxx" data-caption="標題/替代文字" title="點擊放大">
	<div class="img_box">
		<img class="img-thumbnail" src="..." alt="...">
		<div class="img_title" align="center">測試圖檔一</div>
	</div>
 </a>	
*******************/
.img_zoom .img_box img {
/*	
height: 10em; 
*/
    position: relative;
    width: 100%;
	height: auto;
    max-height: 100%;

    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

/**************************************
 short code [image_acc ...] 點擊放大圖檔 + 圖檔長文字說明

<div class="wcag_img">
    <a href="#img504" class="img504_open long_desc_link">點擊查看圖片說明</a>
    <div id="img504" class="my_popup well">
        <div class="modal_header">
            <h3 class="modal_title">網站佈局參數設定</h3></div>
        <div class="modal_content">
            <h3>內容說明放這</h3></div>
        <div class="modal_footer">
            <button class="cus_btn red img504_close">關閉視窗</button>
        </div>
    </div>
    <a class="modal_link" href="..." data-fancybox data-caption="網站佈局參數設定" title="點擊放大">
        <div class="img_box">
            <img class="img-responsive" src="..." alt="後台模板設定之網站佈局螢幕截圖" />
        </div>
    </a>
    <div class="title_box">網站佈局參數設定</div>
</div>
 
**************************************/
.wcag_img {
	position: relative;
	display: inline-block;
	margin-bottom: 1em;
}

.wcag_img a {
	display: inline-block;
}

.wcag_img .modal_link {
	display: inline-block;
}

.wcag_img .fancybox_link {}

.wcag_img .img_box img {}

/*** 標題列 ***/
.wcag_img .img_title_box {
	display: block;
	text-align: center;
	padding: .5em 0;
}

/*** 標題 ***/
.wcag_img .img_title_box .title {
	display: inline-block;
}


/*** 圖片說明按鈕 ***/
.wcag_img .img_title_box .show_imgdesc_btn {
	display: inline-block;
	background: none;
	border: none;
	font-size: 80%;
	font-weight: 600;
	color: #175B96;
	padding: .1em .3em;
	margin-left: 1em;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
}

.wcag_img .img_title_box .show_imgdesc_btn.active {
	color: #AC1616;	/* rgba(172,22,22,1); */
}

.wcag_img .img_title_box .show_imgdesc_btn:hover {
	color: #382400;
	border-color: rgba(255,165,0,1);		/* #FFA500 */
	background-color: rgba(255,165,0,1);	/* #FFA500 */
}

/*** 長說明 ***/
.wcag_img .img_long_desc {
	margin-top: .5em;
	padding: 1em .8em;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(105,255,55,1);	/* #69FF37 */
	border-radius: 4px;
	color: rgba(23,92,0,1);	 /* #175C00 */
	background-color: rgba(207,255,191,1);	/* #CFFFBF */
}

/*** 長說明 : 標題 ***/
.wcag_img .img_long_desc .title_box {
	text-align: center;
	color: #000;
	border-bottom: 1px dashed rgba(127,127,127,1);
	padding-bottom: .2em;
	margin-bottom: .5em;
}


/**************************************
*
* 首頁
*
**************************************/

/*********************
 LAYOUT
**********************/

/*** 首頁 body 背景 ***/
body.home {}

body:not(.home) {}

/********************************************
 首頁 - 單欄式主顯示區
 取消上、下padding，改由 home_section_wrap 設定 
********************************************/
.home .c1 .site-box .site-content {
	padding-top: 0;
	padding-bottom: 0;
}

/*** 單欄式，只有一個區塊，不需要左、右 padding ***/
.home .c1 .layout-padding {
	padding-left: 0;
	padding-right: 0;
}

/*** 單欄式 Header .layout-padding 必需保留 ***/
.home .c1 .site-header .layout-padding,
.home .c1 .site-footer .layout-padding {
	padding-left: .8em;
	padding-right: .8em;
}

/********************************************
 首頁 - 每個單元區塊
********************************************/
.home_section_wrap {
	position: relative;
	margin-bottom: 3em;
	padding: 0 .5em;
}

/********************************************
 首頁 - 每個單元區塊 (單欄式)
********************************************/
/*** 單欄式置頂區塊 ***/
.c1 .home_section_wrap,
.home_section_wrap.home_c1 {
	padding: 2em .8em;	/*** 左、右 padding 同 .layout-padding 設定 ***/
	margin: 0;
	border-style: solid;
	border-width: 0 0 8px 0;
	border-color: rgba(127,127,127,.2);
	background-color: #FFF; 
}

.c1 .home_section_wrap:last-child,
.home_section_wrap.home_c1:last-child {
	border-width: 0;
}

/*** 多欄式置頂區塊 ***/
.c2L .home_section_wrap.home_c1,
.c2R .home_section_wrap.home_c1,
.c3 .home_section_wrap.home_c1 {
	padding-left: 0;
	padding-right: 0;
}

@media only screen and (max-width: 767px ) {
	.home_section_wrap,
	.c1 .home_section_wrap,
	.home_section_wrap.home_c1,
	.c2L .home_section_wrap.home_c1,
	.c2R .home_section_wrap.home_c1,
	.c3 .home_section_wrap.home_c1 {
		padding: 0;
		margin-top: .5em;
		margin-bottom: 1em;
		border-width: 0;
	}
}

/**************************************
 首頁區塊標題
<div class="home_section_header">
	<h3><span class="title">...</span>
		<a class="more" href="..."></a> 
	</h3>
</div>
**************************************/
.home_section_header {
	position: relative;
	margin-bottom: 2em;
}

.home_section_header:before {
	position: absolute;
	content: url(images/icon/section_icon_11.png);
}

.home_section_header .home_section_title {
	margin-left: 1.8em; 	/* for 前置 ICON */ 
	border-style: solid;
	border-width: 0 0 1px 0;
	border-color: rgba(21, 100, 55, 0.3);
}

.home_section_header .title {
    display: inline-block;
	border-style: solid;
	border-width: 0 0 4px 0;
    padding-bottom: 3px;
    margin-bottom: -4px;

	color: rgba(21, 100, 55, 1);		/* #156437; */
	border-color: rgba(21, 100, 55, 1);	/* #156437; */
}


/**************************************
 首頁區塊標題 - 各別設定
**************************************/
/*** 校園公告 ***/
.home_news .home_section_header:before {
	content: url(images/icon/section_icon_10.png);
}

/***  影音專區 ***/
.home_video .home_section_header:before {
	content: url(images/icon/section_icon_08.png);
}

/*** 校園花絮 ***/
.home_gallery .home_section_header:before {
	content: url(images/icon/section_icon_06.png);
}

@media only screen and (max-width: 767px) {
	.home_section_header {
		background: rgba(0,93,133, 1);
		color: #FFF;
		border: none;
		margin: 0 0 .5em 0;
		padding: .4em 0;
		text-align: center;
	}

	.home_section_header:before,
	.home_news .home_section_header:before,
	.home_student .home_section_header:before,
	.home_gallery .home_section_header:before,
	.home_video .home_section_header:before  {
		content: '';
	}

    .home_section_header h3 {
		margin: 0;
		padding: 0;
	}

	.home_section_header .home_section_title {
		margin-left: 0; 	/* 取消 for 前置 ICON */ 
		border-bottom: none;
	}

    .home_section_header .title {
		font-size: 90%;
		color: #FFF;
		border: none;
		margin: 0;
		padding: 0;
	}
}

/**************************************
 首頁 slider
**************************************/
/*** Slider 區塊不需 padding 與 border-bottom ***/
.home_section_wrap.slider {
	padding: 0;
	margin: 0;
	border-width: 0;
}

/*** for Meta Slider **/
.metaslider .rslides_tabs {
    margin: 0 !important ;
}

.metaslider, .metaslider-flex, .ml-slider {
	max-width: 100%;
	overflow: hidden;
}

/**************************************
 首頁 '焦點新聞跑馬燈'
 template_home/home_glory.php
**************************************/
/*** 右側資料顯示區 ***/
.home_focus_box .home_focus_content ul li {
    border-width: 0 0 1px 0;
    border-style: dashed; 
    border-color: rgba(127,127,127,.4);
    font-size: 1.1rem;
}

.home_focus_box .home_focus_content ul li:hover {
	outline: 2px solid #FF9933 !important;
	outline-offset: -2px !important;
}

.home_focus_box .home_focus_content ul li a {
	display: block;
	overflow-x: hidden;
	white-space: nowrap;
	width: 100% !important;
}

/*** 左邊標題區 ***/
.home_focus_left {
	position: relative;
    width: 8em;
	height: 8.5em;
    display: inline-block;
	float: left;
    margin-right: 1em;
	margin-top: .1em;
}

/*** 標題 ***/
.home_focus_left .title {
	position: absolute;
	top:0;
	left: 0;
    text-align: center;
	height: 6.5em;
	width: 8em;
    background-color: rgba(23,91,150,1);    /* #175B96 */
/*    background-color: rgba(106,1,2,1);  /* #6A0102 */
    background-image: url(images/bg/glory_bg3.png);
	background-attachment:scroll
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 4px 4px 0 0;
}

.home_focus_left .title h2 {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
    font-size: 2rem;
    color: #FFC;
	white-space: nowrap;
	overflow: hidden;
}

/*** 按鈕列 ***/
.home_focus_left .action {
	position: absolute;
	bottom: 0;
	left: 0;
}

.home_focus_left .action ul {
    display: table;
    table-layout: fixed;
    width: 100%;
    vertical-align: middle;
    border-collapse: collapse;
}

.home_focus_left .action ul li {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 110%;
	background: rgba(0,0,0,.05);
	border-style: solid;
	border-width: 1px;
	border-color: rgba(127,127,127,.3);
}

.home_focus_left .action ul li:hover {
	background: rgba(127,127,127,.3);
}

.home_focus_left .action ul li button {
	border: none;
	background: none;
	width: 100%;
    padding: 0;
	line-height: 1.8;
	margin: 0;
	text-align: center;
	display: block;
	color: #444;
}

@media only screen and (max-width: 767px) {
	.home_focus_box {
		margin-bottom: 1em;
	}

	.home_focus_box .home_focus_left,
	.home_focus_left .title,
	.home_focus_left .action,
	.home_focus_box .home_focus_content  {
		position: relative;
		display: block;
		width: 100%;
		height: auto;
		margin: 0 0 1em 0;
		padding: 0;
		float: none;
	}

	/*** 標題區 ***/
	.home_focus_box .title h2 {
		display: none;
	}

	.home_focus_left .title {
		font-size: 1.4em;
		background-image: none;
		padding: 0;
		color: #FFF;
	}
	
	.home_focus_box .title:before {
		content: attr(data-title);
		display: block;
		padding: 0;
	}
	
	/*** 按鈕列 ***/
	.home_focus_left .action {
		margin: 0;
	}


	.home_focus_left .action ul {
		display: block;
		margin-top: 1em;
		text-align: right;
	}
	
	.home_focus_left .action ul li {
		display: inline-block;
		padding: 0 .5em;
	}

	/*** 資料區 ***/
	.home_focus_box .home_focus_content {
		margin: 0;
	}
}

@media only screen and (max-width: 1023px) {
	.home_focus_box .home_focus_content ul li {
		font-size: 1rem;
	}
}

/**************************************
 首頁 '訪客計數器' 
 template_visitor_count.php 
**************************************/
.home_related .right_half {
	border: 1px solid rgba(171,211,254,1);
	border-radius: 4px;
	padding: 0;
}

/*** 標題列 ***/
.home_related .right_half .title {
	font-size: 110%;
	text-align: center;
	padding-top: .2em;
	padding-bottom: .1em;
	border-bottom: 1px solid rgba(171,211,254,1);
	background: rgba(171,211,254,1);
	color: rgba(9,54,90,1);
}

/*** 計數器內容 ***/
ul.visitor_counter {
	list-style: none;
	padding-top: .3em;
	padding-bottom: .3em;
}

ul.visitor_counter li {
	padding-left: .5em;
	padding-right: .5em;
	font-size: 95%;
	white-space: nowrap;
}

ul.visitor_counter li span {
	display: inline-block;
}

/*** 標題 ***/
ul.visitor_counter li .vc_title {}

/*** 人數 ***/
ul.visitor_counter li .vc_count {
	color: #AC1616;
}

/**************************************
 slick slider 的控制功能表
**************************************/
.slick-control {
	display: block;
	margin-bottom: .5em;
	padding-right: .5em;	/*** 同每個 Item 的 padding-right */
	text-align: right;
	margin-bottom: 1em;

}

.slick-control a,
.slick-control button {
	display: inline-block;
	padding: .2em .5em;
	margin: 0;
	cursor: pointer;
	color: #09365A;
	background-color: #ABD3FE;

	broder-style: solid;
	border-color: #ABD3FE;
	border-width: 1px;

	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
}

.slick-control a.more_link {
	box-shadow: 1px 1px 0px 0px rgba(0,0,0,.4);
}

.slick-control a:hover,
.slick-control button:hover {
	color: #8F0000;
	border-color: #FFB5B5;
	background-color: #FFD6D6;
}

#photo-play.active {
	color: #8F0000;
	border-color: #FFB5B5;
	background-color: #FFD6D6;
}

#photo-pause.active {
	color: #8F0000;
	border-color: #FFB5B5;
	background-color: #FFD6D6;
}

.slick-control i {
	padding-left: .313em;	/* 5px */
	padding-right: .313em;
}

@media only screen and (max-width: 767px) {
    .home_photo .slick-control {
		text-align: center;
    }
}

/**************************************
 首頁 12 專區列表 + Google 行事曆
 template_home/home_intro.php
**************************************/
/*** google 行事曆高度 ***/
.home_intro_wrap .iframe_box {
/*  padding-bottom: 103%;	/*** 每排 3 個時的高度 ***/
/*	padding-bottom: 110%;	/*** 每排 4 個，共 4 排時的高度 ***/
    padding-bottom: 110%;	/*** 每排 4 個，共 3 排時的高度 ***/
    height:520px;
}

/*** 12 專區 ***/
.flex_intro ul.quick_link_box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.quick_link_box li {
	flex: 0 0 24.5%;
    position: relative;
    color: #FFF;
    text-align: center;
    vertical-align: middle; 
    height: 5.9em;
	margin-bottom: 2%;

	border-radius: 3px;
}

/*** 每排 3 個 (33.33%) ***/
.quick_link_box.items3 li,
.quick_link_box.items3 > i {
	flex: 0 0 32.8%;
	margin-bottom: .52%;
}

/*** 每排 4 個 (25%) ***/
.quick_link_box.items4 li,
.quick_link_box.items4 > i {
	flex: 0 0 24.5%;
}

/*** 每排 5 個 (20%) ***/
.quick_link_box.items5 li,
.quick_link_box.items5 > i {
	flex: 0 0 19.5%;
}

/*** 每排 6 個 (16.666%) ***/
.quick_link_box.items6 li,
.quick_link_box.items6 > i {
	flex: 0 0 16%;
	margin-bottom: .666%;
}

/*** 每排 7 個 (14.2857%) ***/
.quick_link_box.items7 li,
.quick_link_box.items7 > i {
	flex: 0 0 13.7857%;
}

/*** 每排 8 個 (12.5%) ***/
.quick_link_box.items8 li,
.quick_link_box.items8 > i {
	flex: 0 0 12%;
}

.quick_link_box li a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	line-height: 1.2;
	color: #156437;
	font-weight: 600;
}

.quick_link_box li i {
	position: absolute;
	top: 0.4em;
	left: 50%;
	font-size: 250%;
	color: #aaa;
	transform: translate(-50%, 0) scale(1);
	transition: all .5s ease-in-out;
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-ms-transition: all .3s linear;
	-o-transition: all .3s linear;
	color: rgba(0, 82, 46, 1); /* #00522E; */
	color: #EF6C2E;
}

.quick_link_box li span.title {
    position: absolute;
    bottom: .3em;
    padding: .3em;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 1.2rem;
}

.quick_link_box li.small_font span.title {
    font-size: 1.15rem;
}

.quick_link_box li.small_font span.title {}

.quick_link_box li:hover a,
.quick_link_box li a:hover {
	box-shadow: rgba(73, 73, 75, 0.2) 0px 0px 20px 0px;
/*
	color: #093;
	font-weight: 600;
*/
	color: #AC1616;
}

.quick_link_box li:hover i {
	transform: translate(-50%, 0) scale(1.25);
	color: #FF0000;
	color: rgba(0, 82, 46, 1); /* #00522E; */
	color: #AC1616;
}

/*** 每排 1 個 ***/
@media only screen and (max-width: 479px) {
	.quick_link_box li,
	.quick_link_box.items3 li,
	.quick_link_box.items4 li,
	.quick_link_box.items5 li,
	.quick_link_box.items6 li,
	.quick_link_box.items7 li,
	.quick_link_box.items8 li {
		flex: 0 0 100%;
		border: 1px solid rgba(127,127,127,.5);
	}

	.quick_link_box > i {
		display: none;
	}
}

/*** 每排 2 個 ***/
@media only screen and (min-width: 480px) and (max-width:767px) {
	.quick_link_box li,
	.quick_link_box.items3 li,
	.quick_link_box.items4 li,
	.quick_link_box.items5 li,
	.quick_link_box.items6 li,
	.quick_link_box.items7 li,
	.quick_link_box.items8 li {
		flex: 0 0 48.5%;
		margin-bottom: 3%;
		border: 1px solid rgba(127,127,127,.5);
	}

	.quick_link_box > i {
		display: none;
	}
}

/*** 每排 3 個 ***/
@media only screen and (min-width: 768px) and (max-width:1023px) {
	.quick_link_box li,
	.quick_link_box.items3 li,
	.quick_link_box.items4 li,
	.quick_link_box.items5 li,
	.quick_link_box.items6 li,
	.quick_link_box.items7 li,
	.quick_link_box.items8 li {
		flex: 0 0 32.8%;
		margin-bottom: .7%;
		border: 1px solid rgba(127,127,127,.5);
	}

	.quick_link_box > i {
		display: none;
	}
}


/**************************************
 首頁 '活動花絮' ( Slick slider )
 for Google drive 或 NAS photo-station
**************************************/
.home_section_wrap.home_photo {}

.home_photo .home_section_box {
	position: relative;
}

.slick_slider_wrapper {
	position: relative;
}

/*** 每個 item ***/
.slick_home_photo .photo_item {
	margin: 0;
	padding: .2em .5em;
	display: inline-block;
}
.slick_home_photo .photo_item:focus {
    outline: 3px solid #FF9933 !important;
    outline-offset: -3px !important;
}

.slick_home_photo .photo_item a {
	display: block;
}

/*** 標題區 ***/
.slick_home_photo .photo_item .text_box {
	display: block;
	text-align: center;
	padding: .2em 0;
	line-height: 1.4;
}

/*** 活動日期 ***/
.slick_home_photo .photo_item .text_box .date_box {
	font-size: 90%;	
	color: #AC1616; 
}

/*** 圖檔固定高度 ***/
.slick_home_photo .photo_item .img_box {
	overflow: hidden;
}

.slick_home_photo .photo_item .img_box img {
/*	height: 10em; */
    position: relative;
    width: 100%;
    height: 7.5em;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}

@media only screen and (max-width:480px) {
	/*** 每排 1 個 ***/
	.slick_home_photo .photo_item .img_box img {
		max-width: 480px;
		height: 14em;
	}
}

/**************************************
 首頁 公告列表
**************************************/
/*** 操作說明 ***/
.home_news .tabshelp {
	font-size: 90%;
	margin-top: .2em;
	float: right;
}

@media only screen and (max-width: 767px) {
	.home_news .tabshelp {
		float: none;
	}
}

.js-tabs {
	position: relative;
}

/*** 功能表 a ***/
.news-tabs__link {}
.news-tabs__link:hover {}

/*** 目前選項 ***/
[aria-selected="true"].news-tabs__link {}

/*** 更多公告按鈕 ***/
.home_news .action_box {
	text-align: right;
	padding: .2em 0;
	border-style: solid;
	border-width: 2px 0 0 0;
	border-color: rgba(0,85,204,.3);
}

/*** for 北一女 ***/
.home_news .action_box {
	border-color: rgba(14,129,95,.5);	/* 改成綠色 */
}

.home_news .action_box a {
	font-size: 85%;
}

/**************************************
 首頁 '校園影音' ( home_video.php )
**************************************/
.home_video .text_box {
	margin-top: .3em;
	text-align: center;
	line-height: 1.4;
}

.home_video .text_box .date_box {
	font-size: 90%;
	color: #AC1616;
}

.home_video .text_box .title_box {
	line-height: 1.2;
	overflow: hidden;
	height: 2.5em;
}

/**************************************
 首頁 '快速連結' ( home_quicklink.php )
**************************************/
.quicklink_wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

/*******************
 每個專題區
********************/
.quicklink_box {
	flex: 0 0 24%;
}

/*** 每個項目 ***/
.quicklink_item {
    overflow: hidden;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(127,127,127,.5);
    border-radius: 8px 8px 0 0;
}

/*******************
 專題標題區
********************/
.quicklink_item .quicklink_header {
	position: relative;
	vertical-align: middle;
	font-size: 1.5rem;
	padding: .5em;
}

/*** 標題 Icon ***/
.quicklink_item .quicklink_header:before {
	position: absolute;
	left: 1rem;
	top: .25em;
/*
	top: 50%;
	transform: translateY(-55%);
*/	
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f007";
	font-size: 1.7rem;
}

/*** 標題文字 ***/
.quicklink_item .quicklink_header .title {
	display: block;
	padding-left: 2.3em;	/*** 左邊放 icon font ***/
	vertical-align: middle;
	border-style: solid;
	border-width: 0 0 1px 0;
	border-color: rgba(127,127,127,.5);
}

/*******************
 內容區
********************/
.quicklink_item .quicklink_content {
	padding: 0 1em .5em;
}

/*******************
 列表區
********************/
.quicklink_content ul li {
	position: relative;
	padding-left: 1.2em;
}

/*** 列表區前置 icon ***/	
.quicklink_content ul li a:before {
	position: absolute;
	left: .3em;
	top: .15em;
	color: #F60;

	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: '\f0da';	/* <i class="fas fa-caret-right"></i> */
}

.quicklink_content ul li a {
	display: block;
}

.quicklink_content ul li:hover,
.quicklink_content ul li:focus {
	outline: 2px solid #FF9933 !important;
	outline-offset: -2px !important;
}

/*******************
 調整各個主題區
********************/
/*** 學生家長專區 ***/
.quicklink_box.quicklink_student .quicklink_header {
	/*** 綠色 ***/
	color: rgba(23,92,0,1);	/*#175C00 */
}
.quicklink_box.quicklink_student .quicklink_header .title {
	border-color: rgba(23,92,0,.3);
}
.quicklink_box.quicklink_student .quicklink_header:before {
	content: '\f5da';
	content: url(images/icon/student.png);
}
.quicklink_box.quicklink_student .quicklink_item {
	background: rgba(23,92,0,.05);
	border-color: rgba(23,92,0,.5);
}

/*** 家長專區 ***/
.quicklink_box.quicklink_family .quicklink_header {
	/*** 紅色 ***/
	color: rgba(153,0,0,1);	/* #900; */
}
.quicklink_box.quicklink_family .quicklink_header .title {
	border-color: rgba(153,0,0,.3);
}
.quicklink_box.quicklink_family .quicklink_header:before {
	content: '\f0c0';
	content: url(images/icon/parent.png);
}
.quicklink_box.quicklink_family .quicklink_item {
	background: rgba(238,94,96,.05);
	border-color: rgba(153,0,0,.5);
}

/*** 教師專區 ***/
.quicklink_box.quicklink_teacher .quicklink_header {
	color: rgba(111,76,1,1);	/* #6F4C01; */
}
.quicklink_box.quicklink_teacher .quicklink_header .title {
	border-color: rgba(111,76,1,.3);
}
.quicklink_box.quicklink_teacher .quicklink_header:before {
	content: '\f508';
	content: url(images/icon/teacher.png);
}
.quicklink_box.quicklink_teacher .quicklink_item {
	background: rgba(111,76,1,.07);
	border-color: rgba(111,76,1,.5);
}

/*** E 化服務 ***/
.quicklink_box.quicklink_eservice .quicklink_header {
	/*** 藍色 ***/
	color: rgba(23,91,150,1);	/* #175B96;  */
}
.quicklink_box.quicklink_eservice .quicklink_header .title {
	border-color: rgba(23,91,150,.3);
}
.quicklink_box.quicklink_eservice .quicklink_header:before {
	content: '\f5fc';
	content: url(images/icon/e-service.png);
}

/*** E 化服務 ***/
.quicklink_box.quicklink_eservice .quicklink_item {
	background: rgba(23,91,150,.05);
	border-color: rgba(23,91,150,.5);
}


@media only screen and (max-width:479px) {
	.quicklink_box {
		flex: 0 0 100%;
		margin-bottom: 1em;
	}
}

@media only screen and (min-width:480px) and (max-width: 991px) {
	.quicklink_box {
		flex: 0 0 49%;
		margin-bottom: 1em;
	}
}


/**************************************
 首頁 '相關連結' ( home_related.php )
**************************************/

/*** 相關連結列表 ***/
.home_related ul.link_related:before,
.home_related ul.link_related:after {
	display: table;
	content: " ";
}
.home_related ul.link_related:after {
	clear: both;
}

.home_related ul.link_related li {
	display: inline-block;
	width: 16.666%;
	float: left;
	margin-bottom: .1em;
	padding-right: 1%;
}

@media only screen and (max-width:359px) {
	.home_related ul.link_related li {
		width: 100%;
	}
}

@media only screen and (min-width:360px) and (max-width: 479px) {
	.home_related ul.link_related li {
		width: 50%;
	}

}

@media only screen and (min-width:480px) and (max-width: 767px) {
	.home_related ul.link_related li {
		width: 33.333%;
	}
}

@media only screen and (min-width:768px) and (max-width: 1023px) {
	.home_related ul.link_related li {
		width: 20%;
	}
}

@media only screen and (min-width:1024px) and (max-width: 1199px) {
	.home_related ul.link_related li {
		width: 16.666%;
	}
}

/**************************************
 tree view (另種寫法)
**************************************/
.tree_view, .tree_view ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1em;
	position: relative;   
	overflow:hidden;    
}

.tree_view li {
	margin: 0;
	padding: 0 0 0 1.5em;  /*** 橫線寬度 1em + 空白 .5em ***/
	position: relative; 
}
  
.tree_view li:before, .tree_view li:after {
	content: '';
	position: absolute;
	left: 0;
	opacity: .6;
}

/* li 前加橫線 */
.tree_view li:before {
	border-top: 1px dashed;
	top: .7em;		/*** (line-height 一半) - (.05em 線條高度) ***/
	width: 1em;		/*** 橫線寬度 1em ***/
	height: 0;
}

/* li 前加直線 */   
.tree_view li:after {
	border-left: 1px dashed;
	height: 100%;
	width: 0;
	top: -.75em; 	/*** line-height 一半 ***/
}

/* hide line from the last of the first level list items */
.tree_view > li:last-child:after {
	height: 1.5em;	/*** line-height 高度 ***/
}


/**************************************
  WP Accessibility Helper
**************************************/
/*** 選擇背景顏色按鈕 ***/
.color_selector .black {
	background: #000 !important;
	color: #FFF !important;
}
.color_selector .white {
	background: #fff !important;
	color: #000 !important;
}
.color_selector .green {
	background: #006100!important;
	color: #FFF !important;
}
.color_selector .blue {
	background: #175B96 !important;
	color: #FFF !important;
}
.color_selector .red {
	background: #AC1616!important;
	color: #FFF !important;
}
.color_selector .orange {
	background: #FFA500 !important;
	color: #382400 !important;
}
.color_selector .yellow {
	background: #F9CB33 !important;
	color: #111 !important;
}
.color_selector .navi {
	background: #5900B2 !important;
	color: #FFF !important;
}

/**************************************
 ngg 圖片列表 focus
**************************************/
.ngg-gallery-thumbnail a:focus img {
    outline: 2px solid #FF9933 !important;
    outline-offset: -2px !important;
}

.html5-video-player *:focus {
	outline: 2px solid #FF9933 !important;
	outline-offset: -2px !important;
}

/**************************************
 PDF embedder 的樣式
**************************************/
/*** 工具列背景 ***/
div.pdfemb-toolbar {
	background-color: #595959 !important;
}

/*** toolbar 右側公司連結 ***/
div.pdfemb-toolbar div.pdfemb-poweredby {
	display: none;
}

/*** toolbar 背景 ***/
.pdfemb-page-area,
.pdfemb-page-area span {
	color: #FFF;
}


/**************************************
 jPages.js (pagination) 的樣式
**************************************/
.all_list_toolbar {
    font-size: 90%;
    background: rgba(204,138,0,.1);
    border-collapse: collapse;
    display: table;
    width: 100%;
    vertical-align: middle;
    margin-top: 1em;
	margin-bottom: 1.5em;
}

.all_list_toolbar .legend1,
.all_list_toolbar form,
.all_list_toolbar .holder {
    display: table-cell;
    padding: .3em .5em .1em;
}

/** 頁次 (前面說明文字) */
.all_list_toolbar .legend1 {
/*
    width: 18em;
	border: 0px solid green;
*/
}

/** 每頁幾筆表單 **/
.all_list_toolbar form {
/*
    width: 12em;
*/    
	text-align: right;

}

.all_list_toolbar form label {
    font-weight: normal;
}

.all_list_toolbar form select {
    width: 4em;
	cursor: pointer;
}

.all_list_toolbar form button {
	font-size: 90%;
	margin-left: .2em;
	vertical-align: top;
	padding: 0 .5em;
}


/** pagination **/
.all_list_toolbar .holder {
    padding-left: .5em;
}

/*** 頁次列表 ***/
.holder a {
    display: inline-block;
    cursor: pointer;
    margin: 0 .2em;
    color: #333;
    padding: .1em .5em;
    border: 1px solid rgba(127,127,127,.4);
}

.holder a:hover {
    background-color: #222;
    color: #fff;
}

.holder a.jp-previous {
    margin-right: 1em;
}

.holder a.jp-next {
    margin-left: 1em;
}

.holder a.jp-current,
a.jp-current:hover {
    color: #ac1616;
    background: rgba(255,255,255,.7);
    font-weight:bold;
}

.holder a.jp-disabled,
a.jp-disabled:hover {
    color: #bbb;
}

.holder a.jp-current,
a.jp-current:hover,
.holder a.jp-disabled,
a.jp-disabled:hover {
    cursor: default;
}

.holder span {
    margin: 0 5px;
}

@media only screen and (max-width: 1199px) {
    .all_list_toolbar {
        display: block;
    }

    .all_list_toolbar .legend1,
    .all_list_toolbar form,
    .all_list_toolbar .holder {
        display: inline-block;
        width: auto;
        text-align: left;
        margin-right: 2em;
        margin-bottom: .2em;
    }
    .all_list_toolbar .holder {
        padding-left: .2em;
    }
}

/**************************************
 側邊欄 公告日期彙總 (收合式)
 D_tree 外掛
**************************************/
.dtree {
	padding: .15em .5em;
	white-space: nowrap;
}

/*** 隱藏前置空白 (empty.gif) ***/
.dtree img[src$="empty.gif"]  {
	display: none !important;
}

/******************
 全部展開 / 收合
******************/
#oclinks_arc1 {
	font-size: 100%;
	border: 0px solid red;
}

/*** 全部展開 ***/
#oclinks_arc1 a:first-child {
	margin-right: .2em;
}

/*** 全部收合 ***/
#oclinks_arc1 a:last-child {
	margin-left: .2em;
}

/*** 分隔線 ***/
#oclinks_sep_arc1 {
	opacity: .5;
}

/******************
 樹狀結構
******************/
#dtree_arc1 {}

/*** 每一年 **/
#dtree_arc1 .clip .clip {
    margin-bottom: .3em;
}

#dtree_arc1 .clip a {
    display: inline-block;
}

/*** 每一個月 ***/
#dtree_arc1 .clip .clip a {
    position: relative;
    display: block;
    margin: 0;
    padding: 0 0 0 2em;  /*** 橫線寬度 1em + 空白 .5em ***/
}
  
#dtree_arc1 .clip .clip a:before, 
#dtree_arc1 .clip .clip a:after {
    content: '';
    position: absolute;
    left: .5em;
    opacity: .6;
}

/* li 前加橫線 */
#dtree_arc1 .clip .clip a:before {
    border-top: 1px dashed;
    top: .8em;      /*** (line-height 一半) - (.05em 線條高度) ***/
    width: 1em;     /*** 橫線寬度 1em ***/
    height: 0;
}

/* li 前加直線 */   
#dtree_arc1 .clip .clip a:after {
    border-left: 1px dashed;
    height: 100%;
    width: 0;
    top: -.75em;    /*** line-height 一半 ***/
}

/***************************
 修正首頁最新消息第一個選項背景
***************************/
/*
.news-tabs__list li:first-child a {
 background-color: #C00;
 color: #FFF;
}
*/

/******************************
 手機版不顯示 .tabshelp
******************************/
@media only screen and (max-width: 1023px) {
	.tabshelp, 
	.category_list_header .tabshelp,
	.default_first_tabs .tabshelp,
	.accordion_btn, .tabs_desc {
		display: none;
		margin: 0;
	}
}

/*****************************
 smart slider 3  bullet bar
*****************************/
.nextend-bullet-bar .n2-bullet:focus {
    outline: 2px solid #FF9933 !important;
    outline-offset: -2px !important;
	color: #F60; 

}

/*****************************
 
*******************************/
ul.quick_link_box1 {
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.quick_link_box1 li {
	flex: 0 0 49%;
    position: relative;
    color: #FFF;
    text-align: center;
    vertical-align: middle; 
    height: 5.9em;
	margin-bottom: 0.666%;
}
.quick_link_box1 li:before {
	content: '';
}

.quick_link_box1 li i {
    position: absolute;
    top: .35em;
    left: 50%;
    font-size: 250%;
    transform: translate(-50%, 0) scale(1) ;

    transition: all .5s ease-in-out;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -ms-transition: all .5s linear;
    -o-transition: all .5s linear;
}

.quick_link_box1 li a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 1.2;
    color: #FFF;
    font-weight: 500;
}

.quick_link_box1 li span.title {
    position: absolute;
    bottom: 0;
    padding: .3em;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 1.2rem;
}

.quick_link_box1 li.small_font span.title {
    font-size: 1.15rem;
}

.quick_link_box1 li.small_font span.title {}

.quick_link_box1 li:nth-child(1) {background: #ea003a;}

.quick_link_box1 li:nth-child(2) {background: #8465B3;}

.quick_link_box1 li:nth-child(3) {background: #EE5E60;}
.quick_link_box1 li:nth-child(3) a {color: #262626;}

.quick_link_box1 li:nth-child(4) {background: #AED774;}
.quick_link_box1 li:nth-child(4) a {color: #004F00;}

.quick_link_box1 li:nth-child(5) {background: #FDC147;}
.quick_link_box1 li:nth-child(5) a {color: #503601;}

.quick_link_box1 li:nth-child(6) {background: #13814C;}
.quick_link_box1 li:nth-child(6) a {color: #FFFFFF;}

.quick_link_box1 li:nth-child(7) {background: #2BCEC2;}
.quick_link_box1 li:nth-child(7) a {color: #002F5E;}

.quick_link_box1 li:nth-child(8) {background: #06477A;}

.quick_link_box1 li:nth-child(9) {background: #AC3064;}
.quick_link_box1 li:nth-child(10) {background: #32485C;}

.quick_link_box1 li:nth-child(11) {background: #1F7BBD;}

.quick_link_box1 li:nth-child(12) {background-color: #a85c17;}

.quick_link_box1 li:hover a,
.quick_link_box1 li a:hover {
    box-shadow: 0px 0px 3px 3px rgba(0,0,0,.3);
}

.quick_link_box1 li:hover i {
    transform: translate(-50%, 0) scale(1.25) ;
}

@media only screen and (max-width: 599px) {
	.quick_link_box1 li {
		flex: 1 1 49%;
		max-width: 49%;
		margin-bottom: 2%;
	}
	
	.quick_link_box1 li.smallfont span.title {
		font-size: 1.05rem;
	}
}

/**************************************
 首頁宣導連結 ( Slick slider 版)
 template_home/home_custom_link.php
***************************************/
/*** 整個區塊 (寬度 100%) ***/
.home_section_wrap.home_customlink {
	background-color: #F2F2F2;
}

/*** slider 區域 ***/
.custom_link_box {
	position: relative;
	margin: 0 2em;	
}

/*** 每個 item ***/
.custom_link_box ul li {
	margin: 0;
	padding: .2em .5em;
	display: inline-block;
	overflow: hidden;
}

/*** 圖檔 ***/
.custom_link_box ul li img {
    width: 100%;
    height: 3em;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}

.custom_link_box .slide-arrow {
	position: absolute;
	top: 50%;
	margin-top: -1.1em;
	font-size: 150%;
	color: #666;
	cursor: pointer;
	border: 0px solid red;
}

.custom_link_box .prev-arrow {
	left: -1.2em;
}

.custom_link_box .next-arrow {
	right: -1.2em;
}