*{
  font-family: 微軟正黑體;
  scroll-behavior:smooth;
  font-size:1.2rem;
  position: relative;
  letter-spacing: 1px;
  
}


@font-face {
  font-family: 'NotoSerifTC';
  src: url("/fonts/NotoSerifTC-Black.otf") format("opentype"); }

main{color:#2f2f2f}



.container{max-width:1400px !important}
h1{font-weight:bold;font-family:"NotoSerifTC"}
h2{color:#fff;font-size:2.5em;font-family:"NotoSerifTC";background:#f18d00;border-radius:1.5em;display: inline;padding:0.1em 1em;line-height:3em}
h3{font-size:1.8rem;font-weight:bold;letter-spacing: 2px;color:#008786;margin:1em 0}
h3:nth-child(odd){margin-top:2em}
h4{font-weight:bold;color:#f18d00;font-size:1.2rem}


li,p{color:#686d71}

/*#book h2{color:#eb6ea5;font-size:2em;display:block}*/

img{max-width:100%;
    height:auto;
}

a.btn {color:#fff;margin-top:15px;background:#f18d00;border-color:#f18d00}
a.btn:hover{background:#e07d05;border-color:#e07d05}
a.btn:focus{box-shadow: 0 0 0 0.2rem rgba(252, 170, 71, 0.5);}





li small{font-size:0.7em;margin-left:0.5em}

#speech .col-lg-6:nth-child(odd){text-align:right;padding-right:3em}

p{font-size:1.1rem;margin-bottom:1.5em}
a:hover{text-decoration:none}


ul{list-style:none;margin-left:0;padding-left:0}
ul li{margin-bottom:3em;margin-bottom:0em;font-weight: bold}
ul li ul li{padding-left:2em !important}

li small{background:#fff100;border-radius:50%;width:60px;height:60px;padding:3px 5px;margin:0 8px}

.modal-content{box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;color:rgba(255,255,255,.8);border:8px solid gray;}
.modal-title{color:#008786;font-weight: bold}
.modal button{color:#fff !important}
.modal-header,.modal-footer{border:0px}
.modal a{color:#97c2e8}
.modal a:hover{color:#87afd3}
.modal nav{margin-top:3em}
.modal-body li{font-weight: normal;font-size:0.9em !important}
.modal-body ol{list-style: normal;padding-left:2em}
.modal-body ul{list-style-type:inherit;margin-left:2em}
.modal-body ul li ul li{padding-left:0em !important;list-style-type:inherit}


@media (min-width: 992px) {
  .modal-lg {
    max-width: 1140px;
  }
}
.location{color:#fff;padding-right:15px;font-size:.8rem;text-decoration: underline}

.cover {padding:40px;margin-bottom:0em;text-align:center}
.cover img{width:100%;height:auto;border-radius: 0.25rem;transition: opacity 1s;}
.cover .wrap{background:rgba(255,255,255,.8);border-radius: 0.25rem;}
.cover .wrap:hover{background:rgba(255,255,255,.7)}
.cover .wrap:hover img {opacity:0.5}
.cover .wrap .book-title{padding:10px}
.cover .wrap p{padding: 0 10px 10px;color:#e7af00}
.cover h3{display:none;}

#footer{background:url(image/footer.jpg) left bottom no-repeat;padding:50px;min-height:500px}
#footer a{color:rgba(0,0,0,.9);font-size:.8rem;}
#footer a:hover{color:rgba(0,0,0,.7);}
#footer i{width:30px}

#footer .social-icons{margin:0;padding:0}
#footer .social-icons li{width:50px}
#footer ul, #footer li{list-style: none; margin: 0; padding: 0;}
#footer ul li{font-size:.8rem;line-height:2rem}


@media (min-width: 768px) {
	    #book{padding:100px}
		.button-group {background:#28a745;border-radius: 7px}
/*		.cover{min-height: 470px;}*/
	

}	

@media (max-width: 767px) {
		.button-group button{margin-bottom:5px}
		.cover{padding:40px;}
/*		main{background:url(img/bg_m.jpg) fixed #000 top center;}*/
		.modal-content td,.modal a{font-size:0.8em !important}
		h2{font-size:1.5em}
		h3{font-size:1.3rem;}
		#banner{margin-bottom:5em}
		

}

@media (max-width: 480px) {
/*.cover{min-height: 290px}*/
	.cover h3,li small{display:none;}

}	




/*Index  

1. General
2. Main Container
3. Items
4. Toggle Classes
5. Animations
6. Responsive

*/

/* --- 1.General--- */



/* --- 2.General--- */





.footable-details th{background:#ccc;color:#3a1c43}
.footable{-webkit-transition: all 0.8s ease-out; transition: all 0.8s ease-out;}

.fooicon {
	position: relative;
	top: 1px;
	display: inline-block;
	font-family: 'Font Awesome 5 Free' !important;
	
	font-style: normal;
	font-weight: 900;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    padding-right:10px;
    color:#ccc;
    
}
.fooicon:before,
.fooicon:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.fooicon-loader:before {
	content: "\e030";
}
.fooicon-plus:before {
	content: "\f067";
}
.fooicon-minus:before {
	content: "\f068";
}
.fooicon-loader:before {
	content: "\f110";
}




/* --- 4.Toggle Classes--- */



/* --- 5.Animations--- */


/* ----- 6.Responsive ------ */

@media only screen and (max-width: 768px) {



}

@media only screen and (max-width: 600px) {


}

@media only screen and (max-width: 480px) {


 
}


.carousel-control-prev,.carousel-control-next{background:transparent;border:0}


.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: transparent no-repeat center center !important;
  background-size: 100% 100%;
}

.carousel-control-prev-icon {
  	font-family: 'Font Awesome 5 Free' !important;
	content: "\f068"; 

}

.carousel-control-next-icon {
  font-family: 'Font Awesome 5 Free' !important;
	content: "\f068";	

}