@charset "utf-8";

/*---------- reset*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; font-weight:normal;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block;}
ol, ul {list-style: none;}
a { font-size:100%; text-decoration:none; vertical-align:baseline; background:transparent;}
img { outline:0;}
b,.t-bold { font-weight:bold;}

/* ---------- default ---------- */
html,body {}
body { font-family:'Microsoft JhengHei', sans-serif; color:#000;
	background: url(../images/bg1.jpg), url(../images/bg2.jpg), #f8f3f7;
	background-position: center top, center bottom, center;
	background-repeat: no-repeat, no-repeat, repeat;
	background-size: contain;
}
img { max-width:100%!important; height: auto !important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}
.wrap { width:90%; max-width: 1100px; margin: 0 auto; padding-top:50px; text-align:center;}
/* ---------- head ---------- */
header { width:100%; height:60px; z-index:10; position: relative;}
.logo { position: absolute; left:20px; top: 10px;}
ul#option { position:absolute; top:16px; right:20px; z-index:11;}
ul#option li { display: inline-block; font-size:13px; margin-left:5px; vertical-align:middle; }
ul#option li a { display: block; color: #000;}
ul#option li a:hover { opacity: 0.8;}
.btn-menu { display:none;}
/* ---------- top ---------- */
.bigtitle { width:90%; max-width: 1100px; margin: 0 auto; padding-top:50px; text-align: center;}
h1 { margin: 0 auto; text-align: center;}
h2 { margin: 0 auto; text-align: center; position: relative;}
@-webkit-keyframes fading {
    from { opacity: 0;}
    to { opacity: 1; }
}
@-moz-keyframes fading {
    from { opacity: 0;}
    to { opacity: 1; }
}
@keyframes fading {
    from { opacity: 0;}
    to { opacity: 1; }
}
@-webkit-keyframes fading2 {
    from { opacity: 0; top:-10px;}
    to { opacity: 1; top:0;}
}
@-moz-keyframes fading2 {
    from { opacity: 0; top:-10px;}
    to { opacity: 1; top:0;}
}
@keyframes fading2 {
    from { opacity: 0; top:-10px;}
    to { opacity: 1; top:0;}
}
.h1move {
    opacity: 0;
    -webkit-animation: fading ease-in 1s;
    animation: fading ease-in 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.h2move {
	opacity: 0;
    -webkit-animation: fading2 ease .5s;
    animation: fading2 ease .5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-delay:1s;
    animation-delay:1s;
}

/* ---------- book ---------- */
a.book { display: inline-block; padding: 10px; height:320px; margin: 5px; vertical-align: top; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
.cover { margin-bottom: 5px;}
.cover img { width: 180px !important; height: 255px !important;}
.cover img.w { box-shadow: 0 0 0 1px #ddd;}
a.book:hover { box-shadow: 0 0 0 3px #ed9491 inset;}
[class^=tag] { position: absolute; left: 0; bottom: 0; font-size: 12px; color: #fff; padding: 3px 8px;}
.tag1 { background:#de4a03;}
.tag2 { background:#ff7f00;}
h3 { font-size: 16px; line-height: 22px; color: #000; font-weight: bold;}
h4 { font-size: 14px; line-height: 20px; color: #ff639a; font-weight: bold;}

#gototop { width: 40px; height: 40px; position: fixed; bottom: 15px; right:15px; z-index: 99; border-radius:50%; background: #ed9491; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
#gototop:hover { bottom: 20px;}
#gototop:after { content: ""; position: absolute; left: 15px; z-index: 11;  display: block; width:8px; height:8px; border-top: 2px solid #fff; border-left: 2px solid #fff;top: 18px; transform: rotate(45deg);}

/* foot */
footer { padding:50px 0; text-align: center; font-size: 12px; line-height: 20px; color: #1f6377;}

@media screen and (max-width: 1024px) {
	.bigtitle {}
	h3 { font-size: 15px; line-height: 20px;}
	h4 { font-size: 13px; line-height:18px;}
}

@media screen and (max-width: 767px) {
	
	/* head */
	header .wrap { width:100%;}
	.logo { left: 10px; top:15px;}
	.logo img { width:60px; height:23px;}
	.logo2 { left:50%; top:15px; margin-left: -100px;}
	.btn-menu { display:block; width:32px; height:32px; position:absolute; top:10px; right:10px; background:url(../images/icon-share.png) no-repeat center; background-size:32px 32px; z-index: 100;}
	.btn-menu.active{ background:url(../images/icon-xx.png) no-repeat center; background-size:32px 32px;}
	ul#option { display:none; width: 100%; height: 70px; top: 0; left: 0; padding-top: 50px; text-align: center; background:#fff; z-index:99; -webkit-backface-visibility:hidden;}

	body {background: url(../images/bg1-m.jpg), url(../images/bg2-m.jpg), #f8f3f7;
		background-position: center top, center bottom, center;
		background-repeat: no-repeat, no-repeat, repeat;
		background-size: contain;}
	.wrap { padding-top:30px}
	.bigtitle { padding-top:20px;}
	.cover img { width: 150px !important; height: 213px !important;}
	a.book { height:270px; width: 150px;}	
	footer { padding: 50px 50px 80px 50px;}
}

@media screen and (max-width: 600px) {
	.btn-menu { width:26px; height:26px; top:15px; right:10px; background-size:26px 26px;}
	ul#option li { font-size:13px; margin-left:8px;}
}

@media screen and (max-width: 500px) {
	
	.cover img { width: 130px !important; height: 185px !important;}
	a.book { height:245px; width: 130px; padding: 6px; margin:7px 4px;}
	h3 { font-size: 14px; line-height:25px;}
	h4 { font-size: 13px; line-height:14px;}
}