@charset "Big5";
/* CSS Document */

/*本專輯樣式*/
body {background-color:#FFF;}
.book{width:190px; height:410px;float:left;}
.a3_01{width:275px; margin:20px auto;}
.a3_02{width:348px; margin:20px auto;}

footer{clear:both;width: 100%;overflow:hidden;background-color: #efefef;padding-bottom:40px;}
footer h5{padding-top:10px;font-size: 1em;font-weight: 400;color: #333;text-align: center;line-height: 1.8em;width: 100%;}
footer h5 a:link{color: #333;text-decoration:none;}
footer h5 a:visited{color: #333;text-decoration:none;}
footer h5 a::hover{color: #333;text-decoration:none;}
footer h5 img{padding-top:10px;}

#TOP-MENU{display:none;	}
#TOP-MENU #BTN{}

#NAV{
	width:100%;
	height:60px;
	margin:0 auto;
	background-color:#0597ad;
	font-size:1em;
	line-height: 1em;
	font-weight:bold;
	z-index: 9999;
	position:fixed;
	top: 0;
}

#NAV ul{
	width:100%;
	height:60px;
	margin: 0 10% 0 30%;	
	text-align: center;
}

#NAV li{
	width: 10%;
	float:left;
}

#NAV li a{
	display:block;	
	padding-right:10px;
	line-height:60px;
	text-align:center;
	text-decoration:none;
	color:#fff;
}

#NAV li a:hover{
	color:#ffff00;
}
.NAV-LOGO{
	display:block;
	float:left;
	width:80px;
	height:60px;
	line-height:60px;
	top:16px;left:10px;
	text-align:center; }

#logor{
	float:left;
	line-height:60px;
	}
#logor img{
	width:90%;
	margin:3%;
	}

.logor{float:left;	line-height:60px;}
.logor img{	width:60%;}
.buypng img{display:none;}
.navcolor{font-weight: 700;}

