@charset "utf-8";

/*reset */
html,body{ padding:0; margin:0;}
h1,h2,h3,h4{ margin:0; padding:0;}
a{ outline:none;}
a:hover{ color:inherit;}
img{ border:none;}
body{font-family:'微軟正黑體',Verdana, Geneva, sans-serif;}

/*--------------------head*/
#qi_bar { width:100%; height:60px; font-size:13px; margin:0 auto; line-height:16px; position:absolute;}
#qi_bar .logo  { float:left; padding:10px;}
#qi_bar .logo a { display:block; background:url(images/logo.png) no-repeat; width:208px; height:44px; text-decoration:none;}
#option { list-style:none; width:265px; float:right; margin-top:20px; margin-right:10px; height:16px; line-height:16px;}
#option li { float:left;}
#option li a { display:block; margin-left:8px; padding-top:5px; color:#FFF; text-shadow:0 0 0 5px #333;text-decoration:none;}
#option li a:hover { color:#999; text-decoration:underline;}
#option li a.share { background:url(images/icon-Share.gif) no-repeat; width:16px; height:13px; text-indent:-99999em; }
#option li a.share.f { background-position:0 0; }
#option li a.share.p { background-position:0 -20px; }
#option li a.share.t { background-position:0 -40px; }
#gotop {
	display:block;
    background-color: #fff;
    border: 1px solid #777;
    border-radius: 25px;
    bottom: 20px;
    height: 50px;
    position: fixed;
    right: 20px;
    width: 50px;
    z-index: 99999;
	text-indent: -9999px;
}

#gotop:after {
    display: block;
	content:'';
    height: 0px;
    transition: all 0.5s ease 0s;
    width: 0px;
	border-bottom:15px solid #777;
	border-right:10px solid transparent;
	border-left:10px solid transparent;
	position:absolute;
	top:15px;
	left:15px;
}
#gotop:hover:after{-webkit-animation: slideOutUp 1s infinite;
  animation: slideOutUp 1s infinite;}

html,body{ height:100%;}
body{ background:url(images/bg.jpg) no-repeat fixed center center/cover;}
.index{ min-height:100%; display:flex; align-items: center; justify-content: center; width:100%; max-width:980px; margin:0 auto;}
.logo{ position:relative;}
.logo img{ width:100%;}
.logo_bg{ -webkit-animation-name: fadeIn; animation-name: fadeIn; animation-duration: 1s; -webkit-animation-duration: 1s;}
.title{ position:absolute; top:0;left:0; -webkit-animation-name: bounceIn;
  animation-name: bounceIn; animation-duration: 1s; -webkit-animation-duration: 1s;}
.text{ position:absolute; top:0;left:0; -webkit-animation-name: bounceIn;
  animation-name: bounceIn; animation-duration: 1s; -webkit-animation-duration: 1s;}

