@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
	margin: 0;
	height: 100%;
	font-family:"微軟正黑體";
	background-color: #f0f0f0;
	background-image: url(../../bg/bg27.png);
	width: 100%;
 
}
#gotop{
	width:190px;
	/*height:195px;*/
	position:fixed;
	_position: absolute; /* position fixed for IE6 */



  _top:expression(documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-10);
	z-index:1;
	bottom: 25%;
	text-align: center;
	margin-right: -700px;
	right: 50%;
	background-color: #000;
	color: #FFF;
	border-radius: 10px;
	opacity: 0.8;
	font-size: 16px;
}
#gotop a {
	font-size: 16px;
	color: #FFF;
	text-decoration: none;
	display: block;
	height: 20px;
	width: 190px;
	padding-top: 9px;
	padding-bottom: 9px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #626262;

}
#gotop a:visited {
	color: #FFF;
	text-decoration: none;
}
#gotop a:hover {
	color: #FF0;
	text-decoration: none;
}
#gotop a:active {
	color: #FF0;
	text-decoration: none;
}
#gotop a:last-child {
	border-bottom-style: none;
}
#header-share {
	text-align: center;
	width: 900px;
}

#header-rwd {
	display: none;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
#noie{
	color: #FFF;
	width: 100%;
	height: 70px;
	text-align: center;
	border: 1px solid #006699;
	background-color: #669933;
	_z-index: 9999;
	z-index: 9999;
	position: fixed;
	 _top:expression(documentElement.scrollTop+"px");/*讓選單覆蓋內容不會隨著捲軸滑動而消失專用*/
	left: 0;
	top: 0;
}
#noie a{
	color: #FC0;
}
#BodyContent {
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	width: 1000px;
	background-color: #fff;
	_background-image: url(img_02.png);
	_background-repeat: repeat;
}
.logo img, .logo2 img {
	width: 100%;
	display: block;
}

#content  {
	background-color: #fff;
	height: auto;
	clear: both;
	float: none;
	padding: 0 10%;
	width: 80%;
}


ul div{
    /*background-color: #fff;*/
    border-bottom-width: 2px;
    border-bottom-style: double;
    border-bottom-color: #fff;
}
 .NewsStyle {
	color: #000;
	margin: 0px;
	padding: 0px;
}
 .NewsStyle a {
	font-size: 18px;
	line-height: 1.5em;
	color: #000;
	text-decoration: none;
}
 .NewsStyle a:visited {
	color: #000;
	text-decoration: none;
}
 .NewsStyle a:hover {
	color: #000;
	text-decoration: underline;
}
 .NewsStyle a:active {
	color: #FFF;
	text-decoration: underline;
}


#content table {
	clear: both;
	float: none;
	zoom: 1;
}
#content  td {
	font-size: 17px;
	color: #000;
	line-height: 1.5em;
	padding: 5px;
}
#content td h4{
	font-size: 20px;
    margin: 0;
}


#content td a , #content td a:visited{
	color: #fff;
    text-decoration: underline;
}
#content td a:hover {
	color: #900;
	text-decoration: underline;
}



.hidden_D {	
    display: none;
}


.more {
	width: 80%;
	max-width: 900px;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #900;
	clear: both;
	float: none;
	padding-right: 10%;
	padding-left: 10%;
}
.more ul {
	clear: both;
	float: none;
}
.more p {
	font-size: 18px;
	font-weight: normal;
	color: #FF0;
	margin: 0px;
	padding: 0px;
}
.more ul {
	margin: 0px;
	list-style-position: outside;
	list-style-type: disc;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 25px;
}
.more .NewsStyle {
	color: #FFF;
	margin: 0px;
	padding: 0px;
}
.more .NewsStyle a {
	font-size: 15px;
	line-height: 1.5em;
	color: #FFF;
	text-decoration: none;
}
.more .NewsStyle a:visited {
	color: #FFF;
	text-decoration: none;
}
.more .NewsStyle a:hover {
	color: #FFF;
	text-decoration: underline;
}
.more .NewsStyle a:active {
	color: #FFF;
	text-decoration: underline;
}

/*元照書屋*/
.popout::before {content: ''; width: 100%; height: 100%; background-color: rgb(0 0 0 / 50%); position: fixed; z-index: 9; top: 0; left: 0; animation: fadeIn 0.5s ease-in 0.5s both; pointer-events: none;}
.popout {width: 100%; height: 100%; display: none;}
.popup {position: fixed; right: 0; left: 0; top: 50%; bottom: auto; z-index: 999; margin: auto; animation: fadeInUp 0.5s ease 0.5s both;}
@keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
  
    to {
      opacity: 1;
      transform: none;
    }
}
.lightbox li {display: inline-block; margin: 0.25rem;}
.lightbox {position: fixed; left: 50%; transform: translate(-50%, -50%); background: rgba(255,255,255,.85); width: 850px; z-index: 2;}
@media screen and (max-width: 1000px) {    
    .lightbox {width: 75%;}
}
.close, .close2 {display: block; width:40px; height:40px; box-sizing: border-box; background: white; color: black; text-decoration: none; position: absolute; top: 0; right: 0;}
.close:before , .close2:before {content: ""; display: block; height: 30px; width: 1px; background: black; position: absolute; left: 20px; top: 5px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);}
.close:after , .close2:after {content: ""; display: block; height: 30px; width: 1px; background: black; position: absolute; left: 20px; top: 5px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg);}   
.gallery_wrap {display: flex; flex-wrap: wrap;}
.gallery_menu {order: 2; display: flex; flex-wrap: wrap; background: rgba(255,255,255,.95);width: 100%;padding: 0 8.5%;}
.gallery_content {order: 1;}
.gallery_menu a {margin: auto 1rem; padding: 0.5rem 0;}
.gallery_menu a img {width: 100px; height: auto; box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;}
.gallery_content img {width: 100%; margin: 0 7.5%;}