.cart_icon{font-size: 1.5em;padding-right: 1%;color: #FFFFFF;}


@media screen and (min-width: 1050px) {
	.a1{height:auto; width:100%; overflow:hidden;}
	.a1 img{width:100%; height:auto;}
	.a3{width:100%;height:auto;background-color:#fff6cf;padding:20px 0px;}
	.book_list{width:840px;height: auto;margin:0 auto;}
	.a2_01{width:819px; margin:0 auto;}
	.a2_02{width:924px; margin:0 auto;}
	
	.a4_new{width:100%;height:auto;background-color:#fffcef;padding:20px 0px;}
	.book_list_b{width:630px;height: auto;margin:0 auto;}
	
	.a4{width:100%;height:700px;background-color:#fffcef;padding:20px 0px;}
	.a4_01{max-width:550px; margin:20px auto;}
	.a4_01 img{width:100%;}
	.a4_02{width:700px;margin:0 auto;}
	.a4_02 img{width:32%;}
	.a5{width:100%;background-color:#ffffff;padding:20px 0px;}
	.a5_01{max-width:552px;margin:20px auto;}
	.a5_02{max-width:851px;margin:0 auto;}
	#gift{position: fixed;right: 15px;bottom: 10px;padding: 10px 0px;}
	#gift img{width: 155px;height: auto; margin: 0 auto;}		
	
}

@media screen and (min-width: 840px) and (max-width:1049px) {
	.a1{height:auto; width:100%; overflow:hidden;}
	.a1 img{width:100%; height:auto;}
	.a3{width:100%;height:auto;background-color:#fff6cf;padding:20px 0px;}
	.book_list{width:840px;height: auto;margin:0 auto;}
	.a2_01{width:819px; margin:0 auto;}
	.a2_02 img{width:24%;}
	
	.a4_new{width:100%;height:auto;background-color:#fffcef;padding:20px 0px;}
	.book_list_b{width:630px;height: auto;margin:0 auto;}
	
	.a4{width:100%;height:700px;background-color:#fffcef;padding:20px 0px;}
	.a4_01{width:550px; margin:20px auto;}
	.a4_01 img{width:100%;}
	.a4_02{width:700px;margin:0 auto;}
	.a4_02 img{width:32%;}
	.a5{width:100%;background-color:#ffffff;padding:20px 0px;}
	.a5_01{max-width:552px;margin:20px auto;}
	.a5_02{max-width:851px;margin:0 auto;}
	#gift{position: fixed;right: 15px;bottom: 10px;padding: 10px 0px;}
	#gift img{width: 155px;height: auto; margin: 0 auto;}
	
	#TOP-MENU{display:block;width:100%;height:60px;	position:relative; background-color:#ff6600;position:fixed;top: 0;left: 0;z-index: 9991;/*把選單改成永遠隨頂*/}
#TOP-MENU #BTN{ display:block;width:60px;height:40px;background-image:url(images/btn.png);position:absolute;right:5px;top:10px;	text-indent:-9999px;}
/*--NAV展開-絕對定位疊在navbar下層*/ 
#NAV{width:100%;height:auto;background-color:#ff9900;display:none;position: fixed; top: 60px;left: 0;z-index: 9990;/*用絕對定位讓NAV疊在下層*/}
#NAV.open{top: 60px; display: block;}
#NAV ul{width:100%;	height:auto;margin: 0 auto;}	
#NAV li{width:100%;float:none; }
#NAV li a{display:block;width:100%;	height:50px;line-height:50px;text-align:center;text-decoration:none;background-color:#ff9900;border:1px solid #FFF;color:#fff;font-weight: 600;}
#NAV li a:hover{background-color:#ccc;border:1px solid #FFF;}
.NAV-LOGO{display:block;float:left;width:80px;height:40px;line-height:50px;top:8px;left:10px;text-align:center; }
.NAV-LOGO img{margin:12%;line-height:40px;}
#logor{	display:none;float:left;}
#logor img{display: none;width:80%;margin:3%;}	

.logor{display: none;float:left;line-height:60px;}
.logor img{	display: none;}
.buypng img{display:block;top:0px;position: absolute;}	
	
}

@media screen and (min-width: 630px) and (max-width:839px) {
	.a1{height:auto; width:100%; overflow:hidden;}
	.a1 img{width:100%; height:auto;}
	.a3{width:100%;height:auto;background-color:#fff6cf;padding:20px 0px;}
	.book_list{width:630px;height: auto;margin:0 auto;}
	.a2_01 img{width:80%; margin:0 auto;}
	.a2_02 img{width:24%;}
	
	.a4_new{width:100%;height:auto;background-color:#fffcef;padding:20px 0px;}
	.book_list_b{width:630px;height: auto;margin:0 auto;}
	
	.a4{width:100%;height:700px;background-color:#fffcef;padding:20px 0px;}
	.a4_01{width:550px; margin:20px auto;}
	.a4_01 img{width:100%;}
	.a4_02{width:630px;margin:0 auto;}
	.a4_02 img{width:32%;}
	.a5{width:100%;background-color:#ffffff;padding:20px 0px;}
	.a5_01{max-width:552px;margin:20px auto;}
	.a5_01 img{width:100%}
	.a5_02{max-width:100%;margin:0 auto;}
	.a5_02 img{width:100%}		
	#gift{position: fixed;right: 15px;bottom: 10px;padding: 10px 0px;}
	#gift img{width: 100px;height: auto; margin: 0 auto;}		

	#TOP-MENU{display:block;width:100%;height:60px;	position:relative; background-color:#ff6600;position:fixed;top: 0;left: 0;z-index: 9991;/*把選單改成永遠隨頂*/}
#TOP-MENU #BTN{ display:block;width:60px;height:40px;background-image:url(images/btn.png);position:absolute;right:5px;top:10px;	text-indent:-9999px;}
/*--NAV展開-絕對定位疊在navbar下層*/ 
#NAV{width:100%;height:auto;background-color:#ff9900;display:none;position: fixed; top: 60px;left: 0;z-index: 9990;/*用絕對定位讓NAV疊在下層*/}
#NAV.open{top: 60px; display: block;}
#NAV ul{width:100%;	height:auto;margin: 0 auto;}	
#NAV li{width:100%;float:none; }
#NAV li a{display:block;width:100%;	height:50px;line-height:50px;text-align:center;text-decoration:none;background-color:#ff9900;border:1px solid #FFF;color:#fff;font-weight: 600;}
#NAV li a:hover{background-color:#ccc;border:1px solid #FFF;}
.NAV-LOGO{display:block;float:left;width:80px;height:40px;line-height:50px;top:8px;left:10px;text-align:center; }
.NAV-LOGO img{margin:12%;line-height:40px;}
#logor{	display:none;float:left;}
#logor img{display: none;width:80%;margin:3%;}	

.logor{display: none;float:left;line-height:60px;}
.logor img{	display: none;}
.buypng img{display:block;top:0px;position: absolute;}	
	
}

@media screen and (min-width: 420px) and (max-width:629px) {
	.a1{height:auto; width:100%; overflow:hidden;}
	.a1 img{width:165%; height:auto;position:relative;left:-18%;}
	.a3{width:100%;height:auto;background-color:#fff6cf;padding:20px 0px;}	

	
	.book_list{width:420px;height: auto; margin:0 auto;}
	.a2_01 img{width:100%; margin:0 auto;}
	.a2_02{width:460px; margin:0 auto;}
	.a2_02 img{width:24%;}
	
	.a4_new{width:100%;height:auto;background-color:#fffcef;padding:20px 0px;}
	.book_list_b{width:420px;height: auto;margin:0 auto;}
	
	.a4{width:100%;height:935px;background-color:#fffcef;padding:20px 0px;}
	.a4_01{width:100%; margin:20px auto;}
	.a4_01 img{width:100%;}
	.a4_02{width:85%;margin:0 auto;}
	.a4_02 img{width:45%;}
	.a5{width:100%;background-color:#ffffff;padding:20px 0px;}
	.a5_01{max-width:100%;margin:20px auto;}
	.a5_01 img{width:100%}
	.a5_02{max-width:100%;margin:0 auto;}
	.a5_02 img{width:100%}	
	#gift{position: fixed;right: 15px;bottom: 10px;padding: 10px 0px;}
	#gift img{width: 80px;height: auto; margin: 0 auto;}	
	
	
	#TOP-MENU{display:block;width:100%;height:60px;	position:relative; background-color:#ff6600;position:fixed;top: 0;left: 0;z-index: 9991;/*把選單改成永遠隨頂*/}
#TOP-MENU #BTN{ display:block;width:60px;height:40px;background-image:url(images/btn.png);position:absolute;right:5px;top:10px;	text-indent:-9999px;}
/*--NAV展開-絕對定位疊在navbar下層*/ 
#NAV{width:100%;height:auto;background-color:#ff9900;display:none;position: fixed; top: 60px;left: 0;z-index: 9990;/*用絕對定位讓NAV疊在下層*/}
#NAV.open{top: 60px; display: block;}
#NAV ul{width:100%;	height:auto;margin: 0 auto;}	
#NAV li{width:100%;float:none; }
#NAV li a{display:block;width:100%;	height:50px;line-height:50px;text-align:center;text-decoration:none;background-color:#ff9900;border:1px solid #FFF;color:#fff;font-weight: 600;}
#NAV li a:hover{background-color:#ccc;border:1px solid #FFF;}
.NAV-LOGO{display:block;float:left;width:80px;height:40px;line-height:50px;top:8px;left:10px;text-align:center; }
.NAV-LOGO img{margin:12%;line-height:40px;}
#logor{	display:none;float:left;}
#logor img{display: none;width:80%;margin:3%;}	

.logor{display: none;float:left;line-height:60px;}
.logor img{	display: none;}
.buypng img{display:block;top:0px;position: absolute;}	
}

@media screen and (min-width: 10px) and (max-width: 419px) {
	.a1{height:auto; width:100%; overflow:hidden;}
	.a1 img{width:160%; height:auto;position:relative;left:-20%;}
	.a3{width:100%;height:auto;background-color:#fff6cf;padding:20px 0px;}
	

	.book_list{width:190px;height: auto;margin:0 auto;}
	.a2_01 img{width:100%; margin:0 auto;}
	.a2_02{width:90%; margin:0 auto;}
	.a2_02 img{width:23%;}
	/*.a2_02{width:100%; margin:0 auto;}
	.a2_02 img{width:20%; margin:0 auto;}/*後來加的,改圖不縮小*/
	
	.a4_new{width:100%;height:auto;background-color:#fffcef;padding:20px 0px;}
	.book_list_b{width:190px;height: auto;margin:0 auto;}
	
	.a4{width:100%;height:2030px;background-color:#fffcef;padding:20px 0px;}
	.a4_01{width:100%; margin:20px auto;}
	.a4_01 img{width:100%;}
	.a4_02{width:250px;margin:0 auto;}
	.a4_02 img{width:90%;}
	.a5{width:100%;background-color:#ffffff;padding:20px 0px;}
	.a5_01{max-width:100%;margin:20px auto;}
	.a5_01 img{width:100%}
	.a5_02{max-width:100%;margin:0 auto;}
	.a5_02 img{width:100%}
	
	#gift{position: fixed;right: 15px;bottom: 10px;padding: 10px 0px;}
	#gift img{width: 80px;height: auto; margin: 0 auto;}	
	
	
	#TOP-MENU{display:block;width:100%;height:60px;	position:relative; background-color:#ff6600;position:fixed;top: 0;left: 0;z-index: 9991;/*把選單改成永遠隨頂*/}
#TOP-MENU #BTN{ display:block;width:60px;height:40px;background-image:url(images/btn.png);position:absolute;right:5px;top:10px;	text-indent:-9999px;}
/*--NAV展開-絕對定位疊在navbar下層*/ 
#NAV{width:100%;height:auto;background-color:#ff9900;display:none;position: fixed; top: 60px;left: 0;z-index: 9990;/*用絕對定位讓NAV疊在下層*/}
#NAV.open{top: 60px; display: block;}
#NAV ul{width:100%;	height:auto;margin: 0 auto;}	
#NAV li{width:100%;float:none; }
#NAV li a{display:block;width:100%;	height:50px;line-height:50px;text-align:center;text-decoration:none;background-color:#ff9900;border:1px solid #FFF;color:#fff;font-weight: 600;}
#NAV li a:hover{background-color:#ccc;border:1px solid #FFF;}
.NAV-LOGO{display:block;float:left;width:80px;height:40px;line-height:50px;top:8px;left:10px;text-align:center; }
.NAV-LOGO img{margin:12%;line-height:40px;}
#logor{	display:none;float:left;}
#logor img{display: none;width:80%;margin:3%;}	

.logor{display: none;float:left;line-height:60px;}
.logor img{	display: none;}
.buypng img{display:block;top:0px;position: absolute;}	
}