body {
  font-family: '微軟正黑體', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
  font-style: normal;  
  margin:0;
  padding:0
}

a {
  text-decoration: none;
  color: black;
}

a:hover, a:focus {
  text-decoration: none !important;
  color: #23527C;
}

.footer a{
  text-decoration: none;
  color: black;
  padding:0 15px 0 15px;
}

.footer a:hover, a:focus {
  text-decoration: none !important;
  color: #23527C;
}

.btn-link:hover, .btn-link:focus {
  text-decoration: none !important;
}

img { 
  border: 0; 
}

label {
  cursor:pointer;
}

.home_subtitle {
  font-size: 1.75em;
}

.activeName {
  vertical-align:15px;
  color: black;
}
.activeDate {
  font-size:1.00em;
}
.teacherLi {
  display:inline;
}

.moreitem {
  color: #a2c2f3;
}

.btn-default,
.btn-default:active,
.btn-default:visited
{
    border-color: #a2c2f3;
    color: #a2c2f3;
}
.btn-default:hover,
.btn-default:focus {
    background-color: #a2c2f3;
    border-color: #a2c2f3;
}

.bookthumb {
  width:190px;
  height:300px;
}
.videothumb {
  width:190px;
  height:230px;
}
.Disaster {
  -webkit-border-radius:10px;
  border-radius:10px;
  background-color:#b2954f;
  text-align:center;
  font-size:1.000em;
  width:120px;
  padding:5px;
  color: black;
}
.Swcb {
  -webkit-border-radius:10px;
  border-radius:10px;
  background-color:#59c1ce;
  text-align:center;
  font-size:1.000em;
  width:120px;
  padding:5px;
  color: black;
}
.Regeneration {
  -webkit-border-radius:10px;
  border-radius:10px;
  background-color:#6eb555;
  text-align:center;
  font-size:1.000em;
  width:120px;
  padding:5px;
  color: black;
}
.Other {
  -webkit-border-radius:10px;
  border-radius:10px;
  background-color:#f8d138;
  text-align:center;
  font-size:1.000em;
  width:120px;
  padding:5px;
  color: black;
}
.Circle_Disaster {
  color: black;
  font-size:1.250em;
  border-radius: 50%;
  width: 190px;
  height: 190px;
  display: table-cell;
  vertical-align: middle;
  background: #B2954F;
  border: 0px;
  position:absolute;
  transform:rotate(90deg);
  background: linear-gradient(
    to right,
    #B2954F   0%, #B2954F  70%,
    #CEB384 70%, #CEB384 100%
  );
}  

.Circle_Swcb {
  color: black;
  font-size:1.250em;
  border-radius: 50%;
  width: 190px;
  height: 190px;
  display: table-cell;
  vertical-align: middle;
  background: #59C0CE;
  border: 0px;
  position:absolute;
  transform:rotate(90deg);
  background: linear-gradient(
    to right,
    #59C0CE   0%, #59C0CE  70%,
    #76CFD6 70%, #76CFD6 100%
  );
}  
.Circle_Regeneration {
  color: black;
  font-size:1.250em;
  border-radius: 50%;
  width: 190px;
  height: 190px;
  display: table-cell;
  vertical-align: middle;
  background: #6EB554;
  border: 0px;
  position:absolute;
  transform:rotate(90deg);
  background: linear-gradient(
    to right,
    #6EB554    0%, #6EB554   70%,
    #83BF6A 70%, #83BF6A 100%
  );
}   
.Circle_Disaster_home {
  color: black;
  font-size:1.250em;
  border-radius: 50%;
  width: 165px;
  height: 165px;
  display: table-cell;
  vertical-align: middle;
  background: #b2954f;
  border: 0px;
  position:absolute;
  transform:rotate(90deg);
  background: linear-gradient(
    to right,
    #B2954F   0%, #B2954F  70%,
    #CEB384 70%, #CEB384 100%
  );
}  
.Circle_Swcb_home {
  color: black;
  font-size:1.250em;
  border-radius: 50%;
  width: 165px;
  height: 165px;
  display: table-cell;
  vertical-align: middle;
  background: #59c1ce;
  border: 0px;
  position:absolute;
  transform:rotate(90deg);
  background: linear-gradient(
    to right,
    #59C0CE   0%, #59C0CE  70%,
    #76CFD6 70%, #76CFD6 100%
  );
}  
.Circle_Regeneration_home {
  color: black;
  font-size:1.250em;
  border-radius: 50%;
  width: 165px;
  height: 165px;
  display: table-cell;
  vertical-align: middle;
  background: #6eb555;
  border: 0px;
  position:absolute;
  transform:rotate(90deg);
  background: linear-gradient(
    to right,
    #6EB554    0%, #6EB554   70%,
    #83BF6A 70%, #83BF6A 100%
  );
} 

