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

body {
  Font-family:微軟正黑體,Arial;
  margin:0 auto;
  padding:0;
  background: url(../images/bg1.svg)top center no-repeat,linear-gradient(to bottom right , #FCC, #FFF, #9FC) fixed;;
  background-size:contain, auto;
  overflow-x:hidden;
}
#confetti-canvas{border-radius:100%}

	@keyframes Gradient {
		0% {background-position: 0% 100%}
		100% {background-position: 200% 100%}
	}
 #container {width:100%; height:100%; position:fixed; }	
.dot{
  width:35px;
  height:35px;
  position:absolute;
  background: url(http://www.clipartqueen.com/image-files/red-lobed-fall-clipart-leaf.png);
  background-size: 100% 100%;
}
a {text-decoration:none}
main{ /*主要區塊*/
	width:100%; 
	margin:6vh auto; 
	text-align:center; 
	position:relative;
	overflow-x:hidden;
	}
.gp{display:inline-block}/*DIV樣式：行內區塊（用於標題）*/
#ro img{max-width:20vw}
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{}
#storybg{background:url(../images/bg3.svg) repeat-x top; background-size:contain; width:100%;position:relative;padding:5vh 0;animation: Gradient 60s infinite linear;}
.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:23%; margin:1em auto; padding:0%; display:inline-block; vertical-align:text-top; text-align:center;}
.sbox h3{color:#630; line-height:2em; text-shadow:none; font-size:0.9em}
.sbox img{ box-shadow: rgba(0,0,0,.5) 0 0 10px;width:90%;}
.sbox img:hover{box-shadow: rgba(0,0,0,.5) 0 10px 10px; transform:scale(1.1)}
.sboxbg{ width:100%; display:block; text-align:center; line-height:40px; color:#C96; font-weight:bold;}
.sbox .info{width:90%;padding:2%;display:block;margin:0 auto; text-align:center}	
.about,.ebook,.price{display:block; border-radius:0.5em; margin:1vh auto}
.about{background:#F66}
.ebook{background:#6CC}
.about:hover,.ebook:hover{box-shadow: rgba(0,0,0,.5) 0 10px 10px; transform:scale(1.1)}
.price{ color:#C96}
/*書籍介紹結束*/
/*活動*/

#IG img{width:30%; min-width:100px}

/*商店連結（如果有的話）*/
.shopbn{ 
	width:5.5em;
	font-size:0.8em; 
	border: #630 2px solid;
	text-align:center; 
	display:inline-block; 
	margin:0 1%;
	color:#630; 
	padding:0.2em;
    text-transform: capitalize;/*翻頁效果*/
    display: inline-block;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform-origin: 50% 50% -0.6em;
    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;
	text-align:center; 
    background:#C00;
    border-radius: 5px 0 5px;
    transform-origin: 50% 0;
    transform: rotateX(-90deg);
    position: absolute;
    top: 100%;
    left: 0;
	width:5.5em;
}
.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%}

}
@media (max-width:600px){
	.sbox{ width:45%;}
	#storybg{background:url(../images/bg3.svg) repeat-x top; background-size:cover;}
	

}	
/*東立選單*/	

.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)}
	}