body{
	background-color:#000;
	margin:0px;
	background-image:url(images/bg.jpg);
	background-repeat:repeat-y;
	background-attachment:fixed;
	font-size: 14px;
	}
	
.mouseMode{
	cursor: pointer;
}

.spacing{
	margin-top:5%;
	}
	
.indent{
	text-indent:8rem;}	

.flex-container {
  display: flex | inline-flex;
  display: -ms-flex;
  display: -ms-flexbox;
  justify-content: center;
}

.flex {
  display: flex;
  display: -ms-flex;
  flex-wrap: wrap;
  max-width:1000px;
  justify-content: left;
}

.item {
  margin: 5px 50px;
  display: flex;
  border-radius:5px;
  justify-content: center;
  align-items: center;
}

.flex2 {
  display: flex;
  display: -ms-flex;
  flex-wrap: wrap;
  max-width:1000px;
  justify-content:center;
}

.item2 {
  margin: 3% 0 -5% 0;
  display: flex;
  border-radius:5px;
  justify-content: center;
  align-items: center;
}
	
.item3 {
  margin: 3% 0 15% 0;
  display: flex;
  border-radius:5px;
  justify-content: center;
  align-items: center;
}	
	
.content1{
	color:#491f0e;
	max-width:1000px;
	font-family:"微軟正黑體";
	padding:1.5% 0 2% 0;
	font-size: 1.5rem;
	text-align:left;
	font-weight:550;
	line-height:2.7rem;
	}

.content2{
	color:#491f0e;
	max-width:1000px;
	font-family:"微軟正黑體";
	padding:0 0 0 0;
	font-size: 1.5rem;
	text-align:left;
	font-weight:550;
	line-height:2.6rem;
	}

.contenttitle{
	color:#491f0e;
	max-width:1000px;
	font-family:"微軟正黑體";
	padding:1.2% 0 0 0;
	font-size: 2.5rem;
	text-align:center;	
	font-weight:bold;
	}

.contenttitle_4{
	color:#491f0e;
	max-width:1000px;
	font-family:"微軟正黑體";
	padding:1.2% 0 0 0;
	font-size: 2.2rem;
	text-align:center;	
	font-weight:bold;
	}
	
.contenttitle2{
	color:#491f0e;
	max-width:1000px;
	font-family:"微軟正黑體";
	padding:1% 0 2% 0;
	font-size: 2rem;
	text-align:center;	
	font-weight:bold;
	}	

.contenttitle3{
	text-align:center;
	color:#491f0e;
	max-width:1000px;
	font-family:"微軟正黑體";
	padding:0 0 0 0;
	font-size: 2.2rem;
	text-align:center;	
	font-weight:bold;
	}


.contentPic{
	width:60%;
	height:60%;
	max-width:350px;
	max-height:490px;
	}

.contentPic2{
	width:30%;
	height:32%;
	padding:0 50px 0 0;
	}				

#prevSet{
	margin-top:2%;
	z-index:120;
	width:95%;
	max-width:1200px;
	border:solid #CCC 5px;
	}

#Bookpreview{
	background-color:#666;
	top:0;
	left:0;
	position:fixed;
	width:100%;
	height:100%;
	opacity:1;
	z-index:120;	
	}
.sign{
	background-image:url(images/sign.jpg);
	background-repeat:no-repeat;
	padding:30px 30px 30px 30px;
	}

.signstyle{
	border:solid #9C9C9C 2px;
	border-radius:10px;
	font-size:3rem;
	font-weight:bold;
	padding:5px 20px 5px 20px;
}


#btn_buy{
	position:absolute;
	}
.buystyle{
	padding:12px 50px 12px 50px;
	background-color:#F00;
	color:#FFF;
	font-size:3rem;
	border-radius:10px;
	}
#btn_top{
	position:fixed;
	right:0px;
	bottom:0px;}