#arrowright {
  cursor:pointer;
}
#arrowright:hover {
  cursor:pointer;
}
.hover {position:relative; top: -2px;}
.hover img {
  position:absolute;
  /* CSS3淡出淡入效果,1秒 */  
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 0.1s ease-in-out;
  -o-transition: opacity 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out;
}
.hover img:nth-of-type(2):hover{
  opacity:0; /*滑鼠滑入時，透明度變0*/
}

.comingsoon {
  -webkit-border-radius:5px;
  border-radius:5px;
  background-color:#EAB100;
  text-align:center;
  font-size:1.000em;
  width:83px;
  height:27px;
  color: black;
  margin: 0 0 0 50px;
  vertical-align: middle;
}
.ongoing {
  -webkit-border-radius:5px;
  border-radius:5px;
  background-color:#E3601C;
  text-align:center;
  font-size:1.000em;
  width:83px;
  height:27px;
  color: black;
  margin: 0 0 0 50px;
  vertical-align: middle;
}
.ended {
  -webkit-border-radius:5px;
  border-radius:5px;
  background-color:#BCBCBC;
  text-align:center;
  font-size:1.000em;
  width:83px;
  height:27px;
  color: black;
  margin: 0 0 0 50px;
  vertical-align: middle;
}

.Library_div {
  /* background:#ededed; */
  padding:20px;
  text-align:center;
  margin:20px 5px;
}

.Library_div:hover {
  background:#cccccc;
}

.Library_div_home {
  height:417px !important;
}

.detial_label {
  font-size:1.25em;
  color:#939393;
}

.detial_value {
  font-size:1.25em;
  color:#318C49;
}

.access_key {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    overflow: hidden;  
}
.access_key:focus {
  width: auto;
  height: auto;
  color:black;
}

.goto_cnt_area {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    overflow: hidden;
}
.goto_cnt_area:focus {
    border: 2px solid #FFF;
    padding: 10px 15px;
    width: auto;
    height: auto;
    background-color: #15a55a;
    color: #FFF;
    z-index: 9999;
}

.linepng {
  background-image: url(images/small/line.png);
  background-size: contain;
  background-repeat: no-repeat;
  width:7px;
  height: 50px;
  margin:12px 0 0 0;
}
/* 40px */
.toTop-arrow {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	margin: 0;
	border: 0;
	opacity: 1.0;
	background: #f8d138;
	cursor: pointer;
	position:fixed;
	right: 1rem;
	bottom: 1rem;
	display: none;
  z-index:99;
}
.toTop-arrow::before, .toTop-arrow::after {
	width: 18px;
	height: 5px;
	background: white;
	position: absolute;
	content: "";
}
.toTop-arrow::before {
	transform: rotate(-45deg) translate(0, -50%);
	left: 0.5rem;
}
.toTop-arrow::after {
	transform: rotate(45deg) translate(0, -50%);
	right: 0.5rem;
}
.toTop-arrow:focus {outline: none;}

.balloon {
	padding: 0;
	margin: 0;
	border: 0;
	opacity: 1.0;
	background: #f8d138;
	cursor: pointer;
	position:fixed;
	right: 1rem;
  bottom: 50%;
  display: none;
	z-index:99;
}

li span { 
  position: relative; left: -20px; 
}

.slick-prev-banner {
	left:1% !important;	
	/*background:url('') no-repeat 50% 50% !important; */
  width: 50px;
  height: 50px;
  z-index:1;
  font-size:1.2em !important;
}
.slick-next-banner {
	right:1% !important;	
	/*background:url('') no-repeat 50% 50% !important; */
  width: 60px;
  height: 60px;
  z-index:1;
  transition: all 0.8s;
  font-size:1.2em !important;
}
.slick-prev-banner:hover, .slick-prev-banner:focus {
	/*background:url('') no-repeat 50% 50% !important;*/
}
.slick-next-banner:hover, .slick-next-banner:focus {	
	/*background:url('') no-repeat 50% 50% !important;*/
}

.slick-prev-hot {
	left:-30px;	
	background:url(images/adbanner-prev.png) no-repeat 50% 50% !important;
}
.slick-next-hot {
	right:-30px;	
	background:url(images/adbanner-next.png) no-repeat 50% 50%!important;
}
.slick-prev-hot:hover, .slick-prev-hot:focus {
	background:url(images/adbanner-prev-hover.png) no-repeat 50% 50%!important;
}
.slick-next-hot:hover, .slick-next-hot:focus {	
	background:url(images/adbanner-next-hover.png) no-repeat 50% 50%!important;
}

