@charset "big5";

/*共用*/
body {
	width: 100%;
	font-family: Helvetica, Arial, 微軟正黑體, "Microsoft JhengHei", "LiHei Pro", sans-serif, 新細明體;
	font-size: 16px;
	color: #333333;
	background-color: #EAEAEA;
	overflow-y: scroll;
}
.wrapper {
	width: 100%;
	position: relative;
}

/*gotop*/
.side_page {
    width: 60px;
	position: absolute;
	right: 10px;
    bottom: 60px;
	cursor: pointer;
	display: none;
	z-index: 999;
}
.side_page li {
	font-size: 2em;
	text-align: center;
	color: #FFF;
	background-color: rgba(0,0,0, 0.5);
}

/*side_page*/
.side_page li { border-radius: 10px; padding: 10px 0; }
.side_page li a:link, .side_page li a:visited { color: #FFF; }
.side_page li:hover, .side_page li a:hover, .side_page li:focus, .side_page li a:focus { background-color: rgba(0,0,0, 0.8); }

@media screen and (max-width: 834px) {    
    .side_page { right: 5px; }
}
@media screen and (max-width: 480px) {
    .side_page { width: 45px; right: 5px; bottom: 40px; }
    .side_page li {	font-size: 1.5em; padding: 5px 0; }
}

/*加碼--------------------------------------------*/
.headerbn-area, .headerbn-area-m {
	width: 100%;
	height: auto;
	text-align: center;
	display: block;
}
.headerbn-area img, .headerbn-area-m img  {
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.headerbn-area-m { display: none; }

@media screen and (max-width: 480px) {
	.headerbn-area { display: none; }
    .headerbn-area-m { display: block; }
}

/*主視覺*/
section { width: 100%; padding: 0; margin: 0; position: relative; }
.kv-area { width: 100%; padding: 0; margin: 0; }
.kv-area img { width: 100%; }
.kv-pc { position: relative; width: 100%; display: block; }
.kv-m { position: relative; display: none; }
.kv-txt {
    position: absolute; top: 0; left: 0;
    width: 52%;
    margin: 0 24%;
}

/*item樣式*/
.iblock { width: 0; height: 100%; vertical-align: middle; display: inline-block; }
div[class^="photo"] { text-align: center; padding: 10px; }
div[class^="photo"] img { width: auto; }
div[class^="name"] {
	width: 100%;
	font-size: 1.125em;
    font-weight: 600;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /*顯示的行數*/
	line-height: 1.3em; /*行高值*/
	height: 2.5em; /*限定高度為行數乘行高的值*/
    padding: 0 10px;
    margin-bottom: 8px;
	overflow: hidden;
}
div[class^="price"] { font-size: 0.875em; padding: 0 10px; }
div[class^="sale"] { font-size: 1em; font-weight: 600; letter-spacing: 0.2px; padding: 0 10px; margin-bottom: 10px; }
div[class^="sale"] span { font-size: 1.125em; }
div[class^="sale"] strong { font-size: 1.125em; padding: 0 2px 0 5px; }
div[class^="sale"] b { font-size: 1.875em; }

/*新書*/
#s1 {
	width: 100%;
	padding: 0 0 50px 0;
	background-color: #ff7473;
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
#s1 h2 {
	width: 70%;
	margin: 0 auto 30px auto;
    overflow: hidden;
}
.s1_title1 {
	float: left;
}
.s1_title2 {
	float: left;
	font-size: 1.5em;
	color: #FFFFFF;
	line-height: 120%;
	padding: 30px 0 0 0;
}
.s1_title2 b {
	font-size: 1.5em;
	color: #FFFFFF;
}
.more a:link, .more a:visited {
    float: left;
    width: 150px;
	font-size: 1.5em;
	text-align: center;
	text-decoration: none;
	color: #FFFFFF;
	background-color: #d9534f;
	padding: 8px 15px;
	margin: 30px 0 0 15px;
	border-radius: 5px;
    display: block;
}
.more a:hover, .more a:focus {
	color: #FFFFFF;
	background-color: #CC0000;
}
.list-1 {
	width: 70%;
	margin: 0 auto;
}
.list-1 ul { overflow: hidden; }
.list-1 li {
	float: left;
	width: 23%;
	background-color: #ffdb66;
	padding: 10px 10px 20px 10px;
	margin: 0 1%;
	display: block;
	position: relative;
}

.name-1 {
	width: 100%;
	height: 2.2em;
	font-size: 1em;
	line-height: 120%;
	padding: 0 5%;
	margin-top: 8px;
	overflow: hidden;
}

.photo-1 { height: 250px; }
.photo-1 img { max-height: 230px; }
.name-1, .name-1 a:link, .name-1 a:visited {	color: #333333; }
.name-1:hover, .name-1 a:hover, .name-2 a:focus { color: #47B8E0; }
.price-1 { color: #999; }
.sale-1, .sale-1 span { color: #999; }
.sale-1 strong, .sale-1 b { color: #FF0000; }
.photo-2 { height: 250px; background-color: #FFF; }
.photo-2 img { max-height: 230px; }

/*近期熱賣*/
#s2 {
    background-color: #ffdb66;
    padding: 0 0 50px 0;
}
#s2 h2 {
	text-align: center;
	margin-bottom: 30px;
	background-image: url(../images/bg.jpg);
	background-repeat: repeat-x;
	background-position: center top;
}
.list-2 { width: 70%; margin: 0 auto; }
.list-2 ul { overflow: hidden; }
.list-2 li {
	float: left;
	width: 23%;
	background-color: #34314c;
	padding: 10px 0 20px 0;
	margin: 0 1%;
	display: block;
	position: relative;
}
.name-2 {
	width: 100%;
	height: 2.2em;
	font-size: 1em;
	line-height: 120%;
	padding: 0 5%;
	margin-top: 8px;
	overflow: hidden;
}
.name-2, .name-2 a:link, .name-2 a:visited { color: #FFF; }
.name-2:hover, .name-2 a:hover, .name-2 a:focus { color: #47B8E0; }
.sale-2, .sale-2 span { color: #999; }
.sale-2 strong, .sale-2 b { color: #FFFF00; }

/*職人*/
#s3 { background-color: #ff7473; padding: 10px 0 50px 0; }
#s3 h2 { text-align: center; }
.list-3 { width: 60%; margin: 0 auto; }
.list-3 ul {
	background-color: #FFFFFF;
	border: 5px solid #34314c;
	padding: 0 20px 20px 20px;
	border-radius: 10px;
    overflow: hidden;
}
.list-3 li {
	float: left;
	width: 23%;
	margin: 0 1%;
	display: block;
}

/*66折*/
#s4 {
	width: 100%;
	padding: 10px 0 40px 0;
	background-color: #EAEAEA;
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
#s4 h2 { text-align: center; }
.list-4 { width: 50%; margin: 0 auto; }
.list-4 ul {
	background-color: #FFFFFF;
	border: 5px solid #47B8E0;
	padding: 10px 20px 20px 20px;
    overflow: hidden;
}
.list-4 li { float: left; width: 27.333%; margin: 0 3%; display: block; }
.photo-3 { float: none; width: 100%; margin: 0; }
.info { float: none; width: 100%; }

/*rule*/
#s5 { 
    background-color: #EAEAEA;
    padding: 30px 0; 
}
.btn_rule a, a.btn_rule {
	width: 30%;
	height: 60px;
	font-size: 2em;
	line-height: 60px;
	text-align: center;
	background-color: #FFFFFF;
	margin: 0 auto;
	border-radius: 3px;
	display: block;
}
.btn_rule a:link, .btn_rule a:visited, a.btn_rule:link, a.btn_rule:visited { color: #47B8E0; }
.btn_rule a:hover, .btn_rule a:focus, a.btn_rule:hover, a.btn_rule:focus { color: #FFF; background-color: #666; }
a.btn_rule { margin-top: 25px; }
.rule {
	width: 70%;
	padding: 2%;
	margin: 0 auto;
	display: none;
}
.rule h3 {
	font-size: 1.2em;
	font-weight: bold;
	line-height: 130%;
	color: #1184AD;
	margin-bottom: 8px;
}
.rule ol {
	list-style: disc;
	margin-left: 20px;
}
.rule ul {
	list-style: decimal;
	margin-left: 20px;
	margin-top: 5px;
}
.rule li {
	font-size: 1em;
	line-height: 140%;
	color: #333;
	margin-bottom: 5px;
}
.rule p {
	font-size: 1em;
	line-height: 140%;
	color: #333;
}
.rule li a:link, .rule li a:visited, .rule p a:link, .rule p a:visited {
	font-size: 1em;
	line-height: 140%;
	color: #333;
	text-decoration: underline;
}
.rule li a:hover, .rule li a:focus, .rule p a:hover, .rule p a:focus { color: #1184AD; }
.btn_more a:link, .btn_more a:visited, .rule li .btn_more a:link, .rule li .btn_more a:visited {
	width: 200px;
	height: 46px;
	font-size: 1em;
	text-align: center;
	text-decoration: none;
	line-height: 46px;
	color: #FFF;
	background-color: #47B8E0;
	margin: 15px 0 15px -15px;
	border-radius: 5px;
	display: block;
}
.btn_more a:hover, .btn_more a:focus, .rule li .btn_more a:hover, .rule li .btn_more a:focus {
	color: #FFF;
	background-color: #1184AD;
}
.gift { float: right; width: 400px; margin: 15px; }
.gift img { width: 100%; }

/*其他活動*/
#s6 { background-color: #999; padding: 30px 0; }
.bn { width: 55%; margin: 0 auto; }
.bn ul { overflow: hidden; }
.bn li {
    float: left;
    width: 49.5%;
    margin: 0 0.25% 0.5% 0.25%;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
}
.bn li:hover {
    -webkit-transform: scale(0.98);
    -moz-transform: scale(0.98);
    -ms-transform: scale(0.98);
    -o-transform: scale(0.98);
    transform: scale(0.98);
}

/*copyright--------------------------------------------*/
.copyright {
    width: 100%;
    font-size: 0.9em;
    line-height: 26px;
    text-align: center;
    color: #eaeaea;
    background-color: #666;
    padding: 5px 0;
}
.copyright img {
    height: 26px;
    padding: 0 10px 0 0;
}
@media screen and (max-width: 480px) { 
    .copyright { font-size: 0.7em; }
}
@media screen and (max-width: 320px) { 
    .copyright { font-size: 0.5em; }
}



/*購物車按鈕----------------------------------
--------------------------------------------*/
.cart { width: 80%; text-align: center; margin: 0 auto;}
.pointer { cursor: pointer; }
.width120 { width: 100%;}
.button02, .button03, .button04 {
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 3px;
}
.button02 span, .button03 span, .button04 span {
	font-size: 0.9em;
	line-height: 38px; 
}

/*--2--放入購物車*/
.button02 {
	color: #FFFFFF;
	background-color: #d9534f;
	border:1px solid #d9534f;
}
.button02:hover, .button02:focus {
	color: #FFFFFF;
	background-color: #CC0000;
	border:1px solid #CC0000;
}

/*--3--已放入購物車*/
.button03 {
	color: #FFFFFF;
	background-color: #999999;
	border:1px solid #999999;
	cursor: default;
}

/*--4--已售完，補書中/新書尚未入庫/不開放訂購*/
.button04 {
	color: #666666;
	background-color: #FFFFFF;
	border:1px solid #666666;
	cursor: default;
}