@charset "utf-8";
/* CSS Document */




body {
	Font-family:微軟正黑體,Arial;
  	margin:0 auto;
  	padding:0;
	overflow-x:hidden;
	background:url(images/bg.png) top repeat-x fixed;
	animation:bg 30s infinite linear;
	}
	@keyframes bg {
		0%{background-position:0% 0px}
		25%{background-position:50% -100px}
		50%{background-position:100% 0px}
		75%{background-position:150% -100px}
		100%{ background-position:200% 0px}
	}
#bg{background:url(images/bg.png) bottom repeat-x;
	background-size:contain;
	position:fixed;
	width:100%;
  	height:100%;
	animation:bg 30s infinite linear;
	}	
a{text-decoration:none}
.gp{display:inline-block}


/*主視覺*/
.pc{ display:block}
.mobi{ display:none}
#cover{
	position:relative;
	z-index:50;
	width:100%;
	margin:0 auto; 
	text-align:center;
	}
#cover img{ width:100%; max-width:1000px; z-index:50;}	
#s1, #s2, #bg{ position:absolute;top:0}
#c1{position:relative}

canvas#canvas {
  display: block;
  position:fixed;
  width:100%;
  height:100%;
  z-index:1;
}
/*主視覺結束*/

/*各內容區塊樣式*/
.block{
	position:relative;
	padding:5%; 
	margin:0 auto; 
	width:80%;
	text-align:center;
	z-index:5;
	background:none;
}



.sp_title1{ letter-spacing:normal; width:inherit; padding:0 1em;  font-size:1em;background:#333; color:#fff; text-align: center; text-shadow:rgba(102,153,255,1) 0 0 5px; margin:0.2em 0}
.sp_title2{ letter-spacing:normal; width:inherit; padding:0 1em; float:right; font-size:1em;background:#F69; color:#fff; text-align:right; text-shadow:#F69 0 0 5px; margin:0.2em 0}
.bookcover {
	width:40%; 
	display:inline-block; 
	text-align:center;
	position:relative; }
.bookcover img{
	width:100%; }
.bookcover img:hover{animation:bookcover 0.5s linear forwards ;
	}
	@keyframes bookcover {0%{} 100%{ transform:scale(1.05)}}	
.storyinfo{
	Font-family:新細明體,Arial;
	width:48%;
	padding:2% 2%;
	line-height:2em;
	display:inline-block;
	vertical-align:top;
	text-align:left;
	font-size:0.9em;
	color:#666;
	letter-spacing:0.3em;
	text-shadow: rgba(153,153,204,.7) 0 0.5px 3px;
	position:relative; 
	}
.storyinfo p{text-indent:2em; text-align:left; text-indent:2em}
.storyinfo a{ color:#69C}
.storyinfo a:hover{ color:#F90}
.bookinfo{text-align:left}
.bookinfo h3{color:#069; border-left:#069 5px solid; padding-left:1em}
.bookinfo h4{color:#069; border-left:#fff 1px dotted; padding-left:1em}

/*相關商品*/
.goods{ 
	width:20%;
	text-align:center; 
	margin:5% auto;
	min-width:250px;
	margin-left:2.5%; 
	margin-right:2.5%; 
	display:inline-block;
	background:#FFF;
	box-shadow:#666 0 5px 15px;
	position:relative;
	text-align:center}
.goods img{ width:100%;}
.goods p{color:#666; text-align:center}
.goods span{font-size:0.9em; color:#FC0; background:#333; padding:0 0.5em; position:absolute; left:0; top:0.5em; transform:translate(-0.5em,0); text-shadow:none;}

/*商店連結（如果有的話）*/
.shop{width:100%; display:block; margin:2em auto}
.shopbn{ 
	width:100%;
	font-size:1em; 
	border:none;
	padding:0.2em 0;
	text-align:center; 
	display:inline-block;
	font-weight:bold;
	margin:0;
	color:#69C;
	background: #333;
    text-transform: capitalize;/*翻頁效果*/
    display: inline-block;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform-origin: 50% 50% -.9em;
    position: relative;
    transition: transform 0.3s ease;

}
.shopbn:hover{
    transform: rotateX(90deg);
}
.shopbn:before{/*翻頁效果*/
    content: attr(data-hover);
    color: #Fff;
	font-weight:bold;
	padding:0.2em 0;
	text-align:center; 
    background:#69C; 
    transform-origin: 50% 0;
    transform: rotateX(-90deg);
    position: absolute;
    top: 100%;
    left: 0;
	width:100%;
}

@media (max-width:800px){

.storyinfo{width:90%;padding:2%;display:block;margin:0 auto; text-align:center;}
.bookcover{ display:block; text-align:center;width:60%;margin:0 auto;}

}

@media (max-width:700px){
	.bookcover{ display:block; text-align:center;width:80%;margin:0 auto;}
	.storyinfo p{text-indent:0em}
}
	
	
@media (max-width:600px){

	.mobi{ display:block}
	.pc{ display:none}
	.sp_title{ letter-spacing:normal; padding:0.2em 1em;}
	

}	

/*social*/
#copy{margin:10vh auto; font-size:0.9em;text-align: center; z-index:9999}

	#social { letter-spacing:2em ; margin:2vh auto; margin-bottom:0;}
	#social img {height:1.5em; margin-left:0.5em; margin-right:0.5em; margin:1em auto;}