*{
  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{background:url(img/bg.jpg) fixed #000 top center;background-size: cover;color:#fff}



.container{max-width:1400px !important}
h1{font-weight:bold;font-family:"NotoSerifTC"}
h2{color:#fff;font-size:2.5em;font-family:"NotoSerifTC";}
h3{font-size:1.5rem;font-family:"NotoSerifTC";letter-spacing: 2px;color:#fff}


li{color:rgba(255,255,255,.8)}

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

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

a.btn {color:#fff;margin-top:15px}

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.2rem}
a:hover{text-decoration:none}


ul{list-style:none;margin-left:0;padding-left:0}
ul li{margin-bottom:3em}
ul li ul li{margin-bottom:0em}

.modal-content{background-color:black !important;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;color:rgba(255,255,255,.8);border:8px solid gray;}
.modal-title{font-family:"NotoSerifTC";color:#f08b75}
.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}


@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(img/footer.png) ;padding:50px;min-height:600px}
#footer a{color:rgba(255,255,255,.9);font-size:.8rem;}
#footer a:hover{color:rgba(255,255,255,.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;}*/
		#speech1{text-align: right !important}
}	

@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}
		#speech .col-lg-6:nth-child(odd){text-align:left;padding-right:0em}


}

@media (max-width: 480px) {
/*.cover{min-height: 290px}*/
	.cover h3,li small{display:none;}
	#star{width: 200px !important;height: 200px !important;left:10px !important;top:175px !important
	}	
}	


@keyframes move{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

@keyframes ballmove {
  0% {left: 130px;z-index:3;transform:scale(1)}
  50% {left: 370px;transform:scale(1)}
  75% {left: 150px;z-index: 1;transform:scale(.8)}
  100% {left: 130px;z-index:2;transform:scale(1)}
}


#star {
  width: 400px;
  height:400px;
  stroke: white;
  fill: none;
}
#star circle {
  fill: white;
  transition: 0.2s;
  border-radius: 50;
  animation: twinkling 2s infinite;
}
#star circle:nth-child(1) {
  animation-delay: 0.5s;
}
#star circle:nth-child(2) {
  animation-delay: 0.7s;
}
#star circle:nth-child(3) {
  animation-delay: 0.9s;
}
#star circle:nth-child(4) {
  animation-delay: 1.1s;
}
#star polyline {
  stroke: white;
  stroke-width: 0.5px;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  animation: dash 5s ease-in-out infinite;
  animation-delay: 3s;
}

@keyframes dash {
  from {
    opacity: 0;
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
    opacity: .8;
  }
}
@keyframes twinkling {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 1;
  }
  100% {opacity: 0.1;
}

}


/*Index  

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

*/

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



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


#entrance {
  display: none;
}

#main_tittle {
  transition: 0.5s;
  width: auto;
}



.hide{
  visibility: hidden;
  
}

#sound_ico {
  color: #fff;
  font-size: 15px;
  width: 250px;
  border-radius: 0;
  overflow: hidden;
  position:fixed;
  right: -50px;
  bottom: 50px;
  opacity: 0.7;
  cursor: crosshair;
  z-index: 3;
  transition: 1s;
  text-align: left;
}



.audio {
	display: none
}



.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--- */

.move_right {
  left: 70%;
  top: 30%;
}

.rotate {
  animation: float 50s infinite linear;
}

.move_right_bottom {
  top: 70%;
  left: 50%;
}

.addTyping {
  opacity: 1;
  animation: typing 1s steps(70, end) forwards;
}

.float-in {
  animation: float-in 1.5s ease-in-out forwards;
  z-index: 9999;
}

.float-out {
  animation: float-in 1.5s ease-in-out backwards;
  z-index: 9999;
}

.do_wave {
  animation: wave 0.5s ease-out infinite;
}

.courtain {
  opacity: 0;
  left: -200%;
}

.back {
  z-index: -1;
  opacity: 0;
}

.front {
  opacity: 1;
  z-index: 9999;
}

.grow {
  transition: 2s;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scale(2);
  -ms-transform: translate(-50%, -50%) scale(2);
  transform: translate(-50%, -50%) scale(2);
  max-width: 500px;
  opacity: 1;
}

