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

body {
  Font-family:微軟正黑體,Arial;
  margin:0 auto;
  padding:0;
  background: url(../images/bg1.svg)top center no-repeat,#99BE41;
  background-size:contain;
  overflow-x:hidden;
}

	@keyframes Gradient {
		0% {background-position: 50% 100%}
		50% {background-position: 0% 100%}
		100% {background-position: 50% 100%}
	}

a {text-decoration:none}
main{ /*主要區塊*/
	width:100%; 
	margin:6vh auto; 
	text-align:center; 
	position:relative;
	overflow-x:hidden;
	}
.gp{display:inline-block}/*DIV樣式：行內區塊（用於標題）*/

h1 span{background:rgba(0,0,0,.5); border:#0CC 1px solid; margin-right:1%; padding:0 0.2em;}
h3 span{background:rgba(0%,80%,80%,.8); border:#0CC 1px solid; padding:0 0.5em; color:#fff; text-shadow:none; transform:scale(0.7); display:inline-block}
p{line-height:2em;margin:2%; text-indent:2em; text-align:left}
p a{ text-decoration:none; color:#FFF;border-bottom:1px dashed #FF3399;}
p a:hover{color:#0CC;border-bottom:1px dotted #FF3399;}

/*主視覺*/
#cover{display:block; margin:0 auto; margin-top:10vh; text-align:center; height:auto;}



/*各內容區塊樣式*/
.block{
	position:relative;
	color:#855525;
	padding:5%; 
	margin:5% auto; 
	text-shadow:0 0 5px rgba(255,255,255,1);
	background:rgba(255,250,238,.95);
	border: #963 5px solid;
	border-radius:2em;
	width:60%;
	box-shadow: #630 0 0 25px;
	font-weight:bold;
	}

#ro img{max-width:20vw}
#title{}
#story{}
.book1{text-align:center; margin:1em auto; background:#8F6230; border-radius:2em; padding:.3em; color:#FFF; text-shadow:none; text-decoration:none; font-size:1.5em; width:50%; min-width:280px}
.book1:hover{transform:scale(1.2);}
#Read{ text-align:center;background:#FFF}
#Read img{width:280px; margin:0 auto; display:inline-block;}
#Read img:hover{transform:scale(1.2); z-index:999;}

/*書籍介紹*/
.info{/*文字內容*/
	width:52%;
	padding:2% 2%;
	font-size:1rem;
	font-weight:bold;
	line-height:1.5em;
	display:inline-block;
	vertical-align:top;
	text-align:left;}	

.bookg{ /*書封圖或配圖*/
	width:40%; 
	display:inline-block; 
	text-align:center;
	margin-bottom:5vh; }	
.bookg img{ width:90%; }
/*書籍介紹結束*/

/*其他書籍區塊樣式*/
.sbox{ width:40%; margin:2%; padding:2%; display:inline-block; vertical-align:text-top; border-top:#fff 1px dashed;}
.sbox h3{color:#F0C686;}
.sbox img{ box-shadow: rgba(0,204,204,.5) 0 0 30px}
.sbox img:hover{box-shadow: rgba(255,102,255,.5) 0 0 30px; transform:scale(1.1)}

/*商店連結（如果有的話）*/
.shopbn{ width:29%;font-size:.5rem; border: rgba(51,204,204,1) 1px solid;background:rgba(0,0,0,.3); text-align:center; display:inline-block; margin:0 auto;color:rgba(51,204,204,1);}
.shopbn:hover{border: rgba(255,255,255,.5) 1px solid; background:rgba(255,51,102,.8);color: rgba(255,255,255,1);}
.cover{box-shadow: rgba(0,0,0,.7) 0px 15px 10px;}	


@media (max-width:900px){
	.info{width:90%;padding:2%;display:block;margin:0 auto; text-align:center}
	.bookg{ display:block; text-align:center;width:80%;margin:0 auto; margin-bottom:5vh;}
	#cover1{max-width:100vw;}
}

@media (max-width:700px){
	.block{width:70%}
	#ro{display:none}
}
@media (max-width:600px){
	.sbox{ width:90%;display:block;}
	

}	
/*東立選單*/	

.btn{
	position:fixed;
	top:0;
	width:100%;
	z-index:999;
	width:100%;
	background:rgba(102,51,0,1);
	margin:0 auto;
	opacity: 0.9;
	text-align:center}
.btn img{height:5vh}
#nav{background:rgba(102,51,0,1); min-height:5vh; text-align:center; margin-bottom:2vh}
#nav a{text-decoration:none}
#nav a:hover{color:#0CC;}
#nav a{ margin:1%;font-size:1.1em; display:inline-block;}
/*東立選單結束*/

@keyframes c1 {
		0% { transform:rotate(0deg)}
		25% {transform:rotate(1deg)}
		50% {transform:rotate(0deg)}
		75% {transform:rotate(-1deg)}
		100% {transform:rotate(0deg)}
	}