.star1{ position:absolute; left:41%; top:0.2%; width:6px; height:6px; border-radius:10px; background-color:#fff; -webkit-animation: shinning 2s 0s infinite; animation: shinning 2s 0s infinite;}
.star2{ position:absolute; left:79.1%; top:12.8%; width:6px; height:6px; border-radius:10px; background-color:#fff; -webkit-animation: shinning 2s 1s infinite; animation: shinning 2s 1s infinite;}
nav a{ position:absolute; font-family:'微軟正黑體',Verdana, Geneva, sans-serif; font-weight:bold; font-size:18px; color:#fff; text-decoration:none; width:10px; height:10px; border-radius:10px; position:absolute;}
nav a:hover{ color:#fff; text-decoration:none;}
nav a:after{ display:block; position:absolute; text-align:center; width:150px; height:30px; line-height:30px;}
nav a:hover:after{ background-color:rgba(0,0,0,0.7); border-radius:5px;}
.page1{ left:12.3%; top:36.2%; background-color:#c5903c; animation-name: fadeIn00; -webkit-animation-name: fadeIn00; animation-duration: 2s; -webkit-animation-duration: 2s;}
.page1:after{content:'推薦小說就打折';top:-32px; left:-60px;}

.page2{ left:21.6%; top:84.8%; background-color:#41c238;animation-name: fadeIn00; -webkit-animation-name: fadeIn00; animation-duration: 2s; -webkit-animation-duration: 2s;}
.page2:after{ content:'2015年度之最'; bottom:-32px; left:-82px;}

.page3{ left:59.6%; top:97%; background-color:#4492ab; animation-name: fadeIn00; -webkit-animation-name: fadeIn00; animation-duration: 2s; -webkit-animation-duration: 2s;}
.page3:after{ content:'週年慶限時贈'; bottom:-32px; left:-72px;}

.page4{ left:88.3%; top:61%; background-color:#ff6029; animation-name: fadeIn00; -webkit-animation-name: fadeIn00; animation-duration: 2s; -webkit-animation-duration: 2s;}
.page4:after{ content:'週年慶免費讀'; bottom:-32px; left:-62px;}

.pnav a{ display:block; width:300px; text-align:center; height:30px; line-height:30px; border-radius:8px;float:left; margin-bottom:50px; text-decoration:none; color:#fff; font-weight:bold; animation-name: fadeIn00;  -webkit-animation-name: fadeIn00; animation-duration: 2s; -webkit-animation-duration: 2s;}
.pnav a+a{ margin-left:40px;}
.cpage1{ background-color:#c5903c;}
.cpage2{ background-color:#41c238;}
.cpage3{ background-color:#4492ab;}
.cpage4{ background-color:#ff6029;}


/**/
.content{ width:100%; max-width:980px; margin:0 auto;}
.content p{ color:#fff; font-size:16px; line-height:1.5; margin-bottom:30px;}
.content p img{ vertical-align:middle; padding:5px;}
.content p strong{ color:#F00;}
.content p a{ text-decoration:none; color:#b5e0e5; border-bottom:1px solid;}
.page-tilte img{ width:100%;}
h2.page-tilte{ padding-top:80px; -webkit-animation-name: bounceIn;
  animation-name: bounceIn; animation-duration: 1s; -webkit-animation-duration: 1s;}
h3.page-tilte{ padding-top:20px; margin-bottom:50px; animation-name: fadeIn00; -webkit-animation-name: fadeIn00; animation-duration: 2s; -webkit-animation-duration: 2s;}
.wrap-box{ background-color:rgba(0,0,0,0.5); width:850px; margin:0 auto 50px auto; padding:30px 25px; box-sizing:border-box;}
.stitle{ display:inline-block; padding:2px 25px; border-radius:8px; line-height:28px; font-size:18px; color:#fff; margin-bottom:20px; clear:both;}
.btn-default{ display:block; text-align:center;}
.btn-default a{display:inline-block; padding:10px 30px; color:#fff; font-weight:bold; font-size:20px;  background-color:#4614ff; text-decoration:none; box-shadow:0px 0px 10px 5px #7741f9 inset,0px 0px 5px 5px rgba(97,65,218,0.5);-webkit-animation: pulse 1s infinite;
  animation: pulse 1s infinite;}
.btn-default a:hover{-webkit-animation: none;
  animation: none;}

.recommend .stitle{ background-color:#af7215;}

.best .stitle{ background-color:#1d9816;}
.best .ss{ font-weight:normal; color:#aceaa9;}
.book{ width:180px;}
.books-area{ padding:10px 0;overflow: hidden;}
.book{ display:block; width:25%; float:left; text-align:center; height:350px; color:#fff; text-decoration:none;}
.book:hover{ color:#fff;}
.book img{ width:180px;}
.name{ font-weight:bold; font-size:20px;}

.memberlist{ color:#eed60f; font-weight:bold;}
.memberlist li{ margin:10px 0;}

.gift{ padding-bottom:100px;}
.week{ font-weight:bold; padding:5px 0; line-height:28px; font-size:18px; color:#fff; clear:both; background-color:#0379ae; width:250px; margin:0 auto; font-size:16px;}
.week b{ display:block; color:#eed60f;font-size:20px;}
.gift-book{ display:block; width:33%; text-align:center; text-decoration:none; float:left; height:500px;}
.gift-book img{ width:250px;}

.free .stitle{ background-color:#cb3b14}
.free-book{display:block; width:14.2%; text-align:center; text-decoration:none; float:left; height:300px; color:#fff;}
.free-book:hover{ color:#fff;}
.free-book img{ width:120px;}
.free-book .name{ font-size:16px;}
.free-book .author{ font-size:14px;}