.shrink {
  transition: 1s;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.fade-out {
  opacity: 0;
}

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

@keyframes typing {
  0% {
    width: 0;
  }
  99% {
    width: 100%;
  }

  100% {
    width: 100%;
    border-top-color: #fff;
    border-bottom-color: #fff;
  }
}

@-webkit-keyframes typing {
  0% {
    width: 0;
  }
  99% {
    width: 100%;
  }

  100% {
    width: 100%;
    border-top-color: #fff;
    border-bottom-color: #fff;
  }
}

@-moz-keyframes typing {
  0% {
    width: 0;
  }
  99% {
    width: 100%;
  }

  100% {
    width: 100%;
    border-top-color: #fff;
    border-bottom-color: #fff;
  }
}

@keyframes wave {
  0% {
    width: 10px;
  }

  50% {
    width: 20px;
  }

  100% {
    width: 10px;
  }
}

@-webkit-keyframes wave {
  0% {
    width: 10px;
  }

  50% {
    width: 20px;
  }

  100% {
    width: 10px;
  }
}

@-moz-keyframes wave {
  0% {
    width: 10px;
  }

  50% {
    width: 20px;
  }

  100% {
    width: 10px;
  }
}

@keyframes pulse {
  0% {
    text-shadow: 5px 5px 15px rgba(0, 0, 0, 1);
  }

  50% {
    text-shadow: 10px 10px 50px rgba(0, 0, 0, 1);
  }

  100% {
    text-shadow: 5px 5px 15px rgba(0, 0, 0, 1);
  }
}

@-webkit-keyframes pulse {
  0% {
    text-shadow: 5px 5px 15px rgba(0, 0, 0, 1);
  }

  50% {
    text-shadow: 10px 10px 50px rgba(0, 0, 0, 1);
  }

  100% {
    text-shadow: 5px 5px 15px rgba(0, 0, 0, 1);
  }
}

@-moz-keyframes pulse {
  0% {
    text-shadow: 5px 5px 15px rgba(0, 0, 0, 1);
  }

  50% {
    text-shadow: 10px 10px 50px rgba(0, 0, 0, 1);
  }

  100% {
    text-shadow: 5px 5px 15px rgba(0, 0, 0, 1);
  }
}

@keyframes fade_in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fade_in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-moz-keyframes fade_in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-moz-keyframes fade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes float {
  0% {
    transform: translate(0%, 0%) rotate(0deg);
  }

  50% {
    transform: translate(0%, 0%) rotate(180deg);
    -webkit-filter: grayscale(50%) contrast(90%) blur(0.5px);
    filter: grayscale(50%) contrast(90%) blur(0.5px);
  }

  100% {
    transform: translate(0, 0) rotate(360deg);
    -webkit-filter: grayscale(50%) contrast(90%) blur(0);
    filter: grayscale(50%) contrast(90%) blur(0);
  }
}

@-webkit-keyframes float {
  0% {
    -webkit-transform: translate(0%, 0%) rotate(0deg);
    transform: translate(0%, 0%) rotate(0deg);
  }

  50% {
    -webkit-transform: translate(0%, 0%) rotate(180deg);
    transform: translate(0%, 0%) rotate(180deg);
    -webkit-filter: grayscale(50%) contrast(90%) blur(0.5px);
    filter: grayscale(50%) contrast(90%) blur(0.5px);
  }

  100% {
    -webkit-transform: translate(0, 0) rotate(360deg);
    transform: translate(0, 0) rotate(360deg);
    -webkit-filter: grayscale(50%) contrast(90%) blur(0);
    filter: grayscale(50%) contrast(90%) blur(0);
  }
}

@-moz-keyframes float {
  0% {
    -moz-transform: translate(0%, 0%) rotate(0deg);
    transform: translate(0%, 0%) rotate(0deg);
  }

  50% {
    -moz-transform: translate(0%, 0%) rotate(180deg);
    transform: translate(0%, 0%) rotate(180deg);
    -webkit-filter: grayscale(50%) contrast(90%) blur(0.5px);
    filter: grayscale(50%) contrast(90%) blur(0.5px);
  }

  100% {
    -moz-transform: translate(0, 0) rotate(360deg);
    transform: translate(0, 0) rotate(360deg);
    -moz-filter: grayscale(50%) contrast(90%) blur(0);
    filter: grayscale(50%) contrast(90%) blur(0);
  }
}

@keyframes rotation_moon {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@-webkit-keyframes rotation_moon {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@-moz-keyframes rotation_moon {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes typing {
  0% {
    width: 0;
  }
  99% {
    width: 100%;
  }

  100% {
    width: 100%;
    border-top-color: #fff;
    border-bottom-color: #fff;
  }
}

@-webkit-keyframes typing {
  0% {
    width: 0;
  }
  99% {
    width: 100%;
  }

  100% {
    width: 100%;
    border-top-color: #fff;
    border-bottom-color: #fff;
  }
}

@-moz-keyframes typing {
  0% {
    width: 0;
  }
  99% {
    width: 100%;
  }

  100% {
    width: 100%;
    border-top-color: #fff;
    border-bottom-color: #fff;
  }
}

@keyframes rotating-galaxy {
  0% {
    transform: skewX(50deg) rotate(0deg) scale(1);
  }

  50% {
    transform: skewX(50deg) rotate(-180deg) scale(1.1);
  }

  100% {
    transform: skewX(50deg) rotate(-360deg) scale(1);
  }
}

@-webkit-keyframes rotating-galaxy {
  0% {
    -webkit-transform: skewX(50deg) rotate(0deg) scale(1);
    transform: skewX(50deg) rotate(0deg) scale(1);
  }

  50% {
    -webkit-transform: skewX(50deg) rotate(-180deg) scale(1.1);
    transform: skewX(50deg) rotate(-180deg) scale(1.1);
  }

  100% {
    -webkit-transform: skewX(50deg) rotate(-360deg) scale(1);
    transform: skewX(50deg) rotate(-360deg) scale(1);
  }
}

@-moz-keyframes rotating-galaxy {
  0% {
    -moz-transform: skewX(50deg) rotate(0deg) scale(1);
    transform: skewX(50deg) rotate(0deg) scale(1);
  }

  50% {
    -moz-transform: skewX(50deg) rotate(-180deg) scale(1.1);
    transform: skewX(50deg) rotate(-180deg) scale(1.1);
  }

  100% {
    -moz-transform: skewX(50deg) rotate(-360deg) scale(1);
    transform: skewX(50deg) rotate(-360deg) scale(1);
  }
}

@keyframes float-in {
  from {
    top: -100%;
  }

  to {
    top: 20%;
  }
}

@-webkit-keyframes float-in {
  from {
    top: -100%;
  }

  to {
    top: 20%;
  }
}

@-moz-keyframes float-in {
  from {
    top: -100%;
  }

  to {
    top: 20%;
  }
}

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

@media only screen and (max-width: 768px) {
  .main_title {
    font-size: 150px;
  }

  #tag_line {
    font-size: 20px;
    letter-spacing: 15px;
  }

  .astronaut_img {
    width: 100px;
  }

  .planet {
    width: 400px;
  }

  .moon {
    -webkit-transform-origin: 200px 200px;
    -ms-transform-origin: 200px 200px;
    transform-origin: 200px 200px;
  }

  .ship {
    width: 70px;
  }
}

@media only screen and (max-width: 600px) {
  .main_title {
    font-size: 130px;
  }

  #tag_line {
    font-size: 20px;
    letter-spacing: 15px;
  }

  .astronaut {
    width: 100px;
  }

  .planet {
    width: 350px;
  }

  .moon {
    -webkit-transform-origin: 175px 175px;
    -ms-transform-origin: 175px 175px;
    transform-origin: 175px 175px;
  }

  .ship {
    width: 70px;
  }
}

@media only screen and (max-width: 480px) {
  .main_title {
    font-size: 75px;
  }

  #tag_line {
    font-size: 18px;
    letter-spacing: 7px;
  }

  .item {
    font-size: 9px;
  }

  .astronaut {
    width: 110px;
  }

  .move_right {
    left: 70%;
    top: 50%;
  }

  .planet {
    width: 300px;
  }

  .moon {
    -webkit-transform-origin: 150px 150px;
    -ms-transform-origin: 150px 150px;
    transform-origin: 150px 150px;
  }

  .ship {
    width: 60px;
  }

  .move_right_bottom {
    top: 80%;
    left: 40%;
  }

  .galaxy {
    width: 80px;
  }

  .move_right_top {
    left: 80%;
    top: 5%;
  }

  .container-second {
    top: -100%;
    left: 0%;
  }

  .grow {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) scale(2);
    -ms-transform: translate(-50%, -50%) scale(2);
    transform: translate(-50%, -50%) scale(2);
  }
}


.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";	

}