@media screen and (max-width:1030px) and (min-width: 768px){
	.flex {
  display: flex;
  display: -ms-flex;
  flex-wrap: wrap;
  max-width:1000px;
  justify-content: center;
}

.item {
  margin: 0 0 15px 0;
  display: flex;
  border-radius:5px;
  justify-content: center;
  align-items: center;
}

.item2 {
  margin: 3% 0 -5% 0;
  display: flex;
  border-radius:5px;
  justify-content: center;
  align-items: center;
}
	
	.contentPic{
	width:40%;
	height:40%;
	max-width:350px;
	max-height:490px;
	}
	
	
.buystyle{
	padding:12px 50px 12px 50px;
	background-color:#F00;
	color:#FFF;
	font-size:1.4rem;
	border-radius:10px;
	}	

.content1{
	color:#491f0e;
	max-width:1000px;
	font-family:"微軟正黑體";
	font-size:24px;
	padding:2% 5% 0 5%;
	font-size: 1rem;
	text-align:left;
	font-weight:550;
	}	

.sign{
	background-image:url(images/sign.jpg);
	background-repeat:no-repeat;
	padding:10px 20px 20px 20px;
	}

.signstyle{
	border:solid #9C9C9C 1px;
	border-radius:5px;
	font-size:2rem;
	font-weight:bold;
	padding:2px 10px 2px 10px;
}	

.content2{
	color:#491f0e;
	max-width:1000px;
	font-family:"微軟正黑體";
	font-size:24px;
	padding:2% 5% 5% 5%;
	font-size: 1rem;
	text-align:left;
	font-weight:550;
	line-height:2rem;
	}

.contenttitle{
	color:#491f0e;
	max-width:1000px;
	font-family:"微軟正黑體";
	padding:5% 0 0 0;
	font-size: 1.6rem;
	text-align:center;	
	font-weight:bold;
	}


.contenttitle2{
	color:#491f0e;
	max-width:1000px;
	font-family:"微軟正黑體";
	font-size: 1.1rem;
	text-align:center;	
	font-weight:bold;
	}	
	
.contenttitle3{
	color:#491f0e;
	max-width:1000px;
	font-family:"微軟正黑體";
	font-size: 1.4rem;
	text-align:center;	
	font-weight:bold;
	}	
	
.indent{
	text-indent:5rem;}		
	
	}



	
@media (max-width: 767px) {
.flex {
  display: flex;
  display: -ms-flex;
  flex-wrap: wrap;
  max-width:1000px;
  justify-content: center;
}

.item {
  margin: 0 0 15px 0;
  display: flex;
  border-radius:5px;
  justify-content: center;
  align-items: center;
}

.item2 {
  margin: 3% 0 -5% 0;
  display: flex;
  border-radius:5px;
  justify-content: center;
  align-items: center;
}

.content1{
	color:#491f0e;
	max-width:1000px;
	font-family:"微軟正黑體";
	font-size:24px;
	padding:2% 5% 0 5%;
	font-size: 1rem;
	text-align:left;
	font-weight:550;
	}

.content2{
	color:#491f0e;
	max-width:1000px;
	font-family:"微軟正黑體";
	font-size:24px;
	padding:2% 5% 5% 5%;
	font-size: 1rem;
	text-align:left;
	font-weight:550;
	line-height:2rem;
	}

.contenttitle{
	color:#491f0e;
	max-width:1000px;
	font-family:"微軟正黑體";
	padding:5% 0 0 0;
	font-size: 1.6rem;
	text-align:center;	
	font-weight:bold;
	}


.contenttitle2{
	color:#491f0e;
	max-width:1000px;
	font-family:"微軟正黑體";
	font-size: 1.1rem;
	text-align:center;	
	font-weight:bold;
	}
		
.contenttitle3{
	color:#491f0e;
	max-width:1000px;
	font-family:"微軟正黑體";
	font-size: 1.6rem;
	text-align:center;	
	font-weight:bold;
	}

.contenttitle_4{
	color:#491f0e;
	max-width:1000px;
	font-family:"微軟正黑體";
	padding:1.2% 0 0 0;
	font-size: 1.6rem;
	text-align:center;	
	font-weight:bold;
	}

.contentPic{
	width:60%;
	height:60%;
	max-width:350px;
	max-height:490px;
	}

.contentPic2{
	width:35%;
	height:35%;
	padding:0 10px 0 10px;
	}
	
#prevSet{
	margin-top:2%;
	z-index:120;
	width:90%;
	max-width:1200px;
	border:solid #CCC 5px;
	}

#Bookpreview{
	background-color:#666;
	top:0;
	left:0;
	position:fixed;
	width:100%;
	height:100%;
	opacity:1;
	z-index:120;	
	}

.buystyle{
	padding:12px 50px 12px 50px;
	background-color:#F00;
	color:#FFF;
	font-size:3rem;
	border-radius:10px;
	}	

.sign{
	background-image:url(images/sign.jpg);
	background-repeat:no-repeat;
	padding:10px 20px 20px 20px;
	}

.signstyle{
	border:solid #9C9C9C 1px;
	border-radius:5px;
	font-size:1rem;
	font-weight:bold;
	padding:2px 10px 2px 10px;
}

.indent{
	text-indent:5.5rem;}	
					
	}	


/*
==============================================
alpha0
==============================================
*/

.alpha0{
	animation-name: alpha0;
	-webkit-animation-name: alpha0;	

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;
	animation-fill-mode: backwards;/**/
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;

	visibility: visible !important;	
}

@keyframes alphao {
	0% {
		opacity: 0.0;		
	}

	50% {
		opacity: 1;	
	}	
}

@-webkit-keyframes alpha0 {
	0% {
		opacity: 0.0;		
	}
	50% {
		opacity: 1;	
	}
}