@import "../css/superfish.css";

/* CSS Document */

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }
	body {
		line-height: 1; }
	ol, ul {
		list-style: none;  }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }
    input,select,textarea{ box-sizing:border-box; -moz-box-sizing:border-box; webkit-box-sizing:border-box; }
    a,
    a:visited {
    text-decoration: none; }
	.clearfix:after {	content: ".";	display: block;	height: 0;	visibility: hidden;	clear: both;}
	/* IE pretty stick*/
	* html .clearfix {	height: 1%;} /* IE6 */
	*:first-child+html .clearfix { min-height: 1px;} /* IE7 */
	* {
	  outline: none;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	}

/*menu with jquery.horizontalNav.js*/
html, body {
	background: #ffffff;
	font: 14px/21px Arial, sans-serif;
	color: #787878;
	min-width:300px;
}

/* ------------------------------------------------ all page ------------------------------------------------ */

a{ color:#3387a2; }

.header {background: #FFF; border-bottom: #d1d1d1 2px solid; position: fixed; top: 0;
 width: 100%;
 z-index: 999;
-moz-box-shadow: 4px 4px 12px 4px rgba(20%,20%,20%,0.1);
-webkit-box-shadow: 4px 4px 12px 4px rgba(20%,20%,20%,0.1);
box-shadow: 4px 4px 12px 4px rgba(20%,20%,20%,0.1);
}

.header-top{ 
	width: 980px; 
	padding:0; 
	margin: 20px auto 0;
}

.logo{
	float: left;
}

.logo img{ 
	max-height: 72px; 
	margin-right: 20px;
}
.anchor{
  display: block;
  height: 150px; /*same height as header*/
  margin-top: -150px; /*same height as header*/
  visibility: hidden;
}
.search {
	float: right;
	margin: 22px 0 0 10px;
	border: #bbbbbb 1px solid;
	background: #FFF;
	width: 210px;
	height: 28px;
}

.search .input_search {
	width: 170px;
	border: none;
	outline: none;
	background: none;
	vertical-align: top;
	position: relative;
	top: 5px;
	margin-left: 6px;
}

.search .rinput {
	background: url("../images/sraech_03.jpg") no-repeat center;
	border: none;
	width: 27px;
	height: 27px;
	cursor: pointer;
}

.search .rinput:focus{
	outline: none;
}

.icon{
	float: right;
	margin: 25px 0 0;
}

.back-home,.btn-email{
	display: inline-block;
	border: none;
	width: 30px;
	height: 30px;
	cursor: pointer;
}

.back-home{
	background: url("../images/icon.png") no-repeat;
	background-position: 0 0;
}

.btn-email{
	background: url("../images/icon.png") no-repeat;
	background-position: -35px 0;
}

.content{
	position: relative;
	max-width: 980px;
	margin: 150px auto 0;
}
@media only screen and (max-width: 767px) {
	.content{ padding: 20px; }
	.logo img{ 
		max-width: 270px;
		vertical-align: top;
	}
	.search{
		position: absolute;
		right: 20px;
		bottom: 50px;
	}
	.icon{
		position: absolute;
		right: 236px;
		bottom: 42px;
	}
}

.content-detail{ width: 100%;margin: 20px 0;}

.pad-bom{ padding-bottom:50px; }


/* ------------------------------------------------ banner ------------------------------------------------ */

#banner{z-index:-1;height:auto;overflow:hidden;/*min-width:100%;*/ }

/*banner*/
.banner{ display: 980% }
.banner img{ width: 100%; }
.banner_slider { width: 100%; height: 290px; position:relative;overflow:hidden;z-index:1;}
.banner_slider img{ width: 100%; }
.pagination {overflow:hidden;position:absolute;right:450px;top:396px;z-index:22;}	
.pagination li {margin-left:4px;float:left;}	
.pagination li a {width:11px;height:11px;display:inline-block;background: url(../img/pagination_bg.png) right 0 no-repeat;}	
.pagination li.current a, .pagination li a:hover {background-position:left 0;}	
.bannerswitcher{ position: relative; width: 100%; text-align: center; }
.switcher{position: absolute; z-index: 99; height: 40px; text-align: center; bottom: 0;}
.switcher a{cursor:pointer;background:none;border:none;color:#999999;font-weight:bold;font-family: Georgia, "Times New Roman", Times, serif;font-size: 30pt;padding: 20;font-style: normal;}
.switcher a.cur,.switcher a:hover{background:none;border:none;color:#00afd8;font-weight:bold;font-family: Georgia, "Times New Roman", Times, serif;	font-size: 30pt;}


/*.bannerswitcher{ bottom:6px !important; right: 400px !important; }
.switcher{position: absolute; bottom: -11px; right: -8px; float: right; z-index: 99; height: 55px; width: 150px;}
.switcher a{cursor:pointer;background:none;border:none;color:#999999;font-weight:bold;font-family: Georgia, "Times New Roman", Times, serif;font-size: 30pt;padding: 20;font-style: normal;}
.switcher a.cur,.switcher a:hover{background:none;border:none;color:#00afd8;font-weight:bold;font-family: Georgia, "Times New Roman", Times, serif;	font-size: 30pt;}
/* slider3*/
#slider3 .conbox div{width:980px;height:250px;}
#slider3 .conbox .zx1{position: absolute; z-index: 1; opacity: 0;}
#slider3 .conbox .zx9{position: absolute; z-index: 9; opacity: 1}
@media only screen and (max-width: 767px) {
	.banner_slider{ width: 100%; margin-top:0; height: 185px; }
	.banner_slider img{ width: 100%; }
	#slider3 .conbox div{width:100%;}
	.switcher{ height: 30px; }

}
@media only screen and (max-width: 479px) {
	.banner_slider{ width: 100%; margin-top: 40px; height: 115px; }
	.banner_slider img{ width: 100%; }
	#slider3 .conbox div{width:100%;}
	.switcher{ height: 30px; }
}


/* -------------------------------------------- path-link ---------------------------------------------- */

.path-link{width: 100%; margin: 10px 0; color: #333}
.path-link a{ color: #474e55; margin: 0 10px;}

/* -------------------------------------------- content-info ---------------------------------------------- */

.row{display: block;}
.row .com-2,.row .com-4{ display: inline-block; vertical-align: top; }
.row .com-2{ width: 48%; }
.row .com-4{ width: 24%; margin-right: 25px; }
.row .end{ margin: 0}
@media only screen and (max-width: 767px) {
	.row .com-2, .row .com-4{ display: block; width: 100%; }
}

.content-info{ width: 100%; padding: 20px 0 20px 10px;}

.info-list .row,.info-new .row{ display: block;}
.info-new{ width: 100%; margin: 0 0 25px; }
.info-new .new-box{ border: #c8c8c8 1px solid; border-radius: 10px; }

@media only screen and (max-width: 767px) {
	.info-new .new-box{ margin-bottom: 20px;}
}
.info-new .new-box.left-mar{ margin-right: 20px}	
.info-new h2.title{ position: relative; color: #3399cc; font-size: 18px; padding: 10px 15px;
border-top-left-radius:10px;
border-top-right-radius:10px;
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #ECECEC 100%); 
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #ECECEC 100%);
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #ECECEC 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #ECECEC));
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #ECECEC 100%);
background-image: linear-gradient(to top, #FFFFFF 0%, #ECECEC 100%);
border-bottom: #c8c8c8 1px solid;
}
.info-new .more{ position: absolute; top: 10px; right: 20px; color: #3399cc; font-size: 12px;}
.info-new ol{padding: 6px 15px; }
.info-new ol li{ border-bottom: #c8c8c8 1px dotted; padding: 8px 12px; }
.info-new ol li .time{ color: #999; }
.info-new ol li .msg{ color: #333;}
.info-new ol li.end{ border-bottom: none;}

.info-list{width: 100%; margin: 10px auto; padding: 0 0 0 20px;}
.info-list .info-box{ width: 210px; padding-bottom: 42px; background:url("../img/box_line.png") no-repeat bottom center ;  }
.info-list .info-box p{ display: block; text-align: center; margin: -10px 0; font-size: 15px; padding: 15px 0 10px; background: #f1f1f1 }
@media only screen and (max-width: 767px) {
	.info-list .info-box{ margin: 20px auto; }
}

/* ------------------------------------------------ nav ------------------------------------------------ */
nav { 
	position:relative; 
	z-index: 11;
	text-align: center;
	/*width: 980px;
	margin: 0 auto;*/
}

.sf-menu{ display: block; width: 980px; margin: 0 auto;}

.sf-menu ul {position:absolute;top:-999px; display:none;/* left offset of submenus need to match (see below) */}
.sf-menu li { padding-left:0px; position:relative; background: none;}
	.sf-menu a {
		display: block;
		text-decoration: none;
		font-family: 'Open Sans', sans-serif;
		font-weight: 100;
	}
		.sf-menu a:hover {text-decoration: none;}
		.sf-menu li:hover span {color:#ffffff;}

/*  nav - 1 Level */

li.sfHover {position: relative;}

.sf-menu > li > a {
	position: relative;
	display:block;
	padding: 16px 0px 15px;
	text-align: center;
	font-size: 15px;
	line-height: 20px;
	color: #474e55;
	-moz-transition: background 0.3s ease-out;
    -o-transition: background 0.3s ease-out;
    -webkit-transition: background 0.3s ease-out;
    background: url(../img/arrow-1.png) center 100px no-repeat;
}
.sf-menu > li {
	display: block;
	padding: 0 25px;
	float: left;
	position: relative;
}
	.sf-menu > li.current > a,
	.sf-menu > li:hover > a,
	.sf-menu > li.sfHover > a { color: #4491cd;	}

	.sf-menu > li:hover > a, 
	.sf-menu > li.current > a, 
	.sf-menu > li.sfHover > a,
	.sf-menu > li:hover > span, 
	.sf-menu > li.current > span, 
	.sf-menu > li.sfHover > span {
		text-decoration: none;
	}
	.sf-menu > li > a:hover,
	.sf-menu > li.sfHover > a,
	.sf-menu > li.current > a { background: url(../img/arrow-1.png) center bottom no-repeat;}

.sf-menu li span {
	position: relative;
	right: 0px;
	top: 0px;
	display: none;
}

/*  nav -  2 Level */
.sf-menu > li > ul, 
.sf-menu > li.sfHover > ul {
	width: 150px;
	top:51px;
	z-index:99;
	background: #888787;
	text-align: left;
	padding: 0;
	margin-left: -20px;
}
.sf-menu > li > ul > li { display: block; height: auto; border: none; margin: 0; padding:13px 10px 6px;}

.sf-menu > li > ul > li > a {
	display: inline-block;
	color: #fff;
	border: none;
	font:14px Arial, sans-serif;
	-moz-transition: color 0.3s ease-out;
    -o-transition: color 0.3s ease-out;
    -webkit-transition: color 0.3s ease-out;
}

.sf-menu li li:hover{ 
	background: #bbbaba
}

.sf-menu li li a:hover, 
.sf-menu li.sfHover li.sfHover>a,
.sf-menu li li:hover span,
.sf-menu li.sfHover li.sfHover span { 
	text-decoration: none;
	color: #FFF;
}
.sf-menu li li:hover, 
.sf-menu li.sfHover li.sfHover { }

.sf-menu > li.sfHover > span {
	color: #ffffff;
}

	.sf-menu > li > ul .sf-sub-indicator {line-height: 14px;}

/*  nav -  3 Level */

.sf-menu li li ul {
	left: 111px;
	top: -14px;
	/*width: 99px;*/
	z-index:99;
	background: #888787;
	position: absolute;
	padding:0 19px 0 0;
	margin-top: 0;
	text-align: left;
}
.sf-menu li li li {width: 100%; padding: 6px 0 5px 19px;}
.sf-menu li li li a {
	display: inline-block;
	text-align: left;
	text-decoration: none;
	color: #ffffff;
	padding: 3px 0 4px;
	font: 15px/15px Arial, sans-serif;
	-moz-transition: color 0.3s ease-out;
    -o-transition: color 0.3s ease-out;
    -webkit-transition: color 0.3s ease-out;
}
.sf-menu li li li:hover {}
.sf-menu li li li:hover a {	color: #868686;}
.sf-menu > li > ul .sf-sub-indicator {color: #ffffff; line-height: 15px;}
.sf-menu > li > li.sfHover > span {
	color: #ffffff;
}

/*  nav - RESPONSIVE LAYOUTS */

@media only screen and (max-width: 995px) {
	nav {margin-bottom: 0px;}
}
@media only screen and (max-width: 795px) {

		.block-3 ul li img {
			width: 100%;
		}
}
@media only screen and (max-width: 767px) {
	.content{ margin: 80px auto 0; }
	.sf-menu { display:none !important;}

	nav select {
		width: 95%;
		height: 35px;
		border: 1px solid #999;
		font-family: Arial, sans-serif; 
		font-size: 14px;
		line-height: 20px;
		color: #666;
		background-color: #FFF;
	    outline: none;
	    padding: 5px;
		font-weight: normal;
		margin: 5px auto;
	}

	nav select option:first-child {
		color:#ffffff;
	}
}

/* -------------------------------------------- home ---------------------------------------------- */

.content-detail h1{ color: #4491cd; font-size: 24px; border-left: #4491cd 10px solid; padding:10px; }
.detail-txt{ color: #333; font-size: 16px; line-height:28px; }
.detail-txt li{ }
.detail-txt li.title,.left-block li.title{ font-weight: 700; margin: 10px 0 5px; }
.detail-txt li.space,.left-block li.space,.donation li.space,h2.space{ margin-top: 30px;}
.detail-txt li.img-block{ text-align: center;}
.detail-txt li img{ margin: 0 -5px 0 0; padding-bottom: 0;}
@media only screen and (max-width: 767px) {
	.detail-txt li img{ text-align: center; padding: 10px 10px 0;}
}
.detail-txt li .list-decimal{ margin-left: 26px;}
.list-decimal li{ list-style: decimal; }
.detail-txt li img.img-space{ margin-right: 40px;}
@media only screen and (max-width: 767px) {
	.detail-txt li img{ max-width: 345px;}
}

/* -------------------------------------------- sister ---------------------------------------------- */

.distributed{width: 100%;margin:20px 0;padding: 0;}
.distributed .left-block,.distributed .right-block{ display: inline-block; width: 49%; vertical-align: top;}

.left-block{display: block; width: 100%; font-size: 16px;vertical-align: top; }
.left-block ol{ display: inline-block; vertical-align: top; margin-right: 20px; }
.left-block ol.row-3{ width: 105px; }
.left-block ol li.txt-spac{ width: 200px; }
@media only screen and (max-width: 767px) {
	.distributed .left-block,.distributed .right-block{ display: inline-block; width:100%; vertical-align: top; margin: 10px 0;}
	.distributed .right-block img{ width: 100%;}
	.left-block ol,.left-block ol.row-3{  width: 48%; margin-right: 0; }
}
/* -------------------------------------------- Donation ---------------------------------------------- */

.donation{ font-size: 16px; }
.donation.row-2{ display: block; margin: 20px 0; padding-bottom: 20px; border-bottom: #c8c8c8 1px dotted; }
.donation.row-2 .com-1,.row-2 .com-2{ display: inline-block; vertical-align: top; }
.donation.row-2 .com-1{ width: 30%; text-align: center; padding-top: 20px;}
.donation.row-2 .com-2{ width: 65%; text-align: left; margin: 10px 0 30px 20px; }
.donation h2{ color: #ff6600; font-size: 16px; margin: 0 0 30px 0; }
.list-disc li{ list-style: disc; margin-left: 20px; }

@media only screen and (max-width: 767px) {
	.donation.row-2{ margin: 0; }
	.donation.row-2 .com-1{ display: block; width: 100%; text-align: center; padding: 30px 0 0; }
	.donation.row-2 .com-2{ width: 95%; }
	.act-img img{ width: 100%; } 
}

/* -------------------------------------------- Donation ---------------------------------------------- */

.events-list{ margin: 10px 0; padding-bottom: 10px; border-bottom: #ffbd91 3px solid; }
.events-list.detial{ border-bottom: none;}
.events-list li{ width: 95%; margin: 0 auto; border-bottom: #c8c8c8 1px dotted; padding: 10px 0; }
.events-list li.title,.events-list li.end,.events-list li.content-txt,.events-list li.back{ border-bottom: none; }
.events-list li.back,.events-list li.back a{ color: #ff6600; font-size: 14px; text-align: center; }
.events-list li .time{ color: #999; margin-right: 20px; }
.events-list li a{ color: #333; }
.page-num-list{ margin: 20px 0; text-align: center; }
.page-num-list li{ display: inline-block; border-radius: 4px; border:#d2d2d2 1px solid; background: #FFF; padding: 4px 10px 2px; margin: 4px; font-size: 13px; color: #4e4e4e; cursor: pointer; }
.page-num-list li.active,.page-num-list li:hover{ background:#ff6600; color: #FFF; }
.events-list li.title-name{ font-weight: 700;}
.events-list li.content-txt,.events-list li.content-txt img{ padding: 20px 0; }

/* -------------------------------------------- announcement ---------------------------------------------- */

.anno-block{ width: 100%; display: block; }
.anno-block .anno-inblock{ display: inline-block; width: 46%; text-align: left; vertical-align: top; }
.anno-block .anno-inblock.first{ margin-right: 70px;}
.anno-inblock .anno-txt,.anno-inblock .anno-btn{ display: inline-block; vertical-align: top; padding: 10px 0; }
.anno-inblock .anno-txt{ width: 49%; }
.anno-inblock .anno-btn{ width: 40%; margin: 6px 4px;}
.search-btn{ display: inline-block; color: #FFF; padding: 2px 20px; text-align: center;
background-image: -ms-linear-gradient(top, #CDCDCC 0%, #1B1B1B 100%);
background-image: -moz-linear-gradient(top, #CDCDCC 0%, #1B1B1B 100%);
background-image: -o-linear-gradient(top, #CDCDCC 0%, #1B1B1B 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CDCDCC), color-stop(1, #1B1B1B));
background-image: -webkit-linear-gradient(top, #CDCDCC 0%, #1B1B1B 100%);
background-image: linear-gradient(to bottom, #CDCDCC 0%, #1B1B1B 100%);
}
.anno-list{ border-bottom: #c8c8c8 1px dotted; }
.anno-list .anno-txt{ text-align: center; padding-top: 24px; }
span.list-type{ background: #808080; width: 10px; height: 10px; display: inline-block; vertical-align: top; margin:5px 10px; }
.anno-txt .time{ font-size: 20px; }
@media only screen and (max-width: 767px) {
.anno-block .anno-inblock{ display: inline-block; width: 100%; text-align: left; vertical-align: top; }
.anno-block .anno-inblock img{ width: 100%; }
.anno-block .anno-inblock.first{ margin-right: 0; margin-bottom: 20px;}
.anno-inblock .anno-txt{ width: 66%; }
.anno-inblock .anno-btn{ width: 22%; }
.anno-inblock .anno-btn img{ width: 53px; height: 39px; }
}

/* -------------------------------------------- back_to_up ---------------------------------------------- */

.back_to_up{ width:100%; text-align:right; cursor:pointer; margin: 20px 0;}

/* -------------------------------------------- 下拉選單區塊 ---------------------------------------------- */
.select_menu {
    margin:5px 5px 5px 0;
	background: url("../img/select_icon_20.png") right no-repeat #FFF;
	width:220px;
	height:28px;
	border: 1px solid #bcbcbc;
	display:inline-block;
	float:left;
}
.select_menu ul li {
	display: block;
	float: left;
	position: relative;
}
/* 下拉選單的高度－可自修改 */
.select_menu ul li ul {
	margin: -33px -1px 0;
	display: none;
	position: absolute;
	width: 220px;
	z-index: 350;
	border: 1px solid #abadb3;
	height: auto;
	overflow: auto;
	border-image: initial;
	-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;
	z-index:500;
	height:auto;
	max-height:350px;
	overflow:auto;
}
 
.select_menu ul li ul li {
	background: #fff;
}
 
.select_menu ul li ul li a {
	display: block;
	padding: 2px 20px;
	font-size: 12px;
	overflow: hidden;
	line-height: 29px;
	color:#555;
}
/* 子層選單 */
.select_menu ul li ul li ul.children{
	margin: -4px 0 0;
	display: none;
	position: inherit;
	width: 100%;
	z-index:none;
	border: 0;
	height:inherit;
}
 
.select_menu ul li ul li ul.children li a{padding-left:30px;}
/* 當選到時－可自行修改圖示 */
.option_selected {
    color: #555;
    display: block;
    font-size: 12px;
    line-height: 29px;
    margin-top: 1px;
    padding: 0 8px;
    position: relative;
    width: 210px;
    z-index: 400;
	
}
 
.option_list li{
	float:none;
	width:100%;
}
/* 滑入選項變色－可自修改*/
.hovered_item{
	background: #eee;
	font-weight: bold;
	color:#333;
}

.marbom15{ margin-bottom:15px }

/* ------------------------------------------------ footer ---------------------------------------------------*/

/* footer */
#footer{ width:100%; background:#7a7a7a; height:auto; }
#footer .footercontent{ max-width: 980px; margin:0 auto;padding:40px 0;}
.qrcode,.footer_text{vertical-align: top;}
.qrcode{ display: inline-block; ;width:18%; text-align:center;padding-left:10px; padding-right: 10px;}
.qrcode img{ margin-top: 10px }
.footer_text{display: inline-block; ;width:36%; font-size:13px;text-align:left;color:#e3e3e3;border-left:#b6babd 1px solid;padding-left:19px;  min-height: 100px;}
.footer_text ul{ margin:10px 0 0 1px}
.footer_text li{ padding-bottom:3px}
.footer_text li.img{ padding:7px 0}
.footer_text ul.end{ width: 420px;}

@media only screen and (max-width: 767px) {
	#footer .footercontent{ padding: 20px;}
	.qrcode{display: block; width: 100%; text-align: center;border-bottom:#b6babd 1px solid; padding-bottom: 20px; }
	.footer_text{ display: block; width: 100%; border: none; border-bottom:#b6babd 1px solid; padding: 20px 0; }
}