/* ----- shareBtn ----- */
.shareBtn {
	position:relative;
  right: 15px;
	float:right;
	width:45px;
}
.shareBtn .on {
	float:left;
	width:45px;
	height:45px;
	color:#222;
	font-size:0;
	line-height:45px;
	padding:0 10px;
	box-sizing:border-box;
	background:#cccccc url(./images/icon-share.png) no-repeat 50% 50%;
}
.shareBtn .on.show,
.shareBtn .on.show:focus {	
	background:#222 url(./images/icon-share-on.png) no-repeat 50% 50%;
}
.shareBtn .shareMenu {
	display:none;
	position: absolute;
	top: 45px;
	right: 0;
	background:#FFF;
	z-index: 200;
	list-style:none;
}
.shareBtn .shareMenu a {
	float:left;
	width:45px;
	height:45px;
	font-size:0;
}
.shareBtn .shareMenu a.icon-fb {
	background:#3b5998 url(./images/icon-fb.png) no-repeat 50% 50%;
}
.shareBtn .shareMenu a.icon-gplus {
	background:#d64136 url(./images/icon-gplus.png) no-repeat 50% 50%;
}
.shareBtn .shareMenu a.icon-twitter {
	background:#00aced url(./images/icon-twitter.png) no-repeat 50% 50%;
}
.shareBtn .shareMenu a.icon-line {
	background:#01B901 url(./images/icon-line.png) no-repeat 50% 50%;
}
.shareBtn .shareMenu a:hover,
.shareBtn .shareMenu a:focus {
	background-color:#FFF;
}
.shareBtn .shareMenu a.icon-fb:hover,
.shareBtn .shareMenu a.icon-fb:focus {
	background-color:rgba(59,89,152,0.1);
	background-image: url(./images/icon-fb-on.png);
}
.shareBtn .shareMenu a.icon-gplus:hover,
.shareBtn .shareMenu a.icon-gplus:focus {
	background-color:rgba(214,65,54,0.1);
	background-image: url(./images/icon-gplus-on.png);
}
.shareBtn .shareMenu a.icon-twitter:hover,
.shareBtn .shareMenu a.icon-twitter:focus {
	background-color:rgba(0,172,237,0.1);
	background-image: url(./images/icon-twitter-on.png);
}
.shareBtn .shareMenu a.icon-line:hover,
.shareBtn .shareMenu a.icon-line:focus {
	background-color:rgba(1,185,1,0.1);
	background-image: url(./images/icon-line-on.png);
}
@media screen and ( max-width: 480px) {
	.shareBtn {
		width:50px;
	}
	.shareBtn .on {
		width:50px;
		height:50px;
		line-height:50px;
	}
	.shareBtn .shareMenu {
		top: 50px;
	}
	.shareBtn .shareMenu a {
		width:50px;
		height:50px;
	}
}

div.justify {
　text-align: justify !important;
　text-justify: inter-ideograph !important;
　-ms-text-justify: inter-ideograph !important; /*IE9*/
　-moz-text-align-last:justify !important; /*Firefox*/
　-webkit-text-align-last:justify !important; /*Chrome*/
}
div.justify:after {
　content: ”;
　display: inline-block;
　width: 100%;
}

h1 {
  font-size: 40px;
}

.footer_link {
  padding:0;
  margin:0 50px 0 0;
}

.header_1 {
  right:50px;
  position:absolute;
}
.header_2 {
  position:absolute;
  left:100px;
  display:inline-block;
  padding:8px 0 0 0;
  color:black;
  font-size:17px;
}

.header_3 {
  position:absolute;
  top:6px;
  right:30px;
  z-index:1;
}

.header_4 {
  background-color:#b5d87e;
  height:40px;
  position:relative;
}

.myblock {
  width:700px;
  padding:40px;
  background: #fcf2eb;
  border: 2px solid #ffa161;
}

.myblock2 {
  font-size:17px;
  padding:40px;
  background: #fcf2eb;
  border: 2px solid #ffa161;
  text-align:center;
}

.myfancybox{

}

.myfooter {
  position:absolute;
  bottom:50px; 
  width:100%;
  text-align:center;
  color:black;
}

.footer1 {
  position:relative;
  background-color:white;
}
@media (max-width: 992px) {
  .header_2 { left: 10px; }
  .myfooter { bottom:10px; }
  .footer_link {margin:0 15px 0 0; }
  .header_3 { right:10px; }
}

@media (max-width: 765px) {
  .ftul { margin-left: 5px; padding-left: 5px; }
  .activeName { vertical-align:35px; }
  .activeDate { font-size:0.875em; }
  .teacherLi { display:block; }
  .Library_div { height:275px !important;  margin:10px 2px; padding:5px 2px; }
  .footer a{ padding:0 5px 0 5px; }
  .footer_link {margin:0 5px 0 0; }
  .header_1 { right:0px; }
  .header_2 { left: 0px; }
  .header_3 { top: 8px; }
  .header_4 { height:10px; }
  .myblock { width:100%; padding:10px; }
  .myblock2 { padding: 5px; width:100%; }
  .myfancybox { position: absolute;top:10px; left:3px; }
  .myfooter { bottom:40px; }
  .footer1 { background-color:#b5d87e; }
}