@charset "utf-8";
/* CSS Document */

/*----------------------------------------------------------------------*/
/* 內頁 */
@media screen and (max-width: 1023px) {
	#Header { background: #f8f6ef; box-shadow: 0 5px 8px rgba(0,0,0,.1); position: relative; z-index: 3; }
}

#Center .inner { margin: 0 auto; }
	@media screen and (max-width: 479px) {
		#Center .inner { padding-left:15px; padding-right:15px; }
	}
	@media screen and (min-width: 480px) and (max-width: 767px) {
		#Center .inner { padding-left:20px; padding-right:20px; }
	}
	@media screen and (min-width: 768px) and (max-width: 1279px) {
		#Center .inner { padding-left:4.16vw; padding-right:4.16vw; }
	}
	@media screen and (min-width: 1280px) {
		#Center .inner { padding-left:4.16vw; padding-right:4.16vw; max-width: calc(1280px + 8.32vw); }
	}

#ContentHeader { padding:40px 0; position:relative; z-index:2; }
#ContentHeader > div { display: flex; justify-content: space-between; align-items: center; }
#Content, #Footer { position: relative; z-index: 2; }

/* 內頁版面插圖 */
#Center::before, #Center::after { 
	content:''; display:block; position:absolute; 
	background-repeat:no-repeat; background-position:center center; background-size:contain; z-index:1; 
	}
#Center::before { background-image:url(../images/img_bg1.png); }
	@media screen and (max-width: 767px) {
		#Center::before { top:-10%; right:-20%; width:100vw; height:300px; max-width: 65%; }
	}
	@media screen and (min-width: 768px) {
		#Center::before { top:-173px; right:-183px; width:941px; height:840px; max-width: 65%; }
	}
#Center::after { background:#ece7d7; border-radius: 0 0 50px 0; top:0; left:0; }
	@media screen and (max-width: 767px) {
		#Center::after { display:none; }
		#ContentHeader { justify-content: center; text-align: center; padding: 20px 0 0; }
	}


/*----------------------------------------------------------------------*/
/* 內頁元素 */
/* 導覽列(麵包屑) */
#Breadcrumbs { position:relative; }
#Breadcrumbs ul { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; text-align: right; }
#Breadcrumbs li {
	padding-top:5px; padding-bottom:5px; padding-right:12px; margin-right:6px; position:relative;  
	color:#555; line-height:20px; font-size:0.9375rem;
	}
	#Breadcrumbs li:last-child { padding-right:0; margin-right:0; }
#Breadcrumbs li:after { content:''; position:absolute; top:50%; right:0; width:5px; height:1px; background-color:#555; }
	#Breadcrumbs li:last-child:after { display:none; }
#Breadcrumbs a { display:block; color:#555; text-decoration:none; }
#Breadcrumbs a:hover, #Breadcrumbs a:focus { color:var(--main_color2); }
#Breadcrumbs li:first-child a { font-size: 0; background: url(../images/icon_home.svg) no-repeat; width: 15px; height: 13px; }
#Breadcrumbs li:first-child a:hover, #Breadcrumbs li:first-child a:focus { background-image: url(../images/icon_home_hover.svg); }
	
