/*Reset*/
body, html, applet, object, iframe, img, strong, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input { margin:0; padding:0; border:0; outline:0; }
:focus { outline:0; }
html, body { height:100%; }
h1, h2, h3, h4, h5, h6 { font-size:100%; margin:0; }
input, button, textarea, select, optgroup, option { font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit; }
code, kbd, samp, tt { font-size:100%; }
/*@purpose To enable resizing for IE */

/*@branch For IE6-Win, IE7-Win */

input, button, textarea, select { *font-size:100%;}
body { line-height: normal; }
ol, ul, li { list-style:none; }
:link, :visited, ins { text-decoration:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }



body { margin:0; padding:0; border:0; font-size:13px; font-family:Verdana, Geneva, sans-serif; background-attachment:fixed; }
table, tr, td, a, img { border:0; margin:0; padding:0; }
a { color:#333; text-decoration:none; }
a:hover { color:#C00; }
.page { position:relative; min-width:980px; height:100%; margin:0 auto; }

#QiHead { position: fixed; z-index:99; width:100%; height:50px; height:42px; }/*---------最上面那一條---------*/
#QiHead a.logo { background:url(images/logo.png) no-repeat; display:inline-block; width:192px; height:42px; margin-top:10px; margin-left:10px; }
.optionUI { float:right; margin-top:25px; margin-right:10px; height:16px; line-height:16px; }
.optionUI a { display:inline-block; text-align:right; vertical-align:middle; margin-left:5px; }
.optionUI a.share { background:url(images/icon-Share.gif) no-repeat; width:16px; height:18px; text-indent:-99999em; }
.optionUI a.share.f { background-position:0 0; }
.optionUI a.share.p { background-position:0 -20px; }
.optionUI a.share.t { background-position:0 -40px; }

#head { position:relative; width:100%; height:100%; }
#head h1, #head div { position:absolute; left:100px; }
#head h1.Head-Title { top:12%; background:url(images/Head-Title.png) no-repeat left top; width:800px; height:340px; }
#head .Head-Text { bottom:0%; left:230px; right:0; height:40px; font-size:18px; line-height:22px; text-align:left; }
#head .Head-ShortTitle { top:35%; margin-left:-270px; background:url(images/Head-ShortTitle.png) no-repeat; width:45px; height:90px; }

ul#nav { position:fixed; right:10px; top:50%; z-index:99999; padding:25px 0; margin-top:-85px; width:125px; height:170px; background:url(images/NavBG.gif) no-repeat; }
ul#nav li { padding:5px 10px; text-align:center; }
ul#nav li a { color:#fff; font-size:15px; }
ul#nav li a:hover, ul#nav li a.current { font-weight:bold; }

.footer { text-align:center;padding:30px 0; }


.contant { position:relative; width:980px; margin:auto; }
.contant h2 { position:absolute; z-index:1; background:url(images/TitleBG.png) no-repeat; width:310px; height:150px; padding-top:150px; font-size:30px; text-align:center; font-weight: bold; color:#fff; font-family:新細明體; }
.contant .wrap-box {
	position:relative;
	top:150px;
	margin:auto;
	width:780px;
	margin-bottom:150px;
}
.contant .wrap-box .wrap-inner {
	padding-top:100px;
	background-color:rgba(0,0,0,0.8);
}
.text { padding:55px 50px; font-size:15px; line-height:24px; color:#CCC; }
.text b { font-size:24px; }
.text h3 { font-size:20px; color:#F00; margin-bottom:20px; }

.text a { color:#FC0; }

ul.bookList { overflow:hidden; text-align:center; }
ul.bookList li { display:inline-block; padding:10px; }
ul.bookList li img { width:115px; height:165px; border:solid 1px #FFF;; }
ul.bookList li span { display:block; padding:10px 0; text-align:center; }

ul.qa { overflow:hidden; margin:20px 0; }
ul.qa li.q, ul.qa li.a { position:relative; padding-left:60px; line-height:18px; }
ul.qa li span { font-weight:bold; font-size:18px; display: block; position: absolute; left:0; height: 50px; }
ul.qa li.q { color:#FFF; margin-bottom:5px; font-weight:bold; }
ul.qa li.a { margin-bottom:40px; }
ul.qa li.q span { color:#C00; }
ul.qa li.a span { color:#390; }


.monster { margin:10px 0; }
.monster img { width:20%; height:20%; padding:10px; }
ul.monsterList li { margin-bottom:10px; line-height:18px; }
ul.monsterList li span { display:block; margin-bottom:5px; color:#6C0; font-weight:bold; }

dl.field { overflow:hidden; margin-bottom:50px; }
dl.field dt, dl.field dd { display:inline-block; margin:0; vertical-align:top;}
dl.field dt { width:300px; font-size:18px; font-weight:bold; text-align:right; margin-right:50px; }
dl.field dd { width:620px; font-size:15px; }
dl.field dd b { color:#c6241f; }

hr { 
	border:0;
	height:1px;
	color:#b7b7b7;
	background-color:#b7b7b7;
	-webkit-box-shadow:0 1px 0 #fff;
	-moz-box-shadow:0 1px 0 #fff;
	box-shadow:0 1px 0 #fff;
}

ol { }
ol li { list-style:decimal; margin-left:25px; margin-bottom:10px; }


.titleHead { width:800px; height:146px; margin:20px auto; overflow:hidden; }
.titleHead h3 { background:url(images/HeadTitleIMG.png) no-repeat; height:146px; width:157px; float:left; font-size:24px; line-height:146px; vertical-align:middle; text-align:center; color:#fff; }
.titleHead div { font-size:20px; margin-left:180px; padding-top:50px; }

.book-wrap { padding-bottom:40px; position:relative; }
.book-wrap .tag {
	position:absolute;
	width:50px;
	padding:15px;
	top:-20px;
	right:0;
	color:#FF0;
	text-align:center;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	border-radius:50px;
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ff3019 0%,#cf0404 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
}
.book-wrap .tag span { display:block; font-size:20px; font-weight:bold; font-family:Verdana, 微軟正黑體; }
.book-wrap .cover { float:left; width:210px; margin-right:15px; }
.book-wrap .book-info { float:left; width:450px; }
.book-wrap .book-info .book-name { font-size:50px; font-weight:bold; margin-bottom:30px; line-height:50px; color:#fff; text-shadow:1px 1px 5px rgba(0,0,0,0.7); }
.book-wrap .book-info .book-title { font-size:24px; font-weight:bold; margin-bottom:15px; line-height:30px; color:#FC3; }
.book-wrap .book-info .book-text { font-size:13px; line-height:18px; color:#ccc; }



dl.field.date { overflow:hidden; margin:0 auto 50px; width:700px; }
dl.field.date dt, dl.field dd { display:inline-block; margin:0; vertical-align:top;}
dl.field.date dt { background:url(images/DataBG.png) no-repeat; width:193px; height:258px; vertical-align:middle; font-weight:normal; line-height:258px; font-size:20px; text-align:center; margin-right:50px; color:#fff; }
dl.field.date dt span { font-size:35px; }
dl.field.date dd { width:450px; font-size:15px; text-shadow:-1px -1px 0 #fff; padding-top:120px; }
dl.field.date dd b { color:#c6241f; }

.text .btn {
display:inline-block;
padding:10px 30px;
margin-top:20px;
margin-bottom:3px;
border:solid 1px #b97400;
box-shadow:0 5px 0 #b97400;
color:#fff;
text-shadow:1px 1px 0 #b97400;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
background: #ffd65e; /* Old browsers */
background: -moz-linear-gradient(top,  #ffd65e 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffd65e 0%,#febf04 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
}
.text .btn:hover {	
box-shadow:0 2px 0 #b97400;
color:#fff;
text-shadow:-1px -1px 0 #b97400;
margin-top:23px;
margin-bottom:0px;
background: #f39902; /* Old browsers */
}


.tip {
overflow:hidden;
font-size:12px;
background: rgba(255,255,255,0.8);
margin:20px auto;
padding:30px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.tip h4 { font-size:15px; margin-bottom:20px; }





/* Back To Top */
#back-top { position:fixed; bottom:130px; right:30px; z-index:99999; }
#back-top a {
width:65px;
display:block;
text-align:center;
line-height:65px;
font:11px/100%;
text-transform:uppercase;
text-decoration:none;
color:#fff;
/* background color transition */
-webkit-transition:1s;
-moz-transition:1s;
transition:1s;
}
#back-top a:hover {  }
/* arrow icon (span tag) */
#back-top span {
width:65px;
height:65px;
display:block;
margin-bottom:2px;
opacity:0.5;
background:#000;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
/* background color transition */
-webkit-transition:0.5s;
-moz-transition:0.5s;
transition:0.5s;
}
#back-top a:hover span {
background-color:#c6241f;
opacity:1;
-webkit-border-radius:35px;
-moz-border-radius:35px;
border-radius:35px;
}

/* foreground (ballons/landscape) */
#parallax-bg { position:fixed; top:0; width:100%; z-index:-2; }

#bg { position:absolute; top:400px; left:0; }