/* 工具列 */
.ToolBar { display:flex; justify-content:space-between; margin-top:10px; margin-bottom:10px; position:relative; z-index:2; color:#555; font-size:0.875rem; font-family:'Noto Sans TC', sans-serif; font-weight:700; }
.ToolBar .colm_left a, .ToolBar dl.font_size a, .ToolBar dl.share a { 
	color: #555; display:block; text-decoration:none; position:relative;
	}
.ToolBar .colm_left a:hover, .ToolBar dl.font_size a:hover,
.ToolBar .colm_left a:focus, .ToolBar dl.font_size a:focus { color: var(--main_color2); }
.ToolBar .colm_left a span::after, .ToolBar dl.share dd > a::after {
	content:''; display:block; position:absolute; top:50%; left:50%; 
	background:url("../images/icon_toolbar.png") no-repeat; background-size:200%;
	}
.ToolBar .colm_left a, .ToolBar dl.font_size dd, .ToolBar dl.share dd { margin-bottom:10px; }
.ToolBar .colm_left, .ToolBar .colm_right, .ToolBar dl.font_size, .ToolBar dl.share { display:flex; flex-wrap:wrap; align-items:flex-start; }

.ToolBar .colm_right dt { font-size: 0; }
.ToolBar .colm_left a { margin-left:10px; padding:0 10px 0 30px; color:#555; position:relative; }
	.ToolBar .colm_left a:first-child { margin-left:0; }
	.ToolBar .colm_left a::before { content: ''; position: absolute; top: 0; left: -5px; width: 1px; height: 100%; background-color: #ddd; }
	.ToolBar .colm_left a:first-child::before { display: none; }
.ToolBar .colm_left a span { position:absolute; top:0; left:0; transition:all 0.3s ease; }
	.ToolBar .colm_left a.return span::after { background-position:0 0; }
	.ToolBar .colm_left a.print span::after { background-position:0 -30px; }
.ToolBar .colm_left a:hover, .ToolBar .colm_left a:focus { color: var(--main_color2); }
	.ToolBar .colm_left a.return:hover span::after, .ToolBar .colm_left a.return:focus span::after { background-position:right 0; }
	.ToolBar .colm_left a.print:hover span::after, .ToolBar .colm_left a.print:focus span::after { background-position:right -30px; }

.ToolBar dl.font_size dd { margin-right:8px; }
	.ToolBar dl.font_size dd:last-of-type { margin-right:0; }
.ToolBar dl.font_size a { text-indent:-999px; overflow:hidden; }
	.ToolBar dl.font_size dd a::after { text-indent: 0; line-height: 1; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; }
	.ToolBar dl.font_size dd.font_small a::after { content: '小'; font-size: 0.9375rem; }
	.ToolBar dl.font_size dd.font_medium a::after { content: '中'; font-size: 1.0625rem; }
	.ToolBar dl.font_size dd.font_big a::after { content: '大'; font-size: 1.1875rem; }
	.ToolBar dl.font_size dd a:hover::after { color: var(--main_color2); }
	.fs1 .ToolBar dl.font_size dd.font_small a::after { color: var(--main_color2); }
	.fs2 .ToolBar dl.font_size dd.font_medium a::after { color: var(--main_color2); }
	.fs3 .ToolBar dl.font_size dd.font_big a::after { color: var(--main_color2); }

.ToolBar dl.share dt { position:relative; }
.ToolBar dl.share dd { margin-right:8px; }
	.ToolBar dl.share dd:last-of-type { margin-right:0; }
.ToolBar dl.share a { text-indent:-999px; overflow:hidden; }
	.ToolBar dl.share dd.facebook a::after { background-position:0 -60px; }
	.ToolBar dl.share dd.twitter a::after { background-position:0 -90px; }
	.ToolBar dl.share dd.line a::after { background-position:0 -120px; }
	
	.ToolBar dl.share dd.facebook a:hover::after, .ToolBar dl.share dd.facebook a:focus::after { background-position:right -60px; }
	.ToolBar dl.share dd.twitter a:hover::after, .ToolBar dl.share dd.twitter a:focus::after { background-position:right -90px; }
	.ToolBar dl.share dd.line a:hover::after, .ToolBar dl.share dd.line a:focus::after { background-position:right -120px; }

.ToolBar .colm_left a, .ToolBar dl.font_size a, .ToolBar dl.share a { border-radius:5px; }
.ToolBar .colm_left a span, .ToolBar dl.font_size a, .ToolBar dl.share a { width:32px; height:32px; }
.ToolBar dl.font_size, .ToolBar dl.share { line-height:32px; }
.ToolBar .colm_left a, .ToolBar dl.font_size a, .ToolBar dl.share a { line-height:32px; }
.ToolBar .colm_left a span::after, .ToolBar dl.share dd > a::after { width:30px; height:30px; margin:-15px 0 0 -15px; }

@media screen and (max-width: 1023px) {	
.ToolBar .colm_left { display:none; }
.ToolBar .colm_right { width:100%; justify-content:space-between; }
}
@media screen and (min-width: 1024px) {	
.ToolBar dl.font_size + dl.share { margin-left:12px; }
.ToolBar dl.font_size + dl.share dt { padding-left:12px; }
.ToolBar dl.font_size + dl.share dt::after { 
	content:''; display:block; position:absolute; left:0; top:0; width:1px; height:100%; background-color:#ddd; 
	}
}

/* 標題 */
.PageTitle h2 { 
	position:relative; line-height:1.5em;
	font-family:'Noto Sans TC', sans-serif; font-weight:700; color:var(--main_color1); 
	}
.PageTitle .sub_title { font-family:'Montserrat', sans-serif; font-weight:600; text-transform: uppercase; color: var(--main_color2); font-size:1.25rem; }

.articleHeader { margin-bottom:20px; border-bottom: 2px solid #f1ede1; padding-bottom: 10px; }
.article_wrap { padding: 40px; border: 3px solid #ece7d7; background-color: rgba(255,255,255,.2); border-radius: 20px; }
h3.articleTitle { position:relative; font-size: 1.25rem; font-family:'Noto Sans TC', sans-serif; font-weight:700; }
h3.articleTitle.tc { text-align:center; }
.postdate { font-family:'Montserrat', sans-serif; font-weight:600; font-size: .875em; letter-spacing: .1em; padding: 10px 0; }

@media screen and (max-width: 767px) {
	.PageTitle h2 { font-size:2rem; }
	.PageTitle .sub_title { font-size:1.125rem; }
	#Breadcrumbs { display: none; }
}
@media screen and (min-width: 768px) and (max-width: 1439px) {
	.PageTitle h2 { font-size:2.5rem; }
	h3.articleTitle { font-size:1.5rem; }
	#Center::after { width:50%; height:calc(3.5rem + 80px); }
	#Breadcrumbs { max-width: 45%; }
}
@media screen and (min-width: 1440px) {
	.PageTitle h2 { font-size:3rem; }
	h3.articleTitle { font-size:1.75rem; }
	#Center::after { width:48%; height:calc(4rem + 80px); }
	#Breadcrumbs { max-width: 50%; }
}

@media screen and (max-width: 1279px) {
	.article_wrap { padding: 20px; }
}

.post_info { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; margin-bottom:12px; position:relative; }
.post_info span { margin-left:15px; font-size:0.9375rem; color:#666; line-height:2em; vertical-align:middle; position:relative; }
	.post_info span:first-child { margin-left:0; }
.post_info span.date { 
	padding:0 10px; border-radius:10px; 
	line-height:30px; color:#555; 
	}
.post_info.below { justify-content:flex-end; margin-right:-12px; }
	@media screen and (max-width: 639px) {
	.post_info.below::before { top:-10px; }
	.post_info span { font-size: .75em; }
	}
	@media screen and (min-width: 640px) {
	.post_info.below::before { top:50%; }
	}
.post_info.below span { padding:0 12px; margin:0; }
.post_info.below span:first-child::before { display:none; }

/* 分類下拉 */
.CatTitle { 
	margin-bottom:20px; padding-bottom:20px; padding-top: 20px; border-bottom:2px solid #ece7d7;
	display:flex; justify-content:space-between; flex-wrap:wrap;
	}
.CatTitle > * { flex:0 1 auto; }
.CatTitle h3 { font-family: 'Noto Sans TC', sans-serif; font-weight:700; font-size:1.5rem; line-height:46px; color:#333; }
.CatTitle .cat_select { display:flex; align-items:center; flex-wrap:wrap; font-size:0.875rem; color:#555; }
.CatTitle .cat_select label { color:#666; }
.CatTitle .cat_select span.title { margin-right:10px; }
.CatTitle .cat_select.FormElmt select { padding-left: 5px; margin-right: 10px; }
.CatTitle .cat_select .btn { margin:5px 0; }
.CatTitle .cat_select .btn button { 
	line-height:40px; padding:0 15px; background-color:#555; color:#fff; position:relative; border-radius:5px;
	}
.CatTitle .cat_select .btn button:hover, .CatTitle .cat_select .btn button:focus { background-color: var(--main_color2); }

@media screen and (max-width: 539px) {
.CatTitle { flex-direction:column; }
}
@media screen and (min-width: 540px) {
.CatTitle { align-items:center; }
}

/* 列表搜尋 */
.ListSearch { margin-bottom:25px; padding-bottom:5px; border-bottom:2px solid #ece7d7; position:relative; display:flex; flex-wrap:wrap; align-items:flex-end; }
.ListSearch .item { max-width:100%; margin:0 10px 10px 0; }
.ListSearch .item .label { margin-right:10px; line-height:40px; font-family:'Noto Sans TC', sans-serif; font-weight:700; }
.ListSearch .btn button { 
	line-height:40px; padding:0 10px 0 35px; background-color:#555; border:none; color:#fff; font-weight:bold;
	position:relative; border-radius:5px; margin-bottom: 15px;
	}
	.ListSearch .btn button::before { content: ''; position: absolute; top: 50%; left:20px; transform: translate(-50%, -50%); width: 18px; height: 18px; background: url(../images/icon_search_w.svg) no-repeat center; }
.ListSearch .btn button:hover, .ListSearch .btn button:focus { background-color: var(--main_color2); }
.ListSearch .keyword input[type="text"] { width:260px; border-radius:5px; }

@media screen and (max-width: 539px) {
.ListSearch { flex-direction:column; width:100%; align-items: flex-start; }
.ListSearch .item { flex-direction:column; width:100%; }
.ListSearch .item .label { padding-bottom:10px; line-height:1.25em; }
.ListSearch .item .cont { width:100%; }
}

/* 頁碼 */
#Pagination { clear:both; text-align:center; color:#555; }
#Pagination .pages { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; }
#Pagination a { 
	margin:5px; position:relative; 
	text-align:center; font-family:'Montserrat', sans-serif; font-weight:600; color:#555; letter-spacing:0; text-decoration:none; 
	}
#Pagination a:hover, #Pagination a:focus, #Pagination a.focuz { background-color:var(--main_color2); color:#fff; }
	
#Pagination .setting { padding-top:15px; line-height:32px; font-size:0.875rem; }
#Pagination .setting select, #Pagination .setting input[type="text"], #Pagination .setting input[type="button"] { 
	font-size:1em;
	transition:all ease .2s;
	}
#Pagination .setting select { padding:0 5px; }
#Pagination .setting input[type="text"] { width:50px; padding:0 10px; }
#Pagination .setting select, #Pagination .setting input[type="text"] {
	height:32px; font-family:'Montserrat', sans-serif; font-weight:600; border-radius:5px; border: 1px solid #ddd; outline: none; color: #555;
	}
#Pagination .setting select:focus, #Pagination .setting input[type="text"]:focus {
	background-color:#fffdf3; border-color: var(--main_color2);
	}
#Pagination .setting input[type="button"] {
	padding:0 12px; margin-left:5px; background-color:#aaa; border:none; height:32px; color:#fff;
	border-radius:5px; font-family:'Montserrat', sans-serif; font-weight:600; font-size: 1rem;
	}
#Pagination .setting input[type="button"]:hover, #Pagination .setting input[type="button"]:focus { background-color: var(--main_color2); }

@media screen and (max-width: 1023px) {
	#Pagination { margin: 20px 0; }
	#Pagination a { display:none; }
	#Pagination a.first, #Pagination a.last, #Pagination a.prev, #Pagination a.next { width:auto; padding:0 15px; background: #ece7d7; line-height:32px; border-radius:16px; height:32px; }
	#Pagination a:hover, #Pagination a:focus, #Pagination a.focuz { color: var(--main_color2); }
	#Pagination .setting { padding-top:10px; line-height:24px; }
	#Pagination .dev-script-oper { display:none; }
}
	@media screen and (max-width: 479px) {
		#Pagination a.prev, #Pagination a.next { display:inline-block; }
	}
	@media screen and (min-width: 480px) and (max-width: 1023px) {
		#Pagination a.first, #Pagination a.prev, #Pagination a.next, #Pagination a.last { display:inline-block; }
	}
@media screen and (min-width: 1024px) {
	#Pagination { margin: 40px 0; }
	#Pagination a { width:34px; height:34px; line-height:34px; border-radius:18px; }
	#Pagination a.first, #Pagination a.last, #Pagination a.prev, #Pagination a.next { width:auto; padding:0 10px; }
}
	@media screen and (min-width: 1024px) and (max-width: 1279px) {
		#Pagination { font-size: .9375em; }
		#Pagination a { margin: 3px; }
	}

/* 內頁頁碼 */
.inPagination { margin:30px 0; clear:both; text-align:center; }
.inPagination .pages { display:flex; flex-wrap:wrap; justify-content:center; }
.inPagination a { 
	margin:5px; width:32px; line-height:32px; position:relative; border-radius:16px;
	text-align:center; font-family:'Montserrat', sans-serif; font-weight:600; color:#555; text-decoration:none; background-color: #ece7d7; padding-left: 0.1em;
	}
.inPagination a:hover, .inPagination a:focus, .inPagination a.focuz { background-color: var(--main_color2); color:#fff; }


/*----------------------------------------------------------------------*/
/* 文字列表 */
.ListTable { position:relative; overflow:hidden; }
	.editable_content + .ListTable { margin-top:15px; }
.ListTable table { width:100%; }

.ListTable td.no { font-family: 'Montserrat', sans-serif; font-weight:600; }
.ListTable td.date { font-family: 'Montserrat', sans-serif; font-weight:600; letter-spacing: .1em; }
.ListTable td.title { color:#333; font-family:'Noto Sans TC', sans-serif; font-weight:700; }
.ListTable td.title a { display:block; color: #333; text-decoration:none; position:relative; }
.ListTable td.title a:hover, .ListTable table td.title a:focus { color:var(--main_color1); }
.ListTable td.hash_value { word-break:break-all; }

.ListTable td.download ul { display: flex; flex-wrap: wrap; }
.ListTable td.download ul li { margin: 5px; }
.ListTable td.download a { display: block; font-size: 0; text-indent: -10000px; width: 26px; height: 26px; }
.ListTable td.download a:hover, .ListTable td.download a:focus { opacity: 0.7; }
.ListTable td.download .file_ext::before { width: 100%; height: 100%; }
.ListTable td.title a.icon_key { display:inline-flex; align-items: center; margin-left: 3px; }

.ListTable tr.top td.title a { color:var(--main_color2); }
.ListTable tr.top td.title a:hover, .ListTable table tr.top td.title a:focus { color:var(--main_color1); }

@media screen and (max-width: 1023px) {
	.ListTable table, .ListTable table tbody, .ListTable table tr, .ListTable table th, .ListTable table td { display:block; }
	.ListTable { margin-top:30px; margin-bottom:30px; border:2px solid #ece7d7; border-radius:20px; }
	.ListTable table tr { padding:15px 20px; border-bottom:1px solid #ece7d7; }
	.ListTable table tr:first-child { position:absolute; left:-10000px; top:-10000px; }
	.ListTable table tr:last-child { border-bottom:0; }
	.ListTable table tr:nth-child(odd) { background-color:#fafafa; }

	.ListTable table td { margin:5px 0; text-align:left; }
	.ListTable td.no { display:none; }
	.ListTable td:before { font-weight:bold; content: attr(data-th)"："; }
	.ListTable td.no:before, .ListTable td:first-child.date:before, .ListTable td.cat:before, .ListTable td.title:before { 
		content:""; 
		}
	.ListTable td.date { display:inline-block; font-size:0.9375rem; position:relative; }
	.ListTable td.date br { display:none; }
	.ListTable td.title { margin-top:0; font-size:1.25rem; font-weight:500; line-height:1.5em; position:relative; }
	.ListTable td.download ul li { margin: 5px 10px 5px 0; }
}
	@media screen and (max-width: 479px) {
		.ListTable table tr { padding:15px 10px; }
		.ListTable td.title a { padding-right:0; }
		.ListTable td.title a::after { display:none; }
	}
@media screen and (min-width: 1024px) {
	.ListTable { margin-top:30px; margin-bottom:30px; padding: 40px; border: 3px solid #ece7d7; background-color: rgba(255,255,255,.2); border-radius: 20px; }
	.ListTable table { border-collapse:separate; }
	.ListTable table th { 
		background-color:#ece7d7; padding:15px 25px; font-family:'Noto Sans TC', sans-serif; font-weight:700; 
		color:#333; font-size:1.125rem; white-space:nowrap; 
		}
	.ListTable table th:first-child { border-radius:10px 0 0 10px; }
	.ListTable table th:last-child { border-radius:0 10px 10px 0; }
	.ListTable table td { padding:20px 25px; line-height:1.5em; }
	.ListTable table tr:nth-child(2n+3) td { background-color:#fff; }
	.ListTable table tr:nth-child(2n+3) td:first-child { border-radius:10px 0 0 10px; }
	.ListTable table tr:nth-child(2n+3) td:last-child { border-radius:0 10px 10px 0; }

	.ListTable th.no { width:40px; }
	.ListTable td.no { width:40px; white-space:nowrap; text-align:center; font-size: 1.125rem; }
	.ListTable th.date { width:8rem; }
	.ListTable td.date { width:8rem; white-space:nowrap; position:relative; text-align:center; }
	.ListTable th.date.range, .ListTable td.date.range { width:200px; }
	.ListTable td.download ul { justify-content: center; }

	.ListTable table .tc { text-align:center; }
}
	@media screen and (min-width: 1024px) and (max-width: 1279px) {
		.ListTable { padding: 20px; }
		.ListTable table td { padding: 15px 10px; }
	}
	@media screen and (min-width: 1280px) {
		.ListTable table th { font-size:1.25rem; }
		.ListTable td.title { font-size:1.125rem; }
	}


/*----------------------------------------------------------------------*/
/* 圖文列表 */
.ListPicText .item, .ListPicText .item > div, .ListPicText .img, .ListPicText .img > div, .ListPicText .cont, .ListPicText .btn { box-sizing:border-box; }

.ListPicText { margin-top:10px; }
.ListPicText > div { display: flex; justify-content: center; flex-wrap: wrap; }
.ListPicText .item { box-sizing:border-box; margin-bottom:40px; }
.ListPicText .item > div { overflow: hidden; height: 100%; margin-left: auto; margin-right: auto; background: #fff; border-radius: 10px; }

.ListPicText .imgBox { overflow:hidden; }
.ListPicText .imgBox .img { position:relative; padding-bottom: 70%; }
.ListPicText .imgBox img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }

.ListPicText .date { font-family:'Montserrat', sans-serif; font-weight:600; color:#333; line-height:2em; white-space:nowrap; margin-right: 0.25em; font-size: .875em; display: inline-block; }
.ListPicText .tag { background-color: #fdc147; display: inline-block; padding: .5em 10px;    color: #055583; font-weight: bold; margin-bottom: 10px; letter-spacing: .1em; }
.ListPicText .tag + .date { margin-left: 10px; }

.ListPicText .title { margin-bottom:8px; overflow: hidden; }
.ListPicText .title a { 
	display:block; position:relative; line-height:1.5em;
	color: #333; text-decoration: none; font-family:'Noto Sans TC', sans-serif; font-weight:700;
	}
.ListPicText .title a:hover, .ListPicText .title a:focus { color: var(--main_color2); }
.ListPicText .desc { line-height:1.5em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; max-height:4.5em; -webkit-line-clamp:3; }
.ListPicText .issue { font-family:'Montserrat', 'Noto Sans TC', sans-serif; font-weight:600; font-size: .875em; background-color: #333; color: #fff; display: inline-block; padding: 5px 1em; border-radius: 10px; margin-right: 6px; }
.ListPicText .btn { text-align: center; margin-top:10px; }
.ListPicText .btn a {
    display: inline-block; color:var(--main_color2); font-weight: bold; font-size: 1.125em; text-decoration: none; position: relative; overflow: hidden; padding-top: 2px; padding-bottom: 2px;
}
.ListPicText .btn a::before, .ListPicText .btn a::after {  transition:all 0.3s ease; }
.ListPicText .btn a::before { 
	content: ''; position: absolute; right: -30px; top: 50%; margin-top: -13px;
	display:block; margin-left:.5em; width:25px; height:25px; background-color:var(--main_color2); transition:all 0.3s ease; border-radius: 50%;
}
.ListPicText .btn a::after { 
	content:''; display:block; position:absolute; right: -20px; top: 50%; margin-top: -4px;
	width:5px; height:5px; transform: rotate(45deg);
	border-top: 2px solid #f8f6ef; border-right: 2px solid #f8f6ef;
}
.ListPicText .btn a:hover::before { right: 0; }
.ListPicText .btn a:hover::after { right: 10px; }
.ListPicText .btn a:hover { padding-right: 30px; }

/* list-view */
.ListPicText.list-view .imgBox { float:left; width:360px; max-width:50%; box-sizing: border-box; }

/* 單欄 */
.ListPicText.single > div { flex-direction: column; }
.ListPicText.single .item { width: 100%; }

@media screen and (max-width: 639px) {
	/* 圖文列表 */
    /* 639px~480px時 一律以圖上文下雙欄顯示,479以下時，一律以圖上文下單欄顯示 */
    .ListPicText > div { margin-left:-10px; margin-right:-10px; }
    .ListPicText .item { padding-left:10px; padding-right:10px; margin-bottom:40px; flex: 1 auto; }
    .ListPicText .title a { font-size:1.25rem; }
    .ListPicText .date { font-size:0.875rem; display: block; }
    .ListPicText .tag + .date { margin-left: 0; }
    .ListPicText .desc { font-size:1rem; max-height:8em; -webkit-line-clamp:4; }
    .ListPicText.list-view .imgBox { float: none; width: 100%; max-width: 100%; }
    .ListPicText .item > div { max-width: 500px; }
    .ListPicText .btn a { font-size: 1em; }

    @media screen and (max-width: 479px) {
        .ListPicText .cont { padding:15px 20px 20px; }
        .ListPicText .item { width:100%; max-width:400px; margin-left:auto; margin-right:auto; }
    }
    @media screen and (min-width: 480px) {
        .ListPicText .cont { padding:15px; }
        .ListPicText .item { width:50%; }
    }
}

@media screen and (min-width: 640px) and (max-width: 1023px) {
    /* 圖文列表 */
    .ListPicText > div { margin-left:-15px; margin-right:-15px; }
    .ListPicText .item { padding-left:15px; padding-right:15px; margin-bottom:35px; }

    /* 圖文列表 - list-view */
    .ListPicText.list-view .item > div { padding: 15px;	}
    .ListPicText.list-view .imgBox { float:left; width:360px; max-width:48%; padding-right:15px; }
    .ListPicText.list-view .btn { text-align:right; }

    /* 圖左文右交錯 */
    .ListPicText.list-view.single.staggered .item:nth-child(2n+2) .imgBox { float:right; padding-right:0; padding-left: 15px; }

    /* 圖上文下 - grid-view */
    .ListPicText.grid-view .cont { padding:15px; }
}

@media screen and (min-width: 640px) and (max-width: 767px) {
    .ListPicText .title a { font-size:1.25rem; }
    .ListPicText .desc { font-size:1em; }

    /* list-view 一律以單欄顯示 */
    .ListPicText.list-view .item { flex: 1 auto; }
    .ListPicText.list-view .title a { max-height:4.5em; -webkit-line-clamp:3; }

    /* grid-view 一律以兩欄顯示 */
    .ListPicText.grid-view .item { width:50%; }
    .ListPicText.grid-view .title a { max-height:4.5em; -webkit-line-clamp:3; }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .ListPicText .title a { font-size:1.25rem; }
    .ListPicText .desc { font-size:1em; }

    /* list-view 一律以單欄顯示 */
    .ListPicText.list-view .title a { max-height:3em; -webkit-line-clamp:2; }

    /* 圖文列表 - 兩欄 */
    .ListPicText.bisection .item { width:50%; }
    .ListPicText.bisection .cont { padding:20px; }
    .ListPicText.bisection .title { font-size:1.25rem; }
    .ListPicText.bisection .desc { font-size:0.9375rem; }
    .ListPicText.list-view.bisection .imgBox { padding:20px; }
    .ListPicText.list-view.bisection .cont { padding:20px; }

    /* 圖文列表 - 三欄 */
    .ListPicText.trisection .item { width:33.3333%; }
    .ListPicText.trisection .cont { padding:20px; }
    .ListPicText.trisection .title { font-size:1.25rem; }
    .ListPicText.trisection .desc { font-size:1em; }
    .ListPicText.list-view.trisection .imgBox { padding:15px; }
    .ListPicText.list-view.trisection .cont { padding:15px; }
}

@media screen and (min-width: 1024px) {
	.ListPicText { margin-top: 20px; }
    .ListPicText > div { margin-left:-20px; margin-right:-20px; }
    .ListPicText .item { padding-left:20px; padding-right:20px; margin-bottom:35px; }

    /* 圖文列表 - list-view */
    .ListPicText.list-view .btn { text-align:right; }

    /* 圖文列表 - 單欄 */
    .ListPicText.list-view.single.staggered .item:nth-child(2n+2) .imgBox { float:right; }
    .ListPicText.single .imgBox { padding:20px; }
    .ListPicText.grid-view.single .imgBox { padding:0; }
    .ListPicText.single .cont { padding:20px; }
    .ListPicText.single .title { font-size:1.25rem; }
    .ListPicText.single .desc { font-size:1rem; }

    /* 圖文列表 - 兩欄 */
    .ListPicText.bisection .item { width:50%; }
    .ListPicText.bisection .cont { padding:20px; }
    .ListPicText.bisection .title { font-size:1.25rem; }
    .ListPicText.bisection .desc { font-size:0.9375rem; }
    .ListPicText.list-view.bisection .imgBox { padding:20px; }
    .ListPicText.list-view.bisection .cont { padding:20px; }

    /* 圖文列表 - 三欄 */
    .ListPicText.trisection .item { width:33.3333%; }
    .ListPicText.trisection .cont { padding:20px; }
    .ListPicText.trisection .title { font-size:1.25rem; }
    .ListPicText.trisection .desc { font-size:1em; }
    .ListPicText.list-view.trisection .imgBox { padding:15px; }
    .ListPicText.list-view.trisection .cont { padding:15px; }

    /* 圖文列表 - 四欄 */
    .ListPicText.quarters .item { width:25%; }
    .ListPicText.quarters .cont { padding:15px; }
    .ListPicText.quarters .title { font-size:1.125rem; }
    .ListPicText.quarters .desc { font-size:0.875rem; }
    .ListPicText.list-view.quarters .imgBox { padding:15px; }
    .ListPicText.list-view.quarters .cont { padding:15px; }

    /* 圖文列表 - hover效果 */
    .ListPicText .item > div, .ListPicText .title a { 
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
        }
    .ListPicText .item:hover > div {
        transform: translateY(-5px);
        -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.3);
        box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.3);
    }
    .ListPicText.grid-view .img { 
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        transition: all 0.5s ease;
        }
    .ListPicText.grid-view .imgBox:hover .img { transform:scale(1.05); }
}


/*----------------------------------------------------------------------*/
/* 搜尋結果 */
.SearchResult { margin-top:20px; margin-bottom:30px; }

.SearchResult .header { margin-bottom:40px; background-color: #fff; border-radius:20px; padding:15px 20px; }
.SearchResult .header .title { display:inline-block; line-height:2em; position:relative; }
.SearchResult .header .title::after { content:'：'; }
.SearchResult .header .tags { display:inline-block; line-height:2em; }
.SearchResult .header .tags span { display:inline-block; background-color:var(--main_color1); padding:0 8px; margin:0 2px 5px; border-radius:1em; color:#fff; }
.SearchResult .header .total { display:inline-block; margin-top:10px; line-height:2em; }
.SearchResult .header .total span { color:var(--main_color2); font-weight:500; }

.SearchResult .results_list { border-top:1px solid #d4d4d4; }
.SearchResult .results_list .item { padding:25px 0 20px; border-bottom:1px solid #d4d4d4; }
.SearchResult .results_list .title { line-height:1.5em; font-size:1.375rem; font-family:'Noto Sans TC', sans-serif; font-weight:700; position:relative; }
.SearchResult .results_list .title a { display:block; color:#333; text-decoration:none; }
.SearchResult .results_list .title span { color:var(--main_color2); }
.SearchResult .results_list .title a:hover, .SearchResult .results_list .title a:focus { color:var(--main_color2); text-decoration:underline; }
.SearchResult .results_list .date { 
	display:inline-block; margin-top:10px; 
	font-family:'Montserrat', sans-serif; font-weight:600; letter-spacing:0.1em; line-height:2em; 
	}
.SearchResult .results_list .cat { display:inline-block; margin-top:10px; }
.SearchResult .results_list .date + .cat { margin-left:5px; }
.SearchResult .results_list .cat a { 
	display:block; border: 1px solid var(--main_color1); padding:0 10px; color:var(--main_color1); font-size:0.875rem; line-height:2em; text-decoration:none; font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
	}
.SearchResult .results_list .cat a:hover, .SearchResult .results_list .cat a:focus { border-color:var(--main_color2); color:var(--main_color2); }
.SearchResult .results_list .desc { 
	margin-top:10px; color:#666; 
	line-height:2em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical;
	}
	@media screen and (max-width: 479px) {
	.SearchResult .results_list .desc { max-height:10em; -webkit-line-clamp:5; font-size:0.9375rem; }
	}
	@media screen and (min-width: 480px) and (max-width: 639px) {
	.SearchResult .results_list .desc { max-height:8em; -webkit-line-clamp:4; }
	}
	@media screen and (min-width: 640px) and (max-width: 1023px) {
	.SearchResult .results_list .desc { max-height:6em; -webkit-line-clamp:3; }
	}
	@media screen and (min-width: 1024px) {
	.SearchResult .results_list .desc { max-height:4em; -webkit-line-clamp:2; }
	}
.SearchResult .results_list .desc span { color:var(--main_color2); font-weight:500; }

/*----------------------------------------------------------------------*/
/* 組織章程 */
.constitution h3 { font-size: 1.5rem; padding: 5px 0; margin-bottom: 5px; color: var(--main_color2); border-bottom: 2px solid #f1ede1; }
.constitution h3 span + span { padding-left: 1em; }
.constitution dl { margin: 10px 0 20px; line-height: 2em; }
.constitution dd { margin-bottom: 5px; }
.constitution .label2 { margin-left: 2em; }
.constitution .label2 li { padding-left: 2em; text-indent: -2em; }

@media screen and (max-width: 479px) {
	.constitution dt { color: var(--main_color1); font-weight: bold; }
	.constitution h3 span + span { padding-left: .5em; }
}
@media screen and (min-width: 480px) {
	.constitution dt { float: left; }
	.constitution dd { margin-left: 6.375rem; }
}

/*----------------------------------------------------------------------*/
/* 現任理監事 */
.supervisor .chapter { font-size: 1.5rem; padding: 5px 0; margin-bottom: 30px; color: var(--main_color2); border-bottom: 2px solid #f1ede1; }
.supervisor ul { display: flex; flex-wrap: wrap; }
.supervisor ul li { margin-bottom: 40px; }
.supervisor .item { background-color: #fff; border-radius: 20px; overflow: hidden; }
.supervisor .imgBox { width: 100%; background-color: #fff; height: 0; padding-bottom: 120%; position: relative; overflow: hidden; }
.supervisor .imgBox img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.supervisor .cont { text-align: center; padding: 12px; }
.supervisor .cont .name { line-height: 1.5em; font-family: 'Noto Sans TC', sans-serif; font-weight: 700; color: var(--main_color1); font-size: 1.5em; }
.supervisor .cont .sub_title { font-weight: bold; }

@media screen and (min-width: 768px) {
	.supervisor ul li { margin-left: calc(40px * 4 / 3); width: calc(100% / 4 - 40px); }
	.supervisor ul li:nth-child(4n+1) { margin-left: 0; }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.supervisor ul li { margin-left: calc(20px * 4 / 3); width: calc(100% / 4 - 20px); margin-bottom: 20px; }
	.supervisor .cont .name { font-size: 1.25em; }
}
@media screen and (max-width: 767px) {
	.supervisor ul li { width: calc(100% / 2 - 20px); margin-left: 40px; }
	.supervisor ul li:nth-child(odd) { margin-left: 0; }
	.supervisor .cont .name { font-size: 1.25em; }
}
@media screen and (max-width: 479px) {
	.supervisor ul li { width: calc(100% / 2 - 10px); margin-left: 20px; margin-bottom: 20px; }
}

/*----------------------------------------------------------------------*/
/* 歷屆理監事 */
.rosters h3 { font-size: 1.5rem; padding: 5px 0; margin-bottom: 5px; color: var(--main_color2); border-bottom: 2px solid #f1ede1; }
.rosters dl { margin: 10px 0; line-height: 2em; }
.rosters dt { font-weight: bold; }
.rosters dd { margin-bottom: 5px; }

@media screen and (max-width: 479px) {
	.rosters dt { color: var(--main_color1); }
}
@media screen and (min-width: 480px) {
	.rosters dt { float: left; padding: 4px 12px; width: 6.375rem; text-align: right; }
	.rosters dd { margin-left: 6.375rem; padding: 4px 12px; border-left: 2px solid #f1ede1; }
	.rosters.history dt { width: 9.375rem; }
	.rosters.history dd { margin-left: 9.375rem; }
}

@media screen and (min-width: 768px) {
	.rosters { margin-bottom:30px; padding: 15px 25px; border: 2px solid #ece7d7; background-color: rgba(255,255,255,.2); border-radius: 20px; }
}

/*----------------------------------------------------------------------*/
/* 各委員會名單 */
.committee dl { margin: 10px 0; line-height: 2em; }
.committee dt { font-size: 1.25em; font-weight: bold; color: var(--main_color2); padding: 4px 12px; }
.committee-item a { text-decoration: none; display: block; position: relative; border-bottom: 2px solid #f1ede1; color: #333; font-size: 1.125em; padding: 4px 30px 4px 8px; }
.committee-item a:hover { color: var(--main_color2); }
.committee-item a.with::after { 
	content:''; display:block; position:absolute; top:50%; right:8px; width:7px; height:7px; transition:all 0.3s ease; transform:rotate(-45deg); margin-top: -7px;
	border-left: 2px solid #555; border-bottom: 2px solid #555;
	}
	.committee-item a.active::after { transform:rotate(135deg); margin-top: -2px; border-color: #000; }
	.committee-item a.active { color: #000; }
.committee-item .cont { margin-bottom: 10px; display: none; background: #f1ede1; }
.committee .micro_editable_content { padding: 6px 12px; }

@media screen and (max-width: 767px) {
	.committee dt { background-color: #f1ede1; }
	.committee dd + dt { margin-top: 20px; }
}
@media screen and (min-width: 768px) {
	.committee dt { float: left; width: 10rem; text-align: right; }
	.committee dd { margin-left: 10rem; padding: 4px 12px; border-left: 2px solid #f1ede1; }
}

/*----------------------------------------------------------------------*/
/* 雜誌列表 */
.MagazineList > div { display: flex; justify-content: center; flex-wrap: wrap; }
.MagazineList .item { margin:20px 0; }
.MagazineList .item > div { overflow: hidden; height: 100%; margin-left: auto; margin-right: auto; background: #fff; border-radius: 10px; transition: all 0.3s ease; }
.MagazineList .item > div:hover { 
	transform: translateY(-5px);
	-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.3);
	box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.3);
 }

.MagazineList .imgBox { height: 240px; width: 200px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; position: relative; }
.MagazineList .imgBox img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }

.MagazineList .title a { font-size: 1.25em; color: #333; text-decoration: none; font-family:'Noto Sans TC', sans-serif; font-weight:700; }
.MagazineList .title a:hover { color: var(--main_color2); }
.MagazineList .issue { font-family:'Montserrat', 'Noto Sans TC', sans-serif; font-weight:600; font-size: .875em; background-color: #333; color: #fff; display: inline-block; padding: 5px 1em; border-radius: 10px; margin-right: 6px; }
.MagazineList .date { font-family:'Montserrat', sans-serif; font-weight:600; color:#333; line-height:2em; white-space:nowrap; margin-right: 0.25em; font-size: .875em; display: inline-block; }
.MagazineList .desc { margin-top: 8px; line-height: 1.75em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; max-height:7em; -webkit-line-clamp:4; }
.MagazineList .btn { margin-top: 15px; }
.MagazineList .btn a { color: var(--main_color2); font-family: 'Noto Sans TC', sans-serif; font-weight: 500; font-size: 1.125em; text-decoration: none; border: 2px solid var(--main_color2); background-color: #fff; border-radius: 27px; padding: 5px 20px; display: flex; justify-content: center; align-items: center; }
.MagazineList .btn a:hover { background-color: var(--main_color2); color: #fff; }

@media screen and (max-width: 767px) {
	.MagazineList .item { width: 100%; }
	.MagazineList .item > div { padding: 20px; }
	.MagazineList .desc { font-size: .875em; }
}
@media screen and (min-width: 540px) and (max-width: 767px) {
	.MagazineList .item > div { display: flex; }
	.MagazineList .cont { margin-left: 20px; flex: 1; }
}
@media screen and (min-width: 768px) {
	.MagazineList > div { margin-left: -20px; margin-right: -20px; }
	.MagazineList .item { width: 50%; padding: 0 20px; }
	.MagazineList .item > div { padding: 30px 40px; }
}
@media screen and (min-width: 768px) and (max-width: 1439px) {
	.MagazineList .imgBox { margin-bottom: 20px; }
}
@media screen and (max-width: 539px) {
	.MagazineList .imgBox { margin-bottom: 20px; }
}

@media screen and (max-width: 1439px) {
	.MagazineList .imgBox { height: 192px; width: 160px; margin-left: auto; margin-right: auto; }
}
@media screen and (min-width: 1440px) {
	.MagazineList .item > div { display: flex; }
	.MagazineList .cont { margin-left: 20px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; }
	.MagazineList .title a { font-size: 1.5em; }
	.MagazineList .btn { width: 100%; height: 100%; }
	.MagazineList .btn a { font-size: 1.5em; height: 100%; }
}

/*----------------------------------------------------------------------*/
/* 年會專區 */
.AnnualList { display:flex; justify-content:space-between; flex-wrap:wrap; margin-top:40px; }
.AnnualList .item { margin-top:10px; margin-bottom:30px; }
.AnnualList .item a { 
	display:block; height:100%; padding:20px; position:relative;
	border:3px solid var(--color2); background-color:rgba(255,255,255,.5); border-radius:10px; text-decoration:none; 
	}
.AnnualList .item.current_year a { border:3px solid var(--color1); }
.AnnualList .item a:hover, .AnnualList .item a:focus { 
	border:3px solid var(--main_color1); background-color:rgba(255,255,255,.8); transform:translateY(-10px); box-shadow:0 10px 10px rgba(0,0,0,0.2); 
	}
.AnnualList .item .title { line-height:1.5em; color:var(--main_color1); font-family:'Montserrat', 'Noto Sans TC', sans-serif; font-weight:700; font-size:1.125rem; }
.AnnualList .item .sub_title { line-height:1.5em; color:var(--main_color2); font-family:'Montserrat', 'Noto Sans TC', sans-serif; font-weight:700; font-size:1.375rem; }
.AnnualList .item .info { margin-top:10px; }
.AnnualList .item .info li { padding-left:12px; color:#777; line-height:1.5em; position:relative; }
.AnnualList .item .info li::before { content:''; display:block; position:absolute; top:0.6785em; left:0; width:6px; height:2px; background-color:#ccc; }

.AnnualList .item .date { display:flex; align-items:center; flex-wrap:wrap; font-family:'Montserrat', sans-serif; color:#333; }
.AnnualList .item .date .wrap { 
	border-top:3px solid var(--main_color1); border-bottom:1px solid var(--color2); border-left:1px solid var(--color2); border-right:1px solid var(--color2); display:flex; align-items:center; background-color:#fff; border-radius:5px; padding:0 12px; margin-bottom:10px; position:relative; 
	}
.AnnualList .item.current_year .date .wrap { border-top:3px solid var(--color1); }
.AnnualList .item.current_year a:hover .date .wrap, .AnnualList .item.current_year a:focus .date .wrap { 
	border-top:3px solid var(--main_color1); 
	}
.AnnualList .item .date .wrap > div { line-height:32px; }
.AnnualList .item .date .wrap .year { font-weight:700; }
.AnnualList .item .date .wrap .year::after { content:'/'; }
.AnnualList .item .date .wrap .day { font-weight:700; }
.AnnualList .item .date .wrap .week { font-size:0.8125rem; margin-left:10px; }
.AnnualList .item .date .wrap + .wrap { margin-left:20px; }
.AnnualList .item .date .wrap + .wrap::before { 
	content:"~"; display:block; position:absolute; right:100%; top:50%; width:20px; margin-top:-10px; text-align:center; line-height:20px; 
	}

@media screen and (max-width: 767px) {
.AnnualList .item { width:100%; }

.AnnualList .item.current_year .title { font-size:1.625rem; }
.AnnualList .item.current_year .sub_title { font-size:2rem; }
}
@media screen and (min-width: 768px) {
.AnnualList .item { width:calc(50% - 20px); }
.AnnualList .item.current_year { width:100%; }

.AnnualList .item.current_year a { padding-top:35px; }
.AnnualList .item.current_year .date { position:absolute; top:-20px; }

.AnnualList .item.current_year .date .wrap > div { line-height:40px; }
.AnnualList .item.current_year .date { font-size:1.125rem; }
.AnnualList .item.current_year .date .wrap .week { font-size:0.9375rem; }
.AnnualList .item.current_year .title { font-size:2rem; }
.AnnualList .item.current_year .sub_title { font-size:2.5rem; }
.AnnualList .item.current_year .info li { font-size:1.125rem; }
}


/*----------------------------------------------------------------------*/
/* 行事曆 */
.EventCalendarWrap { background-color:#fff; padding:30px; margin:50px 0; border-radius:10px; position:relative; }
.EventCalendarWrap::before { 
	content:''; position:absolute; left:0; top:0; width:100%; height:100%; 
	background-color:var(--color2); z-index:-1; transform:rotate(2deg); border-radius:10px; 
	}

/* 標頭 */
.EventCalendarHeader { margin-bottom:20px; }
	@media screen and (max-width: 539px) {
	.EventCalendarHeader { margin-left:-20px; margin-right:-20px; }
	}
.EventCalendarHeader .date_select { display:flex; align-items:center; justify-content:space-between; }
.EventCalendarHeader .date_selected { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; }
.EventCalendarHeader .date_selected .month { margin-left:12px; }
	@media screen and (min-width: 400px) {
	.EventCalendarHeader .date_selected .year::after { content:'年'; }
	.EventCalendarHeader .date_selected .month::after { content:'月'; }
	}
.EventCalendarHeader .select select { 
	border:0; background-color:var(--color2); height:48px; padding:0 10px; border-radius:24px; color:#555; font-family:'Montserrat', sans-serif; font-weight:500; 
	}
	.EventCalendarHeader .select select:focus { background-color:var(--main_color2); color:#fff; }

@media screen and (max-width: 539px) {
.EventCalendarHeader .btn_current_month { width:100%; max-width:160px; margin-left:0; margin-top:10px; }
}
@media screen and (min-width: 540px) {
.EventCalendarHeader .btn_current_month { margin-left:12px; }
}
.EventCalendarHeader .btn_current_month a { 
	display:block; background-color:var(--main_color2); line-height:48px; padding:0 10px; border-radius:24px; 
	text-align:center; color:#fff; font-family:'Noto Sans TC', sans-serif; font-weight:500; text-decoration:none;
	}
.EventCalendarHeader .btn_current_month a:hover, .EventCalendarHeader .btn_current_month a:focus { 
	background-color:var(--main_color1); box-shadow:0 0 15px rgba(0,0,0,0.4);
	}

.EventCalendarHeader .prevNext > a { display:block; text-indent:-999px; width:48px; height:48px; position:relative; overflow:hidden; border-radius:50%; }
.EventCalendarHeader .prevNext > a:hover, .EventCalendarHeader .prevNext > a:focus { background-color:var(--color2); }
.EventCalendarHeader .prevNext > a::after { 
	content:''; display:block; position:absolute; top:50%; 
	border-left:3px solid var(--main_color2); border-top:3px solid var(--main_color2); width:13px; height:13px; margin-top:-8px;
	}
	.EventCalendarHeader .prevNext .prev::after { left:50%; transform:rotate(-45deg); margin-left:-5px; }
	.EventCalendarHeader .prevNext .next::after { right:50%; transform:rotate(135deg); margin-right:-5px; }

/* 月曆 */
.EventCalendar .weekdays { display:flex; }
.EventCalendar .weekdays > div { 
	width:14.2857%; border-top:1px solid var(--color2); border-bottom:3px solid var(--color2); line-height:3.2em; 
	text-align:center; font-size:1.125rem; font-weight:700; 
	}
.EventCalendar .calendar { display:flex; flex-wrap:wrap; }
.EventCalendar .calendar .day { border-left:1px solid var(--color2); border-bottom:1px solid var(--color2); padding:10px 10px 15px 10px; position:relative; }
	.EventCalendar .calendar .day.day-othermonth { background-color:#f8f8f8; }
	.EventCalendar .calendar .day:hover::before { 
		content:''; display:block; position:absolute; top:-1px; left:-1px; width:100%; height:100%; 
		border:1px solid var(--main_color2); z-index:1; 
		}
	.EventCalendar .calendar .day.day-today::before { 
		content:''; display:block; position:absolute; top:-3px; left:-3px; width:100%; height:100%; 
		border:3px solid #fff; box-shadow:0 0 15px rgba(0,0,0,0.3); z-index:1; 
		}
.EventCalendar .calendar .day > div { position:relative; z-index:2; }
.EventCalendar .calendar .date { margin-bottom:10px; font-family:'Montserrat', sans-serif; font-weight:700; line-height:1.5em; }
	.EventCalendar .calendar .day-today .date { color:var(--main_color2); }
	.EventCalendar .calendar .day-othermonth .date { color:#999; }
	.EventCalendar .calendar .day-today .date::after { content:'Today'; margin-left:5px; }
.EventCalendar .calendar .list li { margin-bottom:0.5em; }
	.EventCalendar .calendar .list li:last-child { margin-bottom:0; }
.EventCalendar .calendar .list a { 
	display:block; padding:0.5em; border:1px solid var(--color2); border-radius:5px; line-height:1.35em; color:#202020; text-decoration:none; position:relative; 
	}
.EventCalendar .calendar .list a:hover, .EventCalendar .calendar .list a:focus { border:1px solid var(--main_color2); background-color:var(--main_color2); color:#fff; }
	.EventCalendar .calendar .day-othermonth .list a { color:#999; }
	.EventCalendar .calendar .day-othermonth .list a:hover, .EventCalendar .calendar .day-othermonth .list a:focus { color:#fff; opacity:0.8; }

/* RWD-桌機 */
@media screen and (min-width: 1280px) {
.EventCalendar .calendar .day { width:14.2857%; }
.EventCalendar .calendar .day:nth-child(7n+7) { border-right:1px solid var(--color2); }
.EventCalendar .calendar .date span { display:none; }
.EventCalendar .calendar .list li { font-size:0.875rem; }
.EventCalendar .calendar .list a:hover, .EventCalendar .calendar .list a:focus { transform:scale(1.2); }
}

/* 行動裝置 */
@media screen and (max-width: 1279px) {
.EventCalendar .weekdays,
.EventCalendar .calendar .day.day-noevent,
.EventCalendar .calendar .day.day-othermonth { display:none; }
.EventCalendar .calendar { border-top:1px solid var(--color2); }
.EventCalendar .calendar .day { width:100%; border-right:1px solid var(--color2); padding:15px 15px 20px; }
.EventCalendar .calendar .list li { font-weight:bold; }
}

@media screen and (max-width: 399px) {
.EventCalendarWrap { padding:20px 20px; }
.EventCalendar .calendar .list li { font-size:0.9375rem; }
}
@media screen and (min-width: 1024px) and (max-width: 1199px) {
.EventCalendarWrap { padding:20px 10px; }
}

/*----------------------------------------------------------------------*/
/* 國內學術活動-列表 */
.EventListBtns { margin-top:30px; display:flex; flex-wrap:wrap; }
.EventListBtns a { 
	display:block; margin:0 10px 10px 0; line-height:40px; padding:0 12px; background-color:var(--color2); 
	color:#333; font-family:'Noto Sans TC', sans-serif; text-decoration:none;
	position:relative; border-radius:20px; 
	}
.EventListBtns a:hover, .EventListBtns a:focus, .EventListBtns a.selected { background-color:var(--main_color2); color:#fff; }
.EventListBtns a.selected { font-weight:700; }
.EventListBtns a.selected::after { 
	content:''; display:block; position:absolute; top:100%; left:50%; margin-left:-8px;
	border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid var(--main_color2); 
	}

.EventList { margin-top:10px; margin-bottom:30px; padding:40px; border:3px solid var(--color2); background-color:rgba(255,255,255,.2); border-radius:20px; }
	@media screen and (max-width: 479px) {
	.EventList { padding:15px; }
	}
	@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.EventList { padding:15px; }
	}
.EventList .date .wrap { 
	display:inline-flex; align-items:center;
	border-top:3px solid var(--main_color2); border-bottom:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; 
	background-color:#fff; font-family:'Montserrat', sans-serif; text-align:center; position:relative; 
	}
.EventList .date .wrap > div { line-height:1.375em; }
.EventList .date .wrap .year { font-weight:700; }
.EventList .date .wrap .day { font-weight:700; }
.EventList .date .wrap .week { font-size:0.8125rem; }
.EventList .date .wrap + .wrap { margin-left:18px; }
.EventList .date .wrap + .wrap::before { content:"~"; display:block; position:absolute; right:100%; top:50%; width:20px; line-height:20px; margin-top:-10px; }

.EventList .tag { display:flex; align-items:center; align-content:center; flex-wrap:wrap; }
.EventList .tag > div { margin-right:10px; border-radius:10px; font-size:0.875em; font-family:'Montserrat', sans-serif; line-height:28px; }
.EventList .tag .integral { border:1px solid var(--main_color1); color:var(--main_color1); padding:0 12px; }
.EventList .tag .status { border-width:1px; border-style:solid; padding:0 12px; }
.EventList .tag .status.overage { border-color:var(--color1); color:var(--color1); }
.EventList .tag .status.close { border-color:#aaa; color:#aaa; }
.EventList .tag .status.full { border-color:var(--main_color2); color:var(--main_color2); }

.EventList .title { margin-top:5px; }
.EventList .title a { 
	display:inline-block; 
	font-family:'Noto Sans TC', sans-serif; font-size:1.25rem; font-weight:700; color:#333; line-height:1.5em; text-decoration:none; 
	}
.EventList .title a:hover, .EventList .title a:focus { color:var(--main_color2); }

.EventList .info { margin-top:10px; }
.EventList .info li { padding-left:12px; font-size:0.875rem; color:#777; line-height:1.5em; position:relative; }
.EventList .info li::before { content:''; display:block; position:absolute; top:0.6785em; left:0; width:6px; height:2px; background-color:#ccc; }

@media screen and (max-width: 767px) {
.EventList .item { padding:25px 15px; border-radius:10px; }
.EventList .item:nth-child(even) { background-color:#fff; }
.EventList .item:first-child { padding-top:0; }
	
.EventList .date .wrap { padding:5px 12px; margin-bottom:10px; border-radius:5px; }
.EventList .date .wrap .year::after { content:'/'; }
.EventList .date .wrap .week { margin-left:10px; }
}
@media screen and (min-width: 768px) {
.EventList { display:table; width:100%; }
.EventList .item { display:table-row; }
.EventList .item > div { display:table-cell; vertical-align:top; padding-top:20px; padding-bottom:20px; padding-left:20px; padding-right:20px; }
.EventList .item:nth-child(even) > div { background-color:#fff; }
.EventList .item:first-child > div { padding-top:0; }
.EventList .date { white-space:nowrap; text-align:center; }

.EventList .date .wrap { flex-wrap:wrap; width:3.6em; padding:5px 0; }
.EventList .date .wrap > div { width:100%; }
.EventList .date .wrap .year { font-size:0.9375rem; }
}
	@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.EventList .item .date { padding-right:10px; }
	.EventList .item .cont { padding-left:10px; }
	}

/*----------------------------------------------------------------------*/
/* 國內學術活動-內頁 */
/* 標頭 */
.EventContHeader { padding-top:20px; position:relative; }
.EventContHeader::before { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:4px; background-color:var(--color2); border-radius:2px; }
.EventContHeader .date .wrap { 
	display:inline-flex; align-items:center;
	border-top:3px solid var(--main_color2); border-bottom:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; 
	background-color:#fff; font-family:'Montserrat', sans-serif; text-align:center; position:relative; 
	}
.EventContHeader .date .wrap > div { line-height:1.375em; }
.EventContHeader .date .wrap .year { font-weight:700; }
.EventContHeader .date .wrap .day { font-weight:700; }
.EventContHeader .date .wrap .week { font-size:0.8125rem; }
.EventContHeader .date .wrap + .wrap { margin-left:18px; }
.EventContHeader .date .wrap + .wrap::before { content:"~"; display:block; position:absolute; right:100%; top:50%; width:20px; line-height:20px; margin-top:-10px; }

.EventContHeader .cont { flex:1 1 auto; display:flex; align-items:center; justify-content:space-between; }

.EventContHeader .tag { display:flex; align-items:center; align-content:center; flex-wrap:wrap; }
.EventContHeader .tag > div { margin-right:10px; border-radius:10px; font-family:'Montserrat', sans-serif; line-height:28px; }
.EventContHeader .tag .integral { border:1px solid var(--main_color1); color:var(--main_color1); padding:0 12px; }
.EventContHeader .tag .status { border-width:1px; border-style:solid; padding:0 12px; }
.EventContHeader .tag .status.overage { border-color:var(--color1); color:var(--color1); }
.EventContHeader .tag .status.close { border-color:#aaa; color:#aaa; }
.EventContHeader .tag .status.full { border-color:var(--main_color2); color:var(--main_color2); }

.EventContHeader .title { margin-top:5px; }
.EventContHeader .title h3 { 
	display:inline-block; 
	font-family:'Noto Sans TC', sans-serif; font-size:1.5rem; font-weight:700; color:#333; line-height:1.5em; text-decoration:none; 
	}

.EventContHeader .info { margin-top:10px; }
.EventContHeader .info li { padding-left:12px; color:#777; line-height:1.5em; position:relative; }
.EventContHeader .info li::before { content:''; display:block; position:absolute; top:0.6785em; left:0; width:6px; height:2px; background-color:#ccc; }

@media screen and (max-width: 719px) {
.EventContHeader .cont { flex-wrap:wrap; }
.EventContHeader .cont .desc { width:100%; }
}
@media screen and (max-width: 639px) {
.EventContHeader .date .wrap { padding:5px 12px; margin-bottom:10px; border-radius:5px; }
.EventContHeader .date .wrap .year::after { content:'/'; }
.EventContHeader .date .wrap .week { margin-left:10px; }
}
@media screen and (min-width: 640px) {
.EventContHeader { display:flex; }
.EventContHeader .date { padding:7px 10px 0 0; display:flex; align-items:flex-start; }
.EventContHeader .cont { padding:0 0 0 10px; }

.EventContHeader .date .wrap { flex-wrap:wrap; width:3.6em; padding:5px 0; }
.EventContHeader .date .wrap > div { width:100%; }
.EventContHeader .date .wrap .year { font-size:0.9375rem; }
}

/* 內容區塊 */
.EventContBlock { 
	margin:60px 0; padding-top:50px; padding-left:40px; padding-right:40px; padding-bottom:40px; position:relative;
	border:3px solid var(--color2); background-color:rgba(255,255,255,.2); border-radius:20px; 
	}
	@media screen and (max-width: 479px) {
	.EventContBlock { padding-left:20px; padding-right:20px; padding-bottom:20px; }
	}
	@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.EventContBlock { padding-left:20px; padding-right:20px; padding-bottom:20px; }
	}

.EventContBlock .block_title { 
	position:absolute; top:0; padding:0 20px; margin-top:-24px; background-color:var(--main_color2); border-radius:24px; 
    line-height:48px; color:#fff; font-family:'Noto Sans TC', sans-serif; font-weight:700; font-size:1.25rem; letter-spacing:0.15em;
	}
.EventContBlock .block_item { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; margin-bottom:20px; }
	.EventContBlock .block_item:last-child { margin-bottom:0; }
.EventContBlock .block_item .item_th { 
	background-color:var(--color2); border-radius:10px; position:relative; font-family:'Noto Sans TC', sans-serif; font-weight:500; 
	}
.EventContBlock .block_item .item_td { background-color:#fff; border-radius:10px; line-height:1.5em; word-break:break-all; }

.EventContBlock .num_limit li { display:flex; flex-wrap:wrap; margin-bottom:10px; line-height:1.25em; }
	.EventContBlock .num_limit li:last-child { margin-bottom:0; }
.EventContBlock .num_limit .label { margin-right:10px; }
.EventContBlock .num_limit .label span { 
	display:block; width:3.2em; height:1.25em; 
	text-align: justify;
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph; /*IE9*/
	-moz-text-align-last:justify; /*Firefox*/
	-webkit-text-align-last:justify; /*Chrome*/
	}
	.EventContBlock .num_limit .label span::after { 
		content:''; width:100%; display:inline-block; height:0; font-size:0; line-height:0; 
		}
	/* fix text-align:justify在td中的bug */
.EventContBlock .num_limit .num { margin-right:5px; font-family:'Montserrat', sans-serif; font-weight:500; }
.EventContBlock .num_limit .note { margin-left:5px; font-size:0.875rem; color:#888; }
	@media screen and (max-width: 499px) {
	.EventContBlock .num_limit .label { width:3.2em; }
	.EventContBlock .num_limit .count { width:calc(100% - 3.2em - 10px); }
	.EventContBlock .num_limit .note { display:block; margin-left:0; }
	}

/* RWD */
@media screen and (max-width: 767px) {
.EventContBlock .block_item { position:relative; margin-top:50px; }
	.EventContBlock .block_title + .block_item { margin-top:20px; }
.EventContBlock .block_item .item_th { position:absolute; top:0; left:20px; padding:0 10px; margin-top:-20px; line-height:40px; }
.EventContBlock .block_item .item_td { width:100%; border:3px solid var(--color2); padding:35px 20px 20px 20px; }
}
@media screen and (min-width: 768px) {
.EventContBlock .block_item .item_th { padding:20px 10px; line-height:1.5em; }
.EventContBlock .block_item .item_th::after { 
	content:''; display:block; position:absolute; top:50%; left:100%; margin-top:-8px;
	border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:10px solid var(--color2); 
	}
.EventContBlock .block_item .item_td { padding:20px; }
}
	@media screen and (min-width: 768px) and (max-width: 1279px) {
	.EventContBlock .block_item .item_th { width:100px; }
	.EventContBlock .block_item .item_td { width:calc(100% - 120px); }
	}
	@media screen and (min-width: 1280px) {
	.EventContBlock .block_item .item_th { width:150px;  }
	.EventContBlock .block_item .item_td { width:calc(100% - 170px); }
	}

/* 按鈕 */
.btn_applicants { display:flex; justify-content:center; flex-wrap:wrap; }
.btn_applicants a { display:flex; align-items:center; background-color:var(--main_color1); border-radius:10px; color:#fff; font-weight:bold; text-decoration:none; }
.btn_applicants a::before { content:''; display:inline-block; vertical-align:middle; background:url(../images/icon_applicants.png) no-repeat; background-size:100%; }
	.btn_applicants .sign a::before { background-position:0 0; }
	.btn_applicants .list a::before { background-position:0 50%; }
	.btn_applicants .return a::before { background-position:0 100%; }
.btn_applicants a:hover, .btn_applicants a:focus { background-color:var(--main_color2); box-shadow:0 0 10px rgba(0,0,0,0.3); }

.EventContBlock .btn_applicants { align-items:center; margin-top:40px; }
.EventContBlock .btn_applicants div { margin:0 10px 10px 10px; }
.EventContBlock .btn_applicants a { padding:0 20px; line-height:54px; font-size:1.25rem; }
.EventContBlock .btn_applicants a::before {  width:28px; height:28px; margin-right:8px; }

.EventContHeader .btn_applicants { flex:0 0 auto; }
.EventContHeader .btn_applicants a { padding:0 10px; line-height:36px; font-size:1rem; }
.EventContHeader .btn_applicants a::before {  width:24px; height:24px; margin-right:5px; }
@media screen and (max-width: 719px) {
.EventContHeader .btn_applicants { width:100%; margin-top:15px; justify-content:flex-end; }
.EventContHeader .btn_applicants > div { margin:0 0 10px 10px; }
}
@media screen and (min-width: 720px) {
.EventContHeader .btn_applicants { flex-direction:column; align-items:flex-end; }
.EventContHeader .btn_applicants div { margin:0 0 10px 0; }
.EventContHeader .btn_applicants div:last-child { margin:0; }
}

/* 檔案下載 */
.EventFileDownload { 
	margin:40px 0; padding-top:20px; padding-bottom:10px; padding-left:40px; padding-right:40px; position:relative;
	border:3px solid var(--color2); background-color:rgba(255,255,255,.2); border-radius:20px; 
	}
	@media screen and (max-width: 479px) {
	.EventFileDownload { padding-left:20px; padding-right:20px; }
	}
	@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.EventFileDownload { padding-left:20px; padding-right:20px; }
	}
.EventFileDownload ul { display:flex; align-items:center; flex-wrap:wrap; }
.EventFileDownload li { 
	display:flex; align-items:center; flex-wrap:wrap; 
	margin:0 10px 10px 0; background-color:#fff; border:1px solid var(--color2); padding:0.375em .75em; border-radius:10px;
	}
.EventFileDownload li > a { display:inline-block; padding:5px; font-weight:bold; color:#333; line-height:1.5em; text-decoration:none; }
.EventFileDownload li > a:hover, .EventFileDownload li > a:focus { color:var(--main_color2); }
.EventFileDownload li span.file_ext { margin-left:6px; width:24px; height:24px; }
.EventFileDownload li span.file_hashes { margin-left:6px; width:24px; height:24px; }
.EventContBlock + .EventFileDownload { margin-top:-30px; }

/* 報名人員名單 */
.EventContBlock .ListTable { margin:0; padding:0; border:0; background:none; border-radius:0; }
@media screen and (max-width: 1023px) {
.EventContBlock .ListTable td.no { display:block; }
.EventContBlock .ListTable td.no:before { font-weight:bold; content: attr(data-th)"："; }
}


/*----------------------------------------------------------------------*/
/* 國外學術活動 */
.EventForeignList { margin-top:10px; margin-bottom:30px; padding:20px 40px; border:3px solid var(--color2); background-color:rgba(255,255,255,.2); border-radius:20px; }
	@media screen and (max-width: 479px) {
	.EventForeignList { padding:5px 15px; }
	}
	@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.EventForeignList { padding:5px 15px; }
	}

.EventForeignList li { border-bottom:1px solid var(--color2); display:flex; align-items:center; font-family:'Montserrat', 'Noto Sans TC', sans-serif; font-weight:600; }
	.EventForeignList li:last-child { border-bottom:0; }
.EventForeignList .no { width:1.6em; margin-right:1em; text-align:center; position:relative; flex-shrink:0; }
.EventForeignList .no::after { content: ''; position: absolute; top:50%; left:calc(100% + 0.5em); width:1px; background-color:#333; transform:rotate(25deg); }
.EventForeignList .title { width:100%; }
.EventForeignList .title a { display:block; position:relative; padding-right:40px; font-size:1.125rem; line-height:1.5em; color:#333; text-decoration:none; }
.EventForeignList .title a:hover, .EventForeignList .title a:focus { color:var(--main_color2); }
.EventForeignList .title a::before, .EventForeignList .title a::after { content:''; display:block; position:absolute; top:50%; transition:all 0.3s ease; }
.EventForeignList .title a::before { 
	right:0; margin-top:-14px; width:28px; height:28px; background-color:var(--main_color2); border-radius:50%; 
	}
.EventForeignList .title a::after { 
	right:11px; margin-top:-4px; width:6px; height:6px; transform:rotate(45deg); border-top:2px solid #f8f6ef; border-right:2px solid #f8f6ef; 
	}
.EventForeignList .title a:hover::before, 
.EventForeignList .title a:focus::before { right:-10px;  }
.EventForeignList .title a:hover::after, 
.EventForeignList .title a:focus::after { right:1px;  }

@media screen and (max-width: 479px) {
.EventForeignList li { flex-wrap:wrap; }
}

@media screen and (max-width: 639px) {
.EventForeignList li { padding:1.25em 0 1.25em 0; }
.EventForeignList .no { font-size:1.5em; }
.EventForeignList .no::after { height:24px; margin-top:-12px; }
}
@media screen and (min-width: 640px) {
.EventForeignList li { padding:1.25em 1.5em 1.25em 10px; }
.EventForeignList .no { font-size:2.625em; }
.EventForeignList .no::after { height:36px; margin-top:-18px; }
}


/*----------------------------------------------------------------------*/
/* 線上積分申請 */
.btn_event_apply { margin:20px 0; }
.btn_event_apply + .FormGroupWarp, .btn_event_apply + .ListTable { margin-top:20px; }

.btn_event_apply ul { display:flex; justify-content:flex-end; flex-wrap:wrap; }
.btn_event_apply ul li { margin:0 15px 10px 0; }
.btn_event_apply ul li:last-child { margin-right:0; }
.btn_event_apply a { 
	display:flex; align-items:center; background-color:var(--color2); padding:0 15px; border-radius:10px; position:relative;
	line-height:40px; color:#333; font-weight:bold; text-decoration:none; 
	}
.btn_event_apply a::before { 
	content:''; display:inline-block; width:22px; height:22px; margin-right:10px; vertical-align:middle; 
	background:url(../images/icon_event_apply.png) no-repeat; background-size:200%;
	}
	.btn_event_apply .apply a::before { background-position:0 0; }
	.btn_event_apply .query a::before { background-position:0 100%; }
.btn_event_apply a:hover, .btn_event_apply a:focus, .btn_event_apply .selected a { background-color:var(--main_color1); color:#fff; }
	.btn_event_apply .apply a:hover::before, .btn_event_apply .apply a:focus::before, .btn_event_apply .apply.selected a::before { background-position:right 0; }
	.btn_event_apply .query a:hover::before, .btn_event_apply .query a:focus::before, .btn_event_apply .query.selected a::before { background-position:right 100%; }
.btn_event_apply .selected a::after { 
	content:''; display:block; position:absolute; top:100%; left:50%; margin-left:-8px;
	border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid var(--main_color1); 
	}
@media screen and (max-width: 399px) {
.btn_event_apply a { flex-direction:column; padding-top:10px; }
.btn_event_apply a::before { margin-right:0 }
}

/* 進度查詢 */
.ListTable.event_apply_list td.event_no { 
	width:4rem; white-space:nowrap; text-align:center; line-height:1.86em;
	font-size:0.9375rem; font-family:'Montserrat', sans-serif; font-weight:600; letter-spacing:.1em;
	}
.ListTable.event_apply_list td.event_title > div { line-height:1.75em; }
.ListTable.event_apply_list td.event_title .title { font-family:'Noto Sans TC', sans-serif; font-weight:700; }
	@media screen and (max-width: 1023px) {
	.ListTable.event_apply_list td.event_title .title { font-size:1.25rem; }
	}
	@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.ListTable.event_apply_list td.event_title .title { font-size:1rem; }
	}
	@media screen and (min-width: 1280px) {
	.ListTable.event_apply_list td.event_title .title { font-size:1.125rem; }
	}
.ListTable.event_apply_list td.event_title .organizer { font-size:0.875rem; color:#666; position:relative; }
.ListTable.event_apply_list td.event_download a {
	display:inline-block; padding:0 8px; background-color:var(--main_color1); border-radius:5px; box-sizing:content-box;
    color:#fff; text-decoration:none;
	}
.ListTable.event_apply_list td.event_download a:hover, .ListTable.event_apply_list td.event_download a:focus { 
	background-color:var(--main_color2);box-shadow:0 0 8px rgba(0,0,0,0.25);
	}
@media screen and (max-width: 1023px) {
.ListTable.event_apply_list td.event_title .organizer::before { content:'主辦單位：'; }
.ListTable.event_apply_list td.event_download::before { display:none; }
.ListTable.event_apply_list td.event_download a { height:40px; line-height:40px; }
}
@media screen and (min-width: 1024px) {
.ListTable.event_apply_list td.event_title .organizer { padding-left:12px; }
.ListTable.event_apply_list td.event_title .organizer::before { 
	content:''; display:block; position:absolute; top:0.8125em; left:0; width:6px; height:2px; background-color:#ccc; 
	}
.ListTable.event_apply_list td.event_progress { text-align:center; }
.ListTable.event_apply_list td.event_download { text-align:center; }
.ListTable.event_apply_list td.event_download a {
	width:5.5em; height:32px; line-height:32px; font-size:0.9375rem; 
	text-align: justify;
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph; /*IE9*/
	-moz-text-align-last:justify; /*Firefox*/
	-webkit-text-align-last:justify; /*Chrome*/
	}
	.ListTable.event_apply_list td.event_download a::after { 
		content:''; width:100%; display:inline-block; height:0; font-size:0; line-height:0; 
		}
	/* fix text-align:justify在td中的bug */
}

/* 課程表 */
.FormTable .event_file_list ul { display:flex; align-items:center; flex-wrap:wrap; }
.FormTable .event_file_list li { 
	display:flex; align-items:center; flex-wrap:wrap; 
	margin:0 10px 10px 0; background-color:#fff; border:1px solid var(--color2); padding:0.375em .75em; border-radius:10px;
	}
.FormTable .event_file_list li > a { display:inline-block; padding:5px; font-weight:bold; color:#333; line-height:1.5em; text-decoration:none; }
.FormTable .event_file_list li > a:hover, .FormTable .event_file_list li > a:focus { color:var(--main_color2); }
.FormTable .event_file_list li span.file_ext { margin-left:6px; width:24px; height:24px; }
.FormTable .event_file_list li span.file_hashes { margin-left:6px; width:24px; height:24px; }


/*----------------------------------------------------------------------*/
/* 登入 */
.LoginBox { 
	display:flex; flex-wrap:wrap;
	background-color:#fff; padding:30px; margin:50px 0; border-radius:10px; position:relative;
	}
.LoginBox::before { 
	content:''; position:absolute; left:0; top:0; width:100%; height:100%; 
	background-color:var(--color2); z-index:-1; transform:rotate(2deg); border-radius:10px; 
	}
.LoginBox .login_form input[type="text"], .LoginBox .login_form input[type="password"] { 
	color:#666; border:0; padding:0 15px; width:100%; background-color:transparent; box-sizing:border-box; 
	}
	.LoginBox .login_form input[type="text"]::placeholder, 
	.LoginBox .login_form input[type="password"]::placeholder { color:#666; }
	.LoginBox .login_form input[type="text"]:focus, 
	.LoginBox .login_form input[type="password"]:focus { background-color:#fffdf3; outline:0; }

.LoginBox h3 { 
	border-bottom:1px solid var(--color2); padding-left:15px; padding-bottom:5px; margin-bottom:15px; position:relative;
	color:var(--main_color2); font-family:'Noto Sans TC', sans-serif; font-size:1.375rem; font-weight:500; line-height:1.5em;
	}
.LoginBox h3::after { content:''; display:block; position:absolute; top:0.25em; left:0; width:6px; height:1em; border-radius:3px; background-color:var(--main_color2); }

.LoginBox .login_form > div:first-child { margin-top:0; }
.LoginBox .login_form .wrap { border:1px solid #bbb; border-radius:10px; overflow:hidden; position:relative; }
.LoginBox .login_form .wrap::before { 
	content:''; position:absolute; top:50%; width:1px; height:28px; margin-top:-14px; box-sizing:border-box; background-color:#c3c3c3; 
	}
.LoginBox .login_form .wrap::after { 
	content:''; position:absolute; top:50%; width:24px; height:24px; margin-top:-12px; 
	background:url("../images/icon_login.png") no-repeat; background-size:100%; 
	}
	.LoginBox .login_form .name .wrap::after { background-position:0 0%; }
	.LoginBox .login_form .pw .wrap::after { background-position:0 20%; }
	.LoginBox .login_form .random_code .wrap::after { background-position:0 40%; }
	
@media screen and (max-width: 639px) {
.LoginBox .login_form > div { margin-top:25px; }
.LoginBox .login_form .wrap { padding-left:46px; }
.LoginBox .login_form .wrap::before { left:46px; }
.LoginBox .login_form .wrap::after { left:12px; }
.LoginBox .login_form input[type="text"], .LoginBox .login_form input[type="password"] { height:46px; line-height:46px; }
}
@media screen and (min-width: 640px) {
.LoginBox .login_form > div { margin-top:30px; }
.LoginBox .login_form .wrap { padding-left:52px; }
.LoginBox .login_form .wrap::before { left:52px; }
.LoginBox .login_form .wrap::after { left:16px; }
.LoginBox .login_form input[type="text"], .LoginBox .login_form input[type="password"] { height:52px; line-height:52px; }
}

.LoginBox .BtnCommon { margin-top:20px; }

/* 驗證碼 */
.LoginBox .login_form .random_code .wrap { display:flex; align-items:center; flex-wrap:wrap; }
.LoginBox .login_form .random_code .input { width:150px; }
.LoginBox .login_form .random_code .img { margin-left:20px; }
.LoginBox .login_form .random_code .img img { display:block; }
.LoginBox .login_form .random_code .btns { display:flex; align-items:center; flex-wrap:wrap; }
.LoginBox .login_form .random_code .btns > * { 
	display:block; border:0; margin:0 0 0 20px; padding:0 0 0 20px; height:36px; position:relative; 
	font-size:0.875rem; line-height:36px; color:#666; text-decoration:none;
	}
.LoginBox .login_form .random_code .btns > *:hover, .LoginBox .login_form .random_code .btns > *:focus { color:var(--main_color2); }
.LoginBox .login_form .random_code .btns > *::before { 
	display:block; content:''; position:absolute; top:50%; left:0; width:16px; height:16px; margin-top:-8px; 
	background:url("../images/icon_random_code.png") no-repeat; background-size:200%; 
	}
	.LoginBox .login_form .random_code .refresh::before { background-position:0 0; }
	.LoginBox .login_form .random_code .play::before { background-position:0 20%; }
	.LoginBox .login_form .random_code .refresh:hover::before, .LoginBox .login_form .random_code .refresh:focus::before { background-position:right 0; }
	.LoginBox .login_form .random_code .play:hover::before, .LoginBox .login_form .random_code .play:focus::before { background-position:right 20%; }
.LoginBox .login_form .random_code .btns > *::after { 
	display:block; content:''; position:absolute; bottom:5px; left:0; width:100%; height:1px; background-color:#d4d4d4; 
	}
.LoginBox .login_form .random_code .btns > *:hover::after, .FormElmt .randomcode .btns > *:focus::after { 
	background-color:var(--main_color2); 
	}

.LoginBox .colm_right .text { line-height:2.5em; }
.LoginBox .colm_right .text .btn { 
	display:inline-block; padding:0 10px; margin:0 5px; background-color:var(--main_color1); border-radius:5px; 
	color:#fff; text-decoration:none; 
	}
.LoginBox .colm_right .text .btn:hover, .LoginBox .colm_right .text .btn:focus { background-color:var(--main_color2); }

/* RWD */
@media screen and (max-width: 767px) {
.LoginBox .colm_left { width:100%; }
.LoginBox .colm_right { width:100%; margin-top:40px; }
}
@media screen and (min-width: 768px) {
.LoginBox .colm_left { width:50%; padding-right:40px; }
.LoginBox .colm_right { width:50%; padding-left:40px; border-left:1px solid var(--color2); }
}

/* 入會申請辦法 */
@media screen and (max-width: 767px) {
.LoginBox.mem_apply_method .apply_colm_left { width:100%; }
.LoginBox.mem_apply_method .apply_colm_right { width:100%; margin-top:40px; }
}
@media screen and (min-width: 768px) {
.LoginBox.mem_apply_method .apply_colm_left { width:50%; padding-right:40px; }
.LoginBox.mem_apply_method .apply_colm_right { width:50%; padding-left:40px; border-left:1px solid var(--color2); }
}
.LoginBox.mem_apply_method .apply_btn { width:100%; margin-top:30px; }

.LoginBox.mem_apply_method ol { list-style-type:decimal; padding-left:1em; margin-left:1em; }
.LoginBox.mem_apply_method ol li { margin:1em 0; line-height:2em; }
.LoginBox.mem_apply_method ol li::marker { font-family:'Montserrat', sans-serif; font-size:1.25rem; color:#999; }
.LoginBox.mem_apply_method ol li strong { font-weight:bold; color:var(--main_color1); }


/*----------------------------------------------------------------------*/
/* 會員資料修改 */
.btn_mem_data { margin:20px 0; }
.btn_mem_data + .FormGroupWarp, .btn_mem_data + .ListTable { margin-top:20px; }

.btn_mem_data ul { display:flex; justify-content:flex-end; flex-wrap:wrap; }
.btn_mem_data ul li { margin:0 15px 10px 0; }
.btn_mem_data ul li:last-child { margin-right:0; }
.btn_mem_data a { 
	display:flex; align-items:center; background-color:var(--color2); padding:0 15px; border-radius:10px; position:relative;
	line-height:40px; color:#333; font-weight:bold; text-decoration:none; 
	}
.btn_mem_data a::before { 
	content:''; display:inline-block; width:22px; height:22px; margin-right:10px; vertical-align:middle; 
	background:url(../images/icon_mem_data.png) no-repeat; background-size:200%;
	}
	.btn_mem_data .mem_data a::before { background-position:0 0; }
	.btn_mem_data .modifypwd a::before { background-position:0 100%; }
.btn_mem_data a:hover, .btn_mem_data a:focus, .btn_mem_data .selected a { background-color:var(--main_color1); color:#fff; }
	.btn_mem_data .mem_data a:hover::before, .btn_mem_data .mem_data a:focus::before, .btn_mem_data .mem_data.selected a::before { background-position:right 0; }
	.btn_mem_data .modifypwd a:hover::before, .btn_mem_data .modifypwd a:focus::before, .btn_mem_data .modifypwd.selected a::before { background-position:right 100%; }
.btn_mem_data .selected a::after { 
	content:''; display:block; position:absolute; top:100%; left:50%; margin-left:-8px;
	border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid var(--main_color1); 
	}
@media screen and (max-width: 399px) {
.btn_mem_data a { flex-direction:column; padding-top:10px; }
.btn_mem_data a::before { margin-right:0 }
}

.FormTable .mem_data_wrap { overflow:hidden; }
.FormTable .mem_data_wrap > div { display:flex; align-items:center; flex-wrap:wrap; padding-left:10px; position:relative; }
.FormTable .mem_data_wrap > div > div { max-width:100%; position:relative; }
.FormTable .mem_data_wrap .label { width:calc(4.5em); text-align:center; }
.FormTable .mem_data_wrap .cont { width:calc(100% - 4.5em); }

.FormTable .mem_data_wrap .before { 
	background-color:#f3f3f3; padding-right:10px; margin-top:5px; 
	color:#888; border-radius:20px; line-height:40px; z-index:2; 
	}
.FormTable .mem_data_wrap .before .label::after { 
	content:''; display:block; position:absolute; bottom:-9px; left:50%; width:16px; height:16px; margin-left:-8px;
	background-color:#f3f3f3; transform:rotate(45deg);
	}
.FormTable .mem_data_wrap .before .cont { font-weight:bold; color:#333; }
.FormTable .mem_data_wrap .after { padding-top:15px; z-index:1; }
.FormTable .mem_data_wrap .after .label { color:var(--main_color2); }
/* RWD */
@media screen and (max-width: 1023px) {
}
	@media screen and (max-width:639px) {
	.FormTable .mem_data_wrap .after .cont { width:auto; }
	}
	@media screen and (max-width:479px) {
	.FormTable .mem_data_wrap .before .cont { width:auto; }
	}
@media screen and (min-width: 1024px) {
.FormTable .mem_data_wrap .after { background-color:#fff; }
}
	@media screen and (min-width: 1024px) and (max-width: 1199px) {
	.FormTable .mem_data_wrap .after .cont { width:auto; }
	}

/* popup box */
#RemoteSrhHospital .box_wrap > div { max-width:720px; }

#RemoteSrhHospital .FormGroupWarp { margin-bottom:20px; }
#RemoteSrhHospital .ListTable td.title { font-family:'Noto Sans TC', sans-serif; font-weight:700; color:#333; }
#RemoteSrhHospital .ListTable td.add_hospital a { 
	display:inline-block; padding:0 10px; border-radius:10px; background-color:var(--main_color1);
	color:#fff; text-decoration:none;
	}
#RemoteSrhHospital .ListTable td.add_hospital a:hover, #RemoteSrhHospital .ListTable td.add_hospital a:focus { background-color:var(--main_color2); }
#RemoteSrhHospital  #Pagination { margin:20px 0 0; }

@media screen and (max-width: 1023px) {
#RemoteSrhHospital .ListTable table tr { padding:10px 15px; }
#RemoteSrhHospital .ListTable td.title { font-size:1.125rem; }
#RemoteSrhHospital .ListTable td.add_hospital:before { content:""; }
#RemoteSrhHospital .ListTable td.add_hospital a { line-height:40px; }
}
@media screen and (min-width: 1024px) {
#RemoteSrhHospital .ListTable { padding:20px; }
#RemoteSrhHospital .ListTable table th { padding:8px 12px; font-size:1rem; }
#RemoteSrhHospital .ListTable table td { padding:8px 12px; font-size:1rem; }
#RemoteSrhHospital .ListTable td.add_hospital { text-align:center; }
#RemoteSrhHospital .ListTable td.add_hospital a { line-height:32px; }
}


/*----------------------------------------------------------------------*/
/* 會員積分查詢 */
.box_mem_score { display:flex; align-items:center; flex-wrap:wrap; margin-bottom:-10px; }
.box_mem_score > div { margin:0 20px 10px 0; }
.box_mem_score > div span { display:block; }
.box_mem_score .label { line-height:1.5em; font-size:0.9375rem; font-weight:bold; }
.box_mem_score .score { 
	padding:5px 10px; border-bottom:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; background-color:#fff;
	line-height:1.25em; font-family:'Montserrat', sans-serif; font-size:1.25rem; font-weight:600; 
	}
	.box_mem_score .item .score { border-top:3px solid var(--main_color1); color:var(--main_color1); }
	.box_mem_score .total .score { border-top:3px solid var(--main_color2); color:var(--main_color2); }

/* 功能列 */
.MemScoreBar { margin:40px 0 20px; display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; position:relative; }
.MemScoreBar + .ListTable { margin-top:20px; }
.MemScoreBar a.anchor { position:absolute; left:0; top:-100px; }

.MemScoreBar .tabs { display:flex; flex-wrap:wrap; }
.MemScoreBar .tabs a { 
	display:flex; align-items:center; background-color:var(--color2); margin:0 15px 10px 0;padding:0 15px; border-radius:10px; position:relative;
	line-height:40px; color:#333; font-weight:bold; text-decoration:none; 
	}
.MemScoreBar .tabs a:last-child { margin-right:0; }
.MemScoreBar .tabs a:hover, .MemScoreBar .tabs a:focus, .MemScoreBar .tabs a.selected { background-color:var(--main_color1); color:#fff; }
.MemScoreBar .tabs a.selected::after { 
	content:''; display:block; position:absolute; top:100%; left:50%; margin-left:-8px;
	border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid var(--main_color1); 
	}

.MemScoreBar .total_mem_score {  }
.MemScoreBar .total_mem_score > div { display:inline-block; line-height:40px; font-size:0.875rem; }
.MemScoreBar .total_mem_score span { font-family:'Montserrat', sans-serif; font-weight:600; font-size:1.25rem; color:var(--main_color1); }

/* 列表 */
.ListTable.mem_score_list td.event_no { 
	width:4rem; white-space:nowrap; text-align:center; line-height:1.86em;
	font-size:0.9375rem; font-family:'Montserrat', sans-serif; font-weight:600; letter-spacing:.1em;
	}
.ListTable.mem_score_list td.score { font-family:'Montserrat', sans-serif; font-weight:600; }
@media screen and (min-width: 1024px) {
.ListTable.mem_score_list td.score { text-align:center; }
}


/*----------------------------------------------------------------------*/
/* 線上學習 */
/* 步驟 */
.CourseFlowChart { 
	display:flex; justify-content:space-around; max-width:960px; margin:10px auto 20px; 
	border:3px solid #ece7d7; background-color:rgba(255,255,255,.5); border-radius:20px; 
	}
.CourseFlowChart .step { width:150px; text-align:center; }
.CourseFlowChart .step .img { margin:0 auto 10px; background:url("../images/icon_course.png") no-repeat; background-size:100%; }
	.CourseFlowChart .step1 .img { background-position:0 0; }
	.CourseFlowChart .step2 .img { background-position:0 50%; }
	.CourseFlowChart .step3 .img { background-position:0 100%; }
.CourseFlowChart .step .title { line-height:1.5em; font-family:'Noto Sans TC', sans-serif; font-weight:700; letter-spacing:0.15em; }
.CourseFlowChart .step .desc { line-height:1.5em; font-size:0.875rem; color:#666; }
.CourseFlowChart .arrow { position:relative; }
.CourseFlowChart .arrow::before { 
	content:''; display:block; position:absolute; top:50%; left:0; margin-top:-3px; height:6px; background-color:#999;
	}
.CourseFlowChart .arrow::after { 
	content:''; display:block; position:absolute; top:50%; right:0; margin-top:-10px; 
	border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:12px solid #999; 
	}
@media screen and (max-width: 639px) {
.CourseFlowChart { padding:15px 10px; }
.CourseFlowChart .step .img { width:40px; height:40px; }
.CourseFlowChart .step .title { font-size:1.125rem; }
.CourseFlowChart .arrow { width:40px; }
.CourseFlowChart .arrow::before { width:80%; }
}
@media screen and (min-width: 640px) {
.CourseFlowChart { padding:20px; }
.CourseFlowChart .step .img { width:72px; height:72px; }
.CourseFlowChart .step .title { font-size:1.375rem; }
.CourseFlowChart .arrow { width:100px; }
.CourseFlowChart .arrow::before { width:90%; }
}

/* 列表 */
.CourseList { display:flex; flex-wrap:wrap; margin:0 -20px; }
.CourseList .item { padding:20px; }
.CourseList .item > div { position:relative; overflow:hidden; height:100%; margin-left:auto; margin-right:auto; background-color:#fff; border-radius:10px; transition:all 0.3s ease; }
.CourseList .item > div:hover { 
	transform:translateY(-5px);
	box-shadow:0 15px 10px -10px rgba(0, 0, 0, 0.3);
	}

.CourseList .img { overflow:hidden; }
.CourseList .img > div {padding-bottom:56.25%; background-repeat:no-repeat; background-position:center center; background-size:cover; }

.CourseList .cont { padding:0 20px 20px; }
.CourseList .cont .passed { position:absolute; top:10px; left:10px; background-color:var(--main_color2); border-radius:5px; padding:0 10px; line-height:24px; color:#fff; }
.CourseList .cont .tags { margin-top:-12px; margin-bottom:10px; }
.CourseList .cont .tags span { 
	display:inline-block; background-color:var(--color1); border-radius:5px; padding:0 5px; margin-right:5px;
	line-height:24px; color:#fff; font-family:'Montserrat', sans-serif; font-size:0.9375rem; 
	}
.CourseList .cont .title a { color:#333; font-size:1.125rem; font-family:'Noto Sans TC', sans-serif; font-weight:700; overflow-wrap:break-word; text-decoration:none; }
.CourseList .cont .title a:hover, .CourseList .cont .title a:focus { color:var(--main_color2); }
.CourseList .cont .info { display:flex; justify-content:space-between; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px solid #ccc; }
.CourseList .cont .info span { 
	display:block; line-height:1.5em; color:#666; font-size:0.875rem; 
	}

@media screen and (max-width: 539px) {
.CourseList .item { width:100%; max-width:400px; margin-left:auto; margin-right:auto; }
}
@media screen and (min-width: 540px) and (max-width: 899px) {
.CourseList .item { width:50%; }
}
	@media screen and (min-width: 540px) and (max-width: 639px) {
	.CourseList .item { padding:10px; }
	}
@media screen and (min-width: 900px) {
.CourseList .item { width:33.3333%; }
}
	@media screen and (min-width: 900px) and (max-width: 1339px) {
	.CourseList .item { padding:10px; }
	}

/* 內頁 */
.CourseBrief { display:flex; flex-wrap:wrap; }

.CourseTitle { width:100%; margin-bottom:20px; border-bottom:2px solid #f1ede1; padding-bottom:10px; }
.CourseTitle h3 { font-family:'Noto Sans TC', sans-serif; font-size:1.5rem; overflow-wrap:break-word; }

.CourseVideo > div { padding-bottom:56.25%; box-shadow:0 15px 10px -10px rgba(0, 0, 0, 0.3); border-radius:10px; overflow:hidden; position:relative; }
.CourseVideo iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; margin:0; }

.CourseInfo > div { background-color:#fff; box-shadow:0 15px 10px -10px rgba(0, 0, 0, 0.3); padding:20px; border-radius:10px; }
.CourseInfo .passed { display:inline-block; background-color:var(--main_color2); border-radius:5px; padding:0 10px; line-height:32px; color:#fff; font-weight:bold; }
.CourseInfo .info_list li { padding:3px 0; line-height:1.5em; font-family:'Montserrat', sans-serif; }
.CourseInfo .info_list li span { font-weight:500; font-family:'Noto Sans TC', sans-serif; }
.CourseInfo .go_to_quiz a { 
	display:inline-flex; align-items:center; background-color:var(--main_color1); border-radius:5px; padding:0 20px;
	line-height:48px; color:#fff; font-size:1.25rem; font-weight:bold; text-decoration:none; 
	}
.CourseInfo .go_to_quiz a:before { 
    content:''; display:inline-block; width:22px; height:22px; margin-right:8px; vertical-align:middle;
    background:url(../images/icon_btn_common.png) no-repeat 0 60%; background-size:200%;
	}
.CourseInfo .go_to_quiz a:hover, .CourseInfo .go_to_quiz a:focus { background-color:var(--main_color2); box-shadow:0 0 10px rgba(0,0,0,0.3); }

.CourseDesc { margin-top:60px; padding:40px; border:3px solid #ece7d7; background-color:rgba(255,255,255,.5); border-radius:20px; position:relative; }
.CourseDesc .label { 
	display:block; position:absolute; top:-24px; left:40px; padding:0 20px; background-color:var(--main_color2); border-radius:24px; 
    line-height:48px; color:#fff; font-family:'Noto Sans TC', sans-serif; font-weight:700; font-size:1.25rem; letter-spacing:0.15em;
	}
	@media screen and (max-width: 639px) {
	.CourseDesc {  padding:20px; }
	.CourseDesc .label { left:20px; }
	}

@media screen and (max-width: 959px) {
.CourseTitle { order:1; }
.CourseVideo { order:3; width:100%; margin-top:30px; }
.CourseInfo { order:2; width:100%; }
.CourseInfo > div { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:20px 20px 0 20px; }
	
.CourseInfo .passed { order:1; }
.CourseInfo .info_list { order:3; width:100%; margin:10px 0 0; }
.CourseInfo .info_list ul { display:flex; align-items:center; flex-wrap:wrap; margin-left:-30px; }
.CourseInfo .info_list li { margin:0 0 10px 30px; }
.CourseInfo .go_to_quiz { order:2; }
}
@media screen and (min-width: 960px) {
.CourseInfo > div { padding:20px; }
.CourseInfo .info_list { margin:20px 0; }
.CourseInfo .info_list ul { border-bottom:1px solid #e5e5e5; }
.CourseInfo .info_list li { border-top:1px solid #e5e5e5; display:flex; align-items:center; flex-wrap:wrap; }
.CourseInfo .info_list li span { 
	display:inline-block; width:4.2em; height:32px; line-height:32px; 
	text-align: justify;
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph; /*IE9*/
	-moz-text-align-last:justify; /*Firefox*/
	-webkit-text-align-last:justify; /*Chrome*/
	}
.CourseInfo .info_list li span::after { content:''; width:100%; display:inline-block; height:0; font-size:0; line-height:0; }/* fix text-align:justify在td中的bug */
}
	@media screen and (min-width: 960px) and (max-width: 1279px) {
	.CourseVideo { width:72%; }
	.CourseInfo { width:28%; padding-left:20px; }
	}
	@media screen and (min-width: 1280px) {
	.CourseVideo { width:70%; }
	.CourseInfo { width:30%; padding-left:40px; }
	}

/* 測驗 */
.CourseQuiz { 
	margin:40px 0 40px; padding:40px; border:3px solid #ece7d7; background-color:rgba(255,255,255,.5); border-radius:20px; position:relative; font-family:'Noto Sans TC', sans-serif; 
	}
.CourseQuiz .label { 
	display:block; position:absolute; top:-24px; left:40px; padding:0 20px; background-color:var(--main_color2); border-radius:24px; 
    line-height:48px; color:#fff; font-family:'Noto Sans TC', sans-serif; font-weight:700; font-size:1.25rem; letter-spacing:0.15em;
	}
	@media screen and (max-width: 639px) {
	.CourseQuiz {  padding:30px 20px 20px; }
	.CourseQuiz .label { left:20px; }
	}
.CourseQuiz .course_title { 
	margin:10px 0 30px; border-bottom:2px solid #f1ede1; padding-bottom:10px; font-family:'Noto Sans TC', sans-serif; font-weight:700; font-size:1.5rem; overflow-wrap:break-word; 
	}

.CourseQuiz .ques_item { margin-top:30px; }
.CourseQuiz .ques { font-weight:700; font-size:1.25rem; line-height:44px; overflow-wrap:break-word; position:relative; }
.CourseQuiz .ques .no { display:inline-block; font-family:'Montserrat', sans-serif; font-weight:600; }
.CourseQuiz .option { margin-top:10px; font-weight:500; }

/* checkbox/radio群組 */
.CourseQuiz .input_group .item { line-height:2em; position:relative; }
.CourseQuiz .input_group label { cursor:pointer; }
.CourseQuiz .input_group input.origin { position:absolute; z-index:-1; opacity:0; width:0; height:0; }
.CourseQuiz .input_group .indicator { 
	display:inline-block; width:20px; height:20px; vertical-align:middle; margin:0 3px 0.25em 0; 
	border:3px solid #ccc; background-color:#fff; position:relative; 
	}
.CourseQuiz .input_group input.origin[type="radio"] + .indicator { border-radius:50%; }
.CourseQuiz .input_group input.origin:checked + .indicator { border-color:var(--main_color2); }
	
.CourseQuiz .input_group .indicator::after { display:none; content:''; position:absolute; }
	.CourseQuiz .input_group input.origin[type="radio"] + .indicator::after { 
		top:50%; left:50%; width:10px; height:10px; margin:-5px 0 0 -5px; background-color:var(--main_color2);
		border-radius:50%;
		}
.CourseQuiz .input_group input.origin:checked + .indicator::after { display:block; }
	
.CourseQuiz .input_group .text { display:inline-block; user-select:none; }
.CourseQuiz .input_group input.origin:checked ~ .text { color:var(--main_color2); }

@media screen and (max-width: 639px) {
.CourseQuiz .input_group .item { margin:0 0 10px 0; }
}
@media screen and (min-width: 640px) {
.CourseQuiz .ques { padding-left:55px; }
.CourseQuiz .ques .no { 
	position:absolute; top:0; left:0; background-color:var(--main_color1); border-radius:50%;
	width:44px; height:44px; line-height:44px; color:#fff; text-align:center; 
	}
.CourseQuiz .ques .no::after { content:''; position:absolute;
    bottom:8px; right:-8px; width:0; height:0;  
    border-style: solid;
    border-width: 0 10px 8px 4px;
    border-color: transparent transparent var(--main_color1) transparent;
	}
.CourseQuiz .option { padding-left:55px; }

.CourseQuiz .input_group .item { display:inline-block; margin:0 25px 10px 0; }
}

/* 測驗結果 */
.CourseQuizResult { 
	background-color:rgba(255,255,255,.5); border-radius:20px; box-shadow:2px 2px 17px rgba(0,0,0,0.14); position:relative;
	padding:40px 30px 20px; max-width:480px; margin:30px auto; line-height:2em; 
	}
	.CourseQuizResult.passed { border:3px solid var(--color1); }
	.CourseQuizResult.failure { border:3px solid #999; }
.CourseQuizResult .label {
	display:block; position:absolute; top:-24px; left:50%; width:150px; margin-left:-75px; border-radius:24px; 
    line-height:48px; text-align:center; color:#fff; font-family:'Noto Sans TC', sans-serif; font-weight:700; font-size:1.25rem;
	}
	.CourseQuizResult.passed .label { background-color:var(--color1); }
	.CourseQuizResult.failure .label { background-color:#999; }
.CourseQuizResult .course_title { 
	border-bottom:2px solid #f1ede1; padding-bottom:10px; font-family:'Noto Sans TC', sans-serif; font-weight:700; overflow-wrap:break-word; 
	}

.CourseQuizResult .score { display:flex; align-items:center; justify-content:space-around; flex-wrap:wrap; margin:10px 0; }
.CourseQuizResult .score > div { margin:0 0 10px 0; line-height:2em; font-size:0.9375rem; font-weight:bold; }
.CourseQuizResult .score > div span { 
	display:block; padding:20px 10px; border-bottom:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; background-color:#fff;
	line-height:1.25em; text-align:center; font-family:'Montserrat', sans-serif; font-size:2rem; font-weight:600; 
	}
	.CourseQuizResult .score .quiz_score span { border-top:3px solid var(--main_color2); color:var(--main_color2); }
	.CourseQuizResult.failure .score .quiz_score span { border-top:3px solid #999; color:#999; }
	.CourseQuizResult .score .passing_score span { border-top:3px solid var(--main_color1); color:var(--main_color1); }
	
.CourseQuizResult .result { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; margin:15px 0; text-align:center; font-weight:bold; }
.CourseQuizResult .result span { margin:0 3px; font-family:'Montserrat', sans-serif; font-size:1.375rem; color:var(--main_color2); }
.CourseQuizResult .result::before { 
	content:''; display:inline-block; vertical-align:middle; width:32px; height:32px; margin-right:6px; 
	background:url(../images/icon_course_quiz_result.png) no-repeat; background-size:100%;
	}
	.CourseQuizResult.passed .result::before { background-position:0 0; }
	.CourseQuizResult.failure .result::before { background-position:0 100%; }

.CourseQuizResult .btn { text-align:center; }
.CourseQuizResult .btn a { 
	display:inline-block; border-radius:24px; padding:0 20px; 
    line-height:48px; text-align:center; color:#fff; font-weight:bold; text-decoration:none;
	}
	.CourseQuizResult.passed .btn a { background-color:var(--color1); }
	.CourseQuizResult.failure .btn a { background-color:#999; }
.CourseQuizResult .btn a:hover, .CourseQuizResult .btn a:focus { background-color:var(--main_color2); }


/*----------------------------------------------------------------------*/
/* 會員會費查詢 */
.ListTable td.mem_fee { font-family:'Montserrat', sans-serif; font-weight:600; letter-spacing:.1em; white-space:nowrap; text-align:center; }


/*----------------------------------------------------------------------*/
/* 理監事會議紀錄/年會籌備會議紀錄 */
/* 標題 */
.MemFileTitle { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:20px 0; padding-bottom:10px; position:relative; }
.MemFileTitle::before { content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:4px; background-color:var(--color2); border-radius:2px; }

.MemFileTitle h3 { 
	font-weight:400; font-size:1.5rem; line-height:49px; letter-spacing:0.1em; 
	font-family:'Montserrat', 'Noto Sans TC', 'Heiti TC', '黑體-繁', 'Microsoft JhengHei', '微軟正黑體', sans-serif;
	}
.MemFileTitle h3 .expire { color:var(--main_color1); font-weight:600; }
.MemFileTitle h3 .period { display:inline-block; margin-left:10px; vertical-align:top; font-weight:900; font-size:0.9375rem; color:#6c6c6c; }
.MemFileTitle .search { display:flex; align-items:center; flex-wrap:wrap; }
.MemFileTitle .search > div { margin-right:5px; vertical-align:middle; }
	.MemFileTitle .search > div:last-child { margin-right:0; }
.MemFileTitle .search .btn button { background-color:var(--main_color1); padding:0 15px; color:#fff; line-height:40px; font-size:1rem; border-radius:5px; }
.MemFileTitle .search .btn button:hover, .MemFileTitle .search .btn button:focus { background-color:var(--main_color2); box-shadow:0 0 10px rgba(0,0,0,0.2); }

/* 清單 */

.MemFileList .file_item { 
	display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; transition:all 0.3s ease;
	margin:15px 0; line-height:1.5em; background-color:#fff; border:1px solid var(--color2); padding:0.25em 1em; border-radius:10px;
	}
.MemFileList .file_item:hover { background-color:#f9f6ee; box-shadow:0 0 15px rgba(0,0,0,0.15); }
.MemFileList .link { display:flex; align-items:center; flex-wrap:wrap; }
.MemFileList .link span { display:inline-block; margin-right:6px; }
.MemFileList .link .name a { 
	display:block; padding:0.5em 0; font-family:'Noto Sans TC', sans-serif; line-height:1.5em; color:#333; text-decoration:none; 
	}
.MemFileList .link .name a:hover, .MemFileList .link .name a:focus { color:var(--main_color2); }
.MemFileList .link .file_ext { width:24px; height:24px; }
.MemFileList .date { padding:10px 0; font-family:'Montserrat', sans-serif; font-size:0.9375rem; color:#666; }

.MemFileList .file_cat { 
	margin:15px 0; background-color:var(--color2); padding:0.75em 1em; border-radius:10px; 
	font-family:'Noto Sans TC', sans-serif; line-height:1.5em; color:#333; 
	}
.MemFileList li > ul { margin-left:2em; }